/* Info & weetjes - browse the captain's knowledge base.
   Two-pane desktop (left list, right map), stacked mobile.
   Backbase tokens: --accent #3366FF, --navy #091C35.
   Standard site nav is replicated below to keep the visual identity
   identical to index.html / live.html (logo + easter-egg + breadcrumb +
   live link). Captain feedback 2026-05-27. */

:root {
  --iw-navy: #091C35;
  --navy: var(--bb-navy, #091C35);
  --accent: var(--bb-blue, #3366FF);
  --iw-accent: #3366FF;
  --iw-accent-tint: #E5EBFF;
  --iw-ink: #061223;
  --iw-muted: #4B5563;
  --iw-border: #E0E2E6;
  --iw-bg: #FFFFFF;
  --iw-bg-soft: #F4F5F8;
  --iw-shadow: 0 1px 3px rgba(6,18,35,0.06);
  --iw-shadow-lg: 0 8px 32px rgba(6,18,35,0.16);
  --iw-radius: 8px;
  --nav-h: 64px;
  --iw-header-h: 56px;
  --iw-search-h: 58px;
  --iw-chips-h: 50px;
  --font: 'Libre Franklin', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  /* Category accent colours (soft tints, dark same-hue text). */
  --cat-omt: #E5EBFF; --cat-omt-ink: #091C35;
  --cat-omt-boek: #FFF4D6; --cat-omt-boek-ink: #5C3A00;
  --cat-adg-post: #E8F5EE; --cat-adg-post-ink: #0F5132;
  --cat-adg-poi: #EDE7F6; --cat-adg-poi-ink: #3E2A6E;
  --cat-adg-route: #FFF4D6; --cat-adg-route-ink: #5C3A00;
  --cat-adg-dossier: #FFE8E4; --cat-adg-dossier-ink: #8A1C0F;
  --cat-fund: #F3F6F9; --cat-fund-ink: #091C35;
  --cat-brug: #E5EBFF; --cat-brug-ink: #091C35;
  --cat-gracht: #DCF1F4; --cat-gracht-ink: #0E4F58;
  --cat-artis: #E8F5EE; --cat-artis-ink: #0F5132;
  --cat-last: #EDE7F6; --cat-last-ink: #3E2A6E;
  --cat-routes: #E5EBFF; --cat-routes-ink: #091C35;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: var(--iw-bg-soft);
  color: var(--iw-ink);
  font: 14px/1.55 'Libre Franklin', -apple-system, BlinkMacSystemFont,
        'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--iw-accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---- Standard site nav: now in /styles/shared-nav.css. Hoisted out of
   each page stylesheet 2026-05-29 to kill ~80 lines of copy-paste
   drift. Pages load shared-nav.css BEFORE this file. ---- */

/* ---- Nav-embedded title (captain feedback 2026-05-28: no separate
   page-title strip - put everything inside the standard nav). ----
   The .nav-breadcrumb gets a strong title + small count, mirroring the
   "Amsterdam / Canal Tour" pattern on index.html but using the page name. */
.iw-nav-title {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  color: rgba(255,255,255,0.92);
  font-size: 0.95rem;
  font-weight: 500;
  min-width: 0;
}
.iw-nav-title strong {
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.iw-nav-count {
  font-size: 0.7rem;
  color: rgba(255,255,255,0.55);
  font-weight: 500;
  white-space: nowrap;
}
@media(max-width:640px){
  .iw-nav-title{font-size:0.85rem;gap:6px}
  /* On a 375px viewport the full title + count won't fit; hide the count chip,
     keep the title. */
  .iw-nav-count{display:none}
}

/* Push the very first content below the FIXED standard nav. */
body { padding-top: calc(var(--nav-h) + env(safe-area-inset-top, 0px)); }

/* ---- Search ---- */
.iw-search-row {
  position: sticky;
  /* Sticks directly below the fixed nav (no separate title strip anymore). */
  top: calc(var(--nav-h) + env(safe-area-inset-top, 0px));
  z-index: 40;
  background: transparent;
  border-bottom: 1px solid var(--iw-border);
  padding: 12px 20px;
  height: var(--iw-search-h);
  display: flex;
  align-items: center;
  gap: 12px;
}
.iw-search {
  flex: 1;
  border: 1px solid var(--iw-border);
  border-radius: var(--iw-radius);
  padding: 8px 12px 8px 36px;
  font: inherit;
  font-size: 14px;
  background: var(--iw-bg) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%234B5563' viewBox='0 0 16 16'><path d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z'/></svg>") no-repeat 12px center;
  outline: none;
  transition: border-color 0.15s;
}
.iw-search:focus {
  border-color: var(--iw-accent);
  box-shadow: 0 0 0 3px rgba(51,102,255,0.15);
}
.iw-map-toggle {
  display: none;
  border: 1px solid var(--iw-border);
  background: var(--iw-bg);
  border-radius: var(--iw-radius);
  padding: 7px 12px;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  color: var(--iw-ink);
}

/* ---- Category chips ---- */
.iw-chips {
  position: sticky;
  top: calc(var(--nav-h) + var(--iw-search-h) + env(safe-area-inset-top, 0px));
  z-index: 35;
  background: transparent;
  border-bottom: 1px solid var(--iw-border);
  padding: 0 20px;
  height: var(--iw-chips-h);
  display: flex;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}
.iw-chips::-webkit-scrollbar { height: 4px; }
.iw-chips::-webkit-scrollbar-thumb { background: var(--iw-border); border-radius: 2px; }
.iw-chip {
  flex-shrink: 0;
  border: 1px solid var(--iw-border);
  background: var(--iw-bg);
  border-radius: 999px;
  padding: 6px 14px;
  font: inherit;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  color: var(--iw-ink);
  white-space: nowrap;
  transition: all 0.15s;
}
.iw-chip:hover { background: var(--iw-bg-soft); }
.iw-chip.is-on {
  background: var(--iw-navy);
  color: #fff;
  border-color: var(--iw-navy);
}
.iw-chip-count {
  margin-left: 6px;
  font-size: 11px;
  opacity: 0.6;
}

/* ---- Layout ---- */
.iw-main {
  display: grid;
  grid-template-columns: 60% 40%;
  /* Subtract nav + search + chips so the two-pane area fills the rest of
     the viewport without overflowing. body has padding-top equal to nav-h. */
  height: calc(100dvh - var(--nav-h) - var(--iw-search-h) - var(--iw-chips-h) - env(safe-area-inset-top, 0px));
  min-height: 480px;
  overflow: hidden;
}
.iw-list {
  overflow-y: auto;
  padding: 16px 20px 40px;
  background: var(--iw-bg-soft);
  -webkit-overflow-scrolling: touch;
}
.iw-map-wrap {
  position: relative;
  border-left: 1px solid var(--iw-border);
  background: #DCE7F2;
}
#iwMap {
  position: absolute;
  inset: 0;
}

/* ---- Cards ---- */
.iw-empty {
  text-align: center;
  color: var(--iw-muted);
  padding: 60px 20px;
  font-size: 14px;
}

/* Pattern 5 - Skeleton shimmer loaders (UI audit 2026-05-28; migrated to the
   shared native-kit primitive 2026-06-01). info-weetjes.js now paints the
   loading placeholders with window.bbNativeKit.skeleton(#iwList, {count:8,
   variant:'card'}), so the shimmer + card geometry are owned by
   styles/native-kit.css (.bb-skeleton-card / .bb-skeleton-img /
   .bb-skeleton-line) and shared with every other loading screen. The legacy
   page-local .iw-skeleton* rules + the iw-shimmer keyframes were retired with
   their only consumers.

   The kit container (.bb-skeleton) defaults to a 2-up grid above 600px; the
   real results pane is a single-column vertical list of .iw-card rows, so we
   pin #iwList back to a block list while it carries the kit class. This keeps
   the placeholders sitting exactly where the real cards will land (no column
   reflow when the data swaps in). Scoped to #iwList.bb-skeleton so it only
   ever affects this page's loading state and nothing else that uses the kit. */
#iwList.bb-skeleton {
  display: block;
}
#iwList.bb-skeleton .bb-skeleton-card {
  margin-bottom: 12px;
}
.iw-card {
  display: flex;
  background: var(--iw-bg);
  border: 1px solid var(--iw-border);
  border-radius: var(--iw-radius);
  margin-bottom: 12px;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
  box-shadow: var(--iw-shadow);
}
.iw-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(6,18,35,0.12);
}
.iw-card.is-active {
  border-color: var(--iw-accent);
  box-shadow: 0 0 0 2px rgba(51,102,255,0.2), var(--iw-shadow);
}
.iw-card-img {
  flex-shrink: 0;
  width: 140px;
  aspect-ratio: 16 / 10;
  background: var(--iw-bg-soft) center/cover no-repeat;
  position: relative;
}
.iw-card-img.no-img {
  background: linear-gradient(135deg, var(--iw-accent-tint), var(--iw-bg-soft));
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--iw-accent);
  font-size: 22px;
  font-weight: 700;
}
.iw-card-body {
  flex: 1;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.iw-card-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.iw-cat-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 2px 8px;
  border-radius: 3px;
}
.iw-card-date {
  font-size: 11px;
  color: var(--iw-muted);
  letter-spacing: 0.02em;
}
.iw-card h3 {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--iw-ink);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.iw-card-summary {
  margin: 0;
  font-size: 12.5px;
  color: var(--iw-muted);
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Category badge colours (background+text). */
.iw-cat-ommetje-met-tom        { background: var(--cat-omt); color: var(--cat-omt-ink); }
.iw-cat-ommetje-boek           { background: var(--cat-omt-boek); color: var(--cat-omt-boek-ink); }
.iw-cat-aan-de-grachten-post   { background: var(--cat-adg-post); color: var(--cat-adg-post-ink); }
.iw-cat-aan-de-grachten-poi    { background: var(--cat-adg-poi); color: var(--cat-adg-poi-ink); }
.iw-cat-aan-de-grachten-route  { background: var(--cat-adg-route); color: var(--cat-adg-route-ink); }
.iw-cat-aan-de-grachten-dossier{ background: var(--cat-adg-dossier); color: var(--cat-adg-dossier-ink); }
.iw-cat-amsterdam-fundering    { background: var(--cat-fund); color: var(--cat-fund-ink); }
.iw-cat-amsterdam-bruggen      { background: var(--cat-brug); color: var(--cat-brug-ink); }
.iw-cat-amsterdam-grachten     { background: var(--cat-gracht); color: var(--cat-gracht-ink); }
.iw-cat-amsterdam-artis        { background: var(--cat-artis); color: var(--cat-artis-ink); }
.iw-cat-amsterdam-lastage      { background: var(--cat-last); color: var(--cat-last-ink); }
.iw-cat-routes                 { background: var(--cat-routes); color: var(--cat-routes-ink); }

/* ════════════════════════════════════════════════════════════════════
   Detail reader - "Dark-glass side-sheet" (proto Variant 1).
   Frosted navy-glass panel sliding from the right: near-white text,
   cyan accents, 0.5px cyan hairline border. Identical treatment in BOTH
   light and dark mode (it mirrors the app's other dark popups), so every
   surface below is set from absolute glass tokens, NOT the theme-bound
   --iw-* vars. This is a SKIN-only change: the open/close/populate JS and
   all element ids/classes (.iw-detail, .iw-detail-head, .iw-detail-head-meta,
   #iwDetailClose, .iw-detail-scroll, .iw-detail-img, .iw-detail-body,
   .iw-detail-places, .iw-detail-route-stops, .iw-detail-foot, .iw-detail-link)
   are untouched. All selectors are scoped under .iw-detail / .iw-detail-backdrop
   so nothing leaks to the list, chips, search or page chrome.

   Glass vocabulary (= proto Variant 1 / .glass-legend):
     fill        rgba(9,28,53,0.72)
     blur        blur(22px) saturate(180%)
     cyan border rgba(105,254,255,0.30)
     fg          rgba(243,246,249,0.94)  fg-muted 0.66  fg-faint 0.46
     accent      cyan #69FEFF
   ──────────────────────────────────────────────────────────────────── */
.iw-detail-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(5,8,15,0.55);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  z-index: 200;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}
.iw-detail-backdrop.is-open {
  opacity: 1;
  pointer-events: auto;
}
.iw-detail {
  position: fixed;
  /* Connect to the very TOP of the screen (captain 2026-06-01: "de popup moet
     ook boven aan het scherm aansluiten"). This is a full-height modal sheet:
     it slides in over the floating bb-header (panel z-index 201 > header), so
     there is no strip / gap above it. The panel's own .iw-detail-head carries
     the safe-area-top padding so the close-X clears the status bar / notch in
     the iOS standalone PWA. (Supersedes the 2026-05-31 abut-the-header rule.) */
  top: 0;
  right: 0;
  bottom: 0;
  width: min(560px, 100%);
  /* Frosted navy glass: subtle top sheen fading into the navy fill. */
  background:
    linear-gradient(180deg, rgba(255,255,255,0.06) 0%, rgba(9,28,53,0) 30%),
    rgba(9,28,53,0.72);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  backdrop-filter: blur(22px) saturate(180%);
  border-left: 0.5px solid rgba(105,254,255,0.30);
  color: rgba(243,246,249,0.94);
  z-index: 201;
  box-shadow: -24px 0 60px rgba(0,0,0,0.5), inset 1px 0 0 rgba(255,255,255,0.06);
  transform: translateX(100%);
  transition: transform 0.25s ease;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.iw-detail.is-open { transform: translateX(0); }
@media (min-width: 960px) {
  /* Desktop: same full-height right drawer connected to the top (consistency -
     one behaviour at every viewport per the captain's connect-to-top request). */
  .iw-detail { top: 0; }
}
/* F2 (iOS-sim UX audit 2026-07-14): the reader is position:fixed; bottom:0, so
   its sticky .iw-detail-foot (the "Bekijk bron ->" source link) and the place-tag
   row at the end of the scroll sat BEHIND the shell's floating bottom tab bar -
   the source link rendered in the home-indicator gap below the nav and the place
   tags were unreachable behind it. Inside the app shell, reserve the nav height
   (--bbs-shell-nav-h, injected per-iframe by pages/app.html) so the flex column
   ends clear of the nav. 0px in the standalone PWA / plain browser where the var
   is unset, so no change off-shell. */
html.bb-embed .iw-detail { padding-bottom: var(--bbs-shell-nav-h, 0px); }
.iw-detail-head {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 24px;
  border-bottom: 0.5px solid rgba(255,255,255,0.08);
  background: transparent;
  /* Panel now sits at top:0, so the head itself must clear the status bar /
     notch safe area in the standalone PWA. Single count (the `top` no longer
     adds safe-top) - no double-count gap. Falls back to 14px in browsers. */
  padding-top: calc(14px + var(--bb-safe-top, 0px));
}
.iw-detail-head-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  color: rgba(243,246,249,0.46);
  font-weight: 600;
  letter-spacing: 0.06em;
}
/* Category eyebrow pill: cyan-on-glass, replacing the white-mode tint
   badge. Scoped to the head so the list/card .iw-cat-badge tints are
   left intact. */
