/* grokkingstuff — org-publish theme (Rocinante Blue, dark)
   Standalone stylesheet for Emacs org-mode HTML export (ox-html / org-publish).
   No external dependencies besides the two Google Fonts below — self-host
   Space Grotesk + JetBrains Mono later and swap the @import for @font-face
   if you want a fully offline build. */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;700&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root{
  --bg-0:#12161d; --bg-1:#1a1f28; --bg-2:#232a35;
  --line:#333c4b; --line-strong:#465061;
  --fg-0:#e4e8ee; --fg-1:#a4adbd; --fg-2:#68727f;
  --blue:#6fa6cf; --blue-strong:#8bbfe4;
  --amber:#c9924f; --amber-strong:#e0a962;
  --sage:#8fab84; --rust:#c3684a;
  /* extra category accents for the wiki note-graph (see tools/wiki/graph_script.html) */
  --teal:#5fa89b; --violet:#9a86c4; --rose:#cf7f96; --gold:#c7b25f;
  --font-sans:'Space Grotesk',-apple-system,'Segoe UI',sans-serif;
  --font-mono:'JetBrains Mono','SF Mono',Consolas,monospace;
  /* fluid column system: main text and rail both scale with viewport
     width via clamp() instead of snapping at a fixed breakpoint */
  --main-w:clamp(480px, 34vw + 340px, 860px);
  --rail-w:clamp(180px, 12vw + 70px, 280px);
  --rail-gap:clamp(16px, 2vw, 30px);
}

/* ---- light theme ("Technical Blueprint") ---- */
[data-theme="light"]{
  --bg-0:#f4efe2; --bg-1:#e9e1cd; --bg-2:#ddd2b7;
  --line:#c7ba98; --line-strong:#a3936c;
  --fg-0:#2a2620; --fg-1:#5b5140; --fg-2:#8a7d63;
  --blue:#2f6690; --blue-strong:#1f4d6e;
  --amber:#8a5a1e; --amber-strong:#6e4715;
  --sage:#4c6a3f; --rust:#a03f24;
  --teal:#2f6b5e; --violet:#5b478a; --rose:#9a3f56; --gold:#7a6a1f;
}

*{box-sizing:border-box}
html{background:var(--bg-0)}
body{
  margin:0; color:var(--fg-0);
  font-family:var(--font-sans); font-size:16px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
  background-color:var(--bg-0);
}
#content, #gs-nav, #gs-footer{background-color:var(--bg-0)}
a{color:var(--blue); text-decoration:none; border-bottom:1px solid transparent}
a:hover{color:var(--blue-strong); border-bottom-color:var(--blue-strong)}
::selection{background:var(--blue); color:var(--bg-0)}

/* ---- nav (html-preamble) ---- */
#gs-nav{
  display:flex; align-items:center; gap:24px;
  padding:16px 32px; border-bottom:1px solid var(--line);
  font-family:var(--font-mono); font-size:12px; letter-spacing:0.06em;
  position:sticky; top:0; background:var(--bg-0); z-index:10;
}
#gs-nav .gs-brand{color:var(--fg-0); font-weight:700; text-transform:uppercase; border:none; margin-right:8px}
#gs-nav a{color:var(--fg-1); text-transform:uppercase; border:none}
#gs-nav a:hover{color:var(--blue)}
.gs-theme-btn{
  margin-left:auto; font-family:var(--font-mono); font-size:11px; text-transform:uppercase;
  letter-spacing:0.06em; color:var(--fg-1); background:var(--bg-1); border:1px solid var(--line-strong);
  border-radius:2px; padding:5px 10px; cursor:pointer;
}
.gs-theme-btn:hover{border-color:var(--blue); color:var(--blue)}
.gs-theme-btn:focus-visible{outline:2px solid var(--blue); outline-offset:2px}

/* ---- page shell ---- */
/* left-aligned per the system's "dense, left-aligned" layout rule --
   the column starts at the same gutter as the nav instead of floating
   centered with a large empty margin on wide viewports */
#content{
  width:min(calc(100% - 64px), calc(var(--main-w) + var(--rail-w) + var(--rail-gap)));
  margin:0 auto; padding:48px 0 80px;
  padding-right:calc(var(--rail-w) + var(--rail-gap));
  position:relative;
}
/* below this, the rail can't shrink further without breaking sidenote
   legibility -- collapse to a single stacked column instead of a squeeze */
@media (max-width:680px){
  #content{width:calc(100% - 64px); padding-right:0; margin:0 32px}
}

