/* ─────────────────────────────────────────────────────────────────────────
   TripGrutto · style.css — Polderstijl visual-layer
   ─────────────────────────────────────────────────────────────────────────

   P-10 COMPLIANCE (product-principles.md, fossiliseerd 2026-10-07)
   ----------------------------------------------------------------
   Elke significante design-keuze is terug te voeren op grutto-identiteit
   of NL-landschap-connectie. "Omdat Dribbble het doet" is géén reden.

   Narratief-anker-catalogus in dit bestand (grep op [P-10: ...] voor
   context op zijn plek, en op --nl-/--delft-/--sand- tokens voor hun
   herkomst):

     [P-10: grutto-broedborst]  --accent #c7572b (burnt sienna).
                                 De oranje van grutto's borst in broedtijd;
                                 enige "doe"-trigger in de UI.
     [P-10: Delft blue chrome]  --topbar-bg + --delft-* tokens.
                                 Delfts-blauw als rustige NL-structuurkleur
                                 — chrome en reisgevoel, nooit action-trigger.
     [P-10: Polderstijl Swiss]  één fontfamilie (IBM Plex Sans), kop ≠ body
                                 alleen op weight. Nuchter, geen sierletters —
                                 dezelfde zelfbeheersing als een grutto-roep.
     [P-10: Delft tegelwand]    .topbar::after — tegeltjes-patroon faded in
                                 van rechts, in Delfts-blauw, achter de titel.
     [P-10: NL skyline]         .skyline-band — herenhuizen-silhouet, één
                                 emotioneel moment op het home-scherm.
     [P-10: NL dakrand]         .roofline-strip — dakrand-silhouet als
                                 category-divider in plaats van een platte
                                 lijn — polder-huis in plaats van rule.
     [P-10: herenhuizen-splash] #splashScreen — dezelfde herenhuizen uit
                                 skyline-band, verkleind, op Delft-blauwe
                                 gradient. Visuele continuïteit tussen
                                 launch en home.
     [P-10: kaaswiel]           .splash-progress — kaas-wiel-loader (wedge-
                                 with-holes motief ook in Delft-tegel),
                                 rolt heen en weer. NL-food brand-moment.

   Nieuwe design-regels zonder narratief anker worden geweigerd (P-10).
   Voeg bij nieuwe significante keuzes een [P-10: <korte anker>] tag toe
   in het comment direct boven de regel, zodat grep deze file altijd
   kan auditeren op P-10 compliance.

   Overige context:
     - Design-tokens staan in src/css/tokens-*.css (shared/light/dark);
       deze file bouwt op die tokens via de :root adapter-laag hieronder.
     - Dark theme ("Polder") via .theme-dark class — zie tokens-dark.css.
     - Gruttje-renderer: src/js/gruttje-scene.js (window.TGGruttje).
   ───────────────────────────────────────────────────────────────────── */

:root {
  /* Polderstijl palette — Delft blue (chrome/structure/"reisgevoel") + NL orange
     (the only interactive accent). [P-10: Delft blue chrome] + [P-10: grutto-broedborst] Old variable names are kept so every rule
     below them didn't need to change, only the values did. */
  --teal-900: var(--topbar-bg);   /* was var(--topbar-bg) — now Delft 950 */
  --teal-800: var(--topbar-bg);   /* was #124754 — now Delft 700 */
  --teal-700: var(--topbar-bg);   /* was #1b5c6b — now Delft 700 */
  --teal-100: var(--line);   /* was var(--line) — now Delft 100 */
  --orange-500: var(--accent); /* was var(--accent) — now NL Orange */
  --orange-600: var(--accent); /* was var(--accent) — now NL Orange Deep */
  --paper: var(--bg);      /* was var(--bg) — warmer paper */
  /* --ink nu uit tokens-light.css (#1a1613 warm donker, scope 3.2) */
  --ink-soft: var(--ink-secondary);   /* alias → nieuwe tokens-light scope 3.2 */
  /* --line nu uit tokens-light.css (#ece6dc, scope 3.2) */
  --fact-bg: var(--line);
  --fact-fg: var(--topbar-bg);
  --tip-bg: var(--cream);
  --tip-fg: var(--accent);
  --radius: 14px;

  /* New Polderstijl-specific tokens, used by the topbar tile pattern, the
     herenhuizen illustration and the splash screen. */
  --nl-orange: var(--accent);
  --nl-orange-deep: var(--accent);
  --delft-950: var(--topbar-bg);
  --delft-800: var(--topbar-bg);
  --delft-700: var(--topbar-bg);
  --delft-600: var(--info);
  --delft-100: var(--line);
  --paper-raised: var(--card);
  --sand: var(--cream);
  --sand-deep: #DCC49B;
  --delft-pattern: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTMyIiBoZWlnaHQ9Ijg4IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogIDxkZWZzPgogICAgPGcgaWQ9ImNvcm5lciI+CiAgICAgIDxwYXRoIGQ9Ik0yIDIgUTkgMiA5IDkgUTkgMTMgNCAxMyIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMUY0RTdEIiBzdHJva2Utd2lkdGg9IjEuMyIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIi8+CiAgICA8L2c+CiAgPC9kZWZzPgogIDxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAsMCkiPgogICAgPHJlY3QgeD0iMC41IiB5PSIwLjUiIHdpZHRoPSI0MyIgaGVpZ2h0PSI0MyIgZmlsbD0iI0ZCRjZFRSIgc3Ryb2tlPSIjMUY0RTdEIiBzdHJva2Utb3BhY2l0eT0iMC4yMiIgc3Ryb2tlLXdpZHRoPSIxIi8+CiAgICA8dXNlIGhyZWY9IiNjb3JuZXIiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAsMCkiLz4KICAgIDx1c2UgaHJlZj0iI2Nvcm5lciIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNDQsMCkgc2NhbGUoLTEsMSkiLz4KICAgIDx1c2UgaHJlZj0iI2Nvcm5lciIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMCw0NCkgc2NhbGUoMSwtMSkiLz4KICAgIDx1c2UgaHJlZj0iI2Nvcm5lciIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNDQsNDQpIHNjYWxlKC0xLC0xKSIvPgogICAgPGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMjIsMjQpIiBmaWxsPSIjMUY0RTdEIj4KICAgICAgPHBhdGggZD0iTS00IDEyIEw0IDEyIEwyLjQgLTIgTC0yLjQgLTIgWiIvPgogICAgICA8cGF0aCBkPSJNLTIuNiAtMiBMMi42IC0yIEwwIC02LjUgWiIvPgogICAgICA8ZyBzdHJva2U9IiMxRjRFN0QiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIj4KICAgICAgICA8bGluZSB4MT0iLTYuNSIgeTE9Ii0xMCIgeDI9IjYuNSIgeTI9Ii0xLjUiLz4KICAgICAgICA8bGluZSB4MT0iLTYuNSIgeTE9Ii0xLjUiIHgyPSI2LjUiIHkyPSItMTAiLz4KICAgICAgPC9nPgogICAgICA8Y2lyY2xlIGN4PSIwIiBjeT0iLTUuNyIgcj0iMS43Ii8+CiAgICA8L2c+CiAgPC9nPgogIDxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDQ0LDApIj4KICAgIDxyZWN0IHg9IjAuNSIgeT0iMC41IiB3aWR0aD0iNDMiIGhlaWdodD0iNDMiIGZpbGw9IiNGQkY2RUUiIHN0cm9rZT0iIzFGNEU3RCIgc3Ryb2tlLW9wYWNpdHk9IjAuMjIiIHN0cm9rZS13aWR0aD0iMSIvPgogICAgPHVzZSBocmVmPSIjY29ybmVyIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwLDApIi8+CiAgICA8dXNlIGhyZWY9IiNjb3JuZXIiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDQ0LDApIHNjYWxlKC0xLDEpIi8+CiAgICA8dXNlIGhyZWY9IiNjb3JuZXIiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAsNDQpIHNjYWxlKDEsLTEpIi8+CiAgICA8dXNlIGhyZWY9IiNjb3JuZXIiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDQ0LDQ0KSBzY2FsZSgtMSwtMSkiLz4KICAgIDxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDIyLDI0KSIgZmlsbD0iIzFGNEU3RCI+CiAgICAgIDxwYXRoIGQ9Ik0tOSA4IEw5IDggTDYgMTEuNSBMLTYgMTEuNSBaIi8+CiAgICAgIDxyZWN0IHg9Ii0wLjkiIHk9Ii0xMSIgd2lkdGg9IjEuOCIgaGVpZ2h0PSIxOSIvPgogICAgICA8cGF0aCBkPSJNMC42IC0xMSBMOC41IDYuNSBMMC42IDYuNSBaIi8+CiAgICA8L2c+CiAgPC9nPgogIDxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDg4LDApIj4KICAgIDxyZWN0IHg9IjAuNSIgeT0iMC41IiB3aWR0aD0iNDMiIGhlaWdodD0iNDMiIGZpbGw9IiNGQkY2RUUiIHN0cm9rZT0iIzFGNEU3RCIgc3Ryb2tlLW9wYWNpdHk9IjAuMjIiIHN0cm9rZS13aWR0aD0iMSIvPgogICAgPHVzZSBocmVmPSIjY29ybmVyIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwLDApIi8+CiAgICA8dXNlIGhyZWY9IiNjb3JuZXIiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDQ0LDApIHNjYWxlKC0xLDEpIi8+CiAgICA8dXNlIGhyZWY9IiNjb3JuZXIiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAsNDQpIHNjYWxlKDEsLTEpIi8+CiAgICA8dXNlIGhyZWY9IiNjb3JuZXIiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDQ0LDQ0KSBzY2FsZSgtMSwtMSkiLz4KICAgIDxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDIyLDI1KSI+CiAgICAgIDxwb2x5Z29uIHBvaW50cz0iLTcuNSwxMC4wIC03LjUsLTIuMCAtNy41LC01LjYgLTQuNSwtNS42IC00LjUsLTkuMiAtMS41LC05LjIgLTEuNSwtMTEuMCAxLjUsLTExLjAgMS41LC05LjIgNC41LC05LjIgNC41LC01LjYgNy41LC01LjYgNy41LDEwLjAiIGZpbGw9IiMxRjRFN0QiLz4KICAgICAgPHJlY3QgeD0iLTUuMiIgeT0iMC40IiB3aWR0aD0iMi42IiBoZWlnaHQ9IjQuMCIgZmlsbD0iI0ZCRjZFRSIgcng9IjAuMyIvPjxyZWN0IHg9IjIuNiIgeT0iMC40IiB3aWR0aD0iMi42IiBoZWlnaHQ9IjQuMCIgZmlsbD0iI0ZCRjZFRSIgcng9IjAuMyIvPgogICAgICA8cmVjdCB4PSItMS43IiB5PSI1LjgiIHdpZHRoPSIzLjQiIGhlaWdodD0iNC4yIiBmaWxsPSIjRkJGNkVFIiByeD0iMC4zIi8+CiAgICAgIDxjaXJjbGUgY3g9IjAiIGN5PSItMTIuMSIgcj0iMS4wNSIgZmlsbD0iIzFGNEU3RCIvPgogICAgPC9nPgogIDwvZz4KICA8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwLDQ0KSI+CiAgICA8cmVjdCB4PSIwLjUiIHk9IjAuNSIgd2lkdGg9IjQzIiBoZWlnaHQ9IjQzIiBmaWxsPSIjRkJGNkVFIiBzdHJva2U9IiMxRjRFN0QiIHN0cm9rZS1vcGFjaXR5PSIwLjIyIiBzdHJva2Utd2lkdGg9IjEiLz4KICAgIDx1c2UgaHJlZj0iI2Nvcm5lciIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMCwwKSIvPgogICAgPHVzZSBocmVmPSIjY29ybmVyIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg0NCwwKSBzY2FsZSgtMSwxKSIvPgogICAgPHVzZSBocmVmPSIjY29ybmVyIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwLDQ0KSBzY2FsZSgxLC0xKSIvPgogICAgPHVzZSBocmVmPSIjY29ybmVyIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg0NCw0NCkgc2NhbGUoLTEsLTEpIi8+CiAgICA8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyMiwyNSkiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzFGNEU3RCIgc3Ryb2tlLXdpZHRoPSIxLjYiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+CiAgICAgIDxjaXJjbGUgY3g9Ii02LjIiIGN5PSI0LjUiIHI9IjQuMiIvPgogICAgICA8Y2lyY2xlIGN4PSI2LjIiIGN5PSI0LjUiIHI9IjQuMiIvPgogICAgICA8cGF0aCBkPSJNLTYuMiA0LjUgTC0xLjUgLTMuNSBMNC41IC0zLjUgTS0xLjUgLTMuNSBMLTMuOCA0LjUgTS0xLjUgLTMuNSBMMi41IDQuNSBNNi4yIDQuNSBMMi41IDQuNSIvPgogICAgICA8cGF0aCBkPSJNNC41IC0zLjUgTDYuMyAtMy41IE0tNC42IC01LjIgTC0xLjkgLTUuMiIvPgogICAgPC9nPgogIDwvZz4KICA8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSg4OCw0NCkiPgogICAgPHJlY3QgeD0iMC41IiB5PSIwLjUiIHdpZHRoPSI0MyIgaGVpZ2h0PSI0MyIgZmlsbD0iI0ZCRjZFRSIgc3Ryb2tlPSIjMUY0RTdEIiBzdHJva2Utb3BhY2l0eT0iMC4yMiIgc3Ryb2tlLXdpZHRoPSIxIi8+CiAgICA8dXNlIGhyZWY9IiNjb3JuZXIiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAsMCkiLz4KICAgIDx1c2UgaHJlZj0iI2Nvcm5lciIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNDQsMCkgc2NhbGUoLTEsMSkiLz4KICAgIDx1c2UgaHJlZj0iI2Nvcm5lciIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMCw0NCkgc2NhbGUoMSwtMSkiLz4KICAgIDx1c2UgaHJlZj0iI2Nvcm5lciIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNDQsNDQpIHNjYWxlKC0xLC0xKSIvPgogICAgPGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMjIsMjUpIj4KICAgICAgPHBhdGggZD0iTTAgMTFjMCA0IDAgNyAwIDEwIiBzdHJva2U9IiMxRjRFN0QiIHN0cm9rZS13aWR0aD0iMS42IiBmaWxsPSJub25lIiBzdHJva2UtbGluZWNhcD0icm91bmQiLz4KICAgICAgPGcgZmlsbD0iIzFGNEU3RCI+CiAgICAgICAgPGcgdHJhbnNmb3JtPSJyb3RhdGUoLTI0KSI+PHBhdGggZD0iTTAgMTFDLTQuNSA1IC01IC0zIDAgLTlDNSAtMyA0LjUgNSAwIDExWiIvPjwvZz4KICAgICAgICA8ZyB0cmFuc2Zvcm09InJvdGF0ZSgyNCkiPjxwYXRoIGQ9Ik0wIDExQy00LjUgNSAtNSAtMyAwIC05QzUgLTMgNC41IDUgMCAxMVoiLz48L2c+CiAgICAgICAgPHBhdGggZD0iTTAgMTFDLTQuNSA1IC01IC0zIDAgLTlDNSAtMyA0LjUgNSAwIDExWiIvPgogICAgICA8L2c+CiAgICA8L2c+CiAgPC9nPgogIDxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDQ0LDQ0KSI+CiAgICA8cmVjdCB4PSIwLjUiIHk9IjAuNSIgd2lkdGg9IjQzIiBoZWlnaHQ9IjQzIiBmaWxsPSIjRkJGNkVFIiBzdHJva2U9IiMxRjRFN0QiIHN0cm9rZS1vcGFjaXR5PSIwLjIyIiBzdHJva2Utd2lkdGg9IjEiLz4KICAgIDx1c2UgaHJlZj0iI2Nvcm5lciIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMCwwKSIvPgogICAgPHVzZSBocmVmPSIjY29ybmVyIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg0NCwwKSBzY2FsZSgtMSwxKSIvPgogICAgPHVzZSBocmVmPSIjY29ybmVyIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwLDQ0KSBzY2FsZSgxLC0xKSIvPgogICAgPHVzZSBocmVmPSIjY29ybmVyIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg0NCw0NCkgc2NhbGUoLTEsLTEpIi8+CiAgICA8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyMiwyNSkiIGZpbGw9IiMxRjRFN0QiPgogICAgICA8cGF0aCBkPSJNMCAtMTAgTC04LjUgNyBBMTAgOS42IDAgMCAwIDguNSA3IFoiLz4KICAgICAgPGNpcmNsZSBjeD0iLTIuNiIgY3k9IjEuNSIgcj0iMS42IiBmaWxsPSIjRkJGNkVFIi8+CiAgICAgIDxjaXJjbGUgY3g9IjIuOCIgY3k9Ii0xLjUiIHI9IjEuMyIgZmlsbD0iI0ZCRjZFRSIvPgogICAgICA8Y2lyY2xlIGN4PSIwLjUiIGN5PSI0LjgiIHI9IjEuMTUiIGZpbGw9IiNGQkY2RUUiLz4KICAgIDwvZz4KICA8L2c+Cjwvc3ZnPg==");
}

