/* =========================================================================
   Gym 74 — designsysteem
   Donkere, premium uitstraling: bijna zwart oppervlak, één warm accent,
   kaarten met zachte randen, uppercase koppen met ruime letterafstand en een
   vaste tabbalk onderin. Alle kleuren staan als variabele bovenaan, zodat het
   accent in één plek te wisselen is.
   ========================================================================= */

:root {
  /* Oppervlakken — bijna zwart, met een paar stappen hoogte. */
  --bg: #0a0a0c;
  --bg-deep: #060607;
  --surface: #131317;
  --surface-hi: #1a1a20;
  --line: rgb(255 255 255 / 8%);
  --line-strong: rgb(255 255 255 / 16%);

  /* Tekst */
  --text: #f4f4f7;
  --muted: #9b9ba7;
  --muted-dim: #6f6f7c;

  /* Accent — warm goud. Eén kleur draagt de hele app: knoppen, actieve tab,
     kerncijfers. Wissel deze drie waarden om de app een andere kleur te geven. */
  --accent: #d9a441;
  --accent-hi: #f3d489;
  --accent-ink: #17120a;
  --accent-glow: rgb(217 164 65 / 18%);
  --accent-line: rgb(217 164 65 / 35%);
  --accent-grad: linear-gradient(135deg, var(--accent-hi), var(--accent));

  /* Status */
  --success: #4ade80;
  --success-bg: rgb(74 222 128 / 12%);
  --error: #f87171;
  --error-bg: rgb(248 113 113 / 12%);

  /* Vorm */
  --radius: 16px;
  --radius-sm: 10px;
  --radius-pill: 999px;
  --tabbar-h: 4.5rem;

  --shadow: 0 8px 28px rgb(0 0 0 / 45%);
}

* {
  box-sizing: border-box;
}

/* Een klassenselector met `display` is specifieker dan de browserregel voor
   [hidden]; zonder deze regel blijven verborgen elementen zichtbaar. */
[hidden] {
  display: none !important;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--text);
  background:
    radial-gradient(120% 60% at 50% 0%, rgb(217 164 65 / 6%), transparent 60%),
    var(--bg);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* --- Appbalk boven ------------------------------------------------------ */

.appbar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  height: 3.5rem;
  padding: 0 1rem;
  background: rgb(10 10 12 / 82%);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 800;
  font-size: 1rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  background: var(--accent-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Het beeldmerk draagt zijn eigen goudverloop; het hoeft geen kleur van de
   tekst te erven. Ruim groter dan de letters: het logo heeft een vierkant
   kader met lucht eromheen, dus op tekstgrootte valt de "74" weg. */
.brand img {
  width: 2rem;
  height: 2rem;
  display: block;
  flex: 0 0 auto;
}

.appbar-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--muted);
  text-decoration: none;
}

.appbar-action svg {
  width: 1.1rem;
  height: 1.1rem;
  stroke: currentcolor;
  fill: none;
  stroke-width: 1.8;
}

/* --- Pagina ------------------------------------------------------------- */

.page {
  max-width: 30rem;
  margin: 0 auto;
  padding: 1.5rem 1rem calc(var(--tabbar-h) + 2rem);
}

.page--wide {
  max-width: 44rem;
}

/* Zonder tabbalk (inlogschermen) is die onderruimte niet nodig. */
body:not(.has-tabbar) .page {
  padding-bottom: 3rem;
}

header.bar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.35rem;
}

/* Bovenschrift boven de kop in plaats van een link ernaast. */
header.bar--stacked {
  display: block;
  margin-bottom: 0.5rem;
}

h1 {
  font-size: 1.65rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  margin: 0;
  line-height: 1.15;
}

h2 {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0 0 0.85rem;
}

h3 {
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 1.1rem 0 0.4rem;
}

.subtitle {
  color: var(--muted);
  margin: 0 0 1.5rem;
  font-size: 0.92rem;
}

/* Klein bovenschrift boven een kop. */
.eyebrow {
  display: block;
  color: var(--muted-dim);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 0.3rem;
}

/* --- Kaarten ------------------------------------------------------------ */

.card {
  position: relative;
  background: linear-gradient(180deg, var(--surface-hi), var(--surface));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.15rem;
  margin-bottom: 1rem;
}

