/* Respi — licht en rustig, schreefloos, telefoon eerst. */
:root {
  --achter: #f3f6f8;
  --vlak: #ffffff;
  --lijn: #dde4ea;
  --tekst: #1c2833;
  --zacht: #5a6877;
  --merk: #24577f;          /* praktijkblauw */
  --merk-zacht: #e3edf5;
  --hart: #a5463b;          /* warm baksteenrood voor hartslag */
  --hart-zacht: #f6e7e4;
  --accent: var(--merk);
  --accent-zacht: var(--merk-zacht);
  --binnen: #2c7650; --binnen-zacht: #e4f1e9;
  --rand: #8f6410;   --rand-zacht: #faf0d9;
  --buiten: #a2392f; --buiten-zacht: #f8e3df;
  --schaduw: 0 1px 2px rgba(20, 40, 60, .06), 0 4px 16px rgba(20, 40, 60, .06);
  --knop: min(62vw, 250px);
  color-scheme: light;
}
[data-soort="hart"] { --accent: var(--hart); --accent-zacht: var(--hart-zacht); }

[data-thema="nacht"] {
  --achter: #0c1117; --vlak: #141b23; --lijn: #24303c; --tekst: #c9d4de; --zacht: #8494a3;
  --merk: #5d8fb8; --merk-zacht: #1b2a38; --hart: #c0766b; --hart-zacht: #2c1d1c;
  --binnen: #6fb48d; --binnen-zacht: #142a1e; --rand: #d1a650; --rand-zacht: #2b2312;
  --buiten: #d9887d; --buiten-zacht: #2e1917;
  --schaduw: none;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--achter); color: var(--tekst); }
body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-weight: 400; line-height: 1.45; -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}
button, select, input { font: inherit; color: inherit; }
button { cursor: pointer; }
.verborgen { position: absolute; width: 0; height: 0; overflow: hidden; }
[hidden] { display: none !important; }

.app {
  max-width: 480px; margin: 0 auto; min-height: 100dvh;
  padding: max(10px, env(safe-area-inset-top)) 16px max(14px, env(safe-area-inset-bottom));
  display: flex; flex-direction: column;
}
main, .links, .rechts { display: flex; flex-direction: column; gap: 12px; }
main { flex: 1; }

.kop { display: flex; align-items: center; justify-content: space-between; padding: 4px 0 10px; }
.merk { display: flex; align-items: center; gap: 9px; font-weight: 600; font-size: 18px; letter-spacing: .2px; color: var(--merk); }
.merkteken {
  width: 26px; height: 26px; border-radius: 8px; background: var(--merk);
  -webkit-mask: url(/icons/merk-masker.svg) center / contain no-repeat; mask: url(/icons/merk-masker.svg) center / contain no-repeat;
}
.kopknoppen { display: flex; gap: 6px; }
.rond {
  width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--lijn); background: var(--vlak);
  display: inline-flex; align-items: center; justify-content: center; color: var(--zacht); padding: 0;
}
.rond svg { width: 21px; height: 21px; }
.rond[aria-pressed="true"] { color: var(--merk); border-color: var(--merk); }
#knopGeluid[aria-pressed="true"] .streep { display: none; }
#knopGeluid[aria-pressed="false"] .golf { display: none; }

