:root{
  color-scheme:light;
  --ink:#191627; --muted:#6b6780; --paper:#f6f4f0; --panel:#fffdfa; --line:#e0dcd4;
  --violet:#4a3aa8; --violet-soft:#e6e2f7; --cyan:#0d7d8c; --cyan-soft:#daeef0;
  --rust:#b8492c; --rust-soft:#f8e4dd; --amber:#a07100;
  --topbar:rgba(246,244,240,.94); --soft:#efedE8; --soft-strong:#e7e4dd;
  --shadow:0 12px 34px rgba(30,24,60,.09);
  /* One radius scale. Corners step down as they nest: container, control, chip. */
  --r-lg:12px; --r-md:9px; --r-sm:6px; --r-pill:99px;
  --ring:0 0 0 3px color-mix(in srgb, var(--violet) 22%, transparent);
  --nav-active:#191627; --nav-active-text:#fffdfa;
}
[data-theme="dark"]{
  color-scheme:dark;
  --ink:#eeeaf6; --muted:#9d97b0; --paper:#12111a; --panel:#1a1826; --line:#302c42;
  --violet:#a89bff; --violet-soft:#272247; --cyan:#5fd3df; --cyan-soft:#12333a;
  --rust:#ff9a78; --rust-soft:#3d2018; --amber:#e3b64a;
  --topbar:rgba(18,17,26,.96); --soft:#221f30; --soft-strong:#2a2639;
  --shadow:0 12px 34px rgba(0,0,0,.34);
  --nav-active:#e6e2f7; --nav-active-text:#12111a;
}
*{box-sizing:border-box}
html{background:var(--paper);}
body{margin:0;background:var(--paper);color:var(--ink);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;font-size:15px;line-height:1.55}
code,.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
button{font:inherit}
a{color:var(--violet)}

.topbar{height:60px;padding:0 clamp(16px,3vw,40px);display:grid;grid-template-columns:auto 1fr auto;
  gap:24px;align-items:center;border-bottom:1px solid var(--line);background:var(--topbar);
  position:sticky;top:0;z-index:20;backdrop-filter:blur(12px)}
.brand{display:flex;align-items:center;gap:10px;color:inherit;text-decoration:none}
.brand-mark{width:32px;height:32px;border-radius:var(--r-md);display:block}
.brand strong{display:block;font-size:14px}
.brand small{display:block;font-size:9px;color:var(--muted);text-transform:uppercase;letter-spacing:.09em}
.top-context{border-left:1px solid var(--line);padding-left:22px;min-width:0}
.top-context strong{display:block;font-size:13px}
.top-context span{display:block;font-size:11px;color:var(--muted)}
nav{display:flex;gap:3px;align-items:center}
.nav-button{border:0;background:transparent;padding:8px 11px;border-radius:var(--r-md);color:var(--muted);
  font-size:13px;cursor:pointer}
.nav-button:hover{background:var(--soft);color:var(--ink)}
.nav-button.active{background:var(--nav-active);color:var(--nav-active-text)}
.theme-toggle{border:1px solid var(--line);background:var(--panel);border-radius:var(--r-md);width:32px;height:32px;
  cursor:pointer;color:var(--muted);margin-left:6px}

