/* Goobert's core components, on tokens.css. The one set of component rules for every surface: goobert.ai, the docs,
 * the API reference, server-rendered pages (login, recovery, accounts) and generated result pages. goobert.ai's own
 * css/site.css adds only the front page (the band's search, the session) and the explorer. Class names match the
 * sealed renderer (goobert/site/render.py), so markup moves between surfaces unchanged. The class catalogue, with
 * markup for each, is in README.md beside this file; the names are a contract.
 *
 * Link order: tokens.css, then this file, then a surface's own sheet. No component sets a colour, size or space that
 * is not a token.
 */

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { background: var(--field); -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100svh; display: flex; flex-direction: column;
  background: var(--field) var(--formwork); color: var(--ink);
  font: 400 var(--t-body)/1.6 var(--mono); font-variant-ligatures: none; font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}
main { flex: 1; }
a { color: inherit; text-decoration: underline; text-decoration-thickness: var(--hair); text-underline-offset: 3px; text-decoration-color: var(--ink-3); }
a:hover, a:focus-visible { background: var(--ink); color: var(--field); text-decoration: none; outline: none; }
::selection { background: var(--ink); color: var(--field); }
:focus-visible { outline: var(--stroke) solid var(--ink); outline-offset: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 0; }
.skip:focus { left: var(--side); top: var(--s-2); background: var(--ink); color: var(--field); padding: 6px 10px; z-index: 10; }
.label, .kind { margin: 0; font: 500 var(--t-label)/1.2 var(--mono); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--ink-3); }
.muted { color: var(--ink-3); }
.small { font-size: var(--t-small); }
.notation { font: 700 1em/1.2 var(--mono); letter-spacing: 0; white-space: nowrap; }
.empty { color: var(--ink-2); margin: 0; padding: 18px 0; }
.not-enough { color: var(--ink-2); font-style: italic; }

/* links on a black plate: green, inverting to green */
.marking a, .plate a, .profile a, .sealed-vector a { color: var(--glow); text-decoration-color: var(--glow-3); }
.marking a:hover, .marking a:focus-visible, .plate a:hover, .plate a:focus-visible, .profile a:hover, .profile a:focus-visible,
.sealed-vector a:hover, .sealed-vector a:focus-visible { background: var(--glow); color: var(--night); }
.marking a { text-decoration: none; }

/* ---- the shell: top bar, marking, foot ---- */
header.top { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--s-4); padding: var(--s-5) var(--side); font: 500 13px/1 var(--mono); }
.mark { display: inline-flex; align-items: center; gap: var(--s-3); justify-self: start; font: 800 17px/1 var(--mono); letter-spacing: 0.04em; text-transform: uppercase; text-decoration: none; }
.mark:hover, .mark:focus-visible { background: none; color: var(--ink); }
.mark i { width: 12px; height: 12px; background: var(--ink); display: inline-block; animation: watch var(--m-watch) steps(1) infinite; }
.mark-face { width: 28px; height: 28px; image-rendering: pixelated; display: block; }
@keyframes watch { 0%, 92% { opacity: 1; } 93%, 96% { opacity: 0; } 97% { opacity: 1; } }
header.top nav { display: flex; gap: 40px; }
header.top nav a { text-decoration: none; opacity: 0.66; }
header.top nav a:hover, header.top nav a:focus-visible { background: none; color: var(--ink); opacity: 1; }
header.top nav a[aria-current] { opacity: 1; text-decoration: underline; text-decoration-thickness: var(--stroke); text-underline-offset: 6px; text-decoration-color: var(--ink); }
.me { grid-column: -2; grid-row: 1; justify-self: end; display: inline-flex; align-items: center; gap: 10px; font-weight: 700; text-decoration: none; }
.me:hover, .me:focus-visible { background: none; color: var(--ink); }
.me:hover span { text-decoration: underline; }
.me b { background: var(--night); color: var(--glow); padding: var(--s-1) var(--s-2) 3px; font-size: var(--t-label); letter-spacing: 0.06em; border: var(--hair) solid var(--plate-edge); }
/* the night switch: a small square button at the end of the top bar (js/theme.js). Pressed = night. */
.theme-toggle { grid-column: -2; grid-row: 1; justify-self: end; width: var(--bar-h-small); height: var(--bar-h-small); padding: 0; border-width: var(--line); }
.theme-toggle::before { content: ""; width: 14px; height: 14px; border: var(--line) solid currentColor; border-left-width: 7px; }
.theme-toggle[aria-pressed="true"]::before { background: currentColor; }
header.top:has(> .theme-toggle) .me { margin-right: calc(var(--bar-h-small) + var(--s-4)); }
/* the end of the top bar: Install, then the night switch (pages/base.py, docs.py) */
header.top .top-end { grid-column: -2; grid-row: 1; justify-self: end; display: inline-flex; align-items: center; gap: var(--s-4); }
header.top .top-end .theme-toggle { grid-column: auto; grid-row: auto; }
header.top .top-install { text-decoration: none; }
header.top .top-install[aria-current] { background: var(--ink); color: var(--field); }
@media (max-width: 1180px) { header.top nav { gap: var(--s-5); } }
@media (max-width: 960px) { header.top { grid-template-columns: 1fr auto; padding-top: var(--s-4); padding-bottom: var(--s-3); row-gap: var(--s-3); } header.top nav { grid-column: 1 / -1; grid-row: 2; gap: var(--s-5); overflow-x: auto; } }
.marking { display: flex; justify-content: space-between; gap: 6px 24px; flex-wrap: wrap; background: var(--night); color: var(--glow); padding: 9px var(--side) 8px; font: 700 var(--t-label)/1.2 var(--mono); letter-spacing: 0.18em; text-transform: uppercase; border-block: var(--hair) solid var(--plate-edge); }
footer.foot { display: flex; justify-content: space-between; gap: var(--s-2) var(--s-6); flex-wrap: wrap; margin-top: var(--s-9); padding: var(--s-4) var(--side) 20px; border-top: var(--hair) solid var(--rule); font: 400 var(--t-small)/1.4 var(--mono); color: var(--ink-2); }
footer.foot b { font-weight: 700; color: var(--ink); }

