/* ============================================================
   CruisePort AI · _components.css · v6
   One token file (_tokens.css), one component file (this one).
   No per-page layer. Every page now loads exactly:
     <link rel="stylesheet" href="_tokens.css">
     <link rel="stylesheet" href="_components.css">

   Contract:
     · Status uses ink + line tokens, never raw hex.
     · Never use --warn as a text colour. Status text is --warn-ink.
     · Chips / badges / tags are square at 4px. --r-pill is the Ask FAB only.
     · 44px minimum hit targets.
     · One focus-ring spec: var(--gold), width var(--focus-ring-w),
       offset var(--focus-offset). See FACTORED PRIMITIVES below.
     · One reduced-motion contract: this file, plus the
       html[data-motion="reduced"] override that lives in _tokens.css.

   Built by concatenating the old layers in cascade order, so the file
   renders identically to the live five-file stack before any cleanup:
     base (_styles.css) + v3 + v4 + v5 (root sparse-states and the master
     clean rework, merged) + a11y components.
   On top of that, render-neutral cleanups are applied: the 50+ status
   raw-hex are swept to ink/line tokens, --warn as a text colour is moved
   to --warn-ink, the seven known selector conflicts are resolved
   latest-wins, and the scroll-card tile logic is folded into one block.

   Copy rule: no em or en dashes anywhere. Middle dot and colon separate.
   ============================================================ */

/* ============================================================
   FACTORED PRIMITIVES (v6)
   ------------------------------------------------------------
   ONE focus-ring spec. A zero-specificity :where() umbrella sets the
   gold ring on every interactive control, so a control can never ship
   with no visible keyboard focus. Any component rule that needs a
   different offset (for example an inset ring on a flush segmented
   control) still wins, because it has higher specificity than :where().
   The old per-element focus rules are left in place below and are now
   redundant for the standard case; they can be trimmed in the build
   window once a live diff confirms no inset case relies on them.
   ============================================================ */
:where(a[href], button, input, select, textarea, summary,
       [role="tab"], [role="button"], [role="link"], [role="menuitem"],
       [role="switch"]):focus-visible {
  outline: var(--focus-ring-w) solid var(--gold);
  outline-offset: var(--focus-offset);
}


/* ========================================================================
   LAYER 1 · BASE  (from _styles.css: reset, type ramp, and all base components)
   ======================================================================== */
/* ---- RESET / BASE ---- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}
body {
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  color: var(--fg-1);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img { max-width: 100%; display: block; }
button { font: inherit; cursor: pointer; }
a { color: var(--navy-ink); text-decoration: none; }
a:hover { color: var(--navy); text-decoration: underline; text-underline-offset: 3px; }

/* ---- ACCESSIBILITY HELPERS ---- */
.pg-skip {
  position: absolute; left: -9999px; top: 8px;
  background: var(--navy-ink); color: #fff;
  padding: 10px 16px; border-radius: var(--r-6);
  text-decoration: none; font-weight: 600; font-size: 14px;
  z-index: 1000;
}
.pg-skip:focus { left: 8px; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; border-radius: 2px; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---- LAYOUT ---- */
.pg-container { max-width: var(--container); margin: 0 auto; padding: 0 16px; }
@media (min-width: 768px) { .pg-container { padding: 0 24px; } }
@media (min-width: 1024px){ .pg-container { padding: 0 32px; } }

/* ---- TYPE ---- */
.pg-h-display { font-family: var(--serif); font-weight: 500; font-size: 40px; line-height: 1.05; letter-spacing: -0.015em; color: var(--navy-ink); margin: 0; }
.pg-h-display em { font-style: italic; font-weight: 400; color: var(--gold); }
@media (min-width: 768px) { .pg-h-display { font-size: 60px; } }

.pg-h1 { font-family: var(--serif); font-weight: 500; font-size: 32px; line-height: 1.1; letter-spacing: -0.015em; color: var(--navy-ink); margin: 0; }
@media (min-width: 768px) { .pg-h1 { font-size: 48px; } }

.pg-h2 { font-family: var(--serif); font-weight: 500; font-size: 26px; line-height: 1.15; letter-spacing: -0.01em; color: var(--navy-ink); margin: 0; }
@media (min-width: 768px) { .pg-h2 { font-size: 32px; } }

.pg-h3 { font-family: var(--serif); font-weight: 500; font-size: 20px; line-height: 1.2; color: var(--navy-ink); margin: 0; }
@media (min-width: 768px) { .pg-h3 { font-size: 22px; } }

.pg-h4 { font-family: var(--serif); font-weight: 500; font-size: 18px; line-height: 1.25; color: var(--navy-ink); margin: 0; }

.pg-lede { font-family: var(--serif); font-weight: 400; font-size: 18px; line-height: 1.5; color: var(--fg-2); margin: 0; }
@media (min-width: 768px) { .pg-lede { font-size: 20px; } }

.pg-eyebrow {
  font-family: var(--sans); font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--fg-3); margin: 0;
}
.pg-muted { color: var(--fg-2); }
.pg-meta { font-size: 13px; color: var(--fg-2); }
.pg-tabular { font-variant-numeric: tabular-nums; }

/* ---- TOP NAV ---- */
.pg-nav {
  background: var(--navy);
  color: #fff;
  height: var(--nav-h);
  position: sticky; top: 0; z-index: 50;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.pg-nav__inner { display: flex; align-items: center; gap: 18px; height: 100%; }
.pg-nav__brand { font-family: var(--serif); font-size: 20px; font-weight: 500; letter-spacing: -0.01em; color: #fff; text-decoration: none; }
.pg-nav__brand:hover { color: #fff; text-decoration: none; }
.pg-nav__brand .ai { color: var(--gold); font-style: italic; font-weight: 400; }
.pg-nav__crumb { display: none; font-size: 13px; color: rgba(255,255,255,0.7); }
@media (min-width: 768px) { .pg-nav__crumb { display: inline; } }
.pg-nav__crumb a { color: rgba(255,255,255,0.7); }
.pg-nav__crumb a:hover { color: #fff; }
.pg-nav__spacer { flex: 1; }
.pg-nav__cta {
  background: var(--gold); color: var(--navy-ink);
  border: 0; border-radius: var(--r-4);
  padding: 8px 14px;
  font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em;
  min-height: 36px;
}
.pg-nav__cta:hover { background: var(--gold-hover); }

/* ---- PORT NEWS FEED (Overview, above verdict) ---- */
.pg-news {
  display: flex; flex-direction: column; gap: 8px;
  background: var(--card); border: 1px solid var(--rule); border-radius: var(--r-6);
  padding: 18px 20px;
}
.pg-news__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 4px; }
.pg-news__title { font-family: var(--serif); font-weight: 500; font-size: 18px; color: var(--navy-ink); margin: 0; }
.pg-news__count { font-size: 11px; color: var(--fg-3); text-transform: uppercase; letter-spacing: 0.1em; font-weight: 600; }
.pg-news__item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 10px;
  padding: 10px 0;
  border-top: 1px solid var(--rule);
  align-items: baseline;
}
.pg-news__item:first-of-type { border-top: 0; padding-top: 4px; }
.pg-news__type {
  font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em;
  padding: 3px 7px; border-radius: var(--r-4);
  white-space: nowrap;
}
.pg-news__type--alert  { background: var(--bad-soft);  color: var(--bad-ink); }
.pg-news__type--warn   { background: var(--warn-soft); color: var(--warn-ink); }
.pg-news__type--info   { background: var(--info-soft); color: var(--info); }
.pg-news__type--update { background: var(--ok-soft);   color: var(--ok-ink); }
.pg-news__body { font-size: 14px; color: var(--fg-1); line-height: 1.45; }
.pg-news__body strong { font-weight: 600; color: var(--navy-ink); }
.pg-news__when { font-size: 11px; color: var(--fg-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pg-news__foot {
  margin-top: 4px; padding-top: 10px; border-top: 1px solid var(--rule);
  font-size: 12px; color: var(--fg-2);
}
.pg-news__foot a { font-weight: 600; }

/* ---- ASK CRUISEPORT, floating chat dock ---- */
.pg-ask {
  position: fixed; right: 16px; bottom: 16px;
  z-index: 60;
  display: flex; flex-direction: column; align-items: flex-end; gap: 10px;
}
@media (min-width: 768px) {
  .pg-ask { right: 24px; bottom: 24px; }
}
.pg-ask__fab {
  appearance: none; border: 0; cursor: pointer;
  background: var(--navy); color: #fff;
  height: 52px; padding: 0 22px;
  border-radius: var(--r-8);
  font-family: var(--sans); font-size: 14px; font-weight: 600;
  display: inline-flex; align-items: center; gap: 10px;
  box-shadow: var(--sh-lg);
  min-height: 44px;
}
.pg-ask__fab:hover { background: var(--navy-ink); }
.pg-ask__fab .ai { color: var(--gold); font-family: var(--serif); font-style: italic; font-weight: 400; }
.pg-ask__fab__icon {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--gold); color: var(--navy-ink);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; font-family: var(--serif); font-style: italic;
}
.pg-ask__panel {
  display: none;
  width: min(380px, calc(100vw - 32px));
  max-height: min(560px, calc(100vh - 120px));
  background: var(--card); border: 1px solid var(--rule); border-radius: var(--r-8);
  box-shadow: var(--sh-lg);
  overflow: hidden;
  flex-direction: column;
}
.pg-ask[data-open="true"] .pg-ask__panel { display: flex; }
.pg-ask[data-open="true"] .pg-ask__fab { display: none; }
.pg-ask__head {
  background: var(--navy); color: #fff;
  padding: 14px 16px;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.pg-ask__head__title { font-family: var(--serif); font-weight: 500; font-size: 16px; color: #fff; }
.pg-ask__head__title em { color: var(--gold); font-style: italic; font-weight: 400; }
.pg-ask__head__meta { font-size: 11px; color: rgba(255,255,255,0.7); margin-top: 2px; }
.pg-ask__close {
  appearance: none; border: 0; cursor: pointer; flex-shrink: 0;
  background: rgba(255,255,255,0.14); color: #fff;
  width: 34px; height: 34px; border-radius: var(--r-4);
  font-size: 22px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
}
.pg-ask__close:hover { background: rgba(255,255,255,0.28); color: #fff; }
.pg-ask__body {
  flex: 1; overflow-y: auto;
  padding: 14px;
  display: flex; flex-direction: column; gap: 10px;
  background: var(--paper);
}
.pg-msg {
  max-width: 86%; padding: 10px 14px;
  font-size: 14px; line-height: 1.5;
  border-radius: var(--r-8);
}
.pg-msg--ai {
  align-self: flex-start;
  background: var(--card); border: 1px solid var(--rule);
  color: var(--fg-1);
  border-top-left-radius: 4px;
}
.pg-msg--user {
  align-self: flex-end;
  background: var(--navy); color: #fff;
  border-top-right-radius: 4px;
}
.pg-msg__source {
  margin-top: 6px;
  font-size: 11px; color: var(--fg-3);
  font-style: italic;
}
.pg-msg__source a { color: var(--info); font-weight: 600; font-style: normal; }
.pg-ask__chips {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 10px 14px;
  border-top: 1px solid var(--rule);
  background: var(--card);
}
/* Ask dock chips are square per brief tweak #1; FAB itself stays pill (exception). */
.pg-ask__chip {
  appearance: none; background: var(--paper); border: 1px solid var(--rule);
  font-family: var(--sans); font-size: 12px; font-weight: 500;
  color: var(--navy-ink);
  padding: 8px 12px; border-radius: var(--r-4);
  cursor: pointer;
  min-height: 32px;
}
.pg-ask__chip:hover { border-color: var(--gold); }
.pg-ask__input {
  display: flex; gap: 8px;
  padding: 12px 14px; border-top: 1px solid var(--rule);
  background: var(--card);
}
.pg-ask__field {
  flex: 1; appearance: none;
  border: 1px solid var(--rule); border-radius: var(--r-4);
  padding: 10px 14px;
  font-family: var(--sans); font-size: 14px;
  background: var(--paper); color: var(--navy-ink);
  min-height: 44px;
}
.pg-ask__field:focus { background: #fff; }
.pg-ask__field::placeholder { color: var(--fg-3); }
.pg-ask__send {
  appearance: none; border: 0; cursor: pointer;
  background: var(--gold); color: var(--navy-ink);
  height: 44px; padding: 0 16px;
  border-radius: var(--r-4);
  font-family: var(--sans); font-size: 13px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em;
  min-height: 44px;
}
.pg-ask__send:hover { background: var(--gold-hover); }
.pg-ask__foot {
  padding: 8px 14px;
  font-size: 11px; color: var(--fg-3);
  background: var(--card);
  text-align: center;
  border-top: 1px solid var(--rule);
}

/* ---- HERO ---- */
.pg-hero {
  position: relative;
  background: var(--navy);
  color: #fff;
  overflow: hidden;
}
.pg-hero__image {
  width: 100%; aspect-ratio: 4 / 3;
  background:
    linear-gradient(180deg, rgba(26,32,54,0) 30%, rgba(26,32,54,0.55) 65%, rgba(26,32,54,0.92) 100%),
    linear-gradient(135deg, #2C344C 0%, #1A2036 100%);
  position: relative;
}
@media (min-width: 768px) { .pg-hero__image { aspect-ratio: 16 / 9; max-height: 520px; } }
.pg-hero__placeholder {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,0.18); font-family: var(--serif); font-style: italic; font-size: 14px;
}
.pg-hero__overlay {
  position: absolute; inset: 0; display: flex; align-items: flex-end;
}
.pg-hero__overlay .pg-container { padding-bottom: 24px; width: 100%; }
@media (min-width: 768px) { .pg-hero__overlay .pg-container { padding-bottom: 48px; } }
.pg-hero__eyebrow {
  font-family: var(--sans); font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.14em;
  color: rgba(255,255,255,0.7); margin: 0 0 10px;
}
/* Hero title: white. Eyebrow + facts: white at 85% opacity. Subtitle: 90% opacity. (Brief tweak #6) */
.pg-hero__title {
  font-family: var(--serif); font-weight: 500;
  font-size: 36px; line-height: 1.05; letter-spacing: -0.015em;
  color: #fff; margin: 0;
}
@media (min-width: 768px) { .pg-hero__title { font-size: 64px; } }
.pg-hero__title em { color: var(--gold); font-style: italic; font-weight: 400; }
.pg-hero__sub {
  margin: 12px 0 0;
  font-family: var(--serif); font-weight: 400;
  font-size: 16px; line-height: 1.45;
  color: rgba(255,255,255,0.90);
  max-width: 640px;
}
@media (min-width: 768px) { .pg-hero__sub { font-size: 20px; } }
.pg-hero__facts {
  display: flex; flex-wrap: wrap; gap: 10px 18px;
  margin-top: 20px;
  font-size: 12px; color: rgba(255,255,255,0.85);
}
.pg-hero__fact { display: inline-flex; align-items: baseline; gap: 6px; }
.pg-hero__fact__label { color: rgba(255,255,255,0.6); font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; font-size: 10px; }
.pg-hero__fact__value { color: #fff; font-weight: 500; font-size: 13px; }
/* Hero placeholder (no image): navy bg, port name in italic serif at 18% opacity. (Brief tweak #6) */
.pg-hero__placeholder--missing {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: var(--navy);
  color: rgba(255,255,255,0.18);
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: 64px; letter-spacing: -0.01em;
  pointer-events: none;
}

/* ---- STICKY TAB NAV ---- */
.port-tab-nav {
  background: #fff;
  border-bottom: 1px solid var(--rule);
  position: sticky; top: var(--nav-h); z-index: 40;
  overflow: hidden;
}
.port-tab-nav__scroll {
  display: flex; gap: 0;
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.port-tab-nav__scroll::-webkit-scrollbar { display: none; }
.port-tab-nav .pg-container {
  padding: 0 16px;
}
@media (min-width: 768px) { .port-tab-nav .pg-container { padding: 0 24px; } }
@media (min-width: 1024px){ .port-tab-nav .pg-container { padding: 0 32px; } }
.port-tab {
  appearance: none; background: transparent; border: 0;
  font-family: var(--sans); font-size: 14px; font-weight: 500;
  color: var(--fg-2);
  padding: 16px 14px;
  white-space: nowrap; scroll-snap-align: center;
  position: relative;
  cursor: pointer;
  min-height: 52px;
  border-bottom: 3px solid transparent;
  transition: color .15s, border-color .15s;
}
.port-tab:hover { color: var(--navy-ink); }
.port-tab--active {
  color: var(--navy-ink);
  font-weight: 600;
  border-bottom-color: var(--gold);
}
.port-tab:focus-visible { outline: 3px solid var(--gold); outline-offset: -3px; border-radius: 0; }
@media (min-width: 768px) { .port-tab { padding: 16px 18px; font-size: 15px; } }

/* ---- TAB PANELS ---- */
.pg-tab-panel { display: none; padding: 24px 0 64px; }
.pg-tab-panel--active { display: block; }
@media (min-width: 768px) { .pg-tab-panel { padding: 40px 0 96px; } }

.pg-section { margin-top: 40px; }
.pg-section:first-child { margin-top: 0; }
.pg-section-title-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  margin-bottom: 16px;
}
.pg-section-title {
  font-family: var(--serif); font-weight: 500;
  font-size: 24px; line-height: 1.15; letter-spacing: -0.01em;
  color: var(--navy-ink); margin: 0;
}
@media (min-width: 768px) { .pg-section-title { font-size: 32px; } }
.pg-section-subtitle {
  font-family: var(--serif); font-weight: 400; font-size: 18px;
  color: var(--fg-2); margin: 4px 0 0;
}
.pg-section-link {
  font-family: var(--sans); font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--navy-ink); text-decoration: none;
  white-space: nowrap;
}
.pg-section-link::after { content: ' →'; color: var(--gold); }
.pg-section-link:hover { color: var(--gold-hover); text-decoration: none; }

/* Page breadcrumb (job 611, ported from the canon design's .poi-breadcrumb, website/design/v8-final/poi.html) */
.pg-breadcrumb {
  padding: 14px 0;
  font-size: 12px; font-family: var(--sans); font-weight: 500;
  color: var(--fg-3);
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.pg-breadcrumb a { color: var(--fg-3); text-decoration: none; }
.pg-breadcrumb a:hover { color: var(--navy-ink); }
.pg-breadcrumb__sep { color: var(--rule); }
.pg-breadcrumb__current { color: var(--navy-ink); font-weight: 600; }

/* ---- CARD ---- */
.pg-card {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--r-6);
  padding: 20px;
  box-shadow: var(--sh-sm);
}
@media (min-width: 768px) { .pg-card { padding: 28px; } }
.pg-card--featured { border-top: 3px solid var(--gold); }
.pg-card--gold { background: var(--muted-fill); }
.pg-card--highlight { background: var(--info-soft); border-color: rgba(30,64,175,0.18); }
.pg-card--dark { background: var(--navy); color: #fff; border: 0; }
.pg-card--dark .pg-card__title { color: #fff; }
.pg-card--dark .pg-card__text { color: rgba(255,255,255,0.85); }
.pg-card__eyebrow {
  font-family: var(--sans); font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--fg-3); margin: 0 0 8px;
}
.pg-card__title {
  font-family: var(--serif); font-weight: 500;
  font-size: 22px; line-height: 1.2;
  color: var(--navy-ink); margin: 0 0 8px;
}
.pg-card__text { color: var(--fg-1); margin: 0 0 8px; line-height: 1.55; }
.pg-card__text:last-child { margin-bottom: 0; }
.pg-card__list { list-style: none; padding: 0; margin: 8px 0 0; }
.pg-card__list li {
  padding: 8px 0; border-top: 1px solid var(--rule);
  font-size: 15px; line-height: 1.5;
}
.pg-card__list li:first-child { border-top: 0; padding-top: 0; }

/* ---- FACT GRID ---- */
.pg-fact-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px 24px;
}
@media (min-width: 768px) { .pg-fact-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .pg-fact-grid--4 { grid-template-columns: repeat(4, 1fr); } }
.pg-fact { display: flex; flex-direction: column; gap: 4px; }
.pg-fact__label {
  font-family: var(--sans); font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--fg-3);
}
.pg-fact__value {
  font-family: var(--sans); font-size: 16px; font-weight: 500;
  color: var(--navy-ink); line-height: 1.35;
}

/* ---- CHIPS / BADGES / TAGS, square 4px per brief tweak #1 ---- */
.pg-chip {
  display: inline-flex; align-items: center; gap: 4px;
  height: 24px; padding: 0 8px;
  border-radius: var(--r-4);
  font-family: var(--sans); font-size: 12px; font-weight: 600;
  background: var(--muted-fill); color: var(--navy-soft);
  line-height: 1; white-space: nowrap;
}
.pg-chip--ok    { background: var(--ok-soft);   color: var(--ok-ink); }
.pg-chip--warn  { background: var(--warn-soft); color: var(--warn-ink); }
.pg-chip--bad   { background: var(--bad-soft);  color: var(--bad-ink); }
.pg-chip--info  { background: var(--info-soft); color: var(--info); }
.pg-chip--time  { background: var(--muted-fill); color: var(--navy-soft); }
.pg-chips { display: flex; flex-wrap: wrap; gap: 6px; }

/* ---- PILLS (filter rows) ---- */
.pg-pills {
  display: flex; gap: 8px; flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 4px 0 6px;
  margin: 0 -16px;
  padding-left: 16px; padding-right: 16px;
}
@media (min-width: 768px) {
  .pg-pills { flex-wrap: wrap; overflow-x: visible; margin: 0; padding-left: 0; padding-right: 0; }
}
.pg-pills::-webkit-scrollbar { display: none; }
.pg-pill {
  appearance: none; background: transparent;
  border: 1px solid var(--rule); border-radius: var(--r-4);
  padding: 8px 14px;
  font-family: var(--sans); font-size: 13px; font-weight: 500;
  color: var(--navy-ink);
  white-space: nowrap; cursor: pointer;
  min-height: 44px;
  display: inline-flex; align-items: center;
}
.pg-pill:hover { border-color: var(--gold); }
.pg-pill:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.pg-pill--active {
  background: var(--navy);
  color: #fff;
  border-color: var(--navy);
}
.pg-pill[disabled] { opacity: 0.5; cursor: not-allowed; }

/* ---- BUTTONS ---- */
.pg-btn {
  appearance: none; border: 0;
  border-radius: var(--r-4);
  padding: 12px 18px;
  font-family: var(--sans); font-size: 14px; font-weight: 600;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px;
  text-decoration: none;
}
.pg-btn--primary { background: var(--navy); color: #fff; }
.pg-btn--primary:hover { background: var(--navy-ink); color: #fff; text-decoration: none; }
.pg-btn--secondary { background: #fff; color: var(--navy-ink); border: 1px solid var(--rule); }
.pg-btn--secondary:hover { border-color: var(--gold); color: var(--navy-ink); text-decoration: none; }
.pg-btn--gold { background: var(--gold); color: var(--navy-ink); }
.pg-btn--gold:hover { background: var(--gold-hover); color: var(--navy-ink); text-decoration: none; }
.pg-btn--ghost { background: transparent; color: var(--navy-ink); }
.pg-btn--small { padding: 8px 12px; font-size: 12px; min-height: 36px; }

/* ---- HORIZONTAL CARD SCROLLER ---- */
.pg-scroll {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 78%;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  margin: 0 -16px;
  padding: 4px 16px 16px;
}
.pg-scroll::-webkit-scrollbar { display: none; }
@media (min-width: 768px) {
  .pg-scroll { grid-auto-columns: 46%; margin: 0; padding: 4px 0 16px; }
}
@media (min-width: 1024px) {
  .pg-scroll { grid-auto-columns: calc((100% - 24px) / 3); gap: 12px; }
}

/* ---- SCROLL CAROUSEL WRAPPER (auto-injected by JS) ---- */
.pg-scroll-carousel { position: relative; }
.pg-scroll-carousel .pg-carousel__btn {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 5;
}
.pg-scroll-carousel .pg-carousel__btn--prev { left: -22px; }
.pg-scroll-carousel .pg-carousel__btn--next { right: -22px; }
@media (max-width: 1023px) {
  .pg-scroll-carousel .pg-carousel__btn--prev { left: 4px; }
  .pg-scroll-carousel .pg-carousel__btn--next { right: 4px; }
}

/* ---- MAP COLLAPSED STATE ---- */
.pg-map--collapsed .pg-map__canvas,
.pg-map--collapsed .pg-map__legend { display: none; }
.pg-map__toggle {
  margin-left: auto;
  background: none; border: 1px solid var(--rule); border-radius: var(--r-4);
  padding: 4px 10px; font-size: 12px; font-family: var(--sans); font-weight: 600;
  color: var(--fg-2); cursor: pointer; transition: border-color .15s, color .15s;
  white-space: nowrap;
}
.pg-map__toggle:hover { border-color: var(--gold); color: var(--navy-ink); }
.pg-map__head { display: flex; align-items: center; gap: 12px; }
.pg-scroll__item { scroll-snap-align: start; }

/* ---- SCROLL CARD (used in scrollers + grouped lists) ---- */
.pg-scroll-card {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--r-6);
  overflow: hidden;
  display: flex; flex-direction: column;
  height: 100%;
}
.pg-scroll-card__media {
  aspect-ratio: 16 / 9; width: 100%;
  background: linear-gradient(135deg, #2C344C 0%, #1A2036 100%);
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,0.25); font-family: var(--serif); font-style: italic; font-size: 13px;
}
.pg-scroll-card__body { padding: 14px 16px 18px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.pg-scroll-card__cat {
  font-family: var(--sans); font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--fg-3);
}
.pg-scroll-card__title {
  font-family: var(--serif); font-weight: 500; font-size: 17px;
  color: var(--navy-ink); line-height: 1.25;
  margin: 0;
}
.pg-scroll-card__desc { font-size: 14px; color: var(--fg-2); line-height: 1.5; margin: 0; }
.pg-scroll-card__meta {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-top: auto;
}

/* ---- SCROLL CARD · 4-TILE GRID ---- */
.pg-scroll-card__map {
  font-size: 11px; color: var(--fg-3); text-decoration: none;
  display: flex; align-items: center; gap: 3px; margin-top: 2px;
}
.pg-scroll-card__map:hover { color: var(--gold); }
.pg-scroll-card__tiles {
  display: grid; grid-template-columns: 1fr 1fr; gap: 5px;
  margin-top: 10px;
}
.pg-scroll-card__tile {
  background: var(--muted-fill); border: 1px solid var(--rule);
  border-radius: var(--r-4); padding: 6px 8px;
  display: flex; flex-direction: column; gap: 2px;
}
.pg-scroll-card__tile-lbl {
  font-size: 9px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.1em; color: var(--fg-3);
}
.pg-scroll-card__tile-val {
  font-size: 12px; font-weight: 600; color: var(--navy-ink); line-height: 1.2;
}
.pg-scroll-card__tile--ok   { background: var(--ok-soft);   border-color: var(--ok-line); }
.pg-scroll-card__tile--ok   .pg-scroll-card__tile-lbl { color: var(--ok); }
.pg-scroll-card__tile--ok   .pg-scroll-card__tile-val { color: var(--ok-ink); }
.pg-scroll-card__tile--warn { background: var(--warn-soft); border-color: var(--warn-line); }
.pg-scroll-card__tile--warn .pg-scroll-card__tile-lbl { color: var(--warn-ink); }
.pg-scroll-card__tile--warn .pg-scroll-card__tile-val { color: var(--warn-ink); }
.pg-scroll-card__tile--none .pg-scroll-card__tile-val { color: var(--fg-3); }
.pg-scroll-card__foot {
  margin-top: 10px; padding: 9px 16px;
  border-top: 1px solid var(--rule);
  display: flex; justify-content: flex-end;
}
.pg-scroll-card__more {
  font-size: 12px; font-weight: 600; color: var(--navy-ink);
  background: none; border: none; cursor: pointer; padding: 0;
  font-family: var(--sans);
}
.pg-scroll-card__more::after { content: ' →'; color: var(--gold); }
.pg-scroll-card__more:hover { color: var(--gold-hover); }

/* ---- VERDICT CARD ---- */
.pg-verdict {
  background: var(--card);
  border: 1px solid var(--rule);
  border-top: 3px solid var(--gold);
  border-radius: var(--r-6);
  padding: 24px;
  box-shadow: var(--sh-sm);
}
@media (min-width: 768px) { .pg-verdict { padding: 32px; } }
.pg-verdict__tier {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--sans); font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--fg-3);
}
.pg-verdict__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); }
.pg-verdict__dot--ok   { background: var(--ok); }
.pg-verdict__dot--warn { background: var(--warn); }
.pg-verdict__dot--bad  { background: var(--bad); }
.pg-verdict__title {
  font-family: var(--serif); font-weight: 500; font-size: 28px; line-height: 1.1;
  margin: 12px 0;
  color: var(--navy-ink); letter-spacing: -0.01em;
}
@media (min-width: 768px) { .pg-verdict__title { font-size: 36px; } }
.pg-verdict__body { font-size: 16px; color: var(--fg-1); line-height: 1.55; margin: 0; }
.pg-verdict__stops { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; }
.pg-verdict__stop {
  font-size: 12px; font-weight: 600;
  background: var(--muted-fill); color: var(--navy-ink);
  padding: 6px 10px; border-radius: var(--r-4);
}
.pg-verdict__transport {
  margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--rule);
  font-size: 14px; color: var(--fg-2); line-height: 1.5;
}

/* ---- DAY PLAN 2-COL SPLIT ---- */
.pg-plan-split { display: grid; grid-template-columns: 1fr; }
@media (min-width: 768px) { .pg-plan-split { grid-template-columns: 1fr 1fr; } }
.pg-plan-split__steps { padding: 24px 28px 28px; }
.pg-plan-split__map {
  background: var(--muted-fill);
  border-top: 1px solid var(--rule);
  display: flex; flex-direction: column;
  min-height: 320px;
  position: relative;
}
@media (min-width: 768px) {
  .pg-plan-split__map { border-top: none; border-left: 1px solid var(--rule); }
}
.pg-plan-split__map .pg-map__canvas { flex: 1; min-height: 0; }
.pg-plan-split__map-legend {
  display: flex; gap: 14px; flex-wrap: wrap;
  padding: 10px 14px;
  border-top: 1px solid var(--rule);
  font-size: 11px; font-family: var(--sans); color: var(--fg-3);
  background: var(--card);
}

/* ---- HOOK CARDS ---- */
.pg-hooks { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 768px) { .pg-hooks { grid-template-columns: 1fr 1fr; gap: 16px; } }
@media (min-width: 768px) { .pg-hooks--3col { grid-template-columns: repeat(3, 1fr); gap: 16px; } }
.pg-hook {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--r-6);
  padding: 20px;
}
.pg-hook__eyebrow {
  font-family: var(--sans); font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--fg-3); margin: 0 0 8px;
}
.pg-hook__title {
  font-family: var(--serif); font-weight: 500; font-size: 20px;
  margin: 0 0 8px; color: var(--navy-ink);
}
.pg-hook__body { font-size: 15px; line-height: 1.5; color: var(--fg-1); margin: 0; }

/* ---- 16-CATEGORY RATING BAR ---- */
.pg-rating-block { display: flex; flex-direction: column; gap: 16px; }
.pg-rating-overall {
  background: var(--navy);
  color: #fff;
  border-radius: var(--r-6);
  padding: 20px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.pg-rating-overall__label {
  font-family: var(--sans); font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.12em;
  color: rgba(255,255,255,0.7);
  display: block;
}
.pg-rating-overall__name {
  font-family: var(--serif); font-weight: 500; font-size: 24px;
  margin: 4px 0 0; color: #fff;
}
.pg-rating-overall__score {
  font-family: var(--serif); font-weight: 500; font-size: 48px;
  color: var(--gold); line-height: 1;
  font-variant-numeric: tabular-nums;
}
.pg-rating-overall__score small { font-size: 18px; color: rgba(255,255,255,0.6); font-weight: 400; }
.pg-rating-grid {
  display: grid; grid-template-columns: 1fr; gap: 14px 24px;
  background: var(--card); border: 1px solid var(--rule); border-radius: var(--r-6);
  padding: 20px;
}
@media (min-width: 768px) { .pg-rating-grid { grid-template-columns: 1fr 1fr; padding: 28px; gap: 18px 32px; } }
.pg-rating {
  display: grid; grid-template-columns: 1fr auto; gap: 8px;
  align-items: center;
}
.pg-rating__label { font-size: 14px; color: var(--navy-ink); font-weight: 500; }
.pg-rating__score {
  font-family: var(--sans); font-weight: 700; font-size: 14px;
  color: var(--navy-ink); font-variant-numeric: tabular-nums;
  text-align: right;
}
.pg-rating__bar {
  grid-column: 1 / -1;
  display: flex; gap: 3px;
}
.pg-rating__cell {
  flex: 1; height: 6px; background: var(--muted-fill); border-radius: 2px;
}
.pg-rating__cell--filled { background: var(--gold); }
.pg-rating-info {
  border: 0; background: transparent;
  width: 22px; height: 22px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; color: var(--fg-3);
  border: 1px solid var(--rule);
  cursor: pointer; margin-left: 8px;
}
.pg-rating-info:hover { color: var(--navy-ink); border-color: var(--gold); }
.pg-rating-method {
  display: none;
  background: var(--muted-fill);
  border-radius: var(--r-4);
  padding: 12px 14px;
  font-size: 13px; color: var(--fg-2); line-height: 1.5;
  margin-top: 8px;
}
.pg-rating-method[data-open="true"] { display: block; }

/* ---- FAQ ACCORDION ---- */
.pg-faq { background: var(--card); border: 1px solid var(--rule); border-radius: var(--r-6); overflow: hidden; }
.pg-faq__item { border-top: 1px solid var(--rule); }
.pg-faq__item:first-child { border-top: 0; }
.pg-faq__q {
  width: 100%; appearance: none; background: transparent; border: 0;
  text-align: left; padding: 16px 20px;
  font-family: var(--sans); font-size: 15px; font-weight: 600;
  color: var(--navy-ink);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  cursor: pointer; min-height: 56px;
}
.pg-faq__q:hover { color: var(--navy); }
.pg-faq__q::after { content: '+'; font-size: 22px; font-weight: 400; color: var(--gold); line-height: 1; }
.pg-faq__item[data-open="true"] .pg-faq__q::after { content: '−'; }
.pg-faq__a {
  display: none; padding: 0 20px 18px;
  font-size: 14px; color: var(--fg-1); line-height: 1.6;
}
.pg-faq__item[data-open="true"] .pg-faq__a { display: block; }

/* ---- WEATHER WIDGET ---- */
.pg-weather {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--r-6);
  padding: 20px;
}
.pg-weather__row {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
  margin-top: 12px;
}
.pg-weather__fact { font-size: 13px; }
.pg-weather__fact strong { display: block; font-size: 22px; font-family: var(--serif); font-weight: 500; color: var(--navy-ink); }

/* ---- TIMELINE (Day Planner) ---- */
.pg-timeline { list-style: none; padding: 0; margin: 16px 0 0; }
.pg-timeline__item {
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: 16px;
  padding: 14px 0;
  border-top: 1px solid var(--rule);
}
.pg-timeline__item:first-child { border-top: 0; padding-top: 0; }
.pg-timeline__time {
  font-family: var(--sans); font-weight: 700; font-size: 14px;
  color: var(--navy-ink); font-variant-numeric: tabular-nums;
}
.pg-timeline__body { display: flex; flex-direction: column; gap: 6px; }
.pg-timeline__title { font-weight: 600; font-size: 15px; color: var(--navy-ink); }
.pg-timeline__desc { font-size: 13px; color: var(--fg-2); line-height: 1.5; }
.pg-timeline__chips { display: flex; flex-wrap: wrap; gap: 6px; }

/* ---- SHAPE-THE-DAY TOGGLES ---- */
.pg-toggles { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; }
.pg-toggle {
  appearance: none; background: var(--card);
  border: 1px solid var(--rule); border-radius: var(--r-4);
  padding: 10px 16px;
  font-family: var(--sans); font-size: 13px; font-weight: 500;
  color: var(--navy-ink); cursor: pointer;
  min-height: 44px;
  display: inline-flex; align-items: center; gap: 8px;
}
.pg-toggle:hover { border-color: var(--gold); }
.pg-toggle[aria-pressed="true"] {
  background: var(--navy); color: #fff; border-color: var(--navy);
}

/* ---- TRAFFIC LIGHT (Family / Accessibility summary) ---- */
.pg-summary-light {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 20px;
  background: var(--card); border: 1px solid var(--rule);
  border-radius: var(--r-6);
}
.pg-summary-light__dot {
  width: 14px; height: 14px; border-radius: 50%; flex-shrink: 0;
  box-shadow: 0 0 0 4px rgba(47,122,74,0.18);
}
.pg-summary-light__dot--ok   { background: var(--ok);   box-shadow: 0 0 0 4px rgba(47,122,74,0.18); }
.pg-summary-light__dot--warn { background: var(--warn); box-shadow: 0 0 0 4px rgba(183,121,31,0.18); }
.pg-summary-light__dot--bad  { background: var(--bad);  box-shadow: 0 0 0 4px rgba(176,40,60,0.18); }
.pg-summary-light__text { font-size: 15px; color: var(--navy-ink); font-weight: 500; }

/* ---- CROWD HEATMAP ---- */
.pg-heatmap { margin-top: 12px; }
.pg-heatmap__row { display: grid; grid-template-columns: repeat(11, 1fr); gap: 3px; }
.pg-heatmap__cell {
  aspect-ratio: 1.2 / 1; border-radius: 3px;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; color: rgba(255,255,255,0.85); font-weight: 600;
}
.pg-heatmap__cell--ok   { background: var(--ok); }
.pg-heatmap__cell--warn { background: var(--warn); }
.pg-heatmap__cell--bad  { background: var(--bad); }
.pg-heatmap__cell--empty { background: var(--muted-fill); color: var(--fg-3); }
.pg-heatmap__labels { display: grid; grid-template-columns: repeat(11, 1fr); gap: 3px; margin-top: 6px; }
.pg-heatmap__hour { text-align: center; font-size: 10px; color: var(--fg-3); font-variant-numeric: tabular-nums; }
.pg-heatmap__legend { display: flex; gap: 12px; margin-top: 12px; font-size: 12px; color: var(--fg-2); }
.pg-heatmap__legend-dot { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; vertical-align: middle; }

/* ---- INTENSITY METER ---- */
.pg-intensity { display: grid; grid-template-columns: 1fr auto; gap: 14px; align-items: center; padding: 12px 0; border-top: 1px solid var(--rule); }
.pg-intensity:first-child { border-top: 0; padding-top: 0; }
.pg-intensity__name { font-size: 14px; color: var(--navy-ink); font-weight: 500; }
.pg-intensity__desc { font-size: 12px; color: var(--fg-2); line-height: 1.5; margin-top: 2px; }
.pg-intensity__bars { display: flex; gap: 3px; }
.pg-intensity__bar { width: 8px; height: 18px; background: var(--muted-fill); border-radius: 1px; }
.pg-intensity__bar--filled { background: var(--gold); }

/* ---- COST OF DAY ---- */
.pg-cost { width: 100%; border-collapse: collapse; }
.pg-cost td { padding: 10px 0; border-top: 1px solid var(--rule); font-size: 14px; }
.pg-cost tr:first-child td { border-top: 0; }
.pg-cost td:last-child { text-align: right; font-weight: 600; color: var(--navy-ink); font-variant-numeric: tabular-nums; }
.pg-cost tr.pg-cost__total td {
  border-top: 2px solid var(--navy-ink);
  font-family: var(--serif); font-weight: 500; font-size: 18px; padding-top: 14px;
}

/* ---- TAB EMPTY ---- */
.pg-tab-empty {
  background: var(--muted-fill);
  border: 1px solid var(--rule);
  border-radius: var(--r-6);
  padding: 40px 32px;
  text-align: center;
}
.pg-tab-empty__title {
  font-family: var(--serif); font-weight: 500; font-size: 22px;
  color: var(--navy-ink); margin: 0 0 8px;
}
.pg-tab-empty__body {
  font-size: 15px; color: var(--fg-2); line-height: 1.55;
  max-width: 460px; margin: 0 auto 16px;
}
.pg-tab-empty__cta { display: inline-flex; align-items: center; gap: 8px; }

/* ---- CALLOUT BLOCKS (.callout, .callout--info, .callout--warn, .callout--emerg) ---- */
.callout {
  border-radius: var(--r-4); padding: 14px 16px;
  display: flex; gap: 12px; align-items: flex-start;
  font-size: 14px; line-height: 1.6; margin-bottom: 12px;
}
.callout + .callout { margin-top: -4px; }
.callout--info  { background: var(--info-soft); border-left: 4px solid var(--info); }
.callout--warn  { background: #FFFAF0; border-left: 4px solid var(--warn); }
.callout--emerg { background: #FEF2F2; border: 2px solid var(--bad); border-radius: var(--r-4); }
.callout__icon  { flex-shrink: 0; margin-top: 1px; }
.callout__icon svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.callout--emerg .callout__icon svg { width: 20px; height: 20px; }
.callout--info  .callout__icon { color: var(--info); }
.callout--warn  .callout__icon { color: var(--warn-ink); }
.callout--emerg .callout__icon { color: var(--bad); }
.callout__content { flex: 1; }
.callout__eyebrow {
  font-family: var(--sans); font-size: 10px; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.12em; margin-bottom: 4px;
}
.callout--info  .callout__eyebrow { color: var(--info); }
.callout--warn  .callout__eyebrow { color: #9A4A00; }
.callout--emerg .callout__eyebrow { color: var(--bad); }
.callout__title {
  font-family: var(--serif); font-weight: 500; font-size: 18px;
  line-height: 1.2; margin: 0 0 4px;
}
.callout--info  .callout__title { color: var(--info); }
.callout--warn  .callout__title { color: #9A4A00; }
.callout--emerg .callout__title { color: var(--bad); }
.callout__body { margin: 0; }
.callout--info  .callout__body { color: var(--info); }
.callout--warn  .callout__body { color: var(--warn-ink); }
.callout--emerg .callout__body { color: #7F1D1D; }
.callout a { color: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* ---- HOME SEARCH BAR ---- */
.pg-home-search { background: var(--navy); padding: 0 0 28px; }
.pg-home-search .pg-container { max-width: 680px; }
.pg-search-bar {
  display: flex; align-items: center; gap: 10px;
  background: var(--card); border-radius: var(--r-8);
  padding: 6px 6px 6px 18px; box-shadow: var(--sh-lg);
}
.pg-search-bar__icon { flex-shrink: 0; color: var(--fg-3); }
.pg-search-bar__input {
  flex: 1; border: 0; background: transparent;
  font-family: var(--sans); font-size: 15px; color: var(--navy-ink);
  padding: 8px 0; min-height: 44px;
}
.pg-search-bar__input::placeholder { color: var(--fg-3); }
.pg-search-bar__input:focus { outline: none; }
.pg-search-bar__btn {
  background: var(--gold); color: var(--navy-ink); border: 0;
  border-radius: var(--r-6); padding: 10px 18px;
  font-family: var(--sans); font-size: 13px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em;
  cursor: pointer; min-height: 44px; white-space: nowrap;
}
.pg-search-bar__btn:hover { background: var(--gold-hover); }
.pg-search-hint { font-size: 12px; color: rgba(255,255,255,0.45); margin-top: 10px; }

/* ---- WHY THIS SITE (home) ---- */
.pg-why-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 20px; margin-top: 16px;
}
@media (max-width: 900px) { .pg-why-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .pg-why-grid { grid-template-columns: 1fr; } }
.pg-why-card { background: var(--muted-fill); border-radius: var(--r-6); padding: 24px; }
.pg-why-card__icon { color: var(--navy-ink); margin-bottom: 14px; display: block; }
.pg-why-card__title { font-family: var(--serif); font-weight: 500; font-size: 20px; color: var(--navy-ink); margin: 0 0 10px; }
.pg-why-card__body  { font-size: 15px; color: var(--fg-2); line-height: 1.6; margin: 0; }

/* ---- MISSION STRIP (home) ---- */
.pg-mission-strip { background: var(--navy); padding: 48px 24px; text-align: center; }
.pg-mission-strip__text {
  font-family: var(--serif); font-size: 28px; font-weight: 400;
  color: var(--gold); line-height: 1.5; margin: 0 auto; max-width: 640px;
}
@media (min-width: 768px) { .pg-mission-strip__text { font-size: 34px; } }

/* ---- QUICK SUMMARY GRID (Overview tab) ---- */
.pg-quick-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
}
@media (max-width: 900px) { .pg-quick-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .pg-quick-grid { grid-template-columns: 1fr; } }
.pg-quick-card {
  background: var(--card); border: 1px solid var(--rule);
  border-radius: var(--r-6); padding: 14px 16px;
  text-decoration: none; color: var(--navy-ink);
  display: flex; flex-direction: column; gap: 6px; transition: border-color .15s;
}
.pg-quick-card:hover { border-color: var(--gold); text-decoration: none; }
.pg-quick-card__label {
  font-family: var(--sans); font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.12em; color: var(--fg-3);
}
.pg-quick-card__value { font-size: 14px; font-weight: 500; color: var(--navy-ink); line-height: 1.4; }
/* .pg-quick-card__link conflict resolved: folded to the v6 sentence-case
   navy + gold-arrow version (see GUIDE REVIEW BATCH below). v6. */

/* ---- CRUISE SEASON STRIP ---- */
.pg-season-strip {
  background: var(--card); border: 1px solid var(--rule);
  border-radius: var(--r-6); padding: 18px 24px;
  display: flex; align-items: center; gap: 20px;
}
.pg-season-strip__months { flex: 1; display: flex; align-items: center; }
.pg-season-strip__month { font-family: var(--sans); font-size: 12px; font-weight: 700; color: var(--fg-2); text-transform: uppercase; letter-spacing: 0.06em; white-space: nowrap; }
.pg-season-strip__bar { flex: 1; height: 6px; background: var(--gold); border-radius: 3px; margin: 0 12px; }
.pg-season-strip__meta { font-size: 13px; color: var(--fg-2); }
@media (max-width: 600px) { .pg-season-strip { flex-direction: column; align-items: flex-start; gap: 12px; } }

/* ---- INLINE EMPTY (when a single section has no rows) ---- */
.pg-empty {
  border: 1px dashed var(--rule);
  border-radius: var(--r-4);
  padding: 20px 24px;
  background: transparent;
  color: var(--fg-2);
  font-size: 14px; line-height: 1.5;
}
.pg-empty strong { color: var(--navy-ink); font-weight: 600; display: block; margin-bottom: 4px; }
.pg-empty a { color: var(--info); font-weight: 600; }

/* ---- PORT NEWS, STALE STATE ---- */
.pg-news--stale .pg-news__head::after {
  content: '';
}
.pg-news__stale {
  margin-top: 4px; padding-top: 10px; border-top: 1px dashed var(--rule);
  font-size: 12px; color: var(--fg-3); font-style: italic;
}

/* ---- MAP COMPONENT ----
   Used on Explore (POIs), Day Planner (numbered stops + route),
   Family (playgrounds), Medical (pharmacies/hospitals with hours dot),
   Getting around (terminals, metro, taxi ranks).
   Data: lat/lng per pin; this is a STATIC mock (graph-paper background).
   Engineering will swap the .pg-map__canvas for MapLibre + a tile style. */
.pg-map {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--r-6);
  overflow: hidden;
  box-shadow: var(--sh-sm);
}
.pg-map__head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--rule);
}
.pg-map__title { font-family: var(--serif); font-weight: 500; font-size: 18px; color: var(--navy-ink); margin: 0; }
.pg-map__meta { font-size: 12px; color: var(--fg-3); font-weight: 500; }
.pg-map__canvas {
  position: relative;
  width: 100%; aspect-ratio: 16 / 9; min-height: 280px;
  background:
    radial-gradient(circle at 35% 55%, rgba(212,184,106,0.10), transparent 55%),
    linear-gradient(rgba(228,222,207,0.55) 1px, transparent 1px) 0 0 / 40px 40px,
    linear-gradient(90deg, rgba(228,222,207,0.55) 1px, transparent 1px) 0 0 / 40px 40px,
    linear-gradient(180deg, #FAF8F3 0%, #F1ECE1 100%);
}
@media (min-width: 768px) { .pg-map__canvas { aspect-ratio: 21 / 9; } }
.pg-map__coast {
  position: absolute; left: 0; right: 0; bottom: 0; height: 38%;
  background: linear-gradient(180deg, rgba(44,52,76,0) 0%, rgba(44,52,76,0.06) 60%, rgba(44,52,76,0.12) 100%);
}
.pg-map__radius {
  position: absolute;
  width: 320px; height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(212,184,106,0.10) 0%, rgba(212,184,106,0.04) 60%, transparent 100%);
  border: 1px dashed rgba(212,184,106,0.45);
}
.pg-map__radius-label {
  position: absolute;
  font-family: var(--sans); font-size: 10px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--navy-soft);
  background: rgba(250,248,243,0.9);
  padding: 3px 6px; border-radius: var(--r-4);
  border: 1px solid var(--rule);
}
.pg-map__route {
  position: absolute; inset: 0;
  pointer-events: none;
}
.pg-map__route path {
  fill: none;
  stroke: var(--navy);
  stroke-width: 1;
  stroke-dasharray: 4 5;
  stroke-linecap: round;
  opacity: 0.65;
  /* Valhalla routing note: engineering replaces this SVG path with a GeoJSON
     LineString rendered by MapLibre via a paint layer (line-dasharray, line-width: 1.5).
     This static path is the design placeholder only. */
}

/* Map pin, base */
.pg-pin {
  position: absolute;
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  background: var(--card); border: 2px solid var(--navy);
  font-family: var(--sans); font-size: 11px; font-weight: 700;
  color: var(--navy-ink);
  cursor: pointer;
  transform: translate(-50%, -50%);
  box-shadow: var(--sh-sm);
}
.pg-pin:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
/* Shape distinguishes step-free (circle) from stairs (square), NOT colour-only (brief). */
.pg-pin--step-free { border-radius: 50%; }
.pg-pin--stairs    { border-radius: 2px; }
.pg-pin--numbered  { border-radius: 50%; background: var(--navy); color: var(--gold); border-color: var(--navy); width: 32px; height: 32px; font-family: var(--serif); font-weight: 500; font-size: 14px; }
.pg-pin--family    { border-radius: 50%; background: var(--ok); color: #fff; border-color: var(--ok); }
.pg-pin--medical   { border-radius: 2px; background: #2F7A4A; color: #fff; border-color: #2F7A4A; }
.pg-pin--transport { border-radius: 50%; background: var(--info); color: #fff; border-color: var(--info); }
.pg-pin--terminal  { border-radius: 4px; background: var(--gold); color: var(--navy-ink); border-color: var(--gold); width: 36px; height: 28px; font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; }
.pg-pin__label {
  position: absolute;
  top: 100%; left: 50%; transform: translate(-50%, 6px);
  background: var(--navy-ink); color: #fff;
  font-size: 10px; font-weight: 600;
  padding: 3px 6px; border-radius: var(--r-4);
  white-space: nowrap;
  pointer-events: none;
}
.pg-pin__hours {
  display: inline-block;
  width: 6px; height: 6px; border-radius: 50%;
  margin-left: 4px;
  background: var(--ok);
  vertical-align: middle;
}
.pg-pin__hours--closed { background: var(--bad); }

.pg-map__legend {
  display: flex; flex-wrap: wrap; gap: 12px 18px;
  padding: 12px 18px;
  border-top: 1px solid var(--rule);
  background: var(--paper);
  font-size: 12px; color: var(--fg-2);
}
.pg-map__legend-item { display: inline-flex; align-items: center; gap: 6px; }
.pg-map__legend-swatch {
  width: 14px; height: 14px;
  border: 2px solid var(--navy);
  background: #fff;
  display: inline-block;
}
.pg-map__legend-swatch--circle { border-radius: 50%; }
.pg-map__legend-swatch--square { border-radius: 2px; }
.pg-map__legend-swatch--family { background: var(--ok); border-color: var(--ok); border-radius: 50%; }
.pg-map__legend-swatch--medical { background: #2F7A4A; border-color: #2F7A4A; border-radius: 2px; }
.pg-map__legend-swatch--transport { background: var(--info); border-color: var(--info); border-radius: 50%; }
.pg-map__legend-swatch--terminal { background: var(--gold); border-color: var(--gold); }

/* Map empty state, pinned to brief: "We're mapping this port now. List view below." */
.pg-map--empty .pg-map__canvas {
  display: flex; align-items: center; justify-content: center;
  text-align: center;
}
.pg-map__empty-msg {
  max-width: 360px;
  padding: 24px;
  background: rgba(255,255,255,0.85);
  border: 1px solid var(--rule);
  border-radius: var(--r-4);
  font-size: 14px; color: var(--fg-1); line-height: 1.5;
}
.pg-map__empty-msg strong { display: block; color: var(--navy-ink); font-family: var(--serif); font-weight: 500; font-size: 18px; margin-bottom: 6px; }

/* ---- ASK CRUISEPORT, additional states ---- */
/* Loading: 3 pulsing dots inside AI bubble */
.pg-msg__typing {
  display: inline-flex; gap: 4px; align-items: center;
  padding: 4px 0;
}
.pg-msg__typing span {
  display: inline-block;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--fg-3);
  animation: pg-dot 1.2s infinite ease-in-out;
}
.pg-msg__typing span:nth-child(2) { animation-delay: 0.15s; }
.pg-msg__typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes pg-dot { 0%, 80%, 100% { opacity: 0.25; transform: scale(0.9);} 40% { opacity: 1; transform: scale(1);} }
@media (prefers-reduced-motion: reduce) {
  .pg-msg__typing span { animation: none; opacity: 0.7; }
}
.pg-msg--error {
  align-self: flex-start;
  background: var(--bad-soft);
  border: 1px solid rgba(176,40,60,0.25);
  color: #6F1822;
  border-top-left-radius: 4px;
}
.pg-msg--noanswer {
  align-self: flex-start;
  background: var(--warn-soft);
  border: 1px solid rgba(183,121,31,0.30);
  color: #5C3508;
  border-top-left-radius: 4px;
}

/* ---- CURRENCY \u2014 local primary, GBP in parens (brief) ---- */
.pg-price { font-variant-numeric: tabular-nums; white-space: nowrap; }
.pg-price__gbp { color: var(--fg-2); font-weight: 500; }

/* ---- FOOTER ---- */
.pg-footer {
  background: var(--navy-ink);
  color: rgba(255,255,255,0.7);
  padding: 24px 0 28px;
  font-size: 13px;
  text-align: center;
}
.pg-footer a { color: rgba(255,255,255,0.85); text-decoration: underline; text-underline-offset: 3px; }
.pg-footer a:hover { color: var(--gold); }
.pg-footer__verify { margin: 0 0 8px; font-style: italic; color: rgba(255,255,255,0.85); font-size: 13px; }
.pg-footer__line { margin: 0; font-size: 12px; color: rgba(255,255,255,0.65); }

/* ============================================================
   STYLE GUIDE (top-of-page review section)
   Removed when porting to React, informational only.
   ============================================================ */
.sg-section {
  padding: 32px 0;
  border-bottom: 1px solid var(--rule);
}
.sg-section h2 {
  font-family: var(--serif); font-weight: 500; font-size: 22px;
  margin: 0 0 16px; color: var(--navy-ink);
}
.sg-eyebrow {
  font-family: var(--sans); font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.16em;
  color: var(--gold); margin: 0 0 4px;
}
.sg-swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
.sg-swatch { background: var(--card); border: 1px solid var(--rule); border-radius: var(--r-4); overflow: hidden; }
.sg-swatch__color { height: 60px; }
.sg-swatch__meta { padding: 8px 10px; font-size: 11px; }
.sg-swatch__meta strong { display: block; color: var(--navy-ink); font-weight: 600; }
.sg-swatch__meta span { color: var(--fg-3); font-family: ui-monospace, monospace; font-size: 10px; }
.sg-type-row { padding: 10px 0; border-top: 1px solid var(--rule); display: grid; grid-template-columns: 100px 1fr; gap: 16px; align-items: baseline; }
.sg-type-row:first-child { border-top: 0; padding-top: 0; }
.sg-type-row code { font-family: ui-monospace, monospace; font-size: 11px; color: var(--fg-3); }
.sg-strip { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.sg-strip-block { padding: 6px 0; }
.sg-spacing { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.sg-spacing__box {
  background: var(--gold); border-radius: 2px;
  display: flex; align-items: flex-end; justify-content: center;
  font-size: 9px; color: var(--navy-ink); font-weight: 700; padding-bottom: 2px;
}
.sg-banner {
  background: var(--navy);
  color: rgba(255,255,255,0.85);
  padding: 14px 0;
  font-size: 13px; text-align: center;
}
.sg-banner a { color: var(--gold); font-weight: 600; }

/* ============================================================
   COMPONENT INVENTORY (engineering appendix)
   ============================================================ */
.pg-inventory {
  background: var(--paper);
  border-top: 1px solid var(--rule);
  padding: 0 0 48px;
}
.inv-block {
  padding: 32px 0;
  border-top: 1px solid var(--rule);
  margin-top: 24px;
}
.inv-block:first-of-type { border-top: 0; }
.inv-grid { display: flex; flex-direction: column; gap: 16px; margin-top: 16px; }
.inv-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  padding: 12px 16px;
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--r-4);
}
.inv-tag {
  display: inline-block;
  min-width: 96px;
  font-family: var(--sans); font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--fg-3);
}
.inv-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-top: 16px;
}
@media (min-width: 768px) { .inv-cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .inv-cards { grid-template-columns: repeat(3, 1fr); } }
.inv-pins {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px 24px;
  margin-top: 16px;
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--r-4);
  padding: 20px;
}
@media (min-width: 768px) { .inv-pins { grid-template-columns: 1fr 1fr; } }
.inv-pin-row { display: flex; align-items: center; gap: 14px; font-size: 14px; color: var(--fg-1); }
.inv-bubbles {
  display: flex; flex-direction: column; gap: 10px;
  margin-top: 16px;
  padding: 20px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r-4);
  max-width: 520px;
}



