/* ============================================================
   Steptober 2026 — Bolsius stappenchallenge

   Twee paletten. Donker is de avondwandeling: warme donkere grond,
   kaarslicht als accent. Licht is dezelfde app bij daglicht, op de crème
   uit de huisstijl. Wie niets kiest krijgt wat zijn systeem zegt.

   Alle kleuren komen van bolsius.com (huisstijl van de consumentensite);
   --ground is in het donker een verdonkerde afgeleide van hun warme
   zwart, zodat het kaarslicht ergens op kan vallen, en in het licht hun
   crème. Zie het blok hieronder voor hoe de twee paletten in elkaar
   zitten.
   ============================================================ */

@font-face {
  font-family: "Futura PT";
  src: url("fonts/FuturaPTBook.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Futura PT";
  src: url("fonts/FuturaPTHeavy.woff2") format("woff2");
  font-weight: 800;
  font-display: swap;
}

/* ------------------------------------------------------------
   Kleuren in twee paletten.

   Donker staat in :root en is daarmee ook de terugval: laadt de bundle
   niet, dan ziet de app eruit zoals hij altijd deed. De lichte waarden
   staan één keer als --l-*, en gaan op twee plekken door: in de
   auto-stand via prefers-color-scheme, en bij een expliciete keuze via
   [data-theme="light"]. Die twee blokken moeten gelijk blijven — daarom
   verwijzen ze alleen en staat er geen enkele hexwaarde in.

   Twee dingen die per palet echt anders moeten:

   - Het accent heeft twee rollen. --accent is tekst en randen en moet
     leesbaar zijn óp de grond; --accent-fill is een vlak met --on-accent
     als tekst erop. In het donker zijn dat dezelfde amber, in het licht
     niet: bleke amber als tekst is op crème onleesbaar.
   - De kaarslichtgloed. Op crème moet die bijna niets zijn, anders wordt
     het vuil in plaats van warm.

   Het lichte palet is op WCAG AA nagerekend: alle tekstkleuren halen
   4,5:1 op elk van de drie gronden (ground, surface, surface-2).
   ------------------------------------------------------------ */

:root {
  /* ---- donker: de avondwandeling, zoals de app altijd was ---- */
  --ground: #201E1D;      /* pagina, afgeleid van hun warme zwart */
  --surface: #2E2D2C;     /* Bolsius warm zwart — de kaarten */
  --surface-2: #3A3837;   /* invoervelden, verhoogde vlakken */
  --edge: #454241;
  --edge-soft: #383533;

  --ink: #F4EDE7;
  --ink-mute: #A79E98;
  --ink-faint: #726B66;

  --coral: #E86657;       /* Bolsius coral */
  --coral-dim: #B14C41;
  --flame: #FDD79A;       /* Bolsius amber — het kaarslicht */
  /* de vlam in de tekeningen (kaars, lichtjes op de route): body + hete kern.
     Apart van --accent, want een vlam is licht en geen tekst. */
  --flame-lit: #FDD79A;
  --flame-hot: #FFF2D6;
  --sage: #ABC1A1;        /* Bolsius salie */
  --green: #006E4F;       /* Bolsius diepgroen */
  --green-lit: #3A7054;
  --blush: #E9BDB7;

  /* het accent in zijn twee rollen; donker heeft er één kleur voor nodig */
  --accent: var(--flame);
  --accent-fill: var(--flame);
  --on-accent: var(--ground);
  --on-accent-mute: rgba(32, 30, 29, 0.65);

  /* sluiers, schaduwen en gloed — apart, want die keren niet mee om */
  --veil: rgba(32, 30, 29, 0.82);      /* doorschijnende topbalk */
  --shadow-lg: rgba(0, 0, 0, 0.5);
  --shadow-md: rgba(0, 0, 0, 0.45);
  --sunken: rgba(0, 0, 0, 0.22);       /* testbalk */
  --sunken-soft: rgba(0, 0, 0, 0.16);  /* voetnoot onder het scorebord */
  --accent-wash: rgba(253, 215, 154, 0.055);  /* jouw eigen regel */
  --ok-wash: rgba(0, 110, 79, 0.16);
  --bad-wash: rgba(232, 102, 87, 0.12);
  --bad-wash-soft: rgba(232, 102, 87, 0.05);
  --bad-edge: rgba(232, 102, 87, 0.35);
  --glow-a: rgba(253, 215, 154, 0.13);
  --glow-b: rgba(232, 102, 87, 0.07);

  /* ---- licht: crème uit de huisstijl, één bron van waarheid ---- */
  --l-ground: #FAFAE1;    /* Bolsius crème */
  --l-surface: #FFFFFF;
  --l-surface-2: #F3F1DA;
  --l-edge: #D8D5BE;
  --l-edge-soft: #E6E3CD;

  --l-ink: #2E2D2C;       /* het warme zwart, nu als tekst */
  --l-ink-mute: #55514A;
  --l-ink-faint: #6E6A61;

  --l-coral: #BE3E2C;     /* coral verdiept; #E86657 haalt geen 4,5:1 op crème */
  --l-coral-dim: #B14C41;
  --l-sage: #2F5D46;      /* salie is op crème onleesbaar — diepgroen ervoor */
  --l-blush: #A8382A;
  --l-flame-lit: #C77F14; /* de vlam moet op crème nog als vlam lezen */
  --l-flame-hot: #F2C15A; /* de kern blijft lichter dan het lijf */
  --l-accent: #8A5A12;    /* amber verdiept tot brons, voor tekst en randen */
  --l-accent-fill: #F7C46B;  /* amber als vlak, met het warme zwart erop */
  --l-on-accent: #2E2D2C;
  --l-on-accent-mute: rgba(46, 45, 44, 0.62);

  --l-veil: rgba(250, 250, 225, 0.85);
  --l-shadow-lg: rgba(46, 45, 44, 0.14);
  --l-shadow-md: rgba(46, 45, 44, 0.12);
  --l-sunken: rgba(46, 45, 44, 0.05);
  --l-sunken-soft: rgba(46, 45, 44, 0.035);
  --l-accent-wash: rgba(247, 196, 107, 0.2);
  --l-ok-wash: rgba(47, 93, 70, 0.1);
  --l-bad-wash: rgba(190, 62, 44, 0.09);
  --l-bad-wash-soft: rgba(190, 62, 44, 0.05);
  --l-bad-edge: rgba(190, 62, 44, 0.4);
  --l-glow-a: rgba(247, 196, 107, 0.16);
  --l-glow-b: rgba(190, 62, 44, 0.05);

  --display: "Futura PT", Jost, Futura, "Century Gothic", "Avenir Next", sans-serif;

  --r: 12px;
  --r-lg: 18px;
  --gap: 18px;
  --shell: 1000px;

  color-scheme: dark;
}

/* De auto-stand: geen keuze gemaakt, dus volgen wat het systeem zegt.
   [data-theme="dark"] sluit dit uit, zodat een expliciete keuze voor
   donker ook op een licht systeem blijft staan. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --ground: var(--l-ground);
    --surface: var(--l-surface);
    --surface-2: var(--l-surface-2);
    --edge: var(--l-edge);
    --edge-soft: var(--l-edge-soft);
    --ink: var(--l-ink);
    --ink-mute: var(--l-ink-mute);
    --ink-faint: var(--l-ink-faint);
    --coral: var(--l-coral);
    --coral-dim: var(--l-coral-dim);
    --sage: var(--l-sage);
    --blush: var(--l-blush);
    --flame-lit: var(--l-flame-lit);
    --flame-hot: var(--l-flame-hot);
    --accent: var(--l-accent);
    --accent-fill: var(--l-accent-fill);
    --on-accent: var(--l-on-accent);
    --on-accent-mute: var(--l-on-accent-mute);
    --veil: var(--l-veil);
    --shadow-lg: var(--l-shadow-lg);
    --shadow-md: var(--l-shadow-md);
    --sunken: var(--l-sunken);
    --sunken-soft: var(--l-sunken-soft);
    --accent-wash: var(--l-accent-wash);
    --ok-wash: var(--l-ok-wash);
    --bad-wash: var(--l-bad-wash);
    --bad-wash-soft: var(--l-bad-wash-soft);
    --bad-edge: var(--l-bad-edge);
    --glow-a: var(--l-glow-a);
    --glow-b: var(--l-glow-b);
    color-scheme: light;
  }
}

/* De expliciete keuze voor licht. Exact dezelfde toewijzingen als hierboven;
   ze staan twee keer omdat CSS een media query en een attribuutselector niet
   in één regel kan combineren. Houd ze gelijk. */
:root[data-theme="light"] {
  --ground: var(--l-ground);
  --surface: var(--l-surface);
  --surface-2: var(--l-surface-2);
  --edge: var(--l-edge);
  --edge-soft: var(--l-edge-soft);
  --ink: var(--l-ink);
  --ink-mute: var(--l-ink-mute);
  --ink-faint: var(--l-ink-faint);
  --coral: var(--l-coral);
  --coral-dim: var(--l-coral-dim);
  --sage: var(--l-sage);
  --blush: var(--l-blush);
  --flame-lit: var(--l-flame-lit);
  --flame-hot: var(--l-flame-hot);
  --accent: var(--l-accent);
  --accent-fill: var(--l-accent-fill);
  --on-accent: var(--l-on-accent);
  --on-accent-mute: var(--l-on-accent-mute);
  --veil: var(--l-veil);
  --shadow-lg: var(--l-shadow-lg);
  --shadow-md: var(--l-shadow-md);
  --sunken: var(--l-sunken);
  --sunken-soft: var(--l-sunken-soft);
  --accent-wash: var(--l-accent-wash);
  --ok-wash: var(--l-ok-wash);
  --bad-wash: var(--l-bad-wash);
  --bad-wash-soft: var(--l-bad-wash-soft);
  --bad-edge: var(--l-bad-edge);
  --glow-a: var(--l-glow-a);
  --glow-b: var(--l-glow-b);
  color-scheme: light;
}

/* ---------------- basis ---------------- */

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--display);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Het kaarslicht: één zachte gloed achter de hele pagina, verankerd waar de
   vlam staat. Hierdoor is de bovenkant van de pagina warmer dan de onderkant. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(60vw 46vh at 78% 8%, var(--glow-a), transparent 70%),
    radial-gradient(90vw 60vh at 12% 0%, var(--glow-b), transparent 70%);
}