/* ---- the dossier: meta line, heading in words, notation, lede, figures ---- */
.page { max-width: calc(var(--wide) + 2 * var(--side)); margin: 0 auto; padding: 0 var(--side); }
.dossier { padding: var(--s-7) 0 var(--s-6); }
.meta { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); margin: 0 0 var(--s-4); font: 500 var(--t-label)/1.2 var(--mono); letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-3); }
.meta a { color: var(--ink); }
h1 { margin: 0; max-width: 20ch; color: var(--head-ink); font-family: var(--head); font-weight: var(--head-weight); font-stretch: var(--head-stretch); font-size: var(--t-h1); line-height: var(--lh-head); letter-spacing: var(--head-track); text-transform: uppercase; overflow-wrap: anywhere; }
h1.long { font-size: var(--t-h1-long); max-width: 26ch; line-height: 0.92; }
.sub { margin: var(--s-3) 0 0; font: 700 clamp(16px, 1.6vw, 22px)/1.25 var(--mono); }
.lede { max-width: var(--measure); margin: var(--s-4) 0 0; color: var(--ink-2); font: 400 var(--t-lede)/var(--lh-lede) var(--body); }
.lede b, .lede strong { color: var(--ink); font-weight: 700; }
.byline { margin: var(--s-4) 0 0; font: 500 var(--t-small)/1.4 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-2); }
.byline b { color: var(--ink); font-weight: 800; }
.figures { display: flex; flex-wrap: wrap; gap: var(--s-5) var(--s-7); margin: var(--s-6) 0 0; padding: 0; list-style: none; }
.figures a { text-decoration: none; display: grid; gap: 6px; }
.figures a:hover b, .figures a:focus-visible b { text-decoration: underline; text-decoration-thickness: var(--stroke); }
.figures a:hover, .figures a:focus-visible { background: none; color: inherit; }
.figures li { display: grid; gap: 6px; }
.figures b { font-family: var(--head); font-weight: var(--head-weight); font-stretch: var(--head-stretch); font-size: var(--t-figure); line-height: 0.85; color: var(--head-ink); }
.figures span { font: 500 var(--t-label)/1.3 var(--mono); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--ink-2); max-width: 18em; }
.actions { display: flex; gap: var(--s-3); flex-wrap: wrap; margin-top: var(--s-5); }

/* a status beside its standing: the sealed block, and the value against the table */
.status-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-5) var(--s-7); align-items: start; margin-top: var(--s-6); }
.status-row div.sealed { max-width: none; }
@media (max-width: 960px) { .status-row { grid-template-columns: 1fr; } }
.versus-box { display: grid; gap: var(--s-4); justify-items: start; }
.versus { display: grid; grid-template-columns: auto auto; gap: 6px 28px; align-items: baseline; padding: 0; margin: 0; }
.versus dt { font: 500 var(--t-label)/1.2 var(--mono); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--ink-2); }
.versus dd { margin: 0; font-family: var(--head); font-weight: var(--head-weight); font-stretch: var(--head-stretch); font-size: var(--t-figure); line-height: 0.85; text-align: right; color: var(--head-ink); }

