/* ═════════════════════════════════════════════════════════════
   Backbase canal-tour stylesheet.
   The --bb-* tokens and the legacy --navy / --accent / --ink /
   --off-white / --border / --text / --muted / --orange aliases
   are all hard Backbase canonical values - no runtime override.
   ═════════════════════════════════════════════════════════════ */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
/* Suppress the iOS / Chrome cyan tap-highlight flash on every interactive
   control across the planning surfaces. PWA captain feedback (audit
   2026-05-25-1519 PWA dim 6): the flash is jarring during a real trip,
   and the brand chrome already gives clear tap affordance via :active
   transforms and aria-pressed colour shifts. */
*{-webkit-tap-highlight-color: transparent}
:root{
  /* Backbase canonical design tokens (non-overridable defaults) */
  --bb-fg-default:#061223;
  --bb-fg-muted:#4B5563;
  --bb-bg-page:#FFFFFF;
  --bb-bg-elevated:#F4F5F8;
  --bb-bg-tinted:#EEF3FF;
  --bb-bg-shadow:rgba(6,18,35,0.08);
  --bb-border-subtle:#E0E2E6;
  --bb-accent-electric:var(--bb-blue,#3366FF);
  --bb-accent-deep:var(--bb-navy,#091C35);
  --bb-success:#0F7B4F;
  --bb-warning:#D94F07;
  /* Legacy theme aliases - now carry Backbase canonical values verbatim. */
  --navy:var(--bb-navy,#091C35);--ink:#0E2540;--accent:var(--bb-blue,#3366FF);--accent-soft:#EEF3FF;
  --blue:#2B5BD7;--blue-light:#EEF2FB;--white:#FFFFFF;
  --off-white:#F4F5F8;--border:#E0E2E6;--text:#000000;--muted:#4B5563;
  --orange:#D94F07;
  --font:'Libre Franklin',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  /* Matches the real .bb-header content height (--bb-nav-h-desktop, 64px,
     styles/shared-prototype.css) and pages/app.html's --nav-h:64px. Was 65px
     (legacy nav height), which drifted 1px from the shell. */
  --nav-h:64px;
}
/* overscroll-behavior:none blocks iOS Safari pull-to-refresh on the
   standard tour the same way it does on live.html (audit PWA P4
   2026-05-29) - the captain doesn't need a reload gesture during a
   trip, and the gesture interferes with the sticky route picker. */
body{overscroll-behavior:none;font-family:var(--font);color:var(--text);background:var(--white);
  -webkit-font-smoothing:antialiased;line-height:1.7;font-size:0.9375rem;font-weight:300}
h1{font-size:clamp(1.4rem,5vw,3.25rem);font-weight:300;line-height:1.1;letter-spacing:-0.03em}
h2{font-size:clamp(1.4rem,3vw,1.75rem);font-weight:400;line-height:1.2;letter-spacing:-0.02em;margin-bottom:1.5rem}
h3{font-size:1.25rem;font-weight:500;line-height:1.3;letter-spacing:-0.01em;margin-bottom:1rem}
h4{font-size:1rem;font-weight:500;line-height:1.4}
p{margin-bottom:1rem;max-width:62ch}
a{color:var(--blue);text-decoration:none}
.overline{font-size:0.6875rem;font-weight:600;text-transform:uppercase;letter-spacing:0.12em;color:var(--accent);margin-bottom:0.5rem;display:block}

/* ── Nav ── */
/* The .nav* block (logo + easter-egg panel + breadcrumb + live link) used to
   live here as ~170 lines of CSS. Hoisted to /styles/shared-nav.css on
   2026-05-29 so info-weetjes / image-review / quiz-image-review and tour
   all render the same nav without copy-paste drift. Pages must load
   /styles/shared-nav.css BEFORE this file. */

.route-picker{display:flex;gap:2px;margin-right:0.75rem}
/* When the route-picker lives inside the hero (moved out of the nav per
   captain feedback), make it prominent: full-width pill on every viewport.
   The selector uses `.hero .hero-route-picker select` (specificity 0,2,1)
   to OUTRANK the .route-picker select max-width caps in the desktop media
   queries (120px / 160px at lines 601/628) which were designed for the
   nav slot but still cascade with same specificity + later source order. */
/* Route picker band: sticky strip directly under the fixed nav so the
   picker is ALWAYS visible while the captain is looking at the map.
   Captain feedback 2026-05-29: "de route picker moet altijd zichtbaar
   blijven en dan kaartje eronder". The band lives in the document flow
   as a sibling of <section class="hero">, so the map naturally sits
   UNDER it (below in flow) instead of being overlapped by a floating
   fixed pill. The band carries the navy backing colour so the picker
   reads cleanly whether the scroll is on the hero (navy) or on the map
   (white) below. */
.route-picker-band{
  /* Mobile + tablet (<960 px): a full-width sticky navy strip directly
     under the fixed nav. margin-top + sticky-top both equal nav-h so the
     band sits at viewport y = nav-h on every scroll position with no
     lurch, and the next-in-flow element (.hero) starts cleanly at
     body y = nav-h + band-h with no overlap. */
  margin-top:calc(var(--nav-h) + env(safe-area-inset-top, 0px));
  position:sticky;
  top:calc(var(--nav-h) + env(safe-area-inset-top, 0px));
  z-index:850;
  background:var(--navy);
  padding:10px 16px 10px;
  display:flex;justify-content:center;
  box-shadow:0 4px 16px rgba(5,14,31,0.18);
}
@media(min-width:960px){
  /* Desktop: the full-width sticky strip created big horizontal "loze
     ruimte" on each side of the centered 480 px pill. Captain feedback
     2026-05-29. Collapse the band into a fixed-position floating pill
     that sits INSIDE the navy nav bar (top:10 px), so the picker is
     still always visible but there is no separate strip below the nav. */
  .route-picker-band{
    position:fixed;
    top:10px;
    left:50%;
    transform:translateX(-50%);
    margin-top:0;
    padding:0;
    background:transparent;
    box-shadow:none;
    width:auto;
    height:44px;
    /* Nav is z-index 1000 - the picker has to sit ABOVE the nav so it's
       visible and clickable inside the nav's footprint. */
    z-index:1001;
  }
  .route-picker-band .hero-route-picker{
    width:480px;max-width:480px;
  }
  /* The picker pill now sits in the nav's center and shows the route
     name + variant - the breadcrumb's redundant "Amsterdam / [route]"
     duplicates that info and visually collides with the pill at narrow
     desktop widths (around 960-1100 px). Hide it on desktop. */
  .nav-breadcrumb{display:none}
}
.hero-route-picker{
  width:100%;
  max-width:480px;
  margin:0;
}
/* Both selectors match: the legacy `.hero .hero-route-picker` (kept for
   backwards compat if the picker ever lives in the hero again) and the
   current `.route-picker-band .hero-route-picker` (the picker is now a
   sticky band sibling of .hero). Captain feedback 2026-05-29. */
.hero .hero-route-picker select,
.route-picker-band .hero-route-picker select{
  max-width:none;width:100%;height:44px;
  font-size:0.9rem;font-weight:500;letter-spacing:0.01em;
  padding:0 36px 0 16px;
}
.route-btn{padding:6px 10px;font-family:var(--font);font-size:0.7rem;font-weight:600;letter-spacing:0.04em;
  background:rgba(255,255,255,0.08);color:rgba(255,255,255,0.7);border:none;cursor:pointer;
  transition:all 0.2s;white-space:nowrap}
.route-btn:hover{background:color-mix(in srgb,var(--accent) 20%,transparent);color:#fff}
.route-btn.active{background:var(--accent);color:var(--navy)}
.route-picker select{padding:0 28px 0 12px;font-family:var(--font);font-size:0.78rem;font-weight:500;background:rgba(255,255,255,0.08);color:#fff;border:1px solid rgba(255,255,255,0.15);border-radius:999px;cursor:pointer;height:36px;line-height:1.2;appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'><path fill='none' stroke='%23fff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M1 1l5 5 5-5'/></svg>");background-repeat:no-repeat;background-position:right 10px center;background-size:10px}
.route-picker select option{background:var(--navy);color:#fff}

/* ── Layout ── */
.wrap{max-width:1280px;margin:0 auto;padding:0 40px}
.section{padding:64px 0;border-bottom:1px solid var(--border)}

/* ── Hero ── */
/* Hero padding-top must clear the fixed nav (var(--nav-h) + safe-area
   inset on iPhone PWA). Captain feedback (PWA at 393x852): 48 px
   breathing felt tight - once the overline scrolls behind the fixed
   nav, the H1 ends up right against the nav with no air. Bumped to
   80 px breathing + margin-top on .hero h1 so the title keeps space
   even after the overline has scrolled away. Desktop (min-width:760)
   pulls it back to 24 px - captain feedback 2026-05-25: on web the
   gap between route-dropdown and nav felt too wide. */
/* Cascade Scoping Rule: the navy background + white text MUST be scoped so
   this shared sheet does not paint boat-info (.hero-compact) or status
   (.hero-status) navy-with-white. Those pages have light heroes; the bare
   rule was the exact pattern behind the captain's 2026-05-29 leak (the
   padding rule below was already :not()-guarded, this line was not). */
.hero:not(.hero-compact):not(.hero-status){background:var(--navy);color:#fff}
.hero{
  /* Hero is no longer sticky AND no longer needs to clear a fixed route
     picker (the picker is now a sticky band in document flow above the
     hero). The band already provides its own navy backing and shadow
     under the nav, so the hero just needs a tiny top breather before
     the H1 - the nav clearance is handled by .route-picker-band. */
  padding:14px 0 20px;
  position:relative;overflow:hidden}
.hero h1{margin-top:0.5rem}
@media (min-width:760px){
  .hero{padding-top:10px;padding-bottom:16px}
}
@media (min-width:960px){
  /* Band becomes position:fixed at this breakpoint and stops taking flow
     space, so the hero has to clear the fixed nav itself. Scoped with
     :not() so this does NOT cascade into boat-info.html (.hero-compact)
     or status.html (.hero-status) - those pages have their own hero
     padding that already includes nav-h clearance. */
  .hero:not(.hero-compact):not(.hero-status){padding-top:calc(var(--nav-h) + env(safe-area-inset-top, 0px) + 10px)}
}
.hero::before{content:'';position:absolute;inset:0;
  background:repeating-linear-gradient(0deg,transparent,transparent 79px,rgba(255,255,255,0.03) 79px,rgba(255,255,255,0.03) 80px),
  repeating-linear-gradient(90deg,transparent,transparent 79px,rgba(255,255,255,0.03) 79px,rgba(255,255,255,0.03) 80px);pointer-events:none}
.hero::after{content:'B';position:absolute;right:-5%;top:50%;transform:translateY(-50%);
  font-family:var(--font);font-size:40vw;font-weight:800;color:color-mix(in srgb,var(--accent) 4%,transparent);
  line-height:1;pointer-events:none}
.hero .wrap{position:relative;z-index:1}
/* Hero subtitle: collapsed to 1 line by default with "Read more" toggle.
   `.hero-subtitle-text` is the clamped span; the toggle button sits inline at the end.
   When `.hero-subtitle.expanded` is on, the clamp is lifted and the full copy wraps. */
/* Hero subtitle: collapsed to ONE line with inline "Read more" toggle.
   `flex-wrap:nowrap` keeps text + button on the same row in collapsed state;
   the text shrinks via `min-width:0` + ellipsis, the button stays inline.
   When `.hero-subtitle.expanded` is on, we drop to block layout so the full
   copy can wrap freely and the toggle moves below. */
.hero-subtitle{font-size:0.8125rem;font-weight:300;color:rgba(255,255,255,0.78);max-width:none;margin:0.5rem 0 0.85rem;display:flex;align-items:baseline;gap:0.4rem;flex-wrap:nowrap}
.hero-subtitle .hero-subtitle-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1 1 auto;min-width:0}
.hero-subtitle.expanded{display:block}
.hero-subtitle.expanded .hero-subtitle-text{white-space:normal;text-overflow:clip;overflow:visible;display:inline}
/* Subtle white chevron toggle (was: accent-colored "Read more" text link).
   The accessibility label still reads "Read more" / "Show less". */
.hero-subtitle .hero-subtitle-toggle{background:none;border:0;padding:0 2px;color:rgba(255,255,255,0.85);font:inherit;font-size:0.95em;cursor:pointer;flex:0 0 auto;white-space:nowrap;line-height:1}
.hero-subtitle .hero-subtitle-toggle:hover{color:#fff}
/* Hero metadata row: pickup/dropoff/duration/km/highlights.
   Was wrapping to 2 lines on mobile. Now single-line scrollable: items stay
   inline, the row scrolls horizontally if it overflows. */
.hero-meta{display:flex;flex-wrap:nowrap;gap:1rem;font-size:0.75rem;font-weight:400;color:rgba(255,255,255,0.65);overflow-x:auto;overflow-y:hidden;scrollbar-width:none;padding-bottom:2px}
.hero-meta::-webkit-scrollbar{display:none}
.hero-meta span{display:inline-flex;align-items:center;gap:0.3rem;white-space:nowrap;flex:0 0 auto}
/* Deel-chip (2026-07-06): leest als een gewone meta-chip maar is een echte
   button. Geselecteerd via de container-id (#heroMeta legacy hero) per de
   cascade-scoping-regel. The route sheet's own share button is .rd-share. */
#heroMeta .meta-share{display:inline-flex;align-items:center;gap:0.3rem;white-space:nowrap;flex:0 0 auto;background:none;border:0;padding:0;margin:0;font:inherit;color:inherit;cursor:pointer;text-decoration:underline;text-decoration-color:rgba(255,255,255,0.35);text-underline-offset:3px}
#heroMeta .meta-share:hover{text-decoration-color:currentColor}
#heroMeta .meta-share:disabled{cursor:default;opacity:0.8}
/* Route hero title is redundant with the dropdown selection - hide. */
#heroTitle{display:none}
.hero-rule{width:48px;height:2px;background:var(--accent);margin-bottom:1.25rem}

/* ── Map ── */
.map-section{padding:0;border-bottom:1px solid var(--border)}
.map-header{padding:48px 0 24px}
#mapContainer{height:min(78vh,820px);min-height:520px;width:100%;z-index:1;
  /* iOS Safari double-tap was zooming the whole document instead of the
     map, leaving the captain stuck at 1.4x with no way back. touch-action
     manipulation tells the browser this region handles its own gestures
     (Google Maps' pinch/double-tap zoom) and to not propagate to the page. */
  touch-action:manipulation;
  user-select:none;
  -webkit-user-select:none;
}
.map-legend{background:white;padding:8px 12px;font-size:0.75rem;font-family:var(--font);
  border:1px solid var(--border);line-height:1.4}
.map-legend i{display:inline-block;width:20px;height:3px;background:var(--orange);vertical-align:middle;margin-right:6px}
.map-info{background:var(--accent-soft);padding:10px 14px;font-family:var(--font);font-size:0.8125rem;border:1px solid var(--border);line-height:1.5;max-width:280px}
.map-info b{font-weight:600;display:block;margin-bottom:4px;color:var(--navy)}
/* 'You are here' pulsing blue dot */
.user-pos-dot{animation:user-pulse 2s ease-in-out infinite}
@keyframes user-pulse{0%,100%{filter:drop-shadow(0 0 0 rgba(25,118,210,0.6))}50%{filter:drop-shadow(0 0 6px rgba(25,118,210,0.9))}}
#recenter-btn:hover{background:#f5f9ff!important;color:#0d47a1!important}

/* ── Stop cards ── */
.stop-card{margin-bottom:1.75rem;border:1px solid var(--border)}
.stop-header{background:var(--navy);color:#fff;padding:16px 24px;display:flex;align-items:center;gap:16px}
.stop-num{width:36px;height:36px;display:flex;align-items:center;justify-content:center;
  border-radius:50%;color:#fff;font-size:0.82rem;font-weight:700;flex-shrink:0;
  /* Match the map stop-pin EXACTLY (.gmaps-stop-pin): navy glass disc + cyan ring. */
  background:radial-gradient(120% 100% at 50% 0%, rgba(105,254,255,0.18) 0%, rgba(9,28,53,0) 45%), linear-gradient(180deg, rgba(20,42,76,0.88), rgba(9,28,53,0.94));
  -webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);
  border:1.5px solid rgba(105,254,255,0.50);
  box-shadow:0 1px 4px rgba(0,0,0,0.35), inset 0 1.5px 1.5px rgba(255,255,255,0.26)}
.stop-header h3{margin:0;color:#fff;font-weight:400;font-size:1.125rem}
.stop-meta{margin-left:auto;font-size:0.75rem;color:rgba(255,255,255,0.5);font-weight:400;letter-spacing:0.05em;text-transform:uppercase}
.stop-body{padding:24px;display:flex;gap:1.25rem;align-items:flex-start}
.stop-body-text{flex:1;min-width:0}
.stop-body-text p{color:var(--muted);margin:0 0 0.5rem;max-width:none}
.stop-body p strong{color:var(--text);font-weight:500}
.stop-body p em.tag{font-style:normal;color:var(--accent);font-weight:600;font-size:0.7rem;text-transform:uppercase;letter-spacing:0.06em;margin-right:0.4rem}
.stop-facts{display:flex;gap:0;border-top:1px solid var(--border);font-size:0.8125rem}
.stop-fact{flex:1;padding:12px 16px;border-right:1px solid var(--border);color:var(--muted)}
.stop-fact:last-child{border-right:none}
.stop-fact strong{display:block;font-weight:600;color:var(--text);font-size:0.75rem;text-transform:uppercase;letter-spacing:0.04em;margin-bottom:2px}

.stop-card{position:relative;filter:drop-shadow(0 4px 9px var(--bb-bg-shadow))}
.stop-card.special{border-top:3px solid;border-image:linear-gradient(90deg,var(--accent),color-mix(in srgb,var(--accent) 40%,transparent)) 1}
.stop-card.special .stop-header{background:var(--ink)}
.stop-card.dropoff .stop-header{background:#3D2418}

/* ── Trivia section: "Did you know?" cards rendered after the stops list.
   Visually distinct from numbered stops: warm tinted background, no image,
   no number badge - just title + body in a responsive grid. ── */
.trivia-section{margin:3rem 0 1rem}
/* Accordion (variant C, 2026-05-28). Replaces the 3-column tinted-card
   grid. One <details> per fact, chevron rotates open, body slides. */
.trivia-overline{
  display:flex!important;align-items:center;gap:0.5rem;margin:0 0.25rem 0.75rem;
  font-size:0.7rem;font-weight:600;letter-spacing:0.1em;text-transform:uppercase;color:#B45309;
}
.trivia-overline-dot{
  width:6px;height:6px;border-radius:50%;background:#B45309;
  box-shadow:0 0 0 4px rgba(180,83,9,0.12);
}
.trivia-list{
  background:#fff;
  border:1px solid #E3E8EF;
  border-radius:14px;
  box-shadow:0 1px 2px rgba(9,28,53,0.04),0 6px 16px rgba(9,28,53,0.05);
  overflow:hidden;
}
.trivia-list .trivia-card{
  border-top:1px solid #E3E8EF;
  background:transparent;padding:0;
}
.trivia-list .trivia-card:first-of-type{border-top:none}
.trivia-summary{
  list-style:none;cursor:pointer;
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:0.85rem;
  padding:1rem 1.1rem;user-select:none;-webkit-tap-highlight-color:transparent;
  transition:background 150ms ease;
}
.trivia-summary::-webkit-details-marker{display:none}
.trivia-summary:hover{background:#fafbfc}
.trivia-summary:active{background:#F3F6F9}
.trivia-num{
  width:28px;height:28px;border-radius:50%;
  background:#FFF4D6;color:#B45309;
  display:grid;place-items:center;
  font-size:0.72rem;font-weight:700;letter-spacing:0.02em;
  flex-shrink:0;
}
.trivia-title{
  font-size:0.95rem;font-weight:600;line-height:1.35;color:#091C35;letter-spacing:-0.005em;
  /* Wrap balance so 2-line titles split cleanly instead of leaving one orphan word. */
  text-wrap:balance;hyphens:none;word-break:normal;
}
.trivia-chev{
  width:20px;height:20px;color:#5b6678;
  transition:transform 220ms ease,color 220ms ease;
  flex-shrink:0;
}
.trivia-card[open] .trivia-chev{transform:rotate(180deg);color:#B45309}
.trivia-card[open] .trivia-summary{background:#fafbfc}
.trivia-body{
  /* Captain feedback 2026-05-29: missing top padding made the body sit
     flush against the summary. 0.5rem (8px) of breathing room reads as
     "this paragraph belongs to the row above" without disconnecting it. */
  padding:0.5rem 1.1rem 1.1rem 4.05rem;
  font-size:0.88rem;line-height:1.6;color:#5b6678;
  animation:trivia-slide 250ms ease;
}
.trivia-body strong{color:#091C35;font-weight:600}
.trivia-body em{font-style:italic;color:#091C35}
@keyframes trivia-slide{
  from{opacity:0;transform:translateY(-4px)}
  to{opacity:1;transform:translateY(0)}
}
@media(prefers-reduced-motion:reduce){
  .trivia-chev,.trivia-body{transition:none;animation:none}
}
@media(max-width:520px){
  .trivia-summary{padding:0.95rem 1rem;gap:0.75rem}
  .trivia-num{width:26px;height:26px;font-size:0.7rem}
  .trivia-title{font-size:0.92rem}
  .trivia-body{padding:0.5rem 1rem 1rem 3.7rem;font-size:0.86rem}
}
/* Old .trivia-grid / .trivia-card legacy rules below are NOT used by the
   new accordion markup (no `.trivia-grid` div anymore). They remain in
   case route content reverts to the old shape in development. */
.trivia-section .overline{display:block;color:var(--accent);
  font-size:0.75rem;font-weight:600;letter-spacing:0.08em;
  text-transform:uppercase;margin-bottom:1rem}
.trivia-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:1.25rem}
.trivia-card{background:#FFF4D6;padding:1.5rem 1.5rem 1.75rem;
  border-top:3px solid;
  border-image:linear-gradient(90deg,#B45309,color-mix(in srgb,#B45309 25%,transparent)) 1;
  filter:drop-shadow(0 4px 9px var(--bb-bg-shadow));color:#5C3A00}
.trivia-card h4{margin:0 0 0.5rem;font-size:1rem;font-weight:600;color:#5C3A00;line-height:1.35}
.trivia-card p{margin:0;font-size:0.875rem;line-height:1.65;color:#5C3A00}
.trivia-card strong{color:#3D2418;font-weight:600}
.trivia-card em{font-style:italic;color:#3D2418}

/* ── Stop body Wikipedia preview (small thumbnail, left of text) ── */
.stop-thumb{margin:0;flex-shrink:0;width:200px;overflow:hidden;border:1px solid var(--border)}
.stop-thumb img{width:200px;height:140px;object-fit:cover;display:block}
.stop-thumb figcaption{padding:6px 10px;font-size:0.7rem;color:var(--muted);background:var(--off-white);font-style:italic;text-transform:none;letter-spacing:0;line-height:1.35}

/* ── Logistics callout (BB: top gradient border, never border-left ribbon) ── */
.logistics{background:var(--accent-soft);padding:1.25rem 1.5rem;margin:2rem 0;
  border-top:3px solid;border-image:linear-gradient(90deg,var(--accent),color-mix(in srgb,var(--accent) 30%,transparent)) 1;
  filter:drop-shadow(0 4px 9px var(--bb-bg-shadow))}
.logistics h4{font-weight:600;margin-bottom:0.4rem;color:var(--navy)}
.logistics p{font-size:0.875rem;color:var(--muted);margin:0;max-width:none}

/* ── Compact hero (boat-info subpage) ── */
.hero-compact{padding:120px 0 60px}
.hero-compact h1{font-size:clamp(1.75rem,4vw,2.5rem)}
.hero-compact::after{font-size:30vw;color:color-mix(in srgb,var(--accent) 5%,transparent)}

/* ── Boat info section (BB style: top gradient border on cards, drop-shadow elevation) ── */
.boat-info{background:var(--bb-bg-elevated);padding:64px 0;border-bottom:1px solid var(--bb-border-subtle)}
.boat-info-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.5rem;margin-top:2rem}
.boat-card{background:var(--bb-bg-page);padding:1.5rem 1.5rem 1.75rem;
  border-top:3px solid;border-image:linear-gradient(90deg,var(--bb-accent-electric),color-mix(in srgb,var(--bb-accent-electric) 30%,transparent)) 1;
  filter:drop-shadow(0 4px 9px var(--bb-bg-shadow));position:relative}
.boat-card svg.icon{width:48px;height:48px;margin-bottom:0.75rem;color:var(--bb-accent-electric);display:block}
.boat-card h3{margin:0 0 0.5rem;font-weight:500;font-size:1.0625rem;color:var(--bb-fg-default)}
.boat-card p{margin:0 0 0.75rem;font-size:0.875rem;color:var(--bb-fg-muted);line-height:1.55}
.boat-card ol,.boat-card ul{margin:0.5rem 0 0;padding-left:1.1rem;font-size:0.8125rem;color:var(--bb-fg-muted);line-height:1.6}
.boat-card li{margin-bottom:0.25rem}
.boat-card .pill{display:inline-block;font-size:0.6875rem;font-weight:600;letter-spacing:0.06em;text-transform:uppercase;
  color:var(--bb-accent-electric);background:var(--bb-bg-tinted);padding:3px 8px;margin-bottom:0.5rem}
.boat-info .lede{max-width:64ch;color:var(--bb-fg-muted);font-size:1rem}
.boat-info .lede strong{color:var(--bb-fg-default);font-weight:500}

/* ── Boat-info: layout grid (sticky side TOC on desktop, full-width on mobile) ── */
.boat-layout{display:block;max-width:1400px;margin:0 auto}
.boat-sidebar{display:none}
@media(min-width:1100px){
  .boat-layout{display:grid;grid-template-columns:220px minmax(0,1fr);gap:3.5rem;
    padding:0 32px;align-items:start}
  .boat-sidebar{display:block;position:sticky;top:84px;padding-top:64px}
  .boat-toc-mobile{display:none !important}
}

/* Mobile-only chip strip in the hero (full-width pills) */
.boat-toc{display:flex;flex-wrap:wrap;gap:0.5rem;margin-top:1.5rem}
.boat-toc a{font-size:0.75rem;font-weight:500;letter-spacing:0.04em;text-transform:uppercase;
  color:var(--bb-fg-muted);text-decoration:none;padding:6px 10px;
  background:var(--bb-bg-tinted);border:1px solid var(--bb-border-subtle);transition:all 0.15s}
.boat-toc a:hover{color:var(--bb-accent-electric);border-color:var(--bb-accent-electric)}

/* Sticky side TOC */
.boat-toc-side{display:flex;flex-direction:column;gap:0;
  border-left:1px solid var(--bb-border-subtle)}
.boat-toc-side .toc-label{font-size:0.6875rem;font-weight:600;
  text-transform:uppercase;letter-spacing:0.08em;color:var(--bb-fg-muted);
  padding:0 0 0.75rem 0.85rem;border-bottom:1px solid var(--bb-border-subtle);margin-bottom:0.4rem}
.boat-toc-side a{font-size:0.8125rem;line-height:1.4;text-decoration:none;
  color:var(--bb-fg-muted);padding:0.6rem 0.85rem;
  border-left:2px solid transparent;margin-left:-1px;
  transition:color 0.18s, border-color 0.18s, background 0.18s}
.boat-toc-side a:hover{color:var(--bb-fg-default);background:var(--bb-bg-tinted)}
.boat-toc-side a.active{color:var(--bb-accent-electric);
  border-left-color:var(--bb-accent-electric);
  background:color-mix(in srgb,var(--bb-accent-electric) 6%,transparent);
  font-weight:500}

/* Section rhythm */
.boat-section{padding:72px 0;border-bottom:1px solid var(--bb-border-subtle);
  background:var(--bb-bg-elevated);scroll-margin-top:80px}
.boat-section:nth-child(even){background:var(--bb-bg-page)}
.boat-section .wrap{position:relative}
.boat-section h2{font-size:clamp(1.75rem,3.5vw,2.4rem);font-weight:500;
  color:var(--bb-fg-default);margin:0.75rem 0 2rem;line-height:1.2;
  letter-spacing:-0.01em}
.boat-section .overline{position:relative;padding-left:32px}
.boat-section .overline::before{content:'';position:absolute;left:0;top:50%;
  width:24px;height:2px;background:var(--bb-accent-electric);transform:translateY(-50%)}
.boat-section h3{font-size:1.0625rem;font-weight:600;color:var(--bb-fg-default);
  margin:2rem 0 0.75rem;letter-spacing:-0.005em}
.boat-section h3:first-child{margin-top:0}
.boat-section .prose{font-size:1.0625rem;color:var(--bb-fg-muted);line-height:1.7;
  max-width:65ch;margin:0 0 1.5rem}

/* Inside the grid layout the section still needs its own horizontal
   padding so the content isn't flush against the section background's
   left edge (the grid only handles outer page-edge spacing). */
@media(min-width:1100px){
  .boat-section .wrap{padding:0;max-width:none}
  .boat-section{padding:80px 56px}
}

.boat-hero-img{margin:0 0 2rem;max-width:920px}
.boat-hero-img img{width:100%;height:auto;display:block;filter:drop-shadow(0 8px 20px var(--bb-bg-shadow))}
.boat-hero-img figcaption{font-size:0.8125rem;color:var(--bb-fg-muted);margin-top:0.5rem;font-style:italic}

.boat-figure{margin:1.5rem 0;max-width:720px}
.boat-figure img{width:100%;height:auto;display:block;filter:drop-shadow(0 4px 12px var(--bb-bg-shadow))}
.boat-figure figcaption{font-size:0.8125rem;color:var(--bb-fg-muted);margin-top:0.5rem;font-style:italic;line-height:1.5}
.boat-figure-inline{margin:1rem 0 0;max-width:520px}

.boat-list{margin:0.5rem 0 1.25rem;padding-left:1.25rem;font-size:0.9375rem;color:var(--bb-fg-muted);line-height:1.7;max-width:70ch}
.boat-list li{margin-bottom:0.45rem}
.boat-list strong{color:var(--bb-fg-default);font-weight:600}
.boat-list em{color:var(--bb-fg-default);font-style:italic;font-weight:500}
.boat-list-ol{counter-reset:item}
.boat-list-ol li{padding-left:0.25rem}

.boat-split{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:1.75rem;margin:1.25rem 0;align-items:start}
.boat-split-item{background:var(--bb-bg-page);padding:1.25rem 1.25rem 1.5rem;
  border-top:3px solid;border-image:linear-gradient(90deg,var(--bb-accent-electric),color-mix(in srgb,var(--bb-accent-electric) 30%,transparent)) 1;
  filter:drop-shadow(0 4px 9px var(--bb-bg-shadow))}
.boat-section:nth-child(even) .boat-split-item{background:var(--bb-bg-elevated)}
.boat-split-item h3{margin:0 0 0.5rem}
.boat-split-item p{margin:0 0 0.75rem;font-size:0.9375rem;color:var(--bb-fg-muted);line-height:1.6}
.boat-split-item .boat-figure{margin:0.75rem 0 0}

/* ── Interactive console: image with positioned hotspots + overlay tooltips ── */
.console-interactive{margin:1.5rem 0 2rem;max-width:980px}
.console-image{position:relative;margin:0;max-width:980px;line-height:0;
  border:1px solid var(--bb-border-subtle)}
.console-image img{width:100%;height:auto;display:block;filter:drop-shadow(0 6px 18px var(--bb-bg-shadow))}
.console-caption{font-size:0.8125rem;color:var(--bb-fg-muted);margin:0.75rem 0 1.5rem;font-style:italic}

/* Subtle scrim - dims the image when a hotspot is active so the tooltip pops */
.console-scrim{position:absolute;inset:0;background:rgba(0,0,0,0.22);
  opacity:0;pointer-events:none;transition:opacity 0.25s ease;z-index:1}
.console-interactive.has-active .console-scrim{opacity:1}

/* Hotspot wrapper: anchor for the button + its tooltip */
.console-hotspot-wrap{position:absolute;transform:translate(-50%,-50%);z-index:2;
  transition:z-index 0s 0.2s, opacity 0.2s ease, filter 0.2s ease}
.console-hotspot-wrap.active{z-index:5;transition:z-index 0s}
.console-interactive.has-active .console-hotspot-wrap:not(.active){opacity:0.55;filter:saturate(0.6)}

/* The numbered circular button */
.console-hotspot{display:flex;align-items:center;justify-content:center;
  width:36px;height:36px;border-radius:50%;
  background:rgba(0,86,255,0.18);
  border:2px solid var(--bb-accent-electric);
  color:#fff;font-weight:700;font-size:0.9375rem;font-family:inherit;
  cursor:pointer;
  transition:transform 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
  text-shadow:0 1px 3px rgba(0,0,0,0.8);
  padding:0;line-height:1;
  animation:hotspotPulse 2.6s ease-in-out infinite}
.console-hotspot:focus-visible{outline:none}
.console-hotspot-wrap:hover .console-hotspot,
.console-hotspot-wrap.active .console-hotspot,
.console-hotspot:focus-visible{
  background:var(--bb-accent-electric);
  transform:scale(1.18);
  box-shadow:0 0 0 8px color-mix(in srgb,var(--bb-accent-electric) 22%,transparent),
             0 6px 16px rgba(0,0,0,0.35);
  animation:none}
@keyframes hotspotPulse{
  0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--bb-accent-electric) 30%,transparent)}
  50%{box-shadow:0 0 0 6px color-mix(in srgb,var(--bb-accent-electric) 0%,transparent)}
}

/* Dead items: amber accent + strikethrough number, no pulse (drawing
   attention to them only invites mistakes) */
.console-hotspot-wrap.dead .console-hotspot{
  background:rgba(180,80,40,0.35);
  border-color:#d97757;
  animation:none;
  text-decoration:line-through;
  text-decoration-thickness:1.5px}
.console-hotspot-wrap.dead:hover .console-hotspot,
.console-hotspot-wrap.dead.active .console-hotspot{
  background:#d97757;
  box-shadow:0 0 0 8px color-mix(in srgb,#d97757 22%,transparent),0 6px 16px rgba(0,0,0,0.35)}
.console-hotspot-wrap.dead .console-tooltip .t-num{background:#d97757}
.console-items li.dead .step-num{background:color-mix(in srgb,#d97757 25%,transparent);color:#d97757;text-decoration:line-through}
.console-items li.dead:hover,.console-items li.dead.active{border-left-color:#d97757}
.console-items li.dead:hover .step-num,.console-items li.dead.active .step-num{background:#d97757;color:#fff}

/* Floating overlay tooltip - frosted-glass dark panel */
.console-tooltip{position:absolute;width:280px;
  background:rgba(9,28,53,0.92);
  color:#fff;padding:14px 16px 13px;
  border:1px solid rgba(255,255,255,0.14);
  box-shadow:0 14px 36px rgba(0,0,0,0.45),0 2px 6px rgba(0,0,0,0.25);
  backdrop-filter:blur(10px) saturate(140%);-webkit-backdrop-filter:blur(10px) saturate(140%);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity 0.2s ease, transform 0.2s ease;
  z-index:6;will-change:opacity,transform}
.console-tooltip h4{margin:0 0 0.4rem;font-size:0.875rem;font-weight:600;line-height:1.4;
  color:#fff;display:flex;align-items:center;gap:0.5rem}
.console-tooltip .t-num{display:inline-flex;align-items:center;justify-content:center;
  width:20px;height:20px;border-radius:50%;
  background:var(--bb-accent-electric);color:#fff;
  font-size:0.6875rem;font-weight:700;flex-shrink:0}
.console-tooltip p{margin:0;font-size:0.8125rem;line-height:1.6;color:rgba(255,255,255,0.82)}
.console-tooltip strong{color:#fff;font-weight:600}

/* Tooltip directions - pre-set per item via dir-* class on the wrap */
.dir-r  .console-tooltip{top:50%;left:100%;transform:translate(8px,-50%)}
.dir-l  .console-tooltip{top:50%;right:100%;transform:translate(-8px,-50%)}
.dir-b  .console-tooltip{top:100%;left:50%;transform:translate(-50%,8px)}
.dir-t  .console-tooltip{bottom:100%;left:50%;transform:translate(-50%,-8px)}
.dir-br .console-tooltip{top:100%;left:0;transform:translate(-12px,8px)}
.dir-bl .console-tooltip{top:100%;right:0;transform:translate(12px,8px)}
.dir-tr .console-tooltip{bottom:100%;left:0;transform:translate(-12px,-8px)}
.dir-tl .console-tooltip{bottom:100%;right:0;transform:translate(12px,-8px)}

/* Active state - fade + tiny slide-in */
.console-hotspot-wrap:hover .console-tooltip,
.console-hotspot-wrap.active .console-tooltip,
.console-hotspot-wrap:focus-within .console-tooltip{
  opacity:1;visibility:visible;pointer-events:auto}
.dir-r.console-hotspot-wrap:hover .console-tooltip,
.dir-r.console-hotspot-wrap.active .console-tooltip{transform:translate(16px,-50%)}
.dir-l.console-hotspot-wrap:hover .console-tooltip,
.dir-l.console-hotspot-wrap.active .console-tooltip{transform:translate(-16px,-50%)}
.dir-b.console-hotspot-wrap:hover .console-tooltip,
.dir-b.console-hotspot-wrap.active .console-tooltip{transform:translate(-50%,16px)}
.dir-t.console-hotspot-wrap:hover .console-tooltip,
.dir-t.console-hotspot-wrap.active .console-tooltip{transform:translate(-50%,-16px)}
.dir-br.console-hotspot-wrap:hover .console-tooltip,
.dir-br.console-hotspot-wrap.active .console-tooltip{transform:translate(-18px,16px)}
.dir-bl.console-hotspot-wrap:hover .console-tooltip,
.dir-bl.console-hotspot-wrap.active .console-tooltip{transform:translate(18px,16px)}
.dir-tr.console-hotspot-wrap:hover .console-tooltip,
.dir-tr.console-hotspot-wrap.active .console-tooltip{transform:translate(-18px,-16px)}
.dir-tl.console-hotspot-wrap:hover .console-tooltip,
.dir-tl.console-hotspot-wrap.active .console-tooltip{transform:translate(18px,-16px)}

/* Compact list below - secondary reference (smaller, no images), serves as
   mobile fallback when tooltips are hidden */
.console-items{list-style:none;padding:0;margin:0;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:0.4rem;
  font-size:0.875rem}
.console-items li{display:flex;gap:0.65rem;padding:0.6rem 0.85rem;
  background:var(--bb-bg-page);border-left:2px solid transparent;
  transition:border-color 0.18s, background 0.18s;
  cursor:pointer;align-items:flex-start}
.boat-section:nth-child(even) .console-items li{background:var(--bb-bg-elevated)}
.console-items li:hover,.console-items li.active{
  border-left-color:var(--bb-accent-electric);
  background:var(--bb-bg-tinted)}
.console-items .step-num{width:22px;height:22px;border-radius:50%;
  background:var(--bb-bg-tinted);color:var(--bb-fg-default);
  display:flex;align-items:center;justify-content:center;
  font-weight:600;font-size:0.75rem;flex-shrink:0;
  transition:background 0.18s, color 0.18s}
.boat-section:nth-child(even) .console-items .step-num{background:var(--bb-bg-page)}
.console-items li:hover .step-num,.console-items li.active .step-num{
  background:var(--bb-accent-electric);color:#fff}
.console-items .step-body{flex:1;min-width:0}
.console-items h4{margin:0 0 0.15rem;font-size:0.875rem;font-weight:600;color:var(--bb-fg-default);line-height:1.35}
.console-items p{margin:0;font-size:0.8125rem;color:var(--bb-fg-muted);line-height:1.5}
.console-items strong{color:var(--bb-fg-default);font-weight:600}

/* Mobile (narrow viewports): hide overlay tooltips, list below becomes primary */
@media(max-width:760px){
  .console-tooltip{display:none}
  .console-hotspot{animation:none}
  .console-items{grid-template-columns:1fr}
}

/* Floating back-to-top button - appears after scrolling past the hero */
.back-to-top{position:fixed;right:24px;bottom:24px;z-index:50;
  width:44px;height:44px;border-radius:50%;
  background:var(--bb-fg-default);color:var(--bb-bg-page);
  border:none;font-size:1.25rem;font-weight:600;font-family:inherit;
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 20px rgba(0,0,0,0.25);
  opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity 0.2s, visibility 0.2s, transform 0.2s, background 0.18s}
.back-to-top.visible{opacity:1;visibility:visible;transform:translateY(0)}
.back-to-top:hover{background:var(--bb-accent-electric);color:#fff;transform:translateY(-2px)}

/* Media block: text + image side-by-side, no card wrapping, no equal-height stretch */
.boat-media{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:2rem;align-items:start;margin:1.5rem 0 2rem;max-width:1000px}
.boat-media-text{padding-top:0.25rem}
.boat-media-text h3{margin-top:0}
.boat-media-text p{margin:0;font-size:0.9375rem;color:var(--bb-fg-muted);line-height:1.65}
.boat-media .boat-figure{margin:0}
@media(max-width:760px){
  .boat-media{grid-template-columns:1fr;gap:1rem}
}

/* Waterway signs (CLAUDE.md tint palette: 3px left accent + light tint bg) */
.boat-vaarborden{margin:1.25rem 0 2rem;max-width:70ch}
.boat-vaarborden h3{margin:0 0 0.5rem}
.boat-vaarborden-intro{margin:0 0 1rem;font-size:0.9375rem;color:var(--bb-fg-muted);line-height:1.6}
.boat-vaarborden-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:0.75rem}
.boat-vaarbord{background:#FFE8E4;padding:0.85rem 1rem;border-radius:8px;color:#8A1C0F}
.boat-vaarbord:has([style*="#B45309"]){background:#FFF4D6;color:#5C3A00}
.boat-vaarbord[style*="#B45309"]{background:#FFF4D6;color:#5C3A00}
.boat-vaarbord-label{display:flex;align-items:baseline;gap:0.5rem;flex-wrap:wrap;margin-bottom:0.25rem}
.boat-vaarbord-label strong{font-size:1rem;color:inherit}
.boat-vaarbord-en{font-size:0.8125rem;opacity:0.75;color:inherit;font-style:italic}
.boat-vaarbord p{margin:0;font-size:0.875rem;line-height:1.55;color:inherit;opacity:0.92}

/* ── Footer ── */
.foot{padding:32px 0;font-size:0.8125rem;color:var(--muted);text-align:center}

/* ── Responsive ── */
@media(max-width:960px){
  .nav-inner{padding:0 calc(24px + env(safe-area-inset-right, 0px)) 0 calc(24px + env(safe-area-inset-left, 0px));gap:0.75rem}
  .nav-breadcrumb{display:none}
  .route-picker select{max-width:160px}
}
@media(max-width:840px){
  .wrap{padding:0 20px}
  /* Captain feedback 2026-05-29: "te veel loze ruimte hier". Hero used to
     carry the nav + picker clearance; now the sticky route-picker band
     handles that, so the hero just needs a tiny breather before the
     subtitle. */
  .hero{padding:10px 0 14px}
  .stop-facts{flex-direction:column}
  .stop-fact{border-right:none;border-bottom:1px solid var(--border)}
  .stop-fact:last-child{border-bottom:none}
  /* Mobile hero-meta: keep on a single horizontally-scrolling row (was: flex-wrap:wrap).
     Hide pickup + dropoff on mobile - they're redundant with the start/end pins on the map. */
  .hero-meta{flex-wrap:nowrap;gap:0.85rem;font-size:0.75rem}
  .hero-meta .meta-pickup,
  .hero-meta .meta-dropoff{display:none}
  .stop-meta{display:none}
  .route-picker select{max-width:120px}
  /* Stack thumbnail above text on mobile */
  .stop-body{flex-direction:column;gap:1rem}
  .stop-thumb,.stop-thumb img{width:100%}
  .stop-thumb img{height:auto;aspect-ratio:3/2}
}
@media(max-width:640px){
  .nav-inner{padding:0 calc(12px + env(safe-area-inset-right, 0px)) 0 calc(12px + env(safe-area-inset-left, 0px));gap:0.4rem}
  .nav-spacer{display:none}
  /* Push the nav-live broadcast icon to the right edge of the nav.
     Was: route-picker had flex:1 which acted as the spacer, but the
     route-picker is now in the hero, so the live icon needs its own
     margin-left:auto to right-align. */
  .nav-link.nav-live{margin-left:auto;flex-shrink:0}
  .nav-logo{font-size:0.85rem;flex-shrink:0}
  .nav-logo svg{height:16px}
}
@media print{.nav,.map-section{display:none}body{font-size:11pt}.section{padding:24px 0}}

/* ═════════════════════════════════════════════════════════════
   Google Maps overrides
   ═════════════════════════════════════════════════════════════ */

/* Place the legend / info / recenter controls directly into the
   map container via the standard Google Maps controls API and
   style them here. */
.gmaps-info{
  background:var(--accent-soft);padding:10px 14px;font-family:var(--font);
  font-size:0.8125rem;border:1px solid var(--border);line-height:1.5;
  max-width:280px;margin:10px;
}
.gmaps-info b{font-weight:600;display:block;margin-bottom:4px;color:var(--navy)}

.gmaps-legend{
  background:#fff;padding:8px 12px;font-size:0.75rem;font-family:var(--font);
  border:1px solid var(--border);line-height:1.4;margin:10px;
}
.gmaps-legend i{display:inline-block;width:20px;height:3px;background:var(--orange);
  vertical-align:middle;margin-right:6px}
.gmaps-legend .legend-row{display:flex;align-items:center;gap:6px;margin:2px 0}
.gmaps-legend .legend-row i{width:18px;height:3px;display:inline-block;flex-shrink:0}
.gmaps-legend.is-collapsible details summary{
  cursor:pointer;font-weight:600;color:var(--navy);list-style:none;
  display:flex;align-items:center;gap:8px;padding:2px 0;font-size:0.8rem;
}
.gmaps-legend.is-collapsible details summary::-webkit-details-marker{display:none}
.gmaps-legend.is-collapsible details summary::before{
  content:'▸';font-size:0.85rem;color:var(--blue);transition:transform 0.15s;
  flex-shrink:0;
}
.gmaps-legend.is-collapsible details[open] summary::before{transform:rotate(90deg)}
.gmaps-legend.is-collapsible details[open] .legend-rows{margin-top:6px}
/* When collapsed (no [open]) make the chip read clearly as a tappable
   pill so the captain doesn't think the legend disappeared. Stronger
   border + shadow + slight scale-on-hover. Captain feedback 2026-05-25:
   'als je inklapt verdwijnt die helemaal'. */
.gmaps-legend.is-collapsible:not(:has(details[open])){
  background:#fff;border:1.5px solid var(--blue);
  box-shadow:0 2px 6px rgba(51,102,255,0.18);
  padding:6px 12px;
}

/* Vaarverkeer per-type filter panel (TOP_RIGHT on the live AIS view). */
.gmaps-legend.vv-types{min-width:170px;max-width:220px}
.gmaps-legend.vv-types .vv-bulk-row{
  display:flex;gap:4px;margin-bottom:6px;padding-bottom:6px;
  border-bottom:1px solid #E0DCD3;
}
.gmaps-legend.vv-types .vv-bulk-btn{
  flex:1;font:inherit;font-size:0.7rem;background:#F3F6F9;border:1px solid #E0DCD3;
  color:var(--navy);border-radius:3px;padding:3px 6px;cursor:pointer;
}
.gmaps-legend.vv-types .vv-bulk-btn:hover{background:#E5EBFF;border-color:#3366FF}
.gmaps-legend.vv-types .vv-type-row{
  display:flex;align-items:center;gap:6px;margin:3px 0;cursor:pointer;
  font-size:0.75rem;color:var(--navy);
}
.gmaps-legend.vv-types .vv-type-row input{margin:0;flex-shrink:0;cursor:pointer}
.gmaps-legend.vv-types .vv-type-lbl{flex:1}
.gmaps-legend.vv-types .vv-type-cnt{
  font-variant-numeric:tabular-nums;color:#5C6470;font-size:0.7rem;
  background:#F3F6F9;padding:1px 6px;border-radius:8px;min-width:18px;text-align:center;
}

@media(max-width:640px){
  .gmaps-info{
    max-width:55%;font-size:0.7rem;padding:6px 9px;margin:6px;line-height:1.35;
  }
  .gmaps-legend{
    max-width:55%;font-size:0.7rem;padding:6px 9px;margin:6px;line-height:1.3;
  }
  .gmaps-legend.is-collapsible details[open] .legend-rows{
    max-height:30vh;overflow-y:auto;
  }
}

.gmaps-recenter{
  background:#fff;border:1px solid var(--border,#ccc);width:38px;height:38px;
  display:flex;align-items:center;justify-content:center;cursor:pointer;color:#1976D2;
  box-shadow:0 1px 4px rgba(0,0,0,0.2);padding:0;border-radius:4px;margin:10px;
}

.gmaps-audit{
  background:#ffefef;color:#800;padding:8px 12px;border:2px solid #c00;
  font-family:var(--font);font-size:0.75rem;line-height:1.4;
  box-shadow:0 2px 6px rgba(204,0,0,0.25);margin:10px;
}
.gmaps-audit b{display:block;margin-bottom:2px}

/* Popup card styling for InfoWindow content: SINGLE OWNER is
   styles/shared-overlays.css (Commit K, 2026-07-06). Both the outer
   InfoWindow chrome (glass body, close-X, tail) AND the popup content
   rules (layout, typography, colours, cluster pager, body.is-home height
   caps) live there so index / vaarverkeer / live / fun-facts render the
   identical popup. Only the .pp-links / .pp-icon-link LIGHT base rules
   below stay here - the side-panel stop cards reuse them via
   moreInfoLink(), outside any popup. */

/* Source icon row at the bottom of the popup (Wikipedia + Ommetje met Tom
   + Aan de Grachten + Stadsarchief). Up to 4 small circular icons in a
   horizontal flex row. Each .pp-icon-link is a 32px circle with a tint
   background; the SVG inside is recoloured via currentColor on hover.
   The same markup is reused in the side-panel stop cards via
   moreInfoLink() so popup + side panel stay visually consistent. */
/* Source icon row: flows naturally at the bottom of the popup. The
   sticky-with-gradient experiment (2026-05-29) was reverted because
   it forced the popup to claim full max-height even when the content
   fit, which surfaced an unwanted scrollbar. Plain margin-top spacing
   keeps the row visible and unobtrusive. */
.pp-links{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px;padding-bottom:4px}
.pp-icon-link{
  display:inline-flex;align-items:center;justify-content:center;
  width:32px;height:32px;border-radius:50%;
  background:#E5EBFF;color:#091C35;
  text-decoration:none;transition:background 0.15s ease,color 0.15s ease;
}
.pp-icon-link:hover,.pp-icon-link:focus-visible{background:#3366FF;color:#fff;outline:none}
.pp-icon-link svg{width:16px;height:16px;display:block}

/* D2 V1 dark-theme popup content flip: owned by styles/shared-overlays.css
   (Commit K, 2026-07-06) together with the rest of the popup rules. */

/* Advanced markers: round numbered stop. Matches the live tour's
   highlightMarkerIcon() styling (navy fill + cyan ring + white digit)
   so standard tour + live tour share a visual language. Captain
   feedback 2026-05-28: square pins felt like a different app. */
.gmaps-stop-pin{
  width:28px;height:28px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font);font-size:11px;font-weight:700;letter-spacing:-0.01em;
  color:#fff;cursor:pointer;
  /* Cyan focus halo (captain pick 2026-05-30) - matched EXACTLY to
     pages/proto/stop-marker-proposal.html Design 3: a navy GLASS disc (radial
     cyan top-sheen + navy gradient + 5px backdrop blur) wrapped in a concentric
     cyan halo ring that lives in box-shadow (no layout cost across ~56 markers).
     Rest = 0-width ring; hover expands + brightens; the SELECTED pin (.is-active,
     set by tour.js when its popup opens / its highlight card is tapped) gets a
     gentle pulsing halo - a clear "this one" affordance for the map-list link. */
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(105,254,255,0.18) 0%, rgba(9,28,53,0) 45%),
    linear-gradient(180deg, rgba(20,42,76,0.88), rgba(9,28,53,0.94));
  -webkit-backdrop-filter:blur(5px);
  backdrop-filter:blur(5px);
  border:1.5px solid rgba(105,254,255,0.50);
  box-shadow:
    0 1px 4px rgba(0,0,0,0.35),
    0 0 0 0 rgba(105,254,255,0),
    inset 0 1.5px 1.5px rgba(255,255,255,0.26);
  transition:transform 200ms cubic-bezier(.2,.7,.3,1.4),box-shadow 220ms ease,border-color 200ms ease;
}
.gmaps-stop-pin:hover{
  transform:scale(1.04);
  border-color:rgba(105,254,255,0.8);
  box-shadow:
    0 2px 7px rgba(0,0,0,0.38),
    0 0 0 5px rgba(105,254,255,0.22),
    inset 0 1.5px 1.5px rgba(255,255,255,0.26);
}
.gmaps-stop-pin.is-active{
  border-color:#69FEFF;
  box-shadow:
    0 2px 8px rgba(0,0,0,0.40),
    0 0 0 4px rgba(105,254,255,0.55),
    0 0 16px rgba(105,254,255,0.45),
    inset 0 1.5px 1.5px rgba(255,255,255,0.26);
  animation:gmaps-pin-pulse 1.8s ease-in-out infinite;
}
@keyframes gmaps-pin-pulse{
  0%,100%{
    box-shadow:
      0 2px 8px rgba(0,0,0,0.40),
      0 0 0 4px rgba(105,254,255,0.55),
      0 0 16px rgba(105,254,255,0.40),
      inset 0 1.5px 1.5px rgba(255,255,255,0.26);
  }
  50%{
    box-shadow:
      0 2px 8px rgba(0,0,0,0.40),
      0 0 0 7px rgba(105,254,255,0.30),
      0 0 22px rgba(105,254,255,0.55),
      inset 0 1.5px 1.5px rgba(255,255,255,0.26);
  }
}
@media (prefers-reduced-motion: reduce){
  .gmaps-stop-pin.is-active{animation:none}
}
/* 3-digit support: when we ever have >99 stops (we don't today but routes
   grow), drop the font size so the digit still fits inside the 28px circle. */
.gmaps-stop-pin[data-len="3"]{font-size:9px}
/* Opstapplek-pin (captain 2026-08-02: "de opstapplek is niet duidelijk").
   Groter, in de actiegroen van de Start-knop, met een permanent zichtbaar
   label-chipje eronder. De chip is wit met inkt-tekst zodat hij in licht en
   donker op elke kaartachtergrond leesbaar blijft. */
.gmaps-stop-pin.is-pickup{
  position:relative;overflow:visible;
  width:38px;height:38px;font-size:14px;
  background:var(--bb-action,#2BD576);color:var(--navy);
  border:2px solid #fff;
  box-shadow:0 2px 8px rgba(0,0,0,0.45),0 0 0 3px rgba(43,213,118,0.35);
}
.gmaps-boarding-chip{
  position:absolute;top:calc(100% + 4px);left:50%;transform:translateX(-50%);
  background:#fff;color:var(--ink,#0E2540);
  font-size:10px;font-weight:800;letter-spacing:0.05em;text-transform:uppercase;
  padding:2px 8px;border-radius:999px;white-space:nowrap;
  box-shadow:0 1px 4px rgba(0,0,0,0.35);
  pointer-events:none;
}
.gmaps-stop-pin.is-dropoff{background:#3D2418;border-color:#69FEFF;font-size:14px}
.gmaps-extra-pin{
  width:14px;height:14px;background:var(--accent,#C49A3F);border:2px solid #fff;
  border-radius:50%;box-shadow:0 1px 3px rgba(0,0,0,0.4);cursor:pointer;
}

/* You-are-here dot: MOVED to styles/shared-overlays.css (2026-07-27) so
   pages/vaarinfo.html - which links shared-overlays.css but not this file -
   gets the same dot. Do not re-add it here. */

/* AIS vessel-label pill rules live in /styles/shared-overlays.css so the
   live tour and standard tour can't drift. Loaded BEFORE this stylesheet
   from pages/index.html. The fade-in animation hook (.lt-ais-label--just-added)
   stays in src/live/live-polish.css since the standard tour doesn't load it. */

/* Vaarinformatie / Canal-info legend collapsible behaviour. The
   markup uses <details><summary>; we hide the native disclosure
   marker and roll our own caret that rotates on [open]. */
.vaarregels-legend .vr-summary{
  cursor:pointer;list-style:none;
  font-weight:600;color:#091C35;
  display:flex;align-items:center;gap:6px;
  padding:2px 0;user-select:none;
}
.vaarregels-legend .vr-summary::-webkit-details-marker{display:none}
.vaarregels-legend .vr-caret{
  display:inline-block;width:10px;text-align:center;
  font-size:10px;line-height:1;color:#5C6470;
  transition:transform .15s ease;
}
.vaarregels-legend details[open] .vr-caret{transform:rotate(90deg)}
.vaarregels-legend .vr-rows{margin-top:6px}

/* ═════════════════════════════════════════════════════════════
   Collapsing hero (Pattern A from .preview-ui/2-collapsing-hero.html)

   Hero stays sticky under the nav and smoothly shrinks to ~80 px once
   the captain scrolls past ~80 px of content. Pulls the map up into the
   viewport without losing the route picker (always visible as a pill).

   Trigger: body.hero-collapsed is toggled by tour-polish.js scroll
   listener with hysteresis (collapse > 80, expand < 40) to avoid jitter.

   Variables: --hero-collapse-spring keeps the transition feel consistent
   across hero, route-picker, subtitle, meta. ═════════════════════════ */
:root{
  --hero-collapse-spring: cubic-bezier(.32,.72,0,1);
}
.hero{
  /* Captain feedback 2026-05-29: "het komt omdat deze over het kaartje
     zit, dat moet niet". The hero used to be position:sticky which made
     it overlap the map when the user scrolled - Google's InfoWindow
     auto-pan didn't know about that sticky overlay, so popups got
     clipped behind the hero. Switched to position:relative so the hero
     just lives ABOVE the map in document flow and scrolls away
     naturally. The collapse-on-scroll animation is now redundant but
     kept (cheap) so the route-picker still gets its compact-form CSS
     when something else (e.g. openInfo) toggles `.hero-collapsed`. */
  position:relative;
  z-index:1;
  transition:padding 280ms var(--hero-collapse-spring);
}
.hero .wrap{
  transition:opacity 240ms var(--hero-collapse-spring);
}
.hero .hero-route-picker,
.hero .hero-subtitle,
.hero #heroMeta{
  transition:max-height 280ms var(--hero-collapse-spring),
             opacity 200ms var(--hero-collapse-spring),
             margin 280ms var(--hero-collapse-spring);
  overflow:hidden;
}
body.hero-collapsed .hero{
  padding-top:8px;
  padding-bottom:8px;
}
body.hero-collapsed .hero .hero-subtitle,
body.hero-collapsed .hero #heroMeta{
  max-height:0;opacity:0;margin-top:0;margin-bottom:0;
  pointer-events:none;
}
/* Picker band lives OUTSIDE .hero now (it's a sibling) so collapse rules
   target it directly. The select shrinks to a more compact pill so it
   doesn't dominate the viewport once the hero is gone. */
body.hero-collapsed .route-picker-band{padding-top:6px;padding-bottom:6px}
body.hero-collapsed .hero-route-picker select{height:38px;font-size:0.82rem}
@media(min-width:760px) and (max-width:959px){
  /* Tablet range: band is still sticky-in-flow providing nav clearance,
     so the hero itself can shrink to 8 px on collapse. */
  body.hero-collapsed .hero{padding-top:8px}
}
@media(min-width:960px){
  /* Desktop: band is fixed-in-nav and takes NO flow space, so the
     hero must KEEP its nav clearance even when collapsed - otherwise
     the H1/subtitle slide under the fixed nav. Captain agent audit
     2026-05-29 found this regression. */
  body.hero-collapsed .hero:not(.hero-compact):not(.hero-status){
    padding-top:calc(var(--nav-h) + env(safe-area-inset-top, 0px) + 8px);
  }
}
@media(prefers-reduced-motion:reduce){
  .hero, .hero .wrap, .hero-route-picker,
  .hero .hero-subtitle, .hero #heroMeta, .route-picker-band{transition:none}
}

/* ═════════════════════════════════════════════════════════════
   Filter chips + card-styled stops (Pattern B card design, NOT the
   horizontal scroll-snap deck - captain picked vertical grid).

   Markup (rendered by tour.js):
     <div id="stopsContainer">
       <div class="stop-filter-chips" data-active="all">
         <button class="stop-chip is-active" data-cat="all">Alle</button>
         <button class="stop-chip" data-cat="bridge">Bruggen</button>
         ...
       </div>
       <div class="stops-grid">
         <article class="stop-card" data-category="monument">...</article>
         ...
       </div>
     </div>

   .stop-filter-chips uses CSS :has() on the grid via a sibling combinator
   would be nice, but Safari coverage of :has() outside Chromium is fine
   in 2026; we still drive visibility via a data-active attr on the chip
   strip so non-:has() fallback works (we set display:none on the JS side
   as the source of truth).
   ═════════════════════════════════════════════════════════════ */

/* Filter chip strip */
.stop-filter-chips{
  display:flex;gap:8px;
  padding:14px 0 14px;
  overflow-x:auto;overflow-y:hidden;
  scrollbar-width:none;
  /* iOS PWA safe-area left/right padding so chips don't hide under the
     home-indicator bezel when the parent .wrap is at edge. */
  scroll-padding-left:env(safe-area-inset-left, 0px);
  scroll-padding-right:env(safe-area-inset-right, 0px);
  /* Sticky strip that pins under the fixed nav + the sticky route-picker
     band (the band is ~64 px tall: 10 padding + 44 select + 10 padding).
     Captain feedback 2026-05-29: the route picker must always stay
     visible AND the chip strip must not slide behind it. */
  position:sticky;
  top:calc(var(--nav-h) + env(safe-area-inset-top, 0px) + 64px);
  background:var(--white);
  z-index:901;
  /* Subtle bottom hairline so the strip reads as separated from the cards
     when pinned under the hero (otherwise it can blur into the white grid
     background). */
  border-bottom:1px solid rgba(6,18,35,0.06);
  margin-bottom:6px;
  transition:top 280ms cubic-bezier(.32,.72,0,1);
}
.stop-filter-chips::-webkit-scrollbar{display:none}
/* When the hero collapses, the route-picker band shrinks from ~64 px
   to ~56 px (10/10 padding → 6/6 + 38 px select), so the chip strip
   pins a touch higher. */
body.hero-collapsed .stop-filter-chips{
  top:calc(var(--nav-h) + env(safe-area-inset-top, 0px) + 56px);
}
@media(min-width:960px){
  /* Desktop: band is fixed-in-nav so it adds nothing to the flow; chips
     pin directly under the nav. */
  .stop-filter-chips,
  body.hero-collapsed .stop-filter-chips{
    top:calc(var(--nav-h) + env(safe-area-inset-top, 0px));
  }
}
.stop-chip{
  flex-shrink:0;
  font-family:var(--font);font-size:0.78rem;font-weight:600;letter-spacing:0.02em;
  padding:7px 13px;border-radius:999px;
  background:var(--bb-bg-tinted);
  color:var(--navy);
  border:1px solid color-mix(in srgb,var(--accent) 18%,transparent);
  cursor:pointer;white-space:nowrap;
  display:inline-flex;align-items:center;gap:6px;
  transition:background 0.18s ease,color 0.18s ease,border-color 0.18s ease,transform 0.12s ease;
}
.stop-chip:hover{background:color-mix(in srgb,var(--accent) 10%,var(--bb-bg-tinted))}
.stop-chip:active{transform:scale(0.96)}
.stop-chip.is-active{
  background:var(--navy);color:#fff;border-color:var(--navy);
}
.stop-chip-count{
  font-size:0.68rem;font-weight:500;opacity:0.72;
  font-variant-numeric:tabular-nums;
}
.stop-chip.is-active .stop-chip-count{opacity:0.85}
.stop-chip[hidden]{display:none}

/* Stops grid: vertical, responsive auto-fill (1 col mobile, 2-3 cols desktop) */
.stops-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:18px;
  margin-top:4px;
}
@media(min-width:680px){
  .stops-grid{grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:22px}
}

/* Empty-state when a filter has zero matches */
.stops-empty{
  grid-column:1 / -1;
  text-align:center;padding:32px 16px;
  background:var(--bb-bg-elevated);
  color:var(--bb-fg-muted);font-size:0.875rem;
  border:1px dashed var(--bb-border-subtle);
}
.stops-empty strong{display:block;color:var(--bb-fg-default);font-weight:600;margin-bottom:4px}

/* ── Card-styled stops (override the legacy .stop-card visuals) ──
   The legacy markup (.stop-header / .stop-body / .stop-thumb / .stop-meta)
   still ships from tour.js, so we keep those selectors functional but
   restyle them as a "modern card": image on top, number-badge floating
   over the image, body with title + sub + detail + source-icons.
   ── */
.stops-grid .stop-card{
  margin-bottom:0;
  border:none;
  border-radius:16px;
  overflow:hidden;
  background:var(--bb-bg-page);
  box-shadow:0 8px 20px rgba(6,18,35,0.06),
             0 1px 3px rgba(6,18,35,0.05),
             inset 0 0 0 1px rgba(6,18,35,0.04);
  display:flex;flex-direction:column;
  transition:transform 240ms var(--hero-collapse-spring),
             box-shadow 240ms var(--hero-collapse-spring),
             opacity 240ms var(--hero-collapse-spring);
  filter:none;
}
.stops-grid .stop-card:hover{
  transform:translateY(-2px);
  box-shadow:0 14px 28px rgba(6,18,35,0.10),
             0 2px 6px rgba(6,18,35,0.06),
             inset 0 0 0 1px rgba(6,18,35,0.04);
}

/* Image-top: the existing .stop-thumb figure rendered by tour.js becomes
   a full-bleed banner. */
.stops-grid .stop-card .stop-body{
  flex-direction:column;
  padding:0;gap:0;
}
.stops-grid .stop-card .stop-thumb{
  width:100%;margin:0;border:none;border-radius:0;
  flex-shrink:0;position:relative;
  aspect-ratio:16/10;overflow:hidden;background:var(--bb-bg-elevated);
}
.stops-grid .stop-card .stop-thumb img{
  width:100%;height:100%;object-fit:cover;display:block;aspect-ratio:auto;
}
.stops-grid .stop-card .stop-thumb figcaption{
  position:absolute;bottom:0;left:0;right:0;margin:0;
  background:linear-gradient(0deg,rgba(9,28,53,0.78) 0%,rgba(9,28,53,0) 100%);
  color:#fff;padding:18px 12px 10px;font-size:0.7rem;
  font-style:normal;letter-spacing:0;line-height:1.35;
}

/* Number badge floats over the image top-left (legacy .stop-num lives
   inside .stop-header - we hoist it into the card via a CSS clone of the
   pin look). The legacy .stop-header is suppressed because the title moves
   to the body. */
.stops-grid .stop-card .stop-header{
  position:absolute;top:10px;left:10px;
  background:transparent;padding:0;gap:0;
  z-index:2;pointer-events:none;
}
.stops-grid .stop-card .stop-header h3,
.stops-grid .stop-card .stop-header .stop-meta{display:none}
.stops-grid .stop-card .stop-num{
  width:32px;height:32px;border-radius:50%;
  background:radial-gradient(120% 100% at 50% 0%, rgba(105,254,255,0.18) 0%, rgba(9,28,53,0) 45%), linear-gradient(180deg, rgba(20,42,76,0.92), rgba(9,28,53,0.96));
  color:#fff;border:1.5px solid rgba(105,254,255,0.50);
  font-size:0.82rem;font-weight:700;
  display:flex;align-items:center;justify-content:center;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  box-shadow:0 2px 8px rgba(0,0,0,0.25);
  pointer-events:auto;
}
.stops-grid .stop-card.dropoff .stop-num{background:rgba(61,36,24,0.86)}

/* Card body: title + sub + detail + source icon row */
.stops-grid .stop-card .stop-body-text{
  padding:14px 16px 16px;flex:1;
  display:flex;flex-direction:column;gap:4px;
}
/* Title injected as h3 by tour.js (was in .stop-header). We move it into
   the body via a JS DOM swap so the markup stays semantic. */
.stops-grid .stop-card .stop-card-title{
  font-size:1rem;font-weight:600;letter-spacing:-0.01em;
  line-height:1.3;color:var(--bb-fg-default);
  margin:0;text-wrap:balance;
}
.stops-grid .stop-card .stop-card-sub{
  font-size:0.66rem;font-weight:600;letter-spacing:0.08em;
  text-transform:uppercase;color:var(--accent);
  margin:0 0 2px;
}
.stops-grid .stop-card .stop-body-text > p{
  font-size:0.8125rem;line-height:1.55;color:var(--bb-fg-muted);
  margin:6px 0 0;max-width:none;
}
.stops-grid .stop-card .stop-body-text .pp-links{
  margin-top:12px;padding-top:12px;
  border-top:1px solid rgba(6,18,35,0.06);
}

/* Cards without an image: no aspect-ratio banner, number sits at top-left
   in the body. */
.stops-grid .stop-card.no-image .stop-thumb{display:none}
.stops-grid .stop-card.no-image .stop-header{
  position:static;padding:14px 16px 0;
}
.stops-grid .stop-card.no-image .stop-num{
  background:var(--bb-bg-tinted);color:var(--navy);
  border:1.5px solid color-mix(in srgb,var(--accent) 25%,transparent);
}

/* Hide a stop card when its category doesn't match the active chip filter.
   tour.js sets data-category on each card; the strip stores the active
   filter on data-active. Pure-CSS filter when sibling .stop-filter-chips
   has data-active set to a specific cat. */
#stopsContainer:has(.stop-filter-chips[data-active="bridge"]) .stops-grid .stop-card:not([data-category="bridge"]),
#stopsContainer:has(.stop-filter-chips[data-active="museum"]) .stops-grid .stop-card:not([data-category="museum"]),
#stopsContainer:has(.stop-filter-chips[data-active="monument"]) .stops-grid .stop-card:not([data-category="monument"]),
#stopsContainer:has(.stop-filter-chips[data-active="eat"]) .stops-grid .stop-card:not([data-category="eat"]),
#stopsContainer:has(.stop-filter-chips[data-active="place"]) .stops-grid .stop-card:not([data-category="place"]){
  display:none;
}
/* JS-driven fallback for browsers without :has() (older WebKit). */
.stops-grid .stop-card[hidden]{display:none}

/* Trivia section still renders below the filtered grid; keep it visible
   regardless of the active filter. */
.trivia-section{margin-top:2.5rem}

@media(max-width:840px){
  .stop-filter-chips{
    padding:10px 0 10px;
    /* Chip strip pins under the fixed nav + sticky route-picker band
       (~64 px tall). Captain feedback 2026-05-29. */
    top:calc(var(--nav-h) + env(safe-area-inset-top, 0px) + 64px);
  }
  body.hero-collapsed .stop-filter-chips{
    /* Collapsed picker band shrinks slightly (~56 px). */
    top:calc(var(--nav-h) + env(safe-area-inset-top, 0px) + 56px);
  }
}

/* ═════════════════════════════════════════════════════════════════════════
   HIGHLIGHT BOTTOM SHEET (native-kit, Proposal 5)
   ----------------------------------------------------------------------------
   Content styling for #bbStopSheet, the reusable iOS bottom sheet that now
   carries the route-highlight DETAIL (was the cramped glass InfoWindow
   popup, see styles/shared-overlays.css). The sheet CHROME (glass surface, rounded top, handle, snap
   behaviour, dark-mode flip) all comes from styles/native-kit.css; here we
   only style the CONTENT so it matches the route popups:
     - hero image flush / edge-to-edge at the top (breaks out of the
       .bb-sheet-body 18px inset), rounded only at the sheet's top corners
     - title / sub / detail typography mirrors the glass InfoWindow popup
     - the source-icon row reuses .pp-links / .pp-icon-link verbatim
   Every selector is scoped under .bb-stop-sheet so it can never cascade
   into another page that uses the kit's bare .bb-sheet.
   ═════════════════════════════════════════════════════════════════════════ */
.bb-stop-sheet .bb-sheet-body{
  /* Kill the kit's top inset so the hero image sits flush against the
     handle; horizontal + bottom insets handled per-element below so the
     image can break out to the full sheet width. */
  padding:0 0 calc(16px + var(--bb-safe-bottom, env(safe-area-inset-bottom,0px)));
  font-family:var(--font);
}
.bb-stop-sheet-card{display:block}
/* Edge-to-edge hero. matches the popup img (shared-overlays.css): 2:1 crop, rounded to
   follow the sheet's 24px top corners only. */
.bb-stop-sheet-hero{
  width:100%;
  border-radius:22px 22px 0 0;
  overflow:hidden;
  margin-bottom:14px;
}
.bb-stop-sheet-hero img{
  display:block;width:100%;aspect-ratio:2/1;height:auto;
  object-fit:cover;object-position:center;
}
/* Text block carries the same 18px inset the kit body used to apply, so the
   copy lines up under the rounded image edge. */
.bb-stop-sheet-text{padding:0 18px}
.bb-stop-sheet-title{
  display:block;text-wrap:balance;hyphens:none;word-break:normal;
  font-size:1.05rem;font-weight:600;line-height:1.3;
  color:var(--bbk-fg, var(--navy));
}
.bb-stop-sheet .pp-sub{
  color:var(--accent);
  font-size:0.72rem;text-transform:uppercase;letter-spacing:0.06em;
  font-weight:600;margin:6px 0 10px;padding:0;
}
.bb-stop-sheet .pp-detail{
  color:var(--bbk-muted, #4B5563);
  font-size:0.9rem;line-height:1.55;padding:0;
}
.bb-stop-sheet .pp-detail strong{color:var(--bbk-fg, var(--navy))}
.bb-stop-sheet .pp-detail em{color:inherit}
.bb-stop-sheet a.pp-link{
  display:inline-block;margin-top:12px;padding:0;
  font-size:0.72rem;color:var(--blue);text-transform:uppercase;
  letter-spacing:0.06em;font-weight:600;
}
/* Source-icon row: reuse .pp-links / .pp-icon-link, just space it from the
   detail copy. The circular tint chips already read correctly on both the
   light and dark glass surfaces. */
.bb-stop-sheet .pp-links{margin-top:16px;padding:0}

/* Dark glass (the production default theme): the kit flips --bbk-fg /
   --bbk-muted to light tokens already, so title + detail follow. Lift the
   cyan brand accent for the sub-label + the source chips so they read on the
   dark navy glass, mirroring the dark bb-sheet body treatment. */
:root[data-theme="dark"] .bb-stop-sheet .pp-sub{color:rgba(105,254,255,0.92)}
:root[data-theme="dark"] .bb-stop-sheet a.pp-link{color:rgba(105,254,255,0.92)}
:root[data-theme="dark"] .bb-stop-sheet .pp-icon-link{
  background:rgba(105,254,255,0.12);color:rgba(243,246,249,0.92);
}
:root[data-theme="dark"] .bb-stop-sheet .pp-icon-link:hover,
:root[data-theme="dark"] .bb-stop-sheet .pp-icon-link:focus-visible{
  background:var(--accent);color:#fff;
}

/* ═══════════════════════════════════════════════════════════════════════
   HIGHLIGHT CLUSTERING (count bubble + in-popup pager)
   Logic in src/tour/tour.js (installHighlightClustering). Overlapping
   highlight pins collapse under ONE navy-glass count BUBBLE; tapping it
   opens the EXISTING glass InfoWindow popup with a compact pager
   strip (chevrons + dots + "1 van N") that browses the clustered stops
   inside the same popup. No extra layer: the old white carousel
   slab is gone (proposal A, pages/proto/cluster-restyle.html, captain
   sign-off 2026-06-10). Bubble reuses the .gmaps-stop-pin navy-glass
   language and looks identical in light + dark (it is map chrome).
   ═══════════════════════════════════════════════════════════════════════ */

/* Count bubble: navy glass disc + cyan ring, matched to .gmaps-stop-pin. */
.hlc-bubble{
  display:flex;align-items:center;justify-content:center;gap:4px;
  min-width:30px;height:30px;padding:0 9px;border-radius:999px;
  font-family:var(--font);font-size:13px;font-weight:700;letter-spacing:-0.01em;
  color:#fff;cursor:pointer;line-height:1;white-space:nowrap;
  transform:translateY(-2px);
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(105,254,255,0.22) 0%, rgba(9,28,53,0) 48%),
    linear-gradient(180deg, rgba(20,42,76,0.92), rgba(9,28,53,0.96));
  -webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);
  border:1.5px solid rgba(105,254,255,0.55);
  box-shadow:
    0 2px 9px rgba(0,0,0,0.34),
    inset 0 1.5px 1.5px rgba(255,255,255,0.26);
  transition:transform 200ms cubic-bezier(.2,.7,.3,1.4),opacity 200ms ease,box-shadow 200ms ease;
}
.hlc-bubble:hover{
  transform:translateY(-2px) scale(1.05);
  border-color:rgba(105,254,255,0.8);
  box-shadow:0 3px 12px rgba(0,0,0,0.4),0 0 0 5px rgba(105,254,255,0.18),inset 0 1.5px 1.5px rgba(255,255,255,0.26);
}
.hlc-bubble:focus-visible{outline:2px solid #69FEFF;outline-offset:3px}
.hlc-bubble .hlc-bubble-dot{
  width:5px;height:5px;border-radius:50%;background:#69FEFF;
  box-shadow:0 0 6px #69FEFF;flex:none;
}
/* While its pager popup is open the bubble wears a pulsing cyan ring -
   the cluster counterpart of .gmaps-stop-pin.is-active on free pins.
   Mirrors the proto's .hlc-bubble.is-open frames; every value below
   already appears in the bubble rules above. */
.hlc-bubble.is-open{
  border-color:#69FEFF;
  box-shadow:
    0 2px 8px rgba(0,0,0,0.40),
    0 0 0 4px rgba(105,254,255,0.55),
    0 0 16px rgba(105,254,255,0.45),
    inset 0 1.5px 1.5px rgba(255,255,255,0.26);
  animation:hlc-bubble-pulse 1.8s ease-in-out infinite;
}
@keyframes hlc-bubble-pulse{
  0%,100%{box-shadow:0 2px 8px rgba(0,0,0,0.40),0 0 0 4px rgba(105,254,255,0.55),0 0 16px rgba(105,254,255,0.40),inset 0 1.5px 1.5px rgba(255,255,255,0.26)}
  50%{box-shadow:0 2px 8px rgba(0,0,0,0.40),0 0 0 7px rgba(105,254,255,0.30),0 0 22px rgba(105,254,255,0.55),inset 0 1.5px 1.5px rgba(255,255,255,0.26)}
}
@media (prefers-reduced-motion: reduce){
  .hlc-bubble.is-open{animation:none}
}

/* In-popup pager strip (proposal A): the pager rules moved to
   styles/shared-overlays.css with the rest of the popup family
   (Commit K, 2026-07-06). Only the count BUBBLE above stays here -
   it is map chrome, not popup content. */

/* ════════════════════════════════════════════════════════════════════════
   ROUTE SHEET RESIDENT (folded in from the old rd-glass panel 2026-07-12).
   The route header + Highlights list + logistics + Start-live CTA now live in
   the shared bb-sheet (window.BBSheet) as its resident rest-stand, built by
   tour.js buildRouteResident(). Every rule is scoped under .bbs so it can NEVER
   cascade onto another page that also loads tour.css (CSS Cascade Scoping Rule);
   colours come from the bb-sheet tokens so there is one sheet skin.
   ════════════════════════════════════════════════════════════════════════ */
/* Sticky filter chips (captain-approved 2026-07-13): the chip row is the first
   thing in the scrollable sheet body, so it pins to the top while the stop list
   scrolls under it. Bleeds to the body edges (-16px cancels the body's 16px pad)
   with an opaque fill + a soft bottom shadow so rows don't show through. */
.bbs .rd-fchips{display:flex;gap:6px;flex-wrap:wrap;position:sticky;top:-8px;z-index:3;
  margin:0 -16px 10px;padding:14px 16px 10px;
  background:var(--bbs-sticky);
  box-shadow:0 8px 10px -8px rgba(0,0,0,0.30)}
.bbs .rd-fchip{flex:0 0 auto;font:600 11.5px/1 var(--bbs-font);color:var(--bbs-fg-dim);
  background:var(--bbs-chip-bg);border:1px solid var(--bbs-hairline);border-radius:999px;
  padding:7px 12px;cursor:pointer}
.bbs .rd-fchip:hover{color:var(--bbs-fg)}
.bbs .rd-fchip.is-active{background:var(--bbs-chip-cyan-bg);color:var(--bbs-chip-cyan-fg);border-color:transparent}
.bbs .rd-fchip-count{opacity:0.6;margin-left:4px}
.bbs .rd-list{display:flex;flex-direction:column;gap:2px}
.bbs .rd-empty{padding:14px;border-radius:12px;background:var(--bbs-chip-bg);
  border:1px solid var(--bbs-hairline);color:var(--bbs-fg-dim);font-size:12.5px;line-height:1.5}
.bbs .rd-empty strong{display:block;color:var(--bbs-fg);font-weight:600;margin-bottom:2px}
.bbs .rd-logi{margin-top:14px;padding:12px 14px;border-radius:12px;
  background:var(--bbs-chip-bg);border:1px solid var(--bbs-hairline)}
.bbs .rd-logi h4{margin:0 0 5px;font:700 11px/1 var(--bbs-font);letter-spacing:0.08em;
  text-transform:uppercase;color:var(--bbs-accent)}
.bbs .rd-logi p{margin:0;font-size:12.5px;line-height:1.55;color:var(--bbs-fg-body)}
.bbs .rd-share{display:inline-flex;align-items:center;gap:6px;margin-top:14px;
  font:600 12.5px/1 var(--bbs-font);color:var(--bbs-fg-dim);background:var(--bbs-chip-bg);
  border:1px solid var(--bbs-hairline);border-radius:999px;padding:9px 14px;cursor:pointer}
.bbs .rd-share:hover{color:var(--bbs-fg)}
.bbs .rd-share:disabled{opacity:0.7;cursor:default}
.bbs .rd-cta{display:block;width:100%;box-sizing:border-box;text-align:center;
  margin:2px 0 14px;
  border-radius:14px !important;                 /* was rendering square - the .bb-cta radius did not survive the .bbs scope */
  padding:14px 18px;
  font:700 14px/1.1 var(--bbs-font) !important;   /* was weight 300 (thin) */
  letter-spacing:0.01em;
  box-shadow:0 6px 18px rgba(51,102,255,0.38);}
.bbs .rd-cta:active{transform:scale(0.99)}
/* Start-CTA explainer + preview link (UX-audit 20-07 suggestie 2, captain
   25-07: CTA stays one line, all explanation under the button). Theme-aware
   via the bbs tokens - never hardcode ink on the sheet surface. */
.bbs .rd-start{width:100%}
.bbs .rd-start .rd-cta{margin-bottom:0}
.bbs .rd-cta-hint{margin:8px 0 0;text-align:center;
  font:400 12.5px/1.35 var(--bbs-font);color:var(--bbs-fg-dim)}
.bbs .rd-preview{display:block;margin:6px 0 10px;text-align:center;
  font:700 13px/1.3 var(--bbs-font);color:var(--bbs-accent);text-decoration:none}
.bbs .rd-preview:active{opacity:0.7}

/* Virtual-route status panels (vaarverkeer / werkzaamheden) still render legacy
   .stop-card markup INTO #stopsContainer, which now lives inside the dark sheet.
   Re-skin those cards for the dark glass so they never render light-on-light
   (the old rd-glass panel carried equivalent overrides). Scoped under .bbs so it
   can only ever touch the sheet - the light standalone pages are untouched. */
.bbs #stopsContainer .stop-card{background:var(--bbs-chip-bg) !important;color:var(--bbs-fg-body) !important;box-shadow:inset 0 0 0 1px var(--bbs-hairline) !important;border-radius:12px !important}
.bbs #stopsContainer .stop-card .stop-header{background:transparent !important}
.bbs #stopsContainer .stop-card h3,
.bbs #stopsContainer .stop-card strong{color:var(--bbs-fg) !important}
.bbs #stopsContainer .stop-card p{color:var(--bbs-fg-body) !important}