.shell { position: relative; z-index: 1; max-width: var(--shell); margin: 0 auto; padding: 0 18px 72px; }

h1, h2, h3 { font-weight: 800; letter-spacing: -0.02em; margin: 0; line-height: 1.05; }

a { color: var(--accent); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

::selection { background: var(--coral); color: #fff; }

/* ---------------- topbalk ---------------- */

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 14px;
  height: 58px;
  padding: 0 18px;
  margin: 0 -18px;
  background: var(--veil);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--edge-soft);
}

.brand { display: flex; align-items: center; gap: 7px; margin-right: auto; }
.brand-word {
  font-weight: 800;
  font-size: 21px;
  letter-spacing: -0.03em;
  color: var(--coral);
  line-height: 1;
}
.brand-sep { width: 1px; height: 24px; background: var(--edge); }
.brand-app {
  font-size: 15px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

@media (max-width: 560px) {
  .brand-sep, .brand-app { display: none; }
}

/* Taalkiezer. Zeven talen met vlaggen passen niet in een <select>, dus dit is
   een eigen menu. De vlaggen zijn SVG en geen emoji: Windows heeft geen
   vlagglyphs. Op het donkere vlak houden we ze klein en met een randje, zodat
   ze als labels lezen en niet als plaatjes. */
.flag { display: block; flex: none; border-radius: 2px; }

.langmenu { position: relative; flex: none; }

.langtrigger {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--edge);
  background: var(--surface);
  border-radius: 999px;
  padding: 5px 10px 5px 8px;
  cursor: pointer;
  font-family: inherit;
  color: var(--ink);
}
.langtrigger:hover { border-color: var(--accent); }
.langtrigger .langcode {
  font-size: 12px; font-weight: 800; letter-spacing: 0.08em;
}
.langtrigger .caret {
  width: 0; height: 0;
  border-left: 3.5px solid transparent;
  border-right: 3.5px solid transparent;
  border-top: 4px solid var(--ink-mute);
}

