/* Spare Cycles — "Datasheet" theme. Light/dark follow the OS (prefers-color-scheme). */

/* ---------- Fonts (self-hosted, IBM Plex, SIL OFL — see fonts/OFL.txt) ---------- */
@font-face{font-family:"IBM Plex Sans";font-weight:400;font-style:normal;font-display:swap;src:url(../fonts/ibm-plex-sans-400-normal.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-weight:400;font-style:italic;font-display:swap;src:url(../fonts/ibm-plex-sans-400-italic.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-weight:500;font-style:normal;font-display:swap;src:url(../fonts/ibm-plex-sans-500-normal.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-weight:600;font-style:normal;font-display:swap;src:url(../fonts/ibm-plex-sans-600-normal.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Sans Condensed";font-weight:700;font-style:normal;font-display:swap;src:url(../fonts/ibm-plex-sans-condensed-700-normal.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-weight:400;font-style:normal;font-display:swap;src:url(../fonts/ibm-plex-mono-400-normal.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-weight:500;font-style:normal;font-display:swap;src:url(../fonts/ibm-plex-mono-500-normal.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-weight:600;font-style:normal;font-display:swap;src:url(../fonts/ibm-plex-mono-600-normal.woff2) format("woff2")}

/* ---------- Tokens ---------- */
:root{
  --bg:#f4f5f7; --panel:#ffffff; --ink:#11151b; --muted:#58616e; --rule:#cbd1d9; --dot:#d9dde3;
  --accent:#1f47d1; --onAccent:#ffffff; --shadow:#d5dae2; --code:#eef1f6;
  --ok:#11793a; --okBg:#e2f3e7; --bad:#bd2417; --badBg:#fbe6e3; --warn:#8a5d00; --warnBg:#fbefd4; --neu:#5b6370; --neuBg:#eceef2;
  --f-sans:var(--gh-font-body, "IBM Plex Sans"), ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-cond:var(--gh-font-heading, "IBM Plex Sans Condensed"), "IBM Plex Sans", ui-sans-serif, sans-serif;
  --f-mono:"IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --gutter:24px; --player-h:44px; --content:700px; --wide:1040px;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#0b1424; --panel:#0f1b2f; --ink:#e2e9f4; --muted:#8797ad; --rule:#243651; --dot:#16243a;
    --accent:#84a8ff; --onAccent:#0b1424; --shadow:#060c17; --code:#0a1220;
    --ok:#5fdc8c; --okBg:#0f2e1f; --bad:#ff8273; --badBg:#3a1714; --warn:#f1c255; --warnBg:#33280c; --neu:#98a5b6; --neuBg:#18253a;
    color-scheme:dark;
  }
}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-padding-top:130px}
body{margin:0; font-family:var(--f-sans); font-size:15px; line-height:1.5; color:var(--ink);
  background-color:var(--bg); background-image:radial-gradient(var(--dot) 1px, transparent 1.2px); background-size:18px 18px;
  padding-bottom:var(--player-h); overflow-x:hidden}
body:not(:has(#player:not([hidden]))){padding-bottom:0}
a{color:inherit}
img,svg,video{max-width:100%}
svg{flex:none}
button{cursor:pointer; background:none; border:0; padding:0; color:inherit; font:inherit}
h1,h2,h3,h4{text-wrap:balance; margin:0}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.mono{font-family:var(--f-mono)}
.site{max-width:1180px; margin:0 auto}

/* ---------- Chat bar (permanent) ---------- */
.chatbar{position:sticky; top:0; z-index:50; background:var(--panel); border-bottom:2px solid var(--ink)}
.cb-in{max-width:1180px; margin:0 auto; padding:10px var(--gutter); display:grid; grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"ask chips" "ans ans"; gap:10px 16px; align-items:center}
.cb-ask{grid-area:ask; display:flex; align-items:center; min-width:0; height:38px; border:1.5px solid var(--ink); background:var(--bg)}
.cb-label{align-self:stretch; display:flex; align-items:center; padding:0 10px; background:var(--ink); color:var(--bg); font:500 11px/1 var(--f-mono); letter-spacing:.1em}
.cb-input{flex:1; min-width:0; height:100%; border:0; background:transparent; color:inherit; padding:0 10px; font:13.5px var(--f-mono); outline:none}
.cb-input::placeholder{color:var(--muted); opacity:1}
.cb-go{align-self:stretch; width:38px; display:grid; place-items:center; background:var(--accent); color:var(--onAccent)}
.cb-go svg{width:16px; height:16px}
.cb-go:disabled{opacity:.55; cursor:progress}
.cb-chips{grid-area:chips; display:flex; gap:6px; min-width:0}
.chip{white-space:nowrap; flex:none; font:12px var(--f-mono); padding:6px 9px; border:1px solid var(--rule); background:var(--bg); color:var(--ink)}
.chip:hover{border-color:var(--ink)}
.chip[aria-current="true"]{border-color:var(--accent); color:var(--accent); box-shadow:inset 0 -2px 0 var(--accent)}
.cb-answer{grid-area:ans; position:relative; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:2px 16px; align-items:center; min-width:0; border-top:1px dashed var(--rule); padding-top:8px}
.cb-q{grid-column:1 / -1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font:11px var(--f-mono); letter-spacing:.06em; text-transform:uppercase; color:var(--muted)}
.cb-q::before{content:"Q › "; color:var(--accent)}
.cb-text{margin:0; min-width:0; font-size:15px; max-height:4.6em; overflow:auto; overscroll-behavior:contain}
.cb-intro, .cb-wait{color:var(--muted)}
.cb-err{color:var(--bad)}
.cb-meta{display:flex; align-items:center; gap:10px; justify-self:end; flex-wrap:wrap; justify-content:flex-end; max-width:min(460px, 50vw); font:11px var(--f-mono); letter-spacing:.04em; text-transform:uppercase; color:var(--muted)}
.cb-status{display:inline-flex; align-items:center; gap:8px}
.cores{display:inline-flex; gap:3px}
.cores i{display:block; width:8px; height:8px; border:1px solid var(--muted)}
.cores.busy i{background:var(--accent); border-color:var(--accent); animation:core .5s steps(2) infinite}
.cores.busy i:nth-child(2){animation-delay:.25s}
@keyframes core{50%{opacity:.25}}
.caret{display:inline-block; width:.5em; height:1em; vertical-align:-.12em; margin-left:2px; background:currentColor; animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:0}}
.badge{display:inline-flex; align-items:center; gap:6px; white-space:nowrap; font:600 11px var(--f-mono); letter-spacing:.06em; text-transform:uppercase; padding:4px 8px; border:1.5px solid currentColor}
.badge svg{width:13px; height:13px}
button.badge:hover{filter:brightness(.95)}
.badge.ok{color:var(--ok); background:var(--okBg)}
.badge.bad{color:var(--bad); background:var(--badBg)}
.badge.none, .badge.chk{color:var(--neu); background:var(--neuBg)}
.spin{width:10px; height:10px; border-radius:50%; border:2px solid currentColor; border-right-color:transparent; animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

.pop{position:absolute; right:0; top:calc(100% + 10px); width:min(440px, 100%); z-index:60; color:var(--ink); background:var(--panel); border:1.5px solid var(--ink); box-shadow:6px 6px 0 var(--shadow); max-height:min(60vh, 520px); overflow:auto; text-transform:none; letter-spacing:0}
.pop-h{display:flex; justify-content:space-between; align-items:baseline; gap:12px; flex-wrap:wrap; padding:10px 14px; border-bottom:1.5px solid var(--ink); background:var(--bg)}
.pop-h strong{font-size:14px}
.pop-h span{font:11px var(--f-mono); color:var(--muted); text-transform:uppercase; letter-spacing:.05em}
.pop-body{padding:12px 14px; display:grid; gap:12px}
.pop-g{display:grid; gap:8px}
.pop-gt{font:10.5px var(--f-mono); letter-spacing:.1em; text-transform:uppercase; color:var(--muted); border-bottom:1px solid var(--rule); padding-bottom:4px}
.pop ul{list-style:none; padding:0; margin:0; display:grid; gap:8px}
.cl{display:grid; grid-template-columns:auto minmax(0,1fr); gap:10px; align-items:start}
.cl p{margin:0}
.cl-ic{display:grid; place-items:center; width:18px; height:18px; margin-top:2px}
.cl-ic svg{width:12px; height:12px}
.cl-ok .cl-ic{color:var(--ok); background:var(--okBg)}
.cl-no .cl-ic{color:var(--warn); background:var(--warnBg)}
.cl-bad .cl-ic{color:var(--bad); background:var(--badBg)}
.cl-c{font-size:14px; font-weight:500}
.cl-s{color:var(--muted); font:11.5px/1.45 var(--f-mono)}
.cl-s b{font-weight:600; color:var(--ink)}
.pop-f{margin:0; padding:10px 14px; border-top:1px dashed var(--rule); font-size:12px; color:var(--muted)}
.pop-empty{margin:0; padding:12px 14px; font-size:14px; color:var(--muted)}

/* ---------- Masthead ---------- */
.mast{padding:30px var(--gutter) 0}
.mast-top{display:flex; justify-content:space-between; align-items:flex-end; gap:16px; flex-wrap:wrap}
.kicker{font:11px var(--f-mono); letter-spacing:.1em; color:var(--muted); text-transform:uppercase}
.kicker a{text-decoration:none; color:var(--accent)}
.brand{font:700 40px/1 var(--f-cond); letter-spacing:.01em; text-transform:uppercase; text-decoration:none; display:block; margin-top:6px}
.tag{margin:8px 0 0; font-size:15px; color:var(--muted); font-style:italic}
.socials{display:flex; align-items:center; gap:6px}
.soc{display:grid; place-items:center; width:32px; height:32px; border:1.5px solid var(--ink); background:var(--panel); text-decoration:none}
.soc:hover{background:var(--ink); color:var(--bg)}
.soc svg{width:16px; height:16px}
.nav{display:flex; align-items:stretch; margin-top:20px; border-top:2px solid var(--ink); border-bottom:1px solid var(--ink); font:12px var(--f-mono); letter-spacing:.08em; text-transform:uppercase; overflow-x:auto; scrollbar-width:none}
.nav::-webkit-scrollbar{display:none}
.nav a, .nav-btn{padding:8px 14px; text-decoration:none; border-right:1px solid var(--rule); white-space:nowrap; display:inline-flex; align-items:center; gap:6px; text-transform:uppercase; letter-spacing:.08em; font:inherit}
.nav a[aria-current]{background:var(--ink); color:var(--bg)}
.nav a:hover, .nav-btn:hover{background:var(--panel)}
.nav a[aria-current]:hover{background:var(--ink)}
.nav-spacer{flex:1}
.nav-btn{border-right:0; border-left:1px solid var(--rule)}
.nav-btn svg{width:13px; height:13px}

/* ---------- Main / home ---------- */
.main{padding:28px var(--gutter) 40px; display:grid; gap:28px; min-width:0}
.sec-h{display:flex; align-items:center; gap:10px; font:600 12px var(--f-mono); letter-spacing:.1em; text-transform:uppercase}
.sec-h::after{content:""; flex:1; height:1px; background:var(--ink)}
.spec{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); border:1.5px solid var(--ink); background:var(--panel); margin:0}
.spec div{padding:10px 12px; border-right:1px solid var(--rule); min-width:0}
.spec div:last-child{border-right:0}
.spec dt{font:10.5px var(--f-mono); letter-spacing:.1em; text-transform:uppercase; color:var(--muted)}
.spec dd{margin:2px 0 0; font-weight:500}
.ptable{border:1.5px solid var(--ink); background:var(--panel)}
.ptable .th, .ptable .row{display:grid; grid-template-columns:86px minmax(0,1fr) 110px 100px 64px; gap:16px; padding:12px 14px; align-items:baseline}
.ptable .th{font:10.5px var(--f-mono); letter-spacing:.1em; text-transform:uppercase; color:var(--muted); border-bottom:1.5px solid var(--ink); padding-block:7px}
.ptable .row{border-bottom:1px solid var(--rule); text-decoration:none}
.ptable .row:last-child{border-bottom:0}
.ptable .row:hover{background:var(--bg)}
.ptable .row:hover .ttl b{color:var(--accent)}
.ptable-empty{margin:0; padding:14px; color:var(--muted)}
.no, .rtag, .rdate, .rmin{font:12px var(--f-mono); color:var(--muted)}
.no{color:var(--accent); font-weight:500}
.rtag{text-transform:uppercase; letter-spacing:.06em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.ttl{min-width:0}
.ttl b{display:block; font-size:17px; font-weight:600; line-height:1.3}
.ttl small{display:block; color:var(--muted); font-size:14px; margin-top:3px}
.pagination{display:flex; justify-content:space-between; align-items:center; font:12px var(--f-mono); text-transform:uppercase; letter-spacing:.06em; color:var(--muted)}
.pagination a{color:var(--ink); text-decoration:none; border:1.5px solid var(--ink); padding:6px 10px; background:var(--panel)}

/* ---------- Post ---------- */
.post-h{display:grid; gap:12px; max-width:760px}
.post-h .kicker{color:var(--accent)}
.post-h h1{font:700 44px/1.05 var(--f-cond); letter-spacing:-.005em}
.post-h .excerpt{margin:0; font-size:18px; color:var(--muted)}
.post-h .excerpt a{color:var(--accent)}
.post-meta{display:flex; flex-wrap:wrap; border:1.5px solid var(--ink); background:var(--panel); width:max-content; max-width:100%}
.post-meta span{padding:6px 10px; border-right:1px solid var(--rule); font:11px var(--f-mono); text-transform:uppercase; letter-spacing:.06em}
.post-meta span:last-child{border-right:0}
article.post, article.page{display:grid; gap:28px}
.fig, .prose .kg-image-card, .prose .kg-gallery-card, .prose .kg-embed-card{margin:0; border:1.5px solid var(--ink); background:var(--panel)}
.fig img, .prose .kg-image-card img{display:block; width:100%; height:auto}
.fig figcaption, .prose figcaption{border-top:1px solid var(--rule); padding:8px 12px; font:11.5px var(--f-mono); color:var(--muted)}
.prose{max-width:var(--content); display:grid; gap:18px; counter-reset:sec fig; font-size:16.5px; line-height:1.65; min-width:0}
.prose > *{margin:0; min-width:0}
.prose h2{counter-increment:sec; font-size:22px; font-weight:600; display:flex; gap:12px; align-items:baseline; padding-top:8px; border-top:1px solid var(--ink); margin-top:10px}
.prose h2::before{content:counter(sec) "."; font:14px var(--f-mono); color:var(--accent)}
.prose h3{font-size:18px; font-weight:600}
.prose a{color:var(--accent)}
.prose ul, .prose ol{padding-left:22px; display:grid; gap:4px}
.prose hr{border:0; border-top:1px dashed var(--rule); width:100%}
.prose figure:not(.code-block):has(figcaption){counter-increment:fig}
.prose figure:not(.code-block) > figcaption::before{content:"FIG. " counter(fig) " · "; color:var(--accent)}
.prose blockquote:not(.kg-blockquote-alt){border:1.5px solid var(--ink); padding:12px 14px; background:var(--panel); display:grid; grid-template-columns:auto 1fr; gap:12px; margin:0}
.prose blockquote:not(.kg-blockquote-alt)::before{content:"NOTE"; font:11px var(--f-mono); letter-spacing:.1em; background:var(--ink); color:var(--bg); padding:2px 6px; height:max-content; margin-top:3px}
.prose blockquote p{margin:0}
.prose :not(pre) > code{font:.88em var(--f-mono); background:var(--code); border:1px solid var(--rule); padding:.05em .35em}
.prose pre, .code-block pre{margin:0; overflow-x:auto; padding:14px 16px; font:13px/1.6 var(--f-mono); background:var(--code); color:var(--ink)}
.code-block{border:1.5px solid var(--ink); background:var(--code); min-width:0}
.code-h{display:flex; justify-content:space-between; gap:10px; padding:6px 12px; border-bottom:1px solid var(--rule); font:11px var(--f-mono); text-transform:uppercase; letter-spacing:.08em; color:var(--muted); background:var(--panel)}
.code-h button{font:inherit; text-transform:uppercase; letter-spacing:inherit; color:var(--accent)}
.prose table{border-collapse:collapse; border:1.5px solid var(--ink); background:var(--panel); font-size:14px; display:block; overflow-x:auto}
.prose th, .prose td{border:1px solid var(--rule); padding:6px 10px; text-align:left}
.prose th{font:10.5px var(--f-mono); letter-spacing:.1em; text-transform:uppercase; color:var(--muted)}
/* Ghost card widths (required by gscan) */
.prose .kg-width-wide{width:min(var(--wide), calc(100vw - 2 * var(--gutter))); max-width:none; margin-inline:calc((var(--content) - min(var(--wide), calc(100vw - 2 * var(--gutter)))) / 2)}
.prose .kg-width-full{width:calc(100vw - 2 * var(--gutter)); max-width:none; margin-inline:calc((var(--content) - (100vw - 2 * var(--gutter))) / 2)}
@media (max-width: 760px){ .prose .kg-width-wide, .prose .kg-width-full{width:100%; margin-inline:0} }
.prose .kg-bookmark-card a{color:inherit}
.prose .kg-audio-card{border:1.5px solid var(--ink)}
.gh-comments, #ghost-comments-root{max-width:var(--content)}

/* ---------- Footer ---------- */
.foot{margin:0 var(--gutter); padding:18px 0 28px; border-top:2px solid var(--ink); display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; align-items:center; font:11.5px var(--f-mono); text-transform:uppercase; letter-spacing:.06em; color:var(--muted)}
.foot-links{display:flex; gap:16px; flex-wrap:wrap}
.foot-links a{display:inline-flex; align-items:center; gap:6px; text-decoration:none; color:var(--ink)}
.foot-links svg{width:14px; height:14px}

/* ---------- Player (permanent) ---------- */
.player{position:fixed; left:0; right:0; bottom:0; z-index:50; height:var(--player-h); display:flex; align-items:center; gap:14px; padding:0 16px 0 0;
  background:var(--ink); color:var(--bg); font:12px var(--f-mono);
  --pl-muted:color-mix(in srgb, var(--bg) 60%, var(--ink)); --pl-track:color-mix(in srgb, var(--bg) 25%, var(--ink))}
.player[hidden]{display:none}
.pl-art{flex:none; align-self:stretch; display:flex; align-items:center; gap:8px; padding:0 12px; background:var(--accent); color:var(--onAccent); font-size:11px; letter-spacing:.08em}
.pl-ctl{display:flex; align-items:center; gap:4px}
.pl-ctl button, .pl-vol button{display:grid; place-items:center}
.pl-ctl button{width:28px; height:28px; border:1px solid var(--pl-track)}
.pl-ctl button:hover:not(:disabled){border-color:var(--bg)}
.pl-ctl button:disabled, .pl-vol button:disabled{opacity:.4; cursor:default}
.pl-ctl svg{width:14px; height:14px}
.pl-play .i-pause, .player.playing .pl-play .i-play{display:none}
.player.playing .pl-play .i-pause{display:block}
.pl-vol .i-mute, .player.muted .pl-vol .i-vol{display:none}
.player.muted .pl-vol .i-mute{display:block}
.pl-info{min-width:0; flex:1; display:grid; grid-template-columns:minmax(0,auto) minmax(120px,1fr); align-items:center; gap:14px}
.pl-line{display:flex; gap:8px; align-items:baseline; min-width:0; white-space:nowrap; overflow:hidden}
.pl-title{overflow:hidden; text-overflow:ellipsis; text-transform:uppercase; letter-spacing:.04em}
.pl-artist{color:var(--pl-muted); overflow:hidden; text-overflow:ellipsis}
.pl-prog{display:flex; align-items:center; gap:8px; min-width:0}
.pl-bar{flex:1; height:6px; position:relative; cursor:pointer; background:repeating-linear-gradient(90deg, var(--pl-track) 0 1px, transparent 1px 8px); border-bottom:1px solid var(--pl-track)}
.pl-bar span{position:absolute; inset:0 auto 0 0; width:0; background:currentColor}
.pl-time{font-variant-numeric:tabular-nums; white-space:nowrap; color:var(--pl-muted)}
.pl-vol{display:flex; align-items:center; gap:6px}
.pl-vol button svg{width:16px; height:16px}
.pl-vol input{width:80px; accent-color:var(--bg)}
.eq{display:inline-flex; align-items:flex-end; gap:2px; height:14px}
.eq i{display:block; width:3px; height:30%; background:currentColor}
.player.playing .eq i{animation:eq .9s ease-in-out infinite alternate}
.eq i:nth-child(2){animation-delay:-.3s}.eq i:nth-child(3){animation-delay:-.6s}.eq i:nth-child(4){animation-delay:-.15s}
@keyframes eq{0%{height:20%}100%{height:100%}}


/* ---------- Subscribe dialog (Portal does the submit) ---------- */
.sub{padding:0; width:min(460px, calc(100vw - 32px)); border:1.5px solid var(--ink); background:var(--panel); color:var(--ink); box-shadow:8px 8px 0 var(--shadow)}
.sub::backdrop{background:color-mix(in srgb, var(--bg) 55%, transparent); backdrop-filter:blur(3px)}
.sub-h{display:flex; justify-content:space-between; align-items:stretch; padding:0; height:34px; background:var(--ink); color:var(--bg); font:500 11px var(--f-mono); letter-spacing:.1em; text-transform:uppercase}
.sub-tabs{display:flex}
.sub-tabs button{padding:0 14px; color:var(--bg); font:inherit; letter-spacing:inherit; text-transform:inherit; opacity:.6; border-right:1px solid color-mix(in srgb, var(--bg) 25%, var(--ink))}
.sub-tabs button[aria-selected="true"]{opacity:1; background:var(--accent); color:var(--onAccent)}
.sub-tabs button:hover{opacity:1}
.sub-form[hidden]{display:none}
.sub-x{width:34px; height:34px; display:grid; place-items:center; color:var(--bg)}
.sub-x svg{width:14px; height:14px}
.sub-x:hover{background:var(--accent); color:var(--onAccent)}
.sub-form{padding:20px 20px 16px; display:grid; gap:14px}
.sub-form h2{font:700 28px/1.05 var(--f-cond); text-transform:uppercase; letter-spacing:.01em}
.sub-lede{margin:0; color:var(--muted)}
.sub-fields{display:grid; border:1.5px solid var(--ink)}
.sub-field{display:grid; grid-template-columns:72px minmax(0,1fr); align-items:stretch}
.sub-field + .sub-field{border-top:1px solid var(--rule)}
.sub-field span{display:flex; align-items:center; padding:0 10px; background:var(--bg); border-right:1px solid var(--rule); font:10.5px var(--f-mono); letter-spacing:.1em; text-transform:uppercase; color:var(--muted)}
.sub-field input{min-width:0; height:40px; border:0; padding:0 12px; background:var(--panel); color:var(--ink); font:14px var(--f-mono); outline:none}
.sub-field input::placeholder{color:var(--muted); opacity:.8}
.sub-field:focus-within span{color:var(--accent)}
.sub-field:focus-within{box-shadow:inset 3px 0 0 var(--accent)}
.sub-go{height:42px; background:var(--accent); color:var(--onAccent); font:600 12px var(--f-mono); letter-spacing:.1em; text-transform:uppercase; display:flex; align-items:center; justify-content:center; gap:8px}
.sub-go:hover{filter:brightness(1.08)}
.sub-go-busy, .sub-msg{display:none}
.sub-form.loading .sub-go-idle{display:none}
.sub-form.loading .sub-go-busy{display:inline-flex; align-items:center; gap:8px}
.sub-form.loading .sub-go{cursor:progress; opacity:.85}
.sub-msg{margin:0; padding:8px 10px; font:12px/1.45 var(--f-mono); border:1.5px solid currentColor}
.sub-form.success .sub-ok{display:block; color:var(--ok); background:var(--okBg)}
.sub-form.success .sub-fields, .sub-form.success .sub-go{display:none}
.sub-form.error .sub-err:not(:empty){display:block; color:var(--bad); background:var(--badBg)}
.sub-f{margin:4px -20px -16px; padding:10px 20px; border-top:1px dashed var(--rule); font:12px var(--f-mono); color:var(--muted)}
.sub-f button{color:var(--accent); text-decoration:underline; font:inherit}


/* ---------- Search dialog (replaces Ghost's Sodo Search popup) ---------- */
.srch{padding:0; margin:12vh auto auto; width:min(640px, calc(100vw - 32px)); max-height:70vh; border:1.5px solid var(--ink); background:var(--panel); color:var(--ink); box-shadow:8px 8px 0 var(--shadow); display:none; flex-direction:column}
.srch[open]{display:flex}
.srch::backdrop{background:color-mix(in srgb, var(--bg) 55%, transparent); backdrop-filter:blur(3px)}
.srch-bar{display:flex; align-items:stretch; height:44px; border-bottom:1.5px solid var(--ink); flex:none}
.srch-label{display:flex; align-items:center; padding:0 12px; background:var(--ink); color:var(--bg); font:500 11px var(--f-mono); letter-spacing:.1em}
.srch-input{flex:1; min-width:0; border:0; background:var(--bg); color:var(--ink); padding:0 12px; font:15px var(--f-mono); outline:none}
.srch-input::-webkit-search-cancel-button{display:none}
.srch-input::placeholder{color:var(--muted); opacity:1}
.srch-x{width:44px; display:grid; place-items:center; border-left:1px solid var(--rule)}
.srch-x svg{width:14px; height:14px}
.srch-x:hover{background:var(--ink); color:var(--bg)}
.srch-body{overflow:auto; min-height:0}
.srch-g{padding:8px 0}
.srch-gt{padding:4px 14px; font:10.5px var(--f-mono); letter-spacing:.1em; text-transform:uppercase; color:var(--muted)}
.srch-r{display:grid; grid-template-columns:86px minmax(0,1fr); gap:2px 14px; padding:9px 14px; text-decoration:none; border-left:3px solid transparent}
.srch-r[aria-selected="true"]{background:var(--bg); border-left-color:var(--accent)}
.srch-r[aria-selected="true"] .srch-t{color:var(--accent)}
.srch-no{font:12px var(--f-mono); color:var(--accent); padding-top:2px}
.srch-t{font-weight:600; line-height:1.3}
.srch-t mark{background:color-mix(in srgb, var(--accent) 18%, transparent); color:inherit; padding:0 1px}
.srch-x2{grid-column:2; color:var(--muted); font-size:13.5px; line-height:1.4; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical}
.srch-empty{padding:18px 14px; display:grid; gap:10px; color:var(--muted)}
.srch-empty p{margin:0}
.srch-ask{justify-self:start; display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border:1.5px solid var(--ink); background:var(--bg); color:var(--ink); font:12px var(--f-mono); text-align:left}
.srch-ask b{color:var(--accent); font-weight:500}
.srch-ask:hover, .srch-ask[aria-selected="true"]{border-color:var(--accent); box-shadow:inset 3px 0 0 var(--accent)}
.srch-f{flex:none; display:flex; justify-content:space-between; gap:12px; padding:7px 14px; border-top:1px dashed var(--rule); font:11px var(--f-mono); color:var(--muted)}
.srch-f kbd{font:inherit; border:1px solid var(--rule); padding:0 4px; margin-right:2px; background:var(--bg)}
@media (max-width: 600px){ .srch{margin-top:8px} .srch-r{grid-template-columns:minmax(0,1fr)} .srch-no{display:none} .srch-x2{grid-column:1} .srch-f span:first-child{display:none} }

/* ---------- Responsive ---------- */
@media (max-width: 980px){
  :root{--gutter:16px}
  .cb-in{grid-template-columns:minmax(0,1fr); grid-template-areas:"ask" "chips" "ans"}
  .cb-chips{overflow-x:auto; scrollbar-width:none}
  .cb-chips::-webkit-scrollbar{display:none}
  .ptable .th{display:none}
  .ptable .row{grid-template-columns:auto auto minmax(0,1fr); gap:4px 12px}
  .ttl{grid-column:1 / -1; order:-1}
  .rmin{text-align:right}
}
@media (max-width: 600px){
  .cb-in{gap:8px; padding-block:8px}
  .cb-label{display:none}
  .cb-answer{grid-template-columns:minmax(0,1fr)}
  .cb-meta{justify-self:start; justify-content:flex-start; max-width:none}
  .pop{left:0; right:0; width:auto}
  .brand{font-size:30px}
  .spec{grid-template-columns:repeat(2, minmax(0,1fr))}
  .spec div:nth-child(2){border-right:0}
  .spec div:nth-child(-n+2){border-bottom:1px solid var(--rule)}
  .post-h h1{font-size:32px}
  .prose{font-size:16px}
  .pl-info{grid-template-columns:minmax(0,1fr)}
  .pl-prog, .pl-artist, .pl-vol input{display:none}
  .pl-art .pl-trk{display:none}
  .player{gap:10px; padding-right:10px}
}
@media (prefers-reduced-motion: reduce){
  *{animation:none !important; transition:none !important}
}