/* ============================================================
   SITE SHELL (multi-page site)
   Header nav: Home / Ports / Regions / News / Ask AI / Contact
   ============================================================ */
.pg-site-nav {
  background: var(--navy);
  color: #fff;
  height: 64px;
  position: sticky; top: 0; z-index: 60;
  border-bottom: 1.5px solid var(--gold);
}
.pg-site-nav__inner {
  display: flex; align-items: center; gap: 24px;
  height: 100%;
  max-width: var(--container); margin: 0 auto;
  padding: 0 16px;
}
@media (min-width: 768px) { .pg-site-nav__inner { padding: 0 24px; } }
@media (min-width: 1024px){ .pg-site-nav__inner { padding: 0 32px; } }
.pg-site-nav__brand { font-family: var(--serif); font-size: 22px; font-weight: 500; letter-spacing: -0.01em; color: #fff; text-decoration: none; }
.pg-site-nav__brand:hover { color: #fff; text-decoration: none; }
.pg-site-nav__brand .ai { color: var(--gold); font-style: italic; font-weight: 400; }
.pg-site-nav__links { display: none; align-items: center; gap: 4px; margin-left: auto; }
@media (min-width: 900px) { .pg-site-nav__links { display: flex; } }
.pg-site-nav__link {
  font-family: var(--sans); font-size: 13px; font-weight: 500;
  color: rgba(255,255,255,0.78);
  padding: 8px 12px;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: color .15s, border-color .15s;
}
.pg-site-nav__link:hover { color: #fff; text-decoration: none; }
.pg-site-nav__link[aria-current="page"] {
  color: #fff; font-weight: 600;
  border-bottom-color: var(--gold);
}
.pg-site-nav__spacer { flex: 1; }
/* .pg-site-nav__cta conflict resolved: the old gold boxed button is removed.
   Folded to the quiet ghost-link version (see GUIDE REVIEW BATCH below). v6. */
.pg-site-nav__burger {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  background: transparent; border: 1px solid rgba(255,255,255,0.18); border-radius: var(--r-4);
  color: #fff; cursor: pointer;
}
@media (min-width: 900px) { .pg-site-nav__burger { display: none; } }

/* Site footer (full) */
.pg-site-footer {
  background: var(--navy-ink); color: rgba(255,255,255,0.72);
  padding: 56px 0 32px;
}
.pg-site-footer__inner { max-width: var(--container); margin: 0 auto; padding: 0 16px; }
@media (min-width: 768px) { .pg-site-footer__inner { padding: 0 24px; } }
@media (min-width: 1024px){ .pg-site-footer__inner { padding: 0 32px; } }
.pg-site-footer__cols {
  display: grid; grid-template-columns: 1fr; gap: 32px;
  padding-bottom: 32px; border-bottom: 1px solid rgba(255,255,255,0.10);
}
@media (min-width: 768px) { .pg-site-footer__cols { grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 48px; } }
.pg-site-footer__brand { font-family: var(--serif); font-weight: 500; font-size: 22px; color: #fff; margin: 0 0 10px; }
.pg-site-footer__brand .ai { color: var(--gold); font-style: italic; font-weight: 400; }
.pg-site-footer__tagline { font-size: 14px; line-height: 1.55; color: rgba(255,255,255,0.78); max-width: 320px; }
.pg-site-footer__lbl { font-family: var(--sans); font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.55); margin: 0 0 12px; }
.pg-site-footer__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.pg-site-footer__list a { color: rgba(255,255,255,0.85); text-decoration: none; font-size: 14px; }
.pg-site-footer__list a:hover { color: var(--gold); }
.pg-site-footer__bottom {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px;
  padding-top: 24px;
  font-size: 12px; color: rgba(255,255,255,0.55);
}
.pg-site-footer__bottom a { color: rgba(255,255,255,0.75); text-decoration: underline; text-underline-offset: 3px; }
.pg-site-footer__bottom a:hover { color: var(--gold); }
.pg-site-footer__verify { font-style: italic; margin: 0; max-width: 640px; }

/* ============================================================
   POI DETAIL DRAWER (slide-from-right, ~50% width, scrim)
   Opens when a POI scroll-card or map pin is activated.
   ============================================================ */
.pg-scrim {
  position: fixed; inset: 0;
  background: rgba(20,26,46,0.55);
  z-index: 70;
  display: none;
}
.pg-scrim[data-open="true"] { display: block; }
@media (prefers-reduced-motion: no-preference) {
  .pg-scrim { transition: opacity .18s; opacity: 0; }
  .pg-scrim[data-open="true"] { opacity: 1; }
}

.pg-poi-drawer {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: 100%; max-width: 720px;
  background: var(--paper);
  z-index: 80;
  display: flex; flex-direction: column;
  box-shadow: -16px 0 40px rgba(20,26,46,0.25);
  transform: translateX(100%);
  transition: transform .25s ease-out;
  overflow: hidden;
}
@media (min-width: 1024px) {
  .pg-poi-drawer { width: 70vw; max-width: 1000px; }
}
.pg-poi-drawer[data-open="true"] { transform: translateX(0); }
@media (prefers-reduced-motion: reduce) {
  .pg-poi-drawer { transition: none; }
}

.pg-poi-drawer__head {
  position: relative;
  padding: 20px 24px 16px;
  border-bottom: 1px solid var(--rule);
  background: var(--card);
}
.pg-poi-drawer__close {
  position: absolute; top: 16px; right: 16px;
  width: 40px; height: 40px;
  background: transparent; border: 1px solid var(--rule); border-radius: var(--r-4);
  font-size: 22px; line-height: 1;
  color: var(--navy-ink); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.pg-poi-drawer__close:hover { border-color: var(--gold); background: var(--paper); }
.pg-poi-drawer__cat {
  font-family: var(--sans); font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--fg-3); margin: 0 0 8px;
}
.pg-poi-drawer__title { font-family: var(--serif); font-weight: 500; font-size: 30px; line-height: 1.1; color: var(--navy-ink); margin: 0 0 8px; letter-spacing: -0.015em; padding-right: 56px; }
.pg-poi-drawer__verdict {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--sans); font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--fg-3);
  margin-top: 4px;
}
.pg-poi-drawer__verdict-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); }
.pg-poi-drawer__verdict-dot--ok { background: var(--ok); }
.pg-poi-drawer__verdict-dot--warn { background: var(--warn); }
.pg-poi-drawer__verdict-dot--bad { background: var(--bad); }

.pg-poi-drawer__body {
  flex: 1; overflow-y: auto;
  padding: 20px 24px 32px;
}
.pg-poi-drawer__media {
  aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, #2C344C, #1A2036);
  background-size: cover; background-position: center;
  margin: -20px -24px 20px;
}
.pg-poi-drawer__chips { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 0 0 16px; }
.pg-poi-drawer__chip-tile {
  background: var(--muted-fill); border: 1px solid var(--rule); border-radius: var(--r-4);
  padding: 9px 12px; font-size: 13px; font-weight: 600; color: var(--navy-ink); text-align: center;
}
.pg-poi-drawer__chip-tile--ok   { background: var(--ok-soft);   border-color: var(--ok-line); color: var(--ok-ink); }
.pg-poi-drawer__chip-tile--warn { background: var(--warn-soft); border-color: var(--warn-line); color: var(--warn-ink); }
.pg-poi-drawer__chip-tile--info { background: var(--info-soft); border-color: rgba(30,64,175,.2); color: var(--info); }

/* Sensory coloured tiles */
.pg-poi-drawer__nd-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 4px;
}
.pg-poi-drawer__nd-tile {
  background: var(--muted-fill); border: 1px solid var(--rule); border-radius: var(--r-4);
  padding: 10px 12px; display: flex; flex-direction: column; gap: 3px;
}
.pg-poi-drawer__nd-tile-lbl {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.1em; color: var(--fg-3);
}
.pg-poi-drawer__nd-tile-val { font-size: 13px; font-weight: 600; color: var(--navy-ink); }
.pg-poi-drawer__nd-tile--ok   { background: var(--ok-soft);   border-color: var(--ok-line); }
.pg-poi-drawer__nd-tile--ok   .pg-poi-drawer__nd-tile-lbl { color: var(--ok); }
.pg-poi-drawer__nd-tile--ok   .pg-poi-drawer__nd-tile-val { color: var(--ok-ink); }
.pg-poi-drawer__nd-tile--warn { background: var(--warn-soft); border-color: var(--warn-line); }
.pg-poi-drawer__nd-tile--warn .pg-poi-drawer__nd-tile-lbl { color: var(--warn-ink); }
.pg-poi-drawer__nd-tile--warn .pg-poi-drawer__nd-tile-val { color: var(--warn-ink); }
.pg-poi-drawer__nd-tile--muted { opacity: 0.6; }

.pg-poi-drawer__lede { font-family: var(--serif); font-size: 18px; line-height: 1.5; color: var(--fg-1); margin: 0 0 18px; }
.pg-poi-drawer__section { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--rule); }
.pg-poi-drawer__section:first-of-type { padding-top: 0; border-top: 0; margin-top: 0; }
.pg-poi-drawer__section-lbl {
  font-family: var(--sans); font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--fg-3); margin: 0 0 10px;
}
.pg-poi-drawer__facts {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px 24px;
}
.pg-poi-drawer__fact { display: flex; flex-direction: column; gap: 2px; font-size: 14px; }
.pg-poi-drawer__fact-lbl { font-size: 11px; color: var(--fg-3); text-transform: uppercase; letter-spacing: 0.1em; font-weight: 600; }
.pg-poi-drawer__fact-val { color: var(--navy-ink); font-weight: 500; }
.pg-poi-drawer__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; font-size: 15px; line-height: 1.5; }
.pg-poi-drawer__list li { padding-left: 18px; position: relative; }
.pg-poi-drawer__list li::before { content: '·'; color: var(--gold); position: absolute; left: 4px; top: -2px; font-size: 22px; }

.pg-poi-drawer__addr {
  padding: 14px 16px;
  background: var(--muted-fill);
  border-radius: var(--r-4);
  font-size: 14px; color: var(--navy-ink); line-height: 1.5;
}
.pg-poi-drawer__addr a { color: var(--info); font-weight: 600; }
.pg-poi-drawer__foot {
  padding: 16px 24px;
  border-top: 1px solid var(--rule);
  background: var(--card);
  display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end;
}

/* ============================================================
   LEAVE A REVIEW (modal)
   Same scrim + drawer pattern but centred/full on mobile.
   ============================================================ */
