/* ==========================================================================
   LVNL Beek — informatiescherm
   Ontworpen voor een televisie in de centrale hal. Alle maten schalen mee
   met de schermbreedte, zodat hetzelfde ontwerp werkt op Full HD en 4K.
   ========================================================================== */

:root {
  /* Schaal: 1 'u' is ongeveer 1% van de kleinste schermmaat */
  --u: clamp(7px, 0.92vmin, 26px);

  /* ---- LVNL huisstijl (overgenomen uit lvnl.nl) ---- */
  --lvnl-blauw:        #1e3c82;
  --lvnl-blauw-donker: #122d6b;
  --lvnl-blauw-diep:   #0d2150;
  --lvnl-oranje:       #f05a23;
  --lvnl-oranje-donker:#cc4d1e;
  --lvnl-lichtblauw:   #7fcbec;
  --lvnl-mist:         #ebf2f7;
  --lvnl-grijsblauw:   #bcc5da;
  --lvnl-grijsblauw-2: #a5b1cd;
  --lvnl-turquoise:    #00bfa5;
  --lvnl-rood:         #d92d20;

  --bg-0: #081538;
  --bg-1: #102a5e;
  --bg-2: var(--lvnl-blauw);

  --panel: rgba(255, 255, 255, 0.055);
  --panel-strong: rgba(255, 255, 255, 0.09);
  --line: rgba(255, 255, 255, 0.14);
  --line-soft: rgba(255, 255, 255, 0.075);

  --text: #ffffff;
  --text-dim: var(--lvnl-grijsblauw);
  --text-faint: var(--lvnl-grijsblauw-2);

  --accent: var(--lvnl-oranje);
  --accent-soft: rgba(240, 90, 35, 0.16);

  --radius: calc(var(--u) * 1.6);
  --gap: calc(var(--u) * 2.4);

  --topbar-h: calc(var(--u) * 11);
  --bottombar-h: calc(var(--u) * 8.5);
}

