/* theme.css — THE site-wide palette + identity layer.
 *
 * Why this file exists (2026-09-05). The 8-theme system lived inline inside
 * explorer.html, so no other page could reach it: 22 of 27 pages ignored the
 * saved `slon-theme` key entirely, and a user who picked monokai on the
 * explorer got default light everywhere else. Meanwhile styles.css — shared by
 * 12 pages — was a SEPARATE newspaper identity (Times New Roman, 157 hardcoded
 * hex colours, 10 var() uses), which is why /governance rendered as a broadsheet
 * next to a terminal-styled explorer.
 *
 * This file carries the palette ONCE and re-skins styles.css's identity-level
 * selectors to consume it. It must load AFTER styles.css so the cascade lets it
 * win. It deliberately does NOT touch layout — only colour, surface, border and
 * type — so a page keeps its structure and changes only its skin.
 *
 * Adding a theme: add one html[data-theme=...] block. Every page picks it up.
 */

/* ---- palette (verbatim from the explorer, which remains the reference) ---- */
:root{--bg:#f4f1ea;--fg:#000;--card:#fff;--border:#ddd;--muted:#555;--muted2:#888;--accent:#0000ff;--danger:#c00;--font:"Berkeley Mono","Courier New",monospace;
  --space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:22px;--space-6:28px;
  --radius:3px;--radius-lg:6px;--radius-pill:16px;
  --shadow-hard:4px 4px 0 var(--fg);--shadow-hard-sm:3px 3px 0 var(--fg);
  --hover-surface:color-mix(in srgb,var(--accent) 10%,var(--card));}