/* ─────────── DARK THEME · legacy-token remap ──────────────────────────
   De oude :root-aliases hierboven mapten `--teal-900 → var(--topbar-bg)`
   enz. In light werkt dat prima (Delfts-blauwe tekst op warm papier). In
   dark wordt `--topbar-bg` near-black, waardoor h1-h3 en tile-labels
   onleesbaar werden (zwart op zwart). Deze overrides herstellen contrast
   zonder dat elke rule hieronder individueel gefixt hoeft te worden.
   [DARK: legacy aliases remap] (2026-10-11)                              */
.theme-dark {
  /* Headings (h1-h3) + tile-labels gebruiken --teal-900 */
  --teal-900: var(--ink);
  --teal-800: var(--ink);
  --teal-700: var(--ink-secondary);
  --teal-100: var(--line-strong);

  /* Delft-schaal: eyebrows, pattern-fills, info-chrome */
  --delft-950: var(--ink);
  --delft-800: var(--ink);
  --delft-700: var(--ink-secondary);
  /* --delft-600 blijft = --info (helder blauw — accent voor tags, borders) */
  --delft-100: var(--line-strong);

  /* Fact-chrome: borders + tekst binnen fact-rows */
  --fact-fg: var(--ink);
  --fact-bg: var(--line);

  /* Sand (hero-highlight warme crème) → polder-moss in dark */
  --sand: var(--cream);
  --sand-deep: var(--cream-strong);
}


* {
  box-sizing: border-box;
}

/* Defensive: without this, an element with the `hidden` HTML attribute but
   also an author rule setting its own `display` (e.g. .row-label-toggle,
   used for several toggle-style buttons that start hidden) would win the
   cascade over the UA [hidden] rule and stay visible. Found while adding
   the Budget "Cancel edit" button, which reuses that class and starts
   hidden — this rule makes `hidden` reliably mean "not displayed" everywhere. */
[hidden] {
  display: none !important;
}

html, body {
  margin: 0;
  padding: 0;
}

body {
  background: var(--paper);
  color: var(--ink);
  font-family: "IBM Plex Sans", "Segoe UI", system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  padding-bottom: 32px;
}

/* One type family for everything — headings differ from body only in weight
   and size, no separate serif. See Polderstijl: a deliberately "Swiss" choice.
   [P-10: Polderstijl Swiss] — nuchter, geen sierletters, als grutto-roep. */
h1, h2, h3 {
  font-family: "IBM Plex Sans", system-ui, sans-serif;
  font-weight: 700;
  color: var(--teal-900);
  margin: 0 0 8px;
}

h2 {
  font-size: 1.15rem;
}

p {
  margin: 0 0 12px;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  overflow: hidden;
  background: var(--topbar-bg);
  color: var(--ink-on-chrome, white);
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

/* Delft-tile pattern, faded in from the right — a nod to Delft tegelwanden,
   kept subtle so the title on the left always stays readable.
   [P-10: Delft tegelwand] */
.topbar::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--delft-pattern);
  background-repeat: repeat;
  background-size: 96px 64px;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, transparent 78%, black 100%);
  mask-image: linear-gradient(to right, transparent 0%, transparent 78%, black 100%);
  z-index: 0;
}

.topbar-inner {
  position: relative;
  z-index: 1;
  max-width: 640px;
  margin: 0 auto;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.back-btn {
  background: rgba(255,255,255,0.12);
  border: none;
  color: white;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  font-size: 1.1rem;
  cursor: pointer;
  flex-shrink: 0;
}

.back-btn:hover {
  background: rgba(255,255,255,0.22);
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  font-size: 1.05rem;
}

.brand-icon {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  flex-shrink: 0;
}

/* Language switcher — pinned to the far right of the topbar, always
   visible regardless of which screen is open. Sits inside the tile-pattern
   fade zone, so it uses a solid pill background rather than relying on
   text contrast against the pattern (the same problem the topbar title
   text ran into earlier). */
.lang-switch {
  position: relative;
  margin-left: auto;
  flex-shrink: 0;
}

.lang-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  background: rgba(255, 255, 255, 0.16);
  border: none;
  color: white;
  height: 34px;
  padding: 0 11px;
  border-radius: 17px;
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
}

.lang-btn:hover {
  background: rgba(255, 255, 255, 0.28);
}

.lang-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* Fixed rather than absolute: .topbar has overflow:hidden (to contain the
   Delft-tile pattern), which would clip an absolutely-positioned dropdown
   hanging below the button. Fixed positioning escapes that clip; app.js
   sets top/right inline (from the button's rect) each time the menu opens. */
.lang-menu {
  position: fixed;
  background: var(--paper-raised, var(--card));
  color: var(--ink, var(--topbar-bg));
  border: 1.5px solid var(--delft-100, var(--line));
  border-radius: 10px;
  /* Two stacked shadows: a tight dark one for a crisp edge against the
     paper-white home tiles (the menu used to nearly disappear into them,
     per test-user feedback), plus the original soft one for lift. */
  box-shadow: 0 1px 3px rgba(11, 32, 56, 0.28), 0 8px 24px rgba(11, 32, 56, 0.22);
  padding: 4px;
  min-width: 130px;
  z-index: 20;
}

.lang-option {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  font-family: inherit;
  font-size: 0.9rem;
  padding: 8px 10px;
  border-radius: 7px;
  cursor: pointer;
  color: inherit;
}

.lang-option:hover {
  background: var(--fact-bg, rgba(0, 0, 0, 0.06));
}

.lang-option.is-active {
  font-weight: 600;
  color: var(--delft-700, var(--topbar-bg));
}

main#app {
  max-width: 640px;
  margin: 0 auto;
  padding: 20px 16px 8px;
}

.view {
  animation: fadeIn 0.18s ease-out;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

.intro {
  color: var(--ink-soft);
  font-size: 0.95rem;
}

/* Emergency shortcut */
.emergency-banner {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--tip-bg);
  border: 1px solid var(--orange-500);
  color: var(--tip-fg);
  border-radius: 10px;
  padding: 10px 14px;
  font-family: inherit;
  font-size: 0.85rem;
  cursor: pointer;
  margin-bottom: 16px;
  text-align: left;
}

.emergency-banner:hover {
  background: var(--accent-soft);
}

.emergency-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  display: inline-flex;
}

.emergency-icon svg {
  width: 100%;
  height: 100%;
}

.emergency-text {
  flex: 1;
}

.emergency-arrow {
  flex-shrink: 0;
  font-weight: 700;
}

/* Home tiles */
.tile-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-top: 8px;
}

.tile {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  text-align: left;
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 16px;
  cursor: pointer;
  font-family: inherit;
  box-shadow: 0 1px 3px rgba(18,71,84,0.06);
  transition: border-color 0.15s, transform 0.15s;
}

.tile:hover {
  border-color: var(--orange-500);
  transform: translateY(-1px);
}

.tile-icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: radial-gradient(circle at 30% 25%, var(--info-soft), var(--delft-100) 70%);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.tile-icon svg {
  width: 22px;
  height: 22px;
}

.tile-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.tile-label {
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--teal-900);
}

.tile-desc {
  color: var(--ink-soft);
  font-size: 0.88rem;
}

/* Skyline illustration band — the one emotional moment, home screen only.
   preserveAspectRatio="none" on the inner SVG means it always fills this
   box cleanly at any width, so the height here is the only thing to tune.
   [P-10: NL skyline] — herenhuizen-silhouet, één brand-moment op home. */
.skyline-band {
  height: 96px;
  border-radius: 18px;
  margin-bottom: 16px;
  overflow: hidden;
  position: relative;
  background: linear-gradient(180deg, var(--sky-top), var(--sky-mid) 60%, var(--sky-bot) 100%);
  box-shadow: 0 10px 22px -12px rgba(10,34,41,0.5);
}

