/* ============================================================
   Study Hub — shared design system
   Extends the identity established in index.html:
   Fraunces (display) + Sora (UI) + JetBrains Mono (data)
   on a blue-biased near-black. Accent encodes which exam
   you are in; semantic colours are kept separate from accent.
   ============================================================ */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  /* ground + surfaces — neutrals carry a slate/blue bias toward the GRE accent */
  --bg:#0f1216;
  --bg-2:#151a20;
  --surface:#1a2028;
  --surface-2:#212934;
  --surface-3:#2a343f;
  --border:rgba(255,255,255,.09);
  --border-soft:rgba(255,255,255,.05);
  --border-strong:rgba(255,255,255,.16);

  /* text */
  --text:#eaf0f6;
  --muted:#93a1b0;
  --faint:#5f6b78;

  /* subject accents — these say WHICH EXAM, they are not decoration */
  --ielts:#e0245e;  --ielts-lift:#ff5c8a;
  --gre:#2f81f7;    --gre-lift:#6fb1ff;

  /* semantic — deliberately distinct from the accents above */
  --ok:#37d3b5;
  --warn:#f5b544;
  --bad:#ff5c5c;
  --ok-bg:rgba(55,211,181,.12);
  --warn-bg:rgba(245,181,68,.12);
  --bad-bg:rgba(255,92,92,.12);

  /* the live accent, re-pointed per page via [data-exam] */
  --ac:var(--ielts);
  --ac-lift:var(--ielts-lift);
  --ac-bg:rgba(224,36,94,.12);

  --serif:'Fraunces',Georgia,'Times New Roman',serif;
  --sans:'Sora',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'JetBrains Mono',ui-monospace,'SF Mono',Menlo,monospace;

  /* diagram tokens — used by inline SVGs on techniques.html / maps.html.
     These live in :root so a page that draws a diagram cannot forget to define
     them: an undefined var() in an SVG `fill` silently computes to BLACK, which
     on this dark ground turns a diagram into invisible boxes. */
  --mark:#e4705a;
  --mark-soft:rgba(228,112,90,.14);
  --soft:var(--surface-2);
  --line:var(--border-soft);
  /* stage fills for multi-step diagrams — deliberately dark so light text sits on them */
  --st1:#2e4256;
  --st2:#5a2f26;
  --st3:#584a22;
  --st4:#27442d;
  --st5:#3f3150;
  --st6:#e4705a;
  --test:#eaf0f6;
  --arr:#e4705a;
  /* ink for text sitting ON a --mark fill: white gives only 3.1:1, this gives 6.0:1 */
  --on-mark:#0f1216;

  --rail:248px;
  --measure:68ch;
  --max:1180px;
  --r:14px;
  --r-sm:9px;
}

[data-exam="gre"]{
  --ac:var(--gre);
  --ac-lift:var(--gre-lift);
  --ac-bg:rgba(47,129,247,.12);
}

html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--sans);
  font-size:15px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* ---------- typography ---------- */
h1,h2,h3,h4{font-family:var(--serif);font-weight:600;line-height:1.15;text-wrap:balance}
h1{font-size:clamp(30px,4.4vw,46px);letter-spacing:-.02em}
h2{font-size:clamp(23px,2.7vw,31px);letter-spacing:-.015em}
h3{font-size:19px;letter-spacing:-.01em}
h4{font-size:16px;font-family:var(--sans);font-weight:600}
p{margin:0}
em{font-style:italic;color:var(--ac-lift)}
a{color:var(--ac-lift);text-decoration:none;border-bottom:1px solid rgba(255,255,255,.18)}
a:hover{border-bottom-color:currentColor}
strong,b{font-weight:600;color:#fff}
code,kbd{font-family:var(--mono);font-size:.88em;background:var(--surface-2);
  border:1px solid var(--border-soft);border-radius:5px;padding:1px 5px}

.eyebrow{
  font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ac);display:block;margin-bottom:10px;
}
.lede{font-size:17px;color:var(--muted);max-width:var(--measure)}
.measure{max-width:var(--measure)}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums}

:focus-visible{outline:2px solid var(--ac-lift);outline-offset:2px;border-radius:3px}

/* ---------- app shell: persistent rail + content ---------- */
.app{display:flex;min-height:100vh}

