/* CertaRounds — Analytics screen styles (src/screens/analytics.js).
   Semantic tokens only (docs/COMPONENTS.md §2); every rule is scoped under the screen.
   Widgets (ReadinessHero, StatCard, MasteryBars, WeakTopicsTable, TrendChart, RingGauge, KpiStrip)
   keep their own styles — this file only lays them out and styles the screen's own parts. */

/* ============ Layout ============
   Phone, tablet and 1024–1099: one column (readiness, a 2 × 2 → 4-up stat row, the cards).
   ≥ 1100 (.an--wide): main + side columns whose bottoms line up, then What Costs You Points full width.
   The readiness card and the four stats share one row only from 1400, where every stat label fits
   on one line (R1 D5). */
main[data-screen="analytics"] .an { display: flex; flex-direction: column; gap: var(--sp-4); min-width: 0; }
main[data-screen="analytics"] .an-head { margin-bottom: 0; }
main[data-screen="analytics"] .an-top,
main[data-screen="analytics"] .an-col,
main[data-screen="analytics"] .an-pair,
main[data-screen="analytics"] .an-coldgrid { display: flex; flex-direction: column; gap: var(--sp-4); min-width: 0; }
main[data-screen="analytics"] .an-stats__cell { display: flex; min-width: 0; }
main[data-screen="analytics"] .an-stats__cell > .card { flex: 1 1 auto; min-width: 0; }

@media (min-width: 768px) {
  main[data-screen="analytics"] .an,
  main[data-screen="analytics"] .an-top,
  main[data-screen="analytics"] .an-col,
  main[data-screen="analytics"] .an-pair,
  main[data-screen="analytics"] .an-coldgrid { gap: var(--sp-5); }
}

@media (min-width: 1100px) {
  main[data-screen="analytics"] .an--wide,
  main[data-screen="analytics"] .an--wide .an-top,
  main[data-screen="analytics"] .an--wide .an-col { gap: 20px; }
  main[data-screen="analytics"] .an--wide .an-cols,
  main[data-screen="analytics"] .an--wide .an-pair {
    display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 20px; align-items: stretch;
  }
  /* Cards size to their content (R3 P1): a short card is never stretched into a blank panel. */
  /* Day one: locked readiness beside today's first step, the same height. */
  main[data-screen="analytics"] .an--wide .an-coldgrid {
    display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 20px; align-items: stretch;
  }
  main[data-screen="analytics"] .an--wide .an-coldgrid .an-suggest { height: 100%; display: flex; align-items: center; }
  main[data-screen="analytics"] .an--wide .an-unlock .list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--sp-8); }
}
@media (min-width: 1400px) {
  main[data-screen="analytics"] .an--wide .an-cols,
  main[data-screen="analytics"] .an--wide .an-pair { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  main[data-screen="analytics"] .an--wide .an-top {
    display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 16px; align-items: stretch;
  }
  main[data-screen="analytics"] .an--wide .an-top .an-ready { height: 100%; justify-content: center; }
  main[data-screen="analytics"] .an--wide .an-top .an-stats { gap: 12px; }
}

/* Phones: compact stat tiles two by two (mockup phone 4 density). */
@media (max-width: 767px) {
  main[data-screen="analytics"] .an-stats--compact { gap: var(--sp-2); }
}

/* ============ Card footers, "show more", notes ============ */
main[data-screen="analytics"] .an-foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px var(--sp-3);
  margin-top: var(--sp-3); padding-top: var(--sp-2); border-top: 1px solid var(--divider);
}
main[data-screen="analytics"] .an-foot__link { margin-left: auto; }
/* Footer links share one size (R3 P2); on phones, when they stack, both sit on the left edge. */
main[data-screen="analytics"] .an-foot .link-more,
main[data-screen="analytics"] .an-foot .an-more { font-size: var(--fs-13); font-weight: var(--fw-semibold); }
@media (max-width: 767px) {
  main[data-screen="analytics"] .an-foot { justify-content: flex-start; }
  main[data-screen="analytics"] .an-foot__link { margin-left: 0; }
}
main[data-screen="analytics"] .an-more {
  display: inline-flex; align-items: center; gap: 4px; min-height: 44px; padding: 0 4px; margin-left: -4px;
  border: 0; background: none; border-radius: var(--r-sm); cursor: pointer;
  font: inherit; font-size: var(--fs-13); font-weight: var(--fw-semibold); color: var(--link);
}
main[data-screen="analytics"] .an-more:hover { color: var(--link-hover); }
main[data-screen="analytics"] .an-more:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
main[data-screen="analytics"] .an-note { margin: 0; font-size: var(--fs-13); line-height: var(--lh-snug); color: var(--text-2); }
main[data-screen="analytics"] .an-note--quiet { color: var(--text-3); }
main[data-screen="analytics"] .an-note__delta { font-weight: var(--fw-semibold); color: var(--text-strong); font-variant-numeric: tabular-nums; }
main[data-screen="analytics"] .an-note__delta.is-up { color: var(--success); }
main[data-screen="analytics"] .an-note__delta.is-down { color: var(--danger); }