.skyline-band svg {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* Weather layer — a small icon + temperature in the empty sky, top-right of
   the skyline band. Only ever this one corner changes; the sky itself stays
   the same blue gradient regardless of the real weather. Empty/hidden by
   default — filled in by JS only once a live reading is available, and left
   empty (not a placeholder icon) whenever location/weather data isn't. */
.skyline-weather {
  position: absolute;
  top: 8px;
  right: 10px;
  display: flex;
  align-items: center;
  gap: 4px;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.skyline-weather.is-visible {
  opacity: 1;
}

.skyline-weather svg {
  position: static;
  width: 26px;
  height: 26px;
  display: block;
  filter: drop-shadow(0 1px 2px rgba(11, 32, 56, 0.35));
}

.skyline-weather-temp {
  color: var(--bg);
  font-family: "IBM Plex Sans", system-ui, sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  text-shadow: 0 1px 2px rgba(11, 32, 56, 0.45);
}

.tile-future {
  cursor: default;
  opacity: 0.55;
  border-style: dashed;
}

.tile-future .tile-icon {
  background: var(--sand);
}

.tile-future:hover {
  border-color: var(--line);
  transform: none;
}

/* Info cards */
.category-accordion {
  margin-bottom: 12px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

.category-accordion > summary {
  list-style: none;
  cursor: pointer;
  padding: 16px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.category-accordion > summary::-webkit-details-marker {
  display: none;
}

.category-summary-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.category-title-text {
  font-size: 1.05rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--teal-700);
  font-weight: 700;
}

.category-count {
  flex-shrink: 0;
  background: var(--teal-100);
  color: var(--teal-700);
  font-size: 0.78rem;
  font-weight: 700;
  border-radius: 999px;
  padding: 2px 9px;
}

.category-chevron {
  color: var(--ink-soft);
  transition: transform 0.15s;
}

.category-accordion[open] .category-chevron {
  transform: rotate(90deg);
}

.category-inner {
  padding: 0 16px 16px;
}

.subgroup-label {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-soft);
  margin: 14px 0 8px;
}

.subgroup-label:first-child {
  margin-top: 4px;
}

.card-calc-link {
  display: block;
  background: none;
  border: 1px dashed var(--orange-500);
  color: var(--orange-600);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  margin-top: 10px;
  text-align: left;
}

.card-calc-link:hover {
  background: var(--tip-bg);
}

.info-search-row {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 14px;
  position: relative;
}

.info-search {
  flex: 1;
  min-width: 0;
  padding: 11px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  font-size: 0.95rem;
  font-family: inherit;
  color: var(--ink);
  background: var(--card);
}

.info-search:focus {
  outline: 2px solid var(--teal-700);
  outline-offset: 1px;
}

.info-search-clear {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  font-size: 1.3rem;
  line-height: 1;
  color: var(--ink-soft);
  cursor: pointer;
  padding: 4px 6px;
}

.search-result-count {
  margin: 0 0 10px;
}

.search-result-category {
  flex-shrink: 0;
  background: var(--teal-100);
  color: var(--teal-700);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  border-radius: 999px;
  padding: 2px 9px;
  margin-left: 8px;
}

.info-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  margin-bottom: 10px;
  overflow: hidden;
}

.info-card summary {
  list-style: none;
  cursor: pointer;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  color: var(--teal-900);
}

.info-card summary::-webkit-details-marker {
  display: none;
}

.summary-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1;
}

.summary-left .card-title {
  overflow-wrap: anywhere;
}

.chevron {
  flex-shrink: 0;
  transition: transform 0.15s;
  color: var(--ink-soft);
}

.info-card[open] .chevron {
  transform: rotate(90deg);
}

.label {
  flex-shrink: 0;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 3px 8px;
  border-radius: 999px;
}

.label-fact {
  background: var(--fact-bg);
  color: var(--fact-fg);
}

.label-tip {
  background: var(--tip-bg);
  color: var(--tip-fg);
}

.info-card-body {
  padding: 0 16px 16px;
  color: var(--ink);
  font-size: 0.94rem;
}

.info-card-body .source {
  display: block;
  margin-top: 10px;
  font-size: 0.8rem;
  color: var(--ink-soft);
}

.info-card-body .source a {
  color: var(--teal-700);
}

/* Calculator */

/* Mode switcher — always visible, one tap to any of the four tools */
.calc-tabs {
  display: flex;
  gap: 6px;
  background: var(--teal-100);
  border-radius: 10px;
  padding: 4px;
  margin-bottom: 12px;
}

.calc-tab {
  flex: 1;
  background: none;
  border: none;
  border-radius: 8px;
  padding: 9px 4px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--teal-700);
  cursor: pointer;
  font-family: inherit;
}

.calc-tab.is-active {
  background: var(--card);
  color: var(--teal-900);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

/* Trip switcher (home screen) — up to 3 trips, variable-width pills (unlike
   .calc-tabs, names vary a lot in length, so tabs wrap instead of sharing
   equal flex widths). display:inline-flex (rather than the default block)
   so the pill-track background hugs however many/wide the tabs actually
   are, instead of always stretching to the full row width and leaving
   empty track showing on the right with 1-2 short names. Used to be two
   separate rows (Budget's own tabs, Packing List's own tabs) — now one
   shared switcher that scopes both, plus Trip details and To-do. */
.trip-tabs {
  display: inline-flex;
  max-width: 100%;
  flex-wrap: wrap;
  gap: 6px;
  background: var(--teal-100);
  border-radius: 10px;
  padding: 4px;
  margin-bottom: 8px;
}

.trip-tab {
  background: none;
  border: none;
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--teal-700);
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
}

.trip-tab.is-active {
  background: var(--card);
  color: var(--teal-900);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

/* Rename / Delete / Add trip — compact, sit inline together instead of the
   full-width block buttons used elsewhere (.use-total-btn), which is what
   made these three stack as three full-height rows before. */
#tripMgrActions {
  margin-bottom: 8px;
}

.trip-mgr-btn {
  background: none;
  border: 1px solid var(--line);
  color: var(--teal-700);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  flex: 1;
  white-space: nowrap;
}

.trip-mgr-btn:hover {
  border-color: var(--orange-500);
  color: var(--orange-600);
}

.trip-mgr-btn-danger {
  color: var(--ink-soft);
}

.trip-mgr-btn-danger:hover {
  border-color: var(--err);
  color: var(--err);
}

/* Read-only reminder of the active trip, shown on the Budget and Packing
   List screens now that switching trips only happens on the home screen. */
.trip-breadcrumb {
  font-weight: 600;
  color: var(--teal-700);
}

/* History strip — persistent across every mode, collapsed to one glanceable line */
.history-strip {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin-bottom: 16px;
  overflow: hidden;
}

.history-strip-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 12px 14px;
  font-family: inherit;
  text-align: left;
}

.history-strip-icon {
  flex-shrink: 0;
}

.history-strip-summary {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.85rem;
  color: var(--ink-soft);
}

.history-strip-chevron {
  flex-shrink: 0;
  color: var(--ink-soft);
  transition: transform 0.15s;
}

.history-strip-body {
  padding: 0 14px 14px;
  border-top: 1px solid var(--line);
  padding-top: 12px;
}

.calc-panel {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px;
  margin-bottom: 16px;
}

.rate-line {
  font-size: 0.85rem;
  color: var(--ink-soft);
  background: var(--teal-100);
  padding: 8px 10px;
  border-radius: 8px;
}

.rate-line.stale {
  background: var(--tip-bg);
  color: var(--tip-fg);
}

.field-row {
  margin-bottom: 12px;
}

.field-row label {
  display: block;
  font-size: 0.82rem;
  color: var(--ink-soft);
  margin-bottom: 4px;
}

input[type="number"],
input[type="text"],
select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 1rem;
  background: var(--paper);
  color: var(--ink);
  font-family: inherit;
}

input:focus,
select:focus {
  outline: 2px solid var(--orange-500);
  outline-offset: 1px;
}

.hint {
  font-size: 0.85rem;
  color: var(--ink-soft);
}

#calcRows {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
}

.calc-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 0.9rem;
}

.calc-row-remove {
  background: none;
  border: none;
  color: var(--ink-soft);
  font-size: 1rem;
  cursor: pointer;
  padding: 2px 6px;
  flex-shrink: 0;
}

.calc-row-remove:hover {
  color: var(--orange-600);
}

.add-row-form {
  margin-bottom: 4px;
}

/* The custom-preset creation/edit form is boxed like a preset card, since it
   sits inline in the NL Presets list rather than always being on screen. */
#customPresetForm {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 14px;
  margin-top: 6px;
  margin-bottom: 10px;
}

/* Primary quick-entry row — sign, value, type, Add — modeled after a real
   calculator's button row so adding a number is fast with no required label. */
.add-row-primary {
  display: grid;
  grid-template-columns: 56px 1fr 76px auto;
  gap: 6px;
  align-items: center;
}

.add-row-primary select,
.add-row-primary input {
  margin: 0;
}

.add-row-primary button {
  background: var(--orange-500);
  color: white;
  border: none;
  border-radius: 8px;
  padding: 10px 14px;
  font-weight: 600;
  cursor: pointer;
}

.add-row-primary button:hover {
  background: var(--orange-600);
}

.row-label-toggle {
  display: block;
  background: none;
  border: none;
  color: var(--teal-700);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  padding: 8px 0 0;
  font-family: inherit;
}

.row-label-input {
  margin-top: 6px;
}

.running-total-dual {
  margin-top: 14px;
  border-top: 1px solid var(--line);
  padding-top: 12px;
}

.running-total-eur,
.running-total-home {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 0.95rem;
}

.running-total-eur strong {
  font-size: 1.35rem;
  color: var(--teal-900);
  font-variant-numeric: tabular-nums;
}

.running-total-home {
  margin-top: 4px;
  color: var(--ink-soft);
}

.running-total-home strong {
  font-size: 1rem;
  color: var(--teal-700);
  font-variant-numeric: tabular-nums;
}

.save-history-btn,
.use-total-btn,
.clear-history-btn,
.clear-rows-btn {
  background: none;
  border: 1px solid var(--line);
  color: var(--teal-700);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  margin-top: 10px;
}

.save-history-btn:hover,
.use-total-btn:hover,
.clear-history-btn:hover {
  border-color: var(--orange-500);
  color: var(--orange-600);
}

/* Clear-all is destructive, so it gets its own (subtler, reddish) hover
   instead of the orange used for constructive actions like Save. */
.clear-rows-btn {
  color: var(--ink-soft);
}

.clear-rows-btn:hover {
  border-color: var(--err);
  color: var(--err);
}

.calc-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.calc-actions .save-history-btn,
.calc-actions .clear-rows-btn {
  flex: 1;
  margin-top: 10px;
}

/* Quick nudge when a typed value/sum can't be understood (e.g. "3 x" with no
   second number) — a red flash instead of silently doing nothing. */
.input-error {
  border-color: var(--err) !important;
  animation: input-shake 0.3s;
}

@keyframes input-shake {
  25% { transform: translateX(-3px); }
  75% { transform: translateX(3px); }
}

.use-total-btn {
  display: block;
  width: 100%;
  margin-bottom: 14px;
}

.history-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 4px;
}

.history-entry {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 0.88rem;
}

.history-entry > div {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.history-label {
  color: var(--ink);
  overflow-wrap: anywhere;
}

.history-time {
  color: var(--ink-soft);
  font-size: 0.75rem;
}

.history-entry strong {
  flex-shrink: 1;
  min-width: 0;
  white-space: normal;
  text-align: right;
  color: var(--teal-900);
  font-variant-numeric: tabular-nums;
}

.split-mode-toggle {
  display: flex;
  gap: 6px;
  margin-bottom: 14px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 3px;
}

.split-mode-btn {
  flex: 1;
  background: none;
  border: none;
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink-soft);
  cursor: pointer;
}

.split-mode-btn.is-active {
  background: var(--card);
  color: var(--teal-900);
  box-shadow: 0 1px 3px rgba(18,71,84,0.12);
}

.split-person-row {
  display: grid;
  grid-template-columns: 1fr 80px 62px auto;
  gap: 6px;
  align-items: center;
  margin-bottom: 8px;
}

.split-person-mode {
  padding: 8px 2px;
  font-size: 0.8rem;
}

.split-person-value {
  padding: 8px 4px;
  font-size: 0.85rem;
}

.split-warning {
  color: var(--tip-fg);
  background: var(--tip-bg);
  padding: 8px 10px;
  border-radius: 8px;
  margin: 0 0 8px;
}

.split-custom-result {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 4px;
}

