/* CertaRounds — Home screen styles (src/screens/home.js, v2). Owned by the Home agent.
   Semantic tokens only (docs/COMPONENTS.md §2). Every rule is scoped under .home* classes;
   components and widgets are laid out here, never restyled. */

/* =====================================================================================
   Phone (< 768) — focused Home, mockup phone 2 + the borrowed screens-mascot-heavy moments
   ===================================================================================== */
.home { display: flex; flex-direction: column; gap: var(--sp-3); min-width: 0; }
/* Phone rhythm: one gap between cards; a slightly larger one only before a titled section (the carousel). */
.home--phone { gap: var(--sp-4); }
.home--phone > .home-specs { margin-top: var(--sp-2); }

/* ---------- Greeting ---------- */
.home-greet { padding-top: var(--sp-1); margin-bottom: var(--sp-1); min-width: 0; }
.home-greet__title {
  font-size: var(--fs-30);
  line-height: 1.12;
  letter-spacing: var(--tracking-tight);
  color: var(--text-strong);
  overflow-wrap: break-word;                       /* D19: wrap between words; break only a single over-long token */
  text-wrap: balance;
}
.home-greet__hello {
  display: block;
  margin-bottom: 2px;
  font-size: var(--fs-17);
  font-weight: var(--fw-regular);
  letter-spacing: 0;
  line-height: 1.35;
  color: var(--text);
}
.home-greet__name { display: block; }
.home-greet--long .home-greet__title { font-size: var(--fs-24); line-height: 1.2; }
.home-greet--xlong .home-greet__title { font-size: var(--fs-20); line-height: 1.25; }
.home-greet__sub { margin-top: 6px; font-size: var(--fs-15); line-height: 1.45; color: var(--text-2); }

/* ---------- Countdown + streak: two half cards side by side (mockup phone 2) ---------- */
.home-duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); }
.home-duo > .card { height: 100%; }
.home-half { --card-p: 12px; }
.home-half__in { position: relative; display: flex; align-items: flex-start; gap: var(--sp-2); min-width: 0; padding-right: 14px; }
.home-half__gem { display: inline-grid; place-items: center; width: 32px; height: 32px; flex-shrink: 0; }
.home-half__body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.home-half__label { font-size: var(--fs-12); font-weight: var(--fw-semibold); color: var(--text-strong); line-height: 1.3; }
.home-half__value {
  font-size: var(--fs-20); font-weight: var(--fw-bold); letter-spacing: var(--tracking-tight);
  line-height: 1.2; color: var(--text-accent); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.home-half__empty { font-size: var(--fs-15); font-weight: var(--fw-semibold); color: var(--text-2); line-height: 1.45; }
.home-half__cap { font-size: var(--fs-12); color: var(--text-3); line-height: 1.35; }
.home-half__cap--action { color: var(--link); font-weight: var(--fw-semibold); }
.home-half__chev { position: absolute; right: -6px; top: 1px; }

/* ---------- Review row (phone) ---------- */
.home-revrow { --card-p: 12px 14px 12px 12px; }
.home-row { display: flex; align-items: center; gap: var(--sp-3); width: 100%; min-width: 0; text-align: left; }
.home-row__gem { display: inline-grid; place-items: center; width: 44px; height: 44px; flex-shrink: 0; }
.home-row__body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }

/* ---------- Today's Prescription (phone) ---------- */
.home-rx { display: flex; flex-direction: column; min-width: 0; }
.home-rx__head { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; }
.home-rx__head--col { align-items: flex-start; }                      /* title, meta, why and focus share one left edge */
.home-rx__head--col .home-mix { margin-top: var(--sp-2); }
.home-rx__head--col .home-rx__focus { margin-top: 2px; }
.home-rx__gem { display: inline-grid; place-items: center; width: 44px; height: 44px; flex-shrink: 0; }
.home-rx__tile { color: var(--accent-soft-fg); }
.home-rx__tile--success { background: var(--success-bg); color: var(--success-strong); }
.home-rx__heading { min-width: 0; flex: 1 1 auto; }
.home-rx__title { font-size: var(--fs-17); font-weight: var(--fw-bold); letter-spacing: var(--tracking-snug); line-height: 1.3; color: var(--text-strong); }
.home-rx__meta { margin-top: 2px; font-size: var(--fs-15); line-height: 1.4; color: var(--text-2); font-variant-numeric: tabular-nums; }
.home-rx__num { color: var(--text-strong); font-weight: var(--fw-semibold); }
.home-rx__meta .home-rx__num { font-weight: var(--fw-medium); color: var(--text); }   /* the value line reads second, under the bold title */
.home-nowrap { white-space: nowrap; }
.home-nowrap > .home-rx__dot { margin-left: 0; }                     /* the space before the group already separates it */
.home-rx__dot { margin: 0 6px; color: var(--text-3); }