h1.title{
  font-size:40px; line-height:1.15; margin:0 0 4px; letter-spacing:-0.01em;
}
p.subtitle{
  font-family:var(--font-mono); color:var(--fg-1); font-size:14px;
  margin:0 0 32px; text-transform:uppercase; letter-spacing:0.06em;
}
h2{font-size:24px; margin:40px 0 12px; padding-bottom:8px; border-bottom:1px solid var(--line)}
h3{font-size:18px; margin:28px 0 10px; color:var(--fg-0)}
h4{font-size:15px; margin:20px 0 8px; color:var(--fg-1); text-transform:uppercase; letter-spacing:0.06em}
p, li{color:var(--fg-0)}
p{margin:0 0 16px}
ul,ol{margin:0 0 16px; padding-left:22px}
strong{color:var(--fg-0)}
hr{border:none; border-top:1px solid var(--line); margin:32px 0}

/* ---- table of contents ---- */
#table-of-contents{
  border:1px solid var(--line); background:var(--bg-1);
  padding:16px 20px; margin:24px 0 40px;
}
#table-of-contents h2{
  font-family:var(--font-mono); font-size:12px; text-transform:uppercase;
  letter-spacing:0.14em; color:var(--fg-1); border:none; margin:0 0 10px; padding:0;
}
#table-of-contents ul{list-style:none; padding-left:0; margin:0; font-family:var(--font-mono); font-size:13px}
#table-of-contents ul ul{padding-left:16px}
#table-of-contents li{margin:4px 0}

/* ---- blockquote / pull-quote ---- */
blockquote{
  border-left:2px solid var(--blue); background:var(--bg-1);
  margin:24px 0; padding:12px 20px; color:var(--fg-1);
}

/* ---- tables ---- */
table{border-collapse:collapse; width:100%; margin:20px 0; font-family:var(--font-mono); font-size:13px}
table th, table td{border:1px solid var(--line); padding:8px 12px; text-align:left}
table th{background:var(--bg-1); color:var(--fg-1); text-transform:uppercase; font-size:11px; letter-spacing:0.06em}
.gs-table-wrap{overflow-x:auto; margin:20px 0}
.gs-table-wrap table{margin:0}
mjx-container{overflow-x:auto; overflow-y:hidden; max-width:100%}
.gs-roam-ref{color:var(--fg-2); border-bottom:1px dashed var(--line-strong); cursor:help}
.gs-missing-img{display:inline-block; color:var(--fg-2); font-family:var(--font-mono); font-size:0.9em; font-style:italic; background:var(--bg-1); border:1px dashed var(--line-strong); border-radius:2px; padding:1px 6px; cursor:help}
.gs-wiki-image{display:block; max-width:100%; height:auto; border:1px solid var(--line); margin:16px 0}

/* ---- code ---- */
code{font-family:var(--font-mono); background:var(--bg-1); border:1px solid var(--line); padding:1px 5px; font-size:0.9em; border-radius:2px}
pre{
  font-family:var(--font-mono); font-size:13px; line-height:1.6;
  background:var(--bg-1); border:1px solid var(--line); border-radius:0;
  padding:16px 20px; overflow-x:auto; margin:20px 0;
}
pre.src{position:relative}
pre.src:before{
  content:attr(class); display:none; /* org sets src-LANG in class; leave hidden by default */
}
pre code{background:none; border:none; padding:0}
label.org-src-name{
  display:block; font-family:var(--font-mono); font-size:11px; text-transform:uppercase;
  letter-spacing:0.06em; color:var(--fg-1); margin-bottom:6px;
}
/* htmlize font-lock -> gs accent mapping */
.org-keyword{color:var(--blue)}
.org-function-name{color:var(--blue-strong)}
.org-variable-name{color:var(--fg-0)}
.org-string{color:var(--sage)}
.org-comment, .org-comment-delimiter{color:var(--fg-2); font-style:italic}
.org-constant, .org-builtin{color:var(--amber)}
.org-type{color:var(--amber-strong)}
.org-preprocessor, .org-negation-char{color:var(--rust)}
.org-doc{color:var(--fg-1)}

/* ---- figures ---- */
.figure{margin:24px 0; text-align:left}
.figure img{max-width:100%; border:1px solid var(--line); display:block}
.figure p{
  font-family:var(--font-mono); font-size:12px; color:var(--fg-1);
  margin-top:8px; text-transform:uppercase; letter-spacing:0.04em;
}

