/* ==========================================================
   Design system — tokens
   ==========================================================
   Eén merkkleur per klant, de rest is vast. Gebaseerd op
   BRIEFING_dashboard-design-system_brand-agnostic.md (§2 en §8).

   --accent is het ENIGE dat per klant verandert. app.js zet hem na login uit de
   Config-tab van de klantsheet; de waarde hieronder is de mayday-standaard voor
   klanten zonder eigen accent. De vier accent-stappen worden er met color-mix
   uit afgeleid, dus je hoeft nooit een tint met de hand te kiezen.

   Regels die de briefing hard stelt: het accent is NOOIT een statuskleur;
   accent-50/25/10 worden nooit voor tekst gebruikt; alleen reeks #1 is het
   accent, reeks #2 is accent-75, de rest komt uit het vaste chartpalet.
   ========================================================== */

/* ===== MERKBLOK — alleen deze regel verschilt per merk ===== */
:root {
  --accent: #400745;
  --accent-text: var(--accent);
  /* Steunkleur: tweede merkkleur voor highlight-vlakken. ALLEEN als achtergrond,
     altijd met --fg erop. Nooit als tekst, nooit als reekskleur, nooit als status —
     precies de beperking die §9 van de briefing aan mayday's FIRE oplegt. */
  --support: #f0e6ee;
}

/* ===== SYSTEEM — niet aanpassen ===== */
:root {
  color-scheme: light;

  /* Neutralen (§2.1) */
  --bg: #faf9f7;
  --surface: #ffffff;
  --border: #e6e3df;
  --fg: #1a1a1a;
  --fg-muted: #6b6560;

  /* Accentstappen (§2.2) — mengen naar wit in lichte modus */
  --accent-100: var(--accent);
  --accent-75: color-mix(in oklch, var(--accent) 75%, white);
  --accent-50: color-mix(in oklch, var(--accent) 50%, white);
  --accent-25: color-mix(in oklch, var(--accent) 25%, white);
  --accent-10: color-mix(in oklch, var(--accent) 10%, white);

  /* Statuskleuren (§2.3) — vast voor elk merk, nooit het accent */
  --positive: #1e7f4f; --positive-bg: #dcfce7;
  --negative: #b42318; --negative-bg: #fee2e2;
  --warning:  #b45309; --warning-bg:  #fef3c7;
  --info:     #185fa5; --info-bg:     #dbeafe;

  /* Chartpalet (§2.4) — kleurenblind-veilig, max 6 reeksen */
  --chart-3: #0072b2;
  --chart-4: #e69f00;
  --chart-5: #009e73;
  --chart-6: #cc79a7;
  --chart-other: #9ca3af;

  /* Donut-slices — categorische identiteit per kanaalgroep, bewust los van het
     merkaccent zodat 'organisch' in elk thema dezelfde kleur houdt. */
  --slice-1: #2a78d6;
  --slice-2: #eb6834;
  --slice-3: #1baf7a;
  --slice-4: #eda100;
  --slice-5: #e87ba4;
  --slice-6: #008300;
  --slice-7: #4a3aa7;

  /* Vorm en ritme (§3) */
  --radius: 12px;
  --radius-sm: 8px;
  --radius-lg: 16px;
  --space: 8px;
  --grid-gap: 16px;
  --pad: 20px;
  --kpi-pad: 20px;

  --font-body: "Inter", system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
  /* Compat: beide oude rollen wijzen naar dezelfde letter. */
  --font-sans: var(--font-body);
  --font-serif: var(--font-body);

  /* ---- Afgeleide tokens ---------------------------------------------------
     Niet uit de briefing, wel nodig in deze interface. Allemaal afgeleid van de
     tokens hierboven, zodat ze meebewegen met het merkaccent en met dark mode.
     ------------------------------------------------------------------------ */
  --surface-strong: color-mix(in oklch, var(--fg) 6%, var(--surface));
  --surface-mute: color-mix(in oklch, var(--fg) 3%, var(--surface));
  --border-strong: color-mix(in oklch, var(--fg) 22%, var(--surface));
  --btn-primary: var(--accent-100);
  --heat: 64, 7, 69;           /* app.js overschrijft dit met het klantaccent */
  --shadow: none;              /* §3: kaarten hebben een rand, geen schaduw */
  --shadow-sm: none;

  /* ---- Rapportstijl, merk-agnostisch -------------------------------------
     Alles hieronder is afgeleid van --accent. app.js overschrijft --accent-data
     en de panelfamilie met een variant die op lichtheid is afgetopt (een licht
     merkaccent zou als reekskleur verdwijnen); de waarden hier zijn de terugval
     als die afleiding niet heeft gelopen.
     ------------------------------------------------------------------------ */
  --accent-data: var(--accent);                                     /* reeks 1, lijn, direct label */
  --s2: color-mix(in oklch, var(--accent-data) 55%, white);         /* reeks 2, de staven */
  --panel: color-mix(in oklch, var(--accent-data) 9%, var(--bg));   /* de grafiekbak, nooit een kaart */
  --panel-grid: color-mix(in oklch, var(--accent-data) 24%, var(--panel));
  --panel-axis: color-mix(in oklch, var(--accent-data) 42%, var(--panel));
  --strip: color-mix(in oklch, var(--accent-data) 5%, var(--bg));   /* strip achter de tabbladen */
  --on-accent: #ffffff;                                             /* tekst op een accentvlak */
  --marker: color-mix(in oklch, var(--accent) 30%, var(--bg));      /* decoratief, nooit data */

  /* Schreef voor wat je leest (koppen, grote cijfers), schreefloos voor wat je
     afleest. Systeemletters: geen extra verzoek, geen AVG-vraag. */
  --font-display: "Iowan Old Style", "Charter", "Bitstream Charter",
                  "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;

  /* Radius schaalt met het vlak: groter vlak, grotere ronding. */
  --radius-panel: 16px;
  --radius-card: 14px;
  --radius-tip: 11px;

  /* De enige drie verticale afstanden die het rapport kent. */
  --gap-section: 44px;
  --gap-kpi: 40px;
  --gap-controls: 26px;

  /* Eén schaduw in de hele app: onder de tooltip, omdat die echt zweeft. */
  --shadow-tip: 0 8px 24px rgba(0, 0, 0, 0.10);
}

/* Donkere modus (§2.1 en §8) — opt-in via data-theme="dark". */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #121212;
  --surface: #1e1e1e;
  --border: #2e2e2e;
  --fg: #e6e1e5;
  --fg-muted: #a8a29e;

  /* Accentstappen mengen naar het donkere oppervlak i.p.v. naar wit. */
  --accent-75: color-mix(in oklch, var(--accent) 75%, #121212);
  --accent-50: color-mix(in oklch, var(--accent) 50%, #121212);
  --accent-25: color-mix(in oklch, var(--accent) 25%, #121212);
  --accent-10: color-mix(in oklch, var(--accent) 10%, #121212);

  --positive: #4ade80;
  --negative: #f87171;
  --warning:  #fbbf24;
  --info:     #60a5fa;

  /* Donkere stappen van dezelfde zeven slice-tinten, apart gevalideerd tegen
     het donkere oppervlak — geen automatische omkering van de lichte waarden. */
  --slice-1: #3987e5;
  --slice-2: #d95926;
  --slice-3: #199e70;
  --slice-4: #c98500;
  --slice-5: #d55181;
  --slice-6: #008300;
  --slice-7: #9085e9;

  /* Rapportstijl in dark: dezelfde formules, ander eindpunt. --accent-data wordt
     hier door app.js juist opgelicht i.p.v. verdonkerd — een donker merkaccent is
     op #121212 onleesbaar. */
  --s2: color-mix(in oklch, var(--accent-data) 55%, #e6e1e5);
  --panel: color-mix(in oklch, var(--accent-data) 16%, var(--surface));
  --panel-grid: color-mix(in oklch, var(--accent-data) 34%, var(--panel));
  --panel-axis: color-mix(in oklch, var(--accent-data) 52%, var(--panel));
  --strip: color-mix(in oklch, var(--accent-data) 8%, var(--bg));
  --marker: color-mix(in oklch, var(--accent) 45%, var(--surface));
  --shadow-tip: 0 8px 24px rgba(0, 0, 0, 0.45);
}

/* Compacte dichtheid — alleen ritme, nooit de radius of de kleuren. */
:root[data-density="compact"] {
  --grid-gap: 12px;
  --pad: 16px;
  --kpi-pad: 16px;
}

/* ==========================================================
   Inter — zelf gehost
   ==========================================================
   Eén variabel bestand (latin, 47 kB) voor alle gewichten 100–900. Zelf hosten
   i.p.v. via Google Fonts: dan doet de browser van de klant geen verzoek naar
   een derde partij, wat in de EU een AVG-vraagstuk is.
   ========================================================== */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/inter-variable.woff2") format("woff2-variations");
}

/* ==========================================================
   Base
   ========================================================== */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  min-height: 100vh;
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--fg);
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
}
/* Typeschaal (§1) — hiërarchie uit grootte, gewicht en kleur. Negatieve
   letterspacing alleen vanaf 16px; kleiner dan 11px komt nergens voor. */
/* Geen margin: 0 hier — tientallen blokken leunen nog op de standaardmarge van
   de browser. Die nullen we pas als de layout per blok expliciet spacing krijgt. */
h1, h2, h3 { line-height: 1.2; text-wrap: balance; }
/* De kop is een bewering, niet een label: schreef, licht gewicht, en het
   scherpe deel vet met <b>. */
h1 { font-family: var(--font-display); font-size: 40px; font-weight: 400; line-height: 1.14; letter-spacing: -0.005em; }
h2 { font-family: var(--font-display); font-size: 25px; font-weight: 400; letter-spacing: -0.005em; }
h1 b, h2 b { font-weight: 700; }
h3 { font-family: var(--font-body); font-size: 16px; font-weight: 600; letter-spacing: -0.01em; }
/* Het kleine kapitaaltje is een aparte rol, geen kaping van h3: analyse, ads en
   de bronkeuze gebruiken h3 als echte kop. */
.label-head {
  font-family: var(--font-body); font-size: 12px; font-weight: 600;
  letter-spacing: 0.11em; text-transform: uppercase; color: var(--fg-muted);
  margin: 0 0 12px;
}

/* Cijfers krijgen tabulaire breedtes, zodat kolommen niet verspringen. */
.kpi-value {
  font-family: var(--font-display);
  font-size: 37px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums lining-nums;
}

button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }

.screen { display: none; min-height: 100vh; }
.screen.on { display: block; }

/* ==========================================================
   Onboarding screens (login / source / manual upload)
   ========================================================== */
.auth-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 36px;
  max-width: 920px;
  margin: 40px auto;
}
.auth-card .brand {
  font-size: 18px;
  letter-spacing: 0.18em;
  color: var(--fg);
  text-transform: uppercase;
}
.auth-grid {
  display: grid;
  grid-template-columns: 0.85fr 1fr;
  gap: 32px;
  align-items: stretch;
  min-height: 460px;
}
.auth-panel {
  background: linear-gradient(160deg, var(--accent-100) 0%, color-mix(in oklch, var(--accent-100) 80%, black) 100%);
  color: #fff;
  border-radius: var(--radius-lg);
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
}
.auth-panel::after {
  content: "";
  position: absolute;
  inset: auto -40px -60px auto;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  filter: blur(10px);
}
.auth-panel h1 {
  margin: 0;
  font-size: 38px;
  line-height: 1.05;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.auth-panel p {
  max-width: 360px;
  color: rgba(255, 255, 255, 0.86);
  line-height: 1.7;
  font-size: 14px;
  margin: 18px 0 0;
}
.auth-panel .note {
  font-size: 11px;
  letter-spacing: 0.12em;
  color: rgba(255, 255, 255, 0.65);
  text-transform: uppercase;
  font-weight: 600;
}
/* ---- Login — rapportstijl ------------------------------------------------
   Zelfde grammatica als het dashboard: papier, één getinte grafiekbak, schreef
   voor de bewering, schreefloos voor wat je afleest. Vóór het inloggen is er nog
   geen klantaccent, dus hier staat altijd de mayday-standaard.
   -------------------------------------------------------------------------- */
.login-shell {
  min-height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  max-width: 1180px;
  margin: 0 auto;
  padding: 28px 40px 24px;
}
.login-top img { display: block; height: 24px; width: auto; }
.login-top .on-dark,
.login-foot .on-dark { display: none; }
:root[data-theme="dark"] .login-top .on-light { display: none; }
:root[data-theme="dark"] .login-top .on-dark { display: block; }

.login-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: 72px;
  align-items: center;
  padding: var(--gap-section) 0;
}

