/* lvt-explainer — warm, light, California-ish. One reading column; the street
   SVG and the tables stretch to its full width. Every editable field is 16px so
   iOS Safari never auto-zooms on focus. */

:root {
  --accent: #e8772e;
  --accent-soft: #fbe7d5;
  --bg: #fdfaf5;
  --card: #ffffff;
  --text: #2c2622;
  --muted: #766a60;
  --border: #e7ddcf;
  --bar: #9fb0b8;
  --bar-dark: #7d919b;
  --roof: #7d919b;
  --wall: #fffdf9;
  --ground: #d9cfbf;
  --good: #2f7d5d;
  --bad: #b2503a;
  --shadow: 0 1px 2px rgba(60, 45, 30, .07);
}

@media (prefers-color-scheme: dark) {
  :root {
    --accent: #f28c46;
    --accent-soft: #46301f;
    --bg: #191614;
    --card: #221e1a;
    --text: #ece4da;
    --muted: #a89c90;
    --border: #3b342c;
    --bar: #6d7d85;
    --bar-dark: #8a9aa2;
    --roof: #6d7d85;
    --wall: #2e2823;
    --ground: #3b342c;
    --good: #5fbe92;
    --bad: #e08067;
    --shadow: none;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0 auto;
  padding: 1rem 1rem 3rem;
  max-width: 780px;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 1rem;
  line-height: 1.55;
  background: var(--bg);
  color: var(--text);
  -webkit-text-size-adjust: 100%;
}

header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .75rem;
  flex-wrap: wrap;
}

h1 { margin: .2rem 0; font-size: 1.5rem; line-height: 1.2; }
h2 { font-size: 1.2rem; margin: 0 0 .6rem; line-height: 1.3; }
h3 { font-size: 1rem; margin: 0 0 .5rem; letter-spacing: .01em; }
p { margin: 0 0 .8rem; }

.home-link { color: var(--muted); text-decoration: none; font-size: .9rem; white-space: nowrap; }
.home-link:hover { color: var(--accent); }

.lede { color: var(--muted); margin: .4rem 0 1.2rem; }

/* ── Cards & acts ──────────────────────────────────────────────────────── */

.card, .act {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 1rem;
  margin: 0 0 1.1rem;
  box-shadow: var(--shadow);
}

.act > h2 { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; }

.act-no {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--accent-soft);
  border-radius: 99px;
  padding: .15rem .5rem;
}

.card.mini {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: .9rem;
  margin: 1rem 0;
  box-shadow: none;
}
.card.mini h3 { color: var(--accent); }

.hed { font-size: 1.05rem; line-height: 1.4; margin: .1rem 0 .9rem; }

.framing {
  border-left: 3px solid var(--accent);
  padding: .1rem 0 .1rem .75rem;
  margin: 1rem 0;
}

.note, .hint { font-size: .85rem; color: var(--muted); margin: .5rem 0 0; }
.hint { margin: .3rem 0 0; }

.ticks { margin: .4rem 0 1rem; padding-left: 1.1rem; }
.ticks li { margin: .3rem 0; }

footer { color: var(--muted); font-size: .82rem; margin-top: 1.5rem; }

/* ── Persona & levers ──────────────────────────────────────────────────── */

.persona-head { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; }
.persona-head h2 { margin-bottom: .6rem; }

.linky {
  background: none; border: none; padding: 0;
  color: var(--muted); font-size: .85rem; font-family: inherit;
  text-decoration: underline; cursor: pointer;
}
.linky:hover { color: var(--accent); }

/* One field = label on its own line, then the control row. Same order in every
   cell: label first, then the input (a $ affix may sit beside the input). */
.field { margin: 0 0 .85rem; }
.field > label,
.lever > label {
  display: block;
  font-size: .85rem;
  font-weight: 600;
  color: var(--muted);
  margin: 0 0 .3rem;
}