/* ---- sidenotes (footnotes rewritten into the margin rail by publish.el) ---- */
sup.footref, sup.footref a{color:var(--amber); font-family:var(--font-mono)}
.sidenote{
  float:right; clear:right;
  width:var(--rail-w); margin-right:calc(-1 * (var(--rail-w) + var(--rail-gap)));
  font-family:var(--font-mono); font-size:12px; line-height:1.5; color:var(--fg-1);
  border-left:1px solid var(--line); padding-left:14px; margin-top:2px; margin-bottom:8px;
}
.sidenote .sidenote-num{color:var(--amber); margin-right:4px}
@media (max-width:680px){
  .sidenote{
    float:none; width:auto; margin:12px 0; padding:8px 12px; border-left:2px solid var(--amber);
    background:var(--bg-1); display:block;
  }
}

/* ---- outline sections (org wraps each headline in div.outline-N) ---- */
.outline-2, .outline-3{margin-bottom:8px}

/* ---- postamble / footer ---- */
#gs-footer{
  width:min(calc(100% - 64px), calc(var(--main-w) + var(--rail-w) + var(--rail-gap)));
  margin:0 auto; padding:24px 0 48px;
  font-family:var(--font-mono); font-size:11px; color:var(--fg-2);
  border-top:1px solid var(--line); text-transform:uppercase; letter-spacing:0.06em;
}
@media (max-width:680px){#gs-footer{width:calc(100% - 64px); margin:0 32px}}

/* ---- listing pages (blog / wiki / projects index) ---- */
.gs-list{list-style:none; padding:0; margin:0}
.gs-list li{
  border:1px solid var(--line); padding:14px 16px; margin-bottom:10px;
  display:flex; justify-content:space-between; align-items:baseline; gap:16px;
}
.gs-list li:hover{border-color:var(--line-strong); background:var(--bg-1)}
.gs-list .gs-date{font-family:var(--font-mono); font-size:12px; color:var(--fg-2); white-space:nowrap}

/* ---- compact plain index list (dense listings, e.g. wiki category pages) ---- */
.gs-plain-list{list-style:none; padding:0; margin:0 0 8px 0; columns:2; column-gap:32px}
.gs-plain-list li{padding:3px 0; break-inside:avoid}
.gs-plain-list a{color:var(--fg-1); border-bottom:1px solid transparent}
.gs-plain-list a:hover{color:var(--blue); border-bottom-color:var(--blue)}
@media (max-width:680px){.gs-plain-list{columns:1}}

/* ---- badges / tags (status, never color-alone: glyph+word+hue) ---- */
.gs-badge{
  display:inline-flex; align-items:center; gap:6px; font-family:var(--font-mono);
  font-size:11px; text-transform:uppercase; letter-spacing:0.06em;
  padding:2px 8px; border:1px solid var(--line-strong); background:var(--bg-1); color:var(--fg-1);
}
.gs-badge:before{content:"●"; font-size:8px}
.gs-badge.gs-ok{color:var(--sage); border-color:var(--sage)}
.gs-badge.gs-warn{color:var(--amber); border-color:var(--amber)}
.gs-badge.gs-err{color:var(--rust); border-color:var(--rust)}
.gs-tag{
  display:inline-block; font-family:var(--font-mono); font-size:11px; color:var(--fg-1);
  border:1px solid var(--line); padding:1px 7px; margin:0 4px 4px 0; text-transform:uppercase;
}

/* ---- command line ---- */
.gs-cli{
  font-family:var(--font-mono); font-size:13px; background:var(--bg-1);
  border:1px solid var(--line); padding:14px 18px; margin:20px 0; color:var(--fg-0);
}
.gs-cli .gs-cli-line{display:block; margin:2px 0}
.gs-cli .gs-cli-prompt{color:var(--sage); margin-right:8px}
.gs-cli .gs-cli-out{color:var(--fg-1)}

/* ---- notebook cell (literate-programming walkthrough) ---- */
.gs-nb{margin:28px 0}
.gs-nb-cell{display:grid; grid-template-columns:28px 1fr; gap:0 16px; margin-bottom:2px}
.gs-nb-num{
  font-family:var(--font-mono); font-size:11px; color:var(--fg-2);
  padding-top:10px; text-align:right;
}
.gs-nb-body{border:1px solid var(--line); background:var(--bg-1)}
.gs-nb-prose{padding:12px 16px; color:var(--fg-0)}
.gs-nb-prose p{margin:0}
.gs-nb-code{border-top:1px solid var(--line); background:var(--bg-0)}
.gs-nb-code pre{margin:0; border:none; background:none}
.gs-nb-out{
  border-top:1px solid var(--line); padding:10px 16px; font-family:var(--font-mono);
  font-size:13px; color:var(--sage);
}
.gs-nb-out:before{content:"OUT ▸ "; color:var(--fg-2)}

/* ---- corner ticks / hazard stripe (Expanse motifs, alert-only) ---- */
.gs-corner-ticks{position:relative}
.gs-corner-ticks:before, .gs-corner-ticks:after{
  content:""; position:absolute; width:10px; height:10px; border:1px solid var(--rust);
}
.gs-corner-ticks:before{top:-1px; left:-1px; border-right:none; border-bottom:none}
.gs-corner-ticks:after{bottom:-1px; right:-1px; border-left:none; border-top:none}
.gs-hazard{
  background:repeating-linear-gradient(135deg, var(--rust) 0 10px, var(--bg-1) 10px 20px);
  height:6px; margin:0 0 -1px;
}

/* ---- tabs ---- */
.gs-tabs{margin:24px 0}
.gs-tablist{display:flex; gap:2px; border-bottom:1px solid var(--line)}
.gs-tab{
  font-family:var(--font-mono); font-size:12px; text-transform:uppercase; letter-spacing:0.06em;
  padding:8px 16px; color:var(--fg-1); border:1px solid var(--line); border-bottom:none;
  background:var(--bg-1); cursor:pointer;
}
.gs-tab:focus-visible{outline:2px solid var(--blue); outline-offset:2px}
.gs-tab[aria-selected="true"]{color:var(--blue); background:var(--bg-0); border-color:var(--line-strong)}
.gs-tabpanel{border:1px solid var(--line); border-top:none; padding:16px; background:var(--bg-0)}

/* ---- progress / spinner ---- */
.gs-progress{height:6px; background:var(--bg-0); border:1px solid var(--line); margin:12px 0}
.gs-progress-bar{height:100%; background:var(--blue)}
.gs-spinner{
  display:inline-block; width:14px; height:14px; border:2px solid var(--line-strong);
  border-top-color:var(--blue); border-radius:50%; animation:gs-spin 0.6s linear infinite; vertical-align:-2px;
}
@keyframes gs-spin{to{transform:rotate(360deg)}}

/* ---- checkbox / radio / switch ---- */
.gs-field-row{display:flex; align-items:center; gap:10px; margin:10px 0; font-family:var(--font-mono); font-size:13px; color:var(--fg-0)}
.gs-checkbox, .gs-radio{
  width:16px; height:16px; border:1px solid var(--line-strong); background:var(--bg-0);
  display:inline-flex; align-items:center; justify-content:center; flex:none; cursor:pointer;
}
.gs-checkbox:focus-visible, .gs-radio:focus-visible, .gs-switch:focus-visible{outline:2px solid var(--blue); outline-offset:2px}
.gs-radio{border-radius:50%}
.gs-checkbox.gs-checked:after{content:"✕"; color:var(--blue); font-size:11px}
.gs-radio.gs-checked:after{content:""; width:8px; height:8px; background:var(--blue); border-radius:50%}
.gs-switch{
  width:34px; height:18px; border:1px solid var(--line-strong); border-radius:9px; background:var(--bg-0);
  position:relative; flex:none; cursor:pointer;
}
.gs-switch:after{
  content:""; position:absolute; top:1px; left:1px; width:14px; height:14px; border-radius:50%; background:var(--fg-1);
}
.gs-switch.gs-on{background:var(--blue); border-color:var(--blue)}
.gs-switch.gs-on:after{left:15px; background:var(--bg-0)}

/* ---- tooltip / dialog ---- */
.gs-tooltip-wrap{position:relative; display:inline-block; border-bottom:1px dotted var(--fg-2); cursor:help}
.gs-tooltip-wrap .gs-tooltip{
  position:absolute; bottom:calc(100% + 8px); left:0; white-space:nowrap;
  font-family:var(--font-mono); font-size:11px; background:var(--bg-2); color:var(--fg-0);
  border:1px solid var(--line-strong); padding:6px 10px; display:none; z-index:5;
}
.gs-tooltip-wrap:hover .gs-tooltip{display:block}
.gs-dialog{border:1px solid var(--line-strong); background:var(--bg-1); box-shadow:2px 2px 0 var(--line-strong); margin:24px 0}
.gs-dialog-header{padding:10px 16px; border-bottom:1px solid var(--line); font-family:var(--font-mono); font-size:11px; text-transform:uppercase; letter-spacing:0.1em; color:var(--fg-1); display:flex; justify-content:space-between}
.gs-dialog-body{padding:16px}

/* ---- icon button ---- */
.gs-icon-btn{
  display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px;
  border:1px solid var(--line-strong); border-radius:2px; background:var(--bg-0); color:var(--fg-1);
  cursor:pointer; font-family:var(--font-mono); font-size:14px;
}
.gs-icon-btn:hover{border-color:var(--blue); color:var(--blue)}
.gs-icon-btn:focus-visible{outline:2px solid var(--blue); outline-offset:2px}

/* ---- telemetry card (Panel + key/value rows) ---- */
.gs-kv{width:100%; border-collapse:collapse; font-family:var(--font-mono); font-size:13px}
.gs-kv tr{border-bottom:1px solid var(--line)}
.gs-kv tr:last-child{border-bottom:none}
.gs-kv td{padding:8px 0; vertical-align:middle}
.gs-kv td:first-child{color:var(--fg-1); text-transform:uppercase; font-size:11px; letter-spacing:0.06em; width:34%}
.gs-kv td:nth-child(2){color:var(--fg-0); text-align:right; width:20%; white-space:nowrap}
.gs-kv td:last-child{width:46%; padding-left:16px}
.gs-kv .gs-kv-alert td:nth-child(2){color:var(--rust)}
.gs-kv-bar{height:6px; background:var(--bg-0); border:1px solid var(--line)}
.gs-kv-bar-fill{height:100%; background:var(--blue)}
.gs-kv-alert .gs-kv-bar-fill{background:var(--rust)}

/* ---- form field (Input / Select) ---- */
.gs-field{margin:14px 0}
.gs-field label{display:block; font-family:var(--font-mono); font-size:11px; text-transform:uppercase; letter-spacing:0.06em; color:var(--fg-1); margin-bottom:4px}
.gs-field input, .gs-field select{
  width:100%; background:var(--bg-0); border:1px solid var(--line); color:var(--fg-0);
  font-family:var(--font-mono); font-size:14px; padding:8px 10px; border-radius:2px;
}
.gs-field input:focus, .gs-field select:focus{outline:2px solid var(--blue); outline-offset:2px; border-color:var(--blue)}

/* ---- panel (schematic-block container) ---- */
.gs-panel{border:1px solid var(--line); background:var(--bg-1); margin:24px 0}
.gs-panel-header{
  padding:10px 16px; border-bottom:1px solid var(--line);
  font-family:var(--font-mono); font-size:11px; text-transform:uppercase;
  letter-spacing:0.1em; color:var(--fg-1);
}
.gs-panel-body{padding:16px}
.gs-panel-body p:last-child{margin-bottom:0}

/* ---- buttons ---- */
.gs-btn{
  display:inline-flex; align-items:center; gap:8px; font-family:var(--font-mono);
  font-size:12px; text-transform:uppercase; letter-spacing:0.06em;
  padding:9px 16px; border:1px solid var(--line-strong); border-radius:2px;
  background:var(--bg-0); color:var(--fg-0); cursor:pointer; text-decoration:none;
}
.gs-btn-primary{
  background:var(--blue); color:var(--bg-0); border-color:var(--blue);
  box-shadow:2px 2px 0 var(--line-strong);
}
.gs-btn-primary:hover{background:var(--blue-strong); border-color:var(--blue-strong); color:var(--bg-0)}
.gs-btn-primary:active{transform:translate(2px,2px); box-shadow:0 0 0 var(--line-strong)}
.gs-btn-secondary:hover{border-color:var(--fg-1); background:var(--bg-1)}
.gs-btn-secondary:active{transform:translate(1px,1px)}
.gs-btn-row{display:flex; gap:12px; flex-wrap:wrap; margin:20px 0}
.gs-btn{appearance:none; font:inherit}
.gs-btn:focus-visible{outline:2px solid var(--blue); outline-offset:2px}
.gs-btn:disabled{opacity:0.5; cursor:default}

/* ---- figure with FIG caption frame (numbered, matches Figure component) ---- */
.gs-figure{border:1px solid var(--line); background:var(--bg-1); margin:24px 0; padding:16px}
.gs-figure .gs-figure-frame{
  border:1px dashed var(--line-strong); background:var(--bg-0); min-height:180px;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-mono); font-size:12px; color:var(--fg-2); text-transform:uppercase; letter-spacing:0.04em;
}
.gs-figure figcaption{
  font-family:var(--font-mono); font-size:12px; color:var(--fg-1); margin-top:10px;
  text-transform:uppercase; letter-spacing:0.04em;
}
.gs-figure figcaption b{color:var(--amber)}

