/* ─── Reset & Base ───────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* ── Canonical design tokens (Gate 1D) ─────────────────────────────── */
  /* Surfaces */
  --color-paper:       #e8d5a3;
  --color-paper-dark:  rgba(48,36,16,0.98);
  --color-ink:         #0e0b06;
  --color-ink-faint:   #7a8a5a;
  --color-sepia:       #a0522d;
  --color-accent:      #c9a84c;   /* canonical compass gold (UI) */
  --color-accent-deep: #9b1c2e;   /* north-needle crimson */
  --color-water:       #1b2a4a;   /* prussian map water */

  /* Typography — period-accurate stacks (overridden by NA token block below,
     but kept here so legacy var(--fm) aliases resolve to the correct face) */
  --font-display: 'Cinzel Decorative', 'Cinzel', Georgia, serif;
  --font-body:    'IM Fell English', 'EB Garamond', Georgia, serif;
  --font-data:    'EB Garamond', Georgia, serif;
  --font-label:   'Cinzel', Georgia, serif;

  /* Spacing scale */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px;

  /* ── Legacy aliases — preserve all working features ────────────────── */
  --ink:     var(--color-ink);
  --panel:   var(--color-paper-dark);
  --panel2:  rgba(22,17,9,0.98);
  --sand:    var(--color-paper);
  --gold:    var(--color-accent);
  --crimson: var(--color-accent-deep);
  --dim:     var(--color-ink-faint);
  --b1:      rgba(201,168,76,0.14);
  --b2:      rgba(201,168,76,0.32);
  --fm:      var(--font-body);
  --tb-h:    84px;   /* topbar total height (row1 48px + row2 36px) */
}

/* ── UI Master Build v2: Nautical Expedition Design Token System ─────────── */
:root {
  /* SURFACES */
  --na-navy:          #0B1628;
  --na-navy-mid:      #0F1F3D;
  --na-navy-light:    #162444;
  --na-parchment:     #F4EDD8;
  --na-parchment-dim: #E8DEC5;

  /* GOLD SYSTEM */
  --na-gold-bright:   #E2C06A;
  --na-gold-mid:      #C8A84B;
  --na-gold-deep:     #A07830;
  --na-gold-foil:     #F0D080;

  /* TEXT */
  --na-text-primary:  #E8D8A0;
  --na-text-secondary:#A89060;
  --na-text-dim:      #6A5A3A;
  --na-text-ink:      #1A1008;

  /* GLASS TREATMENT */
  --na-glass-navy:    rgba(11, 22, 40, 0.85);
  --na-glass-parch:   rgba(244, 237, 216, 0.82);
  --na-glass-blur:    12px;
  --na-glass-border:  rgba(200, 168, 75, 0.35);

  /* STATUS */
  --na-status-open:   #8BAF6A;
  --na-status-caution:#C8A048;
  --na-status-complex:#B06A30;
  --na-status-closed: #4A3828;
  --na-status-info:   #5A7A9A;

  /* SPACING (8px base grid) */
  --sp-1: 4px;   --sp-2: 8px;   --sp-3: 12px;  --sp-4: 16px;
  --sp-5: 24px;  --sp-6: 32px;  --sp-7: 48px;  --sp-8: 64px;
  --sp-9: 96px;  --sp-10: 128px;

  /* BORDERS */
  --na-border-gold:   1px solid var(--na-gold-mid);
  --na-border-glass:  1px solid var(--na-glass-border);
  --na-border-double: 3px double var(--na-gold-mid);
  --na-border-radius: 2px;

  /* ANIMATION EASING (period-appropriate, nothing bouncy) */
  --ease-chart:   cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-needle:  cubic-bezier(0.34, 1.2, 0.64, 1);
  --ease-panel:   cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:     150ms;
  --dur-mid:      300ms;
  --dur-slow:     600ms;
  --dur-dramatic: 1200ms;

  /* TYPOGRAPHY (new face system) */
  --font-display:  'Cinzel Decorative', 'Cinzel', Georgia, serif;
  --font-body:     'IM Fell English', 'EB Garamond', Georgia, serif;
  --font-data:     'EB Garamond', Georgia, serif;
  --font-label:    'Cinzel', Georgia, serif;

  /* TYPE SCALE */
  --ts-hero:   clamp(2rem, 5vw, 4rem);
  --ts-h1:     clamp(1.5rem, 3vw, 2.5rem);
  --ts-h2:     clamp(1.25rem, 2vw, 1.75rem);
  --ts-h3:     1.25rem;
  --ts-body:   1rem;
  --ts-small:  0.875rem;
  --ts-label:  0.75rem;
  --ts-micro:  0.6875rem;

  /* TRACKING */
  --track-tight:  -0.01em;
  --track-normal:  0;
  --track-wide:    0.08em;
  --track-wider:   0.15em;

  /* LAYOUT */
  --sidebar-w:     240px;   /* full desktop sidebar */
  --sidebar-w-sm:  64px;    /* collapsed laptop sidebar */
  --rail-w:        72px;    /* tablet rail */
  --header-h:      56px;    /* top header bar (unified glass menu) */
  --bottom-nav-h:  56px;    /* mobile bottom nav */
}

/* ── Glass Panel component ───────────────────────────────────────────────── */
.glass-panel {
  background:         var(--na-glass-navy);
  backdrop-filter:    blur(var(--na-glass-blur)) saturate(1.2);
  -webkit-backdrop-filter: blur(var(--na-glass-blur)) saturate(1.2);
  border:             var(--na-border-glass);
  box-shadow:
    inset 0 0 0 1px rgba(200, 168, 75, 0.12),
    0 8px 32px rgba(0, 0, 0, 0.4);
  border-radius:      var(--na-border-radius);
}

/* ── Gold Rule divider ───────────────────────────────────────────────────── */
.gold-rule {
  height: 1px;
  background: linear-gradient(
    to right,
    transparent,
    var(--na-gold-deep) 15%,
    var(--na-gold-mid)  50%,
    var(--na-gold-deep) 85%,
    transparent
  );
  margin: var(--sp-4) 0;
  border: none;
}

/* ── Period Badge ────────────────────────────────────────────────────────── */
.period-badge {
  font-family:    var(--font-label);
  font-size:      var(--ts-micro);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  padding: 2px 8px;
  border:         var(--na-border-gold);
  background:     transparent;
  color:          var(--na-gold-mid);
  border-radius:  var(--na-border-radius);
}

/* ── TERRA INCOGNITA empty state ─────────────────────────────────────────── */
.terra-incognita {
  font-family:    var(--font-label);
  font-size:      var(--ts-small);
  letter-spacing: var(--track-wider);
  text-transform: uppercase;
  color:          var(--na-text-dim);
  text-align:     center;
  padding: var(--sp-5) var(--sp-4);
}

html, body {
  width: 100%; height: 100%; overflow: hidden;
  background: var(--na-navy, var(--ink));
  font-family: var(--font-label, var(--fm));
  /* Flex column: topbar takes its natural height, map fills the rest */
  display: flex; flex-direction: column;
}

@keyframes compassSearch {
  0%   { transform: rotate(0deg); }
  20%  { transform: rotate(4deg); }
  45%  { transform: rotate(0deg); }
  70%  { transform: rotate(-3deg); }
  100% { transform: rotate(0deg); }
}

#logo-icon {
  width: 46px; height: 46px; flex-shrink: 0;
  transform-origin: 28px 28px;
  animation: compassSearch 4s ease-in-out infinite;
}

/* ─── Loading Overlay ────────────────────────────────────────────────────── */
#loading-overlay {
  position: fixed; inset: 0; z-index: 9999;
  background: var(--ink);
  display: flex; align-items: center; justify-content: center;
  flex-direction: column;
  transition: opacity 0.5s ease;
}
#loading-overlay.fade-out { opacity: 0; pointer-events: none; }
@keyframes lo-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  #loading-overlay svg { animation: none !important; }
}

/* ─── Top Bar ────────────────────────────────────────────────────────────── */
#topbar {
  /* Relative — stays at the top as a flex item; map fills the rest */
  position: relative; z-index: 1200;
  flex-shrink: 0;   /* never shrink; map gets whatever is left */
  /* Logo area (first ~270 px) stays fully opaque so the compass reads clearly.
     Everything to the right fades to 78 % opacity so the map shows through. */
  background: linear-gradient(
    to right,
    rgba(48,36,16,0.98) 0px,
    rgba(48,36,16,0.98) 268px,
    rgba(28,20,8,0.78)  370px
  );
  border-bottom: 1px solid var(--b2);
  backdrop-filter: blur(20px);
}

#topbar::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0,0,0,0.06) 0px,
    rgba(0,0,0,0.06) 1px,
    transparent 1px,
    transparent 3px
  );
  opacity: 0.03;
  z-index: 0;
}

/* Row 1: Logo · Months · Search */
#tb-row1 {
  display: flex; align-items: center; gap: 14px;
  padding: 0 18px;
  height: 58px;
  border-bottom: 1px solid rgba(201,168,76,0.07);
}

/* Row 2: Layers · Divider · Transport */
#tb-row2 {
  display: flex; align-items: center; gap: 5px;
  padding: 0 18px;
  height: 42px;
  overflow-x: auto; scrollbar-width: none;
  /* Avoid layout thrash on narrow viewports: don't shrink children */
  flex-wrap: nowrap;
}
#tb-row2::-webkit-scrollbar { display: none; }
#tb-row2 > * { flex-shrink: 0; }

/* Vertical divider between groups in row 2 */
.tb-div {
  width: 1px; height: 18px; flex-shrink: 0;
  background: rgba(201,168,76,0.18);
  margin: 0 6px;
}

/* ─── Logo (compact topbar version) ─────────────────────────────────────── */
/* Retired: the topbar logo duplicated the persistent #na-header brand at every
   breakpoint. #na-header is now the single brand bar; this block is hidden. */
#logo {
  display: none;
  align-items: center; gap: 9px;
  flex-shrink: 0; padding: 0;
  text-decoration: none;
}
#logo-icon { width: 46px; height: 46px; flex-shrink: 0; }
/* Antique world map silhouette behind the wordmark — faint gold continents
   on dark ground, with a lat/long graticule grid. Purely decorative: opacity
   is kept low so it never competes with the text readability. */
#logo-text  {
  display: flex; flex-direction: column; line-height: 1;
  position: relative;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http:%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20200%2038%22%20width%3D%22200%22%20height%3D%2238%22%20shape-rendering%3D%22crispEdges%22%3E%20%20%3C!--%20Background%20--%3E%20%20%3Crect%20width%3D%22200%22%20height%3D%2238%22%20rx%3D%222%22%20fill%3D%22%230a0804%22%2F%3E%20%20%3Cline%20x1%3D%2216.67%22%20y1%3D%220%22%20x2%3D%2216.67%22%20y2%3D%2238%22%20stroke%3D%22%23c9a84c%22%20stroke-width%3D%220.35%22%20opacity%3D%220.12%22%2F%3E%20%20%3Cline%20x1%3D%2233.33%22%20y1%3D%220%22%20x2%3D%2233.33%22%20y2%3D%2238%22%20stroke%3D%22%23c9a84c%22%20stroke-width%3D%220.35%22%20opacity%3D%220.12%22%2F%3E%20%20%3Cline%20x1%3D%2250%22%20y1%3D%220%22%20x2%3D%2250%22%20y2%3D%2238%22%20stroke%3D%22%23c9a84c%22%20stroke-width%3D%220.35%22%20opacity%3D%220.12%22%2F%3E%20%20%3Cline%20x1%3D%2266.67%22%20y1%3D%220%22%20x2%3D%2266.67%22%20y2%3D%2238%22%20stroke%3D%22%23c9a84c%22%20stroke-width%3D%220.35%22%20opacity%3D%220.12%22%2F%3E%20%20%3Cline%20x1%3D%2283.33%22%20y1%3D%220%22%20x2%3D%2283.33%22%20y2%3D%2238%22%20stroke%3D%22%23c9a84c%22%20stroke-width%3D%220.35%22%20opacity%3D%220.12%22%2F%3E%20%20%3Cline%20x1%3D%22100%22%20y1%3D%220%22%20x2%3D%22100%22%20y2%3D%2238%22%20stroke%3D%22%23c9a84c%22%20stroke-width%3D%220.35%22%20opacity%3D%220.12%22%2F%3E%20%20%3Cline%20x1%3D%22116.67%22%20y1%3D%220%22%20x2%3D%22116.67%22%20y2%3D%2238%22%20stroke%3D%22%23c9a84c%22%20stroke-width%3D%220.35%22%20opacity%3D%220.12%22%2F%3E%20%20%3Cline%20x1%3D%22133.33%22%20y1%3D%220%22%20x2%3D%22133.33%22%20y2%3D%2238%22%20stroke%3D%22%23c9a84c%22%20stroke-width%3D%220.35%22%20opacity%3D%220.12%22%2F%3E%20%20%3Cline%20x1%3D%22150%22%20y1%3D%220%22%20x2%3D%22150%22%20y2%3D%2238%22%20stroke%3D%22%23c9a84c%22%20stroke-width%3D%220.35%22%20opacity%3D%220.12%22%2F%3E%20%20%3Cline%20x1%3D%22166.67%22%20y1%3D%220%22%20x2%3D%22166.67%22%20y2%3D%2238%22%20stroke%3D%22%23c9a84c%22%20stroke-width%3D%220.35%22%20opacity%3D%220.12%22%2F%3E%20%20%3Cline%20x1%3D%22183.33%22%20y1%3D%220%22%20x2%3D%22183.33%22%20y2%3D%2238%22%20stroke%3D%22%23c9a84c%22%20stroke-width%3D%220.35%22%20opacity%3D%220.12%22%2F%3E%20%20%3Cline%20x1%3D%220%22%20y1%3D%224.22%22%20x2%3D%22200%22%20y2%3D%224.22%22%20stroke%3D%22%23c9a84c%22%20stroke-width%3D%220.35%22%20opacity%3D%220.12%22%2F%3E%20%20%3Cline%20x1%3D%220%22%20y1%3D%228.44%22%20x2%3D%22200%22%20y2%3D%228.44%22%20stroke%3D%22%23c9a84c%22%20stroke-width%3D%220.35%22%20opacity%3D%220.12%22%2F%3E%20%20%3Cline%20x1%3D%220%22%20y1%3D%2212.67%22%20x2%3D%22200%22%20y2%3D%2212.67%22%20stroke%3D%22%23c9a84c%22%20stroke-width%3D%220.35%22%20opacity%3D%220.12%22%2F%3E%20%20%3Cline%20x1%3D%220%22%20y1%3D%2214.50%22%20x2%3D%22200%22%20y2%3D%2214.50%22%20stroke%3D%22%23c9a84c%22%20stroke-width%3D%220.4%22%20stroke-dasharray%3D%222,3%22%20opacity%3D%220.14%22%2F%3E%20%20%3Cline%20x1%3D%220%22%20y1%3D%2221.11%22%20x2%3D%22200%22%20y2%3D%2221.11%22%20stroke%3D%22%23c9a84c%22%20stroke-width%3D%220.6%22%20opacity%3D%220.20%22%2F%3E%20%20%3Cline%20x1%3D%220%22%20y1%3D%2227.73%22%20x2%3D%22200%22%20y2%3D%2227.73%22%20stroke%3D%22%23c9a84c%22%20stroke-width%3D%220.4%22%20stroke-dasharray%3D%222,3%22%20opacity%3D%220.14%22%2F%3E%20%20%3Cline%20x1%3D%220%22%20y1%3D%2229.56%22%20x2%3D%22200%22%20y2%3D%2229.56%22%20stroke%3D%22%23c9a84c%22%20stroke-width%3D%220.35%22%20opacity%3D%220.12%22%2F%3E%20%20%3Cpath%20d%3D%22M76.11,0%20L88.89,0%20L90.0,1.41%20L86.11,3.38%20L76.11,4.22%20L71.11,2.53%20Z%22%20fill%3D%22%23c9a84c%22%20opacity%3D%220.14%22%2F%3E%20%20%3Cpath%20d%3D%22M6.67,1.97%20L23.33,0.84%20L47.22,0.84%20L69.44,7.04%20L70.56,7.88%20L63.33,8.73%20L58.33,11.26%20L54.44,14.36%20L50.0,15.48%20L52.22,18.3%20L57.22,18.86%20L55.56,18.58%20L53.89,18.3%20L50.0,16.61%20L46.11,13.79%20L41.67,15.48%20L35.0,12.1%20L31.11,7.32%20L27.78,5.07%20Z%22%20fill%3D%22%23c9a84c%22%20opacity%3D%220.14%22%2F%3E%20%20%3Cpath%20d%3D%22M58.89,17.73%20L72.22,19.7%20L80.56,22.52%20L80.56,27.3%20L71.11,30.68%20L63.89,36.59%20L61.11,35.19%20L58.33,29.56%20L55.0,22.52%20L55.56,18.58%20Z%22%20fill%3D%22%23c9a84c%22%20opacity%3D%220.14%22%2F%3E%20%20%3Cpath%20d%3D%22M95.0,10.98%20L95.0,8.73%20L98.89,6.47%20L102.78,4.22%20L108.33,1.41%20L115.56,1.41%20L116.67,4.22%20L123.33,9.57%20L120.0,10.98%20L115.56,10.98%20L112.22,10.7%20L108.33,10.41%20L105.56,10.41%20L101.67,9.01%20L97.22,10.98%20Z%22%20fill%3D%22%23c9a84c%22%20opacity%3D%220.14%22%2F%3E%20%20%3Cpath%20d%3D%22M97.22,10.98%20L105.56,10.7%20L120.56,12.39%20L128.33,17.73%20L124.44,24.49%20L118.89,27.3%20L114.44,30.68%20L110.0,30.96%20L104.44,22.52%20L97.22,19.7%20L90.56,16.89%20L90.56,14.92%20Z%22%20fill%3D%22%23c9a84c%22%20opacity%3D%220.14%22%2F%3E%20%20%3Cpath%20d%3D%22M115.0,9.29%20L120.56,0.84%20L138.89,0.84%20L172.22,1.41%20L194.44,2.81%20L180.56,8.44%20L166.67,14.92%20L157.78,20.83%20L144.44,18.86%20L133.33,14.92%20L123.33,17.73%20L120.56,12.39%20L115.56,10.98%20L123.33,9.57%20Z%22%20fill%3D%22%23c9a84c%22%20opacity%3D%220.14%22%2F%3E%20%20%3Cpath%20d%3D%22M163.33,27.3%20L167.78,26.18%20L176.11,24.49%20L181.67,26.46%20L186.11,28.43%20L183.33,31.81%20L177.78,31.81%20L172.78,30.12%20L168.89,30.68%20L163.33,30.68%20Z%22%20fill%3D%22%23c9a84c%22%20opacity%3D%220.14%22%2F%3E%20%20%3Cpath%20d%3D%22M172.22,12.39%20L178.33,9.85%20L180.56,8.73%20L178.33,8.73%20L172.22,11.82%20Z%22%20fill%3D%22%23c9a84c%22%20opacity%3D%220.14%22%2F%3E%20%20%3Cpath%20d%3D%22M195.56,30.68%20L196.67,32.65%20L193.33,34.06%20L192.78,33.5%20Z%22%20fill%3D%22%23c9a84c%22%20opacity%3D%220.14%22%2F%3E%20%20%3Cellipse%20cx%3D%2290.0%22%20cy%3D%222.81%22%20rx%3D%222.5%22%20ry%3D%221.2%22%20fill%3D%22%23c9a84c%22%20opacity%3D%220.14%22%2F%3E%20%20%3Cellipse%20cx%3D%2298.89%22%20cy%3D%225.91%22%20rx%3D%221.5%22%20ry%3D%222.5%22%20fill%3D%22%23c9a84c%22%20opacity%3D%220.14%22%2F%3E%20%20%3Cellipse%20cx%3D%22126.11%22%20cy%3D%2226.74%22%20rx%3D%221.0%22%20ry%3D%223.0%22%20fill%3D%22%23c9a84c%22%20opacity%3D%220.14%22%2F%3E%20%20%3Ctext%20x%3D%221%22%20y%3D%2221.8%22%20font-size%3D%223%22%20font-family%3D%22Georgia,%20serif%22%20letter-spacing%3D%220.2%22%20fill%3D%22%23c9a84c%22%20opacity%3D%220.35%22%3EEQ%3C%2Ftext%3E%20%20%3Ctext%20x%3D%221%22%20y%3D%2212.3%22%20font-size%3D%222.6%22%20font-family%3D%22Georgia,%20serif%22%20fill%3D%22%23c9a84c%22%20opacity%3D%220.28%22%3E30%C2%B0N%3C%2Ftext%3E%20%20%3Ctext%20x%3D%221%22%20y%3D%224.1%22%20font-size%3D%222.6%22%20font-family%3D%22Georgia,%20serif%22%20fill%3D%22%23c9a84c%22%20opacity%3D%220.28%22%3E60%C2%B0N%3C%2Ftext%3E%20%20%3Crect%20x%3D%221%22%20y%3D%221%22%20width%3D%22198%22%20height%3D%2236%22%20rx%3D%221.5%22%20stroke%3D%22%23c9a84c%22%20stroke-width%3D%220.5%22%20opacity%3D%220.20%22%20fill%3D%22none%22%2F%3E%3C%2Fsvg%3E");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  border-radius: 3px;
  padding: 2px 5px;
}