main{max-width:1080px;margin:0 auto;padding:26px clamp(16px,3vw,40px) 90px}
.view{display:none}
.view.active{display:block}
h1{font-size:23px;margin:0 0 4px}
h2{font-size:17px;margin:30px 0 10px}
h3{font-size:14px;margin:0 0 6px}
.lede{color:var(--muted);margin:0 0 20px;max-width:64ch}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);padding:16px 18px;margin-bottom:12px}
.grid{display:grid;gap:12px}
.grid.two{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.grid.three{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.pill{display:inline-block;font-size:10px;text-transform:uppercase;letter-spacing:.07em;
  padding:3px 8px;border-radius:var(--r-pill);background:var(--soft);color:var(--muted)}
.pill.critical{background:var(--rust-soft);color:var(--rust)}
.pill.high{background:var(--violet-soft);color:var(--violet)}
.pill.medium{background:var(--cyan-soft);color:var(--cyan)}
.muted{color:var(--muted)}
.small{font-size:12.5px}
.kv{display:grid;grid-template-columns:150px 1fr;gap:6px 14px;font-size:13.5px}
.kv dt{color:var(--muted)}
.kv dd{margin:0}
ul.tight{margin:6px 0 0;padding-left:18px}
ul.tight li{margin-bottom:3px}

.toolbar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:16px}
select,textarea,
input[type=text],input[type=search],input[type=number],input[type=email],input[type=password]{
  background:var(--panel);color:var(--ink);border:1px solid var(--line);
  border-radius:var(--r-md);padding:6px 9px;font-size:13px;font:inherit;font-size:13px;
  appearance:none;-webkit-appearance:none}
input[type=search]::-webkit-search-cancel-button{-webkit-appearance:none}
/* One focus treatment for everything focusable, so tabbing does not change visual language. */
select:focus-visible,textarea:focus-visible,input:focus-visible,.btn:focus-visible,
.choice:focus-visible,.nav-button:focus-visible{outline:none;border-color:var(--violet);box-shadow:var(--ring)}
.btn{border:1px solid var(--line);background:var(--panel);color:var(--ink);border-radius:var(--r-md);
  padding:7px 14px;cursor:pointer;font:inherit;font-size:13px;line-height:1.35;
  transition:background .12s ease,border-color .12s ease}
.btn:hover{background:var(--soft)}
.btn.primary{background:var(--violet);border-color:var(--violet);color:#fff}
.btn.primary:hover{filter:brightness(1.08)}
.segmented,.session-mode,.seg{display:inline-flex;background:var(--soft);border-radius:var(--r-md);
  padding:3px;gap:2px;flex-wrap:wrap;border:1px solid var(--line)}
.segmented button,.session-mode button,.seg .btn{border:0;background:transparent;padding:6px 11px;
  border-radius:var(--r-sm);cursor:pointer;font:inherit;font-size:12.5px;color:var(--muted);
  margin:0;box-shadow:none;transition:background .12s ease,color .12s ease}
.segmented button:hover,.session-mode button:hover,.seg .btn:hover{background:transparent;color:var(--ink)}
.segmented button.active,.session-mode button.active,.seg .btn.active{
  background:var(--panel);color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.08)}

/* practice */
.q-prompt{font-size:17px;line-height:1.45;margin:2px 0 4px}
.q-hint{font-size:12.5px;color:var(--muted);margin:10px 0 16px}
.q-hint summary{cursor:pointer;width:max-content;color:var(--violet);font-weight:650;user-select:none}
.q-hint p{border-left:2px solid var(--line);padding-left:10px;margin:8px 0 0}
.choices{display:grid;gap:8px}
.choice{display:flex;gap:11px;align-items:flex-start;text-align:left;width:100%;cursor:pointer;
  border:1px solid var(--line);background:var(--panel);border-radius:var(--r-md);padding:11px 13px;color:inherit}
.choice:hover:not(:disabled){border-color:var(--violet)}
.choice:disabled{cursor:default}
.choice .key{flex:0 0 20px;height:20px;border-radius:var(--r-sm);background:var(--soft);display:grid;
  place-items:center;font-size:11px;color:var(--muted)}
.choice.correct{border-color:var(--cyan);background:var(--cyan-soft)}
.choice.wrong{border-color:var(--rust);background:var(--rust-soft)}
.choice-why{display:block;font-size:12.5px;color:var(--muted);margin-top:5px}
.feedback{margin-top:14px;border-radius:var(--r-md);padding:13px 15px;background:var(--soft);
  border-left:3px solid var(--violet);white-space:pre-wrap;font-size:13.5px}
.feedback.correct{border-left-color:var(--cyan)}
.feedback.wrong{border-left-color:var(--rust)}
.q-meta{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px}

/* newman */
.kit-wrap{display:grid;grid-template-columns:minmax(300px,1fr) minmax(280px,1fr);gap:18px;align-items:start}
@media(max-width:760px){.kit-wrap{grid-template-columns:1fr}}
.kit-svg{width:100%;height:auto;background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);
  touch-action:none;cursor:grab}
.kit-svg:active{cursor:grabbing}
#kit-rotate-wrap{margin-top:10px}
.toolbar.small label{display:flex;align-items:center;gap:5px;font-size:12.5px;color:var(--muted)}
input[type=range]{width:100%;accent-color:var(--violet)}
.readout{font-size:13px;display:grid;grid-template-columns:auto 1fr;gap:4px 12px}
.readout b{font-weight:600}
.badge{display:inline-block;padding:3px 9px;border-radius:var(--r-pill);font-size:11px;font-weight:600}
.badge.staggered{background:var(--cyan-soft);color:var(--cyan)}
.badge.eclipsed{background:var(--rust-soft);color:var(--rust)}