.ctl { display: flex; flex-direction: column; gap: .15rem; }
.ctl input[type=range] { width: 100%; }
.row { display: flex; align-items: center; gap: .5rem; }

.affix { font-size: 1rem; color: var(--muted); white-space: nowrap; }
/* Every control row reserves the same prefix slot, with or without a "$", so
   the input boxes in a group all start at the same x. */
.affix.pre { width: .85rem; flex: none; }

input[type=number] {
  font: inherit;
  font-size: 1rem;              /* never below 16px: iOS zooms on focus */
  height: 2.4rem;
  padding: 0 .55rem;
  width: 100%;
  min-width: 0;
  max-width: 11rem;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--bg);
  color: var(--text);
}
input[type=number]:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

input[type=range] {
  flex: 1;
  min-width: 0;
  height: 2.4rem;
  accent-color: var(--accent);
  background: transparent;
}

.persona-summary {
  margin: .3rem 0 0;
  padding-top: .7rem;
  border-top: 1px dashed var(--border);
  font-size: .88rem;
  color: var(--muted);
}

.levers {
  margin: 1rem 0 .3rem;
  padding: .75rem .8rem .1rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 12px;
}
.lever { margin: 0 0 .7rem; }
.lever .row { gap: .5rem; }
.lever input[type=number] { width: 8rem; max-width: 100%; flex: none; }

/* ── The street ────────────────────────────────────────────────────────── */

.street-wrap { margin: 1rem 0 .4rem; }

.street-row {
  display: grid;
  gap: 2px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.street-row.bills { font-size: .72rem; font-weight: 700; margin-bottom: .15rem; letter-spacing: -.02em; }
.street-row.years { font-size: .75rem; color: var(--muted); margin-top: .15rem; }
.street-row .you { color: var(--accent); }
.street-row .tagme { display: block; font-size: .65rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); }

.street-svg { display: block; width: 100%; height: auto; }

.street-cap { font-size: .78rem; color: var(--muted); text-align: center; margin: .35rem 0 0; }

/* ── Big number ────────────────────────────────────────────────────────── */

.bignum {
  display: flex;
  align-items: baseline;
  gap: .6rem;
  flex-wrap: wrap;
  margin: 1rem 0;
  padding: .7rem .85rem;
  background: var(--accent-soft);
  border-radius: 12px;
}
.bignum strong { font-size: 1.9rem; line-height: 1.05; color: var(--accent); font-variant-numeric: tabular-nums; }
.bignum span { font-size: .88rem; flex: 1 1 12rem; min-width: 0; }

/* ── Before/after tables ───────────────────────────────────────────────── */

.ba { margin: .8rem 0 0; overflow-x: auto; }
.ba table { width: 100%; border-collapse: collapse; font-size: .8rem; font-variant-numeric: tabular-nums; }
.ba caption { text-align: left; font-size: .8rem; color: var(--muted); padding-bottom: .3rem; }
.ba th, .ba td { padding: .4rem .28rem; text-align: right; border-bottom: 1px solid var(--border); }
/* Numbers never wrap; the header row and the row labels may, so a narrow phone
   gets a taller table instead of a sideways-scrolling one. */