#logo-wordmark {
  display: flex; align-items: baseline; gap: 4px;
}
#logo-nomadic {
  font-family: var(--fm); font-size: 18px; font-weight: 700;
  color: var(--sand); letter-spacing: 3px; line-height: 1;
}
#logo-almanac {
  font-family: var(--fm); font-size: 18px; font-weight: 400;
  color: var(--gold); letter-spacing: 3px; line-height: 1;
}
#logo-sub {
  font-family: var(--fm); font-size: 6.5px; font-weight: 400;
  color: var(--dim); letter-spacing: 2px; margin-top: 4px;
  white-space: nowrap;
}

/* ─── Month Buttons ──────────────────────────────────────────────────────── */
/* (#months-row removed — the month selector now lives in #na-header-months.) */
#months {
  display: flex; align-items: center; gap: 3px;
  flex-wrap: nowrap; /* always single row */
}

.mb {
  font-family: var(--fm); font-size: 11px; font-weight: 500;
  padding: 5px 9px; cursor: pointer; border-radius: 6px;
  background: rgba(201,168,76,0.04); border: 1px solid var(--b1);
  color: var(--dim); transition: all .12s; letter-spacing: .5px;
  white-space: nowrap; user-select: none; flex-shrink: 0;
}
.mb:hover { background: rgba(201,168,76,0.1); color: var(--sand); cursor: ew-resize; }
.mb.on {
  background: var(--crimson);
  color: var(--sand);
  border-color: var(--crimson);
  font-weight: 700;
  text-shadow: 0 0 8px rgba(232,213,163,0.6);
}
.mb.range { background: rgba(155,28,46,0.18); color: var(--sand); border-color: rgba(155,28,46,0.4); }

#btn-year {
  font-family: var(--fm); font-size: 8px; font-weight: 700;
  padding: 4px 9px; cursor: pointer; border-radius: 6px;
  background: rgba(201,168,76,0.06); border: 1px solid rgba(201,168,76,0.22);
  color: var(--gold); transition: all .12s; letter-spacing: .5px; margin-left: 3px;
  user-select: none; flex-shrink: 0;
}
#btn-year:hover { background: rgba(201,168,76,0.16); }
#btn-year.on    { background: var(--gold); color: var(--ink); }

/* ─── Layer Buttons ──────────────────────────────────────────────────────── */
#layers {
  display: flex; align-items: center; gap: 4px;
  flex-shrink: 0;
}

.lb {
  font-family: var(--fm); font-size: 10.5px; font-weight: 500;
  padding: 5px 11px; cursor: pointer; border-radius: 6px;
  background: rgba(201,168,76,0.04); border: 1px solid var(--b1);
  color: var(--dim); transition: all .12s;
  display: flex; align-items: center; gap: 5px; white-space: nowrap;
  letter-spacing: .3px; user-select: none;
}
.lb:hover { background: rgba(201,168,76,0.08); color: var(--sand); border-color: var(--b2); }
.lb:hover .lb-name { color: var(--lb-color, var(--sand)); filter: brightness(1.15); }
.lb.on {
  background: rgba(201,168,76,0.14);
  border-color: var(--b2);
  border-left: 3px solid var(--gold);
  box-shadow: 0 0 8px rgba(201,168,76,0.45), 0 0 2px rgba(201,168,76,0.3);
}
/* When a layer is chosen, collapse the chip to its emoji only (the name is
   available via the button's title/aria-label for accessibility). */
.lb.on .lb-name { display: none; }
.lb.on { padding: 5px 9px; }
.lb.on .lb-emoji { font-size: 15px; margin-right: 0; }

.lb-emoji { font-size: 11px; line-height: 1; flex-shrink: 0; margin-right: 1px; }
.lb-name  { font-weight: 700; color: var(--lb-color, var(--dim)); letter-spacing: .4px; }
.ldot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.ldiamond {
  width: 8px; height: 8px; flex-shrink: 0;
  transform: rotate(45deg); border-radius: 1px;
}

#btn-borders {
  font-family: var(--fm); font-size: 8.5px; font-weight: 500;
  padding: 4px 9px; cursor: pointer; border-radius: 6px;
  background: rgba(34,211,238,0.06); border: 1px solid rgba(34,211,238,0.22);
  color: #6a9aae; transition: all .12s;
  display: flex; align-items: center; gap: 5px; white-space: nowrap;
  letter-spacing: .3px; user-select: none;
}
#btn-borders:hover { background: rgba(34,211,238,0.12); color: #b0e0e8; border-color: rgba(34,211,238,0.45); }
#btn-borders.on    { background: rgba(34,211,238,0.10); color: #b0e0e8; border-color: rgba(34,211,238,0.45); }

#btn-political {
  font-family: var(--fm); font-size: 8.5px; font-weight: 500;
  padding: 4px 9px; cursor: pointer; border-radius: 6px;
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.18);
  color: #8a8aaa; transition: all .12s;
  display: flex; align-items: center; gap: 5px; white-space: nowrap;
  letter-spacing: .3px; user-select: none;
}
#btn-political:hover { background: rgba(255,255,255,0.10); color: #c8c8e0; border-color: rgba(255,255,255,0.38); }
#btn-political.on    { background: rgba(255,255,255,0.08); color: #c8c8e0; border-color: rgba(255,255,255,0.38); }

.lpolitical {
  width: 9px; height: 9px; flex-shrink: 0; border-radius: 1px;
  border: 1px solid rgba(255,255,255,0.45); background: transparent;
}

/* ─── Transport Layer Buttons ────────────────────────────────────────────── */
#transport {
  display: flex; align-items: center; gap: 4px;
  flex-shrink: 0;
}

.tb {
  font-family: var(--fm); font-size: 10.5px; font-weight: 500;
  padding: 5px 11px; cursor: pointer; border-radius: 6px;
  background: rgba(99,102,241,0.06); border: 1px solid rgba(99,102,241,0.22);
  color: #7a8aaa; transition: all .12s;
  display: flex; align-items: center; gap: 5px; white-space: nowrap;
  letter-spacing: .3px; user-select: none;
}
.tb:hover { background: rgba(99,102,241,0.14); color: #b0bce8; border-color: rgba(99,102,241,0.45); }
.tb.on {
  background: rgba(99,102,241,0.12);
  color: #b0bce8;
  border-color: rgba(99,102,241,0.45);
  box-shadow: 0 0 8px rgba(201,168,76,0.45), 0 0 2px rgba(201,168,76,0.3);
}

/* Roads tile layer — multiply blend makes white tiles transparent over satellite */
.transport-roads-layer { mix-blend-mode: multiply; }

/* ─── Search (inline in topbar row 1) ───────────────────────────────────── */
#search-wrap {
  position: relative; flex-shrink: 0; width: 168px;
}
#country-search {
  width: 100%;
  background: rgba(16,12,5,0.72);
  border: 1px solid rgba(232,213,163,0.28);
  border-radius: 5px;
  color: var(--sand);
  font-family: var(--fm); font-size: 10px;
  padding: 5px 10px;
  outline: none;
  letter-spacing: 0.04em;
}
#country-search::placeholder { color: rgba(232,213,163,0.35); }
#country-search:focus { border-color: rgba(232,213,163,0.6); background: rgba(16,12,5,0.92); }
#search-results {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 1600;
  background: rgba(16,12,5,0.97);
  border: 1px solid rgba(232,213,163,0.25);
  border-top: none;
  border-radius: 0 0 6px 6px;
  max-height: 220px;
  overflow-y: auto;
  display: none;
  box-shadow: 0 8px 24px rgba(0,0,0,.8);
}
#search-results .sr-item {
  padding: 7px 12px;
  font-family: var(--fm); font-size: 10px;
  color: var(--sand); cursor: pointer; letter-spacing: 0.03em;
}
#search-results .sr-item:hover { background: rgba(232,213,163,0.1); }

/* ─── Map ─────────────────────────────────────────────────────────────────── */
#map {
  /* Flex item — fills exactly the height remaining below the topbar.
     No JS needed; no hardcoded top offset; works on every screen size. */
  position: relative;
  flex: 1;
  min-height: 0;    /* required so flex child can shrink below its content */
  background: #060402;
}

/* Smooth transitions on choropleth only — scoped to avoid 4000+ simultaneous
   CSS transitions across all SVG paths at high zoom levels */
.leaflet-choroplethPane-pane { transition: opacity .2s ease; }
.leaflet-pane.leaflet-choroplethPane-pane .leaflet-interactive,
.leaflet-pane.leaflet-admin2Pane-pane .leaflet-interactive {
  /* "Layer Lens": 250ms recolour, pane-scoped (admin-1 also renders in
     choroplethPane). Borders / overlays are deliberately excluded to avoid
     thousands of simultaneous SVG transitions at high zoom. */
  transition: fill-opacity 250ms var(--ease-chart, ease), fill 250ms var(--ease-chart, ease);
}
@media (prefers-reduced-motion: reduce) {
  .leaflet-pane.leaflet-choroplethPane-pane .leaflet-interactive,
  .leaflet-pane.leaflet-admin2Pane-pane .leaflet-interactive { transition: none; }
}

/* Leaflet zoom controls sit inside #map so they are naturally below the topbar */
.leaflet-top.leaflet-left { top: 10px !important; left: 10px !important; }

/* ─── Tooltip: dark-glass theme ─────────────────────────────────────────── */
#tt {
  position: fixed; z-index: 2000; pointer-events: auto;
  background: rgba(14,11,6,0.95);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(201,168,76,0.25);
  border-top: 3px solid #c9a84c;
  border-radius: 12px;
  max-width: 340px; min-width: 260px;
  display: none;
  box-shadow: 0 16px 48px rgba(0,0,0,0.7), 0 0 0 1px rgba(201,168,76,0.08);
  font-family: var(--fm);
  max-height: 75vh; overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(201,168,76,0.3) transparent;
}
#tt::-webkit-scrollbar { width: 4px; }
#tt::-webkit-scrollbar-track { background: transparent; }
#tt::-webkit-scrollbar-thumb { background: rgba(201,168,76,0.3); border-radius: 2px; }

#tt-close {
  position: absolute; top: 8px; right: 9px;
  width: 22px; height: 22px; cursor: pointer;
  background: rgba(201,168,76,0.08);
  border: 1px solid rgba(201,168,76,0.2);
  border-radius: 5px;
  color: var(--gold);
  font-size: 11px; font-family: var(--fm);
  display: flex; align-items: center; justify-content: center;
  line-height: 1; user-select: none; z-index: 2001;
  transition: background .12s;
}
#tt-close:hover { background: rgba(201,168,76,0.18); color: var(--sand); }

.tth {
  padding: 14px 40px 12px 16px;
  border-bottom: 1px solid rgba(201,168,76,0.12);
  background: rgba(201,168,76,0.06);
  border-radius: 11px 11px 0 0;
}

.tth h3 {
  font-size: 17px; font-weight: 700;
  color: var(--sand); line-height: 1.2;
  margin-right: 4px;
}

.tth .ts {
  font-size: 9px; color: var(--gold);
  letter-spacing: 2px; text-transform: uppercase;
  margin-top: 4px; font-weight: 600;
}

.tth .tm {
  font-size: 8px; color: rgba(201,168,76,0.55);
  letter-spacing: 1.5px; margin-top: 3px;
}

.ttb { padding: 12px 16px 16px; }

.ttr {
  display: flex; align-items: flex-start; gap: 10px;
  margin-bottom: 8px; padding-bottom: 8px;
  border-bottom: 1px solid rgba(201,168,76,0.08);
}
.ttr:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: none; }

.ttstrip {
  width: 3px; border-radius: 2px;
  flex-shrink: 0; align-self: stretch; min-height: 38px;
}

.tti { flex: 1; min-width: 0; }

.ttln {
  font-size: 8px; color: var(--gold);
  text-transform: uppercase; letter-spacing: 1.8px;
  margin-bottom: 4px; font-weight: 600;
}

.ttrat {
  font-size: 13px; font-weight: 700;
  color: var(--sand); line-height: 1.2; margin-bottom: 2px;
}