.split-custom-result .preset-result {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.preset {
  border: 1px solid var(--line);
  border-radius: 10px;
  margin-bottom: 10px;
  overflow: hidden;
}

.preset summary {
  cursor: pointer;
  padding: 12px 14px;
  font-weight: 600;
  color: var(--teal-900);
  list-style: none;
}

.preset summary::-webkit-details-marker {
  display: none;
}

.preset-body {
  padding: 4px 14px 16px;
}

.preset-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.preset-row label {
  font-size: 0.88rem;
  color: var(--ink);
}

.preset-rate {
  color: var(--ink-soft);
  font-weight: 400;
}

.preset-row input {
  width: 80px;
  flex-shrink: 0;
}

.preset-result {
  background: var(--teal-100);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 0.9rem;
  color: var(--teal-900);
}

.preset-result strong {
  font-variant-numeric: tabular-nums;
}

/* Budget: a per-category running subtotal shown above the add-expense form,
   using the same visual language as the other running totals in the app. */
.budget-breakdown {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.budget-breakdown-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.82rem;
  color: var(--ink-soft);
}

.budget-breakdown-row strong {
  color: var(--teal-900);
  font-variant-numeric: tabular-nums;
}

/* The optional note field that appears just above the "Send to Budget"
   buttons in Calculate and Split the Bill — a little extra breathing room
   so it doesn't read as part of the calculation itself. */
.budget-send-row {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px dashed var(--line);
}

/* Budget: optional spending-limit toggle + progress bar. Reuses
   .row-label-toggle for the "Set a limit"/"Edit" links, same visual
   language as the calculator's "+ Add a note" toggle. */
.budget-limit-row {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px dashed var(--line);
}

.budget-limit-row .field-row {
  margin-top: 8px;
}

.budget-limit-bar-track {
  height: 8px;
  border-radius: 4px;
  background: var(--sand);
  overflow: hidden;
  margin-top: 8px;
}

.budget-limit-bar-fill {
  height: 100%;
  background: var(--teal-700);
  border-radius: 4px;
  transition: width 0.2s;
}

.budget-limit-bar-fill.is-warning {
  background: var(--nl-orange);
}

.budget-limit-bar-fill.is-over {
  background: var(--err);
}

.packing-progress-bar-track {
  height: 8px;
  border-radius: 4px;
  background: var(--sand);
  overflow: hidden;
  margin-top: 8px;
}

.packing-progress-bar-fill {
  height: 100%;
  background: var(--teal-700);
  border-radius: 4px;
  transition: width 0.2s;
}

.budget-limit-text {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 6px;
  font-size: 0.85rem;
  color: var(--ink-soft);
}

/* Same idea as .running-total-home: a quieter, secondary line under the
   limit's own €-based status text, showing the same numbers converted to
   the visitor's home currency (derived/live, not a second input). */
.budget-limit-text-home {
  margin-top: 2px;
  font-size: 0.78rem;
  color: var(--ink-soft);
  opacity: 0.85;
}

/* Budget: category chart — a small SVG donut plus a legend that carries the
   actual numbers (color never carries meaning alone). */
.budget-chart-wrap {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.budget-chart-svg {
  flex-shrink: 0;
}

.budget-legend {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
  min-width: 160px;
}

.budget-legend-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  color: var(--ink);
}

.budget-legend-swatch {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  flex-shrink: 0;
}

.budget-legend-row strong {
  margin-left: auto;
  font-variant-numeric: tabular-nums;
  color: var(--teal-900);
}

.foot {
  max-width: 640px;
  margin: 24px auto 0;
  padding: 0 16px;
  color: var(--ink-soft);
  font-size: 0.78rem;
  text-align: center;
}

@media (min-width: 560px) {
  .tile-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* Splash screen — shown briefly on load (and on "Add to Home Screen" launch),
   the same herenhuizen motif as the home screen skyline band, at a smaller
   scale. Faded out by a small script in app.js once the app is ready.
   [P-10: herenhuizen-splash] — visuele continuïteit launch → home. */
#splashScreen {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  background: linear-gradient(160deg, var(--sky-top), var(--sky-mid) 50%, var(--sky-bot));
  transition: opacity 0.35s ease, visibility 0.35s ease;
}

#splashScreen.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

#splashScreen svg {
  width: 120px;
  height: auto;
}

#splashScreen .splash-name {
  color: var(--paper);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 0.01em;
  font-family: "IBM Plex Sans", system-ui, sans-serif;
}

#splashScreen .splash-sub {
  margin-top: -8px;
  color: var(--paper);
  opacity: 0.75;
  font-weight: 400;
  font-size: 0.8rem;
  font-family: "IBM Plex Sans", system-ui, sans-serif;
}

#splashScreen .splash-status {
  min-height: 1em;
  margin-top: 10px;
  color: var(--paper);
  opacity: 0;
  font-weight: 400;
  font-size: 0.75rem;
  text-align: center;
  max-width: 240px;
  font-family: "IBM Plex Sans", system-ui, sans-serif;
  transition: opacity 0.4s ease;
}

#splashScreen .splash-status.is-visible {
  opacity: 0.85;
}

/* Loading indicator: a small kaaswiel (the same wedge-with-holes motif used
   in the Delft tile pattern) travels back and forth along a thin track,
   with a light rock/rotate for a rolling feel. [P-10: kaaswiel] Purely decorative (the real
   progress signal is the status text above, which only appears if loading
   is actually taking a while) — runs continuously for as long as the splash
   screen is visible. */
#splashScreen .splash-progress {
  width: 92px;
  margin-top: 2px;
}

#splashScreen .splash-progress-track {
  position: relative;
  height: 3px;
  border-radius: 999px;
  background: rgba(251, 246, 238, 0.22);
}

#splashScreen .splash-progress-wheel {
  position: absolute;
  top: 50%;
  left: 0;
  width: 18px;
  height: 18px;
  margin-top: -9px;
  animation: splashWheelTravel 1.6s cubic-bezier(0.45, 0, 0.55, 1) infinite alternate;
}

#splashScreen .splash-progress-wheel svg {
  width: 100%;
  height: 100%;
  display: block;
  filter: drop-shadow(0 1px 1px rgba(11, 32, 56, 0.35));
}

@keyframes splashWheelTravel {
  0% { transform: translateX(0) rotate(-8deg); }
  50% { transform: translateX(37px) rotate(10deg); }
  100% { transform: translateX(74px) rotate(-8deg); }
}

@media (prefers-reduced-motion: reduce) {
  #splashScreen .splash-progress-wheel {
    animation: none;
    left: 37px;
  }
}

/* Monospace tabular numbers for the calculator's live totals — an
   "instrument panel" feel that also keeps digits from jittering in width. */
.running-total-eur strong,
.running-total-home strong,
.preset-result strong,
.history-entry strong {
  font-family: "IBM Plex Mono", monospace;
}

/* ---------------------------------------------------------------
   Packing List
   --------------------------------------------------------------- */
/* "Regelen"/"Inpakken" meta-group label, above one or more collapsible
   category accordions (.packing-cat-accordion reuses the Practical Info
   .category-accordion look, see that section of this file). */
.packing-group-label {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--orange-600);
  margin: 18px 0 8px;
}

.packing-group-label:first-child {
  margin-top: 4px;
}

.packing-cat-accordion {
  margin-bottom: 10px;
}

.packing-cat-inner {
  padding-top: 4px;
}

.packing-row-main {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  cursor: pointer;
}

.packing-row-main input[type="checkbox"] {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  accent-color: var(--orange-600);
  cursor: pointer;
}

.packing-text-checked {
  text-decoration: line-through;
  color: var(--ink-soft);
}

.packing-row-highlight {
  animation: packing-highlight-flash 1.6s ease-out;
}

/* Tag filter chips above the list — same segmented-pill-track look as
   .calc-tabs/.trip-tabs elsewhere, so it reads as "a set of views to pick
   from" rather than a new control language. Hidden entirely (see
   renderPacking) until at least one item actually has a tag. */
.packing-tag-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  background: var(--teal-100);
  border-radius: 10px;
  padding: 4px;
  margin-bottom: 10px;
}

.packing-tag-chip {
  background: none;
  border: none;
  border-radius: 8px;
  padding: 7px 12px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--teal-700);
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
}

.packing-tag-chip.is-active {
  background: var(--card);
  color: var(--teal-900);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

/* Small tag pill on a packing row itself — informational at a glance, and
   doubles as a shortcut straight to that tag's filter chip (see
   the "filter-tag" click handler in renderPacking). Kept a neutral color
   rather than the orange interactive accent: the filter chips above are
   the primary "tap here" control for filtering, this is a secondary
   convenience on top of it. */
.packing-item-tag {
  flex-shrink: 0;
  background: var(--teal-100);
  color: var(--teal-700);
  border: none;
  font-size: 0.72rem;
  font-weight: 700;
  border-radius: 999px;
  padding: 2px 9px;
  cursor: pointer;
  font-family: inherit;
}

.packing-item-tag:hover {
  background: var(--delft-100, var(--line));
}

@keyframes packing-highlight-flash {
  0% {
    background: var(--orange-100, var(--accent-soft));
    border-color: var(--orange-600);
  }
  100% {
    background: var(--paper);
    border-color: var(--line);
  }
}

/* ---------------------------------------------------------------
   To-do widget (home screen, above the module tiles)
   --------------------------------------------------------------- */
.todo-widget {
  margin-bottom: 18px;
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 1px 3px rgba(18,71,84,0.06);
  padding: 14px 16px;
}

.todo-widget-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.todo-widget-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--teal-900);
}

.todo-widget-addbtn {
  background: none;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 0.8rem;
  color: var(--orange-600);
  cursor: pointer;
}

.todo-widget-addbtn:hover {
  background: var(--paper);
}

.todo-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 4px;
}

.todo-row-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.todo-row-meta {
  font-size: 0.72rem;
  color: var(--ink-soft);
  margin-top: 2px;
}

.todo-row-note {
  font-size: 0.72rem;
  color: var(--ink-soft);
  font-style: italic;
  margin-top: 2px;
}

.todo-widget-more {
  display: block;
  background: none;
  border: none;
  color: var(--orange-600);
  font-size: 0.8rem;
  padding: 4px 0 0;
  cursor: pointer;
  text-decoration: underline;
}

/* Trip scope chip on a to-do row — which trip a task belongs to, or
   "General" (a softer, sand-colored variant) when it isn't tied to one. */
.todo-row-scope {
  display: inline-block;
  background: var(--teal-100);
  color: var(--teal-700);
  border-radius: 999px;
  padding: 1px 8px;
  font-size: 0.68rem;
  font-weight: 600;
  white-space: nowrap;
  vertical-align: middle;
}

.todo-row-scope.is-general {
  background: var(--sand);
  color: var(--orange-600);
}

/* ---------------------------------------------------------------
   Trip details (Packing List) — the attached-document row
   --------------------------------------------------------------- */
/* Elevated card treatment (distinct from the plain .preset accordions used
   for e.g. Budget's collapsible tools) so Trip details doesn't fade into
   the background the way a bare bordered accordion does. */
.trip-info-panel {
  border: 1px solid var(--line);
  border-left: 4px solid var(--delft-600);
  background: var(--paper-raised);
  box-shadow: 0 1px 3px rgba(18,71,84,0.08);
}

.trip-info-panel summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

/* Chevron on the far right, same rotate-on-open behaviour as every other
   accordion in the app (.info-card, .category-accordion) — Trip details
   used to have no chevron at all, so a test user read the header as a
   plain, static title rather than something to tap. */
.trip-info-panel[open] .trip-info-chevron {
  transform: rotate(90deg);
}

.trip-info-icon {
  display: inline-flex;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.trip-info-icon svg {
  width: 100%;
  height: 100%;
}

.trip-info-doc-attached {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 10px;
  margin-top: 8px;
  font-size: 0.85rem;
}

.trip-info-doc-name {
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--ink);
}

.trip-info-doc-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.trip-info-doc-action {
  background: none;
  border: none;
  padding: 0;
  color: var(--orange-600);
  font-size: 0.85rem;
  font-family: inherit;
  cursor: pointer;
  text-decoration: underline;
}

/* ---------------------------------------------------------------
   Trip details — in-app document preview overlay
   --------------------------------------------------------------- */
.trip-preview-overlay {
  position: fixed;
  inset: 0;
  background: rgba(11, 32, 56, 0.72);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 60;
}

.trip-preview-panel {
  background: var(--paper-raised);
  border-radius: var(--radius);
  box-shadow: 0 10px 22px -12px rgba(10,34,41,0.5);
  width: 100%;
  max-width: 520px;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.trip-preview-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
}

.trip-preview-name {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--teal-900);
  overflow-wrap: anywhere;
}

.trip-preview-close {
  background: none;
  border: 1px solid var(--line);
  border-radius: 6px;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  cursor: pointer;
  color: var(--ink);
}

.trip-preview-body {
  flex: 1;
  min-height: 0;
  overflow: auto;
  background: var(--teal-100);
  display: flex;
  align-items: center;
  justify-content: center;
}

.trip-preview-body iframe {
  width: 100%;
  height: 70vh;
  border: none;
  background: var(--card);
}

.trip-preview-body img {
  max-width: 100%;
  max-height: 70vh;
  display: block;
  margin: auto;
}