body.theme-lvnl     { --bg-0: #081538; --bg-1: #102a5e; --bg-2: #1e3c82; }
body.theme-diep     { --bg-0: #050d22; --bg-1: #0b1c42; --bg-2: #14295c; }
body.theme-licht {
  --bg-0: #ffffff; --bg-1: var(--lvnl-mist); --bg-2: #dbe7f2;
  --panel: rgba(30, 60, 130, 0.045);
  --panel-strong: rgba(30, 60, 130, 0.085);
  --line: rgba(30, 60, 130, 0.18);
  --line-soft: rgba(30, 60, 130, 0.10);
  --text: var(--lvnl-blauw);
  --text-dim: #5a6b8c;
  --text-faint: #8a99b5;
}
body.theme-slate    { --bg-0: #0d1117; --bg-1: #151d28; --bg-2: #1d2733; }

/* Accentkeuze per slide, in LVNL-kleuren */
.slide[data-accent="oranje"]      { --accent: var(--lvnl-oranje);     --accent-soft: rgba(240,90,35,.16); }
.slide[data-accent="lichtblauw"]  { --accent: var(--lvnl-lichtblauw); --accent-soft: rgba(127,203,236,.17); }
.slide[data-accent="wit"]         { --accent: #ffffff;                --accent-soft: rgba(255,255,255,.14); }
.slide[data-accent="turquoise"]   { --accent: var(--lvnl-turquoise);  --accent-soft: rgba(0,191,165,.16); }
.slide[data-accent="rood"]        { --accent: var(--lvnl-rood);       --accent-soft: rgba(217,45,32,.17); }
.slide[data-accent="grijsblauw"]  { --accent: var(--lvnl-grijsblauw); --accent-soft: rgba(188,197,218,.15); }

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
  background: var(--bg-0);
  color: var(--text);
  font-family: "Neo Sans W01", "Neo Sans Pro", "Neo Sans", "Segoe UI",
               system-ui, -apple-system, BlinkMacSystemFont, Roboto,
               "Helvetica Neue", Arial, sans-serif;
  font-size: calc(var(--u) * 1.6);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  cursor: none;
}
body.show-cursor { cursor: default; }

.stage {
  position: fixed;
  inset: 0;
  display: grid;
  grid-template-rows: var(--topbar-h) 1fr var(--bottombar-h);
  background:
    radial-gradient(130% 90% at 50% -20%, var(--bg-2) 0%, transparent 62%),
    radial-gradient(100% 70% at 85% 110%, rgba(240,90,35,.07) 0%, transparent 60%),
    linear-gradient(170deg, var(--bg-1) 0%, var(--bg-0) 100%);
}

/* ---------------------------------------------------------------- Kopbalk */

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 calc(var(--u) * 3.4);
  border-bottom: 1px solid var(--line-soft);
  background: linear-gradient(180deg, rgba(255,255,255,.05), transparent);
  position: relative;
}
/* Oranje accentlijn onder de kopbalk, zoals in de LVNL-huisstijl */
.topbar::after {
  content: "";
  position: absolute;
  left: 0; bottom: -1px;
  width: calc(var(--u) * 14);
  height: calc(var(--u) * .3);
  background: var(--lvnl-oranje);
}

.topbar__brand { display: flex; align-items: center; gap: calc(var(--u) * 2.2); }

.brand__logo {
  height: calc(var(--u) * 4.4);
  width: auto;
  color: #ffffff;
  display: block;
  flex: 0 0 auto;
}
body.theme-licht .brand__logo { color: var(--lvnl-blauw); }

.brand__divider {
  width: 1px;
  height: calc(var(--u) * 4.6);
  background: var(--line);
  flex: 0 0 auto;
}

.brand__title {
  font-size: calc(var(--u) * 3.1);
  font-weight: 700;
  letter-spacing: .01em;
  line-height: 1.05;
}
.brand__sub {
  font-size: calc(var(--u) * 1.5);
  color: var(--text-dim);
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-top: calc(var(--u) * .35);
}

.topbar__clock {
  display: flex;
  align-items: baseline;
  gap: calc(var(--u) * 2.6);
  font-variant-numeric: tabular-nums;
}
.clock__local, .clock__utc { display: flex; flex-direction: column; align-items: flex-end; }
.clock__time { font-size: calc(var(--u) * 3.4); font-weight: 600; line-height: 1; }
.clock__utc .clock__time { color: var(--lvnl-oranje); }
.clock__label {
  font-size: calc(var(--u) * 1.15);
  color: var(--text-faint);
  letter-spacing: .18em;
  text-transform: uppercase;
  margin-top: calc(var(--u) * .4);
}
.clock__date {
  font-size: calc(var(--u) * 1.5);
  color: var(--text-dim);
  border-left: 1px solid var(--line);
  padding-left: calc(var(--u) * 2.4);
  align-self: center;
}

/* ----------------------------------------------------------------- Slides */

.slides { position: relative; overflow: hidden; }

.slide {
  position: absolute;
  inset: 0;
  padding: calc(var(--u) * 3.2) calc(var(--u) * 3.6);
  opacity: 0;
  visibility: hidden;
  display: flex;
  flex-direction: column;
  transition: opacity .55s ease, transform .55s cubic-bezier(.4, 0, .2, 1);
}
.slide.is-active { opacity: 1; visibility: visible; z-index: 2; }

/* Overgangen */
body[data-transition="slide"] .slide { transform: translateX(4%); }
body[data-transition="slide"] .slide.is-active { transform: translateX(0); }
body[data-transition="slide"] .slide.is-leaving { transform: translateX(-4%); }
body[data-transition="none"] .slide { transition: none; }

/* Slidekop */
.shead { margin-bottom: calc(var(--u) * 2.6); flex: 0 0 auto; }
.shead__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--u) * .9);
  font-size: calc(var(--u) * 1.35);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
  margin-bottom: calc(var(--u) * 1.1);
}
.shead__eyebrow::before {
  content: "";
  width: calc(var(--u) * 2.6);
  height: calc(var(--u) * .32);
  background: var(--accent);
  border-radius: 2px;
}
.shead__title {
  font-size: calc(var(--u) * 5.2);
  font-weight: 700;
  line-height: 1.06;
  margin: 0;
  letter-spacing: -.015em;
}
.shead__sub {
  font-size: calc(var(--u) * 2.1);
  color: var(--text-dim);
  margin-top: calc(var(--u) * .9);
  line-height: 1.3;
}

.sbody { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }

/* ------------------------------------------------------- Slide: vrije tekst */