.ttdesc {
  font-size: 10px; color: rgba(232,213,163,0.65);
  line-height: 1.65; margin-top: 3px;
}

.spark { display: flex; align-items: flex-end; gap: 1.5px; height: 16px; margin-top: 5px; }
.spark-bar { flex: 1; border-radius: 1px 1px 0 0; }
.spark-labels { display: flex; justify-content: space-between; margin-top: 2px; }
.spark-label { font-size: 5.5px; color: rgba(201,168,76,0.4); letter-spacing: .3px; }

/* Border status chips — dark-theme pill badges */
.tt-status-open {
  display: inline-block; padding: 1px 7px; border-radius: 20px;
  font-size: 8px; font-weight: 700; letter-spacing: 1px;
  text-transform: uppercase;
  background: rgba(8,145,178,0.15);
  border: 1px solid rgba(8,145,178,0.35);
  color: #38bdf8;
}
.tt-status-restricted {
  display: inline-block; padding: 1px 7px; border-radius: 20px;
  font-size: 8px; font-weight: 700; letter-spacing: 1px;
  text-transform: uppercase;
  background: rgba(217,119,6,0.15);
  border: 1px solid rgba(217,119,6,0.35);
  color: #fbbf24;
}
.tt-status-closed {
  display: inline-block; padding: 1px 7px; border-radius: 20px;
  font-size: 8px; font-weight: 700; letter-spacing: 1px;
  text-transform: uppercase;
  background: rgba(220,38,38,0.15);
  border: 1px solid rgba(220,38,38,0.35);
  color: #f87171;
}

/* ─── Map Status ─────────────────────────────────────────────────────────── */
#map-status {
  display: none;
  position: fixed; bottom: 18px; left: 14px; z-index: 1000;
  background: rgba(16,12,5,0.82); color: var(--sand);
  font-family: var(--fm); font-size: 10px;
  padding: 6px 10px; border-radius: 4px;
  pointer-events: none; letter-spacing: 0.04em;
}

/* ─── Legend (Field Guide) ───────────────────────────────────────────────── */
#legend {
  position: absolute; bottom: 30px; left: 12px; z-index: 1000;
  /* Frosted-glass legend: 84 % opaque so the map shows subtly through.
     backdrop-filter blur handles the see-through blur effect.
     Text stays fully legible — sand on dark has strong contrast.
     COMPACT + STAY OUT OF THE WAY: chrome (padding, width, gaps) is kept
     tight and the whole panel rests slightly translucent, returning to
     full opacity on hover/focus. Text sizes are deliberately UNCHANGED. */
  background: rgba(14,11,6,0.84); border: 1px solid var(--b2);
  border-left: 2px solid rgba(201,168,76,0.35);
  border-radius: 9px; padding: 9px 11px;
  backdrop-filter: blur(22px); min-width: 178px; max-width: 230px;
  display: none; box-shadow: 0 6px 24px rgba(0,0,0,.55);
  font-family: var(--fm);
  opacity: 0.88;
  transition: opacity 0.18s ease;
}
#legend:hover, #legend:focus-within { opacity: 1; }
/* Legend title — large, clickable, matches Best This Month toggle */
#legend h4, #legend-title {
  font-size: 12px; font-weight: 700; color: var(--gold);
  text-transform: uppercase; letter-spacing: 1.5px;
  margin-bottom: 7px; padding-bottom: 5px; border-bottom: 1px solid var(--b1);
  cursor: pointer; user-select: none; text-align: center;
}
/* Collapsible body wrapper — handles the expand/collapse animation */
#legend-body-wrap {
  max-height: 600px;
  overflow: hidden;
  transition: max-height 0.3s ease, opacity 0.22s ease;
  opacity: 1;
}

/* Inner legend body — independently scrollable when many layers are active */
#legend-body {
  max-height: calc(70vh - 160px);
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: rgba(201,168,76,0.3) transparent;
  padding-right: 3px;
}
#legend-body::-webkit-scrollbar { width: 3px; }
#legend-body::-webkit-scrollbar-track { background: transparent; }
#legend-body::-webkit-scrollbar-thumb { background: rgba(201,168,76,0.3); border-radius: 2px; }
/* Layer picker dropdown */
#legend-layer-picker {
  position: fixed; z-index: 1700;
  background: var(--panel); border: 1px solid var(--b2);
  border-radius: 10px; padding: 8px;
  display: none; flex-direction: column; gap: 2px;
  min-width: 175px; box-shadow: 0 8px 28px rgba(0,0,0,.88);
  backdrop-filter: blur(20px);
  max-height: 280px; overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(201,168,76,0.3) transparent;
}
#legend-layer-picker.open { display: flex; }
#legend-layer-btn {
  justify-content: center;
  text-align: center;
}
/* Disclosure caret next to the layer name → shows whether the colour key is open
   (the ▾ box on the right is the layer picker, a separate control). */
#legend-layer-btn::after {
  content: '\25BE'; display: inline-block; margin-left: 6px;
  font-size: 9px; opacity: 0.6; transition: transform .15s ease;
}
#legend-layer-btn.key-collapsed::after { transform: rotate(-90deg); opacity: 0.9; }
.llp-item {
  font-family: var(--fm); font-size: 9px;
  padding: 6px 8px; cursor: pointer; border-radius: 6px;
  color: var(--sand); display: flex; align-items: center; gap: 8px;
  transition: background .1s;
}
.llp-item:hover { background: rgba(201,168,76,0.1); }
.llp-item.active { background: rgba(201,168,76,0.08); color: var(--gold); font-weight: 700; }
.ll { margin-bottom: 10px; }
.ll:last-child { margin-bottom: 0; }
.ll-name {
  font-size: 10px; font-weight: 700;
  color: var(--gold); letter-spacing: 1.5px;
  text-align: center; text-transform: uppercase;
  margin-bottom: 6px; padding-bottom: 4px;
  border-bottom: 1px solid rgba(201,168,76,0.1);
}
.lr {
  display: flex; align-items: center;
  gap: 8px; margin-bottom: 3px;   /* tighter rows → a more compact colour key */
}
.lsw {
  width: 8px; height: 8px;        /* smaller key swatch */
  border-radius: 2px; flex-shrink: 0;
}
.lsw-diamond { width: 9px; height: 9px; flex-shrink: 0; transform: rotate(45deg); border-radius: 1px; }
.lsw-line {
  width: 24px; height: 2.5px;
  border-radius: 1px; flex-shrink: 0;
  margin: 3px 0; opacity: 0.8;
}
.llabel { font-size: 11px; color: var(--sand); line-height: 1.45; font-weight: 500; letter-spacing: 0.2px; }
.llabel-note {
  font-size: 8px; color: rgba(201,168,76,0.5);
  letter-spacing: .5px; margin-left: 6px;
}

/* Clicking the layer name collapses ONLY the colour key (Best This Month stays). */
#legend-body { transition: max-height 0.28s ease, opacity 0.2s ease; }
#legend-body.collapsed {
  max-height: 0 !important; opacity: 0; overflow: hidden;
  margin: 0; padding-top: 0; padding-bottom: 0;
}

/* ── Light-mode legend & menus: dark ink so text is readable on parchment ──
   (in dark mode the sand/gold defaults above already have strong contrast). */
[data-theme="light"] #legend {
  background: rgba(244,237,216,0.94);
  border-color: rgba(120,86,40,0.28);
  border-left-color: rgba(150,110,50,0.55);
  box-shadow: 0 8px 32px rgba(60,40,10,0.22);
}
[data-theme="light"] #legend h4,
[data-theme="light"] #legend-title,
[data-theme="light"] #legend-layer-btn { color: #6B4E1E; border-bottom-color: rgba(120,86,40,0.22); }
[data-theme="light"] .llabel { color: #2E2008; }
[data-theme="light"] .ll-name { color: #6B4E1E; border-bottom-color: rgba(120,86,40,0.2); }
[data-theme="light"] #legend-collapse-arrow { color: #6B4E1E; background: rgba(120,86,40,0.12); }
[data-theme="light"] .llabel-note { color: rgba(120,86,40,0.7); }
[data-theme="light"] .legend-glyph-hint,
[data-theme="light"] .legend-decode-key span { color: #5A4020 !important; }
/* Layer-picker dropdown */
[data-theme="light"] #legend-layer-picker { background: rgba(246,239,219,0.98); border-color: rgba(120,86,40,0.28); }
[data-theme="light"] .llp-item { color: #2E2008; }
[data-theme="light"] .llp-item:hover { background: rgba(120,86,40,0.12); }
[data-theme="light"] .llp-item.active { background: rgba(201,168,76,0.22); color: #6B4E1E; }
/* Best This Month panel (lives inside the legend) */
[data-theme="light"] #best-toggle-label,
[data-theme="light"] #best-toggle-arrow { color: #6B4E1E; }
[data-theme="light"] #best-panel-list,
[data-theme="light"] #best-panel-list li { color: #2E2008; }

/* ─── Leaflet overrides ───────────────────────────────────────────────────── */
.leaflet-control-zoom {
  border: 1px solid var(--b2) !important;
  background: var(--panel) !important;
  border-radius: 3px !important;
  overflow: hidden;
}
.leaflet-control-zoom a {
  color: var(--sand) !important;
  background: transparent !important;
  font-family: var(--fm) !important;
  border-bottom-color: var(--b1) !important;
}
.leaflet-control-zoom a:hover { background: rgba(201,168,76,0.1) !important; }

.leaflet-control-attribution {
  background: rgba(10,8,3,.85) !important;
  color: #3a2a10 !important;
  font-size: 8px !important;
  font-family: var(--fm) !important;
}
.leaflet-control-attribution a { color: #5a4020 !important; }

/* ── Best This Month widget (inside legend) ───────── */
#best-toggle {
  display: none; /* shown by JS when a geographic layer is active */
  align-items: center; justify-content: space-between;
  margin-top: 12px; padding-top: 10px;
  border-top: 1px solid var(--b1);
  cursor: pointer; user-select: none;
  border-radius: 4px; padding: 6px 4px;
  transition: background .12s;
}
#best-toggle:hover { background: rgba(201,168,76,0.06); }
#best-toggle-label {
  font-size: 12px; font-weight: 700;
  color: var(--gold); letter-spacing: 1.5px; text-transform: uppercase;
  flex: 1; text-align: center;
}
#best-toggle-arrow {
  font-size: 9px; color: var(--gold); opacity: 0.7;
  transition: transform .18s ease;
}
#best-toggle.open #best-toggle-arrow { transform: rotate(180deg); }

#best-panel-list {
  margin: 4px 0 0; padding: 0; list-style: none;
  counter-reset: best-counter;
  max-height: 0; overflow: hidden;
  transition: max-height .25s ease, opacity .2s ease;
  opacity: 0;
}
#best-panel-list.open {
  max-height: 240px;   /* enough for 7 items */
  opacity: 1;
}
#best-panel-list li {
  counter-increment: best-counter;
  display: flex; align-items: center; gap: 7px;
  padding: 4px 4px; font-size: 10px; color: var(--sand);
  border-bottom: 1px solid rgba(232,213,163,0.07);
  cursor: pointer; transition: background .1s; border-radius: 3px;
}
#best-panel-list li:last-child { border-bottom: none; }
#best-panel-list li:hover { background: rgba(232,213,163,0.05); }
#best-panel-list li::before {
  content: counter(best-counter);
  font-size: 8px; color: rgba(232,213,163,0.35); min-width: 10px;
}
.best-swatch { width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0; }

/* ── Category dropdown buttons (replace single More ▾) ── */
.cat-btn {
  font-family: var(--fm); font-size: 10px; font-weight: 600;
  padding: 5px 10px; cursor: pointer; border-radius: 6px;
  background: rgba(201,168,76,0.04); border: 1px solid rgba(201,168,76,0.18);
  color: rgba(201,168,76,0.6); transition: all .12s;
  display: flex; align-items: center; gap: 4px; white-space: nowrap;
  letter-spacing: .3px; user-select: none; flex-shrink: 0;
}
.cat-btn:hover { background: rgba(201,168,76,0.12); border-color: var(--b2); color: var(--gold); }
.cat-btn.has-active { background: rgba(201,168,76,0.10); border-color: var(--b2); color: var(--sand); font-weight:700; }

/* Dropdown panels for category buttons and transport.
 * Display is toggled via inline style (display:flex / display:none).
 * The CSS baseline of display:none ensures consistent initial state even if
 * the inline style is absent, and prevents flash-of-visible on load. */
.cat-dropdown { display: none; }

.more-dropdown-label {
  font-size: 7px; font-weight: 700; letter-spacing: 1.6px;
  color: rgba(201,168,76,0.4); text-transform: uppercase;
  padding-bottom: 4px; border-bottom: 1px solid rgba(201,168,76,0.08);
  width: 100%;
}

/* ── Visa & Passport grouped section ─────────────── */
#visa-passport-group {
  display: flex; align-items: center; gap: 5px; flex-shrink: 0;
  padding: 3px 8px 3px 10px;
  background: rgba(104,152,192,0.06);
  border: 1px solid rgba(104,152,192,0.18);
  border-radius: 8px;
  position: relative;
}
#visa-passport-label {
  position: absolute; top: -8px; left: 8px;
  font-size: 7px; font-weight: 700; letter-spacing: 1.4px;
  color: rgba(104,152,192,0.6); text-transform: uppercase;
  background: var(--panel); padding: 0 3px;
  pointer-events: none;
}
#visa-btn-wrap { display: flex; align-items: center; }
/* ── Passport / Nationality Selector ─────────────── */
#passport-wrap { flex-shrink: 0; display: flex; align-items: center; }
#passport-select {
  background: rgba(14,10,4,0.75);
  border: 1px solid rgba(104,152,192,0.30);
  border-radius: 6px;
  color: rgba(104,152,192,0.85);
  font-family: var(--fm); font-size: 8.5px; font-weight: 500;
  padding: 4px 9px;
  cursor: pointer; letter-spacing: 0.05em;
  outline: none; transition: all .12s;
  white-space: nowrap;
}
#passport-select:hover { border-color: rgba(104,152,192,0.55); color: #90bcd8; }
#passport-select:focus { border-color: rgba(104,152,192,0.70); background: rgba(14,10,4,0.92); }
#passport-select option { background: #100c05; color: #c8d8e8; }
/* Pulse ring when visa layer is on but no nationality chosen */
#passport-select.needs-passport {
  border-color: rgba(201,168,76,0.55);
  color: rgba(201,168,76,0.85);
  animation: passport-pulse 1.6s infinite;
}
@keyframes passport-pulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(201,168,76,0); }
  50%      { box-shadow: 0 0 0 3px rgba(201,168,76,0.22); }
}

/* ─── First-visit onboarding hint ───────────────────────────────────────── */
/* Welcome card — persists until the traveller interacts with the site (any click,
   key, or map gesture dismisses it). No auto-fade: it must not "flash". */
#onboarding-hint {
  position: fixed; z-index: 3000;
  top: 50%; left: 50%; transform: translate(-50%, -50%);
  background: rgba(16,12,5,0.97); border: 1px solid var(--b2);
  border-top: 2px solid var(--gold); border-radius: 14px;
  padding: 22px 26px 22px; text-align: center;
  font-family: var(--fm); pointer-events: auto;
  box-shadow: 0 16px 48px rgba(0,0,0,.88);
  /* Explicit width (not just max-width) so the fixed card uses its intended
     size instead of shrink-to-fitting to a too-narrow box on phones. */
  width: min(430px, 92vw);
  animation: na-hint-in .45s ease forwards;
}
#onboarding-hint.na-hint-out { animation: na-hint-out .3s ease forwards; }
#onboarding-hint .hint-title {
  font-size: 15px; color: var(--gold); letter-spacing: 0.10em;
  margin: 0 0 10px; text-transform: uppercase; font-weight: 600;
}
#onboarding-hint p {
  font-size: 11px; color: var(--sand); letter-spacing: 0.06em;
  line-height: 1.7; margin: 0;
}
#onboarding-hint .hint-sub {
  font-size: 8.5px; color: var(--dim); letter-spacing: 1.2px;
  margin-top: 6px; text-transform: uppercase;
}
#onboarding-hint .hint-actions {
  display: flex; gap: 8px; justify-content: center; margin-top: 16px; flex-wrap: wrap;
}
#onboarding-hint .hint-btn {
  font-family: var(--fm); font-size: 10px; letter-spacing: 0.08em;
  padding: 8px 16px; border-radius: 7px; cursor: pointer;
  background: rgba(201,168,76,0.08); border: 1px solid var(--b2);
  color: var(--sand); transition: background .15s, border-color .15s;
}
#onboarding-hint .hint-btn:hover { background: rgba(201,168,76,0.16); border-color: var(--gold); }
#onboarding-hint .hint-btn.primary {
  background: var(--gold); border-color: var(--gold); color: #1a1305; font-weight: 600;
}
#onboarding-hint .hint-btn.primary:hover { background: #d9b94f; }
@keyframes na-hint-in {
  from { opacity: 0; transform: translate(-50%, -46%); }
  to   { opacity: 1; transform: translate(-50%, -50%); }
}
@keyframes na-hint-out {
  from { opacity: 1; transform: translate(-50%, -50%); }
  to   { opacity: 0; transform: translate(-50%, -54%); }
}

