/* Dwarven Hold — "Deep Ledger" theme. Dwarf Fortress (Steam) chrome over a pixel map, EU4 information architecture.
   Source of truth: docs/design/deep-ledger/hold-theme.css (+ README.md §3). Loaded before app.css and workspace.css.

   Self-hosted fonts (SIL OFL 1.1, licences beside the files), from github.com/google/fonts at commit
   7085eb89a950e85db5b166b7a58d414544b4140c:
   - fonts/PixelifySans-Medium.woff2 — static wght=500 instance of
       https://raw.githubusercontent.com/google/fonts/7085eb89a950e85db5b166b7a58d414544b4140c/ofl/pixelifysans/PixelifySans%5Bwght%5D.ttf
       (source sha256 9ba86cd010a4de309d263ceff8e8044092c9db7efda869620cb9ff1c4389e8a5)
       made with fontTools 4.61.1 `varLib.instancer` (wght=500), saved as woff2 (full glyph set, no subsetting);
       woff2 sha256 50057b1844883e8c244ed3b8136bec1230bb01326735064a2c905f8a46195e39
   - fonts/IBMPlexMono-Regular.woff2 — woff2 of
       https://raw.githubusercontent.com/google/fonts/7085eb89a950e85db5b166b7a58d414544b4140c/ofl/ibmplexmono/IBMPlexMono-Regular.ttf
       (source sha256 6a3412f058c7d8dfd9170c41e85ade48e5156ecb89356110ca57a0a27734af46);
       woff2 sha256 4b633c1065a56947935fc0206b8bbe8c16b08aedd722c87f15562e82a74fe9f6
   - fonts/OFL-PixelifySans.txt, fonts/OFL-IBMPlexMono.txt — the families' OFL.txt from the same commit.
   - fonts/UnifontSymbols.woff2 — the UI symbols Pixelify Sans lacks, from GNU Unifont 18.0.01 (owner-approved 2026-10-06):
       https://unifoundry.com/pub/unifont/unifont-18.0.01/font-builds/unifont-18.0.01.otf
       (source sha256 88d0a14d4aa9a96419720b39ba5da921a59560d76d4ec7d523acc06ed85cd3c2; its .sig verified good against
       Paul Hardy's key 95D2 E9AB 8740 D804 6387 FD15 1A09 227B 1F43 5A33). Glyphs dual-licensed SIL OFL 1.1 / GPLv2+
       with the font embedding exception since 13.0.04; shipped here under the OFL (fonts/OFL-Unifont.txt).
       Subset with fontTools 4.61.1 `pyftsubset --unicodes=<the range below> --flavor=woff2 --layout-features=''
       --name-IDs=0,1,2,3,4,5,6,13,14 --no-hinting --desubroutinize --no-prune-unicode-ranges` (20 glyphs, 1196 bytes);
       woff2 sha256 177267e3bc5531114ca0128935ae56d26eb7e1a61f0625e0f7a2333c609e2e03.
   It joins the "Pixelify Sans" family with a unicode-range of exactly those codepoints (← ↑ → ↓ ⇄ ⇒ ≋ ⌂ ⌖ ═ ■ ▤ ▦ ▸ ► ▾ ◆ ☰
   ✓ ✕, each checked absent from the Pixelify cmap) and is declared after the Pixelify face, so it is consulted first
   for them: one visible pixel family, no system-font fallback for symbols.
   - fonts/DeepLedgerDigits.woff — the digits 0-9, drawn for Deep Ledger by tools/digits/make_digits.py (fontTools 4.65.0;
       the script says why). Pixelify's own 5/S, 2/Z and 1/7 differ by a sub-pixel notch that vanishes at 13-17px without
       smoothing; these keep its grid, height, baseline and weight, and are tabular (0.592em, Pixelify's digit advance).
       Original work of this project, no third-party glyphs. 920 bytes;
       woff sha256 70d28c825523760bdb066e5cf2d6b84a00bffd2f4caca7ccdff343a69af02772.
   It joins "Pixelify Sans" with unicode-range U+30-39 and is declared last, so it is consulted first for digits. */