/* Kaart die om aandacht vraagt: lopende sessie, records. */
.card--accent {
  border-color: var(--accent-line);
  background:
    linear-gradient(180deg, rgb(217 164 65 / 10%), transparent 55%),
    linear-gradient(180deg, var(--surface-hi), var(--surface));
  box-shadow: 0 0 0 1px rgb(217 164 65 / 8%), var(--shadow);
}

/* --- Knoppen ------------------------------------------------------------ */

button,
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  width: 100%;
  padding: 0.85rem 1.1rem;
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--accent-ink);
  background: var(--accent-grad);
  border: 0;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: filter 0.15s ease, transform 0.06s ease;
}

button:hover,
.btn:hover {
  filter: brightness(1.08);
}

button:active,
.btn:active {
  transform: translateY(1px);
}

button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  filter: none;
}

/* Terughoudende variant: rand in plaats van vlak. */
button.secondary,
.btn--ghost {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--line-strong);
}

button.secondary:hover {
  background: var(--surface-hi);
  filter: none;
}

button.inline {
  width: auto;
  padding: 0.42rem 0.8rem;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
}

/* --- Formulieren -------------------------------------------------------- */

label {
  display: block;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.4rem;
}

input,
select {
  width: 100%;
  padding: 0.8rem 0.85rem;
  font-family: inherit;
  font-size: 1rem;
  color: var(--text);
  background: var(--bg-deep);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  transition: border-color 0.15s ease;
}

input::placeholder {
  color: var(--muted-dim);
}

input:hover,
select:hover {
  border-color: var(--line-strong);
}

input[type="file"] {
  padding: 0.6rem;
  color: var(--muted);
}

.field {
  margin-bottom: 1rem;
}

/* Een toelichting boven een veld hoort niet tegen het label te plakken. */
.hint + .field,
.hint + form,
p + .field {
  margin-top: 1rem;
}

.hint {
  color: var(--muted);
  font-size: 0.78rem;
  margin: 0.4rem 0 0;
}

ul.rules {
  margin: 0.5rem 0 0;
  padding-left: 1.1rem;
  color: var(--muted-dim);
  font-size: 0.75rem;
}

ul.errors {
  margin: 0 0 1rem;
  padding-left: 1.1rem;
  color: var(--error);
  font-size: 0.82rem;
}

ul.errors:empty {
  display: none;
}

details summary {
  cursor: pointer;
  margin-bottom: 0.85rem;
  color: var(--muted);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* --- Links en meldingen ------------------------------------------------- */

a {
  color: var(--accent-hi);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

.links {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-top: 1.1rem;
  text-align: center;
  font-size: 0.9rem;
}

.message {
  padding: 0.75rem 0.9rem;
  border-radius: var(--radius-sm);
  margin-bottom: 1rem;
  font-size: 0.85rem;
  border: 1px solid transparent;
}

.message:empty {
  display: none;
}

.message.error {
  background: var(--error-bg);
  border-color: rgb(248 113 113 / 30%);
  color: var(--error);
}

.message.success {
  background: var(--success-bg);
  border-color: rgb(74 222 128 / 25%);
  color: var(--success);
}

/* --- Taalkeuze ---------------------------------------------------------- */

.lang {
  width: auto;
  padding: 0.4rem 0.6rem;
  font-size: 0.78rem;
  border-radius: var(--radius-pill);
  background: var(--surface);
}

/* --- Tabellen ----------------------------------------------------------- */

.table-scroll {
  overflow-x: auto;
  margin: 0 -0.25rem;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}

th,
td {
  text-align: left;
  padding: 0.75rem 0.5rem;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}

tbody tr:last-child td {
  border-bottom: 0;
}

th {
  font-size: 0.66rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--muted-dim);
}

td.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

/* --- Trainingsklokken --------------------------------------------------- */

.clockbar {
  position: sticky;
  top: 3.5rem;
  z-index: 20;
  display: flex;
  gap: 0.9rem;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  padding: 0.55rem 0.75rem;
  background: rgb(10 10 12 / 88%);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--accent-line);
}

.clock {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-variant-numeric: tabular-nums;
}

.clock strong {
  font-size: 1.2rem;
  font-weight: 800;
}

.clockbar button {
  padding: 0.3rem 0.65rem;
  font-size: 0.6rem;
  width: auto;
}

