/* BRAND KIT V3 (October 2026): the colour and type names in this file are the JOBS, not the hues —
   cream = paper #F6F2EA, ink = Fjord Ink #12263A, burgundy = terracotta #A44723, petrol = Øresund
   #3F6E71 (both for data only), the main action = ink (raised navy on hover); Bricolage, Newsreader and
   Fraunces all read Space Grotesk now (upright); figures in tables Plex Mono, large ones Space Grotesk; square
   (app/theme.css). The v3 additions are at the end of the file. */
/* ============================================================
   cfa — skin for the CFA Prep Tracker. See app/theme.css for the palette (--t-*)
   and the contrast pairs it allows. Loaded last, after the app's own <style>.

   The app's variables are mapped once (section 1):
     --bg cream page · --surface/--surface-2 surface and sunken panels · --ink ink ·
     --ink-2 and --muted soft ink (nothing lighter: 5.4:1) · --line hairline (decoration only)
     --accent petrol: the selected state and calm sections (active tab, sliders, ticks,
       the "Studying" pill, the example-data banner, chart series)
     --good petrol · --bad burgundy · --warn ink (neutral) — and their soft tints
     --proj petrol: a projection is the same series carried forward, so it is petrol, dashed
   Main action = burgundy (button.btn), hover ink. Status pills keep their words:
     on track / passed = petrol on petrol-soft · borderline = ink on sunken with an edge ·
     at risk / did not pass = burgundy on burgundy-soft · studying = petrol outline.
   Shapes and type follow the COMPONENTS block in brand.css, always through its tokens:
     tabs and buttons are pills (44 high; 36 in the phone's tab row) · inputs and selects are fields ·
     .label, table headers and field labels are labels · status pills and score chips are tags (26 high, capitals) ·
     panels 20px with a hairline, boxes nested inside them 12px; the verdict (a level) and the journey
     (the overview) carry the 2px ink frame · h1/h2/h3 take the three heading sizes.
   Charts and bars: petrol series, burgundy for "down", ink for the level and the pass mark.
   Type: Manrope → Bricolage Grotesque (interface), JetBrains Mono → Bricolage with tabular
   figures; Newsreader for reading text; Fraunces italic for the level numerals, empty
   states and the footer.
   One light theme: the app's two dark blocks (specificity 0,2,0) lose to :root:root:root.
============================================================ */

/* ---------- 1. variable map (once) ---------- */
:root:root:root{
  --bg:var(--t-bg);
  --surface:var(--t-surface);
  --surface-2:var(--t-sunken);
  --ink:var(--t-ink);
  --ink-2:var(--t-ink-2);
  --muted:var(--t-ink-2);
  --line:var(--t-line);
  --accent:var(--t-petrol);
  --accent-soft:var(--t-petrol-soft);
  --proj:var(--t-petrol);
  --good:var(--t-petrol);
  --good-soft:var(--t-petrol-soft);
  --warn:var(--t-ink);
  --warn-soft:var(--t-sunken);
  --bad:var(--t-burgundy);
  --bad-soft:var(--t-burgundy-soft);
  --f-display:var(--t-sans);
  --f-body:var(--t-sans);
  --f-mono:var(--t-sans);
  --r:14px;
  color-scheme:light;
}

