:root {
  --bg: #14160f;
  --surface: #1d2018;
  --surface-2: #272b22;
  --fg: #f3f1ea;
  --muted: #a7ad9e;
  --line: #3a3f34;
  --brass: #e0b15a;
  --brass-ink: #1c1508;
  --sage: #9cba8e;
  --clay: #e0a48a;
  --danger: #e07a6a;
  --good: #c5dcb4;
  --sans: "Source Sans 3", "Segoe UI", sans-serif;
  --display: Fraunces, Georgia, serif;
}

* { box-sizing: border-box; }

html {
  -webkit-font-smoothing: antialiased;
  background: var(--bg);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
}

button { font: inherit; color: inherit; }
button:not(:disabled) { cursor: pointer; }

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 520;
  text-wrap: balance;
  margin: 0;
}

p { text-wrap: pretty; margin: 0; }

.wrap {
  width: min(72rem, calc(100% - 2rem));
  margin-inline: auto;
}

header.site {
  border-bottom: 1px solid var(--line);
}

header.site .wrap {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1.5rem 0;
}

.kicker { color: var(--brass); font-size: 0.875rem; }
h1 { font-size: 1.875rem; }
.lede { max-width: 40rem; color: var(--muted); }

.share-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
  margin-top: 0.25rem;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.close-alert {
  display: grid;
  gap: 0.35rem;
  margin-top: 0.25rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--line);
}

.why {
  margin-top: 0.15rem;
  border: 0;
  background: transparent;
  padding: 0;
}

.why > summary {
  min-height: 2rem;
  font-weight: 500;
  font-size: 0.875rem;
  color: var(--brass);
}

.why-body {
  display: grid;
  gap: 0.4rem;
  padding: 0 0 0.25rem;
  color: var(--muted);
}

.layout {
  display: grid;
  gap: 1.5rem;
  padding: 1.5rem 0 3rem;
}

.results, .form-card { display: flex; flex-direction: column; gap: 1rem; }

.card, .form-card, .banner {
  border: 1px solid var(--line);
  border-radius: 1rem;
  background: var(--surface);
}

.card, .form-card { padding: 1rem; }
.banner { padding: 0.75rem 1rem; color: var(--danger); font-size: 0.875rem; }

.verdicts { display: grid; gap: 1rem; }

.card .eyebrow { color: var(--muted); font-size: 0.875rem; }
.card h2 { font-size: 1.5rem; margin: 0.25rem 0 0.5rem; }
.tone-ok { color: var(--good); }
.tone-warn { color: var(--brass); }
.tone-bad { color: var(--danger); }
.card .copy { display: flex; flex-direction: column; gap: 0.5rem; font-size: 0.875rem; }
.figure { font-family: var(--display); font-size: 1.5rem; font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); }
.tabular { font-variant-numeric: tabular-nums; }

.pair, .row, .sens li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.75rem;
}

.swatch {
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 999px;
  display: inline-block;
}
.bg-sage { background: var(--sage); }
.bg-clay { background: var(--clay); }
.bg-brass { background: var(--brass); }
.bg-fg { background: var(--fg); }
.bg-muted { background: var(--muted); }

.pair span:first-child, .row dt { color: var(--muted); display: inline-flex; align-items: center; gap: 0.5rem; }
.row { font-size: 0.875rem; }
.row strong, .row.strong { font-weight: 600; color: var(--fg); }
dl { display: grid; gap: 0.5rem; margin: 0; }

.chart-head, .checkline {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.checkline, .check {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  min-height: 2.75rem;
}

input[type="checkbox"], input[type="range"] { accent-color: var(--brass); }
input[type="checkbox"] { width: 1.25rem; height: 1.25rem; margin-top: 0.2rem; }
input[type="range"] { width: 100%; height: 2.75rem; }

.legend { display: flex; gap: 1rem; font-size: 0.875rem; margin: 0.5rem 0; }
.legend span { display: inline-flex; align-items: center; gap: 0.5rem; }

.chart { width: 100%; height: 18rem; }
.chart svg { width: 100%; height: 100%; display: block; }

.presets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; margin-top: 0.75rem; }
.presets button, .segment { min-height: 2.75rem; border: 0; border-radius: 0.75rem; }
.presets button { background: var(--surface-2); padding: 0.5rem; }
.presets button small { display: block; color: var(--muted); font-size: 0.75rem; }
.presets button[aria-checked="true"] { background: var(--brass); color: var(--brass-ink); }
.presets button[aria-checked="true"] small { color: var(--brass-ink); }

.scan {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.25rem;
  padding: 0.25rem;
  border-radius: 0.75rem;
  background: var(--bg);
  border: 1px solid var(--line);
}

