/* Control Freak styles. Colours, fonts and the rules for them: tokens.css and docs/design.md.
   Layout: full-height app, map on the left, a 400 px panel on the right.
   Below 900 px wide: full-screen map with a bottom sheet.
   Shape language: square corners and 2 px ink rules. Round only for control circles, pills,
   the info button and the phone sheet. One hard shadow, on the primary button. */
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
[hidden]{display:none!important}
html,body{margin:0;height:100%}
body{background:var(--ground);color:var(--ink);font:14px/1.45 var(--f-ui)}
:focus-visible{outline:2px solid var(--best);outline-offset:2px}

.app{height:100%;display:grid;grid-template-columns:minmax(0,1fr) clamp(400px,32vw,520px);grid-template-rows:auto minmax(0,1fr);
  padding:env(safe-area-inset-top,0) env(safe-area-inset-right,0) env(safe-area-inset-bottom,0) env(safe-area-inset-left,0)}

/* ---------- app bar ---------- */
.bar{grid-column:1/-1;display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:9px 16px;border-bottom:2px solid var(--rule);background:var(--paper)}
h1{display:flex;align-items:center;gap:9px;font:900 22px/1 var(--f-ui);letter-spacing:-.01em;margin:0}
.kite{flex:none;width:24px;height:24px;display:block}
.kite .sq{fill:var(--paper);stroke:var(--ink);stroke-width:1.5}
.kite .tri{fill:var(--hivis)}
.alpha{font:700 10px/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--course);border:1.5px solid var(--course);border-radius:999px;padding:4px 7px 3px}
.course{font:700 11px var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
/* same height as the course picker beside it; right padding less the trailing letter-spacing, so the word sits centred */
.style-chip{display:inline-flex;align-items:center;justify-content:center;height:27px;box-sizing:border-box;font:700 11px/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink);background:var(--paper);border:2px solid var(--rule);border-radius:999px;padding:1px calc(16px - .1em) 0 16px;cursor:pointer}
.style-chip:focus-visible{outline-offset:3px}
.style-chip.night{background:var(--ink);color:var(--paper)}
.rules-pop .pop-body{display:grid;gap:10px}
.rules-pop .rulescard{border-width:1.5px}
.rules-pop .pop-links{display:flex;flex-wrap:wrap;gap:6px 16px}
.rules-chip{gap:6px}
.rules-chip .rc-dot{opacity:.6}
.rules-chip .chev{width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:2.2;margin-left:1px}
.rules-chip .rc-short{display:none}
.style-chip:hover{background:var(--ground)}.style-chip.night:hover{background:var(--ink);opacity:.85}
.course-info{padding:14px 0 10px;border-bottom:1px solid var(--hair);display:grid;gap:8px}
.course-info h3{font:900 17px/1.2 var(--f-ui);margin:0}
.course-info .k{font:700 11px var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.course-info table,.pop table{border-collapse:collapse;width:100%;max-width:520px;font-size:13px;font-variant-numeric:tabular-nums}
.course-info td,.course-info th,.pop td,.pop th{padding:5px 8px;border-bottom:1px solid var(--hair);text-align:left}
.course-info th,.pop th{font:700 11px var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);border-bottom:2px solid var(--rule)}
.course-info td.n,.pop td.n{font-family:var(--f-mono);text-align:right}
.course-info .sbar,.pop .sbar{display:inline-block;height:8px;background:var(--ink);vertical-align:middle}
/* the picker draws its own ⌄ (ink colour, 12 px in from the border), so it looks the same in every browser */
.course-sel{-webkit-appearance:none;appearance:none;box-sizing:border-box;height:27px;font:700 11px var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink);border:2px solid var(--rule);padding:0 32px 0 12px;max-width:260px;cursor:pointer;
  background:linear-gradient(45deg,transparent 50%,var(--ink) 50%) calc(100% - 17px) 55%/5px 5px no-repeat,linear-gradient(135deg,var(--ink) 50%,transparent 50%) calc(100% - 12px) 55%/5px 5px no-repeat,var(--paper)}
.course-sel:hover{background-color:var(--ground)}
.tabs{margin-left:auto;display:flex;border:2px solid var(--rule)}
.tabs button{font:700 13px var(--f-ui);padding:6px 14px;border:0;background:var(--paper);color:var(--ink);cursor:pointer}
.tabs button+button{border-left:2px solid var(--rule)}
.tabs button[aria-selected="true"]{background:var(--sel-bg);color:var(--sel-ink);box-shadow:inset 0 -4px 0 var(--sel-mark)}
.tabs button:focus-visible{outline-offset:-5px}
.infobtn{display:inline-flex;align-items:center;gap:7px;font:700 12px/1 var(--f-ui);padding:3px 11px 3px 3px;border-radius:999px;border:2px solid var(--rule);background:var(--paper);color:var(--ink);cursor:pointer}
.infobtn::before{content:"i";flex:none;display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--ink);color:var(--paper);font:900 12px/1 var(--f-ui)}
.infobtn:hover{background:var(--ground)}
h2{font:700 11px/1.3 var(--f-mono);letter-spacing:.1em;margin:0;text-transform:uppercase;color:var(--muted)}