.login-form { display: grid; gap: 0; align-content: center; max-width: 440px; }
.login-eyebrow {
  margin: 0 0 18px;
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 500;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--fg-muted);
}
.login-eyebrow::before {
  content: ""; display: inline-block; vertical-align: middle;
  width: 22px; height: 2px; margin-right: 10px;
  background: var(--accent-data);
}
.login-form h1 { margin: 0; font-size: 46px; line-height: 1.08; }
.login-lede {
  margin: 18px 0 0; max-width: 38ch;
  font-size: 15px; line-height: 1.6; color: var(--fg-muted);
}

.login-fields {
  display: grid; gap: 18px;
  margin-top: var(--gap-kpi);
  padding-top: var(--gap-controls);
  border-top: 2px solid var(--fg);
}
.login-form label {
  display: block; margin-bottom: 8px;
  font-size: 12px; font-weight: 600;
  letter-spacing: 0.11em; text-transform: uppercase;
  color: var(--fg-muted);
}
.login-form input {
  width: 100%; padding: 13px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--fg);
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.login-form input::placeholder { color: color-mix(in oklch, var(--fg-muted) 70%, var(--surface)); }
.login-form input:focus {
  border-color: var(--accent-data);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--accent-data) 18%, transparent);
}
.login-form input[aria-invalid="true"] { border-color: var(--negative); }
#login-error { font-size: 13px; color: var(--negative); min-height: 0; }
#login-error:empty { display: none; }
.login-form button {
  width: 100%; padding: 14px 18px; margin-top: 4px;
  border: none; border-radius: var(--radius-sm);
  background: var(--btn-primary); color: var(--on-accent);
  font-size: 15px; font-weight: 600; letter-spacing: 0.01em;
  transition: background 0.15s;
}
.login-form button:hover { background: color-mix(in oklch, var(--btn-primary) 86%, black); }
.login-form button:focus-visible { outline: 2px solid var(--accent-data); outline-offset: 3px; }
.login-form button:disabled { opacity: 0.7; cursor: progress; }
.login-note { margin: 22px 0 0; max-width: 42ch; font-size: 12px; line-height: 1.6; color: var(--fg-muted); }
.login-note a {
  color: var(--fg); text-decoration: underline;
  text-decoration-color: var(--marker); text-underline-offset: 3px;
}
.login-note a:hover { text-decoration-color: var(--accent-data); }

/* De grafiekbak: getint vlak, geen kaart — geen rand, geen schaduw. */
.login-panel {
  background: var(--panel);
  border-radius: var(--radius-panel);
  padding: 44px 36px 36px;
  aspect-ratio: 4 / 3;
  display: flex; flex-direction: column;
}
.login-chart { width: 100%; flex: 1; min-height: 120px; overflow: visible; }
.lc-grid line { stroke: var(--panel-grid); stroke-width: 1; vector-effect: non-scaling-stroke; }
.lc-axis { stroke: var(--panel-axis); stroke-width: 1.5; fill: none; vector-effect: non-scaling-stroke; }
.lc-bars rect { fill: var(--s2); rx: 3; }
.lc-line {
  fill: none; stroke: var(--accent-data); stroke-width: 2.5;
  stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke;
}
.lc-dot { fill: var(--accent-data); stroke: var(--panel); stroke-width: 3; }
/* Zestien tegels in twee rijen van acht; ze schalen mee met de bak. */
.login-logos {
  list-style: none; margin: 0 0 28px; padding: 0;
  display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 8px;
}
.lc-logo {
  aspect-ratio: 1;
  display: flex; align-items: center; justify-content: center;
  border-radius: 999px;
  background: var(--surface);
  position: relative;
}
/* Het logo is een mask: de vorm komt uit het bestand, de kleur uit het token. */
.lc-logo::before {
  content: ""; width: 46%; height: 46%;
  background: var(--accent-data);
  -webkit-mask: var(--icon) center / contain no-repeat;
          mask: var(--icon) center / contain no-repeat;
}
.lc-logo > span:last-child {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
.lc-logo--more { background: transparent; border: 1.5px dashed var(--panel-axis); }
.lc-logo--more::before { display: none; }
.lc-logo--more > span[aria-hidden] { font-size: 16px; font-weight: 700; line-height: 1; color: var(--accent-data); transform: translateY(-3px); }

.login-foot {
  display: flex; align-items: center; gap: 12px;
  padding-top: 16px; border-top: 1px solid var(--border);
  font-size: 12px; color: var(--fg-muted);
}
/* De beacon: Candy, net als in de lockup. Decoratie, nooit data. */
.login-beacon { width: 7px; height: 7px; border-radius: 50%; background: #ed8afa; }

/* De chat heeft een token nodig; vóór het dashboard is de knop een dode knop. */
body:has(#app-screen:not(.on)) .chat-toggle-btn { display: none; }

/* Ladder: 900 stapelt, 520 laat het beeld vallen. */
@media (max-width: 900px) {
  .login-shell { padding: 20px 24px; }
  .login-main { grid-template-columns: 1fr; gap: var(--gap-kpi); padding: 36px 0; }
  .login-form { max-width: 520px; }
  .login-visual { order: -1; }
  .login-panel { aspect-ratio: auto; height: 300px; padding: 28px 24px 22px; }
}
@media (max-width: 520px) {
  .login-shell { padding: 18px 16px; }
  .login-visual { order: 0; }
  .login-panel { height: auto; padding: 18px; }
  .login-chart { display: none; }
  .login-logos { margin: 0; gap: 6px; }
  .login-main { padding: 28px 0; }
  .login-form h1 { font-size: 36px; }
  .login-foot span:last-child { display: none; }
}
.helper-note { font-size: 12px; color: var(--fg-muted); }

.source-grid { display: grid; gap: 16px; margin-top: 22px; grid-template-columns: 1fr 1fr; }
.source-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 22px; padding: 24px;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s;
  display: flex; flex-direction: column;
}
.source-card:hover { transform: translateY(-3px); border-color: var(--accent); box-shadow: var(--shadow-sm); }
.source-card h3 { margin: 0 0 10px; font-size: 14px; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 700; }
.source-card p { margin: 0 0 16px; color: var(--fg-muted); line-height: 1.7; font-size: 13px; }
.source-card ul { margin: 0; padding-left: 18px; color: var(--fg-muted); font-size: 13px; line-height: 1.8; }
.source-card button, .upload-action {
  margin-top: auto; padding: 14px 18px;
  border-radius: 14px; border: 1px solid var(--border);
  background: var(--surface); color: var(--fg);
  font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; font-size: 12px;
}
.source-card button.primary, .upload-action.primary {
  background: var(--btn-primary); color: #fff; border-color: transparent;
}
.upload-grid { display: grid; gap: 14px; margin-top: 24px; grid-template-columns: 1fr 1fr 1fr; }
.upload-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 18px; padding: 20px; display: grid; gap: 10px;
}
.upload-card .label { font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-muted); font-weight: 700; }
.upload-card .title { font-weight: 700; color: var(--fg); display: flex; align-items: center; gap: 10px; font-size: 14px; }
.upload-card .copy { color: var(--fg-muted); font-size: 12px; line-height: 1.6; }
.upload-card .zone {
  padding: 22px; border-radius: 14px; border: 1.5px dashed var(--border-strong);
  color: var(--fg-muted); text-align: center; font-size: 12px;
  transition: border-color 0.2s, background 0.2s;
}
.upload-card .zone:hover { border-color: var(--accent); background: var(--accent-10); color: var(--accent); }
.upload-action { width: 100%; margin-top: 22px; padding: 16px; }
.unlock-note { margin: 22px 0 0; font-size: 12px; color: var(--fg-muted); text-align: center; }
.brand-pill {
  background: var(--surface-strong); color: var(--fg);
  padding: 8px 12px; border-radius: 999px;
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 700;
  width: fit-content;
}

/* ==========================================================
   App shell — sidebar / topbar / content / chat
   ========================================================== */
.page-shell { display: flex; min-height: 100vh; }
.sidebar {
  width: 224px;
  background: var(--surface);
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column;
  padding: 26px 18px; gap: 22px;
  /* Vaste hoogte: de zijbalk is de navigatie, niet een kolom naast de inhoud.
     Zonder dit rekt hij mee met de langste pagina (de Rapport-deck is meters
     lang) en staat het afmelden onderaan een scherm dat niemand bereikt.
     Sticky in plaats van fixed, zodat de hoofdkolom zijn eigen breedte houdt;
     align-self voorkomt dat flex hem alsnog uitrekt. Onder 900px neemt de
     lade-regel (position: fixed) het over. */
  position: sticky; top: 0;
  height: 100vh; align-self: flex-start;
  overflow-y: auto; overscroll-behavior: contain;
}
/* Bovenaan staat de klant: zijn logo als dat er is, anders zijn naam. */
.sidebar .brand {
  padding: 0 6px; min-height: 28px;
  display: flex; align-items: center;
}
.sidebar .brand span {
  font-size: 15px; font-weight: 600;
  color: var(--fg);
  letter-spacing: -0.01em; line-height: 1.2;
}
.sidebar .brand span[hidden] { display: none; }
.sidebar .brand .brand-logo { margin-left: 0; max-height: 26px; }
.nav-links { display: flex; flex-direction: column; gap: 3px; flex: 1; }
.nav-section {
  font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--fg-muted); font-weight: 600;
  padding: 4px 8px 8px;
}
.nav-link {
  position: relative;
  display: flex; align-items: center; gap: 11px;
  padding: 13px 12px; border-radius: 10px;
  min-height: 44px;            /* raakbaar op een touchscreen */
  border: 0;
  background: transparent;
  color: var(--fg-muted);
  font-weight: 500; font-size: 13.5px;
  letter-spacing: 0;
  transition: background 0.15s ease, color 0.15s ease;
  text-align: left;
}
.nav-link:hover { background: var(--surface-mute); color: var(--fg); }
.nav-link.on {
  background: var(--panel);
  color: var(--fg);
  font-weight: 600;
}
/* Accentstreep aan de linkerrand: de staat hangt niet aan kleur alleen. */
.nav-link.on::before {
  content: "";
  position: absolute; left: 0; top: 10px; bottom: 10px;
  width: 3px; border-radius: 2px;
  background: var(--accent);
}
.nav-link .icon {
  flex: none; width: 16px; height: 16px;
  display: inline-flex; align-items: center; justify-content: center;
  color: currentColor;
}
.nav-link .icon svg { width: 16px; height: 16px; }
:root[data-nav="collapsed"] .nav-link.on::before { left: -12px; }
.nav-link .icon { font-size: 15px; line-height: 1; opacity: 0.85; width: 18px; text-align: center; }
.nav-link .badge {
  margin-left: auto;
  font-size: 10px; padding: 2px 8px;
  background: var(--surface-strong);
  color: var(--fg-muted);
  border-radius: 999px;
  letter-spacing: 0;
}
.nav-link.on .badge { background: var(--accent-25); color: var(--accent-text); }

.sidebar .logout {
  margin-top: 6px; padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--fg-muted);
  font-weight: 600; font-size: 12px;
  letter-spacing: 0.05em;
  display: flex; align-items: center; gap: 10px;
}
.sidebar .logout:hover { color: var(--fg); border-color: var(--border-strong); }

.app-main { flex: 1; display: flex; flex-direction: column; background: var(--bg); min-width: 0; }

.topbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 18px 28px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}
.topbar .title-group { display: flex; flex-direction: column; gap: 4px; }
.topbar .crumbs {
  font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--fg-muted); font-weight: 600;
  display: flex; gap: 8px; align-items: center;
}
.topbar .crumbs .sep { opacity: 0.5; }
.topbar h1.page-title {
  margin: 0; font-family: var(--font-display);
  font-size: 40px; font-weight: 400; line-height: 1.14;
  letter-spacing: -0.005em;
  color: var(--fg);
  text-transform: none;
}
.topbar .controls { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.date-filter {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 14px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--surface);
}
.date-filter label { font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-muted); font-weight: 700; }
.date-filter input {
  border: none; background: transparent;
  color: var(--fg); font-size: 12px;
  width: 110px; outline: none;
}
.date-filter .sep { color: var(--fg-muted); font-size: 12px; }
.btn {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  color: var(--fg);
  padding: 10px 14px;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.04em;
  display: inline-flex; align-items: center; gap: 8px;
  transition: all 0.15s;
}
.btn:hover { border-color: var(--border-strong); color: var(--fg); }
.btn.primary { background: var(--btn-primary); color: #fff; border-color: transparent; border-radius: 999px; padding: 10px 18px; }
.btn.primary:hover { color: #fff; transform: translateY(-1px); box-shadow: 0 8px 20px rgba(var(--heat), 0.3); }
.btn.ghost { background: transparent; border-color: transparent; }
.btn.tiny { padding: 6px 10px; font-size: 11px; border-radius: 9px; }
.btn .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--positive); }

.page-content { padding: var(--pad); flex: 1; overflow-y: auto; }

/* ==========================================================
   KPI cards
   ========================================================== */
.kpi-grid {
  display: grid; gap: var(--grid-gap);
  /* Vier of vijf kaarten, elk minstens 190px — onder die breedte is een KPI
     met contextregel niet meer te lezen. */
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.kpi-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--kpi-pad);
  display: flex; flex-direction: column; gap: 10px;
  position: relative; overflow: hidden;
  transition: transform 0.15s, box-shadow 0.2s;
}
.kpi-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.kpi-card .label {
  font-size: 11px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--fg-muted);
  font-weight: 700;
  display: flex; align-items: center; gap: 8px;
}
.kpi-card .label .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent);
}
/* Elk getoond cijfer: schreef, licht gewicht, tabulaire breedtes. Los van waar
   het staat — een cijfer in een klein kaartje is hetzelfde type cijfer als in
   een KPI, alleen kleiner. */
.value {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1;
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--fg);
}
.value { font-size: 37px; }
.value.compact { font-size: 30px; }
.value.small { font-size: 26px; }
.kpi-card .value { margin-top: 4px; }
.kpi-card .delta {
  font-size: 12px; font-weight: 600;
  display: inline-flex; align-items: center; gap: 4px;
  letter-spacing: 0.02em;
}
.kpi-card .delta.up { color: var(--positive); }
.kpi-card .delta.down { color: var(--negative); }
/* Geen verandering is neutraal grijs, nooit groen (§2.3). 'nieuw' en 'geen
   vergelijking' zijn statusmeldingen, geen prestaties — dus ook neutraal. */
.kpi-card .delta.flat,
.kpi-card .delta.new,
.kpi-card .delta.none { color: var(--fg-muted); font-weight: 500; }
.kpi-card .delta.none { font-style: normal; }
.kpi-card .delta .vs { color: var(--fg-muted); font-weight: 500; margin-left: 4px; }
.kpi-card .spark { margin-top: 6px; }


/* ==========================================================
   Rapportmodel — kop, grafiekbak, callouts, stempel, tabel
   ==========================================================
   De onderdelen waar een pagina in rapportvorm uit bestaat. Eén regel per
   onderdeel houdt het rapport eerlijk: de kop is een bewering, elk cijfer heeft
   context, elke grafiek een bron, en een callout heeft een vaste toon per
   functie in plaats van per afwisseling.
   ========================================================== */

/* Eyebrow benoemt het onderwerp, de kop de conclusie, de lede de meetlat. */
.report-head { margin-bottom: var(--gap-controls); }
.eyebrow {
  margin: 0 0 9px; font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--fg-muted);
}
.report-title {
  margin: 0 0 11px; font-family: var(--font-display);
  font-size: 40px; font-weight: 400; line-height: 1.14;
  letter-spacing: -0.005em; text-wrap: balance;
}
.report-title b { font-weight: 700; }
.report-lede {
  margin: 0; max-width: 62ch; font-family: var(--font-display);
  font-size: 15px; line-height: 1.6; color: var(--fg-muted);
}
/* De conclusie ís de paginakop, dus de topbar-titel verdwijnt op zo'n pagina. */
:root[data-report="on"] .topbar h1.page-title { display: none; }

/* De grafiekbak: het enige getinte vlak op de pagina, nooit een kaart. */
.chart-tub {
  background: var(--panel);
  border-radius: var(--radius-panel);
  padding: 20px 24px 12px;
}
.chart-tub .chart-legend { margin-bottom: 10px; }
/* Kop en bronregel horen buiten de bak; de wrapper houdt ze bij elkaar. */
.tub-wrap { display: block; }
.tub-wrap .panel-header { margin-bottom: 12px; }
.source-line { margin: 11px 2px 0; font-size: 11.5px; color: var(--fg-muted); line-height: 1.6; }
.source-line b { font-weight: 600; color: var(--fg); }

/* Grafiek links, callouts rechts — onder 900px onder elkaar. */
.report-split {
  margin-top: var(--gap-kpi);
  display: grid; grid-template-columns: minmax(0, 1fr) 320px;
  gap: 24px; align-items: start;
}
.callouts { display: flex; flex-direction: column; gap: 14px; }
.callout-card {
  border-radius: var(--radius-card); padding: 16px 18px;
  font-size: 13px; line-height: 1.6; color: #1a1a1a;
}
.callout-card .ct {
  display: flex; align-items: center; gap: 9px;
  font-weight: 700; margin-bottom: 8px; font-size: 13.5px;
}
.callout-card .ct .glyph {
  width: 21px; height: 21px; border-radius: 50%;
  background: #1a1a1a; color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; line-height: 1; flex: none;
}
.callout-card.good { background: var(--positive-bg); }
.callout-card.watch { background: var(--negative-bg); }
.callout-card.info { background: var(--info-bg); }
.callout-card .btn { margin-top: 12px; width: 100%; justify-content: center; }
.callout-foot { margin: 2px 2px 0; font-size: 11.5px; line-height: 1.7; color: var(--fg-muted); }

/* Datastempel: het lampje rekent tegen vandaag, niet tegen het bouwmoment. */
.datastamp {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 7px 14px 7px 11px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--border);
  font-size: 11.5px; color: var(--fg-muted); line-height: 1.35;
}
/* [hidden] verliest van display:inline-flex, dus expliciet. */
.datastamp[hidden] { display: none; }
.datastamp b { color: var(--fg); font-weight: 600; }
.datastamp .led { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.datastamp .led.fresh { background: var(--positive); box-shadow: 0 0 0 3px var(--positive-bg); }
.datastamp .led.aging { background: var(--warning); box-shadow: 0 0 0 3px var(--warning-bg); }
.datastamp .led.stale { background: var(--negative); box-shadow: 0 0 0 3px var(--negative-bg); }

/* Tabel in rapportstijl: labels links, cijfers rechts, lopende rij in grijs. */
.report-table {
  margin-top: var(--gap-controls); overflow-x: auto;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-card); padding: 6px 14px;
}
.report-table table {
  border-collapse: collapse; width: 100%; font-size: 12.5px;
  font-variant-numeric: tabular-nums;
}
.report-table th, .report-table td {
  text-align: right; padding: 8px 10px; border-bottom: 1px solid var(--border);
}
.report-table th:first-child, .report-table td:first-child { text-align: left; }
.report-table th {
  color: var(--fg-muted); font-weight: 600; font-size: 10.5px;
  text-transform: uppercase; letter-spacing: 0.1em;
}
.report-table tbody tr:last-child td { border-bottom: 0; }
.report-table tr.running td { color: var(--fg-muted); }
.report-table .pos { color: var(--positive); font-weight: 600; }
.report-table .neg { color: var(--negative); font-weight: 600; }

/* Bronkaarten dragen drie regels tekst per stuk: onder 300px worden die
   onleesbaar, dus drie kolommen in plaats van zes. */
.bron-grid {
  display: grid; gap: var(--grid-gap);
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

/* Panelen binnen een sub-tab */
.subpane { display: none; }
.subpane.on { display: block; }
.controls-row {
  display: flex; gap: 16px; align-items: center; flex-wrap: wrap;
  margin-bottom: var(--gap-controls);
}

@media (max-width: 900px) {
  .report-split { grid-template-columns: 1fr; }
  .report-title { font-size: 30px; }
}

/* ==========================================================
   Chart panel & generic panels
   ========================================================== */
.panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--pad);
}
.panel-header {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 12px;
  margin-bottom: 14px; flex-wrap: wrap;
}
.panel-title {
  font-family: var(--font-display);
  font-size: 25px;
  font-weight: 400;
  color: var(--fg);
  margin: 0;
  letter-spacing: -0.005em;
}
.panel-sub { font-size: 12px; color: var(--fg-muted); margin-top: 4px; }
.panel-actions { display: flex; gap: 8px; align-items: center; }

.chart-legend {
  display: flex; gap: 16px; flex-wrap: wrap;
  font-size: 11px; color: var(--fg-muted);
  letter-spacing: 0.04em;
}
.chart-legend .item { display: inline-flex; align-items: center; gap: 6px; }
.chart-legend .swatch { width: 10px; height: 10px; border-radius: 3px; }

.row-2 {
  display: grid; gap: var(--grid-gap);
  grid-template-columns: 2fr 1fr;
  margin-top: var(--grid-gap);
}
.row-3 {
  display: grid; gap: var(--grid-gap);
  grid-template-columns: 1fr 1fr 1fr;
  margin-top: var(--grid-gap);
}

/* Top posts list */
.top-posts { display: flex; flex-direction: column; gap: 12px; }
.top-post {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 10px;
  border-radius: 14px;
  border: 1px solid transparent;
  transition: border-color 0.15s, background 0.15s;
  cursor: pointer;
}
.top-post:hover { border-color: var(--border); background: var(--surface-mute); }
.post-thumb {
  width: 56px; height: 56px;
  border-radius: 12px;
  background: var(--surface-strong);
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  font-size: 18px;
  position: relative; overflow: hidden;
}
.post-thumb.large {
  width: 100%; height: 280px;
  border-radius: var(--radius-sm);
  font-size: 28px;
}
.post-thumb .platform-tag {
  position: absolute; top: 6px; left: 6px;
  font-size: 9px; padding: 2px 6px;
  background: rgba(0,0,0,0.45);
  color: #fff;
  border-radius: 5px;
  letter-spacing: 0.08em; text-transform: uppercase;
  font-weight: 600;
}
.post-thumb .play-icon {
  position: absolute; bottom: 6px; right: 6px;
  width: 22px; height: 22px;
  background: rgba(0,0,0,0.4);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  font-size: 9px;
}
.top-post .meta {
  display: flex; flex-direction: column; gap: 4px; min-width: 0;
}
.top-post .caption {
  font-size: 13px; color: var(--fg);
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}
.top-post .submeta {
  font-size: 11px; color: var(--fg-muted);
  display: flex; gap: 8px;
}
.top-post .stat {
  text-align: right;
}
.top-post .stat .n {
  font-family: var(--font-display);
  font-size: 19px;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--fg);
}
.top-post .stat .l {
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-muted);
  font-weight: 700;
}

