/* =====================================================================
AGOTERRA — theme.css
The ONE stylesheet for every surface: the spectator site, /about,
/download, the admin console, the Architect Desk and the Agent Launcher.
Served by the world at {world}/ui/theme.css (public/ui/theme.css).
Idiom: "chronicle / atlas". Warm vellum ground, umber ink, one wax-red
accent, hairline and double rules, 2–3px radii, serif small caps for
labels, tabular figures everywhere. No glass, no glow, no gradient text,
no emoji. Status is a wax SEAL, never a coloured left border.
---------------------------------------------------------------------
HOW TO INCLUDE
is
blocked by the file:// origin in Chrome.)
THEME
default = light "vellum"; add data-theme="dark" on for "dusk";
data-theme="light" pins light against the OS preference.
Nothing but tokens is re-valued in a theme block.
---------------------------------------------------------------------
LAYERS IN THIS FILE
1. tokens (light) 5. base / reset
2. tokens (dark, @media) 6. components
3. tokens (dark, attribute) 7. utilities
4. fonts note 8. responsive (1100px, 720px)
COMPONENT INVENTORY (stable class names — do not rename)
layout .wrap .grid .col-3 .col-4 .col-5 .col-6 .col-7 .col-8 .col-12
chrome .masthead .dateline .wheel .nav .nav a .nav .count
.section-head .tabs .tab .drawer .strip .foot
surfaces .sheet .sheet--flat .tile .empty .grain
status .seal .seal--open .seal--passed .seal--failed .seal--pending
governance .decree .decree .tally .decree .initials
people .charsheet .sigil .pursuing .holdings
data .ledger (table) .log
talk .msg .msg .quote
controls .btn .btn--primary .btn--quiet .btn--small .btn--icon
.field .label .input .select .textarea .chip .swatch
glyphs svg.i (24-unit grid, currentColor, one stroke weight)
utilities .num .muted .sc .eyebrow .hairline .double-rule .row .stack
===================================================================== */
/* =====================================================================
1. TOKENS — light "vellum" (the default; complete palette lives here)
===================================================================== */
:root {
color-scheme: light;
/* -- ground & paper -------------------------------------------- */
--paper: #f3eee2; /* page ground, warm vellum */
--paper-2: #faf7ef; /* raised card */
--paper-3: #e9e2d0; /* recessed well / hover */
--paper-4: #ddd4be; /* deepest: table head, chips, track */
/* -- ink ------------------------------------------------------- */
--ink: #241f1a; /* body text, headings */
--ink-2: #4a433a; /* secondary prose */
--ink-3: #7c7263; /* muted labels */
--ink-4: #a89e8c; /* hairline captions, disabled */
/* -- rules & depth --------------------------------------------- */
--rule: rgba(36, 31, 26, .16);
--rule-soft: rgba(36, 31, 26, .08);
--rule-strong: rgba(36, 31, 26, .55);
--shadow: 0 1px 2px rgba(36, 31, 26, .06), 0 8px 24px -12px rgba(36, 31, 26, .25);
--shadow-sm: 0 1px 2px rgba(36, 31, 26, .08);
/* -- accents (only these are allowed to be loud) ---------------- */
--oxblood: #7b2d2a; /* THE accent: links, active nav, primary */
--oxblood-2: #a3413d; /* its hover */
--verdigris: #3d7a6a; /* passed / yes / positive / live */
--ochre: #b4832a; /* open / pending / gold */
--rust: #a1402f; /* failed / no / danger */
--dusk: #4d5c86; /* influence, cool secondary */
--on-accent: #fbf7ee; /* text on an accent fill */
/* -- status aliases -------------------------------------------- */
--st-open: var(--ochre);
--st-pass: var(--verdigris);
--st-fail: var(--rust);
--st-pending: var(--ink-3);
/* -- resources -------------------------------------------------- */
--r-land: #5b6b47;
--r-people: #8a5a3a;
--r-gold: #b4832a;
--r-food: #6f8a2e;
--r-arms: #6a5d55;
--r-influence: #4d5c86;
--r-timber: #6a7a3a;
--r-stone: #7d7869;
--r-amber: #c0742a;
--r-salt: #6f8ea3;
--r-knowledge: #5d5588;
/* -- 12 heraldic household tinctures (muted for paper) ---------- */
--h1: #9b3a3a; /* madder */
--h2: #a6612a; /* tenné */
--h3: #b3862d; /* or */
--h4: #7d8330; /* olive */
--h5: #567a34; /* vert */
--h6: #2f7150; /* bottle */
--h7: #2c6d74; /* celeste */
--h8: #3f5f86; /* azure */
--h9: #4b4f92; /* indigo */
--h10: #6a4a8e; /* purpure */
--h11: #8c3f6e; /* murrey */
--h12: #8a3550; /* sanguine */
/* -- terrain (map + legend swatches) ---------------------------- */
--t-plain: #e6e0c9;
--t-hill: #d6c5a2;
--t-marsh: #ccd5c6;
--t-water: #c6d6dc;
--t-line: rgba(36, 31, 26, .13);
--t-hatch: rgba(36, 31, 26, .18);
/* -- paper grain (three faint fields; see .grain) ---------------- */
--grain-a: rgba(36, 31, 26, .028);
--grain-b: rgba(36, 31, 26, .024);
--grain-c: rgba(255, 255, 255, .35);
--grain-wash: rgba(255, 255, 255, .35);
/* -- season hook: the world tints paper/rule hue per season ------
Set --season-hue on (spring 120, summer 85, autumn 55,
winter 230). Chroma stays <= .02 — a drift, never a recolour. */
--season-hue: 55;
--season-tint: hsl(var(--season-hue) 34% 46% / .045);
/* -- radii ------------------------------------------------------ */
--radius: 3px;
--radius-sm: 2px;
--radius-pill: 999px;
/* -- type -------------------------------------------------------
System stacks only: nothing is fetched, the desktop apps never
flash. To self-host later (OFL, woff2, latin subset, ~40 KB each):
display Fraunces / Newsreader / EB Garamond (real small caps)
text Literata / Source Serif 4
body Source Sans 3 / Public Sans (humanist sans)
mono JetBrains Mono (ids, JSON, hooks)
drop them in /ui/fonts/ and prepend to the stacks below. */
--font-display: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", "URW Palladio L", Georgia, "Times New Roman", serif;
--font-body: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", "Source Sans 3", Arial, sans-serif;
--font-mono: "Cascadia Code", Consolas, "SF Mono", Menlo, "JetBrains Mono", monospace;
/* type scale (px; 11 is the floor, 13 the table minimum) */
--fs-xs: 11.5px;
--fs-sm: 13px;
--fs-base: 15px;
--fs-md: 16px;
--fs-lg: 19px;
--fs-xl: 22px;
--fs-2xl: 28px;
--fs-3xl: 38px;
--fs-4xl: 52px;
--lh-tight: 1.25;
--lh-body: 1.55;
/* spacing rhythm */
--sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px;
}
/* =====================================================================
2. TOKENS — dark "dusk", by OS preference (unless light is pinned)
Only token re-valuations live here. Never a component rule.
===================================================================== */
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
color-scheme: dark;
--paper: #171a1f;
--paper-2: #1f232a;
--paper-3: #262b33;
--paper-4: #2f353f;
--ink: #ede6d6;
--ink-2: #cfc6b3;
--ink-3: #9b927f;
--ink-4: #6f6858;
--rule: rgba(237, 230, 214, .16);
--rule-soft: rgba(237, 230, 214, .08);
--rule-strong: rgba(237, 230, 214, .48);
--shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 10px 30px -14px rgba(0, 0, 0, .7);
--shadow-sm: 0 1px 2px rgba(0, 0, 0, .45);
--oxblood: #d0665f;
--oxblood-2: #e0837c;
--verdigris: #6fb59f;
--ochre: #d6a54a;
--rust: #d46a58;
--dusk: #8ea0d1;
--on-accent: #171a1f;
--r-land: #9fb08a;
--r-people: #cf9670;
--r-gold: #d6a54a;
--r-food: #9fbb4e;
--r-arms: #b0a397;
--r-influence: #8ea0d1;
--r-timber: #9fb05e;
--r-stone: #b3ad9c;
--r-amber: #e39a52;
--r-salt: #9dbfd4;
--r-knowledge: #a59ccf;
--h1: #d4696a; --h2: #d9884a; --h3: #d9ac4c; --h4: #b7bd5c;
--h5: #8fb35a; --h6: #5fbb8e; --h7: #58b3bb; --h8: #6f93c6;
--h9: #8188d6; --h10: #a888d8; --h11: #cf7bab; --h12: #cf7089;
--t-plain: #262a24;
--t-hill: #34302a;
--t-marsh: #24302d;
--t-water: #1c262e;
--t-line: rgba(237, 230, 214, .10);
--t-hatch: rgba(237, 230, 214, .16);
--grain-a: rgba(255, 255, 255, .022);
--grain-b: rgba(0, 0, 0, .14);
--grain-c: rgba(255, 255, 255, .012);
--grain-wash: rgba(255, 255, 255, .03);
--season-tint: hsl(var(--season-hue) 30% 60% / .05);
}
}
/* =====================================================================
3. TOKENS — dark "dusk", pinned by the toggle (must win both ways)
===================================================================== */
:root[data-theme="dark"] {
color-scheme: dark;
--paper: #171a1f;
--paper-2: #1f232a;
--paper-3: #262b33;
--paper-4: #2f353f;
--ink: #ede6d6;
--ink-2: #cfc6b3;
--ink-3: #9b927f;
--ink-4: #6f6858;
--rule: rgba(237, 230, 214, .16);
--rule-soft: rgba(237, 230, 214, .08);
--rule-strong: rgba(237, 230, 214, .48);
--shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 10px 30px -14px rgba(0, 0, 0, .7);
--shadow-sm: 0 1px 2px rgba(0, 0, 0, .45);
--oxblood: #d0665f;
--oxblood-2: #e0837c;
--verdigris: #6fb59f;
--ochre: #d6a54a;
--rust: #d46a58;
--dusk: #8ea0d1;
--on-accent: #171a1f;
--r-land: #9fb08a;
--r-people: #cf9670;
--r-gold: #d6a54a;
--r-food: #9fbb4e;
--r-arms: #b0a397;
--r-influence: #8ea0d1;
--r-timber: #9fb05e;
--r-stone: #b3ad9c;
--r-amber: #e39a52;
--r-salt: #9dbfd4;
--r-knowledge: #a59ccf;
--h1: #d4696a; --h2: #d9884a; --h3: #d9ac4c; --h4: #b7bd5c;
--h5: #8fb35a; --h6: #5fbb8e; --h7: #58b3bb; --h8: #6f93c6;
--h9: #8188d6; --h10: #a888d8; --h11: #cf7bab; --h12: #cf7089;
--t-plain: #262a24;
--t-hill: #34302a;
--t-marsh: #24302d;
--t-water: #1c262e;
--t-line: rgba(237, 230, 214, .10);
--t-hatch: rgba(237, 230, 214, .16);
--grain-a: rgba(255, 255, 255, .022);
--grain-b: rgba(0, 0, 0, .14);
--grain-c: rgba(255, 255, 255, .012);
--grain-wash: rgba(255, 255, 255, .03);
--season-tint: hsl(var(--season-hue) 30% 60% / .05);
}
/* =====================================================================
5. BASE
===================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
margin: 0;
color: var(--ink);
background-color: var(--paper);
font: var(--fs-base)/1.5 var(--font-body);
font-variant-numeric: tabular-nums lining-nums;
-webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5 { font-family: var(--font-display); font-weight: 500; letter-spacing: -.005em; margin: 0; line-height: var(--lh-tight); }
h1 { font-size: var(--fs-4xl); letter-spacing: -.02em; line-height: 1; }
h2 { font-size: var(--fs-xl); }
h3 { font-size: var(--fs-lg); }
h4 { font-size: var(--fs-md); }
p { margin: 0; }
p + p { margin-top: .7em; }
a { color: var(--oxblood); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 2px; }
code, pre, kbd, samp { font-family: var(--font-mono); font-size: .92em; }
hr { border: 0; border-top: 1px solid var(--rule); margin: var(--sp-4) 0; }
::selection { background: color-mix(in srgb, var(--oxblood) 24%, transparent); }
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
outline: 2px solid var(--oxblood);
outline-offset: 2px;
border-radius: var(--radius-sm);
}
/* glyphs: one stroke weight, currentColor, 24-unit grid */
svg.i {
width: 1em; height: 1em; vertical-align: -.15em; flex: none;
fill: none; stroke: currentColor; stroke-width: 1.7;
stroke-linecap: round; stroke-linejoin: round;
}
svg.i.filled { fill: currentColor; stroke: none; }
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: .001ms !important; animation-iteration-count: 1 !important;
transition-duration: .001ms !important; scroll-behavior: auto !important;
}
}
/* =====================================================================
6. COMPONENTS
===================================================================== */
/* ---- layout ---------------------------------------------------- */
.wrap { max-width: 1280px; margin: 0 auto; padding: 0 28px; }
.wrap--narrow { max-width: 860px; }
.grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--sp-6) 36px; }
.col-3 { grid-column: span 3; } .col-4 { grid-column: span 4; } .col-5 { grid-column: span 5; }
.col-6 { grid-column: span 6; } .col-7 { grid-column: span 7; } .col-8 { grid-column: span 8; }
.col-9 { grid-column: span 9; } .col-12 { grid-column: span 12; }
/* ---- .grain — paper fibre from gradients only, no images -------- */
.grain {
background-image:
radial-gradient(circle at 20% 30%, var(--grain-a) 0 1px, transparent 1.6px),
radial-gradient(circle at 70% 60%, var(--grain-b) 0 1px, transparent 1.6px),
radial-gradient(circle at 45% 85%, var(--grain-c) 0 1px, transparent 1.4px),
linear-gradient(180deg, var(--grain-wash), transparent 40vh),
linear-gradient(0deg, var(--season-tint), var(--season-tint));
background-size: 7px 9px, 11px 7px, 13px 11px, 100% 100%, 100% 100%;
background-attachment: scroll, scroll, scroll, scroll, scroll;
}
/* ---- .masthead / .dateline / .wheel ----------------------------- */
.masthead { padding-top: 26px; }
.masthead .top { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-5); }
.masthead .world { font-size: var(--fs-xs); letter-spacing: .18em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; }
.masthead h1 .amp { font-style: italic; color: var(--ink-3); font-weight: 400; }
.masthead .tools { display: flex; align-items: center; gap: 10px; }
.dateline {
margin-top: 10px; font-family: var(--font-display); font-size: 17px; color: var(--ink-2);
display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 10px;
}
.dateline b { font-weight: 500; color: var(--ink); }
.dateline .sep { color: var(--ink-4); }
.dateline .live {
display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-body);
font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--verdigris); font-weight: 700;
}
.dateline .live i {
width: 7px; height: 7px; border-radius: 50%; background: var(--verdigris);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--verdigris) 22%, transparent);
}
.wheel { display: flex; align-items: center; gap: var(--sp-3); text-align: right; }
.wheel .cap { font-family: var(--font-display); font-size: 14px; line-height: var(--lh-tight); color: var(--ink-2); }
.wheel .cap b { display: block; font-size: 17px; color: var(--ink); font-weight: 500; }
.wheel .cap span { color: var(--ink-3); font-size: var(--fs-sm); }
.wheel svg { width: 66px; height: 66px; flex: none; }
/* ---- .nav — one bar, serif small caps, counts in sans ----------- */
.nav {
margin-top: 18px; border-top: 1px solid var(--rule-strong); border-bottom: 1px solid var(--rule);
display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
}
.nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; }
.nav ul::-webkit-scrollbar { display: none; }
.nav a {
display: block; padding: 11px 16px 10px; font-family: var(--font-display); font-size: var(--fs-md);
font-variant-caps: small-caps; letter-spacing: .08em; color: var(--ink-2);
border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap;
}
.nav a:hover { color: var(--ink); text-decoration: none; }
.nav a[aria-current], .nav a.is-active { color: var(--oxblood); border-bottom-color: var(--oxblood); }
.nav .count {
font-family: var(--font-body); font-variant-caps: normal; letter-spacing: 0;
font-size: 11px; color: var(--ink-4); margin-left: 6px; vertical-align: 2px;
}
.nav .right { display: flex; align-items: center; gap: var(--sp-3); font-size: var(--fs-sm); color: var(--ink-3); padding-right: 4px; white-space: nowrap; }
/* ---- .section-head --------------------------------------------- */
.section-head {
display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3);
padding-bottom: var(--sp-2); border-bottom: 1px solid var(--rule-strong); margin-bottom: 14px;
}
.section-head h2 { font-size: var(--fs-xl); }
.section-head h2 em { font-style: italic; color: var(--ink-3); font-weight: 400; margin-left: var(--sp-2); font-size: var(--fs-md); }
.section-head .more { font-family: var(--font-display); font-variant-caps: small-caps; letter-spacing: .08em; font-size: 14px; }
/* ---- .sheet — the generic card ---------------------------------- */
.sheet {
background: var(--paper-2); border: 1px solid var(--rule); border-radius: var(--radius);
box-shadow: var(--shadow); padding: var(--sp-4) 18px;
}
.sheet--flat { box-shadow: none; background: transparent; }
.sheet > header { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-2); margin-bottom: var(--sp-2); }
/* ---- .seal — the ONE status idiom (wax disc + word) ------------- */
.seal {
display: inline-flex; flex-direction: column; align-items: center; gap: 3px;
width: 64px; color: var(--seal-c, var(--st-open)); flex: none;
}
.seal svg { width: 56px; height: 56px; color: inherit; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .25)); }
.seal svg .glyph { fill: none; stroke: rgba(255, 255, 255, .92); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.seal .word {
font-family: var(--font-display); font-variant-caps: small-caps; letter-spacing: .1em;
font-size: 12.5px; font-weight: 600; color: inherit;
}
.seal--sm { width: 42px; } .seal--sm svg { width: 34px; height: 34px; } .seal--sm .word { font-size: 10.5px; }
.seal--open { --seal-c: var(--st-open); }
.seal--passed { --seal-c: var(--st-pass); }
.seal--failed { --seal-c: var(--st-fail); }
.seal--pending { --seal-c: var(--st-pending); }
/* ---- .decree — a proposal / law / office card ------------------- */
.decree {
position: relative; background: var(--paper-2); border: 1px solid var(--rule);
border-radius: var(--radius); box-shadow: var(--shadow); padding: var(--sp-4) 18px 14px;
display: grid; grid-template-columns: 1fr 64px; gap: var(--sp-2) 14px;
}
.decree .kind { font-size: var(--fs-xs); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; }
.decree .kind b { color: var(--ink-2); }
.decree h3 { font-size: var(--fs-lg); line-height: 1.3; margin-top: var(--sp-1); }
.decree .desc { color: var(--ink-2); font-size: 14px; line-height: 1.5; margin-top: 6px; }
.decree .seal { grid-row: 1 / 3; grid-column: 2; justify-self: end; align-self: start; }
.decree .meta {
grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px;
margin-top: var(--sp-2); padding-top: 10px; border-top: 1px solid var(--rule-soft);
font-size: var(--fs-sm); color: var(--ink-3);
}
.decree .meta b { color: var(--ink); font-weight: 600; }
.decree .closes { color: var(--st-open); font-weight: 600; }
.decree.is-settled h3 { color: var(--ink-2); }
/* the tally bar: yes / no / abstain, widths set inline */
.tally { display: flex; height: 6px; width: 140px; border-radius: 3px; overflow: hidden; background: var(--paper-4); flex: none; }
.tally i { display: block; height: 100%; }
.tally .yes { background: var(--st-pass); }
.tally .no { background: var(--st-fail); }
.tally .abstain { background: var(--ink-4); }
/* the voter initials: one disc per household, colour = their vote */
.initials { display: inline-flex; gap: var(--sp-1); }
.initials i {
display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%;
font: 600 10.5px/1 var(--font-body); font-style: normal; color: #fff;
}
.initials i.yes { background: var(--st-pass); }
.initials i.no { background: var(--st-fail); }
.initials i.abstain { background: var(--ink-4); }
/* ---- .charsheet — an agent as a character sheet ------------------ */
.charsheet {
background: var(--paper-2); border: 1px solid var(--rule); border-top: 3px solid var(--house, var(--ink-3));
border-radius: var(--radius); box-shadow: var(--shadow); padding: var(--sp-4) var(--sp-4) 14px;
display: flex; flex-direction: column; gap: 10px;
}
.charsheet .head { display: flex; gap: var(--sp-3); align-items: center; }
.charsheet .name { font-family: var(--font-display); font-size: 21px; line-height: 1.1; }
.charsheet .title { font-family: var(--font-display); font-style: italic; color: var(--ink-3); font-size: 14px; }
.charsheet .title.none { color: var(--ink-4); }
.charsheet .bio { font-family: var(--font-display); font-size: 14px; line-height: 1.5; color: var(--ink-3); font-style: italic; }
.charsheet .land { font-size: 12.5px; color: var(--ink-3); line-height: 1.5; }
.charsheet .foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px var(--sp-2); font-size: 12px; color: var(--ink-4); margin-top: auto; padding-top: 6px; }
/* what an agent says it is doing — never blank, degrade to an italic line */
.pursuing { font-size: 14px; line-height: 1.45; color: var(--ink-2); }
.pursuing .label { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; margin-right: 6px; }
.pursuing.none { font-family: var(--font-display); font-style: italic; color: var(--ink-4); }
/* the resource row */
.holdings { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px 10px; padding-top: 10px; border-top: 1px solid var(--rule-soft); }
.holdings .h { display: flex; align-items: center; gap: 6px; font-size: 13.5px; color: var(--ink-2); }
.holdings .h svg.i { color: var(--r, var(--ink-3)); }
.holdings .h b { font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.holdings .h small { color: var(--ink-4); font-size: 11px; }
/* ---- .sigil — the heraldic disc (see /ui/sigil.js) --------------- */
.sigil {
display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
color: #fff; font-family: var(--font-display); font-size: var(--fs-base); font-weight: 600;
background: var(--house, var(--ink-3)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25); flex: none;
}
.sigil--lg { width: 44px; height: 44px; font-size: var(--fs-xl); }
.sigil--sm { width: 20px; height: 20px; font-size: 11px; }
.sigil--none { background: transparent; color: var(--ink-3); box-shadow: inset 0 0 0 1px var(--rule); }
/* ---- .ledger — the standings / any numeric table ---------------- */
table.ledger { width: 100%; border-collapse: collapse; font-size: 14px; }
.ledger th {
text-align: right; font-weight: 600; font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
color: var(--ink-3); padding: 6px var(--sp-2) var(--sp-2); border-bottom: 1px solid var(--rule); white-space: nowrap;
}
.ledger th:first-child, .ledger td:first-child { text-align: left; padding-left: var(--sp-1); }
.ledger td { padding: 9px var(--sp-2); text-align: right; border-bottom: 1px solid var(--rule-soft); font-variant-numeric: tabular-nums; color: var(--ink-2); }
.ledger tbody tr:hover td { background: var(--paper-3); }
.ledger td.who { color: var(--ink); font-family: var(--font-display); font-size: var(--fs-md); white-space: nowrap; }
.ledger td.who .sigil { vertical-align: middle; margin-right: var(--sp-2); }
.ledger td .rank { display: inline-block; width: 18px; color: var(--ink-4); font-size: 12px; font-family: var(--font-body); vertical-align: middle; }
.ledger td.score { font-family: var(--font-display); font-size: 17px; color: var(--ink); }
.ledger .frac { color: var(--ink-4); font-size: 12px; }
.ledger .delta { display: block; font-size: 11px; color: var(--verdigris); }
.ledger .delta.down { color: var(--rust); }
.ledger th svg.i, .ledger td svg.i { width: 13px; height: 13px; margin-right: 3px; opacity: .8; }
/* ---- .msg — a message in the square, and its reply -------------- */
.msg { display: grid; grid-template-columns: 34px 1fr; gap: var(--sp-3); }
.msg + .msg { margin-top: 14px; }
.msg .sigil { margin-top: 2px; }
.msg .from { display: flex; align-items: baseline; gap: var(--sp-2); flex-wrap: wrap; }
.msg .from b { font-family: var(--font-display); font-size: var(--fs-md); font-weight: 500; }
.msg .from .ch { font-size: 12px; color: var(--ink-3); }
.msg .from .when { font-size: 12px; color: var(--ink-4); margin-left: auto; }
.msg .body { margin-top: 3px; font-size: 14.5px; line-height: var(--lh-body); color: var(--ink-2); }
.msg .quote { margin: var(--sp-1) 0 6px; padding: var(--sp-1) 10px; border-left: 2px solid var(--rule); color: var(--ink-3); font-size: var(--fs-sm); font-style: italic; }
.msg .quote b { font-style: normal; color: var(--ink-2); font-weight: 600; }
.msg.system .from b { color: var(--ink-3); font-style: italic; font-weight: 400; }
.msg.system .body { color: var(--ink-3); }
/* ---- .tile — one figure, its label, its note -------------------- */
.tile { background: var(--paper-2); border: 1px solid var(--rule); border-radius: var(--radius); padding: var(--sp-3) 14px; }
.tile .v { font-family: var(--font-display); font-size: var(--fs-2xl); line-height: 1.1; font-weight: 500; }
.tile .v small { font-size: var(--fs-base); color: var(--ink-4); }
.tile .l { margin-top: var(--sp-1); font-size: var(--fs-xs); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; display: flex; align-items: center; gap: 6px; }
.tile .n { margin-top: 3px; font-size: 12.5px; color: var(--ink-3); }
/* ---- .chip ------------------------------------------------------ */
.chip {
display: inline-flex; align-items: center; gap: 5px; padding: 2px var(--sp-2);
border-radius: var(--radius-pill); background: var(--paper-3); font-size: var(--fs-xs);
color: var(--ink-2); font-weight: 600; letter-spacing: .02em;
}
.chip svg.i { width: 12px; height: 12px; }
.chip--house { background: color-mix(in srgb, var(--house, var(--ink-3)) 16%, transparent); color: var(--ink); }
.chip--open { color: var(--st-open); background: color-mix(in srgb, var(--ochre) 14%, transparent); }
/* ---- .btn ------------------------------------------------------- */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
padding: 7px 14px; border-radius: var(--radius); border: 1px solid var(--rule-strong);
background: transparent; color: var(--ink); font: 600 var(--fs-sm)/1.2 var(--font-body);
letter-spacing: .02em; cursor: pointer; text-decoration: none !important;
}
.btn:hover { background: var(--paper-3); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.btn--primary { background: var(--oxblood); border-color: var(--oxblood); color: var(--on-accent); }
.btn--primary:hover { background: var(--oxblood-2); border-color: var(--oxblood-2); }
.btn--quiet { border-color: transparent; color: var(--ink-2); }
.btn--quiet:hover { border-color: var(--rule); }
.btn--danger { border-color: var(--rust); color: var(--rust); }
.btn--small { padding: 4px 10px; font-size: 12px; }
.btn--icon { padding: 7px; }
.btn--icon svg.i { width: 18px; height: 18px; }
.btn--block { width: 100%; }
/* ---- .field / .label / inputs ------------------------------------ */
.field { display: flex; flex-direction: column; gap: 5px; margin-bottom: var(--sp-3); }
.label { font-size: var(--fs-xs); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; }
.field .hint { font-size: 12px; color: var(--ink-4); }
.field .err { font-size: 12px; color: var(--rust); }
.input, .select, .textarea,
.field input:not([type=checkbox]):not([type=radio]), .field select, .field textarea {
width: 100%; padding: 8px 10px; border: 1px solid var(--rule-strong); border-radius: var(--radius);
background: var(--paper-2); color: var(--ink); font: var(--fs-base)/1.4 var(--font-body);
font-variant-numeric: tabular-nums lining-nums;
}
.textarea, .field textarea { min-height: 96px; resize: vertical; }
.input::placeholder, .field textarea::placeholder { color: var(--ink-4); }
.input:hover, .field input:hover, .field select:hover { border-color: var(--ink-3); }
.field--row { flex-direction: row; align-items: center; gap: var(--sp-2); }
/* ---- .tabs / .tab ------------------------------------------------ */
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--rule); overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab {
appearance: none; background: transparent; border: 0; border-bottom: 2px solid transparent;
margin-bottom: -1px; padding: 8px 14px 7px; cursor: pointer; white-space: nowrap;
font-family: var(--font-display); font-size: var(--fs-base); font-variant-caps: small-caps;
letter-spacing: .08em; color: var(--ink-3);
}
.tab:hover { color: var(--ink); }
.tab[aria-selected="true"], .tab.is-active { color: var(--ink); border-bottom-color: var(--oxblood); }
.tab .count { font-family: var(--font-body); font-variant-caps: normal; letter-spacing: 0; font-size: 11px; color: var(--ink-4); margin-left: 5px; }
/* ---- .drawer — a side panel (mobile nav, inspector) -------------- */
.drawer {
position: fixed; inset: 0 auto 0 0; width: min(340px, 86vw); z-index: 60;
background: var(--paper-2); border-right: 1px solid var(--rule); box-shadow: var(--shadow);
padding: var(--sp-5) var(--sp-4); overflow-y: auto;
transform: translateX(-102%); transition: transform .18s ease;
}
.drawer.is-open { transform: none; }
.drawer--right { inset: 0 0 0 auto; border-right: 0; border-left: 1px solid var(--rule); transform: translateX(102%); }
.drawer > header { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); margin-bottom: var(--sp-4); padding-bottom: var(--sp-2); border-bottom: 1px solid var(--rule); }
.drawer-scrim { position: fixed; inset: 0; z-index: 55; background: rgba(0, 0, 0, .35); }
/* ---- .strip — a run of facts under a figure or map --------------- */
.strip {
display: flex; flex-wrap: wrap; align-items: center; gap: 6px 22px;
font-family: var(--font-display); font-size: var(--fs-base); color: var(--ink-2);
padding: 10px 0; border-top: 1px solid var(--rule-soft);
}
.strip b { font-weight: 500; color: var(--ink); }
.strip .sep { color: var(--ink-4); }
.strip--boxed { background: var(--paper-3); border: 1px solid var(--rule); border-radius: var(--radius); padding: 8px 12px; }
/* ---- .log — the launcher / desk activity log --------------------- */
.log {
font-family: var(--font-mono); font-size: 12px; line-height: 1.55; color: var(--ink-2);
background: var(--paper-3); border: 1px solid var(--rule); border-radius: var(--radius);
padding: 10px 12px; overflow: auto; max-height: 340px; white-space: pre-wrap; word-break: break-word;
}
.log .row { display: grid; grid-template-columns: 78px 1fr; gap: var(--sp-2); }
.log .t { color: var(--ink-4); }
.log .ok { color: var(--verdigris); }
.log .warn { color: var(--ochre); }
.log .bad { color: var(--rust); }
/* ---- .empty — one italic sentence, never a wall of zeroes -------- */
.empty {
padding: 18px; border: 1px dashed var(--rule); border-radius: var(--radius);
color: var(--ink-3); font-family: var(--font-display); font-style: italic;
font-size: var(--fs-base); text-align: center;
}
/* ---- .swatch — colour documentation ------------------------------ */
.swatch { width: 92px; }
.swatch i { display: block; height: 42px; border-radius: var(--radius); border: 1px solid var(--rule); }
.swatch span { display: block; font-size: var(--fs-xs); color: var(--ink-3); margin-top: var(--sp-1); }
.swatch span b { display: block; color: var(--ink); font-weight: 600; }
/* ---- footer ------------------------------------------------------ */
.foot {
margin: var(--sp-7) 0 40px; padding-top: var(--sp-4); border-top: 1px solid var(--rule);
display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--sp-2) 20px;
font-family: var(--font-display); font-size: 14px; color: var(--ink-3);
}
/* =====================================================================
7. UTILITIES
===================================================================== */
.num { font-variant-numeric: tabular-nums lining-nums; }
.muted { color: var(--ink-3); }
.faint { color: var(--ink-4); }
.sc { font-family: var(--font-display); font-variant-caps: small-caps; letter-spacing: .06em; }
.eyebrow { font-size: var(--fs-xs); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; }
.serif { font-family: var(--font-display); }
.mono { font-family: var(--font-mono); }
.hairline { border: 0; border-top: 1px solid var(--rule); margin: 0; }
.double-rule { border: 0; border-top: 3px double var(--rule); margin: 0; }
.row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.stack { display: grid; gap: 14px; }
.right { text-align: right; }
.nowrap { white-space: nowrap; }
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* colour hooks usable inline: style="--house:var(--h4)" / "--r:var(--r-gold)" */
.c-open { color: var(--st-open); } .c-pass { color: var(--st-pass); }
.c-fail { color: var(--st-fail); } .c-house { color: var(--house, var(--ink-3)); }
/* =====================================================================
8. RESPONSIVE — 1100 (tablet: one column) / 720 (phone)
===================================================================== */
@media (max-width: 1100px) {
.grid { gap: var(--sp-5); }
.col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9 { grid-column: span 12; }
.wrap { padding: 0 20px; }
h1 { font-size: 44px; }
.nav .right > span { display: none; } /* keep the action, drop the aside */
}
@media (max-width: 720px) {
.wrap { padding: 0 var(--sp-4); }
.masthead { padding-top: var(--sp-4); }
.masthead .top { flex-direction: column; align-items: flex-start; gap: var(--sp-3); }
h1 { font-size: var(--fs-3xl); }
.dateline { font-size: var(--fs-base); }
.wheel { text-align: left; flex-direction: row-reverse; justify-content: flex-end; }
.nav { position: relative; overflow: hidden; }
.nav::after { content: ""; position: absolute; right: 0; top: 0; bottom: 0; width: 36px; background: linear-gradient(90deg, transparent, var(--paper)); pointer-events: none; }
.nav .right { display: none; }
.nav a { padding: 10px 11px 9px; font-size: var(--fs-base); }
.nav .count { display: none; }
.section-head { flex-wrap: wrap; }
.section-head h2 { font-size: 21px; }
.section-head h2 em { display: block; margin-left: 0; font-size: 14px; }
.grid { gap: 26px; }
.decree { grid-template-columns: 1fr 52px; padding: 14px; }
.seal { width: 52px; } .seal svg { width: 46px; height: 46px; } .seal .word { font-size: 11px; }
.holdings { grid-template-columns: repeat(2, 1fr); }
.ledger { font-size: var(--fs-sm); }
.ledger th, .ledger td { padding-left: 5px; padding-right: 5px; }
.ledger .opt { display: none; }
.msg .from .when { margin-left: 0; }
.sheet, .charsheet { padding: 14px; }
.foot { margin-top: var(--sp-6); }
}