/* ---- the sheet: sections, one after another. A heading, then its content; space, not rules, between them.
 * (The numbered margin and the full-width rule over every section went in the Oct 29 redesign: they were the page's
 * loudest feature and carried nothing.) ---- */
.sheet { counter-reset: sec; }
.sec { position: relative; padding: 0; margin-top: var(--s-8); }
.sec:first-child { margin-top: 0; }
.sec > h2 { margin: 0 0 var(--s-4); font-family: var(--head); font-weight: var(--head-weight); font-stretch: var(--head-stretch); font-size: var(--t-h2); line-height: 1; text-transform: uppercase; color: var(--head-ink); display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px var(--s-3); }
.sec > h2 .muted { font: 500 var(--t-label)/1 var(--mono); letter-spacing: var(--track-label); color: var(--ink-3); }
.sec > h2 .more { margin-left: auto; font: 500 var(--t-small)/1 var(--mono); letter-spacing: 0; text-transform: none; color: var(--ink); }
.sec > .intro { margin: calc(-1 * var(--s-2)) 0 var(--s-4); max-width: var(--measure); color: var(--ink-2); font: 400 15px/1.5 var(--body); }
.prose { max-width: var(--measure); font: 400 var(--t-prose)/var(--lh-prose) var(--body); }
.prose p { margin: 0 0 1em; }
.prose code { font-size: 0.86em; }
.note { max-width: 60em; margin: var(--s-3) 0 0; font-size: var(--t-small); color: var(--ink-3); }
details.more-rows { margin-top: 0; }
details.more-rows > summary { cursor: pointer; padding: var(--s-3) 0; font: 500 var(--t-small)/1.4 var(--mono); list-style: none; }
details.more-rows > summary::-webkit-details-marker { display: none; }
details.more-rows > summary::before { content: "+ "; }
details.more-rows[open] > summary::before { content: "\2212 "; }

/* ---- rows: an archive. A row inverts when you point at it. ---- */
ol.rows, ul.rows { list-style: none; margin: 0; padding: 0; border-top: var(--hair) solid var(--rule); }
.rows > li { border-bottom: var(--hair) solid var(--rule); }
.row { display: grid; grid-template-columns: var(--cols, minmax(0, 1fr) auto); gap: 6px var(--s-6); align-items: baseline; padding: 18px var(--s-4); margin: 0 calc(-1 * var(--s-4)); text-decoration: none; color: inherit; transition: background var(--m-quick), color var(--m-quick); }
a.row:hover, a.row:focus-visible { background: var(--night); color: var(--glow); outline: none; }
a.row:hover .muted, a.row:hover .kind, a.row:focus-visible .muted, a.row:focus-visible .kind { color: var(--glow-2); }
a.row:hover .tag, a.row:focus-visible .tag { border-color: var(--glow); color: var(--glow); }
a.row:hover .meter, a.row:focus-visible .meter { border-color: var(--glow); }
a.row:hover .meter i, a.row:focus-visible .meter i { background: var(--glow); }
.row .title { font: 500 15px/1.4 var(--mono); }
.row .big { font-family: var(--head); font-weight: var(--head-weight); font-stretch: var(--head-stretch); font-size: var(--t-h3); line-height: 1; text-transform: uppercase; }
.row .num { text-align: right; white-space: nowrap; }
.row .sealed-compact { justify-self: start; }
@media (max-width: 860px) { .row { grid-template-columns: 1fr !important; } .row .num { text-align: left; } }
.tag { display: inline-block; font: 700 var(--t-micro)/1 var(--mono); letter-spacing: var(--track-tag); text-transform: uppercase; padding: 4px 7px 3px; border: var(--line) solid var(--ink); white-space: nowrap; }
.tag.solid { background: var(--night); color: var(--glow); border-color: var(--night); }
.tag.dashed { border-style: dashed; }
ul.plain { list-style: none; padding: 0; margin: 0; border-top: var(--hair) solid var(--rule); }
ul.plain li { padding: var(--s-3) 0; border-bottom: var(--hair) solid var(--rule); }
.clawed { text-decoration: line-through; color: var(--ink-3); }

/* ---- the result card: one per result, everywhere (goobert/site/pages/card.py; gnc/card.py's share image) ----
 * A black plate: noun and tag, the result in notation (Archivo), the entry in words, what happened in plain words,
 * the sealed status, who and when. The whole card is a link (the value's ::after covers it); the finder and the
 * entry link above it. */