.ba tbody td + td { white-space: nowrap; }
.ba th:first-child, .ba td:first-child { text-align: left; }
.ba thead th { font-size: .75rem; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.ba tbody tr:last-child td { border-bottom: none; }
.ba td.up { color: var(--bad); font-weight: 700; }
.ba td.down { color: var(--good); font-weight: 700; }
.ba td.flat { color: var(--muted); font-weight: 700; }
.ba .muted { display: block; color: var(--muted); font-weight: 400; font-size: .92em; }

/* ── Act 3 morph ───────────────────────────────────────────────────────── */

.morph { margin: 1rem 0 .2rem; }
.morph-labels { display: flex; justify-content: space-between; font-size: .78rem; color: var(--muted); font-weight: 600; }
.morph input[type=range] { width: 100%; }
.morph-btns { display: flex; gap: .5rem; }

.chip {
  font: inherit;
  font-size: .85rem;
  padding: .35rem .7rem;
  border: 1px solid var(--border);
  border-radius: 99px;
  background: var(--bg);
  color: var(--text);
  cursor: pointer;
}
.chip:hover { border-color: var(--accent); color: var(--accent); }

.deltas { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: .4rem; margin: .8rem 0 0; }
.delta {
  display: flex; align-items: baseline; justify-content: space-between; gap: .4rem;
  font-size: .85rem; padding: .35rem .55rem;
  border: 1px solid var(--border); border-radius: 9px; background: var(--bg);
  font-variant-numeric: tabular-nums;
}
.delta.me { border-color: var(--accent); background: var(--accent-soft); }
.delta .d-yr { color: var(--muted); white-space: nowrap; }
.delta.me .d-yr { color: var(--accent); font-weight: 700; }
.delta .d-v { font-weight: 700; white-space: nowrap; }
.delta .up { color: var(--bad); }
.delta .down { color: var(--good); }
.delta .flat { color: var(--muted); }

/* ── Toggle ────────────────────────────────────────────────────────────── */

.toggle { display: flex; align-items: center; gap: .5rem; font-size: .9rem; margin: .6rem 0; cursor: pointer; }
.toggle input { width: 1.15rem; height: 1.15rem; accent-color: var(--accent); }

/* ── Scorecard ─────────────────────────────────────────────────────────── */

.score { margin: .9rem 0 .3rem; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.score-head, .score-row { display: grid; grid-template-columns: 1fr 1.25fr 1.25fr; gap: .5rem; padding: .5rem .6rem; }
.score-head { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 700; background: var(--bg); }
.score-row { border-top: 1px solid var(--border); font-size: .82rem; }
.score-row .crit { font-weight: 600; }
.score-row .cell b { font-size: .95rem; margin-right: .15rem; }
.legend { font-size: .78rem; color: var(--muted); }

/* ── Ladder ────────────────────────────────────────────────────────────── */

.ladder { margin: .6rem 0 0; padding-left: 1.2rem; }
.ladder li { margin: 0 0 .7rem; font-size: .9rem; }
.ladder .tag { display: block; font-size: .78rem; color: var(--muted); margin-top: .15rem; }

/* ── Show the math ─────────────────────────────────────────────────────── */

details.math { margin: 1rem 0 0; border-top: 1px dashed var(--border); padding-top: .6rem; }
details.math summary { cursor: pointer; font-size: .85rem; font-weight: 600; color: var(--muted); }
details.math summary:hover { color: var(--accent); }
details.math > div { font-size: .82rem; color: var(--muted); margin-top: .5rem; }
details.math p { margin: 0 0 .5rem; }
details.math code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .95em;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: .05rem .25rem;
  overflow-wrap: anywhere;
}
details.math ul { margin: 0 0 .5rem; padding-left: 1.1rem; }
details.math li { margin: .2rem 0; }

/* ── Wider screens ─────────────────────────────────────────────────────── */

@media (min-width: 620px) {
  body { padding: 1.5rem 1.5rem 4rem; }
  h1 { font-size: 1.9rem; }
  h2 { font-size: 1.35rem; }
  .card, .act { padding: 1.35rem 1.5rem; }
  .street-row.bills { font-size: .9rem; letter-spacing: 0; }
  .ba table { font-size: .88rem; }
  .ba th, .ba td { padding: .4rem .35rem; }
  .street-row.years { font-size: .82rem; }
  .bignum strong { font-size: 2.4rem; }
  .lever, .field { display: grid; grid-template-columns: 13rem 1fr; align-items: center; gap: .2rem .75rem; }
  .field > label, .lever > label { margin: 0; }
  .field .hint, .lever .hint { grid-column: 2; margin-top: .25rem; }
  .persona-summary { display: block; }
}