/* ---------- 2. type ---------- */
html,body{background:var(--t-bg);color:var(--t-ink)}
body{font-family:var(--t-sans);font-size:15px;letter-spacing:-.005em}
h1{font:var(--rr-h1);letter-spacing:var(--rr-h1-ls)}
h2{font:var(--rr-h2);letter-spacing:var(--rr-h2-ls)}
h3{font:var(--rr-h3);letter-spacing:var(--rr-h3-ls)}
a{color:var(--t-ink);text-underline-offset:3px;text-decoration-thickness:1.5px}
a:hover{color:var(--t-ink)}
.label,table.rt th{font:var(--rr-label-font);letter-spacing:var(--rr-label-ls);text-transform:uppercase;color:var(--t-ink-2)}
.muted{color:var(--t-ink-2)}
.pos{color:var(--t-ink);font-weight:500}
.neg{color:var(--t-ink);font-weight:500}
/* Bricolage digits are proportional: tabular ones wherever the app used its mono face */
.num,.mono,.kpi .v,.step .v,.step .no,table.rt .n,.chip,.cov output,.bc .v,.level-card dd,
ul.sess li .d,ul.sess li .h,details.grp > summary .m,.focus li b,input[type="number"],
.verdict .big .pct,.chart text{font-family:var(--t-sans);font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
/* reading text: Newsreader */
.hero p,.note,p.small,.panel-head > .small,.step .what span,.level-card .small.muted,
.verdict .big .small,.kpi .s,.bc .s,details.grp > summary .t small,ul.sess li .w small,.focus li > .small{
  font-family:var(--t-read);letter-spacing:0}
p.small,.panel-head > .small,.note{font-size:15.5px;line-height:1.5}
.step .what span,.kpi .s,.bc .s,details.grp > summary .t small,ul.sess li .w small{font-size:14px;line-height:1.4}
.verdict .big .small,.level-card .small.muted{font-size:15px;line-height:1.45}
.hero p{font-size:18px;line-height:1.5;color:var(--t-ink-2)}

/* ---------- 3. header: brand, then the tabs as pills (selected = petrol) ---------- */
.top{background:var(--t-bg);border-bottom:2px solid var(--t-ink)}
.top-in{padding:12px 16px 10px;align-items:center;gap:8px 24px}
.brand{padding-bottom:0;flex-wrap:wrap;gap:4px 10px}
.brand b{font:500 1.25rem/1.1 var(--t-sans);letter-spacing:-.035em}
.brand span{font:400 1rem/1.2 var(--t-serif);color:var(--t-ink-2)}
nav.tabs{gap:4px}
nav.tabs button{display:inline-flex;align-items:center;justify-content:center;height:var(--rr-control);padding:0 16px;
  font:var(--rr-control-font);letter-spacing:0;color:var(--t-ink);border:1px solid transparent;border-radius:var(--rr-pill);
  transition:background .15s,color .15s}
nav.tabs button:hover{background:var(--t-burgundy-soft);color:var(--t-ink)}
nav.tabs button[aria-selected="true"]{background:var(--t-select);border-color:var(--t-select);color:var(--t-cream)}
nav.tabs button[aria-selected="true"]:hover{background:var(--t-ink);border-color:var(--t-ink)}

/* ---------- 4. page, panels, banner ---------- */
main{padding-block:30px 64px;gap:24px}
section.panel,.level-card{background:var(--t-surface);border:var(--rr-hair);border-radius:var(--rr-radius);padding:22px 24px;box-shadow:none}
.panel-head{border-bottom:2px solid var(--t-ink);padding-bottom:10px}
.hero{gap:12px}
.banner{background:var(--t-petrol-soft);border:1px solid var(--t-petrol);border-radius:var(--rr-radius);padding:14px 18px;color:var(--t-ink);font-size:15.5px}
.banner b{font-weight:500}
.note{background:var(--t-sunken);border-radius:var(--rr-radius-sm);color:var(--t-ink);padding:14px 16px}
.empty{font:400 1.0625rem/1.5 var(--t-serif);color:var(--t-ink-2);border:1px dashed var(--t-edge);border-radius:var(--rr-radius-sm);background:transparent}

/* ---------- 5. controls ---------- */
/* primary (.btn): burgundy, hover ink · secondary (.ghost and the app's bordered .quiet): surface, hairline,
   hover ink edge · danger: surface, burgundy text and edge */
button.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:var(--rr-control);padding:0 20px;
  font:var(--rr-control-font);letter-spacing:0;text-transform:none;white-space:nowrap;border-radius:var(--rr-pill);
  border:1px solid var(--t-action);background:var(--t-action);color:var(--t-cream);transition:background .15s,color .15s,border-color .15s}
button.btn:hover{background:var(--t-action-hover);border-color:var(--t-action-hover);color:var(--t-on-action-hover)}
button.btn.ghost,button.btn.quiet{background:var(--t-surface);color:var(--t-ink);border:var(--rr-hair)}
button.btn.ghost:hover,button.btn.quiet:hover{background:var(--t-surface);border-color:var(--t-ink);color:var(--t-ink)}
button.btn.danger{background:var(--t-surface);color:var(--t-ink);border-color:var(--t-burgundy)}
button.btn.danger:hover{background:var(--t-burgundy);border-color:var(--t-burgundy);color:var(--t-cream)}
button.link{color:var(--t-ink);font-weight:500;text-decoration-thickness:1.5px;text-underline-offset:3px}
button.link:hover{color:var(--t-ink)}
button.x{color:var(--t-ink-2);width:var(--rr-control-sm);height:var(--rr-control-sm);border-radius:var(--rr-pill);font:400 1.25rem/1 var(--t-sans)}
button.x:hover{color:var(--t-ink);background:var(--t-burgundy-soft)}
:focus-visible{outline:3px solid var(--t-petrol);outline-offset:2px}
input,select{font:var(--rr-field-font);color:var(--t-ink);background:var(--t-surface);border:var(--rr-hair);
  border-radius:var(--rr-radius-sm);padding:0 12px;height:var(--rr-control);min-height:0}