/* Channel mix */
.channel-mix { display: flex; flex-direction: column; gap: 14px; }
.channel-row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px; }
.channel-row .label { font-size: 12px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.channel-row .label .swatch { width: 10px; height: 10px; border-radius: 3px; }
.channel-row .pct { font-size: 16px; }
.channel-bar {
  grid-column: 1 / -1;
  height: 8px;
  background: var(--surface-strong);
  border-radius: 999px;
  overflow: hidden;
}
.channel-bar .fill { height: 100%; border-radius: 999px; transition: width 0.6s ease; }

/* Cadence heatmap */
.cadence {
  display: grid;
  grid-template-columns: 32px repeat(13, 1fr);
  gap: 4px;
  margin-top: 6px;
}
.cadence .day-label {
  font-size: 10px;
  color: var(--fg-muted);
  letter-spacing: 0.05em;
  display: flex; align-items: center;
  font-weight: 600;
}
.cadence .cell {
  aspect-ratio: 1;
  border-radius: 4px;
  background: var(--surface-strong);
  position: relative;
}
.cadence .cell[data-v="1"] { background: rgba(var(--heat), 0.18); }
.cadence .cell[data-v="2"] { background: rgba(var(--heat), 0.4); }
.cadence .cell[data-v="3"] { background: rgba(var(--heat), 0.7); }
.cadence .cell[data-v="4"] { background: rgba(var(--heat), 1); }

/* ==========================================================
   Library page
   ========================================================== */
.lib-toolbar {
  display: flex; gap: 10px; align-items: center; justify-content: space-between;
  margin-bottom: var(--grid-gap);
  flex-wrap: wrap;
}
.chip-row { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.chip {
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  font-size: 11px;
  font-weight: 600;
  color: var(--fg-muted);
  letter-spacing: 0.04em;
  display: inline-flex; align-items: center; gap: 6px;
  transition: all 0.15s;
}
.chip:hover { border-color: var(--border-strong); color: var(--fg); }
.chip.on {
  background: var(--fg);
  color: var(--surface);
  border-color: transparent;
}
.chip .count { opacity: 0.7; font-weight: 500; }
.toggle-group {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  overflow: hidden;
}
.toggle-group button {
  padding: 8px 12px; border: none; background: transparent;
  color: var(--fg-muted); font-size: 11px; font-weight: 600;
  letter-spacing: 0.04em;
}
.toggle-group button.on { background: var(--fg); color: var(--surface); }
.search-input {
  position: relative; display: inline-flex;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  padding: 0 12px;
  align-items: center;
  gap: 8px;
}
.search-input::before {
  content: "⌕";
  font-size: 14px;
  color: var(--fg-muted);
}
.search-input input {
  border: none; background: transparent;
  outline: none;
  padding: 9px 0;
  width: 220px;
  font-size: 12px;
  color: var(--fg);
}

.lib-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--grid-gap);
}
.lib-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform 0.18s, box-shadow 0.2s, border-color 0.15s;
  cursor: pointer;
}
.lib-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-sm);
  border-color: var(--border-strong);
}
.lib-card .thumb {
  aspect-ratio: 1;
  position: relative; overflow: hidden;
  display: flex; align-items: flex-end;
  background: var(--surface-strong);
}
.lib-card .thumb .pill-row {
  position: absolute; top: 10px; left: 10px; right: 10px;
  display: flex; justify-content: space-between; gap: 6px;
}
.lib-card .thumb .pill {
  font-size: 9px; padding: 3px 7px;
  background: rgba(0,0,0,0.55);
  color: #fff;
  border-radius: 6px;
  letter-spacing: 0.08em; text-transform: uppercase;
  font-weight: 600;
}
.lib-card .thumb .pill.engage { background: rgba(255, 255, 255, 0.85); color: #111; }
.lib-card .body { padding: 14px; display: flex; flex-direction: column; gap: 8px; }
.lib-card .caption {
  font-size: 12px; color: var(--fg);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.lib-card .meta {
  font-size: 10px; color: var(--fg-muted);
  display: flex; gap: 8px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 600;
}
.lib-card .stats {
  display: flex; gap: 12px;
  border-top: 1px solid var(--border);
  padding-top: 10px;
  margin-top: 4px;
}
.lib-card .stats .s { display: flex; flex-direction: column; gap: 2px; }
.lib-card .stats .n { font-size: 14px; color: var(--fg); }
.lib-card .stats .l { font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-muted); font-weight: 700; }

/* Library Table */
.lib-table {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  overflow-x: auto;
}
.lib-table table { width: 100%; border-collapse: collapse; }
 .lib-table table { min-width: 1120px; }
.lib-table thead th {
  background: var(--surface-mute);
  text-align: left;
  font-size: 10px; letter-spacing: 0.1em;
  text-transform: uppercase; font-weight: 700;
  color: var(--fg-muted);
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
}
.lib-table thead th.right { text-align: right; }
.lib-table tbody td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
  vertical-align: middle;
}
.lib-table tbody tr:last-child td { border-bottom: none; }
.lib-table tbody tr:hover { background: var(--surface-mute); cursor: pointer; }
.lib-table .right { text-align: right; }
.lib-table .row-thumb {
  width: 36px; height: 36px;
  border-radius: 8px;
  display: inline-block; vertical-align: middle;
  margin-right: 12px;
  background: var(--surface-strong);
  position: relative;
  overflow: hidden;
}
.lib-table .row-thumb-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.lib-table thead th.sortable { cursor: pointer; user-select: none; }
.lib-table thead th.sortable:hover { color: var(--fg); }
.lib-table thead th .sort-arrow { margin-left: 4px; opacity: 0.7; }
.lib-table .row-caption {
  display: inline-block;
  max-width: 320px;
  vertical-align: middle;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
 .retention-row {
   display: inline-flex;
   gap: 4px;
   align-items: center;
   justify-content: center;
 }
 .retention-row .block {
   width: 10px;
   height: 10px;
   border-radius: 3px;
   background: rgba(var(--heat), 0.08);
   border: 1px solid rgba(var(--heat), 0.08);
 }
 .retention-row .block.active {
   background: var(--positive);
   border-color: color-mix(in oklch, var(--positive) 35%, transparent);
 }
 .benchmark-row {
   background: rgba(var(--heat), 0.04);
 }
 .benchmark-row td {
   font-weight: 700;
  color: var(--fg);
 }
.benchmark-row td:first-child {
  text-transform: uppercase;
  color: var(--accent);
}
 .sortable {
   cursor: pointer;
   user-select: none;
 }
 .sortable:hover {
   background: rgba(var(--heat), 0.08);
 }
 .perf-button {
   font-size: 10px;
   padding: 4px 8px;
   border-radius: 6px;
   border: none;
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: 0.06em;
   cursor: pointer;
   transition: all 0.15s;
 }
 .perf-button.good {
   background: var(--positive-bg);
   color: var(--positive);
 }
 .perf-button.average {
   background: rgba(var(--heat), 0.12);
   color: var(--accent);
 }
 .perf-button.bad {
   background: rgba(193, 77, 77, 0.12);
   color: var(--negative);
 }
 .perf-button:hover {
   opacity: 0.8;
 }
.lib-table .platform-tag {
  font-size: 10px;
  padding: 3px 8px;
  border-radius: 6px;
  letter-spacing: 0.06em; text-transform: uppercase;
  font-weight: 600;
}
.lib-table .platform-tag.ig { background: rgba(225, 48, 108, 0.12); color: #c12057; }
.lib-table .platform-tag.fb { background: rgba(24, 119, 242, 0.12); color: #1769c0; }
.lib-table .platform-tag.ads { background: rgba(var(--heat), 0.14); color: var(--accent-text); }
:root[data-theme="dark"] .lib-table .platform-tag.ig { background: rgba(225, 48, 108, 0.22); color: #ff80a8; }
:root[data-theme="dark"] .lib-table .platform-tag.fb { background: rgba(24, 119, 242, 0.22); color: #7faaff; }

/* ==========================================================
   Analysis page
   ========================================================== */
.insight-grid {
  display: grid; gap: var(--grid-gap);
  grid-template-columns: 1fr 1fr 1fr;
}
.insight-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--pad);
  display: flex; flex-direction: column; gap: 14px;
}
.insight-card .head {
  display: flex; align-items: center; gap: 10px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 14px;
}
.insight-card .head .pill {
  font-size: 10px; letter-spacing: 0.12em;
  text-transform: uppercase; font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
}
.insight-card.win .head .pill { background: var(--positive-bg); color: var(--positive); }
.insight-card.lose .head .pill { background: rgba(193, 77, 77, 0.14); color: var(--negative); }
.insight-card.rec .head .pill { background: var(--accent-10); color: var(--accent); }
.insight-card .head h3 {
  margin: 0;  font-size: 18px; font-weight: 400;
  color: var(--fg);
}
.insight-list { display: flex; flex-direction: column; gap: 14px; }
.insight-item {
  display: flex; flex-direction: column; gap: 4px;
}
.insight-item .heading {
  font-size: 13px; font-weight: 700;
  color: var(--fg);
  line-height: 1.4;
}
.insight-item .body {
  font-size: 12px; color: var(--fg-muted);
  line-height: 1.65;
  text-wrap: pretty;
}
.insight-item .tag {
  font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--fg-muted); font-weight: 700;
  margin-top: 2px;
}
.insight-item .delta {
  font-size: 18px;
  margin-bottom: 2px;
}
.insight-item .delta.up { color: var(--positive); }
.insight-item .delta.down { color: var(--negative); }

.analysis-narrative {
  margin-top: var(--grid-gap);
}
.narrative-body {
  font-size: 14px; line-height: 1.8;
  color: var(--fg-muted);
  max-width: 760px;
  text-wrap: pretty;
}
.narrative-body strong { color: var(--fg); font-weight: 600; }
.narrative-body .tag-pill {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--accent-10);
  color: var(--accent);
  font-weight: 700; font-size: 12px;
  letter-spacing: 0.04em;
}

/* ==========================================================
   Chat panel
   ========================================================== */
.chat-panel {
  width: 360px;
  border-left: 1px solid var(--border);
  background: var(--surface);
  display: flex;
  flex-direction: column;
  transition: transform 0.3s ease, width 0.3s ease;
  /* Sticky aan top van viewport zodat input zichtbaar blijft bij lange pagina's */
  position: sticky;
  top: 0;
  height: 100vh;
  align-self: flex-start;
  max-height: 100vh;
}
.chat-panel.collapsed {
  width: 0;
  border-left: none;
  transform: translateX(100%);
  overflow: hidden;
}
.chat-head {
  padding: 18px 22px;
  border-bottom: 1px solid var(--border);
  display: flex; justify-content: space-between; align-items: flex-start;
}
.chat-head .title {
  font-size: 18px; color: var(--fg);
  margin: 0;
}
.chat-head .sub {
  font-size: 11px; color: var(--fg-muted);
  letter-spacing: 0.04em;
  margin-top: 4px;
  display: flex; align-items: center; gap: 6px;
}
.chat-head .sub .dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--positive);
  animation: pulse 1.6s infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}