/* ---- small caps (acronyms / unit-like tokens) ---- */
.gs-smallcaps{font-variant-caps:all-small-caps; letter-spacing:0.02em}

/* ---- link-type indicators: never rely on color alone, vary underline + a suffix glyph ---- */
#content a[href^="http"]{border-bottom-style:dashed}
#content a[href^="http"]:after{content:"↗"; font-size:0.7em; margin-left:2px; vertical-align:super}
#content a[href^="#"]{border-bottom-style:dotted}
#content a:not([href^="http"])[href$=".html"], #content a:not([href^="http"])[href*=".html#"]{border-bottom-style:solid}

/* ---- collapsible sections ---- */
details.gs-collapse{border:1px solid var(--line); background:var(--bg-1); margin:20px 0}
details.gs-collapse summary{
  cursor:pointer; padding:10px 16px; font-family:var(--font-mono); font-size:12px;
  text-transform:uppercase; letter-spacing:0.06em; color:var(--fg-1); list-style:none;
}
details.gs-collapse summary::-webkit-details-marker{display:none}
details.gs-collapse summary:before{content:"▸ "; color:var(--blue)}
details.gs-collapse[open] summary{border-bottom:1px solid var(--line)}
details.gs-collapse[open] summary:before{content:"▾ "}
details.gs-collapse > *:not(summary){padding:14px 16px; margin:0}
details.gs-collapse pre{margin:0; border:none}