/* ---------- map (always a light photo, so its overlays use fixed light colours) ---------- */
.mapwrap{position:relative;min-width:0;min-height:0;overflow:hidden;background:#2a2c2e}
canvas#map{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;cursor:grab}
canvas#map.drag{cursor:grabbing}
.zoom{position:absolute;top:12px;left:12px;display:grid;border:2px solid #111;background:#fff}
.zoom button{width:34px;height:34px;border:0;background:#fff;color:#111;font:700 18px/1 var(--f-ui);cursor:pointer}
.zoom button+button{border-top:2px solid #111}
.zoom button:hover{background:#EFF0EC}
.maplegend{position:absolute;left:12px;bottom:12px;display:flex;gap:12px;flex-wrap:wrap;background:rgba(255,255,255,.94);color:#111;border:1.5px solid #111;padding:5px 9px;font:700 12px var(--f-ui);max-width:calc(100% - 24px)}
.tip{position:absolute;pointer-events:none;background:#111;color:#fff;font:400 12px/1.35 var(--f-mono);padding:6px 8px;transform:translate(-50%,calc(-100% - 14px));white-space:nowrap}
.sw{display:inline-block;width:20px;height:5px;vertical-align:middle;margin-right:6px}
.sw.best{background:#0B4FD0;opacity:.75;height:7px}
.sw.you{background:#C9F400;box-shadow:0 0 0 1.5px #111}
.layers{position:absolute;right:12px;bottom:30px;display:grid;justify-items:end;gap:6px;z-index:3}
.layers-btn{font:700 12px var(--f-ui);background:#fff;color:#111;border:2px solid #111;padding:6px 10px;cursor:pointer}
.layers-panel{display:grid;gap:6px;background:rgba(255,255,255,.96);color:#111;border:1.5px solid #111;padding:9px 11px;font:400 13px var(--f-ui);max-width:min(280px,calc(100vw - 40px))}
.layers-panel[hidden]{display:none}
.layers-panel label{display:flex;align-items:center;gap:7px;cursor:pointer}
.layers-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:-2px -4px 2px 0;font:700 10px var(--f-mono);letter-spacing:.1em;text-transform:uppercase}
.layers-hide{display:grid;place-items:center;width:24px;height:24px;padding:0;border:1.5px solid #111;background:#fff;color:#111;cursor:pointer}
.layers-hide:hover{background:#eee}
.layers-hide svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.2}
.layers-panel input{margin:0;accent-color:#111}
.attrib{position:absolute;right:8px;bottom:6px;font:10px var(--f-ui);color:#333;background:rgba(255,255,255,.8);padding:1px 6px;pointer-events:none}
canvas#confetti{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}

/* ---------- side panel ---------- */
.side{min-height:0;overflow-y:auto;border-left:2px solid var(--rule);background:var(--ground);padding:12px 12px 16px;display:grid;gap:10px;align-content:start}
.blk{background:var(--paper);border:1px solid var(--hair);padding:10px 12px;display:grid;gap:8px;min-width:0}
.blk-head{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
/* the key block (results): a 2 px frame */
.hint{margin:0;color:var(--muted);font-size:12px}
.err{color:var(--warn);font-weight:700}
.link{border:0;background:none;color:var(--ink);font:700 12px var(--f-ui);text-decoration:underline;text-underline-offset:2px;cursor:pointer;padding:0}

.drop{position:relative;display:grid;gap:2px;place-items:center;text-align:center;border:2px dashed var(--muted);padding:12px 8px;cursor:pointer;background:var(--paper)}
.drop input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;z-index:2}
.drop span{pointer-events:none}
.drop:hover,.drop.over{border-color:var(--ink);background:var(--ground)}
.drop:focus-within{outline:2px solid var(--best);outline-offset:2px}
.drop.loaded{border-style:solid;border-color:var(--hair)}
.drop-main{font-weight:700}
.drop-sub{font:400 11px var(--f-mono);color:var(--muted)}
.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.row label{font-size:12px;color:var(--muted)}
.row input{font:700 14px var(--f-mono);width:84px;padding:4px 7px;border:2px solid var(--rule);background:var(--paper);color:var(--ink)}
.row .unit{font:400 12px var(--f-mono);color:var(--muted)}
.row input.need{border-color:var(--warn);box-shadow:0 0 0 3px color-mix(in srgb,var(--warn) 25%,transparent)}
.need-note{color:var(--ink)}
.need-note b{color:var(--warn)}

.seg{display:grid;grid-template-columns:1fr 1fr;border:2px solid var(--rule)}
.seg button{font:700 13px var(--f-ui);padding:7px 0;border:0;background:var(--paper);color:var(--ink);cursor:pointer}
.seg button+button{border-left:2px solid var(--rule)}
/* view tabs for long steps (Your run: Summary · Legs · More; Review: What was possible · Controls · Dumbbells), stuck to the top of the panel */
.runtabs{position:sticky;top:-12px;z-index:3;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;border:2px solid var(--rule);background:var(--paper);box-shadow:0 -12px 0 var(--ground)}
.runtabs[hidden],.runtabs button[hidden]{display:none}
.runtabs button{font:700 13px var(--f-ui);padding:8px 0;border:0;background:var(--paper);color:var(--ink);cursor:pointer}
.runtabs button+button{border-left:2px solid var(--rule)}
.runtabs button:focus-visible{outline:2px solid var(--best);outline-offset:-5px}
.runtabs button:focus{outline:none}
.runtabs button:focus-visible{outline:2px solid var(--best);outline-offset:-5px}
.runtabs button[aria-selected="true"]{background:var(--sel-bg);color:var(--sel-ink);box-shadow:inset 0 -4px 0 var(--sel-mark)}
.off-tab{display:none!important}
.pace-row.eff{border-top:1px solid var(--hair);padding-top:8px}
.pace-row.eff>span{display:grid;font-weight:700;font-size:14px}
.pace-row.eff output{font-size:22px}
.diff{display:grid;gap:4px}
.diff label{font-size:12px;color:var(--muted)}
.diff output{font:700 13px var(--f-mono)}
.diff-marks{position:relative;height:14px;font:400 10px var(--f-mono);color:var(--muted)}
.diff-marks span{position:absolute;transform:translateX(-2px);white-space:nowrap}
.diff-marks{height:30px;line-height:1.25}
.diff-marks .planner{top:4px;transform:translateX(-50%);font-weight:700;color:var(--ink)}
.diff-marks .planner.at0{transform:none;margin-left:30px}   /* at 0: beside the calm face, not on it */
.diff-marks .end{top:1px}
.diff-marks .end.l{left:0}
.diff-marks .end.r{right:0;left:auto;transform:none}
.diff-marks .face{width:22px;height:22px;fill:none;stroke:var(--muted);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;display:block}
.diff-marks .face .dot{fill:var(--muted);stroke:none}
.seg button[aria-checked="true"]{background:var(--sel-bg);color:var(--sel-ink);box-shadow:inset 0 -4px 0 var(--sel-mark)}   /* as the selected tab */
.seg button:focus-visible{outline-offset:-5px}
.pace-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center}
input[type=range]{width:100%;accent-color:var(--ink);margin:0}
output{font:700 16px var(--f-mono);font-variant-numeric:tabular-nums}
/* steps: the three tabs carry their number (play first: no spoilers) */
.tabs button .n{font:700 9px var(--f-mono);margin-right:5px;opacity:.65}
/* rules card: the key rules at a glance (every step), plus the class and dumbbell toggles */
.rulescard{border:2px solid var(--rule);background:var(--paper)}
.ru-head{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:5px 10px;background:var(--ink);color:var(--paper);font:700 10px/1.3 var(--f-mono);letter-spacing:.1em;text-transform:uppercase}
.ru-head .rules-link{color:var(--paper);font:700 11px var(--f-ui);letter-spacing:0;text-transform:none}
.ru-head .rules-link .help{background:var(--paper);color:var(--ink)}
.ru-facts[hidden],.ru-facts{display:grid;grid-template-columns:repeat(3,1fr);border-bottom:1px solid var(--hair)}
.ru-cell{display:grid;gap:1px;padding:7px 8px;min-width:0}
.ru-cell:not(:nth-child(3n+1)){border-left:1px solid var(--hair)}
.ru-cell:nth-child(n+4){border-top:1px solid var(--hair)}
.ru-cell .k{font:700 9px var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.ru-cell b{font:900 15px/1.15 var(--f-ui);white-space:nowrap}
.ru-cell .s{font-size:11px;color:var(--muted);line-height:1.25}
.ru-toggles{display:flex;flex-wrap:wrap;gap:6px 8px;padding:7px 10px}
.ru-toggles:not(:has(.seg:not([hidden]))){display:none}
.seg.sm{display:inline-grid;grid-auto-flow:column;grid-auto-columns:auto;grid-template-columns:none}
.seg.sm button{font:700 12px var(--f-ui);padding:5px 10px}
.seg.sm[hidden]{display:none}
.rules-link{display:inline-flex;align-items:center;gap:5px;font-size:12px}
.rules-link .help{width:16px;height:16px;font-size:10px}
/* Your run: two ways in */
.drop.cta{border:2px solid var(--rule);gap:4px;padding:14px 10px 12px;transition:transform .08s}
.drop.cta .drop-main{font:900 16px/1.15 var(--f-ui)}
.drop.cta .drop-sub{font-size:11px;color:var(--muted)}
.drop.cta.primary{background:var(--hivis);color:var(--on-hivis);box-shadow:3px 3px 0 var(--shadow)}
.drop.cta.primary .drop-sub{color:var(--on-hivis);opacity:.75}
.drop.cta:hover{transform:translate(-1px,-1px)}
.drop.cta.primary:hover{box-shadow:4px 4px 0 var(--shadow)}
.drop.cta.way-plot:hover{background:var(--ground)}
.cta-ic{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.way-plot .cta-ic circle{fill:var(--paper)}
.ways{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.ways[hidden]{display:none}
.way-plot{font:inherit;color:inherit;background:var(--paper)}
.plotbox{display:grid;gap:6px}
.runsum{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;font-size:14px}
.runsum[hidden]{display:none}
.ran-as{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}
.ran-as[hidden]{display:none}
.ran-k{font:700 10px var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.plotlist{display:flex;flex-wrap:wrap;gap:4px}
.plotrow{display:flex;align-items:flex-start;gap:8px}.plotrow .plotlist{flex:1}.plotrow .btn[hidden]{display:none}
/* Kit, the bot orienteer */
.kit{color:var(--ink)}
.kit .kb{fill:var(--paper)}
.kit .kr{stroke:var(--course)}
.kit .krf{fill:var(--course)}
.kit .kbf{fill:var(--best)}
.kit .kbest{stroke:var(--best)}
.kit-intro{display:grid;grid-template-columns:88px 1fr;gap:10px;align-items:center}
.kit-intro .kit{width:88px;height:88px}
.kit-aside{display:grid;grid-template-columns:56px 1fr;gap:10px;align-items:center}   /* Explore: a small Kit by the intro */
.kit-aside .kit{width:56px;height:56px}
.kit-aside .aim{margin:0}
#gameBlk.revealed .play-ui{display:none}            /* after the reveal the result is the panel */
.play-ui{display:grid;gap:12px}                       /* Play's setup: even breathing room between its parts */
.play-ui .steps3+.hint{margin-top:-6px}              /* the "changed your mind" note belongs to the steps */
.play-ui .kit-intro{padding-top:2px}
.play-ui .play-acts{margin:2px 0}
.result-acts{margin:6px 0 10px}
.kit-result{display:grid;grid-template-columns:84px 1fr;gap:10px;align-items:center}
.kit-result .kit{width:84px;height:84px}
.kit-result .big{font-size:20px}

/* score card: a printed card, like an orienteering control card. The overall grade is yours (hi-vis,
   black edge); the grade boxes are ink; the legs are punch boxes */
.sc{border:2px solid var(--rule);background:var(--paper)}
.sc-head{display:flex;justify-content:space-between;gap:8px;padding:5px 10px;background:var(--ink);color:var(--paper);font:700 10px/1.3 var(--f-mono);letter-spacing:.1em;text-transform:uppercase}
.sc-top{display:flex;align-items:stretch;border-bottom:2px solid var(--rule)}
.sc-overall{flex:none;display:grid;place-items:center;align-content:center;gap:2px;width:74px;padding:8px 0;background:var(--hivis);color:var(--on-hivis);border-right:2px solid var(--rule)}
.sc-overall .k{font:700 9px var(--f-mono);letter-spacing:.1em;text-transform:uppercase}
.sc-overall .g{font:900 34px/1 var(--f-ui);letter-spacing:-.03em}
.sc-title{display:grid;align-content:center;gap:2px;padding:8px 10px;font-size:12px;color:var(--muted)}
.sc-title b{font:900 17px/1.2 var(--f-ui);color:var(--ink)}
.sc-grades{display:grid;grid-template-columns:repeat(var(--n,4),1fr);border-bottom:2px solid var(--rule)}
.sc-cell{display:grid;justify-items:center;gap:1px;padding:7px 2px 6px;text-align:center}
.sc-cell+.sc-cell{border-left:1px solid var(--hair)}
.sc-cell .k{font:700 9px var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.sc-cell .g{font:900 26px/1.05 var(--f-ui);letter-spacing:-.03em}
.sc-cell .s{font:400 10px var(--f-mono);color:var(--muted);white-space:nowrap}
.sc-notes{margin:0;padding:8px 10px;list-style:none;display:grid;gap:3px;font-size:12px;color:var(--muted);border-bottom:2px solid var(--rule)}
.sc-notes b{color:var(--ink);font-weight:700}
.sc-sec{padding:6px 10px 0;font:700 10px var(--f-mono);letter-spacing:.1em;text-transform:uppercase}
.sc-sec .hint{font:400 11px var(--f-ui);letter-spacing:0;text-transform:none;margin-left:6px}
.wins{margin:0;padding:6px 10px 2px 28px;display:grid;gap:5px;font-size:13px}
.wins li{padding:2px 0}
.wins li span{margin-right:8px}
.wins li > b{font:700 12px var(--f-mono);white-space:nowrap}
.wins li small{font:400 11px var(--f-mono);color:var(--muted);margin-left:4px}
.wins li:hover,.wins li:focus{background:var(--ground);outline:none}
.wins-note{padding:0 10px 8px}
/* leg by leg: one bar per leg, height = time lost, colour = the map's leg heat */
.lbars{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:2px;height:96px;padding:6px 0 0;border-bottom:2px solid var(--rule)}
.lbar{position:relative;display:flex;flex-direction:column;justify-content:flex-end;align-items:stretch;min-width:0;padding:0;border:0;background:none;cursor:pointer;color:var(--muted)}
.lbar i{display:block;height:var(--v);min-height:3px;background:var(--hivis);border:1.5px solid var(--rule);border-bottom:0}
.lbar.h1 i{background:var(--heat-some)}
.lbar.h2 i{background:var(--heat-big)}
.lbar span{position:absolute;top:100%;left:0;right:0;margin-top:3px;font:400 9px/1 var(--f-mono);text-align:center;overflow:hidden}
.lbar{outline:none}
.lbar:hover i,.lbar:focus-visible i{outline:2px solid var(--best);outline-offset:1px}
.lbar[aria-pressed="true"] i{box-shadow:inset 0 0 0 2px var(--best)}
.lbar[aria-pressed="true"] span{color:var(--ink);font-weight:700}
#rcBarsBlk .hint#rcBarsNote{margin-top:16px}
.rc-tips li{display:grid;grid-template-columns:1fr auto;gap:2px 10px;font:400 13px/1.35 var(--f-ui);background:var(--paper);border:1.5px solid var(--hair);border-left:4px solid var(--rule);padding:8px 10px}
.rc-h{margin:4px 0 0;font:700 11px/1.3 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.rc-h .hint{margin-left:6px;font:400 12px/1.3 var(--f-ui);letter-spacing:0;text-transform:none}
.rc-loss{margin:0;padding:0;list-style:none;display:grid;gap:6px}
.rc-leg{width:100%;display:grid;grid-template-columns:1fr auto;gap:2px 10px;text-align:left;font:400 13px/1.35 var(--f-ui);color:var(--ink);background:var(--paper);border:1.5px solid var(--hair);padding:8px 10px;cursor:pointer}
.rc-leg:hover{border-color:var(--rule)}
.rc-leg[aria-pressed="true"]{border:2px solid var(--rule);box-shadow:inset 4px 0 0 var(--best)}
.rc-leg .rc-t,.rc-tips .rc-t{font:700 13px var(--f-mono)}
.rc-leg .rc-why,.rc-tips .rc-why{grid-column:1/-1;color:var(--muted);font-size:12px}

/* help: a small "i" beside a heading opens a help box (popover) */
.hh{display:inline-flex;align-items:center;gap:7px}
.help{position:relative;flex:none;display:grid;place-items:center;width:18px;height:18px;padding:0;border:0;border-radius:50%;background:var(--ink);color:var(--paper);font:900 11px/1 var(--f-ui);cursor:pointer}
.help::after{content:"";position:absolute;inset:-12px}            /* a finger-sized target */
.help:hover{opacity:.8}
.pop{width:min(460px,calc(100vw - 32px));max-height:calc(100dvh - 48px);margin:auto;padding:0;border:2px solid var(--rule);background:var(--paper);color:var(--ink);box-shadow:6px 6px 0 var(--shadow);overflow:auto}
.pop::backdrop{background:rgba(10,12,14,.4)}
@supports not selector(:popover-open){   /* browsers without popover: app.js toggles .pop-open */
  .pop{display:none}
  .pop.pop-open{display:block;position:fixed;inset:0;height:fit-content;z-index:20}
}
.pop-head{position:sticky;top:0;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;border-bottom:2px solid var(--rule);background:var(--paper)}
.pop-head h3{margin:0;font:900 18px/1.15 var(--f-ui)}
.pop-body{padding:4px 16px 16px;font-size:14px;line-height:1.5}
.pop-body p,.pop-body ul{margin:8px 0}
.pop-body ul{padding-left:18px;display:grid;gap:6px}
.pop-body .nw{white-space:nowrap}
.pop-body h4{margin:14px 0 0;font:700 11px/1.3 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.pop table{border-collapse:collapse;width:100%;font-size:13px;font-variant-numeric:tabular-nums}
.x{flex:none;border:2px solid var(--rule);background:var(--paper);color:var(--ink);font:700 14px/1 var(--f-ui);cursor:pointer;width:32px;height:32px}
.x:hover{background:var(--ground)}

/* results */
.tablewrap{overflow-x:auto}
table.cmp{width:100%;border-collapse:collapse;font-size:12px;font-variant-numeric:tabular-nums}
.cmp th,.cmp td{padding:5px 6px;text-align:right;border-bottom:1px solid var(--hair);white-space:nowrap;font-family:var(--f-mono)}
.cmp th:first-child,.cmp td:first-child{text-align:left;color:var(--muted);font:400 12px var(--f-ui)}
.cmp thead th{font:700 11px var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);border-bottom:2px solid var(--rule)}
.cmp thead th.you{color:var(--ink)}
.cmp thead th.best{color:var(--best)}
.cmp .you{background:var(--hivis-tint)}
.cmp tr.pts td{font:900 34px/1 var(--f-ui);letter-spacing:-.03em;color:var(--ink);padding:9px 6px 7px}
.cmp tr.pts td:first-child{font:400 12px var(--f-ui);letter-spacing:0;color:var(--muted)}
.cmp td.win{color:var(--good)}
.verdict{margin:0;font-weight:700;font-size:13px}
.swap{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.swap .lbl{font-size:12px;color:var(--muted)}
.pill{display:inline-grid;place-items:center;min-width:26px;height:26px;padding:0 4px;border-radius:999px;border:2px solid var(--course);color:var(--course);background:var(--paper);font:700 11px var(--f-mono)}
.pill.skip{border-style:dashed;opacity:.7}
.pill:hover,.pill:focus-visible{background:var(--course);color:#fff;opacity:1;cursor:default}
/* text that changes while you explore keeps two lines of room, so nothing below jumps */
#whatIfText,#paceHint{min-height:calc(2 * 1.45em)}
#verdict:empty{display:none}
#swap{align-content:flex-start}
.tip-hint{color:#bbb;font-size:11px}
.leg-link{border:0;background:none;padding:0;font:inherit;font-weight:700;color:var(--ink);text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:2px;cursor:pointer}
.leg-link:hover,.leg-link:focus-visible{background:var(--hivis-tint);outline:none}
.tip.tip-leg{white-space:normal;width:max-content;max-width:280px}

/* celebration: a solid hi-vis card */
.trophy{display:grid;grid-template-columns:auto 1fr;gap:3px 12px;align-items:center;background:var(--hivis);color:var(--on-hivis);border:2px solid var(--rule);padding:12px;font-size:13px}
.trophy .cup{grid-row:span 2;width:40px;height:40px}
.trophy>span{grid-column:2}
/* trophy icon: filled cup and base, outlined handles and stem, in the current text colour */
.cup{display:inline-block;vertical-align:-.15em;width:1.1em;height:1.1em;margin-right:.3em;flex:none}
.cup path{fill:currentColor}
.cup path.o{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.trophy b{font:italic 900 20px/1.05 var(--f-ui);letter-spacing:-.01em}
.trophy.pop{animation:pop .5s ease-out}
@keyframes pop{0%{transform:scale(.94);opacity:0}60%{transform:scale(1.03);opacity:1}100%{transform:scale(1)}}
.stamp{display:inline-block;font:700 11px/1.2 var(--f-mono);text-transform:uppercase;letter-spacing:.1em;color:var(--on-hivis);background:var(--hivis);border:2px solid var(--rule);padding:3px 7px;transform:rotate(-4deg);white-space:nowrap}
.stamp.plain{background:var(--paper);color:var(--ink)}

/* what if */
.whatif{display:grid;grid-template-columns:repeat(4,1fr);border:2px solid var(--rule)}
.whatif button{display:grid;gap:1px;padding:7px 2px;border:0;border-left:2px solid var(--rule);background:var(--paper);color:var(--ink);cursor:pointer;font:700 12px var(--f-ui)}
.whatif button:first-child{border-left:0}
.whatif button small{font:400 11px var(--f-mono);color:var(--muted)}
.whatif button small.up{color:var(--ink);font-weight:700}
.whatif button[aria-checked="true"]{background:var(--hivis);color:var(--on-hivis)}
.whatif button[aria-checked="true"] small{color:var(--on-hivis)}
.whatif button:focus-visible{outline-offset:-5px}

/* splits slip: thermal paper with a torn edge */
.slip{background:var(--thermal);color:var(--ink);font:12px/1.5 var(--f-mono);padding:10px 10px 18px;border:1px solid var(--hair);border-bottom:0;font-variant-numeric:tabular-nums;
  -webkit-mask:radial-gradient(6px at 50% 100%,#0000 98%,#000) 50% / 14px 100% repeat-x;mask:radial-gradient(6px at 50% 100%,#0000 98%,#000) 50% / 14px 100% repeat-x}
.slip .slip-head,.slip .slip-foot{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap}
.slip .slip-head{font-weight:700;margin-bottom:4px}
.slip .slip-foot{border-top:1px dashed var(--muted);margin-top:4px;padding-top:4px}
.slip table{width:100%;border-collapse:collapse}
.slip th{font:700 10px var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);text-align:right;padding:2px 4px;border-bottom:1px dashed var(--muted)}
.slip td{text-align:right;padding:0 4px}
.slip th:nth-child(-n+2),.slip td:nth-child(-n+2){text-align:left}
.slip tr.hi td{background:var(--hivis);color:var(--on-hivis);font-weight:700}

/* pro: the switch and what it reveals sit in one framed group */
.group{display:grid;background:var(--paper);border:1px solid var(--hair);min-width:0}
.group>.blk{border:0;border-top:1px solid var(--hair)}
.group>.blk:first-child{border-top:0}
.group>.blk[hidden]+.blk{border-top:1px solid var(--hair)}
svg#chart{width:100%;height:auto;cursor:crosshair}
svg#rvChart{width:100%;height:auto}
svg#rvChart text{font:10px var(--f-mono);fill:var(--muted)}
svg#rvChart .grid{stroke:var(--hair);stroke-width:1}
svg#rvChart .line{fill:none;stroke:var(--best);stroke-width:2.2}
svg#rvChart .line.other{stroke:var(--muted);stroke-width:1.5;stroke-dasharray:4 3}
svg#rvChart .curlbl{font-weight:700;fill:var(--ink)}
svg#rvChart .axt{font-size:9px}
.chart-key{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:11px;color:var(--muted)}
.chart-key span{display:inline-flex;align-items:center;gap:6px}
.chart-key .k-line{width:20px;height:0;border-top:2.5px solid var(--best)}
.chart-key .k-line.other{border-top:1.5px dashed var(--muted)}
.chart-key .k-cur{width:0;height:12px;border-left:1.5px dashed var(--ink)}
svg#rvChart .cur{stroke:var(--ink);stroke-width:1;stroke-dasharray:3 3}
/* the pace line is draggable on every chart (and the strips): a knob, a sideways cursor, vertical swipes still scroll */
svg#rvChart,svg#chart,.rv-strips svg{touch-action:pan-y;cursor:ew-resize}
svg .knob{fill:var(--ink);stroke:var(--paper);stroke-width:1.5}
/* course review strips: a row per control (or pair), filled where the best route takes it */
.rv-strips svg{width:100%;height:auto;display:block}
.rv-strips text{font:10px var(--f-mono);fill:var(--ink)}
.rv-strips text.r,.rv-strips text.ax{fill:var(--muted)}
.rv-strips .bg{fill:transparent}
.rv-strips .rv-row{cursor:default;outline:none}
.rv-strips .rv-row:hover .bg,.rv-strips .rv-row:focus .bg{fill:var(--ground)}
.rv-strips .track{fill:var(--hair)}
.rv-strips .on{fill:var(--best)}
.rv-strips .cur{stroke:var(--ink);stroke-width:1.2;stroke-dasharray:3 2}
svg#chart text,svg#stChart text{font:10px var(--f-mono);fill:var(--muted)}
svg#stChart .grid{stroke:var(--hair);stroke-width:1}
svg#stChart .line{fill:none;stroke:var(--best);stroke-width:2}
svg#stChart .area{fill:var(--best);opacity:.08}
svg#stChart .you{fill:var(--hivis);stroke:var(--ink);stroke-width:2}
svg#stChart .drop{cursor:pointer}
svg#stChart .drop line{stroke:var(--heat-big);stroke-width:4}
svg#stChart .drop text{font:700 11px var(--f-mono);fill:var(--heat-big)}
.chart-key .k-drop{display:inline-block;width:4px;height:12px;background:var(--heat-big);margin-right:5px;vertical-align:-2px}
.st-lead{margin:0;font-size:14px}
.st-dense .ru-facts{border:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.st-dense .ru-facts>div{display:grid;gap:1px;padding:6px 8px}
.st-dense .k{font:700 9px var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.st-dense b{font:900 16px var(--f-ui)}
.st-dense span:last-child{font-size:11px;color:var(--muted)}
.rc-leg[aria-pressed="true"].st-dec{box-shadow:inset 4px 0 0 var(--heat-big)}
svg#chart .grid{stroke:var(--hair);stroke-width:1}
svg#chart .line{fill:none;stroke:var(--best);stroke-width:2}
svg#chart .area{fill:var(--best);opacity:.08}
svg#chart .cur{stroke:var(--ink);stroke-width:1;stroke-dasharray:3 3}
svg#chart .you{fill:var(--hivis);stroke:var(--ink);stroke-width:2}

/* map layer toggles and the visited-controls chips */
.toggles{display:grid;grid-template-columns:1fr 1fr;gap:4px 10px}
.toggles label{display:flex;align-items:center;gap:6px;font-size:13px;cursor:pointer}
.toggles label.wide{grid-column:1/-1}
.sw.legsnet{height:3px;background:#FF3DD8;box-shadow:0 0 0 1px rgba(17,17,17,.75)}   /* WEB_COL in app.js: map colours are fixed */
.sw.heat1{background:var(--heat-some);height:6px;border:1px solid #111}.sw.heat2{background:var(--heat-big);height:6px;border:1px solid #111}
.sw.netheat{width:64px;height:9px;margin:0 6px;background:linear-gradient(90deg,#C81E1E,#F07828 7%,#FDB863 20%,#FEE9A8 40%,#D7D7D7 65%,#8C8C96)}.sw.netfence{background:#000;height:3px}.sw.netblock{background:repeating-linear-gradient(45deg,#19191E 0 2px,#5a5a62 2px 5px);height:9px}
.toggles input{margin:0;accent-color:var(--ink)}
details.blk:not([open]){gap:0}                    /* closed: no grid gap under the summary */
details.blk summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:8px;min-height:20px}
details.blk summary::-webkit-details-marker{display:none}
details.blk summary::before{content:"";flex:none;width:6px;height:6px;margin:0 2px 0 1px;border:solid var(--muted);border-width:0 2px 2px 0;transform:rotate(-45deg);transition:transform .15s}
details.blk[open] summary::before{transform:rotate(45deg) translate(-1px,-1px)}
details.blk summary:focus-visible{outline-offset:4px}
details.blk summary h2{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
details.blk summary h2 .hint{font:inherit;color:var(--ink)}
.fix-link{justify-self:start;font-weight:400;color:var(--muted)}
.onward{justify-self:start}
.rv-reset{justify-self:start;font-weight:400;color:var(--muted)}
/* Fix the order: a quiet second layer inside "Controls you visited" */
.punches{margin:4px 0 0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:2px 14px;counter-reset:p}
.punches li{display:flex;align-items:center;gap:8px;font-size:13px;counter-increment:p;padding:5px 0;border-bottom:1px solid var(--hair)}
.punches li::before{content:counter(p);font:400 10px var(--f-mono);color:var(--muted);min-width:16px;text-align:right}
.punches b{font:700 13px var(--f-mono);min-width:22px}
.punches .x-ctl{margin-left:auto;border:0;background:none;color:var(--muted);font:700 15px/1 var(--f-ui);cursor:pointer;padding:2px 6px}
.punches .x-ctl:hover{color:var(--warn)}
.punches select{font:400 11px var(--f-mono);padding:2px 2px;flex:0 1 auto;border:1.5px solid var(--rule);background:var(--paper);color:var(--ink);min-width:0}

/* ---------- buttons ---------- */
.btn{font:700 13px var(--f-ui);padding:7px 12px;border:2px solid var(--rule);background:var(--paper);color:var(--ink);cursor:pointer}
.btn:hover:not(:disabled){background:var(--ground)}
.btn:disabled{opacity:.4;cursor:default}
.btn.primary{background:var(--hivis);color:var(--on-hivis);box-shadow:3px 3px 0 var(--shadow)}
.btn.primary:hover:not(:disabled){background:var(--hivis);transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--shadow)}
.btn.primary:active:not(:disabled){transform:translate(2px,2px);box-shadow:1px 1px 0 var(--shadow)}
.btn.primary:disabled{box-shadow:none;opacity:1;background:transparent;color:var(--muted);border-color:var(--muted)}   /* not yet: a grey outline, not a dimmed hi-vis */

/* ---------- game ---------- */
.mode-game canvas#map{cursor:pointer}
.aim{margin:0;font-size:14px;line-height:1.5}
.howto{margin:0;padding-left:18px;font-size:12px;color:var(--muted);display:grid;gap:2px}
/* Play: three steps as cells, the keyboard route folded away */
.steps3{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(3,1fr);border:2px solid var(--rule)}
.steps3 li{display:grid;gap:2px;padding:7px 8px;font-size:12px;color:var(--muted)}
.steps3 li+li{border-left:1px solid var(--hair)}
.steps3 b{font:700 10px var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink)}
/* Review's spoiler alert: covers the map and panel (not the header), the map blurred behind */
.gate{position:fixed;left:0;right:0;bottom:0;z-index:20;display:grid;place-items:center;padding:20px;background:rgba(10,12,14,.55);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.gate[hidden]{display:none}
.gate-card{width:min(560px,100%);display:grid;gap:12px;background:var(--paper);color:var(--ink);border:2px solid var(--rule);box-shadow:6px 6px 0 var(--shadow);padding:22px 24px 24px}
.gate-k{justify-self:start;font:700 11px var(--f-mono);letter-spacing:.12em;text-transform:uppercase;background:var(--ink);color:var(--paper);padding:4px 8px}
.gate-card h2{margin:0;font:900 30px/1.05 var(--f-ui);letter-spacing:-.02em;text-transform:none;color:var(--ink)}
.gate-card .aim{margin:0;font-size:16px}
.gate-card .hint{font-size:14px}
.gate-card .row{gap:10px;margin-top:4px}
.gate-card .btn{font-size:15px;padding:10px 16px}
.kit-q{display:block;font:900 20px/1.1 var(--f-ui);margin-bottom:4px}
.kit-intro .aim{margin:0}
/* "Use the keyboard": a quiet disclosure row, same paper and hairline as the other small boxes */
details.keys{border:1px solid var(--hair);background:var(--paper);margin-top:4px}
details.keys summary{display:flex;align-items:center;gap:8px;padding:8px 10px;cursor:pointer;list-style:none;font:700 13px var(--f-ui);color:var(--ink)}
details.keys summary::-webkit-details-marker{display:none}
details.keys summary .hint{font-weight:400;margin-left:2px}
details.keys summary:hover{background:var(--ground)}
details.keys summary:focus{outline:none}
details.keys summary:focus-visible{outline:2px solid var(--best);outline-offset:-3px}
details.keys .kb-ic{width:20px;height:14px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;flex:none}
details.keys .chev{width:14px;height:14px;margin-left:auto;fill:none;stroke:currentColor;stroke-width:2;transition:transform .15s}
details.keys[open] .chev{transform:rotate(180deg)}
details.keys[open] summary{border-bottom:1px solid var(--hair)}
details.keys .keypick{padding:10px}
.progress{height:10px;border:2px solid var(--rule);background:var(--paper)}
.progress span{display:block;height:100%;width:0;background:var(--hivis);transition:width .2s}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:6px 12px}
.stats div{display:grid}
.stats .k{font:700 10px var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.stats .v{font:900 22px/1.1 var(--f-ui);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.keypick input{width:84px}
.keypick input,.keypick .btn{box-sizing:border-box;height:34px;padding-top:0;padding-bottom:0}   /* box and button the same height */
.keypick .hint{flex-basis:100%}
.insertbox{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline;border:2px dashed var(--course);padding:6px 10px;font-size:13px}
.warnbox{display:flex;gap:9px;align-items:flex-start;background:#111;color:#F1F2EE;border:2px solid var(--rule);padding:9px 11px;font-size:13px}
.warnbox::before{content:"!";flex:none;display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:#C9F400;color:#111;font:900 13px/1 var(--f-ui)}
.warnbox b{color:#C9F400}
.missing{color:var(--warn);font-weight:700}
.result{border-top:2px solid var(--rule);padding-top:10px;display:grid;gap:8px}
.result .big{font:900 28px/1 var(--f-ui);letter-spacing:-.02em}
.result .big.win{display:flex;align-items:center;justify-self:start;padding:0 3px;color:var(--score-ink);background:linear-gradient(transparent 55%,var(--score-mark) 55% 92%,transparent 92%)}
.gcmp td.worse{color:var(--warn)}
.gcmp td.better{color:var(--good)}
.gcmp tr.tot td{font-weight:700;border-top:2px solid var(--rule)}

/* ---------- How it works ---------- */
dialog#info{width:min(720px,calc(100vw - 32px));max-height:calc(100vh - 48px);padding:0;border:2px solid var(--rule);background:var(--paper);color:var(--ink);box-shadow:6px 6px 0 var(--shadow);overflow:hidden}
dialog#info[open]{display:flex;flex-direction:column}
dialog#info::backdrop{background:rgba(10,12,14,.55)}
.info-head{flex:none;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 20px;border-bottom:2px solid var(--rule);background:var(--paper);margin:0}
.info-head h2{margin:0;font:900 22px/1.1 var(--f-ui);text-transform:none;letter-spacing:-.01em;color:var(--ink)}
.info-head .x{border:2px solid var(--rule);background:var(--paper);color:var(--ink);font:700 14px/1 var(--f-ui);cursor:pointer;width:32px;height:32px}
.info-head .x:hover{background:var(--ground)}
.info-body{flex:1 1 auto;min-height:0;padding:6px 20px 20px;overflow-y:auto;font-size:14px;line-height:1.55}
.info-body p,.info-body ul{margin:6px 0;max-width:64ch}
.info-body ul{padding-left:18px}
/* How it works opens with Kit: the solver with a face */
.meet-kit{display:grid;grid-template-columns:96px minmax(0,1fr);gap:4px 16px;align-items:start;padding:12px 0 14px;border-bottom:2px solid var(--rule)}
.meet-kit .kit{width:96px;height:96px}
.meet-kit h3{margin:4px 0 2px;font:900 20px/1.15 var(--f-ui)}
.meet-kit a{color:var(--ink);font-weight:700;text-underline-offset:2px}
.steps>li{scroll-margin-top:8px}
.meet-link{display:inline-block;margin-top:6px}
@media (max-width:640px){.meet-kit{grid-template-columns:64px minmax(0,1fr)}.meet-kit .kit{width:64px;height:64px}}
.steps{list-style:none;counter-reset:s;padding:0;margin:0}
.steps>li{counter-increment:s;position:relative;padding:12px 0 8px 42px;border-bottom:1px solid var(--hair);display:grid;grid-template-columns:minmax(0,1fr) 200px;gap:6px 18px;align-items:start}
.steps>li::before{content:counter(s);position:absolute;left:0;top:12px;width:28px;height:28px;border-radius:50%;border:2.5px solid var(--course);color:var(--course);display:grid;place-items:center;font:700 13px var(--f-mono)}
.steps h3,.caveat h3{font:900 17px/1.2 var(--f-ui);letter-spacing:-.01em;margin:2px 0 4px}
.step-text{min-width:0}
.caveat{margin-top:14px;background:var(--ground);border:1px solid var(--hair);padding:10px 14px}
.fig{width:200px;max-width:100%;height:auto;margin-top:8px}
.fig-paper{fill:#F6F4EE;stroke:#E2DED3}
.fig text{font:700 9px var(--f-mono);text-anchor:middle;fill:#2b2b2b}
.fig .fig-lbl{font:400 9.5px var(--f-mono);text-anchor:start;fill:#4a4a4a}
.fig .fig-lbl.end{text-anchor:end}
.fig-tag rect{fill:#fff;stroke:#2b2b2b;stroke-width:1}
.fig-tag.warn rect{stroke:#B4231A}.fig-tag.warn text{fill:#B4231A}
@media (max-width:640px){.steps>li{grid-template-columns:minmax(0,1fr)}.fig{width:100%;max-width:300px}}

/* ---------- phone: full-screen map + bottom sheet ---------- */
.sheet-top{display:none}
.sheet-top{order:-2}
#gameBlk,#runIn,#rvLead{order:-1}           /* each step's own card first */
@media (max-width:900px){
  html,body{height:100%;overflow:hidden;overscroll-behavior:none}
  .app{display:block;height:100dvh;position:relative;padding:0}
  .bar{position:relative;z-index:6;gap:8px;padding:8px max(12px,env(safe-area-inset-right,0px)) 8px max(12px,env(safe-area-inset-left,0px));padding-top:max(8px,env(safe-area-inset-top,0px))}
  .bar h1{font-size:19px}
  .bar .kite{width:22px;height:22px}
  .bar .course{display:none}
  .bar .course-sel{order:1;max-width:58vw}
  .bar .style-chip{order:1}
  .bar .rules-chip{order:1}                         /* phone: with the course picker; just "Rules" */
  .bar .rules-chip .rc-long{display:none}
  .bar .rules-chip .rc-short{display:inline}
  .bar .course-sel{flex:1 1 0;min-width:0;max-width:none}   /* gives up width before anything wraps */
  .bar::after{content:"";order:0;flex-basis:100%;height:0}   /* break after the logo row: picker, chips and i on the next */
  .bar{row-gap:5px}
  .bar .style-chip{padding:1px 9px 0 10px;letter-spacing:.06em}
  .bar .course-sel{padding:0 28px 0 9px;letter-spacing:.04em}
  .bar .infobtn{order:1;margin-left:auto;font-size:0;padding:3px;gap:0}
  .bar .tabs{order:2;margin-left:0;width:100%}
  .tabs button{flex:1}
  .mapwrap{position:absolute;left:0;right:0;top:var(--bar-h,96px);bottom:0;height:auto}
  .maplegend{top:12px;bottom:auto;left:auto;right:12px;max-width:calc(100% - 70px)}
  .attrib{bottom:calc(122px + env(safe-area-inset-bottom,0px))}
  .layers{right:auto;left:12px;top:132px;bottom:auto;justify-items:start}   /* under the zoom buttons: clear of the map key, which grows with a GPS track */
  .side{position:fixed;z-index:7;left:0;right:0;bottom:0;height:calc(100dvh - var(--bar-h,96px) - 8px);
    border:2px solid var(--rule);border-bottom:0;border-radius:16px 16px 0 0;box-shadow:0 -6px 24px rgba(0,0,0,.25);
    padding:0 max(12px,env(safe-area-inset-right,0px)) calc(16px + env(safe-area-inset-bottom,0px)) max(12px,env(safe-area-inset-left,0px));
    overflow-y:auto;overscroll-behavior:contain;transform:translateY(var(--sheet-y,0px));transition:transform .28s cubic-bezier(.2,.8,.2,1);will-change:transform}
  .side.dragging{transition:none}
  .side[data-sheet="peek"]{overflow-y:hidden}
  .sheet-top{display:grid;gap:6px;position:sticky;top:0;z-index:2;background:var(--paper);margin:0 calc(-1 * max(12px,env(safe-area-inset-left,0px)));padding:8px 14px 10px;border-bottom:1px solid var(--hair);cursor:grab;touch-action:none;border-radius:14px 14px 0 0}
  .sheet-top:focus-visible{outline-offset:-4px}
  .runtabs{top:calc(var(--sheet-top-h,70px) - 1px);box-shadow:0 -8px 0 var(--ground)}   /* under the sheet's sticky handle bar */
  /* the rules card in one row of facts: a screen of panel is precious on a phone */
  .ru-facts{grid-template-columns:repeat(auto-fit,minmax(84px,1fr));overflow:hidden}   /* as many per row as fit: 4 in one row, 5 wrap */
  .ru-cell{padding:6px 7px;border:0;border-left:1px solid var(--hair);border-top:1px solid var(--hair);margin:-1px 0 0 -1px}
  .ru-cell:not(:nth-child(3n+1)){border-left:1px solid var(--hair)}
  .ru-cell:nth-child(n+4){border-top:1px solid var(--hair)}
  .ru-cell b{font-size:14px}
  .ru-cell .s{font-size:10.5px}
  .grip{justify-self:center;width:42px;height:5px;border-radius:3px;background:var(--muted);opacity:.6}
  .sheet-peek{display:flex;align-items:center;gap:8px 12px;flex-wrap:wrap;min-height:44px;font-size:14px}
  .sheet-peek .pk-btns{display:flex;gap:8px;margin-left:auto}   /* plotting: Undo and Finish side by side, by your thumb */
  .sheet-peek .pk-rvtxt{flex:1;min-width:0}
  .sheet-peek .pk-slider{flex-basis:100%;display:flex;align-items:center;gap:10px;margin-top:-2px}
  .sheet-peek .pk-slider input{flex:1;margin:0}
  .sheet-peek .pk-lbl{font:700 10px var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
  .sheet-peek .pk-main{font:900 28px/1 var(--f-ui);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
  .sheet-peek .pk-you{padding:0 2px;color:var(--score-ink);background:linear-gradient(transparent 55%,var(--score-mark) 55% 92%,transparent 92%)}
  .sheet-peek .pk-sub{color:var(--muted);font-size:12px;line-height:1.3}
  .sheet-peek .pk-sub b{color:var(--ink)}
  .sheet-peek .pk-warn{color:var(--warn);font-weight:700;font-size:13px;flex-basis:100%}
  .sheet-peek .btn{margin-left:auto}
  .sheet-peek .btn + .btn{margin-left:0}
}
@media (prefers-reduced-motion: reduce){*{transition:none!important;animation:none!important}}