html, body { margin: 0; }
[hidden] { display: none !important; }

/* Layout: full-screen board. Navy rail of question tiles on the inline-start edge; the stage shows one question at a time with controls on the left and "why + fines" in a side column; a prev/next bar sits under the stage. Phones: rail becomes a sticky top strip, everything stacks. */
:root {
  --bg: #edf0f5;
  --surface: #ffffff;
  --ink: #111a2b;
  --muted: #566176;
  --line: #d2d9e5;
  --accent: #1c3a6e;
  --accent-soft: #e2e9f6;
  --gold: #9f7a1c;
  --gold-soft: #f4ecd6;
  --risk: #a2342a;
  --risk-soft: #f8e4e1;
  --rail: #12274b;
  --rail-ink: #eef2fa;
  --rail-muted: #a7b4cd;
  --rail-hi: rgba(255, 255, 255, 0.09);
  --rail-line: rgba(255, 255, 255, 0.16);
  --rail-gold: #d8b45c;
  --display: "Frank Ruhl Libre", "PT Serif", Georgia, serif;
  --body: "Rubik", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0d1421; --surface: #162033; --ink: #e8edf6; --muted: #9eabc0; --line: #2a3650;
    --accent: #9fbaf0; --accent-soft: #1c2d4d; --gold: #dcb86a; --gold-soft: #33291a;
    --risk: #f2938b; --risk-soft: #3b1f1d; --rail: #091121; --rail-ink: #e8edf6;
    --rail-muted: #8e9bb4; --rail-hi: rgba(255, 255, 255, 0.07); --rail-line: rgba(255, 255, 255, 0.12);
    --rail-gold: #dcb86a; color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0d1421; --surface: #162033; --ink: #e8edf6; --muted: #9eabc0; --line: #2a3650;
  --accent: #9fbaf0; --accent-soft: #1c2d4d; --gold: #dcb86a; --gold-soft: #33291a;
  --risk: #f2938b; --risk-soft: #3b1f1d; --rail: #091121; --rail-ink: #e8edf6;
  --rail-muted: #8e9bb4; --rail-hi: rgba(255, 255, 255, 0.07); --rail-line: rgba(255, 255, 255, 0.12);
  --rail-gold: #dcb86a; color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body { background: var(--bg); color: var(--ink); font-family: var(--body); font-size: 18px; line-height: 1.55; }
button, input, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
h1, h2 { font-family: var(--display); margin: 0; line-height: 1.12; text-wrap: balance; }
p { margin: 0; }
input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
input[type="number"] { -moz-appearance: textfield; appearance: textfield; }

.app { display: grid; grid-template-columns: 330px minmax(0, 1fr); height: 100%; }

/* Rail */
.rail { background: var(--rail); color: var(--rail-ink); display: flex; flex-direction: column; gap: 22px; padding: 22px 16px; overflow-y: auto; min-height: 0; }
.rail-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-inline: 10px; }
.bsd { font-family: var(--display); color: var(--rail-muted); font-size: 0.9rem; }
.mini-title { display: none; font-family: var(--display); font-weight: 700; font-size: 1.15rem; }
.lang { display: inline-flex; border: 1px solid var(--rail-line); border-radius: 999px; overflow: hidden; }
.lang button { border: 0; background: transparent; color: var(--rail-muted); padding: 6px 14px; cursor: pointer; font-size: 0.88rem; }
.lang button[aria-pressed="true"] { background: var(--rail-gold); color: var(--rail); font-weight: 600; }
.rail-top { display: grid; gap: 6px; padding-inline: 10px; }
.org { color: var(--rail-gold); font-size: 0.95rem; font-weight: 500; }
.rail-title { font-family: var(--display); font-size: 2rem; font-weight: 700; line-height: 1.1; background: none; border: 0; padding: 0; text-align: start; cursor: pointer; color: var(--rail-ink); }
.prog { display: grid; gap: 8px; padding-inline: 10px; }
.prog-text { font-size: 0.92rem; color: var(--rail-muted); font-variant-numeric: tabular-nums; }
.prog-bar { height: 6px; border-radius: 999px; background: var(--rail-line); overflow: hidden; }
.prog-fill { height: 100%; width: 0; background: var(--rail-gold); transition: width .3s ease; }
.tiles { display: grid; gap: 3px; }
.tile { display: grid; grid-template-columns: 36px minmax(0, 1fr); align-items: center; gap: 12px; background: transparent; border: 0; border-radius: 12px; padding: 8px 10px; color: var(--rail-ink); cursor: pointer; text-align: start; font-size: 1rem; }
.tile:hover { background: var(--rail-hi); }
.tile[aria-current="step"] { background: var(--rail-hi); box-shadow: inset 0 0 0 1px var(--rail-gold); }
.tile-num { width: 36px; height: 36px; border-radius: 50%; border: 1.5px solid var(--rail-line); display: grid; place-items: center; font-family: var(--display); font-weight: 700; font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.tile.done .tile-num { background: var(--rail-gold); border-color: var(--rail-gold); color: var(--rail); }
.tile-name { min-width: 0; overflow-wrap: anywhere; }
.tiles-sep { height: 1px; background: var(--rail-line); margin: 8px 10px; }
.rail-note { margin-top: auto; font-size: 0.84rem; color: var(--rail-muted); line-height: 1.5; padding-inline: 10px; }

/* Main */
.main { display: grid; grid-template-rows: minmax(0, 1fr) auto; min-width: 0; min-height: 0; height: 100%; }
.stage { overflow-y: auto; min-height: 0; padding: 44px 56px 56px; }
.stage-in { max-width: 1260px; margin-inline: auto; display: grid; gap: 30px; }
.q-top { display: grid; gap: 10px; }
.step-label { font-size: 0.98rem; color: var(--gold); font-weight: 600; letter-spacing: 0.02em; }
.q-title { font-size: clamp(2.1rem, 3.6vw, 3.2rem); font-weight: 700; }
.q-intro { font-size: 1.15rem; color: var(--muted); max-width: 62ch; }
.q-grid { display: grid; grid-template-columns: minmax(0, 1fr) 370px; gap: 44px; align-items: start; }
.fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 34px 28px; min-width: 0; }
.field { display: grid; gap: 12px; grid-column: 1 / -1; min-width: 0; align-content: start; }
.field.half { grid-column: span 1; }
.f-label { font-weight: 600; font-size: 1.15rem; }
.f-hint { font-size: 0.95rem; color: var(--muted); margin-top: -6px; }