/* ---- epigraph (indented italic quote, no border/background — distinct from the accent pull-quote) ---- */
blockquote.gs-epigraph{
  border-left:none; background:none; margin:32px 0 32px 40px; padding:0;
  font-style:italic; color:var(--fg-1); font-size:15px;
}
blockquote.gs-epigraph footer, blockquote.gs-epigraph cite{
  display:block; margin-top:8px; font-family:var(--font-mono); font-style:normal;
  font-size:11px; text-transform:uppercase; letter-spacing:0.06em; color:var(--fg-2);
}
blockquote.gs-epigraph footer:before, blockquote.gs-epigraph cite:before{content:"— "}

/* ---- link-hover popup preview (fetched excerpt of the linked page) ---- */
.gs-popup{
  position:absolute; z-index:50; width:320px; max-width:calc(100vw - 32px);
  background:var(--bg-2); border:1px solid var(--line-strong); box-shadow:2px 2px 0 var(--line-strong);
  padding:12px 14px; font-size:13px; opacity:0; pointer-events:none; transition:opacity 90ms linear;
}
.gs-popup.gs-popup-visible{opacity:1}
.gs-popup-title{font-family:var(--font-mono); font-size:11px; text-transform:uppercase; letter-spacing:0.06em; color:var(--blue); margin-bottom:6px}
.gs-popup-excerpt{color:var(--fg-1); line-height:1.45}