input:focus,select:focus{border-color:var(--t-ink)}
input::placeholder{color:var(--t-ink-2);opacity:1}
input[type="range"]{accent-color:var(--t-select);height:auto;border:0;padding:0;background:transparent}
input[type="checkbox"]{accent-color:var(--t-select);width:20px;height:20px;padding:0;flex:none}
/* a field's label: the label style (700 12px capitals, soft ink) */
.field > span{font:var(--rr-label-font);letter-spacing:var(--rr-label-ls);text-transform:uppercase;color:var(--t-ink-2)}
.check{font-size:15px;color:var(--t-ink);min-height:44px}
.form-row,.settings{gap:12px}

/* ---------- 6. the verdict: chance of passing, then the facts ---------- */
.verdict{border:var(--rr-frame);border-radius:var(--rr-radius);background:var(--t-surface)}
.verdict .big{border-right:1.5px solid var(--t-line-2);padding:24px;gap:10px}
.verdict .big .pct{font-weight:500;font-size:clamp(3.4rem,8vw,4.6rem);letter-spacing:-.055em;line-height:.95}
.kpi{border-color:var(--t-line-2);padding:18px 20px;gap:6px}
.kpi .v{font-weight:500;font-size:1.5rem;letter-spacing:-.03em;color:var(--t-ink)}
@media (max-width:760px){
  .verdict .big{border-right:0;border-bottom:1.5px solid var(--t-line-2)}
  .kpi{border-color:var(--t-line-2)!important}
}

/* ---------- 7. status pills and score chips: the words stay ---------- */
/* tags: 26 high, capitals; they never wrap (a wrapped tag would be two lines in a 26px pill) */
.pill{box-sizing:border-box;height:var(--rr-tag);padding:0 10px;font:var(--rr-tag-font);letter-spacing:var(--rr-tag-ls);text-transform:uppercase;
  white-space:nowrap;border:1px solid transparent;border-radius:var(--rr-pill);background:var(--t-sunken);color:var(--t-ink)}
.pill.good{background:var(--t-petrol-soft);color:var(--t-ink);border-color:var(--t-petrol)}
.pill.bad{background:var(--t-burgundy-soft);color:var(--t-ink);border-color:var(--t-burgundy)}
.pill.warn{background:var(--t-sunken);color:var(--t-ink);border-color:var(--t-edge)}
.pill.info{background:transparent;color:var(--t-ink);border-color:var(--t-petrol)}
.pill::before{flex:none}
.pill.warn::before{background:transparent;border:2px solid currentColor;box-sizing:border-box;width:9px;height:9px}
.chip{display:inline-flex;align-items:center;box-sizing:border-box;height:var(--rr-tag);padding:0 9px;font:var(--rr-tag-font);
  letter-spacing:var(--rr-tag-ls);text-transform:uppercase;border-radius:var(--rr-pill);background:var(--t-sunken);color:var(--t-ink)}
.chip.good{background:var(--t-petrol-soft);color:var(--t-ink)}
.chip.warn{background:var(--t-sunken);color:var(--t-ink)}
.chip.bad{background:var(--t-burgundy-soft);color:var(--t-ink)}