/* ─── Guided walkthrough tour ────────────────────────────────────────────── */
#na-tour-overlay { position: fixed; inset: 0; z-index: 4000; }
#na-tour-spotlight {
  position: fixed; border-radius: 10px; border: 2px solid var(--gold);
  box-shadow: 0 0 0 9999px rgba(8,6,2,0.66), 0 0 22px rgba(201,168,76,0.55);
  pointer-events: none; transition: top .28s ease, left .28s ease, width .28s ease, height .28s ease;
}
#na-tour-overlay.no-spot #na-tour-spotlight { display: none; }
#na-tour-overlay.no-spot::before { content: ''; position: fixed; inset: 0; background: rgba(8,6,2,0.66); }
#na-tour-pop {
  position: fixed; z-index: 4001; max-width: min(340px, 92vw); width: max-content;
  background: rgba(16,12,5,0.98); border: 1px solid var(--b2);
  border-top: 2px solid var(--gold); border-radius: 12px;
  padding: 16px 18px 14px; font-family: var(--fm);
  box-shadow: 0 16px 48px rgba(0,0,0,.9);
  transition: top .24s ease, left .24s ease;
}
#na-tour-pop .tour-step { font-size: 8px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--dim); }
#na-tour-pop .tour-title { font-size: 13px; color: var(--gold); letter-spacing: 0.06em; margin: 4px 0 8px; font-weight: 600; }
#na-tour-pop .tour-body { font-size: 10.5px; color: var(--sand); line-height: 1.65; margin: 0; max-width: 300px; }
#na-tour-pop .tour-nav { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; gap: 10px; }
#na-tour-pop .tour-dots { display: flex; gap: 4px; }
#na-tour-pop .tour-dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(201,168,76,0.25); }
#na-tour-pop .tour-dot.on { background: var(--gold); }
#na-tour-pop .tour-btns { display: flex; gap: 6px; }
#na-tour-pop .tour-btn { font-family: var(--fm); font-size: 10px; padding: 6px 13px; border-radius: 6px; cursor: pointer; border: 1px solid var(--b2); background: rgba(201,168,76,0.08); color: var(--sand); transition: background .15s, border-color .15s; }
#na-tour-pop .tour-btn:hover { background: rgba(201,168,76,0.16); border-color: var(--gold); }
#na-tour-pop .tour-btn.primary { background: var(--gold); border-color: var(--gold); color: #1a1305; font-weight: 600; }
#na-tour-pop .tour-skip { position: absolute; top: 8px; right: 10px; background: none; border: none; color: var(--dim); font-size: 15px; cursor: pointer; line-height: 1; padding: 2px 4px; }
#na-tour-pop .tour-skip:hover { color: var(--sand); }

/* ─── Comparison panel (pinned countries) ────────────────────────────────── */
#compare-panel {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 1800;
  width: min(320px, 92vw); background: var(--panel2);
  border-left: 1px solid var(--b2);
  font-family: var(--fm); display: none; flex-direction: column;
  box-shadow: -8px 0 32px rgba(0,0,0,.70);
  transform: translateX(100%);
  transition: transform .28s ease;
  overflow-y: auto;
}
#compare-panel.open {
  display: flex; transform: translateX(0);
}
.compare-close {
  position: absolute; top: 8px; right: 8px; z-index: 3;
  width: 26px; height: 26px; border-radius: 6px;
  background: rgba(201,168,76,0.10); border: 1px solid rgba(201,168,76,0.28);
  color: var(--na-gold-mid, #C8A84B); cursor: pointer; font-size: 13px; line-height: 1;
}
.compare-close:hover { background: rgba(201,168,76,0.22); color: var(--na-gold-bright, #E2C06A); }
.compare-close:focus-visible { outline: 2px solid var(--na-gold-mid, #C8A84B); outline-offset: 2px; }
.compare-empty-state {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 48px 22px; min-height: 60%;
}
#compare-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px 12px; border-bottom: 1px solid var(--b1);
  flex-shrink: 0;
}
#compare-title {
  font-size: 11px; font-weight: 700; color: var(--gold);
  letter-spacing: 1.5px; text-transform: uppercase;
}
#compare-close-btn {
  cursor: pointer; background: rgba(201,168,76,0.10);
  border: 1px solid rgba(201,168,76,0.22); border-radius: 4px;
  color: var(--gold); font-size: 11px; font-family: var(--fm);
  width: 22px; height: 22px;
  display: flex; align-items: center; justify-content: center;
  transition: background .12s;
}
#compare-close-btn:hover { background: rgba(201,168,76,0.22); }
#compare-list {
  flex: 1; overflow-y: auto; padding: 10px 0;
}
.cp-item {
  padding: 10px 16px; border-bottom: 1px solid rgba(201,168,76,0.06);
  cursor: pointer; transition: background .1s;
}
.cp-item:hover { background: rgba(201,168,76,0.05); }
.cp-item:last-child { border-bottom: none; }
.cp-name {
  font-size: 11px; font-weight: 700; color: var(--sand);
  display: flex; align-items: center; justify-content: space-between;
}
.cp-remove {
  font-size: 9px; color: rgba(201,168,76,0.45); cursor: pointer;
  padding: 2px 5px; border-radius: 3px;
  transition: background .12s, color .12s;
}
.cp-remove:hover { background: rgba(201,168,76,0.12); color: var(--gold); }
.cp-scores { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.cp-score {
  font-size: 7px; letter-spacing: 0.8px; padding: 2px 5px;
  border-radius: 3px; background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.07); color: var(--dim);
}
#compare-empty {
  padding: 32px 20px; text-align: center;
  font-size: 9px; color: var(--dim); letter-spacing: 0.05em; line-height: 1.8;
}

/* Pin button — dark theme */
.tt-pin-btn {
  display: inline-flex; align-items: center; gap: 4px;
  margin-top: 8px; padding: 4px 9px; cursor: pointer;
  font-size: 8px; font-family: var(--fm); letter-spacing: 0.8px;
  border-radius: 5px;
  border: 1px solid rgba(201,168,76,0.22);
  background: rgba(201,168,76,0.06);
  color: var(--gold);
  transition: all .12s; user-select: none;
}
.tt-pin-btn:hover { background: rgba(201,168,76,0.18); color: var(--sand); border-color: rgba(201,168,76,0.4); }
.tt-pin-btn.pinned { background: rgba(201,168,76,0.16); color: var(--gold); border-color: var(--b2); }

/* ─── Topbar hamburger toggle ─────────────────────────────────────────────── */
#topbar-hamburger {
  display: none;   /* hidden on desktop; JS shows it at narrow widths */
  flex-shrink: 0;
  background: rgba(201,168,76,0.06);
  border: 1px solid rgba(201,168,76,0.22);
  border-radius: 6px;
  color: var(--gold);
  font-size: 16px;
  width: 34px; height: 34px;
  cursor: pointer;
  align-items: center; justify-content: center;
  transition: background .12s;
  user-select: none;
  order: 10;   /* push to right of logo */
}
#topbar-hamburger:hover { background: rgba(201,168,76,0.16); }
/* Collapsed state: hide search-wrap and tb-row2 */
#topbar.tb-collapsed #search-wrap,
#topbar.tb-collapsed #tb-row2 {
  display: none !important;
}

/* ── Mobile ───────────────────────────────────────── */
@media (max-width: 720px) {
  /* --tb-h removed: flexbox handles map height automatically on all screens */
  #tb-row1 { flex-wrap: wrap; height: auto; padding: 8px 12px 0; gap: 8px; }
  #search-wrap { width: 140px; }
  #tb-row2 { padding: 0 12px; }
  /* Thumb-reachable tap targets (was 8px — too small to hit reliably). */
  .mb { padding: 6px 10px; font-size: 11px; }
  .lb, .tb { padding: 6px 10px; font-size: 10px; }
  #map-status { bottom: 10px; left: 10px; font-size: 9px; }
  /* iOS Safari zooms viewport on focus if input font-size < 16px.
     Override to 16px on mobile so the map stays in frame. */
  #country-search, #passport-select { font-size: 16px !important; }
}

/* Narrow screens: controls are PERSISTENT (no hamburger gating).
   The month scrubber and layer/passport strip stay visible and scroll
   horizontally, so nothing is buried and the map is never pushed off-screen. */
@media (max-width: 540px) {
  /* Hamburger retired — there is nothing left to hide/show behind it. */
  #topbar-hamburger { display: none !important; }
  /* Slim, glassy control zone that reads as controls, not a second header. */
  #topbar {
    background: rgba(10,16,28,0.86);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(201,168,76,0.10);
  }
  #tb-row1 { flex-wrap: nowrap; height: auto; padding: 6px 10px; gap: 8px; }
  /* Search lives in the header button (and ⌘K) — no inline search on mobile. */
  #search-wrap,
  #topbar.tb-collapsed #search-wrap,
  #topbar.tb-expanded #search-wrap { display: none !important; }
  #tb-row2,
  #topbar.tb-collapsed #tb-row2,
  #topbar.tb-expanded #tb-row2 { display: flex !important; padding: 5px 10px; }
}

/* ─── Row-2 scroll fade indicator (shows more content is scrollable) ─────── */
#tb-row2 {
  position: relative;
}
#tb-row2::after {
  content: '';
  position: sticky;
  right: 0;
  top: 0;
  bottom: 0;
  width: 32px;
  flex-shrink: 0;
  background: linear-gradient(to right, transparent, rgba(28,20,8,0.85));
  pointer-events: none;
  z-index: 2;
}

/* ─── Trip Planning Pins ─────────────────────────────────────────────────── */
.trip-pin-icon {
  background: none !important;
  border: none !important;
}
.trip-pin-marker {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  user-select: none;
}
.trip-pin-bubble {
  width: 28px; height: 28px;
  background: var(--crimson);
  border: 2px solid var(--gold);
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  box-shadow: 0 3px 12px rgba(0,0,0,0.6), 0 0 8px rgba(201,168,76,0.35);
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.15s, box-shadow 0.15s;
}
.trip-pin-bubble:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,0.7), 0 0 14px rgba(201,168,76,0.55);
}
.trip-pin-num {
  transform: rotate(45deg);
  font-family: var(--fm);
  font-size: 9px; font-weight: 700;
  color: var(--sand); line-height: 1;
}
.trip-pin-stem {
  width: 2px; height: 6px;
  background: var(--gold);
  opacity: 0.7;
}
.trip-pin-shadow {
  width: 8px; height: 3px;
  background: rgba(0,0,0,0.3);
  border-radius: 50%;
}

/* Trip planner panel */
#trip-panel {
  position: fixed;
  bottom: 20px; right: 20px;
  z-index: 1400;
  background: rgba(14,11,6,0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--b2);
  border-top: 3px solid var(--gold);
  border-radius: 12px;
  padding: 14px 16px;
  min-width: 240px; max-width: 300px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.7);
  font-family: var(--fm);
  display: none;
  flex-direction: column;
  gap: 8px;
}
#trip-panel.open { display: flex; }
#trip-panel-title {
  font-size: 9px; font-weight: 700; letter-spacing: 1.8px;
  color: var(--gold); text-transform: uppercase;
  border-bottom: 1px solid rgba(201,168,76,0.15);
  padding-bottom: 6px;
}
#trip-pin-list { list-style: none; display: flex; flex-direction: column; gap: 4px; max-height: 180px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(201,168,76,0.3) transparent; }
.trip-pin-item {
  display: flex; align-items: center; gap: 6px;
  font-size: 9px; color: var(--sand); padding: 4px 0;
  border-bottom: 1px solid rgba(201,168,76,0.06);
  cursor: pointer;
}
.trip-pin-item:hover { color: var(--gold); }
.trip-pin-item-num {
  width: 18px; height: 18px;
  background: var(--crimson);
  border: 1px solid var(--gold);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 8px; font-weight: 700; color: var(--sand);
  flex-shrink: 0;
}
.trip-pin-item-del {
  margin-left: auto; color: rgba(201,168,76,0.4);
  cursor: pointer; font-size: 11px; padding: 2px 4px;
  border-radius: 3px; border: none; background: none;
  font-family: var(--fm);
}
.trip-pin-item-del:hover { color: var(--crimson); background: rgba(155,28,46,0.1); }
#trip-panel-actions { display: flex; gap: 6px; }
.trip-action-btn {
  flex: 1; padding: 5px 8px;
  font-family: var(--fm); font-size: 8px; font-weight: 600;
  border-radius: 5px; cursor: pointer;
  transition: all 0.12s; letter-spacing: 0.5px;
}
#btn-add-pin {
  background: rgba(155,28,46,0.12);
  border: 1px solid rgba(155,28,46,0.35);
  color: #e88888;
}
#btn-add-pin:hover { background: rgba(155,28,46,0.22); }
#btn-add-pin.placing { background: rgba(155,28,46,0.25); border-color: var(--crimson); color: var(--sand); animation: pin-pulse 1s infinite; }
@keyframes pin-pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(155,28,46,0.4); } 50% { box-shadow: 0 0 0 5px rgba(155,28,46,0); } }
#btn-clear-pins {
  background: rgba(201,168,76,0.04);
  border: 1px solid rgba(201,168,76,0.18);
  color: rgba(201,168,76,0.5);
}
#btn-clear-pins:hover { background: rgba(201,168,76,0.1); color: var(--gold); }
#trip-hint {
  font-size: 8px; color: rgba(201,168,76,0.45); text-align: center;
  line-height: 1.4; padding-top: 2px;
}

/* Trip planner toggle button (fixed to corner of map) */
#btn-trip-planner {
  position: fixed;
  bottom: 20px; left: 60px;
  z-index: 1300;
  background: rgba(14,11,6,0.92);
  border: 1px solid var(--b2);
  border-radius: 8px;
  padding: 7px 12px;
  font-family: var(--fm); font-size: 9px; font-weight: 700;
  color: var(--gold); letter-spacing: 0.8px;
  cursor: pointer;
  display: flex; align-items: center; gap: 6px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.5);
  transition: all 0.15s;
}
#btn-trip-planner:hover { background: rgba(48,36,16,0.98); border-color: var(--gold); }

/* ─── Country Intelligence (AI) ─────────────────────────────────────────────── */
.intel-wrap { margin-top: 10px; border-top: 1px solid rgba(184,150,12,0.3); padding-top: 8px; }
.intel-hdr { font-size: 10px; font-weight: 700; letter-spacing: 1.5px; color: var(--na-gold-mid); margin-bottom: 6px; display: flex; align-items: center; gap: 5px; }
.intel-badge { font-size: 8px; background: var(--na-gold-mid); color: #0F1A2E; padding: 1px 4px; border-radius: 2px; }
.intel-panel { font-size: 12px; line-height: 1.55; }
.intel-sect { margin-bottom: 8px; }
.intel-lbl { font-size: 8px; font-weight: 700; letter-spacing: 1.5px; color: var(--na-gold-mid); margin-bottom: 2px; }
.intel-sect p, .intel-sect ul { margin: 0; color: var(--na-text-primary); }
.intel-sect ul { padding-left: 14px; }
.intel-sect li { color: var(--na-text-primary); margin-bottom: 1px; }
.intel-cx p { color: var(--na-text-secondary); font-style: italic; }
.intel-loading, .intel-error, .intel-prompt { font-size: 11px; color: var(--na-text-secondary); font-style: italic; padding: 4px 0; }

/* ═══════════════════════════════════════════════════════════════════════════
   UI MASTER BUILD v2 — NAVIGATION & PANEL SYSTEM
   All breakpoints: mobile (≤767px) / tablet (768-1023px) /
                    laptop (1024-1279px) / desktop (1280px+)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Layout shell ────────────────────────────────────────────────────────── */
html, body {
  background: var(--na-navy, var(--ink));
}

#na-header {
  position: relative;
  flex-shrink: 0;
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: 0 var(--sp-4);
  /* Facelift: a deeper, dimensional glass bar with a layered navy gradient. */
  background: linear-gradient(180deg, rgba(22,34,58,0.94) 0%, rgba(11,22,40,0.86) 100%);
  backdrop-filter: blur(var(--na-glass-blur)) saturate(1.35);
  -webkit-backdrop-filter: blur(var(--na-glass-blur)) saturate(1.35);
  box-shadow: 0 4px 22px rgba(0,0,0,0.5);
  z-index: 1500;
}
/* Premium gold hairline along the bottom edge of the top menu. */
#na-header::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--na-gold-mid) 18%, var(--na-gold-bright) 50%, var(--na-gold-mid) 82%, transparent);
  opacity: 0.5; pointer-events: none;
}
#na-header-logo,
#na-header-actions { flex-shrink: 0; }