.rail{
  width:var(--rail);flex:0 0 var(--rail);
  background:var(--bg-2);border-right:1px solid var(--border-soft);
  padding:22px 0 30px;position:sticky;top:0;height:100vh;overflow-y:auto;
}
.rail-brand{display:flex;align-items:center;gap:10px;padding:0 22px 20px;
  border-bottom:1px solid var(--border-soft);margin-bottom:16px}
.rail-brand .mark{width:30px;height:30px;border-radius:8px;flex:0 0 30px;
  background:linear-gradient(135deg,var(--ielts),var(--gre));
  display:flex;align-items:center;justify-content:center;font-size:15px;color:#fff}
.rail-brand .nm{font-family:var(--serif);font-size:16px;font-weight:600;line-height:1.2}
.rail-brand .sb{font-family:var(--mono);font-size:10px;color:var(--faint)}

.rail-group{padding:0 12px;margin-bottom:20px}
.rail-group > .lbl{
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--faint);padding:0 10px;margin-bottom:7px;display:block;
}
.rail a.nav{
  display:flex;align-items:center;gap:9px;padding:7px 10px;border-radius:var(--r-sm);
  color:var(--muted);font-size:13.5px;border:none;transition:background .15s,color .15s;
}
.rail a.nav:hover{background:var(--surface);color:var(--text)}
.rail a.nav.on{background:var(--ac-bg);color:var(--ac-lift);font-weight:500}
.rail a.nav .ic{width:16px;text-align:center;flex:0 0 16px;opacity:.85;font-size:13px}
.rail a.nav .cnt{margin-left:auto;font-family:var(--mono);font-size:10px;color:var(--faint)}

.main{flex:1;min-width:0;display:flex;flex-direction:column}
.wrap{width:100%;max-width:var(--max);margin:0 auto;padding:0 clamp(18px,4vw,44px)}

/* mobile: rail becomes a scrolling top bar */
.rail-toggle{display:none}
@media (max-width:940px){
  .app{flex-direction:column}
  .rail{width:100%;flex:none;height:auto;position:static;border-right:none;
    border-bottom:1px solid var(--border-soft);padding:14px 0}
  .rail-brand{padding:0 18px 12px;margin-bottom:12px}
  .rail-group{display:flex;gap:6px;overflow-x:auto;padding:0 12px;margin-bottom:8px;
    scrollbar-width:none}
  .rail-group::-webkit-scrollbar{display:none}
  .rail-group > .lbl{display:none}
  .rail a.nav{white-space:nowrap;flex:0 0 auto}
  .rail a.nav .cnt{display:none}
}

/* ---------- page header ---------- */
.phead{padding:44px 0 30px;border-bottom:1px solid var(--border-soft);margin-bottom:38px}
.phead .meta-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}

.chip{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--mono);font-size:11px;letter-spacing:.04em;
  background:var(--surface);border:1px solid var(--border);
  border-radius:100px;padding:5px 11px;color:var(--muted);
}
.chip.ac{background:var(--ac-bg);border-color:transparent;color:var(--ac-lift)}
.chip.ok{background:var(--ok-bg);border-color:transparent;color:var(--ok)}
.chip.warn{background:var(--warn-bg);border-color:transparent;color:var(--warn)}
.chip.bad{background:var(--bad-bg);border-color:transparent;color:var(--bad)}

/* ---------- READ blocks (constrained measure) ---------- */
.read{max-width:var(--measure);margin-bottom:40px}
.read > * + *{margin-top:16px}
.read h2{margin-top:8px}
.read ul,.read ol{padding-left:20px;display:flex;flex-direction:column;gap:7px;color:var(--muted)}
.read li strong{color:var(--text)}

section.block{margin-bottom:52px;scroll-margin-top:24px}

/* ---------- DO panels (full width, own surface) ---------- */
.panel{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r);
  overflow:hidden;margin-bottom:26px;
}
.panel-h{
  display:flex;align-items:center;gap:11px;padding:15px 20px;
  border-bottom:1px solid var(--border-soft);background:var(--surface-2);
}
.panel-h .ttl{font-weight:600;font-size:14.5px}
.panel-h .sub{font-family:var(--mono);font-size:10.5px;color:var(--faint);margin-top:1px}
.panel-h .right{margin-left:auto;display:flex;align-items:center;gap:8px}
.panel-b{padding:20px}
.panel-b.tight{padding:14px}