.langlist {
  position: absolute;
  top: calc(100% + 7px);
  right: 0;
  z-index: 30;
  min-width: 178px;
  margin: 0;
  padding: 5px;
  list-style: none;
  background: var(--surface);
  border: 1px solid var(--edge);
  border-radius: 12px;
  box-shadow: 0 14px 34px var(--shadow-lg);
}
.langlist button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  border: 0;
  background: none;
  border-radius: 8px;
  padding: 8px 9px;
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
  color: var(--ink);
  text-align: left;
}
.langlist button:hover { background: var(--surface-2); }
.langlist button[aria-selected="true"] { color: var(--accent); font-weight: 800; }
.langlist button .nm { flex: 1; }
.langlist button .cd {
  font-size: 11px; letter-spacing: 0.08em; color: var(--ink-faint);
}
.langlist button[aria-selected="true"] .cd { color: var(--accent); }

/* De themakiezer is dezelfde knop als de taalkiezer, maar zonder tekst
   ernaast; dan staat de rechterkant te ruim. De pictogrammen tekenen met
   currentColor, zodat de gekozen stand in het menu het accent meepakt. */
.themetrigger { padding: 5px 9px; gap: 5px; }
.themeicon { display: block; flex: none; }

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

.chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--edge);
  background: var(--surface);
  color: var(--ink);
  font-family: inherit;
  font-size: 13px;
  padding: 6px 12px;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  max-width: 46vw;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chip:hover { border-color: var(--accent); }
.chip .dot { width: 6px; height: 6px; border-radius: 99px; background: var(--accent); flex: none; }

/* Het menu onder je eigen naam. */
.account { position: relative; }
.menu {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 40;
  min-width: 210px; padding: 6px;
  background: var(--surface); border: 1px solid var(--edge);
  border-radius: 12px; box-shadow: 0 18px 40px var(--shadow-md);
}
.menu > button {
  display: block; width: 100%; text-align: left;
  padding: 10px 12px; border: 0; border-radius: 8px;
  background: none; color: var(--ink); font: 400 14px/1.2 var(--display); cursor: pointer;
}
.menu > button:hover { background: var(--ground); color: var(--accent); }
.menu-form { display: grid; gap: 12px; padding: 10px; }

