/* ============================================================
   HR Data Quality project — page styles.
   Reuses the portfolio's design tokens from ../../../styles.css
   (--petrol, --accent, --ink, --line, --surface, --radius, …).
   Only project-specific components are defined here; nothing in
   the main site is altered.
   ============================================================ */

/* Project intro / hero (lighter than the main site hero) */
.proj-hero {
  background: linear-gradient(160deg, var(--petrol) 0%, var(--petrol-deep) 100%);
  color: #eaf4f4;
  padding: clamp(2.5rem, 6vw, 4rem) 1.5rem;
}
.proj-hero__inner { max-width: var(--maxw); margin-inline: auto; }
.proj-hero__eyebrow {
  text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.78rem;
  font-weight: 600; color: #9fd6d9; margin-bottom: 0.6rem;
}
.proj-hero h1 { font-size: clamp(1.8rem, 4.5vw, 2.6rem); color: #fff; margin-bottom: 0.6rem; }
.proj-hero p { max-width: 70ch; color: #e7f3f3; }
.proj-hero__links { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.5rem; }

/* Synthetic-data banner — always visible, impossible to miss */
.synthetic-banner {
  display: flex; gap: 0.6rem; align-items: center;
  max-width: var(--maxw); margin: 1.25rem auto 0; padding: 0.7rem 1rem;
  background: #fff4d6; border: 1px solid #e6c34a; border-radius: var(--radius-sm);
  color: #6b5200; font-size: 0.9rem; font-weight: 600;
}
.synthetic-banner::before { content: "⚠"; font-size: 1.1rem; }

/* Metric cards (headline numbers) */
.metrics {
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}
.metric {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 1.25rem; text-align: center;
}
.metric__value { font-size: clamp(1.6rem, 4vw, 2.2rem); font-weight: 700; color: var(--petrol-dark); line-height: 1.1; }
.metric__label { display: block; margin-top: 0.35rem; font-size: 0.82rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; }
.metric--accent .metric__value { color: var(--accent); }

/* Chart grid */
.chart-grid {
  display: grid; gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}
.chart-card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow); padding: 1rem 1.1rem;
}
.chart-card--wide { grid-column: 1 / -1; }
.chart-card__plot { width: 100%; min-height: 320px; }

/* Accessible data-table fallback for every chart (toggleable) */
.chart-card__table-toggle {
  margin-top: 0.5rem; font-size: 0.82rem; background: none; border: none;
  color: var(--petrol); cursor: pointer; text-decoration: underline; padding: 0.25rem 0;
}
.data-table { width: 100%; border-collapse: collapse; margin-top: 0.6rem; font-size: 0.9rem; }
.data-table caption { text-align: left; color: var(--faint); font-size: 0.8rem; margin-bottom: 0.3rem; }
.data-table th, .data-table td { border: 1px solid var(--line); padding: 0.4rem 0.6rem; text-align: left; }
.data-table th { background: var(--accent-soft); color: var(--petrol-dark); }
.data-table[hidden] { display: none; }

/* Before/after comparison */
.compare-controls { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 1.25rem; flex-wrap: wrap; }
.toggle-group { display: inline-flex; border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; }
.toggle-group button {
  border: none; background: var(--surface); color: var(--muted);
  padding: 0.5rem 1rem; font-weight: 600; cursor: pointer; font-size: 0.9rem;
}
.toggle-group button[aria-pressed="true"] { background: var(--petrol); color: #fff; }

.compare-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.record-card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.1rem 1.2rem;
}
.record-card__head { display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem; margin-bottom: 0.5rem; }
.record-card__id { font-weight: 700; color: var(--petrol-dark); font-family: ui-monospace, monospace; }
.record-card__status { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; padding: 0.15rem 0.5rem; border-radius: 999px; }
.status--clean { background: var(--accent-soft); color: var(--petrol-dark); }
.status--flagged { background: #fff4d6; color: #6b5200; }
.record-card__note { font-size: 0.88rem; color: var(--muted); margin-bottom: 0.75rem; }
.field-row { display: grid; grid-template-columns: 9rem 1fr; gap: 0.5rem; padding: 0.3rem 0; border-top: 1px dashed var(--line); font-size: 0.9rem; }
.field-row__key { color: var(--faint); text-transform: capitalize; }
.field-row__val { font-family: ui-monospace, monospace; word-break: break-word; }
.field-row--changed .field-row__val { background: #fff4d6; border-radius: 3px; padding: 0 0.25rem; }
.field-row__val--empty { color: var(--faint); font-style: italic; }
.flags { margin-top: 0.6rem; font-size: 0.8rem; color: var(--muted); }
.flags code { background: var(--bg-alt); padding: 0.1rem 0.35rem; border-radius: 3px; }

/* Rules table */
.rules-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.rules-table th, .rules-table td { border: 1px solid var(--line); padding: 0.5rem 0.7rem; text-align: left; vertical-align: top; }
.rules-table th { background: var(--accent-soft); color: var(--petrol-dark); position: sticky; top: 0; }
.rules-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.rules-table code { font-weight: 700; color: var(--petrol); }
.table-scroll { overflow-x: auto; }

/* Back link */
.backlink { display: inline-block; margin-bottom: 0.5rem; font-size: 0.9rem; }