.freetext { font-size: calc(var(--u) * 2.5); line-height: 1.5; color: var(--text); }
.freetext p { margin: 0 0 calc(var(--u) * 1.6); }
.freetext p:last-child { margin-bottom: 0; }
.freetext ul { margin: 0 0 calc(var(--u) * 1.6); padding-left: calc(var(--u) * 3); }
.freetext li { margin-bottom: calc(var(--u) * .8); }
.freetext strong { color: #fff; font-weight: 650; }

.layout-split { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u) * 3.4); align-items: center; }
.layout-split .freetext { font-size: calc(var(--u) * 2.2); }
.layout-split__media {
  height: 100%;
  min-height: 0;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--panel);
}
.layout-split__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.layout-split__media.fit-contain img { object-fit: contain; background: #04080f; }

.layout-centered { align-items: center; justify-content: center; text-align: center; }
.layout-centered .shead__title { font-size: calc(var(--u) * 6.4); }
.layout-centered .freetext { font-size: calc(var(--u) * 2.9); max-width: 80%; margin: 0 auto; }

/* ------------------------------------------------------- Slide: afbeelding */

.slide--image { padding: 0; }
.imagefull { position: absolute; inset: 0; }
.imagefull img { width: 100%; height: 100%; object-fit: cover; display: block; }
.imagefull.fit-contain img { object-fit: contain; background: #04080f; }
.imagefull__caption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: calc(var(--u) * 8) calc(var(--u) * 4.5) calc(var(--u) * 3.5);
  background: linear-gradient(transparent, rgba(4, 9, 20, .92));
}
.imagefull__caption h2 { font-size: calc(var(--u) * 4.4); margin: 0 0 calc(var(--u) * .7); font-weight: 700; }
.imagefull__caption p  { font-size: calc(var(--u) * 2.1); margin: 0; color: var(--text-dim); }

/* -------------------------------------------- Slide: technische werkzaamheden */

.worklist { display: flex; flex-direction: column; gap: calc(var(--u) * 1.5); overflow: hidden; }

.work {
  display: grid;
  grid-template-columns: calc(var(--u) * .55) 1fr auto;
  gap: calc(var(--u) * 2.2);
  align-items: center;
  background: var(--panel);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: calc(var(--u) * 1.9) calc(var(--u) * 2.2);
}
.work__bar { align-self: stretch; border-radius: 99px; background: var(--lvnl-grijsblauw); }
.work[data-status="bezig"]      .work__bar { background: var(--lvnl-turquoise); box-shadow: 0 0 calc(var(--u)*1.6) rgba(0,191,165,.55); }
.work[data-status="gepland"]    .work__bar { background: var(--lvnl-lichtblauw); }
.work[data-status="uitgesteld"] .work__bar { background: var(--lvnl-oranje); }
.work[data-status="afgerond"]   .work__bar { background: var(--text-faint); }
.work[data-status="bezig"] { background: rgba(0,191,165,.07); border-color: rgba(0,191,165,.22); }

.work__main { min-width: 0; }
.work__title {
  font-size: calc(var(--u) * 2.35);
  font-weight: 650;
  line-height: 1.2;
  margin-bottom: calc(var(--u) * .5);
}
.work__meta {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--u) * .7) calc(var(--u) * 1.8);
  align-items: center;
  font-size: calc(var(--u) * 1.5);
  color: var(--text-dim);
}
.work__desc {
  font-size: calc(var(--u) * 1.6);
  color: var(--text-dim);
  margin-top: calc(var(--u) * .7);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.work__system {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  color: var(--accent);
  font-size: calc(var(--u) * 1.45);
  letter-spacing: .04em;
}
.work__right { display: flex; flex-direction: column; align-items: flex-end; gap: calc(var(--u) * .8); }

.pill {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--u) * .6);
  padding: calc(var(--u) * .45) calc(var(--u) * 1.3);
  border-radius: 99px;
  font-size: calc(var(--u) * 1.35);
  font-weight: 600;
  letter-spacing: .04em;
  white-space: nowrap;
  border: 1px solid currentColor;
}
.pill--bezig      { color: var(--lvnl-turquoise);  background: rgba(0,191,165,.13); }
.pill--gepland    { color: var(--lvnl-lichtblauw);   background: rgba(127,203,236,.13); }
.pill--uitgesteld { color: var(--lvnl-oranje);  background: rgba(240,90,35,.13); }
.pill--afgerond   { color: var(--text-faint); background: rgba(255,255,255,.05); }
.pill--hoog   { color: var(--lvnl-rood);   background: rgba(217,45,32,.13); }
.pill--middel { color: var(--lvnl-oranje); background: rgba(240,90,35,.13); }
.pill--laag   { color: var(--text-dim); background: rgba(255,255,255,.05); }
.pill--geen   { color: var(--text-faint); background: rgba(255,255,255,.04); }