.clock.rest strong {
  background: var(--accent-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.clock-label {
  color: var(--muted-dim);
  font-size: 0.6rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
}

/* --- Setregels ---------------------------------------------------------- */

.setrow {
  display: grid;
  grid-template-columns: 1fr 4.25rem 4.25rem 2rem 1.6rem;
  gap: 0.5rem;
  align-items: center;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--line);
}

.setrow:last-child {
  border-bottom: 0;
}

.setrow.done {
  opacity: 0.5;
}

.setrow .target {
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
}

input.small {
  padding: 0.5rem 0.5rem;
  font-size: 0.9rem;
  text-align: center;
}

/* Eigen vinkje: een wit systeemvakje valt uit de toon in een donkere app. */
input.tick {
  appearance: none;
  width: 1.6rem;
  height: 1.6rem;
  justify-self: end;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--bg-deep);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

input.tick:hover {
  border-color: var(--accent-line);
}

input.tick:checked {
  background:
    /* vinkje */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2317120a' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5 9.5 18 20 6.5'/%3E%3C/svg%3E")
      center / 68% no-repeat,
    var(--accent-grad);
  border-color: transparent;
}

/* Superset/megaset als één blok. */
.card.group {
  border-left: 3px solid var(--accent);
}

.badge {
  display: inline-block;
  margin: 0 0 0.6rem;
  padding: 0.2rem 0.6rem;
  border-radius: var(--radius-pill);
  background: var(--accent-glow);
  border: 1px solid var(--accent-line);
  color: var(--accent-hi);
  font-size: 0.64rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
}

/* --- Agenda ------------------------------------------------------------- */

/* Datum en naam op één regel, acties compact eronder — anders vult één
   agendaregel op een telefoon het halve scherm. */
.agenda-item {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  column-gap: 0.85rem;
  row-gap: 0.5rem;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--line);
}

.agenda-item .actions {
  grid-column: 1 / -1;
}

.agenda-item .actions button {
  padding: 0.32rem 0.7rem;
  font-size: 0.64rem;
  letter-spacing: 0.08em;
}

.agenda-item:last-child {
  border-bottom: 0;
}

.agenda-item.done {
  opacity: 0.5;
}