.pg-review-modal {
  position: fixed;
  top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.98);
  width: calc(100vw - 32px); max-width: 720px;
  max-height: calc(100vh - 64px);
  background: var(--paper);
  border-radius: var(--r-8);
  z-index: 80;
  display: none;
  flex-direction: column;
  overflow: hidden;
  box-shadow: var(--sh-lg);
}
.pg-review-modal[data-open="true"] { display: flex; transform: translate(-50%, -50%) scale(1); }
@media (prefers-reduced-motion: no-preference) {
  .pg-review-modal { transition: transform .2s, opacity .2s; opacity: 0; }
  .pg-review-modal[data-open="true"] { opacity: 1; }
}
.pg-review-modal__head {
  padding: 18px 24px;
  border-bottom: 1px solid var(--rule);
  background: var(--card);
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
}
.pg-review-modal__title { font-family: var(--serif); font-weight: 500; font-size: 22px; color: var(--navy-ink); margin: 0; }
.pg-review-modal__sub { font-size: 13px; color: var(--fg-2); margin-top: 4px; }
.pg-review-modal__body { flex: 1; overflow-y: auto; padding: 24px; }
.pg-review-modal__foot {
  padding: 14px 24px;
  border-top: 1px solid var(--rule);
  background: var(--card);
  display: flex; justify-content: flex-end; gap: 8px;
}

/* Review form bits */
.pg-rv-section { margin-bottom: 24px; }
.pg-rv-section:last-child { margin-bottom: 0; }
.pg-rv-lbl {
  display: block;
  font-family: var(--sans); font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--fg-3); margin: 0 0 10px;
}
.pg-rv-stars { display: inline-flex; gap: 4px; }
.pg-rv-star {
  appearance: none; background: transparent; border: 0; cursor: pointer;
  font-size: 28px; line-height: 1;
  color: var(--fg-3); padding: 4px;
}
.pg-rv-star[aria-pressed="true"], .pg-rv-star.is-on { color: var(--gold); }
.pg-rv-row {
  display: grid; grid-template-columns: 1fr auto; gap: 16px;
  align-items: center;
  padding: 8px 0; border-top: 1px solid var(--rule);
}
.pg-rv-row:first-child { border-top: 0; padding-top: 0; }
.pg-rv-row__label { font-size: 14px; font-weight: 500; color: var(--navy-ink); }
.pg-rv-row__note { font-size: 12px; color: var(--fg-3); display: block; }
.pg-rv-stars--small .pg-rv-star { font-size: 18px; padding: 2px; }
.pg-rv-input {
  width: 100%;
  font-family: var(--sans); font-size: 14px;
  padding: 12px 14px;
  background: var(--card); color: var(--navy-ink);
  border: 1px solid var(--rule); border-radius: var(--r-4);
  min-height: 44px;
}
.pg-rv-input:focus { outline: 3px solid var(--gold); outline-offset: 1px; border-color: var(--gold); }
.pg-rv-textarea {
  width: 100%;
  font-family: var(--sans); font-size: 14px; line-height: 1.55;
  padding: 12px 14px;
  background: var(--card); color: var(--navy-ink);
  border: 1px solid var(--rule); border-radius: var(--r-4);
  min-height: 96px; resize: vertical;
}
.pg-rv-tag {
  appearance: none; background: var(--card); border: 1px solid var(--rule);
  border-radius: var(--r-4);
  padding: 8px 12px;
  font-family: var(--sans); font-size: 13px; font-weight: 500;
  color: var(--navy-ink); cursor: pointer;
  min-height: 36px;
}
.pg-rv-tag[aria-pressed="true"] {
  background: var(--navy); color: #fff; border-color: var(--navy);
}
.pg-rv-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.pg-rv-2col { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 640px) { .pg-rv-2col { grid-template-columns: 1fr 1fr; } }

.pg-rv-pending {
  margin-top: 12px; padding: 10px 14px;
  background: var(--info-soft); border: 1px solid rgba(30,64,175,0.18);
  border-radius: var(--r-4);
  font-size: 13px; color: var(--info); line-height: 1.5;
}
.pg-rv-pending strong { color: var(--info); display: block; font-weight: 700; margin-bottom: 2px; }

/* "Leave a review" CTA at the bottom of port + POI */
.pg-leave-review-cta {
  margin-top: 32px;
  padding: 24px;
  background: var(--card);
  border: 1px solid var(--rule);
  border-top: 3px solid var(--gold);
  border-radius: var(--r-6);
  text-align: center;
}
.pg-leave-review-cta h3 { font-family: var(--serif); font-weight: 500; font-size: 22px; color: var(--navy-ink); margin: 0 0 6px; }
.pg-leave-review-cta p { font-size: 14px; color: var(--fg-2); margin: 0 0 14px; max-width: 460px; margin-left: auto; margin-right: auto; }
.pg-leave-review-cta__row { display: inline-flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.pg-leave-review-cta__note { display: block; margin-top: 12px; font-size: 12px; color: var(--fg-3); font-style: italic; }

/* Generic page lede + section header */
.pg-page-head {
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
  padding: 40px 0 32px;
}
@media (min-width: 768px) { .pg-page-head { padding: 64px 0 40px; } }
.pg-page-head__inner { max-width: var(--container); margin: 0 auto; padding: 0 16px; }
@media (min-width: 768px) { .pg-page-head__inner { padding: 0 24px; } }
@media (min-width: 1024px){ .pg-page-head__inner { padding: 0 32px; } }

/* Port card (used on Ports listing) */
.pg-port-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}
@media (min-width: 768px) { .pg-port-grid { grid-template-columns: 1fr 1fr; gap: 24px; } }
@media (min-width: 1100px) { .pg-port-grid { grid-template-columns: 1fr 1fr 1fr; } }
.pg-port-card {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--r-6);
  overflow: hidden;
  display: flex; flex-direction: column;
  text-decoration: none; color: var(--navy-ink);
  transition: transform .15s, box-shadow .15s, border-color .15s;
}
.pg-port-card:hover { border-color: var(--gold); box-shadow: var(--sh-md); transform: translateY(-2px); text-decoration: none; color: var(--navy-ink); }
.pg-port-card__media {
  aspect-ratio: 16 / 10;
  background: linear-gradient(135deg, #2C344C, #1A2036);
  background-size: cover; background-position: center;
  position: relative;
}
.pg-port-card__flag {
  position: absolute; top: 12px; left: 12px;
  background: rgba(255,255,255,0.95);
  font-family: var(--sans); font-size: 11px; font-weight: 700;
  padding: 4px 8px; border-radius: var(--r-4);
  color: var(--navy-ink); letter-spacing: 0.05em;
}
.pg-port-card__verdict {
  position: absolute; bottom: 12px; left: 12px;
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(26,32,54,0.85);
  color: #fff;
  font-family: var(--sans); font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.1em;
  padding: 5px 10px; border-radius: var(--r-4);
}
.pg-port-card__verdict-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); }
.pg-port-card__body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.pg-port-card__country { font-family: var(--sans); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--fg-3); }
.pg-port-card__name { font-family: var(--serif); font-weight: 500; font-size: 22px; color: var(--navy-ink); line-height: 1.2; margin: 2px 0 1px; }
.pg-port-card__hook { font-size: 14px; color: var(--fg-2); line-height: 1.5; }
.pg-port-card__meta {
  margin-top: auto; padding-top: 12px;
  font-size: 12px; color: var(--fg-3);
  display: flex; flex-wrap: wrap; gap: 12px;
}
.pg-port-card__rating { color: var(--navy-ink); font-weight: 600; }

/* Region card */
.pg-region-grid { display: grid; grid-template-columns: 1fr; gap: 18px; }
@media (min-width: 768px) { .pg-region-grid { grid-template-columns: 1fr 1fr; gap: 24px; } }
.pg-region-card {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--r-6);
  overflow: hidden;
  display: flex; flex-direction: column;
  text-decoration: none; color: var(--navy-ink);
}
.pg-region-card:hover { border-color: var(--gold); box-shadow: var(--sh-md); text-decoration: none; color: var(--navy-ink); }
.pg-region-card__media { aspect-ratio: 21 / 9; background: linear-gradient(135deg, #2C344C, #1A2036); background-size: cover; background-position: center; }
.pg-region-card__body { padding: 20px 22px 22px; }
.pg-region-card__country { font-family: var(--sans); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--fg-3); }
.pg-region-card__name { font-family: var(--serif); font-weight: 500; font-size: 26px; color: var(--navy-ink); margin: 4px 0 6px; }
.pg-region-card__hook { font-size: 14px; color: var(--fg-2); line-height: 1.5; margin: 0 0 10px; }
.pg-region-card__ports { font-size: 13px; color: var(--navy-ink); font-weight: 500; }

/* News item */
.pg-newsfeed { display: flex; flex-direction: column; gap: 12px; }
.pg-newsfeed__item {
  display: grid; grid-template-columns: 120px 1fr;
  gap: 16px; padding: 20px 24px;
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--r-6);
  box-shadow: var(--sh-sm);
}
.pg-newsfeed__item:first-child { border-top: 1px solid var(--rule); padding-top: 20px; }
.pg-newsfeed__date { font-family: var(--sans); font-size: 12px; color: var(--fg-3); font-variant-numeric: tabular-nums; }
.pg-newsfeed__type {
  display: inline-block; margin-top: 6px;
  font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em;
  padding: 3px 7px; border-radius: var(--r-4);
}
.pg-newsfeed__type--alert { background: var(--bad-soft); color: var(--bad-ink); }
.pg-newsfeed__type--update { background: var(--ok-soft); color: var(--ok-ink); }
.pg-newsfeed__type--info { background: var(--info-soft); color: var(--info); }
.pg-newsfeed__type--warn { background: var(--warn-soft); color: var(--warn-ink); }
.pg-newsfeed__title { font-family: var(--serif); font-weight: 500; font-size: 20px; color: var(--navy-ink); margin: 0 0 6px; }
.pg-newsfeed__body { font-size: 15px; color: var(--fg-1); line-height: 1.55; margin: 0; }
.pg-newsfeed__port { font-size: 12px; color: var(--fg-3); margin-top: 6px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.08em; }
@media (max-width: 640px) {
  .pg-newsfeed__item { grid-template-columns: 1fr; gap: 4px; }
}

/* Methodology page layout */
.pg-method { display: grid; grid-template-columns: 1fr; gap: 32px; align-items: start; padding: 48px 0 64px; }
@media (min-width: 900px) { .pg-method { grid-template-columns: 220px 1fr; gap: 64px; } }
.pg-method__toc {
  position: sticky; top: 96px;
  border-left: 1px solid var(--rule);
  padding-left: 16px;
}
.pg-method__toc__lbl { font-family: var(--sans); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--fg-3); margin: 0 0 12px; }
.pg-method__toc a { display: block; padding: 5px 0; font-size: 13px; color: var(--fg-2); text-decoration: none; }
.pg-method__toc a:hover { color: var(--navy-ink); }
.pg-method__toc a.is-current { color: var(--navy-ink); font-weight: 600; border-left: 3px solid var(--gold); margin-left: -19px; padding-left: 16px; }
.pg-method__article > section { margin-bottom: 48px; }
.pg-method__article h2 { margin-bottom: 12px; }
.pg-method__article p { margin: 0 0 14px; max-width: 680px; }
.pg-method__article ul { margin: 0 0 14px; padding-left: 20px; }
.pg-method__article ul li { margin-bottom: 6px; }
.pg-acc-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px;
  margin-top: 12px;
}
@media (min-width: 640px) { .pg-acc-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px) { .pg-acc-grid { grid-template-columns: repeat(4, 1fr); } }
.pg-acc {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 90px;
  background: var(--card); border: 1px solid var(--rule); border-radius: var(--r-4);
  padding: 14px 12px;
  text-align: center;
  text-decoration: none; color: var(--navy-ink);
}
.pg-acc:hover { border-color: var(--gold); text-decoration: none; color: var(--navy-ink); }
.pg-acc__name { font-family: var(--serif); font-weight: 500; font-size: 14px; color: var(--navy-ink); line-height: 1.25; }
.pg-acc__lbl { font-family: var(--sans); font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--fg-3); margin-top: 4px; }

/* Home / marketing bits */
.pg-home-hero {
  background:
    linear-gradient(96deg, rgba(20,26,46,0.93) 0%, rgba(20,26,46,0.84) 40%, rgba(20,26,46,0.62) 72%, rgba(20,26,46,0.5) 100%),
    linear-gradient(180deg, rgba(20,26,46,0.24) 0%, rgba(20,26,46,0.36) 55%, rgba(20,26,46,0.92) 100%),
    var(--hero-img) center/cover no-repeat,
    var(--navy);
  color: #fff;
  padding: 64px 0 80px;
  position: relative;
  overflow: hidden;
}
/* Desktop padding trimmed so the search bar sits higher in first view. */
@media (min-width: 768px) { .pg-home-hero { padding: 60px 0 68px; } }
.pg-home-hero__inner { max-width: var(--container); margin: 0 auto; padding: 0 16px; position: relative; z-index: 2; }
@media (min-width: 768px) { .pg-home-hero__inner { padding: 0 24px; } }
@media (min-width: 1024px){ .pg-home-hero__inner { padding: 0 32px; } }
.pg-home-hero__eyebrow {
  font-family: var(--sans); font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.16em;
  color: var(--gold); margin: 0 0 16px;
}
.pg-home-hero__title { font-family: var(--serif); font-weight: 500; font-size: 42px; line-height: 1.05; color: #fff; max-width: 820px; letter-spacing: -0.015em; margin: 0; }
@media (min-width: 768px) { .pg-home-hero__title { font-size: 72px; } }
.pg-home-hero__title em { font-style: italic; color: var(--gold); font-weight: 400; }
.pg-home-hero__sub { font-family: var(--serif); font-weight: 400; font-size: 18px; line-height: 1.45; color: rgba(255,255,255,0.85); max-width: 580px; margin: 24px 0 0; }
@media (min-width: 768px) { .pg-home-hero__sub { font-size: 22px; } }
.pg-home-hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.pg-home-hero__deco {
  position: absolute; inset: 0; opacity: 0.18;
  background:
    radial-gradient(circle at 80% 30%, rgba(212,184,106,0.4), transparent 40%),
    linear-gradient(rgba(212,184,106,0.08) 1px, transparent 1px) 0 0 / 60px 60px,
    linear-gradient(90deg, rgba(212,184,106,0.08) 1px, transparent 1px) 0 0 / 60px 60px;
  pointer-events: none;
}

.pg-feature-row {
  display: grid; grid-template-columns: 1fr; gap: 20px;
  margin-top: 24px;
}
@media (min-width: 768px) { .pg-feature-row { grid-template-columns: 1fr 1fr 1fr; gap: 24px; } }
.pg-feature {
  padding: 28px;
  background: var(--card);
  border: 1px solid var(--rule);
  border-top: 3px solid var(--gold);
  border-radius: var(--r-6);
  box-shadow: var(--sh-md);
  display: flex; flex-direction: column;
}
.pg-feature__lbl { font-family: var(--sans); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; color: var(--gold); margin: 0 0 16px; }
.pg-feature h3 { margin: 0 0 12px; min-height: 2.4em; display: flex; align-items: flex-start; }
.pg-feature__desc { font-size: 15px; color: var(--fg-2); line-height: 1.6; margin: 0; flex: 1; }
.pg-feature p { font-size: 15px; color: var(--fg-2); line-height: 1.55; margin: 0; }
/* Ask AI. dark hero tile */
.pg-feature--ai { background: var(--navy); border-color: var(--navy-soft); border-top-color: var(--gold); }
.pg-feature--ai .pg-feature__lbl { color: var(--gold); }
.pg-feature--ai h3 { color: #fff; }
.pg-feature--ai .pg-feature__desc { color: rgba(255,255,255,0.72); }
/* Coming-soon CTA on the navy tile: a quiet outline so it matches the weight
   of the solid CTAs on the other cards, not a heavy white block. */
.pg-feature--ai .pg-btn--secondary { background: transparent; color: #fff; border-color: rgba(255,255,255,0.45); }
.pg-feature--ai .pg-btn--secondary:hover { border-color: var(--gold); color: #fff; }
/* Coming soon. muted tile */
.pg-feature--muted { background: var(--muted-fill); border-color: var(--rule); }

/* Plain section block */
.pg-block { padding: 56px 0; }
.pg-block--cream { background: var(--muted-fill); }
.pg-block__inner { max-width: var(--container); margin: 0 auto; padding: 0 16px; }
@media (min-width: 768px) { .pg-block__inner { padding: 0 24px; } }
@media (min-width: 1024px){ .pg-block__inner { padding: 0 32px; } }
.pg-block__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 24px; }
.pg-block__head a { font-family: var(--sans); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; text-decoration: none; color: var(--navy-ink); }
.pg-block__head a::after { content: ' →'; color: var(--gold); }

/* Ask AI standalone page */
.pg-ask-page {
  display: grid; grid-template-columns: 1fr; gap: 32px;
  padding: 48px 0;
}
@media (min-width: 900px) { .pg-ask-page { grid-template-columns: 1fr 280px; gap: 48px; } }
.pg-ask-page__chat {
  background: var(--card); border: 1px solid var(--rule); border-radius: var(--r-8);
  display: flex; flex-direction: column;
  min-height: 540px;
  overflow: hidden;
}
.pg-ask-page__body {
  flex: 1; overflow-y: auto;
  padding: 24px;
  display: flex; flex-direction: column; gap: 12px;
  background: var(--paper);
}
.pg-ask-page__bar {
  padding: 14px 16px; border-top: 1px solid var(--rule);
  display: flex; gap: 8px; background: var(--card);
}
.pg-ask-page__field {
  flex: 1; appearance: none;
  border: 1px solid var(--rule); border-radius: var(--r-4);
  padding: 12px 14px;
  font-family: var(--sans); font-size: 14px;
  background: var(--paper); color: var(--navy-ink);
  min-height: 44px;
}
.pg-ask-page__chips {
  padding: 12px 16px; border-top: 1px solid var(--rule);
  display: flex; flex-wrap: wrap; gap: 6px; background: var(--card);
}
.pg-ask-page__chip {
  appearance: none; background: var(--paper); border: 1px solid var(--rule);
  padding: 8px 12px; border-radius: var(--r-4);
  font-size: 12px; font-weight: 500; color: var(--navy-ink);
  cursor: pointer;
}
.pg-ask-page__side {
  display: flex; flex-direction: column; gap: 16px;
}
.pg-not-good-at {
  background: var(--muted-fill); border: 1px solid var(--rule); border-radius: var(--r-6);
  padding: 20px; font-size: 14px;
}
.pg-not-good-at h3 { margin-bottom: 10px; }

/* Contact */
.pg-contact-form { display: flex; flex-direction: column; gap: 16px; max-width: 600px; }
.pg-contact-form label { font-family: var(--sans); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; color: var(--fg-3); display: block; margin-bottom: 6px; }
.pg-contact-form .pg-rv-input,
.pg-contact-form .pg-rv-textarea { background: var(--card); }


/* News filter (Home, News page) */
.pg-news-filter {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin-top: 8px;
}
.pg-news-filter__input-wrap { position: relative; }
.pg-news-filter__icon { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--fg-3); pointer-events: none; }
.pg-news-filter__input {
  width: 200px;
  font-family: var(--sans); font-size: 13px;
  padding: 8px 12px 8px 32px;
  border: 1px solid var(--rule); border-radius: var(--r-4);
  background: var(--card); color: var(--navy-ink);
  min-height: 36px;
}
.pg-news-filter__input:focus { outline: 3px solid var(--gold); outline-offset: 1px; border-color: var(--gold); }
.pg-news-filter__select {
  font-family: var(--sans); font-size: 13px;
  padding: 8px 28px 8px 12px;
  border: 1px solid var(--rule); border-radius: var(--r-4);
  background: var(--card); color: var(--navy-ink);
  min-height: 36px;
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--navy-ink) 50%), linear-gradient(135deg, var(--navy-ink) 50%, transparent 50%);
  background-position: calc(100% - 14px) calc(50% - 2px), calc(100% - 8px) calc(50% - 2px);
  background-size: 6px 6px;
  background-repeat: no-repeat;
}
.pg-news-filter__all {
  font-family: var(--sans); font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--navy-ink); text-decoration: none;
  white-space: nowrap;
}
.pg-news-filter__all::after { content: ' ->'; color: var(--gold); }

/* Feature card CTA */
.pg-feature__cta { margin-top: 24px; align-self: stretch; }

/* App store badges (Coming soon feature card) */
.pg-app-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.pg-app-badge {
  display: inline-flex; flex-direction: column; align-items: flex-start; justify-content: center;
  padding: 8px 14px;
  background: var(--navy);
  color: #fff;
  border-radius: var(--r-4);
  text-decoration: none;
  min-width: 140px;
  min-height: 44px;
}
.pg-app-badge:hover { background: var(--navy-ink); color: #fff; text-decoration: none; }
.pg-app-badge__lbl {
  font-family: var(--sans); font-size: 9px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.12em;
  color: rgba(255,255,255,0.65);
  line-height: 1.1;
}
.pg-app-badge__name {
  font-family: var(--serif); font-weight: 500; font-size: 16px;
  color: #fff; line-height: 1.1; margin-top: 2px;
}

/* Country code badge (replaces emoji flags) */
.pg-port-card__flag {
  font-weight: 700;
  font-size: 10px;
  padding: 5px 8px;
  letter-spacing: 0.08em;
}


/* Port card "View guide" affordance. the whole card is the link, this is visual emphasis. */
.pg-port-card__cta {
  display: inline-flex; align-items: center;
  margin-top: 12px;
  font-family: var(--sans); font-size: 12px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--navy-ink);
  padding: 8px 0 0;
  border-top: 1px solid var(--rule);
}
.pg-port-card__cta::after { content: ' ->'; color: var(--gold); margin-left: 6px; }
.pg-port-card:hover .pg-port-card__cta { color: var(--gold-hover); }


/* News feed item CTA */
.pg-newsfeed__cta {
  display: inline-block;
  margin-top: 10px;
  font-family: var(--sans); font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--navy-ink); text-decoration: none;
}
.pg-newsfeed__cta::after { content: ' ->'; color: var(--gold); margin-left: 4px; }
.pg-newsfeed__cta:hover { color: var(--gold-hover); }


/* Page-head hero variant. used on Ports, Regions, News, etc. when we want a backdrop image */
.pg-page-head--hero {
  background:
    linear-gradient(180deg, rgba(20,26,46,0.55) 0%, rgba(20,26,46,0.72) 100%),
    var(--hero-img) center/cover no-repeat,
    var(--navy);
  color: #fff;
  border-bottom: 0;
}
.pg-page-head--hero .pg-eyebrow { color: var(--gold); }
.pg-page-head--hero h1.pg-h1 { color: #fff; }
.pg-page-head--hero .pg-lede { color: rgba(255,255,255,0.88); }


/* Port card equal height in carousel. all cards same height, content aligned */
.pg-carousel__track { align-items: stretch; }
.pg-port-card {
  cursor: default;
  display: flex; flex-direction: column;
  height: 100%;
}
.pg-port-card__media {
  aspect-ratio: 16 / 7;
  flex-shrink: 0;
}
.pg-port-card__body {
  flex: 1; display: flex; flex-direction: column;
  padding: 16px 18px 18px;
}
.pg-port-card__country {
  min-height: 1.4em;
  flex-shrink: 0;
  margin-bottom: 2px;
}
.pg-port-card__name {
  margin: 2px 0 0;
  flex-shrink: 0;
}
.pg-port-card__hook {
  flex-shrink: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  /* Lock to exactly 3 lines so ratings + CTA align across all cards in a row */
  min-height: calc(1.55em * 3);
  font-size: 14px;
  line-height: 1.55;
  color: var(--fg-2);
}
.pg-port-card__ratings {
  margin-top: auto;
  padding-top: 12px;
  flex-shrink: 0;
}
.pg-port-card__btn {
  margin-top: 12px;
  flex-shrink: 0;
  width: 100%;
  justify-content: center;
}
.pg-port-card__btn {
  margin-top: 14px;
  width: fit-content;
  padding: 10px 14px;
  font-size: 12px;
}
.pg-port-card { cursor: default; }
.pg-port-card .pg-port-card__btn { cursor: pointer; }

/* "View all in <Region>" card */
.pg-port-card--all { background: var(--navy); color: #fff; border-color: var(--navy); }
.pg-port-card--all .pg-port-card__country { color: var(--gold); }
.pg-port-card--all .pg-port-card__name { color: #fff; }
.pg-port-card--all .pg-port-card__hook { color: rgba(255,255,255,0.82); }
.pg-port-card--all:hover { color: #fff; border-color: var(--gold); }
.pg-port-card__media--all {
  background: linear-gradient(135deg, #1A2036, #3C465F);
  position: relative;
  display: flex; align-items: center; justify-content: center;
}
.pg-port-card__all-text {
  color: rgba(255,255,255,0.92);
  text-align: center;
  font-family: var(--sans); font-size: 13px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.12em;
  line-height: 1.4;
}
.pg-port-card__all-text strong { display: block; font-family: var(--serif); font-weight: 500; font-size: 24px; text-transform: none; letter-spacing: -0.005em; margin-top: 4px; color: var(--gold); }
.pg-port-card--all .pg-port-card__btn { width: 100%; justify-content: center; }


/* ============================================================
   CAROUSEL (region port-scroller, ports page)
   Desktop: 3 cards visible. Tablet: 2. Mobile: 1.
   Arrows float in the gutter via position:absolute so the track
   fills the same content width as every other section.
   ============================================================ */
.pg-carousel {
  position: relative;
}
.pg-carousel__window { overflow: hidden; }
.pg-carousel__track {
  display: flex !important;
  flex-wrap: nowrap !important;
  grid-template-columns: unset !important;
  gap: 18px;
  will-change: transform;
  transition: transform 0.35s cubic-bezier(0.2,0,0,1);
}
.pg-carousel__track .pg-port-card {
  flex: 0 0 calc((100% - 36px) / 3);
  max-width: calc((100% - 36px) / 3);
}
@media (max-width: 1023px) and (min-width: 641px) {
  .pg-carousel__track .pg-port-card {
    flex: 0 0 calc((100% - 18px) / 2);
    max-width: calc((100% - 18px) / 2);
  }
}
@media (max-width: 640px) {
  .pg-carousel__track .pg-port-card { flex: 0 0 100%; max-width: 100%; }
}

.pg-carousel__btn {
  appearance: none;
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--r-4);
  width: 44px; height: 44px;
  font-size: 18px;
  color: var(--navy-ink);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: border-color .15s, background .15s;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
}
/* Desktop (≥1024px, 32px padding): arrow sits 10px from pg-block__inner edge */
.pg-carousel__btn--prev { left: -22px; }
.pg-carousel__btn--next { right: -22px; }
/* Tablet / mobile: bring arrows just inside the card edges */
@media (max-width: 1023px) {
  .pg-carousel__btn--prev { left: 8px; }
  .pg-carousel__btn--next { right: 8px; }
}
@media (max-width: 640px) {
  .pg-carousel__btn { width: 36px; height: 36px; font-size: 14px; }
}
.pg-carousel__btn:hover { border-color: var(--gold); background: var(--paper); }
.pg-carousel__btn:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }


/* ============================================================
   PORT CARD DUAL RATINGS (CPA + Reader)
   ============================================================ */
.pg-port-card__ratings {
  display: flex; flex-direction: column; gap: 6px;
  margin-top: 10px; padding-top: 10px;
  border-top: 1px solid var(--rule);
}
.pg-port-card__cpa,
.pg-port-card__user {
  display: flex; align-items: center; gap: 6px;
}
.pg-port-card__rating-lbl {
  font-family: var(--sans); font-size: 9px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--fg-3); min-width: 46px;
}
.pg-stars { display: inline-flex; gap: 2px; }
.pg-star { width: 12px; height: 12px; flex-shrink: 0; }
.pg-star--full polygon { fill: var(--gold); stroke: var(--gold); stroke-width: 0.5; }
.pg-star--half .pg-star__outline { fill: none; stroke: var(--gold); stroke-width: 1; }
.pg-star--half .pg-star__fill { fill: var(--gold); stroke: none; }
.pg-star--empty polygon { fill: none; stroke: var(--rule); stroke-width: 1; }
.pg-stars--empty .pg-star polygon { fill: none; stroke: var(--rule); stroke-width: 1; }
.pg-stars--research .pg-star polygon { fill: var(--muted-fill); stroke: var(--rule); stroke-width: 0.5; }
.pg-port-card__score {
  font-family: var(--sans); font-size: 11px; font-weight: 700;
  color: var(--navy-ink); font-variant-numeric: tabular-nums;
}
/* .pg-port-card__score--none conflict resolved: folded to the v6 icon
   version below (navy-soft, gold star, 12px). v6. */
.pg-port-card__walk {
  font-size: 12px; color: var(--fg-3); margin-top: 4px;
}


/* CPAI tooltip on hover */
[data-tooltip] { position: relative; cursor: help; }
[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%);
  background: var(--navy-ink); color: #fff;
  font-family: var(--sans); font-size: 11px; font-weight: 500;
  white-space: nowrap;
  padding: 5px 9px; border-radius: var(--r-4);
  pointer-events: none;
  opacity: 0; transition: opacity .15s;
  z-index: 10;
}
[data-tooltip]:hover::after,
[data-tooltip]:focus-visible::after { opacity: 1; }


/* Guide topics. 2-col list (default) or 5-col cards (toggle)
   ============================================================ */
.pg-guide-topics {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  border-radius: var(--r-4);
  overflow: hidden;
  margin-bottom: 4px;
}
@media (max-width: 640px) { .pg-guide-topics { grid-template-columns: 1fr; } }

/* 5-col card variant (toggle) */
.pg-guide-topics--cards {
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  background: transparent;
  border: none;
  overflow: visible;
}
@media (max-width: 1024px) { .pg-guide-topics--cards { grid-template-columns: repeat(5, 1fr); } }
@media (max-width: 640px)  { .pg-guide-topics--cards { grid-template-columns: 1fr 1fr; } }
.pg-guide-topics--cards .pg-topic {
  display: block;
  border: 1px solid var(--rule);
  border-top: 2px solid var(--gold);
  border-radius: var(--r-4);
  padding: 14px 16px;
}
.pg-guide-topics--cards .pg-topic--featured { background: var(--card); }
.pg-guide-topics--cards .pg-topic__num  { display: block; margin: 0 0 6px; grid-row: auto; }
.pg-guide-topics--cards .pg-topic__title { font-size: 15px; grid-column: auto; margin: 0 0 5px; }
.pg-guide-topics--cards .pg-topic__body  {
  grid-column: auto; font-size: 12px;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}

/* shared topic article internals */
.pg-topic {
  background: var(--card);
  padding: 20px 24px;
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 0 10px;
  align-items: start;
}
.pg-topic--featured { background: var(--muted-fill); }
.pg-topic__num {
  font-family: var(--sans); font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--gold); grid-row: 1 / 3; padding-top: 3px; margin: 0;
}
.pg-topic__title {
  font-family: var(--serif); font-weight: 500; font-size: 15px;
  color: var(--navy-ink); grid-column: 2; margin: 0 0 4px;
}
.pg-topic__body {
  font-size: 13px; color: var(--fg-2); line-height: 1.5; grid-column: 2; margin: 0;
}
.pg-topic-cta {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  margin-top: 24px; padding: 20px 24px;
  background: var(--navy);
  border-radius: var(--r-6);
  color: rgba(255,255,255,0.85);
  font-size: 15px;
}

/* Inline AI ask box (guide topics footer)
   ============================================================ */
