/* Shared site header — the tinted-stripe topbar used across every page. Extracted from
the main page's .head + the asset page's .topbar so subdirectory pages stop drifting
from the app's own header. Every page that loads this stylesheet also loads header.js
(which renders the shared markup + wires the theme/share chips). Body-level styles stay
with each page — this file is JUST the header.
Naming: everything hangs off .appbar (a new class, not .head, so prose pages that still
use prose.css's simple .head — a wordmark + back link — keep working). The name reads
as "the site's app-bar" rather than a page-specific header.
── STRUCTURE ────────────────────────────────────────────────────────────────────────────
── LAYOUT RULES ─────────────────────────────────────────────────────────────────────────
· sticky top-0, z-index 50 — stays reachable through the page
· ::before extends a tinted stripe to the viewport edges (100vw) so scrolled rows
disappear under a coloured band, not the plain page ground
· align-items:center so the two-line brand column and the one-row chip cluster share
the same vertical middle
· The chips share ONE geometry: 30×30 for icon-only, 30px tall + auto-width for text
chips. Border, background, radius identical, so the row reads as one lockup.
*/
/* .appbar is now a wrap-capable flex row: brand + right chip cluster sit on row 1, the
optional search input drops onto row 2 (100% width, right-aligned) when the page
populates #cs-appbar-search. Empty search row = zero height, no visual change. */
.appbar{position:sticky;top:0;z-index:50;background:transparent;
display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 12px;
margin:0 -18px;padding:14px 18px 10px;border-bottom:1px solid transparent}
/* Row 2 carries the SUBTITLE on the left + the SEARCH chip on the right. The subtitle used
to be stacked under the wordmark on row 1; moving it here lets row 1 be a single tall
line (wordmark height matching the chip height) and reuses the row-2 space the search
already occupies. When the search mount is empty (subdirectory pages that don't render
a search chip), the subtitle still shows on its own left-aligned line. */
.appbar-searchrow{flex:0 0 100%;display:flex;justify-content:space-between;align-items:center;
gap:8px 12px;min-height:0}
.appbar-searchrow #cs-appbar-search{display:flex;justify-content:flex-end;align-items:center}
.appbar-searchrow #cs-appbar-search:empty{display:none}
.appbar.stuck{border-bottom-color:var(--line)}
.appbar::before{content:'';position:absolute;left:50%;transform:translateX(-50%);
top:0;bottom:0;width:100vw;background:var(--head-bg, var(--surface));z-index:-1}
.appbar-brand{display:flex;flex-direction:column;gap:2px;min-width:0}
.appbar-mark{color:var(--ink);font-size:26px;font-weight:600;letter-spacing:-.015em;
text-decoration:none;line-height:1.1}
.appbar-mark:hover{text-decoration:none;color:var(--ink)}
.appbar-mark .dot{color:var(--acid)}
.appbar-sub{color:var(--mut);font-size:12px;line-height:1.3;white-space:nowrap;
overflow:hidden;text-overflow:ellipsis;min-width:0;flex:1 1 auto}
.appbar-right{display:flex;align-items:center;gap:6px;flex:0 0 auto}
/* Chip — the shared geometry every right-cluster element uses. Icon-only chips are
30×30 squares; text chips add horizontal padding but keep the 30px height. */
.appbar-right .chip{box-sizing:border-box;height:30px;min-width:30px;padding:0 10px;
display:inline-flex;align-items:center;justify-content:center;gap:6px;
background:var(--surface);color:var(--mut);border:1px solid var(--line);
border-radius:8px;font:inherit;font-size:12px;line-height:1;
cursor:pointer;text-decoration:none;white-space:nowrap}
.appbar-right .chip:hover{color:var(--acid);border-color:var(--acid);text-decoration:none}
.appbar-right .chip svg{display:block}
/* Icon-only chip — square, no padding. */
.appbar-right .chip-icon{width:30px;padding:0}
/* Theme toggle inherits chip geometry; the SVG (in header.js) carries the moon/sun state. */
.appbar-right .chip-theme{color:var(--mut)}
.appbar-right .chip-theme .th-moon,
.appbar-right .chip-theme .th-sun{transform-origin:12px 12px;
transition:opacity .18s ease, filter .18s ease, color .18s ease}
.appbar-right .chip-theme .th-slash{color:var(--mut);opacity:.65}
.appbar-right .chip-theme .th-moon-cut{fill:var(--surface)}
:root:not([data-theme="light"]) .appbar-right .chip-theme .th-moon{color:#F6F1E1;
filter:drop-shadow(0 0 5px rgba(246,241,225,.85)) drop-shadow(0 0 2px rgba(246,241,225,.65))}
:root:not([data-theme="light"]) .appbar-right .chip-theme .th-sun{color:var(--ink);opacity:.75}
:root[data-theme="light"] .appbar-right .chip-theme .th-sun{color:#FFA836;
filter:drop-shadow(0 0 5px rgba(255,168,54,.85)) drop-shadow(0 0 2px rgba(255,168,54,.65))}
:root[data-theme="light"] .appbar-right .chip-theme .th-moon{color:var(--ink);opacity:.75}
/* Search row — one universal shape. Full-width band under the chip cluster; the input
lives at the right edge, always OPEN (never a collapsed magnifier). The `.gcur` scope
was making the input a 26–30px icon-only pill on every viewport including desktop —
which read as a random floating button; the earlier "expand on focus" trick was too
subtle here now that search has its own row and doesn't need to hide.
Selector wins by specificity + !important against `.gcur input.search.tabsearch` from
index.html's inline block. Border uses the acid variable with a matching outer glow so
the input reads as the site's own — same shape the target screenshot shows. */
.appbar-searchrow .tabfind{flex:0 0 auto;display:inline-flex;justify-content:flex-end;position:relative;
height:32px;padding:0;margin:0}
.appbar-searchrow input.search.tabsearch,
.appbar-searchrow .tabfind > input{
box-sizing:border-box;
width:170px !important;max-width:170px !important;height:32px;
padding:0 12px !important;font-size:12.5px;line-height:1;color:var(--ink) !important;
background:var(--surface) !important;background-image:none !important;
border:1px solid var(--acid) !important;border-radius:8px;
box-shadow:0 0 0 2px rgba(214,255,61,0.12), 0 0 10px rgba(214,255,61,0.08);
cursor:text !important;transition:width .18s ease, max-width .18s ease, box-shadow .18s ease}
.appbar-searchrow input.search.tabsearch::placeholder{color:var(--mut) !important;opacity:.85}
.appbar-searchrow input.search.tabsearch:focus{
outline:none;
box-shadow:0 0 0 2px rgba(214,255,61,0.25), 0 0 14px rgba(214,255,61,0.16)}
/* Hide the ::after magnifier glyph — the field is already open, no icon needed. */
.appbar-searchrow .tabfind::after{display:none !important}
/* Below 640px: collapse the search to a 32x32 magnifier tile; expand back to a full input
when it gets focus or carries text. The expanded state is a right-aligned OVERLAY
(position:absolute anchored to the .tabfind wrapper) so growing the input never pushes
the subtitle around on row 2 — was previously an in-flow expansion that squeezed the
subtitle onto two lines. Wrapper keeps a 32px slot so nothing else reflows either. */
@media (max-width:640px){
.appbar-searchrow .tabfind{position:relative;width:32px;height:32px;flex:0 0 32px}
.appbar-searchrow input.search.tabsearch,
.appbar-searchrow .tabfind > input{
width:32px !important;max-width:32px !important;
padding:0 !important;color:transparent !important;cursor:pointer !important;
box-shadow:none;
background-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230AC18E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='16.5' y1='16.5' x2='21' y2='21'/%3E%3C/svg%3E") !important;
background-repeat:no-repeat !important;background-position:center !important;background-size:16px !important}
.appbar-searchrow input.search.tabsearch::placeholder{color:transparent !important}
.appbar-searchrow input.search.tabsearch:focus,
.appbar-searchrow input.search.tabsearch:not(:placeholder-shown){
position:absolute;right:0;top:0;z-index:20;
width:220px !important;max-width:220px !important;padding:0 12px !important;
color:var(--ink) !important;cursor:text !important;background-image:none !important;
background-color:var(--surface) !important;
box-shadow:0 0 0 2px rgba(214,255,61,0.25), 0 0 14px rgba(214,255,61,0.16)}
.appbar-searchrow input.search.tabsearch:focus::placeholder{color:var(--mut) !important;opacity:.85}
}
/* Below 640px: drop the social chips (X · Telegram). The footer of every page still carries
both channels, and freeing that ~72px lets the currency picker + theme + profile breathe on
phone widths where the header was starting to feel like a chip pile. */
@media (max-width:640px){
.appbar-right .chip-social{display:none}
}
/* Very narrow phones — brand column shrinks, no other change to the search behaviour. */
@media (max-width:520px){
.appbar{padding:12px 14px 8px;margin:0 -14px}
.appbar-mark{font-size:23px}
.appbar-sub{font-size:11.5px}
.appbar-right .chip{font-size:11.5px}
}
/* Mobile-safe table wrapper: any table wrapped in scrolls horizontally
inside its own container instead of pushing the page body wider than the viewport. Article
tables on journal posts run seven to nine columns and are far wider than a phone screen —
without this, a mobile reader sees the whole page shifted right of the fold. */
.tblwrap{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
@media (max-width:640px){.tblwrap table{font-size:12px}}
/* Short cells (dates, figures, headings — header.js marks them .nw) never break: on a phone
"2013-11" split at its hyphen and every row went two lines tall. The table scrolls sideways in
its wrapper instead. Long prose cells still wrap. */
.tblwrap .nw{white-space:nowrap}
/* ── Article TOC ─────────────────────────────────────────────────────────────────────────
Auto-generated by header.js on journal posts that have four or more
sections.
The desktop copy is a fixed sticky card at the right edge; below 1280px it collapses
in favour of the two floating arrow buttons at bottom-right, which step through the
sections one at a time. Labels default to h2 text, override with data-toc-label="…"
on any h2 when the full heading is too long for the 210px card. */
article > h2{
scroll-margin-top:calc(var(--cs-hdr,64px) + 24px); /* clears the appbar (measured by header.js) on anchor jumps */
font-size:22px; /* base h2 is 17px — that reads as body text when the reader lands from a TOC click */
font-weight:700;
color:var(--ink); /* explicit; do not inherit a dimmed context */
margin:44px 0 12px;
padding-top:14px;
border-top:1px solid var(--line); /* a landing pad — the eye sees "new section starts here" */
}
article > h2:first-of-type{
border-top:0; padding-top:0; margin-top:20px; /* first section already has the lede as its own break */
}
/* Article column (journal and blog posts on sidebar pages). From 1024px the text, charts,
tables and panels share ONE column: charts used to run the full 1240px while the text stopped
at 62ch, which left the prose as a strip beside empty space. Text grows to 17px so the wider
measure still reads comfortably. */
/* The column fills the page up to 980px, and its type, headings and chart heights are sized
from the column's own width (container units), so a wider window gets a bigger article rather
than wider margins. Text runs 17px at 740px up to 22.5px at the 980px cap: ~95-105
characters a line in Ubuntu across the range. */
:root{--toc-w:220px}
@media (min-width:1680px){:root{--toc-w:250px}}
@media (min-width:1024px){
body:has(.cs-sidebar) article{max-width:980px;margin-left:auto;margin-right:auto;container-type:inline-size}
body:has(.cs-sidebar) article :is(p,ul,ol,.lede,.pull,.note){max-width:none}
body:has(.cs-sidebar) article > :is(p,ul,ol),
body:has(.cs-sidebar) article .posthead .lede{font-size:clamp(17px,2.3cqi,23px);line-height:1.7}
body:has(.cs-sidebar) article h1{font-size:clamp(26px,3.6cqi,36px)}
body:has(.cs-sidebar) article > h2{font-size:clamp(22px,3cqi,30px)}
body:has(.cs-sidebar) article > h3{font-size:clamp(17px,2.4cqi,23px)}
body:has(.cs-sidebar) article .chartbox{height:clamp(320px,40cqi,460px)}
body:has(.cs-sidebar) article .chartbox.tall{height:clamp(400px,50cqi,560px)}
/* Epoch colour bar under a post's lede (.spine + .spinelab year labels): full column width,
thickness and labels scaling with it like the text. */
body:has(.cs-sidebar) article :is(.spine,.spinelab){max-width:none}
body:has(.cs-sidebar) article .spine{height:clamp(8px,1.1cqi,12px);border-radius:6px}
body:has(.cs-sidebar) article .spinelab{font-size:clamp(11px,1.35cqi,14px);margin-top:4px}
}
/* Contents rail. header.js wraps the article and its TOC in .cs-article-grid; from 1280px the
TOC is a sticky rail beside the column (it used to be pinned to the window's right edge,
far from the text it indexes). Below 1280px it is hidden and the arrows take over. */
.cs-toc{display:none;font-size:13px;line-height:1.5}
.cs-toc-label{font:600 10px/1 ui-monospace,monospace;letter-spacing:.08em;
text-transform:uppercase;color:var(--dim);margin:2px 0 10px}
.cs-toc a{display:block;padding:5px 10px;margin-left:-10px;border-radius:6px;color:var(--mut);text-decoration:none}
.cs-toc a:hover{color:var(--ink);background:var(--surface)}
.cs-toc a.on{color:var(--acid,#d6ff3d)} /* fallback matches the site's --acid on the dark theme */
@media (min-width:1280px){
/* An explicit track: the article is a size container, so an auto-sized track would shrink it
to nothing. */
.cs-article-grid{display:grid;
grid-template-columns:min(980px,calc(100% - var(--toc-w) - 56px)) var(--toc-w);
gap:0 56px;justify-content:center}
body:has(.cs-sidebar) .cs-article-grid > article{grid-column:1;grid-row:1;min-width:0;margin:0}
.cs-article-grid > .cs-toc{display:block;grid-column:2;grid-row:1;align-self:start;
position:sticky;top:calc(var(--cs-hdr,64px) + 28px);
max-height:calc(100vh - var(--cs-hdr,64px) - 56px);overflow-y:auto;
padding-left:16px;border-left:1px solid var(--line);font-size:13px}
}
@media (min-width:1680px){.cs-article-grid > .cs-toc{font-size:14px}}
/* Mobile section-arrows. Two circular buttons at bottom-right, stepping through h2s.
Hidden on desktop where the sidebar TOC already covers navigation. The disabled state
fades the button and blocks the click so end-of-list taps don't feel broken. */
.cs-toc-arrows{position:fixed;right:14px;top:74px;display:flex;flex-direction:column;
gap:14px;z-index:5} /* top:74px sits below the sticky appbar; was bottom:20px */
.cs-toc-arrow{width:36px;height:36px;background:none;border:0;color:var(--ink);
font:600 26px/1 ui-monospace,monospace;cursor:pointer;padding:0;
display:flex;align-items:center;justify-content:center}
.cs-toc-arrow:hover,.cs-toc-arrow:active{color:var(--acid,#2bb6a8)}
.cs-toc-arrow[disabled]{opacity:.25;cursor:default;pointer-events:none}
@media (min-width:1280px){.cs-toc-arrows{display:none}}