.result-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: var(--s-4); }
.result-card { position: relative; display: flex; flex-direction: column; gap: var(--s-3); padding: var(--s-4) var(--s-5) var(--s-4); background: var(--night); color: var(--glow); border: var(--hair) solid var(--plate-edge); transition: outline-color var(--m-quick); outline: var(--stroke) solid transparent; outline-offset: -2px; }
.result-card:hover, .result-card:focus-within { outline-color: var(--glow); }
.result-card a { color: var(--glow); text-decoration-color: var(--glow-3); position: relative; z-index: 1; }
.result-card a:hover, .result-card a:focus-visible { background: var(--glow); color: var(--night); }
.result-card-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-3); margin: 0; font: 500 var(--t-label)/1.2 var(--mono); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--glow-2); }
.result-card-tag { flex: none; font: 800 var(--t-micro)/1 var(--mono); letter-spacing: var(--track-tag); padding: 4px 7px 3px; border: var(--line) solid var(--glow-3); color: var(--glow); }
.result-card[data-kind="record"] .result-card-tag, .result-card[data-kind="kill"] .result-card-tag { background: var(--glow); color: var(--night); border-color: var(--glow); }
.result-card[data-kind="kill"] .result-card-tag { background: var(--status-bad); border-color: var(--status-bad); }
.result-card-value { margin: 0; font-family: var(--head); font-weight: var(--head-weight); font-stretch: var(--head-stretch); font-size: clamp(30px, 2.6vw, 40px); line-height: 0.95; letter-spacing: -0.005em; overflow-wrap: anywhere; }
.result-card-value.long { font-size: clamp(22px, 1.9vw, 28px); line-height: 1.02; }
.result-card-value a { position: static; text-decoration: none; }
.result-card-value a::after { content: ""; position: absolute; inset: 0; z-index: 0; }
.result-card-value a:hover, .result-card-value a:focus-visible { background: none; color: var(--glow); }
.result-card-value a:focus-visible { outline: none; }
.result-card-words { margin: 0; font: 400 15px/1.45 var(--body); color: var(--glow-text); }
.result-card-finder { margin: 0; display: flex; align-items: baseline; gap: var(--s-3); font-family: var(--head); font-weight: var(--head-weight); font-stretch: var(--head-stretch); font-size: clamp(24px, 2vw, 30px); line-height: 1; overflow-wrap: anywhere; }
.result-card-finder > span { flex: none; font: 500 var(--t-label)/1.2 var(--mono); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--glow-2); }
.result-card-finder a { text-decoration: none; }
.result-card.lead .result-card-finder { font-size: clamp(30px, 3vw, 44px); }
.result-card-said { margin: 0; font: 600 var(--t-small)/1.5 var(--mono); color: var(--glow); }
.result-card-builds { margin: 0; font: 400 var(--t-small)/1.45 var(--mono); color: var(--glow-text); overflow-wrap: anywhere; }
.result-card-seal { position: relative; z-index: 1; }
.result-card-seal .sealed-compact { padding-left: 0; border: 0; }
.result-card-foot { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-4); align-items: baseline; margin: auto 0 0; padding-top: var(--s-3); border-top: var(--hair) solid var(--glow-rule); font: 500 var(--t-small)/1.4 var(--mono); color: var(--glow-2); }
.result-card-foot time { margin-left: auto; }
.result-card-pts { margin-left: auto; color: var(--glow-2); font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }
.result-card-foot time + .result-card-pts { margin-left: 0; }
.result-card-pts.struck { text-decoration: line-through; color: var(--glow-3); }
.result-card-pts.pending { color: var(--glow-3); }
.result-card.lead { padding: var(--s-5) var(--s-6); gap: var(--s-4); }
.result-card.lead .result-card-value { font-size: clamp(44px, 5vw, 76px); }
.result-card.lead .result-card-value.long { font-size: clamp(30px, 3vw, 44px); }
.result-card.lead .result-card-words { font-size: 17px; }
.result-card.lead .result-card-said { font-size: var(--t-body); }
@media (max-width: 600px) { .result-card, .result-card.lead { padding: var(--s-4); } }

/* ---- a problem tile: a problem and where it stands, on the field (outlined; plates are for results) ---- */
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(270px, 100%), 1fr)); gap: var(--s-4); }
a.tile { display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-4); border: var(--line) solid var(--ink); text-decoration: none; color: inherit; transition: background var(--m-quick), color var(--m-quick); }
a.tile:hover, a.tile:focus-visible { background: var(--ink); color: var(--field); }
a.tile:hover .muted, a.tile:focus-visible .muted, a.tile:hover .tile-state, a.tile:focus-visible .tile-state { color: var(--field); }
.tile-name { font-family: var(--head); font-weight: var(--head-weight); font-stretch: var(--head-stretch); font-size: 24px; line-height: 1; text-transform: uppercase; }
.tile .notation { font-size: var(--t-small); }
.tile-state { margin-top: auto; padding-top: var(--s-2); font: 500 var(--t-small)/1.45 var(--mono); color: var(--ink-2); }
.tile-state b { font-weight: 800; }