/* Een aanmoediging bovenaan, bij elk openen een andere. Bewust één rustige
   regel en geen kaart: de invoer van vandaag moet meteen in beeld blijven.
   Het amberkleurige streepje links verbindt hem met het kaarslicht. */
.quote {
  margin: 16px 0 0;
  padding: 2px 0 2px 13px;
  border-left: 2px solid var(--accent);
  font-size: 14.5px;
  line-height: 1.45;
  color: var(--ink-mute);
  max-width: 64ch;
}

/* ---------------- testmodus ----------------
   Bewust een andere toon dan de app: dit is gereedschap, geen onderdeel van
   de challenge. Dus vlak, technisch en duidelijk gemarkeerd. */
.previewbar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 14px 0 0;
  padding: 10px 14px;
  border: 1px dashed var(--edge);
  border-radius: var(--r);
  background: var(--sunken);
  font-size: 12.5px;
  color: var(--ink-mute);
}
.tag-test {
  flex: none;
  border-radius: 999px;
  padding: 2px 9px;
  background: var(--coral);
  color: #fff;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.previewbar .pv-date {
  flex: none;
  min-width: 8.5em;
  color: var(--ink);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.previewbar .mini { flex: none; padding: 3px 10px; line-height: 1.3; }
.previewbar .pv-note { flex: 1; min-width: 12em; }

.previewbar input[type="range"] {
  flex: 1 1 190px;
  min-width: 150px;
  height: 18px;
  margin: 0;
  background: none;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}
.previewbar input[type="range"]::-webkit-slider-runnable-track {
  height: 3px; border-radius: 99px; background: var(--edge);
}
.previewbar input[type="range"]::-moz-range-track {
  height: 3px; border-radius: 99px; background: var(--edge);
}
.previewbar input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px; height: 14px; margin-top: -5.5px;
  border: 0; border-radius: 99px; background: var(--accent);
}
.previewbar input[type="range"]::-moz-range-thumb {
  width: 14px; height: 14px; border: 0; border-radius: 99px; background: var(--accent);
}

/* ---------------- navigatie ---------------- */

