:root {
  --ink: #17130e;
  --paper: #f4efe6;
  --paper-2: #ece5d8;
  --line: #d6cdbb;
  --muted: #6f6559;
  --accent: #8a3b12;
  --accent-2: #1f5c4a;
  --warn: #a3350f;
  --good: #24614a;
  --gold: #9a6b1f;
  --shadow: 0 1px 2px rgba(23,19,14,.08), 0 8px 24px rgba(23,19,14,.06);
  --mono: 'IBM Plex Mono', ui-monospace, Consolas, monospace;
  --sans: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  --serif: 'Fraunces', Georgia, serif;
  color-scheme: light;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
button { font: inherit; cursor: pointer; }
h1,h2,h3,h4 { font-family: var(--serif); font-weight: 600; margin: 0; letter-spacing: -.01em; }
a { color: var(--accent); }

/* ---------------------------------------------------------------- layout */
#app { display: flex; flex-direction: column; min-height: 100vh; }

.topbar {
  position: sticky; top: 0; z-index: 40;
  background: var(--ink); color: #f0e9dc;
  border-bottom: 3px solid #2c241a;
  display: flex; align-items: stretch; gap: 0;
  flex-wrap: wrap;
}
.brand {
  padding: 10px 18px; display: flex; flex-direction: column; justify-content: center;
  border-right: 1px solid #33291d; min-width: 190px;
}
.brand .t { font-family: var(--serif); font-size: 15px; font-weight: 600; }
.brand .d { font-family: var(--mono); font-size: 12px; color: #b3a68e; letter-spacing: .06em; }

.stats { display: flex; flex: 1; flex-wrap: wrap; }
.stat {
  padding: 9px 16px; border-right: 1px solid #33291d; min-width: 118px;
  display: flex; flex-direction: column; justify-content: center;
}
.stat .k { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: #a1937a; }
.stat .v { font-family: var(--mono); font-size: 14px; font-weight: 500; }
.stat .v.neg { color: #f0906a; }
.stat .v.pos { color: #8fd3ae; }

.advance {
  border: 0; background: var(--accent); color: #fff; padding: 0 22px;
  font-weight: 600; letter-spacing: .02em; min-width: 168px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
}
.advance:hover { background: #a04716; }
.advance:disabled { background: #4a4038; color: #9b8f7f; cursor: not-allowed; }
.advance small { font-family: var(--mono); font-size: 10px; opacity: .8; font-weight: 400; }

.tabs {
  display: flex; gap: 0; background: var(--paper-2);
  border-bottom: 1px solid var(--line); position: sticky; top: 56px; z-index: 30;
  overflow-x: auto;
}
.tab {
  border: 0; background: transparent; padding: 10px 15px; color: var(--muted);
  font-size: 12.5px; font-weight: 500; letter-spacing: .03em; text-transform: uppercase;
  border-bottom: 2px solid transparent; white-space: nowrap;
}
.tab:hover { color: var(--ink); }
.tab.on { color: var(--ink); border-bottom-color: var(--accent); background: var(--paper); }
.tab .badge {
  display: inline-block; background: var(--accent); color: #fff; border-radius: 8px;
  font-family: var(--mono); font-size: 10px; padding: 0 5px; margin-left: 5px; vertical-align: 1px;
}

main { flex: 1; padding: 20px; max-width: 1220px; width: 100%; margin: 0 auto; }

/* ---------------------------------------------------------------- cards */
.grid { display: grid; gap: 14px; }
.g2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.g3 { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.g4 { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }

.card {
  background: #fffdf8; border: 1px solid var(--line); border-radius: 3px;
  box-shadow: var(--shadow); padding: 15px 16px;
}
.card > h3 {
  font-size: 12px; text-transform: uppercase; letter-spacing: .1em; color: var(--muted);
  font-family: var(--sans); font-weight: 600; margin-bottom: 10px;
  border-bottom: 1px solid var(--line); padding-bottom: 7px;
}
.card.tight { padding: 12px 14px; }

.kpi { display: flex; flex-direction: column; gap: 2px; }
.kpi .v { font-family: var(--mono); font-size: 21px; font-weight: 500; letter-spacing: -.02em; }
.kpi .k { font-size: 10.5px; text-transform: uppercase; letter-spacing: .09em; color: var(--muted); }
.kpi .s { font-size: 11.5px; color: var(--muted); font-family: var(--mono); }

.row { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; font-size: 13px; }
.row + .row { border-top: 1px dotted var(--line); }
.row .l { color: var(--muted); }
.row .r { font-family: var(--mono); }
.row.total { border-top: 2px solid var(--ink); margin-top: 5px; padding-top: 7px; font-weight: 600; }

.pill {
  display: inline-block; font-size: 10px; letter-spacing: .07em; text-transform: uppercase;
  padding: 2px 7px; border-radius: 2px; border: 1px solid var(--line);
  background: var(--paper-2); color: var(--muted); font-weight: 600;
}
.pill.warn { background: #f7e2da; border-color: #e0b8a8; color: var(--warn); }
.pill.good { background: #dcece5; border-color: #a9cbbe; color: var(--good); }
.pill.gold { background: #f4e9d0; border-color: #ddc793; color: var(--gold); }

.btn {
  border: 1px solid var(--ink); background: var(--ink); color: var(--paper);
  padding: 7px 13px; border-radius: 2px; font-size: 12.5px; font-weight: 500;
}
.btn:hover { background: #2c241a; }
.btn.ghost { background: transparent; color: var(--ink); }
.btn.ghost:hover { background: var(--paper-2); }
.btn.danger { background: var(--warn); border-color: var(--warn); color: #fff; }
.btn.sm { padding: 4px 9px; font-size: 11.5px; }
.btn:disabled { opacity: .4; cursor: not-allowed; }

table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
th {
  text-align: left; font-size: 10px; letter-spacing: .09em; text-transform: uppercase;
  color: var(--muted); font-weight: 600; padding: 6px 8px; border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
td { padding: 7px 8px; border-bottom: 1px solid #ece5d8; vertical-align: top; }
td.n, th.n { text-align: right; font-family: var(--mono); }
tr:hover td { background: #faf6ee; }

.muted { color: var(--muted); }
.small { font-size: 12px; }
.mono { font-family: var(--mono); }
.neg { color: var(--warn); }
.pos { color: var(--good); }
.center { text-align: center; }
.stack { display: flex; flex-direction: column; gap: 12px; }
.inline { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.spread { display: flex; justify-content: space-between; align-items: center; gap: 10px; }

input[type=number], input[type=text], select {
  font-family: var(--mono); font-size: 13px; padding: 6px 8px;
  border: 1px solid var(--line); border-radius: 2px; background: #fffdf8; color: var(--ink);
}
input[type=range] { width: 100%; accent-color: var(--accent); }

/* ---------------------------------------------------------------- news */
.news-item { padding: 11px 0; border-bottom: 1px solid var(--line); }
.news-item:last-child { border-bottom: 0; }
.news-item .meta { font-family: var(--mono); font-size: 10.5px; color: var(--muted); letter-spacing: .06em; }
.news-item h4 { font-family: var(--serif); font-size: 15.5px; margin: 3px 0 4px; }
.news-item.major h4 { font-size: 17px; }
.news-item p { margin: 0; color: #40382f; font-size: 13px; }
.news-item.major { border-left: 3px solid var(--accent); padding-left: 12px; background: #fffdf8; }

/* ---------------------------------------------------------------- modal */
#modal-root:empty { display: none; }
.scrim {
  position: fixed; inset: 0; background: rgba(23,19,14,.55); z-index: 100;
  display: flex; align-items: center; justify-content: center; padding: 20px;
  backdrop-filter: blur(2px);
}
.modal {
  background: var(--paper); border: 1px solid #b9ad97; border-radius: 4px;
  max-width: 720px; width: 100%; max-height: 88vh; overflow: auto;
  box-shadow: 0 24px 70px rgba(0,0,0,.35);
}
.modal .head { padding: 18px 22px 12px; border-bottom: 1px solid var(--line); }
.modal .head .cat { font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.modal .head h2 { font-size: 22px; margin-top: 5px; line-height: 1.2; }
.modal .body { padding: 16px 22px; }
.modal .body p { margin: 0 0 12px; white-space: pre-wrap; font-size: 14px; line-height: 1.62; }
.modal .foot { padding: 4px 22px 20px; display: flex; flex-direction: column; gap: 8px; }

.choice {
  text-align: left; border: 1px solid var(--line); background: #fffdf8; border-radius: 3px;
  padding: 11px 14px; display: block; width: 100%;
}
.choice:hover { border-color: var(--ink); background: #fff; }
.choice .lab { font-weight: 600; font-size: 13.5px; }
.choice .hint { color: var(--muted); font-size: 12px; margin-top: 2px; }
.choice.illegal { border-color: #d9a08c; background: #fbf0eb; }
.choice.illegal .hint { color: var(--warn); font-weight: 600; }

/* ---------------------------------------------------------------- start screen */
.start { max-width: 760px; margin: 40px auto; }
.start h1 { font-size: 34px; line-height: 1.08; }
.start .sub { font-family: var(--mono); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); }
.start .lede { font-size: 15px; line-height: 1.65; color: #3d352c; }

.bar { height: 6px; background: var(--paper-2); border-radius: 3px; overflow: hidden; }
.bar > i { display: block; height: 100%; background: var(--accent-2); }

.rel-row { display: grid; grid-template-columns: 1fr 60px 34px; gap: 8px; align-items: center; padding: 3px 0; font-size: 12.5px; }
.rel-row .bar { width: 100%; }
.rel-row .n { font-family: var(--mono); font-size: 11.5px; color: var(--muted); text-align: right; }

.sparkwrap { display: block; width: 100%; height: 90px; }

@media (max-width: 720px) {
  .brand { min-width: 100%; border-right: 0; }
  .advance { min-width: 100%; padding: 12px; }
  main { padding: 14px; }
  .tabs { top: 0; position: static; }
}