/* ---------- facts table ---------- */
.tbl-scroll{overflow-x:auto;border:1px solid var(--border);border-radius:var(--r);margin-bottom:26px}
table{border-collapse:collapse;width:100%;font-size:13.5px;min-width:460px}
th,td{padding:10px 14px;text-align:left;border-bottom:1px solid var(--border-soft);vertical-align:top}
th{background:var(--surface-2);font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);font-weight:500;white-space:nowrap}
tbody tr:last-child td{border-bottom:none}
tbody tr:hover{background:rgba(255,255,255,.02)}
td.n{font-family:var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap}

/* ---------- stat tiles ---------- */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));gap:12px;margin-bottom:26px}
.tile{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:16px 17px}
.tile .k{font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--faint)}
.tile .v{font-family:var(--serif);font-size:27px;font-weight:600;margin:5px 0 2px;
  font-variant-numeric:tabular-nums;line-height:1.1}
.tile .d{font-size:12px;color:var(--muted);line-height:1.45}
.tile.accent .v{color:var(--ac-lift)}
.tile.ok .v{color:var(--ok)} .tile.warn .v{color:var(--warn)} .tile.bad .v{color:var(--bad)}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  font-family:var(--sans);font-size:13px;font-weight:500;
  background:var(--surface-2);color:var(--text);
  border:1px solid var(--border);border-radius:var(--r-sm);
  padding:8px 15px;cursor:pointer;transition:background .15s,border-color .15s,transform .1s;
}
.btn:hover{background:var(--surface-3);border-color:var(--border-strong)}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn.primary{background:var(--ac);border-color:transparent;color:#fff}
.btn.primary:hover{background:var(--ac-lift)}
.btn.ok{background:var(--ok);border-color:transparent;color:#06231d}
.btn.bad{background:var(--bad);border-color:transparent;color:#2b0808}
.btn.ghost{background:transparent}
.btn.sm{font-size:12px;padding:6px 11px}
.btn-row{display:flex;flex-wrap:wrap;gap:8px}

/* ---------- forms ---------- */
input[type=text],input[type=number],input[type=date],select,textarea{
  background:var(--bg-2);border:1px solid var(--border);border-radius:var(--r-sm);
  color:var(--text);font-family:var(--sans);font-size:14px;padding:9px 12px;width:100%;
}
textarea{resize:vertical;min-height:120px;line-height:1.6}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--ac)}
label.fl{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--faint);margin-bottom:6px}

/* ---------- progress ---------- */
.bar{height:6px;background:var(--surface-2);border-radius:100px;overflow:hidden}
.bar > i{display:block;height:100%;background:var(--ac);border-radius:100px;
  transition:width .35s ease;width:0}
.bar.ok > i{background:var(--ok)}

/* ---------- callouts ---------- */
.note{
  border-left:3px solid var(--ac);background:var(--ac-bg);
  border-radius:0 var(--r-sm) var(--r-sm) 0;padding:13px 17px;font-size:13.5px;
  color:var(--text);margin-bottom:22px;max-width:var(--measure);
}
.note.warn{border-left-color:var(--warn);background:var(--warn-bg)}
.note.bad{border-left-color:var(--bad);background:var(--bad-bg)}
.note.ok{border-left-color:var(--ok);background:var(--ok-bg)}
.note .hd{font-weight:600;display:block;margin-bottom:3px}

/* Scrollable table wrapper. Was copy-pasted locally into maps.html and sprint.html,
   so a page that used class="tw" without its own copy got an unstyled, overflowing
   table (official.html did). Global now. */
.tw{overflow-x:auto;margin:0 0 20px;border:1px solid var(--border-soft);border-radius:6px}
.tw table{border-collapse:collapse;width:100%;font-size:13.5px;line-height:1.45;
  font-variant-numeric:tabular-nums}
.tw th{text-align:left;font-family:var(--mono);font-weight:500;font-size:10.5px;
  letter-spacing:.06em;text-transform:uppercase;color:var(--faint);background:var(--surface-2);
  padding:9px 12px;border-bottom:1px solid var(--border-soft);white-space:nowrap}
.tw td{padding:9px 12px;border-bottom:1px solid var(--border-soft);vertical-align:top;
  min-width:110px}