.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip { border: 1.5px solid var(--line); background: var(--surface); border-radius: 999px; padding: 10px 20px; min-height: 50px; cursor: pointer; font-size: 1.02rem; display: inline-flex; align-items: center; gap: 8px; transition: background-color .15s, border-color .15s, color .15s; }
.chip:hover { border-color: var(--accent); }
.chip[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--surface); }
.chip[aria-pressed="true"]::before { content: "✓"; font-weight: 700; }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.card { text-align: start; border: 1.5px solid var(--line); background: var(--surface); border-radius: 16px; padding: 18px 20px; min-height: 100px; cursor: pointer; display: grid; gap: 6px; align-content: start; min-width: 0; transition: background-color .15s, border-color .15s; }
.card:hover { border-color: var(--accent); }
.card[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 0 0 1.5px var(--accent); }
.c-title { font-weight: 600; font-size: 1.1rem; display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.card[aria-pressed="true"] .c-title::after { content: "✓"; color: var(--accent); font-weight: 700; }
.c-desc { font-size: 0.95rem; color: var(--muted); }
.pick-empty { font-size: 1rem; color: var(--muted); background: var(--surface); border: 1.5px dashed var(--line); border-radius: 14px; padding: 14px 18px; }

.inp, textarea { width: 100%; border: 1.5px solid var(--line); background: var(--surface); border-radius: 12px; padding: 13px 16px; font-size: 1.05rem; }
.inp:focus, textarea:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 4px var(--accent-soft); }
textarea { min-height: 120px; resize: vertical; }
.num-big { max-width: 240px; font-size: 1.35rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.other-in { margin-top: 2px; }

.counts { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 12px; }
.count { display: flex; align-items: center; justify-content: space-between; gap: 14px; background: var(--surface); border: 1.5px solid var(--line); border-radius: 16px; padding-block: 12px; padding-inline: 18px 12px; }
.count label { font-weight: 500; min-width: 0; }
.stepper { display: flex; align-items: center; gap: 4px; flex: none; }
.stepper button { width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--line); background: var(--bg); font-size: 1.4rem; line-height: 1; cursor: pointer; display: grid; place-items: center; }
.stepper button:hover { border-color: var(--accent); color: var(--accent); }
.stepper input { width: 64px; text-align: center; font-size: 1.35rem; font-weight: 700; border: 0; background: transparent; font-variant-numeric: tabular-nums; padding: 4px 0; }