.chat-head .close {
  background: transparent; border: none; color: var(--fg-muted);
  font-size: 18px; padding: 0;
}
.chat-body {
  flex: 1;
  padding: 18px 18px 4px;
  overflow-y: auto;
  display: flex; flex-direction: column; gap: 14px;
}
.chat-prompts {
  padding: 8px 18px 16px;
  border-top: 1px solid var(--border);
  display: flex; gap: 6px; flex-wrap: wrap;
}
.chat-prompt {
  background: var(--surface-mute);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 8px 12px;
  font-size: 11px;
  color: var(--fg-muted);
  letter-spacing: 0.02em;
  transition: all 0.15s;
  cursor: pointer;
}
.chat-prompt:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-10); }
.chat-input {
  display: flex; gap: 8px;
  padding: 14px 18px 18px;
  border-top: 1px solid var(--border);
}
.chat-input input {
  flex: 1; padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--surface);
  outline: none;
  font-size: 13px;
}
.chat-input input:focus { border-color: var(--accent); }
.chat-input button {
  padding: 10px 14px;
  border-radius: 12px;
  background: var(--accent);
  color: #fff; border: none;
  font-weight: 700; font-size: 12px;
  letter-spacing: 0.06em; text-transform: uppercase;
}
.msg {
  display: flex; flex-direction: column; gap: 4px;
  max-width: 92%;
  animation: msgIn 0.3s ease both;
}
@keyframes msgIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}
.msg.user { align-self: flex-end; }
.msg.user .bubble {
  background: var(--accent);
  color: #fff;
  border-radius: 14px 14px 4px 14px;
}
.msg.bot .bubble {
  background: var(--surface-mute);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: 14px 14px 14px 4px;
}
.msg .bubble {
  padding: 12px 14px;
  font-size: 13px;
  line-height: 1.6;
}
.msg .author {
  font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--fg-muted); font-weight: 700;
}
.msg.user .author { text-align: right; }
.msg .meta-stats {
  display: flex; gap: 8px;
  margin-top: 6px;
  flex-wrap: wrap;
}
.msg .stat-chip {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 11px;
  display: inline-flex; gap: 6px; align-items: baseline;
}
.msg .stat-chip .n { font-size: 14px; color: var(--fg); }
.msg .stat-chip .l { color: var(--fg-muted); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 700; }
.msg .typing { display: inline-flex; gap: 4px; padding: 4px 0; }
.msg .typing span {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--fg-muted);
  animation: typing 1.2s infinite ease-in-out;
}
.msg .typing span:nth-child(2) { animation-delay: 0.15s; }
.msg .typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes typing {
  0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
  40% { transform: scale(1); opacity: 1; }
}

.chat-toggle-btn {
  position: fixed;
  bottom: 24px; right: 24px;
  height: 48px;
  padding: 0 20px;
  border-radius: 999px;
  background: var(--btn-primary);
  border: none; color: #fff;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 11px;
  display: inline-flex; align-items: center; gap: 8px;
  cursor: pointer;
  box-shadow: 0 12px 30px rgba(var(--heat), 0.32);
  transition: all 0.25s;
  z-index: 20;
}
.chat-toggle-btn:hover { transform: translateY(-2px); }
.chat-toggle-btn.hidden { transform: translateY(120%); opacity: 0; pointer-events: none; }
.chat-toggle-btn .blip {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #fff;
  animation: pulse 1.6s infinite;
}

/* ==========================================================
   Tweaks panel
   ========================================================== */
.tweaks-panel {
  position: fixed;
  top: 80px; right: 24px;
  width: 280px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: var(--shadow);
  padding: 16px;
  display: none;
  z-index: 50;
  font-size: 12px;
}
.tweaks-panel.on { display: block; }
.tweaks-panel h3 {
  margin: 0 0 10px;
  font-size: 16px;
  display: flex; justify-content: space-between; align-items: center;
}
.tweaks-panel h3 button {
  background: none; border: none; color: var(--fg-muted); font-size: 16px;
}
.tweaks-section {
  border-top: 1px solid var(--border);
  padding-top: 12px;
  margin-top: 12px;
  display: flex; flex-direction: column; gap: 8px;
}
.tweaks-section:first-of-type { border-top: none; padding-top: 0; margin-top: 6px; }
.tweaks-label {
  font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--fg-muted); font-weight: 700;
}
.tweak-row {
  display: flex; gap: 6px; flex-wrap: wrap;
}
.tweak-opt {
  flex: 1; min-width: 0;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  color: var(--fg-muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: capitalize;
  text-align: center;
  cursor: pointer;
}
.tweak-opt.on { background: var(--fg); color: var(--surface); border-color: transparent; }
.tweak-swatches { display: flex; gap: 6px; }
.tweak-swatch {
  width: 28px; height: 28px;
  border-radius: 8px;
  border: 2px solid transparent;
  cursor: pointer;
  position: relative;
}
.tweak-swatch.on { border-color: var(--fg); }

/* Period toggle on Overview */
.period-toggle {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  padding: 2px;
}
.period-toggle button {
  border: none; background: transparent;
  padding: 6px 10px;
  font-size: 11px; font-weight: 600;
  border-radius: 8px;
  color: var(--fg-muted);
  letter-spacing: 0.04em;
}
.period-toggle button.on { background: var(--fg); color: var(--surface); }

/* ==========================================================
   Misc / utilities
   ========================================================== */
.section-stack > * + * { margin-top: var(--grid-gap); }
.muted { color: var(--fg-muted); }
.soft { color: var(--fg-muted); }

/* Skeleton/placeholder thumbnail with brand pattern */
.thumb-pattern { position: relative; }
.thumb-pattern::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,0.25), transparent 40%),
    radial-gradient(circle at 70% 70%, rgba(0,0,0,0.18), transparent 50%);
  pointer-events: none;
  z-index: 2;
}
/* Hide brand-pattern overlay when a real image is rendered on top */
.thumb-pattern:has(.post-thumb-img)::before { display: none; }

/* Real post thumbnails from Metricool (Instagram CDN, etc.) */
.post-thumb-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
  display: block;
}
.post-thumb .glyph,
.post-thumb .play-icon {
  position: relative;
  z-index: 3;
  text-shadow: 0 1px 6px rgba(0,0,0,0.5);
}

/* Platform icon glyph (text) */
.glyph {
  letter-spacing: 0;
}

/* Responsive niceties */
@media (max-width: 1180px) {
  .kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .row-2 { grid-template-columns: 1fr; }
  .row-3 { grid-template-columns: 1fr; }
  .insight-grid { grid-template-columns: 1fr; }
}

/* Skeleton loaders (stap 3 — live data fetch) */
@keyframes skeleton-shimmer {
  0%   { background-position: -200px 0; }
  100% { background-position: calc(200px + 100%) 0; }
}
.kpi-card.skeleton { pointer-events: none; }
.kpi-card.skeleton:hover { transform: none; box-shadow: none; }
.skel-line {
  display: block;
  border-radius: 6px;
  background: linear-gradient(90deg,
    rgba(var(--heat), 0.06) 0%,
    rgba(var(--heat), 0.12) 50%,
    rgba(var(--heat), 0.06) 100%);
  background-size: 200px 100%;
  background-repeat: no-repeat;
  animation: skeleton-shimmer 1.4s ease-in-out infinite;
}
[data-theme="dark"] .skel-line {
  background: linear-gradient(90deg,
    rgba(255,255,255,0.06) 0%,
    rgba(255,255,255,0.14) 50%,
    rgba(255,255,255,0.06) 100%);
  background-size: 200px 100%;
}


/* ========== Methodology page (Blok E) ========== */
#methodology-content .panel-title { font-weight: 400; }
.method-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
}
@media (max-width: 760px) { .method-grid { grid-template-columns: 1fr; } }
.method-subhead {
  font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--fg-muted); font-weight: 700; margin-bottom: 8px;
}
.method-list { margin: 0; padding-left: 18px; }
.method-list li { font-size: 13px; line-height: 1.6; color: var(--fg); margin-bottom: 7px; }
.method-list.muted-list li { color: var(--fg-muted); }
.method-list strong { color: var(--fg); }
.method-thresholds {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 14px; margin-top: 14px;
}
@media (max-width: 620px) { .method-thresholds { grid-template-columns: 1fr; } }
.method-thresholds .thr {
  border: 1px solid var(--border); border-radius: 12px;
  padding: 16px; background: var(--surface);
}
.method-thresholds .thr-val { font-size: 26px; line-height: 1; }
.method-thresholds .thr-lbl { font-weight: 700; margin: 8px 0 4px; font-size: 13px; }
.method-thresholds .thr .muted { font-size: 12px; line-height: 1.45; }
.method-thresholds .thr.good { border-color: color-mix(in oklch, var(--positive) 40%, transparent); }
.method-thresholds .thr.good .thr-val, .method-thresholds .thr.good .thr-lbl { color: var(--positive); }
.method-thresholds .thr.avg .thr-val, .method-thresholds .thr.avg .thr-lbl { color: var(--fg); }
.method-thresholds .thr.bad { border-color: var(--negative-bg); }
.method-thresholds .thr.bad .thr-val, .method-thresholds .thr.bad .thr-lbl { color: var(--negative); }

/* ==========================================================
   Merklogo — rechtsboven in de topbar (design system §3).
   Max 28px hoog; wordt getoond zodra de Config-tab een Logo URL levert.
   ========================================================== */
.brand-logo {
  max-height: 28px;
  width: auto;
  display: block;
  margin-left: 6px;
  object-fit: contain;
}
.brand-logo[hidden] { display: none; }

/* ==========================================================
   Responsieve ladder — vier grenzen, en wat er op elke grens gebeurt
   ==========================================================
   De app had acht losse breekpunten die per onderdeel waren toegevoegd (1180,
   900, 760, 620, 520). Daardoor kon de zijbalk inklappen terwijl een tabel nog
   op volle breedte stond. Vanaf hier gelden deze vier voor de hele interface;
   een nieuw blok knikt op dezelfde grenzen.

     > 1180   zijbalk 240px uitgeklapt · KPI-rij vier kolommen · grafiek en
              callout naast elkaar
     ≤ 1180   zijbalk klapt in naar de rail van 68px (tenzij de gebruiker hem
              expliciet open heeft gezet) · KPI-rij twee kolommen
     ≤ 900    de rail wordt een uitschuiflade over de inhoud, met de knop in de
              topbar · in de lade staat de volledige mayday-lockup weer
     ≤ 760    sub-tabs horizontaal scrollbaar · callouts onder de grafiek
     ≤ 520    tabellen scrollen horizontaal met de eerste kolom vastgezet

   De oudere component-breekpunten (620 voor .method-thresholds, 520 voor
   .geo-phases) staan nog zoals ze waren; die horen bij één blok en botsen niet
   met de ladder.
   ========================================================== */

/* ---- Navigatiestanden -----------------------------------------------------
   Eén attribuut op <html> zet de zijbalk om: data-nav="collapsed" is de rail,
   data-nav="open" is de lade op klein scherm. Er rekent geen JS aan de layout —
   app.js zet alleen het attribuut.
   -------------------------------------------------------------------------- */
:root[data-nav="collapsed"] .sidebar {
  width: 68px;
  padding: 22px 0 18px;
  align-items: center;
  gap: 14px;
}
:root[data-nav="collapsed"] .sidebar .brand { justify-content: center; padding: 0; }
:root[data-nav="collapsed"] .sidebar .brand span,
:root[data-nav="collapsed"] .brand-pill,
:root[data-nav="collapsed"] .nav-section,
:root[data-nav="collapsed"] #sidebar-brand-sub,
:root[data-nav="collapsed"] .mayday-credit .lockup { display: none; }
/* Label visueel weg, maar leesbaar voor een schermlezer: een pictogramknop
   zonder naam is anders een naamloze knop. */
:root[data-nav="collapsed"] .nav-link span:not(.icon),
:root[data-nav="collapsed"] .logout .label {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}
:root[data-nav="collapsed"] .mayday-credit .mark { display: block; }
:root[data-nav="collapsed"] .nav-links { width: 100%; align-items: center; }
:root[data-nav="collapsed"] .nav-link,
:root[data-nav="collapsed"] .logout {
  width: 44px; height: 44px; padding: 0;
  justify-content: center; gap: 0;
}
:root[data-nav="collapsed"] .mayday-credit { padding: 14px 0 0; width: 44px; }

/* De knop zelf: in de kop van de zijbalk, en op klein scherm in de topbar. */
.nav-toggle {
  appearance: none; border: 1px solid transparent; background: none;
  color: var(--fg-muted); cursor: pointer;
  width: 28px; height: 28px; border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  margin-left: auto;
}
.nav-toggle:hover { color: var(--fg); background: var(--surface-strong); }
.nav-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.nav-toggle svg { width: 16px; height: 16px; }
:root[data-nav="collapsed"] .nav-toggle { margin: 0; transform: scaleX(-1); }
.topbar .nav-toggle { display: none; }

/* De achtergrond van de lade bestaat alleen onder 900px. */
.nav-backdrop { display: none; }

/* Signatuur: de lockup als de zijbalk open staat, het merkteken in de rail. */
.mayday-credit .mark { display: none; width: 44px; }
.mayday-credit .mark img { max-width: 40px; }

