/* ---------------------------------------------------------------------------
   Report-area chrome, aligned to the wiki theme (P2.4; directive 2026-07-05:
   the wiki is master — divergence between the two areas is a defect).

   The tokens (--wk-*, --fs-*) are defined once in wiki.css (:root), which
   _Layout.cshtml links site-wide before this file; the system of record is
   docs/DESIGN_SYSTEM_SPEC.md v1.0. This file consumes them: Georgia serif
   for reading text, system sans for all chrome, warm near-black ink on
   faint warm paper, aubergine links, ink masthead rule, 1px hairline
   exhibit frames on bounded exhibits (tables, charts, cards, boxes).

   Semantic colors keep their meaning and are NOT restyled: tier badges,
   row flags, and chart trace colors (ChartBuilder.cs).
--------------------------------------------------------------------------- */

:root {
    --ink: var(--wk-ink);
    --muted: var(--wk-muted);
    --line: var(--wk-hairline);
    --accent: var(--wk-link);
    --bg: var(--wk-paper);
    --flag: #fff3e0;      /* semantic row flags — meaning, not chrome */
    --flag-high: #fdecea;
}

* { box-sizing: border-box; }

/* Root size is a SPACING anchor only (legacy margins/paddings are rem-based
   and keep their rhythm against 19px). Type never uses rem — every text
   element carries a --fs-* role token per DESIGN_SYSTEM_SPEC.md §3. */
html { font-size: 19px; }

/* Wikipedia-feel audit (2026-07-11): one line-height everywhere, even
   paragraph rhythm, generous margins — airy, never busy. */
body {
    margin: 0;
    font-family: var(--wk-sans);
    font-size: var(--fs-body);
    color: var(--ink);
    background: var(--bg);
    display: flex;
    min-height: 100vh;
    flex-direction: column;
    line-height: 1.6;
}
p { margin: 0.6em 0; }
ul, ol { margin: 0.6em 0; }
li { margin: 0.25em 0; }

/* red is for links (and the active-tab underline) only */
a { color: var(--wk-link); }
a:visited { color: var(--wk-link); }
a:hover { color: var(--wk-link-hover); }

/* Edict 3 scaffold constant: the masthead is 56px tall, everywhere. */
.topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 56px;
    padding: 0 30px;
    box-sizing: border-box;
    background: var(--wk-paper);
    color: var(--ink);
    border-bottom: 2px solid var(--wk-rule);
}
/* The brand is the site's masthead headline, not a nav item. All-black
   (two-tone tried and reverted 2026-07-11 — stakeholder prefers ink),
   with the site symbol at its left (Wikipedia-style wordmark). */
.topbar .brand {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    color: var(--ink);
    font-weight: 700;
    text-decoration: none;
    font-size: var(--fs-brand);
    letter-spacing: 0.02em;
    line-height: 1.1;
}
.brand-logo { flex: 0 0 auto; }
/* Signature flourish: ONE spin around the vertical axis on the first page
   of a session (site.js adds the class once, keyed by sessionStorage).
   Never continuous, never per-click — it would fight the calm theme. */
.brand-logo.spin { animation: tooth-spin 1.1s ease-in-out 1; }
@keyframes tooth-spin {
    from { transform: perspective(300px) rotateY(0deg); }
    to   { transform: perspective(300px) rotateY(360deg); }
}
@media (prefers-reduced-motion: reduce) {
    .brand-logo.spin { animation: none; }
}

/* Spec §3: everything right of the brand is one quiet register — 14px sans
   400, nothing bigger or smaller than anything else (the bburlin fix).
   The active tab earns the accent underline; weight and size never move. */
.topbar nav { display: flex; gap: 0.8rem; align-items: center; font-family: var(--wk-sans); font-size: var(--fs-ui); }
.topbar .navlink { color: var(--ink); text-decoration: none; font-weight: 400; }
.topbar .navlink:hover { text-decoration: underline; }
.topbar .navlink.active {
    border-bottom: 3px solid var(--wk-link);
    padding-bottom: 0.1rem;
}
.topbar .user { color: var(--wk-ink-2); font-family: var(--wk-sans); font-size: var(--fs-ui); }
.linklike {
    background: none; border: none; color: var(--ink);
    text-decoration: underline; cursor: pointer;
    font-family: var(--wk-sans); font-size: var(--fs-ui);
}
.linklike-dark {
    background: none; border: none; color: var(--accent);
    text-decoration: underline; cursor: pointer;
    font-family: var(--wk-sans); font-size: var(--fs-ui);
    padding: 0 0.3rem;
}
.inline { display: inline; }