.slider { display: grid; gap: 14px; background: var(--surface); border: 1.5px solid var(--line); border-radius: 18px; padding: 22px 24px; }
.slider-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.slider-out { font-family: var(--display); font-size: 2.7rem; font-weight: 700; color: var(--accent); line-height: 1; font-variant-numeric: tabular-nums; }
.slider-out.empty { font-family: var(--body); font-size: 1.05rem; font-weight: 400; color: var(--muted); }
.slider-num { max-width: 200px; font-variant-numeric: tabular-nums; }
.range { -webkit-appearance: none; appearance: none; width: 100%; height: 10px; border-radius: 999px; cursor: pointer; margin: 10px 0; background: linear-gradient(to right, var(--accent) var(--p, 0%), var(--line) var(--p, 0%)); }
[dir="rtl"] .range { background: linear-gradient(to left, var(--accent) var(--p, 0%), var(--line) var(--p, 0%)); }
.range::-webkit-slider-thumb { -webkit-appearance: none; width: 34px; height: 34px; border-radius: 50%; background: var(--surface); border: 4px solid var(--accent); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18); }
.range::-moz-range-thumb { width: 26px; height: 26px; border-radius: 50%; background: var(--surface); border: 4px solid var(--accent); }
.range::-moz-range-track { background: transparent; }
.slider-ends { display: flex; justify-content: space-between; font-size: 0.92rem; color: var(--muted); font-variant-numeric: tabular-nums; }

.note { background: var(--gold-soft); border-radius: 18px; padding: 22px 24px; gap: 8px; }
.note-label { font-weight: 700; color: var(--gold); font-size: 0.98rem; }
.note p { font-size: 1.05rem; }

.aside { display: grid; gap: 16px; }
.why { background: var(--surface); border: 1.5px solid var(--line); border-radius: 18px; padding: 22px 24px; display: grid; gap: 8px; }
.why-label { font-size: 0.95rem; font-weight: 700; color: var(--gold); }
.why p { font-size: 1.02rem; line-height: 1.65; }
.fines-label { font-size: 0.95rem; font-weight: 700; color: var(--risk); padding-inline: 4px; }
.fine { background: var(--surface); border: 1.5px solid var(--line); border-radius: 16px; padding: 18px 20px; display: grid; gap: 4px; }
.fine-kind { font-size: 0.78rem; font-weight: 600; color: var(--risk); background: var(--risk-soft); border-radius: 999px; padding: 2px 10px; justify-self: start; }
.fine-amt { font-family: var(--display); font-weight: 700; font-size: 2rem; color: var(--risk); line-height: 1.15; font-variant-numeric: tabular-nums; }
.fine-who { font-weight: 600; font-size: 1rem; }
.fine-what { font-size: 0.95rem; color: var(--muted); }

.coef { display: flex; align-items: center; gap: 22px; background: var(--accent-soft); border-radius: 18px; padding: 20px 24px; flex-wrap: wrap; }
.coef-k { font-family: var(--display); font-weight: 900; font-size: 2.8rem; color: var(--accent); line-height: 1; font-variant-numeric: tabular-nums; }
.coef-main { display: grid; gap: 2px; min-width: 0; }
.coef-amt { font-family: var(--display); font-weight: 700; font-size: 2.3rem; line-height: 1.1; font-variant-numeric: tabular-nums; }
.coef-amt.empty { font-family: var(--body); font-weight: 400; font-size: 1.05rem; color: var(--muted); }
.coef-note { color: var(--muted); font-size: 0.98rem; font-variant-numeric: tabular-nums; }