/* ---- ≤ 1180: rail ------------------------------------------------------- */
@media (max-width: 1180px) {
  /* Zonder expliciete keuze van de gebruiker zet app.js hier data-nav="collapsed";
     staat die keuze op 'expanded', dan blijft de zijbalk open. */
  .sidebar { gap: 18px; }
}

/* ---- ≤ 900: lade over de inhoud ---------------------------------------- */
@media (max-width: 900px) {
  .sidebar {
    position: fixed; top: 0; bottom: 0; left: 0; z-index: 60;
    width: 240px; padding: 26px 18px; align-items: stretch;
    transform: translateX(-100%);
    transition: transform 0.18s ease;
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.18);
  }
  /* In de lade is er breedte, dus daar hoort de volledige lockup weer. */
  /* .brand-pill is een flexcontainer: 'revert' zou hem op block zetten en het
     statusstipje onder de tekst duwen. */
  :root[data-nav] .brand-pill { display: flex; }
  :root[data-nav] .sidebar .brand span,
  :root[data-nav] .nav-section,
  :root[data-nav] #sidebar-brand-sub,
  :root[data-nav] .nav-link span:not(.icon),
  :root[data-nav] .logout .label,
  :root[data-nav] .mayday-credit .lockup { display: revert; }
  :root[data-nav] .nav-link span:not(.icon),
  :root[data-nav] .logout .label {
    position: static; width: auto; height: auto;
    margin: 0; overflow: visible; clip-path: none;
  }
  :root[data-nav] .mayday-credit .mark { display: none; }
  :root[data-nav] .nav-link,
  :root[data-nav] .logout { width: auto; height: auto; padding: 12px 14px; justify-content: flex-start; gap: 12px; }
  :root[data-nav] .mayday-credit { width: auto; padding: 14px 6px 0; }
  :root[data-nav="open"] .sidebar { transform: none; }
  .nav-backdrop {
    display: block;
    position: fixed; inset: 0; z-index: 50;
    background: rgba(0, 0, 0, 0.35);
    opacity: 0; pointer-events: none;
    transition: opacity 0.18s ease;
  }
  :root[data-nav="open"] .nav-backdrop { opacity: 1; pointer-events: auto; }
  .sidebar .nav-toggle { display: none; }
  .topbar .nav-toggle { display: inline-flex; width: 36px; height: 36px; margin: 0; }
  .topbar .nav-toggle svg { width: 18px; height: 18px; }
  .topbar { gap: 12px; }
}

/* ---- ≤ 760: sub-tabs schuiven, callouts onder de grafiek --------------- */
@media (max-width: 760px) {
  .geo-tabs, .subtabs {
    flex-wrap: nowrap; overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
  }
  .geo-tabs button, .subtabs button { flex: none; scroll-snap-align: start; }
  .kpi-grid { grid-template-columns: 1fr; }
}

/* ---- ≤ 520: tabellen schuiven, eerste kolom blijft staan --------------- */
@media (max-width: 520px) {
  .table-wrap, .tablewrap { overflow-x: auto; }
  .table-wrap table th:first-child,
  .table-wrap table td:first-child,
  .tablewrap table th:first-child,
  .tablewrap table td:first-child {
    position: sticky; left: 0;
    background: var(--surface);
  }
}


/* Voet van de zijbalk: klant, eventuele merkcontext, en de staat van de sessie.
   Hoort onderaan — bovenaan staat het merk van de klant, niet zijn metadata. */
.sidebar-foot {
  margin-top: 16px;
  display: flex; flex-direction: column; gap: 8px; align-items: flex-start;
}
.sidebar-foot .brand-pill { font-size: 10px; padding: 7px 11px; }
.sidebar-foot #sidebar-brand-sub {
  font-size: 10px; color: var(--fg-muted);
  letter-spacing: 0.06em; padding: 0 4px;
}
:root[data-nav="collapsed"] .sidebar-foot { display: none; }
@media (max-width: 900px) { :root[data-nav] .sidebar-foot { display: flex; } }

/* ==========================================================
   mayday-signatuur onderaan de zijbalk
   ==========================================================
   Eén SVG met wordmark, beacon en tagline als vectoren: geen font te laden en
   niets dat kan verschuiven. Twee varianten omdat een <img> geen currentColor
   erft — de donkere wisselt in dark mode.
   ========================================================== */
.mayday-credit {
  margin-top: 18px;
  padding: 14px 6px 0;
  border-top: 1px solid var(--border);
}
.mayday-credit img { display: block; width: 100%; max-width: 186px; height: auto; }
.mayday-credit .on-dark { display: none; }
:root[data-theme="dark"] .mayday-credit .on-light { display: none; }
:root[data-theme="dark"] .mayday-credit .on-dark { display: block; }


/* ==========================================================
   ROAS-tab — blended MER, kanaalsplitsing en break-even
   ========================================================== */

.info-label {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-muted);
  font-weight: 700;
}

.roas-bar {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
  flex-wrap: wrap;
}

/* Voortgangsbalk in de hero-kaarten: de merkstreep staat op 2/3 van de balk,
   zodat 1,5× de drempel de volle breedte is en 'ruim boven' zichtbaar blijft. */
.roas-target-bar {
  position: relative;
  height: 6px;
  border-radius: 999px;
  background: var(--surface-strong);
  margin-top: 12px;
  overflow: hidden;
}
.roas-target-bar .fill {
  position: absolute; inset: 0 auto 0 0;
  border-radius: 999px;
  transition: width 0.3s ease;
}
.roas-target-bar .fill.ok { background: var(--positive); }
.roas-target-bar .fill.under { background: var(--negative); }
.roas-target-bar .mark {
  position: absolute; top: -2px; bottom: -2px;
  width: 2px;
  background: var(--fg);
  opacity: 0.55;
}

.roas-fields {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 4px;
}
.roas-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 132px;
}
.roas-field > span:first-child {
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--fg-muted);
}
.roas-input {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  padding: 0 10px 0 0;
}
.roas-input input {
  border: none;
  background: transparent;
  padding: 9px 4px 9px 11px;
  width: 72px;
  font: inherit;
  font-size: 13px;
  color: var(--fg);
  outline: none;
}
.roas-input .suffix {
  font-size: 12px;
  color: var(--fg-muted);
  font-weight: 600;
}

.roas-target-note {
  margin-top: 14px;
  padding: 10px 14px;
  border-radius: 10px;
  background: var(--accent-10);
  font-size: 12px;
  color: var(--fg);
}

.roas-advice-summary {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
  padding: 10px 14px;
  border-radius: 10px;
  background: var(--surface-mute);
  font-size: 13px;
}
.roas-advice-summary .muted { font-size: 12px; }

.roas-notes {
  margin: 0;
  padding-left: 18px;
  font-size: 12px;
  line-height: 1.7;
  color: var(--fg-muted);
}
.roas-notes li { margin-bottom: 6px; }
.roas-notes strong { color: var(--fg); }

/* Actief scenario-rij in de break-even-tabel. */
#page-roas .lib-table tbody tr.on { background: var(--accent-10); }
#page-roas .lib-table tbody tr { cursor: default; }
#page-roas .lib-table table { min-width: 980px; }
/* Bedragen en ratio's nooit over twee regels breken — dat leest als twee waarden. */
#page-roas .lib-table td.right, #page-roas .lib-table th.right { white-space: nowrap; }

/* ==========================================================
   Website-tab (GA4 + Search Console)
   ========================================================== */
#page-website .lib-table table { min-width: 860px; }
#page-website .lib-table tbody tr { cursor: default; }
/* Aantallen en percentages nooit over twee regels breken. */
#page-website .lib-table td.right, #page-website .lib-table th.right { white-space: nowrap; }
/* Pagina-paden en zoekopdrachten kunnen lang zijn: afkappen i.p.v. de tabel oprekken. */
#page-website .lib-table .row-caption {
  max-width: 420px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.web-subhead {
  font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase;
  font-weight: 700; color: var(--fg-muted);
  margin: 20px 0 10px;
}

/* Trechter: balkbreedte is relatief aan de grootste stap, zodat de uitval zichtbaar is. */
.web-funnel { display: flex; flex-direction: column; gap: 14px; }
.web-funnel-head {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 13px; color: var(--fg); margin-bottom: 6px; gap: 12px;
}
.web-funnel-head .muted { font-size: 11px; }
.web-funnel-bar {
  position: relative; height: 10px; border-radius: 999px;
  background: var(--surface-strong); overflow: hidden;
}
.web-funnel-bar .fill {
  position: absolute; inset: 0 auto 0 0; border-radius: 999px;
  background: var(--accent); transition: width 0.3s ease;
}

/* Merkgebonden vs. niet-merkgebonden zoekverkeer. */
.web-brand-split {
  display: flex; flex-wrap: wrap; gap: 18px; align-items: baseline;
  padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface-mute); font-size: 13px;
}
.web-brand-split .muted { font-size: 11px; margin-left: 6px; }

/* Kleine tabellen naast elkaar (apparaat, nieuw/terugkerend, land). */
.web-mini-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--grid-gap); }
.web-mini table { width: 100%; border-collapse: collapse; margin-top: 8px; font-size: 13px; }
.web-mini td { padding: 6px 0; border-bottom: 1px solid var(--border); }
.web-mini tr:last-child td { border-bottom: none; }
.web-mini td.right { text-align: right; white-space: nowrap; }
@media (max-width: 900px) {
  .web-mini-grid { grid-template-columns: 1fr; }
}

/* ---------- Website: donut, verschilcellen en zoekbalk ---------- */

/* Deel-van-geheel: ring links, legenda met de cijfers rechts. Met zeven
   segmenten is de ring de verhouding en de legenda de waarde. */
.web-donut {
  display: flex; gap: 28px; align-items: center; flex-wrap: wrap;
  margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--border);
}
.web-donut .chart { flex: 0 0 auto; color: var(--fg); }
.web-donut .legend {
  flex: 1 1 320px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px 20px;
}
.web-donut-item {
  display: grid; grid-template-columns: 10px auto 1fr; grid-template-rows: auto auto;
  column-gap: 8px; align-items: baseline; font-size: 13px;
}
.web-donut-item .swatch { width: 10px; height: 10px; border-radius: 3px; grid-row: 1; }
.web-donut-item .name { grid-row: 1; color: var(--fg); }
.web-donut-item .val { grid-row: 1; text-align: right; font-weight: 600; color: var(--fg); }
.web-donut-item .sub { grid-row: 2; grid-column: 2 / -1; font-size: 11px; color: var(--fg-muted); }
.web-donut-item.off { opacity: 0.45; }

/* Verschil naast een waarde in een tabelcel. */
.cell-delta { display: inline-block; margin-left: 6px; font-size: 10px; font-weight: 600; }
.cell-delta.up { color: var(--positive); }
.cell-delta.down { color: var(--negative); }
.cell-tag {
  display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 999px;
  font-size: 10px; font-weight: 600; background: var(--surface-strong); color: var(--fg-muted);
}

/* Zoekbalk in een paneelkop. */
.web-search {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--border); border-radius: 10px;
  background: var(--surface); padding: 0 10px; height: 34px; min-width: 240px;
}
.web-search .ico { color: var(--fg-muted); font-size: 14px; }
.web-search input {
  border: none; outline: none; background: transparent; color: var(--fg);
  font: inherit; font-size: 13px; width: 100%; padding: 0;
}
.web-search input::placeholder { color: var(--fg-muted); }
.web-search:focus-within { border-color: var(--accent); }

/* ========== SEO-tab ==========
   Keyword-chips, concurrentiebadge, positie en trend. De kleuren volgen de
   bestaande tokens, zodat het accent per klant ook hier doorwerkt. */

.seo-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }

.seo-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--accent-10);
  border: 1px solid var(--border); border-radius: 999px;
  padding: 3px 6px 3px 11px; font-size: 12px; color: var(--fg);
}
.seo-chip button {
  all: unset; cursor: pointer; color: var(--fg-muted);
  font-size: 12px; line-height: 1;
  width: 18px; height: 18px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
}
.seo-chip button:hover { color: var(--negative); background: var(--negative-bg); }
.seo-chip button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* Concurrentie komt uit Google Ads en gaat over adverteerders, niet over
   organische moeilijkheid — daarom neutrale tinten en geen goed/slecht-kleur. */
