/* The admin's one stylesheet, on the game's visual language (docs/art/visual-language/drop-loot-style-spec.json,
   VISUAL_LANGUAGE_HARD_RULES.md): only the seventeen palette tokens and their tints, shades and neutrals
   (docs/admin/check_visuals.py classifies every literal below with the game's own verifier), the two shipped
   faces self-hosted from wwwroot/fonts with their licences, and the game's chrome as the home sheets show it:
   dark stone panels with copper rims and gold corner brackets, violet ribbon plates for section titles, ember
   for the primary action, teal for information, red for danger, cream ink on dark, heavy uppercase slab display
   and bold tabular numerals. Dark is the default; the light option is a parchment built from neutrals and the
   same copper. No framework, no build step. */

@font-face {
  font-family: "Drop Loot Display";
  src: url("fonts/DropLootDisplay-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Drop Loot Text";
  src: url("fonts/DropLootText-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

:root {
  /* The seventeen tokens, verbatim. */
  --ink: #0A1621;
  --deep-neutral: #212223;
  --stone-deep: #202526;
  --stone-neutral: #4B4A4C;
  --wood: #5A3B2B;
  --wood-shadow: #523625;
  --cobalt: #0051DB;
  --moss: #376700;
  --violet: #451FB4;
  --copper: #883F1E;
  --copper-shadow: #58311E;
  --copper-deep: #3F291C;
  --red-danger: #C10204;
  --ember: #F85C01;
  --gold: #FAA001;
  --teal: #00B4C1;
  --forest: #1C6201;

  /* Tints and shades of those hues, and neutrals (greys and near-black/white). */
  --gold-tint: #FCC65A;
  --teal-tint: #4CCFDA;
  --ember-tint: #FF7A2B;
  --moss-tint: #5C9A1F;
  --red-tint: #E03A3C;
  --violet-shade: #2E1578;
  --cobalt-tint: #4C86EA;
  --cream: #EFEAE0;
  --cream-muted: #B9B3A6;
  --keyline: #121212;
  --stone-edge: #3A4043;
  --stone-hover: #2A2E31;
  --nav-ink: #0D171F;

  /* What the page uses (dark, the game's scheme). */
  --bg: var(--ink);
  --panel: var(--stone-deep);
  --panel-recess: var(--deep-neutral);
  --text: var(--cream);
  --text-muted: var(--cream-muted);
  --heading: var(--gold);
  --link: var(--teal-tint);
  --rim: var(--copper);
  --rim-shadow: var(--copper-shadow);
  --rim-deep: var(--copper-deep);
  --bracket: var(--gold);
  --input-bg: var(--ink);
  --nav-bg: var(--nav-ink);
  --ribbon: var(--violet);
  --ribbon-text: var(--cream);
  --font-display: "Drop Loot Display", serif;
  --font-text: "Drop Loot Text", sans-serif;
  color-scheme: dark;
}

/* The parchment: neutral warm off-whites, the same copper rims, ink text. */
:root[data-theme="light"] {
  --bg: #E6DFD2;
  --panel: #F2EDE3;
  --panel-recess: #E9E2D6;
  --text: var(--ink);
  --text-muted: #5B5A5C;
  --heading: var(--copper);
  --link: #0A4FC2;
  --input-bg: #FFFFFF;
  --nav-bg: #DDD5C6;
  --stone-edge: #C9C0AF;
  --stone-hover: #E2DBCD;
  --keyline: #8A8378;
  --ribbon: var(--violet);
  --ribbon-text: var(--cream);
  color-scheme: light;
}

* { box-sizing: border-box; }
html { height: 100%; }
body {
  margin: 0;
  min-height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-text);
  font-weight: 600;
  font-size: 15px;
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
}
a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 2px; }
h1, h2, h3 { margin: 0 0 0.5rem; line-height: 1.15; font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
h1 { font-size: 1.7rem; color: var(--heading); text-shadow: 0 1px 0 var(--keyline); }
h1:focus { outline: none; }
h2 { font-size: 1.05rem; margin-top: 1.4rem; color: var(--heading); }
h3 { font-size: 0.9rem; color: var(--text); }
p { margin: 0.4rem 0; }
strong { font-weight: 700; }
code, pre, .mono { font-family: var(--font-text); font-variant-numeric: tabular-nums; letter-spacing: 0.01em; }
code { background: var(--panel-recess); padding: 0 0.3em; border-radius: 4px; border: 1px solid var(--stone-edge); }
pre { background: var(--input-bg); border: 1px solid var(--stone-edge); border-radius: 6px; padding: 0.75rem; overflow-x: auto; font-size: 0.85em; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Section titles: the violet ribbon plate with a copper rim, uppercase slab, cream text. */
h2.ribbon, .ribbon {
  display: inline-block;
  margin: 0 0 0.75rem;
  padding: 0.35rem 1.4rem;
  background: var(--ribbon);
  color: var(--ribbon-text);
  font-family: var(--font-display);
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border: 2px solid var(--rim);
  box-shadow: inset 0 0 0 1px var(--keyline), 0 2px 0 var(--rim-deep);
  clip-path: polygon(0 0, 100% 0, calc(100% - 9px) 50%, 100% 100%, 0 100%, 9px 50%);
  text-shadow: 0 1px 0 var(--violet-shade);
}

/* Shell */
.shell { display: grid; grid-template-columns: 264px 1fr; grid-template-rows: 60px 1fr auto; min-height: 100vh; }
.appbar {
  grid-column: 1 / -1;
  display: flex; align-items: center; gap: 1rem;
  padding: 0 1rem;
  background: var(--nav-bg);
  border-bottom: 3px solid var(--rim);
  box-shadow: 0 1px 0 var(--keyline), 0 3px 0 var(--rim-deep);
  position: sticky; top: 0; z-index: 20;
}
.brand { display: flex; align-items: center; gap: 0.6rem; font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.05em; color: var(--heading); text-decoration: none; font-size: 1rem; }
.brand-mark { width: 34px; height: 34px; border-radius: 8px; border: 2px solid var(--rim); box-shadow: 0 0 0 1px var(--keyline); display: block; }
.brand-env { font-family: var(--font-text); font-size: 0.7rem; padding: 0.1rem 0.5rem; border-radius: 999px; background: var(--panel-recess); color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.08em; border: 1px solid var(--stone-edge); }
.appbar-spacer { flex: 1; }
.appbar .who { display: flex; align-items: center; gap: 0.5rem; font-size: 0.9rem; color: var(--text-muted); }
.nav {
  grid-row: 2 / 4;
  background: var(--nav-bg);
  border-right: 2px solid var(--rim-deep);
  padding: 0.75rem 0;
  overflow-y: auto;
}
.nav-group { padding: 0.8rem 0.9rem 0.25rem; font-family: var(--font-display); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--heading); }
.nav a { display: block; padding: 0.45rem 0.9rem; margin: 2px 0.5rem; border-radius: 6px; color: var(--text); text-decoration: none; border: 1px solid transparent; }
.nav a:hover { background: var(--stone-hover); border-color: var(--stone-edge); }
.nav a.active { background: var(--panel); color: var(--heading); border-color: var(--rim); box-shadow: inset 0 0 0 1px var(--keyline); }
.nav .nav-sub { display: block; font-size: 0.78rem; color: var(--text-muted); font-weight: 600; margin-top: 0.1rem; }
.main { padding: 1.25rem 1.5rem 2rem; min-width: 0; }
.footer { grid-column: 2; padding: 0.75rem 1.5rem; border-top: 2px solid var(--rim-deep); color: var(--text-muted); font-size: 0.8rem; }
/* Two classes so the button rule below cannot out-rank it: the menu toggle exists only on a narrow screen. */
.appbar .drawer-toggle { display: none; }
@media (max-width: 900px) {
  .shell { grid-template-columns: 1fr; grid-template-rows: auto 1fr auto; }
  .appbar { flex-wrap: wrap; row-gap: 0.4rem; column-gap: 0.6rem; padding: 0.5rem 0.75rem; position: static; }
  .appbar .who { min-width: 0; overflow-wrap: anywhere; }
  .brand { min-width: 0; }
  .nav { display: none; grid-row: auto; border-right: 0; border-bottom: 2px solid var(--rim-deep); }
  .appbar .drawer-toggle { display: inline-block; }
  #drawer:checked ~ .nav { display: block; }
  .footer { grid-column: 1; overflow-wrap: anywhere; }
  .main { padding: 1rem; }
  .page-intro code, td.small, .card .value.small, .kv dd { overflow-wrap: anywhere; }
}

/* Breadcrumbs and page header */
.crumbs { display: flex; flex-wrap: wrap; gap: 0.35rem; font-size: 0.85rem; color: var(--text-muted); margin-bottom: 0.5rem; list-style: none; padding: 0; }
.crumbs li + li::before { content: "›"; margin-right: 0.35rem; color: var(--text-muted); }
.crumbs a { color: var(--text-muted); }
.page-header { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }

/* One-line purpose under the title; details live in the "?" tooltips and the Guide, never in prose. */
.lede { display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap; color: var(--text); font-size: 1rem; margin: 0.1rem 0 1rem; max-width: 84ch; }
.lede .lede-guide { font-size: 0.85rem; white-space: nowrap; }
a.term { color: var(--link); text-decoration: underline dotted; text-decoration-thickness: 1px; }
a.term:hover { text-decoration-style: solid; }

/* The "?" an operator hovers for a detail, so nothing needs a paragraph beside it. */
.hint-dot { display: inline-flex; align-items: center; justify-content: center; width: 1.2rem; height: 1.2rem; border-radius: 50%; border: 1px solid var(--stone-edge); background: var(--panel-recess); color: var(--text-muted); font-family: var(--font-display); font-size: 0.72rem; line-height: 1; cursor: help; user-select: none; vertical-align: 0.05em; }
.hint-dot:hover, .hint-dot:focus-visible { color: var(--heading); border-color: var(--rim); }

/* "How to <task>": the common task as numbered steps tied to the controls, not a description. */
.howto { background: var(--panel-recess); border: 1px solid var(--stone-edge); border-left: 4px solid var(--gold); border-radius: 4px; padding: 0.5rem 0.95rem 0.6rem; margin: 0 0 1rem; }
.howto h3 { font-family: var(--font-display); font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--heading); margin: 0.15rem 0 0.35rem; }
.howto ol { margin: 0; padding-left: 1.25rem; display: grid; gap: 0.25rem; font-size: 0.9rem; }
.howto ol strong { color: var(--text); }

/* Inline flow diagram: how the thing works at a glance, palette tokens only, no image. */
.diagram { width: 100%; height: auto; display: block; margin: 0.25rem 0 1rem; max-width: 820px; }
.diagram .node { fill: var(--panel-recess); stroke: var(--rim); stroke-width: 2; }
.diagram .node.act { fill: var(--ember); stroke: var(--rim); }
.diagram .node.sys { fill: var(--stone-deep); stroke: var(--rim-shadow); }
.diagram .node.out { fill: var(--violet); stroke: var(--rim); }
.diagram .node.data { fill: var(--input-bg); stroke: var(--rim-shadow); }
.diagram text { fill: var(--text); font-family: var(--font-text); font-size: 13px; font-weight: 600; }
.diagram text.lab { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.04em; font-size: 12px; }
.diagram text.on-act { fill: var(--ink); }
.diagram text.on-out { fill: var(--ribbon-text); }
.diagram text.cap { fill: var(--text-muted); font-size: 11px; font-weight: 600; }
.diagram .flow { stroke: var(--gold); stroke-width: 2.5; fill: none; }
.diagram .arrowhead { fill: var(--gold); }

/* On/off toggles: one click flips a product or a placement, its state always visible. */
.toggles { display: grid; gap: 0.4rem; }
.toggles.cols { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.toggle { position: relative; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 0.75rem; padding: 0.4rem 0.7rem; border: 1px solid var(--stone-edge); border-radius: 6px; background: var(--panel-recess); cursor: pointer; }
.toggle:hover { border-color: var(--rim); }
.toggle .name { font-weight: 700; overflow-wrap: anywhere; }
.toggle .name .sub { display: block; font-weight: 600; font-size: 0.78rem; color: var(--text-muted); }
.toggle input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.toggle .switch { display: inline-flex; align-items: center; gap: 0.5rem; }
.toggle .track { width: 46px; height: 24px; border-radius: 999px; background: var(--moss); border: 2px solid var(--rim-shadow); position: relative; box-shadow: inset 0 0 0 1px var(--keyline); }
.toggle .knob { position: absolute; top: 1px; right: 1px; width: 18px; height: 18px; border-radius: 50%; background: var(--cream); box-shadow: 0 1px 0 var(--keyline); }
.toggle .state { font-family: var(--font-display); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; min-width: 2.4rem; }
.toggle .state .on { color: var(--moss-tint); }
.toggle .state .off { display: none; color: var(--red-tint); }
.toggle input:checked ~ .switch .track { background: var(--stone-neutral); }
.toggle input:checked ~ .switch .knob { right: auto; left: 1px; }
.toggle input:checked ~ .switch .state .on { display: none; }
.toggle input:checked ~ .switch .state .off { display: inline; }
.toggle input:focus-visible ~ .switch .track { outline: 3px solid var(--cobalt-tint); outline-offset: 2px; }
:root[data-theme="light"] .toggle .state .on { color: var(--forest); }
:root[data-theme="light"] .toggle .state .off { color: var(--red-danger); }
/* enable-polarity: checked means ON (rewarded ads, purchases), the mirror of the disable toggles above. */
.toggle.enable .track { background: var(--stone-neutral); }
.toggle.enable .knob { right: auto; left: 1px; }
.toggle.enable .state .on { display: none; }
.toggle.enable .state .off { display: inline; }
.toggle.enable input:checked ~ .switch .track { background: var(--moss); }
.toggle.enable input:checked ~ .switch .knob { left: auto; right: 1px; }
.toggle.enable input:checked ~ .switch .state .on { display: inline; }
.toggle.enable input:checked ~ .switch .state .off { display: none; }

/* A big obvious primary action row that leads a page. */
.toolbar { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: flex-end; margin: 0 0 1rem; }
.fieldset { border: 1px solid var(--stone-edge); border-radius: 6px; padding: 0.75rem 0.9rem; margin: 0 0 1rem; }
.fieldset > legend { font-family: var(--font-display); font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--heading); padding: 0 0.4rem; }
.fieldset .row { display: flex; align-items: baseline; gap: 0.4rem; flex-wrap: wrap; }

/* Panels: dark stone with a copper rim, a hard keyline inside, gold corner brackets. */
.panel {
  position: relative;
  background: var(--panel);
  border: 3px solid var(--rim);
  box-shadow: inset 0 0 0 1px var(--keyline), 0 3px 0 var(--rim-deep);
  border-radius: 4px;
  padding: 1rem 1.1rem;
  margin-bottom: 1.1rem;
}
.panel::before, .panel::after {
  content: "";
  position: absolute;
  width: 14px; height: 14px;
  border: 3px solid var(--bracket);
  pointer-events: none;
}
.panel::before { top: -3px; left: -3px; border-right: 0; border-bottom: 0; }
.panel::after { bottom: -3px; right: -3px; border-left: 0; border-top: 0; }
.panel > h2:first-child { margin-top: 0; }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0.85rem; margin-bottom: 1rem; }
.card {
  background: var(--panel);
  border: 2px solid var(--rim-shadow);
  box-shadow: inset 0 0 0 1px var(--keyline), 0 2px 0 var(--rim-deep);
  border-radius: 4px;
  padding: 0.9rem 1rem;
}
.card .label { font-family: var(--font-display); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); }
.card .value { font-family: var(--font-display); font-size: 1.6rem; color: var(--heading); margin: 0.2rem 0; text-shadow: 0 1px 0 var(--keyline); }
.card .value.small { font-size: 1rem; word-break: break-all; font-family: var(--font-text); }
.card .hint { font-size: 0.8rem; color: var(--text-muted); }
.table-wrap { overflow-x: auto; }
table.data { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
table.data th, table.data td { padding: 0.45rem 0.6rem; border-bottom: 1px solid var(--stone-edge); text-align: left; vertical-align: top; }
table.data th { font-family: var(--font-display); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--heading); border-bottom: 2px solid var(--rim-shadow); }
table.data td.num, table.data th.num { text-align: right; font-variant-numeric: tabular-nums; }
table.data td.small { overflow-wrap: anywhere; }
table.data tr:hover td { background: var(--stone-hover); }
.pager { display: flex; gap: 0.75rem; align-items: center; margin-top: 0.75rem; font-size: 0.9rem; flex-wrap: wrap; }