.home-rx__why { margin-top: var(--sp-3); padding-top: var(--sp-3); border-top: 1px solid var(--divider); }
.home-rx__because { font-size: var(--fs-13); line-height: 1.5; color: var(--text-2); }
.home-rx--progress .progress { margin: 4px 0 10px; }

/* the mix is a sentence: commas at line ends read naturally; a stray "·" never does */
.home-mix { font-size: var(--fs-13); line-height: 1.55; color: var(--text-2); text-wrap: pretty; }   /* even lines, no early break */
.home-mix__item { white-space: normal; }                             /* only the number and its first word are glued (nbsp) */
.home-mix__n { color: var(--text-strong); font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; }
.home-mix__lead { color: var(--text-3); font-weight: var(--fw-medium); }

.home-rx__focus { font-size: var(--fs-13); line-height: 1.45; color: var(--text-2); margin-top: var(--sp-1); }
.home-rx__focus-label { color: var(--text-3); font-weight: var(--fw-medium); }
.home-rx__topic { color: var(--text-2); }                             /* inline: the topic flows right after "Focus:" and wraps */
.home-rx__more { color: var(--text-3); font-weight: var(--fw-semibold); }

.home-rx__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-4); }
.home-rx__actions--row { flex-wrap: nowrap; }
.home-rx__actions--row .home-rx__start { flex: 1 1 auto; min-width: 0; }
.home-rx__customicon { flex: 0 0 auto; }
.home-rx__actions--pair .home-rx__start { flex: 3 1 auto; order: 2; }
.home-rx__actions--pair .home-rx__custom { flex: 1 1 auto; order: 1; }

/* ---------- This Week (phone) ---------- */
.home-week .card__head { margin-bottom: var(--sp-3); }
.home-week__meta { font-size: var(--fs-15); font-weight: var(--fw-medium); color: var(--text-2); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Small phones (< 380): one-line tagline and a smaller half-card value keep Start in the first screen.
   The Focus line stays at every width (D18). */
@media (max-width: 379px) {
  .home--phone .home-greet__sub { font-size: var(--fs-13); }
  .home-half__value { font-size: var(--fs-17); }
}

/* ---------- Study by specialty (phone) ---------- */
.home-specs { display: flex; flex-direction: column; gap: var(--sp-3); min-width: 0; }

/* ---------- Review row (phone) ---------- */
.home-revrow__title { font-size: var(--fs-15); font-weight: var(--fw-semibold); color: var(--text-strong); line-height: 1.35; }
.home-revrow__sub { font-size: var(--fs-13); color: var(--text-2); line-height: 1.4; font-variant-numeric: tabular-nums; }

/* =====================================================================================
   Dashboard (≥ 768) — desktop-dashboard.webp.
     ≥1200      the mockup: readiness beside the four stats, then rows of 3 + 3 cards on ONE column
                template (gutters line up). 1200–1399: 24px page gutters, 16px card padding and gaps,
                so 1280×800 and 1366×768 keep "Start Daily Round" in the first screen (R1 D5).
     768–1199   one ordered 2-column grid, prescription first (the CTA stays in the first screen):
                greeting · Prescription · Readiness · stats · Streak | Mastery · Trend | Weakest · Suggested + Plan
   ===================================================================================== */
.home--dash { gap: var(--sp-4); }
.home-drow { display: grid; gap: var(--sp-4); align-items: stretch; min-width: 0; }
.home-drow > * { min-width: 0; }
.home-drow--greet { grid-template-columns: minmax(0, 1fr) minmax(0, 320px); align-items: center; gap: var(--sp-5); }
.home-dcol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); align-items: start; min-width: 0; }
.home-dcol > * { width: 100%; min-width: 0; }                        /* fresh learner: the plan card fills its column too */