/* ---- Trip card (UX-sprint 2) ---------------------------------------------
   Wraps the trip switcher (chips + rename/delete/add) in a labelled card so
   first-time users see immediately what "trip" means in this app, instead of
   bare chips and buttons floating in the layout. Uses the Delft palette to
   match the rest of the app; the inner .trip-tabs / .trip-tab keep their
   existing teal chip styling so the switcher itself looks unchanged.        */
.trip-card {
  margin: 8px 16px 16px;
  padding: 12px 14px 10px;
  border-radius: 14px;
  background: var(--paper-raised, var(--card));
  border: 1px solid rgba(31, 78, 125, 0.15);
  box-shadow: 0 2px 6px -3px rgba(11, 32, 56, 0.12);
}

.trip-card-head {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
}

.trip-card-icon {
  font-size: 15px;
  line-height: 1;
}

.trip-card-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--delft-700, var(--topbar-bg));
}

.trip-card-body {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  justify-content: space-between;
}

.trip-card-body .trip-tabs {
  margin-bottom: 0;
  flex: 1 1 auto;
  min-width: 0;
}

.trip-card-actions {
  display: inline-flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 0;
}

.trip-card-iconbtn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 11px;
  border-radius: 999px;
  border: 1px solid rgba(31, 78, 125, 0.2);
  background: transparent;
  color: var(--delft-800, var(--topbar-bg));
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}

.trip-card-iconbtn:hover,
.trip-card-iconbtn:focus-visible {
  background: rgba(31, 78, 125, 0.06);
  border-color: rgba(31, 78, 125, 0.4);
  outline: none;
}

.trip-card-iconbtn-accent {
  color: var(--orange-600, var(--accent));
  border-color: rgba(236, 109, 28, 0.35);
}

.trip-card-iconbtn-accent:hover,
.trip-card-iconbtn-accent:focus-visible {
  background: rgba(236, 109, 28, 0.08);
  border-color: rgba(236, 109, 28, 0.6);
  color: var(--orange-600, var(--accent));
}

.trip-card-iconbtn-danger {
  color: var(--err);
  border-color: rgba(179, 65, 65, 0.3);
}

.trip-card-iconbtn-danger:hover,
.trip-card-iconbtn-danger:focus-visible {
  background: rgba(179, 65, 65, 0.06);
  border-color: rgba(179, 65, 65, 0.5);
  color: var(--err);
}

.trip-card-iconbtn-text {
  display: inline;
}

.trip-card-help {
  margin: 10px 0 0;
  font-size: 12px;
  line-height: 1.45;
  color: var(--ink-soft, #6a7683);
}

.trip-card-maxhint {
  margin-top: 8px;
  color: var(--orange-600, var(--accent));
}

.trip-card-form {
  margin-top: 12px;
}

/* Narrow phones: keep the icons but drop the text labels so the row stays
   on one line under the chip. Below ~360 px the "Rename / Delete / New trip"
   labels next to the icons would otherwise cause the row to wrap awkwardly
   inside the card padding. */
@media (max-width: 360px) {
  .trip-card-iconbtn-text {
    display: none;
  }
  .trip-card-iconbtn {
    padding: 7px 9px;
  }
}

/* ---- Planner-hero (dag-planner promise-copy — UX-sprint 1) ---------------
   The dag-planner backend isn't built yet; this hero sits directly under the
   emergency banner and above the module tiles. The gradient uses the Delft
   palette + the NL-oranje accent (Polderstijl). The CTA is a placeholder that
   opens the "coming soon" dialog below.                                       */
.planner-hero {
  position: relative;
  margin: 16px 16px 20px;
  padding: 20px 20px 22px;
  border-radius: 18px;
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(236, 109, 28, 0.18), transparent 55%),
    linear-gradient(135deg, var(--sky-bot) 0%, var(--sky-mid) 55%, var(--sky-top) 100%);
  color: var(--ink-on-chrome);
  box-shadow: 0 10px 24px -12px rgba(11, 32, 56, 0.55);
  overflow: hidden;
}

.planner-hero::after {
  /* Soft light in the top-right corner — adds depth without being decorative. */
  content: "";
  position: absolute;
  top: -40px;
  right: -40px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.14), transparent 70%);
  pointer-events: none;
}

.planner-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 8px;
}

.planner-hero-sparkle {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--orange-500);
  box-shadow: 0 0 10px rgba(236, 109, 28, 0.9);
}

.planner-hero-title {
  margin: 0 0 6px;
  font-size: 22px;
  line-height: 1.25;
  font-weight: 700;
  color: var(--ink-on-chrome);
}

.planner-hero-sub {
  margin: 0 0 16px;
  font-size: 14px;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.85);
}

.planner-hero-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 18px;
  border: none;
  border-radius: 999px;
  background: var(--orange-500);
  color: var(--ink-on-chrome);
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 6px 14px -4px rgba(184, 79, 12, 0.55);
  transition: transform 120ms ease, background 120ms ease, box-shadow 120ms ease;
}

.planner-hero-cta:hover,
.planner-hero-cta:focus-visible {
  background: var(--orange-600);
  transform: translateY(-1px);
  box-shadow: 0 8px 18px -4px rgba(184, 79, 12, 0.65);
  outline: none;
}

.planner-hero-cta:active {
  transform: translateY(0);
  box-shadow: 0 4px 10px -4px rgba(184, 79, 12, 0.55);
}

.planner-hero-arrow {
  display: inline-block;
  transition: transform 120ms ease;
}

.planner-hero-cta:hover .planner-hero-arrow {
  transform: translateX(3px);
}

/* ---- Planner "coming soon" dialog ---------------------------------------- */
.planner-soon-dialog {
  border: none;
  border-radius: 16px;
  padding: 0;
  max-width: 340px;
  width: calc(100% - 32px);
  background: var(--paper-raised, var(--card));
  color: var(--ink, var(--ink));
  box-shadow: 0 24px 48px -12px rgba(11, 32, 56, 0.45);
}

.planner-soon-dialog::backdrop {
  background: rgba(11, 32, 56, 0.55);
  backdrop-filter: blur(2px);
}

.planner-soon-content {
  padding: 22px 22px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.planner-soon-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--delft-100, var(--line));
}

.planner-soon-icon svg {
  width: 24px;
  height: 24px;
}

.planner-soon-dialog h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: var(--delft-800, var(--topbar-bg));
}

.planner-soon-dialog p {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-muted, var(--ink-secondary));
}

.planner-soon-close {
  align-self: flex-end;
  margin-top: 4px;
  padding: 10px 18px;
  border: none;
  border-radius: 999px;
  background: var(--delft-700, var(--topbar-bg));
  color: var(--ink-on-chrome);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 120ms ease;
}

.planner-soon-close:hover,
.planner-soon-close:focus-visible {
  background: var(--delft-800, var(--topbar-bg));
  outline: none;
}

/* ─────────── F6b: Calculator sneltoets-chips + modal-dialogs (2026-10-11) ──────────── */

/* Gruttje intro-strip (scope sectie 10) [P-10: grutto-broedborst] */
.calc-gruttje-strip {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--cream);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: var(--r-sm, 6px);
  padding: 8px 12px;
  margin: 0 0 12px;
  font-size: 0.88rem;
  color: var(--ink);
}
.calc-gruttje-icon { font-size: 1.1rem; }
.calc-gruttje-text { flex: 1; }
.calc-gruttje-dismiss {
  background: none;
  border: none;
  color: var(--ink-secondary);
  font-size: 1rem;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: var(--r-sm, 6px);
}
.calc-gruttje-dismiss:hover { background: rgba(0,0,0,0.05); color: var(--ink); }

/* 4-chip sneltoets-row — scrollable rechts, fade-right suggereert overflow */
.calc-shortcut-row {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 8px 2px 10px;
  margin: 0 0 10px;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(to right, black 85%, transparent 100%);
  mask-image: linear-gradient(to right, black 85%, transparent 100%);
}
.calc-shortcut-row::-webkit-scrollbar { display: none; }

.calc-shortcut-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  padding: 8px 14px;
  background: var(--card);
  border: 1.5px solid var(--line-strong, var(--line));
  border-radius: 999px;
  font: 500 0.85rem/1 "IBM Plex Sans", system-ui, sans-serif;
  color: var(--ink);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
  min-height: 36px;
}
.calc-shortcut-chip:hover,
.calc-shortcut-chip:focus-visible {
  background: var(--accent-soft, #fde8db);
  border-color: var(--accent);
  outline: none;
}
.calc-shortcut-chip:active { transform: scale(0.97); }
.calc-shortcut-chip .chip-icon { font-size: 1rem; line-height: 1; }
.calc-shortcut-chip .chip-label { line-height: 1; }

/* Modal-dialogs voor sneltoetsen [P-10: Polderstijl Swiss — ingetogen frame] */
.calc-shortcut-dialog {
  border: 1.5px solid var(--line-strong, var(--line));
  border-radius: var(--r-lg, 12px);
  padding: 0;
  max-width: 420px;
  width: calc(100% - 32px);
  background: var(--card);
  color: var(--ink);
  box-shadow: 0 20px 60px -20px rgba(0,0,0,0.3);
}
.calc-shortcut-dialog::backdrop {
  background: rgba(10, 20, 30, 0.5);
  backdrop-filter: blur(2px);
}
.calc-shortcut-form {
  padding: 16px 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
}
.dlg-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
  margin: 0 0 4px;
}
.dlg-header h3 {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.25;
}
.dlg-close {
  background: none;
  border: none;
  font-size: 1.15rem;
  color: var(--ink-secondary);
  cursor: pointer;
  padding: 4px 8px;
  border-radius: var(--r-sm, 6px);
  flex-shrink: 0;
}
.dlg-close:hover { background: rgba(0,0,0,0.06); color: var(--ink); }

/* VAT-terug eligibility checklist */
.vat-eligibility {
  padding: 10px 12px;
  background: var(--cream, #f5ede1);
  border-radius: var(--r-sm, 6px);
  margin: 6px 0;
}
.vat-check {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  font-size: 0.88rem;
  cursor: pointer;
}
.vat-check input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
  flex-shrink: 0;
}
.info-link {
  color: var(--accent);
  text-decoration: underline;
  font-weight: 500;
}

/* ─────────── F6d.1: 2 primary tegels + Meer-sheet (2026-10-11) ──────────── */

/* 2-tegel grid — exact 2 kolommen, royaal */
.tile-grid-primary {
  grid-template-columns: 1fr 1fr !important;
  gap: 12px;
  margin-bottom: 10px;
}

/* Meer-knop — subtiele chip onder tegels */
.more-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 12px 16px;
  background: var(--card);
  color: var(--ink);
  border: 1.5px dashed var(--line-strong, var(--line));
  border-radius: var(--r-md, 10px);
  font: 500 0.9rem/1 "IBM Plex Sans", system-ui, sans-serif;
  cursor: pointer;
  margin-bottom: 12px;
  transition: background 0.1s ease, border-color 0.1s ease;
}

.more-btn:hover,
.more-btn:focus-visible {
  background: var(--cream);
  border-color: var(--accent);
  color: var(--accent);
  outline: none;
}

.more-btn-icon {
  font-size: 1.1rem;
  line-height: 1;
  letter-spacing: -1px;
}

.more-btn-arrow {
  color: var(--ink-tertiary, var(--ink-secondary));
  font-size: 0.9rem;
}

.more-btn:hover .more-btn-arrow { color: var(--accent); }

/* Meer-sheet bottom-sheet dialog */
.more-sheet-dialog {
  border: 1.5px solid var(--line-strong, var(--line));
  border-radius: var(--r-lg, 12px) var(--r-lg, 12px) 0 0;
  padding: 0;
  max-width: 480px;
  width: 100%;
  background: var(--card);
  color: var(--ink);
  box-shadow: 0 -4px 24px -8px rgba(0,0,0,0.2);
  /* Positie: op mobile = bottom-sheet, op desktop = center */
  margin: 0 auto;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  top: auto;
  max-height: 85vh;
}

@media (min-width: 600px) {
  .more-sheet-dialog {
    position: fixed;
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
    border-radius: var(--r-lg, 12px);
    max-width: 480px;
  }
}

.more-sheet-dialog::backdrop {
  background: rgba(10, 20, 30, 0.5);
  backdrop-filter: blur(2px);
}

.more-sheet-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
}

.more-sheet-header h3 {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
}

.more-sheet-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  padding: 16px 18px 22px;
}

.more-sheet-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 14px;
  background: var(--card);
  color: var(--ink);
  border: 1.5px solid var(--line);
  border-radius: var(--r-md, 10px);
  font: 500 0.9rem/1.2 "IBM Plex Sans", system-ui, sans-serif;
  cursor: pointer;
  transition: background 0.1s ease, border-color 0.1s ease, transform 0.1s ease;
  min-height: 72px;
  text-align: left;
}