.tabs {
  display: flex;
  gap: 4px;
  margin: 22px 0 24px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.tabs::-webkit-scrollbar { display: none; }
.tabs button {
  flex: none;
  border: 1px solid transparent;
  background: none;
  color: var(--ink-faint);
  font-family: inherit;
  font-size: 14px;
  font-weight: 400;
  padding: 8px 15px;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
}
.tabs button:hover { color: var(--ink); }
.tabs button[aria-current="page"] {
  color: var(--on-accent);
  background: var(--accent-fill);
  font-weight: 800;
}

/* ---------------- kaarten ---------------- */

.card {
  background: var(--surface);
  border: 1px solid var(--edge-soft);
  border-radius: var(--r-lg);
  padding: 22px;
}
.card--quiet { background: transparent; border-color: var(--edge-soft); }
.card--flush { padding: 0; overflow: hidden; }

.grid { display: grid; gap: var(--gap); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }

.eyebrow {
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.eyebrow--flame { color: var(--accent); }
.eyebrow--coral { color: var(--coral); }

.lede { color: var(--ink-mute); line-height: 1.55; margin: 8px 0 0; max-width: 52ch; }

.hairline { height: 1px; background: var(--edge-soft); border: 0; margin: 0; }

/* Bonusactiviteiten: behaald licht op, de rest staat gedimd te wachten. */
.bonusrow {
  display: flex; align-items: center; gap: 10px;
  font-size: 13.5px; color: var(--ink-faint);
}
.bonusrow .grow { flex: 1; }
.bonusrow strong { color: var(--ink-faint); font-weight: 800; }
.bonusrow.is-done { color: var(--ink); }
.bonusrow.is-done strong { color: var(--accent); }
.bonusrow .mark { width: 18px; display: grid; place-items: center; }
.bonusrow .pip {
  width: 6px; height: 6px; border-radius: 50%;
  border: 1px solid var(--edge); display: block;
}
.bonusrow .times { color: var(--accent); font-size: 12px; }

/* ---------------- vandaag ---------------- */

.today {
  display: grid;
  gap: 26px;
  grid-template-columns: minmax(0, 1fr) 280px;
  align-items: center;
}
@media (max-width: 760px) {
  .today { grid-template-columns: 1fr; gap: 30px; }
  .today .candle-col { justify-self: center; }
}

.bignum {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-top: 10px;
}
.bignum input {
  width: 3ch;
  min-width: 1.6ch;
  max-width: 100%;
  border: 0;
  border-bottom: 2px solid var(--edge);
  background: none;
  color: var(--accent);
  font-family: inherit;
  font-weight: 800;
  font-size: clamp(46px, 12vw, 68px);
  line-height: 1;
  letter-spacing: -0.03em;
  padding: 0 0 6px;
  text-align: left;
  font-variant-numeric: tabular-nums;
  -moz-appearance: textfield;
}
.bignum input::-webkit-outer-spin-button,
.bignum input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.bignum input:focus { outline: none; border-bottom-color: var(--accent); }
.bignum input::placeholder { color: var(--ink-faint); }
.bignum .unit { color: var(--ink-mute); font-size: 15px; }

.goalline { margin-top: 16px; max-width: 420px; }
.goalline .track { height: 3px; background: var(--edge); border-radius: 99px; overflow: hidden; }
.goalline .fill { height: 100%; background: var(--accent); border-radius: 99px; transition: width .45s ease; }
.goalline .note { margin-top: 7px; font-size: 12.5px; color: var(--ink-faint); }

.saved { font-size: 12.5px; color: var(--accent); }

/* weekstrip */
.weeknav { display: flex; align-items: center; gap: 10px; }
.weeknav .mini { padding: 3px 10px; line-height: 1.2; }

.weekstrip { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-top: 4px; }
.weekstrip.days-4 { grid-template-columns: repeat(4, 1fr); max-width: 60%; }
.weekstrip.days-6 { grid-template-columns: repeat(6, 1fr); }
@media (max-width: 560px) {
  .weekstrip, .weekstrip.days-4, .weekstrip.days-6 {
    grid-template-columns: repeat(auto-fit, minmax(72px, 1fr));
    max-width: none;
  }
}

.daycell {
  border: 1px solid var(--edge-soft);
  background: var(--surface-2);
  border-radius: 10px;
  padding: 8px 4px 9px;
  text-align: center;
  cursor: pointer;
  font-family: inherit;
  color: var(--ink);
  display: grid;
  gap: 3px;
  min-width: 0;
}
.daycell:hover { border-color: var(--edge); }
.daycell .dow { font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint); }
.daycell .val { font-size: 13px; font-variant-numeric: tabular-nums; font-weight: 800; }
.daycell .val--empty { color: var(--ink-faint); font-weight: 400; }
.daycell[data-state="goal"] { border-color: var(--accent); }
.daycell[data-state="goal"] .val { color: var(--accent); }
.daycell[data-state="part"] .val { color: var(--blush); }
.daycell[aria-current="date"] { background: var(--accent-fill); border-color: var(--accent-fill); }
.daycell[aria-current="date"] .dow { color: var(--on-accent-mute); }
.daycell[aria-current="date"] .val { color: var(--on-accent); }
.daycell:disabled { cursor: default; opacity: .45; }

/* de kaars */
.candle-col { display: grid; gap: 14px; justify-items: center; }
.candle-col svg { display: block; overflow: visible; width: 176px; height: auto; }
@keyframes flicker {
  0%   { transform: scale(1) translateY(0); opacity: .95; }
  35%  { transform: scale(1.05) translateY(-0.6px); opacity: 1; }
  70%  { transform: scale(.97) translateY(0.4px); opacity: .92; }
  100% { transform: scale(1.03) translateY(-0.3px); opacity: .98; }
}
.flame-live { animation: flicker 3.4s ease-in-out infinite alternate; transform-origin: center bottom; }
@media (prefers-reduced-motion: reduce) {
  .flame-live { animation: none; }
  .goalline .fill, .bar span { transition: none; }
}

.monthstrip { display: flex; gap: 2px; align-items: flex-end; height: 30px; max-width: 380px; }
.monthaxis {
  display: flex; justify-content: space-between;
  max-width: 380px; margin-top: 11px;
  font-size: 10.5px; color: var(--ink-faint); font-variant-numeric: tabular-nums;
}
.monthstrip i {
  display: block;
  position: relative;
  flex: 1;
  min-width: 0;
  border-radius: 1px;
  background: var(--edge);
}
.monthstrip i[data-today]::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -6px;
  height: 2px;
  background: var(--accent);
}
.monthstrip i[data-s="goal"] { background: var(--accent); }
.monthstrip i[data-s="part"] { background: var(--coral-dim); }


/* statregel */
.stats { display: flex; flex-wrap: wrap; gap: 22px; }
.stat .k { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-mute); }
.stat .v { font-weight: 800; font-size: 21px; font-variant-numeric: tabular-nums; margin-top: 2px; }
.stat .v small { font-weight: 400; font-size: 13px; color: var(--ink-mute); letter-spacing: 0; }

/* ---------------- knoppen ---------------- */

