/* =============================================================
   Design system tokens
   Kleuren en spacing als custom properties zodat we ze overal
   kunnen hergebruiken zonder magic numbers in de code.
   ============================================================= */

:root {
  /* Achtergronden — van donker naar minder donker (tonal layering) */
  --bg-base:    #111318;   /* diepste laag: de pagina zelf */
  --bg-zone:    #1a1d24;   /* zones: licht omhoog van de base */
  --bg-card:    #22252e;   /* kaarten/widgets: nog een laagje */
  --bg-raised:  #2a2e38;   /* actieve/uitgelichte elementen */

  /* Accent — oranje, van intens naar zacht */
  --accent:         #ff6600;
  --accent-soft:    #ffb596;

  /* Tekst */
  --text-primary:   #f0f0f0;
  --text-secondary: #9ba3b2;   /* labels, metadata */

  /* Alert (voor intent bar bij kritieke meldingen) */
  --alert:      #ffb4ab;

  /* Spacing — vaste stappen zodat alles in één ritme valt */
  --space-xs:   0.25rem;   /*  4px */
  --space-sm:   0.5rem;    /*  8px */
  --space-md:   1rem;      /* 16px */
  --space-lg:   1.5rem;    /* 24px */
  --space-xl:   2rem;      /* 32px */

  /* Typografie */
  --font-display: 'Space Grotesk', sans-serif;
  --font-body:    'Inter', sans-serif;

  /* Hoekradius */
  --radius-sm:  0.375rem;
  --radius-md:  0.5rem;
}

/* =============================================================
   Reset & basis
   ============================================================= */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  height: 100%;
}

body {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  background-color: var(--bg-base);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.5;

  /* Voorkom tekstselectie — dit is een display-scherm, geen document */
  user-select: none;
}

/* =============================================================
   Dashboard-header
   Volledige breedte boven het grid. Logo links, verenigingsnaam rechts.
   ============================================================= */

.dashboard-header {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  padding: var(--space-sm) var(--space-lg);
  /* Subtiele scheiding met het grid eronder */
  border-bottom: 1px solid var(--bg-raised);
  flex-shrink: 0;
}

.dashboard-header-logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.dashboard-logo-img {
  height: 4.75rem;   /* 76px */
  width: auto;
  display: block;
}

.dashboard-header-divider {
  width: 1px;
  height: 4.75rem;
  background-color: var(--bg-raised);
  flex-shrink: 0;
}

