/* Rekoefeningen (web/rek.js): tegels op een kaart en het scherm Doe mee. Kleuren uit app.css.
   De clip heeft een vaste lichte achtergrond (#e4e9f1), ook in donkere modus: zo ziet de video er zelf uit. */
.rek { display: grid; gap: 10px; border-top: 1px solid var(--grid); padding-top: 12px; }
.rek-intro { font-size: 15px; max-width: 64ch; }
.rek-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; max-width: 440px; }
.rek-tile { display: grid; align-content: start; gap: 6px; padding: 0; border: 0; background: none; color: inherit; text-align: left; cursor: pointer; min-width: 0; font: inherit; }
.rek-tile:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 12px; }
.rek-clip { display: block; aspect-ratio: 1 / 1; width: 100%; max-width: 100%; border-radius: 10px; overflow: hidden; background: #e4e9f1; }
.rek-clip video { display: block; width: 100%; height: 100%; object-fit: cover; }
.rek-clip.mirror video { transform: scaleX(-1); }
.rek-cap { display: grid; line-height: 1.3; }
.rek-cap b { font-weight: 600; font-size: 14.5px; }
.rek-cap span { font-family: var(--f-mono); font-size: 11.5px; color: var(--muted); }
.rek-tile:hover .rek-cap b { color: var(--accent); }

/* klein: op een signaalkaart */
.rek-klein { border-top: 0; padding-top: 0; gap: 8px; }
.rek-klein .rek-intro { font-size: 14px; color: var(--muted); }
.rek-klein .rek-tiles { display: flex; flex-wrap: wrap; gap: 10px 14px; }
.rek-klein .rek-tile { grid-template-columns: 56px auto; align-items: center; gap: 8px; }
.rek-klein .rek-clip { width: 56px; border-radius: 8px; }
.rek-klein .rek-cap b { font-size: 13.5px; }

/* Doe mee */
dialog.rek-dlg { padding: 0; border: 0; background: transparent; color: var(--ink); width: min(440px, 100%); max-width: 100%;
  max-height: 100%; margin: auto; }
dialog.rek-dlg::backdrop { background: rgba(8, 11, 16, .5); }
.rek-sheet { background: var(--surface); border-radius: 16px; padding: 16px 16px calc(18px + env(safe-area-inset-bottom, 0px));
  display: grid; gap: 12px; max-height: 100dvh; overflow-y: auto; }
@media (max-width: 520px) {
  dialog.rek-dlg { margin: auto 0 0; width: 100%; }
  .rek-sheet { border-radius: 16px 16px 0 0; }
}
.rek-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.rek-clip.big { max-width: 280px; justify-self: center; border-radius: 12px; }
.rek-head { display: flex; align-items: baseline; justify-content: space-between; gap: 4px 12px; flex-wrap: wrap; }
.rek-head h2 { font-size: 30px; text-transform: none; letter-spacing: 0; }
.rek-dose { font-family: var(--f-mono); font-size: 12.5px; color: var(--muted); }
.rek-count { display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: center; gap: 4px 14px; }
.rek-n { display: flex; align-items: baseline; gap: 2px; font-variant-numeric: tabular-nums; }
.rek-n .big { font-family: var(--f-display); font-weight: 700; font-size: 44px; line-height: 1; }
.rek-n .of { font-family: var(--f-mono); font-size: 13px; color: var(--muted); white-space: nowrap; }
.rek-ring { position: relative; width: 54px; height: 54px; display: grid; place-items: center; }
.rek-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.rek-ring circle { fill: none; stroke-width: 5; }
.rek-ring .track { stroke: var(--sunk); }
.rek-ring .bar { stroke: var(--accent-soft); stroke-linecap: round; transition: stroke-dashoffset .2s linear; }
.rek-ring[data-fase="vast"] .bar, .rek-ring[data-fase="klaar"] .bar { stroke: var(--accent); }
.rek-ring b { position: relative; font: 600 17px var(--f-mono); font-variant-numeric: tabular-nums; }
.rek-fase { font-size: 15.5px; font-weight: 500; min-width: 0; }
.rek-cues { margin: 0; padding-left: 1.3em; display: grid; gap: 4px; font-size: 14px; color: var(--muted); }
.rek-cues li::marker { font-family: var(--f-mono); color: var(--accent); }
@media (max-width: 380px) { .rek-count { grid-template-columns: auto auto; } .rek-fase { grid-column: 1 / -1; } }
@media (prefers-reduced-motion: reduce) { .rek-ring .bar { transition: none; } }