/* States */
.state { padding: 0.9rem 1rem; border-radius: 4px; border: 2px dashed var(--stone-edge); color: var(--text-muted); background: var(--panel-recess); }
.state.empty strong { color: var(--text); }
.state .glyph { color: var(--teal); margin-right: 0.35rem; }
.state.loading::before { content: ""; display: inline-block; width: 12px; height: 12px; margin-right: 0.5rem; border-radius: 50%; border: 2px solid var(--text-muted); border-top-color: transparent; animation: spin 0.9s linear infinite; vertical-align: -2px; }
.state.error { border: 2px solid var(--red-danger); color: var(--text); background: var(--panel-recess); box-shadow: inset 4px 0 0 var(--red-danger); }
.state.error .code { font-size: 0.85em; color: var(--text-muted); }
@keyframes spin { to { transform: rotate(360deg); } }
.notice { padding: 0.7rem 0.9rem; border-radius: 4px; margin-bottom: 1rem; border: 2px solid; box-shadow: inset 0 0 0 1px var(--keyline); }
.notice.ok { border-color: var(--moss); background: var(--panel-recess); }
.notice.ok::before { content: "✓ "; color: var(--moss-tint); }
.notice.error { border-color: var(--red-danger); background: var(--panel-recess); }
.notice.error::before { content: "✕ "; color: var(--red-tint); }