.dashboard-header-title {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.dashboard-header-naam {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.1;
  letter-spacing: -0.01em;
}

.dashboard-header-sub {
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

/* =============================================================
   Dashboard layout
   CSS Grid: Zone 1 krijgt 75% breedte, Zone 3 de rest.
   flex: 1 vult de resterende viewport-hoogte onder de header.
   ============================================================= */

.dashboard {
  flex: 1;                          /* vult resterende hoogte na de header */
  display: grid;
  grid-template-columns: 4fr 1fr;   /* 80% / 20% — Zone 3 smaller geeft Zone 1 ruimte voor 3 kolommen */
  gap: var(--space-md);
  padding: var(--space-md);
}

/* =============================================================
   Zones
   ============================================================= */

.zone {
  /* Transparant — widgets drijven direct op --bg-base zonder extra laag */
  background-color: transparent;
  display: flex;
  flex-direction: column;
  overflow: visible;
}

.zone-content {
  flex: 1;
  padding: var(--space-lg);
  gap: var(--space-md);
}

/* Zone 1 (Nu): 3-koloms CSS Grid.
   Bovenrij: Getijde | Wind | Mini-grid (2×2).
   Wind krijgt een bredere kolom (1.3fr) omdat de kompasroos + BFT/Richting
   meer horizontale ruimte nodig hebben dan de andere widgets. Getijde en
   Mini-grid hebben van zichzelf al ruimte over — zij mogen een tikje
   smaller. Omgeving volgt op rij 2 in één kolom via auto-placement
   (valt in kolom 1 omdat hij in de HTML na mini-grid komt). */
.zone-now .zone-content {
  display: grid;
  grid-template-columns: 1fr 1.3fr 1fr;
  align-content: start;
}

/* Zone 3 (Context): verticale stapel, één kolom breed.
   Blijft flexbox zodat widgets netjes onder elkaar staan. */
.zone-context .zone-content {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

/* =============================================================
   Placeholder — tijdelijk, wordt vervangen door echte widgets
   ============================================================= */

.placeholder {
  color: var(--text-secondary);
  font-size: 0.875rem;
  font-style: italic;
}

/* =============================================================
   Widget — basisstijl voor alle widgets
   Elke widget is een zelfstandige kaart op --bg-card.
   ============================================================= */

.widget {
  background-color: var(--bg-card);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.widget-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.widget-label {
  font-family: var(--font-display);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-soft);   /* oranje-zacht voor widget-headers */
}

.widget-icon {
  width: 1.25rem;
  height: 1.25rem;
  color: var(--text-secondary);
}

/* =============================================================
   Widget: Getijden
   ============================================================= */

.widget-tides {
  /* Geen vaste breedte — vult zijn gridcel */
}

/* --- Statussectie: pijl + richting + volgende getij --- */

.tide-status {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.tide-arrow {
  width: 4rem;
  height: 4rem;
  color: var(--accent);         /* oranje pijl */
  flex-shrink: 0;
}

.tide-direction {
  font-family: var(--font-display);
  font-size: 2.75rem;
  font-weight: 700;
  line-height: 1;
  color: var(--text-primary);
  text-transform: uppercase;
}

.tide-next {
  margin-top: var(--space-sm);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

/* --- 2×2 grid met HW/LW tijden --- */

.tide-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-sm);
}

.tide-card {
  background-color: var(--bg-raised);
  border-radius: var(--radius-sm);
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  position: relative;
}

/* Het eerstvolgende getij krijgt een oranje accentbalk links en een licht getinte achtergrond */
.tide-card--next {
  background-color: #30333d;
  box-shadow: inset 3px 0 0 var(--accent);
}

.tide-card-type {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.tide-card-time {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-primary);
}

/* Dag-hint onder de tijd: alleen zichtbaar als het tij niet vandaag valt
   (bv. "morgen" als de avond-HW pas na middernacht plaatsvindt).
   min-height reserveert de ruimte ook als de span leeg is, zodat kaartjes
   met en zonder hint exact even hoog blijven en het 2×2 grid niet schokt. */
.tide-card-day {
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-soft);
  min-height: 0.875rem;
  line-height: 0.875rem;
}

/* Freshness-regel onderaan een widget. Klein en secundair zolang alles vers is;
   krijgt een waarschuwingskleur (alert-rood) zodra de data te oud is of de
   laatste fetch faalde. Gebruikt door getijden- en windwidget. */
.widget-freshness,
.tide-freshness {
  margin-top: auto;          /* duw naar onderkant van de widget */
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-secondary);
  text-align: right;
  min-height: 0.875rem;
}

.widget-freshness--stale,
.tide-freshness--stale {
  color: var(--alert);
}

/* =============================================================
   Widget: Wind
   ============================================================= */

.widget-wind {
  /* Geen vaste breedte — vult zijn gridcel */
}

/* --- Driekoloms instrumentenpaneel: BFT | Kompas | Richting ---
   De compass is absoluut gepositioneerd op het exacte midden van deze
   container (zie .wind-compass verderop). BFT en Richting worden via
   space-between naar de buitenranden geduwd, zodat ze de centrering van
   de compass nooit verstoren — ongeacht hoe breed hun tekst is. */

.wind-main {
  position: relative;              /* anker voor de absoluut-gepositioneerde compass */
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 220px;               /* reserveer hoogte die de absolute compass niet meer zelf aanbrengt */
  /* Op 2K+ schermen krijgt de Wind-kolom extra breedte — zonder cap zouden
     BFT en Richting dan steeds verder van de compass wegwaaieren.
     max-width stopt de groei op ~544px (≈ wat 1920 geeft); margin: 0 auto
     centreert de rij in de widget zodat de compass op de middenlijn blijft.
     width: 100% is hier NOODZAKELIJK — zonder dit krimpt het item tot z'n
     content-breedte (auto-margins blokkeren flex-stretch) en valt de
     absolute compass over BFT/Richting heen. */
  width: 100%;
  max-width: 34rem;
  margin: 0 auto;
}

/* Gedeelde stijl voor de label boven BFT en Richting */
.wind-block-label {
  display: block;
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: var(--space-xs);
}

/* --- Linker kolom: BFT --- */

.wind-bft-block {
  display: flex;
  flex-direction: column;
  align-items: flex-end;   /* rechts uitlijnen richting kompas */
  text-align: right;
}

.wind-bft-value {
  font-family: var(--font-display);
  font-size: 2.75rem;
  font-weight: 700;
  line-height: 1;
  color: var(--text-primary);
}

.wind-bft-desc {
  margin-top: var(--space-sm);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

/* --- Midden: kompasroos --- */

.wind-compass {
  width: 220px;
  height: 220px;
  color: var(--text-secondary);
  /* Absoluut centreren binnen .wind-main: left/top op 50%, dan terug-
     schuiven met translate(-50%, -50%) zodat het MIDDEN van de SVG op
     de middenlijn valt (niet de linkerbovenhoek). */
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

/* Kompaspijl: animatie via CSS-transitie
   transform-origin op het middelpunt van de SVG (120,120 in een 240×240 viewBox).
   De browser schaalt de SVG, maar transform-origin in px volgt de viewBox-coördinaten
   bij gebruik van SVG-transforms — wind.js zet de uiteindelijke rotatie via style.transform. */
.wind-arrow-anim {
  transform-origin: 120px 120px;
  transform: rotate(0deg);
  transition: transform 1.4s cubic-bezier(0.34, 1.56, 0.64, 1);   /* spring: lichte overshoot */
}

/* --- Rechter kolom: windrichting --- */

.wind-direction-block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;   /* links uitlijnen vanuit kompas */
}

.wind-direction-value {
  font-family: var(--font-display);
  font-size: 2.75rem;
  font-weight: 700;
  line-height: 1;
  color: var(--text-primary);
  letter-spacing: -0.02em;
}

/* --- Rangebalk: snelheid en windstoten --- */

.wind-speed-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.wind-speed-track {
  position: relative;
  height: 6px;
  background-color: var(--bg-raised);
  border-radius: 3px;
  overflow: hidden;
}

/* Windstoten: lichtere vulling als achtergrond (tot de gustwaarde) */
.wind-gust-fill {
  position: absolute;
  inset: 0;
  height: 100%;
  background-color: var(--accent);
  opacity: 0.25;
  border-radius: 3px;
  width: 0;   /* wordt door wind.js ingesteld */
  transition: width 1s ease;
}

/* Snelheid: volle vulling bovenop (tot de windsnelheidswaarde) */
.wind-speed-fill {
  position: absolute;
  inset: 0;
  height: 100%;
  background-color: var(--accent);
  border-radius: 3px;
  width: 0;   /* wordt door wind.js ingesteld */
  transition: width 1s ease;
}

.wind-speed-labels {
  display: flex;
  justify-content: space-between;
}

.wind-speed-label-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.wind-speed-label-right {
  text-align: right;
}

.wind-speed-sublabel {
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.wind-speed-value {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text-primary);
}

/* =============================================================
   Mini-widgets: Lucht, Water, Golven, UV
   Kleinere kaarten die vier op een rij passen.
   ============================================================= */

/* Container voor de 2×2 mini-widget grid.
   Vult zijn gridcel in het Zone 1 raster. */
.mini-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: var(--space-md);
}

/* Elke mini-widget vult één cel van het 2×2 grid.
   Geen vaste width/height nodig — het grid verdeelt de ruimte. */
.widget-mini {
  justify-content: flex-start;
  gap: var(--space-md);
}

/* --- Hero-getal (groot centraal cijfer) --- */

.mini-hero-section {
  display: flex;
  align-items: baseline;
  gap: 0.2rem;
}

.mini-hero-value {
  font-family: var(--font-display);
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1;
  color: var(--text-primary);
}

.mini-hero-unit {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 500;
  color: var(--text-secondary);
  margin-left: 0.15rem;
}

/* Subtekst onder het hero-getal */
.mini-sub {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--accent-soft);
}