.pg-inline-ask {
  margin-top: 28px;
  padding: 28px 32px 24px;
  background: var(--navy);
  border-radius: var(--r-6);
}
.pg-inline-ask__eyebrow {
  font-family: var(--sans); font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--gold); margin: 0 0 10px;
}
.pg-inline-ask__head {
  font-family: var(--serif); font-weight: 500; font-size: 22px;
  color: #fff; margin: 0 0 20px; line-height: 1.25;
}
.pg-inline-ask__form {
  display: flex; gap: 8px; margin-bottom: 14px;
}
.pg-inline-ask__input {
  flex: 1; padding: 10px 14px;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: var(--r-4);
  font: inherit; font-size: 14px;
  color: #fff;
  transition: border-color .15s;
}
.pg-inline-ask__input::placeholder { color: rgba(255,255,255,0.42); }
.pg-inline-ask__input:focus { outline: none; border-color: var(--gold); }
.pg-inline-ask__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 4px; }
.pg-inline-ask__chip {
  appearance: none;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: var(--r-4);
  padding: 6px 12px;
  font: inherit; font-size: 12px; font-weight: 500;
  color: rgba(255,255,255,0.78);
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.pg-inline-ask__chip:hover { background: rgba(255,255,255,0.15); border-color: var(--gold); color: #fff; }
.pg-inline-ask__result {
  margin-top: 16px;
  padding: 16px 20px;
  background: rgba(255,255,255,0.07);
  border-radius: var(--r-4);
  border-left: 3px solid var(--gold);
}
.pg-inline-ask__answer {
  font-size: 14px; color: rgba(255,255,255,0.88); line-height: 1.65; margin: 0 0 12px;
}
.pg-inline-ask__more {
  appearance: none; background: none; border: none; padding: 0;
  font: inherit; font-size: 12px; font-weight: 600;
  color: var(--gold); cursor: pointer;
}
.pg-inline-ask__more:hover { color: var(--gold-hover); text-decoration: underline; text-underline-offset: 3px; }

/* Ask dock chip label rows */
.pg-ask__chips-lbl {
  width: 100%; margin: 8px 0 4px;
  font-family: var(--sans); font-size: 9px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.14em; color: var(--fg-3);
}
.pg-ask__chips-lbl:first-child { margin-top: 2px; }


/* Footer Ask CP AI block */
.pg-site-footer__ask {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,0.10);
}
.pg-site-footer__ask-lbl {
  font-family: var(--sans); font-size: 13px; font-weight: 700;
  color: #fff; margin: 0 0 6px;
}
.pg-site-footer__ask-body {
  font-size: 12px; color: rgba(255,255,255,0.65);
  line-height: 1.55; margin: 0 0 10px; max-width: 240px;
}
.pg-site-footer__ask-btn {
  display: inline-flex; align-items: center;
  padding: 8px 14px;
  background: var(--gold); color: var(--navy-ink);
  border-radius: var(--r-4);
  font-family: var(--sans); font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.1em;
  text-decoration: none;
}
.pg-site-footer__ask-btn:hover { background: var(--gold-hover); color: var(--navy-ink); text-decoration: none; }

/* -- Apple / Google Maps picker -----------------------------
   Used wherever a POI or place has a map link. Appears as a
   small inline button that opens a two-option dropdown.
   ----------------------------------------------------------- */
.map-pick { position: relative; display: inline-block; }
.map-pick__btn {
  appearance: none; background: transparent; border: 0; cursor: pointer; padding: 0;
  font-family: var(--sans); font-size: 12px; font-weight: 600;
  color: var(--fg-3); display: inline-flex; align-items: center; gap: 4px;
  min-height: 28px;
}
.map-pick__btn:hover { color: var(--navy-ink); }
.map-pick__menu {
  position: absolute; bottom: 100%; left: 0; z-index: 20;
  margin-bottom: 4px;
  background: var(--card); border: 1px solid var(--rule); border-radius: var(--r-4);
  box-shadow: var(--sh-md); min-width: 158px; overflow: hidden;
  display: none;
}
.map-pick__menu[data-open] { display: block; }
.map-pick__option {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px; border-bottom: 1px solid var(--rule);
  font-family: var(--sans); font-size: 13px; font-weight: 500;
  color: var(--navy-ink); text-decoration: none;
}
.map-pick__option:last-child { border-bottom: none; }
.map-pick__option:hover { background: var(--muted-fill); text-decoration: none; }

/* Transport-type colour bands on scroll cards (no image) */
.pg-scroll-card--transport {
  border-top: 3px solid var(--info);
}
.pg-scroll-card--walk    { border-top: 3px solid var(--ok); }
.pg-scroll-card--shuttle { border-top: 3px solid var(--navy); }
.pg-scroll-card--taxi    { border-top: 3px solid var(--gold); }
.pg-scroll-card--metro   { border-top: 3px solid var(--info); }

/* Accessibility fact chips grid */
.access-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.access-chip {
  display: inline-flex; align-items: flex-start; gap: 8px;
  background: var(--card); border: 1px solid var(--rule); border-radius: var(--r-4);
  padding: 10px 14px; font-size: 13px; line-height: 1.45;
  flex: 0 0 calc(50% - 4px);
}
@media (min-width: 1024px) { .access-chip { flex: 0 0 calc(33.333% - 6px); } }
.access-chip--ok   { background: var(--ok-soft);   border-color: var(--ok-line); }
.access-chip--warn { background: var(--warn-soft);  border-color: var(--warn-line); }
.access-chip--bad  { background: var(--bad-soft);   border-color: #f0b4bb; }
.access-chip__dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; margin-top: 4px; }
.access-chip__dot--ok   { background: var(--ok); }
.access-chip__dot--warn { background: var(--warn); }
.access-chip__dot--bad  { background: var(--bad); }
.access-chip__text { color: var(--navy-ink); }

/* ============================================================
   MOBILE BREAKPOINT PASS · Port guide (390px)
   Targeted fixes for the 390px viewport.
   ============================================================ */
@media (max-width: 479px) {
  .pg-hero__title { font-size: 30px !important; }
  .pg-hero__sub   { font-size: 14px !important; }
  .pg-hero__facts { gap: 8px 14px; }
  .pg-hero__image { max-height: 320px; }
  .port-tab { padding: 14px 10px; font-size: 13px; }
  .pg-section-title { font-size: 20px !important; }
  .pg-h2 { font-size: 22px !important; }
  .pg-verdict { padding: 18px; }
  .pg-verdict__title { font-size: 22px !important; }
  .pg-hook { padding: 14px; }
  .pg-plan-split__steps { padding: 14px 16px 18px; }
  .pg-rating-grid { grid-template-columns: 1fr; }
  .pg-fact-grid { grid-template-columns: repeat(2, 1fr); gap: 12px 14px; }
  .pg-fact-grid--4 { grid-template-columns: repeat(2, 1fr); }
  .pg-scroll { grid-auto-columns: 88%; }
  .poi-tiles { grid-template-columns: repeat(2, 1fr); }
  .pg-intensity__bar { width: 6px; height: 14px; }
  .pg-card { padding: 14px; }
  .pg-tab-panel { padding: 16px 0 48px; }
  .pg-news__item { grid-template-columns: auto 1fr; }
  .pg-news__when { grid-column: 2; }
  .pg-cost td { font-size: 13px; padding: 8px 0; }
  .pg-heatmap__cell { font-size: 8px; }
  .pg-heatmap__hour { font-size: 8px; }
  .pg-map__canvas { min-height: 240px; }
  .pg-ask { right: 8px; bottom: 8px; }
  .pg-ask__panel { width: calc(100vw - 16px); }
  .pg-site-footer__cols { gap: 20px; }
}

/* ============================================================
   LOADING SKELETONS
   Apply .skel to any placeholder element. Combine with
   shape helpers (.skel-text, .skel-img, etc.) for layout.
   Use .pg-tab-panel--loading on a tab panel to suppress
   real content and show the .skel-panel child instead.
   ============================================================ */
.skel {
  display: block;
  background: linear-gradient(90deg, var(--muted-fill) 0%, var(--rule) 40%, var(--muted-fill) 80%);
  background-size: 200% 100%;
  border-radius: var(--r-4);
  animation: skel-shimmer 1.6s ease-in-out infinite;
}
@keyframes skel-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .skel { animation: none; opacity: 0.55; }
}

/* Shape helpers */
.skel-h1   { height: 34px; max-width: 58%; margin-bottom: 12px; }
.skel-h2   { height: 24px; max-width: 44%; margin-bottom: 10px; }
.skel-h3   { height: 18px; max-width: 52%; margin-bottom: 8px; }
.skel-text { height: 13px; margin-bottom: 8px; }
.skel-text--xs  { max-width: 30%; }
.skel-text--sm  { max-width: 55%; }
.skel-text--mid { max-width: 75%; }
.skel-text--full{ max-width: 100%; }
.skel-img  { aspect-ratio: 16 / 9; width: 100%; border-radius: var(--r-6); }
.skel-chip { height: 24px; width: 68px; border-radius: var(--r-4); display: inline-block; }
.skel-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.skel-para  { display: flex; flex-direction: column; gap: 8px; }
.skel-verdict { height: 110px; border-radius: var(--r-6); }
.skel-fact-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px 24px;
}
@media (min-width: 768px) { .skel-fact-grid { grid-template-columns: repeat(3, 1fr); } }
.skel-fact { display: flex; flex-direction: column; gap: 6px; }
.skel-card {
  background: var(--card); border: 1px solid var(--rule); border-radius: var(--r-6);
  padding: 20px; display: flex; flex-direction: column; gap: 12px;
}
.skel-card--h { flex-direction: row; align-items: flex-start; gap: 16px; }
.skel-card--h .skel-img { width: 120px; flex-shrink: 0; border-radius: var(--r-4); }
.skel-scroll {
  display: grid; grid-auto-flow: column; grid-auto-columns: 78%;
  gap: 12px; overflow: hidden; margin: 0 -16px; padding: 4px 16px 16px;
}
@media (min-width: 768px) { .skel-scroll { grid-auto-columns: 46%; margin: 0; padding: 4px 0 16px; } }
@media (min-width: 1024px) { .skel-scroll { grid-auto-columns: calc((100% - 24px) / 3); } }

/* ============================================================
   INLINE NETWORK ERROR
   Use when a single section fails to load inside a tab that
   otherwise has content. Not for page-level errors (use
   errors.html for those).
   ============================================================ */
.pg-section-error {
  background: var(--card);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--bad);
  border-radius: var(--r-6);
  padding: 18px 22px;
  display: flex; align-items: flex-start; gap: 14px;
}
.pg-section-error__icon {
  color: var(--bad); font-size: 18px; flex-shrink: 0; margin-top: 2px;
}
.pg-section-error__body { flex: 1; }
.pg-section-error__title {
  font-family: var(--sans); font-size: 14px; font-weight: 700;
  color: var(--navy-ink); margin: 0 0 4px;
}
.pg-section-error__msg {
  font-size: 13px; color: var(--fg-2); line-height: 1.5; margin: 0 0 12px;
}
.pg-section-error__retry {
  appearance: none; border: 1px solid var(--rule); border-radius: var(--r-4);
  background: transparent; padding: 7px 14px; cursor: pointer;
  font-family: var(--sans); font-size: 12px; font-weight: 600;
  color: var(--navy-ink); display: inline-block;
}
.pg-section-error__retry:hover { border-color: var(--navy); }

/* ============================================================
   EMPTY CARD (inline, within a populated tab)
   Dashed border, transparent bg. Different from .pg-tab-empty
   which covers the whole tab.
   ============================================================ */
.pg-card--empty {
  background: transparent;
  border: 1px dashed var(--rule);
  box-shadow: none;
}
.pg-card--empty .pg-card__eyebrow { color: var(--fg-3); }
.pg-card--empty .pg-card__title   { color: var(--fg-2); font-size: 16px; }
.pg-card--empty .pg-card__text    { font-size: 13px; color: var(--fg-3); }

/* ============================================================
   SENSORY PROFILE (POI detail page)
   ============================================================ */
.poi-sensory { margin-top: 40px; }
.poi-sensory__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; margin-bottom: 16px; flex-wrap: wrap;
}
.poi-sensory__title {
  font-family: var(--serif); font-weight: 500; font-size: 24px;
  color: var(--navy-ink); margin: 0;
}
.poi-sensory__badge {
  display: inline-flex; align-items: center; gap: 5px;
  border-radius: var(--r-4); padding: 4px 10px;
  font-size: 11px; font-weight: 700;
}
.poi-sensory__badge--ok   { background: var(--ok-soft);   color: var(--ok-ink); border: 1px solid var(--ok-line); }
.poi-sensory__badge--warn { background: var(--warn-soft); color: var(--warn-ink); border: 1px solid var(--warn-line); }
.poi-sensory__badge--bad  { background: var(--bad-soft);  color: var(--bad-ink); border: 1px solid #f0b4bb; }
.poi-sensory__card {
  background: var(--card); border: 1px solid var(--rule); border-radius: var(--r-6);
  overflow: hidden; box-shadow: var(--sh-sm);
}
.poi-sensory__factors { padding: 8px 24px 4px; }
.poi-sensory__note {
  padding: 14px 24px; border-top: 1px solid var(--rule);
  background: var(--muted-fill); font-size: 13px; color: var(--fg-2); line-height: 1.55;
}
.poi-sensory__note strong { color: var(--navy-ink); font-weight: 600; }

/* ============================================================
   PRINT STYLESHEET
   Intended for the port guide (barcelona.html). Expands all
   tabs, hides chrome, normalises type for A4 / Letter.
   ============================================================ */
@media print {
  /* -- Hide chrome -- */
  .pg-site-nav,
  .pg-site-nav__cta,
  .pg-site-footer,
  .pg-ask,
  .port-tab-nav,
  .pg-section-link,
  .pg-map__toggle,
  [class*="carousel__btn"],
  .state-switcher,
  .pg-btn { display: none !important; }

  /* -- Expand all tab panels -- */
  .pg-tab-panel { display: block !important; }
  .pg-tab-panel + .pg-tab-panel { break-before: page; margin-top: 0; }

  /* -- Suppress box shadows + simplify cards -- */
  .pg-card,
  .pg-scroll-card,
  .pg-verdict,
  .pg-hook,
  .pg-faq { box-shadow: none !important; border-color: #ccc !important; }

  /* -- Hero: reduce height -- */
  .pg-hero__image { max-height: 200px !important; aspect-ratio: auto !important; }
  @page { margin: 18mm 16mm; }
  body { font-size: 10.5pt; color: #1a1a1a; }
  .pg-h2 { font-size: 18pt; }
  .pg-h3 { font-size: 14pt; }
  .pg-section-title { font-size: 16pt; }

  /* -- Unroll horizontal scroll carousels -- */
  .pg-scroll {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    overflow: visible !important;
    margin: 0 !important; padding: 0 !important;
  }
  .pg-scroll__item { break-inside: avoid; }

  /* -- Map canvas: replace with print placeholder -- */
  .pg-map__canvas {
    background: #f5f5f5 !important;
    height: 60px !important; min-height: 0 !important;
    aspect-ratio: auto !important;
  }
  .pg-map__canvas::after {
    content: "Interactive map. Visit cruiseport.ai for the live map";
    display: flex; align-items: center; justify-content: center;
    height: 100%; font-size: 9pt; color: #888; font-style: italic;
  }

  /* -- Show URLs on external links -- */
  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 7.5pt; color: #666;
  }
  a[href^="#"]::after,
  a[href^="javascript"]::after,
  .pg-btn::after { content: "" !important; }
}



/* ========================================================================
   LAYER 2 · V3  (ports nav dropdown, refined empty rating, ports filter
   toolbar, the full Itinerary Guide builder)
   ======================================================================== */


/* ---------------------------------------------------------------
   1. PORTS NAV DROPDOWN
   CSS-only (hover + focus-within), keyboard reachable.
   --------------------------------------------------------------- */
.pg-nav-dd { position: relative; display: inline-flex; }
.pg-nav-dd__btn {
  font-family: var(--sans); font-size: 13px; font-weight: 500;
  color: rgba(255,255,255,0.78);
  background: none; border: 0;
  padding: 6px 10px; border-bottom: 2px solid transparent;
  display: inline-flex; align-items: center; gap: 5px; cursor: pointer;
  transition: color .15s;
}
.pg-nav-dd__btn:hover,
.pg-nav-dd:focus-within .pg-nav-dd__btn { color: #fff; }
.pg-nav-dd__btn[aria-current="section"] { color: #fff; font-weight: 600; border-bottom-color: var(--gold); }
.pg-nav-dd__caret { font-size: 9px; opacity: .85; transition: transform .15s; }
.pg-nav-dd:hover .pg-nav-dd__caret,
.pg-nav-dd:focus-within .pg-nav-dd__caret { transform: rotate(180deg); }
/* invisible hover bridge so the menu doesn't drop on the gap */
.pg-nav-dd::after {
  content: ""; position: absolute; top: 100%; left: 0; right: 0; height: 12px;
  display: none;
}
.pg-nav-dd:hover::after,
.pg-nav-dd:focus-within::after { display: block; }
.pg-nav-dd__menu {
  position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%);
  min-width: 248px; background: var(--card);
  border: 1px solid var(--rule); border-top: 2px solid var(--gold);
  border-radius: var(--r-6); box-shadow: var(--sh-md);
  padding: 6px; z-index: 80;
  display: none; flex-direction: column; gap: 1px;
}
.pg-nav-dd:hover .pg-nav-dd__menu,
.pg-nav-dd:focus-within .pg-nav-dd__menu { display: flex; }
.pg-nav-dd__menu a {
  display: flex; flex-direction: column; gap: 1px;
  padding: 9px 12px; border-radius: var(--r-4);
  color: var(--navy-ink); text-decoration: none;
}
.pg-nav-dd__menu a:hover { background: var(--paper); color: var(--navy-ink); text-decoration: none; }
.pg-nav-dd__menu a strong { font-family: var(--sans); font-size: 13px; font-weight: 600; }
.pg-nav-dd__menu a span { font-size: 11px; color: var(--fg-3); line-height: 1.3; }
.pg-nav-dd__menu a[data-feat]::after {
  content: attr(data-feat); align-self: flex-start; margin-top: 3px;
  font-size: 9px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--navy-ink); background: var(--gold);
  padding: 2px 6px; border-radius: var(--r-4);
}

/* ---------------------------------------------------------------
   2. REFINED EMPTY RATING (no negative-looking empty stars)
   --------------------------------------------------------------- */
.pg-port-card__user .pg-stars--empty { display: none; }
.pg-port-card__score--none {
  font-family: var(--sans); font-size: 12px; font-weight: 600;
  color: var(--navy-soft);
  display: inline-flex; align-items: center; gap: 5px;
}
.pg-port-card__score--none::before {
  content: "✶"; color: var(--gold); font-size: 12px;
}
.pg-port-card__user:hover .pg-port-card__score--none { color: var(--gold-hover); }

/* ---------------------------------------------------------------
   3. PORTS FILTER TOOLBAR
   --------------------------------------------------------------- */
.pg-ports-toolbar {
  background: var(--card); border-bottom: 1px solid var(--rule);
  position: sticky; top: var(--nav-h); z-index: 40;
}
.pg-ports-toolbar__inner {
  max-width: var(--container); margin: 0 auto; padding: 14px 16px;
  display: flex; flex-direction: column; gap: 12px;
}
@media (min-width: 768px) { .pg-ports-toolbar__inner { padding: 16px 24px; } }
@media (min-width: 1024px){ .pg-ports-toolbar__inner { padding: 16px 32px; } }
.pg-ports-toolbar__row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pg-ports-toolbar__lbl {
  font-family: var(--sans); font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.14em; color: var(--fg-3);
  margin-right: 2px;
}
.pg-filter-pill {
  appearance: none; background: var(--paper); border: 1px solid var(--rule);
  border-radius: var(--r-4); padding: 7px 13px;
  font-family: var(--sans); font-size: 12px; font-weight: 600; color: var(--navy-ink);
  cursor: pointer; white-space: nowrap; transition: border-color .12s, background .12s, color .12s;
  min-height: 38px;
}
.pg-filter-pill:hover { border-color: var(--gold); }
.pg-filter-pill[aria-pressed="true"] { background: var(--navy); color: #fff; border-color: var(--navy); }
.pg-ports-search {
  flex: 1; min-width: 180px; max-width: 320px;
  border: 1px solid var(--rule); border-radius: var(--r-4);
  padding: 8px 12px; font-family: var(--sans); font-size: 13px; color: var(--navy-ink);
  background: var(--paper); min-height: 38px;
}
.pg-ports-search::placeholder { color: var(--fg-3); }
.pg-ports-toolbar__count { font-size: 12px; color: var(--fg-3); margin-left: auto; white-space: nowrap; }
.pg-block[hidden] { display: none; }
/* filtered mode: show all matches as a wrapping grid, hide carousel arrows */
.pg-carousel--open .pg-carousel__track { flex-wrap: wrap !important; transform: none !important; }
.pg-carousel--open .pg-carousel__btn { display: none !important; }
.pg-port-card[hidden] { display: none !important; }
.pg-ports-empty {
  max-width: var(--container); margin: 0 auto; padding: 48px 24px; text-align: center;
  color: var(--fg-2);
}
.pg-ports-empty[hidden] { display: none; }

/* ---------------------------------------------------------------
   4. ITINERARY GUIDE BUILDER
   --------------------------------------------------------------- */
.it-wrap { max-width: var(--container); margin: 0 auto; padding: 0 16px; }
@media (min-width: 768px) { .it-wrap { padding: 0 24px; } }
@media (min-width: 1024px){ .it-wrap { padding: 0 32px; } }

/* --- Selector card --- */
.it-selector {
  background: var(--card); border: 1px solid var(--rule);
  border-top: 3px solid var(--gold); border-radius: var(--r-8);
  box-shadow: var(--sh-md);
  padding: 22px; margin-top: -44px; position: relative; z-index: 5;
}
@media (min-width: 768px) { .it-selector { padding: 28px 32px; } }
.it-selector__eyebrow {
  font-family: var(--sans); font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.16em; color: var(--gold-hover);
}
.it-selector__title {
  font-family: var(--serif); font-weight: 500; font-size: 22px; color: var(--navy-ink);
  margin: 4px 0 2px; letter-spacing: -0.01em;
}
.it-selector__sub { font-size: 13px; color: var(--fg-2); line-height: 1.5; }
.it-fields {
  display: grid; grid-template-columns: 1fr; gap: 14px; margin-top: 20px;
}
@media (min-width: 760px) { .it-fields { grid-template-columns: 1fr 1fr 1fr auto; align-items: end; } }
.it-field { display: flex; flex-direction: column; gap: 6px; }
.it-field__lbl {
  font-family: var(--sans); font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.1em; color: var(--fg-3);
}
.it-field__num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 17px; height: 17px; border-radius: 50%;
  background: var(--navy); color: #fff; font-size: 10px; font-weight: 700; margin-right: 6px;
}
.it-select {
  appearance: none; -webkit-appearance: none;
  background: var(--paper) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M2 4l4 4 4-4' fill='none' stroke='%232C344C' stroke-width='1.6'/></svg>") no-repeat right 12px center;
  border: 1px solid var(--rule); border-radius: var(--r-4);
  padding: 11px 34px 11px 13px; font-family: var(--sans); font-size: 14px; color: var(--navy-ink);
  min-height: 46px; cursor: pointer; width: 100%;
}
.it-select:disabled { opacity: 0.5; cursor: not-allowed; }
.it-select:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.it-go {
  appearance: none; border: 0; border-radius: var(--r-4);
  background: var(--gold); color: var(--navy-ink);
  font-family: var(--sans); font-size: 14px; font-weight: 700;
  padding: 0 22px; min-height: 46px; cursor: pointer; white-space: nowrap;
  transition: background .12s;
}
.it-go:hover { background: var(--gold-hover); }
.it-go:disabled { opacity: 0.4; cursor: not-allowed; }
.it-selector__hint { margin-top: 14px; font-size: 12px; color: var(--fg-3); }
.it-selector__hint a { color: var(--navy-ink); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }

/* quick examples */
.it-examples { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; align-items: center; }
.it-examples__lbl { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--fg-3); }
.it-example {
  background: none; border: 1px dashed var(--rule); border-radius: var(--r-4);
  padding: 6px 11px; font-family: var(--sans); font-size: 12px; font-weight: 500; color: var(--navy-soft);
  cursor: pointer;
}
.it-example:hover { border-color: var(--gold); border-style: solid; color: var(--navy-ink); }

/* --- Results --- */
.it-results { margin-top: 36px; }
.it-results[hidden] { display: none; }
.it-summary {
  display: flex; flex-wrap: wrap; align-items: flex-start; gap: 14px 18px;
  padding-bottom: 18px; border-bottom: 1px solid var(--rule);
}
.it-summary__actions { align-self: flex-start; }
.it-summary__line { font-family: var(--sans); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; color: var(--gold-hover); }
.it-summary__ship { font-family: var(--serif); font-weight: 500; font-size: 30px; color: var(--navy-ink); letter-spacing: -0.015em; line-height: 1.05; }
@media (min-width: 768px){ .it-summary__ship { font-size: 38px; } }
.it-summary__meta { font-size: 13px; color: var(--fg-2); display: flex; flex-wrap: wrap; gap: 6px 14px; }
.it-summary__meta b { color: var(--navy-ink); font-weight: 600; }
.it-summary__actions { margin-left: auto; display: flex; gap: 8px; }
.it-save {
  appearance: none; background: #fff; border: 1px solid var(--rule); border-radius: var(--r-4);
  padding: 9px 15px; font-family: var(--sans); font-size: 12px; font-weight: 600; color: var(--navy-ink);
  cursor: pointer; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; white-space: nowrap;
}
.it-save:hover { border-color: var(--gold); }
.it-save__lock { font-size: 11px; color: var(--fg-3); }

/* --- Layout explorer switch (design-exploration control) --- */
.it-explore {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 22px 0 6px; padding: 10px 14px;
  background: var(--card); border: 1px solid var(--rule); border-radius: var(--r-6);
}
.it-explore__lbl { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--fg-3); }
.it-seg { display: inline-flex; background: #fff; border: 1px solid var(--rule); border-radius: var(--r-6); padding: 3px; gap: 2px; }
.it-seg__btn {
  appearance: none; border: 0; background: none; cursor: pointer;
  font-family: var(--sans); font-size: 12px; font-weight: 600; color: var(--navy-soft);
  padding: 7px 14px; border-radius: var(--r-4); white-space: nowrap;
}
.it-seg__btn[aria-pressed="true"] { background: var(--navy); color: #fff; }
.it-explore__desc { font-size: 12px; color: var(--fg-2); margin-left: 2px; }

/* --- The DAY BAR (shared, sticky) --- */
.it-daybar {
  position: sticky; top: var(--nav-h); z-index: 30;
  background: var(--navy); border-radius: var(--r-6);
  margin: 14px 0 0; padding: 8px;
  display: flex; gap: 6px; overflow-x: auto; scrollbar-width: thin;
}
.it-daybar::-webkit-scrollbar { height: 6px; }
.it-daybar::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.2); border-radius: 3px; }
.it-daychip {
  appearance: none; border: 0; cursor: pointer;
  flex: 0 0 138px; width: 138px;
  background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.78);
  border-radius: var(--r-4); padding: 9px 14px; text-align: left;
  display: flex; flex-direction: column; gap: 2px;
  transition: background .12s, color .12s;
}
.it-daychip:hover { background: rgba(255,255,255,0.14); color: #fff; }
.it-daychip[aria-pressed="true"] { background: var(--gold); color: var(--navy-ink); }
.it-daychip__day { font-family: var(--sans); font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; opacity: 0.85; }
.it-daychip__port { font-family: var(--serif); font-weight: 500; font-size: 15px; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.it-daychip__tag { font-size: 10px; opacity: 0.8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.it-daychip--sea .it-daychip__port { font-style: italic; opacity: 0.85; }

/* --- View visibility by layout --- */
.it-view { display: none; margin-top: 18px; }
.it-results[data-layout="A"] .it-view--a,
.it-results[data-layout="B"] .it-view--b,
.it-results[data-layout="C"] .it-view--c { display: block; }

/* ===== VARIATION A · Focused day panel ===== */
.it-panel {
  background: var(--card); border: 1px solid var(--rule); border-radius: var(--r-8);
  overflow: hidden; box-shadow: var(--sh-sm);
}
.it-panel__hero {
  position: relative; min-height: 240px; padding: 28px;
  display: flex; flex-direction: column; justify-content: flex-end;
  background: var(--navy); color: #fff;
}
.it-panel__hero::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(20,26,46,0.15) 0%, rgba(20,26,46,0.78) 100%);
}
.it-panel__hero > * { position: relative; z-index: 1; }
.it-panel__eyebrow { font-family: var(--sans); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; color: var(--gold); }
.it-panel__port { font-family: var(--serif); font-weight: 500; font-size: 40px; line-height: 1.02; letter-spacing: -0.02em; margin: 6px 0 2px; }
@media (min-width: 768px){ .it-panel__port { font-size: 54px; } }
.it-panel__country { font-size: 14px; color: rgba(255,255,255,0.82); }
.it-panel__body { padding: 24px 28px 28px; display: grid; gap: 20px; grid-template-columns: 1fr; }
@media (min-width: 860px){ .it-panel__body { grid-template-columns: 1.5fr 1fr; } }
.it-verdict__chip {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--sans); font-size: 12px; font-weight: 700;
  padding: 6px 12px; border-radius: var(--r-4); margin-bottom: 10px;
}
.it-verdict__dot { width: 8px; height: 8px; border-radius: 50%; }
.it-verdict--ok   { background: var(--ok-soft);   color: var(--ok-ink); }
.it-verdict--ok   .it-verdict__dot { background: var(--ok); }
.it-verdict--warn { background: var(--warn-soft); color: var(--warn-ink); }
.it-verdict--warn .it-verdict__dot { background: var(--warn); }
.it-verdict--bad  { background: var(--bad-soft);  color: var(--bad-ink); }
.it-verdict--bad  .it-verdict__dot { background: var(--bad); }
.it-verdict__text { font-family: var(--serif); font-size: 18px; line-height: 1.45; color: var(--navy-ink); }
.it-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--rule); border: 1px solid var(--rule); border-radius: var(--r-6); overflow: hidden; align-self: start; }
.it-fact { background: var(--card); padding: 12px 14px; }
.it-fact__lbl { font-family: var(--sans); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--fg-3); }
.it-fact__val { font-family: var(--sans); font-size: 14px; font-weight: 600; color: var(--navy-ink); margin-top: 2px; line-height: 1.3; }
.it-panel__cta { display: flex; gap: 10px; flex-wrap: wrap; padding: 0 28px 28px; }