/* ---- tables ---- */
table.data { width: 100%; border-collapse: collapse; font-size: var(--t-data); }
table.data th, table.data td { text-align: left; padding: var(--s-3) var(--s-4) var(--s-3) 0; border-bottom: var(--hair) solid var(--rule); vertical-align: top; }
table.data th { font-weight: 500; color: var(--ink-3); font-size: var(--t-label); letter-spacing: var(--track-tag); text-transform: uppercase; border-bottom: var(--hair) solid var(--rule-strong); }
table.data td.num, table.data th.num { text-align: right; }
table.data td.big { font-family: var(--head); font-weight: var(--head-weight); font-stretch: var(--head-stretch); font-size: 28px; line-height: 1; }
table.data tr.uncounted td { color: var(--ink-3); }
.scroll-x { overflow-x: auto; }

/* ---- code and data ---- */
code { font: 500 0.92em var(--mono); }
.cmd { display: block; font: 500 var(--t-body)/1.7 var(--mono); background: var(--night); color: var(--glow); padding: var(--s-3) var(--s-4); overflow-x: auto; white-space: pre; border: var(--hair) solid var(--plate-edge); }
.cmd::before { content: "$ "; color: var(--glow-3); }
pre.data { margin: 0; font: 400 var(--t-data)/1.6 var(--mono); background: var(--night); color: var(--glow-text); padding: var(--s-4); overflow-x: auto; border: var(--hair) solid var(--plate-edge); }
pre.data .k { color: var(--glow); }
pre.data .c { color: var(--glow-3); }

/* ---- controls ---- */
button, .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: var(--bar-h); padding: 0 26px; white-space: nowrap; cursor: pointer; text-decoration: none; font: 700 var(--t-body)/1 var(--mono); color: var(--ink); background: transparent; border: var(--stroke) solid var(--ink); border-radius: var(--radius); }
button:hover, .btn:hover, button:focus-visible, .btn:focus-visible { background: var(--ink); color: var(--field); outline: none; }
.btn-solid, button.btn-solid { background: var(--ink); color: var(--field); }
.btn-solid:hover, .btn-solid:focus-visible { background: transparent; color: var(--ink); }
.btn.small, button.small { height: var(--bar-h-small); padding: 0 var(--s-4); font-size: var(--t-small); }
button:disabled { opacity: .4; cursor: default; }
select { font: 500 13px/1 var(--mono); color: var(--ink); background: var(--field); border: var(--line) solid var(--ink); border-radius: var(--radius); height: var(--bar-h-small); padding: 0 10px; }
input[type=text], input[type=search], input[type=password], input[type=email] { font: 400 16px/1.2 var(--mono); color: var(--ink); background: var(--field); border: var(--stroke) solid var(--ink); border-radius: var(--radius); height: var(--bar-h); padding: 0 var(--s-4); min-width: 0; width: 100%; -webkit-appearance: none; appearance: none; }
input::placeholder { color: var(--ink-3); }
input:focus { outline: none; background: var(--leaf); }

/* a form: a lit plate with an ink edge; tabs across the top when it does two things */
.form-plate { border: var(--stroke) solid var(--ink); background: var(--leaf); }
.form-tabs { display: grid; grid-template-columns: 1fr 1fr; background: var(--ink); }
.form-tabs button { height: 52px; border: 0; color: var(--field); opacity: .72; background: none; font: 700 var(--t-label)/1 var(--mono); letter-spacing: var(--track-label); text-transform: uppercase; }
.form-tabs button:hover, .form-tabs button:focus-visible { background: none; color: var(--field); opacity: 1; }
.form-tabs button[aria-selected="true"], .form-tabs button[aria-selected="true"]:hover { background: var(--leaf); color: var(--ink); opacity: 1; }
.form-body { display: grid; gap: 22px; padding: var(--s-6) 28px 30px; }
.form-body input { background: var(--field); }
.form-body input:focus { background: var(--leaf); }
.form-body .btn-solid { width: 100%; }
.field { display: grid; gap: var(--s-2); }
.field span { font: 700 var(--t-label)/1 var(--mono); letter-spacing: var(--track-tag); text-transform: uppercase; }
.field small { font-size: var(--t-small); color: var(--ink-3); }
.err { background: var(--ink); color: var(--field); padding: var(--s-3) 14px; font-size: 13px; }

