/* ============================================================
   SyllabusScope
   Direction: reading room. Warm parchment ground, deep indigo ink,
   one saffron accent reserved for action, teal for anything finished.
   Display serif over a clean sans body - the inverse of the usual
   dashboard pairing, and it makes long syllabus text easier to read.
   ============================================================ */

:root{
  /* ink */
  --ink:      #17182B;
  --ink-2:    #3B3E5C;
  --ink-3:    #6E7191;

  /* surfaces */
  --paper:    #FCFBF7;
  --surface:  #FFFFFF;
  --mist:     #F1EFE8;
  --agar:     #F4F2EA;
  --line:     #E4E0D6;
  --line-2:   #CFCABA;

  /* brand */
  --broth:    #2F3061;   /* deep indigo, primary */
  --broth-2:  #4A4C93;   /* lifted indigo */
  --safranin: #D97A15;   /* saffron, actions and emphasis */
  --methylene:#3D6E8F;   /* muted blue, secondary */
  --gold:     #A87A22;
  --done:     #2C7A6B;   /* teal, anything finished */
  --done-2:   #21604F;
  --done-bg:  #EDF6F3;
  --done-line:#B8DCD2;
  --danger:   #C0453C;

  --r-sm: 5px; --r: 10px; --r-lg: 16px;
  --sp: 8px;
  --shadow: 0 1px 2px rgba(23,24,43,.05), 0 8px 24px rgba(23,24,43,.06);
  --shadow-lift: 0 2px 6px rgba(23,24,43,.07), 0 18px 44px rgba(23,24,43,.13);

  --f-display: 'Fraunces', Georgia, serif;
  --f-body:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-mono:    'JetBrains Mono', ui-monospace, monospace;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font:400 16px/1.62 var(--f-body);
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}
img,svg{ max-width:100%; }
a{ color:var(--broth); text-underline-offset:3px; }
a:hover{ color:var(--safranin); }
:focus-visible{ outline:2.5px solid var(--safranin); outline-offset:2px; border-radius:2px; }
.skip{ position:absolute; left:-9999px; }
.skip:focus{ left:12px; top:12px; background:var(--ink); color:#fff; padding:10px 14px; z-index:99; }

h1,h2,h3,h4{ font-family:var(--f-display); font-weight:600; line-height:1.2; margin:0 0 .5em;
  letter-spacing:-.005em; font-variation-settings:'SOFT' 0,'WONK' 0,'opsz' 40; }
h1{ font-size:clamp(1.9rem,4.2vw,3rem); }
h2{ font-size:clamp(1.35rem,2.6vw,1.9rem); }
h3{ font-size:1.12rem; }
p{ margin:0 0 1em; }
.wrap{ max-width:1180px; margin:0 auto; padding:0 20px; }
.narrow{ max-width:760px; }

/* ---------------------------------------------------------- top bar */
.topbar{ background:var(--ink); color:#EDEDF6; position:sticky; top:0; z-index:50;
  border-bottom:1px solid rgba(255,255,255,.08); }
.topbar-in{ display:flex; align-items:center; gap:18px; min-height:62px; flex-wrap:wrap; padding-block:8px; }
.brand{ display:flex; align-items:center; gap:9px; color:#fff; text-decoration:none; flex:0 0 auto; }
.brand-mark{ color:var(--broth-2); display:flex; }
.brand-txt{ font-family:var(--f-display); font-weight:600; letter-spacing:-.02em; font-size:1.06rem; }
.topnav{ margin-left:auto; display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.topnav a{ color:#D5D6E6; text-decoration:none; font-family:var(--f-display); font-size:.86rem;
  padding:7px 11px; border-radius:var(--r-sm); }
.topnav a:hover{ color:#fff; background:rgba(255,255,255,.08); }
.topnav .cta{ background:var(--safranin); color:#fff; }
.topnav .cta:hover{ background:#a03830; color:#fff; }
.topnav .ghost{ border:1px solid rgba(255,255,255,.22); }

.finder{ position:relative; display:flex; flex:1 1 320px; max-width:520px; }
.finder input{
  flex:1; min-width:0; font:400 .92rem/1.4 var(--f-body); padding:9px 13px;
  border:1px solid rgba(255,255,255,.18); border-right:0;
  border-radius:var(--r-sm) 0 0 var(--r-sm);
  background:rgba(255,255,255,.07); color:#fff;
}
.finder input::placeholder{ color:#9A9CBB; }
.finder input:focus{ background:rgba(255,255,255,.13); outline:none; border-color:var(--broth-2); }
.finder button{
  font-family:var(--f-display); font-size:.84rem; padding:9px 15px; cursor:pointer;
  border:1px solid var(--broth-2); background:var(--broth); color:#fff;
  border-radius:0 var(--r-sm) var(--r-sm) 0;
}
.finder button:hover{ background:var(--broth-2); }
.suggest{
  position:absolute; top:calc(100% + 6px); left:0; right:0; z-index:60;
  background:#fff; border:1px solid var(--line); border-radius:var(--r);
  box-shadow:var(--shadow-lift); max-height:60vh; overflow:auto; padding:5px;
}
.suggest a{ display:block; padding:8px 11px; border-radius:var(--r-sm); text-decoration:none; color:var(--ink); }
.suggest a:hover,.suggest a.on{ background:var(--agar); }
.suggest .s-name{ font-size:.92rem; }
.suggest .s-meta{ font:500 .68rem/1.4 var(--f-mono); color:var(--ink-3); text-transform:uppercase; letter-spacing:.06em; }

/* ------------------------------------------------------------ flash */
.flash{ margin:16px 0 0; padding:11px 15px; border-radius:var(--r); font-size:.94rem;
  border-left:4px solid var(--broth); background:var(--agar); }
.flash-err{ border-left-color:var(--safranin); background:#FBEFEE; }

/* ------------------------------------------------------------- hero */
.hero{ background:var(--ink); color:#E7E7F2; padding:56px 0 44px; position:relative; overflow:hidden; }
.hero::after{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:radial-gradient(circle at 1px 1px, rgba(255,255,255,.16) 1px, transparent 0);
  background-size:26px 26px;
  -webkit-mask-image:radial-gradient(ellipse 70% 90% at 85% 40%, #000, transparent 72%);
          mask-image:radial-gradient(ellipse 70% 90% at 85% 40%, #000, transparent 72%);
}
.hero-in{ position:relative; z-index:1; max-width:820px; }
.eyebrow{ font:500 .72rem/1 var(--f-mono); letter-spacing:.18em; text-transform:uppercase;
  color:var(--broth-2); margin:0 0 16px; }
.hero h1{ color:#fff; margin-bottom:.45em; }
.hero h1 em{ font-style:normal; color:var(--broth-2); }
.hero p{ font-size:1.06rem; color:#BFC1DC; max-width:62ch; }
.hero-stats{ display:flex; gap:34px; flex-wrap:wrap; margin-top:26px; }
.hero-stats div{ display:flex; flex-direction:column; }
.hero-stats b{ font:600 1.5rem/1 var(--f-display); color:#fff; }
.hero-stats span{ font:500 .68rem/1.6 var(--f-mono); letter-spacing:.1em; text-transform:uppercase; color:#9A9CBB; }

/* ------------------------------------------------------------ tags */
.tag{
  display:inline-block; font:500 .68rem/1.5 var(--f-mono); letter-spacing:.04em;
  padding:2px 7px; border-radius:3px; background:var(--agar); color:var(--broth);
  border:1px solid #D8D6E8; white-space:nowrap;
}
.tag-key{ background:var(--ink); color:#B9BDEA; border-color:var(--ink-2); }
.tag-unreviewed{ background:#FAF1DF; color:#8A6B18; border-color:#E5D5A9; }
.tag-verified{ background:var(--done-bg); color:var(--done-2); border-color:var(--done-line); }
.tag-official{ background:#E9EEF6; color:var(--methylene); border-color:#C4D3EA; }
.tag-compendium{ background:#F5EEF6; color:#714C86; border-color:#DCC6E1; }
.tag-lg{ font-size:.76rem; padding:4px 10px; }

/* -------------------------------------------------------- sections */
.section{ padding:52px 0; }
.section-tight{ padding:30px 0; }
.section-head{ display:flex; align-items:baseline; justify-content:space-between; gap:16px;
  flex-wrap:wrap; margin-bottom:22px; }
.section-head p{ margin:0; color:var(--ink-3); font-size:.95rem; }
.rule{ border:0; border-top:1px solid var(--line); margin:0; }

/* ------------------------------------------------------- exam cards */
.exam-grid{ display:grid; gap:16px; grid-template-columns:repeat(auto-fill,minmax(288px,1fr)); }
.exam-card{
  position:relative; display:block; background:#fff; border:1px solid var(--line);
  border-radius:var(--r); padding:20px 20px 17px; text-decoration:none; color:inherit;
  transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease;
  overflow:hidden;
}
.exam-card::before{ content:""; position:absolute; inset:0 auto 0 0; width:4px; background:var(--accent,var(--broth)); }
.exam-card:hover{ transform:translateY(-2px); box-shadow:var(--shadow-lift); border-color:var(--line-2); color:inherit; }
.exam-card h3{ margin:0 0 3px; font-size:1.06rem; }
.exam-card .body{ color:var(--ink-3); font-size:.86rem; margin:0 0 12px; }
.exam-card .counts{ display:flex; gap:14px; font:500 .68rem/1.5 var(--f-mono);
  text-transform:uppercase; letter-spacing:.08em; color:var(--ink-3); margin-top:12px;
  padding-top:11px; border-top:1px solid var(--line); }
.exam-card .counts b{ color:var(--ink); font-size:.86rem; display:block; font-family:var(--f-display); }

/* ---------------------------------------------------------- crumbs */
.crumbs{ font:500 .72rem/1.6 var(--f-mono); text-transform:uppercase; letter-spacing:.08em;
  color:var(--ink-3); padding:16px 0 0; display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.crumbs a{ color:var(--ink-3); text-decoration:none; }
.crumbs a:hover{ color:var(--safranin); }
.crumbs span.sep{ color:var(--line-2); }

/* --------------------------------------------------------- syllabus */
.page-head{ padding:26px 0 22px; border-bottom:1px solid var(--line); margin-bottom:26px; }
.page-head h1{ margin-bottom:.25em; }
.page-head .meta{ color:var(--ink-3); font-size:.93rem; margin:0; }
.meta-row{ display:flex; gap:8px; flex-wrap:wrap; margin-top:12px; }

.unit{ border:1px solid var(--line); border-radius:var(--r); background:#fff; margin-bottom:12px; overflow:hidden; }
.unit-btn{
  width:100%; display:flex; align-items:flex-start; gap:14px; text-align:left; cursor:pointer;
  background:none; border:0; padding:16px 18px; font:inherit; color:inherit;
}
.unit-btn:hover{ background:var(--agar); }
.unit-no{ font:600 .78rem/1.5 var(--f-mono); color:var(--broth); background:var(--agar);
  border:1px solid #D8D6E8; border-radius:3px; padding:1px 7px; flex:0 0 auto; margin-top:3px; }
.unit-name{ font-family:var(--f-display); font-weight:500; font-size:1.02rem; flex:1; }
.unit-count{ font:500 .7rem/1.5 var(--f-mono); color:var(--ink-3); flex:0 0 auto; margin-top:4px; }
.unit-chev{ flex:0 0 auto; transition:transform .2s ease; color:var(--ink-3); margin-top:2px; }
.unit-body{ border-top:1px solid var(--line); padding:6px 18px 14px;
  overflow:hidden; transition:max-height .3s cubic-bezier(.2,.8,.2,1), opacity .25s ease; }
.unit summary::-webkit-details-marker{ display:none; }
.unit summary::marker{ content:''; }
.unit summary{ list-style:none; }
.unit[open] > summary{ background:var(--agar); }
.unit[open] .unit-chev{ transform:rotate(90deg); }

.topic-row{ display:flex; align-items:baseline; gap:12px; padding:11px 0;
  border-bottom:1px dotted var(--line-2); text-decoration:none; color:inherit; }
.topic-row:last-child{ border-bottom:0; }
.topic-row:hover{ color:var(--safranin); }
.topic-row .t-no{ font:500 .72rem/1.6 var(--f-mono); color:var(--ink-3); flex:0 0 2.2em; }
.topic-row .t-name{ flex:1; }
.topic-row .t-tag{ flex:0 0 auto; }

/* ------------------------------------------------------- subtopics */
.sub-list{ display:grid; gap:10px; }
.sub-card{
  display:flex; align-items:flex-start; gap:14px; background:#fff; border:1px solid var(--line);
  border-radius:var(--r); padding:14px 16px; text-decoration:none; color:inherit;
  transition:border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.sub-card:hover{ border-color:var(--broth); box-shadow:var(--shadow); transform:translateX(2px); color:inherit; }
.sub-card .s-no{ font:500 .74rem/1.7 var(--f-mono); color:var(--ink-3); flex:0 0 auto; }
.sub-card .s-main{ flex:1; min-width:0; }
.sub-card .s-name{ display:block; margin-bottom:5px; }
.sub-card .s-go{ flex:0 0 auto; color:var(--line-2); align-self:center; }
.sub-card:hover .s-go{ color:var(--safranin); }

/* ------------------------------------------------ subtopic detail */
.detail{ display:grid; gap:28px; grid-template-columns:minmax(0,1fr) 336px; align-items:start; padding-bottom:60px; }
@media (max-width:960px){ .detail{ grid-template-columns:1fr; } }
.panel{ background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:20px 22px; margin-bottom:20px; }
.panel-head{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:14px; flex-wrap:wrap; }
.panel-head h2{ font-size:1.06rem; margin:0; }
.panel-head .hint{ font:500 .68rem/1.5 var(--f-mono); color:var(--ink-3); text-transform:uppercase; letter-spacing:.08em; }

/* the five-line explainer - numbered because the lines are a sequence */
.explain{ counter-reset:ln; margin:0; padding:0; list-style:none; }
.explain li{ counter-increment:ln; position:relative; padding:9px 0 9px 40px; border-bottom:1px dotted var(--line-2); }
.explain li:last-child{ border-bottom:0; }
.explain li::before{
  content:counter(ln,decimal-leading-zero); position:absolute; left:0; top:11px;
  font:500 .7rem/1 var(--f-mono); color:var(--broth-2); letter-spacing:.04em;
}

.book{ display:flex; gap:14px; padding:13px 0; border-bottom:1px dotted var(--line-2); }
.book:last-child{ border-bottom:0; }
.book-rank{ font:600 .82rem/1.5 var(--f-display); color:#fff; background:var(--broth);
  width:24px; height:24px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex:0 0 24px; }
.book-t{ font-family:var(--f-display); font-weight:500; }
.book-a{ color:var(--ink-3); font-size:.88rem; }

.paper{ padding:14px 0; border-bottom:1px dotted var(--line-2); }
.paper:last-child{ border-bottom:0; }
.paper-t{ font-family:var(--f-display); font-weight:500; font-size:.99rem; margin:0 0 4px; }
.paper-t a{ text-decoration:none; color:var(--ink); }
.paper-t a:hover{ color:var(--safranin); }
.paper-m{ font-size:.86rem; color:var(--ink-3); margin:0; }
.cites{ display:inline-flex; align-items:baseline; gap:5px; font:600 .78rem/1.5 var(--f-mono);
  color:var(--gold); background:#FAF3E4; border:1px solid #E7DCBC; border-radius:3px; padding:1px 7px; }
.paper-bar{ height:3px; background:var(--mist); border-radius:2px; margin-top:8px; overflow:hidden; }
.paper-bar i{ display:block; height:100%; background:var(--gold); width:0; transition:width .8s cubic-bezier(.2,.8,.2,1); }

.loading{ display:flex; align-items:center; gap:11px; color:var(--ink-3); font-size:.92rem; padding:12px 0; }
.spinner{ width:15px; height:15px; border:2px solid var(--line-2); border-top-color:var(--broth);
  border-radius:50%; animation:spin .8s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }

.side .panel{ position:relative; }
.exam-chip{ display:flex; align-items:center; gap:9px; padding:9px 11px; border:1px solid var(--line);
  border-radius:var(--r-sm); text-decoration:none; color:inherit; margin-bottom:7px; background:#fff; }
.exam-chip:hover{ border-color:var(--broth); background:var(--agar); color:inherit; }
.exam-chip .dot{ width:9px; height:9px; border-radius:50%; flex:0 0 9px; }
.exam-chip .n{ margin-left:auto; font:500 .7rem/1 var(--f-mono); color:var(--ink-3); }
.exam-chip.self{ background:var(--agar); border-color:#D8D6E8; }

/* --------------------------------------------------------- mindmap */
.mindmap-wrap{ background:var(--ink); border-radius:var(--r); padding:6px; position:relative; overflow:hidden; }
.mindmap-wrap svg{ display:block; width:100%; height:auto; }
.mm-edge{ stroke:#3E4079; stroke-width:1.2; fill:none; }
.mm-node text{ font:500 10.5px var(--f-mono); fill:#C9CCE8; }
.mm-core circle{ fill:var(--broth); stroke:#5D5FBF; stroke-width:1.5; }
.mm-core text{ font:600 12px var(--f-display); fill:#fff; }
.mm-leg{ display:flex; gap:14px; flex-wrap:wrap; padding:9px 10px 4px; font:500 .66rem/1.5 var(--f-mono);
  color:#9A9CBB; text-transform:uppercase; letter-spacing:.08em; }
.mm-leg i{ width:8px; height:8px; border-radius:50%; display:inline-block; margin-right:5px; }

/* ------------------------------------------------------ infographic */
.info-grid{ display:grid; gap:10px; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); }
.info-cell{ background:var(--agar); border:1px solid #DEDCEC; border-radius:var(--r-sm); padding:12px 13px; }
.info-cell b{ display:block; font:600 1.35rem/1.1 var(--f-display); color:var(--broth); }
.info-cell span{ font:500 .66rem/1.5 var(--f-mono); text-transform:uppercase; letter-spacing:.08em; color:var(--ink-3); }
.bars{ margin-top:14px; }
.bar-row{ display:grid; grid-template-columns:118px 1fr 42px; gap:10px; align-items:center; margin-bottom:7px;
  font-size:.84rem; }
.bar-row .bt{ font:500 .7rem/1.4 var(--f-mono); color:var(--ink-3); text-align:right; }
.bar-track{ background:var(--mist); border-radius:3px; height:9px; overflow:hidden; }
.bar-fill{ height:100%; background:var(--broth-2); width:0; border-radius:3px;
  transition:width .9s cubic-bezier(.2,.8,.2,1); }
.bar-row .bn{ font:500 .74rem/1 var(--f-mono); color:var(--ink); }

/* ------------------------------------------------------------ forms */
.form-card{ background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  padding:30px 32px; box-shadow:var(--shadow); max-width:460px; margin:44px auto; }
.form-card h1{ font-size:1.5rem; margin-bottom:.2em; }
.form-card .sub{ color:var(--ink-3); font-size:.93rem; margin-bottom:22px; }
label{ display:block; font:500 .72rem/1.6 var(--f-mono); text-transform:uppercase;
  letter-spacing:.08em; color:var(--ink-2); margin:14px 0 5px; }
input[type=text],input[type=email],input[type=password],input[type=search],input[type=number],select,textarea{
  width:100%; font:400 .96rem/1.5 var(--f-body); padding:9px 12px;
  border:1px solid var(--line-2); border-radius:var(--r-sm); background:#fff; color:var(--ink);
}
textarea{ min-height:96px; resize:vertical; }
input:focus,select:focus,textarea:focus{ border-color:var(--broth); outline:none; box-shadow:0 0 0 3px rgba(15,82,87,.1); }
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:7px; cursor:pointer;
  font:500 .9rem/1 var(--f-display); padding:11px 18px; border-radius:var(--r-sm);
  border:1px solid var(--broth); background:var(--broth); color:#fff; text-decoration:none;
}
.btn:hover{ background:var(--broth-2); border-color:var(--broth-2); color:#fff; }
.btn-block{ width:100%; }
.btn-ghost{ background:#fff; color:var(--ink-2); border-color:var(--line-2); }
.btn-ghost:hover{ background:var(--mist); color:var(--ink); border-color:var(--line-2); }
.btn-danger{ background:var(--danger); border-color:var(--danger); }
.btn-danger:hover{ background:#a5382f; border-color:#a5382f; }
.btn-sm{ font-size:.8rem; padding:7px 12px; }
.form-foot{ margin-top:18px; font-size:.9rem; color:var(--ink-3); display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.err{ color:var(--safranin); font-size:.88rem; margin:6px 0 0; }

/* ------------------------------------------------------------ admin */
.admin{ background:var(--mist); min-height:100vh; }
.admin-head{ background:#fff; border-bottom:1px solid var(--line); padding:18px 0; margin-bottom:26px; }
.admin-nav{ display:flex; gap:6px; flex-wrap:wrap; margin-top:12px; }
.admin-nav a{ font:500 .82rem/1 var(--f-display); padding:8px 13px; border-radius:var(--r-sm);
  text-decoration:none; color:var(--ink-2); border:1px solid var(--line); background:#fff; }
.admin-nav a:hover{ background:var(--agar); color:var(--broth); }
.admin-nav a.on{ background:var(--ink); color:#fff; border-color:var(--ink); }
.stat-grid{ display:grid; gap:12px; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); margin-bottom:26px; }
.stat{ background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:15px 16px; }
.stat b{ display:block; font:600 1.7rem/1.1 var(--f-display); color:var(--ink); }
.stat span{ font:500 .66rem/1.6 var(--f-mono); text-transform:uppercase; letter-spacing:.08em; color:var(--ink-3); }

table.grid{ width:100%; border-collapse:collapse; background:#fff; border:1px solid var(--line);
  border-radius:var(--r); overflow:hidden; font-size:.9rem; }
table.grid th{ text-align:left; font:500 .68rem/1.5 var(--f-mono); text-transform:uppercase;
  letter-spacing:.08em; color:var(--ink-3); background:var(--agar); padding:10px 12px;
  border-bottom:1px solid var(--line); white-space:nowrap; }
table.grid td{ padding:10px 12px; border-bottom:1px solid var(--mist); vertical-align:top; }
table.grid tr:last-child td{ border-bottom:0; }
table.grid tr:hover td{ background:#FBFAF6; }
.tbl-scroll{ overflow-x:auto; }
.pager{ display:flex; gap:6px; margin-top:16px; flex-wrap:wrap; }
.pager a,.pager span{ font:500 .8rem/1 var(--f-mono); padding:7px 11px; border:1px solid var(--line);
  border-radius:var(--r-sm); background:#fff; text-decoration:none; color:var(--ink-2); }
.pager .on{ background:var(--ink); color:#fff; border-color:var(--ink); }
.toolbar{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-bottom:16px; }
.toolbar input,.toolbar select{ width:auto; min-width:180px; }

/* --------------------------------------------- horizontal wizard */
.wiz{ background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; }
.wiz-rail{ display:flex; gap:0; border-bottom:1px solid var(--line); background:var(--agar); overflow-x:auto; }
.wiz-rail button{ flex:1 0 auto; min-width:150px; cursor:pointer; background:none; border:0;
  padding:14px 16px; text-align:left; font:inherit; border-right:1px solid var(--line); color:var(--ink-3); }
.wiz-rail button:last-child{ border-right:0; }
.wiz-rail button b{ display:block; font:600 .95rem/1.3 var(--f-display); color:var(--ink-2); }
.wiz-rail button small{ font:500 .64rem/1.5 var(--f-mono); text-transform:uppercase; letter-spacing:.1em; }
.wiz-rail button.on{ background:#fff; box-shadow:inset 0 -3px 0 var(--safranin); }
.wiz-rail button.on b{ color:var(--ink); }
.wiz-rail button.done b::after{ content:" ✓"; color:var(--broth); }
.wiz-track{ display:flex; overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth; }
.wiz-step{ flex:0 0 100%; scroll-snap-align:start; padding:26px 28px 30px; }
.wiz-step h3{ margin-bottom:4px; }
.wiz-step .hint{ color:var(--ink-3); font-size:.9rem; margin-bottom:18px; }
.wiz-foot{ display:flex; justify-content:space-between; gap:10px; padding:16px 28px;
  border-top:1px solid var(--line); background:var(--agar); flex-wrap:wrap; }
.field-row{ display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); }
.picked{ background:var(--agar); border:1px solid #DEDCEC; border-radius:var(--r-sm);
  padding:10px 13px; margin-bottom:14px; font-size:.9rem; }
.picked b{ font-family:var(--f-display); }

/* ------------------------------------------------------------ misc */
.empty{ text-align:center; padding:52px 20px; color:var(--ink-3); }
.empty h3{ color:var(--ink); }
.result{ background:#fff; border:1px solid var(--line); border-radius:var(--r);
  padding:15px 17px; margin-bottom:10px; }
.result h3{ margin:0 0 4px; font-size:1rem; }
.result h3 a{ text-decoration:none; color:var(--ink); }
.result h3 a:hover{ color:var(--safranin); }
.result .path{ font:500 .69rem/1.6 var(--f-mono); color:var(--ink-3); text-transform:uppercase; letter-spacing:.06em; }
mark{ background:#FBEBC7; color:inherit; padding:0 2px; border-radius:2px; }

.foot{ background:var(--ink); color:#A2A4C4; padding:36px 0; margin-top:auto; font-size:.86rem; }
.foot-in{ display:grid; gap:26px; grid-template-columns:minmax(0,240px) 1fr; }
@media (max-width:720px){ .foot-in{ grid-template-columns:1fr; } }
.foot-name{ font-family:var(--f-display); font-weight:600; color:#fff; margin:0 0 4px; }
.foot-note{ margin:0; line-height:1.6; }
.foot-note p{ margin:0 0 8px; }
.foot a{ color:#B9BDEA; }

@keyframes fadeUp{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }
.reveal{ opacity:0; transform:translateY(10px); }
.reveal.in{ animation:fadeUp .45s cubic-bezier(.2,.8,.2,1) both; }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important; }
  .reveal{ opacity:1; transform:none; }
}
@media (max-width:640px){
  body{ font-size:16px; }
  .topbar-in{ min-height:0; }
  .finder{ order:3; flex-basis:100%; max-width:none; }
  .section{ padding:34px 0; }
  .panel{ padding:16px 17px; }
  .bar-row{ grid-template-columns:92px 1fr 38px; }
}

/* ============================================================
   Progress tracking, saved state and the exam mind map
   ============================================================ */

.btn-saved{ background:var(--gold); border-color:var(--gold); color:#fff; }
.btn-saved:hover{ background:#8a6519; border-color:#8a6519; color:#fff; }
.btn-done{ background:var(--done); border-color:var(--done); color:#fff; }
.btn-done:hover{ background:var(--done-2); border-color:var(--done-2); color:#fff; }
.btn.is-busy{ opacity:.55; pointer-events:none; }


/* progress strips and rings */
.prog-strip{ display:flex; align-items:center; gap:16px; margin-top:16px; background:#fff;
  border:1px solid var(--line); border-radius:var(--r); padding:12px 16px; flex-wrap:wrap; }
.prog-bar{ flex:1; min-width:140px; height:9px; background:var(--mist); border-radius:5px; overflow:hidden; }
.prog-bar i{ display:block; height:100%; background:var(--broth-2); width:0; border-radius:5px;
  transition:width .9s cubic-bezier(.2,.8,.2,1); }
.prog-num{ display:flex; flex-direction:column; }
.prog-num b{ font:600 1.15rem/1.1 var(--f-display); }
.prog-num span{ font:500 .64rem/1.6 var(--f-mono); text-transform:uppercase; letter-spacing:.08em; color:var(--ink-3); }

.unit-prog{ display:inline-block; width:56px; height:5px; background:var(--mist); border-radius:3px;
  overflow:hidden; margin-left:8px; vertical-align:middle; }
.unit-prog i{ display:block; height:100%; background:var(--broth-2); }
.unit-pct{ font:600 .68rem/1 var(--f-mono); color:var(--ink-3); margin-left:6px; }
.unit-pct.is-full{ color:var(--done); }

.myexam{ display:flex; gap:16px; align-items:center; padding:14px 0; border-bottom:1px dotted var(--line-2); }
.myexam:last-child{ border-bottom:0; }
.myexam-body{ flex:1; min-width:0; }
.myexam-body h3{ margin:0 0 2px; font-size:1.02rem; }
.myexam-body h3 a{ text-decoration:none; color:var(--ink); }
.myexam-body h3 a:hover{ color:var(--safranin); }
.myexam-acts{ display:flex; gap:6px; flex-wrap:wrap; flex:0 0 auto; }
.myexam-ring{
  flex:0 0 62px; width:62px; height:62px; border-radius:50%;
  background:conic-gradient(var(--c) calc(var(--pct) * 1%), var(--mist) 0);
  display:flex; align-items:center; justify-content:center; position:relative;
}
.myexam-ring::after{ content:""; position:absolute; inset:6px; background:#fff; border-radius:50%; }
.myexam-ring span{ position:relative; z-index:1; font:600 1rem/1 var(--f-display); }
.myexam-ring small{ font-size:.6rem; }

.heat{ display:flex; gap:4px; flex-wrap:wrap; }
.heat-c{ width:16px; height:16px; border-radius:3px; background:var(--mist); }
.heat-c.lvl1{ background:#CFE7DF; } .heat-c.lvl2{ background:#6FB5A4; } .heat-c.lvl3{ background:var(--done); }

/* ------------------------------------------------------- the exam map */
.wrap-wide{ max-width:1500px; margin:0 auto; padding:0 20px; }
.map-shell{ background:var(--ink); border-radius:var(--r-lg); overflow:hidden; border:1px solid #282A4A; }
.map-toolbar{ display:flex; gap:12px; align-items:center; padding:12px 16px; flex-wrap:wrap;
  border-bottom:1px solid rgba(255,255,255,.08); background:#121327; }
.map-search{ flex:1; min-width:200px; max-width:380px; }
.map-search input{ background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.16);
  color:#fff; font-size:.9rem; padding:8px 12px; }
.map-search input::placeholder{ color:#9A9CBB; }
.map-search input:focus{ border-color:var(--broth-2); box-shadow:none; background:rgba(255,255,255,.12); }
.map-btns{ display:flex; gap:6px; flex-wrap:wrap; }
.map-btns .btn-ghost{ background:rgba(255,255,255,.07); color:#D5D6E6; border-color:rgba(255,255,255,.18); }
.map-btns .btn-ghost:hover{ background:rgba(255,255,255,.14); color:#fff; }

.map-canvas{ position:relative; cursor:grab; overflow:hidden;
  height:clamp(440px, 72vh, 900px);
  background:radial-gradient(ellipse at 50% 45%, #1D1F3A 0%, #141527 62%, #101124 100%);
  touch-action:none; }
.map-canvas.is-dragging{ cursor:grabbing; }
.map-canvas:focus-visible{ outline:2px solid var(--broth-2); outline-offset:-3px; }
.exam-map-svg{ width:100%; height:100%; display:block; touch-action:none; }
.map-canvas.mm-in .mm-stage{ animation:fadeUp .5s cubic-bezier(.2,.8,.2,1) both; }

.mm-trunk{ fill:none; stroke-opacity:.75; stroke-linecap:round; }
.mm-branch{ fill:none; stroke-opacity:.4; stroke-width:1.3; stroke-linecap:round; }
.mm-unit{ cursor:pointer; }
.mm-unit rect{ transition:stroke-width .15s ease, filter .15s ease; }
.mm-unit:hover rect:first-child{ stroke-width:3; filter:brightness(1.25); }
.mm-unit:focus-visible rect:first-child{ stroke:#fff; stroke-width:3; }
.mm-ulabel{ font:600 13.5px var(--f-display); fill:#E9E9F4; }
.mm-umeta{ font:500 9.5px var(--f-mono); fill:#9A9CBB; letter-spacing:.04em; }
.mm-roman{ font:600 10px var(--f-mono); }

.mm-topic{ cursor:pointer; }
.mm-topic rect{ transition:fill .15s ease, stroke-opacity .15s ease; }
.mm-topic:hover rect{ fill:#252745; stroke-opacity:1; }
.mm-tlabel{ font:400 11.5px var(--f-body); fill:#C7CAE2; }
.mm-tmeta{ font:500 9px var(--f-mono); fill:#8A8DAE; }
.mm-topic.is-hit rect{ fill:#3E3110; stroke:#E0A63C; stroke-opacity:1; stroke-width:1.8; }
.mm-topic.is-hit .mm-tlabel{ fill:#FBEBCB; }
.mm-topic.is-dim{ opacity:.22; }
.mm-core-name{ font:600 22px var(--f-display); fill:#fff; }
.mm-core-sub{ font:500 11px var(--f-mono); fill:#A9ADE8; letter-spacing:.06em; }

.map-legend{ display:flex; gap:14px; flex-wrap:wrap; padding:12px 16px;
  border-top:1px solid rgba(255,255,255,.08); background:#121327;
  font:500 .68rem/1.5 var(--f-mono); color:#9A9CBB; text-transform:uppercase; letter-spacing:.06em; }
.map-legend i{ width:9px; height:9px; border-radius:2px; display:inline-block; margin-right:6px; }
.map-hint{ color:var(--ink-3); font-size:.86rem; margin:14px 0 50px; text-align:center; }

@media (max-width:760px){
  .map-toolbar{ flex-direction:column; align-items:stretch; gap:9px; }
  .map-search{ max-width:none; }
  .map-btns{ justify-content:space-between; }
  .map-btns .btn{ flex:1; justify-content:center; }
  .map-canvas{ height:clamp(400px, 66vh, 640px); }
  .map-legend{ gap:9px; font-size:.62rem; }
  .wrap-wide{ padding:0 12px; }
  .myexam{ flex-wrap:wrap; }
  .myexam-acts{ width:100%; }
}
@media (max-width:460px){
  .map-canvas{ height:clamp(360px, 60vh, 520px); }
  .map-legend span:nth-child(n+7){ display:none; }
}

.ss-toast{
  position:fixed; left:50%; bottom:26px; transform:translateX(-50%) translateY(14px);
  background:var(--ink); color:#fff; padding:11px 20px; border-radius:24px;
  font:500 .88rem/1 var(--f-display); box-shadow:var(--shadow-lift);
  opacity:0; pointer-events:none; transition:opacity .22s ease, transform .22s ease; z-index:200;
}
.ss-toast.on{ opacity:1; transform:translateX(-50%) translateY(0); }

/* ============================================================
   Completion controls - one obvious button, one obvious state
   ============================================================ */

.btn-mark{
  display:inline-flex; align-items:center; justify-content:center; gap:7px; cursor:pointer;
  font:500 .84rem/1 var(--f-display); white-space:nowrap;
  padding:10px 16px; border-radius:var(--r-sm);
  border:1.5px solid var(--line-2); background:#fff; color:var(--ink-2);
  transition:background .15s ease, border-color .15s ease, color .15s ease;
}
.btn-mark:hover{ border-color:var(--done); color:var(--done); background:var(--done-bg); }
.btn-mark.is-done{ background:var(--done); border-color:var(--done); color:#fff; }
.btn-mark.is-done:hover{ background:var(--done-2); border-color:var(--done-2); color:#fff; }
.btn-mark.is-busy{ opacity:.5; pointer-events:none; }
.btn-mark-lg{ font-size:.95rem; padding:13px 22px; }

/* sub-topic rows: card on the left, one action on the right */
.sub-row{ display:flex; align-items:stretch; gap:12px; }
.sub-row .sub-card{ flex:1; min-width:0; }
.sub-mark{ display:flex; align-items:center; flex:0 0 auto; }
.sub-row.is-done .sub-card{ border-color:var(--done-line); background:var(--done-bg); }
.sub-row.is-done .sub-card::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--done);
  border-radius:var(--r) 0 0 var(--r);
}
.sub-card{ position:relative; }
.sub-row.is-done .s-name{ color:var(--ink-2); }
.s-meta{ display:flex; gap:6px; flex-wrap:wrap; align-items:center; }
.s-open{ flex:0 0 auto; align-self:center; font:500 .74rem/1 var(--f-mono);
  text-transform:uppercase; letter-spacing:.08em; color:var(--ink-3); }
.sub-card:hover .s-open{ color:var(--safranin); }

@media (max-width:620px){
  .sub-row{ flex-direction:column; gap:0; }
  .sub-mark{ margin-top:-1px; }
  .sub-mark .btn-mark{ width:100%; border-radius:0 0 var(--r) var(--r); border-top:0; }
  .s-open{ display:none; }
}

/* the sub-topic action bar */
.act-bar{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  margin-top:18px; padding:16px 18px;
  background:#fff; border:1px solid var(--line); border-left:4px solid var(--line-2);
  border-radius:var(--r);
}
.act-bar.is-done{ border-left-color:var(--done); background:var(--done-bg); }
.act-bar-prog{ display:flex; flex-direction:column; gap:5px; min-width:170px; flex:1; }
.act-bar-lbl{ font:500 .68rem/1 var(--f-mono); text-transform:uppercase; letter-spacing:.08em; color:var(--ink-3); }
.act-bar-prog .prog-bar{ min-width:0; }
.act-bar-nav{ display:flex; gap:6px; margin-left:auto; }

/* exam page banner */
.exam-bar{
  display:flex; align-items:center; gap:20px; flex-wrap:wrap;
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  padding:18px 22px; margin:20px 0 26px; box-shadow:var(--shadow);
}
.exam-bar-main{ flex:1; min-width:220px; }
.exam-bar-t{ font:600 1.05rem/1.3 var(--f-display); margin:0 0 8px; }
.exam-bar-s{ color:var(--ink-3); font-size:.88rem; margin:8px 0 0; }
.exam-bar-acts{ display:flex; gap:8px; flex-wrap:wrap; flex:0 0 auto; }
.exam-bar-ring{
  flex:0 0 74px; width:74px; height:74px; border-radius:50%; position:relative;
  background:conic-gradient(var(--c) calc(var(--pct) * 1%), var(--mist) 0);
  display:flex; align-items:center; justify-content:center;
}
.exam-bar-ring::after{ content:""; position:absolute; inset:7px; background:#fff; border-radius:50%; }
.exam-bar-ring span{ position:relative; z-index:1; font:600 1.2rem/1 var(--f-display); }
.exam-bar-ring small{ font-size:.62rem; }

/* topic rows on the syllabus page carry their own progress */
.topic-row{ position:relative; }
.topic-row.is-done{ background:var(--done-bg); }
.topic-row.is-done .t-name{ color:var(--ink-2); }
.topic-row.is-done::after{
  content:"✓"; position:absolute; left:-2px; top:50%; transform:translateY(-50%);
  color:var(--done); font:600 11px var(--f-display);
}
.t-sub{ display:block; color:var(--ink-3); font-size:.8rem; margin-top:2px; }
.t-prog{ display:flex; align-items:center; gap:8px; flex:0 0 auto; }
.t-prog-track{ width:64px; height:6px; background:var(--mist); border-radius:3px; overflow:hidden; display:block; }
.t-prog-track i{ display:block; height:100%; background:var(--broth-2); border-radius:3px; }
.t-prog b{ font:600 .7rem/1 var(--f-mono); color:var(--ink-3); min-width:30px; }
.t-prog b.is-full{ color:var(--done); }
@media (max-width:640px){ .t-prog-track{ width:38px; } }

/* topic page progress block */
.topic-prog{ background:#fff; border:1px solid var(--line); border-left:4px solid var(--broth-2);
  border-radius:var(--r); padding:14px 18px; margin-bottom:18px; }
.topic-prog.is-full{ border-left-color:var(--done); background:var(--done-bg); }
.topic-prog-head{ display:flex; justify-content:space-between; gap:12px; margin-bottom:9px; flex-wrap:wrap; }
.topic-prog-head b{ font:600 1rem/1 var(--f-display); }
.topic-prog-head span{ color:var(--ink-3); font-size:.86rem; }
.topic-prog.is-full .prog-bar i{ background:var(--done); }

/* ============================================================
   Type tuning for Fraunces / Inter / JetBrains Mono
   ============================================================ */
.hero h1{ font-variation-settings:'SOFT' 0,'WONK' 1,'opsz' 120; letter-spacing:-.015em; }
.brand-txt{ font-variation-settings:'SOFT' 0,'WONK' 1,'opsz' 20; letter-spacing:0; }
.eyebrow,.tag,.crumbs,.path,label,.s-open,.hint,.unit-no,.t-prog b,
.prog-num span,.info-cell span,.stat span,.act-bar-lbl{ font-feature-settings:'tnum' 1; }
.btn,.btn-mark,.topnav a,.admin-nav a,.wiz-rail button b{ font-family:var(--f-display);
  font-variation-settings:'SOFT' 0,'WONK' 0,'opsz' 14; letter-spacing:0; }
.explain li,.paper-m,.book-a,p{ font-family:var(--f-body); }
.sub-card .s-name,.topic-row .t-name{ font-family:var(--f-body); font-weight:400; }
.exam-card h3,.panel-head h2,.result h3{ font-variation-settings:'SOFT' 0,'WONK' 0,'opsz' 30; }

/* the completion button reads as a control, not a label */
.btn-mark::before{
  content:""; width:15px; height:15px; border-radius:50%; flex:0 0 15px;
  border:1.5px solid currentColor; opacity:.55;
  transition:opacity .15s ease, background .15s ease;
}
.btn-mark.is-done::before{ background:#fff; border-color:#fff; opacity:1;
  box-shadow:inset 0 0 0 2px var(--done); }
.btn-mark.is-done{ box-shadow:0 1px 2px rgba(44,122,107,.28); }

/* ============================================================
   Sub-topic cards, sticky bars, parallax
   ============================================================ */

/* one card, one row of actions - the button can never drift out of line
   because it lives in a footer that is its own flex row */
.sub-item{
  position:relative; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r); padding:16px 18px 14px; display:flex; flex-direction:column; gap:10px;
  transition:border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.sub-item:hover{ border-color:var(--line-2); box-shadow:var(--shadow); transform:translateY(-1px); }
.sub-item.is-done{ border-color:var(--done-line); background:var(--done-bg); }
.sub-item.is-done::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:4px;
  background:var(--done); border-radius:var(--r) 0 0 var(--r);
}
.sub-item-head{ display:flex; align-items:baseline; gap:12px; }
.sub-item-head .s-no{ font:500 .74rem/1.7 var(--f-mono); color:var(--ink-3); flex:0 0 auto; }
.sub-item-head .s-name{ margin:0; font:400 1.02rem/1.45 var(--f-body); color:var(--ink); flex:1; }
.sub-item.is-done .s-name{ color:var(--ink-2); }

.s-meta{ list-style:none; margin:0; padding:0 0 0 30px; display:flex; gap:6px; flex-wrap:wrap; }
.s-meta li{ margin:0; }

.sub-item-foot{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding-top:12px; margin-top:2px; border-top:1px solid var(--line);
}
.sub-item.is-done .sub-item-foot{ border-top-color:var(--done-line); }
.sub-item-foot form{ margin:0; }
.sub-item-foot .btn-mark{ min-width:168px; }
.sub-item-foot .sub-open{ margin-left:auto; }

@media (max-width:560px){
  .sub-item-foot{ flex-direction:column; align-items:stretch; }
  .sub-item-foot .btn-mark,.sub-item-foot .sub-open{ width:100%; min-width:0; justify-content:center; }
  .sub-item-foot .sub-open{ margin-left:0; }
  .s-meta{ padding-left:0; }
}

/* sticky progress bars */
.is-sticky{ position:sticky; top:62px; z-index:20; transition:box-shadow .2s ease, border-color .2s ease; }
.is-sticky.is-stuck{ box-shadow:0 6px 20px rgba(23,24,43,.13); border-color:var(--line-2); }
.topic-prog.is-sticky{ background:var(--surface); }
.exam-bar.is-sticky.is-stuck{ border-radius:var(--r); }
@media (max-width:640px){ .is-sticky{ position:static; } }

/* parallax on the hero dot field, driven by a scroll-set custom property */
.hero::after{
  transform:translate3d(0, var(--par, 0px), 0);
  opacity:calc(.5 * var(--par-fade, 1));
  will-change:transform;
}
.hero-in{ transform:translate3d(0, calc(var(--par, 0px) * .35), 0); }

@media (prefers-reduced-motion:reduce){
  .hero::after,.hero-in{ transform:none; }
  .unit-body{ transition:none; }
}

.sub-list{ display:grid; gap:12px; }
.sub-item-foot .btn-sm{ min-width:0; }