/* Disabled action + its reason */
.an-act--off { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.an-act__why { margin: 0; font-size: var(--fs-13); line-height: var(--lh-snug); color: var(--text-2); }

/* Phone: the header dropdowns (the widgets' compact PeriodSelect) reach 44px like every DS control (R1 D7). */
@media (max-width: 767px) {
  main[data-screen="analytics"] .w-select__input { height: 44px; }
}

/* ============ Performance Trend (TrendChart metrics toggle + this period's activity strip) ============ */
main[data-screen="analytics"] .an-kpi { margin-top: var(--sp-3); padding-top: var(--sp-3); border-top: 1px solid var(--divider); container-type: inline-size; }
/* The four period figures are 2 × 2 or 4 across, never 3 + 1 (R3 P1). */
main[data-screen="analytics"] .an-kpi .kpi__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@container (min-width: 520px) {
  main[data-screen="analytics"] .an-kpi .kpi__list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
main[data-screen="analytics"] .an-kpi__head {
  margin: 0 0 2px; font-size: var(--fs-12); font-weight: var(--fw-semibold); letter-spacing: .04em;
  text-transform: uppercase; color: var(--text-3);
}
main[data-screen="analytics"] .an-kpi .kpi__item { padding: 10px 12px 8px; }

/* ============ What costs you points: the biggest cost beside the ranked list when the card is wide enough ============ */
main[data-screen="analytics"] .an-costs { container-type: inline-size; }
@container (min-width: 560px) {
  /* .an-costs .an-costs__body: one step more specific than the base (flex) rule further down. */
  main[data-screen="analytics"] .an-costs .an-costs__body {
    display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--sp-6); row-gap: var(--sp-2); align-items: start;
  }
  main[data-screen="analytics"] .an-costs .an-costs__top { grid-column: 1; grid-row: 1 / span 3; align-self: start; }   /* sized to its content, top-aligned with the list (R3 P2) */
  main[data-screen="analytics"] .an-costs .an-costs__body > :not(.an-costs__top) { grid-column: 2; }
}

/* ============ What costs you points ============ */
main[data-screen="analytics"] .an-costs__body { display: flex; flex-direction: column; gap: var(--sp-3); }
main[data-screen="analytics"] .an-costs__top {
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
  padding: 14px 16px; border-radius: var(--r-md); background: var(--surface-2);
}
main[data-screen="analytics"] .an-costs__lead { display: flex; flex-direction: column; gap: 2px; margin: 0; }
main[data-screen="analytics"] .an-costs__eyebrow {
  font-size: var(--fs-12); font-weight: var(--fw-semibold); letter-spacing: .06em; text-transform: uppercase; color: var(--text-3);
}
main[data-screen="analytics"] .an-costs__big {
  font-size: var(--fs-20); font-weight: var(--fw-bold); letter-spacing: var(--tracking-tight); line-height: var(--lh-snug); color: var(--text-strong);
}
main[data-screen="analytics"] .an-costs__share { font-size: var(--fs-13); color: var(--text-2); font-variant-numeric: tabular-nums; }
main[data-screen="analytics"] .an-costs__hint { margin: 0 0 4px; font-size: var(--fs-13); line-height: var(--lh-snug); color: var(--text-2); }
main[data-screen="analytics"] .an-costs__list { display: flex; flex-direction: column; gap: 2px; container-type: inline-size; }
main[data-screen="analytics"] .an-costs__src { margin-top: 2px; }

main[data-screen="analytics"] .an-cost {
  display: grid; width: 100%; min-height: 44px; align-items: center; column-gap: 10px; row-gap: 6px;
  grid-template-columns: minmax(0, 1fr) auto auto 16px;
  grid-template-areas: "label n pct chev" "track track track chev";
  padding: 10px 8px; margin: 0; border: 0; border-radius: var(--r-sm); background: none; cursor: pointer;
  font: inherit; text-align: left; color: var(--text);
  transition: background var(--dur-1) var(--ease-out);
}
main[data-screen="analytics"] .an-cost:hover { background: var(--surface-hover); }
main[data-screen="analytics"] .an-cost:active { background: var(--surface-pressed); }
main[data-screen="analytics"] .an-cost:focus-visible { outline: 2px solid var(--focus); outline-offset: 0; }
main[data-screen="analytics"] .an-cost__label { grid-area: label; min-width: 0; font-size: var(--fs-15); font-weight: var(--fw-medium); line-height: var(--lh-snug); color: var(--text-strong); }
main[data-screen="analytics"] .an-cost__tag {
  display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: var(--r-pill); vertical-align: 1px;
  font-size: 11px; font-weight: var(--fw-medium); line-height: 1.5; color: var(--text-2); background: var(--surface-sunken);
}
main[data-screen="analytics"] .an-cost__n { grid-area: n; font-size: var(--fs-13); color: var(--text-2); font-variant-numeric: tabular-nums; }
main[data-screen="analytics"] .an-cost__pct { grid-area: pct; min-width: 3ch; text-align: right; font-size: var(--fs-15); font-weight: var(--fw-semibold); color: var(--text-strong); font-variant-numeric: tabular-nums; }
main[data-screen="analytics"] .an-cost__track { grid-area: track; height: 8px; border-radius: var(--r-pill); background: var(--track); overflow: hidden; }
main[data-screen="analytics"] .an-cost__fill { display: block; height: 100%; border-radius: inherit; background: var(--bar-fill); }
main[data-screen="analytics"] .an-cost__chev { grid-area: chev; color: var(--text-3); }
@container (min-width: 470px) {
  main[data-screen="analytics"] .an-cost {
    grid-template-columns: minmax(0, 1fr) 40px minmax(90px, 34%) 44px 16px;
    grid-template-areas: "label n track pct chev";
  }
  main[data-screen="analytics"] .an-cost__n { text-align: right; }
}

/* ============ Confidence calibration ============ */
main[data-screen="analytics"] .an-cal__rings {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-2);
  justify-items: center; align-items: start; margin: var(--sp-2) 0 var(--sp-4);
}
main[data-screen="analytics"] .an-cal__ring { display: flex; justify-content: center; min-width: 0; }
main[data-screen="analytics"] .an-cal__verdict {
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
  padding: 14px 16px; border-radius: var(--r-md); background: var(--surface-2);
}
main[data-screen="analytics"] .an-cal__text { margin: 0; font-size: var(--fs-15); line-height: var(--lh-body); color: var(--text); }
main[data-screen="analytics"] .an-cal > .an-note { margin-top: var(--sp-3); }