/* atlas */
.atlas-fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:10px;margin-top:10px}
.field{background:var(--soft);border-radius:var(--r-md);padding:9px 11px}
.field b{display:block;font-size:10px;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);margin-bottom:3px}
.note{margin-top:10px;font-size:13px;border-left:3px solid var(--amber);padding-left:11px;color:var(--muted)}
table{width:100%;border-collapse:collapse;font-size:13px}
th,td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--line);vertical-align:top}
th{font-size:10.5px;text-transform:uppercase;letter-spacing:.07em;color:var(--muted)}

/* progress */
.bar{height:7px;border-radius:var(--r-pill);background:var(--soft-strong);overflow:hidden;margin-top:6px}
.bar>span{display:block;height:100%;background:var(--violet)}
.stat{font-size:26px;font-weight:600}
.stat small{font-size:12px;font-weight:400;color:var(--muted);display:block}

/* practice layout */
.view-actions{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;gap:12px}
.compact-stat{font-size:12px;color:var(--muted)}
.compact-stat b{color:var(--ink);font-size:15px}
.practice-layout{display:grid;grid-template-columns:264px 1fr;gap:16px;align-items:start}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:16px 10px 16px 16px;position:sticky;top:76px;max-height:calc(100vh - 96px);
  overflow-y:auto;overscroll-behavior:contain}
.panel h2{margin:0 0 12px;font-size:13px;text-transform:uppercase;letter-spacing:.07em;color:var(--muted)}
.panel label:not(.filter-row){display:block;font-size:12px;color:var(--muted);margin-bottom:4px}
.panel > label:not(:first-of-type){margin-top:14px}
.panel select,.panel input{width:100%;margin-top:4px}
.filter-search{margin-bottom:4px}

/* The filter lists. These replace three native <select multiple> boxes, whose option rows a
   browser paints itself — Chrome allows restyling them, Safari does not, so the sidebar
   could not be made to match the app everywhere. The <select> is still there as the data
   model (see src/filter-list.js); it is just moved out of sight. */
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.filter-list{margin:0 0 14px;max-height:172px;overflow-y:auto;overscroll-behavior:contain;
  background:var(--soft);border:1px solid var(--line);border-radius:var(--r-md);padding:4px}
.panel .filter-row{display:flex;align-items:center;gap:9px;padding:6px 8px;border-radius:var(--r-sm);
  font-size:12.5px;line-height:1.3;color:var(--ink);cursor:pointer;margin:0;
  transition:background .1s ease}
.panel .filter-row:hover{background:var(--panel)}
.panel .filter-row input{width:14px;height:14px;flex:0 0 14px;margin:0;accent-color:var(--violet);cursor:pointer}
/* One line per row, truncated rather than wrapped — a filter is scanned, not read. */
.panel .filter-row span{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.panel .filter-row:has(input:checked){background:var(--violet-soft);font-weight:600}
.panel-note{font-size:11px;line-height:1.45;color:var(--muted);margin:-8px 0 14px}
.filter-availability{font-size:11.5px;line-height:1.45;color:var(--muted);background:var(--soft);
  border-radius:var(--r-md);padding:8px 10px;margin-bottom:14px;border:1px solid var(--line)}
.session-mode{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin-bottom:16px;width:100%}
.session-mode button{min-width:0;padding:7px 6px;font-size:11.5px;white-space:nowrap;
  text-align:center}
.btn.full{width:100%}
.exam-preset{width:100%;font-size:11.5px;margin-bottom:10px;text-align:left;line-height:1.4}
.session-mini{display:flex;justify-content:space-between;font-size:11.5px;color:var(--muted);margin-top:12px}
.session-mini b{color:var(--ink);font-size:14px}
#panel-toggle{display:none}
@media(max-width:820px){
  .practice-layout{grid-template-columns:1fr}
  .panel{position:static;max-height:none;display:none}
  .panel.open{display:block}
  #panel-toggle{display:inline-block}
}
.prep12-details{position:relative;margin:0 0 14px;padding:10px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--soft);font-size:12px}
.tip{display:inline-grid;place-items:center;width:18px;height:18px;margin-left:4px;border-radius:50%;background:var(--violet);color:white;font-weight:700;cursor:help}
.tip-card{display:none;position:absolute;z-index:5;left:8px;right:8px;top:36px;padding:10px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--panel);box-shadow:var(--shadow);line-height:1.45}
.tip:hover+.tip-card,.tip:focus+.tip-card{display:block}

/* question figures */
.q-figure{width:100%;max-width:300px;height:auto;display:block;margin:4px auto 14px;
  background:var(--soft);border:1px solid var(--line);border-radius:var(--r-lg)}