.pill__dot {
  width: calc(var(--u) * .7);
  height: calc(var(--u) * .7);
  border-radius: 50%;
  background: currentColor;
}
.pill--bezig .pill__dot { animation: pulse 1.8s ease-in-out infinite; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .25; } }

.work__period {
  font-size: calc(var(--u) * 1.5);
  color: var(--text);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------ Slide: verjaardagen */

.bdaygrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(calc(var(--u) * 30), 1fr));
  gap: calc(var(--u) * 1.8);
  align-content: start;
  overflow: hidden;
}

.bday {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 1.8);
  background: var(--panel);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: calc(var(--u) * 1.7) calc(var(--u) * 2);
}
.bday--today {
  background: linear-gradient(120deg, rgba(240,90,35,.16), rgba(240,90,35,.05));
  border-color: rgba(240,90,35,.4);
  box-shadow: 0 0 calc(var(--u)*3) rgba(240,90,35,.16);
}

.bday__date {
  flex: 0 0 auto;
  width: calc(var(--u) * 7.4);
  height: calc(var(--u) * 7.4);
  border-radius: calc(var(--u) * 1.2);
  background: rgba(255,255,255,.06);
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.bday--today .bday__date { background: rgba(240,90,35,.2); border-color: rgba(240,90,35,.45); }
.bday__day   { font-size: calc(var(--u) * 3); font-weight: 700; font-variant-numeric: tabular-nums; }
.bday__month { font-size: calc(var(--u) * 1.3); color: var(--text-dim); text-transform: uppercase;
               letter-spacing: .1em; margin-top: calc(var(--u) * .35); }
.bday--today .bday__month { color: var(--lvnl-oranje); }

.bday__info { min-width: 0; flex: 1; }
.bday__name {
  font-size: calc(var(--u) * 2.2);
  font-weight: 650;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bday__dept {
  font-size: calc(var(--u) * 1.45);
  color: var(--text-dim);
  margin-top: calc(var(--u) * .35);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bday__when {
  font-size: calc(var(--u) * 1.4);
  color: var(--text-faint);
  margin-top: calc(var(--u) * .4);
}
.bday--today .bday__when { color: var(--lvnl-oranje); font-weight: 600; }
.bday__age {
  flex: 0 0 auto;
  font-size: calc(var(--u) * 1.5);
  color: var(--text-dim);
  background: rgba(255,255,255,.06);
  border-radius: 99px;
  padding: calc(var(--u) * .4) calc(var(--u) * 1.1);
}
.bday__cake { font-size: calc(var(--u) * 2.6); }

/* ------------------------------------------------- Slide: verkeerscijfers */

.traffic { display: grid; grid-template-rows: auto 1fr; gap: calc(var(--u) * 2.4); min-height: 0; }

.kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: calc(var(--u) * 1.8);
}
.kpi {
  background: var(--panel);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: calc(var(--u) * 1.9) calc(var(--u) * 2.1);
}
.kpi--hero { background: linear-gradient(135deg, var(--accent-soft), rgba(255,255,255,.03));
             border-color: color-mix(in srgb, var(--accent) 35%, transparent); }
.kpi__label {
  font-size: calc(var(--u) * 1.35);
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: .14em;
  font-weight: 600;
}
.kpi__value {
  font-size: calc(var(--u) * 5.6);
  font-weight: 700;
  line-height: 1;
  margin: calc(var(--u) * .9) 0 calc(var(--u) * .5);
  font-variant-numeric: tabular-nums;
}
.kpi--hero .kpi__value { color: var(--accent); }
.kpi__split { display: flex; gap: calc(var(--u) * 1.6); font-size: calc(var(--u) * 1.45); color: var(--text-dim); }
.kpi__split b { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }

.tlower { display: grid; grid-template-columns: 1.35fr 1fr; gap: calc(var(--u) * 2.4); min-height: 0; }

.panel {
  background: var(--panel);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: calc(var(--u) * 1.9) calc(var(--u) * 2.1);
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.panel__title {
  font-size: calc(var(--u) * 1.4);
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: .14em;
  font-weight: 600;
  margin-bottom: calc(var(--u) * 1.6);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Staafdiagram 7 dagen */
.bars { flex: 1; display: flex; align-items: flex-end; gap: calc(var(--u) * 1.4); min-height: 0; }
.bar { flex: 1; display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * .7); height: 100%; }
.bar__stack {
  flex: 1;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 2px;
  min-height: 0;
}
.bar__seg { border-radius: calc(var(--u) * .35); min-height: 0; transition: height .6s ease; }
.bar__seg--arr { background: var(--accent); }
.bar__seg--dep { background: color-mix(in srgb, var(--accent) 45%, transparent); }
.bar__label { font-size: calc(var(--u) * 1.3); color: var(--text-dim); text-transform: uppercase; letter-spacing: .06em; }
.bar__total { font-size: calc(var(--u) * 1.5); font-weight: 650; font-variant-numeric: tabular-nums; }
.bar--today .bar__label { color: var(--accent); font-weight: 700; }

.legend { display: flex; gap: calc(var(--u) * 1.6); font-size: calc(var(--u) * 1.3); color: var(--text-dim); }
.legend span { display: inline-flex; align-items: center; gap: calc(var(--u) * .6); }
.legend i { width: calc(var(--u) * 1.2); height: calc(var(--u) * 1.2); border-radius: 3px; display: inline-block; }

/* Laatste bewegingen */
.movlist { flex: 1; display: flex; flex-direction: column; gap: calc(var(--u) * .75); overflow: hidden; }
.mov {
  display: grid;
  grid-template-columns: auto calc(var(--u) * 3) 1fr auto;
  gap: calc(var(--u) * 1.2);
  align-items: center;
  font-size: calc(var(--u) * 1.6);
  padding: calc(var(--u) * .55) 0;
  border-bottom: 1px solid var(--line-soft);
}
.mov:last-child { border-bottom: 0; }
.mov__time { color: var(--text-dim); font-variant-numeric: tabular-nums; font-size: calc(var(--u) * 1.45); }
.mov__dir { font-size: calc(var(--u) * 1.9); line-height: 1; text-align: center; }
.mov__dir--arr { color: var(--lvnl-turquoise); }
.mov__dir--dep { color: var(--lvnl-oranje); }
.mov__cs {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-weight: 600;
  letter-spacing: .03em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mov__type { color: var(--text-faint); font-size: calc(var(--u) * 1.4); }

.tfoot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: calc(var(--u) * 1.3);
  color: var(--text-faint);
  margin-top: calc(var(--u) * 1.2);
}
.rwybadge {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--u) * .7);
  background: var(--accent-soft);
  color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  border-radius: 99px;
  padding: calc(var(--u) * .4) calc(var(--u) * 1.3);
  font-size: calc(var(--u) * 1.4);
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------- Slide: radarbeeld */

.radarwrap { flex: 1; display: grid; grid-template-columns: 1fr calc(var(--u) * 32); gap: calc(var(--u) * 2.2); min-height: 0; }

/* Het situatiescherm vult zijn vlak, zoals een operationeel beeld hoort te doen */
.radarbox {
  position: relative;
  min-height: 0;
  overflow: hidden;
  border: 1px solid rgba(127, 203, 236, .22);
  border-radius: calc(var(--u) * .6);
  background: #0a1b40;
}
#radarCanvas { display: block; width: 100%; height: 100%; }

/* Hoekmarkeringen, zoals op een operationeel scherm */
.radarbox::before,
.radarbox::after {
  content: "";
  position: absolute;
  width: calc(var(--u) * 1.6);
  height: calc(var(--u) * 1.6);
  border-color: rgba(127, 203, 236, .45);
  border-style: solid;
  pointer-events: none;
}
.radarbox::before { top: calc(var(--u) * .7); right: calc(var(--u) * .7); border-width: 1px 1px 0 0; }
.radarbox::after  { bottom: calc(var(--u) * .7); left: calc(var(--u) * .7); border-width: 0 0 1px 1px; }

.radarbox__scale {
  position: absolute;
  right: calc(var(--u) * 1.4);
  bottom: calc(var(--u) * 1.2);
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: calc(var(--u) * 1.25);
  color: rgba(188, 197, 218, .75);
  letter-spacing: .06em;
  pointer-events: none;
}

.radarside { display: flex; flex-direction: column; gap: calc(var(--u) * 1.6); min-height: 0; }
.aclist { flex: 1; display: flex; flex-direction: column; gap: calc(var(--u) * .6); overflow: hidden; }
.acrow {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: calc(var(--u) * 1);
  align-items: baseline;
  font-size: calc(var(--u) * 1.5);
  padding: calc(var(--u) * .5) 0;
  border-bottom: 1px solid var(--line-soft);
}
.acrow__cs { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-weight: 600;
             white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.acrow__meta { color: var(--text-dim); font-size: calc(var(--u) * 1.35); font-variant-numeric: tabular-nums; }
.acrow__sub { grid-column: 1 / -1; color: var(--text-faint); font-size: calc(var(--u) * 1.25); }

/* ------------------------------------------------------------- Slide: weer */

.wxgrid { flex: 1; display: grid; grid-template-columns: 1.1fr 1fr; gap: calc(var(--u) * 2.4); min-height: 0; }
.wxmain { display: flex; flex-direction: column; gap: calc(var(--u) * 2); }
.wxnow { display: flex; align-items: center; gap: calc(var(--u) * 3); }
.wxtemp { font-size: calc(var(--u) * 9); font-weight: 300; line-height: .9; font-variant-numeric: tabular-nums; }
.wxtemp sup { font-size: calc(var(--u) * 3.4); font-weight: 400; vertical-align: super; }
.wxcond { font-size: calc(var(--u) * 2.4); color: var(--text-dim); text-transform: capitalize; }
.wxdetails { display: grid; grid-template-columns: repeat(2, 1fr); gap: calc(var(--u) * 1.4); }
.wxitem { background: var(--panel); border: 1px solid var(--line-soft); border-radius: var(--radius);
          padding: calc(var(--u) * 1.4) calc(var(--u) * 1.7); }
.wxitem__label { font-size: calc(var(--u) * 1.25); color: var(--text-dim); text-transform: uppercase; letter-spacing: .12em; }
.wxitem__value { font-size: calc(var(--u) * 2.3); font-weight: 600; margin-top: calc(var(--u) * .4);
                 font-variant-numeric: tabular-nums; }

.windrose { display: flex; align-items: center; justify-content: center; }
.windrose svg { width: 100%; max-width: calc(var(--u) * 30); height: auto; }

.rawmetar {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: calc(var(--u) * 1.5);
  line-height: 1.5;
  background: rgba(0,0,0,.28);
  border: 1px solid var(--line-soft);
  border-left: calc(var(--u) * .4) solid var(--accent);
  border-radius: calc(var(--u) * .8);
  padding: calc(var(--u) * 1.3) calc(var(--u) * 1.6);
  color: var(--text-dim);
  word-break: break-word;
}
.rawmetar b { color: var(--accent); display: block; font-size: calc(var(--u) * 1.2);
              letter-spacing: .14em; margin-bottom: calc(var(--u) * .5); }

.xwind { display: flex; flex-direction: column; gap: calc(var(--u) * 1); }
.xwrow { display: grid; grid-template-columns: auto 1fr auto; gap: calc(var(--u) * 1.4);
         align-items: center; font-size: calc(var(--u) * 1.6); }
.xwrwy { font-family: ui-monospace, monospace; font-weight: 700; color: var(--accent);
         font-size: calc(var(--u) * 1.9); }
.xwbar { height: calc(var(--u) * 1); background: rgba(255,255,255,.08); border-radius: 99px; overflow: hidden; }
.xwbar i { display: block; height: 100%; background: var(--accent); border-radius: 99px; }
.xwval { font-variant-numeric: tabular-nums; color: var(--text-dim); white-space: nowrap; }

/* ------------------------------------------------------ Lege / storing staat */

.empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(var(--u) * 1.8);
  color: var(--text-faint);
  text-align: center;
}
.empty__icon { font-size: calc(var(--u) * 7); opacity: .45; }
.empty__text { font-size: calc(var(--u) * 2.4); max-width: 70%; line-height: 1.4; }

.slide--boot { align-items: center; justify-content: center; }
.boot { display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 2.4); }
.boot__spinner {
  width: calc(var(--u) * 6);
  height: calc(var(--u) * 6);
  border: calc(var(--u) * .5) solid rgba(255,255,255,.1);
  border-top-color: var(--lvnl-oranje);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.boot__text { font-size: calc(var(--u) * 2.1); color: var(--text-dim); }

/* -------------------------------------------------------------- Voetbalk */

.bottombar {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 2.6);
  padding: 0 calc(var(--u) * 3.4);
  border-top: 1px solid var(--line-soft);
  background: linear-gradient(0deg, rgba(0,0,0,.28), transparent);
  overflow: hidden;
}

.wxstrip {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 1.8);
  flex: 0 0 auto;
  font-size: calc(var(--u) * 1.6);
  color: var(--text-dim);
  padding-right: calc(var(--u) * 2.6);
  border-right: 1px solid var(--line);
  white-space: nowrap;
}
.wxstrip b { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
.wxstrip__sep { color: var(--text-faint); }

.ticker { flex: 1; overflow: hidden; min-width: 0; position: relative; height: 100%; }
.ticker__track {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  white-space: nowrap;
  font-size: calc(var(--u) * 1.75);
  color: var(--text);
  will-change: transform;
}
.ticker__item { display: inline-block; padding-right: calc(var(--u) * 8); }
.ticker__item::before {
  content: "◆";
  color: var(--lvnl-oranje);
  font-size: .7em;
  margin-right: calc(var(--u) * 1.6);
  vertical-align: middle;
}

.pager { display: flex; gap: calc(var(--u) * .8); flex: 0 0 auto; }
.pager__dot {
  width: calc(var(--u) * .9);
  height: calc(var(--u) * .9);
  border-radius: 50%;
  background: rgba(255,255,255,.2);
  transition: background .3s, width .3s;
}
.pager__dot.is-active { background: var(--lvnl-oranje); width: calc(var(--u) * 2.6); border-radius: 99px; }

/* ----------------------------------------------------------- Voortgangsbalk */

.progress {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: calc(var(--u) * .34);
  background: rgba(255,255,255,.07);
  z-index: 10;
}
.progress__bar {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--lvnl-oranje), var(--lvnl-lichtblauw));
  box-shadow: 0 0 calc(var(--u) * 1.2) rgba(240,90,35,.55);
}