/* ============ Sheets (rendered outside <main>, so scoped by their own root) ============ */
.an-sheet { display: flex; flex-direction: column; gap: var(--sp-3); }
.an-sheet__hero { display: flex; align-items: center; gap: 14px; }
.an-sheet__gem { flex: 0 0 auto; display: inline-flex; }
.an-sheet__value { margin: 0; font-size: var(--fs-30); font-weight: var(--fw-bold); letter-spacing: var(--tracking-tight); line-height: var(--lh-tight); color: var(--text-strong); font-variant-numeric: tabular-nums; }
.an-sheet__value.is-empty { font-size: var(--fs-20); color: var(--text-2); }
.an-sheet__sub { margin: 2px 0 0; font-size: var(--fs-13); color: var(--text-2); }
.an-sheet__what { margin: 0; font-size: var(--fs-15); line-height: var(--lh-body); color: var(--text); }
.an-sheet__weight {
  display: flex; align-items: flex-start; gap: 8px; margin: 0; padding: 10px 12px; border-radius: var(--r-sm);
  font-size: var(--fs-13); line-height: var(--lh-snug); color: var(--text-2); background: var(--surface-2);
}
.an-sheet__weight svg { flex: 0 0 auto; margin-top: 1px; color: var(--text-accent); }
.an-sheet__h {
  margin: var(--sp-2) 0 0; font-size: var(--fs-12); font-weight: var(--fw-semibold); letter-spacing: .06em;
  text-transform: uppercase; color: var(--text-3);
}
.an-sheet__hint { margin: 0; font-size: var(--fs-15); line-height: var(--lh-body); color: var(--text); }
.an-facts { margin: 0; display: flex; flex-direction: column; }
.an-facts__row {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3);
  padding: 10px 0; border-bottom: 1px solid var(--divider);
}
.an-facts__row:last-child { border-bottom: 0; }
.an-facts dt { font-size: var(--fs-15); color: var(--text-2); }
.an-facts dd { margin: 0; font-size: var(--fs-15); font-weight: var(--fw-semibold); color: var(--text-strong); text-align: right; font-variant-numeric: tabular-nums; }