/* Sea-day + coming-soon panel states */
.it-panel--sea .it-panel__hero { background: linear-gradient(160deg, #243049, #36507a); }
.it-state {
  padding: 40px 28px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.it-state__icon { font-size: 34px; }
.it-state__title { font-family: var(--serif); font-weight: 500; font-size: 26px; color: var(--navy-ink); }
.it-state__body { font-size: 15px; color: var(--fg-2); max-width: 460px; line-height: 1.55; }
.it-state__chip { margin-top: 6px; }

/* ===== VARIATION B · Vertical timeline rail ===== */
.it-timeline { position: relative; padding-left: 8px; }
.it-tl-item { position: relative; display: grid; grid-template-columns: 64px 1fr; gap: 16px; padding-bottom: 16px; }
.it-tl-rail { position: relative; display: flex; flex-direction: column; align-items: center; }
.it-tl-node {
  width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0;
  background: var(--navy); color: #fff; display: flex; align-items: center; justify-content: center;
  font-family: var(--sans); font-size: 11px; font-weight: 700; z-index: 2;
}
.it-tl-item--sea .it-tl-node { background: #fff; border: 1.5px dashed var(--rule); color: var(--fg-3); }
.it-tl-item--soon .it-tl-node { background: var(--muted-fill); color: var(--navy-soft); border: 1px solid var(--rule); }
.it-tl-line { position: absolute; top: 38px; bottom: -16px; width: 2px; background: var(--rule); z-index: 1; }
.it-tl-item:last-child .it-tl-line { display: none; }
.it-tl-card {
  background: var(--card); border: 1px solid var(--rule); border-radius: var(--r-6);
  padding: 16px 18px; transition: border-color .12s, box-shadow .12s; scroll-margin-top: 140px;
}
.it-tl-card:hover { border-color: var(--gold); box-shadow: var(--sh-sm); }
.it-tl-item--active .it-tl-card { border-color: var(--gold); border-left: 3px solid var(--gold); box-shadow: var(--sh-md); }
.it-tl-item--sea .it-tl-card { background: var(--muted-fill); border-style: dashed; }
.it-tl-head { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.it-tl-namerow { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.it-tl-day { font-family: var(--sans); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--fg-3); }
.it-tl-port { font-family: var(--serif); font-weight: 500; font-size: 22px; color: var(--navy-ink); line-height: 1.1; }
.it-tl-country { font-size: 12px; color: var(--fg-3); }
.it-tl-verdict { font-size: 14px; color: var(--fg-2); line-height: 1.5; margin-top: 6px; }
.it-tl-foot { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 12px; }
.it-tl-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.it-tl-link { appearance: none; background: none; border: 0; cursor: pointer; font-family: var(--sans); font-size: 12px; font-weight: 700; color: var(--navy-ink); margin-left: auto; padding: 0; }
.it-tl-link::after { content: " →"; color: var(--gold); }
.it-tl-link:hover { color: var(--gold-hover); text-decoration: none; }

/* ===== VARIATION C · Boarding-pass route ===== */
.it-passes { display: flex; gap: 14px; overflow-x: auto; padding: 4px 2px 18px; scroll-snap-type: x mandatory; }
.it-pass {
  scroll-snap-align: start; flex: 0 0 260px; cursor: pointer;
  background: var(--card); border: 1px solid var(--rule); border-radius: var(--r-8);
  overflow: hidden; transition: border-color .12s, box-shadow .12s, transform .12s; text-align: left;
  appearance: none; padding: 0; font: inherit;
}
.it-pass:hover { border-color: var(--gold); box-shadow: var(--sh-md); transform: translateY(-2px); }
.it-pass[aria-pressed="true"] { border-color: var(--gold); box-shadow: var(--sh-md); }
.it-pass__top {
  background: var(--navy); color: #fff; padding: 14px 16px;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.it-pass--sea .it-pass__top { background: linear-gradient(135deg, #243049, #36507a); }
.it-pass--soon .it-pass__top { background: var(--navy-soft); }
.it-pass__day { font-family: var(--sans); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--gold); }
.it-pass__date { font-size: 11px; color: rgba(255,255,255,0.75); font-variant-numeric: tabular-nums; }
.it-pass__perf { border-top: 1.5px dashed var(--rule); position: relative; }
.it-pass__perf::before, .it-pass__perf::after {
  content: ""; position: absolute; top: -7px; width: 12px; height: 12px; border-radius: 50%; background: var(--paper);
}
.it-pass__perf::before { left: -7px; }
.it-pass__perf::after  { right: -7px; }
.it-pass__body { padding: 16px; }
.it-pass__port { font-family: var(--serif); font-weight: 500; font-size: 24px; color: var(--navy-ink); line-height: 1.05; letter-spacing: -0.01em; }
.it-pass__country { font-size: 12px; color: var(--fg-3); margin-top: 1px; }
.it-pass__verdict { font-size: 13px; color: var(--fg-2); line-height: 1.45; margin-top: 10px; min-height: 38px; }
.it-pass__row { display: flex; align-items: center; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.it-block--cream .it-pass { background: #fff; }
/* detail under the pass strip (variation C) */
.it-pass-detail { margin-top: 16px; }

/* shared little chip */
.it-mini-chip {
  font-family: var(--sans); font-size: 11px; font-weight: 600;
  padding: 4px 9px; border-radius: var(--r-4);
  background: var(--muted-fill); color: var(--navy-soft); white-space: nowrap;
}
.it-mini-chip--ok   { background: var(--ok-soft);   color: var(--ok-ink); }
.it-mini-chip--warn { background: var(--warn-soft); color: var(--warn-ink); }
.it-mini-chip--soon { background: var(--muted-fill); color: var(--fg-3); }

/* route summary line */
.it-route { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 13px; color: var(--fg-2); margin-top: 10px; line-height: 1.7; }
.it-route b { color: var(--navy-ink); font-weight: 600; white-space: nowrap; }
.it-route > span { white-space: nowrap; }
.it-route__sep { color: var(--gold); }

/* "Find a cruise" promo (ports page) */
.it-promo {
  background: var(--navy); color: #fff; border-radius: var(--r-8);
  padding: 26px 24px; display: flex; flex-wrap: wrap; align-items: center; gap: 18px;
  border: 1px solid var(--navy);
}
.it-promo__txt { flex: 1; min-width: 240px; }
.it-promo__eyebrow { font-family: var(--sans); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.16em; color: var(--gold); }
.it-promo__title { font-family: var(--serif); font-weight: 500; font-size: 26px; line-height: 1.1; margin: 6px 0 4px; color: #fff; }
.it-promo__sub { font-size: 14px; color: rgba(255,255,255,0.82); line-height: 1.5; max-width: 540px; }

/* ---------------------------------------------------------------
   5. OPEN-GUIDE PREFERENCE + INLINE GUIDE EMBED
   --------------------------------------------------------------- */
.it-openpref { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
.it-openpref__lbl { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--fg-3); }
.it-openpref__note { font-size: 12px; color: var(--fg-3); }

.it-guide { margin-top: 18px; border: 1px solid var(--rule); border-radius: var(--r-8); overflow: hidden; background: var(--card); box-shadow: var(--sh-sm); scroll-margin-top: 96px; }
.it-guide[hidden] { display: none; }
.it-guide__bar { display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: var(--navy); color: #fff; }
.it-guide__title { font-family: var(--serif); font-weight: 500; font-size: 16px; color: #fff; }
.it-guide__title b { color: var(--gold); font-style: italic; font-weight: 400; }
.it-guide__actions { margin-left: auto; display: flex; gap: 8px; }
.it-guide__btn {
  appearance: none; background: rgba(255,255,255,0.1); color: #fff;
  border: 1px solid rgba(255,255,255,0.25); border-radius: var(--r-4);
  padding: 8px 13px; font-family: var(--sans); font-size: 12px; font-weight: 600; cursor: pointer; min-height: 36px;
}
.it-guide__btn:hover { background: rgba(255,255,255,0.2); }
.it-guide__frame { width: 100%; height: auto; min-height: 90vh; border: 0; display: block; background: var(--paper); }
.it-save--on { border-color: var(--gold); background: var(--muted-fill); color: var(--navy-ink); }

/* ports toolbar dropdowns */
.pg-ports-select { max-width: 210px; min-height: 40px; padding-top: 9px; padding-bottom: 9px; font-size: 13px; }

/* ---------------------------------------------------------------
   8. ASK DOCK · clearer close button + Esc/backdrop
   --------------------------------------------------------------- */
/* .pg-ask__close conflict resolved: merged into the one base rule above,
   no !important needed. v6. */
.pg-ask__backdrop {
  position: fixed; inset: 0; background: rgba(26,32,54,0.32); z-index: 59; border: 0; display: none;
}
.pg-ask__backdrop.is-open { display: block; }
@media (min-width: 768px) { .pg-ask__backdrop.is-open { display: none; } }

/* ---------------------------------------------------------------
   9. PORT-GUIDE TAB BAR · side scroll arrows
   --------------------------------------------------------------- */
.port-tab-nav__arrow {
  position: absolute; top: 0; bottom: 0; width: 44px; z-index: 6;
  border: 0; cursor: pointer; display: none; align-items: center; justify-content: center;
  font-size: 20px; color: var(--navy-ink); padding: 0;
}
.port-tab-nav.has-overflow .port-tab-nav__arrow { display: flex; }
.port-tab-nav__arrow--prev { left: 0; background: linear-gradient(90deg, #fff 60%, rgba(255,255,255,0)); justify-content: flex-start; padding-left: 10px; }
.port-tab-nav__arrow--next { right: 0; background: linear-gradient(270deg, #fff 60%, rgba(255,255,255,0)); justify-content: flex-end; padding-right: 10px; }
.port-tab-nav__arrow[disabled] { opacity: 0; pointer-events: none; }
.port-tab-nav__arrow:focus-visible { outline: 3px solid var(--gold); outline-offset: -3px; }

/* ---------------------------------------------------------------
   10. SCROLL-CARD ALIGNMENT · equal-height cards, chips on a common
   baseline. `height:100%` on the card was fighting the grid's
   default stretch, so cards sized to their own content (varying
   description length) and the chip/meta rows landed at different
   heights. Let grid stretch own the height; keep meta pinned to the
   bottom (margin-top:auto) so every card's chips share one baseline.
   --------------------------------------------------------------- */
.pg-scroll { align-items: stretch; }
.pg-scroll-card { height: auto; }
.pg-scroll-card__meta { margin-top: auto; }

/* ---------------------------------------------------------------
   11. ALIGNMENT SYSTEM (2026-05-30)
   Goal: across any row of cards, the same regions sit on the same
   baseline · name, then description, then ratings, then button/link.
   Cards are already equal-height (grid/flex stretch) with the action
   pinned to the bottom (margin-top:auto). The missing piece was
   variable-height TITLES pushing everything below them out of line.
   Fix: reserve a consistent height for headings that commonly wrap.
   --------------------------------------------------------------- */

/* Port cards (home + ports): names range from one word ("Bergen") to
   two lines ("Palma de Mallorca"). Reserve two lines so the hook,
   ratings and button line up across every card in the row. */
.pg-port-card__name {
  min-height: calc(1.2em * 2);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* "When to visit" / hook grids: reserve two title lines so the
   bodies below them align across the 2- and 3-column rows. */
.pg-hooks .pg-hook__title { min-height: calc(1.2em * 2); }

/* Quick-grid "at a glance" cards: reserve two value lines so the
   "See …" links sit on one baseline across the grid. */
.pg-quick-card__value { min-height: calc(1.4em * 2); }

/* ---------------------------------------------------------------
   12. ACCESSIBILITY (2026-05-30)
   --------------------------------------------------------------- */

/* Contrast fix: the quick-card link was gold (#C0A558) on white,
   ~2.2:1 · below WCAG AA for text. Match the established
   .pg-section-link pattern: navy text, gold arrow. */
/* (quick-card link colour now lives in the folded v6 rule, no !important) */

/* Guarantee a 44px minimum hit target on icon-only / compact controls
   that did not already meet it. */
.pg-nav-dd__menu a { min-height: 40px; }
.it-seg__btn, .pg-filter-pill, .pg-ports-select { min-height: 40px; }

/* Make the focus ring unmistakable on the dark nav (gold on navy can
   read low); thicken + offset so it never sits flush against text. */
.pg-site-nav__link:focus-visible,
.pg-nav-dd__btn:focus-visible,
.pg-site-nav__cta:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; border-radius: 3px; }

/* ---------------------------------------------------------------
   13. READABILITY (2026-05-30) · raise the small-text floor.
   Several micro-labels sat at 9-10px. Lift content-bearing labels to
   at least 11px so they stay legible (esp. the port-card rating
   labels, which appear on every card).
   --------------------------------------------------------------- */
.pg-port-card__rating-lbl { font-size: 11px !important; min-width: 54px; }
.pg-scroll-card__tile-lbl,
.pg-quick-card__label,
.pg-hero__fact__label,
.pg-app-badge__lbl,
.it-daychip__day,
.pg-pin__label { font-size: 11px !important; }
/* (.pg-port-card__score--none font-size folded into its rule above, 12px) */

/* ---------------------------------------------------------------
   14. EMPTY-IMAGE STATE · v6 update: the branded no-photo plate.
   Images are empty estate-wide, so this is the norm, not an
   exception. No apologetic copy: a gold glyph on the navy media
   plate with the same faint stripe as the sight-page tile. Matches
   .poi-imgfall. The "Image coming soon" text node is collapsed
   (font-size:0) so every existing instance upgrades without markup
   edits; the binder still swaps in a real photo when one exists.
   --------------------------------------------------------------- */
.pg-media-soon {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: transparent; font-size: 0; letter-spacing: 0;
}
.pg-media-soon::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: repeating-linear-gradient(135deg, rgba(255,255,255,0.03) 0 2px, transparent 2px 16px);
}
.pg-media-soon svg {
  width: 30px; height: 30px; flex-shrink: 0; opacity: 0.92;
  color: var(--gold); position: relative; z-index: 1;
}
.pg-port-card__media, .pg-scroll-card__media { position: relative; }

/* ---------------------------------------------------------------
   15. PORT-TABS BRIEF (2026-05-30)
   In-tab maps collapsed to a CTA (decision 2). Full map at /ports/:slug/map.
   --------------------------------------------------------------- */
.pg-map-cta {
  display: flex; align-items: center; gap: 16px;
  background: var(--card); border: 1px solid var(--rule); border-radius: var(--r-8);
  padding: 18px 20px; text-decoration: none; transition: border-color .15s, box-shadow .15s;
}
.pg-map-cta:hover { border-color: var(--gold); box-shadow: var(--sh-sm); text-decoration: none; }
.pg-map-cta__icon { flex-shrink: 0; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; color: var(--navy); }
.pg-map-cta__icon svg { width: 26px; height: 26px; }
.pg-map-cta__text { flex: 1; display: flex; flex-direction: column; gap: 2px; font-size: 14px; color: var(--fg-2); line-height: 1.4; }
.pg-map-cta__text strong { font-family: var(--serif); font-weight: 500; font-size: 18px; color: var(--navy-ink); }
.pg-map-cta__arrow { flex-shrink: 0; font-size: 20px; color: var(--gold-hover); }
.explore-categories { display: contents; }

/* ---------------------------------------------------------------
   16. FIELD-MAP ALIGNMENT (2026-05-30) · new slot styles
   Added so every "NO SLOT YET" column in DESIGNER-FIELD-MAP.md has a home.
   Binder fills data-field / data-section / data-show-if; these are visual only.
   --------------------------------------------------------------- */

/* Generic chip row (alias of .pg-chips, named to match the SLOTS handback) */
.pg-chips-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.pg-chip--key { background: var(--navy); color: #fff; }

/* Evidence line under a score row in the accessibility grid */
.pg-rating__summary {
  grid-column: 1 / -1;
  margin: 2px 0 0; font-size: 13px; line-height: 1.5;
  color: var(--fg-2);
}

/* Repeatable 12-cell hourly crowd heatmap (replaces the fixed single row) */
.pg-heatmap__grid {
  display: grid; grid-template-columns: repeat(12, 1fr); gap: 3px;
}
.pg-heatmap__cell--grid {
  aspect-ratio: 1 / 1.25; flex-direction: column; gap: 2px;
  font-size: 10px; line-height: 1.1;
}
.pg-heatmap__cell-hour { font-size: 9px; opacity: 0.85; font-weight: 600; }
@media (max-width: 700px) {
  .pg-heatmap__grid { grid-template-columns: repeat(6, 1fr); }
}

/* Simple link list (provider links, operator links) */
.pg-link-list { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.pg-link-list a { color: var(--navy-ink); font-size: 14px; font-weight: 500; text-decoration: none; border-bottom: 1px solid var(--gold); padding-bottom: 1px; }
.pg-link-list a:hover { color: var(--gold-hover); }

/* Award / scheme badge row */
.pg-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.pg-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px; border-radius: var(--r-6);
  background: var(--muted-fill); border: 1px solid var(--rule);
  font-size: 13px; font-weight: 600; color: var(--navy-ink);
}

/* Eyebrow used outside cards (sub-section labels) */
.pg-subhead-eyebrow {
  font-family: var(--sans); font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.1em; color: var(--fg-3);
  margin: 0 0 4px;
}

/* ---------------------------------------------------------------
   7. NEWS FEED · centred, clean meta row (was left-heavy)
   --------------------------------------------------------------- */
.pg-newsfeed__item { grid-template-columns: 1fr !important; gap: 10px !important; }
.pg-newsfeed__item > div:first-child { display: flex; align-items: center; gap: 10px; }
.pg-newsfeed__date { margin: 0; }
.pg-newsfeed__item .pg-newsfeed__type { margin-top: 0; }

/* ---------------------------------------------------------------
   6. CALM MOTION · respect reduced-motion (ASD / vestibular)
   --------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  .it-daychip, .it-pass, .it-tl-card, .it-go, .it-seg__btn, .it-save,
  .pg-port-card, .pg-carousel__track, .pg-filter-pill, .it-guide__btn,
  .pg-nav-dd__caret, .pg-nav-dd__menu { transition: none !important; }
  .it-pass:hover, .pg-port-card:hover { transform: none !important; }
}


/* ---------------------------------------------------------------
   17. HERO TEXT PROTECTION (11 Jun 2026)
   Legibility must not depend on which photo loads. Left-weighted
   scrim behind the text column, slightly lifted eyebrow gold,
   soft text shadow. _styles.css untouched.
   --------------------------------------------------------------- */
/* .pg-home-hero background conflict resolved: folded into the base rule
   above (scrim kept, image variabilised to --hero-img). v6. */
.pg-home-hero__eyebrow { font-size: 12px; color: #E3CC8B; text-shadow: 0 1px 10px rgba(20,26,46,0.55); }
.pg-home-hero__title, .pg-home-hero__sub { text-shadow: 0 2px 22px rgba(20,26,46,0.5); }
.pg-home-hero__sub { color: rgba(255,255,255,0.93); }

/* Same protection for the page-head hero variant (Ports, Regions, News) */
.pg-page-head--hero {
  background:
    linear-gradient(96deg, rgba(20,26,46,0.88) 0%, rgba(20,26,46,0.74) 40%, rgba(20,26,46,0.5) 72%, rgba(20,26,46,0.4) 100%),
    linear-gradient(180deg, rgba(20,26,46,0.3) 0%, rgba(20,26,46,0.72) 100%),
    var(--hero-img) center/cover no-repeat,
    var(--navy);
}
.pg-page-head--hero .pg-eyebrow { color: #E3CC8B; text-shadow: 0 1px 10px rgba(20,26,46,0.55); }
.pg-page-head--hero h1.pg-h1, .pg-page-head--hero .pg-lede { text-shadow: 0 2px 22px rgba(20,26,46,0.5); }

/* "Rate now" is a real destination now (sign in to rate) */
.pg-rate-link { color: inherit; text-decoration: underline; text-underline-offset: 2px; text-decoration-color: rgba(44,52,76,0.35); }
.pg-rate-link:hover, .pg-rate-link:focus-visible { text-decoration-color: currentColor; }



/* ========================================================================
   LAYER 3 · V4  (provenance badges, port arrival logistics, full POI
   category template, the dated revision batches)
   ======================================================================== */


/* ---------------------------------------------------------------
   1. PROVENANCE / SOURCE-TYPE BADGE
   Every fact can carry where it came from. ESTIMATED is the one that
   MUST read as an estimate, never as measured fact (locked rule).
   Use inline next to a value, or in a card eyebrow.
   --------------------------------------------------------------- */
.pg-prov {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--sans); font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em;
  padding: 2px 7px 2px 6px; border-radius: var(--r-4);
  background: var(--muted-fill); color: var(--navy-soft);
  border: 1px solid var(--rule); white-space: nowrap; vertical-align: middle;
}
.pg-prov__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--navy-soft); flex-shrink: 0; }
/* Sourced + measured: verified-grade (LOOKUP / SCRAPED / REGISTRY) */
.pg-prov--sourced { background: var(--ok-soft); color: var(--ok-ink); border-color: var(--ok-line); }
.pg-prov--sourced .pg-prov__dot { background: var(--ok); }
/* Deterministic from data we hold (COMPUTED) */
.pg-prov--computed { background: var(--info-soft); color: var(--info); border-color: var(--info-line); }
.pg-prov--computed .pg-prov__dot { background: var(--info); }
/* AI-inferred, shown AS AN ESTIMATE (ESTIMATED) */
.pg-prov--estimate { background: var(--warn-soft); color: var(--warn-ink); border-color: var(--warn-line); }
.pg-prov--estimate .pg-prov__dot { background: var(--warn); }

/* A whole-section "these are estimates" note */
.pg-est-note {
  display: flex; align-items: flex-start; gap: 9px;
  margin: 10px 0 0; padding: 10px 13px;
  background: var(--warn-soft); border: 1px solid var(--warn-line); border-radius: var(--r-6);
  font-size: 13px; line-height: 1.45; color: var(--warn-ink);
}
.pg-est-note__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--warn); flex-shrink: 0; margin-top: 4px; }
.pg-est-note b { color: #5e3a0c; }

/* Provenance legend strip (shown once where estimates appear) */
.pg-prov-legend { display: flex; flex-wrap: wrap; gap: 8px 14px; margin-top: 12px; }
.pg-prov-legend__item { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: var(--fg-2); }

/* ---------------------------------------------------------------
   2. PORT ARRIVAL LOGISTICS (PART A.4) · the headline addition.
   Lives at the top of the Getting around tab.
   --------------------------------------------------------------- */
.pg-arrival { display: flex; flex-direction: column; gap: 16px; }

/* Berth-type banner: the single most-asked question. */
.pg-berth {
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px;
  background: var(--navy); color: #fff; border-radius: var(--r-8);
  padding: 20px 24px; position: relative; overflow: hidden;
}
.pg-berth__icon {
  width: 46px; height: 46px; flex-shrink: 0; border-radius: var(--r-6);
  background: rgba(212,184,106,0.18); color: var(--gold);
  display: flex; align-items: center; justify-content: center;
}
.pg-berth__icon svg { width: 26px; height: 26px; }
.pg-berth__main { flex: 1; min-width: 200px; }
.pg-berth__label { font-family: var(--sans); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; color: var(--gold); }
.pg-berth__value { font-family: var(--serif); font-weight: 500; font-size: 26px; line-height: 1.1; margin: 3px 0 0; }
.pg-berth__value em { font-style: italic; color: var(--gold); }
.pg-berth__note { font-size: 14px; color: rgba(255,255,255,0.82); line-height: 1.5; margin: 6px 0 0; max-width: 56ch; }
.pg-berth__flag {
  display: inline-flex; align-items: center; gap: 7px; align-self: flex-start;
  font-family: var(--sans); font-size: 12px; font-weight: 700;
  padding: 7px 13px; border-radius: var(--r-4);
  background: var(--warn); color: #2a1a02;
}

/* Pier-to-centre stat row */
.pg-arrival-stats {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px;
  background: var(--rule); border: 1px solid var(--rule);
  border-radius: var(--r-8); overflow: hidden;
}
@media (min-width: 620px) { .pg-arrival-stats { grid-template-columns: repeat(4, 1fr); } }
.pg-arrival-stat { background: var(--card); padding: 16px 18px; display: flex; flex-direction: column; gap: 4px; }
.pg-arrival-stat__lbl { font-family: var(--sans); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--fg-3); }
.pg-arrival-stat__val { font-family: var(--serif); font-weight: 500; font-size: 24px; color: var(--navy-ink); line-height: 1.1; }
.pg-arrival-stat__val small { font-family: var(--sans); font-size: 13px; font-weight: 600; color: var(--fg-2); }
.pg-arrival-stat__sub { font-size: 11px; color: var(--fg-3); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

/* Three "into the centre" option cards (shuttle / taxi / public transport) */
.pg-arrival-options { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 760px) { .pg-arrival-options { grid-template-columns: repeat(3, 1fr); } }
.pg-opt {
  background: var(--card); border: 1px solid var(--rule); border-radius: var(--r-8);
  padding: 18px 20px; display: flex; flex-direction: column; gap: 8px;
}
.pg-opt__head { display: flex; align-items: center; gap: 10px; }
.pg-opt__icon { width: 32px; height: 32px; flex-shrink: 0; color: var(--navy); display: flex; align-items: center; justify-content: center; }
.pg-opt__icon svg { width: 22px; height: 22px; }
.pg-opt__name { font-family: var(--serif); font-weight: 500; font-size: 18px; color: var(--navy-ink); }
.pg-opt__price { font-family: var(--sans); font-weight: 700; font-size: 15px; color: var(--navy-ink); }
.pg-opt__price--free { color: var(--ok-ink); }
.pg-opt__body { font-size: 14px; color: var(--fg-2); line-height: 1.5; }
.pg-opt__row { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 13px; padding-top: 8px; border-top: 1px solid var(--rule); }
.pg-opt__row-lbl { color: var(--fg-3); font-weight: 500; }
.pg-opt__row-val { color: var(--navy-ink); font-weight: 600; text-align: right; }

/* Terminal-services strip (left luggage, wifi, atm, clearance) */
.pg-arrival-services {
  display: grid; grid-template-columns: 1fr; gap: 12px;
  background: var(--muted-fill); border: 1px solid var(--rule);
  border-radius: var(--r-8); padding: 18px 20px;
}
@media (min-width: 620px) { .pg-arrival-services { grid-template-columns: repeat(2, 1fr); } }
.pg-svc { display: flex; gap: 11px; align-items: flex-start; }
.pg-svc__icon { width: 30px; height: 30px; flex-shrink: 0; color: var(--navy); display: flex; align-items: center; justify-content: center; }
.pg-svc__icon svg { width: 20px; height: 20px; }
.pg-svc__lbl { font-family: var(--sans); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--fg-3); }
.pg-svc__val { font-size: 14px; color: var(--navy-ink); font-weight: 500; line-height: 1.4; margin-top: 1px; }

/* Topical flags (PART A.5) · chip row of port-shape signals */
/* 6 chips: 2-col on mobile, 3-col on tablet+, all equal width */
.pg-topical {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
@media (min-width: 640px) {
  .pg-topical { grid-template-columns: repeat(3, 1fr); }
}
.pg-topical__chip {
  display: flex; align-items: flex-start; gap: 7px;
  width: 100%;
  font-family: var(--sans); font-size: 13px; font-weight: 600; color: var(--navy-ink);
  background: var(--card); border: 1px solid var(--rule); border-radius: var(--r-6);
  padding: 9px 13px;
}
.pg-topical__chip svg { width: 16px; height: 16px; color: var(--gold-hover); flex-shrink: 0; }
.pg-topical__chip b { font-weight: 700; }

/* ---------------------------------------------------------------
   3. POI CATEGORY TEMPLATE (PART B)
   Universal core renders for every POI; one category block renders
   to match pois.category. The preview switcher is a design-review
   control only (binder renders the single matching block).
   --------------------------------------------------------------- */

/* Preview switcher (design-review affordance, mirrors itinerary explorer) */
.poi-switch {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 18px 0 22px; padding: 10px 14px;
  background: var(--card); border: 1px solid var(--rule); border-radius: var(--r-6);
}
.poi-switch__lbl { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--fg-3); }
.poi-switch__seg { display: flex; flex-wrap: wrap; gap: 4px; }
.poi-switch__btn {
  appearance: none; border: 1px solid var(--rule); background: var(--paper);
  cursor: pointer; font-family: var(--sans); font-size: 12px; font-weight: 600; color: var(--navy-soft);
  padding: 7px 13px; border-radius: var(--r-4); min-height: 38px;
}
.poi-switch__btn:hover { border-color: var(--gold); color: var(--navy-ink); }
.poi-switch__btn[aria-pressed="true"] { background: var(--navy); color: #fff; border-color: var(--navy); }
.poi-switch__note { font-size: 11px; color: var(--fg-3); margin-left: auto; }

/* category blocks: only the active one shows in the preview */
.poi-cat-block { display: none; }
.poi-cat-block.is-active { display: block; }

/* universal-core "amenity feature" chips (schema.org amenityFeature) */
.poi-amenities { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
.poi-amenity {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--sans); font-size: 13px; font-weight: 600; color: var(--navy-ink);
  background: var(--muted-fill); border: 1px solid var(--rule); border-radius: var(--r-4);
  padding: 6px 11px;
}
.poi-amenity--ok { background: var(--ok-soft); color: var(--ok-ink); border-color: var(--ok-line); }
.poi-amenity--ok svg { color: #2F7A4A; }
.poi-amenity--warn { background: var(--warn-soft); color: var(--warn-ink); border-color: var(--warn-line); }
.poi-amenity svg { width: 14px; height: 14px; flex-shrink: 0; }

/* dwell-time + sensory tier mini-stat block (universal core, estimated) */
.poi-core-stats {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px;
  background: var(--rule); border: 1px solid var(--rule); border-radius: var(--r-6);
  overflow: hidden; margin-top: 14px;
}
@media (min-width: 560px) { .poi-core-stats { grid-template-columns: repeat(4, 1fr); } }
.poi-core-stat { background: var(--card); padding: 13px 15px; display: flex; flex-direction: column; gap: 3px; }
.poi-core-stat__lbl { display: flex; align-items: center; gap: 6px; font-family: var(--sans); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.09em; color: var(--fg-3); }
.poi-core-stat__val { font-family: var(--serif); font-weight: 500; font-size: 18px; color: var(--navy-ink); line-height: 1.1; }

/* category fact grid (reused per category) */
.poi-cat-facts {
  display: grid; grid-template-columns: 1fr; gap: 1px;
  background: var(--rule); border: 1px solid var(--rule); border-radius: var(--r-6);
  overflow: hidden;
}
@media (min-width: 560px) { .poi-cat-facts { grid-template-columns: 1fr 1fr; } }
.poi-cat-fact { background: var(--card); padding: 12px 16px; display: flex; flex-direction: column; gap: 3px; }
.poi-cat-fact__lbl { display: flex; align-items: center; gap: 6px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--fg-3); }
.poi-cat-fact__val { font-size: 14px; font-weight: 500; color: var(--navy-ink); line-height: 1.4; }

/* join-keys / provenance footer (universal core) */
.poi-provenance {
  margin-top: 16px; padding: 14px 16px;
  background: var(--muted-fill); border: 1px solid var(--rule); border-radius: var(--r-6);
}
.poi-provenance__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.poi-provenance__lbl { font-family: var(--sans); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--fg-3); }
.poi-provenance__keys { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.poi-provenance__key {
  font-family: var(--mono, 'JetBrains Mono', monospace); font-size: 11px; color: var(--navy-soft);
  background: var(--card); border: 1px solid var(--rule); border-radius: var(--r-4); padding: 4px 9px;
}
.poi-provenance__key b { color: var(--navy-ink); font-weight: 600; }
.poi-provenance__conf { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: var(--fg-2); }
.poi-provenance__bar { width: 78px; height: 6px; border-radius: var(--r-pill); background: var(--rule); overflow: hidden; }
.poi-provenance__bar i { display: block; height: 100%; background: var(--ok); border-radius: var(--r-pill); }

/* section sub-label that can hold a provenance badge inline */
.poi-section__lbl-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.poi-section__lbl-row .poi-section__lbl { margin-bottom: 0; }

/* Conditions strip: the levels are DYNAMIC, computed for the visitor's
   actual call day from live signals (ships in port, school holidays,
   season, day of week). This frames why today reads busier or quieter
   than the baseline. COMPUTED from the cruise call schedule + calendars. */
.poi-cond { margin-bottom: 16px; padding: 13px 15px; background: var(--muted-fill); border: 1px solid var(--rule); border-radius: var(--r-6); }
.poi-cond__head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.poi-cond__title { font-family: var(--sans); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--fg-3); display: inline-flex; align-items: center; gap: 7px; }
.poi-cond__date { font-family: var(--sans); font-size: 12px; font-weight: 600; color: var(--navy-ink); }
.poi-cond__verdict { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-family: var(--sans); font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: var(--r-4); }
.poi-cond__verdict svg { width: 13px; height: 13px; }
.poi-cond__verdict--up   { background: var(--warn-soft); color: var(--warn-ink); }
.poi-cond__verdict--down { background: var(--ok-soft); color: var(--ok-ink); }
.poi-cond__verdict--flat { background: var(--card); color: var(--fg-2); border: 1px solid var(--rule); }
.poi-cond__chips { display: flex; flex-wrap: wrap; gap: 7px; }
.poi-cond__chip { display: inline-flex; align-items: center; gap: 6px; font-family: var(--sans); font-size: 12px; font-weight: 600; padding: 6px 10px; border-radius: var(--r-4); background: var(--card); border: 1px solid var(--rule); color: var(--navy-ink); }
.poi-cond__chip svg { width: 14px; height: 14px; flex-shrink: 0; }
.poi-cond__chip .poi-cond__arrow { font-weight: 700; font-size: 13px; line-height: 1; }
.poi-cond__chip[data-dir="up"]   { background: var(--warn-soft); border-color: var(--warn-line); color: var(--warn-ink); }
.poi-cond__chip[data-dir="down"] { background: var(--ok-soft); border-color: var(--ok-line); color: var(--ok-ink); }
.poi-cond__chip[data-dir="flat"] { color: var(--fg-2); }

@media (prefers-reduced-motion: reduce) {
  .poi-switch__btn, .pg-opt, .pg-topical__chip { transition: none !important; }
}

/* ---------------------------------------------------------------
   3b. ENVIRONMENT & SENSORY PANEL  (FIELD-MAP-LOCKED PART B, universal core)
   Bug fix: a single "Sensory: Low" is misleading because crowds, noise,
   queues and heat move through the port day. We split the one tier into
   FIVE rated dimensions (Sensory / Noise / Queues / Heat / Crowds), each
   Low / Medium / High, PLUS a crowd-by-time strip (COMPUTED from cruise
   call overlap) so "low overall" never hides a 2pm spike.
   Source tables (new): poi_environment (tiers, ESTIMATED) +
   poi_crowd_by_time (per time-bucket level, COMPUTED).
   Never colour-only: each level carries its word and a filled-segment
   position (brief accessibility rule).
   --------------------------------------------------------------- */
.poi-env {
  margin-top: 16px; padding: 18px 20px;
  background: var(--card); border: 1px solid var(--rule); border-radius: var(--r-8);
}
.poi-env__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.poi-env__title { font-family: var(--serif); font-weight: 500; font-size: 18px; color: var(--navy-ink); display: flex; align-items: center; gap: 9px; }
.poi-env__legend { display: inline-flex; gap: 12px; }
.poi-env__legend span { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; color: var(--fg-3); }
.poi-env__legend i { width: 9px; height: 9px; border-radius: 2px; }
.poi-env__legend .lo { background: var(--ok); }
.poi-env__legend .me { background: var(--warn); }
.poi-env__legend .hi { background: var(--bad); }

.poi-env__meters { display: grid; grid-template-columns: 1fr; gap: 13px; }
@media (min-width: 560px) { .poi-env__meters { grid-template-columns: 1fr 1fr; gap: 14px 30px; } }
.poi-meter__head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.poi-meter__icon { width: 16px; height: 16px; color: var(--fg-2); flex-shrink: 0; }
.poi-meter__name { font-family: var(--sans); font-size: 13px; font-weight: 600; color: var(--navy-ink); }
.poi-meter__val { margin-left: auto; font-family: var(--sans); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--fg-3); }
.poi-meter__track { display: flex; gap: 4px; }
.poi-meter__seg { height: 7px; flex: 1; border-radius: 2px; background: var(--rule); }
.poi-meter[data-level="low"]    .poi-meter__val { color: var(--ok-ink); }
.poi-meter[data-level="low"]    .poi-meter__seg:nth-child(1) { background: var(--ok); }
.poi-meter[data-level="medium"] .poi-meter__val { color: var(--warn-ink); }
.poi-meter[data-level="medium"] .poi-meter__seg:nth-child(-n+2) { background: var(--warn); }
.poi-meter[data-level="high"]   .poi-meter__val { color: var(--bad); }
.poi-meter[data-level="high"]   .poi-meter__seg { background: var(--bad); }

/* Crowd-by-time strip: the honest time curve */
.poi-crowd { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--rule); }
.poi-crowd__head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.poi-crowd__title { font-family: var(--sans); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--fg-3); }
.poi-crowd__strip { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; align-items: end; }
.poi-crowd__slot { display: flex; flex-direction: column; gap: 6px; align-items: center; text-align: center; }
.poi-crowd__bar { width: 100%; height: 38px; border-radius: var(--r-4); background: var(--muted-fill); display: flex; align-items: flex-end; overflow: hidden; }
.poi-crowd__fill { width: 100%; border-radius: var(--r-4) var(--r-4) 0 0; }
.poi-crowd__slot[data-level="low"]    .poi-crowd__fill { height: 34%; background: var(--ok); }
.poi-crowd__slot[data-level="medium"] .poi-crowd__fill { height: 67%; background: var(--warn); }
.poi-crowd__slot[data-level="high"]   .poi-crowd__fill { height: 100%; background: var(--bad); }
.poi-crowd__slot[data-level="peak"]   .poi-crowd__fill { height: 100%; background: var(--bad); }
.poi-crowd__slot[data-peak="1"] .poi-crowd__bar { outline: 2px solid var(--bad); outline-offset: 1px; }
.poi-crowd__time { font-size: 10px; font-weight: 600; color: var(--fg-3); }
.poi-crowd__lvl  { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; }
.poi-crowd__slot[data-level="low"]    .poi-crowd__lvl { color: var(--ok-ink); }
.poi-crowd__slot[data-level="medium"] .poi-crowd__lvl { color: var(--warn-ink); }
.poi-crowd__slot[data-level="high"]   .poi-crowd__lvl { color: var(--bad); }
.poi-crowd__note {
  display: flex; align-items: flex-start; gap: 9px; margin: 14px 0 0; padding: 11px 13px;
  background: var(--info-soft); border: 1px solid var(--info-line); border-radius: var(--r-6);
  font-size: 13px; line-height: 1.5; color: var(--info);
}
.poi-crowd__note b { color: #143a66; }
.poi-crowd__note-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--info); flex-shrink: 0; margin-top: 4px; }

/* --- 12. EMBEDDED GUIDE: when a port guide is loaded inside the itinerary
   inline iframe (?embed=1), hide the site chrome so only the guide shows. */
html.is-embed .pg-site-nav,
html.is-embed .pg-site-footer,
html.is-embed .pg-skip { display: none !important; }
html.is-embed body { background: var(--paper); }

/* --- 12b. POI DRAWER AS FULL-GUIDE FRAME -------------------------
   The slide-out mirrors poi-detail.html in an iframe, with a slim bar
   (close + title + open-in-new-tab) above it. */
.pg-poi-drawer--guide { display: flex; flex-direction: column; padding: 0; }
.pg-poi-drawer__bar { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--rule); background: var(--card); flex-shrink: 0; }
.pg-poi-drawer--guide .pg-poi-drawer__close { position: static; width: 32px; height: 32px; flex-shrink: 0; font-size: 22px; line-height: 1; }
.pg-poi-drawer__bar-title { flex: 1; min-width: 0; font-family: var(--serif); font-weight: 500; font-size: 16px; color: var(--navy-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pg-poi-drawer__newtab { display: inline-flex; align-items: center; gap: 6px; font-family: var(--sans); font-size: 12px; font-weight: 600; color: var(--fg-2); text-decoration: none; padding: 7px 11px; border: 1px solid var(--rule); border-radius: var(--r-4); white-space: nowrap; flex-shrink: 0; }
.pg-poi-drawer__newtab:hover { border-color: var(--gold); color: var(--navy-ink); }
.pg-poi-drawer__newtab svg { width: 13px; height: 13px; }
.pg-poi-drawer__frame { flex: 1; width: 100%; border: 0; background: var(--paper); display: block; }
@media (max-width: 560px) { .pg-poi-drawer__newtab span { display: none; } }

/* ===============================================================
   v4 REVISION BATCH (2026-06-02) · card sensory pill, 12-month
   weather, day-planner routes + print, age-group pills, what's-on
   alignment, practical-with-kids cleanup, timeline stop numbers.
   =============================================================== */

/* --- 4. SENSORY PILL + POPOVER (cards) -------------------------
   "Sensory" on a card shows a single synthesised tier (the average
   of sensory/noise/queue/crowd). Click to reveal the breakdown.
   Uses <details>/<summary> so it needs no JS and is keyboard-usable. */
.sx { position: relative; display: inline-block; }
.sx > summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--sans); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
  padding: 4px 9px; border-radius: var(--r-4); border: 1px solid var(--rule); background: var(--card);
  min-height: 28px; color: var(--navy-soft);
}
.sx > summary::-webkit-details-marker { display: none; }
.sx > summary:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.sx__dot { width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0; }
.sx__caret { width: 12px; height: 12px; transition: transform 0.15s ease; color: var(--fg-3); }
.sx[open] > summary .sx__caret { transform: rotate(180deg); }
.sx[data-avg="low"]    .sx__dot { background: var(--ok); }
.sx[data-avg="medium"] .sx__dot { background: var(--warn); }
.sx[data-avg="high"]   .sx__dot { background: var(--bad); }
.sx[data-avg="low"]    > summary { border-color: var(--ok-line); color: var(--ok-ink); }
.sx[data-avg="medium"] > summary { border-color: var(--warn-line); color: var(--warn-ink); }
.sx[data-avg="high"]   > summary { border-color: var(--bad-line); color: var(--bad); }
.sx__pop {
  position: absolute; z-index: 30; top: calc(100% + 6px); left: 0; width: 230px;
  background: var(--card); border: 1px solid var(--rule); border-radius: var(--r-6);
  box-shadow: var(--sh-md); padding: 12px 13px;
}
.sx__pop-head { font-family: var(--sans); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--fg-3); margin-bottom: 9px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sx__row { display: grid; grid-template-columns: 64px 1fr auto; align-items: center; gap: 8px; margin-bottom: 7px; }
.sx__row:last-child { margin-bottom: 0; }
.sx__row-lbl { font-size: 11px; font-weight: 600; color: var(--navy-ink); }
.sx__row-track { display: flex; gap: 3px; }
.sx__row-seg { height: 6px; flex: 1; border-radius: 2px; background: var(--rule); }
.sx__row[data-level="low"]    .sx__row-seg:nth-child(1)       { background: var(--ok); }
.sx__row[data-level="medium"] .sx__row-seg:nth-child(-n+2)    { background: var(--warn); }
.sx__row[data-level="high"]   .sx__row-seg                    { background: var(--bad); }
.sx__row-val { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--fg-3); }

/* --- 5. 12-MONTH WEATHER --------------------------------------- */
.wx12 { margin-top: 16px; }
.wx12__legend { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 14px; }
.wx12__legend span { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; color: var(--fg-3); }
.wx12__legend i { width: 12px; height: 12px; border-radius: 3px; }
.wx12__legend .hi { background: var(--gold); }
.wx12__legend .lo { background: var(--navy); }
.wx12__legend .rn { background: #7CA8D6; }
.wx12__grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 4px; align-items: end; }
.wx12__col { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.wx12__col--best .wx12__month { color: var(--gold-hover); font-weight: 800; }
.wx12__temps { display: flex; flex-direction: column; align-items: center; gap: 2px; width: 100%; }
.wx12__hi { font-family: var(--sans); font-size: 12px; font-weight: 700; color: var(--navy-ink); }
.wx12__track { position: relative; width: 60%; max-width: 18px; height: 96px; background: var(--muted-fill); border-radius: var(--r-pill); overflow: hidden; }
.wx12__range { position: absolute; left: 0; width: 100%; background: linear-gradient(180deg, var(--gold) 0%, var(--navy) 100%); border-radius: var(--r-pill); }
.wx12__lo { font-family: var(--sans); font-size: 11px; font-weight: 600; color: var(--fg-3); }
.wx12__rain { display: flex; flex-direction: column; align-items: center; gap: 2px; padding-top: 6px; border-top: 1px solid var(--rule); width: 100%; }
.wx12__rain-bar { width: 60%; max-width: 18px; height: 26px; background: var(--muted-fill); border-radius: var(--r-4); display: flex; align-items: flex-end; overflow: hidden; }
.wx12__rain-fill { width: 100%; background: #7CA8D6; border-radius: var(--r-4); }
.wx12__rain-val { font-size: 9px; font-weight: 600; color: #4d7aa8; }
.wx12__month { font-family: var(--sans); font-size: 11px; font-weight: 600; color: var(--fg-2); text-transform: uppercase; letter-spacing: 0.03em; }
@media (max-width: 720px) {
  .wx12__grid { grid-template-columns: repeat(12, 1fr); gap: 2px; }
  .wx12__hi { font-size: 10px; }
  .wx12__lo, .wx12__rain-val { font-size: 9px; }
  .wx12__track { height: 76px; }
  .wx12__month { font-size: 9px; }
}

/* Weather: card container + temp & rain bars side by side, rain taller (Dane). */
.wx12 { background: var(--card); border: 1px solid var(--rule); border-radius: var(--r-8); padding: 18px 20px; margin-top: 14px; }
.wx12__bars { display: flex; gap: 5px; align-items: flex-end; justify-content: center; }
.wx12__temps { width: auto; }
.wx12__track, .wx12__rain-bar { width: 14px; max-width: 14px; height: 84px; border-radius: var(--r-pill); }
.wx12__range, .wx12__rain-fill { border-radius: var(--r-pill); }
.wx12__rain { flex-direction: column; align-items: center; gap: 3px; padding-top: 0; border-top: 0; width: auto; }
.wx12__rain-val { font-size: 11px; }
@media (max-width: 720px) {
  .wx12 { padding: 14px 10px; }
  .wx12__track, .wx12__rain-bar { height: 64px; }
}

/* Cruise season: 12-month ship-call strip, core season highlighted (matches weather). */
.season12 { background: var(--card); border: 1px solid var(--rule); border-radius: var(--r-8); padding: 18px 20px; margin-top: 4px; }
.season12__legend { display: flex; gap: 14px; margin-bottom: 14px; }
.season12__legend span { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; color: var(--fg-3); }
.season12__legend i { width: 10px; height: 10px; border-radius: 3px; }
.season12__legend .core { background: var(--gold); }
.season12__legend .off { background: var(--muted-fill); border: 1px solid var(--rule); }
.season12__grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 5px; align-items: end; }
.season12__col { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.season12__bar { width: 14px; max-width: 14px; height: 84px; background: var(--muted-fill); border-radius: var(--r-pill); display: flex; align-items: flex-end; overflow: hidden; }
.season12__fill { width: 100%; background: var(--navy-soft); border-radius: var(--r-pill); min-height: 4px; }
.season12__col--core .season12__fill { background: linear-gradient(180deg, var(--gold) 0%, #E6CF92 100%); }
.season12__val { font-family: var(--sans); font-size: 11px; font-weight: 700; color: var(--navy-ink); font-variant-numeric: tabular-nums; }
.season12__month { font-family: var(--sans); font-size: 11px; font-weight: 600; color: var(--fg-2); text-transform: uppercase; letter-spacing: 0.03em; }
.season12__col--core .season12__month { color: var(--gold-hover); font-weight: 700; }
@media (max-width: 720px) {
  .season12 { padding: 14px 10px; }
  .season12__grid { gap: 2px; }
  .season12__bar { height: 64px; width: 11px; }
  .season12__val, .season12__month { font-size: 9px; }
}

/* Sensory tab: mini cards (replace dense lists) + a calmer 2-col fact layout. */
.nd-mini { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; margin-top: 12px; }
.nd-mini__card { background: var(--paper); border: 1px solid var(--rule); border-radius: var(--r-6); padding: 13px 15px; display: flex; flex-direction: column; gap: 5px; }
.nd-mini__name { font-family: var(--serif); font-weight: 500; font-size: 15px; color: var(--navy-ink); }
.nd-mini__notes { font-size: 13px; color: var(--fg-2); line-height: 1.5; }
.nd-mini__chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 2px; }
/* Environment profile: scannable two-column spec with row dividers, not a wall. */
.nd-env { display: grid; grid-template-columns: 1fr 1fr; gap: 0 28px; }
.nd-env .pg-fact { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; padding: 9px 0; border-bottom: 1px solid var(--rule); }
.nd-env .pg-fact__label { flex-shrink: 0; font-size: 12px; color: var(--fg-3); }
.nd-env .pg-fact__value { text-align: right; font-size: 13px; font-weight: 500; }
@media (max-width: 600px) { .nd-env { grid-template-columns: 1fr; } }

/* --- 17. REVIEWS + GALLERY (shared: POI pages + port guides) --------- */
.poi-soon {
  font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;
  background: var(--muted-fill); color: var(--fg-3); border: 1px solid var(--rule);
  padding: 2px 6px; border-radius: var(--r-4); margin-left: 8px;
}
.poi-reviews { margin: 0; }
.poi-reviews__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 6px; }
.poi-reviews__title { font-family: var(--serif); font-weight: 500; font-size: 22px; color: var(--navy-ink); margin: 0; }
.poi-reviews__agg { display: inline-flex; align-items: center; gap: 9px; }
.poi-reviews__score { font-family: var(--serif); font-weight: 600; font-size: 24px; color: var(--navy-ink); }
.poi-stars { display: inline-flex; gap: 2px; color: var(--gold); }
.poi-stars svg { width: 15px; height: 15px; }
.poi-stars svg.is-empty { color: var(--rule); }
.poi-reviews__count { font-size: 13px; color: var(--fg-3); }
.poi-reviews__src { font-size: 12px; color: var(--fg-3); margin: 0 0 18px; }
.poi-reviews__row {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(270px, 1fr);
  gap: 14px; overflow-x: auto; padding-bottom: 6px; scroll-snap-type: x mandatory;
}
@media (min-width: 768px) { .poi-reviews__row { grid-template-columns: repeat(3, 1fr); grid-auto-flow: row; overflow: visible; } }
.poi-review {
  background: var(--card); border: 1px solid var(--rule); border-radius: var(--r-8);
  padding: 18px 20px; display: flex; flex-direction: column; gap: 9px; scroll-snap-align: start;
}
.poi-review__quote { font-size: 14px; line-height: 1.55; color: var(--fg-1); margin: 0; }
.poi-review__meta { font-size: 12px; color: var(--fg-3); margin: 0; }
.poi-review__meta b { color: var(--navy-ink); font-weight: 600; }
.poi-reviews__empty {
  background: var(--muted-fill); border: 1px solid var(--rule); border-radius: var(--r-8);
  padding: 28px; text-align: center; font-size: 14px; color: var(--fg-3);
}
.poi-reviews__cta {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  margin-top: 16px; padding: 16px 20px;
  background: var(--muted-fill); border: 1px solid var(--rule); border-radius: var(--r-8);
}
.poi-reviews__cta span { font-size: 14px; color: var(--navy-ink); font-weight: 500; }
.poi-gallery__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.poi-gallery__grid {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(150px, 1fr);
  gap: 10px; overflow-x: auto; padding-bottom: 6px; scroll-snap-type: x mandatory;
}
@media (min-width: 768px) { .poi-gallery__grid { grid-template-columns: repeat(4, 1fr); grid-auto-flow: row; overflow: visible; } }
.poi-gallery__item {
  position: relative; aspect-ratio: 4/3; margin: 0; overflow: hidden;
  border: 1px solid var(--rule); border-radius: var(--r-6);
  scroll-snap-align: start; user-select: none; -webkit-user-select: none;
}
.poi-gallery__item img { width: 100%; height: 100%; object-fit: cover; display: block; -webkit-user-drag: none; user-drag: none; pointer-events: none; }
.poi-gallery__item--ph { display: flex; align-items: center; justify-content: center; background: repeating-linear-gradient(45deg, var(--muted-fill), var(--muted-fill) 9px, #ece6d8 9px, #ece6d8 18px); }
.poi-gallery__ph-label { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; color: var(--fg-3); background: var(--paper); padding: 2px 7px; border-radius: 3px; }
.poi-gallery__shield { position: absolute; inset: 0; }
.poi-gallery__add {
  aspect-ratio: 4/3; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px;
  border: 1px dashed var(--rule); border-radius: var(--r-6); background: var(--muted-fill);
  color: var(--navy-ink); font-family: var(--sans); font-size: 13px; font-weight: 600; cursor: pointer;
}
.poi-gallery__add svg { width: 22px; height: 22px; color: var(--gold); }
.poi-gallery__add[aria-disabled="true"] { opacity: 0.65; cursor: not-allowed; }
.poi-gallery__terms { font-size: 12px; color: var(--fg-3); margin: 12px 0 0; line-height: 1.5; }
.poi-gallery__terms a { color: var(--fg-2); font-weight: 600; }

/* --- 6. DAY-PLANNER: ROUTE TOGGLE + PRINT ---------------------- */
.plan-routes { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 14px; }
.plan-routes__lbl { font-family: var(--sans); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--fg-3); }
.plan-routes__seg { display: inline-flex; gap: 4px; }
.plan-route-btn {
  appearance: none; cursor: pointer; font-family: var(--sans); font-size: 12px; font-weight: 600;
  padding: 7px 12px; min-height: 38px; border-radius: var(--r-4); border: 1px solid var(--rule);
  background: var(--paper); color: var(--navy-soft); display: inline-flex; align-items: center; gap: 6px;
}
.plan-route-btn svg { width: 14px; height: 14px; }
.plan-route-btn:hover { border-color: var(--gold); color: var(--navy-ink); }
.plan-route-btn[aria-pressed="true"] { background: var(--navy); color: #fff; border-color: var(--navy); }
.plan-route-note {
  display: none; align-items: flex-start; gap: 9px; margin: 0 0 14px; padding: 10px 13px;
  background: var(--muted-fill); border: 1px solid var(--rule); border-radius: var(--r-6);
  font-size: 13px; line-height: 1.5; color: var(--fg-1);
}
.plan-route-note.is-active { display: flex; }
.plan-route-note__dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; margin-top: 5px; background: var(--navy); }
.plan-route-note[data-route="quieter"] .plan-route-note__dot { background: var(--ok); }
.plan-route-note[data-route="accessible"] .plan-route-note__dot { background: var(--info); }
.plan-print {
  appearance: none; cursor: pointer; margin-left: auto; display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--sans); font-size: 12px; font-weight: 600; color: var(--navy-ink);
  background: var(--card); border: 1px solid var(--rule); border-radius: var(--r-4); padding: 7px 13px; min-height: 38px;
}
.plan-print:hover { border-color: var(--gold); }
.plan-print svg { width: 15px; height: 15px; }

/* --- 7. AGE-GROUP PILL ALIGNMENT (family) ---------------------- */
.pg-hook--age { display: flex; flex-direction: column; }
.pg-hook--age .pg-hook__pill-row { min-height: 26px; margin: 6px 0 8px; display: flex; }
.pg-hook--age .pg-hook__pill-row .pg-chip { align-self: flex-start; }

/* --- 8. WHAT'S ON ALIGNMENT ------------------------------------ */
.whatson-grid { display: grid; grid-template-columns: 1fr; gap: 12px; margin-top: 12px; }
@media (min-width: 620px) { .whatson-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 980px) { .whatson-grid { grid-template-columns: 1fr 1fr 1fr; } }
.whatson-card { display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--rule); border-radius: var(--r-8); padding: 16px 18px; box-shadow: var(--sh-sm); }
.whatson-card__cat { font-family: var(--sans); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--fg-3); }
.whatson-card__title { font-family: var(--serif); font-weight: 500; font-size: 20px; color: var(--navy-ink); margin: 4px 0 6px; line-height: 1.15; }
.whatson-card__desc { font-size: 13.5px; color: var(--fg-2); line-height: 1.5; margin: 0; }
.whatson-card__note { font-size: 12px; color: var(--warn-ink); margin: 8px 0 0; }
.whatson-card__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-top: auto; padding-top: 12px; }

/* --- 9. PRACTICAL WITH KIDS (declutter) ------------------------ */
.kids-prac { display: grid; grid-template-columns: 1fr; gap: 1px; background: var(--rule); border: 1px solid var(--rule); border-radius: var(--r-8); overflow: hidden; margin-top: 12px; }
@media (min-width: 620px) { .kids-prac { grid-template-columns: 1fr 1fr; } }
.kids-prac__item { background: var(--card); padding: 13px 16px; display: flex; flex-direction: column; gap: 3px; }
.kids-prac__item--warn { background: #FCF6EC; }
.kids-prac__lbl { display: flex; align-items: center; gap: 7px; font-family: var(--sans); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.09em; color: var(--fg-3); }
.kids-prac__item--warn .kids-prac__lbl { color: var(--warn-ink); }
.kids-prac__lbl svg { width: 13px; height: 13px; }
.kids-prac__val { font-size: 13.5px; color: var(--navy-ink); line-height: 1.45; }
.kids-prac__val a { color: var(--navy); font-weight: 600; }
.kids-rainy { margin-top: 14px; display: flex; gap: 13px; align-items: flex-start; padding: 16px 18px; background: var(--info-soft); border: 1px solid var(--info-line); border-radius: var(--r-8); }
.kids-rainy__icon { width: 34px; height: 34px; flex-shrink: 0; color: var(--info); display: flex; align-items: center; justify-content: center; }
.kids-rainy__icon svg { width: 24px; height: 24px; }
.kids-rainy__lbl { font-family: var(--sans); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--info); }
.kids-rainy__body { font-size: 14px; color: #1c3a5a; line-height: 1.5; margin: 3px 0 0; }

/* --- 10. TIMELINE STOP NUMBERS (match map pins) ---------------- */
.pg-timeline__num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; flex-shrink: 0; border-radius: 50%;
  background: var(--navy); color: var(--gold); font-family: var(--serif); font-weight: 600; font-size: 12px;
  margin-right: 8px; vertical-align: middle;
}
.pg-timeline__title-row { display: flex; align-items: center; gap: 0; }

@media print {
  .plan-routes, .plan-print, .sx__caret { display: none !important; }
  .plan-route-note { display: flex !important; }
}

/* --- 11. SENSORY TILE (card 4th tile = click-to-expand) -------- */
.pg-scroll-card__tile { min-height: 48px; justify-content: center; }
.pg-scroll-card__tiles .sx--tile { position: relative; display: block; }
.sx--tile > summary {
  list-style: none; cursor: pointer; min-height: 48px;
  background: var(--muted-fill); border: 1px solid var(--rule); border-radius: var(--r-4);
  padding: 6px 8px; display: flex; flex-direction: column; gap: 2px; align-items: flex-start;
  text-transform: none; letter-spacing: 0;
}
.sx--tile > summary::-webkit-details-marker { display: none; }
.sx--tile > summary:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.sx--tile__lbl { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--fg-3); display: flex; align-items: center; gap: 4px; width: 100%; }
.sx--tile__lbl .sx__caret { margin-left: auto; width: 11px; height: 11px; }
.sx--tile__val { font-size: 12px; font-weight: 700; line-height: 1.2; color: var(--navy-ink); }
.sx--tile[data-avg="low"]    > summary { background: var(--ok-soft);   border-color: var(--ok-line); }
.sx--tile[data-avg="low"]    .sx--tile__lbl { color: var(--ok); }
.sx--tile[data-avg="low"]    .sx--tile__val { color: var(--ok-ink); }
.sx--tile[data-avg="medium"] > summary { background: var(--warn-soft); border-color: var(--warn-line); }
.sx--tile[data-avg="medium"] .sx--tile__lbl { color: var(--warn-ink); }
.sx--tile[data-avg="medium"] .sx--tile__val { color: var(--warn-ink); }
.sx--tile[data-avg="high"]   > summary { background: #FBEAEA; border-color: var(--bad-line); }
.sx--tile[data-avg="high"]   .sx--tile__lbl,
.sx--tile[data-avg="high"]   .sx--tile__val { color: var(--bad); }
.sx--tile .sx__pop { right: 0; left: auto; }

/* ============================================================
   v4 · REVISION 4 (2026-06-03) · site-wide card + carousel fixes
   ============================================================ */

/* --- 13. SCROLL CAROUSEL: controls sit BELOW the scroller as prev · dots · next,
   so arrows never overlap a card or push the row out of alignment. Dots show
   how many sets there are and which one you're on. Site-wide, any scroller. */
.pg-scroll-carousel { position: static; display: block; }
.pg-scroll-carousel > .pg-scroll { width: 100%; }
.pg-carousel__controls { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 12px; }
.pg-scroll-carousel .pg-carousel__btn { position: static; transform: none; left: auto; right: auto; top: auto; flex: 0 0 auto; }
.pg-carousel__btn[disabled] { opacity: 0.35; cursor: default; }
.pg-carousel__dots { display: flex; align-items: center; justify-content: center; gap: 7px; flex-wrap: wrap; }
.pg-carousel__dot { width: 7px; height: 7px; padding: 0; border: 0; border-radius: 50%; background: var(--rule); cursor: pointer; transition: background .15s, width .15s; }
.pg-carousel__dot:hover { background: var(--navy-soft); }
.pg-carousel__dot[aria-current="true"] { background: var(--gold); width: 22px; border-radius: 4px; }
/* Paged port carousel (home, ports page): arrows also move into the row below. */
.pg-carousel .pg-carousel__btn { position: static; transform: none; left: auto; right: auto; top: auto; }

/* --- 14. FACT VALUES READ LIGHTER: conflict resolved, folded into the
   base .pg-fact__value rule above (now 500). v6. --- */

/* --- 15. SCROLL-CARD STAT TILES: fixed order, only when we hold data
   Flex row keeps all three tiles aligned and the row height even across
   cards. Missing values render a muted '-' placeholder. Bottom-anchored so
   the stat row lines up across cards regardless of description length. */
.pg-scroll-card__tiles--flex { display: flex; gap: 5px; margin-top: auto; }
.pg-scroll-card__tiles--flex > .pg-scroll-card__tile { flex: 1 1 0; min-width: 0; }
/* 2x2 stat grid bottom-anchored so tiles line up across cards; red variant for high sensory. */
.pg-scroll-card__tiles { margin-top: auto; }
.pg-scroll-card__tile--bad { background: var(--bad-soft); border-color: var(--bad-line); }
.pg-scroll-card__tile--bad .pg-scroll-card__tile-lbl { color: var(--bad); }
.pg-scroll-card__tile--bad .pg-scroll-card__tile-val { color: var(--bad-ink); }
/* Card footer: single 'Open guide' action, right-aligned. Open-in-new-tab lives inside the slide-out. */
.card-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--rule); }
.card-open { font-family: var(--sans); font-size: 12px; font-weight: 600; color: var(--navy-ink); background: none; border: 0; cursor: pointer; padding: 0; display: inline-flex; align-items: center; gap: 5px; text-decoration: none; }
.card-open::after { content: '\2192'; color: var(--gold); }
.card-open:hover { color: var(--gold-hover); }
/* Visible keyboard focus for the new interactive elements (a11y). */
.card-open:focus-visible,
.pg-carousel__dot:focus-visible,
.poi-gallery__add:focus-visible,
.pg-poi-drawer__newtab:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; border-radius: 2px; }

/* --- 16. SENSORY BAR: full width, expands IN FLOW (never clipped)
   The old absolute popover was clipped by the carousel's overflow.
   As a direct child of the card body it is a full-width bar whose
   breakdown opens in normal flow, growing the card. */
.pg-scroll-card__body > .sx--tile { display: block; width: 100%; margin-top: 8px; position: static; }
.pg-scroll-card__body > .sx--tile > summary {
  display: flex; align-items: center; gap: 8px; width: 100%; padding: 10px 13px;
}
.pg-scroll-card__body > .sx--tile .sx--tile__lbl { width: auto; }
.pg-scroll-card__body > .sx--tile .sx--tile__val { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; }
.pg-scroll-card__body > .sx--tile .sx--tile__val .sx__caret { margin-left: 0; }
.pg-scroll-card__body > .sx--tile .sx__pop {
  position: static; width: auto; left: auto; right: auto;
  box-shadow: none; margin-top: 6px; border-radius: var(--r-4);
}

/* --- 17. SEE MORE: in-flow disclosure with the extra detail -----
   Opening hours, closed days, distance, amenities, website,
   directions and a link to the full guide. Only rendered when the
   card actually holds extra data. */
.card-more { margin-top: 10px; border-top: 1px solid var(--rule); }
.card-more__summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 6px;
  padding: 9px 0 3px; min-height: 32px;
  font-family: var(--sans); font-size: 12px; font-weight: 600; color: var(--navy-ink);
}
.card-more__summary::-webkit-details-marker { display: none; }
.card-more__caret { width: 13px; height: 13px; color: var(--gold); transition: transform 0.15s ease; }
.card-more[open] .card-more__caret { transform: rotate(180deg); }
.card-more__summary:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.card-more__body { display: flex; flex-direction: column; gap: 8px; padding: 4px 0 2px; }
.card-more__row { display: flex; flex-direction: column; gap: 1px; }
.card-more__lbl { font-family: var(--sans); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.09em; color: var(--fg-3); }
.card-more__val { font-size: 13px; color: var(--navy-ink); line-height: 1.4; }
.card-more__links { display: flex; flex-wrap: wrap; align-items: center; gap: 9px 14px; margin-top: 2px; padding-top: 9px; border-top: 1px solid var(--rule); }
.card-more__link { font-family: var(--sans); font-size: 12px; font-weight: 600; color: var(--navy-soft); text-decoration: none; }
.card-more__link:hover { color: var(--gold-hover); }
.card-more__link--strong { color: var(--navy-ink); margin-left: auto; }
.card-more__link--strong:hover { color: var(--gold-hover); }

/* --- 18. PRINT BROCHURE: a clean, CPAI-branded day-plan leaflet ----
   Hidden on screen. When a plan's "Print this plan" is pressed we
   populate #brochure and print ONLY it (cover, contents, steps,
   essentials, branded footer). Save as PDF from the dialog = download. */
.brochure { display: none; }
@media screen { .brochure { display: none !important; } }
@media print {
  body.is-brochure { background: #fff; }
  body.is-brochure > *:not(#brochure) { display: none !important; }
  body.is-brochure #brochure { display: block !important; }
  #brochure { color: #14182a; font-family: var(--sans); }
  .brochure__page { page-break-after: always; padding: 0; }
  .brochure__page:last-child { page-break-after: auto; }
  .brochure__step, .brochure__contents li { break-inside: avoid; }
}
#brochure { max-width: 720px; margin: 0 auto; }
.brochure__cover { border-bottom: 3px solid var(--gold); padding-bottom: 22px; margin-bottom: 26px; }
.brochure__brand { font-family: var(--serif); font-weight: 600; font-size: 22px; color: var(--navy-ink); letter-spacing: -0.01em; }
.brochure__brand .ai { color: var(--gold); }
.brochure__kicker { font-family: var(--sans); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.16em; color: var(--gold-hover); margin: 20px 0 0; }
.brochure__title { font-family: var(--serif); font-weight: 500; font-size: 34px; line-height: 1.08; color: var(--navy-ink); margin: 8px 0 0; letter-spacing: -0.01em; }
.brochure__meta { font-family: var(--sans); font-size: 13px; font-weight: 600; color: var(--fg-2); margin: 10px 0 0; }
.brochure__intro { font-size: 14px; line-height: 1.55; color: var(--fg-1); margin: 14px 0 0; max-width: 60ch; }
.brochure__h2 { font-family: var(--sans); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--fg-3); margin: 0 0 12px; }
.brochure__section { margin-bottom: 26px; }
.brochure__contents { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.brochure__contents li { display: flex; align-items: baseline; gap: 12px; font-size: 14px; color: var(--navy-ink); }
.brochure__contents .br-time { font-family: var(--sans); font-weight: 700; color: var(--gold-hover); min-width: 52px; }
.brochure__route { background: var(--muted-fill); border: 1px solid var(--rule); border-left: 3px solid var(--gold); border-radius: var(--r-6); padding: 14px 16px; font-size: 13.5px; line-height: 1.5; color: var(--fg-1); margin-bottom: 26px; }
.brochure__route b { color: var(--navy-ink); }
.brochure__steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0; }
.brochure__step { display: grid; grid-template-columns: 60px 1fr; gap: 14px; padding: 14px 0; border-top: 1px solid var(--rule); }
.brochure__step:first-child { border-top: 0; }
.brochure__step-time { font-family: var(--sans); font-size: 13px; font-weight: 700; color: var(--gold-hover); }
.brochure__step-title { font-family: var(--serif); font-weight: 500; font-size: 17px; color: var(--navy-ink); display: flex; align-items: center; gap: 8px; }
.brochure__step-num { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--navy); color: #fff; font-family: var(--sans); font-size: 12px; font-weight: 700; flex-shrink: 0; }
.brochure__step-desc { font-size: 13px; color: var(--fg-2); line-height: 1.5; margin: 4px 0 0; }
.brochure__essentials { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px 20px; background: var(--navy); color: #fff; border-radius: var(--r-8); padding: 20px 22px; }
.brochure__ess-lbl { font-family: var(--sans); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--gold); }
.brochure__ess-val { font-size: 13.5px; line-height: 1.4; margin-top: 2px; color: rgba(255,255,255,0.92); }
.brochure__foot { margin-top: 26px; padding-top: 16px; border-top: 1px solid var(--rule); display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; font-size: 11px; color: var(--fg-3); }
.brochure__foot b { font-family: var(--serif); font-weight: 600; font-size: 13px; color: var(--navy-ink); }
.brochure__foot b .ai { color: var(--gold); }

/* --- 7. PORT NEWS: minimise / expand toggle ------------------- */
/* (.pg-news__head align-items folded into the base rule above, now center) */
.pg-news__head-right { display: inline-flex; align-items: center; gap: 10px; flex-shrink: 0; }
.pg-news__toggle {
  appearance: none; background: transparent; border: 1px solid var(--rule); border-radius: var(--r-4);
  width: 26px; height: 26px; padding: 0; flex-shrink: 0; cursor: pointer; color: var(--fg-2);
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .15s, border-color .15s, color .15s;
}
.pg-news__toggle:hover { border-color: var(--gold); color: var(--navy-ink); }
.pg-news__toggle:focus-visible { outline: 3px solid var(--gold); outline-offset: 1px; }
.pg-news__toggle svg { width: 14px; height: 14px; transition: transform .2s ease; }
.pg-news[data-collapsed="true"] .pg-news__toggle svg { transform: rotate(-90deg); }
.pg-news__collapse { display: flex; flex-direction: column; gap: 8px; }
.pg-news[data-collapsed="true"] .pg-news__collapse { display: none; }
.pg-news[data-collapsed="true"] .pg-news__head { margin-bottom: 0; }

/* -- Gallery upload + consent modal (gallery.js) ------------- */
.gup { position: fixed; inset: 0; z-index: 120; display: flex; align-items: center; justify-content: center; padding: 20px; }
/* gallery.js toggles the [hidden] attribute to open/close; without this the
   .gup display:flex above overrides [hidden] and the transparent scrim sits
   over the whole guide, swallowing every click. */
.gup[hidden] { display: none; }
.gup__scrim { position: absolute; inset: 0; background: rgba(8,12,20,0.55); opacity: 0; transition: opacity .2s ease; }
.gup--in .gup__scrim { opacity: 1; }
.gup__dialog {
  position: relative; width: min(520px, 100%); max-height: calc(100vh - 40px); overflow-y: auto;
  background: var(--paper); border: 1px solid var(--rule); border-radius: var(--r-8);
  box-shadow: var(--sh-lg); transform: translateY(10px); opacity: 0; transition: transform .2s ease, opacity .2s ease;
}
.gup--in .gup__dialog { transform: none; opacity: 1; }
.gup__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 22px 24px 14px; }
.gup__eyebrow { font-family: var(--sans); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--gold-hover); margin: 0 0 4px; }
.gup__title { font-family: var(--serif); font-weight: 500; font-size: 24px; color: var(--navy-ink); margin: 0; }
.gup__x { flex-shrink: 0; width: 38px; height: 38px; border: 1px solid var(--rule); border-radius: var(--r-4); background: var(--card); color: var(--navy-ink); font-size: 22px; line-height: 1; cursor: pointer; }
.gup__x:hover { border-color: var(--gold); }
.gup__body { padding: 4px 24px 24px; display: flex; flex-direction: column; gap: 16px; }
.gup__drop { position: relative; display: block; border: 1.5px dashed var(--rule); border-radius: var(--r-6); background: var(--card); cursor: pointer; transition: border-color .15s, background .15s; }
.gup__drop:hover, .gup__drop--over { border-color: var(--gold); background: var(--muted-fill); }
.gup__drop--err { border-color: var(--bad); }
.gup__drop-inner { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 30px 20px; text-align: center; }
.gup__drop-inner svg { width: 30px; height: 30px; color: var(--navy); }
.gup__drop-title { font-family: var(--sans); font-size: 14px; font-weight: 600; color: var(--navy-ink); }
.gup__drop-note { font-size: 12px; color: var(--fg-3); }
.gup__drop--err .gup__drop-note::after { content: ' File is too large.'; color: var(--bad); }
.gup__preview { display: block; position: relative; padding: 12px; }
.gup__preview img { width: 100%; max-height: 240px; object-fit: cover; border-radius: var(--r-4); display: block; }
.gup__preview-x { position: absolute; top: 18px; right: 18px; width: 30px; height: 30px; border: 0; border-radius: 50%; background: rgba(8,12,20,0.7); color: #fff; font-size: 17px; line-height: 1; cursor: pointer; }
.gup__field { display: flex; flex-direction: column; gap: 5px; }
.gup__field label { font-family: var(--sans); font-size: 12px; font-weight: 600; color: var(--fg-2); }
.gup__opt { font-weight: 400; color: var(--fg-3); text-transform: none; }
.gup__field input { font-family: var(--sans); font-size: 14px; color: var(--navy-ink); background: var(--card); border: 1px solid var(--rule); border-radius: var(--r-4); padding: 10px 12px; }
.gup__field input:focus-visible { outline: 2px solid var(--gold); outline-offset: 0; border-color: var(--gold); }
.gup__consent { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; line-height: 1.5; color: var(--fg-2); background: var(--muted-fill); border: 1px solid var(--rule); border-radius: var(--r-6); padding: 12px 14px; cursor: pointer; }
.gup__consent input { margin-top: 2px; width: 17px; height: 17px; flex-shrink: 0; accent-color: var(--gold); }
.gup__consent a { color: var(--navy-ink); text-decoration: underline; text-underline-offset: 2px; }
.gup__actions { display: flex; justify-content: flex-end; gap: 10px; }
.gup__btn { font-family: var(--sans); font-size: 14px; font-weight: 600; border-radius: var(--r-4); padding: 11px 18px; cursor: pointer; border: 1px solid transparent; }
.gup__btn--ghost { background: none; border-color: var(--rule); color: var(--navy-ink); }
.gup__btn--ghost:hover { border-color: var(--gold); }
.gup__btn--primary { background: var(--navy); color: #fff; }
.gup__btn--primary:hover { background: var(--navy-ink); }
.gup__btn--primary:disabled { background: var(--rule); color: var(--fg-3); cursor: not-allowed; }
.gup__btn:focus-visible, .gup__x:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.gup__foot { font-size: 12px; color: var(--fg-3); margin: 0; text-align: center; }
.gup__done { padding: 36px 28px 30px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.gup__done svg { width: 44px; height: 44px; color: var(--ok); border: 2px solid var(--ok-soft, #cfe6d8); border-radius: 50%; padding: 8px; }
.gup__done h3 { font-family: var(--serif); font-weight: 500; font-size: 20px; color: var(--navy-ink); margin: 6px 0 0; }
.gup__done p { font-size: 14px; color: var(--fg-2); margin: 0 0 12px; max-width: 320px; line-height: 1.5; }
@media (max-width: 520px) { .gup__actions { flex-direction: column-reverse; } .gup__btn { width: 100%; text-align: center; } }

/* -- Crowd radar (crowd-radar.js): date picker → ship surge → 5 bands -- */
.cr { background: var(--card); border: 1px solid var(--rule); border-radius: var(--r-8); padding: 22px 22px 20px; }
.cr__eyebrow { font-family: var(--sans); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--gold-hover); margin: 0 0 4px; }
.cr__title { font-family: var(--serif); font-weight: 500; font-size: 22px; color: var(--navy-ink); margin: 0 0 5px; }
.cr__sub { font-size: 13px; color: var(--fg-2); margin: 0 0 16px; line-height: 1.5; max-width: 56ch; }
.cr__dates { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; }
.cr__dates::-webkit-scrollbar { display: none; }
.cr__date { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 1px; width: 56px; padding: 9px 0; background: var(--paper); border: 1px solid var(--rule); border-radius: var(--r-6); cursor: pointer; transition: border-color .12s, background .12s; }
.cr__date:hover { border-color: var(--gold); }
.cr__date--on { border-color: var(--navy); background: var(--navy); }
.cr__date--on .cr__date-dow, .cr__date--on .cr__date-mon { color: rgba(255,255,255,0.7); }
.cr__date--on .cr__date-dom { color: #fff; }
.cr__date-dow { font-family: var(--sans); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--fg-3); }
.cr__date-dom { font-family: var(--serif); font-size: 19px; font-weight: 600; color: var(--navy-ink); line-height: 1.05; }
.cr__date-mon { font-family: var(--sans); font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--fg-3); }
.cr__date:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.cr__surge { display: flex; align-items: center; gap: 11px; margin: 16px 0 14px; padding: 11px 14px; border-radius: var(--r-6); border: 1px solid var(--rule); background: var(--muted-fill); }
.cr__surge-badge { font-family: var(--sans); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; padding: 4px 9px; border-radius: var(--r-4); color: #fff; }
.cr__surge[data-tone="ok"]   { background: var(--ok-soft);   border-color: var(--ok-line); }
.cr__surge[data-tone="mod"]  { background: var(--paper); }
.cr__surge[data-tone="warn"] { background: var(--warn-soft); border-color: var(--warn-line); }
.cr__surge[data-tone="bad"]  { background: var(--bad-soft);  border-color: #f1c3c9; }
.cr__surge[data-tone="ok"]   .cr__surge-badge { background: var(--ok); }
.cr__surge[data-tone="mod"]  .cr__surge-badge { background: var(--fg-2); }
.cr__surge[data-tone="warn"] .cr__surge-badge { background: var(--warn); }
.cr__surge[data-tone="bad"]  .cr__surge-badge { background: var(--bad); }
.cr__surge-text { font-size: 14px; color: var(--navy-ink); }
.cr__surge-text strong { font-weight: 700; }
.cr__strip { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.cr__cell { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 12px 4px; border-radius: var(--r-6); border: 1px solid var(--rule); text-align: center; }
.cr__cell[data-level="low"]    { background: var(--ok-soft);   border-color: var(--ok-line); }
.cr__cell[data-level="medium"] { background: var(--warn-soft); border-color: var(--warn-line); }
.cr__cell[data-level="high"]   { background: var(--bad-soft);  border-color: #f1c3c9; }
.cr__cell-band { font-family: var(--sans); font-size: 11px; font-weight: 700; color: var(--navy-ink); }
.cr__cell-time { font-size: 10px; color: var(--fg-3); }
.cr__cell-tier { font-family: var(--sans); font-size: 12px; font-weight: 700; margin-top: 3px; }
.cr__cell[data-level="low"]    .cr__cell-tier { color: var(--ok-ink); }
.cr__cell[data-level="medium"] .cr__cell-tier { color: var(--warn-ink); }
.cr__cell[data-level="high"]   .cr__cell-tier { color: var(--bad-ink); }
.cr__legend { display: flex; gap: 14px; margin-top: 12px; }
.cr__legend span { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; color: var(--fg-3); }
.cr__legend i { width: 10px; height: 10px; border-radius: 3px; }
.cr__legend .ok { background: var(--ok); } .cr__legend .warn { background: var(--warn); } .cr__legend .bad { background: var(--bad); }
.cr__note { font-size: 12px; color: var(--fg-3); margin: 12px 0 0; line-height: 1.5; }
.cr__empty { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--fg-2); margin-top: 8px; }
.cr__empty-cell { width: 26px; height: 26px; flex-shrink: 0; border-radius: var(--r-4); background: var(--muted-fill); border: 1px solid var(--rule); }
@media (max-width: 560px) {
  .cr__strip { grid-template-columns: repeat(5, 1fr); gap: 3px; }
  .cr__cell { padding: 9px 2px; }
  .cr__cell-time { display: none; }
}

/* ============================================================
   HOME REVIEW BATCH (13 Jun 2026) · home-page-only polish.
   Scoped to home sections; shared chrome (nav, footer) untouched.
   ============================================================ */

/* 1. Hero rhythm: trim the tall top/bottom padding so the search
   bar (the primary action) sits higher in first view. */
/* (home hero desktop padding folded into the base rule above) */

/* 2. "Ten tabs, plus live port news": the news card is not one of
   the ten numbered tabs, so it carries a Live marker instead of a
   number and a thin gold top accent to read as the "plus" item. */
.pg-guide-topics--cards .pg-topic--live { border-top: 2px solid var(--gold); }
.pg-topic__num--live {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--bad);
}
.pg-topic__live-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--bad); flex-shrink: 0;
}

/* 3. Unbuilt port guides: a quiet "Guide coming soon" affordance,
   clearly secondary so it never reads as a live "View guide". */
.pg-port-card__btn--soon {
  background: var(--muted-fill); color: var(--navy-soft);
  border-color: var(--rule);
}
.pg-port-card__btn--soon:hover { border-color: var(--gold); color: var(--navy-ink); }

/* 4. Inline Ask example chips stay on one line so the row sits level. */
.pg-inline-ask__chips { align-items: center; }
.pg-inline-ask__chip { white-space: nowrap; }

/* 5. "Three ways to use it": give the muted middle card a touch more
   definition so the white / muted / navy trio reads as deliberate. */
.pg-feature--muted { border-color: #DED4C1; }

/* 6. Header calm-down (13 Jun 2026). The right cluster read as three
   competing buttons (gold Ask, Access box, Sign in box). Demote Ask to a
   quiet nav-style link so the header is one calm row; the gold "AI" lockup
   is the only accent it keeps. Access + Sign in are calmed in _a11y.css. */
.pg-site-nav__cta {
  background: none;
  border: 0;
  border-radius: 0;
  color: rgba(255,255,255,0.78);
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: normal;
  padding: 6px 10px;
  min-height: 0;
  display: inline-flex; align-items: center; gap: 6px;
  text-decoration: none;
}
.pg-site-nav__cta:hover { background: none; color: #fff; text-decoration: none; }
.pg-site-nav__cta .ai {
  color: var(--gold);
  font-size: 1em !important;
  letter-spacing: 0 !important;
}
.pg-site-nav__cta:hover .ai { color: var(--gold); }

/* ============================================================
   GUIDE REVIEW BATCH (15 Jun 2026)
   Lives in _v4 (loaded by every port guide); _styles.css frozen.
   ============================================================ */

/* "At a glance" quick-card links: match the card "See more" affordance
   (sentence case, navy text, trailing gold arrow), not an uppercased ↗. */
.pg-quick-card__link {
  text-transform: none; letter-spacing: normal;
  font-size: 12px; font-weight: 600; color: var(--navy-ink);
  margin-top: auto;
}
.pg-quick-card__link::after { content: " \2192"; color: var(--gold); }

/* Crowd radar: the date week spreads full width (7 days from today),
   no horizontal scroll. */
.cr__dates { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; overflow: visible; }
.cr__date { width: auto; flex: initial; }
/* A small clock makes each band's range read clearly as a (local) time. */
.cr__cell-time { display: inline-flex; align-items: center; justify-content: center; gap: 4px; }
.cr__clock { width: 11px; height: 11px; opacity: 0.7; flex-shrink: 0; }
@media (max-width: 560px) { .cr__cell-time { display: none; } }

/* Season strip: name the unit so the per-month numbers read as ship calls. */
.season12__legend { align-items: center; }
.season12__legend .season12__unit {
  margin-right: auto; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.04em; color: var(--fg-2);
}

/* Port tab menu: on desktop, centre and split the tabs equally across the
   full width (instead of a left-aligned scroll). Narrow screens keep the scroller. */
@media (min-width: 1024px) {
  .port-tab-nav__scroll { overflow-x: visible; justify-content: center; }
  .port-tab-nav__scroll .port-tab {
    flex: 1 1 0; min-width: 0; text-align: center;
    white-space: nowrap; font-size: 14px;
    padding-left: 6px; padding-right: 6px;
  }
}

/* Day planner: "time ashore" duration filter (segmented). Visual state only;
   the binder wires it to plan length later. */
.dp-duration { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 16px; }
.dp-duration__lbl {
  font-family: var(--sans); font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.1em; color: var(--fg-3);
}
.dp-duration__seg {
  display: inline-flex; background: var(--muted-fill);
  border: 1px solid var(--rule); border-radius: var(--r-8); padding: 4px; gap: 4px;
}
.dp-duration__btn {
  appearance: none; cursor: pointer; border: 0; background: transparent;
  display: flex; flex-direction: column; align-items: flex-start; gap: 1px;
  font-family: var(--sans); font-size: 14px; font-weight: 600; color: var(--navy-ink);
  padding: 8px 16px; border-radius: var(--r-6); min-height: 44px; line-height: 1.15;
}
.dp-duration__btn small { font-size: 11px; font-weight: 500; color: var(--fg-3); }
.dp-duration__btn[aria-pressed="true"] { background: var(--navy); color: #fff; box-shadow: var(--sh-sm); }
.dp-duration__btn[aria-pressed="true"] small { color: rgba(255,255,255,0.78); }
.dp-duration__btn:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.dp-plan + .dp-plan { margin-top: 18px; }
@media (max-width: 560px) {
  .dp-duration__seg { width: 100%; }
  .dp-duration__btn { flex: 1; align-items: center; text-align: center; padding: 8px 6px; }
}

/* Day-plan picker + plan rendering (bound from port_day_plans, CC schema) */
.dp-picker { display: flex; gap: 8px; overflow-x: auto; padding: 4px 2px 8px; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
.dp-pick {
  flex: 0 0 auto; display: flex; flex-direction: column; gap: 2px; align-items: flex-start;
  background: var(--card); border: 1px solid var(--rule); border-radius: var(--r-8);
  padding: 10px 16px; min-height: 44px; cursor: pointer; font-family: var(--sans);
  color: var(--navy-ink); font-size: 14px; font-weight: 600; line-height: 1.2; white-space: nowrap;
}
.dp-pick small { font-size: 11px; font-weight: 500; color: var(--fg-3); }
.dp-pick[aria-selected="true"] { background: var(--navy); color: #fff; border-color: var(--navy); box-shadow: var(--sh-sm); }
.dp-pick[aria-selected="true"] small { color: rgba(255,255,255,0.75); }
.dp-pick:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.dp-plan-head { padding: 4px 2px 0; }
.dp-meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 14px 0 0; }
.dp-meta .plan-print { margin-left: auto; }
.dp-bestfor { font-size: 13px; color: var(--fg-2); margin: 12px 0 0; line-height: 1.5; }
.dp-bestfor strong, .dp-booking strong { color: var(--navy-ink); font-weight: 700; }
.dp-sensory { display: block; font-size: 13px; color: var(--fg-3); font-style: italic; margin-top: 4px; line-height: 1.45; }
.dp-timeline { margin-top: 20px; }
.dp-booking { margin-top: 18px; font-size: 13px; color: var(--fg-2); background: var(--muted-fill); border-radius: var(--r-6); padding: 12px 14px; line-height: 1.5; }

/* -- POI SUB-TEMPLATE (poi.html): tier densities, not-known, per-type --
   The SSR Worker (job 26) renders one of three densities by pois.poi_tier:
   it keeps the [data-tier-only] element matching the tier and drops the rest.
   map  -> .poi-pin (a compact pin: name, category, coords)
   list -> .poi-listitem (one line: name + walk-from-terminal)
   full -> the complete article. Stops statues getting full pages. */
.poi-pin { display: flex; align-items: center; gap: 11px; padding: 11px 15px; background: var(--card); border: 1px solid var(--rule); border-radius: var(--r-6); font-size: 14px; }
.poi-pin__dot { width: 13px; height: 13px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: var(--gold); border: 2px solid #fff; box-shadow: 0 1px 3px rgba(26,32,54,.4); flex-shrink: 0; }
.poi-pin__name { font-weight: 700; color: var(--navy-ink); }
.poi-pin__cat { color: var(--fg-3); font-size: 12px; margin-left: 2px; }
.poi-listitem { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding: 12px 16px; border: 1px solid var(--rule); border-radius: var(--r-6); background: var(--card); }
.poi-listitem__name { font-weight: 600; color: var(--navy-ink); font-size: 15px; }
.poi-listitem__walk { font-size: 13px; color: var(--fg-3); white-space: nowrap; }

/* Not-known: the two safety / family-suitability fields that must never
   silently collapse (Dane ruling). The Worker fills [data-field] if present;
   if null AND the category owes the field (per category-field-matrix.csv) it
   writes the [data-empty] text and adds .poi-notknown. Soft fields keep collapse. */
.poi-notknown { color: var(--fg-3); font-style: italic; font-weight: 500; }
.poi-notknown::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--warn); margin-right: 8px; vertical-align: middle; }

/* Per-type detail: reuses .poi-section. The food_venue contact row mirrors the
   sidebar facts; chips reuse .pg-chip. All blocks collapse when their data is null. */
.poi-typelinks { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.poi-typelinks a { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--navy-ink); text-decoration: none; background: var(--muted-fill); border: 1px solid var(--rule); border-radius: var(--r-4); padding: 7px 12px; }
.poi-typelinks a:hover { border-color: var(--gold); color: var(--gold-hover); }
.poi-verified__row { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12px; color: var(--fg-3); font-style: italic; margin-top: 4px; }
.poi-verified__row a { color: var(--fg-2); font-weight: 600; }



/* ========================================================================
   LAYER 4 · V5 SPARSE STATES  (from root _v5.css: provenance-none, berth
   states, no-image typographic hero, empty-tab, partial-data, empty stat
   tile, minimal POI, low-confidence crowd meter, region list)
   ======================================================================== */


/* ---------------------------------------------------------------
   0. SHARED · provenance EMPTY / source-pending  (brief item 1b)
   The locked rule: every fact carries where it came from. The gap
   was the NULL case. .pg-prov--none is the fourth state, so a value
   can never appear with no provenance signal at all. Neutral, never
   alarming: it says "not yet verified", not "wrong".
   --------------------------------------------------------------- */
.pg-prov--none {
  background: var(--paper); color: var(--fg-3);
  border: 1px dashed var(--rule);
}
.pg-prov--none .pg-prov__dot {
  background: transparent; border: 1px solid var(--fg-3);
  width: 7px; height: 7px;
}
/* A value we are still sourcing: muted, italic, paired with --none */
.pg-pending {
  color: var(--fg-3); font-style: italic; font-weight: 400;
}

/* The 4-state provenance legend (drop once per page where facts appear) */
.pg-prov-legend--full { gap: 10px 16px; }

/* ---------------------------------------------------------------
   1. BERTH STATES  (brief item 3)
   .pg-berth already ships. v5 adds the three honest variants and a
   graceful UNKNOWN. Berth varies by ship, so unknown is the COMMON
   case, not the exception, and must read as a confident "it depends".
   Markup: add a modifier to .pg-berth and let the value/note speak.
   --------------------------------------------------------------- */

/* ALONGSIDE · the reassuring case. Gold icon stays, add a calm tick. */
.pg-berth--alongside .pg-berth__icon { background: rgba(212,184,106,0.18); color: var(--gold); }

/* TENDER · raise the warning. Amber icon, the flag is shown not hidden. */
.pg-berth--tender { background: var(--navy-ink); }
.pg-berth--tender .pg-berth__icon { background: rgba(183,121,31,0.28); color: #F0C879; }
.pg-berth--tender .pg-berth__value em { color: #F0C879; }
.pg-berth--tender .pg-berth__label { color: #F0C879; }
.pg-berth--tender .pg-berth__flag { display: inline-flex; }   /* override the hidden default */

/* VARIES / part-tender · both happen at this port depending on ship size */
.pg-berth--varies .pg-berth__icon { background: rgba(255,255,255,0.12); color: var(--gold); }

/* UNKNOWN · we do not hold it yet. Muted slab, dashed icon, honest line.
   Not navy-on-white alarm: a quiet "we will confirm this for your sailing". */
.pg-berth--unknown {
  background: var(--muted-fill); color: var(--navy-ink);
  border: 1px dashed var(--rule);
}
.pg-berth--unknown .pg-berth__icon {
  background: var(--card); color: var(--fg-3);
  border: 1px dashed var(--rule);
}
.pg-berth--unknown .pg-berth__label { color: var(--fg-3); }
.pg-berth--unknown .pg-berth__value { color: var(--navy-soft); }
.pg-berth--unknown .pg-berth__value em { color: var(--fg-3); }
.pg-berth--unknown .pg-berth__note { color: var(--fg-2); }
.pg-berth--unknown .pg-berth__ask {
  display: inline-flex; align-items: center; gap: 7px; align-self: center;
  font-family: var(--sans); font-size: 13px; font-weight: 600;
  color: var(--navy-ink); background: var(--card);
  border: 1px solid var(--rule); border-radius: var(--r-4);
  padding: 9px 14px; min-height: 40px; text-decoration: none;
}
.pg-berth--unknown .pg-berth__ask:hover { border-color: var(--gold); text-decoration: none; }
.pg-berth--unknown .pg-berth__ask svg { width: 15px; height: 15px; color: var(--gold-hover); }

/* a provenance chip can sit inside the berth banner head, inverted for navy */
.pg-berth__prov {
  display: inline-flex; align-items: center; gap: 5px; align-self: flex-start;
  font-family: var(--sans); font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em;
  padding: 2px 8px; border-radius: var(--r-4);
  background: rgba(255,255,255,0.14); color: rgba(255,255,255,0.92);
}
.pg-berth--unknown .pg-berth__prov { background: var(--card); color: var(--fg-3); border: 1px dashed var(--rule); }

/* ---------------------------------------------------------------
   2. NO-IMAGE TYPOGRAPHIC HERO  (brief item 2)
   The shipped fallback (.pg-hero__placeholder--missing) hides the
   port name at 18% opacity, so a no-photo port reads as a broken
   image well. v5 turns absence into a deliberate type-led hero:
   navy ground, a faint oversized initial, full-strength content.
   Add .pg-hero--type to .pg-hero and drop .pg-hero__image entirely.
   --------------------------------------------------------------- */
.pg-hero--type {
  background:
    radial-gradient(120% 120% at 85% 0%, var(--navy-soft) 0%, var(--navy) 45%, var(--navy-ink) 100%);
}
.pg-hero--type .pg-hero__type {
  position: relative;
  min-height: 320px;
  display: flex; align-items: flex-end;
  overflow: hidden;
}
@media (min-width: 768px) { .pg-hero--type .pg-hero__type { min-height: 440px; } }
/* the faint giant initial, bottom-right, clipped */
.pg-hero__ghost {
  position: absolute; right: -0.08em; bottom: -0.22em; margin: 0;
  font-family: var(--serif); font-weight: 500; font-style: italic;
  font-size: 360px; line-height: 0.8; letter-spacing: -0.04em;
  color: rgba(212,184,106,0.10);
  pointer-events: none; user-select: none;
}
@media (max-width: 767px) { .pg-hero__ghost { font-size: 220px; } }
/* a thin gold rule keeps it from feeling empty up top */
.pg-hero--type .pg-hero__overlay { position: relative; inset: auto; }
.pg-hero--type .pg-hero__overlay .pg-container { padding-top: 40px; }
.pg-hero--type .pg-hero__title { position: relative; }
/* eyebrow gets a small gold tick so the band reads as intentional */
.pg-hero--type .pg-hero__eyebrow::before {
  content: ""; display: inline-block; width: 22px; height: 2px;
  background: var(--gold); vertical-align: middle; margin-right: 10px;
}
/* when a hero photo is simply pending (not a permanent type hero) */
.pg-hero__photo-pending {
  position: absolute; top: 16px; right: 16px; z-index: 2;
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--sans); font-size: 11px; font-weight: 600;
  color: rgba(255,255,255,0.75);
  background: rgba(26,32,54,0.45); border: 1px solid rgba(255,255,255,0.16);
  border-radius: var(--r-4); padding: 5px 10px; backdrop-filter: blur(3px);
}
.pg-hero__photo-pending svg { width: 13px; height: 13px; }

/* ---------------------------------------------------------------
   3. EMPTY-TAB STATE  (brief item 2)
   When a whole tab holds no rows, never show an empty heading. Show
   a calm panel: icon, what the tab will hold, why it is blank, and a
   way forward (Ask AI / in research). One component, any tab.
   --------------------------------------------------------------- */
.pg-empty {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 6px; padding: 44px 28px; max-width: 460px; margin: 8px auto;
  background: var(--card); border: 1px solid var(--rule);
  border-radius: var(--r-8);
}
.pg-empty__icon {
  width: 52px; height: 52px; margin-bottom: 6px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--muted-fill); color: var(--navy-soft);
}
.pg-empty__icon svg { width: 26px; height: 26px; }
.pg-empty__title { font-family: var(--serif); font-weight: 500; font-size: 22px; color: var(--navy-ink); margin: 0; }
.pg-empty__body { font-size: 14px; color: var(--fg-2); line-height: 1.55; margin: 2px 0 0; max-width: 42ch; }
.pg-empty__status {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 12px;
  font-family: var(--sans); font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.1em; color: var(--fg-3);
  background: var(--muted-fill); border: 1px solid var(--rule);
  border-radius: var(--r-4); padding: 6px 12px;
}
.pg-empty__status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); flex-shrink: 0; }
.pg-empty__cta {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 16px;
  font-family: var(--sans); font-size: 14px; font-weight: 600;
  color: #fff; background: var(--navy); border: 1px solid var(--navy);
  border-radius: var(--r-4); padding: 11px 18px; min-height: 44px; text-decoration: none;
}
.pg-empty__cta:hover { background: var(--navy-ink); color: #fff; text-decoration: none; }
.pg-empty__cta svg { width: 16px; height: 16px; color: var(--gold); }

/* ---------------------------------------------------------------
   4. PARTIAL-DATA NOTE  (brief item 2)
   When a tab has SOME data but key tiles are missing, lead with the
   data we hold and add this honest one-liner rather than blank tiles.
   --------------------------------------------------------------- */
.pg-partial {
  display: flex; align-items: flex-start; gap: 9px;
  margin: 0 0 16px; padding: 10px 14px;
  background: var(--muted-fill); border: 1px solid var(--rule);
  border-left: 3px solid var(--gold); border-radius: var(--r-6);
  font-size: 13px; line-height: 1.5; color: var(--fg-2);
}
.pg-partial__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gold); flex-shrink: 0; margin-top: 4px; }
.pg-partial b { color: var(--navy-ink); font-weight: 600; }

/* ---------------------------------------------------------------
   5. AWAITING-DATA  (ratified 3 Jul 2026, first-class empty state)
   The THIRD empty behaviour, alongside hide and the loud in-research card.
   Use when a slot is KNOWN to exist for this entity and its absence is
   itself informative (a terminal that has parking, hours, wi-fi, we just
   have not filled them). Keep the container SHAPE, mark it awaiting, name
   the slot. Never for slots that simply do not apply, those HIDE.

   THE RULE (binder honours per slot from the manifest):
   - empty_behaviour = hide     -> slot removed, no trace. Optional or N/A
                                   data (a museum's ticket price on a park).
   - empty_behaviour = await    -> THIS. Structural slot the entity should
                                   have; keep shape, show .awaiting + slot tag.
   - empty_behaviour = research -> the loud .pg-empty in-research card. A
                                   whole section/feature not yet built.
   One entity, one slot: the manifest decides which of the three applies.
   --------------------------------------------------------------- */
.awaiting {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--sans); font-size: 13px; font-weight: 500; font-style: italic; color: var(--fg-3);
}
.awaiting::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  border: 1px solid var(--fg-3); background: transparent; flex-shrink: 0;
}
/* a tile/card kept at full shape while its value is awaited */
.is-awaiting {
  background: repeating-linear-gradient(-45deg, var(--card), var(--card) 7px, var(--paper) 7px, var(--paper) 14px);
}
.is-awaiting .awaiting { font-size: 14px; }
/* the machine-readable slot name, so a build reviewer sees exactly what is missing */
.slot-tag, .chip--pending {
  display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px;
  border-radius: var(--r-4); font-family: var(--mono); font-size: 11px; font-weight: 500;
  background: var(--paper); color: var(--fg-3); border: 1px dashed var(--rule);
  line-height: 1; white-space: nowrap; font-style: normal;
}

/* ---------------------------------------------------------------
   5. EMPTY STAT TILE  (brief item 2)
   Crowd / weather / berth / arrival tiles when the figure is absent.
   The label stays (so the grid keeps its shape), the value reads
   "Not yet held" in muted type with a source-pending chip. Dashed
   fill marks it as a hole we will fill, not a zero.
   Works as a modifier on .pg-arrival-stat and .poi-core-stat.
   --------------------------------------------------------------- */
.pg-stat--empty,
.pg-arrival-stat--empty,
.poi-core-stat--empty {
  background: repeating-linear-gradient(
    -45deg, var(--card), var(--card) 7px, var(--paper) 7px, var(--paper) 14px) !important;
}
.pg-arrival-stat--empty .pg-arrival-stat__val,
.poi-core-stat--empty .poi-core-stat__val,
.pg-stat--empty .pg-stat__val {
  color: var(--fg-3); font-style: italic; font-weight: 400; font-size: 16px;
}
.pg-stat__empty-line {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--sans); font-size: 13px; font-weight: 500; font-style: normal;
  color: var(--fg-3);
}
.pg-stat__empty-line svg { width: 13px; height: 13px; opacity: 0.7; }

/* a standalone empty stat block (overview stat strip: crowd/weather/berth) */
.pg-statgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--rule); border: 1px solid var(--rule); border-radius: var(--r-8); overflow: hidden; }
@media (min-width: 620px) { .pg-statgrid { grid-template-columns: repeat(4, 1fr); } }
.pg-stat { background: var(--card); padding: 16px 18px; display: flex; flex-direction: column; gap: 5px; }
.pg-stat__lbl { font-family: var(--sans); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--fg-3); display: flex; align-items: center; gap: 6px; }
.pg-stat__lbl svg { width: 14px; height: 14px; color: var(--navy-soft); }
.pg-stat__val { font-family: var(--serif); font-weight: 500; font-size: 24px; color: var(--navy-ink); line-height: 1.1; }
.pg-stat__sub { font-size: 11px; color: var(--fg-3); }