html[data-theme="dark"]{--bg:#1e1e1e;--fg:#d4d4d4;--card:#252526;--border:#3c3c3c;--muted:#9b9b9b;--muted2:#6a6a6a;--accent:#569cd6;--danger:#f48771;--font:"Cascadia Code",Consolas,monospace;}
html[data-theme="borland"]{--bg:#0000a8;--fg:#ffffff;--card:#0000a8;--border:#5c5cff;--muted:#d0d0d0;--muted2:#a8a8ff;--accent:#ffff54;--danger:#ff5454;--font:"Courier New",monospace;}
html[data-theme="dos"]{--bg:#0a0a0a;--fg:#aaaaaa;--card:#0a0a0a;--border:#444;--muted:#9a9a9a;--muted2:#666;--accent:#ffffff;--danger:#ff5454;--font:"VT323","Courier New",monospace;}
html[data-theme="green"]{--bg:#001000;--fg:#33ff33;--card:#001a00;--border:#0c3c0c;--muted:#27c427;--muted2:#159915;--accent:#9bff9b;--danger:#ff6b6b;--font:"VT323",monospace;}
html[data-theme="amber"]{--bg:#1a0f00;--fg:#ffb000;--card:#1a0f00;--border:#3c2800;--muted:#cc8a00;--muted2:#885c00;--accent:#ffd54a;--danger:#ff6b6b;--font:"VT323",monospace;}
html[data-theme="solarized"]{--bg:#fdf6e3;--fg:#073642;--card:#eee8d5;--border:#d8d2bf;--muted:#657b83;--muted2:#93a1a1;--accent:#268bd2;--danger:#dc322f;--font:"Cascadia Code",monospace;}
html[data-theme="monokai"]{--bg:#272822;--fg:#f8f8f2;--card:#2d2e27;--border:#49483e;--muted:#a59f85;--muted2:#75715e;--accent:#a6e22e;--danger:#f92672;--font:"Cascadia Code",monospace;}

/* ---- identity: surface + type ---- */
body{background:var(--bg)!important;background-color:var(--bg)!important;color:var(--fg)!important;font-family:var(--font)!important;}
.newspaper,.docs-container,.main-content,.content,.hero{background:transparent!important;color:var(--fg)!important;}
a{color:var(--accent);}
code,pre,tt,.mono{font-family:var(--font);}

/* Headings keep their weight and scale; only face and colour change, so the
   page's existing rhythm survives the reskin. */
h1,h2,h3,h4,h5,h6,
.newspaper-title,.headline,.subheading,.section-title,.roadmap-subtitle{
  font-family:var(--font)!important;color:var(--fg)!important;}
.newspaper-title{letter-spacing:-0.5px;}
.tagline,.publication-info .date,.roadmap-subtitle,.muted{color:var(--muted)!important;}

/* ---- masthead + nav ---- */
.masthead{background:transparent!important;border-color:var(--fg)!important;}
.divider,.masthead{border-bottom-color:var(--fg)!important;}
.publication-info{color:var(--muted)!important;}

/* The black blocky nav buttons become the explorer's bordered chips: same shape
   language as the explorer's cards (square, 1px border, hard shadow). */
.buy-slonana-btn,.nav-list a{
  background:var(--card)!important;color:var(--fg)!important;
  border:1px solid var(--fg)!important;border-radius:var(--radius)!important;
  box-shadow:var(--shadow-hard-sm);font-family:var(--font)!important;
  text-transform:uppercase;letter-spacing:.06em;}
.buy-slonana-btn:hover,.nav-list a:hover{
  background:var(--hover-surface)!important;color:var(--fg)!important;
  box-shadow:none;transform:translate(2px,2px);}

/* ---- surfaces ---- */
.box-story,.metric-card,.code-block,.roadmap-phase,.technical-innovation,
.three-column .column,.main-story,.sidebar{
  background:var(--card)!important;color:var(--fg)!important;
  border-color:var(--border)!important;}
.code-block,.code-block pre{background:var(--card)!important;color:var(--fg)!important;
  border:1px solid var(--border)!important;border-radius:var(--radius);}
hr,.divider{border-color:var(--fg)!important;}

/* ---- shared topbar + page shell (the explorer's own component) ----
 * These rules are copied verbatim from explorer.html so an injected topbar is
 * the SAME element, not a lookalike. The explorer keeps its inline copy; this
 * one serves every other page. */
.exp-top{border-bottom:3px double var(--fg);padding:var(--space-4) var(--space-6);
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:var(--space-3);
  background:var(--card);}
.exp-id{display:flex;align-items:center;gap:12px;}
.exp-id h1{font-size:20px;letter-spacing:-0.5px;font-family:var(--font);color:var(--fg);}
.exp-id .sub{font-size:12px;color:var(--muted);}
.exp-nav{display:flex;align-items:center;flex-wrap:wrap;font-size:13px;color:var(--muted2);}
.exp-nav a{display:inline-block;padding:9px 6px;line-height:1.25;color:var(--accent);text-decoration:none;}
.exp-nav a:hover{text-decoration:underline;}
.exp-navcat{position:relative;display:inline-block;}
.exp-navcat-panel{display:none;position:absolute;left:0;top:24px;z-index:60;
  background:var(--card);color:var(--fg);border:1px solid var(--border);padding:8px 4px;
  min-width:170px;text-align:left;box-shadow:0 6px 20px rgba(0,0,0,0.22);font-size:13px;line-height:1.4;}
.exp-navcat-panel a{display:block;padding:5px 4px;white-space:nowrap;text-decoration:none;}
.exp-navcat-panel a:hover{color:var(--accent);}

/* The page's own nav row is redundant once the shared topbar is in. Hidden
   rather than deleted from 11 files, so removing the script restores it. */
html[data-slon-top] .publication-info{display:none!important;}

/* Page shell: the explorer's bordered, centred column. Applied to whatever
   container the page already has -- theme.js deliberately does not reparent
   DOM, because that breaks scripts holding node references. */
html[data-slon-top] .newspaper,
html[data-slon-top] .docs-container,
html[data-slon-top] > body > .content{
  max-width:1500px;margin:0 auto;background:var(--card);min-height:100vh;
  border-left:1px solid var(--fg);border-right:1px solid var(--fg);
  padding:var(--space-5) var(--space-6);}
html[data-slon-top] .exp-top{max-width:1500px;margin:0 auto;
  border-left:1px solid var(--fg);border-right:1px solid var(--fg);}

/* ---- LAYOUT: broadsheet -> explorer ----
 * The palette pass made these pages the right COLOUR and left them the wrong
 * SHAPE, which is why /governance still read as a newspaper next to the
 * explorer: a centred 48px letter-spaced title between 2px rules, a 4px
 * masthead underline, a 3px black divider, and a white box-shadowed sheet.
 * The explorer instead uses a left-aligned ~26px h1 and bordered panels with
 * an uppercase grey title bar.
 *
 * These rules restyle styles.css's own class names, so every page sharing that
 * stylesheet is converted at once rather than one file at a time. Scoped to
 * html[data-slon-top] (set by theme.js) so a page without the shared topbar is
 * left exactly as it was. */
html[data-slon-top] .newspaper{box-shadow:none!important;padding:0!important;}
html[data-slon-top] .masthead{
  text-align:left!important;padding:var(--space-4) var(--space-6) var(--space-3)!important;
  margin:0 0 var(--space-3)!important;border-bottom:1px solid var(--border)!important;}
html[data-slon-top] .newspaper-title{
  font-size:26px!important;font-weight:700!important;letter-spacing:-0.5px!important;
  text-transform:none!important;border:0!important;padding:0!important;
  margin:0 0 6px!important;text-align:left!important;}
html[data-slon-top] .tagline{
  font-style:normal!important;text-align:left!important;color:var(--muted)!important;
  margin:0!important;font-size:14px!important;}
html[data-slon-top] .divider{display:none!important;}
html[data-slon-top] .content{padding:0 var(--space-6) var(--space-6)!important;gap:var(--space-4)!important;}
html[data-slon-top] .headline-section{display:block!important;}

/* Every content block becomes an explorer .panel: 1px border, square, no shadow. */
html[data-slon-top] .main-story,
html[data-slon-top] .box-story,
html[data-slon-top] .benchmark-table,
html[data-slon-top] .roadmap-phase,
html[data-slon-top] .technical-innovation,
html[data-slon-top] .three-column .column,
html[data-slon-top] .slimd{
  border:1px solid var(--fg)!important;border-radius:0!important;
  background:var(--card)!important;box-shadow:none!important;
  margin:0 0 var(--space-5)!important;padding:var(--space-4)!important;}

/* ...and its leading heading becomes the explorer's grey title bar. The
   negative margin pulls it flush to the panel edge, matching .panel h2. */
html[data-slon-top] .main-story > .headline,
html[data-slon-top] .box-story > h4,
html[data-slon-top] .roadmap-phase > h3,
html[data-slon-top] .technical-innovation > h4,
html[data-slon-top] .slimd > .slimd-head{
  margin:calc(var(--space-4) * -1) calc(var(--space-4) * -1) var(--space-4)!important;
  padding:9px var(--space-4)!important;
  background:var(--border)!important;color:var(--fg)!important;
  border-bottom:1px solid var(--fg)!important;
  font-size:15px!important;text-transform:uppercase!important;letter-spacing:1px!important;
  line-height:1.3!important;}
html[data-slon-top] .subheading{
  font-size:13px!important;font-style:normal!important;color:var(--muted)!important;
  text-transform:none!important;letter-spacing:0!important;margin:0 0 var(--space-3)!important;}
/* Body copy: the broadsheet justified/indented setting is a print idiom. */
html[data-slon-top] .lead,
html[data-slon-top] .story-content p,
html[data-slon-top] .slimd-desc{
  text-align:left!important;text-indent:0!important;font-size:13.5px!important;
  line-height:1.6!important;color:var(--fg)!important;}

/* ---- ULTRAWIDE ----
 * The shell is capped at 1500px, so a 3440px display renders the whole site in
 * the middle third with ~1900px of empty margin. Two different things want two
 * different answers, and applying one rule to both is what makes wide layouts
 * bad: DATA (tables, card grids, the node list) genuinely benefits from the
 * width; PROSE does not — a 2000px measure is unreadable regardless of screen.
 *
 * So the shell grows in steps and body copy keeps a reading measure. Steps, not
 * a percentage, because an unbounded shell puts the nav's left and right edges
 * a metre apart on a 5K display. */
/* FLUID, not stepped. Three breakpoints were three chances to be wrong on a
   screen nobody here owns, and the first set was wrong on the one we do: 2100px
   on a 3840px panel wasted 45% of it. min() scales continuously — roughly full
   width on a laptop, capped at 2700px so the nav's two edges never end up a
   metre apart on a 5K display. */
html[data-slon-top] .newspaper,
html[data-slon-top] .docs-container,
html[data-slon-top] .exp-top,
.exp-wrap { max-width: min(94vw, 2700px); }

/* Reading measure, independent of how wide the shell gets: data wants the
   width, prose does not. ch tracks the font, so this survives a theme change. */
@media (min-width: 1500px) {
  html[data-slon-top] .lead,
  html[data-slon-top] .story-content p,
  html[data-slon-top] .slimd-desc,
  html[data-slon-top] .tagline { max-width: 128ch; }
}

/* Card lists get a second column once there is genuinely room for two, so the
   extra width becomes CONTENT rather than margin. Grid, not CSS columns, so a
   card is never split across the gutter. */
@media (min-width: 2400px) {
  html[data-slon-top] .slimd-list,
  html[data-slon-top] .three-column {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 var(--space-5);
    align-items: start;
  }
}

/* ---- UI SCALE ----
 * The frontend has 834 hardcoded `font-size: Npx` declarations, so nothing
 * responds to display density or to a browser's default-font setting: the same
 * page is small on a 300-DPI laptop panel and large on a 120-DPI 4K, with no
 * lever between them. Rewriting 834 declarations to rem is the real fix and is
 * not a one-night job; this makes the existing lever work properly meanwhile.
 *
 * The Theme menu's size buttons previously set body.style.zoom directly, which
 * is non-standard and skews fixed positioning and any JS that measures element
 * geometry. Driving `zoom` on the ROOT from a custom property keeps the control
 * in CSS, leaves body layout alone, and lets a theme or media query adjust the
 * default without touching JS. */
:root { --ui-scale: 1; }
html { zoom: var(--ui-scale); }

/* ---- FORM CONTROLS ----
 * styles.css styles NO form controls at all: zero rules for input, textarea,
 * select or button. So every field on the site fell through to the browser's
 * defaults — white box, black text, blue focus ring — and stayed that way in
 * all 8 themes. On dark/monokai/green that is a white rectangle punched through
 * the page. This is the first rule set that themes them.
 *
 * color-scheme tells the browser to theme its OWN chrome too (scrollbars, the
 * select dropdown list, the caret, autofill) — without it those stay light even
 * when the field is dark. */
:root{color-scheme:light;}
html[data-theme="dark"],html[data-theme="dos"],html[data-theme="green"],
html[data-theme="amber"],html[data-theme="monokai"],html[data-theme="borland"]{color-scheme:dark;}

input,textarea,select,button,
input[type=text],input[type=search],input[type=number],input[type=email],input[type=url]{
  font-family:var(--font);font-size:inherit;
  background:var(--card);color:var(--fg);
  border:1px solid var(--border);border-radius:var(--radius);
  padding:6px 8px;}
input:focus,textarea:focus,select:focus{
  outline:none;border-color:var(--accent);box-shadow:0 0 0 2px var(--hover-surface);}
input::placeholder,textarea::placeholder{color:var(--muted2);opacity:1;}
button,input[type=submit],input[type=button]{
  background:var(--card);color:var(--fg);border:1px solid var(--fg);
  box-shadow:var(--shadow-hard-sm);cursor:pointer;}
button:hover,input[type=submit]:hover,input[type=button]:hover{
  background:var(--hover-surface);}
button:active,input[type=submit]:active{box-shadow:none;transform:translate(2px,2px);}
button:disabled,input:disabled,textarea:disabled,select:disabled{
  color:var(--muted2);border-color:var(--border);cursor:not-allowed;box-shadow:none;}

/* Tables and code read as surfaces too, and were equally unthemed. */
table{border-color:var(--border);color:var(--fg);}
th,td{border-color:var(--border);}
thead th{background:var(--card);color:var(--fg);}
pre,code,kbd,samp{background:var(--card);color:var(--fg);border-color:var(--border);}
::selection{background:var(--accent);color:var(--card);}
hr{border-color:var(--border);}

/* ---- the theme switcher injected by theme.js ---- */
.slon-theme-select{
  font-family:var(--font);font-size:12px;background:var(--card);color:var(--fg);
  border:1px solid var(--fg);border-radius:var(--radius);padding:3px 6px;cursor:pointer;
  margin-left:8px;vertical-align:middle;}

/* ---- EMBEDDED PAGES ----
 * An embedded page sits inside a host panel that already provides the frame, so
 * its own centring margins are wasted width and its side borders double up with
 * the panel's. Measured at 3840px: /map inside the explorer's NETWORK MAP panel
 * rendered ~1200px of map in a 2700px panel. topbar.js sets data-embed. */
html[data-embed] .map-wrap,
html[data-embed] .newspaper,
html[data-embed] .docs-container {
  max-width: 100% !important;
  border-left: 0 !important;
  border-right: 0 !important;
  min-height: 0 !important;
}

/* ---- SUMMARY ROWS -> STAT CARDS ----
 * /governance and /validators rendered their summary as a stacked label/value
 * table: one line per figure, the whole width for a five-word label and a
 * number. The explorer shows the same kind of data as a card grid, which is
 * scannable and uses the width. Both pages emit identical .benchmark-row
 * markup, so this converts both without touching their JS. */
html[data-slon-top] .benchmark-table {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: var(--space-3);
  border: 0 !important;
  padding: 0 !important;
  background: transparent !important;
}
html[data-slon-top] .benchmark-row {
  display: flex; flex-direction: column; gap: 3px;
  border: 1px solid var(--fg); background: var(--card);
  padding: var(--space-2) var(--space-3); margin: 0 !important;
}
html[data-slon-top] .benchmark-row .metric {
  font-size: 11px; text-transform: uppercase; letter-spacing: 1px;
  color: var(--muted2); white-space: nowrap;
}
html[data-slon-top] .benchmark-row .value { font-size: 18px; font-weight: 700; }

/* Static explainer prose is reference material, not the reason anyone opened the
   page. Folded by default so live votes are above the fold; the browser's own
   <details> gives us the toggle with no JS. */
html[data-slon-top] details.gov-about {
  border: 1px solid var(--border); background: var(--card);
  padding: var(--space-3); font-size: 13px;
}
html[data-slon-top] details.gov-about summary {
  cursor: pointer; color: var(--muted);
  text-transform: uppercase; letter-spacing: 1px; font-size: 11px;
}
html[data-slon-top] details.gov-about p { margin: var(--space-3) 0 0; max-width: 110ch; }
/* The roll-call panel does not need the full panel padding twice over. */
html[data-slon-top] #rollcall { overflow-x: auto; }

/* A card reporting a problem must not look like a card reporting a count.
   "DELINQUENT 3" rendered identically to "PROPOSALS 6" while three of four
   validators had stopped voting — the page's most alarming number was its least
   visible one. */
html[data-slon-top] .benchmark-row.alarm { border-color: var(--danger); }
html[data-slon-top] .benchmark-row.alarm .value { color: var(--danger); }
html[data-slon-top] .benchmark-row.alarm .metric { color: var(--danger); opacity: .85; }

/* States a limitation of the data, so it must not read as decoration. */
html[data-slon-top] .gov-caveat {
  border: 1px solid var(--danger); background: var(--card);
  padding: var(--space-3); font-size: 12.5px; line-height: 1.55;
}
html[data-slon-top] .gov-caveat code { border: 0; padding: 0 2px; }