.btn {
  font-family: inherit;
  font-size: 14px;
  font-weight: 800;
  padding: 11px 20px;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  background: var(--accent-fill);
  color: var(--on-accent);
}
.btn:hover { filter: brightness(1.08); }
.btn:disabled { background: var(--surface-2); color: var(--ink-faint); cursor: not-allowed; filter: none; }
.btn--coral { background: var(--coral); color: #fff; }
.btn--ghost { background: none; border-color: var(--edge); color: var(--ink); font-weight: 400; }
.btn--ghost:hover { border-color: var(--accent); filter: none; }
.btn--link {
  background: none; border: 0; padding: 0;
  color: var(--ink-mute); font-family: inherit; font-size: 13px;
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.btn--link:hover { color: var(--accent); }

.seg { display: inline-flex; gap: 4px; padding: 3px; background: var(--surface-2); border-radius: 999px; }
.seg button {
  border: 0; background: none; color: var(--ink-mute);
  font-family: inherit; font-size: 13px; padding: 7px 14px;
  border-radius: 999px; cursor: pointer; white-space: nowrap;
}
.seg button[aria-pressed="true"] { background: var(--surface); color: var(--ink); font-weight: 800; }

/* ---------------- formulier ---------------- */

.field { display: grid; gap: 6px; }
.field > label { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-mute); }
.hint { color: var(--ink-faint); font-size: 12.5px; margin-top: 6px; }
.hint-names { font-weight: 800; margin-top: 2px; }
.input {
  width: 100%;
  padding: 11px 13px;
  border-radius: 10px;
  border: 1px solid var(--edge);
  background: var(--surface-2);
  color: var(--ink);
  font-family: inherit;
  font-size: 15px;
}
.input:focus { outline: none; border-color: var(--accent); }

/* Pincode: twee vakjes, groot genoeg voor een duim. */
.pin { display: flex; gap: 10px; }
.pin-box {
  width: 56px; height: 60px; text-align: center;
  font: 800 26px/1 var(--display); letter-spacing: .02em;
  color: var(--accent); background: var(--ground);
  border: 1px solid var(--edge); border-radius: 10px;
}
.pin-box:focus { outline: none; border-color: var(--accent); }
@media (max-width: 480px) { .pin-box { width: 64px; height: 64px; } }
select.input {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-mute) 50%),
                    linear-gradient(135deg, var(--ink-mute) 50%, transparent 50%);
  background-position: right 17px center, right 12px center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 34px;
}

.notice {
  border-radius: 10px;
  padding: 11px 13px;
  font-size: 13.5px;
  border: 1px solid;
}
.notice--bad { background: var(--bad-wash); border-color: var(--coral-dim); color: var(--blush); }
.notice--good { background: var(--ok-wash); border-color: var(--green-lit); color: var(--sage); }

/* ---------------- scorebord ---------------- */

.row {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 15px 20px;
  border-bottom: 1px solid var(--edge-soft);
}
.row:last-child { border-bottom: 0; }
.row--me { background: var(--accent-wash); }
.row .rank { font-weight: 800; font-size: 20px; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.row--lead .rank { color: var(--accent); }
.row .name { font-weight: 800; font-size: 17px; }
.row .members { font-size: 12.5px; color: var(--ink-mute); margin: 1px 0 8px; }
.row .figure { text-align: right; }
.row .figure b { font-weight: 800; font-size: 18px; font-variant-numeric: tabular-nums; display: block; }
.row .figure span { font-size: 11.5px; color: var(--ink-mute); }

.tag {
  display: inline-block; margin-left: 7px; padding: 1px 7px;
  border-radius: 99px; background: var(--accent-fill); color: var(--on-accent);
  font-size: 10.5px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
  vertical-align: 2px;
}

/* Balk in twee delen: gelopen stappen (groen) en bonus (amber). */
.bar { display: flex; height: 5px; background: var(--edge); border-radius: 99px; overflow: hidden; }
.bar span { display: block; height: 100%; transition: width .5s ease; }
.bar .b-steps { background: var(--green-lit); }
.bar .b-bonus { background: var(--accent); }
.bar--lead .b-steps { background: var(--sage); }

.boardnote {
  padding: 13px 20px;
  background: var(--sunken-soft);
  font-size: 12.5px;
  color: var(--ink-mute);
}

.legend { display: flex; gap: 16px; font-size: 12px; color: var(--ink-mute); align-items: center; }
.legend i { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 6px; vertical-align: -1px; }

.tablewrap { overflow-x: auto; }
table.board { width: 100%; border-collapse: collapse; font-size: 14px; }
table.board th {
  text-align: left; font-weight: 400; font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-mute); padding: 13px 10px; white-space: nowrap;
}
table.board td { padding: 12px 10px; border-top: 1px solid var(--edge-soft); white-space: nowrap; }
table.board th:first-child, table.board td:first-child { padding-left: 20px; }
table.board th:last-child, table.board td:last-child { padding-right: 20px; }
table.board .num { text-align: right; font-variant-numeric: tabular-nums; }
table.board tr.me { background: var(--accent-wash); }
table.board td.who { font-weight: 800; white-space: normal; }

