/* ==========================================================================
   Satoshi's Atlas v3.1 — global design system (MINIMAL DARK).
   Deep ink/near-black grounds, warm off-white ink, hairlines, oxidised brass,
   berry and moss accents, and a restrained enamel/gamified layer (stamped
   medallions, segmented ticks, bordered badges).

   Surfaces: #0b0d10 / #11151b / #161b23 · ink #e8e2d4 · muted #9a9385 ·
   gold #c9a35b · berry #b3475c · moss #7f9a72. No parchment, no paper grain,
   no neon or gloss. Engraved surfaces stay gently bubbled (4–10px) with soft
   dark shadows and a subtle top inner highlight.
   ========================================================================== */

:root {
  /* ---- dark ink palette ------------------------------------------------ */
  --bg: #0b0d10;
  --panel: #11151b;
  --panel2: #161b23;
  --ink: #e8e2d4;
  --ink2: #c9c2b2;
  --muted: #9a9385;
  --faint: #6d675c;
  --line: #2a3038;
  --accent: #c9a35b;
  --accent-ink: #d8b775; /* readable brass on dark ink */
  --accent2: #b3475c;
  --good: #7f9a72;
  --good-ink: #9dbb8d; /* readable moss on dark ink */
  --paper: #161b23; /* raised ink surface */
  --gold: #d9b25f;
  --ink-on-fill: #14100a; /* text on brass/gold fills (dark-ink-on-light) */

  /* ---- type (contract) ------------------------------------------------- */
  --font-display: Georgia, 'Times New Roman', serif;
  --font-ui: 'Palatino Linotype', Palatino, Georgia, serif;
  --font-mono: Consolas, 'Courier New', monospace;

  /* ---- aliases so older component CSS cannot drift from the system ---- */
  --panel-2: var(--panel2);
  --berry-soft: #dda3ac;
  --accent-dark: #8f6f36;
  --bad: #7a2e37;
  --radius: var(--r-md);

  /* ---- bubbled surfaces: 4–10px, never pills --------------------------- */
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 10px;
  --bubble-inset: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  --bubble-shadow:
    0 8px 20px rgba(0, 0, 0, 0.45),
    0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-soft:
    0 12px 30px rgba(0, 0, 0, 0.5),
    0 2px 6px rgba(0, 0, 0, 0.4);
  --shadow-lift: 0 24px 56px rgba(0, 0, 0, 0.6);

  /* ---- warm washes (derived from the light palette) -------------------- */
  --brass-06: rgba(201, 163, 91, 0.07);
  --brass-10: rgba(201, 163, 91, 0.12);
  --brass-16: rgba(201, 163, 91, 0.2);
  --brass-32: rgba(201, 163, 91, 0.36);
  --brass-55: rgba(201, 163, 91, 0.55);
  --oxblood-10: rgba(179, 71, 92, 0.1);
  --oxblood-20: rgba(179, 71, 92, 0.18);
  --oxblood-55: rgba(179, 71, 92, 0.5);
  --moss-55: rgba(127, 154, 114, 0.5);
  --gold-10: rgba(217, 178, 95, 0.14);
  --gold-20: rgba(217, 178, 95, 0.24);
  --shade: rgba(0, 0, 0, 0.62);
  --inset-line: inset 0 0 0 1px rgba(0, 0, 0, 0.5);


  color-scheme: dark;
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--bg);
}

* {
  box-sizing: border-box;
}

html,
body,
#root {
  width: 100%;
  height: 100%;
  margin: 0;
}

body {
  background: #07090c;
  color: var(--ink);
  font-family: var(--font-ui);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection {
  background: var(--gold-20);
  color: var(--ink);
}

/* ---- type ---------------------------------------------------------------- */
h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  font-weight: 400;
  color: var(--ink);
  letter-spacing: 0.02em;
}

p {
  margin: 0;
}

strong,
b {
  color: var(--ink);
  font-weight: 600;
}

a {
  color: var(--accent-ink);
  text-decoration: none;
  border-bottom: 1px solid var(--brass-32);
}

a:hover {
  color: var(--ink);
  border-bottom-color: var(--accent);
}

code,
kbd,
samp {
  font-family: var(--font-mono);
  font-size: 0.92em;
  color: var(--ink2);
}

hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 16px 0;
}

/* ---- small type helpers -------------------------------------------------- */
.muted {
  color: var(--muted);
}

.faint {
  color: var(--faint);
}

.small {
  font-size: 12px;
  line-height: 1.5;
}

.mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

.smallcaps {
  font-size: 10px;
  font-variant: small-caps;
  letter-spacing: 0.22em;
  text-transform: lowercase;
  color: var(--muted);
}

.kicker {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
}

.num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

/* ---- layout utilities ---------------------------------------------------- */
.row {
  display: flex;
  gap: 10px;
  align-items: center;
}

.wrap {
  flex-wrap: wrap;
}

.between {
  justify-content: space-between;
}

.grow {
  flex: 1;
}

.stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.hidden {
  display: none !important;
}

/* ---- rules (hairline / double-rule pairs) -------------------------------- */
.rule {
  height: 0;
  border-top: 1px solid var(--line);
}

.rule--double {
  height: 3px;
  border-top: 1px solid var(--brass-55);
  border-bottom: 1px solid var(--line);
}

/* ---- buttons ------------------------------------------------------------- */
button {
  font-family: var(--font-ui);
  font-size: 13px;
  line-height: 1.2;
  letter-spacing: 0.1em;
  font-variant: small-caps;
  color: var(--ink2);
  background: var(--paper);
  border: 1px solid var(--brass-55);
  border-radius: var(--r-sm);
  padding: 8px 16px;
  box-shadow: var(--bubble-inset);
  cursor: pointer;
  transition:
    background-color 0.22s ease-out,
    color 0.22s ease-out,
    border-color 0.22s ease-out,
    box-shadow 0.22s ease-out;
}

button:hover:not(:disabled) {
  background: var(--gold-10);
  border-color: var(--accent);
  color: var(--ink);
  box-shadow: var(--bubble-inset), var(--bubble-shadow);
}

button:active:not(:disabled) {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--ink-on-fill);
}

button:focus-visible {
  outline: 2px solid var(--accent-ink);
  outline-offset: 2px;
}

button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

button.primary {
  color: var(--ink);
  border-color: var(--accent);
  background: var(--gold-10);
  box-shadow: var(--bubble-inset), inset 0 0 0 1px rgba(166, 124, 61, 0.24);
}

button.primary:hover:not(:disabled) {
  background: var(--gold-20);
  color: var(--ink);
}

button.primary:active:not(:disabled) {
  background: var(--accent);
  color: var(--ink-on-fill);
}

button.danger {
  border-color: var(--oxblood-55);
  color: var(--accent2);
}

button.danger:hover:not(:disabled) {
  background: var(--oxblood-10);
  border-color: var(--accent2);
  color: var(--accent2);
}

button.quiet {
  border-color: transparent;
  color: var(--muted);
  padding: 6px 8px;
  background: transparent;
}

button.quiet:hover:not(:disabled) {
  border-color: var(--line);
  color: var(--ink);
  background: transparent;
  box-shadow: none;
}

/* A text-only action that still reads as a control (not a link underline). */
.linklike {
  border: 0;
  border-bottom: 1px solid var(--brass-32);
  background: transparent;
  padding: 2px 0;
  color: var(--accent-ink);
  font-size: 12px;
  letter-spacing: 0.06em;
}

.linklike:hover:not(:disabled) {
  background: transparent;
  border-bottom-color: var(--accent);
  color: var(--ink);
}

/* ---- form fields --------------------------------------------------------- */
input,
textarea,
select {
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: 1.4;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 8px 10px;
  box-shadow: var(--bubble-inset);
}

input:hover,
textarea:hover,
select:hover {
  border-color: var(--faint);
}

input:focus,
textarea:focus,
select:focus {
  outline: 2px solid var(--accent-ink);
  outline-offset: 0;
  border-color: var(--accent);
}

input::placeholder,
textarea::placeholder {
  color: var(--faint);
  font-style: italic;
}

textarea {
  resize: vertical;
}

input[type='checkbox'],
input[type='radio'],
input[type='range'] {
  accent-color: var(--accent);
}

input[type='color'] {
  padding: 0;
  background: transparent;
  border: 1px solid var(--line);
  cursor: pointer;
}

label {
  color: var(--ink2);
}