@font-face {
  font-family: "Pixelify Sans"; font-style: normal; font-weight: 500; font-display: block;
  src: url("../fonts/PixelifySans-Medium.woff2") format("woff2");
}
@font-face {
  font-family: "Pixelify Sans"; font-style: normal; font-weight: 500; font-display: block;
  src: url("../fonts/UnifontSymbols.woff2") format("woff2");
  unicode-range: U+2190-2193, U+21C4, U+21D2, U+224B, U+2302, U+2316, U+2550, U+25A0, U+25A4, U+25A6, U+25B8, U+25BA, U+25BE,
    U+25C6, U+2630, U+2713, U+2715;
}
@font-face {
  font-family: "Pixelify Sans"; font-style: normal; font-weight: 500; font-display: block;
  src: url("../fonts/DeepLedgerDigits.woff") format("woff");
  unicode-range: U+30-39;
}
@font-face {
  font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: block;
  src: url("../fonts/IBMPlexMono-Regular.woff2") format("woff2");
}

:root {
  color-scheme: dark;
  /* ---- reference palette ---- */
  --ink-0: #000000;          /* panel fill */
  --ink-1: #1e1d24;          /* map void / app background */
  --ink-2: #26252c;          /* large window body (ledger) */
  --gold: #c9a43a;           /* panel frame, tab outline */
  --gold-dark: #6e5a1e;      /* inner frame line, dividers */
  --gold-fill: #d8b848;      /* active tab, + button, scrollbar thumb */
  --gold-hi: #f4e08a;        /* bevel highlight on gold */
  --gold-lo: #8a6a1e;        /* bevel shadow on gold */
  --umber: #7c5214;          /* section header bar */
  --umber-hi: #a87a2a;
  --umber-lo: #3e2808;
  --row: #5f5c70;            /* list row */
  --row-hi: #8a879c;         /* row top edge */
  --row-lo: #2e2c38;         /* row bottom edge */
  --row-sel: #6f6c84;        /* selected / active row */
  --slot: #2b2836;           /* icon slot, progress track */
  --slot-edge: #1a1822;
  --slot-ring: #46425a;
  --control: #3c3a48;        /* neutral button */
  --control-edge: #7a7880;
  --control-hi: #77748a;
  --go: #1f5e3e;             /* affirmative action button */
  --go-edge: #0a2a18;
  --go-hi: #3a8a5e;
  --go-ink: #6ff0a8;
  --stop: #6a1e1a;           /* destructive action button */
  --stop-ink: #ffb0a0;

  /* ---- text ---- */
  --text: #f4f0e0;
  --text-2: #c0c0c0;         /* labels on black */
  --text-3: #a19eaa;         /* hints, timestamps (min. use) */
  --text-on-row: #e0dce8;    /* secondary text on --row */
  --text-name: #b0a830;      /* entity name line on sheets */
  --text-on-gold: #2a2008;

  /* ---- semantic (DF curses palette) ---- */
  --ok: #55ff55;             /* producing, attached, enabled */
  --warn: #f4d03a;           /* waiting, low stock, supply request */
  --info: #55ffff;           /* storing, stage names, events */
  --idle: #c0c0c0;           /* stopped */
  --bad: #ff5555;            /* fault, paused, no road, full output */
  --accent-m: #ff77ff;
  --accent-br: #c08a2a;

  /* ---- commodity identity (never reuse for status) ---- */
  --c-barley: #e8d27a; --c-oats: #d8c08e; --c-water: #55ffff; --c-ale: #f4d03a;
  --c-iron-ore: #e0904a; --c-coal: #a8a6b4; --c-ingots: #d8dce8;
  --c-copper-ore: #ff7a4a; --c-tin: #b4dcdc; --c-bronze: #e0a050;
  /* real-data commodities without a design colour (owner decision 2026-10-05); anything else is --c-other */
  --c-stone: #c4b0e8; --c-sword: #9fb0ff; --c-other: #e8a0c8;
  /* forestry (2026-10-07): bark for logs, sawn wood for timber */
  --c-logs: #a8744a; --c-timber: #e4b98a;
  /* livestock (2026-10-08): meat, milk, eggshell and cheese */
  --c-meat: #e06060; --c-milk: #f4f4ec; --c-eggs: #c8a878; --c-cheese: #ffa830;

  /* ---- type ---- */
  --font-ui: "Pixelify Sans", ui-monospace, monospace;
  --font-code: "IBM Plex Mono", ui-monospace, monospace;
  --fs-xs: 13px; --fs-sm: 14px; --fs-md: 15px; --fs-lg: 17px; --fs-xl: 18px; --fs-stat: 24px; --fs-hero: 26px;

  /* ---- spacing (2px base; only these values) ---- */
  --s-1: 2px; --s-2: 4px; --s-3: 6px; --s-4: 8px; --s-5: 10px; --s-6: 12px; --s-7: 16px; --s-8: 24px;
  /* ---- radius: square by default ---- */
  --r-0: 0; --r-tab: 0;       /* tabs get their shape from clip-path, not radius */
  --r-round: 50%;            /* alert orbs and status orbs only */
  /* ---- frame widths ---- */
  --frame: 2px; --frame-inner: 1px; --hair: 1px;
  /* ---- geometry ---- */
  --tile: 16px;              /* map tile at zoom 1 */
  --row-h: 30px;
  --slot-w: 30px;
  --gap: var(--s-1);         /* rows stack with a 2px gap */
  --pad: var(--s-3);         /* panel inner padding */
  --hit: 44px;               /* minimum touch target on coarse pointers */
  /* ---- motion ---- */
  --tick: 250ms;             /* simulation redraw */
  --flicker: 250ms;          /* 2-frame sprite animation (4 Hz) */
  /* ---- theme-dependent ---- */
  --text-shadow: 1px 1px 0 #000;
  --onmap-bg: #000000d0;     /* nameplates, readout, tooltips over the map: same in both themes */
}

