/* voidbender's notes: black and white, system fonts, no frameworks. */
:root{--fg:#000;--bg:#fff;--soft:#f2f2f2;--line:#000;--muted:#555;--hair:#d0d0d0;
  --top:56px;--nav-w:264px;--chat-w:380px;color-scheme:light}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--fg:#fff;--bg:#000;--soft:#161616;--line:#fff;--muted:#aaa;--hair:#333;color-scheme:dark}}
:root[data-theme=dark]{--fg:#fff;--bg:#000;--soft:#161616;--line:#fff;--muted:#aaa;--hair:#333;color-scheme:dark}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--top) + 12px)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}
body{margin:0;background:var(--bg);color:var(--fg);font:17px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
a{color:var(--fg);text-underline-offset:3px}
a:hover{text-decoration-thickness:2px}
input,button,textarea,select{font:inherit;color:var(--fg);background:var(--bg);border:1.5px solid var(--line);border-radius:0;padding:6px 10px}
input{width:100%}
button{cursor:pointer;font-weight:600}
button:hover{background:var(--fg);color:var(--bg)}
button:disabled{opacity:.5;cursor:wait}
button.link{border:0;padding:0 4px;font-weight:400;text-decoration:underline;text-underline-offset:3px;background:none;color:var(--fg)}
:focus-visible{outline:2px solid var(--fg);outline-offset:2px}
.skip{position:absolute;left:-999px;top:8px;z-index:100;background:var(--fg);color:var(--bg);padding:8px 12px}
.skip:focus{left:8px}

/* top bar */
.topbar{position:sticky;top:0;z-index:30;height:var(--top);display:flex;align-items:center;gap:14px;
  padding:0 16px;background:var(--bg);border-bottom:2px solid var(--line)}
.brand{font-weight:700;text-decoration:none;letter-spacing:.01em;white-space:nowrap}
.topbar .search{flex:1;max-width:520px;margin-left:8px}
.topbar .search input{padding:5px 10px}
nav.top{display:flex;gap:14px;align-items:center;font-size:.92rem;white-space:nowrap;margin-left:auto}
.icon-btn{display:inline-flex;align-items:center;justify-content:center;min-width:36px;height:34px;padding:0 8px;font-size:.85rem}
.burger,.burger::before,.burger::after{display:block;width:16px;height:2px;background:currentColor;position:relative}
.burger::before,.burger::after{content:"";position:absolute;left:0}
.burger::before{top:-5px}.burger::after{top:5px}
.icon-btn[aria-pressed=true]{background:var(--fg);color:var(--bg)}

/* three-pane shell: notes | content | chat; either side can be closed */
.shell{display:grid;grid-template-columns:var(--nav-col,var(--nav-w)) minmax(0,1fr) var(--chat-col,var(--chat-w));min-height:calc(100dvh - var(--top))}
html.nav-closed .shell{--nav-col:0px}
html.nav-closed .sidebar{display:none}
html.chat-closed .shell,body.no-chat .shell{--chat-col:0px}
html.chat-closed .chat-side{display:none}
.page{width:100%;max-width:80ch;margin:0 auto;padding:20px 28px 96px;outline:none}
/* fixed column per pane, so a pane turning into an overlay never shifts the others */
.shell > .sidebar{grid-column:1;grid-row:1}
.shell > .page{grid-column:2;grid-row:1}
.shell > .chat-side{grid-column:3;grid-row:1}
.subject h2{border-bottom:0;margin-bottom:6px}

/* sidebar */
.sidebar{position:sticky;top:var(--top);height:calc(100dvh - var(--top));overflow-y:auto;overscroll-behavior:contain;
  padding:14px 12px 40px 16px;border-right:1px solid var(--hair);font-size:.92rem;background:var(--bg)}
.side-head{display:flex;gap:8px;align-items:center;margin-bottom:10px}
.side-head input{padding:4px 8px;font-size:.9rem}
.sidebar ul{list-style:none;margin:0;padding:0}
.side-links{margin-bottom:12px!important;padding-bottom:10px!important;border-bottom:1px solid var(--hair)!important}
.sidebar li a{display:block;padding:3px 8px;text-decoration:none;border-left:2px solid transparent;line-height:1.35}
.sidebar li a:hover{border-left-color:var(--line)}
.sidebar li a[aria-current=page]{background:var(--fg);color:var(--bg);border-left-color:var(--fg);font-weight:600}
.sidebar li a.done::after{content:" ✓";font-size:.8em}
.side-subject{margin:4px 0 10px}
.side-subject summary{cursor:pointer;font-weight:700;padding:4px 0;list-style-position:inside}
.side-subject ul{margin-left:4px!important}

/* content */
h1,h2,h3,h4{line-height:1.25;margin:1.6em 0 .5em}
h1{font-size:1.9rem;margin-top:.4em}
h2{font-size:1.35rem;border-bottom:1px solid var(--line);padding-bottom:4px}
h3{font-size:1.1rem}
.muted,.crumbs{color:var(--muted);font-size:.9rem}
.list{padding-left:1.2em}
.list li{margin:4px 0}
code,pre{font:.88em/1.5 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;background:var(--soft)}
code{padding:1px 4px}
pre{position:relative;padding:12px 14px;overflow-x:auto;border-left:3px solid var(--line)}
pre code{padding:0;background:none}
pre .copy{position:absolute;top:6px;right:6px;font-size:.75rem;padding:2px 8px;opacity:.6}
pre:hover .copy,pre .copy:focus{opacity:1}
blockquote{margin:1em 0;padding:2px 16px;border-left:3px solid var(--line)}
table{border-collapse:collapse;display:block;overflow-x:auto;margin:1em 0}
th,td{border:1px solid var(--line);padding:6px 10px;text-align:left;vertical-align:top}
th{background:var(--soft)}
img{max-width:100%;height:auto;filter:grayscale(1)}
hr{border:0;border-top:1px solid var(--line);margin:2em 0}
mark{background:var(--fg);color:var(--bg);padding:0 2px}
kbd{font:.8em ui-monospace,Consolas,monospace;border:1px solid currentColor;border-radius:3px;padding:0 4px;opacity:.75}
form.big{display:flex;gap:8px;margin:16px 0}
.results{padding-left:1.4em}
.results li{margin:0 0 18px}
.results p{margin:2px 0 0;color:var(--muted);font-size:.92rem}
.btn{display:inline-block;padding:8px 14px;border:1.5px solid var(--line);font-weight:600;text-decoration:none}
.btn:hover{background:var(--fg);color:var(--bg)}
.keys{margin-top:40px}
.progress{position:fixed;top:0;left:0;right:0;height:3px;background:var(--fg);transform:scaleX(0);transform-origin:0 0;z-index:40;pointer-events:none}
body:not([data-page]) .progress{display:none}

/* note page */
.toc{border:1.5px solid var(--line);padding:8px 14px;margin:8px 0 0;font-size:.92rem}
.toc summary{cursor:pointer;font-weight:600}
.toc ol{margin:8px 0 4px;padding-left:1.2em}
.toc li.l3{margin-left:1.2em;list-style:circle}
.note-end{display:flex;flex-wrap:wrap;gap:16px;align-items:center;margin:40px 0 16px;padding-top:16px;border-top:2px solid var(--line)}
#studied.on{background:var(--fg);color:var(--bg)}
.pager{display:flex;justify-content:space-between;gap:16px;margin:16px 0}
.pager a{max-width:48%}
.pager a[rel=next]{text-align:right;margin-left:auto}
.ask-sel{position:absolute;z-index:15;font-size:.85rem;padding:4px 10px;background:var(--fg);color:var(--bg)}

/* home dashboard */
.dash{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:18px 0}
.tile{display:flex;flex-direction:column;gap:2px;border:1.5px solid var(--line);padding:12px 14px;text-decoration:none;font-size:.88rem}
a.tile:hover{background:var(--fg);color:var(--bg)}
.tile .big{font-size:1.9rem;font-weight:700;line-height:1.1;font-variant-numeric:tabular-nums}
.continue{border-left:3px solid var(--line);padding-left:12px}
.subject .prog{font-size:.8rem;font-weight:400;margin-left:6px}
.bar{height:6px;border:1px solid var(--line);margin:-2px 0 10px}
.bar span{display:block;height:100%;width:0;background:var(--fg);transition:width .4s}
.notes li.done{list-style:none;margin-left:-1.2em}
.notes li.done::before{content:"✓ ";font-weight:700}

/* revision */
.rv-bar{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin:16px 0}
.rv-bar select{padding:4px 8px;margin-left:6px}
.card{border:2px solid var(--line);padding:20px 22px;min-height:220px;cursor:pointer;display:flex;flex-direction:column}
.card-ctx{margin:0 0 12px;font-size:.85rem}
.card-front{font-size:1.5rem;font-weight:700;line-height:1.3;margin:0}
.card-back{margin-top:18px;padding-top:14px;border-top:1px solid var(--line);white-space:pre-wrap;cursor:auto}
.card-back p{margin:0 0 10px}
.card-links{font-size:.88rem;white-space:normal}
.rv-actions{margin:14px 0}
.rv-actions > button,.rv-grade button{padding:10px 16px}
#rv-show{width:100%}
.rv-grade{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.rv-done{border:2px solid var(--line);padding:6px 20px 16px;margin:14px 0}

/* chat panel */
.chat{display:flex;flex-direction:column;background:var(--bg);font-size:15px;min-height:0}
.chat-side{position:sticky;top:var(--top);height:calc(100dvh - var(--top));border-left:2px solid var(--line)}
.chat-full{height:calc(100dvh - var(--top) - 80px);min-height:420px;border:2px solid var(--line)}
.chat-full #chat-close{display:none}
.chat-head{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;border-bottom:2px solid var(--line)}
.chat-actions{display:flex;gap:6px}
.chat-log{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:16px;display:flex;flex-direction:column;gap:12px}
.hint{margin:0;color:var(--muted);font-size:.85rem}
.msg{padding:10px 12px;max-width:92%;white-space:pre-wrap;overflow-wrap:anywhere}
.msg.user{align-self:flex-end;background:var(--fg);color:var(--bg)}
.msg.bot{align-self:flex-start;border:1.5px solid var(--line)}
.msg.bot.pending .txt{color:var(--muted)}
.meta{font-size:.75rem;color:var(--muted);margin-bottom:4px;white-space:normal}
.stats{font-size:.75rem;color:var(--muted);margin-top:6px;white-space:normal;font-variant-numeric:tabular-nums}
.stats:empty{display:none}
.src{list-style:none;margin:8px 0 0;padding:8px 0 0;border-top:1px solid var(--line);font-size:.85rem;white-space:normal}
.src:empty{display:none}
.src li::before{content:"↳ "}
.chat-form{display:flex;flex-direction:column;gap:8px;padding:12px 16px;border-top:2px solid var(--line)}
.chat-input{display:flex;gap:8px;align-items:stretch}
.chat-form textarea{flex:1;resize:none;min-height:2.6em;max-height:9em}
.model-pick{display:flex;align-items:center;gap:8px;font-size:.85rem;color:var(--muted)}
.model-pick select{flex:1;min-width:0;padding:3px 6px}
.chat-fab{display:none;position:fixed;right:16px;bottom:16px;z-index:20;padding:10px 16px;
  background:var(--fg);color:var(--bg);font-weight:600;text-decoration:none;border:1.5px solid var(--line)}
html.chat-closed .chat-fab{display:block}
.scrim{position:fixed;inset:var(--top) 0 0 0;background:rgba(0,0,0,.45);z-index:24}

/* medium screens: the notes menu becomes a slide-in drawer */
@media (max-width:1279px){
  .shell{--nav-col:0px}
  html.nav-closed .sidebar,.sidebar{display:block;position:fixed;top:var(--top);left:0;bottom:0;height:auto;z-index:25;
    width:min(300px,86vw);transform:translateX(-102%);transition:transform .18s ease;border-right:2px solid var(--line)}
  html.nav-open .sidebar{transform:none}
}
/* small screens: the chat becomes a full-screen overlay */
@media (max-width:1000px){
  .shell{--chat-col:0px}
  html.chat-closed .chat-side,.chat-side{display:none;position:fixed;inset:var(--top) 0 0 0;height:auto;z-index:26;border-left:0}
  html.chat-open .chat-side{display:flex}
  html.chat-open,html.nav-open{overflow:hidden}
  .chat-fab{display:block}
  html.chat-open .chat-fab{display:none}
  .page{padding:16px 16px 96px}
}
@media (max-width:640px){
  .topbar{gap:8px;padding:0 10px}
  .topbar .search{margin-left:0}
  nav.top{gap:10px}
  nav.top > a{display:none}
  .dash{grid-template-columns:1fr 1fr 1fr;gap:6px}
  .tile{padding:8px 10px}.tile .big{font-size:1.5rem}
  .card{padding:16px;min-height:200px}
  .card-front{font-size:1.3rem}
  .pager{flex-direction:column}
  .pager a{max-width:100%}
  .pager a[rel=next]{text-align:left;margin-left:0}
}
@media (hover:none){.keys,#rv-show kbd,.rv-grade kbd{display:none}}
@media print{
  .topbar,.sidebar,.chat,.chat-fab,.scrim,.progress,.note-end,.pager,.toc,.ask-sel,pre .copy,.skip{display:none!important}
  .shell{display:block}
  .page{max-width:none;padding:0}
  body{font-size:12pt}
  a{text-decoration:none}
  pre{white-space:pre-wrap;border-left:2px solid #000}
}
.hint.notice{border-left:3px solid var(--line);padding-left:10px}
.meta:empty{display:none}

.turnstile:empty{display:none}.turnstile{min-height:0}
/* Ask (the AI chat). When the owner switches the AI off, everything about it
   disappears and one quiet "AI unavailable" takes its place in the top bar. */
.ai-unavailable{display:none;font-size:.85rem;color:var(--muted);white-space:nowrap}
html.ai-off .ai-unavailable{display:inline}
html.ai-off #chat-toggle-top,html.ai-off .chat-fab,html.ai-off .ask-sel,html.ai-off .ask-only,
html.ai-off .chat-side,html.ai-off .chat-full,html.ai-off .scrim{display:none!important}
html.ai-off .shell{--chat-col:0px}
.cloud-note{margin:0;font-size:.78rem;color:var(--muted);line-height:1.4}