main { flex: 1; max-width: 1280px; width: 100%; margin: 0 auto; padding: 1.5rem 2rem 2.5rem; }
/* Pages that opt in (ViewData["Wide"], e.g. /Explorer) use the whole
   viewport, hugging the left edge — reading source code wants every
   pixel of width and no centered dead space. */
main.wide { max-width: none; margin: 0; padding: 1.5rem 1.2rem 2.5rem; }

/* Heading rhythm: hairline-ruled, normal weight, generous air above,
   a steady gap below — the Wikipedia section cadence. */
h1 {
    font-size: var(--fs-h1); font-weight: normal; line-height: 1.2;
    border-bottom: 1px solid var(--line);
    padding-bottom: 0.15rem; margin: 0.4rem 0 0.8rem;
}
h2 {
    font-size: var(--fs-h2); font-weight: normal; line-height: 1.25;
    border-bottom: 1px solid var(--line);
    padding-bottom: 0.15rem; margin: 1.8rem 0 0.6rem;
}
h3 { font-size: var(--fs-h3); font-weight: 700; line-height: 1.3; margin: 1.4rem 0 0.4rem; }
.muted { color: var(--muted); font-family: var(--wk-sans); font-size: var(--fs-meta); }
code { background: var(--wk-caption-bg); padding: 0 0.25rem; border-radius: 2px; }

.searchbar { display: flex; gap: 0.5rem; margin: 1rem 0; align-items: center; }
.searchbar input { flex: 1; max-width: 30rem; }
/* Spec §3 + edict 10: forms are chrome — sans at the UI size, compact
   (~28px tall), on exhibit white. */