.alertdot {
  position: absolute;
  top: calc(var(--u) * 1.4);
  right: calc(var(--u) * 1.4);
  width: calc(var(--u) * 1.1);
  height: calc(var(--u) * 1.1);
  border-radius: 50%;
  background: var(--lvnl-oranje);
  z-index: 20;
  animation: pulse 2s ease-in-out infinite;
}

/* -------------------------------------------------------------- Bediening */

.controls {
  position: fixed;
  bottom: calc(var(--u) * 11);
  left: 50%;
  transform: translateX(-50%) translateY(calc(var(--u) * 3));
  display: flex;
  gap: calc(var(--u) * 1);
  background: rgba(8, 16, 32, .93);
  border: 1px solid var(--line);
  border-radius: 99px;
  padding: calc(var(--u) * .9);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s, transform .25s;
  z-index: 100;
  backdrop-filter: blur(10px);
}
body.show-cursor .controls { opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0); }

.ctrl {
  width: calc(var(--u) * 4.4);
  height: calc(var(--u) * 4.4);
  border-radius: 50%;
  border: 0;
  background: rgba(255,255,255,.07);
  color: var(--text);
  font-size: calc(var(--u) * 2);
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .18s;
  font-family: inherit;
  text-decoration: none;
}
.ctrl:hover { background: rgba(255,255,255,.16); }
.ctrl--link { font-size: calc(var(--u) * 1.9); }