/* ---------- 8. progress bars and the estimate build-up ---------- */
.bar{height:8px;border-radius:0;background:var(--t-sunken)}
.bar > i{background:var(--t-petrol);border-radius:0}
.bar > i.proj{background:var(--t-petrol);opacity:.3}
.build{border:var(--rr-hair);border-radius:var(--rr-radius-sm);background:var(--t-surface)}
.step{border-top-color:var(--t-line);padding:13px 16px}
.step .no{color:var(--t-ink-2);font-weight:500}
.step .what b{font-weight:500;letter-spacing:-.01em}
.step .what span{color:var(--t-ink-2)}
.step .v{font-weight:500;font-size:15.5px}
.step.total{background:var(--t-sunken)}
.step.total .what span{color:var(--t-ink)}
.step.total .v{font-weight:500;font-size:1.15rem}
.wbar::before{border-left:1.5px solid var(--t-edge)}
.wbar i{border-radius:0}
.wbar i.up{background:var(--t-petrol)}
.wbar i.down{background:var(--t-burgundy)}
.wbar i.lvl{background:var(--t-ink);opacity:1}

/* ---------- 9. tables ---------- */
table.rt{font-size:15px}
table.rt th{border-bottom:2px solid var(--t-ink);padding:10px}
table.rt td{border-bottom:1px solid var(--t-line);padding:10px}
table.rt td select{padding-inline:10px 6px;min-width:68px}
table.rt td.first{font-weight:500;letter-spacing:-.01em}
table.rt td input[type="number"]{width:76px}
.cov output{font-weight:500;color:var(--t-ink)}
table.rt td .pill{white-space:nowrap}   /* the app lets a tag wrap inside a table cell: a tag is one line */
@media (max-width:760px){
  table.rt tr{border-bottom:1px solid var(--t-line-2);padding:14px 0}
  table.rt td{border:0;padding:0;min-height:36px}
  /* the caption may wrap (the figure beside it stays on one line), so two cells side by side never touch */
  table.rt td::before{font:500 13px/1.25 var(--t-sans);color:var(--t-ink-2);white-space:normal}
  table.rt td.n{white-space:nowrap}
  table.rt td:has(> .pill){grid-column:1 / -1}   /* a cell holding a tag takes the whole row, so the tag fits */
  .kpi .v{font-size:1.3rem}
}

/* ---------- 10. charts: petrol series, dashed ink pass mark, dashed petrol projection ---------- */
.chart text{fill:var(--t-ink-2);font-size:11.5px;font-weight:500}
.chart text.lab{fill:var(--t-ink);font-family:var(--t-sans);font-weight:500;font-size:12px}
.chart .grid{stroke:var(--t-line)}
.chart .ref{stroke:var(--t-ink);stroke-width:1.5;stroke-dasharray:5 4}
.chart .series{stroke:var(--t-petrol);stroke-width:2.5}
.chart .area{fill:var(--t-petrol);opacity:.12}
.chart .dot{fill:var(--t-petrol);stroke:var(--t-surface)}
.chart .pace{stroke:var(--t-petrol);stroke-width:2;stroke-dasharray:6 5}
.chart .projdot{fill:var(--t-surface);stroke:var(--t-petrol)}
.chart .today{stroke:var(--t-ink-2)}
.legend{font:500 14px var(--t-sans);color:var(--t-ink);gap:6px 20px}
.legend i{width:24px;border-top:2.5px solid var(--t-petrol)}
.legend i.dash{border-top:2px dashed var(--t-petrol)}
.legend i.ref{border-top:2px dashed var(--t-ink)}
#tip,.toast{background:var(--t-ink);color:var(--t-cream);font-family:var(--t-sans);border-radius:0}
#tip{font-size:13.5px;padding:8px 11px}
.toast{padding:12px 16px;font-size:15px}
.toast button{color:var(--t-cream)}

/* ---------- 11. expandable groups: weeks, mocks, attempts ---------- */
.groups{gap:10px}
details.grp{border:var(--rr-hair);border-radius:var(--rr-radius-sm);background:var(--t-surface)}
details.grp > summary{padding:12px 14px;min-height:44px}
details.grp > summary:hover{background:var(--t-sunken);border-radius:calc(var(--rr-radius-sm) - 1px)}
details.grp > summary::before{border-color:var(--t-ink)}
details.grp > summary .t{letter-spacing:-.01em}
details.grp > summary .t small{color:var(--t-ink-2)}
details.grp > summary .m{font-size:14.5px;font-weight:500}
ul.sess li{border-top-color:var(--t-line);font-size:15px}
ul.sess li .d,ul.sess li .w small{color:var(--t-ink-2)}
.tgrid div{border-bottom:1px dashed var(--t-line-2);font-size:14.5px}
details.mock-topics summary,details.inline summary{color:var(--t-ink);font-size:14.5px;font-weight:500;min-height:32px;display:flex;align-items:center;gap:6px}
details.mock-topics summary:hover,details.inline summary:hover{color:var(--t-ink)}