/* ---- shared field scaffolding ------------------------------------------- */
.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.field-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.field-label {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
}

.field-counter {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--faint);
  font-variant-numeric: tabular-nums;
}

.field-counter.full {
  color: var(--accent-ink);
}

/* ---- scrollbars ---------------------------------------------------------- */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: #2a3038;
  border: 1px solid #0b0d10;
  border-radius: var(--r-xs);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--faint);
}

/* ---- fixed 1920x1080 dark stage ----------------------------------------- */
.stage-wrap {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  background: #05070a;
}

.stage {
  position: relative;
  width: 1920px;
  height: 1080px;
  transform-origin: center center;
  background-color: var(--bg);
  /* subtle dark ink shading only — no parchment, no neon, no glossy gradients */
  background-image: radial-gradient(120% 95% at 50% 32%, #141922 0%, #0b0d10 58%, #07090c 100%);
  overflow: hidden;
  color: var(--ink);
}

/* ---- fixed demo badge (index.html) -------------------------------------- */
.demo-banner {
  position: fixed;
  right: 16px;
  bottom: 14px;
  z-index: 60;
  pointer-events: none;
  padding: 6px 13px;
  background: var(--paper);
  border: 1px solid var(--brass-55);
  border-radius: var(--r-sm);
  box-shadow: var(--bubble-inset), var(--bubble-shadow);
  color: var(--ink2);
  font-family: var(--font-mono);
  font-size: 9.5px;
  line-height: 1.3;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* ---- modals: bright paper sheets ---------------------------------------- */
.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 30px;
  background: var(--shade);
  backdrop-filter: blur(2px);
}

.modal {
  width: min(640px, 92vw);
  max-height: 88vh;
  overflow: auto;
  position: relative;
  background:
    var(--paper);
  
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 28px 30px 24px;
  box-shadow:
    var(--bubble-inset),
    inset 0 0 0 1px rgba(166, 124, 61, 0.12),
    var(--shadow-lift);
}

/* brass double rule at the top of every modal (contract) */
.modal::before {
  content: '';
  display: block;
  margin: -28px -30px 20px;
  height: 3px;
  border-top: 1px solid var(--accent);
  border-bottom: 1px solid var(--line);
  opacity: 0.8;
}

.modal > h2 {
  margin: 0 0 4px;
  font-family: var(--font-display);
  font-size: 23px;
  font-weight: 400;
  letter-spacing: 0.03em;
  color: var(--ink);
}

.modal-kicker {
  margin: 0 0 8px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
}

.modal-meta {
  margin: 10px 0 0;
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.6;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.modal-rule {
  height: 3px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  margin: 4px 0 16px;
}

/* ---- safety / warning blocks -------------------------------------------- */
.warning {
  border: 1px solid var(--oxblood-55);
  background: var(--oxblood-10);
  border-radius: var(--r-sm);
  box-shadow: var(--bubble-inset);
  color: var(--berry-soft);
  padding: 12px 14px;
  font-size: 13px;
  line-height: 1.55;
}

.warning strong {
  color: var(--ink);
}

.warning--strong {
  border-color: var(--accent2);
  background: var(--oxblood-20);
}

.notice {
  border: 1px solid var(--brass-32);
  background: var(--brass-06);
  border-radius: var(--r-sm);
  box-shadow: var(--bubble-inset);
  color: var(--ink2);
  padding: 11px 14px;
  font-size: 12.5px;
  line-height: 1.55;
}

.notice strong {
  color: var(--ink);
}

/* ---- shared page scaffolding -------------------------------------------- */
/* Pages are absolutely positioned inside the full-bleed .app-view host; the
   masthead overlays the stage (64px) and the rail overlays the left edge, so
   pages pad themselves clear of both. */
.app-page {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 38px 56px 64px 344px;
  background: var(--bg);
  color: var(--ink);
}

body:has(.app-sidebar.collapsed) .app-page {
  padding-left: 96px;
}

.app-page-inner {
  width: 100%;
  max-width: 1280px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  padding-bottom: 16px;
  border-bottom: 3px double var(--line);
}

.page-head-kicker {
  margin: 0 0 10px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--muted);
}

.page-head-kicker b {
  color: var(--accent-ink);
  font-weight: 400;
}

.page-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: 400;
  letter-spacing: 0.035em;
  line-height: 1.1;
  color: var(--ink);
}