/* signing in: the heading on the left, the form plate on the right */
.auth { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 480px); gap: var(--s-7) var(--s-9); align-items: start; padding: 104px 0 0; }
.auth .lede { margin-top: var(--s-6); }
.auth .aside { margin: 40px 0 0; max-width: 34em; font-size: 13px; color: var(--ink-2); }
.auth .aside .cmd { display: inline-block; margin-top: 10px; }
@media (max-width: 960px) { .auth { grid-template-columns: 1fr; padding-top: 56px; } }

/* ---- a profile: a full-width black plate, the handle and the aura ---- */
.profile { background: var(--night); color: var(--glow); margin: 0 calc(50% - 50vw); padding: 72px max(var(--side), calc(50vw - var(--wide) / 2)) 0; border-block: var(--hair) solid var(--plate-edge); }
.profile-top { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-5) var(--s-7); align-items: end; }
.profile .label { color: var(--glow-3); }
.handle { margin: 14px 0 0; font-family: var(--head); font-weight: var(--head-weight); font-stretch: var(--head-stretch); font-size: var(--t-h1); line-height: 0.84; color: var(--glow); overflow-wrap: anywhere; }
.aura { text-align: right; }
.aura .num { display: block; font-family: var(--head); font-weight: var(--head-weight); font-stretch: var(--head-stretch); font-size: var(--t-h1); line-height: 0.84; }
.aura .of { display: block; margin-top: var(--s-3); font: 500 var(--t-label)/1 var(--mono); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--glow-2); }
.profile .stats { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-7); margin: var(--s-7) 0 0; padding: var(--s-4) 0 18px; border-top: var(--hair) solid var(--glow-rule); font-size: 13px; color: var(--glow-2); }
.profile .stats b { color: var(--glow); font-weight: 800; margin-right: 6px; }
@media (max-width: 860px) { .profile-top { grid-template-columns: 1fr; } .aura { text-align: left; } }

/* ---- the figure plate: black, a head bar, a foot bar ---- */
.plate { background: var(--night); color: var(--glow); border: var(--hair) solid var(--plate-edge); }
.plate-head, .plate-foot { display: flex; align-items: baseline; gap: var(--s-2) var(--s-5); flex-wrap: wrap; font: 500 var(--t-label)/1.3 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; padding: var(--s-3) var(--s-4) 11px; }
.plate-head { border-bottom: var(--hair) solid var(--glow-rule); }
.plate-head b { font-weight: 800; white-space: nowrap; }
.plate-head .end { margin-left: auto; color: var(--glow-3); white-space: nowrap; }
.plate-foot { color: var(--glow-2); border-top: var(--hair) solid var(--glow-rule); }
.plate-body { background: var(--night) var(--stars); color: var(--glow-text); padding: var(--s-5) var(--s-4); }

/* ---- the sealed status block: markup from goobert/site/render.py only ---- */
.sealed { font: 500 var(--t-small)/1.5 var(--mono); }
.sealed-compact, .sealed-inline { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--s-2); vertical-align: 0.05em; background: var(--night); color: var(--glow); padding: 1px 7px 0; line-height: 1.55; white-space: normal; border: var(--hair) solid var(--plate-edge); }
.sealed-label { font-weight: 800; text-decoration: none; letter-spacing: 0.02em; color: var(--status-held); }
.sealed-label::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 6px; border: var(--line) solid currentColor; vertical-align: 0.02em; }
.sealed[data-label="checked"] .sealed-label::before, .sealed[data-label="certified"] .sealed-label::before, .sealed[data-label="checked-unreviewed"] .sealed-label::before,
.sealed[data-label="published"] .sealed-label::before, .sealed[data-label="reviewed"] .sealed-label::before { background: currentColor; }
.sealed[data-label$="-conditional"] .sealed-label { color: var(--status-cond); }
.sealed[data-label$="-conditional"] .sealed-label::before { background: linear-gradient(135deg, currentColor 50%, transparent 50%); }
.sealed[data-label="contested"] .sealed-label, .sealed[data-label="orphaned"] .sealed-label, .sealed[data-label="partially-checked"] .sealed-label { color: var(--status-warn); }
.sealed[data-label="contested"] .sealed-label::before, .sealed[data-label="orphaned"] .sealed-label::before, .sealed[data-label="partially-checked"] .sealed-label::before { background: currentColor; }
.sealed[data-label="refuted"] .sealed-label, .sealed[data-label="suspect"] .sealed-label { color: var(--status-bad); }
.sealed[data-label="refuted"] .sealed-label::before, .sealed[data-label="suspect"] .sealed-label::before { background: currentColor; }
.sealed[data-label="open"] .sealed-label, .sealed[data-label="recorded"] .sealed-label { color: var(--status-open); }
/* a peer grade (peer-checked, peer-certified, peer-certified-conditional) sits below Goobert's own: a dashed,
   unfilled swatch in a softer green, never the filled "checked" square (after the -conditional rule, so it wins) */