/* ---------- 12. back-check ---------- */
.bc{border:var(--rr-hair);border-radius:var(--rr-radius-sm);background:var(--t-surface)}
.bc div{border-left-color:var(--t-line-2);padding:14px 16px}
.bc .v{font-weight:500;font-size:1.3rem;letter-spacing:-.03em}

/* ---------- 13. overview: the journey, the three levels, the focus list ---------- */
.journey{border:var(--rr-frame);border-radius:var(--rr-radius);background:var(--t-surface)}
.journey div{border-left:1.5px solid var(--t-line-2);padding:16px 18px;gap:6px}
.level-card{gap:16px}
.level-card .roman{font:500 3rem/.9 var(--t-serif);color:var(--t-ink);letter-spacing:-.02em}
.level-card dl{font-size:15px}
.level-card dd{font-weight:500}
.focus li{border:var(--rr-hair);border-radius:var(--rr-radius-sm);padding:12px 14px;background:var(--t-surface)}
.focus li b{font-weight:500;font-size:1.1rem;color:var(--t-ink)}
.focus li strong{font-weight:500}

/* ---------- 14. footer ---------- */
footer.foot{font:400 15px/1.5 var(--t-serif);color:var(--t-ink-2);border-top:2px solid var(--t-ink);padding-top:20px}

/* ---------- 15. phone ---------- */
@media (max-width:560px){
  .top-in{padding:10px 12px 8px}
  nav.tabs{gap:0;flex-wrap:nowrap}
  nav.tabs button{height:var(--rr-control-sm);padding:0 9px;font:var(--rr-control-font-sm)}
  section.panel,.level-card{padding:16px}
  .journey div{border-left:0;border-top:1.5px solid var(--t-line-2)}
  .journey div:first-child{border-top:0}
  .banner{padding:14px}
  .verdict .big{padding:18px}
}
/* no dark variant: the variable map above is the only theme; reduced motion is handled in theme.css */

/* ---------- v3 (brand kit, October 2026): figures and table numbers in Plex Mono, hairlines ---------- */
.num,.mono,.kpi .v,.step .v,.step .no,table.rt .n,.cov output,.bc .v,.level-card dd,
ul.sess li .d,ul.sess li .h,details.grp > summary .m,.focus li b,.verdict .big .pct{font-family:var(--t-mono);font-weight:500}
.chart text{font-family:var(--t-mono)}
table.rt th.n{font:var(--rr-label-font);letter-spacing:var(--rr-label-ls)}
footer.foot{border-top:1px solid var(--t-ink)}
.level-card .roman{font-weight:500}
/* v3, colour for data only: the example banner and the status tags are navy and ivory; each status keeps its
   word, and a square marks it — øresund passed / on track, terracotta at risk, an øresund outline studying */
.banner{background:var(--t-sunken);border-color:var(--t-ink)}
.pill,.pill.good,.pill.bad,.pill.info{background:var(--t-surface);color:var(--t-ink);border-color:var(--t-edge)}
.pill::before{background:var(--t-ink-2)}
.pill.good::before{background:var(--t-petrol)}
.pill.bad::before{background:var(--t-burgundy)}
.pill.info::before{background:transparent;box-shadow:inset 0 0 0 2px var(--t-petrol)}
.chip.good,.chip.warn,.chip.bad{background:var(--t-surface);color:var(--t-ink);box-shadow:inset 0 0 0 1px var(--t-edge)}
.chip.good::before,.chip.bad::before{content:"";flex:none;width:8px;height:8px;margin-right:6px}
.chip.good::before{background:var(--t-petrol)}
.chip.bad::before{background:var(--t-burgundy)}
.verdict .big .pct{color:var(--t-ink);font-family:var(--t-sans)}
:root:root:root span.t{font-weight:500}
:root:root:root .pct{color:var(--t-ink)}
/* the app colours the verdict inline; the figure is a word, so navy (the bars beside it carry the colour) */
.verdict .big .pct{color:var(--t-ink)!important}
/* table numbers in Plex Mono */
:root:root:root .rt td.n,:root:root:root .rt td.wide{font-family:var(--rr-mono);font-variant-numeric:tabular-nums}