.seo-comp {
  display: inline-block; padding: 2px 9px; border-radius: 999px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.02em;
  border: 1px solid var(--border); color: var(--fg-muted);
}
.seo-comp.low { background: var(--positive-bg); color: #17786a; border-color: transparent; }
.seo-comp.medium { background: rgba(224, 149, 42, 0.14); color: #9a6413; border-color: transparent; }
.seo-comp.high { background: var(--negative-bg); color: #a5352a; border-color: transparent; }

.seo-pos { font-weight: 700; font-variant-numeric: tabular-nums; }
.seo-pos.good { color: var(--positive); }
.seo-pos.mid { color: #b57614; }
.seo-pos.low { color: var(--fg-muted); }

/* Stijgende vraag is goed nieuws, dalende slecht — los van de positie. */
.seo-trend { font-weight: 600; font-variant-numeric: tabular-nums; font-size: 12px; }
.seo-trend.up { color: var(--positive); }
.seo-trend.down { color: var(--negative); }
.seo-trend.flat { color: var(--fg-muted); }

/* ========== GEO-tab ==========
   Sub-tabs, statusbanner, horizontale balken, promptmatrix, readiness-checks,
   fasenstrip en actiekaarten. Kleuren volgen de bestaande tokens. */

/* Sub-tabs in browserstijl: het actieve blad heeft de kleur van de pagina
   eronder en onderbreekt de lijn van de strip, dus het plakt vast aan zijn
   inhoud. De strip is een fluistering van het merk (--strip). Tabbladen horen
   bij één sectie, nooit bij de app als geheel — daarvoor is de zijbalk. */
.geo-tabs, .subtabs {
  display: flex; gap: 3px; flex-wrap: wrap; align-items: flex-end;
  background: var(--strip);
  border-bottom: 1px solid var(--border);
  border-radius: var(--radius-card) var(--radius-card) 0 0;
  padding: 9px 12px 0; margin-bottom: 16px;
}
.geo-tabs button, .subtabs button {
  appearance: none; cursor: pointer; font: inherit;
  font-size: 13px; font-weight: 500; color: var(--fg-muted);
  padding: 10px 18px 11px; margin-bottom: -1px;
  border: 1px solid transparent; background: none;
  border-radius: var(--radius-tip) var(--radius-tip) 0 0;
}
.geo-tabs button.on, .subtabs button.on {
  color: var(--fg); font-weight: 600;
  background: var(--bg);
  border-color: var(--border); border-bottom-color: var(--bg);
}
.geo-tabs button:hover, .subtabs button:hover { color: var(--fg); }
.geo-tabs button:focus-visible, .subtabs button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

.geo-callout {
  border-radius: 12px; padding: 14px 18px; margin-bottom: 16px;
  font-size: 13px; line-height: 1.6; border-left: 3px solid var(--fg-muted);
  background: rgba(0, 0, 0, 0.03); color: var(--fg);
}
.geo-callout.blocked { border-left-color: var(--negative); background: var(--negative-bg); }
.geo-callout.warn { border-left-color: var(--warning); background: var(--warning-bg); }
.geo-callout.ok { border-left-color: var(--positive); background: var(--positive-bg); }

.geo-delta { font-size: 12px; font-weight: 600; margin-top: 2px; }
.geo-delta.bad { color: var(--negative); }
.geo-delta.good { color: var(--positive); }
.geo-delta.neutral { color: var(--fg-muted); }

/* Horizontale balk vanaf nul: losse waarden naast elkaar, geen tijdreeks. */
.geo-bar { display: flex; align-items: center; gap: 10px; margin: 7px 0; font-size: 13px; }
.geo-bar .lbl {
  min-width: 170px; max-width: 260px; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; color: var(--fg);
}
.geo-bar .track {
  flex: 1; height: 14px; border-radius: 7px; overflow: hidden;
  background: var(--accent-10);
}
.geo-bar .fill { height: 100%; border-radius: 7px; background: var(--accent); }
.geo-bar .val {
  min-width: 52px; text-align: right; font-weight: 600;
  font-variant-numeric: tabular-nums; color: var(--fg);
}

.geo-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--grid-gap, 16px); }
@media (max-width: 900px) { .geo-grid2 { grid-template-columns: 1fr; } }

/* Promptmatrix */
.geo-cell { text-align: center; font-weight: 700; }
.geo-cell.yes { color: var(--positive); }
.geo-cell.warn { color: var(--warning); }
.geo-cell.no { color: var(--fg-muted); font-weight: 400; }
.geo-cell.unk { color: var(--border); }
th.c, td.c { text-align: center; }
.geo-tag {
  display: inline-block; padding: 2px 9px; border-radius: 999px;
  font-size: 11px; font-weight: 600; white-space: nowrap;
  background: var(--accent-10); color: var(--fg);
}
.geo-legend {
  display: flex; gap: 18px; flex-wrap: wrap; margin-top: 12px;
  font-size: 12px; color: var(--fg-muted);
}
.geo-legend b { margin-right: 4px; }

/* Readiness */
.geo-checks { display: flex; flex-direction: column; }
.geo-check {
  display: flex; gap: 12px; align-items: center; font-size: 13px;
  padding: 9px 0; border-bottom: 1px solid var(--border);
}
.geo-check:last-child { border-bottom: none; }
.geo-check .dot {
  width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; color: #fff;
}
.geo-check .dot.pass { background: var(--positive); }
.geo-check .dot.fail { background: var(--negative); }
.geo-check .dot.unknown { background: var(--fg-muted); }
.geo-check .why { color: var(--fg-muted); font-size: 12px; text-align: right; }

/* Fasenstrip */
.geo-phases { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
@media (max-width: 900px) { .geo-phases { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 520px) { .geo-phases { grid-template-columns: repeat(2, 1fr); } }
.geo-phase {
  border: 1px solid var(--border); border-radius: 12px; padding: 12px;
  background: var(--accent-10);
}
.geo-phase.here { background: var(--accent); border-color: var(--accent); color: #fff; }
.geo-phase .n { font-size: 18px; font-weight: 600; font-variant-numeric: tabular-nums; }
.geo-phase .t { font-size: 13px; font-weight: 600; margin: 2px 0; }
.geo-phase .g { font-size: 11px; line-height: 1.4; color: var(--fg-muted); }
.geo-phase.here .g { color: rgba(255, 255, 255, 0.85); }

/* Actiekaarten */
.geo-actions { display: grid; grid-template-columns: 1fr 1fr; gap: var(--grid-gap, 16px); }
@media (max-width: 900px) { .geo-actions { grid-template-columns: 1fr; } }
.geo-action {
  background: var(--surface); border: 1px solid var(--border);
  border-left: 3px solid var(--accent); border-radius: 12px; padding: 20px;
}
.geo-action.p2 { border-left-color: var(--fg-muted); }
.geo-action .meta { display: flex; gap: 6px; margin-bottom: 8px; flex-wrap: wrap; }
.geo-action .meta span {
  font-size: 11px; font-weight: 600; padding: 2px 10px; border-radius: 999px;
  background: var(--accent-10); color: var(--fg);
}
.geo-action h3 { margin: 0 0 6px; font-size: 15px; }
.geo-action p { font-size: 13px; color: var(--fg-muted); margin: 0 0 6px; line-height: 1.6; }
.geo-action .done { font-size: 12px; color: var(--positive); font-weight: 500; }


/* ==========================================================
   RAPPORT
   Twee standen op één pagina: de configurator (wat komt er in
   het rapport) en de deck (de slides zelf). De slides hebben
   een vaste maat van 1280x720 zodat de verhouding op elk
   scherm dezelfde is; passend maken gebeurt met een transform,
   en bij printen staat die schaal op 1.
   Breekpunten volgen de ladder 1180 / 900 / 760 / 520.
   ========================================================== */

.rp-bar { padding: 14px 18px; margin-bottom: 16px; }
.rp-presets { display: flex; gap: 8px; flex-wrap: wrap; }
/* De actieve periodeknop, net als .period-toggle button.on elders in de app. */
.rp-presets .btn.on {
  background: var(--accent); border-color: var(--accent); color: var(--on-accent);
}

/* De zwevende chatknop staat rechtsonder in beeld en dekte de knop
   'Stel presentatie samen' af. Ruimte onder de pagina, zodat er altijd langs
   gescrold kan worden. */
#page-report { padding-bottom: 84px; }

.rp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--grid-gap, 16px); }
@media (max-width: 1180px) { .rp-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 760px)  { .rp-grid { grid-template-columns: 1fr; } }

.rp-card { padding: 18px; }
.rp-card.on { border-color: color-mix(in oklch, var(--accent) 34%, var(--border)); }
.rp-card-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--border);
}
.rp-page { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; }
.rp-page strong { display: block; font-size: 14px; font-weight: 600; color: var(--fg); }
.rp-page em { display: block; font-style: normal; font-size: 11px; color: var(--fg-muted); margin-top: 2px; line-height: 1.45; }
.rp-count {
  font-size: 10px; font-weight: 700; letter-spacing: 0.06em; color: var(--fg-muted);
  white-space: nowrap; padding-top: 2px;
}
.rp-blocks { display: flex; flex-direction: column; gap: 2px; margin-top: 10px; }
.rp-block {
  display: flex; align-items: center; gap: 9px; cursor: pointer;
  font-size: 13px; color: var(--fg); padding: 5px 6px; border-radius: 7px;
}
.rp-block:hover { background: var(--surface-mute); }
.rp-card input[type="checkbox"] { accent-color: var(--accent); width: 15px; height: 15px; margin: 1px 0 0; flex: none; }

.rp-actions {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; flex-wrap: wrap; margin-top: var(--grid-gap, 16px); padding: 18px;
}
.rp-toggle { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; max-width: 560px; }
.rp-toggle input { accent-color: var(--accent); width: 16px; height: 16px; margin: 2px 0 0; flex: none; }
.rp-toggle strong { display: block; font-size: 14px; font-weight: 600; }
.rp-toggle em { display: block; font-style: normal; font-size: 12px; color: var(--fg-muted); margin-top: 3px; line-height: 1.5; }
.rp-go { display: flex; align-items: center; gap: 14px; }

.rp-steps { margin-top: var(--grid-gap, 16px); padding: 16px 18px; }
.rp-step { display: grid; grid-template-columns: 20px 1fr auto; gap: 10px; align-items: baseline; padding: 5px 0; font-size: 13px; }
.rp-step .mark { color: var(--fg-muted); }
.rp-step.ok .mark { color: var(--positive); }
.rp-step.fail .mark { color: var(--negative); }
.rp-step .note { font-size: 11px; color: var(--fg-muted); }

/* ---------- De slides ---------- */

.rp-deck { --rp-scale: 1; --rp-h: 720px; display: flex; flex-direction: column; gap: 22px; }
.rp-slide-wrap { height: var(--rp-h); }
.rp-slide {
  width: 1280px; height: 720px; transform: scale(var(--rp-scale)); transform-origin: top left;
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
  /* De onderrand houdt de voettekst vrij: die staat absoluut op 20px, dus de
     inhoud moet daarboven stoppen. Zonder deze ruimte schuift een duiding van
     drie regels dwars door het paginanummer heen. */
  padding: 48px 56px 58px; box-sizing: border-box; position: relative; overflow: hidden;
  display: flex; flex-direction: column;
}
.rp-slide.cover, .rp-slide.divider { justify-content: center; }
.rp-slide.divider { background: var(--surface-mute); }

/* De titelslide staat op het merkvlak met negatieve tekst. --on-accent klapt
   om naar inkt zodra het accent te licht is voor wit (zie deriveBrandTokens in
   app.js), dus een geel of lime merk levert geen onleesbare kop op. Alleen
   déze slide: verderop in de deck draagt het accent de data, en dan moet het
   vlak juist rustig blijven. */
.rp-slide.cover {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}
.rp-slide.cover .rp-eyebrow,
.rp-slide.cover .rp-title-body h1,
.rp-slide.cover .rp-period,
.rp-slide.cover .rp-made,
.rp-slide.cover .rp-foot { color: var(--on-accent); }
.rp-slide.cover .rp-period { opacity: 0.86; }
.rp-slide.cover .rp-made,
.rp-slide.cover .rp-foot { opacity: 0.7; }

.rp-eyebrow {
  font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--accent-data, var(--accent));
}
.rp-head { padding-bottom: 14px; border-bottom: 1px solid var(--border); flex: none; }
.rp-head h2 { font-family: var(--font-display); font-weight: 400; font-size: 32px; margin: 6px 0 0; color: var(--fg); }
.rp-head .rp-sub { font-size: 14px; color: var(--fg-muted); margin-top: 6px; }
.rp-title-body h1, .rp-divider-body h1 {
  font-family: var(--font-display); font-weight: 400; font-size: 54px; margin: 12px 0 0; color: var(--fg);
}
.rp-divider-body h1 { font-size: 44px; }
.rp-period { font-size: 18px; color: var(--fg-muted); margin-top: 10px; }
.rp-made { font-size: 12px; color: var(--fg-muted); margin-top: 30px; }

