/* ================================================================
   DASH V2 (LOCAL DEMO) — token overrides for demo-dashboard.html only.
   Loaded AFTER every other stylesheet; wins mostly by source order.
   Pass B of the dashboard redesign. Do not link from live pages.
   ================================================================ */

/* ---------------------------------------------------------------
   B4 — shadow tokens (two, and only two, on this page)
   B6 — ink tokens (light theme; demo runs light by default)
   --------------------------------------------------------------- */
:root {
  --shadow-rest: 0 1px 2px rgba(15, 23, 42, .05);
  --shadow-elevated: 0 4px 12px rgba(15, 23, 42, .08);
  --link-blue: var(--accent, #1D4ED8);      /* brand blue deepened one step for text/links */
  --tertiary-ink: var(--text-muted, #94A3B8);   /* true tertiary metadata only */
}
html[data-theme="light"] {
  /* NOTE: do NOT redefine --text-primary/--text-secondary/--text-muted here.
     A var() self-reference is a cycle that INVALIDATES the token for the whole
     page (brand text fell back to black; nav inked differently from every
     other page). The shared tokens from variables.css apply as-is. */
  --text-bright: var(--text-primary, #0F172A);    /* headings / emphasis */
}

/* ---------------------------------------------------------------
   B1 — buttons inherit the page font (role-picker rendered Arial)
   --------------------------------------------------------------- */
button { font: inherit; }

/* ---------------------------------------------------------------
   B5 — one container width, consistent left edge everywhere.
   MUST match the sitewide --max-width (1280px): the nav is shared
   chrome and may not shift between pages (owner report 2026-08-31,
   the 1320px here moved the whole nav ~20px vs every other page).
   --------------------------------------------------------------- */
#explore-content .container { max-width: var(--max-width, 1280px); }

/* De-nested plan sits flush with the page edge (see B12) */

/* ---------------------------------------------------------------
   B2 — type scale: 11 / 13 / 15 / 20 / 32 only
   --------------------------------------------------------------- */
/* 32px — H1 */
.explore-dash__title,
.explore-hero__title { font-size: 32px; }

/* 20px — H2 + the two hero numerals */
.explore-section__title,
.daily__title,
.roleconfirm__title { font-size: 20px; }
.dash-band2__top b,
.daily__streak b { font-size: 20px; }

/* 15px — emphasized */
.plan__topic,
.rolechip__value,
.explore-hero__subtitle,
.explore-cta2__btn { font-size: 15px; }

/* 13px — body / rows (raises the stray 10–12.5px row text, folds 14px down) */
.plan__why,
.plan__how,
.daily__sub,
.daily__progress,
.dash-band2__foot,
.dash-band2__zone,
.dash-stat,
.dash-stat b,
.plan__prob-t,
.plan__lesson-txt,
.plan__full,
.plan__retake,
.plan__tailor,
.plan__num,
.continue-card__label,
.continue-card__title,
.continue-card__go,
.rolechip__firms,
.rolechip__menu-head,
.rolechip__opt-l,
.rolechip__opt-d,
.plan__rec-txt strong,
.plan__rec-txt span,
.quiet-link,
.plan__curric,
.sknudge__row b,
.roleconfirm__txt,
.roleconfirm__btn,
.elo-toggle,
.explore-dash__persona { font-size: 13px; }
.plan__context { font-size: 13px; }

/* 11px — caps eyebrows / chips / tags (raises the 9–10.5px strays) */
.daily__streak span,
.sknudge__k,
.dash-ribbon__k,
.skbar__l,
.skbar__r,
.plan__lesson-meta,
.plan__prob-meta,
.plan__prob-solved,
.fy-prob__cat,
.fy-prob__diff,
.rolechip__opt-cur,
.dash-pbar--target em b,
.sknudge__peek,
.continue-card .badge { font-size: 11px; }

/* ---------------------------------------------------------------
   B11 — one eyebrow spec: 11px / 600 / .08em / uppercase; blue for sections
   --------------------------------------------------------------- */
.explore-section__label,
.explore-dash__eyebrow,
.explore-cta2__eyebrow,
.daily__kicker,
.dash-band2__lbl,
.rolechip__label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.explore-section__label,
.explore-cta2__eyebrow,
.daily__kicker { color: var(--link-blue); }

/* ---------------------------------------------------------------
   B6 — deepened link/accent text (var(--accent, #1D4ED8)) + true-tertiary metadata
   --------------------------------------------------------------- */
.plan__full,
.plan__retake,
.plan__tailor,
.dash-band2__foot a,
.continue-card__go,
.quiet-link,
.sknudge__peek,
.rolechip__firms--none a,
.plan__lesson-txt b { color: var(--link-blue); }
.fy-prob__cat,
.skbar__r { color: var(--tertiary-ink); }

/* ---------------------------------------------------------------
   B3 — radii: 8px controls, 12px cards, 999px pills
   --------------------------------------------------------------- */
/* cards -> 12px */
.plan__step,
.daily,
.continue-card,
.plan__rec,
.plan__curric,
.rolechip,
.rolechip__menu,
.roleconfirm,
.daily__streak,
.sknudge__pop { border-radius: 12px; }
/* controls / small row links -> 8px */
.plan__prob,
.plan__lesson,
.plan__num,
.daily__cta,
.rolechip__opt,
.rolechip__btn,
.roleconfirm__btn,
.explore-cta2__btn,
.sknudge__row,
.elo-toggle { border-radius: 8px; }
/* pills stay 999px (dash-pbar, plan__how, plan__retake--cta, dash-pill…) */
.plan__how,
.plan__retake--cta { border-radius: 999px; }

/* ---------------------------------------------------------------
   B4 — apply the two shadow tokens; kill the rest on this page
   --------------------------------------------------------------- */
.daily,
.plan__step,
.continue-card,
.plan__curric,
.plan__rec,
.rolechip { box-shadow: var(--shadow-rest); }
.rolechip__menu,
.sknudge__pop,
.roleconfirm,
.nav__user-dropdown { box-shadow: var(--shadow-elevated); }
.daily__cta { box-shadow: var(--shadow-rest); }
.daily__cta:hover { box-shadow: var(--shadow-elevated); }

/* ---------------------------------------------------------------
   B12 — de-nest the plan mega-card: outer wrapper goes transparent,
   the numbered topic groups sit directly on the page
   --------------------------------------------------------------- */
.plan-merged {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
}
.plan,
.plan-merged .plan {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding-left: 0;
  padding-right: 0;
}
.plan-merged .continue-card {
  background: var(--bg-card);
  border: 1px solid var(--border-light, #E2E8F0);
  border-radius: 12px;
  margin-bottom: var(--space-4);
}
/* firm step: dashed border becomes solid (arrow/dash purge) */
.plan__step--firm { border-style: solid; }

/* ---------------------------------------------------------------
   B9 — daily set card re-clothed: blue-tinted premium surface
   (overrides plan.css's cream/amber gradient + plan-merged strip)
   --------------------------------------------------------------- */
.daily,
.plan-merged .daily {
  background: rgba(29, 78, 216, .04);
  border: 1px solid var(--border-light, #E2E8F0);
  border-radius: 12px;
  padding: var(--space-5) var(--space-6);
  margin-bottom: var(--space-4);
}
html[data-theme="dark"] .daily,
html[data-theme="dark"] .plan-merged .daily {
  background: rgba(29, 78, 216, .10);
  border-color: var(--border-color);
}
/* connector lines: solid slate instead of the tinted rail */
.daily-line { background: var(--border-light, #CBD5E1); }
.daily-line--on { background: #16a34a; }
/* the blue CTA keeps its prominence (radius + shadow tokens applied above) */

/* ---------------------------------------------------------------
   B8 — chips: desaturated difficulty pills + dark PRO chip
   --------------------------------------------------------------- */
.fy-prob__diff,
.badge--easy, .badge--medium, .badge--hard {
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
}
.fy-d-easy, .badge--easy   { background: #ECFDF5; color: #047857; border: 1px solid #A7F3D0; }
.fy-d-medium, .badge--medium { background: #FFFBEB; color: #B45309; border: 1px solid #FDE68A; }
.fy-d-hard, .badge--hard   { background: #FEF2F2; color: #B91C1C; border: 1px solid #FECACA; }

/* PRO chip: shared auth.js styling applies untouched (nav must be identical
   on every page; the old dark restyle here was a demo-phase leftover). */

/* ---------------------------------------------------------------
   B10 — nav fixes (label rename lives in demo-dashboard.html markup)
   --------------------------------------------------------------- */
/* account chip: display name is JS-driven from shared auth.js — CSS-only
   improvement: cap width + ellipsis so long names never wrap the nav */
.nav__user-name {
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---------------------------------------------------------------
   B7 — chevron component (replaces literal "→" in explore-v2.js)
   --------------------------------------------------------------- */
.chev {
  display: inline-flex;
  align-items: center;
  vertical-align: -1px;
  margin-left: 2px;
  transition: transform .15s ease;
}
a:hover .chev,
a:focus-visible .chev { transform: translateX(2px); }

/* ---------------------------------------------------------------
   Pass A support styles (new elements the fork renders)
   --------------------------------------------------------------- */
/* Demoted browse row: one quiet line of two text links */
.browse-quiet {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  margin: var(--space-6) 0 var(--space-8);
  padding: 0;
}
.quiet-link {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-weight: 600;
  text-decoration: none;
  color: var(--link-blue);
}
.quiet-link:hover { text-decoration: underline; }

/* Curriculum row folded into the plan */
.plan__curric {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: var(--space-3);
  padding: 10px 14px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  text-decoration: none;
  color: var(--text-secondary);
  transition: border-color .15s;
}
.plan__curric:hover { border-color: var(--link-blue); }
.plan__curric-ico { display: inline-flex; color: var(--link-blue); }
.plan__curric-ico svg { width: 15px; height: 15px; }
.plan__curric-txt { flex: 1; min-width: 0; }
.plan__curric .chev { color: var(--link-blue); }

/* Collapsed plan steps (#2/#3): compact single rows that expand on click */
.plan__step--collapsible .plan__step-head--toggle { cursor: pointer; }
.plan__step--collapsed { padding-top: 10px; padding-bottom: 10px; }
.plan__step-caret {
  display: inline-flex;
  flex: none;
  color: var(--text-muted);
  transition: transform .15s ease;
}
.plan__step--collapsible:not(.plan__step--collapsed) .plan__step-caret { transform: rotate(180deg); }
.plan__step-body[hidden] { display: none; }
.plan__step-body { margin-top: 2px; }


/* v2.4 — merged design: course banner in plan, firm logo cards, For-you tab */
.plan-course { margin: 18px 0 4px; padding: 14px 18px; border: 1px solid var(--border-light, #E2E8F0); border-radius: 12px; background: var(--bg-primary, #fff); box-shadow: 0 1px 2px rgba(15,23,42,.05); }
.plan-course__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.plan-course__k { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--text-primary, #0F172A); }
.plan-course__k svg { width: 16px; height: 16px; color: var(--accent, #1D4ED8); }
.plan-course__all { font-size: 13px; font-weight: 600; color: var(--accent, #1D4ED8); text-decoration: none; }
.plan-course .explore-curric__row { border: 0; padding: 10px 0 0; box-shadow: none; }
.plan-firm-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; margin-top: 4px; }
.plan-firm-card { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border: 1px solid var(--border-light, #E2E8F0); border-radius: 12px; background: var(--bg-primary, #fff); box-shadow: 0 1px 2px rgba(15,23,42,.05); text-decoration: none; }
.plan-firm-card:hover { border-color: var(--text-muted, #94A3B8); }
.plan-firm-card__logo { height: 22px; width: auto; max-width: 120px; object-fit: contain; align-self: flex-start; margin-bottom: 4px; filter: grayscale(1); opacity: .85; }
.plan-firm-card__name { font-size: 15px; font-weight: 700; color: var(--text-primary, #0F172A); }
.plan-firm-card__tag { font-size: 12px; color: var(--text-secondary, #64748B); }
.plan-firm-card__meta { font-size: 12px; color: var(--text-secondary, #64748B); margin-top: 2px; }
.plan-firm-card__go { font-size: 13px; font-weight: 600; color: var(--accent, #1D4ED8); margin-top: 6px; }
.plan-firm-all { display: inline-block; margin-top: 10px; font-size: 13px; font-weight: 600; color: var(--accent, #1D4ED8); text-decoration: none; }

/* v2.5 — judge steals */
.plan__lesson-chip { color: var(--accent, #1D4ED8); font-weight: 600; font-size: 12px; }
.plan-firm-all-row { margin-top: 10px; font-size: 13px; color: var(--text-secondary, #64748B); }
.plan-firm-all-row a { color: var(--accent, #1D4ED8); font-weight: 600; text-decoration: none; }
/* nit: difficulty pills in collapsed bodies rendered lowercase */
.fy-prob__diff { text-transform: capitalize; }

/* v2.6 — mobile pass: streak ghost pill loses the wireframe dashes */
.daily__streak--zero { border-style: solid !important; border-color: var(--border-light, #E2E8F0) !important; background: var(--bg-primary, #fff) !important; color: var(--text-muted, #94A3B8) !important; }

/* v2.7 — mobile fixes (owner report 2026-08-29) */
/* course banner title: production Modules markup ships white-space:nowrap, which
   overflows the 375px viewport; let it wrap on small screens */
@media (max-width: 640px) {
  .mc__title { white-space: normal !important; overflow-wrap: break-word; display: block; }
}
/* streak ghost: the earlier solid-box override read as a stray white box on the
   tinted daily card — no chrome at all, just quiet muted text + flame */
.daily__streak--zero { border: none !important; background: transparent !important; color: var(--text-muted, #94A3B8) !important; box-shadow: none !important; padding: 4px 6px !important; }

/* v2.8 — mobile tab strip: one swipeable line, labels never break (owner:
   word-per-line wrapping read as inelegant). Native chip-row pattern:
   horizontal scroll, hidden scrollbar, edge padding bleed. */
@media (max-width: 640px) {
  .brz-tabs { display: flex !important; flex-wrap: nowrap !important; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; gap: 8px; margin: 0 -16px 10px; padding: 2px 16px 6px; }
  .brz-tabs::-webkit-scrollbar { display: none; }
  .brz-tab { white-space: nowrap; flex: 0 0 auto; }
}

/* ===== Firm prep scope (flag 'firmprep', js/dash-firm.js). Only fp-* classes, or rules under html.fp-on:
   nothing here matches the flag-off DOM. Tokens only, light + dark. ===== */
/* the dashboard always fills the viewport once rendered: reserve it during "Loading..." so the footer never
   sits in view and gets pushed out (that was a 0.36 load CLS on every dashboard load) */
html.fp-on #explore-content { min-height: 100vh; }
.fp-scope { display: flex; align-items: center; gap: 8px; height: 40px; margin-top: 12px; }
.fp-scope[hidden], .fp-invite-wrap[hidden] { display: none; }
.fp-seg { display: inline-flex; align-items: stretch; gap: 2px; height: 40px; padding: 3px; max-width: 100%; min-width: 0; box-sizing: border-box; border-radius: 10px; background: color-mix(in srgb, var(--text-muted) 11%, var(--bg-card)); border: 1px solid var(--border-color); overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; }
.fp-seg::-webkit-scrollbar { display: none; }
html[data-theme="dark"] .fp-seg { background: var(--bg-secondary); }
.fp-tab { position: relative; flex: none; display: inline-flex; align-items: center; gap: 7px; height: 100%; padding: 0 13px; border: 0; border-radius: 7px; background: transparent; font: 600 13px/1 var(--font-sans); color: var(--text-secondary); cursor: pointer; white-space: nowrap; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.fp-tab[aria-checked="true"] { color: var(--text-bright); background: var(--bg-card); box-shadow: var(--shadow-rest), 0 0 0 1px var(--border-color); }
html[data-theme="dark"] .fp-tab[aria-checked="true"] { background: var(--bg-elevated); box-shadow: 0 0 0 1px rgba(255,255,255,.08); }
.fp-tab:hover { color: var(--text-primary); }
.fp-tab:focus-visible, .fp-add:focus-visible, .fp-btn:focus-visible, .fp-link:focus-visible, .fp-chip:focus-visible, .fp-x:focus-visible { outline: 2px solid var(--accent-primary); outline-offset: 2px; }
.fp-tab__dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.fp-tab__badge { display: inline-flex; align-items: center; height: 19px; padding: 0 6px; border-radius: 999px; font-size: 11px; font-weight: 700; color: var(--text-secondary); background: color-mix(in srgb, var(--text-muted) 14%, transparent); }
.fp-tab__badge--soon { color: #b45309; background: rgba(245,183,49,.18); }
html[data-theme="dark"] .fp-tab__badge--soon { color: #fbbf24; }
.fp-add { flex: none; display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 8px; border: 1px dashed var(--border-color); background: transparent; color: var(--text-secondary); cursor: pointer; }
.fp-add:hover { color: var(--link-blue); border-color: var(--accent-primary); }
.fp-invite-wrap { margin-top: 12px; }
.fp-invite-wrap.is-open .fp-invite { display: none; }
.fp-invite-wrap .fp-form { margin-top: 0; }
.fp-invite { display: flex; align-items: center; gap: 14px; min-height: 60px; padding: 10px 12px 10px 14px; box-sizing: border-box; border: 1px dashed color-mix(in srgb, var(--accent-primary) 45%, var(--border-color)); border-radius: 12px; background: color-mix(in srgb, var(--accent-primary) 4%, var(--bg-card)); }
.fp-invite__ico, .fp-ask__ico { flex: none; width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; color: var(--link-blue); background: var(--accent-light); }
.fp-invite__txt, .fp-ask__q { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.fp-invite__txt b, .fp-ask__q b { font-size: 15px; font-weight: 700; color: var(--text-bright); }
.fp-invite__txt span, .fp-ask__q span { font-size: 13px; color: var(--text-secondary); line-height: 1.45; }
.fp-invite__acts, .fp-ask__acts { flex: none; display: flex; align-items: center; gap: 8px; }
.fp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 4px; height: 36px; padding: 0 14px; box-sizing: border-box; border-radius: 8px; border: 1px solid transparent; font: 700 13px/1 var(--font-sans); text-decoration: none; cursor: pointer; white-space: nowrap; }
.fp-btn--primary { background: var(--accent-primary); color: #fff; box-shadow: var(--shadow-rest); }
.fp-btn--primary:hover { filter: brightness(1.06); }
.fp-btn--primary[disabled] { opacity: .45; cursor: default; filter: none; }
.fp-btn--ghost { background: var(--bg-card); color: var(--text-primary); border-color: var(--border-color); font-weight: 600; }
.fp-btn--ghost:hover { border-color: var(--accent-primary); color: var(--link-blue); }
.fp-x { flex: none; display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; border: 0; background: transparent; color: var(--text-muted); cursor: pointer; }
.fp-x:hover { color: var(--text-primary); background: color-mix(in srgb, var(--text-muted) 12%, transparent); }
.fp-link { background: none; border: 0; padding: 0; cursor: pointer; font: 600 13px/1.3 var(--font-sans); color: var(--link-blue); }
.fp-link:hover { text-decoration: underline; }
.fp-link--muted { color: var(--text-muted); font-weight: 500; }
.fp-form { margin-top: 12px; padding: 16px 18px; box-sizing: border-box; border-radius: 12px; background: var(--bg-card); border: 1px solid var(--border-color); box-shadow: var(--shadow-rest); }
.fp-form__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.fp-form__head .fp-x { margin: -6px -6px 0 0; }
.fp-form__h { margin: 0; font-size: 15px; font-weight: 700; color: var(--text-bright); line-height: 1.3; }
.fp-form__sub { margin: 2px 0 14px; font-size: 13px; color: var(--text-secondary); line-height: 1.45; }
.fp-form__grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 16px 28px; }
.fp-form__foot { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border-color); }
.fp-form__fine { font-size: 12px; color: var(--text-muted); }
.fp-k { display: block; margin: 0 0 8px; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }
.fp-search { position: relative; display: block; margin-bottom: 8px; }
.fp-search svg { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--text-muted); pointer-events: none; }
.fp-search input, .fp-date input, .fp-ask input { box-sizing: border-box; height: 36px; border-radius: 8px; border: 1px solid var(--border-color); background: var(--bg-secondary); color: var(--text-primary); font: 500 13px/1 var(--font-sans); color-scheme: light dark; }
.fp-search input { width: 100%; padding: 0 10px 0 32px; }
.fp-date input, .fp-ask input { padding: 0 8px; }
.fp-search input:focus, .fp-date input:focus, .fp-ask input:focus { outline: none; border-color: var(--accent-primary); box-shadow: 0 0 0 3px var(--accent-light); }
.fp-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.fp-chips--firms { min-height: 76px; align-content: flex-start; }
.fp-chip { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--border-color); background: var(--bg-secondary); color: var(--text-primary); font: 600 13px/1 var(--font-sans); cursor: pointer; transition: border-color .12s, background .12s; }
.fp-chip:hover { border-color: var(--accent-primary); }
.fp-chip[aria-checked="true"] { border-color: var(--accent-primary); background: var(--accent-light); color: var(--text-bright); box-shadow: inset 0 0 0 1px var(--accent-primary); }
.fp-chip[disabled] { opacity: .4; cursor: default; }
.fp-chip__dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.fp-none { font-size: 13px; color: var(--text-secondary); padding: 6px 2px; }
.fp-date { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; margin-top: 10px; font-size: 13px; color: var(--text-secondary); }
.fp-plan .plan__head .explore-section__title { margin-bottom: 0; }
.fp-datebtn { cursor: pointer; font-family: inherit; }
.fp-ask { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0 0 var(--space-4); padding: 12px 14px; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--accent-primary) 30%, var(--border-color)); background: color-mix(in srgb, var(--accent-primary) 5%, var(--bg-card)); }
.fp-ask__q { flex: 1 1 260px; cursor: pointer; }
.fp-when { flex: none; width: 34px; height: 36px; box-sizing: border-box; border-radius: 8px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; border: 1px solid var(--border-color); background: var(--bg-secondary); line-height: 1; }
.fp-when b { font-size: 9px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-muted); }
.fp-when i { font-style: normal; font-size: 14px; font-weight: 800; color: var(--text-bright); }
.fp-when--wk i { font-size: 12px; }
.fp-when--now { background: var(--accent-primary); border-color: var(--accent-primary); }
.fp-when--now b { color: rgba(255,255,255,.85); }
.fp-when--now i { color: #fff; }
.fp-when--goal { background: color-mix(in srgb, #16a34a 10%, var(--bg-card)); border-color: color-mix(in srgb, #16a34a 40%, var(--border-color)); }
.fp-when--goal b, .fp-tag--goal { color: #15803d; }
html[data-theme="dark"] .fp-when--goal b, html[data-theme="dark"] .fp-tag--goal { color: #4ade80; }
.fp-tag { flex: none; display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px; border-radius: 999px; font-size: 11px; font-weight: 700; white-space: nowrap; }
.fp-tag--now { color: var(--link-blue); background: var(--accent-light); }
.fp-tag--goal { background: rgba(22,163,74,.12); }
.fp-step .plan__prob-meta { white-space: nowrap; }
.fp-step--goal { background: transparent; border-style: dashed; box-shadow: none; }
.fp-note { margin: 10px 0 2px; padding: 0 12px; font-size: 12px; color: var(--text-muted); line-height: 1.45; }
.fp-note a { color: var(--link-blue); font-weight: 600; text-decoration: none; }
.fp-unpin { margin: 10px 0 0; text-align: right; }
.fp-curric b { color: var(--text-bright); font-weight: 700; }
.fp-step__more { display: none; }
/* parked scope views: content-visibility:hidden keeps their style + layout (not painted, not hit-tested,
   not focusable, out of the a11y tree). No inherited property flips on park/unpark, so a switch restyles
   a handful of nodes. fp-warm renders a fresh view once, fully clipped, before it is locked. */
html.fp-on .fp-planhost, html.fp-on .fp-dailyhost, html.fp-on #browse .brz-feat-pane[data-fpane="0"], html.fp-on #browse .brz-pane[data-pane="0"] { position: relative; }
.fp-parked { position: absolute !important; top: 0; left: 0; right: 0; content-visibility: hidden; }
.fp-parked.fp-warm { content-visibility: visible; clip-path: inset(50%); }
@supports not (content-visibility: hidden) { .fp-parked, .fp-parked.fp-warm { visibility: hidden; pointer-events: none; } }
/* a finished firm set keeps the full card: the done line takes the CTA's box so the card height does not change */
.fp-dailyhost .daily__done { display: inline-flex; align-items: center; padding: 10px 0; }
@media (max-width: 640px) { .fp-dailyhost .daily__done { min-height: 48px; padding: 0; } }
@media (max-width: 640px) {
  .fp-scope { height: 48px; gap: 6px; }
  .fp-seg { flex: 0 1 auto; height: 48px; padding: 2px; }
  .fp-tab { padding: 0 12px; min-height: 44px; }
  .fp-add, .fp-x { width: 44px; height: 44px; }
  .fp-invite { flex-wrap: wrap; gap: 10px 12px; padding: 12px; }
  .fp-invite__txt { flex: 1 1 calc(100% - 100px); }
  .fp-invite__acts, .fp-ask__acts { width: 100%; }
  .fp-invite__acts .fp-btn--primary, .fp-form__foot .fp-btn--primary { flex: 1; height: 44px; }
  .fp-chip { height: 40px; }
  .fp-form { padding: 14px 14px 16px; }
  .fp-form__grid { grid-template-columns: minmax(0, 1fr); }
  .fp-search input, .fp-date input { height: 44px; font-size: 16px; }
  .fp-ask { padding: 12px; }
  .fp-ask__acts input { flex: 1; min-width: 0; height: 44px; font-size: 16px; }
  .fp-ask__acts .fp-btn { height: 44px; }
  .fp-step .plan__prob-meta { display: none; }
  .fp-plan .plan__head { flex-direction: column; gap: 10px; }
  .fp-datebtn { min-height: 44px; }
  .fp-unpin { text-align: left; }
  .fp-unpin .fp-link { min-height: 44px; }
  .fp-step .plan__step-head > .plan__full { display: none; }
  .fp-step__more { display: inline-flex; margin: 10px 0 0 12px; }
  /* Daily Set cards in the scope host (main + firm sets): the streak sits on the kicker row and the title gets the
     full width on its own row, so "Your 5 for Jane Street today" stays one line and every scope's card has the same height */
  .fp-dailyhost .daily__head { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; row-gap: 0; align-items: center; }
  .fp-dailyhost .daily__head > div:first-child { display: contents; }
  .fp-dailyhost .daily__kicker { grid-row: 1; grid-column: 1; }
  .fp-dailyhost .daily__streak { grid-row: 1; grid-column: 2; flex-direction: row; gap: 4px; min-width: 0; padding: 2px 8px; font-size: 14px; }
  .fp-dailyhost .daily__streak.daily__streak--zero { padding: 0 2px !important; }
  .fp-dailyhost .daily__title, .fp-dailyhost .daily__sub { grid-column: 1 / -1; }
  .fp-dailyhost .daily__title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  /* the scoped Strongest/Weakest line can wrap to 2 lines: reserve both so nothing below moves on a switch */
  .fp-band .dash-band2__foot > span:last-child { line-height: 1.6; min-height: 3.2em; }
}
@media (max-width: 380px) { .fp-dailyhost .daily__title { font-size: 15px; } }

/* ===== One-shot load + collapsible cards (flag 'firmprep', js/explore-v2.js). New classes only (dsk / dcol / dsum /
   dcont), or rules under html.fp-on: nothing here matches the flag-off DOM. ===== */
/* the static "Loading..." spinner never shows: the skeleton below replaces it on DOMContentLoaded */
html.fp-on #explore-content > .container > .empty-state:only-child { visibility: hidden; }
html.h2-on #explore-content { min-height: 100vh; }
html.h2-on #explore-content > .container > .empty-state:only-child { visibility: hidden; }
/* skeleton: same wrappers + type as the hero, blocks sized like the real pieces, one quiet pulse */
.dsk__b { display: block; border-radius: 12px; background: color-mix(in srgb, var(--text-muted) 13%, transparent); animation: dskPulse 1.4s ease-in-out infinite; }
html[data-theme="dark"] .dsk__b { background: color-mix(in srgb, var(--text-muted) 16%, transparent); }
@keyframes dskPulse { 50% { opacity: .55; } }
.dsk .explore-dash__title { color: var(--text-bright); }
.dsk__chip { height: 66px; margin-top: 12px; }
.dsk__tabs { width: 260px; max-width: 100%; height: 40px; margin-top: 12px; border-radius: 10px; }
.dsk__pct { width: 128px; height: 24px; border-radius: 8px; }
.dsk__ln { width: 150px; height: 13px; border-radius: 6px; }
.dsk__ln--r { width: 300px; max-width: 45%; }
.dsk .dash-band2__foot { display: flex; justify-content: space-between; }
.dsk__cont { height: 48px; margin: 14px 0 var(--space-4); }
.dsk__daily { height: 180px; margin-bottom: var(--space-4); }
.dsk__plan { height: 360px; opacity: .6; }
@media (max-width: 640px) {
  .dsk__chip { height: 76px; }
  .dsk__tabs { height: 48px; }
  .dsk__daily { height: 214px; }
}

/* collapsible card: a summary row and the full body, each a one-track grid that animates 0fr <-> 1fr (180ms) */
.dcol { position: relative; }
.dcol > .dcol__sum, .dcol > .dcol__body { display: grid; grid-template-columns: minmax(0, 1fr); min-width: 0; }
.dcol > .dcol__sum { grid-template-rows: 0fr; }
.dcol > .dcol__body { grid-template-rows: 1fr; }
.dcol.is-collapsed > .dcol__sum { grid-template-rows: 1fr; }
.dcol.is-collapsed > .dcol__body { grid-template-rows: 0fr; }
.dcol__in { min-height: 0; min-width: 0; overflow: hidden; }
.dcol:not(.is-collapsed):not(.is-anim) > .dcol__body > .dcol__in, .dcol.is-collapsed:not(.is-anim) > .dcol__sum > .dcol__in { overflow: visible; }
.dcol.is-anim { transition: padding .18s cubic-bezier(.2,.7,.2,1); }
/* the two parts cross-fade while the rows move; the folded part is hidden (and inert in JS) once the fold is done */
.dcol > .dcol__sum { opacity: 0; visibility: hidden; }
.dcol.is-collapsed > .dcol__sum { opacity: 1; visibility: visible; }
.dcol > .dcol__body { opacity: 1; visibility: visible; }
.dcol.is-collapsed > .dcol__body { opacity: 0; visibility: hidden; }
.dcol.is-anim > .dcol__sum { transition: grid-template-rows .18s cubic-bezier(.2,.7,.2,1), opacity .1s, visibility 0s linear .18s; }
.dcol.is-anim.is-collapsed > .dcol__sum { transition: grid-template-rows .18s cubic-bezier(.2,.7,.2,1), opacity .14s .04s, visibility 0s; }
.dcol.is-anim > .dcol__body { transition: grid-template-rows .18s cubic-bezier(.2,.7,.2,1), opacity .14s .04s, visibility 0s; }
.dcol.is-anim.is-collapsed > .dcol__body { transition: grid-template-rows .18s cubic-bezier(.2,.7,.2,1), opacity .1s, visibility 0s linear .18s; }
.dcol__tog { position: absolute; z-index: 1; top: 18px; right: 14px; display: inline-grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--text-muted); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.dcol__tog:hover { color: var(--text-primary); background: color-mix(in srgb, var(--text-muted) 12%, transparent); }
.dcol__tog:focus-visible, .dcont__more:focus-visible { outline: 2px solid var(--accent-primary); outline-offset: 2px; }
.dcol__tog svg, .dcont__more svg { transform: rotate(180deg); transition: transform .18s cubic-bezier(.2,.7,.2,1); }
.is-collapsed > .dcol__tog svg, .is-collapsed .dcol__tog svg, .dcont.is-collapsed .dcont__more svg { transform: none; }
.daily.dcol.is-collapsed { padding-top: 12px; padding-bottom: 12px; }
.daily.dcol.is-collapsed > .dcol__tog { top: 14px; }
.dcol .daily__head { padding-right: 40px; }
/* summary row: Daily Set · 2 / 5 done · five dots · Continue */
.dsum { display: flex; align-items: center; gap: 14px; min-height: 36px; padding-right: 40px; }
.dsum__k { flex: none; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--link-blue); }
.dsum__p { flex: none; font-size: 13px; color: var(--text-secondary); white-space: nowrap; }
.dsum__p b { color: var(--text-bright); font-weight: 700; }
.dsum__dots { flex: 1 1 auto; display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.dsum__dot { flex: none; width: 10px; height: 10px; border-radius: 50%; box-sizing: border-box; background: transparent; border: 2px solid var(--border-color); }
.dsum__dot--done { background: #16a34a; border-color: #16a34a; }
.dsum__dot--tried { background: #f59e0b; border-color: #f59e0b; }
.dsum__dot--now { border-color: var(--accent-primary); background: color-mix(in srgb, var(--accent-primary) 25%, transparent); }
.daily__cta.dsum__cta { flex: none; display: inline-flex; align-items: center; height: 36px; min-height: 0; padding: 0 16px; box-sizing: border-box; border-radius: 8px; font-size: 13px; white-space: nowrap; }
/* finished set: the complete row stays, the toggle sits at its end, Up next folds under it */
.dcol--done > .daily-done__row .dcol__tog { position: static; flex: none; margin-left: -4px; }
.dcol--done .dcol__stack { display: flex; flex-direction: column; gap: var(--space-4); padding-top: var(--space-4); }
.daily--done.dcol { gap: 0; }
.dcol--done > .dcol__sum { display: none; }

/* Continue: one tight row; a second resumable item folds under "+1" */
.dcont { margin: 14px 0 var(--space-4); border: 1px solid var(--border-light, var(--border-color)); border-radius: 12px; background: var(--bg-card); box-shadow: var(--shadow-rest); overflow: hidden; }
.plan-merged .dcont { margin-top: 0; }
.dcont__row { display: flex; align-items: stretch; min-width: 0; }
.dcont__a { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 14px; box-sizing: border-box; text-decoration: none; color: inherit; transition: background .15s; }
.dcont__a:hover { background: color-mix(in srgb, var(--accent-primary) 5%, var(--bg-card)); }
.dcont__a:focus-visible { outline: 2px solid var(--accent-primary); outline-offset: -2px; }
.dcont__ic { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 7px; background: color-mix(in srgb, var(--accent-primary) 12%, transparent); color: var(--link-blue); }
.dcont__ic svg { width: 13px; height: 13px; }
.dcont__k { flex: none; font-size: 13px; font-weight: 700; color: var(--link-blue); }
.dcont__t { flex: 0 1 auto; min-width: 0; font-size: 13px; font-weight: 600; color: var(--text-bright); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dcont__ago { flex: none; margin-right: auto; font-size: 12px; color: var(--text-muted); white-space: nowrap; }
.dcont__chip { flex: none; display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: 999px; font-size: 11px; font-weight: 600; color: var(--text-secondary); background: color-mix(in srgb, var(--text-muted) 13%, transparent); }
.dcont .fy-prob__diff { flex: none; }
.dcont__go { flex: none; display: inline-flex; align-items: center; gap: 2px; font-size: 13px; font-weight: 700; color: var(--link-blue); white-space: nowrap; }
.dcont__more { flex: none; display: inline-flex; align-items: center; gap: 3px; padding: 0 12px; border: 0; border-left: 1px solid var(--border-light, var(--border-color)); background: transparent; color: var(--text-secondary); font: 700 12px/1 var(--font-sans); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.dcont__more:hover { color: var(--text-primary); background: color-mix(in srgb, var(--text-muted) 9%, transparent); }
.dcont__extra { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: 1fr; border-top: 1px solid var(--border-light, var(--border-color)); visibility: visible; transition: visibility 0s; }
.dcont.is-collapsed .dcont__extra { grid-template-rows: 0fr; border-top-color: transparent; visibility: hidden; transition: visibility 0s linear .18s; }
.dcont.is-anim .dcont__extra { transition: grid-template-rows .18s cubic-bezier(.2,.7,.2,1), border-color .18s, visibility 0s linear .18s; }
.dcont:not(.is-collapsed).is-anim .dcont__extra { transition: grid-template-rows .18s cubic-bezier(.2,.7,.2,1), border-color .18s, visibility 0s; }
.dcont__in { min-height: 0; min-width: 0; overflow: hidden; }
.dcont:not(.is-collapsed):not(.is-anim) .dcont__in { overflow: visible; }
.dcont__extra .dcont__a { padding-right: 14px; }
.dcont__extra .dcont__k { color: var(--text-secondary); font-weight: 600; }
html[data-theme="dark"] .dcont { border-color: var(--border-color); }
@media (prefers-reduced-motion: reduce) {
  .dcol, .dcol *, .dcont, .dcont * { transition: none !important; }
  .dsk__b { animation: none; }
}
@media (max-width: 640px) {
  .dcol__tog { top: 12px; right: 6px; width: 40px; height: 40px; }
  .daily.dcol.is-collapsed > .dcol__tog { top: 10px; }
  .dcol .daily__head, .fp-dailyhost .dcol .daily__head { padding-right: 34px; }
  .dsum { gap: 10px; padding-right: 34px; min-height: 40px; }
  .dsum__p { font-size: 12px; }
  .dsum__dots { gap: 4px; }
  .dsum__dot { width: 8px; height: 8px; border-width: 1.5px; }
  .daily__cta.dsum__cta { height: 40px; padding: 0 14px; }
  .dcont__a { gap: 9px; padding: 0 12px; }
  .dcont__ago, .dcont__go { display: none; }
  .dcont__t { flex: 1 1 auto; }
  .dcont__more { padding: 0 10px; min-width: 52px; justify-content: center; }
}
@media (max-width: 360px) { .dsum__k { display: none; } }
/* phone: explore.css trims the bottom gap of a :last-of-type section. Inside the plan host that stopped being true
   ~0.3s after paint, when the parked firm plans were appended (+24px). Pin it so the plan never grows on its own. */
@media (max-width: 640px) { html.fp-on .fp-planhost > section { margin-bottom: 0; padding-bottom: 0; } }

/* ===== Data-driven dashboard (flag 'home2', js/home2.js + js/explore-v2.js). New classes only (h2-*, dcont--h2)
   or rules under html.h2-on: nothing here matches the flag-off DOM. ===== */
.dcont--h2 .dcont__row + .dcont__row { border-top: 1px solid var(--border-light, var(--border-color)); }
.dcont--h2 .dcont__k { min-width: 64px; }
.dcont--h2 .dcont__chip { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; line-height: 20px; }
.h2-main > .dcont:last-child, .h2-main > .h2-oa:last-child { margin-bottom: 0; }
.h2-oa { display: flex; align-items: center; gap: 14px; margin: 0 0 var(--space-4); padding: 16px 18px; border: 1px solid var(--border-light, var(--border-color)); border-radius: 12px; background: var(--bg-card); box-shadow: var(--shadow-rest); }
.plan-merged .h2-oa { margin-bottom: var(--space-4); }
.h2-oa__ic { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: color-mix(in srgb, #f59e0b 14%, transparent); color: #b45309; }
.h2-oa__ic svg { width: 20px; height: 20px; }
.h2-oa__txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.h2-oa__k { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--link-blue); }
.h2-oa__k b { color: #b45309; font-weight: 700; }
.h2-oa__t { font-size: 16px; font-weight: 700; color: var(--text-bright); line-height: 1.3; }
.h2-oa__m, .h2-oa__last, .h2-oa__note { font-size: 13px; color: var(--text-secondary); line-height: 1.4; }
.h2-oa__last { color: var(--text-primary); }
.h2-oa__note { color: var(--text-muted); }
.h2-oa__acts { flex: none; display: flex; align-items: center; gap: 14px; }
.h2-oa__go { display: inline-flex; align-items: center; gap: 4px; height: 40px; padding: 0 16px; box-sizing: border-box; border-radius: 8px; background: var(--accent-primary); color: #fff; font-size: 14px; font-weight: 700; text-decoration: none; white-space: nowrap; }
.h2-oa__go:hover { filter: brightness(1.06); }
.h2-oa__go .chev svg { stroke: currentColor; }
.h2-oa__more { font-size: 13px; font-weight: 600; color: var(--link-blue); text-decoration: none; white-space: nowrap; }
.h2-oa__more:hover { text-decoration: underline; }
.h2-oa__go:focus-visible, .h2-oa__more:focus-visible, .h2-more__sum:focus-visible { outline: 2px solid var(--accent-primary); outline-offset: 2px; }
html[data-theme="dark"] .h2-oa { border-color: var(--border-color); }
html[data-theme="dark"] .h2-oa__ic { background: color-mix(in srgb, #f59e0b 18%, transparent); color: #fbbf24; }
html[data-theme="dark"] .h2-oa__k b { color: #fbbf24; }
/* firm tabs (flag 'firmprep'): the firm plan leads with its OA, so the card parks with the All prep daily set */
html.fp-on .h2-main:has(.fp-dailyhost > .fp-scoped.fp-parked) > .h2-oa { display: none; }
/* the only dashboard Pro CTA (firm plan note) goes with the rest of the dead weight */
html.h2-on .fp-note { display: none; }
.h2-more { margin: 0 0 var(--space-12); }
.h2-more__sum { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 0 16px; box-sizing: border-box; border: 1px solid var(--border-light, var(--border-color)); border-radius: 12px; background: var(--bg-card); color: inherit; font: inherit; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background .15s; }
.h2-more__sum:hover { background: color-mix(in srgb, var(--accent-primary) 4%, var(--bg-card)); }
.h2-more__k { flex: none; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--link-blue); }
.h2-more__t { flex: none; font-size: 15px; font-weight: 700; color: var(--text-bright); }
.h2-more__d { flex: 1 1 auto; min-width: 0; font-size: 13px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.h2-more__chev { flex: none; display: grid; place-items: center; width: 28px; height: 28px; color: var(--text-muted); }
.h2-more__chev svg { transition: transform .18s cubic-bezier(.2,.7,.2,1); transform: rotate(180deg); }
.h2-more.is-collapsed .h2-more__chev svg { transform: none; }
.h2-more > .dcol__body .browse { margin-top: var(--space-5); margin-bottom: 0; }
.h2-more .browse > .explore-section__label, .h2-more .browse > .explore-section__title, .h2-more .browse > .explore-section__desc { display: none; }
.plan-merged.h2-main { margin-bottom: var(--space-6); }
html[data-theme="dark"] .h2-more__sum { border-color: var(--border-color); }
@media (prefers-reduced-motion: reduce) { .h2-more__chev svg, .h2-more__sum { transition: none !important; } }
@media (max-width: 640px) {
  .h2-oa { flex-wrap: wrap; gap: 10px 12px; padding: 14px; }
  .h2-oa__ic { width: 34px; height: 34px; }
  .h2-oa__txt { flex-basis: calc(100% - 46px); }
  .h2-oa__acts { width: 100%; justify-content: space-between; }
  .h2-oa__go { flex: 1 1 auto; justify-content: center; height: 44px; }
  .h2-oa__t { font-size: 15px; }
  .dcont--h2 .dcont__k { min-width: 0; }
  .dcont--h2 .dcont__chip { max-width: 96px; }
  .h2-more__d { display: none; }
  .h2-more__t { flex: 1 1 auto; }
  .h2-more__sum { min-height: 52px; }
}
/* ---- home2 Keep learning (js/home2.js keepLearning): one lane per course. Fixed lane height (2 pick rows are always
   reserved) so a re-render with different progress never moves what sits below. Phone: scroll-snap row of lanes. */
.h2-kl { margin: 0 0 var(--space-4); --kl-c: #2563eb; }
.h2-kl__top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 0 10px; }
.h2-kl__h { margin: 0; font-size: 16px; font-weight: 700; letter-spacing: -.01em; color: var(--text-bright); }
.h2-kl__all { display: inline-flex; align-items: center; gap: 2px; font-size: 13px; font-weight: 600; color: var(--link-blue); text-decoration: none; white-space: nowrap; }
.h2-kl__all:hover { text-decoration: underline; }
.h2-kl__lanes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.h2-kl__lanes--1 { grid-template-columns: minmax(0, 1fr); }
.h2-kl__lanes--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.h2-kl__lanes--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.h2-kl__lane { --kl-c: #2563eb; min-width: 0; display: flex; flex-direction: column; padding: 11px 12px 7px; box-sizing: border-box; border: 1px solid var(--border-light, var(--border-color)); border-radius: 12px; background: var(--bg-card); box-shadow: var(--shadow-rest); }
.h2-kl__lane[data-h2-lane="finance"] { --kl-c: #059669; }
.h2-kl__lane[data-h2-lane="quantcode"] { --kl-c: #7c3aed; }
.h2-kl__head { display: flex; align-items: center; gap: 8px; min-height: 20px; }
.h2-kl__ic { flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; color: var(--kl-c); background: color-mix(in srgb, var(--kl-c) 12%, transparent); }
.h2-kl__ic svg { width: 14px; height: 14px; }
.h2-kl__name { flex: 1 1 auto; min-width: 0; font-size: 14px; font-weight: 700; color: var(--text-bright); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.h2-kl__prog { flex: none; font-size: 12px; color: var(--text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.h2-kl__bar { height: 4px; margin: 7px 0 0; border-radius: 4px; background: var(--border-light, var(--border-color)); overflow: hidden; }
.h2-kl__bar > span { display: block; height: 100%; min-width: 0; border-radius: inherit; background: var(--kl-c); }
.h2-kl__next { display: flex; align-items: center; gap: 10px; height: 60px; margin: 8px 0 4px; padding: 5px 8px 5px 12px; box-sizing: border-box; border-radius: 10px; background: color-mix(in srgb, var(--kl-c) 7%, var(--bg-card)); color: inherit; text-decoration: none; transition: background .15s; }
.h2-kl__next:hover { background: color-mix(in srgb, var(--kl-c) 12%, var(--bg-card)); }
.h2-kl__nt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.h2-kl__why { font-size: 11.5px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.h2-kl__title { font-size: 14px; font-weight: 700; line-height: 1.3; color: var(--text-bright); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; }
.h2-kl__lock { display: inline-block; vertical-align: -1px; margin-right: 4px; color: var(--text-muted); }
.h2-kl__go { flex: none; display: inline-flex; align-items: center; gap: 2px; height: 34px; padding: 0 10px 0 13px; box-sizing: border-box; border-radius: 8px; background: var(--accent-primary); color: #fff; font-size: 13px; font-weight: 700; white-space: nowrap; }
.h2-kl__go .chev svg, .h2-kl__oago .chev svg { stroke: currentColor; }
.h2-kl__next.is-done .h2-kl__go { background: transparent; color: var(--link-blue); padding: 0 4px; }
.h2-kl__alts { display: flex; flex-direction: column; }
.h2-kl__alt { display: flex; align-items: center; gap: 8px; height: 28px; padding: 0 4px; border-radius: 6px; color: inherit; text-decoration: none; min-width: 0; }
.h2-kl__alt + .h2-kl__alt { border-top: 1px solid var(--border-light, var(--border-color)); border-radius: 0; }
a.h2-kl__alt:hover .h2-kl__at { color: var(--link-blue); text-decoration: underline; }
.h2-kl__ak { flex: none; max-width: 40%; font-size: 11.5px; font-weight: 600; color: var(--kl-c); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.h2-kl__at { flex: 1 1 auto; min-width: 0; font-size: 13px; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.h2-kl__am { flex: none; font-size: 12px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.h2-kl__alt.is-empty { visibility: hidden; }
.h2-kl__oa { display: flex; align-items: center; gap: 10px; min-height: 48px; margin: 12px 0 0; padding: 0 14px; box-sizing: border-box; border: 1px solid var(--border-light, var(--border-color)); border-radius: 12px; background: var(--bg-card); box-shadow: var(--shadow-rest); color: inherit; text-decoration: none; transition: background .15s; }
.h2-kl__oa:hover { background: color-mix(in srgb, #f59e0b 5%, var(--bg-card)); }
.h2-kl__oaic { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 7px; color: #b45309; background: color-mix(in srgb, #f59e0b 14%, transparent); }
.h2-kl__oak { flex: none; font-size: 12px; font-weight: 700; color: #b45309; white-space: nowrap; }
.h2-kl__oat { flex: 1 1 auto; min-width: 0; font-size: 14px; font-weight: 600; color: var(--text-bright); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.h2-kl__oam { flex: none; font-size: 12.5px; color: var(--text-muted); white-space: nowrap; }
.h2-kl__oago { flex: none; display: inline-flex; align-items: center; gap: 2px; font-size: 13px; font-weight: 700; color: var(--link-blue); white-space: nowrap; }
.h2-kl__next:focus-visible, .h2-kl__alt:focus-visible, .h2-kl__oa:focus-visible, .h2-kl__all:focus-visible { outline: 2px solid var(--accent-primary); outline-offset: 2px; }
html[data-theme="dark"] .h2-kl__lane, html[data-theme="dark"] .h2-kl__oa { border-color: var(--border-color); }
html[data-theme="dark"] .h2-kl__lane { --kl-c: #60a5fa; }
html[data-theme="dark"] .h2-kl__lane[data-h2-lane="finance"] { --kl-c: #34d399; }
html[data-theme="dark"] .h2-kl__lane[data-h2-lane="quantcode"] { --kl-c: #a78bfa; }
html[data-theme="dark"] .h2-kl__oaic, html[data-theme="dark"] .h2-kl__oak { color: #fbbf24; }
html[data-theme="dark"] .h2-kl__oaic { background: color-mix(in srgb, #f59e0b 18%, transparent); }
@media (prefers-reduced-motion: reduce) { .h2-kl__next, .h2-kl__oa { transition: none !important; } }
/* tablet + phone: lanes become one swipeable row (the next lane peeks in), nothing wider than the page */
@media (max-width: 900px) {
  .h2-kl__lanes { display: flex; gap: 10px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding-bottom: 2px; }
  .h2-kl__lanes::-webkit-scrollbar { display: none; }
  .h2-kl__lane { flex: 0 0 min(86%, 360px); scroll-snap-align: start; }
  .h2-kl__lanes--1 .h2-kl__lane { flex-basis: 100%; }
}
@media (max-width: 640px) {
  .h2-kl__oa { padding: 0 12px; gap: 9px; }
  .h2-kl__oam { display: none; }
}

/* Browse tab "Community" (lists counted across all candidates; js/explore-v2.js rankFeature / rankRows,
   inline list view in js/dash-lists.js clBody) */
.brz-cl__glyph { color: color-mix(in srgb, var(--accent) 65%, var(--text-muted)); }
.brz-feat--cl .brz-feat__art .brz-cl__glyph svg { height: 72px; width: 72px; }
.brz-feat--cl .brz-feat__foot { gap: 10px 14px; flex-wrap: wrap; }
.brz-feat--cl .brz-cl__show { margin-left: auto; }
.brz-cl__show, .brz-cl__go { padding: 0; border: 0; background: none; font: inherit; font-size: var(--text-sm); font-weight: var(--font-semibold); color: var(--accent); cursor: pointer; }
.brz-cl__go { margin-left: 0; font-weight: var(--font-bold); }
.brz-cl__show:hover, .brz-cl__go:hover { text-decoration: underline; }
a.brz-cl__show { text-decoration: none; }  /* every list opens its own page (owner, 2026-10-10); no inline expand */
.brz-cl__show:focus-visible, .brz-cl__go:focus-visible, .brz-li--cl:focus-visible, .brz-cx__p:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
button.brz-li--cl { width: 100%; border: 0; border-bottom: 1px solid var(--border-color); background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.brz-li--cl .brz-li__c::after { content: ' problems'; font-weight: 500; }
.brz-li--cl[aria-expanded="true"] { background: color-mix(in srgb, var(--accent) 6%, transparent); }
.brz-cx { padding: 4px 0 12px 42px; }
.brz-feat .brz-cx { padding: 12px 0 0; border-top: 1px solid var(--border-color); margin-top: 14px; }
.brz-cx__desc { margin: 4px 0 10px; font-size: 13px; color: var(--text-secondary); line-height: 1.45; }
.brz-cx__acts { display: flex; gap: 8px; margin: 0 0 10px; }
.brz-cx__list { list-style: none; margin: 0; padding: 0; max-height: 360px; overflow-y: auto; border: 1px solid var(--border-color); border-radius: 10px; }
.brz-cx__list li + li { border-top: 1px solid var(--border-color); }
.brz-cx__p { display: flex; align-items: center; gap: 10px; padding: 8px 12px; text-decoration: none; color: inherit; }
.brz-cx__p:hover { background: color-mix(in srgb, var(--text-muted) 7%, transparent); }
.brz-cx__n { flex: none; width: 20px; text-align: right; font: 600 12px/1 'JetBrains Mono', ui-monospace, monospace; color: var(--text-muted); }
.brz-cx__t { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.brz-cx__tt { font-size: 13.5px; font-weight: 600; color: var(--text-bright); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brz-cx__m { font-size: 12px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brz-cx__p.is-done .brz-cx__tt { color: var(--text-secondary); }
.brz-cx .fy-prob__diff { flex: none; font-size: 11px; }
@media (max-width: 640px) {
  .brz-cx { padding-left: 0; }
  .brz-cx .fy-prob__diff { display: none; }
  .brz-li--cl .brz-li__c::after { content: ''; }
}

/* ===== home2 Resume row as one unit (Oct 2026; js/home2.js resume()). Hero row + a quiet line of links. ===== */
.h2-res--one { display: flex; flex-direction: column; }
.h2r-main { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 7px 14px; box-sizing: border-box; text-decoration: none; color: inherit; transition: background .15s; }
.h2r-main:hover { background: color-mix(in srgb, var(--accent-primary) 5%, var(--bg-card)); }
.h2r-main:focus-visible, .h2r-link:focus-visible { outline: 2px solid var(--accent-primary); outline-offset: -2px; border-radius: 10px; }
.h2r-ic, .h2r-lic { flex: none; display: grid; place-items: center; color: var(--link-blue); }
.h2r-ic { width: 32px; height: 32px; border-radius: 9px; background: color-mix(in srgb, var(--accent-primary) 12%, transparent); }
.h2r-ic svg { width: 17px; height: 17px; }
.h2r-ic--lesson { color: #0d9488; background: color-mix(in srgb, #14b8a6 13%, transparent); }
.h2r-ic--oa { color: #c2410c; background: color-mix(in srgb, #f97316 13%, transparent); }
html[data-theme="dark"] .h2r-ic--lesson { color: #2dd4bf; }
html[data-theme="dark"] .h2r-ic--oa { color: #fb923c; }
.h2r-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.h2r-k { font-size: 11.5px; line-height: 1.25; font-weight: 600; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.h2r-t { font-size: 14px; line-height: 1.3; font-weight: 650; color: var(--text-bright); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.h2r-d { flex: none; }
.h2r-go { flex: none; display: inline-flex; align-items: center; height: 32px; padding: 0 14px; border-radius: 8px; background: var(--accent-primary); color: #fff; font-size: 13px; font-weight: 700; white-space: nowrap; }
.h2r-main:hover .h2r-go { background: var(--accent-hover, var(--accent-primary)); }
.h2r-sub { display: flex; align-items: center; flex-wrap: wrap; gap: 0 18px; padding: 4px 14px 5px; border-top: 1px solid var(--border-light, var(--border-color)); }
html[data-theme="dark"] .h2r-sub { border-color: var(--border-color); }
.h2r-link { display: inline-flex; align-items: center; gap: 7px; min-width: 0; max-width: 100%; min-height: 26px; padding: 0 2px; text-decoration: none; color: var(--text-secondary); font-size: 13px; }
.h2r-link:hover .h2r-lt { color: var(--accent-primary); text-decoration: underline; }
.h2r-lic svg { width: 14px; height: 14px; }
.h2r-lic.h2r-ic--problem { color: var(--text-muted); }
.h2r-lic.h2r-ic--lesson, .h2r-lic.h2r-ic--oa { background: none; }
.h2r-lk { flex: none; font-weight: 600; color: var(--text-muted); }
.h2r-lt { min-width: 0; color: var(--text-primary); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 640px) {
  .h2r-main { gap: 10px; padding: 7px 12px; }
  .h2r-ic { width: 30px; height: 30px; }
  .h2r-d { display: none; }
  .h2r-go { padding: 0 12px; }
  .h2r-sub { flex-direction: column; align-items: stretch; gap: 0; padding: 2px 12px 3px; }
  .h2r-link { min-height: 32px; }
}
@media (prefers-reduced-motion: reduce) { .h2r-main { transition: none; } }

/* ===== home2 Browse "Find a set to practice" (js/home2.js browse; Oct 2026). New classes only (b2*). ===== */
.b2 { margin: 0 0 var(--space-10, 40px); }
.b2__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.b2__h { margin: 0; font-size: var(--text-xl); font-weight: var(--font-bold); letter-spacing: -0.01em; color: var(--text-bright); }
.b2__alllink, .b2__link { font-size: 13px; font-weight: 600; color: var(--accent); text-decoration: none; white-space: nowrap; }
.b2__alllink:hover, .b2__link:hover { text-decoration: underline; }
.b2__tabs { display: flex; gap: 4px; margin: 0 0 14px; border-bottom: 1px solid var(--border-color); overflow-x: auto; scrollbar-width: none; }
.b2__tabs::-webkit-scrollbar { display: none; }
.b2__tab { flex: none; position: relative; padding: 9px 12px 10px; border: 0; background: none; font: inherit; font-size: 14px; font-weight: 600; color: var(--text-secondary); white-space: nowrap; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.b2__tab:hover { color: var(--text-primary); }
.b2__tab[aria-selected="true"] { color: var(--text-bright); }
.b2__tab[aria-selected="true"]::after { content: ''; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 2px; border-radius: 2px; background: var(--accent); }
.b2__tab:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 8px; }
.b2__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.b2c { position: relative; display: flex; gap: 12px; min-width: 0; padding: 14px 14px 12px; border: 1px solid var(--border-color); border-radius: 12px; background: var(--bg-card); transition: border-color .15s; }
.b2c[hidden] { display: none; }
.b2c:hover, .b2c.is-open { border-color: var(--accent-border); }
.b2c--wide { grid-column: span 2; }
.b2c__ic { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; background: color-mix(in srgb, var(--accent) 10%, transparent); color: var(--accent); }
.b2c__ic svg { width: 18px; height: 18px; }
.b2c__ic .brz-glyph { display: grid; place-items: center; color: inherit; }
.b2c__body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.b2c__t { display: block; width: 100%; padding: 0; border: 0; background: none; font: inherit; font-size: 15px; font-weight: 700; line-height: 1.3; color: var(--text-bright); text-align: left; text-decoration: none; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.b2c__t::after { content: ''; position: absolute; inset: 0; border-radius: 12px; }
.b2c__t:focus-visible { outline: none; }
.b2c__t:focus-visible::after { outline: 2px solid var(--accent); outline-offset: 2px; }
.b2c__why { margin: 0; font-size: 12.5px; font-weight: 600; color: var(--accent); }
.b2c__d { margin: 0; font-size: 13px; line-height: 1.4; color: var(--text-secondary); display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.b2c--wide .b2c__d { -webkit-line-clamp: 2; }
.b2c__foot { display: flex; align-items: center; gap: 10px; min-height: 30px; margin-top: auto; padding-top: 4px; font-size: 12px; color: var(--text-muted); white-space: nowrap; }
.b2c__n { font-weight: 600; color: var(--text-secondary); }
.b2c__tag { padding: 1px 8px; border-radius: 999px; background: color-mix(in srgb, var(--text-muted) 13%, transparent); color: var(--text-secondary); font-weight: 600; font-size: 11px; }
.b2c__prog { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.b2c__bar { width: 48px; height: 4px; border-radius: 99px; background: color-mix(in srgb, var(--text-muted) 22%, transparent); overflow: hidden; }
.b2c__bar i { display: block; height: 100%; background: var(--accent-green, #22c55e); }
.b2c__save { position: relative; z-index: 1; flex: none; display: grid; place-items: center; width: 30px; height: 30px; margin-left: auto; padding: 0; border: 1px solid transparent; border-radius: 8px; background: none; color: var(--text-muted); cursor: pointer; }
.b2c__save:hover { color: var(--accent); border-color: var(--border-color); }
.b2c__save:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.b2c .qv-lsave-slot { position: relative; z-index: 1; margin-left: auto; min-width: 0; }
.b2c .qv-lsave-done__t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.b2__more { display: flex; align-items: center; gap: 18px; margin-top: 12px; }
.b2__all { padding: 6px 12px; border: 1px solid var(--border-color); border-radius: 8px; background: none; font: inherit; font-size: 13px; font-weight: 600; color: var(--text-primary); cursor: pointer; }
.b2__all:hover { border-color: var(--text-muted); }
.b2__all:focus-visible, .b2__dclose:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.b2__detail { margin-top: 12px; padding: 14px 16px; border: 1px solid var(--border-color); border-radius: 12px; background: var(--bg-card); }
.b2__dhead { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.b2__dt { margin: 0; font-size: 16px; font-weight: 700; color: var(--text-bright); }
.b2__dclose { padding: 4px 10px; border: 1px solid var(--border-color); border-radius: 8px; background: none; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--text-secondary); cursor: pointer; }
.b2__detail .brz-cx__list { max-height: 420px; }
@media (max-width: 1024px) { .b2__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .b2__grid { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .b2c--wide { grid-column: auto; }
  .b2__tabs { gap: 0; }
  .b2__tab { padding: 9px 10px 10px; }
  .b2__detail { padding: 12px; }
}
@media (prefers-reduced-motion: reduce) { .b2c { transition: none; } }

/* Firm scope tab (flag 'firmprep', js/dash-firm.js sets html[data-dash-scope]=<firm>): the firm plan sits directly
   under the readiness band and tab row. Resume row, Keep learning, OA card, Browse and My lists are taken out
   (display: none, so a switch is one attribute flip, no reflow beyond the intended change); All prep restores them. */
html.fp-on[data-dash-scope]:not([data-dash-scope="all"]) .h2-res,
html.fp-on[data-dash-scope]:not([data-dash-scope="all"]) .dcont,
html.fp-on[data-dash-scope]:not([data-dash-scope="all"]) .h2-kl,
html.fp-on[data-dash-scope]:not([data-dash-scope="all"]) .h2-oa,
html.fp-on[data-dash-scope]:not([data-dash-scope="all"]) #browse2,
html.fp-on[data-dash-scope]:not([data-dash-scope="all"]) .h2-more,
html.fp-on[data-dash-scope]:not([data-dash-scope="all"]) #browse,
html.fp-on[data-dash-scope]:not([data-dash-scope="all"]) #my-lists .ml-scope--all { display: none !important; }
/* list votes + Timed test inside b2 cards / detail and My lists rows (js/list-social.js, home2) */
.b2c__acts { position: relative; z-index: 1; display: flex; align-items: center; gap: 2px; margin-left: auto; }
.b2c__acts .b2c__save { margin-left: 0; }
.b2__dacts { display: flex; align-items: center; gap: 8px; }