.more-sheet-tile:hover,
.more-sheet-tile:focus-visible {
  background: var(--cream);
  border-color: var(--accent);
  outline: none;
  transform: translateY(-1px);
}

.more-sheet-tile:active { transform: translateY(0); }

.more-sheet-icon {
  font-size: 1.5rem;
  line-height: 1;
}

.more-sheet-tile-disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.more-sheet-tile-disabled:hover {
  background: var(--card);
  border-color: var(--line);
  transform: none;
}

.more-sheet-coming {
  position: absolute;
  top: 8px;
  right: 10px;
  font-size: 0.65rem;
  font-weight: 500;
  color: var(--ink-tertiary, var(--ink-secondary));
  text-transform: uppercase;
  letter-spacing: 0.08em;
  background: var(--cream);
  padding: 2px 6px;
  border-radius: 999px;
}

/* ─────────── F6d.2: Nu-blok + Hints-balk op home (2026-10-11) ──────────── */

/* Nu-blok [P-10: Polderstijl Swiss — ingetogen, maar prominent plaats] */
.now-block {
  background: linear-gradient(135deg, var(--topbar-bg), var(--info));
  color: var(--ink-on-chrome);
  border-radius: var(--r-lg, 12px);
  padding: 18px 20px 20px;
  margin-bottom: 14px;
  box-shadow: var(--sh-md, 0 4px 12px -4px rgba(0,0,0,0.15));
}

.now-eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  opacity: 0.9;
}

.now-time {
  font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  font-feature-settings: "tnum" 1;
}

.now-day::before { content: "·"; margin-right: 6px; opacity: 0.7; }

.now-title {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--ink-on-chrome);
  margin: 0 0 6px;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.now-sub {
  font-size: 0.9rem;
  color: var(--ink-on-chrome);
  opacity: 0.88;
  margin: 0 0 14px;
  line-height: 1.4;
}

.now-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  background: var(--accent);
  color: var(--ink-on-chrome);
  border: none;
  border-radius: 999px;
  font: 600 0.9rem/1 "IBM Plex Sans", system-ui, sans-serif;
  cursor: pointer;
  transition: transform 0.1s ease, background 0.1s ease;
  min-height: 40px;
}

.now-cta:hover,
.now-cta:focus-visible {
  background: var(--accent-strong, var(--accent));
  transform: translateY(-1px);
  outline: none;
}

.now-cta:active { transform: translateY(0); }

/* Hints-balk — subtiele kaart boven planner-hero bij pre-trip ≤14d */
.hints-strip {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 14px;
  background: var(--cream);
  color: var(--ink);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: var(--r-md, 10px);
  font: 500 0.88rem/1.3 "IBM Plex Sans", system-ui, sans-serif;
  cursor: pointer;
  transition: background 0.1s ease, border-color 0.1s ease;
  margin-bottom: 10px;
  text-align: left;
}

.hints-strip:hover,
.hints-strip:focus-visible {
  background: var(--accent-soft, #fde8db);
  outline: none;
}

.hints-icon { font-size: 1rem; flex-shrink: 0; }
.hints-text { flex: 1; }
.hints-arrow {
  color: var(--accent);
  font-weight: 700;
}

/* Trip-dates editor sectie (binnen view-trip-details) */
#tripStartDateInput[disabled],
#tripEndDateInput[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
  background: var(--cream);
}

/* ─────────── F6f: Tips-banner feature-discovery (2026-10-11) ──────────── */

.tips-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 14px;
  background: var(--info-soft, var(--cream));
  color: var(--ink);
  border: 1px solid var(--line);
  border-left: 3px solid var(--info);
  border-radius: var(--r-md, 10px);
  font: 500 0.88rem/1.3 "IBM Plex Sans", system-ui, sans-serif;
  cursor: pointer;
  transition: background 0.1s ease, border-color 0.1s ease;
  margin-bottom: 10px;
  text-align: left;
}

.tips-banner:hover,
.tips-banner:focus-visible {
  background: var(--card);
  border-color: var(--info);
  outline: none;
}

.tips-banner-icon {
  font-size: 1.05rem;
  flex-shrink: 0;
}

.tips-banner-text {
  flex: 1;
  color: var(--ink);
}

.tips-banner-dismiss {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  font-size: 0.85rem;
  color: var(--ink-tertiary, var(--ink-secondary));
  background: transparent;
  border-radius: 999px;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.1s ease;
}

.tips-banner-dismiss:hover {
  background: rgba(0,0,0,0.08);
  color: var(--ink);
}

/* ─────────── S1a: Splash Gruttje P2 Flying (2026-10-11) ──────────── */

/* Gruttje-container op splash — grote ruimte voor renderGruttjeScene output.
   [P-10: grutto-trekvogel] migrerende vogel = "finding my feathers" bij app-load. */
.splash-gruttje {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 160px;
  height: 160px;
  font-size: 72px;         /* fallback emoji 🐦 size als TGGruttje niet laadt */
  line-height: 1;
  margin-bottom: 8px;
}

.splash-gruttje svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Oude #splashScreen svg selector (voor herenhuizen) blijft bestaan maar niet relevant.
   De body hieronder voor .splash-name/.splash-sub blijft intact. */


/* ─────────── S1b: Terugblik-blok post-trip (2026-10-11) ──────────── */

.terugblik-block {
  background: linear-gradient(135deg, var(--card-elevated, var(--cream)), var(--cream));
  color: var(--ink);
  border: 1px solid var(--line);
  border-left: 4px solid var(--ok, #2e8b57);
  border-radius: var(--r-lg, 12px);
  padding: 18px 20px 20px;
  margin-bottom: 14px;
}

.terugblik-eyebrow {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ok, #2e8b57);
  margin: 0 0 6px;
}

.terugblik-title {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 6px;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.terugblik-metrics {
  font-size: 0.9rem;
  color: var(--ink-secondary);
  margin: 0 0 14px;
  line-height: 1.4;
  font-feature-settings: "tnum" 1;
}

.terugblik-metrics strong { color: var(--ink); font-weight: 600; }

.terugblik-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  background: var(--ok, #2e8b57);
  color: #fff;
  border: none;
  border-radius: 999px;
  font: 600 0.9rem/1 "IBM Plex Sans", system-ui, sans-serif;
  cursor: pointer;
  transition: transform 0.1s ease, background 0.1s ease;
  min-height: 40px;
}

.terugblik-cta:hover,
.terugblik-cta:focus-visible {
  transform: translateY(-1px);
  outline: none;
}

.terugblik-cta:active { transform: translateY(0); }

/* ═════════════════════════════════════════════════════════════
   S2 — Zero-state landing + 3-vragen intake wizard (2026-10-12)
   Scope: scope/zero-state.md v1.1
   ═════════════════════════════════════════════════════════════ */

/* ─── S2a: Zero-state view (first-open) ─── */
.zerostate-view {
  padding: 24px 20px 32px;
  min-height: calc(100vh - 160px);
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.zerostate-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  padding-top: 20px;
}

.zerostate-gruttje {
  width: 220px;
  height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 96px;
  line-height: 1;
  margin-bottom: 4px;
}
.zerostate-gruttje svg { width: 100%; height: 100%; display: block; }

.zerostate-title {
  margin: 0;
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.2;
}

.zerostate-sub {
  margin: 0 0 8px;
  font-size: 1.1rem;
  color: var(--ink-secondary);
  font-weight: 500;
}

.zerostate-body {
  margin: 4px 0 0;
  font-size: 0.95rem;
  color: var(--ink-secondary);
  line-height: 1.5;
  max-width: 320px;
}

.zerostate-ctas {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 0 8px;
}

.zerostate-cta-primary {
  background: var(--accent);
  color: #ffffff;
  border: none;
  border-radius: 999px;
  padding: 14px 28px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  min-width: 240px;
  box-shadow: 0 4px 12px rgba(199, 87, 43, 0.25);
  transition: transform 80ms ease, box-shadow 80ms ease;
}
.zerostate-cta-primary:hover,
.zerostate-cta-primary:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(199, 87, 43, 0.3);
}
.zerostate-cta-primary:active { transform: translateY(0); }

.zerostate-cta-secondary {
  background: transparent;
  color: var(--accent);
  border: none;
  font-size: 0.95rem;
  cursor: pointer;
  padding: 6px 12px;
}
.zerostate-cta-secondary:hover,
.zerostate-cta-secondary:focus-visible {
  text-decoration: underline;
}

.zerostate-trust {
  margin: 8px 0 0;
  font-size: 0.82rem;
  color: var(--ink-tertiary);
  text-align: center;
}

.zerostate-feature-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  padding: 20px 10px;
  border-top: 1px solid var(--line);
  margin-top: auto;
}

.zerostate-feature-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  background: transparent;
  border: none;
  padding: 10px 4px;
  cursor: pointer;
  border-radius: 10px;
  transition: background 80ms ease;
}
.zerostate-feature-icon:hover,
.zerostate-feature-icon:focus-visible {
  background: var(--line);
}

.zerostate-feature-emoji {
  font-size: 24px;
  line-height: 1;
}

.zerostate-feature-label {
  font-size: 0.78rem;
  color: var(--ink-secondary);
  font-weight: 500;
}

.zerostate-feature-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--ink);
  color: var(--bg);
  padding: 10px 18px;
  border-radius: 999px;
  font-size: 0.88rem;
  box-shadow: var(--sh-lg);
  z-index: 100;
  max-width: 90vw;
  text-align: center;
}

/* ─── S2b: Intake wizard view ─── */
.intake-view {
  padding: 16px 20px 24px;
  min-height: calc(100vh - 160px);
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.intake-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.intake-skip {
  background: transparent;
  color: var(--ink-secondary);
  border: none;
  font-size: 0.9rem;
  cursor: pointer;
  padding: 6px 10px;
}

.intake-progress {
  display: flex;
  align-items: center;
  gap: 6px;
}

.intake-progress-count {
  font-size: 0.82rem;
  color: var(--ink-tertiary);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}

.intake-step {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.intake-title {
  margin: 0;
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.25;
}

.intake-sub {
  margin: 0 0 8px;
  font-size: 0.95rem;
  color: var(--ink-secondary);
}

.intake-search {
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid var(--line-strong);
  border-radius: 12px;
  background: var(--card);
  color: var(--ink);
  font-size: 1rem;
  font-family: inherit;
}
.intake-search:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.intake-chips-label {
  margin: 10px 0 4px;
  font-size: 0.85rem;
  color: var(--ink-tertiary);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.intake-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.intake-chip {
  background: var(--card);
  color: var(--ink);
  border: 1.5px solid var(--line-strong);
  border-radius: 999px;
  padding: 10px 16px;
  font-size: 0.95rem;
  cursor: pointer;
  transition: border-color 80ms ease, background 80ms ease, color 80ms ease;
}
.intake-chip:hover,
.intake-chip:focus-visible {
  border-color: var(--accent);
}
.intake-chip.is-selected {
  background: var(--accent);
  color: #ffffff;
  border-color: var(--accent);
}

.intake-dates {
  display: flex;
  gap: 12px;
  margin: 8px 0 12px;
}
.intake-date-field {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.85rem;
  color: var(--ink-secondary);
}
.intake-date-field input {
  padding: 10px 12px;
  border: 1.5px solid var(--line-strong);
  border-radius: 10px;
  background: var(--card);
  color: var(--ink);
  font-family: inherit;
  font-size: 0.95rem;
}

.intake-skip-step {
  background: transparent;
  color: var(--accent);
  border: none;
  font-size: 0.88rem;
  cursor: pointer;
  padding: 6px 0;
  text-align: left;
  align-self: flex-start;
}
.intake-skip-step:hover { text-decoration: underline; }

.intake-hint {
  margin: 6px 0 0;
  font-size: 0.85rem;
  color: var(--err);
}

.intake-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: auto;
  padding-top: 20px;
  gap: 12px;
}

.intake-back-btn {
  background: transparent;
  color: var(--ink-secondary);
  border: none;
  font-size: 0.95rem;
  cursor: pointer;
  padding: 10px 14px;
}

.intake-next-btn {
  background: var(--accent);
  color: #ffffff;
  border: none;
  border-radius: 999px;
  padding: 12px 24px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  min-width: 160px;
  margin-left: auto;
  box-shadow: 0 3px 10px rgba(199, 87, 43, 0.2);
}
.intake-next-btn:disabled {
  background: var(--line-strong);
  color: var(--ink-tertiary);
  cursor: not-allowed;
  box-shadow: none;
}

/* ─── S2c: Universele highlights-strip (Info first-visit, no trip) ─── */
.info-universal-highlights {
  margin: 0 0 20px;
  padding: 16px;
  background: var(--accent-soft);
  border-radius: 14px;
  border: 1px solid var(--line);
}

.info-universal-head {
  margin: 0 0 12px;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--accent-ink);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.info-universal-row {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.info-universal-card {
  background: var(--card);
  border-radius: 10px;
  padding: 12px 14px;
  display: grid;
  grid-template-columns: 36px 1fr;
  grid-template-rows: auto auto;
  gap: 2px 10px;
  box-shadow: var(--sh-sm);
}

.info-universal-emoji {
  grid-row: 1 / span 2;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
}

.info-universal-card strong {
  font-size: 0.95rem;
  color: var(--ink);
}
.info-universal-card p {
  margin: 0;
  font-size: 0.85rem;
  color: var(--ink-secondary);
  line-height: 1.4;
}

/* ═════════════════════════════════════════════════════════════
   S3 — Topbar weather-badge + multi-trip chip badges (2026-10-12)
   Scope: scope/home.md v2 sectie 3 + 6
   ═════════════════════════════════════════════════════════════ */

/* Weather badge in topbar */
.weather-badge {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: var(--ink-on-chrome);
  border-radius: 999px;
  padding: 5px 10px 5px 8px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.82rem;
  font-weight: 500;
  cursor: pointer;
  margin-right: 8px;
  transition: background 80ms ease;
}
.weather-badge:hover,
.weather-badge:focus-visible {
  background: rgba(255, 255, 255, 0.18);
}
.weather-badge-icon { font-size: 14px; line-height: 1; }
.weather-badge-temp { font-weight: 600; }

/* Coming-sheet toast */
.weather-coming-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--ink);
  color: var(--bg);
  padding: 10px 18px;
  border-radius: 999px;
  font-size: 0.88rem;
  box-shadow: var(--sh-lg);
  z-index: 100;
  max-width: 90vw;
  text-align: center;
}

/* Trip-tab phase badge (DAG X / in N d / afgelopen) */
.trip-tab-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  background: var(--accent);
  color: #ffffff;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  vertical-align: middle;
}
.trip-tab-badge.is-pre {
  background: var(--info);
  color: #ffffff;
}
.trip-tab-badge.is-post {
  background: var(--ok);
  color: #ffffff;
}

