/* 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 — pill switch. Overrides chip-icon geometry (which would draw it as a 30-px
square) with a proper 48×26 pill carrying a sliding thumb. Dark state: thumb on the LEFT
over a night sky with a glowing moon on a deep-blue badge; light state: thumb slides to
the RIGHT over a day sky with a warm sun on a soft cream badge. Icons cross-fade so the
mid-transition never reads as an empty ring. Pill background is a subtle vertical gradient
so the sky has some atmosphere rather than a flat panel. */
.appbar-right .chip-theme{
width:48px; height:26px; padding:0; border-radius:999px;
background:linear-gradient(180deg, #1c2a52 0%, #0b1230 100%);
border:1px solid #1a2648;
position:relative; overflow:hidden; cursor:pointer;
transition:background .18s ease, border-color .18s ease}
.appbar-right .chip-theme:hover{border-color:#31447a}
/* Day sky — a light blue gradient with a touch of warmth near the horizon (bottom).
Border picks up the mid-blue so the pill has a defined edge on light backgrounds. */
:root[data-theme="light"] .appbar-right .chip-theme{
background:linear-gradient(180deg, #A8D2F5 0%, #F0E1B8 100%);
border-color:#7DABD4}
:root[data-theme="light"] .appbar-right .chip-theme:hover{border-color:#4A82B5}
/* The thumb is the moving disc — the moon's or sun's "badge". `left` transitions instead of
`transform` so the moon/sun SVG inside stays crisp (transform on the parent would blur the
child at sub-pixel offsets on some browsers). Sized to leave a hair of pill background
around it. Dark state: near-black indigo so the pale moon reads brightly against it. */
.appbar-right .chip-theme .th-thumb{
position:absolute; top:2px; left:2px; width:20px; height:20px;
border-radius:50%; background:#0a1024;
display:flex; align-items:center; justify-content:center;
transition:left .22s cubic-bezier(0.4,0,0.2,1), background .18s ease;
box-shadow:0 1px 3px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,255,255,.04)}
:root[data-theme="light"] .appbar-right .chip-theme .th-thumb{
left:calc(100% - 22px);
background:#FFF6E0;
box-shadow:0 1px 3px rgba(60,45,20,.35), inset 0 0 0 1px rgba(255,180,80,.15)}
/* Moon + sun stack in the same slot; only one is opaque per state. Same pale-cream moon and
warm-amber sun as before — the surrounding badge does the atmospheric work now. Sun is a
touch larger than the moon so its rays reach out to the badge's rim and it reads as a
proper sun rather than a small dot inside a cream disc. Moon stays smaller because its
solid crescent already fills its bounds. */
.appbar-right .chip-theme .th-thumb svg{
position:absolute; width:14px; height:14px;
transition:opacity .18s ease}
.appbar-right .chip-theme .th-thumb .th-sun{width:18px; height:18px}
.appbar-right .chip-theme .th-moon{
color:#F6F1E1; opacity:1;
filter:drop-shadow(0 0 4px rgba(246,241,225,.75))}
.appbar-right .chip-theme .th-sun{
color:#FFA836; opacity:0;
filter:drop-shadow(0 0 4px rgba(255,168,54,.75))}
:root[data-theme="light"] .appbar-right .chip-theme .th-moon{opacity:0}
:root[data-theme="light"] .appbar-right .chip-theme .th-sun{opacity:1}
/* 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}
}
/* Phones, app pages (the ranking, the asset app): one thin row. The wordmark and the subtitle
go — the bottom menu carries the way home — and the search tile sits at the right edge,
opening leftward over the row. Sidebar pages get their own one-row grid in style.css. */
@media (max-width:640px){
body:not(:has(.cs-sidebar)) .appbar{flex-wrap:nowrap;padding-top:8px;padding-bottom:8px}
body:not(:has(.cs-sidebar)) .appbar-brand,
body:not(:has(.cs-sidebar)) .appbar-sub{display:none}
body:not(:has(.cs-sidebar)) .appbar-right{order:1}
body:not(:has(.cs-sidebar)) .appbar-searchrow{order:2;flex:0 0 auto;margin-left:auto}
}
/* Bottom menu on every page that is not the app itself (header.js builds it) — the same four
buttons and geometry as the app's own bar, so it stays put from page to page. */
/* Folded descriptions (header.js, initFold): two lines and a More / Less button on phones. */
.foldbtn{display:none}
/* data-fold-wide folds on every screen (an asset's About); data-fold-lines folds by height. */
.fold[data-fold-wide]{position:relative;cursor:pointer}
.fold.folded[data-fold-lines]{display:block;-webkit-line-clamp:none;line-clamp:none;max-height:var(--fold-h,9em);overflow:hidden}
.fold.folded[data-fold-lines]::after{content:'';position:absolute;left:0;right:0;bottom:0;height:2.2em;pointer-events:none;
background:linear-gradient(to bottom,transparent,var(--bg))}
.fold[data-fold-wide] .foldbtn{display:inline;font:inherit;font-weight:600;color:var(--acid);background:none;border:0;padding:0 0 0 6px;margin:0;cursor:pointer}
.fold.folded[data-fold-wide] .foldbtn{position:absolute;right:0;bottom:0;z-index:1;padding-left:30px;background:linear-gradient(to right,transparent,var(--bg) 26px)}
.fold[data-fold-wide] .foldbtn::after{content:' ▾';font-size:.85em}
.fold[data-fold-wide]:not(.folded) .foldbtn::after{content:' ▴'}
/* Opened, a multi-paragraph text's Less sits on its own line under the last paragraph. */
.fold[data-fold-lines]:not(.folded) .foldbtn{display:block;padding:4px 0 0}
@media (max-width:720px){
.fold{position:relative;cursor:pointer}
.fold.folded{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden}
.fold .foldbtn{display:inline;font:inherit;font-weight:600;color:var(--acid);background:none;border:0;padding:0 0 0 6px;margin:0;cursor:pointer}
.fold.folded .foldbtn{position:absolute;right:0;bottom:0;padding-left:30px;background:linear-gradient(to right,transparent,var(--bg) 26px)}
/* A chevron says which way the text goes: down to open it, up to fold it back. */
.fold .foldbtn::after{content:' ▾';font-size:.85em}
.fold:not(.folded) .foldbtn::after{content:' ▴'}
}
.cs-botnav{display:none}
@media (max-width:720px){
.cs-botnav{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;
position:fixed;left:0;right:0;bottom:0;z-index:60;
background:var(--bg);border-top:1px solid var(--line);
padding:6px 8px calc(6px + env(safe-area-inset-bottom,0px))}
.cs-botnav .bnb{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
background:var(--surface);border:1px solid var(--line);border-radius:10px;
color:var(--mut);text-decoration:none;padding:8px 4px;min-height:52px;box-sizing:border-box}
.cs-botnav .bnb:hover{border-color:var(--dim);color:var(--ink);text-decoration:none}
.cs-botnav .bnl{font-size:12px;letter-spacing:.01em;line-height:1.15}
.cs-botnav .bnc{font-size:11px;color:var(--dim);line-height:1.1}
.cs-botnav .bnb.on{background:var(--surface2);border-color:var(--acid);color:var(--acid);
box-shadow:0 0 0 1px var(--acid) inset}
.cs-botnav .bnb.on .bnl{font-weight:600}
/* The page ends above the bar, footer included. */
body.cs-hasbot{padding-bottom:calc(72px + env(safe-area-inset-bottom,0px))}
}
/* 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}}
/* Short answer under a post's header: the question people search for, as a heading, and a
40-60 word answer. Inside a div (not a direct article > h2), so the contents rail skips it. */
article .answer{margin:20px 0 30px;padding:14px 18px 16px;border:1px solid var(--line);
border-left:3px solid var(--acid);border-radius:10px;background:var(--surface)}
article .answer h2{margin:0 0 6px;font-size:1.05em;line-height:1.35}
article .answer p{margin:0;line-height:1.65}
@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}}
/* CoinSpectrum Grade letters (.gr gr-App for A++, gr-Ap for A+). The light set is darker so every
letter keeps a 4.5:1 contrast on every light skin. */
.gr{font-weight:600;text-decoration:none}
.gr-App{color:#2fbf71}.gr-Ap{color:#3cc47c}.gr-A{color:#6cc24a}.gr-B{color:#b8c23a}.gr-C{color:#e0b13a}.gr-D{color:#e58a3a}.gr-E{color:#e0603a}.gr-F{color:#d64545}
:root[data-theme="light"] .gr-App{color:#0f6b3a}:root[data-theme="light"] .gr-Ap{color:#1c6d33}:root[data-theme="light"] .gr-A{color:#3d6a12}:root[data-theme="light"] .gr-B{color:#5f6400}
:root[data-theme="light"] .gr-C{color:#7a5a00}:root[data-theme="light"] .gr-D{color:#8f4a00}:root[data-theme="light"] .gr-E{color:#a3381a}:root[data-theme="light"] .gr-F{color:#ac2424}