.page-lede {
  margin: 10px 0 0;
  max-width: 780px;
  font-size: 14px;
  line-height: 1.62;
  color: var(--ink2);
}

.page-lede b {
  color: var(--ink);
}

.page-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  padding-top: 14px;
}

.page-foot {
  padding-top: 4px;
  font-size: 12px;
  line-height: 1.7;
  color: var(--faint);
}

/* ---- panels / engraved surfaces ----------------------------------------- */
.panel {
  position: relative;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow:
    var(--bubble-inset),
    var(--bubble-shadow),
    inset 0 0 0 1px rgba(255, 255, 255, 0.04);
  padding: 20px 22px;
}

.panel--flush {
  padding: 0;
}

.panel-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 11px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--line);
}

.panel-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--ink);
}

.panel-kicker {
  margin: 0 0 8px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--faint);
}

.panel-copy {
  margin: 0;
  font-size: 13px;
  line-height: 1.62;
  color: var(--muted);
}

.panel-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 12px;
}

.panel-rule {
  height: 0;
  border-top: 1px solid var(--line);
  margin: 12px 0;
}

/* ---- stats --------------------------------------------------------------- */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px;
}

.stat {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--bubble-inset), var(--bubble-shadow);
  padding: 13px 16px 14px;
}

.stat-label {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--faint);
}

.stat-value {
  margin-top: 6px;
  font-family: var(--font-display);
  font-size: 24px;
  line-height: 1.1;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.stat-value.is-accent {
  color: var(--accent-ink);
}

.stat-value.is-small {
  font-size: 17px;
}

/* ---- ledger tables ------------------------------------------------------- */
.ledger {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--paper);
  box-shadow: var(--bubble-inset), var(--bubble-shadow);
}

.ledger-head,
.ledger-row {
  display: grid;
  grid-template-columns: var(--ledger-cols, 92px minmax(0, 1fr) 150px);
  gap: 16px;
  align-items: center;
  padding: 10px 18px;
}

.ledger-head {
  padding-top: 8px;
  padding-bottom: 8px;
  background: var(--panel2);
  border-bottom: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
}

.ledger-row {
  border-bottom: 1px solid var(--line);
  font-size: 13.5px;
  color: var(--ink2);
}

.ledger-row:last-child {
  border-bottom: 0;
}

.ledger-row:hover {
  background: var(--brass-06);
}

.ledger-row.is-me {
  box-shadow: inset 2px 0 0 var(--accent);
  background: var(--gold-10);
}

.ledger-num {
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.ledger-right {
  text-align: right;
}

.ledger-muted {
  color: var(--muted);
}

.ledger-empty {
  padding: 18px;
  font-size: 12.5px;
  color: var(--faint);
  font-style: italic;
}

/* ---- state cards (loading / error / empty) ------------------------------ */
.state-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--bubble-inset), var(--bubble-shadow);
  padding: 30px 26px 28px;
  text-align: center;
}

.state-card h2 {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 400;
  color: var(--ink);
}

.state-card p {
  margin: 0 auto 16px;
  max-width: 600px;
  font-size: 13px;
  line-height: 1.62;
  color: var(--muted);
}

.state-card.is-error {
  border-color: var(--oxblood-55);
  background: #241a1d;
}

.state-card.is-error p {
  color: var(--berry-soft);
}

.state-card.is-loading p {
  font-style: italic;
}

/* ---- banners / badges ---------------------------------------------------- */
.safety-banner {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: baseline;
  border: 1px solid var(--oxblood-55);
  background: var(--oxblood-10);
  border-radius: var(--r-sm);
  box-shadow: var(--bubble-inset);
  padding: 11px 15px;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--berry-soft);
}

.safety-banner strong {
  color: var(--ink);
  font-variant: small-caps;
  letter-spacing: 0.1em;
}

/* enamel badge / stamp: brass ring + pale fill (gamified) */
.badge {
  display: inline-block;
  padding: 2px 9px;
  border: 1px solid var(--brass-55);
  border-radius: var(--r-xs);
  background: var(--gold-10);
  box-shadow: var(--bubble-inset);
  color: var(--accent-ink);
  font-family: var(--font-mono);
  font-size: 9.5px;
  line-height: 1.5;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
}