/* Phones: the one caption line under the compact 4-up stats. */
main[data-screen="analytics"] .an-stats-wrap { display: flex; flex-direction: column; gap: 6px; }
main[data-screen="analytics"] .an-stats__note { padding: 0 4px; font-size: var(--fs-12); }

/* Day one: the first-step card (title, what, the pill). */
main[data-screen="analytics"] .an-first { display: flex; flex-direction: column; }
main[data-screen="analytics"] .an-first__what { margin: var(--sp-2) 0 var(--sp-4); font-size: var(--fs-15); line-height: var(--lh-snug); color: var(--text-2); }
main[data-screen="analytics"] .an-first__what strong { color: var(--text-strong); font-weight: var(--fw-semibold); }
main[data-screen="analytics"] .an-first__go { align-self: flex-start; margin-top: auto; }

/* Specialty Mastery footer: both links start at the left edge, whether they share a line or stack (R3 P2). */
main[data-screen="analytics"] .an-specs .an-foot { justify-content: flex-start; column-gap: var(--sp-5); }
main[data-screen="analytics"] .an-specs .an-foot__link { margin-left: 0; }

/* R4 P2: footer links reach a 44px tap target on phones (their ::after alone stopped at 43.5px). */
@media (max-width: 767px) {
  main[data-screen="analytics"] .an-foot .link-more,
  main[data-screen="analytics"] .an-foot .an-more { display: inline-flex; align-items: center; min-height: 44px; }
}
/* R4 P2: sheet paragraphs run one full measure (no balanced, early-stopping tail). */
.an-sheet p { text-wrap: wrap; max-width: none; }
/* Day one: the unlock list leads with the page's own gems. */
main[data-screen="analytics"] .an-unlock__gem { display: inline-flex; width: 36px; justify-content: center; opacity: .85; }

/* F5 (R5 P1): rows end flush. Each row stretches to its taller side; in the shorter side the last card
   takes the extra height and its content absorbs it — footers sit at the card's foot, the calibration
   rings centre in the space. */
@media (min-width: 1100px) {
  main[data-screen="analytics"] .an--wide .an-col > :last-child { flex: 1 1 auto; }
  main[data-screen="analytics"] .an--wide .an-trend > .an-foot,
  main[data-screen="analytics"] .an--wide .an-specs > .an-foot,
  main[data-screen="analytics"] .an--wide .an-costs .an-costs__src { margin-top: auto; }
  main[data-screen="analytics"] .an--wide .an-costs > .an-costs__body { flex: 1 1 auto; }
  main[data-screen="analytics"] .an--wide .an-cal .an-cal__rings { flex: 1 1 auto; align-content: center; }
}
/* F5 (R5 P1): on phones the footer links are already 44px tall, so the DS ::after hit-area expansion
   is dropped — it overlapped "Show all 19 specialties" above it. */
@media (max-width: 767px) {
  main[data-screen="analytics"] .an-foot .link-more::after { inset: 0; }
}