/* ── Cali ─────────────────────────────────────────────────────────────
   Rubbervloer met krijt: leisteen, krijtwit en één band-oranje voor de rust.
   Zie DESIGN.md. Componenten komen zoveel mogelijk uit /basis/basis.css.   */

:root {
  --font-body: 'Atkinson Hyperlegible Next', ui-sans-serif, system-ui, sans-serif;
  --font-display: 'Archivo', var(--font-body);

  --paper:        light-dark(#e8eae9, #1b2125);
  --paper-raised: light-dark(#f6f7f6, #242b30);
  --ink:          light-dark(#1a1f22, #ece9e2);
  --ink-soft:     light-dark(#4f585e, #a3abb0);
  --ink-faint:    light-dark(#7d868b, #6c767c);
  --line:         light-dark(rgba(26, 31, 34, 0.12), rgba(236, 233, 226, 0.1));
  --steel:        light-dark(#8e989e, #56626a);
  --accent:       light-dark(#b4460b, #ff7a2e);
  --accent-ink:   light-dark(#ffffff, #1b2125);
  --chalk:        light-dark(#1a1f22, #ece9e2);
}

/* Leesbare tekst gebruikt --ink of --ink-soft; --ink-faint haalt in beide thema's
   geen 4,5:1 en blijft daarom voor hulplijnen en niet-essentiële decoratie. */

:root { --page-max: 44rem; --tabs-hoogte: 3.5rem; }
body.in-sessie { --page-max: 64rem; }

[hidden] { display: none !important; }

.getal {
  font-family: var(--font-display);
  font-stretch: 75%;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

.brand { font-family: var(--font-display); font-weight: 800; font-stretch: 75%; font-size: var(--text-xl); }

.page { padding-bottom: calc(var(--space-8) + var(--tabs-hoogte) + env(safe-area-inset-bottom)); }
.in-sessie .topbar, .in-sessie .footer, .in-sessie .tabs { display: none; }
.in-sessie .page { padding-top: max(var(--space-3), env(safe-area-inset-top)); padding-bottom: var(--space-6); }
.footer { margin-top: var(--space-7); }

.topbar { margin-bottom: var(--space-5); }

/* ── Tabbalk ── */
.tabs {
  position: fixed; inset: auto 0 0 0; z-index: 5;
  display: grid; grid-template-columns: repeat(3, 1fr);
  /* Breed: de tabs blijven boven de kolom van de inhoud staan. */
  padding-inline: max(0px, (100% - var(--page-max)) / 2);
  padding-bottom: env(safe-area-inset-bottom);
  background: var(--paper);
  border-top: 1px solid var(--line);
}
.tabs a {
  display: grid; place-items: center; min-height: var(--tabs-hoogte);
  color: var(--ink-soft); font-weight: 600; text-decoration: none;
  position: relative; -webkit-tap-highlight-color: transparent;
}
.tabs a[aria-current='page'] { color: var(--ink); }
.tabs a[aria-current='page']::before {
  content: ''; position: absolute; top: -1px; left: 30%; right: 30%; height: 3px; background: var(--ink); border-radius: 0 0 3px 3px;
}

/* ── Melding-onderdelen ── */
.status {
  position: sticky; top: 0; z-index: 6; width: fit-content; margin: 0 auto var(--space-3);
  padding: var(--space-1) var(--space-4); border-radius: 999px; font-size: var(--text-sm); font-weight: 600;
  background: var(--paper-raised); color: var(--ink); border: 1px solid var(--line);
}
.denied { padding: var(--space-5) 0; font-size: var(--text-lg); }
.fout__kop, .schermkop { font-size: var(--text-2xl); font-weight: 800; }
.sectiekop { font-size: var(--text-xl); font-weight: 700; }
.melding { padding-left: var(--space-3); border-left: 3px solid var(--ink-soft); }
.label {
  display: inline-block; margin-left: var(--space-2); padding: 0 var(--space-2); border: 1px solid var(--ink-soft);
  border-radius: 999px; font-size: var(--text-xs); color: var(--ink-soft); line-height: 1.5;
}
.label--record { color: var(--ink); border-color: var(--ink); }
.empty { text-align: left; padding: var(--space-6) 0; }
.empty .button, .fout .button { width: fit-content; }
.button--stevig { background: var(--ink); color: var(--paper); }
@media (hover: hover) { .button--stevig:hover { background: color-mix(in srgb, var(--ink) 85%, var(--paper)); } }
.button--danger-tekst { color: var(--danger); }
.button { min-height: 2.75rem; }
.knop-groot { width: 100%; min-height: 4rem; font-size: 1.25rem; }
.button--quiet.knop-groot { border-color: var(--ink-soft); }
.toast__actie { margin-left: var(--space-3); border: 0; background: none; color: inherit; font-weight: 700; text-decoration: underline; cursor: pointer; min-height: 2rem; padding: 0 var(--space-1); }

.dialog { border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper-raised); color: var(--ink); padding: var(--space-5); max-width: min(24rem, calc(100% - 2rem)); }
.dialog::backdrop { background: rgb(0 0 0 / 0.5); }
.dialog__tekst { font-size: var(--text-lg); margin-bottom: var(--space-5); }

/* ── Vandaag ── */
.dagkop { font-size: var(--text-3xl); font-weight: 800; letter-spacing: -0.03em; }
.vandaag__acties { flex-wrap: wrap; }
.vandaag__acties .knop-groot { flex: 1 1 100%; }
.voorschriften { list-style: none; margin: var(--space-4) 0 0; padding: 0; }
.voorschrift { display: flex; justify-content: space-between; gap: var(--space-4); padding: var(--space-3) 0; border-top: 1px solid var(--line); }
.voorschrift__naam { font-weight: 600; }
.voorschrift__doel { color: var(--ink-soft); text-align: right; font-variant-numeric: tabular-nums; }
.kiezer { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); }
.kiezer .input { min-height: 3rem; }

/* ── Sessie ── */
.sessie__top {
  position: sticky; top: 0; z-index: 4; display: grid; grid-template-columns: var(--tap) 1fr auto var(--tap); align-items: center; gap: var(--space-2);
  padding-block: var(--space-1); background: var(--paper);
}
.teller { color: var(--ink-soft); font-size: var(--text-md); }
.balk { display: flex; gap: 4px; }
.balk__seg { flex: 1; min-height: var(--tap); padding: 0; border: 0; background: none; cursor: pointer; position: relative; -webkit-tap-highlight-color: transparent; }
.balk__seg::before {
  content: ''; position: absolute; inset: 50% 0 auto 0; height: 5px; margin-top: -2.5px; border-radius: 3px;
  background: color-mix(in srgb, var(--ink) 22%, transparent);
}
.balk__seg.is-gevuld::before { background: var(--ink-soft); }
.balk__seg.is-actief::before { background: var(--accent); height: 8px; margin-top: -4px; }
.menu { position: absolute; right: 0; z-index: 5; width: min(20rem, 100%); padding: var(--space-3); display: grid; gap: var(--space-2); border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper-raised); }
.sessie { position: relative; }
.menu__item { display: flex; align-items: center; min-height: var(--tap); padding: 0 var(--space-3); border: 0; border-radius: var(--radius-sm); background: none; color: var(--ink); font-weight: 600; text-decoration: none; cursor: pointer; text-align: left; }
@media (hover: hover) { .menu__item:hover { background: var(--accent-soft); } }

.sessie__inhoud { padding-top: var(--space-4); }
.oefening {
  display: grid; gap: var(--space-5); touch-action: pan-y;
  grid-template-areas: 'kop' 'vorige' 'invoer' 'sets' 'vorm' 'variant' 'nav';
}
.oefening__naam { font-size: var(--text-2xl); font-weight: 800; letter-spacing: -0.02em; }
.oefening__voorschrift { margin-top: var(--space-1); font-size: var(--text-lg); color: var(--ink-soft); }
@media (min-width: 56rem) {
  .oefening {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--space-8); align-items: start;
    grid-template-areas: 'kop kop' 'invoer vorige' 'sets vorm' 'sets variant' 'nav nav';
  }
}
.oefening [style*='grid-area: vorm']:empty { display: none; }

.stand { font-size: var(--text-lg); color: var(--ink-soft); }
.stand .getal { color: var(--ink); font-size: var(--text-2xl); }
.invoerblok { --stack: var(--space-3); }
.stepper { display: grid; grid-template-columns: 4rem minmax(0, 1fr) 4rem; align-items: center; gap: var(--space-2); }
.stepper__knop {
  display: grid; place-items: center; width: 4rem; height: 4rem; padding: 0; border-radius: 50%; cursor: pointer;
  border: 2px solid var(--ink-soft); background: var(--paper-raised); color: var(--ink); -webkit-tap-highlight-color: transparent;
}
.stepper__knop svg { width: 1.5rem; height: 1.5rem; }
.stepper__knop:active { background: var(--accent-soft); }
.stepper__getal {
  width: 100%; min-width: 0; padding: 0; border: 0; border-bottom: 2px solid var(--line); border-radius: 0; background: transparent;
  text-align: center; font-size: clamp(5rem, 30vw, 8rem); line-height: 1.1; color: var(--ink);
}
.stepper__getal:focus-visible { outline: none; border-bottom-color: var(--accent); }
.eenheid { text-align: center; margin-top: calc(-1 * var(--space-2)); }

.chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.chip {
  display: inline-flex; align-items: baseline; gap: var(--space-2); min-height: var(--tap); padding: 0 var(--space-4);
  border: 1px solid var(--line); border-radius: 999px; background: var(--paper-raised); color: var(--ink); cursor: pointer; align-items: center;
}
.chip__nr { font-size: var(--text-sm); color: var(--ink-soft); }
.chip__waarde { font-size: var(--text-xl); }
.chip.is-bewerk { border: 2px solid var(--accent); }
.chip--toevoegen { color: var(--ink-soft); font-weight: 600; border-style: dashed; border-color: var(--ink-soft); background: none; }
.schatting { color: var(--ink-soft); font-weight: 400; margin-right: 2px; }

.vorige { display: flex; justify-content: space-between; align-items: end; gap: var(--space-4); }
.vorige__sets { font-size: var(--text-2xl); line-height: 1.15; }
.vorige__datum { font-size: var(--text-sm); }
.mini { flex: none; overflow: visible; }
.mini__lijn { fill: none; stroke: var(--ink-soft); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.mini__stip { fill: var(--ink); }

.uitklap { border-top: 1px solid var(--line); padding-top: var(--space-3); }
.uitklap summary { min-height: var(--tap); display: flex; align-items: center; cursor: pointer; font-weight: 600; }
.uitklap[open] summary { margin-bottom: var(--space-2); }
.vormpunten { margin: 0 0 var(--space-3); padding-left: 1.2em; display: grid; gap: var(--space-2); }

.sessie__nav { justify-content: space-between; padding-top: var(--space-2); }
.sessie__nav .button { flex: 1; }

/* Rust en hold: de ring neemt de plek van het invoergetal in. */
.rustblok { align-items: center; text-align: center; --stack: var(--space-4); }
.rustblok > .button { width: 100%; }
.rustblok__knoppen { width: 100%; }
.rustblok__knoppen .button { flex: 1; min-height: 3.5rem; font-size: var(--text-lg); }

.ring-wrap { position: relative; width: min(80vw, 320px); aspect-ratio: 1; margin-inline: auto; container-type: inline-size; }
.ring { width: 100%; height: 100%; overflow: visible; }
.ring circle { fill: none; }
.ring__spoor { stroke: var(--steel); stroke-width: 12; opacity: 0.55; }
.ring__spoor--extra { stroke-width: 3; }
.ring__boog { stroke-width: 12; stroke-linecap: butt; }
.ring__boog--rust { stroke: var(--accent); }
.ring__boog--hold { stroke: var(--chalk); }
.ring__extra { stroke: var(--chalk); stroke-width: 3; opacity: 0; }
.ring__tijd {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-family: var(--font-display); font-stretch: 75%; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1;
  font-size: 22vw; font-size: 30cqw;
}

/* ── Logboek ── */
.logboek { list-style: none; margin: 0; padding: 0; }
.logrij {
  display: grid; grid-template-columns: 1fr auto; column-gap: var(--space-4); min-height: 4rem; padding: var(--space-3) 0;
  color: var(--ink); text-decoration: none; border-top: 1px solid var(--line);
}
.logrij__datum { font-weight: 700; font-size: var(--text-lg); }
.logrij__dag { grid-column: 1; }
.logrij__status { grid-row: 1 / span 2; grid-column: 2; align-self: center; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.logrij__status.is-open { color: var(--ink); font-weight: 700; }
.logoefening { padding-top: var(--space-4); border-top: 1px solid var(--line); }
.logoefening h3 { font-size: var(--text-lg); }
.twee { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.editor { flex-wrap: wrap; }
.editor__veld { width: 6rem; text-align: center; font-size: 1.25rem; font-weight: 800; }

/* ── Voortgang ── */
.record { font-size: var(--text-lg); }
.record .getal { font-size: var(--text-xl); }
.grafiek, .staven { width: 100%; max-width: 36rem; height: auto; overflow: visible; }
.grafiek path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.grafiek__totaal { stroke: var(--ink); stroke-width: 2.5; }
.grafiek__beste { stroke: var(--ink-soft); stroke-width: 2; stroke-dasharray: 5 4; }
.grafiek__totaal-stip { fill: var(--ink); }
.grafiek__beste-stip { fill: var(--ink-soft); }
.grafiek__level { stroke: var(--steel); stroke-width: 1; }
.grafiek text { font-family: var(--font-display); }
.grafiek__waarde { font-size: 13px; font-weight: 700; fill: var(--ink); font-variant-numeric: tabular-nums; }
.grafiek__klein { font-size: 11px; fill: var(--ink-soft); }
.legenda { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); font-size: var(--text-sm); }
.legenda__item::before { content: ''; display: inline-block; width: 1.5rem; margin-right: var(--space-2); vertical-align: middle; border-top: 2.5px solid var(--ink); }
.legenda__item--beste::before { border-top: 2px dashed var(--ink-soft); }
.staaf { fill: var(--ink-soft); }
.staaf--nu { fill: var(--accent); }
.staaf-spoor { fill: var(--steel); opacity: 0.5; }
.kalender { display: grid; grid-auto-flow: column; grid-template-rows: repeat(7, auto); grid-template-columns: repeat(var(--kolommen), 1fr); gap: 3px; max-width: 28rem; }
.kalender__dag { aspect-ratio: 1; border-radius: 3px; background: color-mix(in srgb, var(--steel) 28%, transparent); }
.kalender__dag.is-gedaan { background: var(--accent); }
.kalender__dag.is-toekomst { background: none; }
.levels { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); }
.level__balk { height: 6px; margin-top: var(--space-2); border-radius: 3px; background: color-mix(in srgb, var(--steel) 28%, transparent); overflow: hidden; }
.level__balk span { display: block; height: 100%; background: var(--ink-soft); }

@media (prefers-reduced-motion: reduce) { .skeleton { animation: none; } }

/* Doelen, datums en grafieklabels in Archivo: de doorgestreepte nul van Atkinson
   maakt rijen getallen onrustig. */
.voorschrift__doel,
.oefening__voorschrift,
.vorige__datum {
  font-family: var(--font-display);
  font-variant-numeric: tabular-nums;
}