/* ---- calculators: index grid ---- */
.gs-calc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:16px}
.gs-calc-card{display:block;border:1px solid var(--line);background:var(--bg-1);text-decoration:none}
.gs-calc-card:hover{border-color:var(--line-strong);background:var(--bg-2)}
.gs-calc-thumb{display:block;border-bottom:1px solid var(--line)}
.gs-calc-title{display:block;padding:12px 14px;font-family:var(--font-sans);font-size:14px;color:var(--fg-0);line-height:1.35}

/* ---- calculators: form controls ---- */
.gs-calc{border:1px solid var(--line); background:var(--bg-1); padding:20px 24px; margin:24px 0}
.gs-calc label{display:block; font-family:var(--font-mono); font-size:11px; text-transform:uppercase; letter-spacing:0.06em; color:var(--fg-1); margin:14px 0 4px}
.gs-calc input, .gs-calc select{
  width:100%; background:var(--bg-0); border:1px solid var(--line); color:var(--fg-0);
  font-family:var(--font-mono); font-size:14px; padding:8px 10px; border-radius:2px;
}
.gs-calc input:focus, .gs-calc select:focus{outline:2px solid var(--blue); outline-offset:2px; border-color:var(--blue)}
.gs-calc .gs-result{
  margin-top:16px; padding:12px 14px; background:var(--bg-0); border:1px solid var(--line-strong);
  font-family:var(--font-mono); font-size:14px; color:var(--blue-strong);
}

/* ==================================================================
   gwern.net-inspired additions: page metadata block, backlinks panel,
   popups v2 (pinnable/draggable/recursive), link-type icons,
   collapsible sections, sortable tables, image lightbox, reading
   progress. All progressive enhancement wired by site.js + publish.el.
   ================================================================== */

/* ---- page metadata block (created/modified/status/certainty/reading) ---- */
.gs-meta{
  display:flex; flex-wrap:wrap; align-items:center; gap:4px 22px;
  border:1px solid var(--line); background:var(--bg-1);
  padding:8px 14px; margin:0 0 36px;
  font-family:var(--font-mono); font-size:12px; color:var(--fg-0);
}
.gs-meta-item{display:inline-flex; align-items:center; gap:7px; white-space:nowrap}
.gs-meta-k{font-size:10px; text-transform:uppercase; letter-spacing:0.08em; color:var(--fg-2)}
.gs-meta .gs-badge{font-size:10px; padding:1px 6px}
.gs-meta a{color:var(--fg-1); border-bottom:1px dotted var(--fg-2)}
.gs-meta a:hover{color:var(--blue); border-bottom-color:var(--blue)}

