/* ================= RunSpan Planner ================= */
:root {
  --bg: #0d1117;
  --panel: #161b22;
  --card: #1c2330;
  --card2: #232b3b;
  --border: #2d3748;
  --text: #e6edf3;
  --muted: #8b98a5;
  --green: #00e676;
  --green-dark: #00c853;
  --blue: #40c4ff;
  --red: #ff5252;
  --amber: #f4b400;
  --purple: #b388ff;
  --gray: #9e9e9e;
  --radius: 12px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
/* The hidden attribute must always win, even over display:flex views. */
[hidden] { display: none !important; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  line-height: 1.5;
  min-height: 100vh;
}
h2 { font-size: 1.05rem; margin: 0 0 .6rem; }
.mt { margin-top: 1.4rem; }
.hint { color: var(--muted); font-size: .85rem; }
.empty { color: var(--muted); font-style: italic; }
.error { color: var(--red); }

/* ---------- buttons ---------- */
.btn {
  font: inherit; font-weight: 600;
  border: 1px solid transparent; border-radius: 999px;
  padding: .5rem 1.1rem; cursor: pointer;
  background: var(--card2); color: var(--text);
  transition: filter .15s;
}
.btn:hover { filter: brightness(1.15); }
/* Een knop die een link is, krijgt geen streep onder de tekst. */
a.btn { text-decoration: none; display: inline-block; text-align: center; }
.btn.primary { background: var(--green); color: #04210f; }
.btn.accent { background: var(--blue); color: #06222e; }
.btn.ghost { background: transparent; border-color: var(--border); }
.btn.danger { color: var(--red); border-color: var(--red); }
.btn.small { padding: .3rem .8rem; font-size: .85rem; }
.btn.big { padding: .8rem 1.6rem; font-size: 1.05rem; }
.iconbtn {
  background: transparent; border: none; color: var(--muted);
  cursor: pointer; font-size: 1rem; padding: .15rem .35rem; border-radius: 6px;
}
.iconbtn:hover { color: var(--text); background: var(--card2); }

/* ---------- inputs ---------- */
input, select, textarea {
  font: inherit; color: var(--text);
  background: var(--card2); border: 1px solid var(--border);
  border-radius: 8px; padding: .45rem .6rem;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--green-dark); }
input[type="number"] { width: 6.5rem; }
input.mmss { width: 5.5rem; text-align: center; }

.row { display: flex; align-items: center; }
.row.gap { gap: .6rem; }
.row.wrap { flex-wrap: wrap; }
.row.end { justify-content: flex-end; }

/* ---------- logo & language switch ---------- */
.logo { font-size: 1.5rem; font-weight: 800; letter-spacing: -.02em; }
.logo span { color: var(--green); }
.lang-switch {
  display: flex; border: 1px solid var(--border);
  border-radius: 999px; overflow: hidden;
}
.lang-switch button {
  font: inherit; font-size: .78rem; font-weight: 700;
  padding: .25rem .65rem; background: transparent; color: var(--muted);
  border: none; cursor: pointer;
}
.lang-switch button.active { background: var(--card2); color: var(--text); }

/* Taalkeuze. Planner: een <select data-langselect>, gevuld uit LANGS in
   i18n.js. Statische pagina's: een <details>-uitklapmenu zonder JavaScript
   (de Content-Security-Policy staat geen inline scripts toe), met elke taal
   onder haar eigen naam; dat schaalt beter dan een rij knoppen. */
.lang-select {
  font: inherit; font-size: .78rem; font-weight: 700;
  padding: .25rem .6rem; background: var(--card2); color: var(--text);
  border: 1px solid var(--border); border-radius: 999px; cursor: pointer;
}
.lang-menu { position: relative; }
.lang-menu summary {
  list-style: none; cursor: pointer; font-size: .78rem; font-weight: 700;
  padding: .25rem .7rem; border: 1px solid var(--border); border-radius: 999px;
  color: var(--text); background: var(--card2); user-select: none;
}
.lang-menu summary::-webkit-details-marker { display: none; }
.lang-menu summary::after { content: " \25BE"; color: var(--muted); }
.lang-menu nav {
  position: absolute; right: 0; top: calc(100% + .4rem); z-index: 20;
  display: flex; flex-direction: column; min-width: 11rem; padding: .3rem;
  background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: 0 8px 24px rgba(0, 0, 0, .45);
}
.lang-menu nav a {
  padding: .45rem .7rem; border-radius: 6px; font-size: .9rem;
  color: var(--text); text-decoration: none; white-space: nowrap;
}
.lang-menu nav a:hover { background: var(--card2); }
.lang-menu nav a[aria-current] { color: var(--green); font-weight: 700; }

/* ---------- landing ---------- */
.landing { min-height: 100vh; display: flex; flex-direction: column; }
.landing-bar { justify-content: space-between; }
.bar-right { display: flex; gap: .8rem; align-items: center; }

.hero {
  display: grid; grid-template-columns: 1.15fr .85fr; gap: 2.5rem;
  align-items: center; max-width: 1000px; width: 100%;
  margin: 0 auto; padding: 3.5rem 1.5rem 2rem;
}
.hero h1 {
  font-size: clamp(1.8rem, 4vw, 2.6rem); line-height: 1.15;
  letter-spacing: -.02em; margin: 0 0 1rem;
}
.hero-copy p { color: var(--muted); margin: 0 0 1.6rem; max-width: 34rem; }
.hero-note { font-size: .85rem; margin-top: .9rem; }
.hero-watch { justify-self: center; }
/* Knoppen bovenaan: de planner over de volle breedte, de twee winkels er
   naast elkaar onder, even breed. Voorheen viel de App Store-knop los op een
   tweede regel. */
.hero-copy .row.gap.wrap {
  display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; max-width: 34rem;
}
.hero-copy .row.gap.wrap > .btn.primary { grid-column: 1 / -1; }
.hero-copy .row.gap.wrap > .btn.big { padding: .75rem .9rem; font-size: 1rem; line-height: 1.3; }
@media (max-width: 760px) {
  .hero { grid-template-columns: 1fr; text-align: center; padding-top: 2.5rem; }
  .hero-copy p { margin-inline: auto; }
  .hero-copy .row.gap.wrap { margin-inline: auto; }
  /* Het grote horloge is hetzelfde scherm als het eerste in "Op je pols":
     op een telefoon stond het twee keer onder elkaar. */
  .hero-watch { display: none; }
  /* De horloges zijwaarts vegen in plaats van drie schermen onder elkaar. */
  .screens-strip {
    flex-wrap: nowrap; justify-content: flex-start; gap: 1.2rem;
    overflow-x: auto; scroll-snap-type: x mandatory; padding: 0 1rem .8rem;
    margin: 0 -1.5rem; scrollbar-width: none;
  }
  .screens-strip::-webkit-scrollbar { display: none; }
  .screens-strip .watch-fig { flex: 0 0 auto; scroll-snap-align: center; }
  .screens-strip .watch-fig:first-child { margin-left: auto; }
  .screens-strip .watch-fig:last-child { margin-right: auto; }
  .watch-fig .watch { width: 190px; }
}
@media (max-width: 420px) {
  .hero-copy .row.gap.wrap { grid-template-columns: 1fr; }
}

.watch {
  width: min(280px, 70vw); aspect-ratio: 1; border-radius: 50%;
  background: #000; border: 10px solid #2a323c;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .55), inset 0 0 24px rgba(0, 0, 0, .8);
}
.watch svg { width: 100%; height: 100%; display: block; }
.watch img { width: 100%; height: 100%; display: block; border-radius: 50%; }
.watch text {
  fill: var(--text); text-anchor: middle;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
.wt-label { fill: var(--green); font-size: 15px; font-weight: 700; }
.wt-big { font-size: 44px; font-weight: 800; }
.wt-sub { fill: var(--muted); font-size: 13px; }
.wt-hr { fill: var(--red); font-size: 15px; font-weight: 600; }
.wt-chip { font-size: 13px; font-weight: 600; }
.wt-chip-dark { fill: #04210f; font-size: 13px; font-weight: 700; }
.wt-logo { font-size: 17px; font-weight: 800; }

.landing .features, .landing .screens, .landing .ai-demo {
  max-width: 1000px; width: 100%; margin: 0 auto; padding: 2rem 1.5rem;
}
/* Alleen de kop ván zo'n blok centreren. Stond hier eerst als `.landing h2`,
   maar sinds de landingspagina ook lopende tekst bevat trok die regel élke
   tussenkop naar het midden. */
.landing > .features > h2, .landing > .screens > h2, .landing > .ai-demo > h2 {
  font-size: 1.4rem; text-align: center; margin-bottom: 1.4rem;
}
.feature-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 1rem;
}
.feature {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 1.1rem 1.2rem;
}
.feature .emoji { font-size: 1.6rem; }
.feature h3 { margin: .5rem 0 .3rem; font-size: 1rem; }
.feature p { margin: 0; color: var(--muted); font-size: .9rem; }

.screens-strip { display: flex; gap: 2.5rem; justify-content: center; flex-wrap: wrap; }
.watch-fig { margin: 0; text-align: center; }
.watch-fig .watch { width: 200px; margin: 0 auto; }
.watch-fig figcaption { color: var(--muted); font-size: .85rem; margin-top: .8rem; }

.ai-demo-grid {
  display: flex; gap: 1.4rem; align-items: center;
  justify-content: center; flex-wrap: wrap;
}
.bubble {
  background: var(--card2); border: 1px solid var(--border);
  border-radius: 18px 18px 18px 4px; padding: 1rem 1.2rem;
  max-width: 340px; font-style: italic;
}
.ai-demo .arrow { font-size: 1.8rem; color: var(--green); }
.mini-workout { display: flex; flex-direction: column; gap: .35rem; min-width: 250px; }
.mini-row {
  display: flex; justify-content: space-between; gap: 1rem;
  background: var(--card); border: 1px solid var(--border);
  border-left: 4px solid var(--gray); border-radius: 8px;
  padding: .35rem .7rem; font-size: .85rem;
}
.mini-row.warmup { border-left-color: var(--amber); }
.mini-row.run { border-left-color: var(--green); }
.mini-row.walk { border-left-color: var(--blue); }
.mini-row.cooldown { border-left-color: var(--purple); }
.mini-loop {
  border: 1px dashed var(--green-dark); border-radius: 10px;
  padding: .45rem .6rem; display: flex; flex-direction: column; gap: .35rem;
}
.mini-loop .badge {
  align-self: flex-start; background: var(--green-dark); color: #04210f;
  font-weight: 800; border-radius: 6px; padding: 0 .45rem; font-size: .72rem;
}
.hint.center { text-align: center; margin-top: 1.2rem; }
.landing-footer {
  text-align: center; color: var(--muted); font-size: .85rem;
  padding: 2.5rem 1rem; margin-top: auto;
}

/* ---------- cookiebanner (cookie-banner.js) ---------- */
/* Klein balkje onderaan zonder overlay: de pagina blijft bruikbaar. */
.cookie-bar {
  position: fixed; left: 50%; bottom: .75rem; transform: translateX(-50%);
  width: min(44rem, calc(100% - 1.5rem)); z-index: 50;
  display: flex; align-items: center; gap: .8rem; flex-wrap: wrap;
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: 0 6px 24px rgba(0, 0, 0, .45); padding: .6rem .8rem;
  font-size: .85rem; color: var(--text);
}
.cookie-bar p { flex: 1 1 18rem; margin: 0; line-height: 1.4; }
.cookie-bar a { color: var(--blue); }
.cookie-knoppen { display: flex; gap: .5rem; margin-left: auto; }
.cookie-knoppen .btn { min-width: 6.5rem; color: var(--text); }

.ai-count { text-align: right; margin: .2rem 0 0; font-variant-numeric: tabular-nums; }
.ai-count[hidden] { display: none; }

/* ---------- bezig-toestand van de AI-coach ---------- */
/* Een paar seconden stilte voelt als "er gebeurt niets". Dimmen plus een
   wieltje maakt duidelijk dat je even moet wachten, en blokkeert ondertussen
   de knoppen waarmee je je resultaat kwijt zou raken. */
.ai-busy-row {
  display: flex; align-items: center; gap: .6rem;
  color: var(--muted); font-size: .85rem; margin-top: .5rem;
}
.ai-busy-row[hidden] { display: none; }
.spinner {
  width: 1.05rem; height: 1.05rem; flex: none;
  border: 2px solid var(--border); border-top-color: var(--green);
  border-radius: 50%; animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

body.ai-busy .tabpane > *:not(.ai-card) {
  opacity: .35; pointer-events: none; transition: opacity .2s;
}
body.ai-busy .ai-card { pointer-events: none; }
body.ai-busy .ai-card #ai-busy { pointer-events: auto; }
body.ai-busy #ai-input { opacity: .75; }

/* Wie bewegende beelden liever niet ziet, krijgt een rustiger wieltje. */
@media (prefers-reduced-motion: reduce) {
  .spinner { animation-duration: 2.4s; }
  body.ai-busy .tabpane > *:not(.ai-card) { transition: none; }
}

/* ---------- AI card ---------- */
.ai-card {
  grid-column: 1 / -1;
  background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 1rem 1.2rem;
}
.ai-head {
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: .6rem; margin-bottom: .6rem;
}
.ai-head h2 { margin: 0; }
.ai-modes { display: flex; gap: .4rem; }
.ai-mode {
  display: flex; align-items: center; font-size: .85rem; color: var(--muted);
  border: 1px solid var(--border); border-radius: 999px;
  padding: .25rem .75rem; cursor: pointer;
}
.ai-mode:has(input:checked) { border-color: var(--green); color: var(--text); }
/* Visueel verborgen maar bereikbaar met het toetsenbord (display:none haalde
   de keuzeknoppen uit de tab-volgorde). */
.ai-mode input {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.ai-mode { position: relative; }
.ai-mode:focus-within { outline: 2px solid var(--green); outline-offset: 2px; }
.workout-list li:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.ai-row { display: flex; gap: .6rem; align-items: stretch; flex-wrap: wrap; }
.ai-row textarea { flex: 1; min-width: 240px; resize: vertical; min-height: 2.7rem; }
.btn.mic.rec { border-color: var(--red); color: var(--red); animation: mic-pulse 1.2s infinite; }
@keyframes mic-pulse { 50% { box-shadow: 0 0 0 6px rgba(255, 82, 82, .15); } }
#ai-status { margin: .5rem 0 0; }
#ai-status.err { color: var(--red); }

/* ---------- app shell ---------- */
.topbar {
  display: flex; align-items: center; gap: 1.5rem;
  padding: .7rem 1.2rem; background: var(--panel);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 10; flex-wrap: wrap;
}
.tabs { display: flex; gap: .3rem; flex: 1; }
.tab {
  font: inherit; font-weight: 600; color: var(--muted);
  background: transparent; border: none; cursor: pointer;
  padding: .45rem .9rem; border-radius: 999px;
}
.tab.active { color: #04210f; background: var(--green); }
.user { display: flex; align-items: center; gap: .7rem; color: var(--muted); font-size: .9rem; }
/* Telefoon: logo en taal/uitloggen op de eerste regel, de tabbladen eronder.
   Was drie regels hoog en bleef altijd in beeld staan. */
@media (max-width: 600px) {
  .topbar { gap: .5rem .8rem; padding: .55rem .8rem; }
  .topbar .user { order: 1; margin-left: auto; gap: .4rem; }
  .topbar .tabs { order: 2; flex-basis: 100%; justify-content: space-between; }
  .topbar .tab { padding: .4rem .7rem; }
  #user-name { display: none; }
  .lang-select { max-width: 8rem; }
}

/* ---------- workouts tab layout ---------- */
#tab-workouts {
  display: grid; grid-template-columns: 290px 1fr; gap: 1.2rem;
  padding: 1.2rem; max-width: 1200px; margin: 0 auto;
}
@media (max-width: 800px) {
  #tab-workouts { grid-template-columns: 1fr; }
}

.library {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 1rem; align-self: start;
}
.library-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: .7rem; }
.library-head h2 { margin: 0; }
.workout-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .4rem; }
.workout-list li {
  padding: .55rem .8rem; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--border); background: var(--card);
}
.workout-list li:hover { border-color: var(--green-dark); }
.workout-list li.active { border-color: var(--green); background: var(--card2); }
.workout-list .sub { display: block; color: var(--muted); font-size: .78rem; }

/* ---------- builder ---------- */
.builder {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 1.2rem;
}
.builder.placeholder { display: flex; align-items: center; justify-content: center; color: var(--muted); min-height: 200px; }
.builder-head { display: flex; gap: .8rem; flex-wrap: wrap; align-items: center; margin-bottom: .4rem; }
.builder-summary { margin: 0 0 .9rem; font-size: .85rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.name-input {
  flex: 1; min-width: 220px; font-size: 1.15rem; font-weight: 700;
  background: transparent; border: none; border-bottom: 2px solid var(--border);
  border-radius: 0; padding: .3rem .1rem;
}
.name-input:focus { outline: none; border-bottom-color: var(--green); }
.builder-actions { display: flex; gap: .5rem; flex-wrap: wrap; }

.steps { display: flex; flex-direction: column; gap: .7rem; }

.step-card {
  background: var(--card); border: 1px solid var(--border);
  border-left: 5px solid var(--gray);
  border-radius: 10px; padding: .7rem .9rem;
}
.step-card[data-intensity="warmup"]   { border-left-color: var(--amber); }
.step-card[data-intensity="run"]      { border-left-color: var(--green); }
.step-card[data-intensity="sprint"]   { border-left-color: #ff6d00; }
.step-card[data-intensity="walk"]     { border-left-color: var(--blue); }
.step-card[data-intensity="cooldown"] { border-left-color: var(--purple); }
.step-card[data-intensity="rest"]     { border-left-color: var(--gray); }

.step-head { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.step-head .grow { flex: 1; }
.block-name { width: 11rem; }
.step-tools { margin-left: auto; display: flex; gap: .1rem; }

.cond-list { display: flex; flex-direction: column; gap: .35rem; margin-top: .6rem; }
.cond-row { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.cond-row .or {
  font-size: .7rem; font-weight: 700; color: var(--muted);
  min-width: 1.6rem; text-align: right;
}
.cond-unit { color: var(--muted); font-size: .85rem; }
.add-cond { margin-top: .45rem; }

.target-row { margin-top: .6rem; display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.target-row label { color: var(--muted); font-size: .85rem; }

.loop-card {
  background: var(--card); border: 1px dashed var(--green-dark);
  border-radius: 10px; padding: .7rem .9rem;
}
.loop-head { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-bottom: .6rem; }
.loop-head .badge {
  background: var(--green-dark); color: #04210f; font-weight: 800;
  border-radius: 6px; padding: .1rem .5rem; font-size: .8rem;
}
.loop-body { display: flex; flex-direction: column; gap: .6rem; margin-left: .6rem; }
.loop-repeat { width: 4.5rem; }

.add-row { display: flex; gap: .6rem; margin-top: 1rem; flex-wrap: wrap; }
#user-name { max-width: 10rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.json-panel { margin-top: 1.2rem; }
.json-panel summary { cursor: pointer; color: var(--muted); }
.json-panel textarea {
  width: 100%; min-height: 220px; margin-top: .6rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .8rem;
}
.json-panel .row { margin-top: .5rem; }

/* ---------- inlogpaneel van de plannerpagina ---------- */
.login-panel { max-width: 26rem; text-align: center; }
.login-panel h2 { margin-top: 0; }
.login-panel .btn { margin: .8rem 0 .4rem; }
.login-panel a { color: var(--muted); font-size: .9rem; }
.shared-preview {
  text-align: left; background: var(--card2); border: 1px solid var(--green-dark);
  border-radius: 10px; padding: .75rem .9rem; margin: .8rem 0 .4rem;
}
.shared-preview[hidden] { display: none; }
.shared-preview-head { display: flex; justify-content: space-between; align-items: baseline; gap: .6rem; flex-wrap: wrap; margin-bottom: .5rem; }
.shared-preview-name { font-weight: 800; color: var(--text); font-size: .98rem; }
.shared-preview-sub { font-size: .78rem; color: var(--muted); font-variant-numeric: tabular-nums; }

/* ---------- schedule & runs ---------- */
.panel {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 1.2rem;
  max-width: 760px; margin: 1.2rem auto;
}
.schedule-list, .runs-list { list-style: none; margin: .4rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.schedule-list li, .runs-list li {
  background: var(--card); border: 1px solid var(--border);
  border-radius: 10px; padding: .6rem .9rem;
  display: flex; align-items: center; gap: .8rem; flex-wrap: wrap;
}
.schedule-list .date { font-weight: 700; color: var(--green); min-width: 7.5rem; }
.runs-list .meta { color: var(--muted); font-size: .85rem; }
.runs-list .grow, .schedule-list .grow { flex: 1; }

/* Uitleg achter de ⓘ in de herhaal-kaart. */
.iconbtn.info { color: var(--blue); font-size: 1.05rem; }
.loop-help {
  margin: .1rem 0 .5rem; padding: .5rem .7rem;
  background: var(--card2); border-left: 3px solid var(--blue);
  border-radius: 8px; color: var(--muted); font-size: .85rem; max-width: 34rem;
}
.loop-help[hidden] { display: none; }

/* Strava-koppeling boven de runlijst. */
.strava-box {
  margin: .8rem 0; padding: .7rem .9rem;
  background: var(--card); border: 1px solid var(--border); border-radius: 10px;
}
.strava-row { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; }
.strava-box .grow { flex: 1; min-width: 12rem; }
.strava-note { font-size: .8rem; margin: .5rem 0 0; }
.strava-note a { color: var(--blue); }
/* Officiële knop van Strava: ongewijzigd tonen, geen eigen rand of achtergrond. */
.strava-connect { background: none; border: 0; padding: 0; cursor: pointer; line-height: 0; }
.strava-connect img { height: 48px; width: auto; }
.strava-text { background: #fc5200; color: #fff; }
/* "View on Strava": letterlijke tekst, vet en in Strava-oranje (huisstijl). */
.strava-link { color: #fc5200; font-weight: 700; font-size: .85rem; text-decoration: none; padding: 0 .3rem; }
.strava-link:hover { text-decoration: underline; }
.strava-box label {
  display: flex; align-items: center; gap: .35rem;
  font-size: .85rem; color: var(--muted);
}

/* Route map: a full-width row under the run (the li wraps), Leaflet renders inside. */
.run-map {
  flex-basis: 100%; height: 300px; margin-top: .3rem;
  border: 1px solid var(--border); border-radius: 10px; overflow: hidden;
  background: var(--card2);
  /* Eigen stapelcontext, anders tekent de kaart over de vaste kopbalk heen. */
  position: relative; z-index: 0;
}
.run-map[hidden] { display: none; }
.run-map .leaflet-container { font: inherit; }
@media (max-width: 600px) { .run-map { height: 240px; } }

/* ---------- dialog & toast ---------- */
dialog {
  background: var(--panel); color: var(--text);
  border: 1px solid var(--border); border-radius: 16px;
  padding: 1.5rem; max-width: 380px; width: 92%;
}
dialog::backdrop { background: rgba(0,0,0,.6); }
.dialog-steps { color: var(--muted); font-size: .9rem; padding-left: 1.2rem; }
#send-code {
  width: 100%; text-transform: uppercase; letter-spacing: .4em;
  text-align: center; font-size: 1.6rem; font-weight: 800; margin: .8rem 0;
}
.dialog-status { min-height: 1.3rem; font-size: .9rem; margin: .2rem 0 .6rem; }
.dialog-status.ok { color: var(--green); }
.dialog-status.err { color: var(--red); }

.toast {
  position: fixed; bottom: 1.2rem; left: 50%; transform: translateX(-50%);
  background: var(--card2); border: 1px solid var(--green-dark);
  border-radius: 999px; padding: .55rem 1.2rem; font-weight: 600;
  box-shadow: 0 6px 24px rgba(0,0,0,.5); z-index: 100;
}

/* Inloggen met Apple: zwart-wit volgens Apple's richtlijnen, onder de Google-knop. */
.login-panel .apple-login {
  display: block;
  margin: 10px auto 0;
  background: #fff;
  color: #000;
  border: 1px solid #fff;
  font-weight: 600;
}

/* ================= Runoverzicht (runview.js) ================= */
#tab-runs .panel { max-width: 1000px; }
.runs-list li.run-card { display: block; padding: .9rem 1rem 1rem; }
.run-head { display: flex; align-items: flex-start; gap: .8rem; flex-wrap: wrap; }
.run-title { flex: 1; min-width: 12rem; }
.run-name { font-weight: 800; font-size: 1.08rem; line-height: 1.3; }
.run-date { color: var(--muted); font-size: .85rem; display: flex; gap: .45rem; flex-wrap: wrap; align-items: center; margin-top: .1rem; }
.chip {
  font-size: .72rem; font-weight: 600; padding: .05rem .55rem; border-radius: 999px;
  border: 1px solid var(--border); color: var(--text); background: var(--card2);
}
.run-actions { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; }
.details-btn { background: var(--card2); border-color: var(--border); color: var(--text); font-weight: 700; }
.details-btn.on { border-color: var(--green); color: var(--green); }

/* Tegels: label, groot getal, kleine eenheid. De kleur zit in de bovenrand. */
.run-tiles, .records {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(108px, 1fr));
  gap: .5rem; margin-top: .75rem;
}
.records { margin-top: 0; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.tile {
  --c: var(--border);
  background: var(--card2); border-radius: 10px; padding: .5rem .7rem .55rem;
  border-top: 3px solid var(--c); min-width: 0;
}
.tile-label {
  font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: var(--c); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tile-value { font-size: 1.3rem; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.3; white-space: nowrap; }
.tile-unit { font-size: .78rem; font-weight: 600; color: var(--muted); margin-left: .12rem; }
.tile-sub { font-size: .75rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.t-dist { --c: var(--green); }
.t-time { --c: var(--blue); }
.t-pace { --c: #c6ff00; }
.t-hr { --c: var(--red); }
.t-up { --c: var(--amber); }
.t-cad { --c: var(--purple); }
.t-kcal { --c: #ff6d00; }
.t-blocks { --c: var(--gray); }
.t-top, .r-top { --c: #ffd600; }
.r-km { --c: var(--green); }
.r-run { --c: #c6ff00; }
.r-block { --c: #ffc107; }
.r-climb { --c: #e53935; }
.r-high { --c: #bcaaa4; }
.r-hr { --c: var(--red); }

/* Alle blokken als één strook, breedte naar duur. */
.block-strip { display: flex; gap: 2px; height: 12px; margin-top: .75rem; border-radius: 6px; overflow: hidden; }
.block-strip .seg { min-width: 2px; opacity: .85; cursor: help; }
.block-strip .seg:hover { opacity: 1; filter: brightness(1.25); }
.block-strip .seg.best { box-shadow: inset 0 0 0 2px #fff; opacity: 1; }

.run-detail {
  margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 1.1rem;
}
.section-title { font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }

/* Kaart met lagen; groot = over het hele scherm. */
.mapbox { position: relative; }
.map-bar { display: flex; justify-content: space-between; align-items: center; gap: .5rem; flex-wrap: wrap; margin-bottom: .5rem; }
.segmented {
  display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px;
  background: var(--card2); border: 1px solid var(--border); border-radius: 999px;
}
.seg-btn {
  background: none; border: 0; color: var(--muted); font: inherit; font-size: .85rem; font-weight: 700;
  padding: .3rem .85rem; border-radius: 999px; cursor: pointer;
}
.seg-btn:hover { color: var(--text); }
.seg-btn.on { background: var(--green); color: #04210f; }
.mapbox .run-map { height: 460px; margin-top: 0; }
.map-legend {
  display: flex; flex-wrap: wrap; gap: .35rem 1rem; align-items: center;
  font-size: .8rem; color: var(--muted); margin-top: .5rem;
}
.map-legend .lg i { display: inline-block; width: 16px; height: 6px; border-radius: 3px; margin-right: .4rem; vertical-align: middle; }
.map-legend .grad { display: inline-block; width: 140px; height: 8px; border-radius: 4px; }
.map-close { display: none; }
.mapbox.full {
  position: fixed; inset: 0; z-index: 2000; background: var(--bg);
  padding: .8rem; display: flex; flex-direction: column;
}
.mapbox.full .run-map { flex: 1; height: auto; }
.mapbox.full .map-bar > .btn { display: none; }
.mapbox.full .map-close {
  display: block; position: absolute; top: .8rem; right: .8rem; z-index: 5;
  background: var(--card2); color: var(--text); border: 1px solid var(--border);
  border-radius: 999px; padding: .35rem .9rem; font: inherit; font-weight: 700; cursor: pointer;
}
body.map-full { overflow: hidden; }
.km-pin {
  background: #0d1117; color: #fff; border: 2px solid #fff; border-radius: 50%;
  font-size: 10px; font-weight: 800; display: flex !important; align-items: center; justify-content: center;
}
.rec-pin {
  font-size: 18px; line-height: 24px; text-align: center;
  text-shadow: 0 0 3px #000, 0 0 3px #000, 0 0 2px #000;
}

/* Grafieken: hoogte, tempo, hartslag, met één gedeelde cursor. */
.charts { display: flex; flex-direction: column; gap: .4rem; }
.readout {
  font-size: .85rem; font-variant-numeric: tabular-nums; background: var(--card2);
  border-radius: 8px; padding: .35rem .75rem; min-height: 1.95rem; color: var(--text);
}
.chart-band { display: flex; gap: 1px; height: 6px; border-radius: 3px; overflow: hidden; }
.chart-head { display: flex; justify-content: space-between; gap: .5rem; font-size: .75rem; color: var(--muted); }
.chart-label { font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.chart-elev .chart-label { color: var(--amber); }
.chart-pace .chart-label { color: var(--green); }
.chart-hr .chart-label { color: var(--red); }
.chart-range { font-variant-numeric: tabular-nums; }
.plot {
  position: relative; height: 90px; background: var(--card2); border-radius: 8px;
  overflow: hidden; cursor: crosshair; touch-action: pan-y;
}
.plot svg { display: block; width: 100%; height: 100%; }
.plot .cursor {
  display: none; position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px;
  background: #fff; opacity: .75; pointer-events: none;
}

/* Hartslagzones. */
.zones-head { display: flex; justify-content: space-between; align-items: center; gap: .5rem; flex-wrap: wrap; }
.maxhr { display: flex; align-items: center; gap: .4rem; font-size: .8rem; color: var(--muted); }
.maxhr input { width: 4.6rem; padding: .2rem .45rem; }
.zone-bar { display: flex; height: 22px; border-radius: 6px; overflow: hidden; margin: .5rem 0 .45rem; }
.zone-bar div {
  min-width: 2px; color: #0d1117; font-size: .72rem; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}
.zone-rows {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: .5rem; font-size: .82rem; font-variant-numeric: tabular-nums;
}
.zone-row { background: var(--card2); border-radius: 8px; border-left: 4px solid var(--z); padding: .35rem .6rem; }
.zone-row .zt1, .zone-row .zt2 { display: flex; justify-content: space-between; gap: .4rem; }
.zone-row .zn { font-weight: 800; color: var(--z); }
.zone-row .zt { font-weight: 700; }
.zone-row .zr, .zone-row .zp { color: var(--muted); }

/* Tabellen per blok en per kilometer: getallen rechts, tempo met balkje. */
.table-scroll { overflow-x: auto; }
.run-table {
  width: 100%; border-collapse: collapse; margin-top: .45rem;
  font-size: .86rem; font-variant-numeric: tabular-nums;
}
.run-table th {
  text-align: right; font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em;
  color: var(--muted); padding: .3rem .55rem; border-bottom: 1px solid var(--border); white-space: nowrap;
}
.run-table th.l { text-align: left; }
.run-table td { padding: .34rem .55rem; border-bottom: 1px solid rgba(45, 55, 72, .55); white-space: nowrap; }
.run-table td.num { text-align: right; }
.run-table td.up { color: var(--amber); }
.run-table td.down { color: var(--blue); }
.run-table tbody tr:hover td { background: var(--card2); }
.run-table tr.best td { background: rgba(255, 214, 0, .08); }
.run-table tr.skipped td { opacity: .45; }
.run-table tr.best td.pace .pv { color: #ffd600; font-weight: 800; }
.run-table .sw { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: .5rem; vertical-align: -1px; }
.run-table .badge { margin-left: .4rem; }
.ptrack {
  display: inline-block; width: 6.5rem; height: 8px; margin-right: .6rem; vertical-align: middle;
  background: rgba(255, 255, 255, .06); border-radius: 4px; overflow: hidden;
}
.pbar { display: block; height: 100%; border-radius: 4px; background: var(--green-dark); }
.pv { font-weight: 700; }
.run-table.splits { width: auto; min-width: min(100%, 26rem); }

.battery { font-size: .85rem; color: var(--muted); }

@media (max-width: 600px) {
  .runs-list li.run-card { padding: .75rem .75rem .85rem; }
  .run-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .4rem; }
  .records { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .zone-rows { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tile { padding: .4rem .5rem .45rem; }
  .tile-value { font-size: 1.08rem; }
  .run-actions { width: 100%; }
  .mapbox .run-map { height: 340px; }
  /* Smal scherm: de tempokolom moet zichtbaar blijven zonder zijwaarts te schuiven. */
  .run-table th, .run-table td { padding: .3rem .32rem; }
  .run-table .idx, .run-table:not(.splits) .ptrack { display: none; }
  .ptrack { width: 3.5rem; }
}