/* ═════════════════════════════════════════════════════════════
   S4 — Dag-plan view (reisplanner MVP-scaffold, 2026-10-12)
   Scope: scope/reisplanner.md v9
   ═════════════════════════════════════════════════════════════ */

.dayplan-view { padding: 16px 20px 32px; }

.dayplan-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.dayplan-sample-label {
  margin: 0;
  padding: 4px 10px;
  font-size: 0.75rem;
  color: var(--warn-ink);
  background: var(--warn-soft);
  border-radius: 999px;
  font-weight: 600;
}

.dayplan-mode-toggle {
  display: inline-flex;
  background: var(--card);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 2px;
}
.dayplan-mode-btn {
  background: transparent;
  color: var(--ink-secondary);
  border: none;
  padding: 4px 12px;
  font-size: 0.82rem;
  border-radius: 999px;
  cursor: pointer;
  transition: all 80ms ease;
}
.dayplan-mode-btn.is-active {
  background: var(--accent);
  color: #ffffff;
  font-weight: 600;
}

/* Anticipation strip 3 varianten */
.anticipation-strip {
  margin: 12px 0;
  padding: 12px 14px;
  border-radius: 10px;
  font-size: 0.9rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 10px;
}
.anticipation-strip.is-warn {
  background: var(--warn-soft);
  color: var(--warn-ink);
  border-left: 4px solid var(--warn);
}
.anticipation-strip.is-info {
  background: var(--info-soft);
  color: var(--info-ink);
  border-left: 4px solid var(--info);
}
.anticipation-strip.is-ok {
  background: var(--ok-soft);
  color: var(--ok-ink);
  border-left: 4px solid var(--ok);
}

.anticipation-strip button {
  background: transparent;
  border: none;
  color: inherit;
  text-decoration: underline;
  cursor: pointer;
  font-size: 0.9rem;
  padding: 0;
  margin-left: auto;
}

/* Gruttje intro */
.dayplan-gruttje-intro {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 12px 0;
  padding: 10px 12px;
  background: var(--cream);
  border-radius: 10px;
}
.dayplan-gruttje-emoji { font-size: 20px; flex-shrink: 0; }
.dayplan-gruttje-intro p { margin: 0; font-size: 0.95rem; color: var(--ink); line-height: 1.45; font-style: italic; }

.dayplan-price-disclaimer {
  margin: 8px 0 16px;
  font-size: 0.78rem;
  color: var(--ink-tertiary);
  text-align: center;
}

/* Journey list */
.dayplan-journey {
  list-style: none;
  padding: 0;
  margin: 0;
  position: relative;
}

.dayplan-journey::before {
  content: "";
  position: absolute;
  left: 20px;
  top: 20px;
  bottom: 20px;
  width: 0;
  border-left: 2px dashed var(--line-strong);
  z-index: 0;
}

.dayplan-stop {
  display: flex;
  gap: 12px;
  margin-bottom: 20px;
  position: relative;
  z-index: 1;
}

.dayplan-stop-marker {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  background: var(--card);
  border: 2px solid var(--accent);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}

.dayplan-stop-body {
  flex: 1;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px;
  cursor: pointer;
  transition: border-color 80ms ease, box-shadow 80ms ease;
}
.dayplan-stop-body:hover {
  border-color: var(--accent);
  box-shadow: var(--sh-md);
}

.dayplan-stop-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}
.dayplan-stop-name { font-size: 1.05rem; font-weight: 700; color: var(--ink); }
.dayplan-stop-time { font-size: 0.82rem; color: var(--ink-secondary); font-weight: 500; }
.dayplan-stop-category { font-size: 0.78rem; color: var(--ink-tertiary); text-transform: uppercase; letter-spacing: 0.03em; }

.dayplan-stop-known {
  margin: 6px 0;
  font-size: 0.9rem;
  color: var(--ink-secondary);
  line-height: 1.5;
}

.dayplan-stop-tip {
  margin: 8px 0;
  padding: 8px 10px;
  background: var(--info-soft);
  color: var(--info-ink);
  border-left: 3px solid var(--info);
  border-radius: 4px;
  font-size: 0.85rem;
  line-height: 1.4;
}

.dayplan-stop-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
  flex-wrap: wrap;
}
.dayplan-stop-price { font-size: 0.9rem; color: var(--ink); font-weight: 600; }

.dayplan-badges { display: flex; gap: 6px; flex-wrap: wrap; }
.dayplan-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.dayplan-badge.badge-prebook { background: var(--warn-soft); color: var(--warn-ink); }
.dayplan-badge.badge-booked { background: var(--ok-soft); color: var(--ok-ink); }
.dayplan-badge.badge-walkin { background: var(--line); color: var(--ink-secondary); }
.dayplan-badge.badge-timedslot { background: var(--info-soft); color: var(--info-ink); }

/* Compact mode: hide bekend-om + tip */
.dayplan-view.is-compact .dayplan-stop-known,
.dayplan-view.is-compact .dayplan-stop-tip {
  display: none;
}

/* Action bar */
.dayplan-actionbar {
  margin-top: 20px;
  padding: 12px;
  border-top: 1px solid var(--line);
  text-align: center;
}
.dayplan-prebook-btn {
  background: var(--accent);
  color: #ffffff;
  border: none;
  border-radius: 999px;
  padding: 12px 24px;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  gap: 10px;
  align-items: center;
}
.dayplan-prebook-count {
  background: rgba(255, 255, 255, 0.22);
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.82rem;
}

/* Pre-booking Summary bottom-sheet */
.prebook-sheet {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0;
  width: 100%;
  max-width: 100%;
  border: none;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  background: var(--card);
  color: var(--ink);
  padding: 0;
  box-shadow: var(--sh-sheet);
}
.prebook-sheet::backdrop { background: rgba(10, 20, 30, 0.5); }
.prebook-sheet[open] { display: flex; flex-direction: column; }

.prebook-sheet-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
}
.prebook-sheet-header h3 { margin: 0; font-size: 1.05rem; }
.prebook-sheet-body { padding: 16px 18px 24px; max-height: 70vh; overflow-y: auto; }

.prebook-progress-bar {
  height: 8px;
  background: var(--line);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 6px;
}
.prebook-progress-fill {
  height: 100%;
  background: var(--accent);
  width: 0;
  transition: width 200ms ease;
}
.prebook-progress-text { margin: 0 0 14px; font-size: 0.85rem; color: var(--ink-secondary); }

.prebook-list { list-style: none; padding: 0; margin: 0 0 12px; }
.prebook-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}
.prebook-list li:last-child { border-bottom: none; }
.prebook-list input[type="checkbox"] {
  width: 20px;
  height: 20px;
  accent-color: var(--accent);
  cursor: pointer;
}
.prebook-item-name { flex: 1; font-size: 0.95rem; color: var(--ink); }
.prebook-item-link {
  color: var(--accent);
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 600;
}
.prebook-item-link:hover { text-decoration: underline; }

.prebook-celebration {
  text-align: center;
  padding: 12px;
  background: var(--ok-soft);
  color: var(--ok-ink);
  border-radius: 10px;
  font-weight: 600;
  margin: 10px 0;
}

.prebook-footer {
  margin: 12px 0 0;
  text-align: center;
  font-size: 0.78rem;
  color: var(--ink-tertiary);
  font-style: italic;
}

/* POI-detail sheet */
.poi-detail-sheet {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0;
  width: 100%;
  max-width: 100%;
  border: none;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  background: var(--card);
  color: var(--ink);
  padding: 0;
  max-height: 90vh;
}
.poi-detail-sheet::backdrop { background: rgba(10, 20, 30, 0.5); }
.poi-detail-sheet[open] { display: flex; flex-direction: column; }

.poi-detail-header {
  display: flex;
  align-items: center;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  gap: 10px;
}
.poi-detail-emoji { font-size: 28px; flex: 1; }
.poi-detail-share, .poi-detail-close {
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 20px;
  color: var(--ink-tertiary);
  padding: 6px 10px;
}
.poi-detail-share:hover, .poi-detail-close:hover { color: var(--ink); }

.poi-detail-body { padding: 16px 18px 24px; overflow-y: auto; }