.scan button {
  min-height: 2.75rem;
  border: 0;
  border-radius: 0.6rem;
  background: transparent;
  color: var(--muted);
}

.scan button[aria-selected="true"] {
  background: var(--brass);
  color: var(--brass-ink);
}

.stack { display: flex; flex-direction: column; gap: 1rem; }

.chart-readout {
  display: grid;
  gap: 0.25rem;
  margin-top: 0.75rem;
  font-size: 0.875rem;
}

.sens { display: grid; margin: 1rem 0 0; padding: 0; font-size: 0.875rem; }
.sens-btn {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.75rem;
  width: 100%;
  padding: 0.65rem 0;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  color: inherit;
  text-align: left;
}
.sens-btn span:first-child { color: var(--muted); }
.sens-btn:hover span:first-child { color: var(--fg); }

.jump { text-decoration: none; display: inline-flex; align-items: center; }

@media (min-width: 64rem) {
  .jump { display: none; }
}

.card.is-quiet {
  opacity: 0.55;
}

#wealth-card.is-quiet {
  cursor: pointer;
}

.close-line {
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--muted);
}

.close-line.short {
  color: var(--danger);
}

.bar { display: flex; height: 0.75rem; border-radius: 999px; overflow: hidden; margin: 0.75rem 0; }
.parts { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; list-style: none; margin: 0; padding: 0; font-size: 0.875rem; }
.parts li { display: flex; justify-content: space-between; gap: 0.5rem; }

summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 2.75rem;
  cursor: pointer;
  font-weight: 600;
  list-style: none;
}
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; color: var(--brass); font-size: 1.25rem; line-height: 1; }
details[open] > summary::after { content: "–"; }
details .inside { padding-bottom: 0.5rem; }

.form-card h2 { font-size: 1.25rem; }
.field { display: flex; flex-direction: column; gap: 0.375rem; font-size: 0.875rem; font-weight: 600; }
.field .hint, .note { font-weight: 400; color: var(--muted); }
.control { position: relative; }
.control input {
  width: 100%;
  min-height: 2.75rem;
  border: 1px solid var(--line);
  border-radius: 0.75rem;
  background: var(--bg);
  color: var(--fg);
  padding: 0 0.75rem;
  font: inherit;
  font-variant-numeric: tabular-nums;
}
.control input:focus { outline: none; border-color: var(--brass); }
.control.prefixed input { padding-left: 1.6rem; }
.control.suffixed input { padding-right: 2.6rem; }
.prefix, .suffix {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted);
  font-weight: 400;
  pointer-events: none;
}
.prefix { left: 0.75rem; }
.suffix { right: 0.75rem; font-size: 0.875rem; }

.segmented { display: grid; gap: 0.25rem; padding: 0.25rem; border-radius: 0.75rem; background: var(--bg); }
.segmented.two { grid-template-columns: 1fr 1fr; }
.segmented.three { grid-template-columns: 1fr 1fr 1fr; }
.segmented button { background: transparent; color: var(--muted); }
.segmented button[aria-checked="true"] { background: var(--brass); color: var(--brass-ink); }

.text-btn, .ghost {
  min-height: 2.75rem;
  align-self: flex-start;
  border-radius: 0.75rem;
  background: transparent;
  padding: 0 0.75rem;
}
.text-btn { color: var(--brass); border: 0; }
.ghost { border: 1px solid var(--line); }

.fine { font-size: 0.875rem; color: var(--muted); }
.hidden { display: none; }

@media (min-width: 64rem) {
  h1 { font-size: 2.25rem; }
  .layout { grid-template-columns: 22rem minmax(0, 1fr); align-items: start; }
  .results { order: 2; }
  .form-card {
    order: 1;
    position: sticky;
    top: 0;
    max-height: 100vh;
    overflow: auto;
  }
}

@media (min-width: 80rem) {
  .verdicts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 40rem) {
  .chart-head { flex-direction: row; align-items: flex-end; justify-content: space-between; }
  .split-note { grid-column: 1 / -1; }
}

@media print {
  html, body { background: #fff; color: #1c1c1c; }
  .jump, #share, #print, .scan, .share-row { display: none !important; }
  #panel-now, #panel-later { display: flex !important; }
  .card.is-quiet { opacity: 1; }
  .layout { display: block; }
  .form-card { position: static; max-height: none; overflow: visible; break-before: page; }
  .card, .form-card, .banner {
    background: #fff;
    border-color: #ccc;
    break-inside: avoid;
  }
  .tone-ok { color: #2a5a2a; }
  .tone-warn { color: #8a6a12; }
  .tone-bad { color: #8a2a1a; }
  .muted, .kicker, .lede, .fine, .hint, .note { color: #444; }
}