.iw-detail-head-meta .iw-cat-badge {
  background: rgba(105,254,255,0.12);
  color: var(--bb-cyan, #69FEFF);
  border: 0.5px solid rgba(105,254,255,0.28);
  border-radius: 999px;
  padding: 4px 11px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
/* Circular close-X, consistent with the app's other glass popups. */
.iw-detail-close {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  background: rgba(255,255,255,0.10);
  border: 0.5px solid rgba(255,255,255,0.18);
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 22px;
  line-height: 1;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transition: background-color 180ms ease, transform 180ms cubic-bezier(.16,.84,.44,1);
}
.iw-detail-close:hover {
  background: rgba(255,255,255,0.18);
  transform: scale(1.06);
}
.iw-detail-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 20px 24px 28px;
  -webkit-overflow-scrolling: touch;
}
.iw-detail-img {
  width: 100%;
  aspect-ratio: 16/9;
  background: rgba(255,255,255,0.04) center/cover no-repeat;
  border: 0.5px solid rgba(255,255,255,0.10);
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
  margin-bottom: 18px;
}
/* In-reader location map (captain 2026-05-31): a compact non-interactive
   Google map at the top of the reader, shown only when the fact has GPS
   coordinates. Same rounded glass framing as the image block. */
.iw-detail-map {
  width: 100%;
  height: 180px;
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 18px;
  border: 0.5px solid rgba(255,255,255,0.10);
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
  background: rgba(255,255,255,0.04);
}
.iw-detail h2 {
  margin: 0 0 12px;
  font-size: 27px;
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -0.018em;
  color: #fff;
}
.iw-detail-body {
  font-size: 14.5px;
  line-height: 1.68;
  color: rgba(243,246,249,0.94);
  white-space: pre-wrap;
}
.iw-detail-body p { margin: 0 0 14px; }
.iw-detail-body p:last-child { margin-bottom: 0; }
.iw-detail-body strong { color: #fff; font-weight: 600; }
.iw-detail-places {
  margin: 16px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.iw-detail .iw-place-tag {
  font-size: 11.5px;
  background: rgba(255,255,255,0.06);
  border: 0.5px solid rgba(255,255,255,0.14);
  border-radius: 999px;
  padding: 3px 10px;
  color: rgba(243,246,249,0.72);
  cursor: pointer;
  transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease;
}
.iw-detail .iw-place-tag:hover {
  background: rgba(105,254,255,0.12);
  color: var(--bb-cyan, #69FEFF);
  border-color: rgba(105,254,255,0.30);
}
.iw-detail-route-stops {
  margin: 18px 0 0;
  padding: 14px 16px;
  background: rgba(255,255,255,0.04);
  border: 0.5px solid rgba(255,255,255,0.10);
  border-radius: 14px;
}
.iw-detail-route-stops h3 {
  margin: 0 0 10px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--bb-cyan, #69FEFF);
}
.iw-detail-route-stops ol {
  margin: 0;
  padding-left: 20px;
}
.iw-detail-route-stops li {
  margin-bottom: 4px;
  font-size: 13px;
  color: rgba(243,246,249,0.88);
}
.iw-detail-foot {
  flex-shrink: 0;
  padding: 16px 24px;
  border-top: 0.5px solid rgba(255,255,255,0.08);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  background: rgba(9,28,53,0.30);
}
.iw-detail .iw-detail-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--bb-cyan, #69FEFF);
  text-decoration: none;
  transition: opacity 160ms ease;
}
.iw-detail .iw-detail-link:hover { opacity: 0.85; text-decoration: none; }

/* @supports fallback: solidify the glass where backdrop-filter is absent
   so the white text never lands on a translucent surface. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .iw-detail { background: rgba(9,28,53,0.97); }
}

/* ────────────────────────────────────────────────────────────────────
   LIGHT MODE reader surface (captain 2026-05-31: "dark mode is dit wel
   mooi, maar klopt niet qua light mode" - the side-sheet stayed dark glass
   over the light page). The dark-glass rules above are the default; these
   higher-specificity overrides flip the reader to a light frosted surface
   when the app theme is not dark, so it matches the rest of light mode
   (dark ink on light, brand-blue accents instead of cyan).
   ──────────────────────────────────────────────────────────────────── */
html:not([data-theme="dark"]) .iw-detail {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.86) 0%, rgba(255,255,255,0.97) 30%),
    rgba(255,255,255,0.97);
  border-left: 0.5px solid var(--iw-border);
  color: var(--iw-ink);
  box-shadow: -24px 0 60px rgba(6,18,35,0.18), inset 1px 0 0 rgba(255,255,255,0.7);
}
html:not([data-theme="dark"]) .iw-detail-head { border-bottom-color: var(--iw-border); }
html:not([data-theme="dark"]) .iw-detail-head-meta { color: var(--iw-muted); }
html:not([data-theme="dark"]) .iw-detail-head-meta .iw-cat-badge {
  background: var(--iw-accent-tint);
  color: var(--iw-accent);
  border-color: transparent;
}
html:not([data-theme="dark"]) .iw-detail-close {
  background: rgba(9,28,53,0.06);
  border-color: rgba(9,28,53,0.12);
  color: var(--iw-ink);
}
html:not([data-theme="dark"]) .iw-detail-close:hover { background: rgba(9,28,53,0.12); }
html:not([data-theme="dark"]) .iw-detail h2 { color: var(--iw-ink); }
html:not([data-theme="dark"]) .iw-detail-body { color: var(--iw-ink); }
html:not([data-theme="dark"]) .iw-detail-body strong { color: var(--iw-navy); }
html:not([data-theme="dark"]) .iw-detail-img,
html:not([data-theme="dark"]) .iw-detail-map {
  background-color: var(--iw-bg-soft);
  border-color: var(--iw-border);
  box-shadow: 0 8px 24px rgba(6,18,35,0.12);
}
html:not([data-theme="dark"]) .iw-detail .iw-place-tag {
  background: var(--iw-bg-soft);
  border-color: var(--iw-border);
  color: var(--iw-muted);
}
html:not([data-theme="dark"]) .iw-detail .iw-place-tag:hover {
  background: var(--iw-accent-tint);
  color: var(--iw-accent);
  border-color: var(--iw-accent);
}
html:not([data-theme="dark"]) .iw-detail-route-stops {
  background: var(--iw-bg-soft);
  border-color: var(--iw-border);
}
html:not([data-theme="dark"]) .iw-detail-route-stops h3 { color: var(--iw-accent); }
html:not([data-theme="dark"]) .iw-detail-route-stops li { color: var(--iw-ink); }
html:not([data-theme="dark"]) .iw-detail-foot {
  border-top-color: var(--iw-border);
  background: rgba(244,245,248,0.65);
}
html:not([data-theme="dark"]) .iw-detail .iw-detail-link { color: var(--iw-accent); }
html:not([data-theme="dark"]) .iw-detail-backdrop { background: rgba(6,18,35,0.35); }

/* ---- Leaflet marker bubbles - small, category-coded ---- */
.iw-gmaps-marker-legacy {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  border: 2px solid #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
  cursor: pointer;
}
.iw-gmaps-marker-legacy.cat-ommetje-met-tom        { background: #3366FF; }
.iw-gmaps-marker-legacy.cat-ommetje-boek           { background: #B45309; }
.iw-gmaps-marker-legacy.cat-aan-de-grachten-post   { background: #0F7B4F; }
.iw-gmaps-marker-legacy.cat-aan-de-grachten-poi    { background: #5E35B1; }
.iw-gmaps-marker-legacy.cat-aan-de-grachten-route  { background: #B45309; }
.iw-gmaps-marker-legacy.cat-aan-de-grachten-dossier{ background: #FF503C; }
.iw-gmaps-marker-legacy.cat-amsterdam-fundering    { background: #4B5563; }
.iw-gmaps-marker-legacy.cat-amsterdam-bruggen      { background: #091C35; }
.iw-gmaps-marker-legacy.cat-amsterdam-artis        { background: #0F7B4F; }
.iw-gmaps-marker-legacy.cat-amsterdam-lastage      { background: #5E35B1; }
.iw-gmaps-marker-legacy.cat-routes                 { background: #3366FF; }

/* ---- Mobile (< 768px) ---- */
@media (max-width: 767px) {
  .iw-main {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
  }
  .iw-map-wrap {
    display: none;
    border-left: 0;
    border-top: 1px solid var(--iw-border);
  }
  .iw-main.show-map .iw-list { display: none; }
  .iw-main.show-map .iw-map-wrap { display: block; }
  .iw-map-toggle { display: inline-flex; }
  .iw-card-img { width: 100px; }
  .iw-detail { width: 100%; }
  .iw-detail-scroll { padding: 18px 18px 32px; }
}

/* ───────────────────────────────────────────────────────────────────────
   Map popup: BOTH the outer frosted InfoWindow chrome AND the popup
   content rules come from styles/shared-overlays.css (single owner,
   Commit K 2026-07-06), loaded by fun-facts.html - so the weetjes map
   reads identically to the route map with zero local copies. Only the
   letter MARKER below is page-specific.
   ─────────────────────────────────────────────────────────────────────── */

/* Round letter marker: navy GLASS disc + cyan ring (identical recipe to the
   route stop-pin; only the glyph differs - a letter here vs a number there). */
.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;
  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}
}