/* Chips: a glyph and a word, never colour alone. */
.chip { display: inline-block; padding: 0.1rem 0.55rem; border-radius: 999px; font-size: 0.75rem; letter-spacing: 0.02em; border: 1px solid var(--stone-edge); background: var(--panel-recess); color: var(--text); white-space: nowrap; }
.chip .glyph { margin-right: 0.25rem; }
.chip.on { border-color: var(--moss-tint); color: var(--moss-tint); }
.chip.off { border-color: var(--red-tint); color: var(--red-tint); }
.chip.warn { border-color: var(--gold); color: var(--gold); }
.chip.info { border-color: var(--teal-tint); color: var(--teal-tint); }
.chip.neutral { color: var(--text-muted); }
:root[data-theme="light"] .chip.on { color: var(--forest); border-color: var(--forest); }
:root[data-theme="light"] .chip.off { color: var(--red-danger); border-color: var(--red-danger); }
:root[data-theme="light"] .chip.warn { color: var(--copper); border-color: var(--copper); }
:root[data-theme="light"] .chip.info { color: #0A4FC2; border-color: #0A4FC2; }
:root[data-theme="light"] .notice.ok::before { color: var(--forest); }
:root[data-theme="light"] .notice.error::before { color: var(--red-danger); }
:root[data-theme="light"] .state .glyph { color: var(--copper); }

/* Forms */
form.stack { display: grid; gap: 0.85rem; max-width: 680px; }
form.inline { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: flex-end; }
label.field { display: grid; gap: 0.25rem; font-size: 0.85rem; color: var(--text-muted); }
label.field > .label { font-family: var(--font-display); font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--heading); }
label.check { display: grid; grid-template-columns: auto 1fr; gap: 0.2rem 0.6rem; align-items: center; font-size: 0.95rem; color: var(--text); }
label.check input { grid-row: 1; }
label.check .help { grid-column: 2; }
input[type="text"], input[type="number"], input[type="search"], input[type="file"], select, textarea {
  width: 100%; padding: 0.5rem 0.65rem; border-radius: 4px; border: 2px solid var(--rim-shadow);
  background: var(--input-bg); color: var(--text); font: inherit; font-weight: 600;
  box-shadow: inset 0 0 0 1px var(--keyline);
}
select[multiple] { min-height: 9rem; }
input:focus, select:focus, textarea:focus, button:focus-visible, a:focus-visible { outline: 3px solid var(--cobalt-tint); outline-offset: 1px; }
.help { font-size: 0.8rem; color: var(--text-muted); font-weight: 600; line-height: 1.4; }
.action { display: grid; gap: 0.35rem; justify-items: start; }
button, .button {
  display: inline-block; padding: 0.55rem 1.1rem; border-radius: 4px;
  border: 2px solid var(--rim); box-shadow: inset 0 0 0 1px var(--keyline), 0 2px 0 var(--rim-deep);
  background: var(--stone-neutral); color: var(--cream); font-family: var(--font-display); font-size: 0.85rem;
  text-transform: uppercase; letter-spacing: 0.05em; cursor: pointer; text-decoration: none; line-height: 1.2;
}
button:hover, .button:hover { box-shadow: inset 0 0 0 1px var(--keyline), 0 0 0 2px var(--gold-tint), 0 2px 0 var(--rim-deep); }
button:active { transform: translateY(1px); box-shadow: inset 0 0 0 1px var(--keyline), 0 1px 0 var(--rim-deep); }
button.primary, .button.primary { background: var(--ember); color: var(--ink); }
button.danger, .button.danger { background: var(--red-danger); color: var(--cream); }
button.confirm { background: var(--moss); color: var(--cream); }
button.ghost { background: var(--panel-recess); color: var(--text); border-color: var(--rim-shadow); }
button:disabled { opacity: 0.6; cursor: not-allowed; }
:root[data-theme="light"] button, :root[data-theme="light"] .button { background: var(--stone-neutral); color: var(--cream); }
:root[data-theme="light"] button.ghost { background: var(--panel-recess); color: var(--text); }

