/* =====================================================================
   Dual Space — dualspace.blog   ·   the space V*  (dual of primalspace.me)
   "The Index": a refined jemdoc directory. Monospace metadata, a real
   columnar archive table, utilitarian + lightweight. Green accent.
   Sibling type system to Primal Space. Pure-CSS toggles + tiny persist JS.

   Base design from the dual_space template; the "prose extras" block at the
   bottom (boxes, KaTeX math, endnotes, citations) is ported from the prior
   Zola stylesheet so Typst-authored posts render identically.
   ===================================================================== */
:root{
  --bg:#f7f6f3; --raised:#efeee9; --fg:#2b2a27; --fg-soft:#4c4a44; --muted:#827e74;
  --rule:#e2e0d8; --rule-soft:#ecebe4;
  --accent:#4f7a54; --accent-soft:#6b9670; --accent-dim:#a9c2ad;
  --code-bg:#eef0ea; --code-fg:#2e312b;
  --body:'Atkinson Hyperlegible', system-ui, sans-serif;
  --display:'Newsreader', Georgia, serif;
  --mono:'IBM Plex Mono', ui-monospace, monospace;

  /* theorem-style box colors (light) */
  --box-theorem-bg:#e7f3ff; --box-theorem-border:#2196f3;
  --box-definition-bg:#f3e7ff; --box-definition-border:#9c27b0;
  --box-lemma-bg:#e7ffe7; --box-lemma-border:#4caf50;
  --box-proof-bg:#fff9e7; --box-proof-border:#ff9800;
  --box-note-bg:#e7f7ff; --box-note-border:#00bcd4;
  --box-warning-bg:#ffe7e7; --box-warning-border:#f44336;
  --box-example-bg:#f0f0f0; --box-example-border:#757575;
  --box-answer-bg:#fffde7; --box-answer-border:#ffc107;
  --box-claim-bg:#f5f5f5; --box-claim-border:#9e9e9e;
}
body:has(#dark:checked){
  --bg:#181815; --raised:#20201c; --fg:#e6e3da; --fg-soft:#bdb9af; --muted:#928e83;
  --rule:#30302a; --rule-soft:#252521;
  --accent:#8fbf94; --accent-soft:#79a87e; --accent-dim:#3f4d40;
  --code-bg:#1c1c18; --code-fg:#cfccc2;

  --box-theorem-bg:#1a2a3a; --box-definition-bg:#2a1a3a; --box-lemma-bg:#1a3a1a;
  --box-proof-bg:#3a2f1a; --box-note-bg:#1a2f3a; --box-warning-bg:#3a1a1a;
  --box-example-bg:#2a2a2a; --box-answer-bg:#3a3520; --box-claim-bg:#2a2a2a;
}
body:has(#dys:checked){ --body:'OpenDyslexic','Atkinson Hyperlegible',sans-serif; }

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{ margin:0; background:var(--bg); color:var(--fg); font-family:var(--body); font-size:18px; line-height:1.65; -webkit-font-smoothing:antialiased; }
.switch-input{ position:absolute; opacity:0; width:0; height:0; pointer-events:none; }
a{ color:var(--accent); }
.wrap{ max-width:780px; margin:0 auto; padding:54px 28px 90px; }

/* ---- header ---- */
header.site{ display:flex; align-items:flex-start; gap:24px; padding-bottom:18px; border-bottom:2px solid var(--fg); }
.id{ flex:0 0 auto; }
.id .brand{ display:flex; align-items:baseline; gap:8px; text-decoration:none; color:var(--fg); white-space:nowrap; }
.id .sname{ font-family:var(--display); font-size:25px; font-weight:600; letter-spacing:-.01em; white-space:nowrap; }
.id .vtag{ font-family:var(--mono); font-size:12px; color:var(--accent); border:1px solid var(--accent-dim); border-radius:4px; padding:1px 5px; }
.id .role{ font-family:var(--mono); font-size:12.5px; color:var(--muted); margin:7px 0 0; }
.headright{ margin-left:auto; display:flex; flex-direction:column; align-items:flex-end; gap:12px; }
nav.main{ display:flex; gap:3px; font-family:var(--mono); font-size:14px; align-items:center; flex-wrap:wrap; justify-content:flex-end; }
nav.main a{ color:var(--fg); text-decoration:none; padding:4px 9px; border-radius:5px; }
nav.main a[aria-current]{ background:var(--accent); color:var(--bg); }
nav.main a:hover{ background:var(--raised); }
nav.main a[aria-current]:hover{ background:var(--accent); }
nav.main a.ext{ color:var(--fg-soft); }
nav.main a.ext::after{ content:" ↗"; color:var(--muted); }
.controls{ display:flex; gap:6px; }
.pill{ font-family:var(--mono); font-size:12px; color:var(--muted); border:1px solid var(--rule); border-radius:5px; padding:4px 9px; cursor:pointer; user-select:none; transition:.16s; }
.pill:hover{ border-color:var(--accent-soft); color:var(--fg); }
body:has(#dark:checked) .pill[for="dark"], body:has(#dys:checked) .pill[for="dys"]{ background:var(--accent); border-color:var(--accent); color:var(--bg); }
.pairline{ font-family:var(--mono); font-size:12px; color:var(--muted); margin:10px 0 0; white-space:nowrap; }
.pairline a{ color:var(--fg-soft); text-decoration:none; }
.pairline a:hover{ color:var(--accent); }
.pairline .b{ color:var(--accent); }

/* ---- section heads ---- */
h2.sec{ font-family:var(--mono); font-size:13px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--accent); margin:42px 0 14px; display:flex; align-items:baseline; gap:8px; }
h2.sec::after{ content:""; flex:1; height:1px; background:var(--rule); }

/* ---- featured ---- */
.feat{ padding:16px 0; border-bottom:1px solid var(--rule); }
.feat h3{ margin:0 0 5px; font-size:20px; font-weight:700; line-height:1.3; }
.feat h3 a{ color:var(--fg); text-decoration:none; }
.feat h3 a:hover{ color:var(--accent); text-decoration:underline; text-underline-offset:3px; }
.feat p{ margin:0 0 9px; color:var(--fg-soft); max-width:64ch; font-size:17px; }
.mline{ font-family:var(--mono); font-size:12.5px; color:var(--muted); display:flex; flex-wrap:wrap; gap:4px 16px; }
.mline .k{ color:var(--accent); }

/* ---- archive table ---- */
table.idx{ width:100%; border-collapse:collapse; font-size:15.5px; }
table.idx td{ padding:8px 0; border-bottom:1px solid var(--rule); vertical-align:baseline; }
table.idx tr:last-child td{ border-bottom:0; }
td.t-date{ font-family:var(--mono); font-size:13px; color:var(--muted); width:92px; white-space:nowrap; }
td.t-title a{ color:var(--fg); text-decoration:none; font-weight:700; }
td.t-title a:hover{ color:var(--accent); }
td.t-tags{ font-family:var(--mono); font-size:12px; color:var(--accent); text-align:right; width:210px; }

footer.idxfoot{ margin-top:44px; padding-top:18px; border-top:1px solid var(--rule); font-family:var(--mono); font-size:12.5px; color:var(--muted); }
footer.idxfoot a{ color:var(--accent); }

/* ---- article / post ---- */
.back{ font-family:var(--mono); font-size:13px; text-decoration:none; display:inline-block; margin:6px 0 26px; color:var(--muted); }
.back:hover{ color:var(--accent); }
.back::before{ content:"← "; }
article.post{ max-width:68ch; }
.post-head{ margin-bottom:34px; padding-bottom:22px; border-bottom:2px solid var(--fg); }
.post-head .kicker{ font-family:var(--mono); font-size:12.5px; color:var(--accent); margin:0 0 10px; }
.post-head h1{ font-size:33px; line-height:1.18; letter-spacing:-.015em; margin:0 0 14px; font-weight:700; }
.post-head .mline{ font-size:12.5px; }

.prose{ font-size:18px; }
.prose > *{ max-width:68ch; }
.prose p{ margin:0 0 20px; color:var(--fg-soft); }
.prose h2{ font-family:var(--mono); font-size:15px; font-weight:600; text-transform:uppercase; letter-spacing:.04em; color:var(--accent); margin:40px 0 12px; }
.prose h3{ font-size:18px; font-weight:700; margin:28px 0 8px; color:var(--fg); }
.prose strong{ color:var(--fg); }
.prose a{ text-underline-offset:3px; }
.prose ul,.prose ol{ margin:0 0 20px; padding-left:24px; color:var(--fg-soft); }
.prose li{ margin:6px 0; }
.prose img{ max-width:100%; height:auto; border-radius:6px; margin:18px 0; }
.prose blockquote{ margin:24px 0; padding:4px 0 4px 20px; border-left:3px solid var(--accent-dim); color:var(--muted); font-style:italic; }
.prose blockquote p{ color:var(--muted); }
.prose hr{ border:none; border-top:1px solid var(--rule); margin:34px 0; }

code{ font-family:var(--mono); font-size:.85em; background:var(--code-bg); color:var(--code-fg); padding:.12em .38em; border-radius:5px; }
.prose pre{ max-width:none; margin:24px 0; border:1px solid var(--rule); border-radius:8px; overflow-x:auto; background:var(--code-bg); padding:16px 18px; line-height:1.6; }
.prose pre code{ background:none; padding:0; border-radius:0; font-size:13.5px; color:var(--code-fg); }
.codeblock{ max-width:none; margin:24px 0; border:1px solid var(--rule); border-radius:8px; overflow:hidden; background:var(--code-bg); }
.codeblock .cb-head{ font-family:var(--mono); font-size:12px; color:var(--muted); padding:9px 16px; border-bottom:1px solid var(--rule); display:flex; justify-content:space-between; }
.codeblock pre{ margin:0; padding:16px 18px; overflow-x:auto; line-height:1.6; }
.codeblock code{ background:none; padding:0; border-radius:0; font-size:13.5px; color:var(--code-fg); }
.post-foot{ margin-top:44px; padding-top:22px; border-top:1px solid var(--rule); }

/* about / now / then pages */
.page{ max-width:68ch; }
.page h1{ font-size:29px; letter-spacing:-.01em; margin:6px 0 6px; font-weight:700; }
.page .subt{ font-family:var(--mono); font-size:13px; color:var(--muted); margin:0 0 26px; }
.page .subt a{ color:var(--accent); }

@media (max-width:620px){
  header.site{ flex-direction:column; }
  .headright{ margin-left:0; align-items:flex-start; }
  nav.main{ justify-content:flex-start; }
}

/* =====================================================================
   PROSE EXTRAS — boxes, KaTeX math, endnotes, citations.
   Ported from the prior Zola stylesheet; adapted to the Index tokens.
   ===================================================================== */

/* ---- theorem-style boxes ---- */
.box{ margin:24px 0; padding:14px 18px; border-left:4px solid var(--box-note-border); border-radius:6px; background:var(--box-note-bg); color:var(--fg); }
.box-title{ font-weight:700; font-size:1.05rem; margin-bottom:8px; color:var(--fg); }
.box-content > *:first-child{ margin-top:0; }
.box-content > *:last-child{ margin-bottom:0; }
.box-content p{ color:var(--fg); }
.box-theorem{ background:var(--box-theorem-bg); border-color:var(--box-theorem-border); }
.box-definition{ background:var(--box-definition-bg); border-color:var(--box-definition-border); }
.box-lemma{ background:var(--box-lemma-bg); border-color:var(--box-lemma-border); }
.box-proof{ background:var(--box-proof-bg); border-color:var(--box-proof-border); }
.box-note{ background:var(--box-note-bg); border-color:var(--box-note-border); }
.box-warning{ background:var(--box-warning-bg); border-color:var(--box-warning-border); }
.box-example{ background:var(--box-example-bg); border-color:var(--box-example-border); }
.box-answer{ background:var(--box-answer-bg); border-color:var(--box-answer-border); }
.box-claim{ background:var(--box-claim-bg); border-color:var(--box-claim-border); }

/* ---- expandable / details ---- */
details.expandable{ margin:24px 0; }
details.expandable summary{ cursor:pointer; font-weight:600; color:var(--accent); padding:6px 0; list-style:none; }
details.expandable summary::-webkit-details-marker{ display:none; }
details.expandable summary::before{ content:"▶ "; font-size:.8em; }
details.expandable[open] summary::before{ content:"▼ "; }
details.expandable .expandable-content{ padding:12px 0; border-top:1px solid var(--rule); margin-top:6px; }

/* ---- KaTeX math ---- */
.katex{ font-size:1.04em; }
.katex-inline{ padding:0 .05em; }
/* Display equation: [ math | number ] grid. The math cell scrolls
   horizontally on its own (overflow-y hidden avoids a phantom vertical
   scrollbar), and the equation number stays pinned at the right. */
.eqn{ display:grid; grid-template-columns:minmax(0, 1fr) auto; align-items:center; column-gap:1rem; margin:18px 0; }
.eqn > .katex-display{ margin:0; min-width:0; overflow-x:auto; overflow-y:hidden; }
.eqn .katex .tag{ display:none; }
.eqn .equation-number{ color:var(--muted); font-size:.9em; white-space:nowrap; user-select:none; }
.equation-ref{ color:var(--accent); text-decoration:none; font-weight:600; }
.equation-ref:hover{ text-decoration:underline; }
.math-error{ background:var(--box-warning-bg); color:var(--box-warning-border); padding:.4rem; border-radius:4px; font-family:var(--mono); }

/* ---- citations / references ---- */
.citation-ref{ color:var(--accent); text-decoration:none; font-weight:600; white-space:nowrap; }
.citation-ref:hover{ text-decoration:underline; }
.reference-item{ display:flex; gap:.75rem; margin-bottom:1rem; font-size:.95em; line-height:1.6; scroll-margin-top:80px; }
.reference-number{ font-weight:600; color:var(--fg); flex-shrink:0; min-width:2rem; }

/* ---- Typst-native footnotes / endnotes ---- */
[role="doc-noteref"]{ font-size:.75em; vertical-align:super; line-height:0; }
.prose [role="doc-noteref"] a, sup a{ color:var(--accent); text-decoration:none; font-weight:600; }
section[role="doc-endnotes"]{ max-width:68ch; margin:48px 0 0; padding-top:20px; border-top:1px solid var(--rule); color:var(--muted); font-size:.92em; }
section[role="doc-endnotes"] ol{ list-style:none; margin:0; padding-left:0; }
section[role="doc-endnotes"] li{ margin-bottom:.75rem; padding-left:2rem; position:relative; scroll-margin-top:80px; }
section[role="doc-endnotes"] li a[role="doc-backlink"]:first-child{ position:absolute; left:0; top:0; font-weight:600; text-decoration:none; }
/* Typst wraps the endnote number in <sup>; pull it back to the baseline so the
   number and its trailing period sit on the same line. */
section[role="doc-endnotes"] li a[role="doc-backlink"]:first-child sup{ font-size:1em; vertical-align:baseline; }
section[role="doc-endnotes"] li a[role="doc-backlink"]:first-child::after{ content:"."; }
section[role="doc-endnotes"] a{ color:var(--accent); }

/* ---- figures / image galleries (e.g. the cat gallery in then/) ---- */
.prose figure{ margin:18px 0; text-align:center; }
.prose figure img{ border-radius:8px; }
.prose figcaption{ font-size:.85em; color:var(--muted); margin-top:6px; }
.cat-gallery-top{ display:flex; flex-wrap:wrap; justify-content:center; gap:16px; margin:18px 0; }
.cat-gallery-bottom{ display:flex; justify-content:center; margin-bottom:18px; }
.cat-gallery-top figure,.cat-gallery-bottom figure{ margin:0; text-align:center; }
.cat-gallery-top img{ max-width:280px; }
.cat-gallery-bottom img{ max-width:220px; }
.cat-gallery-top figcaption{ max-width:280px; }
.cat-gallery-bottom figcaption{ max-width:220px; }