.badge--brass {
  border-color: var(--accent);
  color: var(--accent-ink);
}

.badge--oxblood {
  border-color: var(--oxblood-55);
  color: var(--accent2);
  background: var(--oxblood-10);
}

.badge--moss {
  border-color: var(--moss-55);
  color: var(--good-ink);
  background: rgba(111, 127, 90, 0.12);
}

.badge--plain {
  border-color: var(--line);
  color: var(--muted);
  background: transparent;
}

/* ---- gamified shared layer ---------------------------------------------- */
/* Enamel badge: pale fill, brass double ring, ink label. */
.enamel {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px 6px;
  border: 1px solid var(--accent);
  border-radius: var(--r-sm);
  background: #1d1a14;
  box-shadow:
    var(--bubble-inset),
    inset 0 0 0 1px rgba(255, 255, 255, 0.05),
    0 2px 4px rgba(0, 0, 0, 0.35);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 9.5px;
  line-height: 1.2;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  white-space: nowrap;
}

.enamel b {
  color: var(--accent-ink);
  font-weight: 400;
}

.enamel--gold {
  background: #201c14;
  border-color: var(--accent);
}

.enamel--sage {
  background: #161d18;
  border-color: var(--good-ink);
}

.enamel--berry {
  background: #241a1e;
  border-color: var(--accent2);
}

/* Segmented progress ticks (levels / discovery). */
.ticks {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.tick {
  display: inline-block;
  width: 9px;
  height: 6px;
  border-radius: 2px;
  background: #e3d5b8;
  box-shadow: inset 0 0 0 1px rgba(120, 96, 62, 0.24);
}

.tick.on {
  background: var(--accent);
  box-shadow: inset 0 0 0 1px rgba(94, 68, 26, 0.45);
}

.tick.on--gold {
  background: var(--gold);
}

/* Stamped rank medallion (round-ish seal with a scratched ring). */
.medallion {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 46px;
  height: 30px;
  padding: 0 9px;
  border: 3px double var(--accent);
  border-radius: var(--r-sm);
  background: #1d1a14;
  box-shadow:
    var(--bubble-inset),
    inset 0 0 0 1px rgba(255, 255, 255, 0.04);
  color: var(--accent-ink);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  transform: rotate(-2deg);
}

/* ---- misc tiny shared bits ---------------------------------------------- */
.swatch {
  display: inline-block;
  width: 13px;
  height: 13px;
  border: 1px solid rgba(232, 226, 212, 0.25);
  border-radius: 2px;
  box-shadow: var(--bubble-inset);
  flex: 0 0 auto;
}

.coord {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink2);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}

.italic {
  font-style: italic;
}

.center {
  text-align: center;
}

.nowrap {
  white-space: nowrap;
}

/* ==========================================================================
   v3 — decoration + game-feel layer (light academia).
   Crafted, not busy: engraved ornaments and framing, an animated compass rose
   and cartographic flourish, parchment dust motes, brass rule shimmer, enamel
   sheens, stamped-medallion glints, animated ticks, staggered page entry and
   button/nav micro-lifts. Everything is stilled by prefers-reduced-motion.
   ========================================================================== */

:root {
  --ornament-ink: rgba(201, 163, 91, 0.22);
  --ornament-soft: rgba(166, 124, 61, 0.2);
  --mote: rgba(122, 96, 62, 0.5);
}

/* ---- animated brass double rules ---------------------------------------- */
.page-head {
  position: relative;
}

.page-head::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 3px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(217, 178, 95, 0.65) 18%,
    var(--accent) 50%,
    rgba(217, 178, 95, 0.65) 82%,
    transparent 100%
  );
  background-size: 220% 100%;
  opacity: 0.45;
  animation: deco-rule-shimmer 11s linear infinite;
  pointer-events: none;
}

.page-head::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -6px;
  width: 7px;
  height: 7px;
  transform: translateX(-50%) rotate(45deg);
  border: 1px solid var(--accent);
  background: var(--bg);
  opacity: 0.7;
  pointer-events: none;
}

/* ---- page entry: staggered fade/slide ---------------------------------- */
.app-page-inner > * {
  animation: page-rise 0.5s cubic-bezier(0.22, 0.7, 0.24, 1) both;
}