.rp-body { flex: 1; min-height: 0; overflow: hidden; padding-top: 20px; }
.rp-summary p { font-family: var(--font-display); font-size: 19px; line-height: 1.55; color: var(--fg); margin: 0 0 14px; }
.rp-sources dl { margin: 0; display: grid; grid-template-columns: 200px 1fr; gap: 8px 22px; }
.rp-sources dt { font-size: 13px; font-weight: 600; color: var(--fg); }
.rp-sources dd { font-size: 13px; line-height: 1.55; color: var(--fg-muted); margin: 0; }

/* De duiding onder de cijfers, nooit ervoor: eerst wat er gemeten is. */
.rp-note {
  flex: none; border-top: 1px solid var(--border); padding: 14px 0 0; margin-top: 12px;
}
.rp-note p { font-size: 14px; line-height: 1.5; color: var(--fg); margin: 0; }
.rp-note ul { margin: 8px 0 0; padding-left: 18px; }
.rp-note li { font-size: 12.5px; line-height: 1.5; color: var(--fg-muted); }

.rp-foot {
  position: absolute; left: 56px; right: 56px; bottom: 20px;
  display: flex; justify-content: space-between; font-size: 11px; color: var(--fg-muted);
}

/* Een paneel zit al in een slide: geen dubbele kaders, geen dubbele marges. En
   geen dubbele kop — de slide draagt de titel al in zijn eigen header. */
.rp-body .panel { border: none; background: none; padding: 0; margin: 0 0 16px; box-shadow: none; }
.rp-body .panel:last-child { margin-bottom: 0; }
.rp-body .panel-header { display: none; }
.rp-body .lib-table table { min-width: 0; }
.rp-body .kpi-grid { margin: 0 0 16px; }

/* Een slide is altijd 1280px breed, ook als het browservenster smal staat. De
   responsieve regels van het dashboard hangen aan de vénsterbreedte, niet aan
   het vlak waarin ze staan, en zouden de indeling van een slide dus laten
   meebewegen met het venster — dan hangt de PDF af van hoe breed iemand zijn
   scherm toevallig had. Deze regels zetten de desktopindeling terug; ze winnen
   op specificiteit, ongeacht de volgorde. */
.rp-body .kpi-grid      { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.rp-body .row-2         { grid-template-columns: 2fr 1fr; }
.rp-body .row-3         { grid-template-columns: 1fr 1fr 1fr; }
.rp-body .insight-grid  { grid-template-columns: 1fr 1fr 1fr; }
.rp-body .web-mini-grid { grid-template-columns: repeat(3, 1fr); }
.rp-body .geo-grid2     { grid-template-columns: 1fr 1fr; }
.rp-body .geo-phases    { grid-template-columns: repeat(6, 1fr); }
.rp-body .geo-actions   { grid-template-columns: 1fr 1fr; }
.rp-body .method-grid   { grid-template-columns: 1fr 1fr; }
.rp-body .table-wrap, .rp-body .tablewrap { overflow-x: visible; }

@media (max-width: 900px) {
  .rp-actions { flex-direction: column; align-items: stretch; }
  .rp-go { justify-content: space-between; }
}

/* ---------- Printen = PDF ----------
   Eén slide per pagina, op ware grootte. Alles buiten de deck valt weg, ook de
   werkbalk: die hoort bij het samenstellen, niet bij het rapport. */
/* De @page-regel (papierformaat) staat bewust NIET hier: @page kan niet op een
   selector worden begrensd en zou dus ook gelden als iemand de Website- of
   ROAS-tab print. report.js hangt hem erin zolang de deck op het scherm staat
   en haalt hem daarna weer weg. */

@media print {
  .sidebar, .topbar, .chat-panel, .chat-toggle-btn, .tweaks-panel,
  .nav-backdrop, .rp-deckbar { display: none !important; }
  html, body { background: #fff; }
  .page-shell, .app-main, .page-content { display: block; padding: 0; margin: 0; max-width: none; }
  .rp-deck { --rp-scale: 1; --rp-h: 720px; display: block; }
  .rp-slide-wrap { height: auto; break-after: page; page-break-after: always; }
  .rp-slide-wrap:last-child { break-after: auto; page-break-after: auto; }
  .rp-slide {
    transform: none; border: none; border-radius: 0;
    width: 1280px; height: 720px; box-shadow: none;
  }
}


/* ==========================================================
   RAPPORT — design system van de klant
   Staat er een presentatie-design-system in de Drive-map, dan wint dat op de
   slides. Niet alleen kleur en letter: ook de opbouw. Just Jane's systeem
   schrijft die letterlijk voor — "het 2px-hairline is het enige structurele
   middel", "corner radii are 0", "shadows: none", mono eyebrow linksboven —
   en onze paneelstijl (afronding, schaduw, gevulde kaarten) overtreedt dat.
   Daarom worden de panelen hier teruggebracht tot hairlines.

   Alles hangt aan --ds-*, die report.js per klant op de deck zet. Een token dat
   het systeem niet kent wordt niet gezet, dus de var()-terugval pakt dan de
   dashboardwaarde. Gedeeltelijk is een geldige toestand.
   ========================================================== */

.rp-deck[data-ds="on"] .rp-slide {
  background: var(--ds-surface, var(--surface));
  color: var(--ds-ink, var(--fg));
  border: none;
  border-radius: 0;
  box-shadow: none;
  font-family: var(--ds-font-body, var(--font-body));
}

.rp-deck[data-ds="on"] .rp-head h2,
.rp-deck[data-ds="on"] .rp-title-body h1,
.rp-deck[data-ds="on"] .rp-divider-body h1 {
  font-family: var(--ds-font-display, var(--font-display));
  color: var(--ds-head, var(--fg));
}

/* Eyebrow als mono label: hoofdletters, wijde tracking. Dat is de vaste
   'furniture' linksboven die het systeem voorschrijft. */
.rp-deck[data-ds="on"] .rp-eyebrow {
  font-family: var(--ds-font-label, var(--font-mono));
  color: var(--ds-label, var(--ds-head, var(--accent)));
  letter-spacing: 0.22em;
}

.rp-deck[data-ds="on"] .rp-sub,
.rp-deck[data-ds="on"] .rp-period,
.rp-deck[data-ds="on"] .rp-made,
.rp-deck[data-ds="on"] .rp-foot,
.rp-deck[data-ds="on"] .rp-note li { color: var(--ds-muted, var(--fg-muted)); }

.rp-deck[data-ds="on"] .rp-foot {
  font-family: var(--ds-font-label, var(--font-mono));
  letter-spacing: 0.12em;
}

/* Het hairline is het enige structurele middel: 2px, merkkleur. */
.rp-deck[data-ds="on"] .rp-head,
.rp-deck[data-ds="on"] .rp-note { border-top-width: 0; border-bottom: none; }
.rp-deck[data-ds="on"] .rp-head { border-bottom: 2px solid var(--ds-rule, var(--border)); }
.rp-deck[data-ds="on"] .rp-note { border-top: 2px solid var(--ds-rule, var(--border)); }

/* Kaarten zijn geen kaarten: geen vulling, geen afronding, geen schaduw — een
   hairline-begrensd gebied. */
.rp-deck[data-ds="on"] .kpi-card {
  background: none;
  border: none;
  border-top: 2px solid var(--ds-rule, var(--border));
  border-radius: 0;
  box-shadow: none;
  padding: 12px 0 0;
}
.rp-deck[data-ds="on"] .kpi-card .value {
  font-family: var(--ds-font-display, var(--font-display));
  color: var(--ds-head, var(--fg));
}
.rp-deck[data-ds="on"] .kpi-card .label {
  font-family: var(--ds-font-label, var(--font-mono));
  letter-spacing: 0.16em;
  color: var(--ds-muted, var(--fg-muted));
}
/* De gekleurde stip bij een KPI hoort bij ons palet, niet bij het hunne. */
.rp-deck[data-ds="on"] .kpi-card .dot,
.rp-deck[data-ds="on"] .spark { display: none; }

.rp-deck[data-ds="on"] .lib-table thead th {
  font-family: var(--ds-font-label, var(--font-mono));
  letter-spacing: 0.14em;
  color: var(--ds-muted, var(--fg-muted));
  border-bottom: 2px solid var(--ds-rule, var(--border));
  background: none;
}
.rp-deck[data-ds="on"] .lib-table tbody td {
  border-bottom: 1px solid var(--ds-rule, var(--border));
  color: var(--ds-ink, var(--fg));
}
.rp-deck[data-ds="on"] .lib-table tbody tr:hover { background: none; }
.rp-deck[data-ds="on"] .panel,
.rp-deck[data-ds="on"] .geo-callout,
.rp-deck[data-ds="on"] .geo-action {
  background: none; border: none; border-radius: 0; box-shadow: none;
}

/* De grafiekbak blijft wél een vlak. Dat is geen kaart maar de drager van de
   data, en een systeem dat er een kleur voor heeft bedoelt hem ook: Spotto's
   presentatiepalet zet er --chart-vlak (#eaf0ff) achter. report.js zet --panel
   op de deck, dus de vulling volgt vanzelf; alleen de afronding gaat eraf,
   want radius 0 hoort bij de slide-anatomie. */
.rp-deck[data-ds="on"] .chart-tub { border-radius: 0; }

/* De titelslide staat op de omgekeerde grond van hún systeem. Kent het systeem
   die niet, dan is hij server-side afgeleid uit de merkkleur (zie
   _designsystem.js); ontbreekt ook die, dan blijft het dashboardaccent staan. */
.rp-deck[data-ds="on"] .rp-slide.cover {
  background: var(--ds-cover-bg, var(--accent));
  color: var(--ds-cover-fg, var(--on-accent));
}
.rp-deck[data-ds="on"] .rp-slide.cover .rp-eyebrow,
.rp-deck[data-ds="on"] .rp-slide.cover .rp-title-body h1,
.rp-deck[data-ds="on"] .rp-slide.cover .rp-period,
.rp-deck[data-ds="on"] .rp-slide.cover .rp-made,
.rp-deck[data-ds="on"] .rp-slide.cover .rp-foot {
  color: var(--ds-cover-fg, var(--on-accent));
}
.rp-deck[data-ds="on"] .rp-slide.divider {
  background: var(--ds-cover-bg, var(--surface-mute));
  color: var(--ds-cover-fg, var(--fg));
}
.rp-deck[data-ds="on"] .rp-slide.divider .rp-eyebrow,
.rp-deck[data-ds="on"] .rp-slide.divider h1,
.rp-deck[data-ds="on"] .rp-slide.divider .rp-period,
.rp-deck[data-ds="on"] .rp-slide.divider .rp-foot {
  color: var(--ds-cover-fg, var(--fg));
}