.sealed[data-label^="peer-"] .sealed-label { color: var(--glow-2); font-weight: 600; }
.sealed[data-label^="peer-"] .sealed-label::before { background: transparent; border-style: dashed; }
.sealed-compact .sealed-env { color: var(--glow-2); font-weight: 400; }
.sealed-compact .sealed-flag { color: var(--status-warn); font-weight: 400; }
/* a linked label keeps its status hue when pointed at (the hue selectors above outrank this one) */
a.sealed-label:hover, a.sealed-label:focus-visible { background: none; color: var(--status-held); text-decoration: underline; }
div.sealed { background: var(--night); color: var(--glow); padding: 18px 20px 14px; max-width: 820px; border: var(--hair) solid var(--plate-edge); }
.sealed-head { display: flex; gap: 6px 14px; flex-wrap: wrap; align-items: baseline; font-size: var(--t-body); }
.sealed-meaning { color: var(--glow-2); font-weight: 400; }
.sealed-vector { display: grid; grid-template-columns: max-content 1fr; gap: var(--s-1) 18px; margin: 14px 0 0; padding-top: var(--s-3); border-top: var(--hair) solid var(--glow-rule); font-weight: 400; }
.sealed-vector dt { color: var(--glow-3); font-size: var(--t-micro); letter-spacing: var(--track-tag); text-transform: uppercase; padding-top: 2px; }
.sealed-vector dd { margin: 0; }
.sealed-foot { color: var(--glow-3); margin-top: var(--s-3); font-size: var(--t-micro); letter-spacing: var(--track-label); text-transform: uppercase; font-weight: 400; }
/* text someone wrote, beside a seal: set as a quotation, so it can never pass for one */
.said::before { content: "\201C"; }
.said::after { content: "\201D"; }
/* a title is not a quotation (reports/site-direction.md): headings, row titles and links show it bare */
:is(h1, h2, h3, h4, .title, a).said::before, :is(h1, h2, h3, h4, .title, a).said::after,
a .said::before, a .said::after, .title .said::before, .title .said::after { content: none; }

/* ---- the band: the newest bounds, moving; it becomes the search when you type ---- */
.band { position: relative; overflow: hidden; background: var(--band-bg); color: var(--band-fg); font-family: var(--head); font-weight: var(--head-weight); font-stretch: var(--head-stretch); font-size: var(--t-band); line-height: 0.84; letter-spacing: -0.015em; text-transform: uppercase; }
.band-track { display: inline-flex; white-space: nowrap; padding: 0.1em 0 0.06em; will-change: transform; animation: run var(--m-ticker) linear infinite; }
.band-item { padding-right: 0.42em; }
.band-item::after { content: ""; display: inline-block; width: 0.11em; height: 0.11em; margin-left: 0.42em; vertical-align: 0.3em; background: currentColor; }
@keyframes run { to { transform: translateX(-50%); } }
.band:hover .band-track { animation-play-state: paused; }

/* ---- small parts ---- */
.meter { display: block; height: 10px; border: var(--hair) solid var(--ink); align-self: center; }
.meter i { display: block; height: 100%; background: var(--ink); }
.voice { margin: 0 0 28px; font: 400 var(--t-lede)/1.55 var(--body); max-width: 40em; }   /* an owner-written line; empty shows nothing */
.working::after { content: ""; display: inline-block; width: 7px; height: 7px; margin-left: var(--s-2); background: currentColor; animation: blink var(--m-blink) steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }
.tile-about { font: 400 14px/1.4 var(--body); color: var(--ink-2); }
a.tile:hover .tile-about, a.tile:focus-visible .tile-about { color: var(--field); }

/* ---- copy: every command and code block gets a Copy button (js/shell.js wraps it in .copyable) ---- */
.copyable { position: relative; display: inline-block; max-width: 100%; vertical-align: top; }
.copyable.block { display: block; }
.copyable > .cmd, .copyable > pre { padding-right: 76px; }
.copy-btn { position: absolute; top: 50%; right: 8px; transform: translateY(-50%); height: auto; padding: 5px 9px 4px; font: 700 var(--t-micro)/1 var(--mono); letter-spacing: var(--track-tag); text-transform: uppercase; color: var(--glow); background: var(--night); border: var(--hair) solid var(--glow-3); }
.copyable > pre + .copy-btn { top: 8px; transform: none; }
.copy-btn:hover, .copy-btn:focus-visible { background: var(--glow); color: var(--night); border-color: var(--glow); }
.copy-btn.done { background: var(--glow); color: var(--night); }
.tier-row .copyable, .work-line .copyable { justify-self: start; }
@media (max-width: 860px) { .tier-row .copyable { justify-self: stretch; } }