.app-page-inner > *:nth-child(1) { animation-delay: 0.02s; }
.app-page-inner > *:nth-child(2) { animation-delay: 0.07s; }
.app-page-inner > *:nth-child(3) { animation-delay: 0.12s; }
.app-page-inner > *:nth-child(4) { animation-delay: 0.17s; }
.app-page-inner > *:nth-child(5) { animation-delay: 0.22s; }
.app-page-inner > *:nth-child(6) { animation-delay: 0.27s; }
.app-page-inner > *:nth-child(7) { animation-delay: 0.32s; }
.app-page-inner > *:nth-child(8) { animation-delay: 0.37s; }
.app-page-inner > *:nth-child(9) { animation-delay: 0.42s; }
.app-page-inner > *:nth-child(n + 10) { animation-delay: 0.46s; }

/* ---- buttons: hover lift + brass sheen ---------------------------------- */
button {
  position: relative;
  overflow: hidden;
}

button::after {
  content: '';
  position: absolute;
  top: -20%;
  bottom: -20%;
  left: -140%;
  width: 55%;
  background: linear-gradient(100deg, transparent 0%, rgba(232, 226, 212, 0.42) 50%, transparent 100%);
  transform: skewX(-18deg);
  pointer-events: none;
  transition: left 0.55s ease-out;
}

button:hover:not(:disabled)::after {
  left: 155%;
}

button:hover:not(:disabled) {
  transform: translateY(-1px);
}

button:active:not(:disabled) {
  transform: translateY(0);
}

/* ---- enamel sheen + medallion glint ------------------------------------- */
.enamel,
.medallion {
  position: relative;
  overflow: hidden;
}

.enamel::after {
  content: '';
  position: absolute;
  top: -30%;
  bottom: -30%;
  left: -160%;
  width: 45%;
  background: linear-gradient(100deg, transparent 0%, rgba(232, 226, 212, 0.55) 50%, transparent 100%);
  transform: skewX(-18deg);
  animation: enamel-sheen 8.5s ease-in-out infinite;
  pointer-events: none;
}

.medallion::after {
  content: '';
  position: absolute;
  top: -40%;
  bottom: -40%;
  left: -140%;
  width: 40%;
  background: linear-gradient(100deg, transparent 0%, rgba(232, 226, 212, 0.6) 50%, transparent 100%);
  transform: skewX(-16deg);
  animation: medal-glint 9s ease-in-out infinite;
  pointer-events: none;
}

/* ---- animated segmented ticks ------------------------------------------ */
.tick {
  transition: background-color 0.3s ease-out, box-shadow 0.3s ease-out;
}

.tick.on {
  animation: tick-pop 0.4s cubic-bezier(0.22, 0.7, 0.24, 1) both;
}

.app-level-ticks .tick.on:nth-child(1) { animation-delay: 0s; }
.app-level-ticks .tick.on:nth-child(2) { animation-delay: 0.02s; }
.app-level-ticks .tick.on:nth-child(3) { animation-delay: 0.04s; }
.app-level-ticks .tick.on:nth-child(4) { animation-delay: 0.06s; }
.app-level-ticks .tick.on:nth-child(5) { animation-delay: 0.08s; }
.app-level-ticks .tick.on:nth-child(6) { animation-delay: 0.1s; }
.app-level-ticks .tick.on:nth-child(7) { animation-delay: 0.12s; }
.app-level-ticks .tick.on:nth-child(8) { animation-delay: 0.14s; }
.app-level-ticks .tick.on:nth-child(9) { animation-delay: 0.16s; }
.app-level-ticks .tick.on:nth-child(10) { animation-delay: 0.18s; }
.app-level-ticks .tick.on:nth-child(11) { animation-delay: 0.2s; }
.app-level-ticks .tick.on:nth-child(12) { animation-delay: 0.22s; }
.app-level-ticks .tick.on:nth-child(13) { animation-delay: 0.24s; }

/* ---- nav micro-lift ------------------------------------------------------ */
.app-nav-btn {
  transition: background-color 0.22s ease-out, color 0.22s ease-out,
    border-color 0.22s ease-out, transform 0.22s ease-out;
}

.app-nav-btn:hover:not(:disabled) {
  transform: translateX(2px);
}