.poi-detail-category {
  margin: 0 0 4px;
  font-size: 0.78rem;
  color: var(--ink-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
}
.poi-detail-title { margin: 0 0 12px; font-size: 1.3rem; font-weight: 700; }

.poi-detail-badges { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }

.poi-detail-section-head {
  margin: 16px 0 6px;
  font-size: 0.85rem;
  color: var(--ink-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 700;
}

.poi-detail-known { margin: 0; font-size: 0.95rem; color: var(--ink); line-height: 1.5; }
.poi-detail-tip {
  margin: 0;
  padding: 10px 12px;
  background: var(--info-soft);
  color: var(--info-ink);
  border-left: 3px solid var(--info);
  border-radius: 4px;
  font-size: 0.9rem;
  line-height: 1.5;
}
.poi-detail-price { margin: 16px 0 10px; font-size: 1rem; font-weight: 600; color: var(--ink); }

.poi-detail-book {
  display: inline-block;
  background: var(--accent);
  color: #ffffff;
  padding: 12px 20px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 600;
  margin-bottom: 8px;
}
.poi-detail-book:hover { background: var(--accent-ink); }

.poi-detail-nomiddleman {
  margin: 4px 0 10px;
  font-size: 0.78rem;
  color: var(--ink-tertiary);
  font-style: italic;
}

.poi-detail-verified {
  margin: 14px 0 0;
  font-size: 0.75rem;
  color: var(--ink-tertiary);
}

/* ═════════════════════════════════════════════════════════════
   S-Settings — Settings view (2026-10-12)
   ═════════════════════════════════════════════════════════════ */

.settings-view { padding: 20px; }

.settings-section {
  background: var(--card);
  border-radius: 14px;
  padding: 16px;
  margin-bottom: 16px;
  border: 1px solid var(--line);
}
.settings-section-data {
  border: 1px solid var(--accent-soft);
}
.settings-section-admin {
  border: 1.5px dashed var(--warn);
  background: var(--warn-soft);
}

.settings-head {
  margin: 0 0 12px;
  font-size: 0.78rem;
  color: var(--ink-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 700;
}

.settings-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}
.settings-row:last-child { border-bottom: none; }

.settings-row-main { flex: 1; min-width: 0; }
.settings-label { font-size: 0.95rem; color: var(--ink); font-weight: 500; }
.settings-sub { margin: 2px 0 4px; font-size: 0.8rem; color: var(--ink-tertiary); }
.settings-status { margin: 2px 0 0; font-size: 0.78rem; color: var(--ink-secondary); font-weight: 500; }

.settings-select {
  padding: 6px 10px;
  background: var(--card);
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  color: var(--ink);
  font-size: 0.9rem;
  font-family: inherit;
  min-width: 120px;
}

.settings-toggle {
  width: 46px;
  height: 26px;
  background: var(--line-strong);
  border: none;
  border-radius: 999px;
  padding: 0;
  position: relative;
  cursor: pointer;
  transition: background 150ms ease;
  flex-shrink: 0;
}
.settings-toggle.is-on { background: var(--ok); }
.settings-toggle-knob {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  background: #ffffff;
  border-radius: 50%;
  transition: transform 150ms ease;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.settings-toggle.is-on .settings-toggle-knob { transform: translateX(20px); }

.settings-intro { margin: 0 0 12px; font-size: 0.88rem; color: var(--ink-secondary); line-height: 1.4; }

.settings-btn {
  display: block;
  width: 100%;
  margin: 8px 0;
  padding: 12px 14px;
  background: var(--accent);
  color: #ffffff;
  border: none;
  border-radius: 999px;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
}
.settings-btn:hover { background: var(--accent-ink); }
.settings-btn-danger {
  background: var(--card);
  color: var(--err);
  border: 1.5px solid var(--err);
}
.settings-btn-danger:hover { background: var(--err-soft); }
.settings-btn:disabled {
  background: var(--line-strong);
  color: var(--ink-tertiary);
  cursor: not-allowed;
  border: none;
}

.settings-link {
  display: block;
  padding: 10px 0;
  color: var(--accent);
  text-decoration: none;
  font-size: 0.95rem;
  border-bottom: 1px solid var(--line);
}
.settings-link:hover { text-decoration: underline; }

.settings-version { margin: 10px 0 4px; font-size: 0.85rem; color: var(--ink-secondary); cursor: pointer; user-select: none; }
.settings-made { margin: 4px 0 0; font-size: 0.82rem; color: var(--ink-tertiary); }

.settings-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--ink);
  color: var(--bg);
  padding: 10px 18px;
  border-radius: 999px;
  font-size: 0.88rem;
  box-shadow: var(--sh-lg);
  z-index: 100;
}

/* Data-delete dialog */
.data-delete-dialog {
  max-width: 420px;
  width: calc(100% - 32px);
  border: 1.5px solid var(--err);
  border-radius: 14px;
  background: var(--card);
  color: var(--ink);
  padding: 20px;
}
.data-delete-dialog::backdrop { background: rgba(10,20,30,0.5); }
.data-delete-dialog h3 { margin: 0 0 10px; font-size: 1.1rem; color: var(--err); }
.data-delete-dialog p { margin: 6px 0; font-size: 0.9rem; }
.data-delete-dialog input {
  display: block;
  width: 100%;
  padding: 10px;
  margin: 10px 0;
  border: 1.5px solid var(--line-strong);
  border-radius: 8px;
  background: var(--card);
  color: var(--ink);
  font-family: inherit;
}
.data-delete-actions { display: flex; gap: 10px; margin-top: 14px; }
.data-delete-actions .settings-btn { margin: 0; }


/* ===================================================
   S2-stap3 rebuild (2026-10-14): Adult/Kid/Baby stepper-cards
   =================================================== */
.intake-travelers {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 4px;
}
.traveler-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
.traveler-card:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-soft);
}
.traveler-info {
  display: flex;
  align-items: center;
  gap: 12px;
}
.traveler-labels {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.traveler-label {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--ink);
}
.traveler-caption {
  font-size: 0.78rem;
  color: var(--ink-secondary);
  font-variant-numeric: tabular-nums;
}
.traveler-stepper {
  display: flex;
  align-items: center;
  gap: 10px;
}
.stepper-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1.5px solid var(--line-strong);
  background: var(--card);
  color: var(--ink);
  font-size: 1.15rem;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  transition: border-color 100ms ease, color 100ms ease, background 100ms ease;
  padding: 0;
  font-family: inherit;
}
.stepper-btn:not(:disabled):hover,
.stepper-btn:not(:disabled):focus-visible {
  border-color: var(--accent);
  color: var(--accent);
  outline: none;
}
.stepper-btn:not(:disabled):active {
  background: var(--accent-soft);
}
.stepper-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}
.stepper-count {
  min-width: 22px;
  text-align: center;
  font-size: 1rem;
  font-weight: 600;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}


/* ===================================================
   HOOG-2 (2026-10-14): Praktische Info — cat-safety rode accent-strook
   per scope/praktische-info.md sectie 1 "Regels & Veiligheid (rode accent-strook)"
   =================================================== */
#cat-safety > summary {
  border-left: 3px solid var(--err);
  padding-left: 10px;
}
#cat-safety > summary .category-title-text {
  color: var(--err);
}


/* ===================================================
   HOOG-3 (2026-10-14): Doelgroep-filter banner Info-tab
   scope/praktische-info.md sectie 6a
   =================================================== */
.origin-banner {
  background: var(--info-soft);
  border: 1px solid color-mix(in srgb, var(--info) 25%, transparent);
  border-left: 3px solid var(--info);
  border-radius: 12px;
  padding: 14px 16px;
  margin: 0 0 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.origin-banner-head {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.origin-banner-icon {
  font-size: 1.15rem;
  line-height: 1.2;
  flex-shrink: 0;
}
.origin-banner-text {
  margin: 0;
  font-size: 0.92rem;
  color: var(--ink);
  line-height: 1.4;
}
.origin-banner-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.origin-chip {
  background: var(--card);
  color: var(--ink);
  border: 1.5px solid var(--line-strong);
  border-radius: 999px;
  padding: 7px 12px;
  font-size: 0.88rem;
  font-weight: 500;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: border-color 100ms ease, background 100ms ease, color 100ms ease;
  font-family: inherit;
}
.origin-chip:hover,
.origin-chip:focus-visible {
  border-color: var(--info);
  outline: none;
}
.origin-chip.is-selected {
  background: var(--info);
  color: #fff;
  border-color: var(--info);
}
.origin-skip {
  background: none;
  border: none;
  padding: 2px 0;
  font-size: 0.82rem;
  color: var(--info);
  font-weight: 500;
  cursor: pointer;
  align-self: flex-start;
  font-family: inherit;
}
.origin-skip:hover,
.origin-skip:focus-visible {
  text-decoration: underline;
  outline: none;
}


/* ===================================================
   HOOG-4 (2026-10-14): Verif-datum per Info-kaartje
   scope/praktische-info.md sectie 5 — "bijgewerkt {date}"
   =================================================== */
.verif-date {
  display: block;
  margin-top: 10px;
  font-size: 0.78rem;
  color: var(--ink-tertiary);
  font-variant-numeric: tabular-nums;
}
.verif-date.is-stale {
  color: var(--warn);
}


/* ===================================================
   HOOG-6 (2026-10-14): Trip-actions "Delete trip" + impact modal
   =================================================== */
.trip-actions {
  margin-top: 20px;
}
.trip-actions .settings-btn-danger {
  width: 100%;
  padding: 12px 16px;
  background: transparent;
  color: var(--err);
  border: 1.5px solid var(--err);
  border-radius: 12px;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}
.trip-actions .settings-btn-danger:hover,
.trip-actions .settings-btn-danger:focus-visible {
  background: var(--err-soft);
  outline: none;
}
#dlgDeleteTrip .save-history-btn.settings-btn-danger {
  background: var(--err);
  color: #fff;
  border-color: var(--err);
}
#dlgDeleteTripImpactList li {
  padding: 4px 0;
}


/* ===================================================
   HOOG-7 (2026-10-14): 3-layer offline-indicator
   Layer 1: topbar-dot --info (cached data, online but SW serving)
   Layer 2: topbar-dot --warn (stale cached >6m) — toekomst, placeholder-class
   Layer 3: banner-strip --err (geen cache + offline)
   =================================================== */
.offline-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--info);
  margin: 0 8px 0 2px;
  flex-shrink: 0;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.2);
  animation: offline-dot-pulse 2.4s ease-in-out infinite;
}
.offline-dot.is-stale {
  background: var(--warn);
}
@keyframes offline-dot-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.45; }
}
@media (prefers-reduced-motion: reduce) {
  .offline-dot { animation: none; }
}

.offline-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: var(--err-soft);
  color: var(--err);
  border-bottom: 1.5px solid var(--err);
  font-size: 0.88rem;
  font-weight: 500;
}
.offline-banner-icon {
  flex-shrink: 0;
}
.offline-banner-text {
  flex: 1;
}


/* ===================================================
   HOOG-8 (2026-10-14): 3-layer GPS-status card
   scope/settings-gdpr.md — "OS permissie / App permissie / Live GPS actief"
   =================================================== */
.gps-status-card {
  background: var(--info-soft);
  border-radius: 10px;
  padding: 12px 14px;
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.gps-status-head {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--info);
  margin: 0 0 4px;
}
.gps-status-layer {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: var(--card);
  border-radius: 8px;
}
.gps-layer-chip {
  display: inline-flex;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--info);
  color: #fff;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  font-weight: 700;
  flex-shrink: 0;
}
.gps-layer-label {
  flex: 1;
  font-size: 0.88rem;
  color: var(--ink);
}
.gps-layer-state {
  font-size: 0.82rem;
  color: var(--ink-tertiary);
  font-variant-numeric: tabular-nums;
}
.gps-layer-state[data-state="on"]  { color: var(--ok); font-weight: 600; }
.gps-layer-state[data-state="off"] { color: var(--ink-tertiary); }
.gps-layer-state[data-state="blocked"] { color: var(--err); font-weight: 600; }
.gps-layer-state[data-state="unknown"] { color: var(--ink-tertiary); font-style: italic; }
.gps-status-hint {
  font-size: 0.78rem;
  color: var(--ink-tertiary);
  margin: 4px 0 0;
}


/* ===================================================
   HOOG-9 (2026-10-14): Day Plan journey-line (dashed) + share-btn + category-colored markers
   =================================================== */

/* Head layout: title+time stack left, share-btn right */
.dayplan-stop-head {
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
}
.dayplan-stop-name-wrap {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}

/* Share-btn 24×24 rechtsboven in stop-card */
.dayplan-stop-share {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: transparent;
  border: none;
  color: var(--ink-tertiary);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 0;
  margin: -4px -4px 0 0;
  transition: background 100ms ease, color 100ms ease;
}
.dayplan-stop-share:hover,
.dayplan-stop-share:focus-visible {
  background: var(--accent-soft);
  color: var(--accent);
  outline: none;
}

/* Category-colored stop markers — scope v6.2: zien=lila, buiten=groen, eten=amber, rust=paars */
.dayplan-stop-marker[data-category-type="see"],
.dayplan-stop-marker[data-category-type="zien"],
.dayplan-stop-marker[data-category-type="sehen"],
.dayplan-stop-marker[data-category-type="voir"],
.dayplan-stop-marker[data-category-type="vedere"],
.dayplan-stop-marker[data-category-type="ver"] {
  border-color: #a78bfa;
  color: #7c3aed;
}
.dayplan-stop-marker[data-category-type="outdoor"],
.dayplan-stop-marker[data-category-type="buiten"],
.dayplan-stop-marker[data-category-type="draußen"],
.dayplan-stop-marker[data-category-type="extérieur"],
.dayplan-stop-marker[data-category-type="all'aperto"],
.dayplan-stop-marker[data-category-type="al aire libre"] {
  border-color: var(--ok);
  color: var(--ok);
}
.dayplan-stop-marker[data-category-type="eat"],
.dayplan-stop-marker[data-category-type="eten"],
.dayplan-stop-marker[data-category-type="essen"],
.dayplan-stop-marker[data-category-type="manger"],
.dayplan-stop-marker[data-category-type="mangiare"],
.dayplan-stop-marker[data-category-type="comer"] {
  border-color: var(--warn);
  color: var(--warn);
}
.dayplan-stop-marker[data-category-type="rest"],
.dayplan-stop-marker[data-category-type="rust"],
.dayplan-stop-marker[data-category-type="ruhe"],
.dayplan-stop-marker[data-category-type="repos"],
.dayplan-stop-marker[data-category-type="riposo"],
.dayplan-stop-marker[data-category-type="descanso"] {
  border-color: #c084fc;
  color: #a855f7;
}


/* HOOG-10 (2026-10-14): Budget Export CSV button */
.budget-actions-row {
  display: flex;
  gap: 10px;
  margin-top: 12px;
  flex-wrap: wrap;
}
#budgetExportCsvBtn {
  flex: 1;
  min-width: 140px;
}