/* ---------------------------------------------------------------
   6. MINIMAL POI LAYOUT  (brief item 2)
   The honest floor for a place we have only just ingested: name,
   category, location, and ONE sourced fact. Never the full template
   with empty rows. Reads as a stub on purpose, with a clear "more as
   we research it" line. The POI detail route can ship on this.
   --------------------------------------------------------------- */
.poi-min {
  max-width: 640px;
  background: var(--card); border: 1px solid var(--rule);
  border-radius: var(--r-8); padding: 22px 24px;
}
.poi-min__cat {
  font-family: var(--sans); font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.1em; color: var(--fg-3);
}
.poi-min__name {
  font-family: var(--serif); font-weight: 500; font-size: 28px;
  color: var(--navy-ink); line-height: 1.1; margin: 4px 0 0;
}
.poi-min__name em { font-style: italic; color: var(--gold); }
.poi-min__loc {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 10px;
  font-size: 14px; color: var(--fg-2);
}
.poi-min__loc svg { width: 15px; height: 15px; color: var(--navy-soft); flex-shrink: 0; }
.poi-min__fact {
  display: flex; flex-direction: column; gap: 4px; margin-top: 18px;
  padding: 14px 16px; background: var(--muted-fill);
  border: 1px solid var(--rule); border-radius: var(--r-6);
}
.poi-min__fact-lbl {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--sans); font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.1em; color: var(--fg-3);
}
.poi-min__fact-val { font-size: 15px; font-weight: 500; color: var(--navy-ink); line-height: 1.4; }
.poi-min__more {
  display: flex; align-items: center; gap: 8px; margin-top: 16px;
  font-size: 13px; color: var(--fg-3); line-height: 1.5;
}
.poi-min__more svg { width: 15px; height: 15px; flex-shrink: 0; opacity: 0.7; }