/* ---- link-type icons (set by site.js; beats the generic ↗ rule above) ---- */
#content a[data-gs-icon]:after{
  content:attr(data-gs-icon); font-family:var(--font-mono); font-size:8px;
  letter-spacing:0.04em; vertical-align:super; margin-left:3px; color:var(--fg-2);
}
#content a[data-gs-icon]:hover:after{color:inherit}

/* ---- collapsible outline sections (click a heading to fold) ---- */
.gs-fold > h2, .gs-fold > h3{cursor:pointer}
.gs-fold > h2:before, .gs-fold > h3:before{
  content:"▾"; font-family:var(--font-mono); font-size:0.7em;
  color:var(--fg-2); margin-right:10px; vertical-align:2px;
}
.gs-fold > h2:hover:before, .gs-fold > h3:hover:before{color:var(--blue)}
.gs-fold > h2:focus-visible, .gs-fold > h3:focus-visible{outline:2px solid var(--blue); outline-offset:2px}
.gs-folded > h2:before, .gs-folded > h3:before{content:"▸"; color:var(--blue)}
.gs-folded > h2:after, .gs-folded > h3:after{
  content:"collapsed"; font-family:var(--font-mono); font-size:10px; font-weight:400;
  text-transform:uppercase; letter-spacing:0.08em; color:var(--fg-2); float:right;
}
.gs-folded > *:not(h2):not(h3){display:none}

/* ---- sortable tables (click a header to sort) ---- */
th.gs-sortable{cursor:pointer; user-select:none}
th.gs-sortable:after{content:"⇅"; margin-left:8px; color:var(--fg-2); font-size:10px}
th.gs-sortable:hover{color:var(--blue)}
th.gs-sortable[data-gs-sort="asc"]:after{content:"▴"; color:var(--blue)}
th.gs-sortable[data-gs-sort="desc"]:after{content:"▾"; color:var(--blue)}

/* ---- image lightbox ---- */
img.gs-zoomable{cursor:zoom-in}
#gs-lightbox{
  position:fixed; inset:0; z-index:80; background:rgba(10,13,18,0.85);
  display:flex; align-items:center; justify-content:center; padding:32px; cursor:zoom-out;
}
#gs-lightbox figure{margin:0; max-width:100%; max-height:100%; display:flex; flex-direction:column; align-items:center; gap:10px}
#gs-lightbox img{max-width:100%; max-height:calc(100vh - 120px); border:1px solid var(--line-strong); background:var(--bg-0)}
#gs-lightbox figcaption{font-family:var(--font-mono); font-size:12px; color:#c8cfda; text-transform:uppercase; letter-spacing:0.04em}

/* ---- reading progress + back-to-top ---- */
#gs-progress-bar{position:fixed; top:0; left:0; height:2px; width:0; background:var(--blue); z-index:90}
#gs-top-btn{
  position:fixed; right:20px; bottom:20px; z-index:40;
  font-family:var(--font-mono); font-size:11px; letter-spacing:0.08em;
  padding:9px 12px; border:1px solid var(--line-strong); border-radius:2px;
  background:var(--bg-1); color:var(--fg-1); cursor:pointer;
  opacity:0; visibility:hidden; transition:opacity 90ms linear;
}
#gs-top-btn.gs-visible{opacity:1; visibility:visible}
#gs-top-btn:hover{border-color:var(--blue); color:var(--blue)}
#gs-top-btn:focus-visible{outline:2px solid var(--blue); outline-offset:2px}

/* ---- backlinks panel ("what links here", emitted by publish.el) ---- */
#gs-backlinks{margin-top:56px}
.gs-backlinks-list{list-style:none; margin:0; padding:0; font-family:var(--font-mono); font-size:13px}
.gs-backlinks-list li{
  display:flex; justify-content:space-between; align-items:baseline; gap:16px;
  padding:7px 0; border-bottom:1px solid var(--line);
}
.gs-backlinks-list li:last-child{border-bottom:none}
.gs-backlink-src{font-size:10px; text-transform:uppercase; letter-spacing:0.08em; color:var(--fg-2); white-space:nowrap}

/* ---- footnote <-> sidenote cross-highlight ---- */
sup.footref.gs-hl a{color:var(--bg-0); background:var(--amber)}
.sidenote.gs-hl{border-left-color:var(--amber); background:var(--bg-1); color:var(--fg-0)}
@media (max-width:680px){.sidenote.gs-hl{outline:1px solid var(--amber)}}