/* Dialog */
dialog { border: 3px solid var(--rim); border-radius: 4px; background: var(--panel); color: var(--text); padding: 1.25rem; max-width: 540px; width: calc(100% - 2rem); box-shadow: inset 0 0 0 1px var(--keyline), 0 4px 0 var(--rim-deep); }
dialog::backdrop { background: rgba(10, 22, 33, 0.7); }
dialog dl { margin: 0.75rem 0 1rem; }
dialog .confirm-row { display: grid; grid-template-columns: 11rem 1fr; gap: 0.5rem; padding: 0.3rem 0; border-bottom: 1px solid var(--stone-edge); }
dialog dt { color: var(--text-muted); text-transform: capitalize; }
dialog dd { margin: 0; word-break: break-word; }
dialog .actions { display: flex; justify-content: flex-end; gap: 0.5rem; flex-wrap: wrap; }

/* Charts (inline SVG and bars) */
.chart { width: 100%; height: auto; display: block; }
.chart .bar { fill: var(--gold); }
.chart .bar.alt { fill: var(--teal); }
.chart .bar.neg { fill: var(--red-danger); }
.chart text { fill: var(--text); font-size: 12px; font-family: var(--font-text); }
.chart text.muted { fill: var(--text-muted); }
.chart line.axis { stroke: var(--stone-edge); }
.bars { display: grid; gap: 0.35rem; }
.bar-row { display: grid; grid-template-columns: minmax(7rem, 12rem) 1fr 6rem; align-items: center; gap: 0.6rem; font-size: 0.85rem; }
.bar-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-muted); }
.bar-track { height: 14px; background: var(--input-bg); border: 1px solid var(--stone-edge); border-radius: 3px; overflow: hidden; }
.bar-fill { height: 100%; background: var(--gold); }
.bar-fill.alt { background: var(--teal); }
.bar-fill.neg { background: var(--red-danger); }
.bar-value { text-align: right; font-variant-numeric: tabular-nums; }