.mini-sub--muted {
  color: var(--text-secondary);
}

/* =============================================================
   Widget: Golfhoogte — surfgolf icoon
   ============================================================= */

.wave-surf-icon {
  width: 80%;
  max-height: 56px;
  margin-top: auto;   /* duwt het icoon naar de onderkant van de kaart */
  opacity: 0.6;
}

/* =============================================================
   Widget: UV-index — horizontale kleurenbalk
   ============================================================= */

.uv-bar-container {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

/* De balk zelf: 5 gekleurde segmenten naast elkaar */
.uv-bar {
  position: relative;
  display: flex;
  height: 8px;
  border-radius: 4px;
  overflow: visible;
}

.uv-segment {
  flex: 1;
}

/* Afgeronde uiteinden op het eerste en laatste segment */
.uv-segment:first-child { border-radius: 4px 0 0 4px; }
.uv-extreme  { border-radius: 0 4px 4px 0; }

/* WHO kleurschaal */
.uv-low       { background-color: #4eb400; }   /* 0-2   */
.uv-moderate  { background-color: #f7e400; }   /* 3-5   */
.uv-high      { background-color: #f78b00; }   /* 6-7   */
.uv-very-high { background-color: #d8001d; }   /* 8-10  */
.uv-extreme   { background-color: #b54cff; }   /* 11+   */

/* Marker: verticale lijn + ronde stip bovenop de balk */
.uv-marker {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: none;
}

.uv-marker-line {
  width: 2px;
  height: 20px;
  background-color: var(--text-primary);
  border-radius: 1px;
}

.uv-marker-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--text-primary);
  box-shadow: 0 0 8px rgba(255, 102, 0, 0.6);
  margin-top: -1px;
}

/* Schaal-labels onder de balk */
.uv-bar-labels {
  display: flex;
  justify-content: space-between;
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  color: var(--text-secondary);
  opacity: 0.5;
}

/* =============================================================
   Widget: Klok (split-flap)
   Mechanische "station board" stijl voor Zone 3.

   Structuur per cel:
     .flap-cell
       .flap-half.flap-half-top    — statische bovenhelft (huidige waarde)
         .flap-inner               — 7rem-hoog "ghost" element met het cijfer
       .flap-half.flap-half-bottom — statische onderhelft (huidige waarde)
         .flap-inner               — idem
       [bij animatie worden dynamisch toegevoegd:]
       .flap-overlay.overlay-upper — bovenste flap die omlaag klapt (oude waarde)
       .flap-overlay.overlay-lower — onderste flap die omhoog klapt (nieuwe waarde)

   Kerntruc voor de cijfer-positionering:
   - Elke .flap-half is slechts 50% van de celhoogte en heeft overflow: hidden
   - De .flap-inner BINNEN een halve cel is zo hoog als de HELE cel (7rem)
     en heeft het cijfer in zijn verticale midden
   - Door .flap-inner in de bovenhelft op top:0 te zetten valt het midden
     van het cijfer precies op de deellijn (onderrand van de bovenhelft)
   - Idem voor de onderhelft maar dan met bottom:0
   - Resultaat: we zien exact de bovenkant of onderkant van het cijfer,
     zonder dat er tekst "uit beeld" valt

   Animatie via twee CSS-keyframes die parallel draaien (500ms totaal):
   - flip-upper: rotateX(0) → rotateX(-90) gedurende eerste helft (dan blijven)
   - flip-lower: rotateX(90) blijven gedurende eerste helft → rotateX(0)
   Resultaat: eerst valt de oude top omlaag, dan klapt de nieuwe bottom op.
   ============================================================= */

.widget-klok {
  width: 100%;           /* vult volledige kolombreedte van Zone 3 */
  align-items: center;   /* display + weekstrip + datum horizontaal gecentreerd */
  /* Asymmetrische padding: royaal verticaal, krap horizontaal.
     De klok vecht om iedere horizontale pixel, terwijl Zone 3 verticaal
     overvloed heeft — dus geven we horizontaal ruimte vrij aan de cellen. */
  padding: var(--space-lg) var(--space-sm);
  gap: var(--space-xl);  /* extra lucht tussen klok, weekstrip en datum */
}

/* --- De display: rij van cijfer-cellen met dubbelepunt in het midden --- */

.klok-display {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  /* perspective geeft de 3D-flip zijn diepte-gevoel;
     zonder dit zou de rotatie er plat en stijf uitzien. */
  perspective: 1200px;
}

/* Een individuele flip-cel. position: relative zodat de absoluut
   gepositioneerde halven en overlays binnen de cel blijven. */
.flap-cell {
  position: relative;
  width: 4.5rem;
  height: 6.25rem;
  font-family: var(--font-display);
  font-weight: 700;
  /* font-size hier centraal — alle kinderen erven dit zodat top, bottom en
     de overlays gegarandeerd identiek renderen (anders zie je een "sprong"
     op het moment dat een overlay de statische helft vervangt) */
  font-size: 5rem;
  line-height: 1;
  /* tabular-nums zorgt dat elke cijferbreedte gelijk is — anders zou
     een "1" smaller zijn dan een "8" en zou de klok schokken */
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
}

/* Gedeelde stijl voor de twee statische halven en de twee overlay-flaps:
   elk is een halve cel hoog, positioneerd absoluut, met overflow: hidden
   zodat de 7rem-hoge .flap-inner erbinnen netjes wordt geclipt. */
.flap-half,
.flap-overlay {
  position: absolute;
  left: 0;
  right: 0;
  height: 50%;
  overflow: hidden;
  background-color: var(--bg-raised);
  /* backface-visibility: hidden voorkomt dat we de achterkant van een
     geroteerde overlay zien (inverse schimmen van de tekst) */
  backface-visibility: hidden;
}

.flap-half-top,
.overlay-upper {
  top: 0;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  /* Donkere "deellijn" langs de onderrand voor het mechanische effect */
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.55);
}

.flap-half-bottom,
.overlay-lower {
  bottom: 0;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  /* De onderhelft krijgt een iets donkerder tint — lijkt op de schaduw
     die de bovenste flap werpt in een echt mechanisch flipbord */
  background-color: #1e2028;
  box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.55);
}

/* Het "ghost" element binnen een halve cel: net zo hoog als de HELE cel
   zodat het cijfer dat erin staat vertikaal gecentreerd op de deellijn valt.
   Met overflow: hidden op de halve cel zie je dan automatisch alleen de
   juiste helft van het cijfer. */
.flap-inner {
  position: absolute;
  left: 0;
  right: 0;
  /* exact gelijk aan celhoogte — hou deze twee in sync */
  height: 6.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Binnen de BOVENhelft: ghost zit aan de top van de halve cel.
   Hoogte 7rem steekt dus uit boven het celmidden heen — maar door
   overflow:hidden zien we alleen de onderkant van de ghost, en dat
   is precies het bovenste deel van het cijfer. */
.flap-half-top .flap-inner,
.overlay-upper .flap-inner {
  top: 0;
}

/* Binnen de ONDERhelft: ghost zit aan de bottom. De ghost steekt
   dus naar boven uit het celmidden — maar overflow:hidden laat alleen
   het onderste deel zien, wat het onderste deel van het cijfer is. */
.flap-half-bottom .flap-inner,
.overlay-lower .flap-inner {
  bottom: 0;
}

/* --- Animatie: twee overlays met CSS-keyframes ---
   Beide worden in klok.js toegevoegd aan de cel wanneer een cijfer wisselt.
   Ze starten automatisch hun animation en worden na afloop weer verwijderd. */

.overlay-upper {
  /* Scharnier langs de onderrand (de deellijn) */
  transform-origin: 50% 100%;
  z-index: 3;
  animation: flip-upper 500ms ease-in forwards;
}

.overlay-lower {
  /* Scharnier langs de bovenrand (de deellijn) */
  transform-origin: 50% 0%;
  z-index: 3;
  animation: flip-lower 500ms ease-out forwards;
}

@keyframes flip-upper {
  /* eerste helft: valt van 0° naar -90° (oude top kiept weg) */
  0%   { transform: rotateX(0deg); }
  50%  { transform: rotateX(-90deg); }
  /* tweede helft: blijft onzichtbaar (onder de deellijn) */
  100% { transform: rotateX(-90deg); }
}

@keyframes flip-lower {
  /* eerste helft: blijft onzichtbaar (boven de deellijn) */
  0%   { transform: rotateX(90deg); }
  50%  { transform: rotateX(90deg); }
  /* tweede helft: klapt omlaag van 90° naar 0° (nieuwe bottom valt op zijn plek) */
  100% { transform: rotateX(0deg); }
}

/* --- Dubbelepunt in het midden van de display --- */

.klok-colon {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1rem;
  height: 6.25rem;
  padding: 0 0.2rem;
}

.klok-colon span {
  display: block;
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background-color: var(--accent);
  /* Zachte "heartbeat" pulse elke 2s — subtiel teken van leven */
  animation: klok-colon-pulse 2s ease-in-out infinite;
}

.klok-colon span:last-child {
  animation-delay: 1s;
}

@keyframes klok-colon-pulse {
  0%, 100% { opacity: 0.35; }
  50%      { opacity: 1; }
}

/* --- Weekstrip: 7 dag-chips, vandaag in oranje --- */

.klok-weekstrip {
  display: flex;
  gap: var(--space-xs);
  width: 100%;
  /* Max-width zodat de strip niet absurd breed wordt als de widget
     ooit meer ruimte krijgt — hij blijft gecentreerd binnen de widget. */
  max-width: 17rem;
  font-family: var(--font-display);
  font-size: 0.75rem;     /* iets kleiner zodat 7 chips comfortabel passen in smaller Zone 3 */
  font-weight: 500;
  letter-spacing: 0.08em;
}

/* Elke chip krijgt flex: 1 zodat ze samen de volle weekstrip-breedte
   verdelen in gelijke delen, ongeacht de beschikbare ruimte. */
.klok-weekdag {
  flex: 1;
  padding: 0.45rem 0;
  text-align: center;
  color: var(--text-secondary);
  background-color: var(--bg-raised);
  border-radius: var(--radius-sm);
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Vandaag: volle oranje vulling. Tekst wordt donker zodat het contrast
   met de accent-kleur goed is en de "chip" leest als geselecteerd. */
.klok-weekdag--actief {
  background-color: var(--accent);
  color: var(--bg-base);
  font-weight: 700;
}

/* --- Volledige datum onder de weekstrip --- */

.klok-datum {
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

/* =============================================================
   Widget: Omgeving (Sky Strip)
   Secundaire weerdata — druk, vocht, bewolking, zicht + conditie.
   Concept: de weerconditie is niet "één van de vijf" maar de
   SFEER waarin de andere vier zitten. Bovenin een subtiele kleur-
   wash die per conditie verschilt, een horizon-lijn als tonale
   scheiding, en onderin vier gelijkwaardige cijfers.
   ============================================================= */

.widget-omgeving {
  position: relative;
  overflow: hidden;
  /* isolation: maakt het widget een eigen stacking-context zodat
     de gradient in ::before met z-index:0 onder de content blijft
     zonder invloed op de rest van de pagina. */
  isolation: isolate;
}

/* De sky-gradient is een ::before die alleen de bovenste ~55%
   van het widget vult. Kleur komt uit --sky-gradient, gezet via
   het data-conditie attribuut. De transitie laat de "lucht" traag
   overvloeien als de conditie verandert — enig bewegend element. */
.widget-omgeving::before {
  content: '';
  position: absolute;
  inset: 0 0 45% 0;
  background: var(--sky-gradient,
    linear-gradient(180deg, rgba(155,163,178,0.04) 0%, rgba(155,163,178,0) 100%));
  pointer-events: none;
  transition: background 1200ms ease-in-out;
  z-index: 0;
}

/* Alle content boven de gradient laten zweven */
.widget-omgeving > * {
  position: relative;
  z-index: 1;
}

/* --- Sky-band: conditie-tekst links, glyph rechts --- */

.omgeving-sky {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  min-height: 5.5rem;
}

.omgeving-conditie {
  font-family: var(--font-display);
  font-size: 2.25rem;
  font-weight: 500;
  line-height: 1.05;
  color: var(--text-primary);
  /* tekst mag niet door de glyph lopen als hij lang is */
  min-width: 0;
  flex: 1 1 auto;
  /* subtiele overgang als de conditie verandert */
  transition: opacity 600ms ease;
}

.omgeving-glyph {
  width: 5rem;
  height: 5rem;
  color: var(--accent-soft);
  flex-shrink: 0;
  opacity: 0.9;
}

/* --- Horizon: tonale lijn, fade in/out aan de randen zodat het
       geen harde streep wordt. Geen border, puur een gradient-div. --- */
.omgeving-horizon {
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 181, 150, 0.18) 15%,
    rgba(255, 181, 150, 0.18) 85%,
    transparent 100%
  );
}

/* --- Metric-rij: vier metrics eerlijk verdeeld over de widget-breedte ---
   Flex met justify-content: space-between: eerste metric plakt tegen de
   linkerrand, laatste tegen de rechterrand, resterende ruimte verdeelt
   zich gelijk tussen de 3 tussenruimtes. Wisselende waardebreedtes
   (bv. "10 km" → "1.5 km") duwen Druk en Zicht nooit van hun ankerpunt —
   alleen de gaps ertussen berekenen opnieuw. */

.omgeving-metrics {
  display: flex;
  justify-content: space-between;
  gap: var(--space-sm);   /* veilige minimum-afstand mocht een waarde ooit extreem lang worden */
}

.omgeving-metric {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  align-items: flex-start;
}

.omgeving-metric-label {
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-soft);
}

.omgeving-metric-value {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1;
  color: var(--text-primary);
  /* getallen even breed voor een rustig rijtje als waarden wisselen */
  font-variant-numeric: tabular-nums;
  display: inline-flex;
  align-items: baseline;
  gap: 0.15rem;
}

/* <em> binnen de waarde dient als unit-suffix (hPa/%/km) — Inter,
   kleiner, dimmer. Niet-cursief (we gebruiken <em> alleen semantisch). */
.omgeving-metric-value em {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 400;
  font-style: normal;
  color: var(--text-secondary);
}

/* --- Sky gradients per conditie.
       Elke gradient is een subtiele vertical wash die alleen het
       bovenste gedeelte tint. We blijven binnen het design system:
       warm oranje voor zonnige condities, koel grijs-blauw voor
       bewolkt/regen, gedempt grauw voor mist, paars voor onweer.
       Alle opacities zijn laag (≤ 0.14) zodat de tekst bovenop
       nooit in de knel komt qua contrast. --- */

.widget-omgeving[data-conditie="zonnig"] {
  --sky-gradient: linear-gradient(180deg, rgba(255, 102, 0, 0.14) 0%, rgba(255, 102, 0, 0) 100%);
}
.widget-omgeving[data-conditie="helder-nacht"] {
  --sky-gradient: linear-gradient(180deg, rgba(110, 150, 210, 0.10) 0%, rgba(110, 150, 210, 0) 100%);
}
.widget-omgeving[data-conditie="half-bewolkt"] {
  --sky-gradient: linear-gradient(180deg, rgba(255, 181, 150, 0.08) 0%, rgba(255, 181, 150, 0) 100%);
}
.widget-omgeving[data-conditie="bewolkt"] {
  --sky-gradient: linear-gradient(180deg, rgba(155, 163, 178, 0.09) 0%, rgba(155, 163, 178, 0) 100%);
}
.widget-omgeving[data-conditie="mist"] {
  --sky-gradient: linear-gradient(180deg, rgba(200, 205, 215, 0.13) 0%, rgba(200, 205, 215, 0) 100%);
}
.widget-omgeving[data-conditie="regen"] {
  --sky-gradient: linear-gradient(180deg, rgba(100, 140, 200, 0.11) 0%, rgba(100, 140, 200, 0) 100%);
}
.widget-omgeving[data-conditie="sneeuw"] {
  --sky-gradient: linear-gradient(180deg, rgba(220, 230, 245, 0.10) 0%, rgba(220, 230, 245, 0) 100%);
}
.widget-omgeving[data-conditie="onweer"] {
  --sky-gradient: linear-gradient(180deg, rgba(180, 140, 220, 0.12) 0%, rgba(180, 140, 220, 0) 100%);
}
.widget-omgeving[data-conditie="onbekend"] {
  --sky-gradient: linear-gradient(180deg, rgba(155, 163, 178, 0.04) 0%, rgba(155, 163, 178, 0) 100%);
}

/* =============================================================
   Widget: Zon
   Toont zonsopkomst en zonsondergang met een halve dag-boog.
   Zit in Zone 3, tussen de klok en de systeemstatus.
   ============================================================= */

.widget-zon {
  width: 100%;
}

/* Geen extra padding rondom de SVG — de viewBox-marges zijn al voldoende.
   overflow: visible zodat de zon-stip aan het begin/einde niet wordt bijgesneden. */
.zon-boog-container {
  width: 100%;
}

.zon-boog {
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
}

/* Achtergrond-boog: de volledige halve cirkel, inactief grijs */
.zon-boog-bg {
  stroke: var(--bg-raised);
  stroke-width: 3;
  fill: none;
}

/* Oranje boog: het al verstreken deel van de dag */
.zon-boog-verstreken {
  stroke: var(--accent);
  stroke-width: 3;
  stroke-linecap: round;
  fill: none;
}

/* Zon-stip op de boog — drop-shadow geeft een zachte gloed */
.zon-stip {
  fill: var(--accent);
  filter: drop-shadow(0 0 5px var(--accent));
  transition: opacity 0.5s ease;
}

/* Subtiele horizon tussen opkomst en ondergang */
.zon-horizon {
  stroke: var(--bg-raised);
  stroke-width: 1.5;
}

/* Tijden-rij: opkomst links, ondergang rechts */
.zon-tijden {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.zon-tijd {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.zon-tijd--ondergang {
  align-items: flex-end;
  text-align: right;
}

.zon-tijd-label {
  font-family: var(--font-body);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.zon-tijd-waarde {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

/* =============================================================
   Widget: Systeem Status
   Compacte widget voor Zone 3 die de gezondheid van backend en
   databronnen toont. Elke bron krijgt een gekleurde stip
   (groen/geel/rood) en de leeftijd van de gecachte data.
   ============================================================= */

.widget-status {
  width: 100%;           /* vult Zone 3 kolombreedte */
  gap: var(--space-md);
}

/* --- Debug toggle-knop --- */

.status-debug-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.25rem;
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  opacity: 0.4;
  transition: opacity 0.2s ease, color 0.2s ease;
}

.status-debug-btn svg {
  width: 1.1rem;
  height: 1.1rem;
  display: block;
}

.status-debug-btn:hover {
  opacity: 0.7;
}

/* Knop actief als debug-modus aan staat */
.status--debug .status-debug-btn {
  opacity: 1;
  color: var(--accent);
}

/* --- Elementen die alleen in debug-modus zichtbaar zijn --- */

.status-debug-only {
  display: none;
}

/* Debug-modus: toon balk, hint en ping */
.status--debug .status-bron-balk {
  display: block;
}
.status--debug .status-debug-only {
  display: inline;
}
.status--debug .status-ping {
  display: inline;
}

/* --- Worker heartbeat: stip + label inline --- */

.status-heartbeat {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.status-heartbeat-label {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--text-primary);
  flex: 1;
}

/* Round-trip ping in ms — rechts uitgelijnd, klein en subtiel.
   Standaard verborgen; .status--debug .status-ping toont hem. */
.status-ping {
  display: none;
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}

/* --- Gekleurde status-stip (herbruikbaar voor heartbeat + bronrijen) --- */

.status-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  flex-shrink: 0;
  background-color: var(--text-secondary);
  transition: background-color 0.4s ease, box-shadow 0.4s ease;
}

.status-dot--groen {
  background-color: #4eb400;
  box-shadow: 0 0 6px rgba(78, 180, 0, 0.4);
}

.status-dot--geel {
  background-color: #f7e400;
  box-shadow: 0 0 6px rgba(247, 228, 0, 0.35);
}

.status-dot--rood {
  background-color: #d8001d;
  box-shadow: 0 0 6px rgba(216, 0, 29, 0.4);
}

/* --- Sectie-header: label links, hint rechts --- */

.status-section-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.status-section-label {
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-soft);
}

/* Klein hint-label dat uitlegt wat de fractie-getallen betekenen */
.status-section-hint {
  font-size: 0.625rem;
  font-weight: 400;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-secondary);
  opacity: 0.6;
}

/* --- Bronnen-lijst --- */

.status-bronnen {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.status-bronnen--offline {
  opacity: 0.4;
}

/* Blok per bron: tekstrij + voortgangsbalk eronder */
.status-bron-blok {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

/* Tekstrij: stip | naam | fractie (rechts) */
.status-bron-rij {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.status-bron-naam {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--text-primary);
  flex: 1;
  min-width: 0;
}

/* Leeftijd of fractie-tekst rechts in de rij */
.status-bron-tijd {
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text-secondary);
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* Voortgangsbalk: dunne track met gekleurde vulling.
   Standaard verborgen; .status--debug .status-bron-balk toont hem. */
.status-bron-balk {
  display: none;
  height: 3px;
  background-color: var(--bg-raised);
  border-radius: 1.5px;
  overflow: hidden;
  margin-left: calc(0.5rem + var(--space-sm));
}

.status-bron-balk-vulling {
  height: 100%;
  border-radius: 1.5px;
  transition: width 1s ease, background-color 0.4s ease;
}

/* Balkkleur volgt de stip-kleur */
.status-bron-balk--groen {
  background-color: #4eb400;
}
.status-bron-balk--geel {
  background-color: #f7e400;
}
.status-bron-balk--rood {
  background-color: #d8001d;
}

/* --- Laatst gecontroleerd --- */

.status-check {
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-secondary);
  text-align: right;
}

/* =============================================================
   Widget: Uurverwachting — 24-uurs forecast voor vandaag

   Strekt zich uit over alle 3 kolommen van de zone-grid zodat hij
   de volledige breedte krijgt. Auto-placement plaatst hem op rij 3
   (rij 1 = Getijde/Wind/Mini, rij 2 = Omgeving in kolom 1).

   Interne lay-out: elke rij is een 2-koloms grid met label links en
   data rechts. Alle data-kolommen zijn 24-koloms grids (of een SVG
   met viewBox 0..24), zodat dezelfde x-positie over alle rijen
   hetzelfde uur voorstelt.
   ============================================================= */

.widget-uurverwachting {
  grid-column: 1 / -1;        /* volledige breedte van zone-now grid */
  --uur-label-width: 4.5rem;  /* breedte van rij-label kolom, hergebruikt in alles */
  --uur-row-gap: 0.6rem;      /* verticale ruimte tussen rijen */
}

/* --- Canvas: gemeenschappelijke container voor alle rijen --- */

.uur-canvas {
  position: relative;                         /* anker voor now-indicator */
  display: flex;
  flex-direction: column;
  gap: var(--uur-row-gap);
  margin-top: var(--space-sm);
}

/* --- Rij: 2-koloms grid (label | data) --- */

.uur-row {
  display: grid;
  grid-template-columns: var(--uur-label-width) 1fr;
  align-items: center;
  column-gap: var(--space-sm);
}

/* Rij-label: klein, caps, accent-soft zoals de andere widget-labels.
   Rechts uitgelijnd zodat het als anker naar de data-rij zelf "wijst". */
.uur-row-label {
  font-family: var(--font-display);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-soft);
  text-align: right;
  opacity: 0.75;
}

/* Data-gebied: de rechter-kolom. Per rij-type vult dit op een andere
   manier — 24-koloms grid voor cellen, of een volledig-vullende SVG. */
.uur-row-data {
  position: relative;
  min-width: 0;                /* voorkomt overflow bij krappe breedtes */
}

/* Kolommengrid: het aantal kolommen wordt door uurverwachting.js gezet
   via de --uur-cols CSS-variabele op :root. Op brede schermen is dat 24
   (één kolom per uur), op tablets 12 (per 2 uur) en op telefoons 6 (per
   4 uur). De fallback in var(...) zorgt dat de eerste render — vóór JS
   draait — al 24 kolommen toont. Iedere cel is flex-centered zodat de
   inhoud (icoon/pijl/tekst) automatisch in het midden van z'n "uur-plek"
   valt. */
.uur-data-grid {
  display: grid;
  grid-template-columns: repeat(var(--uur-cols, 24), 1fr);
}

.uur-cel {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
}

/* --- Rij 1: Temperatuurcurve --- */

.uur-row-curve {
  height: 140px;
}

/* Het data-gebied vult de volledige rij-hoogte (align-self: stretch + height:100%
   overschrijven de parent's align-items: center) en dient als positioning
   context voor de absoluut-gepositioneerde SVG en labels erbinnen. */
.uur-row-curve .uur-row-data {
  align-self: stretch;
  height: 100%;
}

/* SVG absoluut positioneren binnen het data-gebied. Dit is essentieel:
   ondanks preserveAspectRatio="none" gebruikt de browser de viewBox (24:100)
   nog steeds als intrinsic aspect-ratio voor LAYOUT. Zonder absolute
   positioning dwingt die ratio de SVG tot width × (100/24) pixels hoog —
   bijv. 5300 px bij een brede container — waardoor de curve ver buiten
   het zichtbare gebied wordt getekend. */
.uur-temp-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* Temperatuurlabels: 24 kleine getallen die de curve volgen. Elke label
   staat horizontaal op z'n uur-kolom en verticaal op de y-positie van het
   corresponderende curvepunt, zodat het getal letterlijk boven de curve
   "zweeft". JS zet left en top in procenten. */
.uur-temp-labels {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.uur-temp-label {
  position: absolute;
  transform: translate(-50%, -125%);   /* boven het curvepunt, horizontaal gecentreerd */
  font-family: var(--font-display);
  font-size: 0.6875rem;                /* 11px — subtiel, leesbaar op FHD */
  font-weight: 500;
  color: var(--text-secondary);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;  /* gelijke getalbreedtes → geen horizontale wobble */
}

/* Min en max krijgen extra nadruk in dezelfde rij labels: helderder kleur,
   zwaarder gewicht, iets groter. Zo zie je in één oogopslag de uitersten
   terwijl de rest als rustige achtergrondinformatie meeleest. */
.uur-temp-label--min,
.uur-temp-label--max {
  color: var(--text-primary);
  font-weight: 700;
  font-size: 0.8125rem;                /* 13px */
}

/* Op telefoons (≤640px) is de font-size iets compacter, zodat min/max
   ook in een 6-koloms grid niet tegen hun buren botsen. De keuze welke
   uren überhaupt getoond worden, wordt door JS gemaakt (zie
   aantalKolommen() in uurverwachting.js) — niet door media queries.
   Dat houdt curve, labels en cellen consistent uitgelijnd. */
@media (max-width: 640px) {
  .uur-temp-label {
    font-size: 0.625rem;  /* 10px */
  }
  .uur-temp-label--min,
  .uur-temp-label--max {
    font-size: 0.75rem;   /* 12px */
  }
}

/* --- Rij 2: Weericonen --- */

.uur-row-icons {
  height: 44px;
}

.uur-weer-icon {
  width: 32px;
  height: 32px;
  color: var(--text-primary);    /* lijn-iconen volgen currentColor */
  opacity: 0.9;
}

/* --- Rij 3: Windpijlen --- */

.uur-row-wind {
  height: 32px;
}

.uur-wind-arrow {
  width: 20px;
  height: 20px;
  color: var(--text-secondary);  /* subtieler dan de iconen — ze zijn talrijker */
  opacity: 0.85;
}

/* --- Rijen 4 & 5: getaltekst (wind km/u, golfhoogte) --- */

.uur-text-cel {
  font-family: var(--font-display);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;   /* gelijke getalbreedtes → nette uitlijning */
}

.uur-row-windspeed,
.uur-row-waves {
  height: 22px;
}

.uur-row-waves .uur-text-cel {
  color: var(--text-secondary);   /* golfdata: ondergeschikt, bluish-grijs later */
}

/* --- Rij 6: Neerslagbalken --- */

.uur-row-precip {
  height: 48px;
}

/* Zelfde patroon als de temperatuurcurve — zie .uur-row-curve hierboven
   voor uitleg. */
.uur-row-precip .uur-row-data {
  align-self: stretch;
  height: 100%;
}

.uur-precip-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* --- Rij 7: Tijd-as --- */

.uur-row-time {
  height: 20px;
  /* Tonale "vloer" onder de tijd-as: een heel lichte gradient-lijn
     die scheidt zonder een harde border te zijn. Design-system regel:
     no 1px borders — tonal carving. */
  background-image: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.04) 0%,
    rgba(255, 255, 255, 0) 1px,
    transparent 100%
  );
  padding-top: var(--space-xs);
}

.uur-tijd-cel {
  font-family: var(--font-body);
  font-size: 0.75rem;
  color: var(--text-secondary);
  opacity: 0.45;                 /* niet-major uren subtiel */
  font-variant-numeric: tabular-nums;
}

.uur-tijd-cel--major {
  opacity: 0.85;                 /* 00/06/12/18 als ritme-ankers */
  font-weight: 500;
}

/* --- Huidig-uur indicator --- */
/* Verticale accentlijn binnen het data-gebied. De CSS-calc combineert
   de vaste label-kolom-breedte met een JS-gezette fractie (0..1).
   Fractie = (uren + minuten/60) / 24. */

.uur-now-indicator {
  position: absolute;
  top: 0;
  bottom: 20px;                  /* stop boven de tijd-as zodat labels niet onder de lijn zitten */
  width: 2px;
  left: calc(
    var(--uur-label-width) + var(--space-sm)
    + var(--uur-now-fractie, 0) * (100% - var(--uur-label-width) - var(--space-sm))
  );
  background: linear-gradient(
    to bottom,
    rgba(255, 102, 0, 0.9) 0%,
    rgba(255, 102, 0, 0.4) 70%,
    rgba(255, 102, 0, 0) 100%
  );
  pointer-events: none;
  /* Zachte gloed die z'n aanwezigheid versterkt zonder hard te zijn */
  box-shadow: 0 0 8px rgba(255, 102, 0, 0.4);
}

/* Klein bolletje bovenin de lijn als "knoop"/ankerpunt */
.uur-now-indicator::before {
  content: "";
  position: absolute;
  top: -3px;
  left: 50%;
  transform: translateX(-50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 10px rgba(255, 102, 0, 0.7);
}