.tw tr:last-child td{border-bottom:none}

/* ---- Task 1 charts (```chart blocks -> inline SVG, assets/chart.js) ----
   Thin marks, hairline recessive grid, generous padding. Text wears text
   tokens; only the marks carry series colour. */
.ch{background:var(--bg-2);border:1px solid var(--border);border-radius:var(--r-sm);
  padding:16px 18px 12px;margin:0 0 18px}
.ch svg{display:block;width:100%;height:auto;overflow:visible}
.ch-title{font-size:14px;font-weight:600;color:var(--text);margin-bottom:4px;
  display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
.ch-sub{font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--faint);font-weight:400}
.ch-legend{display:flex;gap:14px;flex-wrap:wrap;margin:2px 0 10px}
.ch-key{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--muted)}
.ch-key i{width:10px;height:10px;border-radius:3px;display:inline-block;flex:0 0 10px}
.ch .ch-tick{font-family:var(--mono);font-size:10.5px;fill:var(--faint);
  font-variant-numeric:tabular-nums}
.ch .ch-dlabel{font-size:11.5px;fill:var(--muted)}
.ch .ch-plabel{font-size:12px;fill:var(--muted)}
.ch-data{margin-top:10px}
.ch-data>summary{cursor:pointer;font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--faint);list-style:none;padding:4px 0}
.ch-data>summary::-webkit-details-marker{display:none}
.ch-data>summary::before{content:'\25B8  ';color:var(--ac)}
.ch-data[open]>summary::before{content:'\25BE  '}
.ch-data>summary:hover{color:var(--muted)}
.ch-pair{display:grid;gap:14px}
@media(min-width:900px){.ch-pair{grid-template-columns:1fr 1fr}.ch-pair .ch{margin-bottom:0}}
.ch-err{background:var(--bad-bg);border:1px solid var(--bad);color:var(--bad);
  border-radius:var(--r-sm);padding:10px 13px;font-size:12.5px;white-space:pre-wrap}

/* Collapsed nav group ("More", GRE). A <details> so the six doors stay the whole
   visible surface until he asks for the rest. */
.rail-more{border-top:1px solid var(--border-soft);margin-top:6px;padding-top:6px}
.rail-more>summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:6px}
.rail-more>summary::-webkit-details-marker{display:none}
.rail-more>summary::after{content:'\25B8';font-size:9px;color:var(--faint);margin-left:auto;
  transition:transform .15s}
.rail-more[open]>summary::after{transform:rotate(90deg)}
.rail-more>summary:hover{color:var(--text)}

/* ---------- footer ---------- */
.foot{margin-top:auto;padding:34px 0;border-top:1px solid var(--border-soft);
  color:var(--faint);font-size:12px}