/* ---- keyframes ----------------------------------------------------------- */
@keyframes deco-rule-shimmer {
  0% {
    background-position: -120% 0;
  }
  100% {
    background-position: 220% 0;
  }
}

@keyframes enamel-sheen {
  0%,
  58% {
    left: -160%;
  }
  78%,
  100% {
    left: 260%;
  }
}

@keyframes medal-glint {
  0%,
  66% {
    left: -140%;
    opacity: 0;
  }
  74% {
    opacity: 0.65;
  }
  88%,
  100% {
    left: 240%;
    opacity: 0;
  }
}

@keyframes tick-pop {
  0% {
    transform: scaleY(0.4);
  }
  60% {
    transform: scaleY(1.28);
  }
  100% {
    transform: scaleY(1);
  }
}

@keyframes page-rise {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes badge-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(166, 124, 61, 0.42), var(--bubble-inset);
  }
  55% {
    box-shadow: 0 0 0 8px rgba(166, 124, 61, 0), var(--bubble-inset);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(166, 124, 61, 0), var(--bubble-inset);
  }
}

@keyframes banner-stamp {
  0% {
    opacity: 0;
    transform: translate(-50%, -12px) scale(0.94);
  }
  60% {
    opacity: 1;
    transform: translate(-50%, 3px) scale(1.015);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, 0) scale(1);
  }
}

@keyframes settle-stamp {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(-16deg) scale(1.7);
  }
  55% {
    opacity: 1;
    transform: translate(-50%, -50%) rotate(-8deg) scale(0.96);
  }
  75% {
    transform: translate(-50%, -50%) rotate(-8deg) scale(1.03);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -50%) rotate(-8deg) scale(1);
  }
}

/* ---- polish: slightly airier hierarchy ---------------------------------- */
.app-page-inner {
  gap: 24px;
}

.page-title {
  font-size: 35px;
}

.page-lede {
  max-width: 760px;
  line-height: 1.66;
}

.panel {
  padding: 22px 24px;
}

.panel-copy {
  line-height: 1.68;
}

.stat-grid {
  gap: 14px;
}

/* ---- reduced motion: still the ornaments, keep the content -------------- */
@media (prefers-reduced-motion: reduce) {
  .page-head::before,
  .enamel::after,
  .medallion::after,
  .tick.on,
  .app-page-inner > *,
  .cl-deed-stamp {
    animation: none !important;
  }

  button,
  button::after,
  .tick {
    transition: none !important;
  }

  button::after {
    display: none !important;
  }

  button:hover:not(:disabled),
  .app-nav-btn:hover:not(:disabled) {
    transform: none !important;
  }
}


/* v3.1: the fixed demo banner is retired — the demo badge lives in the rail. */
.demo-banner {
  display: none !important;
}

/* ==========================================================================
   v3.4 — ornamental page headers + richer ledger/table styling.
   Pages are full-screen dark ledger panels; no map chrome.
   ========================================================================== */

.page-head {
  padding: 16px 20px 18px;
  border: 1px solid var(--line);
  border-bottom: 3px double var(--line);
  border-radius: var(--r-md);
  background:
    radial-gradient(130% 150% at 12% 0%, rgba(201, 163, 91, 0.09), transparent 60%),
    #0e1116;
  box-shadow: var(--bubble-inset), var(--bubble-shadow);
}

.page-head::before {
  left: 18px;
  right: 18px;
  bottom: -2px;
}

.page-head::after {
  bottom: -7px;
  width: 9px;
  height: 9px;
  background: #0e1116;
}

.page-title {
  font-size: 36px;
}

.page-lede {
  margin-top: 12px;
}

.page-head-kicker b {
  letter-spacing: 0.16em;
}

.app-page-inner {
  gap: 26px;
}

.panel {
  padding: 24px 26px;
  border-color: rgba(201, 163, 91, 0.18);
  transition: border-color 0.22s ease-out;
}

.panel:hover {
  border-color: rgba(201, 163, 91, 0.34);
}

.panel-title {
  font-size: 20px;
  letter-spacing: 0.03em;
}

.ledger {
  border-color: rgba(201, 163, 91, 0.2);
}

.ledger-head {
  position: sticky;
  top: 0;
  z-index: 1;
  border-bottom: 3px double var(--line);
  color: var(--muted);
}