@media (min-width: 768px) and (max-width: 1199px) {
  .home--dash { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; }
  .home--dash > .home-drow--top,
  .home--dash > .home-dgrid,
  .home-dgrid > .home-drow { display: contents; }                   /* their cards become items of the page grid */
  .home-drow--greet { grid-column: 1 / -1; order: 0; }
  .home-drow--mid > :nth-child(1) { grid-column: 1 / -1; order: 1; }  /* Today's Prescription */
  .home-drow--top > :nth-child(1) { grid-column: 1 / -1; order: 2; }  /* Board Readiness */
  .home-drow--top > :nth-child(2) { grid-column: 1 / -1; order: 3; }  /* four stat cards */
  .home-drow--mid > :nth-child(2),
  .home-drow--mid > :nth-child(3) { order: 4; }                       /* Streak | Mastery */
  .home-drow--low > :nth-child(1),
  .home-drow--low > :nth-child(2) { order: 5; }                       /* Trend | Weakest */
  .home-drow--low > :nth-child(3) { grid-column: 1 / -1; order: 6; }  /* Suggested + Plan */

  /* The full-width prescription is a two-column card here (not a stretched phone card with a ~790px pill):
     left = stats + Start right under them; right = why + focus. Each column is as tall as its content. */
  .home--dash .home-drx { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--sp-7);
    grid-template-areas: "head head" "left right"; align-content: start; }
  .home--dash .home-drx > .w-head { grid-area: head; }
  .home--dash .home-drx__left { grid-area: left; display: flex; flex-direction: column; min-width: 0; }
  .home--dash .home-drx__right { grid-area: right; display: flex; flex-direction: column; min-width: 0; }
  .home--dash .home-drx__right > .home-drx__why { margin-top: 0; }
  .home--dash .home-drx__left > .home-drx__actions { margin-top: 0; padding-top: var(--sp-5); }
}
.home-dstats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-3); min-width: 0; }
.home-dstats > * { min-width: 0; }

/* Greeting row */
.home-greet--dash { padding-top: 0; margin-bottom: 0; }
.home-greet--dash .home-greet__hello {
  font-size: var(--fs-13); font-weight: var(--fw-semibold); letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-2); margin-bottom: 4px;
}
.home-greet--dash .home-greet__title { font-size: var(--fs-30); line-height: 1.1; letter-spacing: -0.025em; }
.home-greet--dash.home-greet--long .home-greet__title { font-size: var(--fs-24); line-height: 1.2; }
.home-greet--dash.home-greet--xlong .home-greet__title { font-size: var(--fs-20); line-height: 1.25; }
.home-greet--dash .home-greet__sub { font-size: var(--fs-15); margin-top: var(--sp-2); }
.home-quote { min-width: 0; }

/* Cards that share a row stretch to the row's height; the prescription's actions sit at its bottom. */
.home-dcard { height: 100%; }
/* Cards whose content is naturally shorter end at their content (no stretched empty bottom): */
.home-dstreak.home-dcard, .home-dmastery.home-dcard, .home-dplan.home-dcard { height: auto; align-self: start; }
.home-rx.home-dcard .home-rx__actions { margin-top: auto; padding-top: var(--sp-4); }   /* in progress · done · empty */