/* ---------------------------------------------------------------
   7. HONEST-CONFIDENCE CROWD METER  (brief item 8)
   The crowd-by-time strip is COMPUTED from cruise call overlap. For a
   port with few calls, a confident solid bar over-claims. The low-conf
   variant hatches the fills and adds a plain note, so a thin sample
   never looks like a hard measurement. Add .poi-crowd--lowconf.
   --------------------------------------------------------------- */
.poi-crowd--lowconf .poi-crowd__fill {
  background-image: repeating-linear-gradient(
    -45deg, rgba(255,255,255,0.55), rgba(255,255,255,0.55) 3px, transparent 3px, transparent 6px) !important;
}
.poi-crowd--lowconf .poi-crowd__slot[data-level="low"]    .poi-crowd__fill { background-color: var(--ok); }
.poi-crowd--lowconf .poi-crowd__slot[data-level="medium"] .poi-crowd__fill { background-color: var(--warn-ink); }
.poi-crowd--lowconf .poi-crowd__slot[data-level="high"]   .poi-crowd__fill { background-color: var(--bad); }
.poi-crowd--lowconf .poi-crowd__lvl { opacity: 0.75; }
/* the confidence note (reuses crowd note shell, neutral not blue) */
.poi-crowd__conf {
  display: flex; align-items: flex-start; gap: 9px; margin: 14px 0 0; padding: 11px 13px;
  background: var(--muted-fill); border: 1px dashed var(--rule); border-radius: var(--r-6);
  font-size: 13px; line-height: 1.5; color: var(--fg-2);
}
.poi-crowd__conf b { color: var(--navy-ink); }
.poi-crowd__conf-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--fg-3); flex-shrink: 0; margin-top: 4px; }
/* a small confidence tag for the strip head */
.poi-crowd__sample {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--sans); font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.07em; color: var(--fg-3);
  background: var(--paper); border: 1px dashed var(--rule);
  border-radius: var(--r-4); padding: 2px 8px;
}

@media (prefers-reduced-motion: reduce) {
  .pg-berth--unknown .pg-berth__ask, .pg-empty__cta { transition: none !important; }
}

/* ============================================================
   REGION LIST · one region per row (2026-06-15)
   Image left, structured data right: top ports, best for, when to
   cruise. Replaces the region card scroller on regions.html. The
   whole row is the link to that region's port guides.
   Visual only. Tokens only. UK English. No em dashes. No emoji.
   ============================================================ */
.pg-region-list { display: flex; flex-direction: column; gap: 18px; }

.pg-region-row {
  display: grid; grid-template-columns: 1fr;
  background: var(--card); border: 1px solid var(--rule);
  border-radius: var(--r-6); overflow: hidden;
  text-decoration: none; color: var(--navy-ink);
  transition: border-color .15s ease, box-shadow .15s ease;
}
@media (min-width: 860px) { .pg-region-row { grid-template-columns: minmax(260px, 34%) 1fr; } }
.pg-region-row:hover { border-color: var(--gold); box-shadow: var(--sh-md); text-decoration: none; color: var(--navy-ink); }
.pg-region-row:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }

.pg-region-row__media {
  position: relative; min-height: 200px;
  background: linear-gradient(135deg, #2C344C, #1A2036);
  background-size: cover; background-position: center;
}
@media (min-width: 860px) { .pg-region-row__media { min-height: 100%; } }
/* the "image coming soon" marker reuses .pg-media-soon from _styles.css */

.pg-region-row__body { padding: 22px 26px 20px; display: flex; flex-direction: column; }

.pg-region-row__eyebrow {
  font-family: var(--sans); font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.1em; color: var(--fg-3);
  display: flex; align-items: center; gap: 9px;
}
.pg-region-row__eyebrow::before { content: ""; width: 20px; height: 2px; background: var(--gold); flex-shrink: 0; }

.pg-region-row__name {
  font-family: var(--serif); font-weight: 500; font-size: 27px;
  color: var(--navy-ink); line-height: 1.12; margin: 8px 0 0;
}
.pg-region-row__name em { font-style: normal; color: var(--gold); }

.pg-region-row__hook { font-size: 14.5px; color: var(--fg-2); line-height: 1.55; margin: 9px 0 0; max-width: 62ch; }

.pg-region-row__data { display: grid; grid-template-columns: 1fr; margin-top: 18px; border-top: 1px solid var(--rule); }
@media (min-width: 560px) { .pg-region-row__data { grid-template-columns: repeat(3, 1fr); } }
.pg-region-row__cell { display: flex; flex-direction: column; gap: 5px; }
@media (min-width: 560px) {
  .pg-region-row__cell { padding: 15px 20px; border-left: 1px solid var(--rule); }
  .pg-region-row__cell:first-child { padding-left: 0; border-left: 0; }
  .pg-region-row__cell:last-child { padding-right: 0; }
}
@media (max-width: 559px) {
  .pg-region-row__cell { padding: 12px 0; border-top: 1px solid var(--rule); }
  .pg-region-row__cell:first-child { border-top: 0; }
}
.pg-region-row__cell-lbl {
  font-family: var(--sans); font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.1em; color: var(--fg-3);
}
.pg-region-row__cell-val { font-size: 13.5px; color: var(--navy-ink); line-height: 1.45; }

.pg-region-row__foot {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--rule);
}
.pg-region-row__count { font-size: 13px; color: var(--fg-3); }
.pg-region-row__count b { color: var(--navy-ink); font-weight: 600; }
.pg-region-row__go {
  display: inline-flex; align-items: center; gap: 7px; flex-shrink: 0;
  font-family: var(--sans); font-size: 13px; font-weight: 600; color: var(--navy-ink);
}
.pg-region-row__go svg { width: 15px; height: 15px; color: var(--gold-hover); transition: transform .15s ease; }
.pg-region-row:hover .pg-region-row__go svg { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) {
  .pg-region-row, .pg-region-row__go svg { transition: none !important; }
}