/* Sign-in */
.signin { min-height: 100vh; display: grid; place-items: center; padding: 2rem; }
.signin .panel { max-width: 520px; width: 100%; }
.signin .brand { margin-bottom: 1rem; }

/* Guide */
.guide section { margin-bottom: 1.5rem; scroll-margin-top: 70px; }
.guide dl.glossary { display: grid; grid-template-columns: max-content 1fr; gap: 0.5rem 1rem; }
.guide dl.glossary dt { color: var(--heading); font-family: var(--font-display); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; scroll-margin-top: 70px; }
.guide dl.glossary dd { margin: 0; }
.guide .toc { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; font-size: 0.9rem; list-style: none; padding: 0; }
@media (max-width: 700px) {
  .guide dl.glossary { grid-template-columns: 1fr; }
  .guide dl.glossary dd { margin-bottom: 0.5rem; }
  .bar-row { grid-template-columns: minmax(5rem, 8rem) 1fr 4.5rem; }
  dialog .confirm-row { grid-template-columns: 1fr; }
  .page-header { flex-direction: column; }
}

.kv { display: grid; grid-template-columns: max-content 1fr; gap: 0.35rem 1rem; font-size: 0.9rem; }
.kv dt { color: var(--text-muted); }
.kv dd { margin: 0; word-break: break-word; }
@media (max-width: 700px) { .kv { grid-template-columns: 1fr; } }
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1rem; }
.muted { color: var(--text-muted); }
.right { text-align: right; }
.small { font-size: 0.85rem; }
.mt { margin-top: 0.9rem; }
details summary { cursor: pointer; color: var(--text-muted); }

/* Economy numbers: one small card per section, the values the game plays on. */
.numbers-card { background: var(--panel-recess); border: 1px solid var(--stone-edge); border-radius: 6px; padding: 0.6rem 0.8rem; }
.numbers-card h3 { font-family: var(--font-display); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--heading); margin: 0.1rem 0 0.4rem; }
.numbers-card table.data { font-size: 0.85rem; }
.numbers-card table.data th, .numbers-card table.data td { padding: 0.3rem 0.5rem; }