/* Centred month strip — the month selector now lives in the top menu. */
#na-header-months {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
#na-header-months #months {
  display: flex; align-items: center; gap: 5px;
  flex-wrap: nowrap;
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 5px 2px;
  /* Soft fade at both ends so scrolled-off pills dissolve rather than clip. */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
}
#na-header-months #months::-webkit-scrollbar { display: none; }
/* Slightly more generous, evenly-weighted month pills inside the top menu. */
#na-header-months .mb {
  font-size: 11px;
  padding: 6px 11px;
  border-radius: 7px;
}
#na-header-months #btn-year { margin-left: 5px; }
/* On compact widths the month strip is the priority on the top menu: drop the
   wordmark to the compass mark only, and tighten spacing so months keep room. */
@media (max-width: 600px) {
  #na-header { gap: var(--sp-2); padding: 0 var(--sp-2); }
  #na-header-wordmark { display: none; }
  #na-header-actions { gap: 4px; }
  #na-header-months .mb { padding: 6px 9px; font-size: 10.5px; }
  /* Smaller edge fade on phones so fewer pills are visually clipped. */
  #na-header-months #months {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 10px, #000 calc(100% - 10px), transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 10px, #000 calc(100% - 10px), transparent 100%);
  }
}

#na-header-logo {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  text-decoration: none;
  color: var(--na-text-primary);
}

.na-icon-mark { color: var(--na-gold-mid); }

#na-header-wordmark {
  font-family: var(--font-label);
  font-size: var(--ts-small);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--na-gold-mid);
}

#na-header-actions {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

.na-header-btn {
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(200,168,75,0.06);
  border: var(--na-border-glass);
  border-radius: var(--na-border-radius);
  color: var(--na-text-secondary);
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-chart),
              background var(--dur-fast) var(--ease-chart);
}
.na-header-btn:hover {
  color: var(--na-gold-bright);
  background: rgba(200,168,75,0.14);
}
.na-header-btn:focus-visible {
  outline: 2px solid var(--na-gold-mid);
  outline-offset: 2px;
}

/* ── Layout wrapper ──────────────────────────────────────────────────────── */
#na-layout {
  flex: 1;
  display: flex;
  flex-direction: row;
  overflow: hidden;
  min-height: 0;
}

#na-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
  /* Positioning context for the absolutely-positioned legend so it anchors to the
     map column (right of the sidebar) instead of the viewport edge, where the
     sidebar was covering it. Fixed children (tooltip, status, launcher) are
     unaffected. Works at every breakpoint since #na-main starts after the sidebar. */
  position: relative;
}

/* ── Sidebar (desktop: 1280px+, always expanded) ─────────────────────────── */
#na-sidebar {
  width: var(--sidebar-w);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  background: var(--na-glass-navy);
  backdrop-filter: blur(var(--na-glass-blur)) saturate(1.2);
  -webkit-backdrop-filter: blur(var(--na-glass-blur)) saturate(1.2);
  border-right: var(--na-border-glass);
  box-shadow: inset 0 0 0 1px rgba(200,168,75,0.10), 2px 0 16px rgba(0,0,0,0.3);
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: rgba(200,168,75,0.2) transparent;
  z-index: 1400;
  transition: width var(--dur-mid) var(--ease-panel);
}

#na-sidebar-inner {
  padding: var(--sp-4);
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

#na-sidebar-logo {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) 0 var(--sp-4);
}

.na-sidebar-brand {
  font-family: var(--font-label);
  font-size: var(--ts-small);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--na-gold-mid);
  line-height: 1.3;
}

/* Nav group section */
.na-nav-group {
  margin-bottom: var(--sp-2);
}

.na-nav-group-label {
  font-family: var(--font-label);
  font-size: var(--ts-micro);
  letter-spacing: var(--track-wider);
  text-transform: uppercase;
  /* --na-text-secondary (#A89060) gives 5.6:1 on --na-navy — passes WCAG AA */
  color: var(--na-text-secondary);
  padding: var(--sp-2) var(--sp-2) var(--sp-1);
  display: block;
  width: 100%;
}

/* nav-group-label as accordion trigger */
button.na-nav-group-label {
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  text-align: left;
  transition: color var(--dur-fast);
}
button.na-nav-group-label:hover { color: var(--na-text-secondary); }
button.na-nav-group-label:focus-visible { outline: 2px solid var(--na-gold-mid); outline-offset: 2px; border-radius: 2px; }

.na-accordion-arrow {
  /* --na-text-secondary passes WCAG AA; accordion arrow is an interactive indicator */
  color: var(--na-text-secondary);
  transition: transform var(--dur-mid) var(--ease-panel);
  flex-shrink: 0;
}
button.na-nav-group-label[aria-expanded="true"] .na-accordion-arrow {
  transform: rotate(180deg);
}

.na-accordion-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--dur-slow) var(--ease-panel);
}
.na-accordion-body.open {
  max-height: 600px;
}

/* Nav item */
.na-nav-item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  width: 100%;
  padding: var(--sp-3) var(--sp-3);
  background: none;
  border: none;
  border-radius: var(--na-border-radius);
  cursor: pointer;
  font-family: var(--font-label);
  font-size: var(--ts-label);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--na-text-secondary);
  text-align: left;
  transition: color var(--dur-fast) var(--ease-chart),
              background var(--dur-fast) var(--ease-chart);
  position: relative;
}
.na-nav-item:hover {
  color: var(--na-gold-bright);
  background: rgba(200,168,75,0.06);
}
.na-nav-item.active {
  color: var(--na-gold-bright);
}
.na-nav-item.active::after {
  content: '';
  position: absolute;
  bottom: 2px; left: var(--sp-3); right: var(--sp-3);
  height: 1px;
  background: var(--na-gold-mid);
}
.na-nav-item:focus-visible {
  outline: 2px solid var(--na-gold-mid);
  outline-offset: -2px;
}

/* Layer item active state */
.na-layer-item.layer-active {
  color: var(--na-gold-bright);
  background: rgba(200,168,75,0.10);
}

.na-nav-item-label { flex: 1; }

/* Sidebar footer */
#na-sidebar-footer {
  margin-top: auto;
  padding-top: var(--sp-3);
}

.na-sidebar-control-label {
  font-family: var(--font-label);
  font-size: var(--ts-micro);
  letter-spacing: var(--track-wider);
  text-transform: uppercase;
  /* --na-text-secondary (#A89060): 5.6:1 contrast — passes WCAG AA */
  color: var(--na-text-secondary);
  margin-bottom: var(--sp-1);
}

#na-data-age {
  font-family: var(--font-data);
  font-size: var(--ts-micro);
  /* --na-text-secondary passes WCAG AA for informational text */
  color: var(--na-text-secondary);
  letter-spacing: var(--track-wide);
  margin-top: var(--sp-4);
  padding-top: var(--sp-3);
  border-top: var(--na-border-glass);
}

/* Cloned passport select in sidebar */
#na-sidebar-passport select,
#na-sidebar-passport .sidebar-passport-clone {
  width: 100%;
  background: rgba(11,22,40,0.8);
  border: var(--na-border-glass);
  border-radius: var(--na-border-radius);
  color: var(--na-text-secondary);
  font-family: var(--font-label);
  font-size: var(--ts-micro);
  padding: var(--sp-2) var(--sp-3);
  cursor: pointer;
  outline: none;
  transition: border-color var(--dur-fast);
}
#na-sidebar-passport select:focus { border-color: var(--na-gold-mid); }

/* ── Click-to-collapse (desktop ≥1280px) ───────────────────────────────────
   Clicking the sidebar logo toggles .collapsed: the sidebar shrinks to a slim
   icon rail and the map column (with its absolutely-positioned legend/"key")
   reclaims the freed space. The logo stays visible so the rail can re-expand. */
#na-sidebar-logo { cursor: pointer; }
#na-sidebar-logo:focus-visible { outline: 2px solid var(--na-gold-mid); outline-offset: 3px; border-radius: 6px; }
@media (min-width: 1280px) {
  #na-sidebar.collapsed { width: var(--rail-w); }
  #na-sidebar.collapsed #na-sidebar-inner { padding: var(--sp-2); align-items: center; }
  #na-sidebar.collapsed .na-sidebar-brand { display: none; }
  #na-sidebar.collapsed .na-nav-item-label,
  #na-sidebar.collapsed .na-nav-group-label { display: none; }
  #na-sidebar.collapsed .na-nav-item { justify-content: center; padding: var(--sp-3) 0; }
  #na-sidebar.collapsed #na-sidebar-footer { display: none; }
  #na-sidebar.collapsed .na-accordion-body { display: none; }
  #na-sidebar.collapsed .na-accordion-arrow { display: none; }
  #na-sidebar.collapsed #na-sidebar-logo { justify-content: center; }
  #na-sidebar.collapsed .gold-rule { display: none; }
}

/* ── Sidebar — LAPTOP (1024–1279px): icon rail, expands smoothly on hover ─── */
@media (min-width: 1024px) and (max-width: 1279px) {
  #na-sidebar {
    /* max-width drives expansion — width stays at full value so layout shifts
       don't jump. Only the clamp animates. */
    width: var(--sidebar-w);
    max-width: var(--sidebar-w-sm);
    overflow: hidden;
    transition: max-width var(--dur-mid) var(--ease-panel),
                box-shadow var(--dur-mid) var(--ease-panel);
    will-change: max-width;
  }
  #na-sidebar:hover,
  #na-sidebar:focus-within {
    max-width: var(--sidebar-w);
    box-shadow: inset 0 0 0 1px rgba(200,168,75,0.10), 4px 0 24px rgba(0,0,0,0.5);
  }
  #na-sidebar-inner { padding: var(--sp-3); }
  .na-sidebar-brand { display: none; }
  /* Labels animate via max-width — avoids the width:auto jump */
  .na-nav-item-label {
    opacity: 0;
    max-width: 0;
    overflow: hidden;
    white-space: nowrap;
    transition: opacity var(--dur-mid) var(--ease-panel),
                max-width var(--dur-mid) var(--ease-panel);
  }
  #na-sidebar:hover .na-nav-item-label,
  #na-sidebar:focus-within .na-nav-item-label { opacity: 1; max-width: 180px; }
  .na-nav-group-label { opacity: 0; transition: opacity var(--dur-mid); }
  #na-sidebar:hover .na-nav-group-label,
  #na-sidebar:focus-within .na-nav-group-label { opacity: 1; }
  #na-sidebar-footer { display: none; }
  #na-sidebar:hover #na-sidebar-footer,
  #na-sidebar:focus-within #na-sidebar-footer { display: block; }
  /* Accordion: use max-height so it can animate in when sidebar expands */
  .na-accordion-body { max-height: 0 !important; overflow: hidden; }
  #na-sidebar:hover .na-accordion-body.open,
  #na-sidebar:focus-within .na-accordion-body.open { max-height: 600px !important; }
}

/* ── Sidebar — TABLET (768–1023px): 72 px icon rail ────────────────────────── */
@media (min-width: 768px) and (max-width: 1023px) {
  #na-sidebar {
    width: var(--rail-w);
    overflow: hidden;
  }
  #na-sidebar-inner { padding: var(--sp-2); align-items: center; }
  .na-sidebar-brand  { display: none; }
  .na-nav-item-label { display: none; }
  .na-nav-group-label { display: none; }
  /* Centre icons in the 72 px column; keep 44 px tap target */
  .na-nav-item { justify-content: center; padding: var(--sp-3) 0; }
  /* Tooltip via title attr rendered by OS — supplement with CSS tooltip */
  .na-nav-item[aria-label]::after {
    content: attr(aria-label);
    position: absolute;
    left: calc(100% + 8px);
    top: 50%; transform: translateY(-50%);
    background: rgba(11,22,40,0.96);
    border: 1px solid rgba(200,168,75,0.3);
    color: var(--na-text-primary);
    font-family: var(--font-label);
    font-size: var(--ts-micro);
    letter-spacing: var(--track-wide);
    text-transform: uppercase;
    padding: 4px 8px;
    white-space: nowrap;
    border-radius: 2px;
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--dur-fast);
    z-index: 2000;
  }
  .na-nav-item[aria-label]:hover::after { opacity: 1; }
  #na-sidebar-footer { display: none; }
  #na-sidebar-logo { justify-content: center; }
  #na-sidebar .gold-rule { display: none; }
  .na-accordion-body { display: none; }
  .na-accordion-arrow { display: none; }
}

/* ── Sidebar — MOBILE (≤767px): hidden, bottom nav shows instead ───────────── */
@media (max-width: 767px) {
  #na-sidebar { display: none; }
  #na-layout { flex-direction: column; }
}

/* At desktop (1280px+) show only the transport strip — sidebar handles layers.
   Hide tb-row1 (logo/months/search — duplicated in sidebar) and hide the #layers
   div (also in sidebar). Keep transport + visa/passport accessible. */
@media (min-width: 1280px) {
  #tb-row1 { display: none !important; }
  #topbar {
    background: rgba(10,16,28,0.72);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(201,168,76,0.08);
  }
  /* Layers live in the sidebar here — hide from topbar to avoid duplication.
     div:nth-child(2) is the .tb-div divider between #layers and #transport. */
  #topbar #layers,
  #topbar #tb-row2 > div:nth-child(2) { display: none; }
  #tb-row2 { height: 38px; padding: 0 16px; }
}

/* ── Topbar logo: contain the SVG so it never overflows into layer controls ── */
/* The #na-logo SVG has intrinsic height 110 px; topbar row-1 is 58 px.
   Clipping here prevents it spilling over #tb-row2 (layer options). */
#logo-wrap {
  height: 46px;
  display: flex;
  align-items: center;
  overflow: hidden;
}
#na-logo {
  /* SVG aspect: 480 / 165 ≈ 2.91 — let height drive width */
  height: 46px;
  width: auto;
}
/* At very narrow viewports, keep it from squeezing the month buttons */
@media (max-width: 767px) {
  #na-logo { height: 36px; }
  #logo-wrap { height: 36px; }
}

/* ── Bottom Navigation (mobile ≤767px) ───────────────────────────────────── */
#na-bottom-nav {
  display: none;
  flex-shrink: 0;
}

@media (max-width: 767px) {
  #na-bottom-nav {
    display: flex;
    justify-content: space-around;
    align-items: stretch;
    height: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: var(--na-glass-navy);
    backdrop-filter: blur(var(--na-glass-blur)) saturate(1.2);
    -webkit-backdrop-filter: blur(var(--na-glass-blur)) saturate(1.2);
    border-top: var(--na-border-glass);
    box-shadow: 0 -2px 16px rgba(0,0,0,0.4), inset 0 1px 0 rgba(200,168,75,0.15);
    z-index: 1400;
    position: relative;
  }
}

/* ── Bottom Navigation on desktop & tablet — centered floating pill ──────────
   The web version now mirrors the mobile chrome: a persistent top header plus a
   bottom menu. On wide screens the bar becomes a centered, elevated pill so it
   reads as an intentional control surface rather than a stretched mobile bar. */
@media (min-width: 768px) {
  #na-bottom-nav {
    display: flex;
    justify-content: center;
    align-items: stretch;
    gap: 2px;
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: 18px;
    width: auto;
    max-width: 560px;
    height: 60px;
    padding: 0 10px;
    background: var(--na-glass-navy);
    backdrop-filter: blur(var(--na-glass-blur)) saturate(1.2);
    -webkit-backdrop-filter: blur(var(--na-glass-blur)) saturate(1.2);
    border: var(--na-border-glass);
    border-radius: 18px;
    box-shadow: 0 8px 28px rgba(0,0,0,0.45), inset 0 1px 0 rgba(200,168,75,0.15);
    z-index: 1400;
  }
  #na-bottom-nav .na-bottom-item { padding: 0 20px; min-width: 84px; }
}

/* ── Standalone Preferences launcher — RETIRED ──────────────────────────────
   Preferences is now a single icon in the bottom menu (no duplication). The
   floating gear is suppressed; the bottom-nav "Settings" item is the sole entry. */