.foot .wrap{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.foot a{color:var(--muted);border:none}

/* ---------- chat widget (shared across every page) ---------- */
.chat-fab{position:fixed;bottom:24px;right:24px;z-index:60;width:56px;height:56px;
  border-radius:50%;background:var(--ac);color:#fff;border:none;cursor:pointer;
  box-shadow:0 12px 34px rgba(0,0,0,.5);font-size:22px;display:flex;
  align-items:center;justify-content:center;transition:transform .2s,background .2s}
.chat-fab:hover{transform:scale(1.07);background:var(--ac-lift)}
.chat-panel{position:fixed;bottom:92px;right:24px;z-index:60;width:396px;
  max-width:calc(100vw - 32px);height:560px;max-height:calc(100vh - 130px);
  background:var(--surface);border:1px solid var(--border);border-radius:18px;
  display:none;flex-direction:column;overflow:hidden;box-shadow:0 24px 60px rgba(0,0,0,.6)}
.chat-panel.open{display:flex}
.chat-hd{padding:14px 18px;border-bottom:1px solid var(--border-soft);
  display:flex;align-items:center;gap:10px;background:var(--surface-2)}
.chat-hd .d{width:8px;height:8px;border-radius:50%;background:var(--ok);
  box-shadow:0 0 0 3px rgba(55,211,181,.22);flex:0 0 8px}
.chat-hd .t{font-weight:600;font-size:13.5px}
.chat-hd .s{font-family:var(--mono);font-size:9.5px;color:var(--faint);margin-top:1px}
.chat-hd .x{margin-left:auto;background:none;border:none;color:var(--muted);
  font-size:21px;cursor:pointer;line-height:1;padding:0 3px}
.chat-msgs{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:11px}
.msg{padding:10px 13px;border-radius:12px;font-size:13.5px;line-height:1.6;
  max-width:88%;white-space:pre-wrap;word-wrap:break-word}
.msg.u{background:var(--ac);color:#fff;align-self:flex-end;border-bottom-right-radius:4px}
.msg.a{background:var(--surface-2);align-self:flex-start;border-bottom-left-radius:4px}
.msg.sys{background:var(--warn-bg);color:var(--warn);align-self:stretch;
  max-width:100%;font-size:12.5px}
.typing{font-family:var(--mono);font-size:11px;color:var(--faint);padding:3px 4px}
.chat-sugg{display:flex;flex-wrap:wrap;gap:6px;padding:0 16px 12px}
.chat-sugg button{font-family:var(--sans);font-size:11.5px;background:var(--surface-2);
  border:1px solid var(--border);color:var(--muted);border-radius:100px;
  padding:5px 11px;cursor:pointer}
.chat-sugg button:hover{border-color:var(--ac);color:var(--ac-lift)}
.chat-in{display:flex;gap:8px;padding:12px;border-top:1px solid var(--border-soft)}
.chat-in input{flex:1}
.chat-in button{background:var(--ac);border:none;border-radius:var(--r-sm);color:#fff;
  padding:0 15px;cursor:pointer;font-size:15px}
.chat-in button:disabled{opacity:.5}

@media (max-width:520px){
  .chat-panel{right:12px;left:12px;width:auto;bottom:84px}
  .chat-fab{bottom:16px;right:16px}
}

/* ---------- notes: pencil on the right, per-section, light editor ---------- */
.note-fab{position:fixed;bottom:24px;right:96px;z-index:70;width:56px;height:56px;border-radius:50%;
  border:2px solid var(--warn);background:var(--warn);color:#241a00;font-size:24px;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;box-shadow:0 6px 22px rgba(0,0,0,.35);transition:transform .15s}
.note-fab:hover{transform:translateY(-2px) scale(1.05)}
.note-fab .badge{position:absolute;top:-5px;right:-5px;min-width:21px;height:21px;border-radius:100px;background:#241a00;
  color:var(--warn);font-family:var(--mono);font-size:10.5px;font-weight:700;display:flex;align-items:center;justify-content:center;padding:0 5px}
.note-panel{position:fixed;bottom:92px;right:24px;z-index:71;width:452px;max-width:calc(100vw - 40px);max-height:min(80vh,760px);
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r);box-shadow:0 20px 60px rgba(0,0,0,.5);
  display:none;flex-direction:column;overflow:hidden}
.note-panel.open{display:flex}
.note-hd{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--border);background:var(--bg-2)}
.note-hd .t{font-weight:600;font-size:14px}
.note-hd .s{font-family:var(--mono);font-size:10px;color:var(--faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.note-hd button{margin-left:auto;background:none;border:none;color:var(--muted);font-size:20px;cursor:pointer;line-height:1}
.note-body{padding:12px 16px;overflow-y:auto;flex:1}
.note-tb{display:flex;gap:2px;flex-wrap:wrap;align-items:center;padding:5px;background:var(--bg-2);border:1px solid var(--border);border-bottom:none;border-radius:10px 10px 0 0}
.note-tb button{min-width:29px;height:27px;padding:0 6px;border:1px solid transparent;border-radius:6px;background:none;color:var(--muted);
  font-family:var(--sans);font-size:12.5px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.note-tb button:hover{background:var(--surface);border-color:var(--border);color:var(--text)}
.note-tb .sep{width:1px;height:17px;background:var(--border);margin:0 4px}
.note-ed{min-height:132px;max-height:300px;overflow-y:auto;background:var(--bg-2);border:1px solid var(--border);border-radius:0 0 10px 10px;
  padding:11px 13px;color:var(--text);font-family:var(--sans);font-size:14px;line-height:1.7;outline:none}
.note-ed:focus{border-color:var(--warn)}
.note-ed:empty::before{content:attr(data-ph);color:var(--faint);pointer-events:none}
.note-ed h3{font-family:var(--serif);font-size:17px;margin:8px 0 4px}
.note-ed ul,.note-ed ol{margin:6px 0;padding-left:22px} .note-ed li{margin:2px 0}
.note-ed blockquote{border-left:2px solid var(--warn);margin:6px 0;padding:2px 0 2px 11px;color:var(--muted)}
.note-ed pre{background:var(--surface);border:1px solid var(--border);border-radius:7px;padding:8px 10px;font-family:var(--mono);font-size:12.5px;white-space:pre-wrap;margin:6px 0}
.note-row{display:flex;align-items:center;gap:8px;margin-top:9px;font-family:var(--mono);font-size:10.5px;color:var(--faint)}
.note-row .sp{margin-left:auto}
.note-scope{font-size:11.5px;color:var(--muted);margin-top:10px;padding:7px 10px;background:var(--bg-2);border-radius:8px;line-height:1.6}
.note-scope:empty{display:none} .note-scope b{color:var(--warn)}
.note-item{border:1px solid var(--border-soft);border-radius:10px;padding:10px 12px;margin-top:9px;background:var(--bg-2)}
.note-item .meta{display:flex;gap:7px;align-items:center;font-family:var(--mono);font-size:10px;color:var(--faint);margin-bottom:5px;flex-wrap:wrap}
.note-item .meta .tag{background:var(--warn-bg);color:var(--warn);border-radius:100px;padding:1px 8px;max-width:170px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.note-item .meta button{background:none;border:none;color:var(--faint);cursor:pointer;font-size:11px;padding:0 2px}
.note-item .meta button:hover{color:var(--warn)} .note-item .meta .sp{margin-left:auto}
.note-item .body{font-size:13.5px;line-height:1.65;word-break:break-word}
.note-item .body h3{font-family:var(--serif);font-size:16px;margin:6px 0 3px}
.note-item .body ul,.note-item .body ol{margin:5px 0;padding-left:20px}
.note-item .body blockquote{border-left:2px solid var(--warn);margin:5px 0;padding-left:10px;color:var(--muted)}
.note-item .body pre{background:var(--surface);border:1px solid var(--border);border-radius:6px;padding:7px 9px;font-family:var(--mono);font-size:12px;white-space:pre-wrap}
.note-item .body mark{background:var(--warn);color:#241a00;border-radius:2px;padding:0 2px}
.note-empty{color:var(--muted);font-size:13px;padding:8px 0}
/* the pencil beside every heading */
.sec-note{border:none;background:none;color:var(--faint);font-size:13px;cursor:pointer;padding:2px 5px;border-radius:6px;
  vertical-align:middle;opacity:.35;transition:opacity .15s,color .15s;font-family:var(--mono)}
h2:hover .sec-note,h3:hover .sec-note,.sec-note:hover{opacity:1;color:var(--warn)}
.sec-note.has{opacity:1;color:var(--warn);background:var(--warn-bg)}
@media(max-width:600px){.note-panel{right:12px;left:12px;width:auto;bottom:86px;max-height:78vh}
  .note-fab{bottom:16px;right:84px;width:50px;height:50px;font-size:21px}
  .sec-note{opacity:.8}}

/* ---- bank items on a unit page (unit.html block 4) ---------------------- */
.bankbox{margin-top:16px;padding-top:15px;border-top:1px solid var(--border)}
.bk-hd{font-family:var(--mono);font-size:10px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--faint);margin-bottom:11px}
.bk{background:var(--bg-2);border:1px solid var(--border);border-radius:var(--r-sm);
  padding:11px 14px;margin-bottom:7px}
.bk-h{font-size:13.5px;color:var(--muted);display:flex;gap:8px;align-items:baseline;flex-wrap:wrap}
.bk-h b{color:var(--text);font-weight:500}
.bk-ar{color:var(--ac);font-size:11px}
.bk-t{margin-left:auto;font-family:var(--mono);font-size:9.5px;letter-spacing:.07em;
  text-transform:uppercase;color:var(--faint)}
.bk-o{display:inline-block;font-size:13px;color:var(--text);padding:1px 7px;margin-right:4px;
  border:1px solid var(--border-strong);border-radius:100px}
.bk-o.over{border-color:var(--warn);color:var(--warn);background:var(--warn-bg)}
.bk-s{font-size:13px;line-height:1.6;margin-top:6px;padding-left:10px;
  border-left:2px solid var(--border-strong)}
.bk-w{font-size:12.5px;color:var(--muted);margin-top:5px}
.bk-more>summary{cursor:pointer;font-size:12.5px;color:var(--ac-lift);padding:6px 0;
  list-style:none}
.bk-more>summary::-webkit-details-marker{display:none}
.bk-more>summary::before{content:'\25B8';margin-right:6px;font-size:9px}
.bk-more[open]>summary::before{content:'\25BE'}

/* ---- "New today" cards (review.html, WP4 feed) -------------------------- */
.bk.nt{display:grid;grid-template-columns:auto 1fr;gap:11px;align-items:start;cursor:pointer}
.bk.nt input{margin-top:4px;accent-color:var(--ac);width:15px;height:15px;flex:none}
.bk.nt.done{opacity:.45}
.bk.nt.done .bk-h b{text-decoration:line-through;text-decoration-color:var(--faint)}

/* ---- upload-to-mark panel (assets/mark.js, WP5) ------------------------- */
.mk{display:flex;flex-direction:column;gap:11px}
.mk-kinds{display:flex;gap:7px;flex-wrap:wrap}
.mk-kinds button{background:var(--bg-2);border:1px solid var(--border);color:var(--muted);
  border-radius:100px;padding:6px 14px;font-size:12.5px;cursor:pointer}
.mk-kinds button.on{border-color:var(--ac);background:var(--ac-bg);color:var(--ac-lift)}
.mk-hint{font-size:12.5px;color:var(--muted);margin:0}
.mk-sheet{display:flex;gap:11px;flex-wrap:wrap}
.mk-sheet label{font-size:12px;color:var(--muted);display:flex;gap:6px;align-items:center}
.mk-sheet select,.mk-sheet input{background:var(--surface);border:1px solid var(--border);
  color:var(--text);border-radius:7px;padding:5px 9px;font-size:13px}
.mk textarea{background:var(--surface);border:1px solid var(--border);color:var(--text);
  border-radius:9px;padding:10px 13px;font-size:14px;line-height:1.6;font-family:inherit;
  resize:vertical;width:100%;box-sizing:border-box}
.mk textarea:focus,.mk-sheet input:focus{outline:none;border-color:var(--ac)}
.mk-files{display:flex;gap:11px;align-items:center;flex-wrap:wrap}
.mk-list{font-family:var(--mono);font-size:11px;color:var(--faint)}
.mk-status{font-size:12.5px;color:var(--muted)}

.mk-hero{display:flex;gap:16px;align-items:baseline;flex-wrap:wrap;margin:18px 0 6px}
.mk-big{font-family:var(--serif);font-size:44px;line-height:1;color:var(--text)}
.mk-big span{font-size:20px;color:var(--faint)}
.mk-bandbig{font-family:var(--mono);font-size:15px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ac-lift);border:1px solid var(--ac);border-radius:100px;padding:5px 14px}
.mk-wc{font-family:var(--mono);font-size:11.5px;color:var(--faint)}
.mk-warn{color:var(--warn)}
.mk-note{font-size:12.5px;color:var(--muted);line-height:1.6;margin:6px 0}
.mk-h{font-family:var(--serif);font-size:17px;margin:22px 0 9px}

.mk-crit{background:var(--bg-2);border:1px solid var(--border);border-radius:var(--r-sm);
  padding:12px 15px;margin-bottom:8px}
.mk-ch{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.mk-band{font-family:var(--mono);font-size:13px;color:var(--ac-lift)}
.mk-q{font-size:12.5px;color:var(--muted);font-style:italic;margin-top:5px}
.mk-ev{margin:7px 0 0;padding-left:17px;font-size:13px;line-height:1.6}
.mk-ev li{margin-bottom:3px}
.mk-up{font-size:12.5px;margin-top:7px;padding-left:10px;border-left:2px solid var(--ac)}

.mk-fix{display:grid;grid-template-columns:auto 1fr;gap:12px;background:var(--bg-2);
  border:1px solid var(--border);border-radius:var(--r-sm);padding:12px 15px;margin-bottom:8px}
.mk-fix>div:only-child{grid-column:1/-1}
.mk-n{font-family:var(--mono);font-size:12px;color:var(--ac-lift)}
.mk-was{font-size:13px;color:var(--muted);text-decoration:line-through;
  text-decoration-color:var(--faint);line-height:1.6}
.mk-now{font-size:13.5px;line-height:1.6;margin-top:6px;padding-left:10px;
  border-left:2px solid var(--teal)}
.mk-rule{font-size:12.5px;color:var(--muted);margin-top:6px}
.mk-tr>summary{cursor:pointer;font-size:12.5px;color:var(--ac-lift);padding:7px 0;list-style:none}
.mk-tr>summary::-webkit-details-marker{display:none}
.mk-tr>summary::before{content:'\25B8';margin-right:6px;font-size:9px}
.mk-tr[open]>summary::before{content:'\25BE'}
.mk-trb{white-space:pre-wrap;font-size:13px;line-height:1.7;background:var(--surface);
  border:1px solid var(--border);border-radius:var(--r-sm);padding:12px 15px}
.onpaper{margin-top:16px;border-top:1px solid var(--border);padding-top:12px}
.onpaper>summary{cursor:pointer;font-size:13px;color:var(--ac-lift);list-style:none;padding:4px 0}
.onpaper>summary::-webkit-details-marker{display:none}
.onpaper>summary::before{content:'\25B8';margin-right:6px;font-size:9px}
.onpaper[open]>summary::before{content:'\25BE'}

/* ---- paraphrase harvest (review.html, WP4.5) ---------------------------- */
.bk.hv .hv-ans{font-size:12.5px;color:var(--muted)}
.bk.hv .hv-ans i{color:var(--text);font-style:normal}
.hv-in{display:grid;gap:9px;margin-top:9px}
@media(min-width:720px){.hv-in{grid-template-columns:1fr 1fr}}
.hv-in label{display:flex;flex-direction:column;gap:4px;font-family:var(--mono);font-size:9.5px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--faint)}
.hv-in input{background:var(--surface);border:1px solid var(--border);color:var(--text);
  border-radius:7px;padding:7px 11px;font-size:13.5px;font-family:var(--sans)}
.hv-in input:focus{outline:none;border-color:var(--ac)}

/* ---- book-unit companions (WP6) ---------------------------------------- */
.bu-ex{background:var(--bg-2);border:1px solid var(--border);border-radius:var(--r-sm);
  padding:13px 16px;margin-bottom:9px}
.bu-eh{display:flex;gap:11px;align-items:baseline;flex-wrap:wrap}
.bu-ref{font-family:var(--mono);font-size:12px;color:var(--ac-lift);flex:none}
.bu-what{font-size:13.5px;line-height:1.6;flex:1;min-width:220px}
.bu-pg{font-family:var(--mono);font-size:11px;color:var(--muted);text-decoration:none;
  white-space:nowrap}
.bu-pg:hover{color:var(--ac-lift)}
.bu-ans{display:flex;gap:8px;flex-wrap:wrap;margin-top:11px}
.bu-ans label{display:flex;align-items:center;gap:6px}
.bu-ans label span{font-family:var(--mono);font-size:10.5px;color:var(--faint);min-width:16px;
  text-align:right}
.bu-ans input{background:var(--surface);border:1px solid var(--border);color:var(--text);
  border-radius:6px;padding:5px 9px;font-size:13px;width:116px}
.bu-ans input:focus{outline:none;border-color:var(--ac)}
.bu-ans input.ok{border-color:var(--teal);background:var(--ok-bg,rgba(25,158,112,.10))}
.bu-ans input.bad{border-color:var(--bad);background:rgba(217,89,38,.10)}
.bu-res{font-size:12.5px;color:var(--muted);align-self:center}
.bu-res i{color:var(--text);font-style:normal}
.bu-mem{display:grid;gap:8px}
.bu-list{margin-top:15px;padding-top:13px;border-top:1px solid var(--border)}
.bu-row{display:block;background:var(--bg-2);border:1px solid var(--border);
  border-radius:var(--r-sm);padding:11px 14px;margin-bottom:7px;text-decoration:none}
.bu-row:hover{border-color:var(--ac)}
.bu-t{display:block;font-size:13.5px;color:var(--text);font-weight:500}
.bu-m{display:block;font-family:var(--mono);font-size:10.5px;color:var(--faint);margin-top:4px}