/* ---- traditional endnotes (opt-in via "FOOTNOTE:" prefix, or a
   bibliography routed to "footnote" mode) -- see publish.el ---- */
#footnotes{margin-top:56px; padding-top:24px; border-top:1px solid var(--line)}
.footnotes-heading{
  font-family:var(--font-mono); font-size:11px; text-transform:uppercase;
  letter-spacing:0.1em; color:var(--fg-1); border:none; margin:0 0 14px; padding:0;
}
#text-footnotes{font-size:14px}
#text-footnotes .footdef{display:flex; gap:8px; margin-bottom:10px; align-items:baseline}
#text-footnotes .footnum, #text-footnotes sup{font-family:var(--font-mono); color:var(--amber); flex:none}
#text-footnotes .footpara{margin:0}
#text-footnotes .footpara p{margin:0}

/* ---- popups v2: pinnable, draggable, recursive, scrollable ---- */
.gs-popup{padding:0; width:380px}
.gs-popup.gs-popup-visible{pointer-events:auto}
.gs-popup-bar{
  display:flex; justify-content:space-between; align-items:center; gap:12px;
  padding:5px 6px 5px 12px; border-bottom:1px solid var(--line); background:var(--bg-1);
}
.gs-popup[data-pinned]{border-color:var(--blue); box-shadow:3px 3px 0 var(--line-strong)}
.gs-popup[data-pinned] .gs-popup-bar{cursor:move}
.gs-popup-bar-title{
  font-family:var(--font-mono); font-size:10px; text-transform:uppercase; letter-spacing:0.08em;
  color:var(--blue); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.gs-popup-btns{display:flex; gap:2px; flex:none}
.gs-popup-btn{
  font-family:var(--font-mono); font-size:9px; text-transform:uppercase; letter-spacing:0.06em;
  background:none; border:1px solid transparent; color:var(--fg-2); cursor:pointer; padding:3px 6px;
}
.gs-popup-btn:hover{color:var(--blue); border-color:var(--line-strong)}
.gs-popup-btn:focus-visible{outline:2px solid var(--blue); outline-offset:1px}
.gs-popup-body{padding:12px 14px; max-height:320px; overflow:auto; color:var(--fg-1); font-size:13px; line-height:1.5}
.gs-popup-body p{margin:0 0 10px}
.gs-popup-body p:last-child{margin-bottom:0}
.gs-popup-body h2, .gs-popup-body h3{font-size:14px; margin:0 0 10px; padding-bottom:6px; border-bottom:1px solid var(--line)}
.gs-popup-body h2:before, .gs-popup-body h2:after, .gs-popup-body h3:before, .gs-popup-body h3:after{content:none}
.gs-popup-body pre{font-size:11px; padding:10px 12px; margin:10px 0}
.gs-popup-body table{font-size:11px; margin:10px 0}
.gs-popup-body .sidenote{float:none; width:auto; margin:0; padding:0; border:none; font-size:12px; display:inline}
.gs-popup-body .gs-popup-loading{font-family:var(--font-mono); font-size:11px; text-transform:uppercase; color:var(--fg-2)}
.gs-popup-body .gs-panel, .gs-popup-body .gs-figure, .gs-popup-body .gs-meta{margin:10px 0}
.gs-popup-body .gs-meta{gap:4px 14px; padding:6px 10px}

/* ---- external annotation popups (Wikipedia / GitHub / YouTube / arXiv / HN / SO) ---- */
.gs-popup-desc{font-family:var(--font-mono); font-size:11px; color:var(--fg-2); text-transform:uppercase; letter-spacing:0.06em; margin:0 0 8px}
.gs-popup-kv{display:flex; justify-content:space-between; align-items:baseline; gap:12px; font-family:var(--font-mono); font-size:12px; padding:4px 0; border-bottom:1px solid var(--line)}
.gs-popup-kv:last-child{border-bottom:none}
.gs-popup-kv span:first-child{color:var(--fg-2); text-transform:uppercase; font-size:10px; letter-spacing:0.08em}
.gs-popup-thumb{float:right; width:72px; margin:0 0 8px 10px; border:1px solid var(--line-strong)}
.gs-popup-sect{margin:12px 0 6px; padding-top:8px; border-top:1px solid var(--line); color:var(--amber)}
.gs-popup-readme{
  font-family:var(--font-mono); font-size:11px; line-height:1.55; color:var(--fg-1);
  white-space:pre-wrap; word-break:break-word; background:var(--bg-0);
  border:1px solid var(--line); padding:10px 12px;
}