/* ---------------------------------------------------------------- Portret */

@media (orientation: portrait) {
  :root { --u: clamp(7px, 1.25vmin, 30px); }
  .kpis { grid-template-columns: repeat(2, 1fr); }
  .tlower, .wxgrid, .radarwrap, .layout-split { grid-template-columns: 1fr; }
  .radarside { max-height: 34%; }
  .bdaygrid { grid-template-columns: 1fr; }
  .topbar__clock { gap: calc(var(--u) * 1.6); }
  .clock__date { display: none; }
}

@media (max-width: 900px) {
  .kpis { grid-template-columns: repeat(2, 1fr); }
  .tlower, .wxgrid, .radarwrap, .layout-split { grid-template-columns: 1fr; }
  .clock__date { display: none; }
  .brand__sub { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ------------------------------------------------- Slide: vluchtschema */

.schedule { display: grid; grid-template-rows: 1fr auto; gap: calc(var(--u) * 1.4); min-height: 0; }
.schedule .tlower { grid-template-columns: 1fr 1fr; }

.fbkop,
.fb {
  display: grid;
  grid-template-columns: calc(var(--u) * 6.4) calc(var(--u) * 7.6) 1fr calc(var(--u) * 8.4) calc(var(--u) * 9.5);
  gap: calc(var(--u) * 1.2);
  align-items: center;
}

.fbkop {
  font-size: calc(var(--u) * 1.2);
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: .12em;
  font-weight: 600;
  padding-bottom: calc(var(--u) * .7);
  border-bottom: 1px solid var(--line);
  margin-bottom: calc(var(--u) * .5);
}

.fblijst { flex: 1; display: flex; flex-direction: column; overflow: hidden; }

.fb {
  font-size: calc(var(--u) * 1.75);
  padding: calc(var(--u) * .78) 0;
  border-bottom: 1px solid var(--line-soft);
  font-variant-numeric: tabular-nums;
}
.fb:last-child { border-bottom: 0; }

.fb__gepland {
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-weight: 600;
  color: var(--text);
}
.fb__vlucht {
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: .02em;
}
.fb__plaats {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text);
}
.fb__tijd {
  font-family: ui-monospace, Menlo, Consolas, monospace;
  display: flex;
  align-items: baseline;
  gap: calc(var(--u) * .5);
}
.fb__status {
  font-size: calc(var(--u) * 1.4);
  color: var(--text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fb__actueel { font-weight: 650; color: var(--lvnl-turquoise); }
.fb__actueel.is-laat  { color: var(--lvnl-oranje); }
.fb__actueel.is-vroeg { color: var(--lvnl-lichtblauw); }
.fb__afwijking { font-size: calc(var(--u) * 1.2); color: var(--text-faint); }
.fb__wacht { color: var(--text-faint); }
.fb__annul { color: var(--lvnl-rood); }
.fb__bron {
  font-size: calc(var(--u) * 1.05);
  color: var(--text-faint);
  letter-spacing: .08em;
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 0 calc(var(--u) * .35);
}

/* Afgehandelde vluchten zakken visueel naar de achtergrond */
.fb--klaar { opacity: .58; }
.fb--klaar .fb__vlucht { color: var(--text-dim); }
.fb--annul { opacity: .6; }
.fb--annul .fb__gepland,
.fb--annul .fb__plaats { text-decoration: line-through; }
.fb--laat .fb__status { color: var(--lvnl-oranje); }

@media (orientation: portrait), (max-width: 900px) {
  .schedule .tlower { grid-template-columns: 1fr; }
  .fbkop, .fb {
    grid-template-columns: calc(var(--u) * 6) calc(var(--u) * 7) 1fr calc(var(--u) * 8);
  }
  .fb__status, .fbkop > div:last-child { display: none; }
}

/* Tweede veld binnen het werkgebied, als strook onder de verkeerscijfers */
.veldstrip {
  display: flex;
  align-items: baseline;
  gap: calc(var(--u) * 2.2);
  flex-wrap: wrap;
  background: var(--panel);
  border: 1px solid var(--line-soft);
  border-left: calc(var(--u) * .4) solid var(--lvnl-lichtblauw);
  border-radius: var(--radius);
  padding: calc(var(--u) * 1.1) calc(var(--u) * 1.8);
  font-size: calc(var(--u) * 1.55);
  color: var(--text-dim);
}
.veldstrip__icao {
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-weight: 700;
  color: var(--lvnl-lichtblauw);
  font-size: calc(var(--u) * 1.75);
  letter-spacing: .04em;
}
.veldstrip__naam { color: var(--text); font-weight: 600; }
.veldstrip__cijfer b {
  color: var(--text);
  font-size: calc(var(--u) * 2.1);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  margin-right: calc(var(--u) * .4);
}
.veldstrip__split { color: var(--text-faint); font-size: calc(var(--u) * 1.4); margin-left: auto; }

.traffic--metveld { grid-template-rows: auto 1fr auto; }

.acrow__veld {
  font-size: calc(var(--u) * 1.1);
  color: var(--text-faint);
  letter-spacing: .06em;
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 0 calc(var(--u) * .35);
  font-weight: 500;
}

.veldstrip--tma { border-left-color: var(--lvnl-oranje); }
.veldstrip--tma .veldstrip__icao { color: var(--lvnl-oranje); }
.veldstrip__toel {
  color: var(--text-faint);
  font-weight: 400;
  font-size: calc(var(--u) * 1.3);
}
.traffic--metveld { grid-template-rows: auto 1fr auto auto auto; }

.mov__rwy {
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-weight: 700;
  color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  border-radius: 3px;
  padding: 0 calc(var(--u) * .4);
  font-size: calc(var(--u) * 1.25);
}

/* Staafdiagram met de drie soorten werk */
.bar__seg--ehbk { background: var(--lvnl-oranje); }
.bar__seg--etng { background: var(--lvnl-lichtblauw); }
.bar__seg--tma  { background: var(--lvnl-turquoise); }

.mov__dir--tma { color: var(--lvnl-turquoise); }
.mov__veld {
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: calc(var(--u) * 1.15);
  color: var(--text-faint);
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 0 calc(var(--u) * .35);
}