input, select, button, textarea {
    font-family: var(--wk-sans); font-size: var(--fs-ui); padding: 4px 9px;
    border: 1px solid var(--line); border-radius: 2px; background: var(--wk-exhibit);
}
button { padding: 4px 15px; }
/* neutral controls: no colored chrome (scheme A) */
button { color: var(--ink); cursor: pointer; }
button:hover { background: var(--wk-caption-bg); }
/* The one accent-filled control per view (edict: Stripe "one per band"). */
button.btn-primary { background: var(--wk-link); border-color: var(--wk-link); color: #fff; }
button.btn-primary:hover { background: var(--wk-link-hover); }

/* Spec §5: data tables are exhibits — sans, tabular figures, hairline
   frame, light interior rules, ink rule under the header row. */
table {
    border-collapse: collapse; width: 100%; background: var(--wk-exhibit);
    font-family: var(--wk-sans); font-size: var(--fs-ui);
    font-variant-numeric: tabular-nums; border: 1px solid var(--line);
}
th, td {
    padding: 0.45rem 0.65rem; text-align: left;
    border: 1px solid var(--wk-cellline);
    line-height: 1.45;   /* denser than prose, still even */
}
th {
    background: var(--wk-caption-bg); position: sticky; top: 0;
    font-weight: 700; border-bottom: 1px solid var(--wk-rule);
}
td.r, th.r { text-align: right; }
tr.row-flag { background: var(--flag); }
tr.row-flag-high { background: var(--flag-high); }

.login-box { max-width: 24rem; margin: 4rem auto; background: #fff; padding: 1.6rem; border: 1px solid var(--line); border-radius: 2px; }
/* --- My Account: password + authenticator enrollment (Phase-7 B-1/M-4) --- */
.account-form { max-width: 26rem; }
.account-form label { display: block; margin: 0.7rem 0 0.2rem; }
.account-form input { width: 100%; }
.account-form button { margin-top: 0.9rem; }
.mfa-enroll { display: flex; gap: 1.6rem; align-items: flex-start; flex-wrap: wrap; margin: 1rem 0; }
.mfa-qr { border: 1px solid var(--line); border-radius: 2px; padding: 0.4rem; background: #fff; }
.mfa-key { letter-spacing: 0.08em; }
.recovery-codes { columns: 2; max-width: 22rem; }
/* R-II.1: one alignment rule for every checkbox — the box centers on its
   label's text line, and table checkboxes center in their cell. No
   per-page one-offs. */
input[type="checkbox"] { vertical-align: middle; }
.mfa-recovery-toggle,
label:has(> input[type="checkbox"]) {
    display: flex; align-items: center; gap: 0.4em; margin: 0.7rem 0;
}
label:has(> input[type="checkbox"]) > input[type="checkbox"] {
    /* beats .login-box/.account-form input { width: 100% } — a stretched
       checkbox squeezes its label text into a wrapped column */
    margin: 0; width: auto; flex: 0 0 auto;
}
td > input[type="checkbox"], th > input[type="checkbox"] { display: block; margin: 0 auto; }
.topbar a.user { color: var(--ink); font-size: var(--fs-ui); text-decoration: none; }
.topbar a.user:hover { text-decoration: underline; }

/* --- LDL shell (boards approved 2026-07-30) ------------------------------ */
.brand-accent { stroke: var(--wk-link); }
/* Tier two: the module bar — 44px scaffold constant (edict 3). */
.modbar {
    display: flex; justify-content: space-between; align-items: center;
    height: 44px; padding: 0 30px; box-sizing: border-box;
    background: var(--wk-paper); border-bottom: 1px solid var(--wk-hairline);
}
.modname {
    display: flex; align-items: center; gap: 8px;
    font-family: var(--wk-sans); font-size: 15px; font-weight: 700; color: var(--ink);
}
.modbar nav { display: flex; gap: 0.8rem; align-items: center; font-family: var(--wk-sans); font-size: var(--fs-ui); }

/* Module fact-sheet cards (board 2; framed-box standard 18/24/16). */
.cards { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin-top: 12px; }
@media (max-width: 1100px) { .cards { grid-template-columns: 1fr; } } /* edict 13: restructure, never squeeze */
.cards .card {
    background: var(--wk-exhibit); border: 1px solid var(--wk-hairline);
    border-radius: 2px; padding: 18px 24px 16px;
}
.cards .card.ghost { background: transparent; border-style: dashed; color: var(--wk-ink-2); }
.cards .card h3 { display: flex; align-items: center; gap: 9px; font-size: var(--fs-h3); margin: 0 0 12px; line-height: 1.3; }
/* Fact sheets are layout tables, never exhibits (spec §3 note): no frame,
   no ground of their own — they live inside the card's padding. */
.facts { width: 100%; border-collapse: collapse; font-size: var(--fs-ui); margin: 0 0 14px; border: none; background: transparent; }
.facts td { padding: 6px 0; border: none; vertical-align: top; line-height: 1.5; background: transparent; }
.facts td.k { width: 190px; color: var(--wk-ink-2); padding-right: 18px; white-space: nowrap; }
.cards .card .pages { border-top: 1px solid var(--wk-cellline); padding-top: 10px; font-size: var(--fs-ui); }
.cards .card .pages a { text-decoration: none; margin-right: 14px; }
.cards .card .pages a:hover { text-decoration: underline; }

/* Sign in (board 1): standard h1 above the box, box on exhibit white. */
.login-wrap { max-width: 24rem; margin: 2.2rem auto 0; }
.login-wrap .login-box { margin: 0; max-width: none; }

/* --- /Explorer: line-numbered source viewer + crumbs ---
   Two synced <pre> columns (gutter + code): identical font and
   line-height, one scroll container — line N in the gutter is always
   beside line N of the code, blank lines included. */
.codeview {
    display: flex;
    align-items: flex-start;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 2px;
    margin: 0.8rem 0;
    max-height: 78vh;
    overflow: auto;
}
.codeview pre {
    margin: 0;
    font-family: Consolas, "Courier New", monospace;
    font-size: var(--fs-ui);
    line-height: 1.5;
    white-space: pre;
    background: none;
    border: none;
}
.codeview-nums {
    text-align: right;
    color: #9a9a9a;
    padding: 0.6rem 0.6rem 0.6rem 0.8rem;
    border-right: 1px solid var(--wk-cellline);
    background: var(--wk-caption-bg);
    user-select: none;
    flex: 0 0 auto;
    position: sticky;
    left: 0;
}
.codeview-code { padding: 0.6rem 1rem; flex: 1 1 auto; }
.map-tables { margin-left: 1.1rem; }
.src-plain {
    font-family: Consolas, "Courier New", monospace;
    font-size: var(--fs-ui);
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 2px;
    padding: 0.6rem;
    overflow-x: auto;
}
.explorer-crumbs { font-size: var(--fs-ui); }
/* Flex, not a fixed grid: the tree carries a native resize handle
   (bottom-right corner — drag it to move the split), and the pane
   absorbs whatever width the tree gives up. */
.explorer-layout {
    display: flex;
    gap: 1.6rem;
    align-items: flex-start;
}
@media (max-width: 70rem) { .explorer-layout { flex-wrap: wrap; } }
.explorer-tree {
    flex: 0 0 auto;
    width: 24rem;
    min-width: 13rem;
    max-width: 60vw;
    resize: horizontal;
    font-size: var(--fs-ui);
    border: 1px solid var(--line);
    border-radius: 2px;
    padding: 0.7rem 0.9rem;
    background: #fff;
    max-height: 78vh;
    overflow: auto;
}
.explorer-tree ul { list-style: none; margin: 0; padding-left: 1.1rem; }
.explorer-tree li { margin: 0.1rem 0; }
.explorer-tree summary { cursor: pointer; }
.explorer-tree summary:hover { background: var(--wk-caption-bg); }
.explorer-tree a { text-decoration: none; }
.explorer-tree a:hover { text-decoration: underline; }
.explorer-tree a.tree-selected { font-weight: 700; }
.tree-kind { font-size: 0.9em; margin-left: 0.25rem; }
.explorer-pane { flex: 1 1 auto; min-width: 0; }

/* --- /Explorer 2.0 (2026-07-12): view tabs, architecture map, cards --- */
.explorer-tabs {
    display: flex; gap: 1.8rem;
    border-bottom: 1px solid var(--wk-hairline);
    margin: 0.4rem 0 1.1rem;
}
.explorer-tabs a {
    padding: 0.3rem 0.15rem 0.45rem;
    text-decoration: none; color: var(--wk-ink); font-weight: 600;
}
.explorer-tabs a:hover { color: var(--wk-link); }
.explorer-tabs a.active {
    color: var(--wk-link);
    box-shadow: inset 0 -3px 0 var(--wk-link);
}

/* The map is an exhibit: hairline frame, white paper, scales to width.
   Below ~1150px it scrolls sideways instead of shrinking labels. */
.archmap-wrap {
    border: 1px solid var(--wk-hairline); border-radius: 2px;
    background: #fff; padding: 10px 8px 4px; overflow-x: auto;
}
.archmap { display: block; width: 100%; min-width: 1150px; height: auto; }
.archmap .colhead { font-size: 12.5px; font-weight: 700; letter-spacing: 0.09em; fill: var(--wk-ink); }
.archmap .edge { fill: none; stroke: #ddd6d0; }
.archmap .edge.dashed { stroke-dasharray: 5 4; stroke: #c9c2ba; }
.archmap .edge.hl { stroke: var(--wk-link); }
.archmap .edgelabel { font-size: 11.5px; font-style: italic; fill: var(--wk-ink); }
.archmap .cluster rect.frame { fill: #fff; stroke: var(--wk-hairline); }
.archmap .cluster rect.cap { fill: var(--wk-caption-bg); stroke: var(--wk-hairline); }
.archmap .cluster-title { font-size: 12px; font-weight: 700; letter-spacing: 0.07em; fill: var(--wk-ink); }
.archmap a { text-decoration: none; cursor: pointer; }
.archmap .node text { font-size: 13.5px; fill: var(--wk-ink); }
.archmap .node .node-title { font-weight: 700; font-size: 14.5px; }
.archmap .node .sub { font-size: 11.5px; fill: #6b6b6b; }
/* page rows live inside their cluster frame: no box of their own */
.archmap .node.kind-page rect { fill: transparent; stroke: none; }
.archmap .node.kind-page:hover rect, .archmap .node.kind-page.hl rect { fill: var(--wk-caption-bg); }
.archmap .node.kind-page:hover text, .archmap .node.kind-page.hl text { fill: var(--wk-link); }
.archmap .node.kind-svc rect, .archmap .node.kind-db rect, .archmap .node.kind-visitor rect
    { fill: #fff; stroke: var(--wk-hairline); }
.archmap .node.kind-db rect { fill: var(--wk-caption-bg); }
.archmap .node.kind-db .node-title { font-family: Consolas, "Courier New", monospace; }
.archmap .node:hover rect, .archmap .node.hl rect { stroke: var(--wk-link); }
.archmap .node.sel rect { stroke: var(--wk-link); stroke-width: 2; fill: #fff; }
.archmap .node.sel text { fill: var(--wk-link); }

/* dependency arrows: heads pick up the edge state via the two markers */
.archmap .edge { marker-end: url(#arw); }
.archmap .edge.hl { marker-end: url(#arw-hl); }
.archmap #arw path { fill: #cfc8c0; }
.archmap #arw-hl path { fill: var(--wk-link); }
/* offline pipeline band: dashed frames, dashed "writes" arrows */
.archmap .node.kind-job rect { fill: #fff; stroke: var(--wk-hairline); stroke-dasharray: 5 3; }
.archmap .node.kind-job:hover rect, .archmap .node.kind-job.hl rect { stroke: var(--wk-link); }
.archmap .edge.write { stroke: #cfc8c0; }
.archmap .edge.write.hl { stroke: var(--wk-link); }

.map-stats {
    font-size: var(--fs-ui); margin: 0 0 0.5rem;
    font-variant-numeric: tabular-nums;
}
.map-stats > span { font-size: var(--fs-ui); }

.map-legend { font-size: var(--fs-ui); margin: 0.6rem 0 1rem; max-width: 62rem; }
.map-trail {
    border: 1px solid var(--wk-hairline); border-radius: 2px;
    background: #fff; padding: 1rem 1.3rem; margin-top: 1rem; max-width: 62rem;
}
.map-trail h2 { margin-top: 0; }
.map-trail ol { margin: 0.5rem 0 0.7rem 1.4rem; }
.map-trail li { margin: 0.35rem 0; }
.map-detail {
    border: 1px solid var(--wk-hairline); border-radius: 2px;
    background: #fff; padding: 1rem 1.3rem; margin-top: 0.4rem;
}
.map-detail h2 { margin-top: 0; }
.kv { display: grid; grid-template-columns: 7rem 1fr; row-gap: 0.5rem; margin: 0.6rem 0; }
.kv dt { font-weight: 700; }
.kv dd { margin: 0; }
.pill {
    display: inline-block; margin: 0.1rem 0.35rem 0.1rem 0;
    padding: 0.05rem 0.5rem; border: 1px solid var(--wk-hairline);
    border-radius: 2px; background: var(--wk-caption-bg);
    text-decoration: none; font-size: var(--fs-ui);
}
/* --- Explorer round 3 (2026-07-12): tree filter, SQL blocks, index defs --- */
.tree-filter {
    width: 100%; margin-bottom: 0.6rem;
    padding: 0.25rem 0.5rem; font-size: var(--fs-ui);
}
.svc-query { margin: 0.4rem 0; }
.svc-query summary { cursor: pointer; }
.svc-query summary:hover { background: var(--wk-caption-bg); }
.svc-query pre { max-height: 26rem; overflow: auto; margin-top: 0.3rem; }
code.ixdef { font-size: var(--fs-ui); word-break: break-word; }
.pill:hover { border-color: var(--wk-link); }
.tbl-group { margin: 0.15rem 0; }

/* --- case-mix v2 lens (2026-07-13): collapsed panel + quiet badge --- */
.cm-lens {
    border: 1px solid var(--wk-hairline); border-radius: 2px;
    background: #fff; padding: 0.5rem 0.9rem; margin: 1rem 0;
}
.cm-lens > summary { cursor: pointer; padding: 0.2rem 0; }
.cm-lens > summary:hover { background: var(--wk-caption-bg); }
.cm-lens table { margin-top: 0.4rem; }
.cm-explain { margin: 0.3rem 0 0.5rem 1.4rem; font-size: var(--fs-ui); }
.badge-cm {
    background: var(--wk-caption-bg); color: var(--wk-ink);
    border: 1px dashed var(--wk-hairline);
    text-decoration: none; font-size: var(--fs-small);
    padding: 0.05rem 0.4rem; margin-left: 0.3rem;
}
.badge-cm:hover { border-color: var(--wk-link); color: var(--wk-link); }

.schema-cards {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(21rem, 1fr));
    gap: 1rem; margin-top: 0.8rem;
}
.schema-card {
    display: block; border: 1px solid var(--wk-hairline); border-radius: 2px;
    background: #fff; padding: 0.9rem 1.1rem;
    text-decoration: none; color: var(--wk-ink);
}
/* the whole card is an <a>: keep prose ink on hover (base a:hover would
   flood it red); the red border + name are the affordance */
.schema-card:hover { border-color: var(--wk-link); color: var(--wk-ink); }
.schema-card:hover .schema-card-name { color: var(--wk-link); }
.schema-card-name { font-family: Consolas, "Courier New", monospace; font-weight: 700; font-size: var(--fs-body); }
.schema-card-counts { font-size: var(--fs-ui); margin: 0.2rem 0 0.4rem; }
.schema-card p { margin: 0; font-size: var(--fs-ui); }
/* Turnstile sits below the Sign in button (stakeholder direction
   2026-08-08), breathing room from the button above it. */
.login-box .cf-turnstile { margin-top: 1.2rem; }
.login-box label { display: block; margin-top: 0.8rem; font-size: var(--fs-ui); }
.login-box input { width: 100%; margin-top: 0.2rem; }
.login-box button { width: 100%; margin-top: 1.2rem; }
.alert { background: var(--flag-high); border: 1px solid #e5b6b0; padding: 0.6rem; border-radius: 2px; margin: 0.8rem 0; }
/* Informational banner (configuration state, not an error) — hairline frame
   only; .alert red stays reserved for real problems. */
.notice { border: 1px solid var(--line); border-left: 3px solid var(--muted); padding: 0.6rem 0.8rem; border-radius: 2px; margin: 0.8rem 0; }

.provider-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; }
.priority-card { text-align: right; display: flex; flex-direction: column; gap: 0.2rem; align-items: flex-end; }

/* Summary stats: one quiet strip with hairline dividers instead of five
   boxed cards — less furniture, same numbers (audit 2026-07-11). */
.summary-cards { display: flex; margin: 1.4rem 0; flex-wrap: wrap; }
.summary-cards .card {
    background: none; border: none; border-left: 1px solid var(--line);
    padding: 0.15rem 1.4rem; display: flex; flex-direction: column; min-width: 9rem;
}
.summary-cards .card:first-child { border-left: none; padding-left: 0; }
.summary-cards .num { font-size: var(--fs-h2); font-weight: 600; }
.summary-cards span:last-child { color: var(--muted); font-size: var(--fs-ui); }

/* Plotly charts: full-width exhibits — hairline frame, with clear separation
   from the next section. overflow:hidden is a backstop so a chart's
   colorbar/legend can never bleed onto the table or text that follows it.
   min-height reserves space so the page doesn't reflow/overlap before
   Plotly finishes its first draw. Trace colors stay semantic. */
.chart {
    width: 100%; margin: 0.5rem 0 1.75rem; overflow: hidden; min-height: 320px;
    border: 1px solid var(--line); border-radius: 2px; background: #fff;
}

.badge {
    display: inline-block; padding: 0.25rem 0.7rem; border-radius: 999px;
    font-weight: 600; font-size: var(--fs-ui); background: #e3e7ec; color: var(--ink);
}
.badge-low { background: #dceefb; color: #0b4f79; }
.badge-medium { background: #fff1c2; color: #6d5200; }
.badge-high { background: #ffd9b3; color: #7a3c00; }
.badge-veryhigh { background: #f8c9c4; color: #8a1c10; }
.badge-warn { background: #fff1c2; color: #6d5200; margin-left: 0.5rem; font-size: var(--fs-ui); }

.guardrail {
    background: var(--wk-caption-bg); border-top: 1px solid var(--line);
    padding: 0.8rem 1.2rem; color: var(--muted); font-size: var(--fs-ui);
}
.guardrail p { max-width: 1280px; margin: 0 auto; }

/* Spec §2 sweep: interface apparatus is sans (badges, guardrail footer,
   wiki chrome strips, explorer crumbs, card metadata, form labels). */
.badge, .badge-warn, .guardrail, .wiki-tabs, .wiki-notice, .wiki-badge,
.wiki-byline, .wiki-catbar, .wiki-editform label, .explorer-crumbs,
.summary-cards span:last-child, .schema-card-counts, .map-stats,
.map-legend, .login-box label, .account-form label {
    font-family: var(--wk-sans);
}

@media print {
    .topbar, .searchbar, button { display: none !important; }
    body { background: #fff; }
    .guardrail { border-top: 1px solid #000; }
}

/* --- Wiki engine (D1.3; full Wikipedia-style theme lands with FR-W33) --- */
.wiki-article { max-width: 60rem; }
.wiki-body { line-height: 1.55; }
.wiki-body h1, .wiki-body h2, .wiki-body h3 { margin-top: 1.4rem; }
.wiki-body blockquote { border-left: 3px solid var(--line); margin: 0.8rem 0; padding: 0.2rem 0.9rem; color: var(--muted); }
.wiki-body pre { background: #eef1f5; padding: 0.6rem; border-radius: 4px; overflow-x: auto; }
a.wiki-red { color: #ba0000; }
a.wiki-red:visited { color: #a55858; }
.wiki-tabs { display: flex; gap: 1rem; border-bottom: 1px solid var(--line); padding-bottom: 0.3rem; margin-bottom: 0.5rem; font-size: var(--fs-ui); }
.wiki-notice { background: #fff1c2; border: 1px solid #e8d48a; padding: 0.5rem 0.8rem; border-radius: 4px; margin: 0.6rem 0; font-size: var(--fs-ui); }
.wiki-error { background: var(--flag-high); border: 1px solid #e5b6b0; padding: 0.5rem 0.8rem; border-radius: 4px; margin: 0.6rem 0; }
.wiki-badge { background: #fff1c2; color: #6d5200; border-radius: 3px; padding: 0.05rem 0.4rem; font-size: var(--fs-ui); margin-left: 0.4rem; }
.wiki-byline { color: var(--muted); font-size: var(--fs-ui); border-top: 1px solid var(--line); margin-top: 1.5rem; padding-top: 0.4rem; }
.wiki-catbar { margin-top: 1.2rem; padding: 0.4rem 0.6rem; background: #eef1f5; border: 1px solid var(--line); border-radius: 4px; font-size: var(--fs-ui); }
.wiki-catbar a { margin-left: 0.6rem; }
.wiki-catlist { columns: 3 14rem; margin: 0.6rem 0; }
.wiki-index-grid { display: grid; grid-template-columns: 1fr 2fr; gap: 1.5rem; align-items: start; }
.wiki-editform .formrow { margin: 0.7rem 0; }
.wiki-editform label { display: block; font-size: var(--fs-ui); margin-bottom: 0.2rem; color: var(--muted); }
.wiki-editform input, .wiki-editform select, .wiki-editform textarea { width: 100%; max-width: 60rem; }
.wiki-editform textarea { font-family: Consolas, monospace; font-size: var(--fs-ui); }
.wiki-editform button { margin-right: 0.8rem; }
.wiki-diff { font-family: Consolas, monospace; font-size: var(--fs-ui); background: #fff; border: 1px solid var(--line); border-radius: 4px; padding: 0.5rem; margin: 0.8rem 0; overflow-x: auto; white-space: pre-wrap; }
.wiki-diff .diff-add { background: #dcffdc; }
.wiki-diff .diff-del { background: #ffdcdc; }
.wiki-diff .diff-same { color: var(--muted); }
.wiki-histform { margin-top: 1rem; }
.wiki-histform button { margin-top: 0.6rem; }

/* R-II.8 (amended 2026-07-30): the upper-left emblem already in the
   chrome — tooth in the module bar, flask brand on global pages — spins
   IN PLACE while a navigation is in flight > 300 ms (site.js adds
   .busy). No separate indicator element anywhere. Real progress is not
   measurable for a single round-trip, so indeterminate is the design of
   record. Declared after .brand-logo.spin so an in-flight nav wins over
   the one-time session flourish. */
.modname img.busy, .brand-logo.busy { animation: busy-spin 0.9s linear infinite; }
@keyframes busy-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    .modname img.busy, .brand-logo.busy { animation: none; }
}