/* dE3p · Strava Sync — zelfde zwart-witte stijl als de recap-kaarten. */
@font-face { font-family: Archivo; src: url(fonts/archivo-latin.woff2) format('woff2'); font-weight: 100 900; font-stretch: 62% 125%; }
@font-face { font-family: 'Martian Mono'; src: url(fonts/martian-mono-latin.woff2) format('woff2'); font-weight: 100 800; }

:root {
  color-scheme: dark;
  --bg: #0A0A0A; --panel: #141414; --panel2: #1A1A1A; --border: #2A2A2A;
  --fg: #FAFAFA; --muted: #8C8C8C; --soft: #CFCFCF; --slow: #484848;
  --line: #1F1F1F; --track: #242424; --dim: #6F6F6F; --code: #232323; --knob: #2D2D2D;
  --fg-hover: #E4E4E4; --done-muted: #6A6A6A;
  --mono: 'Martian Mono', ui-monospace, Consolas, monospace;
}
/* lichte modus: zelfde zwart-wit, omgekeerd */
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #F6F6F5; --panel: #FFFFFF; --panel2: #F0F0EF; --border: #DCDCDA;
  --fg: #0A0A0A; --muted: #6B6B6B; --soft: #333333; --slow: #B8B8B6;
  --line: #E8E8E6; --track: #E3E3E1; --dim: #9A9A98; --code: #ECECEA; --knob: #D2D2D0;
  --fg-hover: #2A2A2A; --done-muted: #9A9A9A;
}
:root[data-theme="light"] .logo { filter: invert(1); }
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--fg); overflow: hidden;
  font: 400 15px/1.45 Archivo, 'Segoe UI', sans-serif; -webkit-font-smoothing: antialiased;
}
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--fg); outline-offset: 3px; }
.muted { color: var(--muted); } .soft { color: var(--soft); } .small { font-size: 12.5px; } .center { text-align: center; }
.label { font: 500 11px/1.3 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }

/* ---- zijbalk ---------------------------------------------------------- */
.shell { display: grid; grid-template-columns: 236px 1fr; height: 100vh; }
.side { display: flex; flex-direction: column; gap: 16px; padding: 26px 18px 22px; border-right: 1.5px solid var(--border); }
.logo { height: 34px; width: auto; align-self: flex-start; }
.nav { display: grid; gap: 4px; margin-top: 8px; }
.nav button {
  all: unset; cursor: pointer; padding: 12px 14px; border-radius: 12px;
  font: 500 11.5px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
}
@media (hover: hover) and (pointer: fine) { .nav button:hover { color: var(--fg); background: var(--panel); } }
.nav button.on { background: var(--fg); color: var(--bg); }
.side-foot { margin-top: auto; display: grid; gap: 10px; }
#lastSync:empty { display: none; }
#lastSync b { display: block; margin-top: 4px; color: var(--soft); font-weight: 600; letter-spacing: .08em; }
.sync {
  all: unset; cursor: pointer; text-align: center; padding: 16px; border-radius: 999px;
  background: var(--fg); color: var(--bg); font: 700 13px var(--mono); letter-spacing: .14em; text-transform: uppercase;
  display: flex; align-items: center; justify-content: center; gap: 10px;
}
@media (hover: hover) and (pointer: fine) { .sync:hover { background: var(--fg-hover); } }
.sync[disabled] { opacity: .6; cursor: default; }
.spinner { width: 13px; height: 13px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.btn {
  all: unset; cursor: pointer; text-align: center; padding: 11px 15px; border-radius: 999px;
  border: 1.5px solid var(--border); font: 600 11px var(--mono); letter-spacing: .08em; text-transform: uppercase;
  white-space: nowrap;
}
@media (hover: hover) and (pointer: fine) { .btn:hover { border-color: var(--fg); } }
.btn.primary { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.btns { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }

/* ---- hoofdvlak ---------------------------------------------------------- */
main { overflow-y: auto; padding: 30px 34px 60px; }
.loading { color: var(--muted); padding: 40px 0; }
.head { display: flex; justify-content: space-between; align-items: end; gap: 16px; margin-bottom: 20px; }
/* rustige titel: naam van het scherm, de context er klein onder */
.title { font: 800 30px/1.05 Archivo; font-stretch: 104%; letter-spacing: -.02em; margin: 0; }
.head > div:first-child { display: flex; flex-direction: column-reverse; gap: 4px; }
.head > div:first-child > .label { font: 400 14px/1.3 Archivo; letter-spacing: 0; text-transform: none; color: var(--muted); }
.grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 18px; align-items: start; }
.col { display: grid; gap: 18px; min-width: 0; }
@media (max-width: 1260px) { .grid { grid-template-columns: minmax(0, 1fr); } }
.panel { background: var(--panel); border: 1.5px solid var(--border); border-radius: 20px; padding: 22px; min-width: 0; }
.panel h2 { margin: 0 0 14px; font-size: 19px; font-weight: 700; }
.alert { border: 1.5px solid var(--soft); border-radius: 14px; padding: 12px 16px; margin-bottom: 16px; color: var(--soft); }

/* waar sta je */
.hero { display: grid; grid-template-columns: auto 1fr; gap: 30px; align-items: center; }
.days { font: 850 118px/.82 Archivo; font-stretch: 125%; letter-spacing: -.05em; text-align: center; }
.days small { display: block; margin-top: 14px; font: 600 11.5px var(--mono); letter-spacing: .3em; text-transform: uppercase; color: var(--soft); }
.race { font-size: 30px; font-weight: 800; font-stretch: 112%; line-height: 1.05; margin: 6px 0 4px; }
.weekline { display: flex; justify-content: space-between; gap: 12px; margin-top: 18px; font-weight: 700; }
.bar { height: 8px; border-radius: 8px; background: var(--track); overflow: hidden; margin: 10px 0 6px; }
.bar i { display: block; height: 100%; background: var(--fg); }

/* deze week */
/* zeven dagen passen altijd (geen verborgen zondag op een laptopscherm) */
.tiles { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.tile { border: 1.5px solid var(--border); border-radius: 14px; padding: 12px 8px; min-height: 116px; min-width: 0; display: flex; flex-direction: column; gap: 6px; background: var(--bg); cursor: pointer; text-align: left; }
@media (hover: hover) and (pointer: fine) { .tile:hover { border-color: var(--muted); } }
.tile .d { display: flex; justify-content: space-between; font: 500 10.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.tile .t { font-weight: 700; font-size: 13.5px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tile .k { margin-top: auto; font: 800 20px/1 Archivo; font-stretch: 112%; white-space: nowrap; }
.tile .k small { display: block; margin-top: 4px; font: 500 10px var(--mono); color: var(--muted); }
.tile.done { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.tile.done .d, .tile.done .k small { color: var(--done-muted); }
.tile.today { border-color: var(--fg); box-shadow: inset 0 0 0 1px var(--fg); }
.tile.rest { opacity: .42; border-style: dashed; cursor: default; }
.tile.missed { opacity: .5; } .tile.missed .k { text-decoration: line-through; }

/* volgende training */
.next .t1 { font-size: 32px; font-weight: 800; font-stretch: 112%; line-height: 1.05; margin: 8px 0 6px; }
.next .t2 { color: var(--muted); font-size: 18px; }
.next .t3 { color: var(--soft); font-size: 17px; margin-top: 6px; }
.meta { display: flex; gap: 30px; margin-top: 16px; flex-wrap: wrap; }
.big { font: 800 28px/1 Archivo; font-stretch: 115%; margin-top: 6px; }

/* uitleg bij trainingen */
.how { margin-top: 18px; display: grid; gap: 10px; }
.how-item { border: 1.5px solid var(--border); border-radius: 14px; padding: 13px 16px; background: var(--panel2); }
.how-item b { display: block; font: 600 11px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--soft); margin-bottom: 5px; }
.how-item p { margin: 0; color: var(--soft); }
details.how-item summary { cursor: pointer; font: 600 11px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--soft); list-style: none; }
details.how-item summary::-webkit-details-marker { display: none; }
details.how-item summary::after { content: ' +'; }
details.how-item[open] summary::after { content: ' –'; }
details.how-item p { margin-top: 8px; }

/* sync-log */
.events { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.events li { display: flex; gap: 12px; align-items: baseline; overflow-wrap: anywhere; }
.events li::before { content: ''; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--muted); transform: translateY(-1px); }
.events li.ok::before, .events li.card::before, .events li.run::before { background: var(--fg); }
.events li.warn { color: var(--soft); } .events li.warn::before { background: none; border: 1.5px solid var(--soft); }

/* kaart */
.card-img { width: 100%; display: block; border-radius: 16px; border: 1.5px solid var(--border); aspect-ratio: 9 / 16; object-fit: cover; background: var(--bg); cursor: zoom-in; }
.card-empty { aspect-ratio: 9 / 16; border: 1.5px dashed var(--border); border-radius: 16px; display: grid; place-items: center; text-align: center; padding: 20px; color: var(--muted); }
.cap { display: flex; justify-content: space-between; gap: 12px; margin-top: 12px; font-size: 14px; }

/* grafiek */
svg text { font: 500 11px var(--mono); fill: var(--muted); }
svg .axis { stroke: var(--border); }
svg .b { fill: var(--muted); } svg .b.cur { fill: var(--fg); }
svg .goal { fill: none; stroke: var(--fg); stroke-width: 1.4; stroke-dasharray: 4 4; }
svg text.v, svg text.cur { fill: var(--fg); } svg text.cur { font-weight: 700; }

/* schema */
.week-h { display: flex; justify-content: space-between; align-items: end; gap: 12px; margin: 28px 0 6px; padding-bottom: 10px; border-bottom: 1.5px solid var(--border); }
.week-h:first-of-type { margin-top: 4px; }
.week-h.cur { border-color: var(--fg); }
.week-h h2 { margin: 4px 0 0; font-size: 22px; font-weight: 800; font-stretch: 112%; }
.focus { color: var(--muted); font-size: 14px; margin: 8px 0 4px; }
.prow { display: grid; grid-template-columns: 62px minmax(0, 1fr) 84px 130px 110px; gap: 14px; align-items: start; padding: 14px 8px; border-bottom: 1px solid var(--line); }
.prow.today { background: var(--panel); border-radius: 12px; }
.prow .d { font: 500 10.5px/1.35 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.prow .d b { display: block; color: var(--fg); font: 800 21px/1 Archivo; font-stretch: 118%; }
.prow .t { font-weight: 700; }
.prow .s { color: var(--muted); font-size: 13.5px; }
.prow .x { color: var(--dim); font-size: 12.5px; margin-top: 4px; }
.prow .k { font: 800 16px Archivo; font-stretch: 115%; text-align: right; }
.prow .p { color: var(--soft); font-size: 13px; text-align: right; }
.prow.rest .t, .prow.rest .k { color: var(--slow); }
.prow.missed .t { color: var(--dim); text-decoration: line-through; }
.prow .how-item { margin-top: 10px; padding: 10px 14px; }
.chip { display: inline-block; padding: 4px 10px; border-radius: 999px; border: 1.5px solid var(--border); font: 600 10px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--soft); white-space: nowrap; }
.chip.done { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.chip.missed { border-style: dashed; color: var(--dim); }
.chip.today { border-color: var(--fg); color: var(--fg); }
.st { text-align: right; }

/* vorige trainingen */
.hrow { display: grid; grid-template-columns: 62px minmax(0, 1fr) 90px 84px 64px 96px; gap: 14px; align-items: center; padding: 13px 10px; border-radius: 12px; cursor: pointer; }
@media (hover: hover) and (pointer: fine) { .hrow:hover { background: var(--panel); } }
.hrow .d { font: 500 10.5px/1.35 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.hrow .d b { display: block; color: var(--fg); font: 800 21px/1 Archivo; font-stretch: 118%; }
.hrow .t { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hrow .s { color: var(--muted); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hrow .v { font: 800 17px Archivo; font-stretch: 115%; text-align: right; }
.hrow .v small { display: block; font: 500 10px var(--mono); color: var(--muted); letter-spacing: .06em; }
.cardmark { font: 600 10px var(--mono); letter-spacing: .08em; text-transform: uppercase; text-align: right; color: var(--muted); }
.cardmark.yes { color: var(--fg); }
button.cardmark.make { all: unset; cursor: pointer; justify-self: end; white-space: nowrap; font: 600 10px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding: 6px 10px; border: 1.5px solid var(--border); border-radius: 999px; }
@media (hover: hover) and (pointer: fine) { button.cardmark.make:hover { color: var(--fg); border-color: var(--fg); } }

/* run-detail */
.back { all: unset; cursor: pointer; font: 600 11px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
@media (hover: hover) and (pointer: fine) { .back:hover { color: var(--fg); } }
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--border); border: 1.5px solid var(--border); border-radius: 16px; overflow: hidden; }
.stats > div { background: var(--panel); padding: 16px 18px; }
.stats .big { font-size: 22px; white-space: nowrap; }
@media (min-width: 1261px) and (max-width: 1360px) { .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.plan-box { display: grid; gap: 4px; }

/* ---- opstartwizard, formulieren, instellingen -------------------------------- */
body.onboarding .nav, body.onboarding .side-foot { display: none; }
.setup-wrap { max-width: 940px; }
.setup-wrap > .back { display: inline-block; margin-bottom: 14px; }
.stepper { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 0; margin: 0 0 18px; }
.stepper li { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 1.5px solid var(--border); border-radius: 14px;
  font: 500 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.stepper li span { font: 800 17px Archivo; font-stretch: 118%; letter-spacing: 0; color: var(--slow); }
.stepper li.on { border-color: var(--fg); color: var(--fg); }
.stepper li.on span { color: var(--fg); }
.stepper li.done { color: var(--soft); }
.stepper li.done span { color: var(--soft); }
.setup { padding: 28px; }
.lead { font-size: 17px; line-height: 1.55; color: var(--soft); margin: 0 0 22px; max-width: 72ch; }
.lead b { color: var(--fg); }
.todo { list-style: none; counter-reset: todo; margin: 0; padding: 0; display: grid; gap: 22px; }
.todo > li { counter-increment: todo; position: relative; padding-left: 50px; color: var(--soft); }
.todo > li b { color: var(--fg); }
.todo > li::before { content: counter(todo); position: absolute; left: 0; top: -3px; width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center; background: var(--fg); color: var(--bg); font: 800 15px Archivo; }
.todo .btns { margin-top: 12px; }
.kv { margin-top: 12px; border: 1.5px solid var(--border); border-radius: 14px; overflow: hidden; }
.kv-row { display: grid; grid-template-columns: 250px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 11px 14px; border-top: 1px solid var(--line); }
.kv-row:first-child { border-top: 0; }
.kv-row .k { font: 500 11px var(--mono); letter-spacing: .06em; color: var(--muted); }
.kv-row .v { color: var(--fg); font-weight: 600; overflow-wrap: anywhere; }
.kv-row.key { background: var(--panel2); }
.kv-row.key .k { color: var(--fg); }
.copy { all: unset; cursor: pointer; padding: 6px 11px; border-radius: 999px; border: 1.5px solid var(--border); font: 600 10px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--soft); }
@media (hover: hover) and (pointer: fine) { .copy:hover { border-color: var(--fg); color: var(--fg); } }
.note { margin-top: 12px; padding: 12px 14px; border-left: 3px solid var(--fg); background: var(--panel2); border-radius: 0 12px 12px 0; color: var(--soft); }
.note b { color: var(--fg); }
code { font: 600 13px var(--mono); background: var(--code); padding: 2px 7px; border-radius: 6px; color: var(--fg); }
.btns.end { justify-content: flex-end; margin-top: 26px; }
.btns.tight { margin-top: 0; flex-wrap: nowrap; }
.btn.strava { background: #FC4C02; border-color: #FC4C02; color: #fff; }
@media (hover: hover) and (pointer: fine) { .btn.strava:hover { background: #E34402; } }
.btn[disabled] { opacity: .5; cursor: default; }

.form { display: grid; gap: 16px 18px; }
.form-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.form-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.span2 { grid-column: span 2; } .span3 { grid-column: 1 / -1; }
.field { display: grid; gap: 7px; align-content: start; }
.field small { color: var(--muted); font-size: 12.5px; }
.input { width: 100%; padding: 12px 14px; border-radius: 12px; border: 1.5px solid var(--border); background: var(--bg);
  color: var(--fg); font: 500 15px Archivo, sans-serif; color-scheme: dark; }
.input:focus { outline: none; border-color: var(--fg); }
select.input { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 19px) 52%, calc(100% - 14px) 52%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 34px; }
.toggle { display: flex; gap: 14px; align-items: flex-start; cursor: pointer; position: relative; }
.toggle input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.knob { flex: none; width: 44px; height: 26px; border-radius: 999px; background: var(--knob); position: relative; transition: background .2s; margin-top: 1px; }
.knob::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--muted); transition: transform .2s, background .2s; }
.toggle input:checked + .knob { background: var(--fg); }
.toggle input:checked + .knob::after { transform: translateX(18px); background: var(--bg); }
.toggle input:focus-visible + .knob { outline: 2px solid var(--fg); outline-offset: 3px; }
.toggle b { display: block; }
.toggle small { display: block; color: var(--muted); font-size: 13px; margin-top: 3px; line-height: 1.45; }
.waiting { display: flex; gap: 16px; align-items: center; padding: 16px 18px; border: 1.5px solid var(--fg); border-radius: 14px; color: var(--soft); }
.waiting b { color: var(--fg); }
.waiting .btn { margin-left: auto; }
.done-line { padding: 14px 16px; border-radius: 14px; background: var(--fg); color: var(--bg); font-weight: 700; margin-bottom: 18px; }
.set-row { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 18px 0; border-top: 1px solid var(--line); }
.set-row:first-child { border-top: 0; padding-top: 0; }
.setup .set-row:first-of-type { border-top: 0; }
.set-row > div:first-child { min-width: 0; display: grid; gap: 4px; }
.set-row .v { font-size: 17px; font-weight: 700; }
.set-row .path { font: 500 12.5px var(--mono); color: var(--soft); overflow-wrap: anywhere; }
.set-row small { font-size: 13px; }
.set-row.toggle { align-items: center; }
.set-row.stack { flex-direction: column; align-items: stretch; gap: 12px; }
.title-form { display: flex; gap: 10px; }
.title-form .input { flex: 1; min-width: 0; }
.title-form .btn { flex: none; display: inline-flex; align-items: center; gap: 8px; }
.title-box { padding: 16px 18px; border: 1.5px solid var(--border); border-radius: 14px; background: var(--panel2); display: grid; gap: 10px; }
.title-preview { font-size: 19px; font-weight: 800; font-stretch: 108%; overflow-wrap: anywhere; }
.input.mono { font: 500 13px var(--mono); }
.title-box code.tpl { justify-self: start; white-space: normal; overflow-wrap: anywhere; }
.title-err:empty { display: none; }
.title-err { font-size: 13px; color: var(--fg); }
.warn { color: var(--fg); font-size: 13px; }
.settings { max-width: 940px; padding: 26px 28px; }
.empty p { max-width: 64ch; }
.loading .spinner { display: inline-block; vertical-align: -2px; margin-right: 8px; }
@media (max-width: 1100px) { .form-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .kv-row { grid-template-columns: 190px minmax(0, 1fr) auto; } }

/* ---- weergave-schakelaar, thema-knop ---------------------------------------- */
.head-tools { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.seg { display: inline-flex; padding: 3px; border: 1.5px solid var(--border); border-radius: 999px; gap: 2px; }
.seg button { all: unset; cursor: pointer; padding: 8px 14px; border-radius: 999px; font: 600 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
@media (hover: hover) and (pointer: fine) { .seg button:hover { color: var(--fg); } }
.seg button.on { background: var(--fg); color: var(--bg); }
.seg button:focus-visible, .icon-btn:focus-visible { outline: 2px solid var(--fg); outline-offset: 2px; }
.icon-btn { all: unset; cursor: pointer; width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid var(--border); display: grid; place-items: center; color: var(--fg); flex: none; }
@media (hover: hover) and (pointer: fine) { .icon-btn:hover { border-color: var(--fg); } }
.icon-btn svg { width: 18px; height: 18px; }

/* ---- agenda ------------------------------------------------------------------ */
.cal-head { display: flex; justify-content: space-between; align-items: end; gap: 16px; margin: 4px 0 14px; }
.cal-head h2 { margin: 4px 0 0; font-size: 26px; font-weight: 800; font-stretch: 112%; }
.cal-nav { display: flex; gap: 8px; align-items: center; }
.cal { display: grid; gap: 4px; }
.cal-dow, .cal-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.cal-dow { padding: 0 6px 6px; }
.cal-dow span { font: 500 10.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); padding-left: 8px; }
.cal-week { padding: 6px; border-radius: 16px; }
.cal-week.cur { background: var(--panel); }
.cell { all: unset; box-sizing: border-box; min-height: 94px; padding: 8px 9px 10px; border-radius: 12px; border: 1.5px solid var(--border);
  background: var(--bg); display: flex; flex-direction: column; gap: 3px; min-width: 0; }
button.cell { cursor: pointer; }
@media (hover: hover) and (pointer: fine) { button.cell:hover { border-color: var(--muted); } }
.cell .n { width: 28px; height: 28px; margin: -2px 0 2px -3px; border-radius: 50%; display: grid; place-items: center; font: 800 15px Archivo; font-stretch: 112%; }
.cell .t { font-weight: 700; font-size: 13px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cell .k { margin-top: auto; font: 800 16px/1 Archivo; font-stretch: 115%; white-space: nowrap; }
.cell .k small { font: 500 10px var(--mono); color: var(--muted); margin-left: 2px; }
.cell .m { font: 600 9.5px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.cell.done { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.cell.done .k small, .cell.done .m { color: var(--done-muted); }
.cell.planned { border-style: dashed; }
.cell.planned .t, .cell.planned .k { color: var(--muted); }
.cell.missed .t { color: var(--dim); text-decoration: line-through; }
.cell.missed .k { color: var(--dim); }
.cell.empty { border-color: transparent; background: transparent; }
.cell.out { opacity: .38; }
.cell.today .n { background: var(--fg); color: var(--bg); }
.cell.done.today .n { background: var(--bg); color: var(--fg); }
.cal-legend { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 14px; }
.cal-legend span { display: inline-flex; align-items: center; gap: 8px; }
.cal-legend i { width: 14px; height: 14px; border-radius: 4px; border: 1.5px solid var(--border); display: inline-block; }
.cal-legend i.done { background: var(--fg); border-color: var(--fg); }
.cal-legend i.planned { border-style: dashed; }
.cal-legend i.today { border-radius: 50%; background: var(--fg); border-color: var(--fg); }
@media (max-width: 1100px) { .cell .t { display: none; } .cell { min-height: 76px; } }

/* kernblok: gelopen vs doel */
.perf-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; margin-top: 12px; background: var(--border); border: 1.5px solid var(--border); border-radius: 14px; overflow: hidden; }
.perf-grid > div { background: var(--panel); padding: 14px 16px; display: grid; gap: 4px; align-content: start; }
.perf-grid .big { font-size: 24px; margin: 0; white-space: nowrap; }
.perf-grid .big small { font: 500 11px var(--mono); color: var(--muted); margin-left: 2px; }
@media (min-width: 1261px) and (max-width: 1360px) { .perf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.perf-mini { margin-top: 8px; font-size: 13.5px; color: var(--soft); }
.perf-mini:empty { display: none; }
.perf-mini b { color: var(--fg); }

/* Garmin: herstel en gevoel */
.feel-row .big small { font: 500 11px var(--mono); color: var(--muted); margin-left: 2px; }
.garmin-cta { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.garmin-form { display: flex; gap: 10px; flex-wrap: wrap; }
.garmin-form .input { flex: 1 1 200px; min-width: 0; }
.garmin-form .btn { display: inline-flex; align-items: center; gap: 8px; }
.feel-row { display: flex; gap: 34px; margin-top: 10px; }
.feel-row .big { margin: 0; }

/* toast */
#toast { position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 16px); opacity: 0; pointer-events: none;
  padding: 12px 20px; border-radius: 999px; background: var(--fg); color: var(--bg); font: 600 12px var(--mono);
  letter-spacing: .04em; transition: opacity .25s, transform .3s; max-width: 80vw; z-index: 10; }
#toast.show { opacity: 1; transform: translate(-50%, 0); }

/* vergroot */
.zoom { position: fixed; inset: 0; background: rgba(0, 0, 0, .88); display: grid; place-items: center; z-index: 20; cursor: zoom-out; }
.zoom img { max-height: 94vh; max-width: 94vw; border-radius: 18px; }

/* sportfilter bij Vorige trainingen */
.seg.sports { flex-wrap: wrap; margin: 0 0 22px; border-radius: 22px; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.chip-check { display: inline-flex; cursor: pointer; }
.chip-check input { position: absolute; opacity: 0; pointer-events: none; }
.chip-check span { padding: 7px 13px; border: 1.5px solid var(--border); border-radius: 999px; font: 600 11px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.chip-check input:checked + span { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.chip-check input:focus-visible + span { outline: 2px solid var(--fg); outline-offset: 2px; }

/* ---- gezondheid ---------------------------------------------------------- */
.hgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 1100px) { .hgrid { grid-template-columns: minmax(0, 1fr); } }
.hpanel { padding: 18px 18px 12px; }
.hhead { display: flex; justify-content: space-between; align-items: start; gap: 12px; }
.hval { font: 800 26px/1.1 Archivo; font-stretch: 115%; margin-top: 6px; }
.hval small { font: 500 11px var(--mono); color: var(--muted); margin-left: 6px; letter-spacing: .02em; }
.hlegend { display: flex; gap: 16px; margin-top: 8px; font: 500 10.5px var(--mono); color: var(--muted); }
.hlegend span { display: inline-flex; align-items: center; gap: 6px; }
.sw { display: inline-block; }
.sw.dash { width: 14px; border-top: 2px dashed var(--muted); }
.sw.tick { width: 14px; border-top: 2px solid var(--muted); }
.hchart { position: relative; margin-top: 10px; height: 168px; touch-action: none; }
.hchart svg { display: block; overflow: visible; }
.hgridline { stroke: var(--track); stroke-width: 1; }
.haxis { font: 500 10px var(--mono); fill: var(--muted); }
.haxis.now { fill: var(--fg); }
.hcol { fill: var(--panel2); transition: opacity .12s; }
.hgoal { stroke: var(--muted); stroke-width: 2; stroke-linecap: round; }
.hline2 { fill: none; stroke: var(--muted); stroke-width: 2; stroke-dasharray: 4 4; stroke-linecap: round; }
.htip { position: absolute; pointer-events: none; background: var(--bg); border: 1.5px solid var(--border); border-radius: 10px; padding: 8px 10px; font-size: 12.5px; line-height: 1.4; white-space: nowrap; box-shadow: 0 6px 18px rgb(0 0 0 / .25); z-index: 2; }
.htip b { display: block; font-weight: 700; }
.htip div { color: var(--soft); }
.htable { margin-top: 18px; }
.htable summary { cursor: pointer; font: 600 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
@media (hover: hover) and (pointer: fine) { .htable summary:hover { color: var(--fg); } }
.table-wrap { overflow-x: auto; margin-top: 14px; }
.htable table { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
.htable th { text-align: right; font: 500 10px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); padding: 0 10px 8px; white-space: nowrap; }
.htable td { text-align: right; padding: 7px 10px; border-top: 1px solid var(--line); white-space: nowrap; }
.htable th:first-child, .htable td:first-child { text-align: left; padding-left: 0; }

/* ---- kleur per meting: zelfde kleur in Overzicht, tegels en grafieken (gevalideerd kleurenblind-veilig palet) ---- */
:root {
  --c-sleep: #9085e9; --c-hrv: #199e70; --c-rhr: #e66767; --c-bb: #2a9a2a;
  --c-stress: #d95926; --c-steps: #3987e5; --c-vo2: #d55181; --c-im: #c98500;
  --good: #0ca30c; --warn: #fab219; --bad: #e25555;
}
:root[data-theme="light"] {
  --c-sleep: #4a3aa7; --c-hrv: #1baf7a; --c-rhr: #e34948; --c-bb: #008300;
  --c-stress: #eb6834; --c-steps: #2a78d6; --c-vo2: #e87ba4; --c-im: #eda100;
  --good: #006300; --warn: #b97800; --bad: #d03b3b;
}
.c-sleep { --c: var(--c-sleep); } .c-hrv { --c: var(--c-hrv); } .c-rhr { --c: var(--c-rhr); } .c-bb { --c: var(--c-bb); }
.c-stress { --c: var(--c-stress); } .c-steps { --c: var(--c-steps); } .c-vo2 { --c: var(--c-vo2); } .c-im { --c: var(--c-im); }
/* Overzicht: 3 per rij, trainingsstatus breed (3 + 2); Gezondheid: 4 per rij */
.mtiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
.mtile.wide { grid-column: span 2; }
.mtiles.health { grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0 0 18px; }
@media (max-width: 1000px) { .mtiles.health { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.mtile { background: color-mix(in srgb, var(--c) 10%, var(--panel)); border: 1.5px solid color-mix(in srgb, var(--c) 26%, var(--panel)); border-radius: 14px; padding: 13px 14px 12px; display: grid; gap: 4px; align-content: start; min-width: 0; }
.mtile .label { font-size: 10px; letter-spacing: .1em; color: var(--soft); }
.mtile .big { font-size: 26px; margin: 0; white-space: nowrap; }
.mtiles.health .mtile .big { font-size: 30px; }
.mtile .big small { font: 500 11px var(--mono); color: var(--muted); margin-left: 3px; }
.mtile .big-txt { font-size: 19px; white-space: normal; }
.mdot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--c); margin-right: 7px; vertical-align: 1px; }
.trend { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 7px; margin-top: 6px; }
.delta { --k: var(--muted); display: inline-flex; align-items: center; gap: 3px; padding: 3px 9px 3px 5px; border-radius: 999px; font: 600 12px/1.2 Archivo; color: var(--fg); background: color-mix(in srgb, var(--k) 16%, transparent); white-space: nowrap; }
.delta svg { width: 14px; height: 14px; color: var(--k); }
.delta.good { --k: var(--good); } .delta.bad { --k: var(--bad); } .delta.same { color: var(--soft); padding-left: 9px; }
.garmin-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.link-btn { all: unset; cursor: pointer; font: 600 10.5px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
@media (hover: hover) and (pointer: fine) { .link-btn:hover { color: var(--fg); } }
.rec-tip { display: flex; align-items: center; gap: 9px; margin-top: 14px; color: var(--soft); }
.rec-tip svg { width: 18px; height: 18px; flex: none; }
.rec-tip.good svg { color: var(--good); } .rec-tip.mid svg { color: var(--warn); } .rec-tip.bad svg { color: var(--bad); }
.hside { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; text-align: right; padding-top: 2px; }
.hintro { margin: -6px 0 14px; }
.hmark { fill: var(--c, var(--fg)); }
.hmark.part, .hdot.part { opacity: .45; }
.hline { fill: none; stroke: var(--c, var(--fg)); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.hdot { fill: var(--c, var(--fg)); stroke: var(--panel); stroke-width: 2; pointer-events: none; }
.haxis.yr { fill: var(--dim); }
.sw.bar { width: 9px; height: 11px; border-radius: 2px 2px 0 0; background: var(--c, var(--fg)); }
.sw.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--c, var(--fg)); }

/* ---- Instellingen in groepen, update-melding ---- */
.set-h { font: 500 11px/1.3 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin: 28px 0 10px 4px; }
.head + .set-h { margin-top: 0; }
.set-row code { font: 500 12px var(--mono); background: var(--code); padding: 1px 6px; border-radius: 6px; }
.update-note { all: unset; cursor: pointer; display: grid; gap: 3px; text-align: center; padding: 10px 12px; border-radius: 14px;
  background: color-mix(in srgb, var(--good) 14%, var(--panel)); border: 1.5px solid color-mix(in srgb, var(--good) 40%, var(--panel)); font-size: 12.5px; color: var(--soft); }
.update-note b { font: 700 11px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--fg); }
@media (hover: hover) and (pointer: fine) { .update-note:hover { border-color: var(--good); } }
.update-note[hidden] { display: none; }

/* ---- minimalistische zijbalk ---- */
.side-icons { display: flex; justify-content: center; gap: 8px; }
.side-icons .icon-btn { width: 38px; height: 38px; color: var(--muted); }
@media (hover: hover) and (pointer: fine) { .side-icons .icon-btn:hover { color: var(--fg); } }
.side-icons .icon-btn svg { width: 17px; height: 17px; }
.logo { margin-bottom: 6px; }
/* ---- trainingen: schema en gedaan samen ---- */
/* één tijdlijn: titel en Lijst/Agenda blijven staan, de weken schuiven eronder */
.head.sticky { position: sticky; top: -30px; z-index: 5; background: var(--bg); padding: 30px 0 14px; margin: -30px 0 6px; }
.wkb { margin-top: 30px; scroll-margin-top: 112px; }
.wkb:first-of-type { margin-top: 4px; }
.wkb .week-h { margin-top: 0; }
.wkb.now .week-h h2::after { content: 'nu'; margin-left: 10px; vertical-align: 4px; padding: 3px 9px; border-radius: 999px; background: var(--fg); color: var(--bg); font: 600 10px var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.wkb.later .week-h { border-bottom-style: dashed; }
.hrow.plan { cursor: default; align-items: start; }
@media (hover: hover) and (pointer: fine) { .hrow.plan:hover { background: none; } }
.hrow.plan .t { font-weight: 600; }
.hrow .x { color: var(--dim); font-size: 12.5px; margin-top: 4px; }
.hrow.plan .v { color: var(--soft); }
.hrow.plan.rest .t { color: var(--slow); font-weight: 500; }
.hrow.plan.missed .t { color: var(--dim); text-decoration: line-through; }
.hrow.plan.today { background: var(--panel); outline: 1.5px solid var(--fg); outline-offset: -1.5px; }
.hrow.plan .st { justify-self: end; }
.hrow .how-item { margin-top: 10px; padding: 10px 14px; }
.empty-week { padding: 14px 10px; }
.cta-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 8px; }

/* ---- koppelingen: een tegel per dienst ---- */
.conns { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; max-width: 940px; }
.conn { all: unset; cursor: pointer; display: grid; gap: 4px; padding: 14px; border-radius: 16px; border: 1.5px solid var(--border); background: var(--panel); }
@media (hover: hover) and (pointer: fine) { .conn:hover { border-color: var(--muted); } }
.conn.sel { border-color: var(--fg); box-shadow: inset 0 0 0 1px var(--fg); }
.conn .mark { width: 34px; height: 34px; margin-bottom: 6px; border-radius: 10px; display: grid; place-items: center; background: var(--b); color: #fff; font: 800 16px Archivo; font-stretch: 110%; }
.conn b { font-weight: 700; font-size: 14.5px; }
.conn small { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 12.5px; }
.conn.on small { color: var(--soft); }
.conn.on small::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--good); flex: none; }
.conn .mark { box-shadow: inset 0 0 0 1px rgb(255 255 255 / .14); }
.conn-detail { margin-top: 10px; }
.wsteps { margin: 2px 0 0; padding-left: 20px; display: grid; gap: 10px; color: var(--soft); font-size: 14px; }
.wsteps li .btn { margin-left: 8px; padding: 7px 12px; }
.kv { display: grid; gap: 6px; margin-top: 8px; }
.kv > div { display: grid; grid-template-columns: 110px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 12px; border: 1.5px solid var(--border); border-radius: 12px; background: var(--panel2); }
.kv code { font: 500 12.5px var(--mono); overflow-wrap: anywhere; }
.conn-detail .set-row:first-child { padding-top: 0; }
details.adv > summary { cursor: pointer; list-style: none; }
details.adv > summary::-webkit-details-marker { display: none; }
details.adv > summary::after { content: ' +'; }
details.adv[open] > summary::after { content: ' −'; }
@media (hover: hover) and (pointer: fine) { details.adv > summary:hover { color: var(--fg); } }

/* ---- prentjes in de opstartstappen ---- */
.setup-pic { margin: 14px 0 22px; }
.setup-pic img { display: block; width: 100%; max-width: 760px; border-radius: 14px; border: 1.5px solid var(--border); }
.setup-pic figcaption { margin-top: 8px; }

/* ---- telefoon: logo en Sync bovenaan, menu onderaan, compacte lijsten ---- */
@media (max-width: 640px) {
  .shell { display: block; height: 100vh; }
  .side { display: contents; }
  body::before { content: ''; position: fixed; top: 0; left: 0; right: 0; height: 56px; z-index: 19; background: var(--bg); border-bottom: 1.5px solid var(--border); }
  .logo { position: fixed; top: 16px; left: 16px; z-index: 20; height: 24px; margin: 0; }
  .side-foot { position: fixed; top: 9px; right: 12px; z-index: 21; margin: 0; display: flex; }
  .side-foot #lastSync, .side-foot .side-icons, .side-foot .update-note { display: none !important; }
  .sync { padding: 10px 18px; font-size: 11px; }
  .nav { position: fixed; bottom: 0; left: 0; right: 0; z-index: 20; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px;
    margin: 0; padding: 8px 8px calc(8px + env(safe-area-inset-bottom)); background: var(--bg); border-top: 1.5px solid var(--border); }
  .nav button { padding: 12px 2px; text-align: center; font-size: 9px; letter-spacing: .03em; border-radius: 10px; }
  main { position: fixed; top: 56px; bottom: 62px; left: 0; right: 0; padding: 18px 16px 28px; }
  .head { flex-wrap: wrap; align-items: start; margin-bottom: 14px; }
  .title { font-size: 25px; }
  .head.sticky { top: -18px; padding: 18px 0 12px; margin: -18px 0 4px; }
  .head-tools, .head .btns { width: 100%; justify-content: flex-start; flex-wrap: wrap; }
  .panel { padding: 16px; border-radius: 16px; }
  .grid, .col { gap: 12px; }
  .hero { grid-template-columns: 1fr; gap: 14px; }
  .days { font-size: 76px; text-align: left; }
  .days small { margin-top: 8px; letter-spacing: .2em; }
  .race { font-size: 24px; }
  .next .t1 { font-size: 25px; }
  .meta { gap: 20px; }
  .tiles { gap: 4px; }
  .tile { min-height: 74px; padding: 8px 5px; border-radius: 10px; }
  .tile .d { font-size: 9px; letter-spacing: .02em; flex-direction: column; }
  .tile .t { display: none; }
  .tile .k { font-size: 15px; }
  .tile .k small { display: none; }
  .mtiles, .mtiles.health { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .mtile .big, .mtiles.health .mtile .big { font-size: 24px; }
  .hrow { grid-template-columns: 34px minmax(0, 1fr) auto; gap: 10px; padding: 12px 4px; }
  .hrow > :nth-child(n+4), .hrow > button.cardmark { display: none; }
  .hrow .d b { font-size: 18px; }
  .week-h { flex-wrap: wrap; }
  .week-h h2 { font-size: 19px; }
  .wkb { scroll-margin-top: 96px; }
  .seg.sports { overflow-x: auto; max-width: 100%; scrollbar-width: none; }
  .seg button { white-space: nowrap; padding: 8px 10px; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .set-row { flex-wrap: wrap; }
  .hhead { flex-wrap: wrap; }
  .hside { align-items: flex-start; text-align: left; }
}

/* ---- gsm koppelen (computer) en de gsm-app dE3p ---------------------------------- */
.conn .mark svg { display: block; }
.conn[data-conn="gsm"] .mark, .conn[data-conn="pc"] .mark { box-shadow: inset 0 0 0 1.5px #3A3A3A; }
.pair-show { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; padding: 16px; border: 1.5px solid var(--border); border-radius: 16px; background: var(--panel2); }
.pair-show .qr svg { width: 148px; height: 148px; display: block; border-radius: 10px; }
.pair-code { font: 700 38px/1.1 var(--mono); letter-spacing: .08em; color: var(--fg); margin: 6px 0 8px; }
.pair-form { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 22px; }
.pair-form .input.code { flex: 1 1 200px; min-width: 0; font: 700 26px var(--mono); letter-spacing: .12em; text-transform: uppercase; text-align: center; padding: 14px; }
.pair-form .btn { display: inline-flex; align-items: center; gap: 8px; }
.choices { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.choice { all: unset; cursor: pointer; display: grid; gap: 6px; padding: 20px; border-radius: 18px; border: 1.5px solid var(--border); background: var(--panel2); }
@media (hover: hover) and (pointer: fine) { .choice:hover, .choice:focus-visible { border-color: var(--fg); } }
.choice b { font-size: 20px; font-weight: 800; color: var(--fg); }
.choice span { color: var(--soft); font-size: 14.5px; }
.choice i { font-style: normal; margin-top: 6px; }
.note.install { margin: 0 0 18px; }
.note.install .btn { margin-top: 10px; display: block; }
/* gsm-app: geen kaartenmap, en plaats voor de onderbalk van iPhone en Android */
body.web .side-icons [data-action="folder"] { display: none; }
@media (max-width: 640px) {
  body.web main { bottom: calc(62px + env(safe-area-inset-bottom)); }
  .pair-code { font-size: 30px; }
  .pair-show .qr { display: none; }
}

/* ---- op de gsm voelt het als een app (skill mobile-native, Emil Kowalski) -------------- */
/* geen grijze flits bij tikken, geen tekstvergroting, geen pull-to-refresh achter de app */
html { -webkit-tap-highlight-color: transparent; -webkit-text-size-adjust: 100%; overscroll-behavior: none; }
body { overscroll-behavior: none; }
main { overscroll-behavior: contain; }
/* hoogte volgt de echte zichtbare hoogte (adresbalk van Safari/Chrome) */
.shell { height: 100dvh; }
/* iPhone zoomt in op invoervakken kleiner dan 16px */
@media (pointer: coarse) { .input, input, select, textarea { font-size: 16px; } }
/* meteen reageren op een tik, en knoppen niet selecteren bij lang drukken */
button, a, [role="button"], .hrow, .tile { touch-action: manipulation; }
button, [role="button"], .tile, .conn, .choice, .hrow { user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
/* tikfeedback bij het neerdrukken, niet pas bij het loslaten */
.btn:active, .sync:active, .icon-btn:active, .choice:active, .conn:active, .seg button:active, .nav button:active { transform: scale(.97); }
.tile:active, .hrow:active { background: var(--panel); }
@media (hover: none) { .btn, .sync, .icon-btn, .choice, .conn, .seg button, .nav button { transition: transform 120ms cubic-bezier(.2, .8, .2, 1); } }
.setup a, .settings a { color: var(--fg); text-decoration: underline; text-decoration-color: var(--dim); text-underline-offset: 3px; }
/* melding op de gsm: boven de menubalk, volle breedte, gewone letters zodat een zin past */
@media (max-width: 640px) {
  #toast { left: 12px; right: 12px; bottom: calc(76px + env(safe-area-inset-bottom)); max-width: none; width: auto; transform: translateY(16px);
    border-radius: 16px; padding: 14px 16px; text-align: left; white-space: normal; text-transform: none; letter-spacing: 0;
    font: 600 14.5px/1.4 Archivo, 'Segoe UI', sans-serif; z-index: 30; }
  #toast.show { transform: translateY(0); }
}

/* ---- verfijning (skill emil-design-eng): snelle ease-out, beweging met een reden ----------------- */
:root { --ease-out: cubic-bezier(.23, 1, .32, 1); }
/* knoppen geven meteen gevoel bij indrukken, ook met een muis */
.btn, .sync, .icon-btn, .choice, .conn, .seg button, .nav button, .tile { transition: transform 160ms var(--ease-out); }
.btn:active, .sync:active, .icon-btn:active, .choice:active, .conn:active, .seg button:active, .nav button:active, .tile:active { transform: scale(.97); }
/* melding: komt snel binnen, gaat nog sneller weg */
#toast { transition: opacity 180ms ease, transform 180ms ease; }
#toast.show { transition: opacity 250ms var(--ease-out), transform 300ms var(--ease-out); }
/* schakelaar volgt je vinger */
.knob, .knob::after { transition-duration: 200ms; transition-timing-function: var(--ease-out); }
/* vergrote kaart: zacht openen vanuit iets kleiner, nooit uit het niets */
.zoom { transition: opacity 200ms var(--ease-out); flex-direction: column; gap: 16px; }
.zoom img { transition: transform 240ms var(--ease-out), opacity 240ms var(--ease-out); }
@starting-style { .zoom { opacity: 0; } .zoom img { opacity: 0; transform: scale(.95); } }
.zoom-share { position: fixed; bottom: calc(24px + env(safe-area-inset-bottom)); left: 50%; translate: -50% 0; }
/* kopje Herstel blijft op één regel */
.garmin-head .label, .garmin-head .link-btn { white-space: nowrap; }
/* menu-icoontjes enkel in de onderbalk op de gsm */
.nav-ic { display: none; }
@media (max-width: 640px) {
  .zoom img { max-height: 78vh; }
  .nav { padding-top: 6px; }
  .nav button { display: grid; justify-items: center; gap: 4px; padding: 7px 2px 6px; border-radius: 12px; color: var(--muted);
    font: 600 10.5px/1 Archivo, 'Segoe UI', sans-serif; letter-spacing: 0; text-transform: none; }
  .nav button.on { background: var(--panel); color: var(--fg); }
  .nav-ic { display: block; width: 23px; height: 23px; }
  /* training: de kaart meteen onder de cijfers */
  .run-grid { display: flex; flex-direction: column; align-items: stretch; gap: 12px; }
  .run-grid > .col { display: contents; }
  .run-grid > .col > * { order: 3; }
  .run-grid .rhead, .run-grid .stats { order: 1; }
  .run-grid .rcard { order: 2; }
}
/* minder beweging als je dat op je toestel vraagt: enkel nog vervagen */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-property: opacity, color, background-color, border-color !important; scroll-behavior: auto !important; }
  .btn:active, .sync:active, .icon-btn:active, .choice:active, .conn:active, .seg button:active, .nav button:active, .tile:active { transform: none; }
}

/* ---- Gezondheid per dag ---------------------------------------------------------------- */
.daynav { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 4px 0 12px; }
.daynav .icon-btn { width: 44px; height: 44px; flex: none; border: 0; background: color-mix(in srgb, var(--fg) 7%, transparent); }
.daynav .icon-btn svg { width: 20px; height: 20px; }
.daynav .icon-btn[disabled] { opacity: .25; cursor: default; }
.dn-mid { text-align: center; min-width: 0; }
.dn-pick { position: relative; cursor: pointer; padding: 2px 10px; border-radius: 12px; transition: background-color .15s var(--ease-out); }
.dn-pick input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; opacity: 0; cursor: pointer; }
.dn-cal { display: inline-flex; vertical-align: middle; margin-left: 4px; color: var(--muted); }
.dn-cal svg { width: 16px; height: 16px; }
.dn-stale { margin: -2px 2px 10px; }
@media (hover: hover) and (pointer: fine) { .dn-pick:hover { background: var(--hover, rgba(127,127,127,.08)); } }
.dn-date { font: 800 22px/1.2 Archivo, sans-serif; font-stretch: 112%; margin-top: 2px; }
.dstrip { display: flex; gap: 6px; overflow-x: auto; padding: 2px 2px 12px; margin-bottom: 8px; scrollbar-width: none; overscroll-behavior-x: contain; }
.dstrip::-webkit-scrollbar { display: none; }
.dchip { all: unset; cursor: pointer; flex: none; width: 44px; display: grid; justify-items: center; gap: 2px; padding: 7px 0 8px; border-radius: 12px;
  color: var(--muted); font: 600 10px var(--mono); letter-spacing: .04em; text-transform: uppercase; transition: background-color .15s var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .dchip:not(.on):hover { background: color-mix(in srgb, var(--fg) 7%, transparent); } }
.dchip b { font: 800 16px Archivo, sans-serif; color: var(--fg); letter-spacing: 0; }
.dchip .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--c-sleep); display: block; }
.dchip.on { background: var(--fg); border-color: var(--fg); color: var(--bg); }
.dchip.on b { color: var(--bg); }
.mtiles.health.day { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.mtiles.health.day .mtile.wide { grid-column: span 2; }
.mtiles.health.day .mtile { border-color: transparent; }
.mtile .muted.small:empty { display: none; }
.icon-btn.busy svg { animation: spin .9s linear infinite; }
.big-sub { font: 700 18px Archivo, sans-serif; color: var(--soft); margin-left: 8px; }
.stages { display: flex; gap: 2px; height: 12px; border-radius: 6px; overflow: hidden; margin: 10px 0 8px; }
.stages i { display: block; min-width: 3px; }
.stage-leg { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12px; color: var(--soft); margin-bottom: 4px; }
.stage-leg span { display: inline-flex; align-items: center; gap: 5px; }
.stage-leg i { width: 8px; height: 8px; border-radius: 2px; display: block; }
.dayview .hrow { cursor: pointer; }
@media (max-width: 640px) {
  .mtiles.health.day { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dn-date { font-size: 19px; }
  .seg button { padding: 8px 9px; }
}

/* ---- Overzicht: alles in één blad ---------------------------------------------------- */
.ov { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.ov > .col { gap: 16px; }
.ov .panel { padding: 18px 20px; border-radius: 18px; }
.ov-h { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 12px; }
.ov-h .label, .ov-h .link-btn, .ov-h-v { white-space: nowrap; }
.ov-h-v { font: 600 12px var(--mono); color: var(--soft); letter-spacing: .04em; }
.ov .link-btn { padding: 4px 0; }
.ov-goal { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 18px; align-items: center; }
.ov-count { display: grid; justify-items: center; line-height: 1; }
.ov-count b { font: 850 58px/.85 Archivo; font-stretch: 125%; letter-spacing: -.04em; }
.ov-count span { margin-top: 6px; font: 600 10px var(--mono); letter-spacing: .24em; text-transform: uppercase; color: var(--soft); }
.ov-race { font: 800 22px/1.1 Archivo; font-stretch: 112%; margin: 4px 0 3px; }
.ov-prog { grid-column: 1 / -1; margin-top: 8px; }
.ov-prog .weekline { margin-top: 0; font-size: 14px; }
.ov-prog .bar { margin: 8px 0 0; height: 6px; }
.ov-next-main { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; }
.ov-t1 { font: 800 26px/1.08 Archivo; font-stretch: 112%; min-width: 0; }
.ov-km { font: 800 26px/1 Archivo; font-stretch: 112%; white-space: nowrap; }
.ov-km small, .ov-big small, .ov-stat-v small { font: 500 11px var(--mono); color: var(--muted); margin-left: 3px; }
.ov-pace { margin-top: 6px; font-weight: 600; color: var(--soft); }
.ov-struct { margin-top: 4px; }
.ov-how { margin-top: 12px; border-top: 1.5px solid var(--border); padding-top: 10px; }
.ov-how summary { cursor: pointer; list-style: none; font: 600 11px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); display: flex; justify-content: space-between; }
.ov-how summary::-webkit-details-marker { display: none; }
.ov-how summary::after { content: '+'; font-size: 14px; }
.ov-how[open] summary::after { content: '–'; }
.ov-how .how { margin-top: 10px; }
.ov-how p { margin: 10px 0 0; }
.ov-stats { all: unset; cursor: pointer; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; width: 100%; box-sizing: border-box; }
.ov-stat { min-width: 0; padding: 10px 10px 9px; border-radius: 12px; background: color-mix(in srgb, var(--c) 10%, var(--panel)); }
.ov-stat .label { font-size: 9.5px; letter-spacing: .08em; color: var(--soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ov-stat .mdot { width: 6px; height: 6px; margin-right: 5px; }
.ov-stat-v { font: 800 24px/1 Archivo; font-stretch: 112%; margin-top: 6px; white-space: nowrap; }
.ov-stat .small { margin-top: 3px; font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ov .rec-tip { margin-top: 12px; font-size: 14px; }
.ov-week .tiles { gap: 6px; }
.ov-week .tile { min-height: 92px; padding: 10px 7px; border-radius: 12px; }
.ov-week .tile .k { font-size: 18px; }
.ov-last-row { display: flex; gap: 14px; align-items: stretch; }
.ov-thumb { width: 86px; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 10px; border: 1.5px solid var(--border); background: var(--bg); cursor: zoom-in; flex: none; }
.ov-last-main { all: unset; cursor: pointer; display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; justify-content: center; }
.ov-t2 { font: 700 17px/1.2 Archivo; }
.ov-big { font: 800 30px/1 Archivo; font-stretch: 112%; margin: 4px 0 2px; }
.ov-last-main .link-btn { margin-top: 6px; }
.ov-last .perf-mini { margin-top: 12px; }
.ov-chart svg { display: block; }
@media (hover: hover) and (pointer: fine) {
  .ov .link-btn:hover, .ov-last-main:hover .link-btn { color: var(--fg); }
  .ov-stats:hover .ov-stat { background: color-mix(in srgb, var(--c) 15%, var(--panel)); }
}
@media (max-width: 900px) {
  .ov { display: flex; flex-direction: column; align-items: stretch; gap: 12px; }
  .ov > .col { display: contents; }
  .ov-goal { order: 1; } .ov-next { order: 2; } .ov .garmin, .ov .garmin-cta { order: 3; } .ov-week { order: 4; } .ov-last { order: 5; } .ov-chart { order: 6; }
}
@media (max-width: 640px) {
  .ov .panel { padding: 16px; border-radius: 16px; }
  .ov-count b { font-size: 48px; }
  .ov-race { font-size: 19px; }
  .ov-t1, .ov-km { font-size: 22px; }
  .ov-stats { gap: 6px; }
  .ov-stat { padding: 9px 7px 8px; }
  .ov-stat .label { letter-spacing: .03em; }
  .ov-stat .mdot { margin-right: 4px; }
  .ov-stat-v { font-size: 21px; }
  .ov-week .tile { min-height: 74px; padding: 8px 4px; }
  .ov-week .tile .k { font-size: 15px; }
}

/* ---- Instellingen (gsm): je computer bovenaan ----------------------------------------- */
.pc-card { display: grid; gap: 12px; }
.pc-card p { margin: 0; }
.pc-head { display: flex; align-items: center; gap: 12px; }
.pc-head .mark { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; background: #0A0A0A; color: #fff; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .16); flex: none; }
.pc-head .mark svg { width: 20px; height: 20px; display: block; }
.pc-head .v { font-weight: 700; font-size: 16px; }
.pc-state { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 13px; margin-top: 2px; }
.pc-state.on { color: var(--soft); }
.pc-state.on::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--good); flex: none; }
.pc-card .pair-form { margin: 0; }
.pc-card .input.code { font-size: 20px; padding-top: 12px; padding-bottom: 12px; }

/* ---- Trainingen: rustiger lijst (rustdagen op één dunne regel) ----------------------- */
.hrow.plan.rest { padding-top: 4px; padding-bottom: 4px; align-items: center; cursor: default; }
.hrow.plan.rest .d { display: flex; align-items: baseline; gap: 4px; white-space: nowrap; font-size: 9.5px; }
.hrow.plan.rest .d b { display: inline; font-size: 15px; color: var(--muted); }
.hrow.plan.rest .t { font-size: 13.5px; }
.wkb { margin-top: 26px; }
.focus { font-size: 13px; margin: 8px 0 6px; }
@media (max-width: 640px) {
  .hrow { padding-top: 11px; padding-bottom: 11px; }
  .hrow.plan.rest { padding-top: 3px; padding-bottom: 3px; }
  .hrow.plan.rest .d b { font-size: 13px; }
}