/* ========================================================================
   LAYER 5 · V5 CLEAN REWORK  (from master _v5.css: DIY-or-tour module,
   equal-size grid utility, sensory-load blocks that replaced the dropdown)
   ======================================================================== */


/* =====================================================================
   1 · DIY OR THE SHIP'S TOUR  (.pg-diy)  facts only
   ===================================================================== */
.pg-diy {
  border: 1px solid var(--rule); border-top: 3px solid var(--gold);
  border-radius: var(--r-6); background: var(--card); overflow: hidden;
}
.pg-diy__head { padding: 20px 22px 0; }
.pg-diy__eyebrow {
  font-family: var(--sans); font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .12em; color: var(--fg-3);
  margin: 0 0 7px;
}
.pg-diy__title {
  font-family: var(--serif); font-weight: 500; font-size: 25px;
  line-height: 1.15; letter-spacing: -.01em; color: var(--navy-ink); margin: 0 0 8px;
}
@media (min-width:768px){ .pg-diy__title { font-size: 30px; } }
.pg-diy__body { font-size: 15px; color: var(--fg-1); line-height: 1.55; margin: 0; max-width: 64ch; }
.pg-diy__body strong { color: var(--navy-ink); font-weight: 600; }

.pg-diy__chain {
  display: grid; gap: 1px; background: var(--rule);
  border-top: 1px solid var(--rule); margin-top: 18px;
  grid-template-columns: repeat(5, 1fr);
}
@media (max-width:760px){ .pg-diy__chain { grid-template-columns: repeat(2, 1fr); } }
@media (max-width:420px){ .pg-diy__chain { grid-template-columns: 1fr; } }
.pg-diy__step {
  background: var(--card); padding: 14px 16px 15px;
  display: flex; flex-direction: column; gap: 4px;
}
.pg-diy__step-label {
  font-family: var(--sans); font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .1em; color: var(--fg-3);
}
.pg-diy__step-value {
  font-family: var(--serif); font-weight: 500; font-size: 21px;
  color: var(--navy-ink); line-height: 1.1;
}
.pg-diy__step-value small { font-family: var(--sans); font-size: 12px; font-weight: 600; color: var(--fg-3); }
.pg-diy__step-note { font-size: 12px; color: var(--fg-2); line-height: 1.4; }
.pg-diy__step--flag .pg-diy__step-value { color: var(--warn-ink); }

/* be-back-by callout · standing rule only, never a time (content contract B) */
.pg-diy__back {
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px;
  background: var(--navy-ink); color: #fff; padding: 16px 22px;
}
.pg-diy__back-label {
  font-family: var(--sans); font-size: 10.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .12em; color: rgba(255,255,255,.55);
}
.pg-diy__back-rule { font-size: 13.5px; color: rgba(255,255,255,.86); line-height: 1.55; max-width: 70ch; margin: 0; }
.pg-diy__foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 8px 18px; padding: 13px 22px; background: var(--paper);
  border-top: 1px solid var(--rule);
}
.pg-diy__link {
  font-family: var(--sans); font-size: 12px; font-weight: 600;
  color: var(--navy-ink); text-decoration: none;
  display: inline-flex; align-items: center; gap: 6px;
}
.pg-diy__link:hover { color: var(--navy); text-decoration: underline; text-underline-offset: 3px; }

/* =====================================================================
   2 · BALANCED EQUAL-SIZE GRID  ([data-equal-grid])
   Columns are set by a small script from the visible child count:
   1 to 3 stay one row; otherwise min(4, ceil(n/2)). So 4 -> 2x2, 6 -> 3x2,
   8 -> 4x2. Every cell is equal width and height. Falls back to 2 columns
   if the script has not run.
   ===================================================================== */
[data-equal-grid] {
  display: grid; gap: 8px; align-items: stretch;
  grid-template-columns: repeat(var(--eqg-cols, 2), minmax(0, 1fr));
}
[data-equal-grid] > * { width: 100%; height: 100%; margin: 0; box-sizing: border-box; }
@media (max-width: 600px) { [data-equal-grid] { grid-template-columns: 1fr; } }

/* =====================================================================
   3 · SENSORY LOAD BLOCKS  (.sx-blocks)  replaced the dropdown
   Four always-visible tiles (Noise, Crowds, Queues, Heat), colour and value
   by level. Sits full width in a what's-on card foot.
   ===================================================================== */
.sx-wrap { width: 100%; flex-basis: 100%; margin-top: 8px; }
.sx-wrap__cap {
  display: block; font-family: var(--sans); font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .1em; color: var(--fg-3); margin-bottom: 6px;
}
.sx-block {
  border-radius: var(--r-4); padding: 7px 9px;
  display: flex; flex-direction: column; gap: 2px; background: var(--muted-fill);
}
.sx-block__lbl {
  font-family: var(--sans); font-size: 10px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .08em; color: var(--fg-3);
}
.sx-block__val { font-family: var(--sans); font-size: 13px; font-weight: 700; color: var(--navy-ink); }
.sx-block--ok   { background: var(--ok-soft); }   .sx-block--ok .sx-block__val   { color: var(--ok-ink); }
.sx-block--warn { background: var(--warn-soft); } .sx-block--warn .sx-block__val { color: var(--warn-ink); }
.sx-block--bad  { background: var(--bad-soft); }  .sx-block--bad .sx-block__val  { color: var(--bad-ink); }
/* keep the four blocks compact (2x2) on phones rather than a tall single column */
@media (max-width: 600px) { .sx-blocks[data-equal-grid] { grid-template-columns: repeat(2, 1fr); } }



/* ========================================================================
   LAYER 6 · A11Y COMPONENTS  (body token apply, nav Access controls, the
   Access panel, mobile nav drawer, footer utility row, account/auth nav).
   The reader-mode token overrides moved to _tokens.css.
   ======================================================================== */
/* -- 2. APPLY TOKENS TO BODY --------------------------------
   Overrides hardcoded values in _styles.css via cascade.
-------------------------------------------------------------- */
body {
  font-size:      var(--t-base);
  line-height:    var(--lh);
  letter-spacing: var(--ls);
  word-spacing:   var(--ws);
}

/* -- 3. NAV ACCESS BUTTON GROUP -----------------------------
   Sits between .pg-site-nav__links and .pg-site-nav__cta.
   Hidden on mobile (same breakpoint as primary nav links).
-------------------------------------------------------------- */
.pg-a11y-btns {
  display: none;
  align-items: center;
  gap: 4px;
}
@media (min-width: 900px) {
  .pg-a11y-btns { display: flex; }
}

/* -- 4. DROPDOWN SHELL (Access panel only) ------------------
   Ghost button on dark navy. Gold focus ring (site standard).
-------------------------------------------------------------- */
.dd {
  position: relative;
}
/* Access: a quiet light control, not a boxed button (calmer header). */
.dd-btn {
  display:         inline-flex;
  align-items:     center;
  gap:             6px;
  background:      none;
  border:          0;
  color:           rgba(255,255,255,.78);
  font-family:     var(--sans);
  font-weight:     500;
  font-size:       13px;
  letter-spacing:  0;
  border-radius:   var(--r-4);
  padding:         8px 10px;
  min-height:      44px;
  cursor:          pointer;
  transition:      background .15s, color .15s;
  white-space:     nowrap;
}
.dd-btn:hover {
  background: rgba(255,255,255,.10);
  color:      #fff;
}
.dd-btn:focus-visible {
  outline:        3px solid var(--gold);
  outline-offset: 3px;
  border-radius:  var(--r-4);
}
.dd-btn .caret {
  opacity:     .8;
  transition:  transform .15s;
  flex-shrink: 0;
}
.dd[data-open="true"] .dd-btn .caret {
  transform: rotate(180deg);
}
.dd-panel {
  position:      absolute;
  right:         0;
  top:           calc(100% + 10px);
  background:    var(--card);
  color:         var(--fg-1);
  border:        1px solid var(--rule);
  border-top:    2px solid var(--gold);
  border-radius: var(--r-6);
  box-shadow:    var(--sh-lg);
  padding:       6px;
  min-width:     168px;
  display:       none;
  z-index:       90;
}
.dd[data-open="true"] .dd-panel {
  display: block;
}

/* -- 5. ACCESSIBILITY PANEL ---------------------------------
   Five controls: text size, reading font, spacing,
   contrast, motion. CruisePort navy + gold palette.
-------------------------------------------------------------- */
.a11y-panel {
  min-width: 258px;
  padding:   14px;
}
.a11y-panel__title {
  font-family: var(--serif);
  font-weight: 500;
  font-size:   17px;
  color:       var(--navy-ink);
  margin:      0 0 3px;
  line-height: 1.2;
}
.a11y-panel__sub {
  font-size:   12px;
  color:       var(--fg-3);
  margin:      0 0 12px;
  line-height: 1.4;
}
.a11y-row {
  padding:    10px 0;
  border-top: 1px solid var(--rule);
}
.a11y-row__lab {
  font-family:    var(--sans);
  font-weight:    700;
  font-size:      10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color:          var(--fg-2);
  display:        block;
  margin-bottom:  7px;
}
.seg {
  display:       inline-flex;
  border:        1px solid var(--rule);
  border-radius: var(--r-4);
  overflow:      hidden;
  width:         100%;
}
.seg button {
  flex:         1;
  border:       0;
  background:   var(--paper);
  cursor:       pointer;
  font-family:  var(--sans);
  font-weight:  600;
  font-size:    13px;
  color:        var(--fg-2);
  padding:      9px 6px;
  min-height:   44px;
  border-right: 1px solid var(--rule);
  line-height:  1;
  transition:   background .1s, color .1s;
}
.seg button:last-child  { border-right: 0; }
.seg button[aria-pressed="true"] { background: var(--navy); color: #fff; }
.seg button:focus-visible {
  outline:        3px solid var(--gold);
  outline-offset: -3px;
}
.a11y-reset {
  margin-top:    12px;
  width:         100%;
  background:    none;
  border:        1px solid var(--rule);
  border-radius: var(--r-4);
  padding:       9px;
  font-family:   var(--sans);
  font-weight:   600;
  font-size:     13px;
  color:         var(--fg-2);
  cursor:        pointer;
  min-height:    44px;
  transition:    background .1s;
}
.a11y-reset:hover { background: var(--muted-fill); }
.a11y-reset:focus-visible {
  outline:        3px solid var(--gold);
  outline-offset: 2px;
}

/* -- 6. FOOTER LANGUAGE SELECTOR ----------------------------
   Inline language pills in the footer bottom bar.
   Built dynamically by _a11y.js from the LANGS array.
   Only languages present in LANGS are rendered · add a
   language to LANGS (and its strings to i18n.js) to show it.
-------------------------------------------------------------- */
.pg-footer-lang {
  display:     flex;
  align-items: center;
  gap:         4px;
}
.pg-footer-lang__btn {
  appearance:     none;
  background:     none;
  border:         1px solid rgba(255,255,255,.18);
  border-radius:  var(--r-4);
  color:          rgba(255,255,255,.5);
  font-family:    var(--sans);
  font-size:      11px;
  font-weight:    700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding:        4px 10px;
  min-height:     28px;
  cursor:         pointer;
  transition:     color .12s, border-color .12s;
}
.pg-footer-lang__btn:hover {
  color:        #fff;
  border-color: rgba(255,255,255,.4);
}
.pg-footer-lang__btn[aria-current="true"] {
  color:        var(--gold);
  border-color: var(--gold);
  cursor:       default;
}
.pg-footer-lang__btn:focus-visible {
  outline:        3px solid var(--gold);
  outline-offset: 2px;
}

/* -- 6b. MOBILE NAV DRAWER (burger, < 900px) ----------------
   Carries the primary nav + the Access controls on phones
   and tablets, where the desktop nav and Access group hide. */
.pg-mnav__scrim {
  position: fixed; inset: 0; background: rgba(8,12,20,.5);
  z-index: 95; opacity: 0; transition: opacity .22s ease;
}
.pg-mnav__scrim[data-open="true"] { opacity: 1; }
.pg-mnav {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: min(86vw, 340px); background: var(--paper);
  z-index: 96; transform: translateX(100%);
  transition: transform .24s ease;
  display: flex; flex-direction: column; overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  box-shadow: var(--sh-lg);
}
.pg-mnav[data-open="true"] { transform: none; }
.pg-mnav__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 18px; border-bottom: 1px solid var(--rule);
  position: sticky; top: 0; background: var(--paper);
}
.pg-mnav__brand { font-family: var(--serif); font-weight: 600; font-size: 19px; color: var(--navy-ink); }
.pg-mnav__brand .ai { color: var(--gold); font-style: italic; }
.pg-mnav__close {
  width: 40px; height: 40px; flex-shrink: 0;
  border: 1px solid var(--rule); border-radius: var(--r-4);
  background: var(--card); color: var(--navy-ink);
  font-size: 22px; line-height: 1; cursor: pointer;
}
.pg-mnav__close:hover { border-color: var(--gold); }
.pg-mnav__links { display: flex; flex-direction: column; padding: 6px 0; }
.pg-mnav__link {
  display: block; padding: 13px 18px;
  font-family: var(--sans); font-size: 16px; font-weight: 600;
  color: var(--navy-ink); text-decoration: none;
  border-bottom: 1px solid var(--rule); min-height: 44px;
}
.pg-mnav__link--sub { padding-left: 34px; font-weight: 500; font-size: 15px; color: var(--fg-2); }
.pg-mnav__link:hover { color: var(--gold-hover); }
.pg-mnav__cta { margin: 16px 18px 4px; text-align: center; text-decoration: none; display: block; }
.pg-mnav__access { padding: 4px 18px 28px; }
.pg-mnav__access .a11y-panel__title { font-family: var(--serif); font-weight: 500; font-size: 17px; color: var(--navy-ink); margin: 14px 0 3px; }
.pg-mnav__link:focus-visible,
.pg-mnav__close:focus-visible,
.pg-mnav__cta:focus-visible { outline: 3px solid var(--gold); outline-offset: -3px; }
@media (min-width: 900px) {
  .pg-mnav, .pg-mnav__scrim { display: none !important; }
}

/* -- 7. PRINT ---------------------------------------------- */
@media print {
  .pg-a11y-btns,
  .pg-footer-lang,
  .pg-site-footer__util { display: none !important; }
}

/* -- 8. FOOTER UTILITY ROW (app badges, coming soon · business login) --
   Injected above the copyright bar on every page with a standard footer.
   Light-on-dark to sit on the navy footer. Badges square at 4px per brand. */
.pg-site-footer__util {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 16px; margin-top: 8px; padding: 18px 0 4px;
  border-top: 1px solid rgba(255,255,255,0.12);
}
.pg-store-badges { display: flex; flex-wrap: wrap; gap: 10px; }
.pg-store-badge {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 7px 13px; border: 1px solid rgba(255,255,255,0.28);
  border-radius: 4px; background: rgba(255,255,255,0.04);
  color: rgba(255,255,255,0.92); cursor: default;
}
.pg-store-badge__logo { width: 19px; height: 19px; flex-shrink: 0; }
.pg-store-badge__txt { display: flex; flex-direction: column; line-height: 1.15; text-align: left; }
.pg-store-badge__txt small { font-family: var(--sans); font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: rgba(255,255,255,0.6); }
.pg-store-badge__txt strong { font-family: var(--serif); font-size: 14px; font-weight: 500; }
.pg-site-footer__biz {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--sans); font-size: 13px; font-weight: 600;
  color: rgba(255,255,255,0.85); text-decoration: none;
  padding: 9px 15px; border: 1px solid rgba(255,255,255,0.28); border-radius: 4px;
}
.pg-site-footer__biz:hover { color: var(--gold); border-color: var(--gold); }
.pg-site-footer__biz svg { width: 15px; height: 15px; flex-shrink: 0; }
/* Business login page is built but held for a later phase: link hidden site-wide.
   To launch it, delete this one rule. */
.pg-site-footer__biz { display: none !important; }
.pg-site-footer__biz:focus-visible,
.pg-store-badge:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
@media (max-width: 560px) {
  .pg-site-footer__util { flex-direction: column; align-items: flex-start; }
}

/* -- 9. ACCOUNT / AUTH NAV (Sign in · avatar menu) ------------ */
.pg-acct {
  position: relative; display: flex; align-items: center;
  /* Faint divider sets the utility group (Sign in · Access) apart from nav. */
  border-left: 1px solid rgba(255,255,255,.14);
  padding-left: 14px; margin-left: 2px;
}
/* Sign in: readable on the navy bar (was navy-on-navy), kept as the one
   subtle outlined affordance so the single auth action stays findable. */
.pg-acct__signin {
  font-family: var(--sans); font-size: 13px; font-weight: 600;
  color: #fff; text-decoration: none;
  padding: 7px 15px; border: 1px solid rgba(255,255,255,.24); border-radius: var(--r-4);
  white-space: nowrap; transition: border-color .15s, color .15s, background .15s;
}
.pg-acct__signin:hover { border-color: var(--gold); color: var(--gold); background: rgba(255,255,255,.04); }
.pg-acct__avatar {
  width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
  background: var(--gold); color: var(--navy-ink); border: 0; cursor: pointer;
  font-family: var(--serif); font-weight: 600; font-size: 16px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  transition: box-shadow .15s;
}
.pg-acct__avatar:hover { box-shadow: 0 0 0 3px rgba(212,184,106,0.3); }
.pg-acct__menu {
  position: absolute; top: calc(100% + 12px); right: 0; min-width: 236px;
  background: var(--card); border: 1px solid var(--rule);
  border-radius: var(--r-8); box-shadow: var(--sh-lg); padding: 6px; z-index: 70;
}
.pg-acct__head { display: flex; flex-direction: column; gap: 1px; padding: 9px 12px 9px; margin: 0 0 4px; border-bottom: 1px solid var(--rule); }
.pg-acct__head strong { font-family: var(--serif); font-weight: 500; font-size: 15px; color: var(--navy-ink); }
.pg-acct__head span { font-family: var(--sans); font-size: 11px; color: var(--fg-3); }
.pg-acct__item {
  display: flex; flex-direction: column; gap: 1px; width: 100%;
  padding: 9px 12px; border: 0; border-radius: var(--r-4); background: none;
  font-family: var(--sans); font-size: 14px; font-weight: 600;
  color: var(--navy-ink); text-decoration: none; text-align: left; cursor: pointer;
}
.pg-acct__item small { font-weight: 400; font-size: 11px; color: var(--fg-3); }
.pg-acct__item:hover { background: var(--muted-fill); }
.pg-acct__item--signout { color: var(--fg-2); border-top: 1px solid var(--rule); border-radius: 0; margin-top: 4px; padding-top: 11px; }
.pg-acct__avatar:focus-visible,
.pg-acct__signin:focus-visible,
.pg-acct__item:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.pg-mnav__signout { color: var(--fg-2); background: none; border: 0; border-bottom: 1px solid var(--rule); text-align: left; cursor: pointer; font-family: var(--sans); font-size: 16px; font-weight: 600; }
/* On phones the drawer owns account; hide the header control below the nav breakpoint. */
@media (max-width: 900px) { .pg-acct { display: none; } }

/* -- Explore filter: empty-result state --------------------- */
.pg-pills__empty { margin: 18px 0 4px; font-size: 14px; color: var(--fg-2); display: flex; align-items: center; gap: 12px; }
.pg-pills__clear { font-family: var(--sans); font-size: 13px; font-weight: 600; color: var(--navy-ink); background: none; border: 1px solid var(--rule); border-radius: 4px; padding: 6px 12px; cursor: pointer; }
.pg-pills__clear:hover { border-color: var(--gold); color: var(--gold-hover); }
.pg-pills__clear:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }


/* ========================================================================
   v6 SITE PASS  (full-site consolidation, 2026-06-28)
   ======================================================================== */

/* Decision 22: no per-fact provenance badges anywhere. The .pg-prov and
   poi-provenance families are retired site-wide. Trust is one blanket footer
   line plus the How we work page, and a venue-supplied "Verified" mark only.
   Hidden here so no page shows a SOURCED / COMPUTED / ESTIMATED / NOT-HELD
   badge; the markup is removed when each page is wired. */
[class*="pg-prov"], [class*="poi-provenance"] { display: none !important; }

/* One reduced-motion contract: this global block plus the
   html[data-motion="reduced"] override in _tokens.css. The older per-component
   prefers-reduced-motion blocks above are now redundant. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* One segmented-toggle idiom. Every press-to-select control shares the navy
   fill on press. The ten historical names extend this one base, keeping their
   own aria-pressed / aria-selected hooks for the JS. */
:where(.it-seg__btn, .it-daychip, .it-pass, .pg-filter-pill, .poi-switch__btn,
       .plan-route-btn, .dp-duration__btn, .pg-toggle, .pg-rv-tag, .pg-rv-star)[aria-pressed="true"],
:where(.it-seg__btn, .it-daychip, .it-pass, .pg-filter-pill, .poi-switch__btn,
       .plan-route-btn, .dp-duration__btn, .pg-toggle, .pg-rv-tag, .pg-rv-star)[aria-selected="true"] {
  background: var(--navy); color: #fff; border-color: var(--navy);
}

/* Low-stimulation mode, site-wide (data-calm on <html>, set from the Access
   panel). Quiet-first: decorative hero imagery drops to flat navy, motion off.
   The sensory wedge expressed as a site setting, not just a planner toggle. */
html[data-calm] .pg-home-hero,
html[data-calm] .pg-page-head--hero,
html[data-calm] .pg-hero:not(.pg-hero--type),
html[data-calm] .dp-porthero {
  background: linear-gradient(180deg, var(--navy-soft), var(--navy-ink)) !important;
}
html[data-calm] *, html[data-calm] *::before, html[data-calm] *::after {
  animation: none !important; transition: none !important;
}

/* ========================================================================
   SENSORY: ENVIRONMENT TILE GRID + INTENSITY TILES  (v6)
   ======================================================================== */

/* Env-profile: 2-col mobile, 3-col desktop tile grid replacing the
   pg-fact-grid wall-of-text in the Sensory tab. Each tile binds one
   port_nd.* field. Only the six primary tiles are always shown; optional
   tiles carry data-show-if so they collapse cleanly on thin data. */
.nd-env-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px;
}
@media (min-width: 600px) { .nd-env-grid { grid-template-columns: 1fr 1fr 1fr; } }
.nd-env-tile {
  display: flex; flex-direction: column; gap: 4px;
  padding: 12px 13px; background: var(--muted-fill);
  border: 1px solid var(--rule); border-radius: var(--r-6);
}
.nd-env-tile__icon { width: 18px; height: 18px; color: var(--navy-soft); margin-bottom: 2px; flex-shrink: 0; }
.nd-env-tile__label {
  font-family: var(--sans); font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.1em; color: var(--fg-3);
}
.nd-env-tile__value { font-size: 13px; font-weight: 500; color: var(--fg-1); line-height: 1.35; }

/* Intensity tiles: compact 2-3 col grid, one tile per place.
   Score class (nd-int-tile--N) is set by an inline script after binding. */
.nd-int-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px;
}
@media (min-width: 600px) { .nd-int-grid { grid-template-columns: 1fr 1fr 1fr; } }
.nd-int-tile {
  padding: 12px 13px; border: 1px solid var(--rule); border-radius: var(--r-6);
  background: var(--card); border-left: 3px solid var(--rule);
}
.nd-int-tile__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 6px; margin-bottom: 6px; }
.nd-int-tile__name { font-size: 13px; font-weight: 600; color: var(--navy-ink); line-height: 1.25; flex: 1; }
.nd-int-tile__badge {
  flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%;
  font-family: var(--serif); font-weight: 600; font-size: 13px;
  background: var(--muted-fill); color: var(--fg-2); border: 1px solid var(--rule);
}
.nd-int-tile__desc { font-size: 11.5px; color: var(--fg-3); line-height: 1.4; }
/* Score 1-2: calm (green) */
.nd-int-tile--1, .nd-int-tile--2 { border-left-color: var(--ok-line); }
.nd-int-tile--1 .nd-int-tile__badge, .nd-int-tile--2 .nd-int-tile__badge { background: var(--ok-soft); color: var(--ok-ink); border-color: var(--ok-line); }
/* Score 3: moderate (amber) */
.nd-int-tile--3 { border-left-color: var(--warn-line); }
.nd-int-tile--3 .nd-int-tile__badge { background: var(--warn-soft); color: var(--warn-ink); border-color: var(--warn-line); }
/* Score 4-5: high (red) */
.nd-int-tile--4, .nd-int-tile--5 { border-left-color: var(--bad-line); }
.nd-int-tile--4 .nd-int-tile__badge, .nd-int-tile--5 .nd-int-tile__badge { background: var(--bad-soft); color: var(--bad-ink); border-color: var(--bad-line); }

/* Map link on quiet zones and sensory-friendly food mini cards */
.nd-mini__map {
  display: inline-flex; align-items: center; gap: 4px; margin-top: 8px;
  font-family: var(--sans); font-size: 11px; font-weight: 700;
  color: var(--navy-ink); text-decoration: none; opacity: 0.8;
}
.nd-mini__map:hover { opacity: 1; color: var(--gold-hover); }
.nd-mini__map svg { flex-shrink: 0; }

/* NOTE for the build window: the three 12-month bar widgets (.wx12, .season12,
   .poi-crowd / .cr) still repeat a track/fill/legend grid. Factor to one shared
   primitive once the three rules are diffed live, low value, render-neutral. */

/* ============================================================
   v6 UPDATE · Block 1 (sight detail) + image fallback + crowd
   Added this turn. Signed-off on the Claude Design review canvas.
   Tokens only, mobile-first, square chips, no raw hex outside _tokens.
   ============================================================ */

/* ---- branded no-image tile (designed, not broken) ----------------
   Every pois.image_url / hero.image_url slot falls back to this.
   Images are empty estate-wide today, so this is the norm: a brand
   plate, not a broken band. No apologetic copy. */
.poi-imgfall {
  width: 100%; position: relative; overflow: hidden;
  background: radial-gradient(120% 90% at 50% 18%, #36405C 0%, var(--navy) 46%, var(--navy-ink) 100%);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; color: #fff; gap: 12px;
}
.poi-imgfall::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.5;
  background-image: repeating-linear-gradient(135deg, rgba(255,255,255,0.028) 0 2px, transparent 2px 16px);
}
.poi-imgfall--hero { aspect-ratio: 16 / 10; }
.poi-imgfall__glyph { width: 46px; height: 46px; color: var(--gold); opacity: 0.92; position: relative; z-index: 1; }
.poi-imgfall__glyph svg { width: 100%; height: 100%; }
.poi-imgfall__name {
  font-family: var(--serif); font-weight: 500; font-size: 22px; line-height: 1.2;
  color: #F4F0E6; position: relative; z-index: 1; padding: 0 24px; max-width: 82%;
}
.poi-imgfall__cat {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.16em;
  color: rgba(212,184,106,0.92); position: relative; z-index: 1;
}
.poi-imgfall__mark {
  position: absolute; bottom: 12px; right: 14px; z-index: 1;
  font-size: 10px; font-weight: 700; letter-spacing: 0.04em; color: rgba(255,255,255,0.42);
}
.poi-imgfall__mark b { color: rgba(212,184,106,0.85); }
/* card thumbnail variant (explore-grid / related cards) */
.poi-imgfall--card { aspect-ratio: 16 / 9; gap: 7px; }
.poi-imgfall--card .poi-imgfall__glyph { width: 28px; height: 28px; }
.poi-imgfall--card .poi-imgfall__name { font-size: 15px; padding: 0 14px; }
.poi-imgfall--card .poi-imgfall__cat { font-size: 9px; letter-spacing: 0.12em; }
.poi-imgfall--card .poi-imgfall__mark { display: none; }
/* muted variant for lower-stakes gallery slots */
.poi-imgfall--muted { background: var(--muted-fill); aspect-ratio: 4 / 3; }
.poi-imgfall--muted::after { background-image: repeating-linear-gradient(135deg, rgba(44,52,76,0.04) 0 2px, transparent 2px 16px); opacity: 1; }
.poi-imgfall--muted .poi-imgfall__glyph { color: var(--fg-3); opacity: 0.6; width: 26px; height: 26px; }
.poi-imgfall--muted .poi-imgfall__name { color: var(--fg-2); font-size: 14px; }
.poi-imgfall--muted .poi-imgfall__cat { color: var(--fg-3); }
html[data-contrast="high"] .poi-imgfall { background: var(--navy); }

/* ---- verified-facts rail · the Tier-1 floor that carries the page ----
   Single column, no header label (verified-direct is the default state,
   not a stamp). Anchor fact tinted. Adapts to any fact count, sparse-first. */
.poi-vfacts {
  margin: 20px 0 0; border: 1px solid var(--rule); border-radius: var(--r-8);
  background: var(--card); overflow: hidden;
}
.poi-vfact {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  padding: 13px 16px; border-bottom: 1px solid var(--rule);
}
.poi-vfact:last-child { border-bottom: 0; }
.poi-vfact__lbl { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--fg-3); flex-shrink: 0; }
.poi-vfact__val { font-family: var(--sans); font-size: 15px; font-weight: 600; color: var(--navy-ink); line-height: 1.3; text-align: right; font-variant-numeric: tabular-nums; }
.poi-vfact__val em { font-style: normal; color: var(--gold); }
.poi-vfact--anchor { background: #FCFAF5; }
html[data-contrast="high"] .poi-vfact--anchor { background: var(--muted-fill); }
/* Open in maps · an action row, not a fact */
.poi-vfact--maps { text-decoration: none; cursor: pointer; align-items: center; }
.poi-vfact--maps:hover { background: #FCFAF5; }
.poi-vfact__maps { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--navy-ink); }
.poi-vfact__maps svg { width: 15px; height: 15px; color: var(--gold); flex-shrink: 0; }
.poi-vfact__chev { width: 16px; height: 16px; color: var(--fg-3); flex-shrink: 0; }

/* ---- best-time chip · the quietest measured band -------------------- */
.poi-besttime {
  display: inline-flex; align-items: center; gap: 6px; margin: 0 0 14px;
  padding: 5px 10px; border-radius: var(--r-4);
  background: var(--ok-soft); border: 1px solid var(--ok-line);
  font-size: 12px; font-weight: 700; color: var(--ok-ink);
}
.poi-besttime svg { width: 14px; height: 14px; color: var(--ok); flex-shrink: 0; }

/* ---- crowd · five MEASURED BestTime bands (0 to 100) ----------------
   The --measured variant reads the real value from an inline height, so
   data-level only drives colour (not a fixed 34/67/100 bucket). Five-band
   intraday across the 09:00 to 18:00 shore window. */
.poi-crowd--measured .poi-crowd__strip { grid-template-columns: repeat(5, 1fr); }
.poi-crowd--measured .poi-crowd__bar { height: 76px; }
.poi-crowd--measured .poi-crowd__slot[data-level="low"]    .poi-crowd__fill,
.poi-crowd--measured .poi-crowd__slot[data-level="medium"] .poi-crowd__fill,
.poi-crowd--measured .poi-crowd__slot[data-level="high"]   .poi-crowd__fill { height: auto; }
.poi-crowd__band { font-size: 10px; font-weight: 600; color: var(--fg-3); line-height: 1.2; }
.poi-crowd__axis { display: flex; justify-content: space-between; font-size: 9.5px; color: var(--fg-3); margin-top: 9px; font-weight: 600; }
/* single-axis fallback: ship-load known, per-venue bands not measured yet */
.poi-crowd__measuring {
  display: flex; align-items: flex-start; gap: 10px; padding: 14px;
  background: var(--muted-fill); border: 1px dashed var(--rule); border-radius: var(--r-6);
  font-size: 13px; color: var(--fg-3); line-height: 1.5;
}
.poi-crowd__measuring svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 1px; color: var(--fg-3); }

/* ============================================================
   DAY-AWARE crowd surfaces (3 Jul 2026)
   One canonical day selector (.dsel) governs every crowd surface on a
   page; the typical-day caveat (.day-caveat) is the honest fallback
   when only one representative day is held. Tokens only, mobile-first.
   ============================================================ */
.dsel { position: sticky; top: 0; z-index: 30; margin: 0 0 16px;
  background: var(--card); border: 1px solid var(--rule); border-radius: var(--r-8); }
.dsel__inner { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 12px; }
.dsel__lbl { display: inline-flex; align-items: center; gap: 6px; font-family: var(--sans);
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--fg-3); }
.dsel__lbl svg { width: 15px; height: 15px; color: var(--gold); }
.dsel__days { display: flex; gap: 4px; flex-wrap: wrap; }
.dsel__day { appearance: none; min-height: 44px; min-width: 44px; padding: 0 10px;
  border: 1px solid var(--rule); border-radius: var(--r-4); background: var(--paper);
  font-family: var(--sans); font-size: 13px; font-weight: 600; color: var(--navy-ink); cursor: pointer;
  transition: border-color .12s, background .12s; }
.dsel__day:hover { border-color: var(--gold); }
.dsel__day--on { background: var(--navy); border-color: var(--navy); color: #fff; }
.dsel__day--typical { font-style: italic; font-weight: 500; }
.dsel__day:focus-visible { outline: var(--focus-ring-w) solid var(--gold); outline-offset: var(--focus-offset); }
.dsel__showing { margin-left: auto; font-family: var(--sans); font-size: 12px; color: var(--fg-3); }
.dsel__showing b { color: var(--navy-ink); font-weight: 600; }
@media (max-width: 560px) { .dsel__showing { margin-left: 0; width: 100%; } }

/* typical-day caveat: the honest "we only hold one representative day" line */
.day-caveat { display: inline-flex; align-items: center; gap: 6px; margin: 10px 0 0;
  padding: 4px 9px; border-radius: var(--r-4); background: var(--muted-fill);
  border: 1px dashed var(--rule); font-family: var(--sans); font-size: 11.5px;
  font-weight: 500; color: var(--fg-3); font-style: italic; }
.day-caveat::before { content: ""; width: 7px; height: 7px; border-radius: 50%;
  border: 1px solid var(--fg-3); flex-shrink: 0; }
.day-caveat b { font-style: normal; font-weight: 600; color: var(--fg-2); }