/* ---------------- route ---------------- */

.routecard { background: var(--surface); border: 1px solid var(--edge-soft); border-radius: var(--r-lg); overflow: hidden; }
.routemap { display: block; width: 100%; }
.teamline { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.teamline .nm { font-weight: 800; font-size: 16px; }
.teamkm {
  display: flex; align-items: baseline; gap: 7px;
  margin: 6px 0 11px; font-size: 12.5px; color: var(--ink-mute);
}
.teamkm b { font-size: 19px; font-weight: 800; font-variant-numeric: tabular-nums; }

/* ---------------- voet ---------------- */

.foot {
  margin-top: 44px; padding-top: 18px; border-top: 1px solid var(--edge-soft);
  display: flex; flex-wrap: wrap; gap: 10px 20px; align-items: center;
  font-size: 12.5px; color: var(--ink-faint);
}
.foot a, .foot button { color: var(--ink-faint); }
.foot .spacer { margin-left: auto; }

/* ---------------- beheer ---------------- */

.adminrow {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 0; border-bottom: 1px solid var(--edge-soft);
}
.adminrow:last-of-type { border-bottom: 0; }
.adminrow .grow { flex: 1; min-width: 0; }
.mini {
  border: 1px solid var(--edge); background: none; color: var(--ink-mute);
  border-radius: 999px; padding: 4px 11px; font-family: inherit; font-size: 12.5px; cursor: pointer;
}
.mini:hover { border-color: var(--coral); color: var(--blush); }
.mini:disabled { opacity: .4; cursor: not-allowed; }

.teambox { border: 1px solid var(--edge-soft); border-radius: var(--r); padding: 13px; }
.teambox .hd { display: flex; justify-content: space-between; align-items: baseline; font-weight: 800; }
.teambox .hd .cnt { font-weight: 400; font-size: 12px; color: var(--ink-mute); }
.teambox .hd button { border: 0; background: none; color: var(--ink-faint); cursor: pointer; font-size: 13px; padding: 2px 5px; margin-left: 6px; font-weight: 400; }
.teambox .hd button:hover { color: var(--coral); }
.teambox ul { list-style: none; margin: 9px 0 0; padding: 0; display: grid; gap: 5px; }
.teambox li { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--ink-mute); }
.teambox li .grow { flex: 1; min-width: 0; }
.teambox li .site { color: var(--ink-faint); font-size: 11.5px; }
.teambox li button { border: 0; background: none; color: var(--ink-faint); cursor: pointer; font-size: 13px; padding: 2px 5px; }
.teambox li button:hover { color: var(--coral); }
/* Twee knoppen naast elkaar (pincode terugzetten, verwijderen) voelen als
   één blokje aan zonder wat lucht ertussen — verwijderen is onherroepelijk. */
.teambox li button + button { margin-left: 6px; }

.loading { padding: 60px 20px; color: var(--ink-mute); }

/* Het pincodeveld dat onder een deelnemer uitklapt in beheer. */
.teambox li.pinrow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.teambox li.pinrow .pin-box { width: 40px; height: 42px; font-size: 19px; }
/* Hetzelfde uitklaprijtje, maar met de teamkeuze — de weg zonder slepen. */
.teambox li.moverow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.teambox li.moverow .input { padding: 7px 10px; font-size: 13px; flex: 1; min-width: 120px; }

/* Slepen tussen teams. De greep staat er altijd (anders is niet te zien dat
   het kan), de omranding pas zodra er iets in de lucht hangt: een vak dat
   altijd oplicht leest als een knop. */
.teambox li[draggable="true"] { cursor: grab; }
.teambox li[draggable="true"]:active { cursor: grabbing; }
.teambox li.dragging { opacity: .45; }
.teambox li .handle { color: var(--ink-faint); margin-right: 5px; letter-spacing: -1px; }
.teambox li.empty { color: var(--ink-faint); font-size: 12.5px; }
.teambox.candrop { border-color: var(--edge); border-style: dashed; }
.teambox.isover {
  border-color: var(--accent); border-style: solid;
  background: var(--accent-wash);
}
/* Een vol team: de sleep mag er niet in, en dat hoort te zien te zijn vóór
   je loslaat. Coral is in deze app de kleur van "dit kan niet". */
.teambox.dropno { border-color: var(--bad-edge); border-style: dashed; }
.teambox.isover-no {
  border-color: var(--coral); border-style: dashed;
  background: var(--bad-wash-soft);
}
.teambox.dropno .hd .cnt, .teambox.isover-no .hd .cnt { color: var(--coral); }

