/* Optimistjolle på kryds. Fælles tokens, fonte og overskrifter kommer fra assets/css/kos.css. */
/* App-farver: kræfter (fremdrift/krængning/modstand), VMG og sejlerens vægt (messing). */
:root{
  --brass:#B9822A; --track:#DCE5EA;
  --drive:#0F6E56; --heel:#8A3418; --drag:#5F5E5A; --vmg:#5A4FC0;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){--brass:#E0AE5A; --track:#22404F; --vmg:#9C93F0}
}
:root[data-theme="dark"]{--brass:#E0AE5A; --track:#22404F; --vmg:#9C93F0}
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}
header margin-bottom:6px}
header p{margin:0;color:var(--ink-2)}
.grid{display:grid;gap:20px}
@media (min-width:920px){
  .grid{grid-template-columns:minmax(0,1.55fr) minmax(330px,1fr);align-items:start}
  .stage{position:sticky;top:calc(16px + env(safe-area-inset-top,0px))}
}
.stage canvas{width:100%;height:clamp(380px,70vh,640px);display:block;border-radius:14px;border:1px solid var(--line);touch-action:none;cursor:grab;background:#F1EFE8}
.stage canvas:active{cursor:grabbing}
.hint{font-size:13px;color:var(--ink-3);margin:6px 2px 0}
.scale{margin:12px 2px 0}
.bar{height:10px;border-radius:5px;background:linear-gradient(90deg,#0C447C 0%,#185FA5 14%,#85B7EB 37%,#F1EFE8 71%,#F0997B 86%,#A32D2D 100%)}
.ticks{position:relative;height:18px;font-size:12px;color:var(--ink-3);margin-top:3px;font-family:var(--font-display)}
.ticks span{position:absolute}
.ends{display:flex;justify-content:space-between;font-size:13px;color:var(--ink-2)}
.keys{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:13px;color:var(--ink-2);margin:12px 2px 0}
.keys i{display:inline-block;width:14px;height:4px;border-radius:2px;vertical-align:middle;margin-right:6px}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:18px}
.ctl{display:grid;grid-template-columns:110px minmax(0,1fr) 64px;align-items:center;gap:10px;margin-bottom:6px}
.ctl label{font-size:15px;color:var(--ink-2)}
.ctl output{font-family:var(--font-display);font-size:17px;font-weight:600;text-align:right}
.sub{display:flex;justify-content:space-between;font-size:12px;color:var(--ink-3);margin:-2px 74px 10px 120px}
input[type=range]{width:100%;accent-color:var(--brass);height:28px}
input[type=range]:disabled{opacity:.45}
.tog{display:flex;align-items:center;gap:10px;margin:4px 0 6px;font-size:15px;color:var(--ink-2);cursor:pointer;width:max-content}
.tog input{width:20px;height:20px;accent-color:var(--brass);margin:0;cursor:pointer}
.tog input:focus-visible{outline:2px solid var(--brass);outline-offset:3px}
input[type=range]:focus-visible,button:focus-visible{outline:2px solid var(--brass);outline-offset:3px;border-radius:4px}
.instr{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:16px 0;margin:14px 0 16px}
.instr .row{display:flex;justify-content:space-between;align-items:flex-end;gap:12px}
.instr .k{font-size:14px;color:var(--ink-2)}
.big{font-family:var(--font-display);font-weight:600;font-size:clamp(2.4rem,5vw,3.2rem);line-height:1;color:var(--brand)}
.big small{font-size:0.45em;font-weight:500;margin-left:4px;color:var(--ink-2)}
.max{text-align:right}
.max b{display:block;font-family:var(--font-display);font-weight:600;font-size:1.6rem;line-height:1.1}
.ms{font-family:var(--font-display);font-size:14px;font-weight:500;color:var(--ink-3);margin-top:2px}
.meter{height:8px;border-radius:4px;background:var(--track);margin:14px 0 8px;overflow:hidden}
.meter div{height:100%;width:0;background:var(--brass);border-radius:4px;transition:width .25s ease}
.note{font-size:14px;color:var(--ink-2);margin:0}
.vejr{font-size:13px;color:var(--ink-2);margin:-2px 0 8px}
button{font:inherit;font-size:14px;font-weight:500;margin-top:12px;padding:8px 14px;border-radius:8px;border:1px solid var(--brass);background:transparent;color:var(--ink);cursor:pointer}
button:hover{background:color-mix(in srgb,var(--brass) 14%,transparent)}
.stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 16px}
.stat .k{font-size:13px;color:var(--ink-2)}
.stat .v{font-family:var(--font-display);font-weight:600;font-size:1.5rem;line-height:1.15}
.stat .s{font-size:13px;color:var(--ink-3)}
.drag{font-size:14px;color:var(--ink-2);margin:16px 0;padding-top:14px;border-top:1px solid var(--line)}
#pc{width:100%;height:270px;display:block}
.hike{border-top:1px solid var(--line);padding-top:14px;margin:0 0 20px}
.hike .big{color:var(--brass)}
#bc{width:100%;height:240px;display:block;margin-top:8px}
footer{max-width:72ch;margin-top:28px;font-size:14px;color:var(--ink-3)}
footer p{margin:0 0 8px}
aside.panel h2{font-size:1.2rem;color:var(--brand);margin:0 0 6px}