/* FIRE Planner — Session Ledger theme (bold slate + signal palette)
   Colorblind-aware: good teal, bad orange (distinct hue AND luminance),
   always paired with +/− signs. Content sits on raised panels. */

:root {
  --bg: #14171d;
  --panel: #1e232d;
  --panel-2: #262c39;
  --line: #333b4c;
  --line-soft: #2a3140;
  --text: #f0f3f8;
  --text-dim: #a7b0c0;
  --text-faint: #737d92;
  --brand: #ffce3d;
  --brand-ink: #1d1608;
  --win: #37d3bc;
  --win-dim: rgba(55, 211, 188, 0.14);
  --loss: #ff8e5e;
  --loss-dim: rgba(255, 142, 94, 0.14);
  --sans: "Archivo", -apple-system, sans-serif;
  --mono: "IBM Plex Mono", "SF Mono", monospace;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { color-scheme: dark; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.5;
  min-height: 100vh;
  background-image: radial-gradient(1100px 420px at 75% -10%, rgba(255, 206, 61, 0.05), transparent 60%);
}

.wrap { max-width: 1240px; margin: 0 auto; padding: 0 24px 96px; }

.panel {
  background: var(--panel);
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  padding: 26px 28px;
  margin-top: 18px;
}

/* ---------- masthead ---------- */
header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 26px 4px 6px;
}
.brand { display: flex; align-items: baseline; gap: 14px; }
.brand h1 {
  font-weight: 800;
  font-size: 1.4rem;
  letter-spacing: -0.01em;
}
.brand h1 em { color: var(--brand); font-style: normal; }
.tag { font-family: var(--mono); font-size: 0.74rem; color: var(--text-faint); }
header nav a { color: var(--brand); font-weight: 600; font-size: 0.9rem; text-decoration: none; }
header nav a:hover { text-decoration: underline; }

/* ---------- layout ---------- */
.cols { display: grid; grid-template-columns: 420px 1fr; gap: 18px; align-items: start; }
@media (max-width: 980px) { .cols { grid-template-columns: 1fr; } }

/* ---------- scenario bar ---------- */
.scenario-bar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 14px 18px; }
.scenario-bar select, .scenario-bar button, .scenario-bar input, #token-form input, #token-form button {
  background: var(--panel-2); color: var(--text); border: 1px solid var(--line);
  border-radius: 8px; padding: 7px 12px; font: 600 0.85rem var(--sans); cursor: pointer;
}
.scenario-bar button:hover, #token-form button:hover { border-color: var(--brand); }
#dirty-flag { color: var(--brand); font: 600 0.8rem var(--mono); }
#sync-status { color: var(--text-faint); font: 500 0.8rem var(--mono); margin-left: auto; }
#sync-status.err { color: var(--loss); }

/* ---------- input panels ---------- */
.field { display: grid; grid-template-columns: 1fr 130px; gap: 8px; align-items: center; margin: 7px 0; }
.field label { color: var(--text-dim); font-size: 0.85rem; }
.field input, .field select {
  background: var(--panel-2); color: var(--text); border: 1px solid var(--line);
  border-radius: 7px; padding: 6px 9px; font: 500 0.9rem var(--mono); width: 100%;
}
.field input:focus { outline: none; border-color: var(--brand); }
.panel h2 { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--brand); margin-bottom: 10px; }
.derived { font: 500 0.85rem var(--mono); color: var(--text-dim); margin: 4px 0; display: flex; justify-content: space-between; }
.derived b { color: var(--text); }

/* ---------- strategy cards ---------- */
.strategy { border: 1px solid var(--line-soft); border-radius: 10px; padding: 12px 14px; margin: 10px 0; }
.strategy.disabled { opacity: 0.45; }
.strategy-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.strategy-head b { font-size: 0.95rem; }
.strategy-head button {
  background: var(--panel-2); color: var(--text-dim); border: 1px solid var(--line);
  border-radius: 7px; padding: 4px 10px; font: 600 0.75rem var(--sans); cursor: pointer;
}
.strategy-head button:hover { border-color: var(--brand); color: var(--text); }

/* ---------- verdict tiles ---------- */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-top: 18px; }
.tile { background: var(--panel); border: 1px solid var(--line-soft); border-radius: 12px; padding: 14px 16px; }
.tile .k { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-faint); }
.tile .v { font: 700 1.35rem var(--mono); margin-top: 4px; font-variant-numeric: tabular-nums; }
.tile .v.good { color: var(--win); }
.tile .v.bad { color: var(--loss); }
.tile .sub { font-size: 0.75rem; color: var(--text-dim); margin-top: 2px; }

/* ---------- warnings ---------- */
#warnings { display: flex; flex-direction: column; gap: 6px; margin-top: 14px; }
.warning { background: var(--loss-dim); border: 1px solid var(--loss); color: var(--loss);
  border-radius: 8px; padding: 8px 12px; font-size: 0.85rem; }

/* ---------- charts ---------- */
.chart-panel svg { width: 100%; height: auto; display: block; }
.legend { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 8px; }
.legend span { font: 500 0.78rem var(--mono); color: var(--text-dim); display: flex; gap: 6px; align-items: center; }
.legend i { width: 14px; height: 3px; border-radius: 2px; display: inline-block; }

/* ---------- compare table ---------- */
#compare-table table { width: 100%; border-collapse: collapse; font: 500 0.85rem var(--mono); }
#compare-table th, #compare-table td { text-align: right; padding: 7px 10px; border-bottom: 1px solid var(--line-soft); }
#compare-table th:first-child, #compare-table td:first-child { text-align: left; font-family: var(--sans); color: var(--text-dim); }

/* ---------- add-year button ---------- */
button.mini {
  background: var(--panel-2); color: var(--text-dim); border: 1px solid var(--line);
  border-radius: 7px; padding: 5px 10px; font: 600 0.78rem var(--sans); cursor: pointer; margin-top: 6px;
}
button.mini:hover { border-color: var(--brand); color: var(--text); }

/* ---------- partner page ---------- */
.prose { max-width: 760px; }
.prose h2 { font-size: 1.15rem; margin: 28px 0 10px; color: var(--brand); text-transform: none; letter-spacing: 0; }
.prose p, .prose li { color: var(--text-dim); font-size: 0.98rem; margin: 8px 0; }
.prose ul { padding-left: 22px; }
.prose b { color: var(--text); }
.simple { border-left: 3px solid var(--brand); padding: 10px 16px; font-style: italic; background: var(--panel); border-radius: 0 10px 10px 0; }