/* Today's Prescription (dashboard) */
.home-drx { display: flex; flex-direction: column; }
/* ≥ 1200 (and by default) the two groups dissolve into the card's one column: stats · progress · why · focus · actions */
.home-drx__left, .home-drx__right { display: contents; }
.home-drx__stats { order: 1; } .home-drx__progress { order: 2; } .home-drx__why { order: 3; } .home-drx__focus { order: 4; } .home-drx__actions { order: 5; }
.home-drx__progress { margin-top: var(--sp-4); }
.home-drx__secondary { flex: 0 0 auto; }
.home-drx > .w-head { margin-bottom: var(--sp-4); }
.home-drx__stats { display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-6); }
.home-drx__stat { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; }
.home-drx__gem { display: inline-grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--accent-soft); flex-shrink: 0; }
.home-drx__statbody { display: flex; flex-direction: column; min-width: 0; }
.home-drx__n { font-size: var(--fs-24); font-weight: var(--fw-bold); letter-spacing: var(--tracking-tight); line-height: 1.1; color: var(--text-strong); font-variant-numeric: tabular-nums; white-space: nowrap; }
.home-drx__l { font-size: var(--fs-13); color: var(--text-3); line-height: 1.35; }
.home-drx__why { margin-top: var(--sp-3); }
.home-drx__whylink { font-size: var(--fs-13); vertical-align: baseline; gap: 0; }
.home-drx__whylink:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.home-drx__focus { margin-top: var(--sp-3); }
.home-drx__flabel { font-size: var(--fs-13); font-weight: var(--fw-semibold); color: var(--text-strong); margin-bottom: var(--sp-2); }
.home-drx__chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); min-width: 0; }
.home-drx__chip { display: inline-flex; max-width: 100%; min-width: 0; }
.home-drx__more { display: inline-flex; align-items: center; font-size: var(--fs-13); font-weight: var(--fw-semibold); color: var(--text-3); padding: 0 var(--sp-1); white-space: nowrap; flex-shrink: 0; }   /* R5 P1: "+N more" is one token */
.home-drx__chip--more { align-items: center; gap: var(--sp-2); }          /* last chip + "+N more" stay together */
.home-drx__actions { margin-top: auto; padding-top: var(--sp-4); display: flex; align-items: center; gap: var(--sp-3); }

/* Streak & Consistency — the note follows the stats (no dead band in the middle of the card) */
.home-dstreak { display: flex; flex-direction: column; }
.home-dstreak__value { display: flex; flex-direction: column; gap: 2px; margin-top: calc(-1 * var(--sp-1)); padding-left: 40px; }
.home-dstreak__n { font-size: var(--fs-30); font-weight: var(--fw-bold); letter-spacing: -0.02em; line-height: 1.15; color: var(--text-accent); font-variant-numeric: tabular-nums; }
.home-dstreak__empty { font-size: var(--fs-20); font-weight: var(--fw-semibold); color: var(--text-2); line-height: 1.3; }
.home-dstreak__cap { font-size: var(--fs-13); color: var(--text-2); line-height: 1.45; }
/* the body spreads evenly when the row is taller than the card's content (no dead band under the note) */
.home-dstreak__body { display: flex; flex-direction: column; gap: var(--sp-4); min-height: 0; }   /* packed: days → checks → stats → note */
.home-dstreak__checks { margin: 0; }
.home-dstreak__kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-2); margin: 0; padding-top: var(--sp-3); border-top: 1px solid var(--divider); }
.home-dstreak__kpi { min-width: 0; }
.home-dstreak__kpi dt { font-size: var(--fs-12); color: var(--text-3); font-weight: var(--fw-medium); }
.home-dstreak__kpi dd { margin: 2px 0 0; font-size: var(--fs-15); font-weight: var(--fw-semibold); color: var(--text-strong); font-variant-numeric: tabular-nums; }
.home-dstreak__note {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) 14px;
  border-radius: 12px;
  background: var(--surface-2);
  font-size: var(--fs-13); color: var(--text-2); line-height: 1.45;
}
.home-dstreak__note > span { display: inline-flex; flex-shrink: 0; }

/* Weakest Topics: the topic takes the row's full text column (never clipped, D6); under it, the reason at the
   left and "58% lost" (one line) at the right. */
.home-weak__gem { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: var(--surface-2); }
.home-weak__name { display: block; }
.home-weak__sub { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); }
.home-weak__reason { min-width: 0; }
.home-weak__lost { flex-shrink: 0; white-space: nowrap; font-weight: var(--fw-medium); color: var(--text-2); }
.home-weak__pct { font-size: var(--fs-15); font-weight: var(--fw-bold); color: var(--danger); font-variant-numeric: tabular-nums; }
.home-weak__foot { margin-top: var(--sp-2); padding: var(--sp-3) var(--sp-3) 0; border-top: 1px solid var(--divider); font-size: var(--fs-13); color: var(--text-2); line-height: 1.45; }

/* ---------- ≥768: dashboard greeting sizes ---------- */
@media (min-width: 768px) {
  .home-greet--dash .home-greet__title { font-size: var(--fs-36); }
  .home-greet--dash.home-greet--long .home-greet__title { font-size: var(--fs-30); }
  .home-greet--dash.home-greet--xlong .home-greet__title { font-size: var(--fs-24); }
}