.q-figure-row{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.q-figure-pair{margin:0;flex:1 1 240px;max-width:300px}
.q-figure-pair figcaption{text-align:center;font-size:12px;font-weight:600;color:var(--muted);margin-bottom:2px}

/* test mode */
.test-status{display:flex;justify-content:space-between;align-items:center;font-size:13px;margin-bottom:8px}
.test-status b{font-size:13px}
#test-timer{font-variant-numeric:tabular-nums;font-weight:600;color:var(--violet)}
#test-timer.urgent{color:var(--rust)}
.test-progress{height:5px;border-radius:var(--r-pill);background:var(--soft-strong);overflow:hidden;margin-bottom:14px}
.test-progress i{display:block;height:100%;background:var(--violet)}
.test-nav{display:flex;justify-content:space-between;gap:10px;margin-top:16px}
.choice.selected{border-color:var(--violet);background:var(--violet-soft)}
.test-grid{display:flex;flex-wrap:wrap;gap:5px;margin:12px 0}
.test-grid button{width:30px;height:30px;border-radius:var(--r-sm);border:1px solid var(--line);
  background:var(--panel);cursor:pointer;font-size:11px;color:var(--muted)}
.test-grid button.answered{background:var(--violet-soft);border-color:var(--violet);color:var(--ink)}
.test-grid button.current{outline:2px solid var(--violet)}
.test-grid button.right{background:var(--cyan-soft);border-color:var(--cyan)}
.test-grid button.wrong{background:var(--rust-soft);border-color:var(--rust)}
.score-hero{display:flex;gap:24px;align-items:baseline;flex-wrap:wrap;margin-bottom:6px}
.score-hero .big{font-size:40px;font-weight:600;line-height:1}
.review-item{border-top:1px solid var(--line);padding:14px 0}
.review-item:first-of-type{border-top:0}
.prep-row{display:flex;justify-content:space-between;align-items:center;gap:12px;
  border-top:1px solid var(--line);padding:9px 0}
.prep-row:first-of-type{border-top:0}
.prep-row label{display:flex;gap:9px;align-items:flex-start;font-size:13.5px;cursor:pointer;margin:0}
.prep-row small{display:block;color:var(--muted);font-size:12px;margin-top:2px}
.prep-row.done label>span{opacity:.55}
.prep-row.done strong{text-decoration:line-through}
.card.current-week{border-color:var(--violet);box-shadow:0 0 0 1px var(--violet)}

/* --- scrollbars ---------------------------------------------------------------
   Two nested scroll regions here (the sticky panel, and each filter list inside it), so the
   default chunky square bars read as clutter and one of them sat across the panel's rounded
   corner. These are overlay-style: transparent track, a rounded thumb inset by a transparent
   border so it never touches the edge, and quiet until the region is hovered. Firefox gets
   the same intent through the two properties it supports. */
.panel,.filter-list,.scroll-y{scrollbar-width:thin;scrollbar-color:transparent transparent}
.panel:hover,.filter-list:hover,.scroll-y:hover,
.panel:focus-within,.filter-list:focus-within{scrollbar-color:var(--soft-strong) transparent}

.panel::-webkit-scrollbar,.filter-list::-webkit-scrollbar,.scroll-y::-webkit-scrollbar{
  width:11px;height:11px;background:transparent}
.panel::-webkit-scrollbar-track,.filter-list::-webkit-scrollbar-track,
.scroll-y::-webkit-scrollbar-track{background:transparent;border:0}
.panel::-webkit-scrollbar-thumb,.filter-list::-webkit-scrollbar-thumb,
.scroll-y::-webkit-scrollbar-thumb{
  background:transparent;border-radius:var(--r-pill);
  border:3px solid transparent;background-clip:padding-box;
  transition:background-color .15s ease}
.panel:hover::-webkit-scrollbar-thumb,.filter-list:hover::-webkit-scrollbar-thumb,
.scroll-y:hover::-webkit-scrollbar-thumb,
.panel:focus-within::-webkit-scrollbar-thumb,.filter-list:focus-within::-webkit-scrollbar-thumb{
  background-color:var(--soft-strong);background-clip:padding-box}
.panel::-webkit-scrollbar-thumb:hover,.filter-list::-webkit-scrollbar-thumb:hover,
.scroll-y::-webkit-scrollbar-thumb:hover{background-color:var(--muted);background-clip:padding-box}
.panel::-webkit-scrollbar-corner,.filter-list::-webkit-scrollbar-corner{background:transparent}

/* Copy buttons. Quiet by default — they sit in the meta row beside the pills and should not
   compete with the question itself — and confirm in place rather than through a toast. */
.q-meta-actions{margin-left:auto;display:flex;gap:6px}
.btn.ghost{background:transparent;border-color:transparent;color:var(--muted);
  padding:3px 9px;font-size:11.5px}
.btn.ghost:hover{background:var(--soft);color:var(--ink)}
.btn.ghost.ok{color:var(--cyan);border-color:var(--cyan)}
.review-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:20px 0 10px}
.review-head h3{margin:0}