#na-prefs-launcher {
  display: none !important;
  position: fixed;
  right: 12px;
  bottom: 30px;
  z-index: 1150;
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  background: var(--na-glass-navy, rgba(11,22,40,0.85));
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--na-glass-border, rgba(200,168,75,0.35));
  border-radius: 50%;
  color: var(--na-gold-mid, #C8A84B);
  box-shadow: 0 4px 16px rgba(0,0,0,0.4);
  cursor: pointer;
  transition: color .15s, background .15s, box-shadow .15s, transform .15s;
}
#na-prefs-launcher:hover {
  color: var(--na-gold-bright, #E2C06A);
  background: rgba(200,168,75,0.14);
  box-shadow: 0 0 10px rgba(201,168,76,0.4);
  transform: translateY(-1px);
}
#na-prefs-launcher:focus-visible {
  outline: 2px solid var(--na-gold-mid, #C8A84B); outline-offset: 2px;
}
@media (max-width: 767px) {
  #na-prefs-launcher { right: 8px; bottom: 74px; }   /* clear the bottom nav */
}

/* The Layer Lens recolour transition is defined with the pane-scoped choropleth
   rule earlier in this file (not globally — a global .leaflet-interactive
   transition would animate every border/overlay path and cause zoom jank). */

/* a11y: restore a visible keyboard focus ring on controls that suppressed it. */
#country-search:focus-visible,
#na-sidebar-passport select:focus-visible,
#passport-select:focus-visible {
  outline: 2px solid var(--na-gold-mid, #C8A84B);
  outline-offset: 2px;
}

/* Mobile: keep the Field Guide legend clear of the bottom nav (56px + safe area). */
@media (max-width: 767px) {
  #legend { bottom: calc(74px + env(safe-area-inset-bottom, 0px)) !important; }
}

/* Emoji glyphs for the generated all-layer sidebar items + mobile sheet tiles.
   (Line-art SVG vocabulary is a later visual-polish pass per the design council.) */
.na-layer-item .na-layer-emoji {
  font-size: 16px; line-height: 1; width: 22px;
  text-align: center; flex: 0 0 auto;
}
.na-sheet-item .na-layer-emoji { font-size: 24px; line-height: 1; }
/* The sheet grid can now hold all 31 layers — let it scroll within the sheet. */
#na-sheet-grid { max-height: 52vh; overflow-y: auto; }

/* Live crime overlay status chip (bottom-center, clear of the mobile nav). */
#na-crime-status {
  position: fixed; left: 50%; bottom: 84px; transform: translateX(-50%);
  z-index: 1200; display: none; max-width: 80vw;
  padding: 6px 12px; border-radius: 999px;
  background: var(--na-glass-navy, rgba(11,22,40,0.9));
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--na-glass-border, rgba(200,168,75,0.35));
  color: var(--na-text-primary, #E8D8A0);
  font-family: var(--font-label, 'Cinzel', Georgia, serif);
  font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase;
  box-shadow: 0 4px 16px rgba(0,0,0,0.45); pointer-events: none; white-space: nowrap;
}
@media (min-width: 768px) { #na-crime-status { bottom: 28px; } }

/* Criteria-finder + Surprise Me triggers inside the search overlay (mobile-reachable). */
#na-search-quick { display: flex; gap: 8px; flex-wrap: wrap; margin: 4px 0 10px; }
.na-search-quick-btn {
  flex: 1 1 auto; min-width: 140px; padding: 9px 12px; border-radius: 10px;
  background: rgba(200,168,75,0.10); border: 1px solid var(--na-glass-border, rgba(200,168,75,0.35));
  color: var(--na-text-primary, #E8D8A0); cursor: pointer;
  font-family: var(--font-label, 'Cinzel', Georgia, serif); font-size: 11px; letter-spacing: 0.04em;
  transition: background .15s, color .15s, border-color .15s;
}
.na-search-quick-btn:hover { background: rgba(200,168,75,0.20); color: var(--na-gold-bright, #E2C06A); border-color: var(--na-gold-mid, #C8A84B); }
.na-search-quick-btn:focus-visible { outline: 2px solid var(--na-gold-mid, #C8A84B); outline-offset: 2px; }

/* Plan / Book transactional deep-links inside the country/city dossier. */
.pb-section { padding: 10px 14px 12px; border-top: 1px solid rgba(201,168,76,0.12); }
.pb-title { font-family: var(--font-label, 'Cinzel', Georgia, serif); font-size: 8px; letter-spacing: 1.6px; text-transform: uppercase; color: rgba(201,168,76,0.72); margin-bottom: 7px; }
.pb-links { display: flex; flex-wrap: wrap; gap: 6px; }
.pb-link {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 10px; border-radius: 8px; text-decoration: none;
  background: rgba(201,168,76,0.10); border: 1px solid rgba(201,168,76,0.28);
  color: var(--na-text-primary, #E8D8A0); font-family: var(--fm); font-size: 10px; letter-spacing: 0.03em;
  transition: background .15s, color .15s, border-color .15s;
}
.pb-link:hover { background: rgba(201,168,76,0.22); color: var(--na-gold-bright, #E2C06A); border-color: var(--na-gold-mid, #C8A84B); }
.pb-link:focus-visible { outline: 2px solid var(--na-gold-mid, #C8A84B); outline-offset: 2px; }
.pb-ic { font-size: 12px; line-height: 1; }

/* "Who's travelling?" persona presets at the top of the layers sheet. */
#na-persona-row { margin: 2px 0 12px; }
.na-persona-label { font-family: var(--font-label, 'Cinzel', Georgia, serif); font-size: 9px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--na-text-secondary, #A89060); margin-bottom: 8px; }
.na-persona-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.na-persona-btn {
  flex: 1 1 auto; min-width: 64px; display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 9px 6px; border-radius: 10px; cursor: pointer;
  background: rgba(200,168,75,0.08); border: 1px solid var(--na-glass-border, rgba(200,168,75,0.32));
  color: var(--na-text-primary, #E8D8A0); font-family: var(--font-label, 'Cinzel', Georgia, serif);
  font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase;
  transition: background .15s, color .15s, border-color .15s, transform .12s;
}
.na-persona-btn:hover { background: rgba(200,168,75,0.18); color: var(--na-gold-bright, #E2C06A); border-color: var(--na-gold-mid, #C8A84B); transform: translateY(-1px); }
.na-persona-btn:focus-visible { outline: 2px solid var(--na-gold-mid, #C8A84B); outline-offset: 2px; }
.na-persona-emoji { font-size: 20px; line-height: 1; }

.na-bottom-item {
  flex: 1;
  min-width: 0;            /* allow the column to shrink so 5 items fit narrow phones */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: var(--sp-2) 0;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-label);
  font-size: 9px;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  /* --na-text-secondary (#A89060): 5.6:1 — passes WCAG AA for nav labels */
  color: var(--na-text-secondary);
  min-height: 44px;
  min-width: 44px;
  position: relative;
  transition: color var(--dur-fast) var(--ease-chart);
}
/* Keep each label on one line; clip with an ellipsis rather than wrapping or
   pushing siblings, now that the bottom nav carries 5 items. */
.na-bottom-item > span:not(.na-active-layer-badge) {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (max-width: 380px) {
  .na-bottom-item { font-size: 8px; letter-spacing: 0.04em; }
}
.na-bottom-item:hover  { color: var(--na-text-secondary); }
.na-bottom-item.active { color: var(--na-gold-bright); }
.na-bottom-item.active::after {
  content: '';
  position: absolute;
  bottom: 0; left: 25%; right: 25%;
  height: 2px;
  background: var(--na-gold-mid);
}
.na-bottom-item:focus-visible { outline: 2px solid var(--na-gold-mid); outline-offset: -2px; }

/* Active layer badge on the Layers bottom nav item */
.na-active-layer-badge {
  position: absolute;
  top: 6px; right: calc(50% - 18px);
  font-family: var(--font-label);
  font-size: 7px;
  letter-spacing: 0.05em;
  padding: 1px 4px;
  background: var(--na-gold-mid);
  color: var(--na-navy);
  border-radius: 2px;
  line-height: 1.4;
  text-transform: uppercase;
  font-weight: 700;
}

/* ── Mobile Bottom Sheet (Layers) ────────────────────────────────────────── */
#na-layers-sheet {
  position: fixed;
  inset: 0;
  z-index: 2000;
}
#na-layers-sheet[hidden] { display: none; }

#na-sheet-overlay {
  position: absolute;
  inset: 0;
  background: rgba(11,22,40,0.6);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

#na-sheet-panel {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  max-height: 70vh;
  overflow-y: auto;
  padding: var(--sp-4);
  border-top: var(--na-border-gold);
  border-radius: 4px 4px 0 0;
  transform: translateY(100%);
  transition: transform var(--dur-mid) var(--ease-panel);
}
#na-layers-sheet:not([hidden]) #na-sheet-panel {
  transform: translateY(0);
}

#na-sheet-handle {
  width: 32px; height: 2px;
  background: var(--na-gold-mid);
  border-radius: 1px;
  margin: 0 auto var(--sp-4);
  opacity: 0.5;
}

#na-sheet-title {
  font-family: var(--font-label);
  font-size: var(--ts-small);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--na-text-primary);
  margin: 0;
  text-align: center;
}

#na-sheet-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-3);
  margin-top: var(--sp-4);
}

.na-sheet-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-4) var(--sp-3);
  background: rgba(200,168,75,0.04);
  border: var(--na-border-glass);
  border-radius: var(--na-border-radius);
  cursor: pointer;
  font-family: var(--font-label);
  font-size: var(--ts-micro);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--na-text-secondary);
  min-height: 44px;
  transition: color var(--dur-fast), background var(--dur-fast), border-color var(--dur-fast);
}
.na-sheet-item:hover  { color: var(--na-gold-bright); background: rgba(200,168,75,0.10); border-color: rgba(200,168,75,0.4); }
.na-sheet-item.active { color: var(--na-gold-bright); background: rgba(200,168,75,0.12); border-color: var(--na-gold-mid); }
.na-sheet-item:focus-visible { outline: 2px solid var(--na-gold-mid); outline-offset: 2px; }

/* ── Toast Notifications ─────────────────────────────────────────────────── */
#na-toast-container {
  position: fixed;
  bottom: calc(var(--bottom-nav-h) + var(--sp-4));
  left: 50%;
  transform: translateX(-50%);
  z-index: 3000;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  pointer-events: none;
}

@media (min-width: 768px) {
  #na-toast-container { bottom: var(--sp-6); }
}

.na-toast {
  background: var(--na-glass-navy);
  backdrop-filter: blur(var(--na-glass-blur));
  -webkit-backdrop-filter: blur(var(--na-glass-blur));
  border: var(--na-border-glass);
  border-left: 3px solid var(--na-gold-mid);
  box-shadow: 0 4px 24px rgba(0,0,0,0.5);
  border-radius: var(--na-border-radius);
  padding: var(--sp-2) var(--sp-4);
  font-family: var(--font-label);
  font-size: var(--ts-small);
  letter-spacing: var(--track-wide);
  color: var(--na-text-primary);
  white-space: nowrap;
  pointer-events: auto;
  animation: na-toast-in var(--dur-mid) var(--ease-panel) forwards;
}
.na-toast.dismissing {
  animation: na-toast-out var(--dur-mid) var(--ease-panel) forwards;
}

@keyframes na-toast-in {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes na-toast-out {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(-8px); }
}

/* ── Global Search Overlay ───────────────────────────────────────────────── */
#na-search-overlay {
  position: fixed;
  inset: 0;
  z-index: 2500;
}
#na-search-overlay[hidden] { display: none; }

#na-search-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(11,22,40,0.75);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

#na-search-panel {
  position: absolute;
  top: calc(var(--header-h) + var(--sp-5));
  left: 50%;
  transform: translateX(-50%);
  width: min(480px, calc(100vw - 32px));
  max-height: 70vh;
  overflow-y: auto;
  animation: na-search-in var(--dur-mid) var(--ease-panel);
}

@keyframes na-search-in {
  from { opacity: 0; transform: translateX(-50%) scale(0.96); }
  to   { opacity: 1; transform: translateX(-50%) scale(1); }
}

#na-search-input-wrap {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  color: var(--na-text-dim);
  border-bottom: var(--na-border-glass);
}

#na-search-input {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  font-family: var(--font-label);
  font-size: var(--ts-body);
  letter-spacing: var(--track-wide);
  color: var(--na-text-primary);
}
#na-search-input::placeholder { color: var(--na-text-dim); }

#na-search-results {
  padding: var(--sp-3) var(--sp-4);
  font-family: var(--font-data);
  font-size: var(--ts-small);
  color: var(--na-text-secondary);
  min-height: 48px;
}

.na-search-result {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--na-border-radius);
  cursor: pointer;
  transition: background var(--dur-fast);
}
.na-search-result:hover,
.na-search-result.active,
.na-search-result[aria-selected="true"] { background: rgba(200,168,75,0.12); color: var(--na-gold-bright); }
/* --na-text-secondary passes WCAG AA; result-type conveys category information */
.na-search-result-type { font-size: var(--ts-micro); color: var(--na-text-secondary); text-transform: uppercase; letter-spacing: var(--track-wide); }

/* ── Glass treatment for existing tooltip (#tt) ──────────────────────────── */
#tt {
  background:        var(--na-glass-navy) !important;
  backdrop-filter:   blur(var(--na-glass-blur)) !important;
  -webkit-backdrop-filter: blur(var(--na-glass-blur)) !important;
  border:            var(--na-border-glass) !important;
  border-top:        2px solid var(--na-gold-mid) !important;
  box-shadow:        inset 0 0 0 1px rgba(200,168,75,0.10), 0 8px 32px rgba(0,0,0,0.5) !important;
}
#tt .tth h3 {
  font-family: var(--font-label) !important;
  letter-spacing: var(--track-wide) !important;
  color: var(--na-text-primary) !important;
}
.ts, #tt-sub { font-family: var(--font-data) !important; color: var(--na-text-secondary) !important; }

/* ── Glass treatment for existing legend panel ───────────────────────────── */
#legend {
  background:      var(--na-glass-navy) !important;
  backdrop-filter: blur(var(--na-glass-blur)) !important;
  -webkit-backdrop-filter: blur(var(--na-glass-blur)) !important;
  border:          var(--na-border-glass) !important;
  box-shadow:      inset 0 0 0 1px rgba(200,168,75,0.08), 0 4px 24px rgba(0,0,0,0.4) !important;
}

/* ── Keyboard focus ring — consistent across all new elements ─────────────── */
:focus-visible {
  outline: 2px solid var(--na-gold-mid);
  outline-offset: 2px;
}

/* ── Light mode overrides ────────────────────────────────────────────────── */
[data-theme="light"] {
  --na-navy:          var(--na-parchment);
  --na-navy-mid:      var(--na-parchment-dim);
  --na-glass-navy:    rgba(244, 237, 216, 0.88);
  --na-text-primary:  var(--na-text-ink);
  --na-text-secondary:#5A4020;
  --na-text-dim:      #8A7050;
}
[data-theme="light"] html,
[data-theme="light"] body {
  background: var(--na-parchment);
}