/* Light "parchment" theme: chrome only. The map, nameplates, map overlays and alert orbs stay dark. */
[data-theme="light"] {
  color-scheme: light;
  --ink-0: #efe4c8; --ink-2: #e6d8b8;
  --gold: #8a6a1e; --gold-dark: #b89a50;
  --row: #d9ccae; --row-hi: #f4ead2; --row-lo: #a8987a; --row-sel: #c8b88e;
  --slot: #bfae8a; --slot-edge: #8a7a5a; --slot-ring: #e0d4b8;
  --control: #d0c2a0; --control-edge: #8a7a5a; --control-hi: #f0e6cc;
  --text: #2a2018; --text-2: #4a3e2c; --text-3: #6a5e48; --text-on-row: #3a3020; --text-name: #6a5a10;
  --ok: #1e7a2e; --warn: #8a6400; --info: #0e6a7a; --idle: #5a5866; --bad: #a8241c; --accent-m: #8a2a8a; --accent-br: #7c5214;
  --c-barley: #8a6e10; --c-oats: #7a6440; --c-water: #0e6a7a; --c-ale: #8a6400; --c-iron-ore: #9a4e14; --c-coal: #4a4858;
  --c-ingots: #4a5060; --c-copper-ore: #a8401a; --c-tin: #3a6a6a; --c-bronze: #8a5a1a;
  --c-stone: #5a4a8a; --c-sword: #2e4aa8; --c-other: #8a3a6a;
  --c-logs: #6a3e1c; --c-timber: #7a5a1e;
  --c-meat: #8a2020; --c-milk: #5a5a6a; --c-eggs: #6a4e2a; --c-cheese: #9a5a00;
  --text-shadow: 0 1px 0 #ffffff80;
}
[data-theme="light"] .dh-head { color: #f4f0e0; text-shadow: 1px 1px 0 #000; }
[data-theme="light"] ::-webkit-scrollbar-track { background: #d0c2a0; }

body { background: var(--ink-1); color: var(--text); font: 500 var(--fs-md)/1.25 var(--font-ui); letter-spacing: .01em;
  text-shadow: var(--text-shadow); -webkit-font-smoothing: none; }
.dh-onmap { background: var(--onmap-bg); color: #f4f0e0; text-shadow: 1px 1px 0 #000; }
button { font: inherit; text-shadow: inherit; }
a { color: var(--warn); } a:hover { color: #fff27a; }

/* ---- panel: black fill, double gold frame ---- */
.dh-panel { background: var(--ink-0); border: 2px solid var(--gold); padding: var(--pad);
  box-shadow: 0 0 0 1px #000, inset 0 0 0 2px var(--ink-0), inset 0 0 0 3px var(--gold-dark); }
.dh-panel--flush-top { border-top: 0; }

/* ---- section header ---- */
.dh-head { padding: 3px 10px; background: var(--umber); border-top: 1px solid var(--umber-hi); border-bottom: 1px solid var(--umber-lo);
  display: flex; justify-content: space-between; gap: 8px; }

/* ---- list row with icon slot ---- */
.dh-row { display: flex; align-items: stretch; min-height: var(--row-h); margin-top: var(--gap); background: var(--row);
  border: 0; border-top: 1px solid var(--row-hi); border-bottom: 1px solid var(--row-lo); color: var(--text); text-align: left; width: 100%; padding: 0; }
.dh-row[aria-selected="true"], .dh-row.is-active { background: var(--row-sel); outline: 1px solid var(--warn); outline-offset: -1px; }
button.dh-row { cursor: pointer; } button.dh-row:hover { background: var(--row-sel); }
.dh-row__slot { width: var(--slot-w); flex-shrink: 0; display: grid; place-items: center; background: var(--slot); border-right: 2px solid var(--slot-edge); }
.dh-row__body { flex: 1; min-width: 0; padding: 3px 8px; display: flex; flex-direction: column; }
.dh-row__meta { padding: 3px 8px; color: var(--text-on-row); white-space: nowrap; }
.dh-row__sub { font-size: var(--fs-sm); color: var(--text-on-row); }

/* ---- swatches / dots ---- */
.dh-dot { width: 10px; height: 10px; box-shadow: 0 0 0 1px #000; display: inline-block; }
.dh-chip { width: 12px; height: 8px; box-shadow: 0 0 0 1px #000; display: inline-block; }
.dh-orb { width: 16px; height: 16px; border-radius: 50%; box-shadow: inset -2px -2px 0 #0006, 0 0 0 1px #000; display: inline-block; }

/* ---- buttons ---- */
.dh-btn { padding: 1px 10px; min-height: 24px; background: var(--control); border: 1px solid var(--control-edge); box-shadow: inset 1px 1px 0 var(--control-hi); color: var(--text); cursor: pointer; }
.dh-btn--go { background: var(--go); border-color: var(--go-edge); box-shadow: inset 0 1px 0 var(--go-hi); color: var(--go-ink); }
.dh-btn--stop { background: var(--stop); border-color: var(--go-edge); color: var(--stop-ink); }
.dh-btn--plus, .dh-btn--minus { width: 22px; height: 22px; padding: 0; font-size: 20px; line-height: 1; text-shadow: none; cursor: pointer; }
.dh-btn--plus { background: var(--gold-fill); border: 1px solid var(--gold-dark); box-shadow: inset 1px 1px 0 var(--gold-hi), inset -1px -1px 0 var(--gold-lo); color: var(--text-on-gold); }
.dh-btn--minus { background: #9a98a4; border: 1px solid var(--control); box-shadow: inset 1px 1px 0 #c8c6d0, inset -1px -1px 0 #5a5866; color: #2a2830; }
.dh-btn:disabled { color: #5a5866; cursor: not-allowed; }
.dh-tool { width: 46px; height: 46px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0;
  background: var(--control); border: 1px solid var(--slot-edge); box-shadow: inset 1px 1px 0 #ffffff22; color: var(--text); cursor: pointer; line-height: 1; }
.dh-tool[aria-pressed="true"] { background: var(--row-sel); border-color: var(--warn); color: var(--warn); }
.dh-tool__key { font-size: var(--fs-xs); color: var(--text-2); }
.dh-check { width: 24px; height: 22px; padding: 0; background: var(--slot); border: 1px solid var(--slot-edge); color: var(--text-3); }
.dh-check[aria-checked="true"] { background: var(--gold-fill); color: var(--text-on-gold); }

/* ---- trapezoid tabs (gold outline via clip-path on two layers) ---- */
.dh-tabs { display: flex; padding: 0 2px; }
.dh-tab { flex: 1; min-width: 0; margin-right: -2px; padding: 1px 1px 0; background: var(--gold); border: 0; cursor: pointer;
  clip-path: polygon(6px 0, calc(100% - 6px) 0, 100% 100%, 0 100%); }
.dh-tab > span { display: block; padding: 3px 8px 2px; font-size: var(--fs-sm); white-space: nowrap; background: var(--ink-2); color: var(--text);
  clip-path: polygon(6px 0, calc(100% - 6px) 0, 100% 100%, 0 100%); }
.dh-tab[aria-selected="true"] > span { background: var(--gold-fill); color: var(--text-on-gold); text-shadow: none; }
.dh-tabs + .dh-tabpanel { border-top: 2px solid var(--gold); padding-top: 6px; }

/* ---- meters ---- */
.dh-meter { height: 10px; background: var(--slot); border: 1px solid var(--slot-edge); }
.dh-meter > i { display: block; height: 100%; background: var(--warn); box-shadow: inset 0 2px 0 #fff27a; }
.dh-meter--stock { height: 7px; position: relative; }
.dh-meter--stock > .reserved { position: absolute; inset: 0 auto 0 0; background: repeating-linear-gradient(90deg, #000 0 2px, transparent 2px 4px); }
.dh-stagebar { display: flex; gap: 2px; } .dh-stagebar > i { height: 5px; background: var(--slot); } /* flex = stage seconds */

/* ---- alerts (left edge) ---- */
.dh-alert { width: 40px; height: 40px; border-radius: 50%; padding: 0; font-size: 24px; line-height: 1; cursor: pointer;
  background: radial-gradient(circle at 40% 35%, #3a3846, #16151c); border: 2px solid var(--gold); box-shadow: 0 0 0 1px #000, inset 0 0 0 1px #000; }

/* ---- tooltip ---- */
.dh-tip { position: fixed; z-index: 50; width: 290px; padding: 5px 9px 7px; pointer-events: none; background: var(--ink-0); border: 2px solid var(--gold);
  box-shadow: 0 0 0 1px #000, inset 0 0 0 2px #000, inset 0 0 0 3px var(--gold-dark); }
.dh-tip__title { color: var(--warn); border-bottom: 1px solid var(--gold-dark); padding-bottom: 2px; margin-bottom: 3px; }
.dh-tip__line { display: flex; justify-content: space-between; gap: 10px; }

/* ---- large window (ledger) ---- */
.dh-window { position: relative; background: var(--ink-2); border: 2px solid var(--gold); padding: 12px 16px 14px;
  box-shadow: 0 0 0 1px #000, inset 0 0 0 3px var(--ink-2), inset 0 0 0 4px var(--gold-dark), 0 24px 60px #000d; }
.dh-window__knot { position: absolute; top: -9px; width: 16px; height: 16px; transform: rotate(45deg); background: var(--ink-2);
  border: 2px solid var(--gold); box-shadow: inset 0 0 0 2px var(--ink-2), inset 0 0 0 3px var(--gold); }
.dh-scrim { position: absolute; inset: 0; background: #0009; }

/* ---- scrollbars (DF yellow) ---- */
::-webkit-scrollbar { width: 12px; }
::-webkit-scrollbar-track { background: #3a3420; border-left: 1px solid var(--gold-dark); }
::-webkit-scrollbar-thumb { background: var(--gold-fill); border: 1px solid var(--gold-dark); box-shadow: inset 1px 1px 0 var(--gold-hi); }

.dh-code { font: 13px/1.45 var(--font-code); color: var(--ok); white-space: pre-wrap; text-shadow: none; user-select: text; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* ---- additions for the Blazor app (not in the design file) ---- */
/* One weight per family: never fake bold or italic on the pixel face. */
html { font-synthesis: none; }

/* Screen-reader-only text. */
.dh-visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }

/* Visible focus everywhere (README §8). */
:focus-visible { outline: 2px solid var(--warn); outline-offset: 2px; }

/* Coarse pointers: 44px hit targets, 16px inputs (prevents iOS zoom). */
@media (pointer: coarse) {
  .dh-btn, .dh-tool, .dh-tab, .dh-row { min-height: 44px; }
  input, select, textarea { font-size: 16px; }
}