/* Een bonusregel is nu een knop: aantikken kent hem toe, nog eens terugdraaien. */
button.bonusrow {
  width: 100%; text-align: left; border: 0; background: none;
  padding: 4px 6px; margin: -4px -6px; border-radius: 8px;
  font: inherit; cursor: pointer;
}
button.bonusrow:hover:not(:disabled) { background: var(--ground); }
button.bonusrow:disabled { cursor: default; }
.bonusrow .ritme {
  display: block; font-size: 11.5px; letter-spacing: .04em;
  text-transform: uppercase; color: var(--ink-faint); margin-top: 2px;
}

/* ---------------- agenda: activiteiten met een datum ---------------- */

.agendahd { display: flex; align-items: flex-start; gap: 16px; justify-content: space-between; }
.sitetag {
  flex: none;
  border: 1px solid var(--edge); border-radius: 999px;
  padding: 4px 12px; font-size: 12.5px; color: var(--ink-mute);
  white-space: nowrap;
}

.events { display: grid; gap: 12px; margin-top: 16px; }
.eventrow {
  border: 1px solid var(--edge-soft); border-radius: var(--r);
  padding: 14px 16px; display: grid; gap: 5px;
  border-left: 3px solid var(--edge);
}
/* Waar je bij bent, licht op als een kaarsje: hetzelfde amber als de rest. */
.eventrow.is-in { border-left-color: var(--accent); }
.eventrow.is-past { opacity: .55; border-left-color: var(--edge-soft); }

.eventrow .when {
  font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--accent);
}
.eventrow.is-past .when { color: var(--ink-faint); }
.eventrow .what { font-weight: 800; font-size: 16px; color: var(--ink); }
.eventrow .meta {
  display: flex; flex-wrap: wrap; gap: 4px 14px;
  font-size: 12.5px; color: var(--ink-faint);
}
.eventrow .meta .pts { color: var(--sage); }
.eventrow .meta .full { color: var(--coral); }
.eventrow .who { font-size: 12.5px; color: var(--ink-mute); line-height: 1.5; }
.eventrow .who .lbl { color: var(--ink-faint); }
/* Eén vrij veld per activiteit voor wat het projectteam moet weten. Smal
   gehouden: het is een regel, geen verhaal, en naast de knoppen eronder moet
   het niet als het hoofdonderwerp van de kaart gaan ogen. */
.eventrow .eventnote { margin-top: 9px; max-width: 460px; gap: 5px; }
.eventrow .eventnote > label { font-size: 10.5px; }
.eventrow .eventnote .input { padding: 8px 11px; font-size: 13.5px; }
.eventrow .eventnote .hint { margin-top: 2px; font-size: 12px; }

.eventrow .act { display: flex; align-items: center; gap: 12px; margin-top: 7px; flex-wrap: wrap; }
.eventrow .act .in { font-size: 13px; color: var(--accent); }

/* ---------------- events in beheer ---------------- */

.eventadmin { border-bottom: 1px solid var(--edge-soft); }
.eventadmin:last-of-type { border-bottom: 0; }
.eventadmin.is-off { opacity: .55; }
.eventadmin > .adminrow { border-bottom: 0; flex-wrap: wrap; }
.eventadmin .grow strong { display: block; font-size: 14px; color: var(--ink); }
.eventadmin .grow .sub {
  display: block; font-size: 12px; color: var(--ink-faint); margin-top: 2px;
}
.eventadmin .signups {
  margin: 0 0 12px; padding: 12px 14px;
  border: 1px solid var(--edge-soft); border-radius: var(--r);
  background: var(--surface-2);
}
.eventadmin .signups .adminrow { padding: 7px 0; font-size: 13.5px; color: var(--ink-mute); }
.eventadmin .signups .site { color: var(--ink-faint); font-size: 11.5px; margin-left: 8px; }
/* De opmerking op een eigen regel onder de naam: het projectteam leest deze
   lijst af, dus hij moet niet achter de naam wegvallen. */
.eventadmin .signups .note {
  display: block; margin-top: 3px; font-size: 12.5px; color: var(--ink-mute);
  line-height: 1.45; overflow-wrap: anywhere;
}
.eventadmin .signups .note .lbl { color: var(--ink-faint); }

.tick { display: flex; align-items: center; gap: 7px; font-size: 12.5px; cursor: pointer; }
.tick input { accent-color: var(--coral); width: 16px; height: 16px; }

.sitepick { display: flex; flex-wrap: wrap; gap: 8px; }
.sitepick label {
  display: flex; align-items: center; gap: 7px; cursor: pointer;
  border: 1px solid var(--edge); border-radius: 999px;
  padding: 6px 13px; font-size: 13px; color: var(--ink-mute);
}
.sitepick label.is-on { border-color: var(--accent); color: var(--ink); }
.sitepick input { accent-color: var(--coral); }

@media (max-width: 560px) {
  .agendahd { flex-direction: column; gap: 10px; }
  .eventrow .act .btn { width: 100%; }
}