/* Op og ned-banen. Fælles tokens, fonte og overskrifter kommer fra assets/css/kos.css. */
/* App-farver: de to både (blå og orange kan skelnes ved farveblindhed), vandet, mærkerne og startbåden. */
:root{
  --boat-a:#1F5FAF; --boat-b:#D2601A;
  --water:#DCEBF0; --water-2:#C9DFE7; --mark:#F2B705; --mark-ink:#5A4300;
  --cb:#4F6670; --track:#DCE5EA;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){--boat-a:#6FA8F0; --boat-b:#FF9A5C;
    --water:#0F2A35; --water-2:#14333F; --mark:#F5C842; --mark-ink:#1A1400; --cb:#9DB3BB; --track:#22404F}
}
:root[data-theme="dark"]{--boat-a:#6FA8F0; --boat-b:#FF9A5C;
  --water:#0F2A35; --water-2:#14333F; --mark:#F5C842; --mark-ink:#1A1400; --cb:#9DB3BB; --track:#22404F}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
body{padding-bottom:env(safe-area-inset-bottom,0px)}
.wrap{max-width:1280px;margin:0 auto;padding:20px 16px 32px}
header{margin-bottom:18px;max-width:72ch}
.grid{display:grid;gap:var(--gap)}
@media (min-width:920px){
  .grid{grid-template-columns:minmax(0,1.4fr) minmax(340px,1fr);align-items:start}
  .stage{position:sticky;top:calc(16px + env(safe-area-inset-top,0px))}
}
.stage canvas{width:100%;height:clamp(380px,62vh,680px);display:block;border-radius:var(--radius);border:1px solid var(--line);background:var(--water)}
@media (min-width:920px){.stage canvas{height:clamp(420px,72vh,720px)}}

.play{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px;margin-top:12px}
.play button{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 18px;border-radius:var(--radius-pill);
  font:inherit;font-family:var(--font-display);font-weight:800;font-size:1.05rem;cursor:pointer;border:2px solid var(--brand)}
.play button svg{width:20px;height:20px;flex:none}
.go{background:var(--brand);color:var(--brand-ink)}
.go:hover{background:color-mix(in srgb,var(--brand) 85%,var(--ink))}
.go .i-pause{display:none}
.go[aria-pressed="true"] .i-pause{display:block}
.go[aria-pressed="true"] .i-play{display:none}
.ghost{background:transparent;color:var(--brand)}
.ghost:hover{background:color-mix(in srgb,var(--brand) 10%,transparent)}
.clock{display:flex;align-items:baseline;gap:8px;margin-left:auto}
.clock b{font-family:var(--font-display);font-weight:800;font-size:1.8rem;line-height:1;color:var(--brand);font-variant-numeric:tabular-nums;min-width:3.2ch;text-align:right}
.clock .k{font-size:13px;color:var(--ink-3)}
.result{margin:12px 2px 0;min-height:3em;font-size:1rem;color:var(--ink)}
.result b{font-family:var(--font-display);font-weight:800}
.keys{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:13px;color:var(--ink-2);margin:10px 2px 0}
.keys>span{display:inline-flex;align-items:center;gap:6px}
.chip{display:inline-block;width:14px;height:14px;border-radius:4px;flex:none}
.dot{display:inline-block;width:12px;height:12px;border-radius:50%;flex:none}
.dash{display:inline-block;width:20px;height:0;border-top:2px dashed var(--ink-2);flex:none}
.shade{display:inline-block;width:20px;height:12px;border-radius:2px;background:color-mix(in srgb,var(--ink-2) 25%,transparent);flex:none}
.solid{display:inline-block;width:20px;height:0;border-top:3px solid var(--ink-2);flex:none}

.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:18px;display:grid;gap:6px}
.panel h2{font-size:1.2rem;color:var(--brand);margin:10px 0 4px;display:flex;align-items:center;gap:8px}
.panel>h2:first-child{margin-top:0}
.ctl{display:grid;grid-template-columns:120px minmax(0,1fr) 64px;align-items:center;gap:10px}
.ctl label{font-size:15px;color:var(--ink-2);line-height:1.25}
.ctl output{font-family:var(--font-display);font-size:17px;font-weight:600;text-align:right;font-variant-numeric:tabular-nums}
.sub{display:flex;justify-content:space-between;gap:8px;font-size:13px;color:var(--ink-3);margin:-4px 74px 6px 130px}
input[type=range]{width:100%;height:40px;margin:0;accent-color:var(--brand);cursor:pointer}
.boat{border-top:1px solid var(--line);padding-top:10px;margin-top:6px;display:grid;gap:6px}
.boat h2{color:var(--c)}
.boat .chip{background:var(--c)}
.boat input[type=range]{accent-color:var(--c)}
.opt{justify-self:start;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;margin-top:4px;
  border-radius:var(--radius-pill);border:2px solid var(--c);background:transparent;color:var(--ink);
  font:inherit;font-family:var(--font-display);font-weight:800;font-size:1rem;cursor:pointer}
.opt.plain{--c:var(--brand)}
.opt svg{width:20px;height:20px;flex:none;color:var(--c)}
.opt:hover{background:color-mix(in srgb,var(--c) 12%,transparent)}
.note{font-size:14px;color:var(--ink-2);margin:0}
.note b{color:var(--ink)}
#vc{width:100%;height:220px;display:block}
.times{width:100%;border-collapse:collapse;font-size:15px;font-variant-numeric:tabular-nums}
.times th,.times td{padding:7px 6px;text-align:right;border-bottom:1px solid var(--line)}
.times th:first-child,.times td:first-child{text-align:left;color:var(--ink-2);font-weight:400}
.times thead th{font-size:13px;color:var(--ink-2)}
.times td{font-family:var(--font-display);font-weight:600}
.times tr.fin td{font-weight:800}
footer{max-width:72ch;margin-top:28px;font-size:14px;color:var(--ink-3)}
footer p{margin:0 0 8px}
@media (max-width:420px){
  .ctl{grid-template-columns:96px minmax(0,1fr) 58px;gap:8px}
  .sub{margin:-4px 66px 6px 104px}
}