/* ── Reduced motion: disable all nav animations ──────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  #na-sidebar,
  .na-accordion-body,
  .na-nav-item,
  .na-header-btn,
  #na-sheet-panel,
  .na-toast {
    transition: none !important;
    animation: none !important;
  }
}
/* === TIPPING PANEL === */
.tt-tip-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; font-size: 9px; }
.tt-tip-industry { display: flex; align-items: center; gap: 4px; padding: 2px 0; }
.tt-tip-amount { color: var(--na-gold-mid); font-family: var(--font-data); font-weight: 700; }
.tt-tip-note { color: #7a8a5a; font-size: 8px; font-style: italic; }
.tt-tip-service-charge { background: rgba(239,108,0,0.08); border-left: 2px solid #c9a84c; padding: 4px 6px; font-size: 8.5px; margin: 4px 0; }
.tt-tip-quick { border-left: 3px solid #c9a84c; background: rgba(201,168,76,0.06); padding: 6px 8px; font-size: 9px; margin-top: 6px; }
.tt-tip-calculator { display: flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 9px; }
.tt-tip-calculator input { width: 70px; background: rgba(255,255,255,0.05); border: 1px solid var(--na-glass-border); color: var(--na-parchment); font-family: var(--font-data); font-size: 10px; padding: 3px 6px; border-radius: 3px; }
.tt-tip-result { color: #c9a84c; font-weight: 700; font-size: 11px; }

/* === SAFETY ETHICS === */
.tt-safety-ethics { background: rgba(14,11,6,0.6); border-left: 3px solid #c9a84c; padding: 8px 10px; margin-top: 8px; font-size: 8.5px; line-height: 1.5; color: #a89060; }
.tt-safety-reliability { display: inline-block; padding: 2px 5px; border-radius: 2px; font-size: 8px; font-weight: 600; }
.tt-safety-reliability.high { background: rgba(46,125,50,0.15); color: #a5d6a7; border: 1px solid rgba(46,125,50,0.3); }
.tt-safety-reliability.moderate { background: rgba(239,108,0,0.12); color: #ffcc80; border: 1px solid rgba(239,108,0,0.3); }
.tt-safety-reliability.low { background: rgba(198,40,40,0.12); color: #ef9a9a; border: 1px solid rgba(198,40,40,0.3); }

/* === PHRASEBOOK === */
.tt-phrasebook { margin-top: 6px; }
.tt-phrasebook details { border: 1px solid rgba(201,168,76,0.15); border-radius: 4px; }
.tt-phrasebook summary { cursor: pointer; padding: 6px 8px; font-size: 9px; color: #c9a84c; list-style: none; user-select: none; }
.tt-phrasebook summary::-webkit-details-marker { display: none; }
.tt-phrase-table { width: 100%; border-collapse: collapse; font-size: 8.5px; margin-top: 4px; }
.tt-phrase-table td { padding: 3px 6px; border-bottom: 1px solid rgba(201,168,76,0.07); vertical-align: top; }
.tt-phrase-local { color: #e8d5a3; font-weight: 500; }
.tt-phrase-pron { color: #7a8a5a; font-style: italic; }

/* === VACCINE & ALTITUDE === */
.tt-vaccine-required { display: inline-block; background: rgba(198,40,40,0.12); color: #ef9a9a; border: 1px solid rgba(198,40,40,0.3); padding: 2px 6px; border-radius: 2px; font-size: 8px; }
.tt-vaccine-recommended { display: inline-block; background: rgba(239,108,0,0.12); color: #ffcc80; border: 1px solid rgba(239,108,0,0.3); padding: 2px 6px; border-radius: 2px; font-size: 8px; }
.tt-altitude-warning { border-left: 3px solid #C62828; background: rgba(198,40,40,0.08); padding: 8px 10px; margin-top: 8px; font-size: 9px; color: #ef9a9a; line-height: 1.5; }

/* === VERDICT ROW === */
.tt-verdict-row td { background: rgba(201,168,76,0.10); border-top: 2px solid #c9a84c; padding: 6px 8px; }
.tt-verdict-winner { color: #c9a84c; font-weight: 700; font-size: 10px; }
.tt-verdict-behind { color: #7a8a5a; font-size: 9px; }
.tt-verdict-insight td { font-size: 8.5px; color: #a89060; padding: 4px 8px; border-top: 1px solid rgba(201,168,76,0.1); font-style: italic; }

/* === PASSPORT RANK === */
.tt-passport-rank { border: 1px solid rgba(201,168,76,0.2); border-radius: 4px; padding: 8px; margin-top: 8px; }
.tt-passport-rank-bar { height: 4px; background: rgba(255,255,255,0.08); border-radius: 2px; margin: 4px 0; position: relative; overflow: hidden; }
.tt-passport-rank-fill { height: 100%; background: #c9a84c; border-radius: 2px; transition: width 0.4s ease; }

/* === ENTRY DENIED === */
.tt-entry-denied { border-left: 3px solid #C62828; background: rgba(198,40,40,0.08); padding: 8px 10px; margin-top: 8px; }
.tt-entry-denied-title { color: #ef9a9a; font-weight: 700; font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 4px; }

/* ─── Compare Panel Empty State ─────────────────────────────────────────── */
.compare-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--sp-6) var(--sp-5);
  min-height: 160px;
  color: var(--na-text-secondary);
}
.compare-empty-state strong { font-style: normal; }

/* ─── 320 px breakpoint — smallest Android / fold devices ───────────────── */
@media (max-width: 359px) {
  #na-header-wordmark { display: none; }
  .na-nav-item-label  { font-size: 8px; }
  #na-sidebar         { width: 200px; }
  .tt-panel           { max-width: 100vw; }
  #topbar             { padding: 0 var(--sp-2); }
}

/* ─── Preferences Sheet ──────────────────────────────────────────────────── */
#na-prefs-sheet {
  position: fixed; inset: 0; z-index: 2200;
  display: flex; align-items: flex-end;
}
#na-prefs-sheet[hidden] { display: none; }

#na-prefs-overlay {
  position: absolute; inset: 0;
  background: rgba(5,8,20,0.72); backdrop-filter: blur(2px);
}

#na-prefs-panel {
  position: relative; z-index: 1;
  width: 100%; max-height: 85vh; overflow-y: auto;
  background: var(--na-glass-navy, rgba(8,15,40,0.97));
  border: 1px solid rgba(201,168,76,0.18);
  border-bottom: none;
  border-radius: 18px 18px 0 0;
  padding: var(--sp-3) var(--sp-5) var(--sp-6);
}

#na-prefs-handle {
  width: 40px; height: 4px; border-radius: 2px;
  background: rgba(201,168,76,0.35);
  margin: 0 auto var(--sp-3);
}

#na-prefs-title {
  font-family: var(--font-label); font-size: 11px;
  letter-spacing: 3px; text-transform: uppercase;
  color: var(--na-gold-mid, #c9a84c);
  text-align: center; margin-bottom: var(--sp-2);
}

#na-prefs-body { padding-top: var(--sp-3); }

.pref-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--sp-3) 0;
  border-bottom: 1px solid rgba(201,168,76,0.08);
}
.pref-row:last-child { border-bottom: none; }

.pref-label {
  font-family: var(--font-label); font-size: 9px;
  letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--na-text-secondary, rgba(232,213,163,0.65));
}

.pref-toggle-group {
  display: flex; gap: 4px;
}

.pref-opt {
  font-family: var(--font-label); font-size: 9px;
  letter-spacing: 1px; text-transform: uppercase;
  color: var(--na-text-secondary, rgba(232,213,163,0.55));
  background: rgba(201,168,76,0.06);
  border: 1px solid rgba(201,168,76,0.18);
  border-radius: 4px;
  padding: 5px 10px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.pref-opt:hover {
  background: rgba(201,168,76,0.14);
  color: var(--na-text-primary, #e8d5a3);
  border-color: rgba(201,168,76,0.35);
}
.pref-opt.active {
  background: rgba(201,168,76,0.22);
  color: var(--na-gold-mid, #c9a84c);
  border-color: rgba(201,168,76,0.6);
  font-weight: 700;
}

/* ─── Multi-Layer Glyph Overlay ("enamel chips") ─────────────────────────────
   Rendered as Leaflet divIcons in the glyphPane when 2+ rated layers are active.
   Each chip is an opaque score-coloured tile carrying the layer symbol, with a
   dark-inner / gold-outer double stroke for an almanac "enamel badge" feel. */
.na-glyph-icon { background: none; border: none; }
.na-glyph-cluster {
  display: flex;
  gap: 3px;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
}
.na-glyph-chip {
  position: relative;
  width: 19px;
  height: 19px;
  border-radius: 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* dark inner ring + gold outer ring + soft drop shadow = the enamel-badge edge */
  box-shadow:
    0 0 0 1px rgba(14,11,6,0.92),
    0 0 0 2px rgba(201,168,76,0.85),
    0 1px 3px rgba(0,0,0,0.55);
  transition: transform 140ms ease;
}
.na-glyph-sym {
  font-size: 11px;
  line-height: 1;
  /* keep emoji crisp on the coloured tile; subtle shadow lifts them off the fill */
  filter: drop-shadow(0 0 1px rgba(14,11,6,0.6));
}
.na-glyph-more {
  background: rgba(20,16,9,0.94) !important;
  color: var(--na-gold-foil, #f0d080);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: -0.3px;
}
/* Colour-blind tier badge: a numeric score (1 best → 4 worst) in the chip corner,
   so the chip's score is decodable without relying on its background hue. */
.na-glyph-tier {
  position: absolute;
  right: -3px; bottom: -3px;
  min-width: 10px; height: 10px;
  padding: 0 1px;
  border-radius: 5px;
  background: rgba(14,11,6,0.95);
  color: #fff;
  font-family: var(--fm, monospace);
  font-size: 7px; font-weight: 700; line-height: 10px;
  text-align: center;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.6);
}
.na-glyph-icon:hover .na-glyph-chip { transform: translateY(-1px); }
@media (prefers-reduced-motion: reduce) {
  .na-glyph-chip { transition: none; }
  .na-glyph-icon:hover .na-glyph-chip { transform: none; }
}

/* ─── Events & Holidays markers ──────────────────────────────────────────────
   The Events & Holidays layer drops one emoji-glyph marker per country that has a
   festival or public holiday in the selected month. A red badge counts how many,
   so the map reads as a live "what's on this month" calendar. */
.na-event-divicon { background: none; border: none; }
.na-event-glyph {
  position: relative;
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 34%, rgba(245,158,11,0.96), rgba(217,119,6,0.92));
  box-shadow: 0 0 0 1.5px rgba(255,255,255,0.85), 0 2px 6px rgba(0,0,0,0.45);
  cursor: pointer;
  transition: transform 0.12s ease;
}
.na-event-glyph.has-fest {
  background: radial-gradient(circle at 50% 34%, rgba(168,85,247,0.96), rgba(124,58,237,0.92));
}
.na-event-glyph:hover { transform: translateY(-2px) scale(1.07); }
.na-event-sym { font-size: 15px; line-height: 1; filter: drop-shadow(0 1px 1px rgba(0,0,0,0.4)); }
.na-event-count {
  position: absolute; top: -4px; right: -4px;
  min-width: 14px; height: 14px; padding: 0 3px;
  border-radius: 7px;
  background: #c62828; color: #fff;
  font-size: 9px; font-weight: 700; line-height: 14px; text-align: center;
  box-shadow: 0 0 0 1.5px rgba(255,255,255,0.9);
}
@media (prefers-reduced-motion: reduce) {
  .na-event-glyph { transition: none; }
  .na-event-glyph:hover { transform: none; }
}

/* ─── Animated Trip Route Line ───────────────────────────────────────────────
   The trip planner draws an ordered journey line through the pins. A soft gold
   casing adds depth; the flowing dashed line "marches" from the first pin toward
   the last for a clear sense of travel direction. */
.na-route-casing { filter: drop-shadow(0 0 3px rgba(201,168,76,0.25)); }
.na-route-flow {
  animation: na-route-march 1.1s linear infinite;
}
@keyframes na-route-march {
  to { stroke-dashoffset: -24; }
}
@media (prefers-reduced-motion: reduce) {
  .na-route-flow { animation: none; }
}

/* ─── Enriched country dossier (facts / emergency / history / phrasebook) ───────
   Colours use the theme-aware --na-text-* / --na-gold-mid tokens so the dossier
   stays legible in BOTH the dark (default) and light themes. */
.na-sec-h {
  font-size: 7px; font-weight: 700; color: var(--na-gold-mid);
  letter-spacing: 1.8px; text-transform: uppercase;
  margin: 0 0 7px; display: flex; align-items: center; gap: 6px;
}
.na-sec-h::before {
  content: ""; flex: 0 0 14px; height: 1px;
  background: linear-gradient(90deg, var(--na-gold-mid), transparent);
}

/* Master unit toggle in the dossier header (left of the close button) */
.na-unit-master {
  position: absolute; top: 8px; right: 38px; z-index: 2001;
  height: 22px; padding: 0 8px;
  background: rgba(200,168,75,0.12);
  border: 1px solid rgba(200,168,75,0.32);
  border-radius: 5px; color: var(--na-gold-mid);
  font-family: var(--fm); font-size: 8.5px; font-weight: 700;
  letter-spacing: 0.5px; cursor: pointer; line-height: 1;
  transition: background .12s, color .12s;
}
.na-unit-master:hover { background: rgba(200,168,75,0.24); color: var(--na-text-primary); }
.na-unit-master:focus-visible { outline: 2px solid var(--na-gold-mid); outline-offset: 1px; }

/* At-a-glance fact grid */
.na-facts { margin: 2px 0 10px; }
.na-facts-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px;
}
.na-fact {
  display: flex; align-items: flex-start; gap: 7px;
  padding: 7px 8px; border-radius: 7px;
  background: rgba(200,168,75,0.06);
  border: 1px solid rgba(200,168,75,0.14);
}
.na-fact-ico {
  flex: 0 0 18px; width: 18px; height: 18px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(200,168,75,0.16); font-size: 10px; line-height: 1;
}
.na-fact-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.na-fact-label {
  font-size: 6.5px; letter-spacing: 1px; text-transform: uppercase;
  color: var(--na-text-secondary); font-weight: 700;
}
.na-fact-val {
  font-size: 9.5px; color: var(--na-text-primary); font-weight: 600;
  line-height: 1.3; word-break: break-word;
}
.na-fact-sub { color: var(--na-text-secondary); font-weight: 400; font-size: 8px; }

/* Emergency band — prominent, distinct red accent (legible on both themes) */
.na-emergency {
  display: flex; align-items: center; gap: 9px;
  margin: 2px 0 11px; padding: 8px 10px;
  background: rgba(198,40,40,0.12);
  border: 1px solid rgba(198,40,40,0.40);
  border-left: 3px solid #d32f2f; border-radius: 7px;
}
.na-emg-ico { font-size: 15px; line-height: 1; flex-shrink: 0; }
.na-emg-body { flex: 1; min-width: 0; }
.na-emg-h {
  font-size: 7px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase;
  color: #c62828; margin-bottom: 4px;
}
.na-emg-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.na-emg-chip {
  display: inline-flex; align-items: baseline; gap: 4px;
  padding: 2px 7px; border-radius: 11px;
  background: #c62828; border: 1px solid rgba(198,40,40,0.6);
}
.na-emg-k { font-size: 6.5px; letter-spacing: 0.5px; text-transform: uppercase; color: rgba(255,255,255,0.85); }
.na-emg-n { font-size: 11px; font-weight: 700; color: #fff; letter-spacing: 0.5px; }

/* History */
.na-history { margin: 2px 0 11px; }
.na-history-p {
  margin: 0; font-size: 9px; line-height: 1.6;
  color: var(--na-text-primary); font-weight: 400;
}

/* Phrasebook */
.na-phrasebook {
  margin: 2px 0 6px; padding: 9px 10px;
  background: rgba(200,168,75,0.06);
  border: 1px solid rgba(200,168,75,0.16); border-radius: 8px;
}
.na-ph-native { color: var(--na-text-secondary); font-weight: 400; text-transform: none; letter-spacing: 0; }
.na-ph-table { width: 100%; border-collapse: collapse; }
.na-ph-table td { padding: 4px 0; vertical-align: top; border-bottom: 1px solid rgba(200,168,75,0.12); }
.na-ph-table tr:last-child td { border-bottom: none; }
.na-ph-en { font-size: 8px; color: var(--na-text-secondary); padding-right: 10px !important; white-space: nowrap; }
.na-ph-loc { font-size: 11px; color: var(--na-text-primary); font-weight: 600; text-align: right; }
.na-ph-pron { display: block; font-size: 7.5px; color: var(--na-gold-mid); font-weight: 400; font-style: italic; margin-top: 1px; }
.na-ph-more { margin-top: 6px; }
.na-ph-more > summary {
  cursor: pointer; list-style: none; outline: none;
  font-size: 7px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
  color: var(--na-gold-mid); padding: 3px 0;
}
.na-ph-more > summary::-webkit-details-marker { display: none; }
.na-ph-more > summary::before { content: "▸ "; }
.na-ph-more[open] > summary::before { content: "▾ "; }
.na-ph-nums-h {
  font-size: 6.5px; letter-spacing: 1.4px; text-transform: uppercase;
  color: var(--na-text-secondary); font-weight: 700; margin: 8px 0 5px;
}
.na-ph-nums { display: flex; flex-wrap: wrap; gap: 5px; }
.na-ph-num {
  font-size: 8.5px; color: var(--na-text-primary);
  padding: 2px 6px; border-radius: 5px; background: rgba(200,168,75,0.10);
}
.na-ph-num b { color: var(--na-gold-mid); margin-right: 2px; }
.na-ph-num .na-ph-pron { display: inline; font-size: 7px; margin-left: 2px; }

/* ─── Language flag picker (welcome card + Preferences) ─────────────────────── */
.na-lang-picker {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin: 6px 0 2px;
}
.na-lang-opt {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px; cursor: pointer;
  background: rgba(200,168,75,0.06);
  border: 1px solid rgba(200,168,75,0.22); border-radius: 9px;
  color: var(--na-text-primary); font-size: 11px; font-weight: 500;
  transition: background .15s, border-color .15s, color .15s;
}
.na-lang-opt:hover { background: rgba(200,168,75,0.16); border-color: var(--na-gold-mid); }
.na-lang-opt.active { background: rgba(200,168,75,0.22); border-color: var(--na-gold-bright); color: var(--na-gold-bright); }
.na-lang-opt:focus-visible { outline: 2px solid var(--na-gold-mid); outline-offset: 2px; }
.na-lang-flag { font-size: 16px; line-height: 1; }
.na-lang-name { white-space: nowrap; }
.na-lang-current-flag { font-size: 16px; line-height: 1; }

/* Compact flag button used in the header / welcome corner. */
.na-lang-btn {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 8px; cursor: pointer;
  background: rgba(200,168,75,0.08);
  border: 1px solid rgba(200,168,75,0.3); border-radius: 8px;
  color: var(--na-text-primary); font-size: 12px;
}
.na-lang-btn:hover { background: rgba(200,168,75,0.18); }

/* (Floating language FAB removed — language lives in Preferences + welcome card.) */

/* ─── Right-to-left support (Arabic & Hebrew) ───────────────────────────────
   Document direction flips for content/text flow; the Leaflet map and its
   controls are pinned LTR so panning, zoom buttons and attribution stay sane. */
html[dir="rtl"] #map,
html[dir="rtl"] .leaflet-container,
html[dir="rtl"] .leaflet-control-container { direction: ltr; }
html[dir="rtl"] .na-ph-en { padding-right: 0 !important; padding-left: 10px !important; }
html[dir="rtl"] .na-ph-loc { text-align: left; }
html[dir="rtl"] .na-fact-label,
html[dir="rtl"] .na-sec-h { text-align: right; }
html[dir="rtl"] .na-lang-name { white-space: nowrap; }
html[dir="rtl"] .na-hint-flag-menu { left: auto; right: 50%; transform: translateX(50%); text-align: right; }
html[dir="rtl"] .na-hint-flag-menu .na-lang-opt { justify-content: flex-end; }

/* ─── Welcome card additions (flag picker + links) ──────────────────────────── */
/* Welcome card single-flag language picker — a small flag chip sitting inline
   with the How-it-works / FAQ links, opening a dropdown of every language. */
.na-hint-flagpick { position: relative; display: inline-flex; align-items: center; }
.na-hint-flag-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  min-width: 24px; min-height: 24px;         /* WCAG 2.5.8 target size */
  padding: 2px 5px; border-radius: 6px; cursor: pointer;
  background: none; border: none;            /* no circle — flag + native name */
  transition: transform .15s, opacity .15s;
}
.na-hint-flag-btn:hover { transform: scale(1.05); opacity: 0.85; }
.na-hint-flag-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.na-hint-flag-btn .na-lang-current-flag { font-size: 17px; line-height: 1; }
.na-hint-flag-btn .na-lang-current-name { font-size: 11px; font-weight: 600; line-height: 1; color: var(--na-gold-mid); }
.na-hint-flag-menu {
  position: absolute; left: 50%; transform: translateX(-50%);
  bottom: calc(100% + 8px); z-index: 5;
  display: flex; flex-direction: column; gap: 3px;
  max-height: 46vh; overflow-y: auto; min-width: 156px;
  padding: 7px; border-radius: 12px;
  background: rgba(16,12,5,0.98);
  border: 1px solid var(--b2);
  box-shadow: 0 12px 36px rgba(0,0,0,0.6);
  text-align: left;
}
.na-hint-flag-menu[hidden] { display: none; }
.na-hint-flag-menu .na-lang-opt { width: 100%; justify-content: flex-start; }
.hint-links { display: flex; align-items: center; gap: 8px; margin-top: 10px; justify-content: center; }
.hint-link {
  background: none; border: none; cursor: pointer; padding: 2px 4px;
  color: var(--na-gold-mid); font-size: 11px; font-weight: 600; text-decoration: underline;
  text-underline-offset: 2px; white-space: nowrap;
}
.hint-link:hover { color: var(--na-gold-bright); }
.hint-link-sep { color: var(--na-text-dim); }

/* ─── Preferences picker rows ───────────────────────────────────────────────── */
.pref-row-stack { flex-direction: column; align-items: stretch; gap: 6px; }
.pref-picker-wrap { width: 100%; }
.pref-curr-note { font-size: 9px; color: var(--na-text-dim); margin-top: 2px; }
.na-curr-picker { display: flex; flex-wrap: wrap; gap: 5px; max-height: 168px; overflow-y: auto; padding: 2px; }
.na-curr-opt {
  display: inline-flex; align-items: center; gap: 4px; cursor: pointer;
  padding: 5px 8px; border-radius: 8px; font-size: 10.5px;
  background: rgba(200,168,75,0.06); border: 1px solid rgba(200,168,75,0.22);
  color: var(--na-text-primary); transition: background .15s, border-color .15s, color .15s;
}
.na-curr-opt:hover { background: rgba(200,168,75,0.16); border-color: var(--na-gold-mid); }
.na-curr-opt.active { background: rgba(200,168,75,0.22); border-color: var(--na-gold-bright); color: var(--na-gold-bright); }
.na-curr-opt:focus-visible { outline: 2px solid var(--na-gold-mid); outline-offset: 2px; }
.na-curr-code { font-weight: 700; letter-spacing: 0.4px; }
.na-curr-sym { color: var(--na-text-secondary); }
.na-curr-opt.active .na-curr-sym { color: var(--na-gold-bright); }

/* ─── Help modal: written tutorial + FAQ ────────────────────────────────────── */
#na-help-overlay { position: fixed; inset: 0; z-index: 4000; display: flex; align-items: center; justify-content: center; }
#na-help-backdrop { position: absolute; inset: 0; background: rgba(4,9,18,0.66); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
#na-help-panel {
  position: relative; z-index: 1; width: min(560px, 92vw); max-height: 86vh; overflow-y: auto;
  padding: 22px 24px 26px; border-radius: 16px;
  box-shadow: 0 18px 60px rgba(0,0,0,0.55);
}
#na-help-close {
  position: absolute; top: 12px; right: 14px; width: 30px; height: 30px;
  background: none; border: none; cursor: pointer; font-size: 24px; line-height: 1;
  color: var(--na-text-secondary);
}
#na-help-close:hover { color: var(--na-gold-bright); }
#na-help-close:focus-visible { outline: 2px solid var(--na-gold-mid); outline-offset: 2px; border-radius: 6px; }
.na-help-title { margin: 0 0 8px; font-size: 17px; color: var(--na-gold-bright); letter-spacing: 0.4px; }
.na-help-body { margin-top: 12px; }
.na-help-step { display: flex; gap: 12px; padding: 9px 0; border-bottom: 1px solid rgba(200,168,75,0.12); }
.na-help-step:last-of-type { border-bottom: none; }
.na-help-step-n {
  flex: 0 0 26px; height: 26px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(200,168,75,0.16); color: var(--na-gold-bright);
  font-size: 12px; font-weight: 700;
}
.na-help-step-c h3 { margin: 2px 0 3px; font-size: 13px; color: var(--na-text-primary); }
.na-help-step-c p { margin: 0; font-size: 12px; line-height: 1.55; color: var(--na-text-secondary); }
.na-help-cta { margin-top: 16px; text-align: center; }
.na-faq-item { padding: 8px 0; border-bottom: 1px solid rgba(200,168,75,0.12); }
.na-faq-item:last-of-type { border-bottom: none; }
.na-faq-item > summary {
  cursor: pointer; list-style: none; outline: none;
  font-size: 13px; font-weight: 600; color: var(--na-text-primary); padding: 3px 0;
}
.na-faq-item > summary::-webkit-details-marker { display: none; }
.na-faq-item > summary::before { content: "+ "; color: var(--na-gold-mid); font-weight: 700; }
.na-faq-item[open] > summary::before { content: "– "; }
.na-faq-item > p { margin: 6px 0 4px; font-size: 12px; line-height: 1.6; color: var(--na-text-secondary); }
.na-faq-item > summary:focus-visible { outline: 2px solid var(--na-gold-mid); outline-offset: 2px; border-radius: 4px; }

/* ─── Dossier: additional traveler content ──────────────────────────────────── */
.na-extra-wrap { margin: 2px 0 10px; }
.na-extra-tap {
  display: flex; gap: 9px; align-items: flex-start;
  padding: 8px 10px; margin-bottom: 8px; border-radius: 8px;
  background: rgba(200,168,75,0.06); border: 1px solid rgba(200,168,75,0.16);
}
.na-extra-ico { font-size: 16px; line-height: 1.2; }
.na-extra-tc { flex: 1; }
.na-extra-h {
  font-size: 7px; letter-spacing: 1.4px; text-transform: uppercase;
  color: var(--na-text-secondary); font-weight: 700; margin-bottom: 3px;
}
.na-extra-p { font-size: 9px; line-height: 1.55; color: var(--na-text-primary); }
.tw-badge {
  display: inline-block; margin-left: 4px; padding: 1px 5px; border-radius: 8px;
  font-size: 7px; font-weight: 700; letter-spacing: 0.4px; text-transform: capitalize;
  color: #fff;
}
.tw-safe .tw-badge    { background: #2e7d32; }
.tw-caution .tw-badge { background: #b8860b; }
.tw-unsafe .tw-badge  { background: #c62828; }
.na-extra-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.na-extra-block {
  padding: 7px 9px; border-radius: 8px;
  background: rgba(200,168,75,0.05); border: 1px solid rgba(200,168,75,0.13);
}
.na-extra-block:first-child:nth-last-child(odd) { grid-column: 1 / -1; }
.na-extra-ul { margin: 0; padding-left: 14px; }
.na-extra-ul li { font-size: 9px; line-height: 1.5; color: var(--na-text-primary); margin-bottom: 2px; }
@media (max-width: 420px) { .na-extra-grid { grid-template-columns: 1fr; } }

/* ─── Dossier header action cluster (compare · wishlist · add-to-trip) ───────── */
.tt-head-actions { display: flex; justify-content: flex-end; gap: 5px; margin-top: 7px; }
.tt-hact {
  width: 30px; height: 28px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; line-height: 1;
  background: rgba(200,168,75,0.08); border: 1px solid rgba(200,168,75,0.28);
  border-radius: 7px; color: var(--na-text-secondary);
  transition: background .14s, border-color .14s, color .14s, transform .14s;
}
.tt-hact:hover { background: rgba(200,168,75,0.18); border-color: var(--na-gold-mid); color: var(--na-gold-bright); transform: translateY(-1px); }
.tt-hact:focus-visible { outline: 2px solid var(--na-gold-mid); outline-offset: 2px; }
.tt-hact.tt-pin-btn.pinned { color: var(--na-gold-bright); border-color: var(--na-gold-bright); background: rgba(200,168,75,0.22); }
.tt-hact.tt-wish.on { color: #ec4899; border-color: rgba(236,72,153,0.6); background: rgba(236,72,153,0.12); }

/* ─── Collapsible country-info sections ─────────────────────────────────────── */
.na-dsec { border-bottom: 1px solid rgba(200,168,75,0.10); }
.na-dsec:last-of-type { border-bottom: none; }
.na-dsec-h {
  list-style: none; cursor: pointer; outline: none;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 9px 2px; user-select: none;
}
.na-dsec-h::-webkit-details-marker { display: none; }
.na-dsec-t {
  font-size: 8px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase;
  color: var(--na-gold-mid);
}
.na-dsec-x { color: var(--na-text-secondary); transition: transform .18s ease; flex-shrink: 0; }
.na-dsec[open] > .na-dsec-h .na-dsec-x { transform: rotate(180deg); }
.na-dsec-h:hover .na-dsec-t { color: var(--na-gold-bright); }
.na-dsec-h:focus-visible { outline: 2px solid var(--na-gold-mid); outline-offset: -2px; border-radius: 4px; }
.na-dsec-b { padding: 0 2px 10px; }
.na-dsec-emg .na-dsec-t { color: #ef5350; }
.na-ph-lang { font-size: 9px; color: var(--na-text-secondary); margin-bottom: 6px; font-weight: 600; }
@media (prefers-reduced-motion: reduce) { .na-dsec-x { transition: none; } }

/* ─── iOS-style window treatment: soft large radius + layered shadow ─────────── */
:root {
  --na-win-radius: 20px;
  --na-win-shadow: 0 16px 48px rgba(0,0,0,0.5), 0 3px 12px rgba(0,0,0,0.34);
}
#onboarding-hint,
#tt,
#na-help-panel,
#compare-panel,
#trip-panel,
#na-search-panel,
#na-prefs-panel,
#na-more-panel,
#na-sheet-panel {
  border-radius: var(--na-win-radius) !important;
  box-shadow: var(--na-win-shadow) !important;
}
/* Menus and dropdowns: slightly tighter radius, same soft shadow. */
.cat-dd,
#explore-dd,
.na-curr-picker {
  border-radius: 14px !important;
  box-shadow: var(--na-win-shadow) !important;
}
/* Mobile bottom-sheets keep their top-only rounding (flush to the screen edge). */
@media (max-width: 767px) {
  #na-prefs-panel, #na-more-panel, #na-sheet-panel { border-radius: 22px 22px 0 0 !important; }
}

/* ─── Mobile "More" sheet — reuses the Preferences sheet layout ──────────── */
#na-more-sheet {
  position: fixed; inset: 0; z-index: 2200;
  display: flex; align-items: flex-end;
}
#na-more-sheet[hidden] { display: none; }
#na-more-overlay {
  position: absolute; inset: 0;
  background: rgba(5,8,20,0.72); backdrop-filter: blur(2px);
}
#na-more-panel {
  position: relative; z-index: 1;
  width: 100%; max-height: 85vh; overflow-y: auto;
  background: var(--na-glass-navy, rgba(8,15,40,0.97));
  border: 1px solid rgba(201,168,76,0.18);
  border-bottom: none;
  border-radius: 18px 18px 0 0;
  padding: var(--sp-3) var(--sp-5) var(--sp-6);
}
#na-more-handle {
  width: 40px; height: 4px; border-radius: 2px;
  background: rgba(201,168,76,0.35);
  margin: 0 auto var(--sp-3);
}
#na-more-title {
  font-family: var(--font-label); font-size: 11px;
  letter-spacing: 3px; text-transform: uppercase;
  color: var(--na-gold-mid, #c9a84c);
  text-align: center; margin-bottom: var(--sp-2);
}
#na-more-body { padding-top: var(--sp-3); }
#na-more-passport select {
  width: 100%; min-height: 44px;
  font-family: var(--font-label); font-size: 12px;
  color: var(--na-text-primary, #e8d5a3);
  background: rgba(201,168,76,0.06);
  border: 1px solid rgba(201,168,76,0.22);
  border-radius: 8px; padding: 6px 10px;
}
.na-more-action {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; min-height: 48px;
  margin-top: 10px; padding: 12px 14px;
  font-family: var(--font-label); font-size: 11px;
  letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--na-text-primary, #e8d5a3);
  background: rgba(201,168,76,0.06);
  border: 1px solid rgba(201,168,76,0.20);
  border-radius: 10px; cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.na-more-action::after { content: '›'; color: var(--na-gold-mid, #c9a84c); font-size: 16px; }
.na-more-action:hover { background: rgba(201,168,76,0.14); border-color: rgba(201,168,76,0.4); }
.na-more-action:focus-visible { outline: 2px solid var(--na-gold-mid); outline-offset: 2px; }

/* ─── Web top bar mirrors mobile: the cluttered desktop control strip is hidden,
   leaving the clean persistent header (#na-header). Month, nationality and layer
   controls remain reachable via the left sidebar and the bottom menu. ───────── */
@media (min-width: 768px) {
  #topbar { display: none !important; }
}

/* ── UX-audit fix: meet the 44px minimum touch target on dense mobile chrome ── */
@media (max-width: 767px) {
  .mb, #btn-year, .cat-btn, .lb { min-height: 44px; }
  #na-tour-pop .tour-btn, #onboarding-hint .hint-btn { min-height: 44px; }
}


/* ── Country-guide button inside province/county tooltips ──────────────────── */
.tt-open-country {
  display: block;
  width: 100%;
  margin: 7px 0 3px;
  padding: 6px 9px;
  background: rgba(201, 168, 76, 0.08);
  border: 1px solid rgba(201, 168, 76, 0.35);
  border-radius: 8px;
  color: var(--gold, #c9a84c);
  font-family: var(--fm, 'IBM Plex Mono', monospace);
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.tt-open-country:hover,
.tt-open-country:focus-visible {
  background: rgba(201, 168, 76, 0.18);
  border-color: rgba(201, 168, 76, 0.6);
}
[data-theme="light"] .tt-open-country {
  color: #6b5212;
  border-color: rgba(107, 82, 18, 0.4);
  background: rgba(107, 82, 18, 0.06);
}
[data-theme="light"] .tt-open-country:hover,
[data-theme="light"] .tt-open-country:focus-visible {
  background: rgba(107, 82, 18, 0.14);
}