/* ---- Get started: one line for this computer, what happens next, other ways folded (pages/install.py) ---- */
.get-started { max-width: 46em; padding: var(--s-5); border: var(--stroke) solid var(--ink); background: var(--leaf); }
.gs-h { margin: 0 0 var(--s-3); font-family: var(--head); font-weight: var(--head-weight); font-stretch: var(--head-stretch); font-size: 28px; line-height: 1; text-transform: uppercase; color: var(--head-ink); }
.gs-steps { margin: 0; padding: 0 0 0 1.4em; display: grid; gap: var(--s-4); font: 400 16px/1.5 var(--body); }
.gs-steps li::marker { font: 800 var(--t-small) var(--mono); }
.gs-say { margin: 0 0 var(--s-2); }
.gs-say b { font-weight: 700; }
.gs-steps code:not(.cmd) { font-size: 0.9em; background: var(--field); padding: 1px 5px; }
.gs-switch { margin: var(--s-2) 0 0; font-size: var(--t-small); color: var(--ink-2); }
button.link { height: auto; padding: 0; border: 0; background: none; font: inherit; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
button.link:hover, button.link:focus-visible { background: var(--ink); color: var(--field); text-decoration: none; }
button.link[aria-pressed="true"] { font-weight: 800; text-decoration: none; }
.gs-more { margin-top: var(--s-4); border-top: var(--hair) solid var(--rule); }
.gs-more .tiers .tier-row span { font-size: 15px; }
.tile-target { display: grid; gap: 2px; padding-top: var(--s-2); border-top: var(--hair) solid var(--rule); }
.tile-note { font: 400 14px/1.4 var(--body); }
a.tile:hover .tile-target, a.tile:focus-visible .tile-target { border-color: var(--field); }

/* Internal version strings stay in the markup (the sealed block's text is hashed) but are never shown (owner, Oct 29):
   the renderer's foot line ("status function v3") is for the API, the twins and JSON-LD. */
.sealed-foot { display: none; }
.gs-steps > li { min-width: 0; }
.copyable.block { min-width: 0; }
@media (max-width: 600px) { .get-started { padding: var(--s-4); } .get-started .cmd { white-space: pre-wrap; overflow-wrap: anywhere; } }
/* small phones: the bar's end (search, Install, night) stays on one line beside the mark */
@media (max-width: 420px) {
  header.top { column-gap: var(--s-2); }
  header.top .top-end { gap: var(--s-2); }
  header.top .top-install { padding: 0 var(--s-3); }
  .mark { font-size: 15px; gap: var(--s-2); }
}
.gs-note { margin: var(--s-2) 0 0; font-size: 15px; color: var(--ink-2); }

/* ---- the account chip (pages/base.py ME; js/theme.js marks <html data-me> before paint, js/shell.js fills it) ----
   Signed out: Install and "Sign in". Signed in: the name, with a menu holding Install. */
.top-signin { font: 600 var(--t-small)/1 var(--mono); text-decoration: none; white-space: nowrap; padding: 6px 2px; }
.me-menu { position: relative; display: none; }
:root[data-me] .me-menu { display: block; }
:root[data-me] .top-install, :root[data-me] .top-signin { display: none; }
.me-chip { height: var(--bar-h-small); max-width: 11em; padding: 0 var(--s-3); gap: var(--s-2); font: 700 var(--t-small)/1 var(--mono); }
.me-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 3ch; }
.me-chip span:empty::before { content: attr(data-placeholder); }
.me-chip::after { content: ""; flex: none; width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid currentColor; }
.me-pop { position: absolute; right: 0; top: calc(100% + 6px); z-index: 50; min-width: 12em; display: grid; background: var(--field); border: var(--stroke) solid var(--ink); }
.me-pop[hidden] { display: none; }
.me-pop a, .me-pop button.link { display: block; padding: 10px 14px; font: 500 var(--t-small)/1.2 var(--mono); text-decoration: none; text-align: left; border-bottom: var(--hair) solid var(--rule); }
.me-pop > :last-child { border-bottom: 0; }
.me-pop a:hover, .me-pop a:focus-visible, .me-pop button.link:hover, .me-pop button.link:focus-visible { background: var(--ink); color: var(--field); }
@media (max-width: 420px) {
  .me-chip { max-width: 7.5em; padding: 0 var(--s-2); }
  .top-signin { font-size: var(--t-label); }
}
@media (max-width: 380px) {
  header.top { column-gap: var(--s-1); }
  header.top .top-end { gap: var(--s-1); }
  header.top .top-install { padding: 0 var(--s-2); }
}