.ledger-row:nth-child(even) {
  background: rgba(255, 255, 255, 0.016);
}

.ledger-row:hover {
  background: var(--brass-06);
  box-shadow: inset 2px 0 0 var(--accent);
}

.stat {
  border-color: rgba(201, 163, 91, 0.22);
}

.enamel {
  border-width: 2px;
  box-shadow:
    var(--bubble-inset),
    inset 0 0 0 1px rgba(255, 255, 255, 0.05),
    0 1px 3px rgba(0, 0, 0, 0.35);
}

.badge {
  box-shadow: var(--bubble-inset), 0 1px 2px rgba(0, 0, 0, 0.3);
}

@media (prefers-reduced-motion: reduce) {
  .ledger-row,
  .panel {
    transition: none !important;
  }
}

/* ==========================================================================
   v3.5 - ornate page headers (flame motif), drop caps and richer ledgers.
   ASCII-only comments keep the stylesheet strict UTF-8 safe.
   ========================================================================== */

.page-head {
  position: relative;
  overflow: hidden;
}

.page-head-kicker {
  position: relative;
  padding-left: 20px;
}

.page-head-kicker::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 11px;
  height: 16px;
  transform: translateY(-50%);
  border-radius: 50% 50% 46% 54% / 72% 72% 28% 28%;
  background: linear-gradient(180deg, #ffe2a6 0%, #f0b04a 45%, #b3475c 100%);
  box-shadow: 0 0 8px rgba(240, 176, 74, 0.5), 0 0 18px rgba(179, 71, 92, 0.25);
  animation: page-flame 2.2s ease-in-out infinite;
}

.page-head::before {
  content: '';
  position: absolute;
  left: 50%;
  top: -10px;
  width: 220px;
  height: 70px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(240, 176, 74, 0.1) 0%, rgba(179, 71, 92, 0.05) 45%, transparent 72%);
  animation: page-ember-glow 7s ease-in-out infinite;
  pointer-events: none;
}

.page-head > * {
  position: relative;
  z-index: 1;
}

.page-lede::first-letter {
  float: left;
  padding: 4px 8px 2px 0;
  font-family: var(--font-display);
  font-size: 46px;
  line-height: 0.9;
  color: var(--accent-ink);
  text-shadow: 0 0 12px rgba(201, 163, 91, 0.3);
}

.ledger-row:nth-child(even) {
  background: rgba(201, 163, 91, 0.035);
}

.ledger-row:hover {
  background: rgba(201, 163, 91, 0.08);
  box-shadow: inset 2px 0 0 var(--accent);
}

.panel-head .seal,
.page-head .seal {
  filter: drop-shadow(0 0 6px rgba(201, 163, 91, 0.35));
}

@keyframes page-flame {
  0%, 100% { transform: translateY(-50%) scaleY(1) scaleX(1) rotate(0deg); }
  30% { transform: translateY(-52%) scaleY(1.1) scaleX(0.94) rotate(-2deg); }
  60% { transform: translateY(-49%) scaleY(0.94) scaleX(1.05) rotate(2deg); }
}

@keyframes page-ember-glow {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .page-head-kicker::before,
  .page-head::before {
    animation: none !important;
  }
}

/* ==========================================================================
   v3.6 - faint page-edge vignette (pages only, never over the map canvas).
   ASCII-only comments keep the stylesheet strict UTF-8 safe.
   ========================================================================== */

.app-page::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow:
    inset 0 0 90px rgba(0, 0, 0, 0.42),
    inset 0 0 24px rgba(201, 163, 91, 0.05);
}

.app-page > * {
  position: relative;
  z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
  .app-page::after {
    box-shadow: inset 0 0 70px rgba(0, 0, 0, 0.35);
  }
}

/* ==========================================================================
   v3.7 - page content clears the fixed (real-viewport) sidebar.
   The stage is cover-scaled, so the gutter is computed in stage pixels by App
   (--page-gutter-left) from the real sidebar width and the stage crop offset.
   ========================================================================== */

body .app-page {
  padding-left: var(--page-gutter-left, 344px);
}

body:has(.app-sidebar) .app-page,
body:has(.app-sidebar.collapsed) .app-page {
  padding-left: var(--page-gutter-left, 344px);
}