.agenda-item .when {
  min-width: 5.5rem;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.agenda-item .what {
  flex: 1;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.agenda-item .actions {
  display: flex;
  gap: 0.35rem;
  flex-wrap: wrap;
}

/* --- Lopende sessie ----------------------------------------------------- */

.live-session {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 0.9rem;
}

.live-session .what {
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.live-session .meta {
  color: var(--muted);
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
}

/* Klein pulserend puntje: er loopt iets. */
.live-dot {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.15rem 0.6rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--accent-line);
  color: var(--accent-hi);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.live-dot::before {
  content: "";
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: var(--accent-hi);
  animation: pulse 1.6s ease-in-out infinite;
}

@keyframes pulse {
  50% {
    opacity: 0.25;
  }
}

/* --- Streak ------------------------------------------------------------- */

.streak {
  display: flex;
  gap: 0.75rem;
  justify-content: space-around;
  text-align: center;
}

.streak-item {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.streak-item strong {
  font-size: 1.9rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  background: var(--accent-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.streak-item span {
  color: var(--muted-dim);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* --- Records na afloop -------------------------------------------------- */

.records-title {
  margin: 0 0 0.4rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.record {
  margin: 0.15rem 0;
  color: var(--accent-hi);
  font-weight: 700;
}

/* --- Grafiek ------------------------------------------------------------ */

.chart {
  width: 100%;
  height: 160px;
  overflow: visible;
}

.chart-line {
  stroke: var(--accent);
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

.chart-dot {
  fill: var(--accent-hi);
}

.chart-empty {
  fill: var(--muted-dim);
  font-size: 12px;
}

/* --- Progresfoto's ------------------------------------------------------ */

.photos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
  gap: 0.75rem;
  margin-top: 1rem;
}

.photos figure {
  margin: 0;
}

.photos img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
}

.photos figcaption {
  color: var(--muted-dim);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  margin: 0.35rem 0;
}

/* --- Tabbalk onder ------------------------------------------------------ */

.tabbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 30;
  display: flex;
  justify-content: space-around;
  gap: 0.15rem;
  padding: 0.5rem 0.4rem calc(0.5rem + env(safe-area-inset-bottom, 0px));
  background: rgb(8 8 10 / 92%);
  backdrop-filter: blur(14px);
  border-top: 1px solid var(--line);
}

.tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  flex: 1;
  padding: 0.45rem 0.2rem;
  border-radius: var(--radius-sm);
  color: var(--muted-dim);
  text-decoration: none;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.tab:hover {
  text-decoration: none;
  color: var(--muted);
}

.tab svg {
  width: 1.35rem;
  height: 1.35rem;
  stroke: currentcolor;
  fill: none;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Actieve tab draagt het accent. */
.tab.is-active {
  color: var(--accent-hi);
  background: var(--accent-glow);
}

.tab.is-active svg {
  stroke: var(--accent-hi);
}

/* --- Offline-melding ---------------------------------------------------- */

.offline-badge {
  position: fixed;
  left: 50%;
  bottom: calc(var(--tabbar-h) + 0.75rem);
  transform: translateX(-50%);
  z-index: 25;
  padding: 0.5rem 0.95rem;
  border-radius: var(--radius-pill);
  background: var(--surface-hi);
  border: 1px solid var(--line-strong);
  color: var(--text);
  font-size: 0.78rem;
  box-shadow: var(--shadow);
}

.offline-badge:empty,
.offline-badge[hidden] {
  display: none;
}

/* --- Toegankelijkheid --------------------------------------------------- */

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 0.6rem 1rem;
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 700;
  border-radius: 0 0 var(--radius-sm) 0;
}

.skip-link:focus {
  left: 0;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
summary:focus-visible,
.tab:focus-visible {
  outline: 2px solid var(--accent-hi);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* --- Wat ruimer op een groot scherm ------------------------------------- */

@media (min-width: 48rem) {
  .page {
    padding-top: 2.25rem;
  }

  /* De tabbalk houdt zijn volle achtergrond, maar de knoppen blijven bij de
     inhoud in plaats van uit te rekken over het hele scherm. */
  .tabbar {
    padding-inline: max(1rem, calc((100% - 32rem) / 2));
  }

  .appbar {
    padding-inline: max(1rem, calc((100% - 44rem) / 2));
  }

  h1 {
    font-size: 2rem;
  }

  .card {
    padding: 1.4rem;
  }
}

/* Afgevinkt maar zonder getal: laat zien wáár nog iets mist. */
.setrow.needs-value {
  opacity: 1;
}

.setrow.needs-value input.small:first-of-type {
  border-color: var(--error);
  background: var(--error-bg);
}

.setrow.needs-value .target::after {
  content: " !";
  color: var(--error);
  font-weight: 800;
}

/* --- Uitlegpagina --- */
.help-list {
  margin: 0;
  padding-left: 1.1rem;
  font-size: 0.9rem;
}

.help-list li + li {
  margin-top: 0.4rem;
}

.help-dl {
  margin: 0;
  font-size: 0.9rem;
}

.help-dl dt {
  font-weight: 700;
  letter-spacing: 0.04em;
  margin-top: 0.7rem;
}

.help-dl dd {
  margin: 0.15rem 0 0;
  color: var(--muted);
}

/* Voorbeeldnotaties: iets losser en met cijferbreedte, zodat ze opvallen. */
.example {
  margin: 0.6rem 0 0;
  padding: 0.6rem 0.75rem;
  border-radius: var(--radius-sm);
  background: var(--bg-deep);
  border: 1px solid var(--line);
  font-variant-numeric: tabular-nums;
  font-size: 0.9rem;
}

.help-links {
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 1rem;
  margin-top: 0.75rem;
  text-align: left;
}

/* Notitie onder een set: de instructie uit het schema. */
.setblock {
  border-bottom: 1px solid var(--line);
}

.setblock:last-child {
  border-bottom: 0;
}

.setblock .setrow {
  border-bottom: 0;
}

.setnote {
  margin: 0 0 0.6rem;
  padding-left: 0.1rem;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.4;
}

/* --- 1RM-uitleg ----------------------------------------------------------- */

.formula {
  margin: 0 0 0.75rem;
  padding: 0.75rem 1rem;
  border-radius: var(--radius-sm);
  background: var(--surface-hi);
  font-size: 1.05rem;
  letter-spacing: 0.02em;
  text-align: center;
}

.sources {
  margin: 0.5rem 0 0;
  padding-left: 1.2rem;
  color: var(--text);
  font-size: 0.86rem;
  line-height: 1.55;
}

.sources li + li {
  margin-top: 0.9rem;
}

.sources .hint {
  display: block;
  margin-top: 0.2rem;
}

/* Een schatting uit een lange set: wel tonen, maar niet met dezelfde stelligheid. */
.estimate-weak {
  color: var(--muted);
}

/* --- Bodymap -------------------------------------------------------------- */

.bodymap-figures {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

.bodymap-figure {
  flex: 1 1 140px;
  max-width: 210px;
  text-align: center;
}

.bodymap-svg {
  width: 100%;
  height: auto;
  touch-action: manipulation;
}

.bodymap-caption {
  margin: 0.25rem 0 0;
  color: var(--muted);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* De omtrek is achtergrond: hij toont het lichaam maar vangt geen klikken. */
.bm-outline {
  fill: var(--surface-hi);
  stroke: var(--line);
  stroke-width: 1;
  pointer-events: none;
}

.bm-region {
  cursor: pointer;
}

.bm-region > rect,
.bm-region > ellipse {
  fill: var(--surface-hi);
  stroke: var(--line-strong);
  stroke-width: 1.2;
  transition: fill 0.12s ease, stroke 0.12s ease;
}

.bm-region:hover > rect,
.bm-region:hover > ellipse {
  fill: var(--line-strong);
}

.bm-region:focus-visible {
  outline: none;
}

.bm-region:focus-visible > rect,
.bm-region:focus-visible > ellipse {
  stroke: var(--accent);
  stroke-width: 2;
}

.bm-region.is-selected > rect,
.bm-region.is-selected > ellipse {
  fill: var(--accent);
  stroke: var(--accent);
}

/* Een spiergroep zonder oefeningen: nog steeds aanwijsbaar, maar gedempt. */
.bm-region.is-empty > rect,
.bm-region.is-empty > ellipse {
  opacity: 0.4;
}

.bodymap-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: 0.9rem;
  flex-wrap: wrap;
}

.bodymap-chosen {
  margin: 0;
  color: var(--text);
  font-size: 0.85rem;
}

/* --- Catalogus ------------------------------------------------------------ */

.filters {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.filters .field {
  flex: 1 1 160px;
}

.catalog-list {
  list-style: none;
  margin: 0.5rem 0 0;
  padding: 0;
}

.catalog-item + .catalog-item {
  border-top: 1px solid var(--line);
}

.catalog-open {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  width: 100%;
  padding: 0.7rem 0.2rem;
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.catalog-open:hover {
  background: var(--surface-hi);
}

.catalog-name {
  font-weight: 600;
}

.catalog-meta {
  color: var(--muted);
  font-size: 0.78rem;
}

.badge--pending {
  background: var(--line-strong);
  color: var(--muted);
}

/* --- Oefeningen koppelen bij een import ---------------------------------- */

.mapping-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.4rem;
  padding: 0.75rem 0;
}

.mapping-row + .mapping-row {
  border-top: 1px solid var(--line);
}

.mapping-name {
  margin: 0;
  font-weight: 600;
  font-size: 0.9rem;
}

.mapping-select {
  font-size: 0.88rem;
}

.mapping-row button {
  justify-self: start;
}

.mapping-actions {
  display: flex;
  gap: 0.6rem;
  margin-top: 1rem;
}

/* Herkend, voorstel of onbekend: de kleur zegt hoe zeker de app is. */
.badge--exact {
  background: var(--success-bg);
  color: var(--success);
}

.badge--suggested {
  background: var(--accent-glow);
  color: var(--accent-hi);
}

.badge--none {
  background: var(--error-bg);
  color: var(--error);
}

@media (min-width: 34rem) {
  .mapping-row {
    grid-template-columns: minmax(9rem, 1fr) minmax(12rem, 1.4fr) auto;
    align-items: center;
    gap: 0.75rem;
  }
}

/* --- Trainingsscherm: kopregel, rondes, getalvelden ---------------------- */

/* De op-en-neerknopjes in een getalveld zijn in de zaal onbruikbaar: je mikt
   met een zweterige duim op een pijltje van vier pixels. Weg ermee; op de
   telefoon komt het cijfertoetsenbord op via inputmode. */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  appearance: none;
  margin: 0;
}

input[type="number"] {
  appearance: textfield;
}

.exercise-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.35rem;
}

.exercise-head h2 {
  margin: 0;
  flex: 1 1 auto;
}

.exercise-head button {
  flex: 0 0 auto;
}

/* Bij een superset wisselen de oefeningen elkaar per ronde af. */
.round-label {
  margin: 0.9rem 0 0.2rem;
  color: var(--muted-dim);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* --- Weekoverzicht en kalenderpopup -------------------------------------- */

.week-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.week-head h2 {
  margin: 0;
}

.week-nav {
  display: flex;
  gap: 0.35rem;
}

.week-nav button {
  min-width: 2.4rem;
}

#week-label {
  margin: 0.2rem 0 0.8rem;
}

.dialog {
  width: min(24rem, calc(100vw - 2rem));
  padding: 1.15rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: linear-gradient(180deg, var(--surface-hi), var(--surface));
  color: var(--text);
}

.dialog::backdrop {
  background: rgb(0 0 0 / 65%);
}

.dialog h2 {
  margin-top: 0;
}

.dialog-actions {
  display: flex;
  gap: 0.6rem;
  margin-top: 1rem;
}

/* --- Grafiek met assen ---------------------------------------------------- */

.chart {
  width: 100%;
  height: auto;
  overflow: visible;
}

.chart-grid {
  stroke: var(--line);
  stroke-width: 1;
}

.chart-axis {
  stroke: var(--line-strong);
  stroke-width: 1;
}

.chart-tick {
  fill: var(--muted);
  font-size: 9px;
  font-family: inherit;
}

.chart-tick--y {
  text-anchor: end;
}

.chart-tick--x {
  text-anchor: middle;
}

.chart-unit {
  fill: var(--muted-dim);
  font-size: 8px;
  font-family: inherit;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.metric-picker select {
  width: auto;
  min-width: 9rem;
  padding: 0.45rem 0.6rem;
  font-size: 0.85rem;
}

/* --- Progresfoto's per dag ------------------------------------------------ */

.poses {
  display: grid;
  gap: 0.5rem;
}

.photo-day + .photo-day {
  margin-top: 1.4rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--line);
}

.photo-day h3 {
  margin-top: 0;
}

@media (min-width: 34rem) {
  .poses {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* --- Aanpassen tijdens de training --------------------------------------- */

.exercise-actions {
  display: flex;
  gap: 0.35rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* De bewerkknoppen op een oefening zijn secundair: kleiner en gedempt, zodat
   "Alles afvinken" de knop blijft waar je oog op valt. */
.exercise-actions .editbtn {
  padding: 0.3rem 0.6rem;
  font-size: 0.62rem;
  color: var(--muted);
  border-color: var(--line);
}

.exercise-actions .editbtn:hover {
  color: var(--text);
}

/* Klein rond knopje aan het eind van een setregel, om die set weg te halen. */
.iconbtn {
  width: 1.6rem;
  height: 1.6rem;
  padding: 0;
  flex: 0 0 auto;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1;
}

.iconbtn:hover {
  background: var(--surface-hi);
  color: var(--text);
  filter: none;
}

#picker-results {
  max-height: 40vh;
  overflow-y: auto;
}

/* Plusje tussen twee oefeningen: een smalle strook in de tussenruimte, rechts
   uitgelijnd. Het staat binnen dezelfde kolombreedte als de kaarten, dus de
   uitlijning verandert niet. */
.add-between {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-height: 1.75rem;
  margin: -0.35rem 0 0.35rem;
  padding-right: 0.3rem;
}

.add-between .iconbtn {
  background: var(--surface);
  border-color: var(--line-strong);
}

/* Het vinkje om een hele oefening af te vinken is de knop waar je oog op valt. */
.iconbtn--tick {
  color: var(--accent);
  border-color: var(--accent-line);
}

.iconbtn--tick:hover {
  background: var(--accent-glow);
  color: var(--accent-hi);
}

/* --- Beheerpagina van één account ---------------------------------------- */

.detail-list {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.35rem 1rem;
  margin: 0;
  font-size: 0.88rem;
}

.detail-list dt {
  color: var(--muted);
}

.detail-list dd {
  margin: 0;
}

.admin-actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}