/* Right-of-way simulator (js/rightofway.js): the top-down scene, the playback bar, the explore sectors. */
:root {
  --row-bg: #eef3f9; --row-grid: #d8e1ec; --row-you: var(--orange); --row-other: var(--ink-2); --row-halo: var(--surface);
  --row-rwy: #4b5563; --row-rwy-line: #f8fafc; --row-twy: #cbd5e1; --row-pat: #94a3b8;
  --row-water: #cfe6f5; --row-water-line: #b4d4ea; --row-bad: var(--bad); --row-ok: var(--good);
}
:root[data-theme="night"] {
  --row-bg: #121a27; --row-grid: #1d2838; --row-you: var(--orange); --row-other: var(--ink-2); --row-halo: var(--surface);
  --row-rwy: #2b3342; --row-rwy-line: #cbd5e1; --row-twy: #2a3445; --row-pat: #4d5b73;
  --row-water: #15283a; --row-water-line: #1e3a52; --row-bad: var(--bad); --row-ok: var(--good);
}
.row-layout { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(320px, 1fr); gap: 16px; align-items: start; }
.row-viewcol { position: sticky; top: calc(var(--bar) + 12px); display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.row-viewcard { padding: 8px; overflow: hidden; }
.row-hint { margin: 0 4px; }
.row-stage { display: block; }
.row-svg { display: block; width: 100%; height: auto; border-radius: var(--r-s); touch-action: none; user-select: none; }
.row-bg { fill: var(--row-bg); }
.row-stage.water .row-bg { fill: var(--row-water); }
.row-stage.night .row-bg { fill: #070b12; }
.row-gridl { stroke: var(--row-grid); stroke-width: 1; fill: none; }
.row-stage.water .row-gridl { stroke: var(--row-water-line); stroke-dasharray: 10 14; }
.row-stage.night .row-gridl { stroke: #0f1724; }
.row-rwy rect { fill: var(--row-rwy); }
.row-rwy .row-cl { stroke: var(--row-rwy-line); stroke-width: 2; stroke-dasharray: 10 8; }
.row-rn { fill: var(--row-rwy-line); font: 700 12px var(--ui); }
.row-pat { fill: none; stroke: var(--row-pat); stroke-width: 1.6; stroke-dasharray: 7 6; }
.row-patl { fill: var(--ink-3); font: 600 11px var(--ui); }
.row-twy { fill: none; stroke: var(--row-twy); stroke-width: 12; stroke-linecap: round; stroke-linejoin: round; }
.row-glare { fill: rgba(255, 214, 102, .22); }
.row-sun circle { fill: var(--amber); } .row-sun line { stroke: var(--amber); stroke-width: 3; stroke-linecap: round; } .row-sun text { fill: var(--ink-2); font: 700 12px var(--ui); }
.row-tr { fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; opacity: .55; }
.row-tr.you { stroke: var(--row-you); } .row-tr.other { stroke: var(--row-other); }
.row-gh { fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.row-gh.base { stroke: var(--row-bad); stroke-dasharray: 6 6; opacity: .75; }
.row-gh.res { stroke-dasharray: 2 7; opacity: .75; }
.row-gh.res.you { stroke: var(--row-you); } .row-gh.res.other { stroke: var(--row-other); }
.row-los line { stroke: var(--ink-3); stroke-width: 1.3; stroke-dasharray: 3 4; opacity: .9; }
.row-ac .row-gly use { fill: currentColor; }
.row-ac.you { color: var(--row-you); } .row-ac.other { color: var(--row-other); }
.row-rope { stroke: var(--row-other); stroke-width: 1.4; }
.row-lamp { fill: #fff7d6; filter: drop-shadow(0 0 6px #fde68a); }
.row-ac .row-lab text { font: 700 14px var(--ui); fill: var(--ink); paint-order: stroke; stroke: var(--row-halo); stroke-width: 4px; stroke-linejoin: round; }
.row-ac .row-lab .row-t2 { font-weight: 600; font-size: 12.5px; fill: var(--ink-2); }
.row-stage.night .row-ac .row-lab text { fill: #e5e7eb; stroke: #070b12; }
.row-burst circle { fill: none; stroke: var(--row-bad); stroke-width: 3; opacity: .9; }
.row-burst text { fill: var(--row-bad); font: 800 14px var(--ui); }
.row-hudc { fill: var(--row-halo); stroke: var(--line); } .row-north { fill: var(--ink-2); } .row-hudt { fill: var(--ink-2); font: 700 10px var(--ui); text-anchor: middle; }
.row-scale line { stroke: var(--ink-2); stroke-width: 2; } .row-scale text { fill: var(--ink-2); font: 600 11px var(--ui); text-anchor: middle; }
.row-stage.night .row-scale text, .row-stage.night .row-hudt { fill: #cbd5e1; }
.row-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; padding: 10px 4px 4px; }
.row-b { height: 34px; padding: 0 12px; font-size: .88rem; }
.row-play { min-width: 92px; }
.row-seg { display: inline-flex; padding: 3px; border-radius: 99px; background: var(--canvas); border: 1px solid var(--line); }
.row-seg button { height: 28px; padding: 0 11px; border: 0; border-radius: 99px; background: none; color: var(--ink-2); font: 700 .8rem var(--ui); cursor: pointer; }
.row-seg button[aria-pressed="true"] { background: var(--sunrise); color: #fff; }
.row-los-chk { padding: 4px 10px 4px 8px; }
.row-read { margin-left: auto; font-variant-numeric: tabular-nums; }
.row-pick { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-2); font-weight: 600; }
.row-pick select { height: 34px; padding: 0 8px; font-size: .9rem; max-width: 100%; }
.row-setup h2 { font-size: 1.25rem; }
.row-rules { margin-top: 12px; display: grid; gap: 6px; }
.row-rule { border: 1px solid var(--line); border-radius: var(--r-s); background: var(--surface-2); padding: 6px 10px; }
.row-rule summary { cursor: pointer; font-size: .9rem; }
.row-rule p { margin: 8px 0 4px; font-size: .88rem; line-height: 1.5; color: var(--ink-2); }
.row-rev { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.row-ctl { display: grid; gap: 12px; }
.row-presets { gap: 4px; }
.row-presets .btn { height: 32px; padding: 0 10px; font-size: .85rem; }
.row-range { display: grid; gap: 4px; font: 600 .88rem var(--ui); color: var(--ink-2); }
.row-range b { color: var(--ink); font-weight: 700; }
.row-range input { width: 100%; accent-color: var(--orange); }
.row-facts { margin: 0 0 6px; padding-left: 18px; line-height: 1.5; }
.row-note { margin: 8px 0 0; padding: 8px 10px; border-radius: var(--r-s); background: var(--canvas); line-height: 1.5; }
.row-verdict h2 { font-size: 1.3rem; }
/* explore: the sectors around you */
.row-sec { stroke: none; opacity: .18; }
.row-sec.on { opacity: .42; }
.row-sec.g { fill: var(--good); } .row-sec.r { fill: var(--bad); } .row-sec.w { fill: var(--line); }
.row-sec.small { opacity: .12; }
.row-sl { fill: var(--ink-2); font: 700 11px var(--ui); }
.row-edge { stroke: var(--ink-3); stroke-width: 1.2; stroke-dasharray: 4 4; }
.row-head { fill: none; stroke: var(--orange); stroke-width: 1.2; stroke-dasharray: 2 4; }
.row-sight { stroke: var(--orange); stroke-width: 1.4; stroke-dasharray: 5 4; }
.row-svg:has(.row-secs) { cursor: grab; }
@media (max-width: 900px) {
  .row-layout { grid-template-columns: minmax(0, 1fr); }
  .row-viewcol { position: static; }
}
@media (max-width: 520px) {
  .row-b { padding: 0 9px; }
  .row-read { margin-left: 0; width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .row-burst circle { opacity: 1; }
}

/* Resolution actions: replay, explore the risk, then continue. */
:root{--row-replay-bg:#e4eff8;--row-replay-ink:#245477;--row-replay-line:#91b0c9;--row-risk-bg:#fff0cf;--row-risk-ink:#755000;--row-risk-line:#c7a45e}
:root[data-theme="night"]{--row-replay-bg:#233f56;--row-replay-ink:#c2e6ff;--row-replay-line:#527e9d;--row-risk-bg:#443719;--row-risk-ink:#f4d58c;--row-risk-line:#927332}
.row-page .row-decision-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;align-items:stretch;margin-top:14px}
.row-page .row-decision-actions>.spacer{display:none}
.row-page .row-decision-actions>.btn{display:flex;align-items:center;justify-content:center;min-width:0;min-height:52px;height:100%;padding:10px 12px;font-size:.85rem;line-height:1.35;white-space:normal;text-align:center;gap:8px;box-shadow:none;transform:none}
.row-page .row-decision-actions .ico{flex-shrink:0}
.row-page .row-decision-actions>.row-replay{background:var(--row-replay-bg);color:var(--row-replay-ink);border-color:var(--row-replay-line)}
.row-page .row-decision-actions>.row-counterfactual{background:var(--row-risk-bg);color:var(--row-risk-ink);border-color:var(--row-risk-line)}
.row-page .row-decision-actions>.row-replay:hover{background:color-mix(in srgb,var(--row-replay-bg) 88%,var(--row-replay-line))}
.row-page .row-decision-actions>.row-counterfactual:hover{background:color-mix(in srgb,var(--row-risk-bg) 88%,var(--row-risk-line))}
.row-page .row-decision-actions>.btn:focus-visible{outline:2px solid var(--link);outline-offset:3px;box-shadow:none}
.row-page .row-decision-actions>a[href*="quiz?new"]{grid-column:1/-1;justify-self:end;min-height:36px;height:auto;padding:5px 10px}
@media(max-width:480px){.row-page .row-decision-actions{grid-template-columns:repeat(2,minmax(0,1fr))}.row-page .row-decision-actions>.primary{grid-column:1/-1}}

/* Keep scenario selection separate from actions that change the exercise. */
:root{--row-random-bg:color-mix(in srgb,var(--orange) 14%,var(--surface));--row-random-ink:var(--orange-text);--row-random-line:color-mix(in srgb,var(--orange) 45%,var(--line))}
:root[data-theme="night"]{--row-random-bg:color-mix(in srgb,var(--orange) 16%,var(--surface));--row-random-ink:var(--orange);--row-random-line:color-mix(in srgb,var(--orange) 45%,var(--line))}
.row-page .row-scenario-picker{display:grid;gap:12px;min-width:0}
.row-page .row-scenario-picker .row-pick{display:grid;gap:6px;min-width:0;font-size:.8rem}
.row-page .row-scenario-picker select{width:100%;min-width:0;height:42px;margin:0;padding:8px 12px}
.row-page .row-picker-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.row-page .row-picker-actions>.btn{display:flex;justify-content:center;align-items:center;min-width:0;min-height:42px;padding:9px 10px;text-align:center;white-space:normal;line-height:1.35;font-size:.85rem;box-shadow:none;transform:none}
.row-page .row-picker-actions>.row-variant{background:var(--row-replay-bg);color:var(--row-replay-ink);border-color:var(--row-replay-line)}
.row-page .row-picker-actions>.row-random{background:var(--row-random-bg);color:var(--row-random-ink);border-color:var(--row-random-line)}
.row-page .row-picker-actions>.row-variant:hover{background:color-mix(in srgb,var(--row-replay-bg) 88%,var(--row-replay-line))}
.row-page .row-picker-actions>.row-random:hover{background:color-mix(in srgb,var(--row-random-bg) 88%,var(--row-random-line))}
.row-page .row-picker-actions>.btn:focus-visible{outline:2px solid var(--link);outline-offset:3px;box-shadow:none}