@media (min-width: 1024px) {
  .home--dash, .home-drow, .home-dcol { gap: var(--sp-5); }
  .home-drow--greet { grid-template-columns: minmax(0, 1fr) minmax(0, 360px); }
  .home-greet--dash .home-greet__sub { font-size: var(--fs-17); }
}

/* ---------- ≥1200: the mockup's composition ---------- */
@media (min-width: 1200px) {
  .home-drow--top { grid-template-columns: minmax(0, 1fr) minmax(0, 1.36fr); }
  .home-dgrid { display: flex; flex-direction: column; gap: var(--sp-5); min-width: 0; }
  .home-dgrid > .home-drow { grid-template-columns: minmax(0, 1.08fr) minmax(0, 1.08fr) minmax(0, 1fr); }   /* one template: gutters line up */
  .home-dcol { display: flex; flex-direction: column; }
  .home-dcol > .home-dplan { flex: 0 0 auto; }
}

/* 1200–1399: laptop screens — tighter gutters, gaps and card padding keep the CTA in the first screen */
@media (min-width: 1200px) and (max-width: 1399px) {
  main[data-screen="home"] { --gutter: 24px; }
  .home--dash, .home-drow, .home-dcol, .home--dash > .home-dgrid { gap: var(--sp-4); }
  .home-dcard, .home-stat { --card-p: var(--sp-4); }
  .home-drow--greet { grid-template-columns: minmax(0, 1fr) minmax(0, 420px); }     /* the quote stays on 2 lines */
  .home-drx__stats { column-gap: var(--sp-4); flex-wrap: nowrap; }                 /* 23 · 30 min side by side */
  .home-drx__gem { width: 44px; height: 44px; }
  .home-drx__n { font-size: var(--fs-20); }
  .home-greet--dash .home-greet__title { font-size: var(--fs-30); }
  .home-greet--dash .home-greet__sub { font-size: var(--fs-15); margin-top: var(--sp-1); }
}

/* =====================================================================================
   Sheets (both layouts)
   ===================================================================================== */
.home-why { display: flex; flex-direction: column; gap: var(--sp-5); }
.home-why__lead { font-size: var(--fs-15); color: var(--text-2); }
.home-why__lead strong { color: var(--text-strong); font-weight: var(--fw-semibold); }
.home-why__group { display: flex; flex-direction: column; gap: var(--sp-2); }
.home-why__h {
  font-size: var(--fs-12); font-weight: var(--fw-semibold); letter-spacing: var(--tracking-wide);
  text-transform: uppercase; color: var(--text-3); line-height: 1.3;
}
.home-why .list-row { min-height: 52px; }
.home-why .list-row__meta { font-size: var(--fs-15); font-weight: var(--fw-semibold); color: var(--text-strong); }
.home-why__pct { display: flex; flex-direction: column; align-items: flex-end; font-size: var(--fs-15); font-weight: var(--fw-semibold); color: var(--warning); line-height: 1.2; }
.home-why__pctl { font-size: var(--fs-12); font-weight: var(--fw-medium); color: var(--text-3); }
.home-why__list { margin: 0; padding-left: 1.1em; display: flex; flex-direction: column; gap: 6px; color: var(--text-2); font-size: var(--fs-15); line-height: 1.5; }

.home-streaksheet { display: flex; flex-direction: column; gap: var(--sp-5); }
.home-streaksheet__hero { display: flex; align-items: center; gap: var(--sp-4); }
.home-streaksheet__flame { display: inline-grid; place-items: center; width: 64px; height: 64px; border-radius: 20px; background: var(--warning-bg); flex-shrink: 0; }
.home-streaksheet__value { font-size: var(--fs-24); font-weight: var(--fw-bold); letter-spacing: var(--tracking-tight); color: var(--text-strong); line-height: 1.2; }
.home-streaksheet__sub { font-size: var(--fs-15); color: var(--text-2); margin-top: 2px; }
.home-streaksheet__week { display: flex; flex-direction: column; gap: var(--sp-3); }
.home-streaksheet__note { font-size: var(--fs-13); color: var(--text-2); line-height: 1.45; }
.home-streaksheet__rest { display: flex; align-items: flex-start; gap: var(--sp-2); font-size: var(--fs-15); color: var(--text-2); line-height: 1.45; }
.home-streaksheet__rest .icon { color: var(--text-3); margin-top: 2px; }
.home-streaksheet__actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); }