/* Sejltrim. Fælles tokens, fonte og overskrifter kommer fra assets/css/kos.css. */
/* App-farver: sejlet og farten (grøn), vinden og vandet (blå), sejleren (orange), skroget og masten. */
:root{
  --sail:#0F6E56; --wind:#2B7FD0; --water:#85B7EB; --sailor:#D85A30; --hull:#7A8D96; --mast:#132A33; --boatfill:#E4ECEF; --track:#DCE5EA; --kick:#5A4FC0;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){--sail:#4CBF9A; --wind:#5AA6F0; --water:#3E6F99; --sailor:#FF7A45; --hull:#9DB3BB; --mast:#E3EEF1; --boatfill:#22404F; --track:#22404F; --kick:#A69DF5}
}
:root[data-theme="dark"]{--sail:#4CBF9A; --wind:#5AA6F0; --water:#3E6F99; --sailor:#FF7A45; --hull:#9DB3BB; --mast:#E3EEF1; --boatfill:#22404F; --track:#22404F; --kick:#A69DF5}

.wrap{max-width:1080px;margin:0 auto;padding-block:24px 48px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));display:grid;gap:var(--gap)}
.wrap>*,.grid>*{min-width:0}
header{max-width:72ch}
header p{margin:0}
.grid{display:grid;gap:var(--gap)}
@media (min-width:880px){
  .grid{grid-template-columns:minmax(0,1.3fr) minmax(320px,1fr);align-items:start}
  .stage{position:sticky;top:calc(16px + env(safe-area-inset-top,0px))}
}
.stage,.panel,.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:18px}
.stage{display:grid;gap:14px}
.views{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.views figure{margin:0}
.views figcaption{font-size:13px;color:var(--ink-2);text-align:center;margin-bottom:2px}
.views svg{width:100%;height:auto;display:block}
.views .side{grid-column:1/-1;display:grid;gap:6px}
.views .side svg{max-width:560px;margin:0 auto}

/* tegningerne */
.s-water{stroke:var(--water);stroke-width:2}
.s-hull{fill:var(--hull)}
.s-boat{fill:var(--boatfill);stroke:var(--hull);stroke-width:1.5}
.s-mast{stroke:var(--mast);stroke-width:3}
.s-sail{fill:none;stroke:var(--sail);stroke-width:3.5;stroke-linecap:round}
.s-sailor{fill:var(--sailor)}
.s-arm{stroke:var(--sailor);stroke-width:3;stroke-linecap:round}
.s-wind{stroke:var(--wind);stroke-width:2}
.s-windhead{fill:var(--wind)}
.s-pivot{fill:var(--hull)}
.s-boom{stroke:var(--mast);stroke-width:4;stroke-linecap:round}
.s-sailfill{fill:color-mix(in srgb,var(--sail) 14%,transparent);stroke:var(--sail);stroke-width:2.5;stroke-linejoin:round}
.s-stripe{fill:none;stroke:var(--sail);stroke-width:1.5}
.s-dot{fill:var(--sail)}
.s-ghost{fill:none;stroke:var(--ink-3);stroke-width:1.5;stroke-dasharray:4 4}
.s-kick{fill:none;stroke:var(--kick);stroke-width:2.5;stroke-linecap:round}
.s-kickhead{fill:var(--kick)}
svg text{font-family:var(--font-body);font-size:12px;fill:var(--ink)}
svg .t-wind{fill:var(--wind)}
svg .t-danger{fill:var(--danger);font-weight:700}
svg .t-kick{fill:var(--kick);font-weight:700;font-size:13px}
@media (max-width:600px){svg text{font-size:14.5px}}

.meters{display:grid;gap:8px}
.mrow{display:grid;grid-template-columns:96px minmax(0,1fr) 92px;align-items:center;gap:10px}
.mk{font-size:15px;color:var(--ink-2)}
.mrow output{font-family:var(--font-display);font-weight:600;font-size:15px;text-align:right}
.bar{height:14px;background:var(--track);border-radius:var(--radius-pill);overflow:hidden}
.bar div{height:100%;width:0;border-radius:var(--radius-pill);transition:width .3s ease,background-color .3s ease}
.b-speed{background:var(--sail)}
.h-ok{background:var(--wind)}
.h-warn{background:var(--warn)}
.h-danger{background:var(--danger)}
.note{font-size:14px;color:var(--ink-2);margin:0}
.msg{padding:12px 14px;border-radius:var(--radius-sm);border:2px solid var(--line);border-left-width:8px;line-height:1.5}
.msg.ok{border-color:var(--ok)}
.msg.warn{border-color:var(--warn)}
.msg.danger{border-color:var(--danger)}
.msg b{display:block;font-family:var(--font-display);font-size:1.1rem}

.panel{display:grid;gap:18px;align-content:start}
.ctl{display:grid;gap:6px}
.ctl label,.lbl{font-weight:700;display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap}
.ctl output{font-variant-numeric:tabular-nums;font-family:var(--font-display);font-size:1.15rem}
.hint{color:var(--ink-2);font-size:14px;margin:0}
.vejr{font-size:14px;color:var(--ink-2);margin:0}
input[type=range]{width:100%;accent-color:var(--brand);height:32px;margin:0}
.seg{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.seg3{grid-template-columns:repeat(3,minmax(0,1fr))}
.seg button{min-height:44px;font:inherit;font-weight:700;border:2px solid var(--line);background:transparent;color:var(--ink);border-radius:12px;padding:8px 6px;cursor:pointer}
.seg button:hover{border-color:var(--ink-3)}
.seg button[aria-pressed="true"]{border-color:var(--ink);background:var(--ink);color:var(--panel)}
.seg button:focus-visible,input:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.keys{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:14px;color:var(--ink-2)}
.keys i{display:inline-block;width:16px;height:4px;border-radius:2px;vertical-align:middle;margin-right:6px}
.k-sail{background:var(--sail)}
.k-wind{background:var(--wind)}
.k-sailor{background:var(--sailor)}
.k-kick{background:var(--kick)}

.card h2{margin:0 0 4px}
.tscroll{overflow-x:auto;margin-top:12px}
table{border-collapse:collapse;width:100%;min-width:520px;font-size:15px}
th,td{text-align:left;vertical-align:top;padding:8px 10px;border-bottom:1px solid var(--line)}
thead th{font-family:var(--font-display);font-weight:600;color:var(--ink-2)}
tbody th{font-weight:700}
td.cur{background:color-mix(in srgb,var(--brand) 14%,transparent);border-radius:var(--radius-sm)}
footer{max-width:72ch;font-size:14px;color:var(--ink-3)}
footer p{margin:0 0 8px}
@media (prefers-reduced-motion:reduce){.bar div{transition:none}}