.schakel {
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; padding: 4px;
  background: var(--vlak); border: 1px solid var(--lijn); border-radius: 14px;
}
.schakel button {
  border: 0; background: transparent; border-radius: 10px; padding: 10px 6px; font-weight: 500; color: var(--zacht);
  min-height: 44px;
}
.schakel button[aria-checked="true"] { background: var(--accent); color: #fff; }
[data-thema="nacht"] .schakel button[aria-checked="true"] { color: #0c1117; }
.schakel.klein button { padding: 8px 4px; min-height: 40px; font-size: 15px; }

.vak.keuze { position: relative; border-color: color-mix(in srgb, var(--accent) 45%, var(--lijn)); cursor: pointer; }
.vak.keuze .l { color: var(--accent); font-weight: 500; }
.vak.keuze .l::after { content: " ▾"; font-size: 11px; }
.vak.keuze select {
  position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; border: 0; font-size: 16px;
}
.vak.keuze:focus-within { outline: 3px solid color-mix(in srgb, var(--accent) 40%, transparent); outline-offset: 2px; }
.vak.keuze select option { color: #1c2833; background: #fff; }

.meter {
  background: var(--vlak); border: 1px solid var(--lijn); border-radius: 18px; box-shadow: var(--schaduw);
  padding: 14px 16px 12px; text-align: center; transition: background-color .4s, border-color .4s; position: relative;
}
.opnieuwklein { position: absolute; top: 10px; right: 10px; width: 40px; height: 40px; }
.getal {
  font-size: clamp(72px, 24vw, 112px); line-height: 1; font-weight: 500; letter-spacing: -2px;
  font-variant-numeric: tabular-nums; color: var(--tekst); min-height: 1em;
}
.getal.voorlopig { color: var(--zacht); }
.eenheid { color: var(--zacht); font-size: 15px; margin-top: 4px; }
.oordeel { min-height: 22px; margin-top: 6px; font-size: 15px; font-weight: 500; }
.meter[data-oordeel="binnen"] { background: var(--binnen-zacht); border-color: color-mix(in srgb, var(--binnen) 30%, transparent); }
.meter[data-oordeel="rand"]   { background: var(--rand-zacht);   border-color: color-mix(in srgb, var(--rand) 30%, transparent); }
.meter[data-oordeel="buiten"] { background: var(--buiten-zacht); border-color: color-mix(in srgb, var(--buiten) 30%, transparent); }
.meter[data-oordeel="binnen"] .oordeel { color: var(--binnen); }
.meter[data-oordeel="rand"] .oordeel { color: var(--rand); }
.meter[data-oordeel="buiten"] .oordeel { color: var(--buiten); }
.balk { height: 4px; border-radius: 2px; background: var(--lijn); margin: 10px 8px 8px; overflow: hidden; }
.balk div { height: 100%; width: 0; background: var(--accent); transition: width .2s linear; }
.status { color: var(--zacht); font-size: 15px; min-height: 22px; }

.cijfers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.vak {
  background: var(--vlak); border: 1px solid var(--lijn); border-radius: 12px; padding: 8px 6px;
  display: flex; flex-direction: column; align-items: center; gap: 1px; min-width: 0;
}
.vak .w { font-weight: 500; font-size: 17px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.vak .l { color: var(--zacht); font-size: 12.5px; }
.vak.uit { opacity: .45; }

.duren { display: flex; gap: 8px; justify-content: center; }
.duren button {
  border: 1px solid var(--lijn); background: var(--vlak); border-radius: 999px; padding: 7px 16px; min-height: 40px;
  font-weight: 500; color: var(--zacht);
}
.duren button[aria-checked="true"] { border-color: var(--accent); color: var(--accent); background: var(--accent-zacht); }

.knopvak {
  position: relative; width: var(--knop); height: var(--knop); margin: 8px auto 2px; flex-shrink: 0;
}
.ring { position: absolute; inset: -9px; width: calc(100% + 18px); height: calc(100% + 18px); transform: rotate(-90deg); }
.ringbaan { fill: none; stroke: var(--lijn); stroke-width: 2.2; }
.ringvoortgang { fill: none; stroke: var(--accent); stroke-width: 2.6; stroke-linecap: round; stroke-dasharray: 295.31; stroke-dashoffset: 295.31; }
.tikknop {
  position: absolute; inset: 0; border-radius: 50%; border: 0; background: var(--accent); color: #fff;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  box-shadow: 0 6px 22px color-mix(in srgb, var(--accent) 35%, transparent);
  touch-action: manipulation; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  transition: transform .08s ease, background-color .3s, opacity .3s;
}
.tikknop:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 45%, transparent); outline-offset: 5px; }
.tikknop.puls { transform: scale(.955); }
.tikknop.ingedrukt { transform: scale(.94); background: color-mix(in srgb, var(--accent) 82%, #000); }
.tikknop.rust { background: var(--vlak); color: var(--accent); border: 2px solid var(--accent); box-shadow: none; }
.tikknop[disabled] { opacity: .45; cursor: default; }
.tikicoon { width: 34%; height: 34%; }
.tiktekst { font-size: 17px; font-weight: 500; max-width: 80%; text-align: center; line-height: 1.25; }
[data-thema="nacht"] .tikknop { color: #0c1117; box-shadow: none; }
[data-thema="nacht"] .tikknop.rust { color: var(--accent); }

.telvak { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.tellabel { color: var(--zacht); font-size: 14px; }
.teller { display: flex; align-items: center; gap: 12px; }
.teller input {
  width: 96px; text-align: center; font-size: 26px; font-weight: 500; padding: 6px; border-radius: 12px;
  border: 1px solid var(--lijn); background: var(--vlak); font-variant-numeric: tabular-nums;
}
.rond.groot { width: 48px; height: 48px; font-size: 24px; color: var(--tekst); }

.voet { text-align: center; color: var(--zacht); font-size: 12.5px; margin: 2px 0 0; }

dialog {
  width: min(640px, 100vw); max-height: 100dvh; margin: auto; padding: 0; border: 0; border-radius: 18px;
  background: var(--vlak); color: var(--tekst);
}
dialog::backdrop { background: rgba(10, 20, 30, .45); }
.infokop {
  display: flex; align-items: center; justify-content: space-between; padding: 14px 16px 8px;
  position: sticky; top: 0; background: var(--vlak); border-bottom: 1px solid var(--lijn);
}
.infokop h2 { margin: 0; font-size: 19px; font-weight: 600; color: var(--merk); }
.infotekst { padding: 4px 18px 18px; font-size: 15px; }
.infotekst h3 { font-size: 16px; font-weight: 600; margin: 18px 0 6px; color: var(--merk); }
.infotekst p, .infotekst li { margin: 6px 0; }
.infotekst ul { padding-left: 20px; }
.infotekst b { font-weight: 600; }
.nadruk { background: var(--merk-zacht); border-radius: 12px; padding: 10px 12px; }
.klein { font-size: 12.5px; color: var(--zacht); }
.tabelvak { overflow-x: auto; margin: 8px 0; }
table { border-collapse: collapse; font-size: 13.5px; width: 100%; font-variant-numeric: tabular-nums; }
th, td { padding: 5px 6px; border-bottom: 1px solid var(--lijn); text-align: left; white-space: nowrap; }
th { font-weight: 600; color: var(--zacht); }
tr.huidig td { font-weight: 600; color: var(--accent); }

@media (max-width: 380px) {
  .app { padding-left: 12px; padding-right: 12px; }
  main { gap: 10px; }
  .vak .l { font-size: 11.5px; }
}
@media (max-height: 860px) and (max-width: 600px) {
  :root { --knop: min(56vw, 210px); }
  main { gap: 9px; }
  .kop { padding-bottom: 6px; }
  .getal { font-size: clamp(60px, 20vw, 96px); }
  .meter { padding: 10px 14px 8px; }
  .balk { margin: 8px 8px 6px; }
  .schakel button { min-height: 40px; padding: 8px 6px; }
  .vak { padding: 6px; }
  .knopvak { margin-top: 12px; }
}
@media (max-height: 700px) and (max-width: 600px) {
  :root { --knop: min(48vw, 180px); }
  .getal { font-size: clamp(54px, 17vw, 84px); }
}
@media (min-width: 900px) {
  .app { max-width: 920px; padding-top: 28px; }
  main { display: grid; grid-template-columns: minmax(0, 1fr) 380px; column-gap: 40px; align-items: center; flex: 0; margin: auto 0; }
  .rechts { align-items: center; }
  :root { --knop: 270px; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}