/* Welcome */
.welcome { display: grid; gap: 30px; max-width: 980px; padding-block: 2vh; }
.w-org { color: var(--gold); font-weight: 600; font-size: 1.1rem; }
.w-title { font-size: clamp(2.8rem, 6vw, 4.8rem); font-weight: 900; line-height: 1.02; }
.w-patron { font-family: var(--display); font-size: 1.4rem; color: var(--muted); }
.w-lede { font-size: 1.3rem; max-width: 50ch; }
.w-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.fact { background: var(--surface); border: 1.5px solid var(--line); border-radius: 18px; padding: 22px; display: grid; gap: 6px; align-content: start; }
.fact b { font-family: var(--display); font-size: 2.3rem; color: var(--accent); line-height: 1.05; }
.fact span { color: var(--muted); font-size: 1rem; }
.w-privacy { font-size: 1.02rem; color: var(--muted); max-width: 62ch; }
.w-actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* Final */
.final-grid { display: grid; grid-template-columns: minmax(0, 1fr) 370px; gap: 44px; align-items: start; }
.final-main { display: grid; gap: 16px; min-width: 0; }
.summary { min-height: 440px; font-size: 1rem; line-height: 1.65; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.status { color: var(--muted); font-size: 0.98rem; }
.confirm { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.next-steps { margin: 0; padding-inline-start: 1.3em; display: grid; gap: 10px; font-size: 1.02rem; }
.next-steps li::marker { font-family: var(--display); font-weight: 700; color: var(--gold); }

/* Bottom bar */
.navbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; background: var(--surface); border-top: 1px solid var(--line); padding: 16px 56px calc(16px + env(safe-area-inset-bottom, 0px)); }
.nav-mid { color: var(--muted); font-size: 0.98rem; text-align: center; font-variant-numeric: tabular-nums; }
.btn { border: 1.5px solid var(--accent); background: var(--accent); color: var(--surface); border-radius: 14px; padding: 13px 26px; min-height: 54px; font-size: 1.06rem; font-weight: 600; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 10px; }
.btn:hover { filter: brightness(1.08); }
.btn.ghost { background: transparent; color: var(--accent); }
.btn.danger { background: transparent; border-color: var(--risk); color: var(--risk); }
.btn.big { font-size: 1.2rem; padding: 16px 34px; min-height: 62px; }
.btn[hidden] { display: none !important; }
.arrow { display: inline-block; }
[dir="rtl"] .arrow { transform: scaleX(-1); }

@media (max-width: 1220px) {
  .q-grid, .final-grid { grid-template-columns: minmax(0, 1fr); }
  .stage { padding: 36px 36px 48px; }
  .navbar { padding-inline: 36px; }
}
@media (max-width: 880px) {
  html, body { height: auto; }
  .app { grid-template-columns: minmax(0, 1fr); height: auto; }
  .rail { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 10; padding: 10px 16px 12px; gap: 10px; overflow: visible; }
  .rail-row { padding-inline: 0; }
  .bsd, .rail-top, .rail-note, .tiles-sep, .tile-name { display: none; }
  .mini-title { display: block; }
  .prog { padding-inline: 0; }
  .prog-text { display: none; }
  .tiles { display: flex; overflow-x: auto; gap: 6px; padding-block: 2px; scrollbar-width: none; }
  .tile { grid-template-columns: 36px; padding: 3px; flex: none; }
  .main { height: auto; }
  .stage { overflow: visible; padding: 26px 16px 36px; }
  .fields { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .field.half { grid-column: 1 / -1; }
  .w-facts { grid-template-columns: minmax(0, 1fr); }
  .navbar { position: sticky; bottom: 0; z-index: 10; padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px)); }
  .nav-mid, .nl-x { display: none; }
  .navbar .btn { flex: 1; justify-content: center; min-width: 0; }
  .btn { padding: 11px 18px; min-height: 50px; }
  .app { overflow-x: clip; }
  .slider-out { font-size: 2.1rem; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }

.hp { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; opacity: 0; }
.fine-print { font-size: 0.95rem; color: var(--muted); max-width: 70ch; line-height: 1.6; }
.btn:disabled { opacity: 0.6; cursor: progress; }