/* Organizers. A comparison table is read by scanning down a column, so the row header stays
   put while the columns scroll, and cells stay short enough to compare at a glance. */
.org-head{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;
  flex-wrap:wrap;margin-bottom:14px}
.org-actions{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.table-scroll{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-md)}
.org-table{border-collapse:separate;border-spacing:0;width:100%;font-size:12.5px;min-width:640px}
.org-table th,.org-table td{padding:9px 11px;text-align:left;vertical-align:top;
  border-bottom:1px solid var(--line);line-height:1.4}
.org-table thead th{background:var(--soft);font-size:11px;text-transform:uppercase;
  letter-spacing:.05em;color:var(--muted);white-space:nowrap;position:sticky;top:0}
.org-table tbody th{background:var(--soft);font-weight:600;white-space:nowrap;
  position:sticky;left:0;z-index:1}
.org-table tbody tr:last-child th,.org-table tbody tr:last-child td{border-bottom:0}
.org-table td[contenteditable]{cursor:text;border-radius:var(--r-sm)}
.org-table td[contenteditable]:hover{background:var(--soft)}
.org-table td[contenteditable]:focus{outline:none;background:var(--panel);
  box-shadow:inset 0 0 0 2px var(--violet)}
/* An edited cell is marked, so the shipped default and your correction are never confused. */
.org-table td.edited{background:var(--violet-soft)}
.org-table td.edited::after{content:"·edited";font-size:9.5px;color:var(--violet);
  display:block;margin-top:2px;letter-spacing:.04em}
.org-table .detail-col{font-size:11.5px;white-space:nowrap}
.contrast{padding:11px 0;border-bottom:1px solid var(--line)}
.contrast:last-child{border-bottom:0}
.contrast-title{margin:0 0 5px;font-size:14px}
.contrast p{margin:3px 0}
.badge.wrong-badge{background:var(--rust-soft);color:var(--rust)}
.badge{background:var(--cyan-soft);color:var(--cyan)}
.flow{margin:0;padding-left:20px}
.flow li{margin-bottom:12px}
.flow-ask{margin:0 0 4px;font-weight:600;font-size:13.5px}

/* Collapsed filter rows. Three open lists filled the sidebar and pushed the Generate button
   off screen; the state is what matters most of the time, the full list only while changing it. */
.filter-field{margin-bottom:8px;border:1px solid var(--line);border-radius:var(--r-md);
  background:var(--panel);overflow:hidden}
.filter-summary{display:flex;align-items:center;gap:8px;width:100%;padding:8px 10px;
  background:transparent;border:0;cursor:pointer;font:inherit;font-size:12.5px;
  color:var(--ink);text-align:left}
.filter-summary:hover{background:var(--soft)}
.filter-name{color:var(--muted);flex:0 0 auto}
.filter-value{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  text-align:right;color:var(--muted)}
/* A filter that is actually narrowing the set should say so at a glance. */
.filter-summary.narrowed .filter-value{color:var(--violet);font-weight:600}
.filter-caret{flex:0 0 auto;color:var(--muted);font-size:10px;transition:transform .15s ease}
.filter-field.open .filter-caret{transform:rotate(180deg)}
.filter-field .filter-list{display:none;margin:0;border:0;border-top:1px solid var(--line);
  border-radius:0;background:var(--soft)}
.filter-field.open .filter-list{display:block}

/* Sub-tabs. Two halves of one subject: worth separating on screen, not worth a nav entry. */
.subtabs{display:flex;gap:2px;background:var(--soft);border:1px solid var(--line);
  border-radius:var(--r-md);padding:3px;margin:0 0 18px;width:fit-content;max-width:100%;
  flex-wrap:wrap}
.subtabs button{border:0;background:transparent;padding:7px 14px;border-radius:var(--r-sm);
  cursor:pointer;font:inherit;font-size:12.5px;color:var(--muted)}
.subtabs button:hover{color:var(--ink)}
.subtabs button.active{background:var(--panel);color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.08)}
.subview{display:none}
.subview.active{display:block}