/* design-system.css — travelguides.lk component styles.
 *
 * Built to match the approved mock (`Discover Home.dc.html`) pixel-for-pixel.
 * Inline styles from the mock are translated into semantic classes here so the
 * PHP views stay clean. Tokens live in tokens.css. Icons: Lucide (stroke 1.5).
 */

/* ============================================================
 * Base / reset
 * ========================================================== */
* { -webkit-font-smoothing: antialiased; box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body.app {
  padding-left: var(--safe-l);
  padding-right: var(--safe-r);
  font-family: var(--font);
  background: var(--canvas);
  color: var(--ink);
  font-size: 14px;
  line-height: 1.5;
}
a { color: var(--teal); text-decoration: none; }
button { font-family: inherit; }
img { max-width: 100%; }

/* ---- Native-app touch behaviour (F2) --------------------------------------
   Strip the browser tells so an installed home-screen app does not feel like a
   web page. Kept deliberately scoped: the page itself does not rubber-band,
   long-press a callout, or flash a tap highlight, and controls do not double-tap
   zoom — but real content (body copy, addresses, phone numbers) stays
   selectable so a user can still copy a number to dial it. */
html, body {
  overscroll-behavior: none;               /* no whole-page rubber-band / pull-to-refresh */
  -webkit-tap-highlight-color: transparent; /* no grey/blue flash on tap */
}
/* Chrome, controls and cards read as app UI, not selectable text. */
.floating-nav, .action-bar, .app-bar, .title-header, button, a,
.bz-stay, .bz-venue, .dest-card, .bx-card, .bx-feature, .hts-pill, .hts-sortbtn,
.floating-nav__item, .fab, [role="button"], [data-el="bottom-nav"] {
  -webkit-touch-callout: none;             /* no long-press "Copy / Look Up" sheet on UI */
  -webkit-user-select: none;
  user-select: none;
  touch-action: manipulation;              /* no double-tap-to-zoom delay on controls */
}
/* But never lock up selectable prose / contact details. */
p, h1, h2, h3, h4, li, address, .pf-desc, .bx-head__sub, .place-desc,
[data-selectable], .partner__desc, .tgs-note, input, textarea {
  -webkit-user-select: text;
  user-select: text;
  -webkit-touch-callout: default;
}
svg.lucide { display: block; }
.hide-scrollbar::-webkit-scrollbar { display: none; }
.hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); border:0; }

/* ============================================================
 * App shell — the centered mobile-app column
 * ========================================================== */
.app__shell {
  position: relative;
  width: 100%;
  max-width: var(--app-max);
  min-height: 100vh;
  margin: 0 auto;
  background: var(--app-bg);
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}

/* Status-bar strip: fills the top safe-area inset so black-translucent's white
   clock/battery stay legible over the near-white app surface. Height collapses
   to 0 on any device with no cutout, so it is invisible on desktop/older phones.
   Background at rest (seamless with the page), frosted glass once the content
   scrolls under it (the same recipe as .floating-nav__bar). JS toggles
   .is-scrolled on .app__shell; with JS off it simply stays the background. */
.app__shell::before {
  content: '';
  position: fixed; top: 0; left: 0; right: 0; z-index: 54;
  height: var(--safe-t);
  width: 100%; max-width: var(--app-max); margin: 0 auto;
  background: var(--app-bg);
  pointer-events: none;
  transition: background .3s var(--ease), backdrop-filter .3s var(--ease);
}
.app__shell.is-scrolled::before {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-bottom: 0;
}
/* No strip on the deliberately full-bleed screens (map, hero, lightbox,
   onboarding) — they paint edge to edge under the status bar. */
.app__shell:has(.app__main--bleed)::before,
.app__shell:has(.app__main--explore)::before,
.app__shell:has(.app__main--map)::before,
.app__shell:has(.app__main--full)::before { display: none; }
@media (min-width: 480px) {
  body.app { padding: 0; }
  .app__shell {
    min-height: 100vh;
    box-shadow: var(--shadow-screen);
  }
}
.app__main {
  flex: 1;
  overflow-y: auto;
  padding: var(--pad-top) var(--gutter-r) var(--nav-space) var(--gutter-l);
}
/* screens with a fixed title/profile header supply their own gutter, so the main
 * wrapper drops its horizontal + top padding (keeps bottom clearance for the nav) */
.app__main--titled { padding: 0 0 var(--nav-space); }
/* full-bleed screens (place detail hero) */
.app__main--bleed { padding: 0 0 var(--nav-space); }

/* ============================================================
 * Buttons / chips / primitives
 * ========================================================== */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border:none; cursor:pointer; font-weight:600; border-radius:var(--r-lg); }
.btn--primary { background:var(--teal); color:#fff; }
.btn--primary:hover { background:var(--teal-press); }
.btn--soft { background:#fff; color:var(--teal); border:1px solid var(--hairline); }
.btn--pill { border-radius:var(--r-pill); }

.icon-btn { display:flex; align-items:center; justify-content:center; cursor:pointer;
  background:#fff; border:1px solid var(--hairline); color:var(--teal);
  width:44px; height:44px; border-radius:var(--r-pill); }
.icon-btn--ghost { background:transparent; border:none; }

.chip { display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:600;
  color:var(--teal); background:var(--teal-surface); border-radius:var(--r-pill); padding:6px 12px; }

.tag-pill { font-size:12px; font-weight:600; color:var(--teal); background:var(--teal-surface);
  border-radius:var(--r-pill); padding:6px 12px; }

/* ============================================================
 * Home header (HM-01)
 * ========================================================== */
.home-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:32px; }
.home-header__brand { display:flex; flex-direction:column; align-items:flex-start; gap:5px; min-width:0; }
.home-header__lockup { display:block; color:var(--teal); line-height:0; }
.home-header__logo-svg { display:block; height:34px; width:auto; }
.home-header__name { margin:0; color:var(--ink); font-weight:600; font-size:18px; line-height:1.25; }
.home-header__welcome { margin:0; color:var(--muted); font-size:14px; }
@media (max-width:359px){ .home-header__logo-svg { height:30px; } }

/* Brand splash (cold/PWA launch only; gated by html.tg-splash-off in the head) */
.tg-splash { position:fixed; inset:0; z-index:9999; display:flex; align-items:center; justify-content:center;
  background:var(--app-bg); }
html.tg-splash-off .tg-splash { display:none; }
.tg-splash__lockup { color:var(--teal); line-height:0; }
.tg-splash__lockup svg { display:block; height:128px; width:auto; }
.tg-splash.is-hidden { opacity:0; transition:opacity .5s var(--ease); pointer-events:none; }
.tg-splash-mark, .tg-splash-word { transform-box:fill-box; }
@media (prefers-reduced-motion: no-preference){
  .tg-splash-mark { transform-origin:50% 50%; animation:tg-splash-mark .6s var(--ease) both; }
  .tg-splash-word { transform-origin:50% 100%; animation:tg-splash-word .5s var(--ease) .18s both; }
  @keyframes tg-splash-mark { from { opacity:0; transform:scale(.93); } to { opacity:1; transform:scale(1); } }
  @keyframes tg-splash-word { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:translateY(0); } }
}
.home-header__actions { display:flex; align-items:center; gap:8px; }
.home-header__btn { width:42px; height:42px; border-radius:var(--r-pill); background:#fff; display:flex;
  align-items:center; justify-content:center; position:relative; border:1px solid rgba(0,0,0,0.05); cursor:pointer; }
.home-header__btn--bell { color:var(--teal); }
.home-header__btn--grid { color:var(--muted-2); }
.home-header__dot { position:absolute; top:10px; right:11px; width:7px; height:7px; background:var(--teal);
  border-radius:var(--r-pill); border:1.5px solid #fff; }

/* page title block */
.page-intro { margin-bottom:24px; }
.page-intro__title { margin:0 0 4px; font-size:36px; font-weight:600; color:var(--ink);
  display:flex; align-items:center; gap:10px; line-height:1.1; letter-spacing:-0.015em; }
.page-intro__title svg { width:24px; height:39px; flex-shrink:0; }
.page-intro__sub { margin:0; color:var(--muted); font-size:14px; font-weight:500; }

/* compact eyebrow + title (Explore / Tools) */
.section-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:24px; }
.section-head__eyebrow { margin:0; color:var(--muted); font-size:13px; font-weight:500; }
.section-head__title { margin:2px 0 0; color:var(--ink); font-weight:600; font-size:26px; }

/* ============================================================
 * Search bar (HM-01 / EXP-01)
 * ========================================================== */
.searchbar { display:flex; gap:12px; margin-bottom:30px; } 
.searchbar { position:relative; }
.searchbar__field { flex:1; background:#fff; border-radius:var(--r-pill); padding:13px 16px;
  display:flex; align-items:center; gap:12px; border:1px solid var(--hairline); }
.searchbar__field i { color:var(--teal); }
.searchbar__input { width:100%; background:transparent; border:none; outline:none; font-size:14px;
  color:var(--ink); font-family:inherit; }
.searchbar__filter { width:50px; height:50px; background:var(--teal); border-radius:var(--r-pill);
  display:flex; align-items:center; justify-content:center; color:#fff; flex-shrink:0; border:none; cursor:pointer; }

/* ============================================================
 * Category pills (HM-01 horizontal scroller)
 * ========================================================== */
/* "Today in Sri Lanka" contextual strip (home). Quiet by default, alert tint on
   a Poya/holiday/dry day so a traveller is not caught out by closures. */
.today-strip { display:flex; align-items:center; gap:10px; margin:0 var(--gutter) 16px;
  padding:11px 13px; border-radius:var(--r-card); text-decoration:none;
  background:var(--surface,#fff); border:1px solid var(--hairline,rgba(0,0,0,.08));
  box-shadow:var(--shadow-card); color:var(--ink,#1a1a1a); }
.today-strip:active { transform:scale(.99); }
.today-strip__ic { flex:none; width:30px; height:30px; border-radius:50%; display:grid; place-items:center;
  background:var(--teal-tint,rgba(20,123,130,.1)); color:var(--teal,#147b82); }
.today-strip__txt { flex:1; min-width:0; font-size:12.5px; line-height:1.35; color:var(--muted-2,#6b7280); }
.today-strip__txt strong { color:var(--ink,#1a1a1a); font-weight:600; }
.today-strip__go { flex:none; color:var(--muted,#9aa0a6); }
.today-strip--alert { background:rgba(232,163,61,.10); border-color:rgba(232,163,61,.35); }
.today-strip--alert .today-strip__ic { background:rgba(232,163,61,.18); color:#b07d2e; }

/* Cultural etiquette card (place pages, religious sites only). */
.pd-etq { padding:16px; margin-bottom:16px; }
.pd-etq__head { display:flex; gap:12px; align-items:flex-start; margin-bottom:12px; }
.pd-etq__ic { flex:none; width:34px; height:34px; border-radius:50%; display:grid; place-items:center;
  background:var(--teal-tint,rgba(20,123,130,.1)); color:var(--teal,#147b82); }
.pd-etq__title { font-size:16px; font-weight:700; margin:0 0 2px; color:var(--ink,#1a1a1a); }
.pd-etq__intro { font-size:12.5px; line-height:1.4; color:var(--muted-2,#6b7280); margin:0; }
.pd-etq__sub { font-size:11.5px; text-transform:uppercase; letter-spacing:.04em; font-weight:600;
  color:var(--muted,#9aa0a6); margin:14px 0 8px; }
.pd-etq__list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.pd-etq__rule { display:flex; gap:10px; font-size:13px; line-height:1.45; color:var(--ink,#2a2a2a); }
.pd-etq__rule > svg, .pd-etq__rule > i { flex:none; margin-top:2px; color:var(--teal,#147b82); }
.pd-etq__rule--warn { color:#8a4b1f; }
.pd-etq__rule--warn > svg, .pd-etq__rule--warn > i { color:#c2410c; }
.pd-etq__note { display:flex; gap:6px; align-items:flex-start; font-size:12px; line-height:1.4;
  color:var(--muted-2,#6b7280); margin:14px 0 0; padding-top:12px; border-top:1px solid var(--hairline-2,rgba(0,0,0,.06)); }
.pd-etq__note > svg, .pd-etq__note > i { flex:none; margin-top:2px; }
.pd-etq__src { font-size:10.5px; color:var(--muted,#9aa0a6); margin:8px 0 0; }

/* Airport "your first hours" numbered arrival plan. */
.ap-plan { padding:16px; }
.ap-plan__intro { font-size:12.5px; color:var(--muted-2,#6b7280); margin:0 0 14px; }
.ap-plan__list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:16px; counter-reset:none; }
.ap-plan__step { display:flex; gap:12px; align-items:flex-start; }
.ap-plan__num { flex:none; width:26px; height:26px; border-radius:50%; display:grid; place-items:center;
  background:var(--teal,#147b82); color:#fff; font-size:13px; font-weight:700; margin-top:1px; }
.ap-plan__body { display:flex; flex-direction:column; gap:3px; min-width:0; }
.ap-plan__t { display:flex; align-items:center; gap:7px; font-size:14px; font-weight:600; color:var(--ink,#1a1a1a); }
.ap-plan__t > svg, .ap-plan__t > i { color:var(--teal,#147b82); }
.ap-plan__d { font-size:12.5px; line-height:1.45; color:var(--muted-2,#5b6470); }
.ap-plan__link { display:inline-flex; align-items:center; gap:4px; margin-top:3px; font-size:12.5px; font-weight:600;
  color:var(--teal,#147b82); text-decoration:none; }

/* "Build my itinerary" bar on the saved page. */
.saved-build { display:flex; align-items:center; gap:12px; width:calc(100% - 2 * var(--gutter));
  margin:4px var(--gutter) 16px; padding:13px 15px; border:none; text-align:left; cursor:pointer;
  border-radius:var(--r-card); color:#fff; background:linear-gradient(135deg, var(--teal,#147b82), var(--teal-deep,#0f6066));
  box-shadow:var(--shadow-card); }
.saved-build:active { transform:scale(.99); }
.saved-build__ic { flex:none; width:34px; height:34px; border-radius:50%; display:grid; place-items:center;
  background:rgba(255,255,255,.18); }
.saved-build__txt { flex:1; min-width:0; display:flex; flex-direction:column; gap:1px; }
.saved-build__txt strong { font-size:14.5px; font-weight:700; }
.saved-build__txt span { font-size:12px; opacity:.9; }
.saved-build__go { flex:none; opacity:.9; }

.cat-scroller { display:flex; gap:16px; overflow-x:auto; padding:0 var(--gutter) 16px; margin:0 calc(-1 * var(--gutter));
  scroll-snap-type:x mandatory; scroll-padding-inline:var(--gutter); -webkit-overflow-scrolling:touch; }
.cat-pill { display:flex; flex-direction:column; align-items:center; gap:8px; background:#fff; scroll-snap-align:start;
  border-radius:var(--r-pill); padding:8px 8px 20px; width:70px; flex-shrink:0;
  border:1px solid var(--hairline); cursor:pointer; }
.cat-pill__icon { width:56px; height:56px; background:var(--teal-surface); border-radius:var(--r-pill);
  display:flex; align-items:center; justify-content:center; color:#7f9b96; }
.cat-pill__label { color:var(--ink); font-size:12px; font-weight:600; }
.cat-pill.is-active { background:var(--teal); }
.cat-pill.is-active .cat-pill__icon { background:#fff; color:var(--teal); }
.cat-pill.is-active .cat-pill__label { color:#fff; }
/* "Plan" tile — leftmost, primary action into My Itinerary */
.cat-pill--plan { background:var(--teal); }
.cat-pill--plan .cat-pill__icon { background:#fff; color:var(--teal); }
.cat-pill--plan .cat-pill__label { color:#fff; }

/* ============================================================
 * Explore bento (quick-start hub) — bold tiles, brand teal
 * ========================================================== */
.bento-head { margin:14px 0 12px; }
.bento-head__title { margin:0; font-size:20px; font-weight:600; color:var(--ink); letter-spacing:-0.01em; }
.bento-head__sub { margin:2px 0 0; font-size:13.5px; color:var(--muted, #8b938f); }
/* aligns to the same gutter as siblings (main supplies the gutter); equal rows so
 * Flights / Essentials / More share one height, hero spans both. */
.bento { display:grid; gap:6px 9px; margin:0 0 6px;
  grid-template-columns:1.8fr 1fr 1fr; grid-template-rows:82px 82px;
  grid-template-areas: "hero wide wide" "hero mid more"; }
.bento-tile { position:relative; overflow:hidden; border-radius:18px; padding:11px; cursor:pointer;
  display:flex; flex-direction:column; text-decoration:none; border:none; text-align:left; font-family:inherit;
  background:var(--teal); color:#fff;
  box-shadow:0 12px 22px -16px rgba(20,123,130,0.5); transition:transform .12s ease, box-shadow .2s ease; }
.bento-tile:active { transform:scale(0.985); }
.bento-tile--hero { grid-area:hero; padding:14px; }
.bento-tile--wide { grid-area:wide; flex-direction:row; align-items:center; gap:11px; }
.bento-tile--mid  { grid-area:mid; }
.bento-tile--more { grid-area:more; background:#1a9aa2; /* brighter teal accent, same family */
  box-shadow:0 12px 22px -14px rgba(20,123,130,0.6); }

.bento-tile__chip { width:36px; height:36px; flex-shrink:0; border-radius:11px; display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,0.16); border:1px solid rgba(255,255,255,0.18); color:#fff; }
.bento-tile--hero .bento-tile__chip { width:40px; height:40px; border-radius:12px; position:relative; z-index:1; }
.bento-tile--more .bento-tile__chip { background:rgba(255,255,255,0.24); border-color:rgba(255,255,255,0.3); }
.bento-tile__ghost { position:absolute; right:-22px; bottom:-24px; color:rgba(255,255,255,0.1); pointer-events:none; z-index:0; }
.bento-tile--wide .bento-tile__ghost { right:-18px; bottom:-26px; }

.bento-tile__text { margin-top:auto; position:relative; z-index:1; }
.bento-tile__title { display:block; font-size:17px; font-weight:600; line-height:1.12; letter-spacing:-0.02em; }
.bento-tile__sub { display:block; margin-top:3px; font-size:11.5px; font-weight:500; color:rgba(255,255,255,0.7); }
.bento-tile__label { position:relative; z-index:1; font-size:14px; font-weight:700; }
.bento-tile--mid .bento-tile__label, .bento-tile--more .bento-tile__label { margin-top:auto; font-size:12px; letter-spacing:-0.01em; }
.bento-tile--hero .bento-tile__chip { position:relative; z-index:1; }
.bento-tile--mid .bento-tile__label,
.bento-tile--more .bento-tile__label { margin-top:auto; }

/* ============================================================
 * Promo banner (HM-01)
 * ========================================================== */
.promo { margin-top:30px; border-radius:23px; background:var(--teal); padding:20px; position:relative;
  overflow:hidden; display:flex; flex-direction:column; justify-content:center; min-height:160px; }
.promo__body { position:relative; z-index:10; width:62%; }
.promo__eyebrow { display:inline-flex; align-items:center; gap:5px; background:rgba(255,255,255,0.18);
  width:fit-content; padding:4px 9px; border-radius:7px; margin-bottom:8px; font-size:12px; color:#fff; font-weight:500; }
.promo__title { margin:0 0 16px; font-size:20px; font-weight:600; color:#fff; line-height:1.25; }
.promo__cta { background:#fff; color:var(--teal); font-size:12px; font-weight:600; padding:9px 16px;
  border-radius:var(--r-pill); width:fit-content; border:none; cursor:pointer; }
.promo__img { position:absolute; right:0; bottom:0; width:55%; height:100%; object-fit:cover;
  object-position:left; opacity:0.9; mix-blend-mode:luminosity; }

/* ============================================================
 * Section header row (title + See All)
 * ========================================================== */
.row-head { margin-top:30px; margin-bottom:16px; display:flex; align-items:center; justify-content:space-between; }
/* an explicit display: beats the global [hidden]{display:none}, so any element
   that JS toggles with the hidden attribute needs its own opt-out. Without this
   the "More like what you saved" heading rendered above an empty rail. */
.row-head[hidden] { display:none; }
.row-head--tight { margin-top:0; margin-bottom:14px; }
.row-head__title { margin:0; font-size:20px; font-weight:600; color:var(--ink); letter-spacing:-0.01em; }
.row-head__title--sm { font-size:18px; }
.row-head__link { color:var(--teal); font-size:14px; font-weight:600; background:none; border:none; cursor:pointer; }

/* ============================================================
 * Destination cards (HM-01 popular carousel)
 * ========================================================== */
.dest-scroller { display:flex; gap:16px; overflow-x:auto; padding:0 var(--gutter) 16px; margin:0 calc(-1 * var(--gutter));
  scroll-snap-type:x mandatory; scroll-padding-inline:var(--gutter); -webkit-overflow-scrolling:touch; }
.dest-scroller[hidden] { display:none; }
.dest-card { width:200px; height:250px; border-radius:24px; overflow:hidden; position:relative; flex-shrink:0; display:block; scroll-snap-align:start; }
.dest-card__img { width:100%; height:100%; object-fit:cover; }
/* slight overall darkening over the photo (sits above the image, below the title/scrim) */
.dest-card::before, .region-card2::before { content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:rgba(14,18,18,0.22); }
/* contain:paint bounds each card's painting to its own box, so a repaint in
   one cannot invalidate the rest of the row. */
.dest-card, .region-card2 { contain:paint; }
.dest-card__rating { position:absolute; top:12px; left:12px; background:rgba(255,255,255,0.18);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border:1px solid rgba(255,255,255,0.3);
  border-radius:var(--r-pill); padding:4px 9px; display:flex; align-items:center; gap:4px;
  font-size:12px; color:#fff; font-weight:600; }
.dest-card__rating i { color:#fff; fill:#fff; }
/* SCROLL COST, deliberately traded.
   This carried backdrop-filter:blur(11px) UNDER a mask, over 55% of every
   card. A masked backdrop blur cannot be cheaply cached: the compositor
   builds a separate surface and re-blurs the backdrop behind it every frame.
   With 12 cards on screen that was 12 of them, plus 12 rating pills, so 24
   live blur layers re-compositing while you scroll. It scaled with content,
   which is why the homepage got choppier as it filled up.

   The gradient below is what actually makes the title readable. The blur sat
   underneath it, over a photo, and was doing no visible work. Gradient stays,
   blur goes. The frosted rating pill keeps its blur: it is small, and there
   the effect genuinely reads. */
.dest-card__scrim { position:absolute; bottom:0; left:0; right:0; height:55%;
  -webkit-mask-image:linear-gradient(to top,#000 38%,transparent 100%);
  mask-image:linear-gradient(to top,#000 38%,transparent 100%);
  background:linear-gradient(to top, rgba(15,40,38,0.62), rgba(15,40,38,0)); }
.dest-card__body { position:absolute; bottom:0; left:0; right:0; padding:16px; }
.dest-card__title { margin:0 0 4px; color:#fff; font-weight:600; font-size:16px; line-height:1.25; letter-spacing:-0.01em;
  display:-webkit-box; -webkit-line-clamp:2; line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.dest-card__loc { display:flex; align-items:center; gap:5px; color:rgba(255,255,255,0.9); font-size:12px; }
/* Halal chip on the photo-overlay business card. Top-right, opposite the
   rating chip, frosted to match it. Its ABSENCE means unknown, never "not
   halal", so it only ever appears when confirmed. */
.bz-photo__halal { position:absolute; top:12px; right:12px; z-index:1;
  background:rgba(31,107,65,0.82); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,0.28); border-radius:var(--r-pill); padding:4px 10px;
  font-size:11.5px; font-weight:700; color:#fff; letter-spacing:0.01em; }

/* ============================================================
 * Floating glass bottom nav + search FAB (all main tab screens)
 * ========================================================== */
.floating-nav { position:fixed; bottom:calc(24px + var(--safe-b)); left:0; right:0; z-index:40;
  width:100%; max-width:var(--app-max); margin:0 auto; padding:0 var(--gutter-r) 0 var(--gutter-l);
  display:flex; align-items:center; justify-content:space-between; pointer-events:none; }
.floating-nav__bar { position:relative; flex:1; max-width:500px; margin-right:16px; padding:6px; display:flex; align-items:center;
  justify-content:space-between; pointer-events:auto; overflow:hidden;
  /* Glass, tuned to actually read as glass. The old recipe was
     rgba(244,247,247,.55) over an app background of #f6f7f7 — a near-white fill
     on a near-white page, finished with a bright white hairline, which showed up
     as a milky wash with a glowing edge rather than a material. Now: a cooler,
     slightly deeper tint so there is real separation from the page, more blur
     plus contrast so content underneath genuinely refracts, and an ink-tinted
     border instead of white. */
  /* Sheen gradient laid over the translucent fill so the surface has the
     top-lit gradient of a real pane, not a flat wash. */
  background:var(--glass-sheen), var(--glass-bg);
  backdrop-filter:var(--glass-blur);
  -webkit-backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-border);
  /* ONE box-shadow: outer elevation + bright top inner edge + faint bottom inner
     edge. The two inset lines are what read as a thick pane seen edge-on, and
     they work even on a flat page where the blur has nothing to reveal. (There
     used to be a second box-shadow on the next line that silently overrode this
     and deleted the edge entirely — the reason the bar looked like a plain film.) */
  box-shadow:var(--shadow-nav), inset 0 1px 0 var(--glass-hi), var(--glass-edge-lo);
  border-radius:var(--r-pill); transition:max-width .42s var(--ease), margin-right .42s var(--ease); }
.floating-nav__item { position:relative; z-index:1; width:52px; height:52px; border-radius:var(--r-pill); display:flex;
  align-items:center; justify-content:center; color:var(--teal); background:transparent; border:none; cursor:pointer;
  transition:color .3s var(--ease), opacity .55s var(--ease), transform .7s cubic-bezier(0.65,0,0.35,1), width .9s cubic-bezier(0.65,0,0.35,1); }
.floating-nav__item.is-active { color:#fff; }
/* the gliding teal-glass highlight; JS sets width/height + translate */
.floating-nav__pill { position:absolute; left:0; top:0; z-index:0; width:52px; height:52px; border-radius:var(--r-pill);
  background:rgba(20,123,130,0.92);
  border:1px solid rgba(255,255,255,0.22);
  box-shadow:0 6px 16px -6px rgba(20,123,130,0.55), inset 0 1px 0 rgba(255,255,255,0.30);
  transition:transform .36s var(--ease), width .36s var(--ease), height .36s var(--ease); }
.floating-nav__pill.no-anim { transition:none; }
.floating-nav__fab { width:66px; height:66px; border-radius:var(--r-pill); display:flex; align-items:center;
  justify-content:center; flex-shrink:0; pointer-events:auto; cursor:pointer; color:#fff;
  position:relative; isolation:isolate;
  /* Flat: solid brand teal, white icon, one soft shadow for depth. No gradient,
     no glass, no glow — the earlier particle orb is gone. */
  background:var(--teal); border:none;
  box-shadow:0 10px 24px -10px rgba(20,123,130,0.65), 0 2px 6px rgba(0,0,0,0.12);
  transform-origin:center; transition:transform .2s var(--ease), opacity .3s var(--ease); }
.floating-nav__fab:active { transform:scale(0.94); }
.floating-nav__fab > svg, .floating-nav__fab > i { display:block; }
.floating-nav__fab > svg { width:26px; height:26px; }
/* Soft idle pulse ring — the only resting motion. */
.floating-nav__fab::after { content:''; position:absolute; inset:0; z-index:-1; border-radius:inherit;
  background:var(--teal); opacity:0; animation:fab-pulse 2.8s var(--ease) infinite; }
@keyframes fab-pulse { 0% { transform:scale(1); opacity:0.35; } 70%,100% { transform:scale(1.55); opacity:0; } }
@media (prefers-reduced-motion: reduce) { .floating-nav__fab::after { animation:none; display:none; } }

/* Apple-Intelligence-style glimmering frame that sweeps the app edge when the
   assistant opens (element injected by fab-orb.js, honours reduced motion) */
@property --eg-a { syntax:'<angle>'; inherits:false; initial-value:0deg; }
.edge-glimmer { position:absolute; inset:0; z-index:220; pointer-events:none; opacity:0;
  border-radius:inherit; }
.edge-glimmer::before { content:''; position:absolute; inset:0; padding:3px; border-radius:inherit;
  background:conic-gradient(from var(--eg-a),
    #29d3c6, #a9f0ea 22%, #0e7f86 47%, #7fe7de 68%, #29d3c6 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite:exclude; filter:blur(5px) saturate(150%); }
.edge-glimmer.is-on { animation:eg-pulse 1.1s var(--ease); }
.edge-glimmer.is-on::before { animation:eg-spin 1.1s linear; }
@keyframes eg-pulse { 0% { opacity:0; } 18% { opacity:1; } 72% { opacity:1; } 100% { opacity:0; } }
@keyframes eg-spin { from { --eg-a:0deg; } to { --eg-a:360deg; } }
@media (prefers-reduced-motion: reduce) { .edge-glimmer { display:none; } }

/* (collapse-on-scroll removed 2026-07-14: the nav bar stays fully visible) */

/* FAB-only pages (place / article): no nav bar, but the assistant FAB stays */
.floating-nav--fab-only { justify-content:flex-end; pointer-events:none; }
.floating-nav--fab-only .floating-nav__fab { pointer-events:auto; }
/* lift the FAB clear of a place page's bottom action bar */
.app__main:has(.action-bar) ~ .floating-nav { bottom:calc(104px + env(safe-area-inset-bottom)); }

/* distance chip on nearby/related cards */
.dest-card__dist { position:absolute; top:12px; right:12px; z-index:1; display:inline-flex; align-items:center;
  background:rgba(28,26,24,0.55); color:#fff; font:600 11px var(--font); padding:4px 9px; border-radius:9999px;
  backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); }

/* ============================================================
 * Title header (back + title) for sub-screens
 * ========================================================== */
.title-header { display:flex; align-items:center; gap:14px; padding:var(--pad-top-lg) var(--gutter) 18px; }
.title-header__back { width:44px; height:44px; border-radius:var(--r-pill); background:#fff;
  border:1px solid var(--hairline); display:flex; align-items:center; justify-content:center; color:var(--teal); cursor:pointer; }
.title-header__title { margin:0; font-size:20px; font-weight:600; color:var(--ink); }

/* ============================================================
 * Place detail (EXP-05)
 * ========================================================== */
.detail-hero { position:relative; height:300px; }
.detail-hero__gallery { display:flex; height:100%; overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; }
.detail-hero__img { width:100%; height:100%; object-fit:cover; flex:0 0 100%; scroll-snap-align:center; cursor:zoom-in; }
.detail-hero__dots span.is-on { width:18px; background:#fff; }
.detail-hero__bar { position:absolute; top:var(--pad-top-lg); left:20px; right:20px; display:flex; align-items:center; justify-content:space-between; }
.detail-hero__actions { display:flex; gap:10px; }
.glass-btn { width:44px; height:44px; border-radius:9999px; background:rgba(255,255,255,0.2);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border:1px solid rgba(255,255,255,0.4);
  display:flex; align-items:center; justify-content:center; color:#fff; cursor:pointer; }
.detail-hero__dots { position:absolute; bottom:16px; left:50%; transform:translateX(-50%); display:flex; gap:6px; }
.detail-hero__dots span { width:6px; height:6px; border-radius:var(--r-pill); background:rgba(255,255,255,0.6); }
.detail-hero__dots span.is-active { width:18px; background:#fff; }
.detail-body { padding:22px var(--gutter) 0; }
.detail-title-row { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.detail-title { margin:0; font-size:26px; font-weight:600; color:var(--ink); line-height:1.15; letter-spacing:-0.02em; }
.detail-loc { display:flex; align-items:center; gap:5px; color:var(--muted); font-size:13px; margin-top:6px; }
.detail-loc i { color:var(--teal); }
.detail-rating { display:flex; align-items:center; gap:4px; background:var(--teal-surface); border-radius:12px;
  padding:6px 10px; flex-shrink:0; font-size:14px; font-weight:600; color:var(--teal); }
.detail-rating i { color:var(--teal); fill:var(--teal); }
.detail-tags { display:flex; gap:8px; flex-wrap:wrap; margin:16px 0; }
.detail-desc { margin:0 0 22px; font-size:14px; line-height:1.6; color:var(--body); }
.info-list { background:#fff; border-radius:var(--r-card); border:1px solid var(--hairline); overflow:hidden; margin-bottom:18px; }
.info-list__row { display:flex; align-items:center; gap:14px; padding:14px 16px; border-bottom:1px solid var(--hairline-2); }
.info-list__row:last-child { border-bottom:none; }
.info-list__row i { color:var(--teal); }
.info-list__label { font-size:13px; color:var(--muted); flex:1; }
.info-list__value { font-size:13px; font-weight:600; color:var(--ink); }
.mini-map { position:relative; height:130px; border-radius:var(--r-card); overflow:hidden; border:1px solid var(--hairline);
  margin-bottom:14px; background:#e4efee; display:flex; align-items:center; justify-content:center; }
.mini-map i { color:var(--teal); }
.mini-map__cta { position:absolute; bottom:10px; right:10px; background:#fff; border:none; border-radius:10px;
  padding:8px 12px; font-size:12px; font-weight:600; color:var(--teal); box-shadow:0 2px 6px rgba(0,0,0,0.1); cursor:pointer; }
.detail-actions { display:flex; gap:12px; margin-bottom:16px; }
.detail-actions .btn { flex:1; padding:12px; font-size:13px; border-radius:var(--r-lg); }

/* open-now status tag (place page) */
.open-tag { font-weight:700; }
.open-tag--open { color:#1a7f4b; }
.open-tag--closed { color:var(--danger); }

/* ============================================================
 * Expense tracker (/budget)
 * ========================================================== */
.budget-wrap { padding:8px var(--gutter) 200px; }

/* summary */
.exp-summary { background:#fff; border:1px solid var(--hairline); border-radius:var(--r-card); padding:18px 18px 16px; margin-bottom:14px; }
.exp-summary__top { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.exp-summary__label { display:block; font-size:12.5px; color:var(--muted); }
.exp-summary__total { display:block; font-size:32px; font-weight:700; color:var(--ink); letter-spacing:-0.02em; line-height:1.1; margin-top:2px; }
.exp-summary__count { display:block; font-size:12.5px; color:var(--muted); margin-top:4px; }
/* currency button (flat flag + code) */
.exp-cur { display:inline-flex; align-items:center; gap:8px; flex-shrink:0; background:var(--teal-surface); color:var(--teal);
  border:none; border-radius:9999px; font:600 13.5px var(--font); padding:7px 12px 7px 9px; cursor:pointer; transition:background .15s; }
.exp-cur:active { background:#d8ebeb; }
.exp-cur i, .exp-cur svg { color:var(--teal); }
.exp-flag { width:24px; height:18px; border-radius:4px; object-fit:cover; display:block; box-shadow:0 0 0 1px rgba(0,0,0,.06); }
.exp-flag--none { display:flex; align-items:center; justify-content:center; background:var(--app-bg); color:var(--teal); }

/* currency picker sheet */
.cur-sheet { display:flex; flex-direction:column; max-height:78vh; }
.cur-sheet__grip { width:38px; height:4px; border-radius:9999px; background:var(--hairline); margin:2px auto 14px; }
.cur-sheet__head { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.cur-sheet__title { margin:0; font-size:17px; font-weight:600; color:var(--ink); }
.cur-sheet__close { width:34px; height:34px; border-radius:9999px; border:none; background:var(--app-bg); color:var(--ink);
  display:flex; align-items:center; justify-content:center; cursor:pointer; }
.cur-search { display:flex; align-items:center; gap:10px; background:var(--app-bg); border-radius:13px; padding:11px 14px; margin-bottom:8px; color:#8b938f; }
.cur-search input { flex:1; border:none; background:transparent; outline:none; font-family:inherit; font-size:15px; color:var(--ink); min-width:0; }
.cur-list { flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch; margin:0 -4px; padding:4px; }
.cur-opt { display:flex; align-items:center; gap:12px; width:100%; background:none; border:none; cursor:pointer; text-align:left;
  padding:11px 10px; border-radius:12px; font-family:inherit; }
.cur-opt:active { background:var(--app-bg); }
.cur-opt.is-on { background:var(--teal-surface); }
.cur-opt__flag { width:28px; height:21px; border-radius:5px; object-fit:cover; flex-shrink:0; box-shadow:0 0 0 1px rgba(0,0,0,.06); }
.cur-opt__flag--none { display:flex; align-items:center; justify-content:center; background:var(--app-bg); color:var(--teal); }
.cur-opt__txt { flex:1; min-width:0; display:flex; flex-direction:column; gap:1px; }
.cur-opt__code { font-size:14.5px; font-weight:600; color:var(--ink); }
.cur-opt__name { font-size:12.5px; color:#7b8482; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cur-opt__sym { font-size:14px; font-weight:600; color:#9aa3a0; flex-shrink:0; }
.cur-opt.is-on .cur-opt__sym { display:none; }
.cur-opt__check { color:var(--teal); flex-shrink:0; }
.cur-none { padding:26px 10px; text-align:center; color:#8b938f; font-size:14px; }
.exp-breakdown { display:flex; flex-direction:column; gap:11px; margin-top:16px; padding-top:16px; border-top:1px solid var(--hairline-2); }
.exp-breakdown[hidden] { display:none; } /* explicit display: beats [hidden]{display:none} */
.exp-cat__row { display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:12.5px; margin-bottom:6px; }
.exp-cat__name { display:inline-flex; align-items:center; gap:6px; color:var(--body); font-weight:500; }
.exp-cat__name i, .exp-cat__name svg { color:var(--teal); }
.exp-cat__amt { color:var(--ink); font-weight:600; }
.exp-cat__bar { display:block; height:6px; border-radius:9999px; background:var(--app-bg); overflow:hidden; }
.exp-cat__fill { display:block; height:100%; border-radius:9999px; background:var(--teal); }

/* converter */
.conv-card { background:#fff; border:1px solid var(--hairline); border-radius:var(--r-card); padding:16px; margin-bottom:22px; }
.conv-head { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:12px; }
.conv-title { display:inline-flex; align-items:center; gap:7px; font-weight:600; font-size:14px; color:var(--ink); letter-spacing:-0.01em; }
.conv-title i, .conv-title svg { color:var(--teal); }
.conv-rate { font-size:12px; color:var(--muted); }
.conv-row { display:flex; align-items:center; gap:8px; }
.conv-field { flex:1; min-width:0; display:flex; align-items:center; gap:8px; background:var(--app-bg); border-radius:var(--r-lg); padding:11px 14px; }
.conv-field__cur { font-size:12px; font-weight:700; color:var(--muted); flex-shrink:0; }
.conv-field input { flex:1; min-width:0; border:none; background:transparent; outline:none; font:600 17px var(--font); color:var(--ink); }
.conv-field input::-webkit-outer-spin-button, .conv-field input::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
.conv-swap { width:32px; height:32px; flex-shrink:0; border-radius:9999px; background:var(--teal-surface); border:none; color:var(--teal); display:flex; align-items:center; justify-content:center; }
.conv-stamp { display:flex; align-items:center; gap:5px; margin-top:11px; font-size:11px; color:var(--muted); }
.conv-stamp i, .conv-stamp svg { color:var(--teal); }
.conv-stamp a { color:var(--teal); font-weight:600; }

/* list */
.exp-listhead { margin:0 0 10px; }
.exp-list { display:flex; flex-direction:column; gap:16px; }
.exp-group__head { display:flex; align-items:center; justify-content:space-between; font-size:12px; font-weight:600; color:var(--muted); margin:0 2px 8px; }
.exp-row { display:flex; align-items:center; gap:12px; padding:11px 0; border-bottom:1px solid var(--hairline-2); }
.exp-row:last-child { border-bottom:none; }
.exp-row__ic { width:38px; height:38px; flex-shrink:0; border-radius:9999px; background:var(--teal-surface); color:var(--teal); display:flex; align-items:center; justify-content:center; }
.exp-row__body { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.exp-row__note { font-size:14px; font-weight:600; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.exp-row__cat { font-size:12px; color:var(--muted); }
.exp-row__amount { font-size:14.5px; font-weight:600; color:var(--ink); flex-shrink:0; }
.exp-row__del { width:28px; height:28px; flex-shrink:0; border-radius:9999px; background:none; border:none; color:var(--muted-2); cursor:pointer; display:flex; align-items:center; justify-content:center; }
.exp-row__del:active { background:var(--app-bg); color:var(--danger); }

/* empty state */
.exp-empty { text-align:center; padding:40px 24px; }
.exp-empty__ic { display:inline-flex; width:60px; height:60px; border-radius:9999px; background:var(--teal-surface); color:var(--teal); align-items:center; justify-content:center; margin-bottom:14px; }
.exp-empty__title { font-weight:600; font-size:16px; color:var(--ink); margin:0 0 4px; }
.exp-empty__sub { font-size:13px; color:var(--muted); margin:0; line-height:1.5; }

/* add button (fixed, abides the page gutters) */
.exp-add { position:fixed; left:0; right:0; bottom:calc(120px + env(safe-area-inset-bottom)); z-index:45;
  width:auto; max-width:calc(var(--app-max) - 2 * var(--gutter)); margin:0 auto;
  display:flex; align-items:center; justify-content:center; gap:8px; height:54px; border-radius:9999px;
  background:var(--teal); color:#fff; border:none; cursor:pointer; font-weight:600; font-size:15px;
  box-shadow:0 10px 28px -8px rgba(20,123,130,0.6); }
@media (min-width:480px) { .exp-add { left:50%; transform:translateX(-50%); right:auto; width:calc(var(--app-max) - 2 * var(--gutter)); } }

/* add-expense bottom sheet */
.esheet { padding:8px 20px calc(24px + env(safe-area-inset-bottom)); }
.esheet__grip { width:38px; height:4px; border-radius:9999px; background:var(--hairline); margin:0 auto 14px; }
.esheet__title { margin:0 0 16px; font-size:18px; font-weight:600; color:var(--ink); letter-spacing:-0.01em; }
.esheet__amount { display:flex; align-items:center; gap:8px; background:var(--app-bg); border-radius:var(--r-lg); padding:14px 16px; margin-bottom:14px; }
.esheet__cur { font-size:22px; font-weight:700; color:var(--muted); }
.esheet__amount input { flex:1; min-width:0; border:none; background:transparent; outline:none; font:700 26px var(--font); color:var(--ink); }
.esheet__amount input::-webkit-outer-spin-button, .esheet__amount input::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
.esheet__chips { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px; }
.esheet-chip { display:inline-flex; align-items:center; gap:6px; background:#fff; border:1px solid var(--hairline); border-radius:9999px;
  padding:9px 14px; font:600 13px var(--font); color:var(--ink); cursor:pointer; }
.esheet-chip i, .esheet-chip svg { color:var(--teal); }
.esheet-chip.is-on { background:var(--teal); color:#fff; border-color:var(--teal); }
.esheet-chip.is-on i, .esheet-chip.is-on svg { color:#fff; }
.esheet__note, .esheet__date { width:100%; box-sizing:border-box; border:1px solid var(--hairline); border-radius:var(--r-lg);
  padding:13px 14px; font:400 14px var(--font); color:var(--ink); outline:none; background:#fff; margin-bottom:12px; }
.esheet__note:focus, .esheet__date:focus { border-color:var(--teal); }
.esheet__save { width:100%; height:52px; border-radius:9999px; background:var(--teal); color:#fff; border:none; cursor:pointer;
  font-weight:600; font-size:15px; margin-top:4px; }

/* dynamic season / festival context banner */
.ctx-banner { margin:6px var(--gutter) 18px; background:var(--teal-surface); border:1px solid rgba(20,123,130,0.12);
  border-radius:var(--r-card); overflow:hidden; }
.ctx-banner__season { display:flex; gap:12px; align-items:flex-start; padding:14px 16px; }
.ctx-banner__ic { width:36px; height:36px; flex-shrink:0; border-radius:9999px; background:#fff; color:var(--teal);
  display:flex; align-items:center; justify-content:center; box-shadow:0 1px 3px rgba(20,123,130,0.12); }
.ctx-banner__text { display:flex; flex-direction:column; gap:3px; min-width:0; }
.ctx-banner__title { font-weight:600; font-size:13.5px; color:var(--teal); letter-spacing:-0.01em; }
.ctx-banner__note { font-size:12.5px; line-height:1.5; color:var(--body); }
.ctx-banner__fest { display:flex; align-items:center; gap:9px; padding:11px 16px; border-top:1px solid rgba(20,123,130,0.12);
  background:rgba(255,255,255,0.5); color:var(--ink); text-decoration:none; font-size:12.5px; }
.ctx-banner__fest > i:first-child { color:var(--teal); flex-shrink:0; }
.ctx-banner__festtext { flex:1; min-width:0; line-height:1.4;
  display:-webkit-box; -webkit-line-clamp:2; line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.ctx-banner__fest.is-soon { background:rgba(214,158,46,0.12); }
.ctx-banner__fest.is-soon > i:first-child { color:#b8860b; }
.ctx-banner__fest > i:last-child { color:var(--muted); flex-shrink:0; }

/* smart day plan card (place page) */
.dayplan { background:#fff; border:1px solid var(--hairline); border-radius:var(--r-card); padding:16px; margin:0 0 18px; }
.dayplan__head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:12px; }
.dayplan__title { display:block; font-weight:600; font-size:16px; color:var(--ink); letter-spacing:-0.01em; }
.dayplan__sub { display:block; font-size:12.5px; color:var(--muted); margin-top:2px; }
.dayplan__ic { width:38px; height:38px; flex-shrink:0; border-radius:9999px; background:var(--teal-surface); color:var(--teal);
  display:flex; align-items:center; justify-content:center; }
.dayplan__list { list-style:none; margin:0 0 14px; padding:0; display:flex; flex-direction:column; }
.dayplan__stop { display:flex; align-items:center; gap:11px; padding:7px 0; position:relative; }
.dayplan__stop:not(:last-child)::before { content:''; position:absolute; left:13px; top:28px; bottom:-7px; width:2px; background:var(--hairline-2); }
.dayplan__num { width:26px; height:26px; flex-shrink:0; border-radius:9999px; background:var(--teal); color:#fff;
  font:600 12px var(--font); display:flex; align-items:center; justify-content:center; z-index:1; }
.dayplan__name { flex:1; min-width:0; font-size:14px; font-weight:600; color:var(--ink); text-decoration:none; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dayplan__dist { font-size:11.5px; color:var(--muted); flex-shrink:0; }
.dayplan__here { font-size:11px; font-weight:600; color:var(--teal); background:var(--teal-surface); padding:2px 8px; border-radius:9999px; flex-shrink:0; }
.dayplan__cta { width:100%; height:48px; border-radius:9999px; background:var(--teal); color:#fff; border:none; cursor:pointer;
  font-weight:600; font-size:14.5px; display:flex; align-items:center; justify-content:center; gap:8px; }
.dayplan__note { font-size:11px; color:var(--muted); margin:10px 0 0; line-height:1.4; }

/* related reads (knowledge cross-links on the place page) */
.read-list { display:flex; flex-direction:column; gap:10px; margin-bottom:18px; }
.read-card { display:flex; align-items:center; gap:12px; padding:13px 16px; background:#fff; border:1px solid var(--hairline);
  border-radius:var(--r-card); color:var(--ink); text-decoration:none; }
.read-card__body { flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; }
.read-card__title { font-weight:600; font-size:14.5px; color:var(--ink); letter-spacing:-0.01em; }
.read-card__sum { font-size:12.5px; color:var(--muted); line-height:1.4;
  display:-webkit-box; -webkit-line-clamp:2; line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.read-card > i, .read-card > svg { color:var(--teal); flex-shrink:0; }

/* verified stamp (matches mock) */
.verified-stamp { display:flex; align-items:center; gap:8px; color:var(--muted); font-size:11.5px; padding-bottom:8px; flex-wrap:wrap; }
.verified-stamp__source { color:var(--teal); font-weight:600; }
.verified-stamp--partial { color:#9a7b34; }

/* bottom action bar (place detail) */
.action-bar { position:fixed; bottom:0; left:0; right:0; width:100%; max-width:var(--app-max); margin:0 auto;
  padding:16px var(--gutter) 24px; background:var(--glass-sheen), var(--glass-bg); backdrop-filter:var(--glass-blur);
  -webkit-backdrop-filter:var(--glass-blur); border-top:1px solid var(--glass-border); display:flex; gap:12px; z-index:40; box-shadow:inset 0 1px 0 var(--glass-hi), 0 -8px 24px -14px rgba(10,30,32,0.22);}
.action-bar__icon { width:54px; height:54px; border-radius:9999px; background:var(--teal-surface); border:none;
  display:flex; align-items:center; justify-content:center; color:var(--teal); cursor:pointer; }
.action-bar__primary { flex:1; height:54px; border-radius:9999px; background:var(--teal); border:none; color:#fff;
  font-weight:600; font-size:15px; display:flex; align-items:center; justify-content:center; gap:8px; cursor:pointer; }

/* ============================================================
 * Forms (ESS-04 visa checker)
 * ========================================================== */
.field-label { font-size:13px; font-weight:600; color:var(--ink); display:block; margin-bottom:8px; }
.select-btn { width:100%; background:#fff; border:1px solid var(--hairline); border-radius:var(--r-lg);
  padding:14px 16px; display:flex; align-items:center; gap:12px; margin-bottom:18px; cursor:pointer; }
.select-btn__text { flex:1; text-align:left; font-size:14px; font-weight:600; color:var(--ink); }
.select-btn__chev { color:var(--muted); }
.select-btn i.lead { color:var(--teal); }
.choice-row { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:18px; }
.choice { font-size:13px; font-weight:600; color:var(--body); background:#fff; border:1px solid var(--hairline);
  border-radius:var(--r-pill); padding:9px 16px; cursor:pointer; }
.choice.is-active { color:#fff; background:var(--teal); border-color:var(--teal); }
.lead-copy { margin:0 0 22px; font-size:14px; line-height:1.6; color:var(--body); }

/* result card (visa) */
.result-card { background:var(--teal); border-radius:var(--r-xl); padding:20px; margin-bottom:16px; }
.result-card__head { display:flex; align-items:center; gap:8px; margin-bottom:10px; color:#fff; font-weight:700; font-size:17px; }
.result-card__desc { margin:0 0 16px; color:rgba(255,255,255,0.85); font-size:13px; line-height:1.55; }
.result-card__list { background:rgba(255,255,255,0.12); border-radius:var(--r-lg); padding:12px 14px; }
.result-card__item { display:flex; align-items:center; gap:10px; padding:5px 0; color:#fff; font-size:13px; }

/* ============================================================
 * Emergency hub (SAF-01)
 * ========================================================== */
.offline-note { display:flex; align-items:center; gap:10px; background:var(--danger-bg); border:1px solid var(--danger-border);
  border-radius:var(--r-lg); padding:12px 14px; margin-bottom:20px; }
.offline-note i { color:var(--danger); }
.offline-note span { font-size:12.5px; color:var(--danger-ink); font-weight:600; }
.emergency-btn { width:100%; display:flex; align-items:center; gap:16px; background:#fff; border:1px solid var(--hairline);
  border-radius:20px; padding:18px 20px; margin-bottom:12px; cursor:pointer; text-align:left; }
.emergency-btn--alert { background:var(--danger); border-color:var(--danger); }
.emergency-btn__icon { color:var(--teal); flex-shrink:0; }
.emergency-btn--alert .emergency-btn__icon { color:#fff; }
.emergency-btn__body { flex:1; }
.emergency-btn__name { margin:0; color:var(--ink); font-weight:700; font-size:17px; }
.emergency-btn__desc { margin:0; color:var(--muted); font-size:12px; }
.emergency-btn--alert .emergency-btn__name { color:#fff; }
.emergency-btn--alert .emergency-btn__desc { color:rgba(255,255,255,0.8); }
.emergency-btn__num { display:flex; align-items:center; gap:6px; background:var(--teal-surface); border-radius:var(--r-pill);
  padding:8px 14px; color:var(--teal); font-weight:700; font-size:15px; flex-shrink:0; }
.emergency-btn--alert .emergency-btn__num { background:rgba(255,255,255,0.18); color:#fff; }
.nearest-card { background:#fff; border:1px solid var(--hairline); border-radius:var(--r-card); padding:16px; }
.nearest-card__row { display:flex; align-items:center; gap:12px; }
.nearest-card__icon { width:42px; height:42px; border-radius:13px; background:var(--teal-surface); display:flex;
  align-items:center; justify-content:center; color:var(--teal); flex-shrink:0; }
.nearest-card__name { margin:0; font-size:14px; font-weight:600; color:var(--ink); }
.nearest-card__meta { margin:2px 0 0; font-size:12px; color:var(--muted); }
.nearest-card__go { width:40px; height:40px; border-radius:12px; background:var(--teal); border:none; display:flex;
  align-items:center; justify-content:center; color:#fff; cursor:pointer; flex-shrink:0; }
.subhead { margin:0 0 12px; font-size:16px; font-weight:600; color:var(--ink); }

/* ============================================================
 * Explore (EXP-01)
 * ========================================================== */
.near-me-btn { width:100%; display:flex; align-items:center; gap:12px; background:var(--teal); border:none;
  border-radius:var(--r-card); padding:15px 16px; margin-bottom:26px; cursor:pointer; }
.near-me-btn i.lead { color:#fff; }
.near-me-btn__text { color:#fff; font-weight:600; font-size:14px; }
.near-me-btn__chev { color:rgba(255,255,255,0.7); margin-left:auto; }
.cat-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin-bottom:28px; }
.cat-grid--3 { grid-template-columns:repeat(3,1fr); }
.cat-cell { background:#fff; border-radius:var(--r-card); padding:16px; border:1px solid var(--hairline); cursor:pointer; display:block; }
.cat-cell__icon { width:42px; height:42px; border-radius:13px; background:var(--teal-surface); display:flex;
  align-items:center; justify-content:center; color:var(--teal); margin-bottom:12px; }
.cat-cell__name { margin:0; font-size:14px; font-weight:600; color:var(--ink); }
.cat-cell__count { margin:2px 0 0; font-size:12px; color:var(--muted); }
.region-scroller { display:flex; gap:16px; overflow-x:auto; padding:0 var(--gutter) 8px; margin:0 calc(-1 * var(--gutter));
  scroll-snap-type:x mandatory; scroll-padding-inline:var(--gutter); -webkit-overflow-scrolling:touch; }
.region-card2 { width:180px; height:158px; border-radius:20px; overflow:hidden; position:relative; flex-shrink:0; display:block; scroll-snap-align:start; }
.region-card2__img { width:100%; height:100%; object-fit:cover; }
.region-card2__badge { position:absolute; top:10px; left:10px; background:rgba(255,255,255,0.55);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border:1px solid rgba(255,255,255,0.5);
  border-radius:var(--r-pill); padding:3px 9px; font-size:11px; font-weight:600; color:var(--teal); }
.region-card2__scrim { position:absolute; bottom:0; left:0; right:0; height:55%;
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  -webkit-mask-image:linear-gradient(to top,#000 38%,transparent 100%); mask-image:linear-gradient(to top,#000 38%,transparent 100%);
  background:linear-gradient(to top, rgba(15,40,38,0.4), rgba(15,40,38,0)); }
.region-card2__title { position:absolute; bottom:0; left:0; right:0; padding:12px; margin:0; color:#fff; font-weight:600; font-size:16px; }

/* ============================================================
 * Tools hub (TLS-00)
 * ========================================================== */
.tools-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.tool-cell { background:#fff; border:1px solid var(--hairline); border-radius:var(--r-card); padding:16px 8px;
  display:flex; flex-direction:column; align-items:center; gap:10px; cursor:pointer; }
.tool-cell__icon { width:44px; height:44px; border-radius:14px; background:var(--teal-surface); display:flex;
  align-items:center; justify-content:center; color:var(--teal); }
.tool-cell__label { font-size:11.5px; font-weight:600; color:var(--ink); text-align:center; }

/* ============================================================
 * Profile dashboard (ON-09)
 * ========================================================== */
.profile-head { display:flex; align-items:center; justify-content:space-between; padding:var(--pad-top-lg) var(--gutter) 18px; }
.profile-head__title { margin:0; font-size:24px; font-weight:600; color:var(--ink); }
.profile-head__actions { display:flex; align-items:center; gap:8px; }

.identity { display:flex; flex-direction:column; align-items:center; text-align:center; margin-bottom:22px; }
.identity__avatar { position:relative; width:88px; height:88px; border-radius:var(--r-pill); background:var(--teal);
  display:flex; align-items:center; justify-content:center; color:#fff; font-size:30px; font-weight:700; margin-bottom:14px; overflow:hidden; }
.identity__avatar img { width:100%; height:100%; object-fit:cover; }
.identity__cam { position:absolute; right:-2px; bottom:-2px; width:28px; height:28px; border-radius:var(--r-pill);
  background:#fff; border:1px solid var(--hairline); display:flex; align-items:center; justify-content:center; color:var(--teal); }
.identity__name { margin:0; font-size:20px; font-weight:700; color:var(--ink); }
.identity__meta { display:flex; align-items:center; gap:6px; margin-top:6px; font-size:13px; color:var(--label); font-weight:500; }
.identity__edit { margin-top:16px; padding:10px 22px; border-radius:var(--r-pill); background:#fff; border:1px solid var(--hairline);
  color:var(--teal); font-weight:600; font-size:13px; cursor:pointer; }

.stat-strip { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:26px; }
.stat-cell { background:#fff; border:1px solid var(--hairline); border-radius:var(--r-card); padding:16px 8px; text-align:center; text-decoration:none; }
.stat-cell__num { margin:0; font-size:22px; font-weight:700; color:var(--teal); }
.stat-cell__label { margin:2px 0 0; font-size:11.5px; color:var(--label); }

/* dashboard heading + drag hint */
.dash-head { display:flex; align-items:baseline; justify-content:space-between; margin-bottom:14px; }
.dash-head__title { margin:0; font-size:18px; font-weight:600; color:var(--ink); }
.dash-head__hint { font-size:11.5px; color:var(--muted); display:flex; align-items:center; gap:4px; }

/* widget grid */
.dash-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }

.widget { position:relative; display:block; background:#fff; border:1px solid var(--hairline); border-radius:20px;
  padding:16px; text-decoration:none; color:var(--ink); overflow:hidden; }
.widget--full { grid-column:1 / -1; }
/* lifted widget while dragging (iOS-style): raised, shadowed, follows the pointer */
.widget.is-lifted { box-shadow:0 22px 50px -16px rgba(28,26,24,0.45); border-color:transparent; overflow:visible; }
/* the gap that holds the drop slot while a widget is lifted */
.widget-ph { border:2px dashed rgba(20,123,130,0.28); border-radius:20px; background:rgba(20,123,130,0.05); }
.widget-ph--full { grid-column:1 / -1; }
body.is-dragging-widget { user-select:none; -webkit-user-select:none; cursor:grabbing; }
.widget__grip { position:absolute; top:10px; right:10px; width:26px; height:26px; border-radius:8px; display:flex;
  align-items:center; justify-content:center; color:#cdd4d3; cursor:grab; touch-action:none; }
.widget__grip:active { cursor:grabbing; }
.widget__head { display:flex; align-items:center; gap:10px; margin-bottom:12px; }
.widget__badge { width:38px; height:38px; border-radius:12px; background:var(--teal-surface); display:flex;
  align-items:center; justify-content:center; color:var(--teal); flex-shrink:0; }
.widget__name { margin:0; font-size:13px; font-weight:600; color:var(--ink); flex:1; }
.widget__value { margin:0; font-size:22px; font-weight:700; color:var(--ink); line-height:1.1; }
.widget__sub { margin:4px 0 0; font-size:12px; color:var(--muted); }
.widget__chev { color:#cdd4d3; }

/* mini progress bar inside widgets */
.widget__bar { height:7px; background:var(--app-bg); border-radius:9999px; overflow:hidden; margin-top:12px; }
.widget__fill { display:block; height:100%; background:var(--teal); border-radius:9999px; }
.widget__fill--warn { background:var(--warning, #c9952b); }

/* active trip widget */
.widget-trip__row { display:flex; align-items:center; gap:8px; margin-top:10px; font-size:13px; color:var(--body); }
.widget-trip__next { font-weight:600; color:var(--ink); }
.widget-trip__day { font-size:12px; color:var(--muted); }

/* currency / fact widgets with provenance */
.widget__stamp { margin-top:10px; font-size:10.5px; color:var(--muted); display:flex; align-items:center; gap:5px; flex-wrap:wrap; }
.widget__stamp a { color:var(--teal); font-weight:600; }

/* SOS widget (full width, emergency — prominent but not garish) */
.widget--sos { background:#fff; border-color:var(--danger-border); }
.widget--sos .widget__badge { background:var(--danger); color:#fff; }
.widget-sos__head { display:flex; align-items:center; gap:12px; margin-bottom:14px; }
.widget-sos__title { margin:0; font-size:16px; font-weight:600; color:var(--ink); }
.widget-sos__sub { margin:1px 0 0; font-size:12px; color:var(--danger-ink); display:flex; align-items:center; gap:5px; }
.widget-sos__calls { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:10px; }
.sos-call { display:flex; align-items:center; gap:10px; border-radius:14px; padding:12px 14px; text-decoration:none; }
.sos-call--primary { background:var(--danger); color:#fff; }
.sos-call--soft { background:var(--danger-bg); color:var(--danger-ink); }
.sos-call__label { font-size:12px; font-weight:600; line-height:1.1; }
.sos-call__num { font-size:16px; font-weight:700; }
.sos-call__icon { flex-shrink:0; }
.widget-sos__more { display:flex; align-items:center; justify-content:center; gap:6px; width:100%;
  background:var(--app-bg); border-radius:12px; padding:11px; color:var(--ink); font-weight:600; font-size:13px; text-decoration:none; }

/* settings + logout block on the dashboard */
.dash-foot { margin-top:22px; }
.list-card { background:#fff; border:1px solid var(--hairline); border-radius:var(--r-card); overflow:hidden; }
/* row base colour is teal so the leading Lucide icon inherits it (currentColor);
 * text elements pin their own colours. Avoids :first-child issues after Lucide
 * swaps <i>→<svg> and the CSRF hidden inputs shift child order. */
.list-card__row { display:flex; align-items:center; gap:14px; padding:15px 16px; border-bottom:1px solid var(--hairline-2);
  text-decoration:none; color:var(--teal); }
.list-card__row:last-child { border-bottom:none; }
.list-card__label { flex:1; font-size:14px; font-weight:600; color:var(--ink); }
.list-card__value { font-size:13px; color:var(--muted-2); }
.list-card__chev { color:#c4cbca; }
.list-card__row--danger { color:var(--danger); }
.list-card__row--danger .list-card__label { color:var(--danger); }

/* settings page sections */
.settings-section { margin:0 0 10px; font-size:12px; font-weight:600; color:var(--muted-2); letter-spacing:0.04em; text-transform:uppercase; }
.settings-group { margin-bottom:22px; }
.toggle { width:42px; height:25px; border-radius:9999px; background:#e3e8e7; position:relative; flex-shrink:0; border:none; cursor:pointer; transition:background .2s; }
.toggle__knob { position:absolute; top:3px; left:3px; width:19px; height:19px; border-radius:9999px; background:#fff; transition:left .2s var(--ease); }
.toggle.is-on { background:var(--teal); }
.toggle.is-on .toggle__knob { left:20px; }

/* ---- /profile/edit: the read-only email row ---- */
.pe-locked { display:flex; align-items:center; gap:10px; min-height:50px; padding:0 14px;
  border:1px solid var(--hairline); border-radius:14px; background:var(--app-bg);
  font-size:15px; color:var(--body); overflow-wrap:anywhere; }
.pe-locked__badge { margin-left:auto; display:inline-flex; align-items:center; gap:4px; flex:none;
  font-size:11.5px; font-weight:700; color:var(--teal); }

/* ---- /explore hub ---- */
.xp-intro { font-size:13.5px; line-height:1.55; color:var(--body); margin:2px 0 14px; }
.xp-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; padding:0 var(--gutter); }
.xp-card { width:100%; height:auto; aspect-ratio:4 / 5; }
.xp-card__eyebrow { display:block; font-size:11px; font-weight:600; letter-spacing:.06em;
  text-transform:uppercase; color:rgba(255,255,255,.82); margin-bottom:3px; }
@media (min-width:600px) { .xp-grid { grid-template-columns:repeat(3, 1fr); } }

/* ---- /cookies granular consent manager ---- */
.ck-sub { display:block; margin-top:3px; font-size:12px; line-height:1.5; color:var(--body); font-weight:400; }
.ck-locked { opacity:.55; cursor:default; }
.ck-actions { display:flex; gap:10px; margin:16px 0 0; }
.ck-actions .onb-btn { flex:1; height:48px; font-size:14.5px; }
.onb-btn--ghost { background:#fff; color:var(--teal); border:1px solid var(--hairline); }
.onb-btn--ghost:active { background:var(--teal-surface); }
.ck-saved { display:flex; align-items:center; justify-content:center; gap:6px; margin:12px 0 0;
  font-size:12.5px; font-weight:600; color:var(--teal); }
.settings-version { margin:18px 0 0; text-align:center; font-size:12px; color:#c4cbca; }
.settings-select { appearance:none; -webkit-appearance:none; border:none; background:transparent;
  font-family:inherit; font-size:13px; font-weight:600; color:var(--muted-2); cursor:pointer; text-align:right;
  padding-right:18px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23c4cbca' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right center; }
.list-card__row form, form.list-card__row { margin:0; }

/* ============================================================
 * AI travel assistant (chat over the UI)
 * ========================================================== */
.asst[hidden] { display:none; }
.asst { position:fixed; inset:0; z-index:80; display:flex; align-items:flex-end; justify-content:center; padding:0 var(--gutter-r) 0 var(--gutter-l); }
.asst__overlay { position:absolute; inset:0; background:rgba(28,26,24,0.4);
  backdrop-filter:blur(10px) saturate(120%); -webkit-backdrop-filter:blur(10px) saturate(120%); }
/* panel stays within the page's content gutter on every width (abides the margins) */
.asst__panel { position:relative; width:100%; max-width:calc(var(--app-max) - 2 * var(--gutter)); height:88vh; background:var(--glass-panel-bg); backdrop-filter:var(--glass-panel-blur); -webkit-backdrop-filter:var(--glass-panel-blur);
  border-radius:28px 28px 0 0; display:flex; flex-direction:column; overflow:hidden;
   animation:sheetrise var(--dur) var(--ease); box-shadow:var(--glass-panel-hi), var(--glass-panel-shadow); border:1px solid var(--glass-panel-border);}
@media (min-width:480px) { .asst { align-items:center; padding:24px; } .asst__panel { height:min(86vh,720px); border-radius:28px; max-width:calc(var(--app-max) - 2 * var(--gutter)); } }

.asst__head { display:flex; align-items:center; gap:12px; padding:16px 18px; background:#fff; border-bottom:1px solid var(--hairline-2); }
.asst__avatar { width:42px; height:42px; border-radius:9999px; background:var(--teal); color:#fff; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.asst__id { flex:1; min-width:0; }
.asst__title { margin:0; font-size:16px; font-weight:600; color:var(--ink); }
.asst__sub { margin:1px 0 0; font-size:12px; color:var(--muted); }
.asst__close { width:36px; height:36px; border-radius:9999px; background:var(--app-bg); border:none; color:var(--ink); cursor:pointer; display:flex; align-items:center; justify-content:center; }

.asst__messages { flex:1; overflow-y:auto; padding:18px var(--gutter); display:flex; flex-direction:column; gap:12px; }
.asst-msg { max-width:86%; font-size:14px; line-height:1.5; }
.asst-msg--user { align-self:flex-end; background:var(--teal); color:#fff; padding:11px 15px; border-radius:18px 18px 6px 18px; font-weight:500; }
.asst-msg--bot { align-self:flex-start; background:#fff; color:var(--ink); border:1px solid var(--hairline); padding:13px 15px; border-radius:18px 18px 18px 6px; width:86%; }
.asst-text { margin:0; font-size:14px; line-height:1.55; color:var(--body); }
.asst-text strong { color:var(--ink); }

/* typing dots */
.asst-typing { display:flex; gap:5px; align-items:center; padding:15px; }
.asst-typing span { width:7px; height:7px; border-radius:9999px; background:var(--muted-2); animation:asstdot 1s infinite ease-in-out; }
.asst-typing span:nth-child(2) { animation-delay:.15s; }
.asst-typing span:nth-child(3) { animation-delay:.3s; }
@keyframes asstdot { 0%,60%,100% { opacity:.3; transform:translateY(0); } 30% { opacity:1; transform:translateY(-3px); } }

/* result groups inside a bot bubble */
.asst-group { margin-top:10px; }
.asst-group__h { margin:0 0 6px; font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:0.05em; color:var(--muted-2); }
.asst-res { display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:12px; background:var(--app-bg);
  text-decoration:none; color:var(--ink); margin-bottom:6px; }
.asst-res:active { background:var(--teal-surface); }
.asst-res__ic { width:30px; height:30px; border-radius:9px; background:#fff; color:var(--teal); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.asst-res__body { flex:1; min-width:0; display:flex; flex-direction:column; }
.asst-res__title { font-size:13.5px; font-weight:600; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.asst-res__meta { font-size:11.5px; color:var(--muted); }
.asst-res__chev { color:#c4cbca; flex-shrink:0; }

/* quick command chips */
.asst__suggest { display:flex; gap:8px; overflow-x:auto; padding:10px var(--gutter); background:var(--app-bg); }
.asst-chip { flex-shrink:0; background:#fff; border:1px solid var(--hairline); border-radius:9999px; padding:9px 14px;
  font-family:inherit; font-size:13px; font-weight:600; color:var(--ink); cursor:pointer; white-space:nowrap; }
.asst-chip:active { background:var(--teal-surface); border-color:var(--teal); }

/* input bar */
.asst__inputbar { display:flex; align-items:center; gap:10px; padding:12px var(--gutter) calc(14px + env(safe-area-inset-bottom));
  background:#fff; border-top:1px solid var(--hairline-2); }
.asst__input { flex:1; border:1px solid var(--hairline); background:var(--app-bg); border-radius:9999px; padding:13px 16px;
  font-family:inherit; font-size:14px; color:var(--ink); outline:none; }
.asst__input:focus { border-color:var(--teal); }
.asst__send { width:46px; height:46px; border-radius:9999px; background:var(--teal); border:none; color:#fff; cursor:pointer;
  display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.asst__send:active { background:var(--teal-press); }

/* ============================================================
 * Grid menu modal (opened from the home header grid button)
 * ========================================================== */
.menu-grid[hidden] { display:none; }
/* centered modal on all viewports, background blurred around it */
.menu-grid { position:fixed; inset:0; z-index:65; display:flex; align-items:center; justify-content:center; padding:calc(var(--gutter) + var(--safe-t)) var(--gutter) calc(var(--gutter) + var(--safe-b)); }
.menu-grid__overlay { position:absolute; inset:0; background:rgba(28,26,24,0.34);
  backdrop-filter:blur(8px) saturate(120%); -webkit-backdrop-filter:blur(8px) saturate(120%); }
.menu-grid__panel { position:relative; width:100%; max-width:360px; background:var(--glass-panel-bg); backdrop-filter:var(--glass-panel-blur); -webkit-backdrop-filter:var(--glass-panel-blur);
  border-radius:28px; padding:18px 22px 26px;
   animation:menupop var(--dur) var(--ease); box-shadow:var(--glass-panel-hi), var(--glass-panel-shadow); border:1px solid var(--glass-panel-border); max-height:calc(100dvh - 2 * var(--gutter) - var(--safe-t) - var(--safe-b)); overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain;}
@keyframes menupop { from { transform:scale(.96); opacity:0; } to { transform:scale(1); opacity:1; } }
.menu-grid__grabber { display:none; }
.menu-grid__head { display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; }
.menu-grid__title { margin:0; font-size:20px; font-weight:600; color:var(--ink); }
.menu-grid__close { width:38px; height:38px; border-radius:var(--r-pill); background:var(--app-bg); border:none;
  color:var(--ink); cursor:pointer; display:flex; align-items:center; justify-content:center; }
.menu-grid__items { display:grid; grid-template-columns:repeat(3,1fr); gap:14px 10px; }
.menu-grid__item { display:flex; flex-direction:column; align-items:center; gap:9px; text-decoration:none;
  padding:8px 4px; border-radius:var(--r-card); }
.menu-grid__item:active { background:var(--app-bg); }
.menu-grid__icon { width:58px; height:58px; border-radius:18px; background:var(--teal-surface);
  display:flex; align-items:center; justify-content:center; color:var(--teal); }
.menu-grid__label { font-size:12px; font-weight:600; color:var(--ink); text-align:center; line-height:1.2; }

/* ============================================================
 * Interactive map (EXP-02)
 * ========================================================== */
.app__main--map { padding:0; position:relative; height:100vh; overflow:hidden; }
/* id-level specificity so we beat maplibre-gl.css's `.maplibregl-map{position:relative}`
   (it loads after our sheet); without this the container collapses to 0 height. */
#map.map-canvas { position:absolute; inset:0; width:100%; height:100%; z-index:0; background:#e8eceb; }
/* map loading skeleton: soft shimmer + pill until the vector style renders */
#map.map-canvas .maplibregl-canvas { opacity:0; transition:opacity .45s ease; }
#map.map-canvas.is-ready .maplibregl-canvas { opacity:1; }
.map-skeleton { position:absolute; inset:0; z-index:1; display:grid; place-items:center;
  background:linear-gradient(110deg, #e8eceb 40%, #f2f5f4 50%, #e8eceb 60%);
  background-size:220% 100%; animation:map-shimmer 1.6s linear infinite;
  transition:opacity .45s ease; pointer-events:none; }
.map-skeleton.is-done { opacity:0; }
.map-skeleton__pill { display:inline-flex; align-items:center; gap:7px; font-size:12.5px; font-weight:600;
  color:var(--muted); background:var(--glass-dark-bg); backdrop-filter:var(--glass-dark-blur); -webkit-backdrop-filter:var(--glass-dark-blur);
  border-radius:var(--r-pill); padding:9px 16px; box-shadow:0 10px 24px -16px rgba(20,40,45,0.4); }
@keyframes map-shimmer { from { background-position:200% 0; } to { background-position:-20% 0; } }
@media (prefers-reduced-motion: reduce) { .map-skeleton { animation:none; } }
.maplibregl-map { font-family:var(--font); }
/* hide MapLibre's own attribution / logo (custom controls used instead) */
.maplibregl-ctrl-bottom-right, .maplibregl-ctrl-bottom-left, .maplibregl-ctrl-attrib { display:none !important; }

/* pins — single seamless SVG teardrop pointing straight down (MapLibre marker, anchor:bottom).
   Thin uniform white stroke that tapers into the point: no ring cutting across the pin. */
.mk-pin { position:relative; width:30px; height:40px; cursor:pointer; }
.mk-tear { display:block; filter:drop-shadow(0 3px 4px rgba(28,26,24,0.32)); }
.mk-tear path { fill:var(--mk); stroke:#fff; stroke-width:1.25; stroke-linejoin:round; }
.mk-ic { position:absolute; top:0; left:0; width:30px; height:27px; display:flex; align-items:center; justify-content:center; pointer-events:none; }
.mk-ic i, .mk-ic svg { display:block; width:14px; height:14px; color:#fff; }
.mk-num { color:#fff; font:700 13px/1 var(--font); }
/* highlighted pin (e.g. "your embassy" focus) — pulsing ring to draw the eye */
.mk-pin--focus { z-index:5; }
.mk-pin--focus::before { content:''; position:absolute; left:50%; bottom:2px; width:16px; height:16px;
  transform:translateX(-50%); border-radius:9999px; background:var(--mk, var(--teal));
  animation:mk-pulse 1.6s ease-out infinite; pointer-events:none; }
@keyframes mk-pulse {
  0% { box-shadow:0 0 0 0 rgba(20,123,130,0.5); opacity:.9; }
  70% { box-shadow:0 0 0 16px rgba(20,123,130,0); opacity:.3; }
  100% { box-shadow:0 0 0 0 rgba(20,123,130,0); opacity:.9; }
}

/* your-location dot */
.mk-you { width:18px; height:18px; border-radius:9999px; background:var(--teal); border:3px solid #fff; box-shadow:0 0 0 4px rgba(20,123,130,0.25); }

/* 3D toggle */
.map-ctrl { width:50px; height:50px; flex-shrink:0; border-radius:9999px; background:#fff; border:none; color:var(--ink);
  display:flex; align-items:center; justify-content:center; cursor:pointer; box-shadow:var(--shadow-nav); }
.map-ctrl__3d { font:700 14px/1 var(--font); letter-spacing:0.02em; }
.map-ctrl.is-active { background:var(--teal); color:#fff; }

/* floating search + location (inline) */
.map-top { position:absolute; top:calc(16px + env(safe-area-inset-top)); left:var(--gutter-l); right:var(--gutter-r); z-index:1000;
  display:flex; align-items:center; gap:10px; }
.map-search { flex:1; display:flex; align-items:center; gap:10px; background:#fff; border-radius:var(--r-pill);
  padding:13px 16px; box-shadow:var(--shadow-nav); color:var(--teal); }
.map-search input { flex:1; border:none; background:transparent; outline:none; font-family:inherit; font-size:15px; color:var(--ink); min-width:0; }
.map-search__clear { width:28px; height:28px; border-radius:9999px; background:var(--app-bg); border:none; color:var(--ink);
  display:flex; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0; }
.map-search__clear[hidden] { display:none; }
/* real-time search results, anchored under the search field */
.map-results { position:absolute; top:calc(100% + 8px); left:60px; right:60px; z-index:1002;
  background:#fff; border-radius:18px; box-shadow:var(--shadow-nav); overflow:hidden;
  max-height:min(58vh, 420px); overflow-y:auto; -webkit-overflow-scrolling:touch;
  animation:map-results-in .16s ease-out; }
.map-results[hidden] { display:none; }
@keyframes map-results-in { from { opacity:0; transform:translateY(-6px); } to { opacity:1; transform:none; } }
.map-result { display:flex; align-items:center; gap:12px; width:100%; padding:12px 14px; border:none;
  background:transparent; cursor:pointer; text-align:left; font-family:inherit; color:var(--ink);
  border-bottom:1px solid var(--hairline); }
.map-result:last-child { border-bottom:none; }
.map-result:hover, .map-result.is-active { background:var(--teal-wash, #eef6f6); }
.map-result__ic { width:34px; height:34px; flex-shrink:0; border-radius:9999px; background:var(--teal-wash, #eef6f6);
  color:var(--teal); display:flex; align-items:center; justify-content:center; }
.map-result__txt { flex:1; min-width:0; display:flex; flex-direction:column; gap:1px; }
.map-result__name { font-weight:600; font-size:14.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.map-result__sub { font-size:12.5px; color:var(--ink-soft, #6b7775); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.map-result__go { color:var(--ink-faint, #aab3b1); flex-shrink:0; }
.map-result--empty { display:flex; align-items:center; gap:8px; justify-content:center; color:var(--ink-soft, #6b7775);
  font-size:13.5px; padding:18px 14px; cursor:default; }
.map-iconbtn { width:50px; height:50px; flex-shrink:0; border-radius:9999px; background:var(--teal); border:none; color:#fff;
  display:flex; align-items:center; justify-content:center; cursor:pointer; box-shadow:var(--shadow-nav); }
.map-iconbtn:active { background:var(--teal-press); }

/* right-side controls: zoom */
.map-controls { position:absolute; top:calc(134px + env(safe-area-inset-top)); right:var(--gutter-r); z-index:1000;
  display:flex; flex-direction:column; align-items:center; gap:12px; }
.map-ctrl--reset { margin-bottom:6px; }
.map-zoom { display:flex; flex-direction:column; background:#fff; border-radius:24px; box-shadow:var(--shadow-nav); overflow:hidden; }
.map-zoom__btn { width:48px; height:46px; background:none; border:none; color:var(--ink); cursor:pointer; display:flex; align-items:center; justify-content:center; }
.map-zoom__btn:active { background:var(--app-bg); }
.map-zoom__sep { height:1px; background:var(--hairline); margin:0 10px; }

/* filter chips (icon + label) — horizontal carousel, aligned to the page gutter */
.map-filters { position:absolute; top:calc(76px + env(safe-area-inset-top)); left:0; right:0; z-index:999;
  display:flex; gap:5px; overflow-x:auto; overflow-y:hidden; padding:4px var(--gutter);
  scroll-padding-inline:var(--gutter); -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain; }
.map-chip { flex-shrink:0; display:inline-flex; align-items:center; gap:6px; background:#fff; border:1px solid var(--hairline);
  border-radius:var(--r-pill); padding:9px 12px; font-size:13px; font-weight:600; color:var(--ink); cursor:pointer; box-shadow:var(--shadow-card); }
.map-chip i, .map-chip svg { color:var(--teal); }
.map-chip.is-active { background:var(--teal); color:#fff; border-color:var(--teal); }
.map-chip.is-active i, .map-chip.is-active svg { color:#fff; }
.map-chip--svc { color:var(--danger); }
.map-chip--svc i, .map-chip--svc svg { color:var(--danger); }
.map-chip--svc.is-active { background:var(--danger); color:#fff; border-color:var(--danger); }
.map-chip--svc.is-active i, .map-chip--svc.is-active svg { color:#fff; }
.map-chip--icon { padding:9px 12px; gap:0; }
/* My trip · Categories · Emergency: equal width, centred labels, fill the row */
.map-filters .map-chip { flex:1 1 0; min-width:0; justify-content:center; padding-left:8px; padding-right:8px; }
.map-chip--emergency { color:var(--danger); }
.map-chip--emergency i, .map-chip--emergency svg { color:var(--danger); }
.map-chip--emergency.is-active { background:var(--danger); color:#fff; border-color:var(--danger); }
.map-chip--emergency.is-active i, .map-chip--emergency.is-active svg { color:#fff; }
.map-chip--open.is-active { background:#1a7f4b; color:#fff; border-color:#1a7f4b; }
.map-chip--open.is-active i, .map-chip--open.is-active svg { color:#fff; }

/* categories dropdown (under the search) */
.map-cat-dropdown { position:absolute; top:calc(120px + env(safe-area-inset-top)); left:var(--gutter-l); z-index:1001;
  width:min(260px, calc(100% - 2 * var(--gutter))); background:var(--glass-panel-bg); backdrop-filter:var(--glass-panel-blur); -webkit-backdrop-filter:var(--glass-panel-blur); border-radius:var(--r-card);
   padding:6px; max-height:54vh; overflow-y:auto;
  animation:menupop var(--dur) var(--ease); box-shadow:var(--glass-panel-hi), var(--glass-panel-shadow); border:1px solid var(--glass-panel-border);}
.map-cat-dropdown[hidden] { display:none; }
.map-cat-group { margin:8px 10px 4px; font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:#9aa3a0; }
.map-cat-group:first-child { margin-top:4px; }
.map-cat-opt { display:flex; align-items:center; gap:10px; width:100%; background:none; border:none; cursor:pointer;
  padding:10px 10px; border-radius:10px; font-family:inherit; font-size:14px; font-weight:600; color:var(--ink); text-align:left; }
.map-cat-opt:active { background:var(--app-bg); }
.map-cat-opt__ic { width:30px; height:30px; border-radius:9px; background:var(--teal-surface); color:var(--teal);
  display:flex; align-items:center; justify-content:center; flex-shrink:0; }
/* Emergency: pinned first, flagged red, with a divider below it */
.map-cat-opt--emergency { color:var(--danger); margin-bottom:4px; padding-bottom:12px; border-bottom:1px solid var(--hairline-2); }
.map-cat-opt--emergency .map-cat-opt__ic { background:rgba(193,58,58,0.10); color:var(--danger); }

/* ---- rich preview card (tap a pin) ---- */
.map-preview[hidden] { display:none; }
.map-preview { position:absolute; left:var(--gutter); right:var(--gutter); bottom:108px; z-index:1000;
  max-width:calc(var(--app-max) - 2 * var(--gutter)); margin:0 auto; background:#fff; border-radius:var(--r-2xl);
  box-shadow:0 16px 44px rgba(28,26,24,0.3); overflow:hidden; animation:menupop var(--dur) var(--ease); }
.mpv-media { position:relative; height:190px; }
.mpv-body { cursor:pointer; }

/* freeze the page behind a full-screen overlay (quick menu, drawer, search…) */
html.is-modal-open, html.is-modal-open body,
html.is-modal-open .app__shell, html.is-modal-open .app__main { overflow:hidden !important; }
/* the fixed floating nav/FAB composites above overlay scrims — tuck it away while a modal is open */
html.is-modal-open .floating-nav { opacity:0; pointer-events:none; transition:opacity .2s ease; }
.mpv-img { width:100%; height:100%; object-fit:cover; display:block; background:var(--app-bg); }
.mpv-img--ph { background:linear-gradient(135deg, var(--teal-surface), #dfeae8); }
/* swipeable photo carousel inside the card */
.mpv-carousel { display:flex; height:100%; overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; }
.mpv-slide { flex:0 0 100%; width:100%; height:100%; object-fit:cover; scroll-snap-align:center; cursor:zoom-in; display:block; background:var(--app-bg); }
.mpv-dots { position:absolute; left:0; right:0; bottom:10px; display:flex; gap:5px; justify-content:center; pointer-events:none; }
.mpv-dot { width:6px; height:6px; border-radius:9999px; background:rgba(255,255,255,0.55); box-shadow:0 0 2px rgba(0,0,0,.3); transition:width .25s var(--ease), background .25s var(--ease); }
.mpv-dot.is-on { width:18px; background:#fff; }

/* fullscreen image lightbox (zoom) */
.lightbox { position:fixed; inset:0; z-index:5000; display:flex; align-items:center; justify-content:center;
  background:rgba(16,18,18,0.92); opacity:0; transition:opacity .22s var(--ease); padding:env(safe-area-inset-top) 0 0; }
.lightbox.is-open { opacity:1; }
.lightbox__img { max-width:100vw; max-height:100vh; object-fit:contain; cursor:zoom-in; transition:transform .28s var(--ease); will-change:transform; }
.lightbox__img.is-zoomed { transform:scale(2.4); cursor:zoom-out; }
.lightbox__close { position:absolute; top:calc(14px + env(safe-area-inset-top)); right:14px; width:42px; height:42px; border-radius:9999px;
  background:var(--glass-dark-bg); border:1px solid var(--glass-dark-border); color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; backdrop-filter:var(--glass-dark-blur); -webkit-backdrop-filter:var(--glass-dark-blur); }
.lightbox__count { position:absolute; bottom:calc(18px + env(safe-area-inset-bottom)); left:50%; transform:translateX(-50%);
  color:#fff; font:600 13px var(--font); background:var(--glass-dark-bg); padding:5px 12px; border-radius:9999px; backdrop-filter:var(--glass-dark-blur); -webkit-backdrop-filter:var(--glass-dark-blur); }
.mpv-close { position:absolute; top:12px; left:12px; width:32px; height:32px; border-radius:9999px;
  background:rgba(255,255,255,0.85); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); border:none; color:var(--ink);
  display:flex; align-items:center; justify-content:center; cursor:pointer; }
.mpv-save { position:absolute; top:12px; right:12px; width:38px; height:38px; border-radius:9999px;
  background:rgba(255,255,255,0.9); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); border:none; color:var(--ink);
  display:flex; align-items:center; justify-content:center; cursor:pointer; }
.mpv-save.is-saved { color:var(--danger); }
.mpv-save.is-saved svg { fill:var(--danger); }
.mpv-rating { position:absolute; left:12px; bottom:12px; display:inline-flex; align-items:center; gap:5px;
  background:rgba(16,30,33,0.55); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); color:#fff;
  border-radius:9999px; padding:5px 11px; font-size:13px; font-weight:600; }
.mpv-rating i, .mpv-rating svg { color:#ffc24b; fill:#ffc24b; }
.mpv-rating span { font-weight:500; opacity:.85; }
.mpv-body { padding:16px; }
.mpv-body--svc { padding:18px 16px; }
.mpv-titlerow { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.mpv-title { margin:0; font-size:19px; font-weight:600; color:var(--ink); line-height:1.25; letter-spacing:-0.01em;
  display:-webkit-box; -webkit-line-clamp:2; line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.mpv-price { flex-shrink:0; font-size:14px; font-weight:700; color:var(--teal); background:var(--teal-surface); border-radius:var(--r-pill); padding:5px 12px; }
.mpv-sub { margin:4px 0 0; font-size:13px; color:var(--muted); display:inline-flex; align-items:center; gap:5px; }
.mpv-sub i, .mpv-sub svg { color:var(--teal); }
.mpv-chips { display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; }
.mpv-chip { display:inline-flex; align-items:center; gap:5px; font-size:11.5px; font-weight:600; color:var(--body);
  background:var(--app-bg); border-radius:9999px; padding:5px 10px; }
.mpv-chip i, .mpv-chip svg { color:var(--teal); }
.mpv-chip--open { color:#1a7f4b; background:rgba(26,127,75,0.10); }
.mpv-chip--open i, .mpv-chip--open svg { color:#1a7f4b; }
.mpv-chip--closed { color:var(--danger); background:rgba(193,58,58,0.08); }
.mpv-chip--closed i, .mpv-chip--closed svg { color:var(--danger); }
.mpv-desc { margin:10px 0 0; font-size:14px; line-height:1.55; color:var(--body);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.mpv-actions { display:flex; align-items:center; gap:10px; margin-top:16px; }
.mpv-add { flex:1; display:inline-flex; align-items:center; justify-content:center; gap:8px; background:var(--teal); color:#fff;
  border:none; border-radius:var(--r-pill); padding:14px; font-family:inherit; font-weight:600; font-size:15px; cursor:pointer; text-decoration:none; }
.mpv-add:active { background:var(--teal-press); }
.mpv-add--call { background:var(--danger); }
.mpv-add--call:active { background:#a82f2f; }
.mpv-act { width:50px; height:50px; flex-shrink:0; border-radius:9999px; border:1px solid var(--hairline); background:#fff;
  color:var(--teal); display:flex; align-items:center; justify-content:center; cursor:pointer; text-decoration:none; }
.mpv-act:active { background:var(--teal-surface); }
.mpv-svc-ic { width:46px; height:46px; border-radius:14px; display:flex; align-items:center; justify-content:center; margin-bottom:10px; }
.mpv-close--inline { position:absolute; top:14px; right:14px; left:auto; }

/* ============================================================
 * Essentials knowledge hub + articles ("live diary")
 * ========================================================== */
.kb-lead { margin:0 0 18px; font-size:14px; line-height:1.55; color:var(--body); }

/* breadcrumbs (light titled/prose pages) */
.crumbs { display:flex; flex-wrap:wrap; align-items:center; gap:4px; margin:0 0 16px; font-size:12.5px; }
.crumbs__link { color:var(--teal); text-decoration:none; font-weight:600; }
.crumbs__link:active { opacity:.7; }
.crumbs__sep { color:#c4cbca; flex-shrink:0; }
.crumbs__cur { color:#8b938f; }

/* prose / legal pages */
.prose-wrap { padding:0 var(--gutter) 40px; }
.prose-sec { margin-bottom:22px; }
.prose-sec__h { margin:0 0 8px; font-size:17px; font-weight:600; color:var(--ink); }
.prose-sec__p { margin:0 0 11px; font-size:14.5px; line-height:1.68; color:var(--body); }
.prose-sec__p a { color:var(--teal); text-decoration:none; font-weight:600; }
.prose-sec__p a:hover { text-decoration:underline; }
.prose-updated { margin:8px 0 0; font-size:12px; color:#9aa3a0; }

.kb-search { display:flex; align-items:center; gap:10px; background:#fff; border:1px solid var(--hairline);
  border-radius:var(--r-pill); padding:13px 16px; margin-bottom:20px; color:var(--teal); }
.kb-search input { flex:1; border:none; background:transparent; outline:none; font-family:inherit; font-size:14px; color:var(--ink); }

/* featured guide */
.kb-featured { display:block; position:relative; height:180px; border-radius:var(--r-2xl); overflow:hidden; }
.kb-featured__img { width:100%; height:100%; object-fit:cover; }
.kb-featured__scrim { position:absolute; inset:0; background:linear-gradient(to top, rgba(15,40,38,0.78), rgba(15,40,38,0.05)); }
.kb-featured__body { position:absolute; inset:auto 0 0 0; padding:18px; display:flex; flex-direction:column; gap:4px; }
.kb-featured__tag { align-self:flex-start; font-size:11px; font-weight:600; color:#fff; background:rgba(255,255,255,0.22);
  border:1px solid rgba(255,255,255,0.35); border-radius:var(--r-pill); padding:4px 10px; backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }
.kb-featured__title { font-size:18px; font-weight:600; color:#fff; line-height:1.25; }
.kb-featured__meta { font-size:12px; color:rgba(255,255,255,0.85); }

/* latest rail */
.kb-latest { display:flex; gap:12px; overflow-x:auto; padding-bottom:6px; margin:0 calc(-1 * var(--gutter)); padding-inline:var(--gutter);
  scroll-snap-type:x mandatory; scroll-padding-inline:var(--gutter); -webkit-overflow-scrolling:touch; }
.kb-latest__card { flex-shrink:0; width:215px; background:#fff; border:1px solid var(--hairline); border-radius:var(--r-card); scroll-snap-align:start;
  padding:14px; display:flex; flex-direction:column; gap:6px; }
.kb-latest__chip { align-self:flex-start; font-size:11px; font-weight:600; color:var(--teal); background:var(--teal-surface); border-radius:var(--r-pill); padding:3px 9px; }
.kb-latest__title { font-size:14px; font-weight:600; color:var(--ink); line-height:1.3; }
.kb-latest__meta { font-size:11.5px; color:var(--muted); margin-top:auto; }

/* category clusters */
.kb-cluster { margin-top:26px; }
.kb-cluster__title { margin:0 0 12px; font-size:17px; font-weight:600; color:var(--ink); }
.kb-grid { display:flex; flex-direction:column; gap:10px; }
.kb-tile { display:flex; align-items:center; gap:14px; background:#fff; border:1px solid var(--hairline);
  border-radius:var(--r-card); padding:14px 16px; }
.kb-tile__icon { width:42px; height:42px; border-radius:12px; background:var(--teal-surface); color:var(--teal);
  display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.kb-tile__body { flex:1; display:flex; flex-direction:column; gap:2px; min-width:0; }
.kb-tile__label { font-size:14px; font-weight:600; color:var(--ink); display:flex; align-items:center; gap:8px; }
.kb-tile__count { font-size:11px; font-weight:600; color:var(--teal); background:var(--teal-surface); border-radius:var(--r-pill); padding:1px 8px; }
.kb-tile__blurb { font-size:12.5px; color:var(--muted); }
.kb-tile__chev { color:#c4cbca; flex-shrink:0; }
.kb-empty-search { text-align:center; color:var(--muted); padding:20px; }

/* category list */
.kb-list { display:flex; flex-direction:column; gap:14px; }
.kb-article-card { display:flex; gap:14px; background:#fff; border:1px solid var(--hairline); border-radius:var(--r-card); overflow:hidden; }
.kb-article-card__img { width:110px; flex-shrink:0; aspect-ratio:11/10; object-fit:cover; background:var(--app-bg); }
.kb-article-card__body { display:flex; flex-direction:column; gap:4px; padding:14px 14px 14px 0; min-width:0; }
.kb-article-card__kicker { font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:0.04em; color:var(--teal); }
.kb-article-card__title { margin:0; font-size:15px; font-weight:600; color:var(--ink); line-height:1.25; }

/* month divider for long archives (news diary) */
.kb-month { display:flex; align-items:center; gap:8px; margin:22px 0 12px; font-size:13px; font-weight:700;
  letter-spacing:.04em; text-transform:uppercase; color:#8b938f; }
.kb-month:first-of-type { margin-top:4px; }
.kb-month__n { font-size:11px; font-weight:600; color:var(--teal); background:var(--teal-surface);
  border-radius:9999px; padding:2px 8px; letter-spacing:0; }
.kb-article-card__summary { font-size:12.5px; color:var(--muted); line-height:1.45;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.kb-article-card__meta { font-size:11px; color:var(--muted-2); margin-top:2px; }

/* article */
.kb-hero { position:relative; height:240px; }
.kb-hero__img { width:100%; height:100%; object-fit:cover; }
.kb-hero__back { position:absolute; top:var(--pad-top-lg); left:20px; }
.kb-hero__save { position:absolute; top:var(--pad-top-lg); right:20px; }
.kb-hero__share { position:absolute; top:var(--pad-top-lg); right:72px; }
.kb-hero__save.is-saved { background:var(--teal); color:#fff; border-color:var(--teal); }
.kb-hero__save.is-saved i { fill:currentColor; }
.kb-article { padding:20px var(--gutter) 0; }
.kb-article__cat { display:inline-block; font-size:12px; font-weight:600; color:var(--teal); background:var(--teal-surface);
  border-radius:var(--r-pill); padding:5px 12px; margin-bottom:12px; }
.kb-article__title { margin:0 0 10px; font-size:26px; font-weight:600; color:var(--ink); line-height:1.18; }
.kb-article__summary { margin:0 0 14px; font-size:15px; line-height:1.6; color:var(--body); }
.kb-stamp { display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:12px; color:var(--muted);
  padding:10px 0; border-top:1px solid var(--hairline-2); border-bottom:1px solid var(--hairline-2); margin-bottom:18px; }
.kb-stamp i { color:var(--teal); }
.kb-stamp__badge { margin-left:auto; font-size:11px; font-weight:600; color:var(--teal); background:var(--teal-surface); border-radius:var(--r-pill); padding:3px 9px; }

/* sourced intel callout (e.g. seasonal pricing note on /hotels) */
.kb-note { background:var(--teal-surface); border:1px solid var(--hairline); border-radius:var(--r-card); padding:16px 18px 15px; }
.kb-note__head { display:flex; align-items:center; gap:8px; font-size:13.5px; font-weight:700; color:var(--ink); margin-bottom:7px; }
.kb-note__head i { color:var(--teal); }
.kb-note__p { margin:0 0 10px; font-size:13.5px; line-height:1.55; color:var(--body); }
.kb-note__link { display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:600; color:var(--teal); text-decoration:none; }

.kb-toc { background:var(--app-bg); border:1px solid var(--hairline); border-radius:var(--r-card); padding:6px 16px; margin-bottom:22px; }
.kb-toc__summary { display:flex; align-items:center; gap:8px; font-size:13px; font-weight:600; color:var(--ink); padding:10px 0; cursor:pointer; list-style:none; }
.kb-toc__summary::-webkit-details-marker { display:none; }
.kb-toc__summary i { color:var(--teal); }
.kb-toc__list { margin:0 0 10px; padding:0 0 0 4px; list-style:none; display:flex; flex-direction:column; gap:8px; }
.kb-toc__list a { font-size:13.5px; color:var(--body); text-decoration:none; }
.kb-toc__list a:hover { color:var(--teal); }

.kb-section { margin-bottom:24px; scroll-margin-top:20px; }
.kb-section__h { margin:0 0 10px; font-size:18px; font-weight:600; color:var(--ink); }
.kb-section__note { margin:0 0 10px; font-size:13px; color:var(--muted); }
.kb-section__p { margin:0 0 12px; font-size:14.5px; line-height:1.68; color:var(--body); }
.kb-section__p strong { color:var(--ink); font-weight:600; }
.kb-section__refs { font-size:12px; color:var(--muted); }
.kb-ref { color:var(--teal); font-weight:600; text-decoration:none; margin-left:2px; }

.kb-accordion { display:flex; flex-direction:column; gap:8px; }
.kb-acc__item { background:#fff; border:1px solid var(--hairline); border-radius:var(--r-lg); overflow:hidden; }
.kb-acc__q { padding:13px 16px; font-size:14px; font-weight:600; color:var(--ink); cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center; }
.kb-acc__q::-webkit-details-marker { display:none; }
.kb-acc__q::after { content:'+'; color:var(--teal); font-size:18px; font-weight:400; }
.kb-acc__item[open] .kb-acc__q::after { content:'–'; }
.kb-acc__a { padding:0 16px 14px; font-size:13.5px; line-height:1.6; color:var(--body); }

.kb-sources { margin-top:8px; padding-top:18px; border-top:1px solid var(--hairline-2); }
.kb-sources__list { margin:0; padding-left:22px; display:flex; flex-direction:column; gap:8px; }
.kb-sources__list li { font-size:13px; color:var(--body); }
.kb-sources__list a { color:var(--teal); text-decoration:none; }
.kb-disclaimer { margin-top:16px; font-size:12px; color:var(--muted); line-height:1.55; background:var(--teal-surface); padding:12px 14px; border-radius:var(--r-lg); }

/* ============================================================
 * My Itinerary planner (PLN-01/03)
 * ========================================================== */
/* trip header: big editable name, quiet meta, one overflow button */
.it2-head { display:flex; align-items:flex-start; gap:12px; margin-bottom:18px; }
.it2-head__main { flex:1; min-width:0; }
.it2-name { width:100%; background:transparent; border:none; outline:none; font-family:inherit;
  font-size:26px; font-weight:600; letter-spacing:-0.02em; color:var(--ink); padding:2px 0 0; }
.it2-name::placeholder { color:var(--muted-2); font-weight:600; }
.it2-meta { margin:4px 0 0; font-size:13.5px; color:var(--muted); }
.it2-menu-btn { width:42px; height:42px; flex-shrink:0; border-radius:9999px; background:#fff;
  border:1px solid var(--hairline); color:var(--ink); cursor:pointer; display:grid; place-items:center; }
.it2-menu-btn:active { background:var(--app-bg); }

/* day pager: big segmented pills, one active day */
.it2-pager { display:flex; gap:8px; overflow-x:auto; margin:0 calc(-1 * var(--gutter)) 20px;
  padding:2px var(--gutter) 8px; }
.it2-tab { flex-shrink:0; min-height:44px; padding:10px 20px; border-radius:var(--r-pill);
  background:#fff; border:1px solid var(--hairline); font-family:inherit; font-size:14px; font-weight:600;
  color:var(--ink); cursor:pointer; transition:background .18s ease, color .18s ease, border-color .18s ease; }
.it2-tab.is-active { background:var(--teal); border-color:var(--teal); color:#fff; }
.it2-tab--add { width:44px; padding:0; display:grid; place-items:center; color:var(--teal); }

/* the one visible day */
.it2-day.is-in { animation:page-enter .28s var(--ease) both; }
.it2-day__head { display:flex; align-items:center; gap:10px; margin-bottom:14px; }
.it2-day__title { margin:0; font-size:19px; font-weight:600; letter-spacing:-0.01em; color:var(--ink); }
.it2-day__count { font-size:12px; font-weight:600; color:var(--teal); background:var(--teal-surface);
  border-radius:var(--r-pill); padding:3px 11px; }
.it2-day__map { margin-left:auto; display:inline-flex; align-items:center; gap:6px; font-size:13px;
  font-weight:600; color:var(--teal); text-decoration:none; padding:8px 12px; border-radius:var(--r-pill);
  background:var(--teal-surface); }

/* the timeline rail: numbered nodes on a spine, cards to the right */
.it2-rail { position:relative; margin-bottom:14px; padding-left:40px; }
.it2-rail::before { content:''; position:absolute; left:13px; top:16px; bottom:16px; width:2px; background:var(--teal-surface); }
.it2-row { position:relative; margin-bottom:10px; }
.it2-node { position:absolute; left:-40px; top:calc(50% - 14px); width:28px; height:28px; border-radius:9999px;
  background:var(--teal); color:#fff; font-size:12px; font-weight:700; display:grid; place-items:center;
  box-shadow:0 0 0 3px var(--app-bg); z-index:1; }
.it2-node--dot { width:8px; height:8px; left:-30px; top:calc(50% - 4px); background:var(--teal-surface);
  box-shadow:none; border:2px solid #fff; }

/* photo stop cards */
.it2-stop { position:relative; display:flex; flex-direction:column; background:#fff;
  border:1px solid var(--hairline); border-radius:18px; padding:12px;
  box-shadow:0 10px 24px -20px rgba(20,40,45,0.4); }
.it2-stop__main { display:flex; align-items:center; gap:12px; }
.it2-stop__img { width:56px; height:56px; flex-shrink:0; border-radius:14px; object-fit:cover; background:var(--app-bg); align-self:flex-start; }
.it2-stop__img--icon { display:grid; place-items:center; background:var(--teal-surface); color:var(--teal); }
.it2-stop__body { flex:1; min-width:0; display:flex; flex-direction:column; gap:6px; }
.it2-stop__name { font-size:15px; font-weight:600; color:var(--ink); text-decoration:none;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.it2-stop__time { position:relative; display:inline-flex; align-items:center; gap:5px; width:fit-content;
  font-size:12px; font-weight:600; color:var(--muted); background:var(--app-bg);
  border-radius:var(--r-pill); padding:4px 10px; cursor:pointer; }
.it2-stop__time.has-time { color:var(--teal); background:var(--teal-surface); }
.it2-stop__time input { position:absolute; inset:0; opacity:0; cursor:pointer; }
/* fallback when showPicker() is unavailable: reveal the native input inline */
.it2-stop__time.is-editing input { position:static; opacity:1; width:auto; border:none; background:transparent;
  font-family:inherit; font-size:12px; color:var(--ink); outline:none; padding:0; }
.it2-stop__time.is-editing .it2-stop__timelabel { display:none; }
.it2-stop__grip { color:#cdd4d3; cursor:grab; touch-action:none; display:flex; flex-shrink:0; padding:6px 2px; }
.it2-stop__grip:active { cursor:grabbing; }
.it2-stop__remove { background:none; border:none; color:var(--muted-2); cursor:pointer; padding:6px 4px 6px 0; flex-shrink:0; align-self:flex-start; }
.it2-row.is-lifted .it2-stop { box-shadow:0 18px 42px -14px rgba(28,26,24,0.45); }
.it2-row.is-lifted .it2-node { display:none; }
.it2-stop-ph { border:2px dashed rgba(20,123,130,0.3); border-radius:18px; background:rgba(20,123,130,0.05); margin-bottom:10px; }

/* card action row: directions / save / nearby / details — one clean equal-width row */
.it2-actions { display:flex; gap:8px; margin-top:10px;
  padding-top:10px; border-top:1px solid var(--hairline); }
.it2-abtn { flex:1 1 0; min-width:0; padding:0; height:38px; display:grid; place-items:center; border-radius:12px;
  background:var(--app-bg); border:none; color:var(--muted); cursor:pointer; text-decoration:none;
  transition:background .15s ease, color .15s ease; }
.it2-abtn:active { background:var(--teal-surface); color:var(--teal); }
.it2-abtn.is-saved { background:var(--teal-surface); color:var(--teal); }
.it2-abtn.is-saved i, .it2-abtn.is-saved svg { fill:currentColor; }

/* travel segment between stops: one quiet estimate, tap to expand modes */
.it2-row--seg { margin:2px 0 12px; }
.it2-seg__btn { display:inline-flex; align-items:center; gap:6px; background:none; border:none;
  font-family:inherit; font-size:12.5px; font-weight:600; color:var(--muted); cursor:pointer; padding:4px 2px; }
.it2-seg__btn i, .it2-seg__btn svg { color:#aab3b1; }
.it2-seg__chev { transition:transform .2s ease; }
.it2-seg.is-open .it2-seg__chev { transform:rotate(180deg); }
.it2-seg__panel { display:none; flex-direction:column; gap:8px; margin-top:6px; padding:12px 14px;
  background:#fff; border:1px solid var(--hairline); border-radius:14px; }
.it2-seg.is-open .it2-seg__panel { display:flex; }
.it2-seg__mode { display:inline-flex; align-items:center; gap:9px; font-size:13px; font-weight:600; color:var(--ink); }
.it2-seg__mode i, .it2-seg__mode svg { color:var(--teal); }
.it2-seg__mode--link { text-decoration:none; color:var(--teal); }
/* mode that simply is not available on this route (e.g. no railway) */
.it2-seg__mode--off { color:var(--muted-2); font-weight:500; }
.it2-seg__mode--off i, .it2-seg__mode--off svg { color:var(--muted-2); opacity:.7; }
.it2-seg__foot { font-size:11.5px; color:var(--muted-2); }
/* segments hide while a card is being dragged: cleaner reorder */
body.is-dragging-widget .it2-row--seg { display:none; }

/* Plan A / Plan B switcher */
.it2-plans { margin-bottom:16px; }
.it2-plans__tabs { display:flex; background:#fff; border:1px solid var(--hairline); border-radius:var(--r-pill); padding:4px; }
.it2-plans__tab { flex:1; min-height:40px; border:none; border-radius:var(--r-pill); background:transparent;
  font-family:inherit; font-size:14px; font-weight:600; color:var(--muted); cursor:pointer;
  transition:background .18s ease, color .18s ease; }
.it2-plans__tab.is-active { background:var(--teal); color:#fff; }
.it2-plans__cap { margin:7px 2px 0; font-size:12px; color:var(--muted-2); }

/* small loading/empty line in sheets */
.it2-loading { margin:14px 4px; font-size:13px; color:var(--muted); }
.picker-row__add { margin-left:auto; width:30px; height:30px; flex-shrink:0; border-radius:9999px;
  background:var(--teal-surface); color:var(--teal); display:grid; place-items:center; }

/* the one primary action */
.it2-add { display:flex; align-items:center; justify-content:center; gap:8px; width:100%; min-height:54px;
  background:var(--teal-surface); border:none; border-radius:18px; color:var(--teal);
  font-family:inherit; font-weight:600; font-size:15px; cursor:pointer; }
.it2-add:active { background:var(--teal); color:#fff; }

/* quiet day removal, far from the primary path */
.it2-removeday { display:block; margin:18px auto 0; background:none; border:none; font-family:inherit;
  font-size:13px; font-weight:600; color:var(--muted-2); cursor:pointer; padding:8px; }
.it2-removeday:active { color:var(--danger); }

/* empty day */
.it2-empty { display:flex; flex-direction:column; align-items:center; gap:8px; padding:34px 16px;
  margin-bottom:14px; background:#fff; border:1px dashed var(--hairline); border-radius:18px;
  color:var(--muted); text-align:center; }
.it2-empty i, .it2-empty svg { color:var(--teal); }
.it2-empty p { margin:0; font-size:14px; }

/* brand-new trip: two big clear choices */
.it2-fresh { display:flex; flex-direction:column; align-items:center; gap:10px; padding:44px 22px;
  background:#fff; border:1px solid var(--hairline); border-radius:22px; text-align:center; }
.it2-fresh__hi { margin:0; font-size:21px; font-weight:600; letter-spacing:-0.01em; color:var(--ink); }
.it2-fresh__sub { margin:0 0 14px; font-size:14px; color:var(--muted); }
.it2-fresh__btn { display:flex; align-items:center; justify-content:center; gap:8px; width:100%; min-height:52px;
  border-radius:var(--r-pill); background:#fff; border:1px solid var(--hairline); font-family:inherit;
  font-size:15px; font-weight:600; color:var(--ink); cursor:pointer; }
.it2-fresh__btn--primary { background:var(--teal); border-color:var(--teal); color:#fff; }

/* header menu sheet rows */
.it2-sheet__row { display:flex; align-items:center; gap:13px; width:100%; text-align:left; background:none;
  border:none; border-bottom:1px solid var(--hairline-2); padding:14px 4px; cursor:pointer; font-family:inherit; }
.it2-sheet__row:last-child { border-bottom:none; }
.it2-sheet__ic { width:40px; height:40px; flex-shrink:0; border-radius:12px; background:var(--teal-surface);
  color:var(--teal); display:grid; place-items:center; }
.it2-sheet__row--danger .it2-sheet__ic { background:rgba(193,58,58,0.09); color:var(--danger); }
.it2-sheet__row > span:last-child { display:flex; flex-direction:column; gap:2px; min-width:0; }
.it2-sheet__name { font-size:14.5px; font-weight:600; color:var(--ink); }
.it2-sheet__row--danger .it2-sheet__name { color:var(--danger); }
.it2-sheet__sub { font-size:12.5px; color:var(--muted); }

/* confirm modal */
.it2-confirm { text-align:center; padding:6px 4px 2px; }
.it2-confirm__title { margin:0 0 6px; font-size:17px; font-weight:600; color:var(--ink); }
.it2-confirm__sub { margin:0 0 18px; font-size:13.5px; color:var(--muted); }
.it2-confirm__row { display:flex; gap:10px; }
.it2-confirm__row .btn-pill { flex:1; }

/* curated routes sheet */
.tpl-sheet__note { margin:0 0 14px; font-size:13px; color:var(--muted); }
.tpl-list { display:flex; flex-direction:column; gap:10px; max-height:54vh; overflow-y:auto; }
.tpl-card { display:flex; flex-direction:column; gap:3px; text-align:left; background:var(--app-bg); border:1px solid var(--hairline);
  border-radius:var(--r-card); padding:14px 16px; cursor:pointer; }
.tpl-card:active { border-color:var(--teal); }
.tpl-card__name { font-size:14.5px; font-weight:600; color:var(--ink); }
.tpl-card__len { font-size:12px; color:var(--muted); }

/* add-place picker (inside the bottom sheet) */
.picker__head { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.picker__title { margin:0; font-size:17px; font-weight:600; color:var(--ink); }
.picker__close { width:34px; height:34px; border-radius:var(--r-pill); background:var(--app-bg); border:none; color:var(--ink); cursor:pointer; }
.picker__search { margin-bottom:12px; }
.picker__list { display:flex; flex-direction:column; max-height:46vh; overflow-y:auto; }
.picker-row { display:flex; align-items:center; gap:12px; text-align:left; background:none; border:none;
  border-bottom:1px solid var(--hairline-2); padding:11px 4px; cursor:pointer; font-family:inherit; }
.picker-row:active { background:var(--app-bg); }
.picker-row__img { width:44px; height:44px; flex-shrink:0; border-radius:12px; object-fit:cover; background:var(--app-bg); }
.picker-row__img--icon { display:grid; place-items:center; background:var(--teal-surface); color:var(--teal); }
.picker-row__body { display:flex; flex-direction:column; gap:2px; min-width:0; }
.picker-row__name { font-size:14px; font-weight:600; color:var(--ink); }
.picker-row__meta { font-size:12px; color:var(--muted); }

/* "near your last stop" suggestion strip */
.picker__nearhead { margin:2px 0 8px; font-size:12px; font-weight:700; letter-spacing:.04em;
  text-transform:uppercase; color:var(--muted); }
.picker__near { display:flex; gap:10px; overflow-x:auto; padding-bottom:12px; margin-bottom:4px; }
.near-card { flex-shrink:0; width:104px; display:flex; flex-direction:column; gap:5px; background:none;
  border:none; text-align:left; cursor:pointer; padding:0; font-family:inherit; }
.near-card__img { width:104px; height:70px; border-radius:12px; object-fit:cover; background:var(--app-bg); }
.near-card__img--icon { display:grid; place-items:center; background:var(--teal-surface); color:var(--teal); }
.near-card__name { font-size:12.5px; font-weight:600; color:var(--ink); line-height:1.25;
  display:-webkit-box; -webkit-line-clamp:2; line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.near-card__km { font-size:11px; font-weight:600; color:var(--teal); }

/* ============================================================
 * Notifications popup (header bell) + full page
 * ========================================================== */
.notif-popup[hidden] { display:none; }
.notif-popup { position:fixed; inset:0; z-index:66; }
.notif-popup__overlay { position:absolute; inset:0; background:var(--glass-scrim-bg); backdrop-filter:var(--glass-scrim-blur); -webkit-backdrop-filter:var(--glass-scrim-blur); }
.notif-popup__panel { position:absolute; top:78px; left:50%; transform:translateX(-50%);
  width:calc(100% - 2 * var(--gutter)); max-width:calc(var(--app-max) - 2 * var(--gutter));
  background:var(--glass-panel-bg); backdrop-filter:var(--glass-panel-blur); -webkit-backdrop-filter:var(--glass-panel-blur); border-radius:22px;  overflow:hidden;
  transform-origin:top center; animation:notifpop var(--dur) var(--ease); box-shadow:var(--glass-panel-hi), var(--glass-panel-shadow); border:1px solid var(--glass-panel-border); max-height:calc(100dvh - 78px - var(--gutter) - var(--safe-t) - var(--safe-b)); overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain;}
/* keeps the translateX(-50%) centering during the pop (menupop would clobber it) */
@keyframes notifpop { from { transform:translateX(-50%) scale(.97); opacity:0; } to { transform:translateX(-50%) scale(1); opacity:1; } }
.notif-popup__head { display:flex; align-items:center; justify-content:space-between; padding:16px 18px 10px; }
.notif-popup__title { margin:0; font-size:16px; font-weight:600; color:var(--ink); }
.notif-popup__close { width:32px; height:32px; border-radius:var(--r-pill); background:var(--app-bg); border:none; color:var(--ink); cursor:pointer; }
.notif-popup__list { max-height:50vh; overflow-y:auto; }
.notif-popup__all { display:flex; align-items:center; justify-content:center; gap:6px; padding:14px;
  border-top:1px solid var(--hairline-2); color:var(--teal); font-weight:600; font-size:13px; text-decoration:none; }

.notif-item { display:flex; gap:12px; padding:13px 18px; text-decoration:none; border-bottom:1px solid var(--hairline-2); position:relative; }
.notif-item:last-child { border-bottom:none; }
.notif-item.is-unread { background:rgba(20,123,130,0.035); }
.notif-item__icon { width:38px; height:38px; border-radius:12px; background:var(--teal-surface); color:var(--teal);
  display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.notif-item__icon--alert { background:var(--danger-bg); color:var(--danger); }
.notif-item__body { display:flex; flex-direction:column; gap:2px; min-width:0; }
.notif-item__title { font-size:13.5px; font-weight:600; color:var(--ink); }
.notif-item__text { font-size:12.5px; color:var(--body); line-height:1.45; }
.notif-item__time { font-size:11px; color:var(--muted); margin-top:2px; }
.notif-item__dot { position:absolute; top:16px; right:16px; width:8px; height:8px; border-radius:var(--r-pill); background:var(--teal); }
.notif-item--page { border:1px solid var(--hairline); border-radius:var(--r-card); margin-bottom:10px; padding:14px 16px; }
.notif-item--page.is-unread { border-color:rgba(20,123,130,0.25); }
.notif-page-list { padding-top:6px; }
.notif-count { margin-left:auto; font-size:12px; font-weight:600; color:var(--teal); background:var(--teal-surface); padding:4px 10px; border-radius:var(--r-pill); }

/* ============================================================
 * Filter sheet (searchable) — bottom sheet
 * ========================================================== */
.filter-sheet[hidden] { display:none; }
.filter-sheet { position:fixed; inset:0; z-index:67; display:flex; align-items:flex-end; justify-content:center; }
.filter-sheet__overlay { position:absolute; inset:0; background:rgba(28,26,24,0.4); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px); }
.filter-sheet__panel { position:relative; width:100%; max-width:var(--app-max); background:var(--glass-panel-bg); backdrop-filter:var(--glass-panel-blur); -webkit-backdrop-filter:var(--glass-panel-blur);
  border-radius:28px 28px 0 0; padding:8px 22px calc(20px + env(safe-area-inset-bottom)); max-height:88vh;
  display:flex; flex-direction:column;  animation:sheetrise var(--dur) var(--ease); box-shadow:var(--glass-panel-hi), var(--glass-panel-shadow); border:1px solid var(--glass-panel-border); max-height:calc(100dvh - var(--gutter) - var(--safe-t) - var(--safe-b)); overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain;}
@keyframes sheetrise { from { transform:translateY(20px); opacity:.6; } to { transform:translateY(0); opacity:1; } }
.filter-sheet__grabber { width:40px; height:4px; border-radius:9999px; background:var(--hairline); margin:6px auto 12px; }
.filter-sheet__head { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.filter-sheet__title { margin:0; font-size:18px; font-weight:600; color:var(--ink); }
.filter-sheet__close { width:34px; height:34px; border-radius:var(--r-pill); background:var(--app-bg); border:none; color:var(--ink); cursor:pointer; }
.filter-sheet__search { display:flex; align-items:center; gap:10px; background:var(--app-bg); border-radius:var(--r-pill);
  padding:12px 16px; margin-bottom:16px; color:var(--teal); }
.filter-sheet__search input { flex:1; border:none; background:transparent; outline:none; font-family:inherit; font-size:14px; color:var(--ink); }
.filter-sheet__body { overflow-y:auto; flex:1; }
/* ---- global filter controls (.fs-*) --------------------------------------
   Same principle as the hotels sheet: the control takes the shape of the
   decision. Categories are a wide multi-select, so chips; rating is one choice
   on an ordered scale, so a segmented track; "open now" is a single boolean,
   so a switch.

   Price, dietary, family-friendly and accessible used to sit here too. Those
   fields exist only on the 54 curated places, never on the 2054 imported POIs,
   so choosing one filtered 2.6% of the catalogue and silently ignored the rest.
   They were removed rather than restyled.
   ------------------------------------------------------------------------ */
.fs-label { margin:18px 0 9px; font-size:11.5px; font-weight:700; color:var(--muted-2);
  text-transform:uppercase; letter-spacing:.06em; }
.fs-label:first-child { margin-top:4px; }

.fs-chips { display:flex; flex-wrap:wrap; gap:7px; }
.fs-chip { display:inline-flex; align-items:center; gap:6px; cursor:pointer; font-family:inherit;
  font-size:13px; font-weight:600; color:var(--ink); background:#fff; border:1px solid var(--hairline);
  border-radius:9999px; padding:8px 13px; transition:background .16s ease, border-color .16s ease, color .16s ease; }
.fs-chip__n { font-size:10.5px; font-weight:600; color:var(--muted-2); }
.fs-chip.is-on { background:var(--teal-surface); border-color:var(--teal); color:var(--teal); }
.fs-chip.is-on .fs-chip__n { color:var(--teal); opacity:.7; }

.fs-seg { display:flex; gap:4px; background:var(--app-bg); border-radius:12px; padding:4px; }
.fs-seg__opt { flex:1; cursor:pointer; border:none; background:transparent; border-radius:9px;
  padding:9px 6px; font-family:inherit; font-size:13.5px; font-weight:600; color:var(--body);
  transition:background .16s ease, color .16s ease, box-shadow .16s ease; }
.fs-seg__opt.is-on { background:#fff; color:var(--teal); font-weight:700;
  box-shadow:0 2px 6px -2px rgba(20,40,45,.24); }

.fs-switch-wrap { margin-top:18px; }
.fs-switch { display:flex; align-items:center; gap:12px; width:100%; cursor:pointer; text-align:left;
  font-family:inherit; background:#fff; border:1px solid var(--hairline); border-radius:16px;
  padding:12px 14px; transition:background .16s ease, border-color .16s ease; }
.fs-switch__ic { flex:none; width:34px; height:34px; border-radius:11px; background:var(--app-bg);
  color:var(--muted-2); display:grid; place-items:center; transition:background .16s, color .16s; }
.fs-switch__txt { flex:1; min-width:0; display:flex; flex-direction:column; gap:1px; }
.fs-switch__label { font-size:14.5px; font-weight:600; color:var(--ink); }
.fs-switch__sub { font-size:11.5px; color:var(--muted-2); }
.fs-switch__track { flex:none; width:44px; height:26px; border-radius:9999px; background:var(--hairline);
  position:relative; transition:background .18s ease; }
.fs-switch__knob { position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%;
  background:#fff; box-shadow:0 1px 4px rgba(20,40,45,.3);
  transition:transform .18s cubic-bezier(.22,.61,.36,1); }
.fs-switch.is-on { background:var(--teal-surface); border-color:var(--teal); }
.fs-switch.is-on .fs-switch__ic { background:#fff; color:var(--teal); }
.fs-switch.is-on .fs-switch__track { background:var(--teal); }
.fs-switch.is-on .fs-switch__knob { transform:translateX(18px); }

.fs-chip:focus-visible, .fs-seg__opt:focus-visible, .fs-switch:focus-visible {
  outline:2px solid var(--teal); outline-offset:2px; }
@media (prefers-reduced-motion: reduce) {
  .fs-chip, .fs-seg__opt, .fs-switch, .fs-switch__track, .fs-switch__knob, .fs-switch__ic { transition:none; }
}
.filter-sheet__actions { display:flex; gap:10px; margin-top:16px; padding-top:14px; border-top:1px solid var(--hairline-2); }
.filter-sheet__actions .btn { flex:1; padding:14px; font-size:14px; }
.filter-sheet__actions .btn--soft { flex:0 0 auto; padding-inline:22px; }

/* ============================================================
 * Drawer / search overlay (re-skinned global shell)
 * ========================================================== */
.drawer[hidden], .search-overlay[hidden], .consent[hidden], .offline-banner[hidden] { display:none; }
.drawer { position:fixed; inset:0; z-index:60; }
.drawer__overlay { position:absolute; inset:0; background:var(--glass-scrim-bg); backdrop-filter:var(--glass-scrim-blur); -webkit-backdrop-filter:var(--glass-scrim-blur); }
.drawer__panel { position:absolute; inset:0 auto 0 0; width:min(82%,330px); background:var(--glass-panel-bg); backdrop-filter:var(--glass-panel-blur); -webkit-backdrop-filter:var(--glass-panel-blur);
  padding:max(24px, calc(var(--safe-t) + 12px)) 24px 24px max(24px, calc(var(--safe-l) + 24px)); overflow-y:auto; display:flex; flex-direction:column; gap:6px; box-shadow:var(--glass-panel-hi), var(--glass-panel-shadow); border:1px solid var(--glass-panel-border);}
.drawer__head { display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; }
.drawer__brand { font-weight:700; font-size:18px; }
.drawer__close { background:#fff; border:1px solid var(--hairline); width:38px; height:38px; border-radius:12px; cursor:pointer; color:var(--ink); }
.drawer__group { margin-bottom:10px; }
.drawer__heading { font-size:11px; text-transform:uppercase; letter-spacing:0.08em; color:var(--muted); margin:10px 0 6px; }
.drawer__link { display:block; padding:11px 12px; border-radius:12px; color:var(--ink); font-weight:600; font-size:14px; }
.drawer__link:hover { background:var(--teal-surface); color:var(--teal); }
.drawer__foot { margin-top:auto; padding-top:14px; font-size:13px; color:var(--muted); }
.drawer__copy { margin-top:8px; }

.search-overlay { position:fixed; inset:0; z-index:60; background:var(--app-bg); max-width:var(--app-max); margin:0 auto; }
.search-overlay__form { display:flex; gap:8px; align-items:center; padding:var(--pad-top-lg) var(--gutter) 16px; }
.search-overlay__close { width:44px; height:44px; border-radius:var(--r-lg); background:#fff; border:1px solid var(--hairline); cursor:pointer; color:var(--ink); }
.search-overlay__input { flex:1; padding:13px 16px; font-size:15px; border:1px solid var(--hairline); border-radius:var(--r-pill); background:#fff; outline:none; }
.search-overlay__submit { display:none; }
.search-overlay__body { padding:8px var(--gutter); }
.search-overlay__section { margin-bottom:20px; }
.search-overlay__heading { font-size:13px; color:var(--muted); margin-bottom:10px; font-weight:600; }
.chip-group { display:flex; flex-wrap:wrap; gap:8px; }

/* account details on the profile identity */
.identity__email { display:flex; align-items:center; justify-content:center; gap:5px; margin:6px 0 0;
  font-size:12px; font-weight:500; color:var(--teal); }
/* Phone and age under the email, centred to match the identity block. */
.identity__meta--sub { justify-content:center; gap:7px; margin-top:5px; font-size:12.5px; color:var(--body); }
.identity__nudge { margin:7px 0 0; font-size:12px; }
.identity__nudge a { color:var(--teal); font-weight:600; }
.list-card__form { margin:0; }
.list-card__row--btn { width:100%; border:0; background:none; font-family:inherit; font-size:inherit; cursor:pointer; text-align:left; }

/* ============================================================================
   Search results — /search (.srch-*)
   ========================================================================== */
.srch-wrap { padding:4px var(--gutter) 40px; }
.srch-bar { margin:2px 0 14px; }
.srch-bar .searchbar__field { position:relative; }
.srch-clear { position:absolute; right:8px; top:50%; transform:translateY(-50%); width:26px; height:26px; border:0; border-radius:9999px;
  display:inline-flex; align-items:center; justify-content:center; background:var(--app-bg); color:var(--body); cursor:pointer; }
.srch-clear[hidden] { display:none; }

.srch-facets { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 16px; }
.srch-facet { font-size:12px; font-weight:600; color:var(--teal); padding:6px 11px; border-radius:9999px; background:var(--teal-surface); }
.srch-facet--clear { color:var(--danger); background:rgba(193,58,58,0.08); text-decoration:none; }

.srch-sec { margin-bottom:24px; }
.srch-sec__title { display:flex; align-items:center; gap:8px; font-size:15px; font-weight:600; color:var(--ink); margin:0 0 12px; }
.srch-sec__n { font-size:11.5px; font-weight:700; color:var(--teal); background:var(--teal-surface); padding:2px 8px; border-radius:9999px; }

.srch-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.srch-card { aspect-ratio:4/5; }

.srch-list { display:flex; flex-direction:column; gap:8px; }
.srch-row { display:flex; align-items:center; gap:12px; padding:12px 14px; border:1px solid var(--hairline); border-radius:14px; background:#fff; text-decoration:none; }
.srch-row:active { background:var(--app-bg); }
.srch-row__ic { flex:none; width:36px; height:36px; border-radius:11px; display:inline-flex; align-items:center; justify-content:center; background:var(--teal-surface); color:var(--teal); }
.srch-row__txt { flex:1; min-width:0; }
.srch-row__title { display:block; font-size:14px; font-weight:600; color:var(--ink); }
.srch-row__sub { display:block; font-size:11.5px; color:#8a9797; margin-top:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.srch-row__chev { color:#c2cbca; flex:none; }

.srch-empty { text-align:center; padding:36px var(--gutter) 20px; }
.srch-empty__ic { display:inline-flex; align-items:center; justify-content:center; width:66px; height:66px; border-radius:20px; background:var(--teal-surface); color:var(--teal); margin-bottom:14px; }
.srch-empty__title { font-size:19px; font-weight:600; color:var(--ink); margin:0 0 6px; }
.srch-empty__sub { font-size:13.5px; line-height:1.5; color:var(--body); max-width:30ch; margin:0 auto 16px; }
.srch-suggest { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; }
.srch-suggest__chip { font-size:13px; font-weight:600; color:var(--ink); padding:8px 14px; border-radius:9999px; background:#fff; border:1px solid var(--hairline); text-decoration:none; }
.srch-suggest__chip:active { background:var(--app-bg); }

/* ============================================================================
   Discover hub — /discover (.dsc-*). Light, airy, image-forward.
   ========================================================================== */
.dsc-wrap { padding:2px var(--gutter) 44px; }

/* intro */
.dsc-intro { padding:6px 0 4px; }
.dsc-intro__eyebrow { display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:600; letter-spacing:.05em;
  text-transform:uppercase; color:var(--teal); }
.dsc-intro__title { font-size:28px; line-height:1.1; font-weight:600; letter-spacing:-0.02em; color:var(--ink); margin:8px 0 16px; }
.dsc-search { margin:0 0 6px; }

/* section headers */
.dsc-head { display:flex; align-items:baseline; justify-content:space-between; margin:32px 0 14px; }
.dsc-head__title { font-size:17px; font-weight:600; letter-spacing:-0.01em; color:var(--ink); margin:0; }
.dsc-head__link { font-size:13px; font-weight:600; color:var(--teal); }

/* spotlight (featured / monetization) */
.dsc-spot { margin-top:22px; }
.dsc-spot__rail { display:flex; gap:14px; overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth;
  margin:0 calc(-1 * var(--gutter)); padding:2px var(--gutter); }
.dsc-feat { position:relative; flex:0 0 86%; scroll-snap-align:center; display:block; border-radius:22px; overflow:hidden;
  aspect-ratio:16/12; box-shadow:0 16px 34px -18px rgba(8,20,22,0.5); text-decoration:none; isolation:isolate; }
.dsc-feat__img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.dsc-feat__scrim { position:absolute; inset:0; background:linear-gradient(0deg, rgba(4,12,14,0.62) 0%, rgba(4,12,14,0.28) 26%, rgba(4,12,14,0) 52%); }
.dsc-feat__tag { position:absolute; top:16px; left:16px; z-index:2; font-size:10px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:#fff; padding:5px 11px; border-radius:9999px; background:rgba(12,30,32,0.38);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border:1px solid rgba(255,255,255,0.16); }
.dsc-feat__tag--ad { background:rgba(90,67,0,0.55); color:#ffe9b3; }
.dsc-feat__body { position:absolute; left:0; right:64px; bottom:0; padding:0 20px 20px; color:#fff; display:flex; flex-direction:column; gap:3px; }
.dsc-feat__sub { font-size:11.5px; font-weight:600; color:rgba(255,255,255,0.78); }
.dsc-feat__title { font-size:22px; font-weight:600; line-height:1.15; letter-spacing:-0.015em; }
.dsc-feat__cta { position:absolute; right:16px; bottom:16px; z-index:2; display:flex; align-items:center; justify-content:center;
  width:40px; height:40px; border-radius:9999px; background:rgba(255,255,255,0.16); color:#fff;
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border:1px solid rgba(255,255,255,0.28);
  transition:background .2s, transform .2s; }
.dsc-feat:active .dsc-feat__cta { background:rgba(255,255,255,0.28); transform:scale(0.94); }

.dsc-dots { display:flex; justify-content:center; gap:6px; padding:14px 0 2px; }
.dsc-dots:empty { display:none; }
.dsc-dot { width:6px; height:6px; border-radius:9999px; border:0; padding:0; cursor:pointer; background:rgba(16,50,54,0.22);
  transition:width .3s cubic-bezier(.2,.8,.25,1), background .3s ease; }
.dsc-dot.is-active { width:18px; background:var(--teal); }

/* category photo grid */
.dsc-cats { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.dsc-cat { position:relative; display:block; border-radius:18px; overflow:hidden; aspect-ratio:5/4; text-decoration:none;
  box-shadow:0 10px 22px -16px rgba(8,20,22,0.4); transition:transform .18s ease; isolation:isolate; }
.dsc-cat:active { transform:scale(0.97); }
.dsc-cat__img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.dsc-cat__scrim { position:absolute; inset:0; background:linear-gradient(0deg, rgba(6,16,18,0.72) 2%, rgba(6,16,18,0.12) 55%, rgba(6,16,18,0) 100%); }
.dsc-cat__label { position:absolute; left:14px; bottom:12px; z-index:2; color:#fff; font-size:15px; font-weight:700; letter-spacing:-0.01em;
  text-shadow:0 1px 10px rgba(0,0,0,0.4); }
.dsc-cat--plain { background:linear-gradient(150deg, #1b8189 0%, #0f5b61 60%, #0c474c 100%); }
.dsc-cat--plain .dsc-cat__scrim { background:linear-gradient(0deg, rgba(6,16,18,0.4) 0%, rgba(6,16,18,0) 60%); }

/* experiences / business seam */
.dsc-seam { display:flex; align-items:center; gap:13px; margin-top:14px; padding:16px; border-radius:18px;
  background:var(--teal-surface); border:1px dashed rgba(20,123,130,0.4); text-decoration:none; }
.dsc-seam__ic { flex:none; width:42px; height:42px; border-radius:13px; display:inline-flex; align-items:center; justify-content:center;
  background:#fff; color:var(--teal); box-shadow:0 4px 12px -6px rgba(20,123,130,0.5); }
.dsc-seam__title { display:block; font-size:14px; font-weight:600; color:var(--ink); }
.dsc-seam__sub { display:block; font-size:12px; color:var(--teal); margin-top:2px; }
.dsc-seam__go { margin-left:auto; color:var(--teal); flex:none; }

/* reveal — only when JS active + motion allowed */
@media (prefers-reduced-motion: no-preference) {
  .bx-ready [data-el="bx-in"] { opacity:0; transform:translateY(16px); transition:opacity .5s ease, transform .5s cubic-bezier(.2,.8,.25,1); transition-delay:var(--d, 0s); }
  .bx-ready [data-el="bx-in"].is-in { opacity:1; transform:none; }
}

/* ============================================================================
   Get the app — /get-app (.ga-*) + offline page
   ========================================================================== */
.ga-wrap { padding:4px var(--gutter) 44px; }
.ga-hero { text-align:center; padding:8px 0 4px; }
.ga-hero__logo img { width:74px; height:74px; border-radius:20px; box-shadow:0 12px 28px -14px rgba(20,123,130,0.6); }
.ga-hero__title { font-size:22px; font-weight:600; letter-spacing:-0.02em; color:var(--ink); margin:12px 0 6px; }
.ga-hero__sub { font-size:13.5px; line-height:1.55; color:var(--body); margin:0 auto; max-width:34ch; }
.ga-install { display:inline-flex; align-items:center; gap:9px; margin-top:18px; padding:13px 22px; border:0; border-radius:14px;
  background:var(--teal); color:#fff; font-family:inherit; font-size:14.5px; font-weight:600; cursor:pointer;
  box-shadow:0 12px 24px -12px rgba(20,123,130,0.7); }
.ga-install[hidden] { display:none; }
.ga-install:active { background:var(--teal-press); }
.ga-installed { display:inline-flex; align-items:center; gap:7px; margin-top:16px; font-size:13px; font-weight:600; color:var(--teal); }
.ga-installed[hidden], .ga-ios[hidden] { display:none; }
.ga-ios { margin:16px auto 0; max-width:300px; text-align:left; background:#fff; border:1px solid var(--hairline); border-radius:16px; padding:14px 16px; }
.ga-ios__head { margin:0 0 8px; font-size:12.5px; font-weight:700; color:var(--ink); }
.ga-ios__steps { margin:0; padding-left:18px; font-size:12.5px; line-height:1.7; color:var(--body); }
.ga-ios__steps b { color:var(--ink); }
.ga-ios__steps i, .ga-ios__steps svg { vertical-align:-2px; color:var(--teal); }

.ga-h3 { font-size:16px; font-weight:600; color:var(--ink); margin:30px 0 4px; }
.ga-hint { font-size:12.5px; line-height:1.5; color:#8a9797; margin:0 0 14px; }

.ga-perms, .ga-packs { display:flex; flex-direction:column; gap:10px; }
.ga-perm { display:flex; align-items:center; gap:12px; width:100%; padding:13px 14px; border:1px solid var(--hairline);
  border-radius:16px; background:#fff; cursor:pointer; font-family:inherit; text-align:left; }
.ga-perm__ic, .ga-pack__ic { flex:none; width:38px; height:38px; border-radius:12px; display:inline-flex; align-items:center; justify-content:center;
  background:var(--teal-surface); color:var(--teal); }
.ga-perm__txt, .ga-pack__txt { flex:1; min-width:0; }
.ga-perm__name, .ga-pack__name { display:block; font-size:14px; font-weight:600; color:var(--ink); }
.ga-perm__sub, .ga-pack__note { display:block; font-size:11.5px; line-height:1.4; color:#8a9797; margin-top:2px; }
.ga-perm__state { flex:none; font-size:12.5px; font-weight:700; color:var(--teal); padding:6px 12px; border-radius:9999px; background:var(--teal-surface); }
.ga-perm.is-granted .ga-perm__state { background:rgba(72,199,142,0.16); color:#2e9c6a; }
.ga-perm.is-denied .ga-perm__state { background:rgba(193,58,58,0.12); color:var(--danger); }

/* offline packs (checkbox cards) */
.ga-pack { display:flex; align-items:center; gap:12px; padding:14px; border:1px solid var(--hairline); border-radius:16px; background:#fff; cursor:pointer; }
.ga-pack:has([data-pack-check]:checked) { border-color:var(--teal); box-shadow:0 0 0 3px rgba(20,123,130,0.1); }
.ga-pack__name { display:flex; align-items:baseline; justify-content:space-between; gap:8px; }
.ga-pack__size { font-size:12px; font-weight:700; color:var(--teal); flex:none; }
.ga-check { flex:none; }
.ga-check input { position:absolute; opacity:0; width:0; height:0; }
.ga-check__box { display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; border-radius:8px;
  border:2px solid var(--hairline); color:#fff; transition:background .16s ease, border-color .16s ease; }
.ga-check__box i, .ga-check__box svg { opacity:0; }
.ga-check input:checked + .ga-check__box { background:var(--teal); border-color:var(--teal); }
.ga-check input:checked + .ga-check__box i, .ga-check input:checked + .ga-check__box svg { opacity:1; }

.ga-total { display:flex; align-items:center; justify-content:space-between; margin:18px 2px 14px; }
.ga-total__label { font-size:13px; color:var(--body); }
.ga-total__val { font-size:17px; font-weight:700; color:var(--ink); }

.ga-progress { margin:0 0 12px; }
.ga-progress[hidden] { display:none; }
.ga-progress__bar { height:8px; border-radius:9999px; background:var(--hairline); overflow:hidden; }
.ga-progress__fill { display:block; height:100%; width:0; border-radius:9999px; background:var(--teal); transition:width .3s ease; }
.ga-progress__label { display:block; margin-top:7px; font-size:12px; color:var(--body); text-align:center; }

.ga-download { display:flex; align-items:center; justify-content:center; gap:9px; width:100%; padding:15px; border:0; border-radius:15px;
  background:var(--teal); color:#fff; font-family:inherit; font-size:15px; font-weight:600; cursor:pointer; box-shadow:0 12px 24px -14px rgba(20,123,130,0.7); }
.ga-download:disabled { opacity:0.5; }
.ga-download:active { background:var(--teal-press); }
.ga-clear { display:flex; align-items:center; justify-content:center; gap:7px; width:100%; margin-top:10px; padding:11px; border:0; border-radius:13px;
  background:none; color:var(--danger); font-family:inherit; font-size:13px; font-weight:600; cursor:pointer; }
.ga-clear[hidden] { display:none; }
.ga-storage { text-align:center; font-size:11.5px; color:#8a9797; margin:12px 0 0; }
.ga-storage[hidden] { display:none; }

/* offline fallback page */
.offline-page { min-height:70vh; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:0 var(--gutter); }
.offline-page__ic { display:inline-flex; align-items:center; justify-content:center; width:70px; height:70px; border-radius:22px;
  background:var(--teal-surface); color:var(--teal); margin-bottom:16px; }
.offline-page__title { font-size:22px; font-weight:600; color:var(--ink); margin:0 0 8px; }
.offline-page__sub { font-size:14px; line-height:1.55; color:var(--body); max-width:32ch; margin:0 0 22px; }
.offline-page__actions { display:flex; flex-direction:column; align-items:center; gap:12px; }
.onb-btn--inline { display:inline-flex; align-items:center; width:auto; height:auto; padding:13px 26px; text-decoration:none; }
.offline-page__link { font-size:13.5px; font-weight:600; color:var(--teal); }

/* account country picker button (opens the flag+name sheet) */
.country-pick { width:100%; height:50px; display:flex; align-items:center; gap:10px; padding:0 14px;
  border:1px solid var(--hairline); border-radius:14px; background:#fff; cursor:pointer; font-family:inherit; }
.country-pick:focus-visible { border-color:var(--teal); box-shadow:0 0 0 3px rgba(20,123,130,.12); outline:none; }
.country-pick__flag { border-radius:3px; object-fit:cover; flex:none; box-shadow:0 0 0 1px rgba(0,0,0,0.06); }
.country-pick__flag--empty { width:24px; height:18px; display:inline-flex; align-items:center; justify-content:center; color:#9aa3a0; box-shadow:none; }
.country-pick__name { flex:1; text-align:left; font-size:15px; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.country-pick__name--empty { color:#9aa3a0; }
.country-pick__chev { color:#9aa3a0; flex:none; }
.cur-opt__flag { border-radius:3px; box-shadow:0 0 0 1px rgba(0,0,0,0.06); }

/* auth: register / sign in */
.auth-wrap { padding:6px var(--gutter) 40px; }
.auth-hero { text-align:center; margin:10px 0 20px; }
.auth-hero__ic { display:inline-flex; align-items:center; justify-content:center; width:56px; height:56px; border-radius:18px;
  background:var(--teal-surface); color:var(--teal); margin-bottom:12px; }
.auth-hero__title { font-size:21px; font-weight:600; letter-spacing:-0.01em; color:var(--ink); margin:0 0 6px; }
.auth-hero__sub { font-size:13.5px; line-height:1.5; color:var(--body); margin:0 auto; max-width:30ch; }
.auth-error { display:flex; align-items:center; gap:8px; margin:0 0 14px; padding:12px 14px; border-radius:13px;
  background:rgba(193,58,58,0.08); border:1px solid rgba(193,58,58,0.25); color:var(--danger); font-size:13px; font-weight:500; }
.auth-form .field-label { margin-top:14px; }
.auth-form .onb-btn { margin-top:22px; }
.auth-opt { font-weight:400; color:#8a9797; }
.auth-alt { text-align:center; font-size:13.5px; color:var(--body); margin:18px 0 0; }
.auth-alt a { font-weight:600; }
.auth-note { text-align:center; font-size:11.5px; color:#9aa3a0; margin:10px 0 0; }

/* ---- registration additions: Google, phone, date of birth, code -----------
   All built from the existing controls (.onb-input, .country-pick) so signup
   gains no new visual vocabulary. Heights stay at 50px to match .onb-input,
   which also keeps every control comfortably past the 44px touch minimum. */

/* Google. White with a hairline rather than brand blue: it is one of two equal
   ways in, not the primary action, and Google's own guidance allows this. */
.auth-google { display:flex; align-items:center; justify-content:center; gap:10px; width:100%; height:50px;
  border:1px solid var(--hairline); border-radius:var(--r-pill); background:#fff; color:var(--ink);
  font-size:15px; font-weight:600; text-decoration:none; cursor:pointer;
  transition:border-color var(--dur) var(--ease), background var(--dur) var(--ease); }
.auth-google:hover { border-color:#c8d0cf; background:#fcfdfd; }
.auth-google:active { transform:translateY(1px); }
.auth-google__ic { flex:none; }

.auth-divider { display:flex; align-items:center; gap:12px; margin:18px 0 4px; }
.auth-divider::before, .auth-divider::after { content:""; flex:1; height:1px; background:var(--hairline); }
.auth-divider span { font-size:12px; color:#9aa3a0; white-space:nowrap; }

.auth-hint { font-size:11.5px; line-height:1.5; color:#9aa3a0; margin:7px 0 0; }
.auth-hero__avatar { width:56px; height:56px; border-radius:50%; object-fit:cover; margin:0 auto;
  box-shadow:0 0 0 1px var(--hairline); }

/* Phone: dial-code button + number, sharing one row. The button is sized to its
   content so a +1 does not reserve as much room as a +971. */
.auth-phone { display:flex; gap:8px; align-items:stretch; }
.auth-phone__cc { width:auto; flex:none; padding:0 11px; gap:7px; }
.auth-phone__num { flex:1; min-width:0; }
.auth-phone__dial { font-size:15px; font-weight:600; color:var(--ink); white-space:nowrap;
  font-variant-numeric:tabular-nums; }
.auth-phone__dial--empty { color:#9aa3a0; font-weight:500; }

/* Date of birth: three selects rather than <input type="date">, which on mobile
   opens on the current month and takes many taps to reach a birth year. */
.auth-dob { display:grid; grid-template-columns:0.8fr 1.3fr 1fr; gap:8px; }
.auth-dob select { padding:0 10px; -webkit-appearance:none; appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239aa3a0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 8px center; padding-right:26px; }
@media (max-width:359px) { .auth-dob { grid-template-columns:1fr 1fr; } .auth-dob__y { grid-column:1/-1; } }

/* Verification code: six boxes make the expected length obvious and give clear
   per-digit focus on a keypad. */
.auth-code { display:grid; grid-template-columns:repeat(6, 1fr); gap:8px; margin:4px 0 0; }
.auth-code__box { height:56px; text-align:center; font-size:22px; font-weight:700; color:var(--ink);
  font-variant-numeric:tabular-nums; border:1px solid var(--hairline); border-radius:14px; background:#fff;
  -webkit-appearance:none; appearance:none; min-width:0; }
.auth-code__box:focus { outline:none; border-color:var(--teal); box-shadow:0 0 0 3px rgba(20,123,130,.12); }
@media (max-width:359px) { .auth-code { gap:6px; } .auth-code__box { height:50px; font-size:19px; border-radius:12px; } }

.auth-resend { text-align:center; margin:16px 0 0; }
.auth-resend__btn { background:none; border:none; font-family:inherit; font-size:13.5px; font-weight:600;
  color:var(--teal); cursor:pointer; padding:11px 14px; border-radius:var(--r-pill); }
.auth-resend__btn:disabled { color:#9aa3a0; cursor:default; }
.auth-resend__btn:not(:disabled):hover { background:var(--teal-surface); }

.auth-notice { display:flex; align-items:center; gap:8px; margin:0 0 14px; padding:12px 14px; border-radius:13px;
  background:var(--teal-surface); color:var(--teal); font-size:13px; font-weight:500; }

/* The dial code shown on the right of a picker row. */
.cur-opt__code { font-size:13.5px; font-weight:600; color:var(--body); font-variant-numeric:tabular-nums;
  margin-left:auto; padding-left:10px; }

/* consent: first-visit centered screen popup */
.consent { position:fixed; inset:0; z-index:90; display:flex; align-items:center; justify-content:center; padding:var(--gutter) var(--gutter-r) var(--gutter) var(--gutter-l); }
.consent[hidden] { display:none; }
.consent__overlay { position:absolute; inset:0; background:rgba(14,22,23,0.45); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); }
.consent__card {
  position:relative; width:100%; max-width:340px; text-align:center;
  background:var(--glass-panel-bg); backdrop-filter:var(--glass-panel-blur); -webkit-backdrop-filter:var(--glass-panel-blur);  border-radius:24px; padding:26px 22px 20px;
  
  animation:consentpop .45s cubic-bezier(.2,.8,.25,1) both; box-shadow:var(--glass-panel-hi), var(--glass-panel-shadow); border:1px solid var(--glass-panel-border);}
@keyframes consentpop { from { opacity:0; transform:translateY(18px) scale(0.96); } to { opacity:1; transform:none; } }
.consent__ic { display:inline-flex; align-items:center; justify-content:center; width:52px; height:52px; border-radius:16px;
  background:var(--teal-surface); color:var(--teal); margin-bottom:12px; }
.consent__title { font-size:19px; font-weight:600; letter-spacing:-0.01em; color:var(--ink); margin:0 0 8px; }
.consent__text { margin:0 0 18px; font-size:13px; line-height:1.55; color:var(--body); }
.consent__actions { display:flex; flex-direction:column; gap:8px; }
.consent__btn {
  width:100%; padding:13px; border-radius:13px; border:1px solid var(--hairline); background:#fff; cursor:pointer;
  font-family:inherit; font-size:14px; font-weight:600; color:var(--ink);
}
.consent__btn--primary { background:var(--teal); border-color:var(--teal); color:#fff; box-shadow:0 10px 20px -12px rgba(20,123,130,0.7); }
.consent__btn--primary:active { background:var(--teal-press); }
.consent__manage { display:inline-block; margin-top:12px; font-size:12px; color:#7b8a88; }
.offline-banner { position:fixed; top:0; left:0; right:0; z-index:55; width:100%; max-width:var(--app-max); margin:0 auto;
  background:var(--danger-bg); border-bottom:1px solid var(--danger-border); padding:calc(10px + var(--safe-t)) var(--gutter-r) 10px var(--gutter-l);
  font-size:13px; color:var(--danger-ink); display:flex; justify-content:space-between; gap:8px; }

/* toast */
.toast-host { position:fixed; bottom:calc(108px + var(--safe-b)); left:0; right:0; z-index:80; display:flex; flex-direction:column;
  align-items:center; gap:8px; pointer-events:none; }
.toast { background:var(--ink); color:#fff; padding:10px 16px; border-radius:12px; font-size:14px; box-shadow:var(--shadow-nav); }
.toast--success { background:var(--teal); }
.toast--error { background:var(--danger); }
.sheet-host[hidden] { display:none; }
.sheet-host { position:fixed; inset:0; z-index:70; }
.sheet-host__overlay { position:absolute; inset:0; background:var(--glass-scrim-bg); backdrop-filter:var(--glass-scrim-blur); -webkit-backdrop-filter:var(--glass-scrim-blur); }
.sheet { position:absolute; left:0; right:0; bottom:0; width:100%; max-width:var(--app-max); margin:0 auto;
  background:var(--glass-panel-bg); backdrop-filter:var(--glass-panel-blur); -webkit-backdrop-filter:var(--glass-panel-blur); border-radius:24px 24px 0 0; padding:20px var(--gutter) 28px; max-height:85vh; overflow-y:auto; border:1px solid var(--glass-panel-border);}

/* App.modal() had NO base rule: `.modal` was an unstyled div inside the fixed
   #sheet-host, so every confirm dialog in the app (saved.js "Clear all saved?",
   the itinerary confirms, the onboarding ask) rendered as bare text in the top
   left corner over the page. This is the card they all assumed existed. */
.modal { position:absolute; left:50%; top:50%; transform:translate(-50%, -50%);
  width:calc(100% - 2 * var(--gutter)); max-width:390px; background:var(--glass-panel-bg); backdrop-filter:var(--glass-panel-blur); -webkit-backdrop-filter:var(--glass-panel-blur);
  border-radius:22px; padding:20px; overflow-y:auto; max-height:85vh;
  
  animation:modalpop .2s cubic-bezier(.22,.61,.36,1); box-shadow:var(--glass-panel-hi), var(--glass-panel-shadow); border:1px solid var(--glass-panel-border);}
@keyframes modalpop {
  from { transform:translate(-50%, -50%) scale(.96); opacity:0; }
  to   { transform:translate(-50%, -50%) scale(1); opacity:1; }
}
#sheet-host .sheet-host__overlay { -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); }
@media (prefers-reduced-motion: reduce) { .modal { animation:none; } }

/* ===================================================================
 * Onboarding (/welcome) — chrome-less, app-styled trip-profile setup
 * =================================================================== */
.app--blank.onboard { background:var(--app-bg); }
.onb { display:flex; flex-direction:column; min-height:100svh; max-width:var(--app-max); margin:0 auto;
  padding:calc(18px + env(safe-area-inset-top)) var(--gutter) calc(20px + env(safe-area-inset-bottom)); }
.onb-step { display:none; flex-direction:column; flex:1; animation:onb-in .28s ease-out; }
.onb-step.is-on { display:flex; }
@keyframes onb-in { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }

.onb-top { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:32px; }
.onb-brand { display:inline-flex; align-items:center; gap:7px; font-weight:600; font-size:15px; color:var(--teal); }
.onb-brand span { color:var(--ink); opacity:.5; }
.onb-skip { font-size:14px; color:#7b8482; text-decoration:none; padding:6px 4px; }
.onb-back { width:36px; height:36px; border-radius:9999px; border:none; background:#fff; color:var(--ink);
  display:flex; align-items:center; justify-content:center; cursor:pointer; box-shadow:var(--shadow-nav); }
.onb-steps { display:flex; gap:6px; }
.onb-dot { width:7px; height:7px; border-radius:9999px; background:rgba(0,0,0,.14); }
.onb-dot.is-on { background:var(--teal); width:18px; }

.onb-hero { margin-top:26px; }
.onb-hero--tight { margin-top:20px; }
.onb-kicker { display:inline-block; font-size:13px; font-weight:600; letter-spacing:.04em; text-transform:uppercase;
  color:var(--teal); margin-bottom:10px; }
.onb-title { font-size:31px; line-height:1.12; font-weight:600; color:var(--ink); letter-spacing:-.01em; margin:0; }
.onb-title--sm { font-size:25px; }
.onb-lede { margin:12px 0 0; font-size:15.5px; line-height:1.5; color:#5c6664; }

.onb-feats { list-style:none; margin:26px 0 0; padding:0; display:flex; flex-direction:column; gap:14px; }
.onb-feat { display:flex; align-items:flex-start; gap:13px; font-size:14.5px; line-height:1.45; color:#414947; }
.onb-feat strong { color:var(--ink); font-weight:600; }
.onb-feat__ic { flex-shrink:0; width:38px; height:38px; border-radius:12px; background:#eef6f6; color:var(--teal);
  display:flex; align-items:center; justify-content:center; }

.onb-foot { margin-top:auto; padding-top:24px; }
.onb-btn { width:100%; height:54px; border:none; border-radius:var(--r-pill); background:var(--teal); color:#fff;
  font-family:inherit; font-size:16px; font-weight:600; cursor:pointer; display:flex; align-items:center;
  justify-content:center; gap:8px; box-shadow:0 10px 22px -12px rgba(20,123,130,.7); transition:background .15s, transform .08s; }
.onb-btn:active { background:var(--teal-press); transform:translateY(1px); }
.onb-note { display:flex; align-items:center; justify-content:center; gap:6px; margin:14px 0 0; font-size:12.5px; color:#8b938f; }

/* step 2 form */
.onb-form { margin-top:22px; display:flex; flex-direction:column; gap:20px; }
.onb-field { display:flex; flex-direction:column; gap:10px; }
.onb-label { font-size:14px; font-weight:600; color:var(--ink); }
.onb-label em { font-style:normal; font-weight:400; color:#9aa3a0; font-size:13px; }
.onb-input { width:100%; height:50px; border:1px solid var(--hairline); border-radius:14px; background:#fff;
  padding:0 16px; font-family:inherit; font-size:15.5px; color:var(--ink); outline:none; transition:border-color .15s, box-shadow .15s; }
.onb-input:focus { border-color:var(--teal); box-shadow:0 0 0 3px rgba(20,123,130,.12); }
.onb-select { -webkit-appearance:none; appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' stroke='%23147b82' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center; padding-right:42px; }

.onb-countries { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:10px; }
.onb-country { display:flex; align-items:center; gap:10px; min-width:0; padding:13px 14px; border:1px solid var(--hairline);
  border-radius:14px; background:#fff; cursor:pointer; font-family:inherit; text-align:left; transition:border-color .15s, background .15s; }
.onb-country__flag { font-size:20px; line-height:1; flex-shrink:0; display:flex; align-items:center; color:var(--teal); }
.onb-country__name { min-width:0; font-size:13.5px; line-height:1.25; font-weight:500; color:var(--ink); }
.onb-country.is-on { border-color:var(--teal); background:#eef6f6; box-shadow:0 0 0 2px rgba(20,123,130,.18) inset; }
.onb-country--other { grid-column:1 / -1; }

/* ===================================================================
 * Saved collection (/saved) — places, guides, anything bookmarked
 * =================================================================== */
.title-header__action { margin-left:auto; border:none; background:transparent; color:var(--teal);
  font-family:inherit; font-size:14px; font-weight:600; cursor:pointer; padding:8px 4px; }

.saved-filters { display:flex; gap:8px; padding:0 var(--gutter) 6px; overflow-x:auto; }
.saved-filters[hidden] { display:none; }
.saved-chip { flex-shrink:0; border:1px solid var(--hairline); background:#fff; color:#5c6664;
  font-family:inherit; font-size:13.5px; font-weight:600; padding:8px 15px; border-radius:9999px; cursor:pointer;
  transition:background .15s, color .15s, border-color .15s; }
.saved-chip.is-active { background:var(--teal); color:#fff; border-color:var(--teal); }

.saved-groups { padding:8px var(--gutter) 28px; display:flex; flex-direction:column; gap:24px; }
.saved-group__head { margin:0 0 11px; font-size:13px; font-weight:600; letter-spacing:.02em; text-transform:uppercase; color:#8b938f; }
.saved-group__head span { color:var(--teal); margin-left:2px; }
.saved-group__list { display:flex; flex-direction:column; gap:10px; }

.sv-card { display:flex; align-items:center; gap:13px; padding:10px; background:#fff; border:1px solid var(--hairline);
  border-radius:16px; text-decoration:none; color:inherit; transition:box-shadow .15s, transform .08s; }
.sv-card:active { transform:scale(.992); }
.sv-card__media { flex-shrink:0; width:62px; height:62px; border-radius:12px; overflow:hidden; background:#eef6f6;
  display:flex; align-items:center; justify-content:center; }
.sv-card__img { width:100%; height:100%; object-fit:cover; }
.sv-card__icon { color:var(--teal); display:flex; }
.sv-card__body { flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; }
.sv-card__type { display:inline-flex; align-items:center; gap:4px; font-size:11px; font-weight:600; letter-spacing:.03em;
  text-transform:uppercase; color:var(--teal); }
.sv-card__name { font-size:15px; font-weight:600; color:var(--ink); line-height:1.25;
  overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.sv-card__sub { font-size:12.5px; color:#7b8482; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sv-card__rm { flex-shrink:0; width:42px; height:42px; border-radius:9999px; border:none; background:transparent;
  color:#aab3b1; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:background .15s, color .15s; }
.sv-card__rm:hover { background:rgba(193,58,58,.08); color:var(--danger, #c13a3a); }
.saved-none { padding:24px var(--gutter); text-align:center; color:#8b938f; font-size:14px; }

/* empty state */
.saved-empty { padding:54px var(--gutter) 40px; text-align:center; display:flex; flex-direction:column; align-items:center; }
.saved-empty[hidden] { display:none; }
.saved-empty__ic { width:74px; height:74px; border-radius:9999px; background:#eef6f6; color:var(--teal);
  display:flex; align-items:center; justify-content:center; margin-bottom:18px; }
.saved-empty__title { margin:0 0 8px; font-size:19px; font-weight:600; color:var(--ink); }
.saved-empty__text { margin:0 0 24px; font-size:14.5px; line-height:1.55; color:#5c6664; max-width:300px; }
.saved-empty__text i { vertical-align:-2px; color:var(--teal); }
.saved-empty__cta { display:flex; flex-wrap:wrap; gap:10px; justify-content:center; }

/* pill buttons (shared: empty-state CTAs + confirm modal) */
.btn-pill { display:inline-flex; align-items:center; gap:7px; height:46px; padding:0 20px; border-radius:9999px;
  border:none; background:var(--teal); color:#fff; font-family:inherit; font-size:14.5px; font-weight:600;
  text-decoration:none; cursor:pointer; transition:background .15s, transform .08s; }
.btn-pill:active { transform:translateY(1px); }
.btn-pill--ghost { background:#fff; color:var(--ink); border:1px solid var(--hairline); }
.btn-pill--danger { background:var(--danger, #c13a3a); color:#fff; }

/* confirm modal body (reuses #sheet-host .modal) */
.modal__body { padding:22px 20px; text-align:center; }
.modal__title { margin:0 0 8px; font-size:18px; font-weight:600; color:var(--ink); }
.modal__text { margin:0 0 20px; font-size:14px; line-height:1.5; color:#5c6664; }
.modal__actions { display:flex; gap:10px; justify-content:center; }
.modal__actions .btn-pill { flex:1; justify-content:center; }

/* ===================================================================
 * Flights info board (/flights) — minimalist arrivals/departures
 * =================================================================== */
.flt-wrap { padding:6px var(--gutter) calc(40px + var(--nav-space)); }
.flt-airport { background:#fff; border:1px solid var(--hairline); border-radius:20px; padding:16px 16px 14px;
  box-shadow:0 14px 30px -22px rgba(20,40,45,0.4); }
.flt-airport__head { display:flex; align-items:center; gap:13px; }
.flt-airport__code { flex:none; width:52px; height:52px; border-radius:15px; background:var(--teal); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:16px; font-weight:800; letter-spacing:.03em;
  box-shadow:0 12px 22px -12px rgba(20,123,130,0.65); }
.flt-airport__txt { flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; }
.flt-airport__name { font-size:16px; font-weight:700; color:var(--ink); line-height:1.2; }
.flt-airport__sub { display:inline-flex; align-items:center; gap:4px; font-size:12.5px; color:#7b8482; }
.flt-airport__sub i, .flt-airport__sub svg { color:#aab3b1; }
/* at-a-glance stat strip — divided, tabular */
.flt-stats { display:grid; grid-template-columns:repeat(4,1fr); margin:16px 0 0; padding:15px 4px;
  border-top:1px solid var(--hairline-2); border-bottom:1px solid var(--hairline-2); }
.flt-stat { display:flex; flex-direction:column; align-items:center; gap:5px; text-align:center; position:relative; }
.flt-stat + .flt-stat::before { content:''; position:absolute; left:0; top:1px; bottom:1px; width:1px; background:var(--hairline-2); }
.flt-stat__n { font-size:22px; font-weight:700; color:var(--ink); line-height:1; font-variant-numeric:tabular-nums; }
.flt-stat__n--good { color:var(--teal); }
.flt-stat__n--warn { color:#c1862a; }
.flt-stat__l { font-size:11px; font-weight:600; color:#8b938f; }
/* airport-guide CTA row */
.flt-airport__cta { display:flex; align-items:center; gap:12px; margin-top:12px; padding:6px 2px 2px; text-decoration:none; }
.flt-airport__cta-ic { flex:none; width:38px; height:38px; border-radius:12px; background:var(--teal-surface); color:var(--teal);
  display:flex; align-items:center; justify-content:center; }
.flt-airport__cta-t { flex:1; min-width:0; display:flex; flex-direction:column; }
.flt-airport__cta-title { font-size:14px; font-weight:600; color:var(--ink); }
.flt-airport__cta-sub { font-size:11.5px; color:#8b938f; margin-top:1px; }
.flt-airport__cta-go { flex:none; color:#c4cbca; }
.flt-airport__cta:active { opacity:.85; }

.flt-tabs { display:flex; gap:4px; background:var(--app-bg); border-radius:9999px; padding:4px; margin:16px 0 12px; }
.flt-tab { flex:1; display:inline-flex; align-items:center; justify-content:center; gap:7px; border:none; background:transparent;
  color:#6b7775; font-family:inherit; font-size:13.5px; font-weight:600; padding:10px; border-radius:9999px; cursor:pointer; transition:background .15s, color .15s; }
.flt-tab i, .flt-tab svg { color:currentColor; }
.flt-tab.is-active { background:var(--teal); color:#fff; box-shadow:0 4px 12px -4px rgba(20,123,130,.5); }

.flt-search { display:flex; align-items:center; gap:10px; background:#fff; border:1px solid var(--hairline);
  border-radius:13px; padding:11px 14px; margin-bottom:8px; color:#8b938f; }
.flt-search input { flex:1; border:none; background:transparent; outline:none; font-family:inherit; font-size:14.5px; color:var(--ink); min-width:0; }

.flt-list { display:flex; flex-direction:column; }
.flt-list[hidden] { display:none; }
.flt-row { display:flex; align-items:center; gap:12px; padding:13px 2px; border-bottom:1px solid var(--hairline-2); cursor:pointer; }
.flt-row[hidden] { display:none; }
.flt-row:last-of-type { border-bottom:none; }
.flt-row:active { background:var(--app-bg); }
.flt-row__go { flex-shrink:0; color:#cdd4d3; margin-left:-2px; }
/* prominent airline logo */
.flt-logo { width:44px; height:44px; flex-shrink:0; border-radius:12px; object-fit:contain; background:#fff; padding:5px;
  box-shadow:0 0 0 1px var(--hairline), 0 4px 10px -6px rgba(28,26,24,.25); }
.flt-logo--ph { object-fit:contain; padding:9px; background:var(--teal-surface); box-shadow:0 0 0 1px var(--hairline); }
.flt-body { flex:1; min-width:0; display:flex; flex-direction:column; gap:4px; }
/* from → to route line */
.flt-route { display:flex; align-items:center; gap:8px; min-width:0; }
.flt-route__a, .flt-route__b { font-size:14.5px; font-weight:700; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:42%; }
.flt-route__b { color:var(--teal); }
.flt-route__line { flex:1; min-width:24px; height:1px; background:repeating-linear-gradient(90deg, var(--hairline) 0 5px, transparent 5px 9px);
  position:relative; display:flex; align-items:center; justify-content:center; }
.flt-route__line i, .flt-route__line svg { position:absolute; background:#fff; color:var(--teal); padding:0 3px; }
.flt-sub { font-size:12px; color:#8b938f; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.flt-sub strong { color:var(--ink); font-weight:600; }
.flt-end { display:flex; flex-direction:column; align-items:flex-end; gap:5px; flex-shrink:0; }
.flt-time { font-size:16px; font-weight:700; color:var(--ink); font-variant-numeric:tabular-nums; line-height:1; }
.flt-status { flex-shrink:0; font-size:11px; font-weight:600; padding:4px 9px; border-radius:9999px; letter-spacing:.01em; white-space:nowrap; }
.flt-status--good   { background:rgba(20,123,130,.1);  color:var(--teal); }
.flt-status--active { background:rgba(20,123,130,.14); color:#0f6066; }
.flt-status--warn   { background:rgba(214,158,46,.16); color:#9a6b12; }
.flt-status--muted  { background:var(--app-bg); color:#8b938f; }
.flt-none { padding:28px 4px; text-align:center; color:#8b938f; font-size:14px; }

.flt-note { display:flex; gap:7px; align-items:flex-start; margin:18px 0 0; font-size:11.5px; line-height:1.5; color:#9aa3a0; }
.flt-note i, .flt-note svg { flex-shrink:0; margin-top:2px; }
.flt-note--live { color:var(--teal); font-weight:600; }

/* immersive single-flight view — light, boarding-pass aesthetic (built by flights.js) */
.fx-host { position:fixed; inset:0; z-index:96; overflow-y:auto; -webkit-overflow-scrolling:touch; color:var(--ink);
  background:radial-gradient(115% 40% at 50% 0, rgba(20,123,130,0.07), transparent 62%), var(--app-bg);
  animation:fxin .34s cubic-bezier(.2,.85,.3,1); }
.fx-host[hidden] { display:none; }
@keyframes fxin { from { opacity:0; } to { opacity:1; } }
.fx-wrap { max-width:var(--app-max); margin:0 auto; min-height:100%;
  padding:calc(16px + env(safe-area-inset-top)) var(--gutter) calc(40px + env(safe-area-inset-bottom)); display:flex; flex-direction:column; }
.fx-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:6px; }
.fx-back { width:44px; height:44px; border-radius:9999px; border:1px solid var(--hairline); background:#fff; color:var(--ink);
  display:flex; align-items:center; justify-content:center; cursor:pointer; box-shadow:0 6px 16px -8px rgba(20,40,45,0.4);
  transition:transform .14s ease; }
.fx-back:active { transform:scale(0.94); }
.fx-dir { display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--teal); padding:8px 14px; border-radius:9999px; background:var(--teal-surface); }
.fx-dir i, .fx-dir svg { color:var(--teal); }
.fx-hero { text-align:center; margin:18px 0 4px; }
.fx-logo { width:80px; height:80px; margin:0 auto 16px; border-radius:23px; background:#fff; padding:12px;
  border:1px solid var(--hairline); box-shadow:0 18px 34px -20px rgba(20,40,45,0.4); }
.fx-logo img { width:100%; height:100%; object-fit:contain; display:block; }
.fx-logo--ph { padding:17px; }
.fx-flight { font-size:34px; font-weight:700; letter-spacing:-0.02em; line-height:1.05; color:var(--ink); }
.fx-airline { font-size:13.5px; font-weight:600; color:#7b8482; margin-top:3px; }

/* boarding-pass style route card */
.fx-pass { position:relative; background:#fff; border:1px solid var(--hairline); border-radius:22px; margin-top:26px;
  box-shadow:0 22px 48px -28px rgba(20,40,45,0.45); }
.fx-pass__main { display:flex; align-items:flex-start; gap:6px; padding:22px 18px 18px; }
.fx-port { flex:1; min-width:0; text-align:center; }
.fx-port__label { display:block; font-size:9.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:#aab3b1; margin-bottom:10px; }
.fx-port__flag { width:52px; height:36px; object-fit:cover; border-radius:6px; margin:0 auto 11px; display:block;
  border:1px solid var(--hairline); box-shadow:0 6px 14px -8px rgba(20,40,45,0.4); }
.fx-port__city { display:block; font-size:16px; font-weight:700; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.fx-port__country { display:block; font-size:11px; color:#8b938f; margin-top:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.fx-path { flex:0 0 82px; height:56px; position:relative; }
.fx-path__svg { width:100%; height:40px; margin-top:14px; overflow:visible; display:block; }
.fx-path__plane { position:absolute; left:50%; top:8px; transform:translateX(-50%) rotate(45deg);
  width:30px; height:30px; border-radius:9999px; background:var(--teal); color:#fff; display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 16px -6px rgba(20,123,130,0.6); }
.fx-pass__perf { position:relative; height:0; border-top:1.5px dashed var(--hairline); margin:0 20px; }
.fx-pass__notch { position:absolute; top:0; width:22px; height:22px; border-radius:9999px; background:var(--app-bg);
  border:1px solid var(--hairline); transform:translateY(-50%); }
.fx-pass__notch--l { left:-31px; }
.fx-pass__notch--r { right:-31px; }
.fx-pass__stub { display:flex; align-items:flex-start; gap:12px; padding:16px 22px 18px; }
.fx-stub { flex:1; min-width:0; display:flex; flex-direction:column; gap:7px; }
.fx-stub:nth-child(2) { align-items:center; text-align:center; }
.fx-stub:nth-child(3) { align-items:flex-end; text-align:right; }
.fx-stub__k { font-size:10px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:#9aa3a1; }
.fx-stub__time { font-size:21px; font-weight:700; color:var(--ink); line-height:1; font-variant-numeric:tabular-nums; }
.fx-stub__v { font-size:15px; font-weight:600; color:var(--ink); }
.fx-statuspill { display:inline-flex; align-items:center; gap:6px; padding:5px 11px; border-radius:9999px; font-size:12px; font-weight:600; }
.fx-statuspill--good   { background:rgba(20,123,130,.1);  color:var(--teal); }
.fx-statuspill--active { background:rgba(20,123,130,.14); color:#0f6066; }
.fx-statuspill--warn   { background:rgba(214,158,46,.16); color:#9a6b12; }
.fx-statuspill--muted  { background:var(--app-bg); color:#8b938f; }

.fx-cap { display:flex; align-items:center; justify-content:center; gap:6px; margin:16px 0 0; font-size:12px; color:#8b938f; text-align:center; }
.fx-cap i, .fx-cap svg { color:var(--teal); flex-shrink:0; }

.fx-links { display:flex; flex-direction:column; gap:10px; margin-top:22px; }
.fx-link { display:flex; align-items:center; gap:12px; padding:15px 16px; text-decoration:none; color:var(--ink);
  background:#fff; border:1px solid var(--hairline); border-radius:16px; transition:border-color .15s ease, background .15s ease; }
.fx-link:active { background:var(--app-bg); }
.fx-link__ic { flex:none; width:38px; height:38px; border-radius:12px; background:var(--teal-surface); color:var(--teal);
  display:inline-flex; align-items:center; justify-content:center; }
.fx-link__t { flex:1; min-width:0; }
.fx-link__title { display:block; font-size:14px; font-weight:600; color:var(--ink); }
.fx-link__sub { display:block; font-size:11.5px; color:#8b938f; margin-top:1px; }
.fx-link__go { flex:none; color:#c4cbca; }
.fx-note { display:flex; gap:7px; align-items:flex-start; margin:20px 2px 0; font-size:11.5px; line-height:1.55; color:#9aa3a0; }
.fx-note i, .fx-note svg { flex-shrink:0; margin-top:2px; color:#aab3b1; }

/* ===================================================================
 * Interests & recommends hub (/interests) — calm app summary
 * =================================================================== */
.ix-wrap { padding:4px var(--gutter) calc(36px + var(--nav-space)); }

.ix-intro { background:var(--teal-surface); border-radius:20px; padding:18px; margin-bottom:18px; }
.ix-intro__eyebrow { display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:700; letter-spacing:.03em;
  text-transform:uppercase; color:var(--teal); }
.ix-intro__title { margin:8px 0 0; font-size:23px; font-weight:600; line-height:1.15; color:var(--ink); letter-spacing:-0.01em; }

.ix-quick { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-bottom:6px; }
.ix-quick__item { position:relative; display:flex; flex-direction:column; align-items:center; gap:8px; padding:14px 6px;
  background:#fff; border:1px solid var(--hairline); border-radius:16px; text-decoration:none; }
.ix-quick__ic { width:42px; height:42px; border-radius:12px; background:var(--teal-surface); color:var(--teal);
  display:flex; align-items:center; justify-content:center; }
.ix-quick__label { font-size:12px; font-weight:600; color:var(--ink); }
.ix-quick__count { position:absolute; top:8px; right:8px; min-width:18px; height:18px; padding:0 5px; border-radius:9999px;
  background:var(--teal); color:#fff; font-size:11px; font-weight:700; display:flex; align-items:center; justify-content:center; }
.ix-quick__count[hidden] { display:none; }

.ix-chips { display:flex; flex-wrap:wrap; gap:8px; }
.ix-chip { display:inline-flex; align-items:center; gap:7px; padding:9px 14px; border-radius:9999px; background:#fff;
  border:1px solid var(--hairline); color:var(--ink); font-size:13.5px; font-weight:600; text-decoration:none; }
.ix-chip i, .ix-chip svg { color:var(--teal); }

.ix-list { display:flex; flex-direction:column; background:#fff; border:1px solid var(--hairline); border-radius:16px; overflow:hidden; }
.ix-list__row { display:flex; align-items:center; gap:12px; padding:13px 14px; text-decoration:none; border-bottom:1px solid var(--hairline-2); }
.ix-list__row:last-child { border-bottom:none; }
.ix-list__ic { width:36px; height:36px; flex-shrink:0; border-radius:10px; background:var(--teal-surface); color:var(--teal);
  display:flex; align-items:center; justify-content:center; }
.ix-list__txt { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.ix-list__label { font-size:14.5px; font-weight:600; color:var(--ink); }
.ix-list__sub { font-size:12.5px; color:#7b8482; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ix-list__chev { color:#c2c9c7; flex-shrink:0; }

.ix-serv { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.ix-serv__item { display:flex; flex-direction:column; align-items:center; gap:8px; padding:15px 6px; background:#fff;
  border:1px solid var(--hairline); border-radius:16px; text-decoration:none; }
.ix-serv__ic { width:40px; height:40px; border-radius:11px; background:var(--teal-surface); color:var(--teal);
  display:flex; align-items:center; justify-content:center; }
.ix-serv__label { font-size:12.5px; font-weight:600; color:var(--ink); text-align:center; }

.ix-now { display:flex; flex-direction:column; gap:0; background:#fff; border:1px solid var(--hairline); border-radius:16px; overflow:hidden; text-decoration:none; }
.ix-now__row { display:flex; align-items:flex-start; gap:12px; padding:14px; }
.ix-now__row--fest { border-top:1px solid var(--hairline-2); }
.ix-now__ic { width:36px; height:36px; flex-shrink:0; border-radius:10px; background:var(--teal-surface); color:var(--teal);
  display:flex; align-items:center; justify-content:center; }
.ix-now__txt { display:flex; flex-direction:column; gap:3px; min-width:0; }
.ix-now__label { font-size:14px; font-weight:600; color:var(--ink); }
.ix-now__sub { font-size:12.5px; line-height:1.5; color:#7b8482; }

/* knowledge category → live map deep-link */
.kb-maplink { display:flex; align-items:center; gap:12px; margin:0 0 18px; padding:13px 15px; border-radius:14px;
  background:var(--teal-surface); border:1px solid rgba(20,123,130,0.14); text-decoration:none; }
.kb-maplink__ic { width:38px; height:38px; flex-shrink:0; border-radius:11px; background:var(--teal); color:#fff;
  display:flex; align-items:center; justify-content:center; }
.kb-maplink__txt { flex:1; min-width:0; font-size:14px; font-weight:600; color:var(--teal-press, #0f6066); }
.kb-maplink__go { color:var(--teal); flex-shrink:0; }

/* ===================================================================
 * Hotels & stays browse (/hotels)
 * =================================================================== */
.hotels-wrap { padding:4px var(--gutter) calc(36px + var(--nav-space)); }
.hotels-hero { margin-bottom:16px; }
.hotels-hero__eyebrow { display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:700; letter-spacing:.03em;
  text-transform:uppercase; color:var(--teal); }
.hotels-hero__title { margin:8px 0 4px; font-size:24px; font-weight:600; line-height:1.12; color:var(--ink); letter-spacing:-0.01em; }
.hotels-hero__sub { margin:0; font-size:14px; color:var(--muted, #7b8482); }



/* ============================================================================
   The onboarding ask (.onb-ask), shown inside App.modal().

   Replaces a toast plus a blind 800ms redirect. The traveller stays where they
   are, is told why a profile is needed, and can decline without losing the page.
   ========================================================================== */
.onb-ask { padding:4px 2px; }
.onb-ask__title { margin:0 0 8px; font-size:18px; font-weight:700; letter-spacing:-0.01em; color:var(--ink); }
.onb-ask__body { margin:0 0 18px; font-size:14px; line-height:1.6; color:var(--body); }
.onb-ask__actions { display:flex; align-items:center; gap:10px; }
.onb-ask__cancel { flex:none; background:none; border:none; cursor:pointer; font-family:inherit;
  font-size:14.5px; font-weight:600; color:var(--muted); padding:13px 6px; }
.onb-ask__go { flex:1; text-align:center; background:var(--teal); color:#fff; text-decoration:none;
  border-radius:9999px; font-size:15px; font-weight:700; padding:14px 18px;
  transition:background .16s ease; }
.onb-ask__go:active { background:var(--teal-press); }
.onb-ask__cancel:focus-visible, .onb-ask__go:focus-visible { outline:2px solid var(--teal); outline-offset:2px; }

/* ============================================================================
   HOTELS CONTROLS (.hts-*) — the "concierge" language, hotels only.

   Everywhere else in this app, controls are teal chips in horizontal
   scrollers. Stays get something quieter and more deliberate so the page
   reads as its own place: ONE elevated search pill, a quiet results line
   with sort as a text button, and everything else in a bottom sheet of
   grouped rows. Resting chrome is about 60px instead of the 160px the
   four stacked control rows used to take.
   ========================================================================== */
.hts-bar { display:flex; align-items:center; gap:10px; margin:18px 0 12px; }
.hts-search { flex:1; min-width:0; display:flex; align-items:center; gap:10px;
  background:#fff; border:1px solid var(--hairline); border-radius:9999px;
  padding:12px 16px; box-shadow:0 10px 26px -20px rgba(20,40,45,0.55); }
.hts-search i, .hts-search svg { color:var(--muted-2); flex:none; }
.hts-search input { flex:1; min-width:0; border:none; background:transparent; outline:none;
  font-family:inherit; font-size:15px; color:var(--ink); }
.hts-search input::placeholder { color:var(--muted-2); }
.hts-search__clear { width:24px; height:24px; flex:none; border:none; border-radius:9999px;
  background:var(--app-bg); color:var(--body); display:grid; place-items:center; cursor:pointer; }
.hts-search__clear[hidden] { display:none; }

.hts-filters { flex:none; display:inline-flex; align-items:center; gap:7px; cursor:pointer;
  background:#fff; border:1px solid var(--hairline); border-radius:9999px; padding:12px 15px;
  font-family:inherit; font-size:14px; font-weight:600; color:var(--ink);
  box-shadow:0 10px 26px -20px rgba(20,40,45,0.55); transition:border-color .15s, background .15s; }
.hts-filters i, .hts-filters svg { color:var(--teal); }
.hts-filters.is-on { border-color:var(--teal); background:var(--teal-surface); }
.hts-filters__n { min-width:18px; height:18px; padding:0 5px; border-radius:9999px;
  background:var(--teal); color:#fff; font-size:11px; font-weight:700;
  display:inline-grid; place-items:center; }
.hts-filters__n[hidden] { display:none; }
@media (max-width: 359px) { .hts-filters__label { display:none; } }

/* active filters: only rendered when something is set */
.hts-active { display:flex; flex-wrap:wrap; gap:7px; margin:0 0 12px; }
.hts-active[hidden] { display:none; }
.hts-pill { display:inline-flex; align-items:center; gap:5px; cursor:pointer; font-family:inherit;
  font-size:12.5px; font-weight:600; color:var(--teal); background:var(--teal-surface);
  border:none; border-radius:9999px; padding:6px 11px; }
.hts-pill i, .hts-pill svg { opacity:.75; }
.hts-pill--clear { background:transparent; color:var(--muted); text-decoration:underline; }

/* results line: a single PILL holding the count on the left and the sort control
   on the right — both stay where they were, wrapped in one rounded bar. */
.hts-results { display:flex; align-items:center; justify-content:space-between;
  gap:10px; margin:0 0 14px; padding:9px 16px; border-radius:9999px;
  background:var(--app-bg); border:1px solid var(--hairline); }
.hts-results__count { font-size:13px; font-weight:600; color:var(--muted); }
.hts-sortbtn { display:inline-flex; align-items:center; gap:5px; cursor:pointer;
  background:none; border:none; padding:0; font-family:inherit; font-size:13.5px;
  font-weight:700; color:var(--ink); }
.hts-sortbtn i, .hts-sortbtn svg { color:var(--muted-2); }

.hts-menu { position:absolute; right:var(--gutter); z-index:40; margin-top:-6px;
  background:#fff; border:1px solid var(--hairline); border-radius:16px; padding:6px;
  box-shadow:0 22px 44px -24px rgba(20,40,45,0.5); display:flex; flex-direction:column; min-width:186px; }
.hts-menu[hidden] { display:none; }
.hts-menu__opt { text-align:left; cursor:pointer; background:none; border:none; border-radius:11px;
  padding:10px 12px; font-family:inherit; font-size:13.5px; font-weight:600; color:var(--body); }
.hts-menu__opt.is-active { background:var(--teal-surface); color:var(--teal); }

/* ---- the filter sheet: grouped ROWS with counts, never chips ---- */
/* above the floating nav (40) and the assistant FAB; hotels.js moves this node
   to <body> on init so `fixed` really means the viewport */
.hts-sheet { position:fixed; inset:0; z-index:1200; display:flex; align-items:flex-end;
  justify-content:center; }
.hts-sheet[hidden] { display:none; }
.hts-sheet__overlay { position:absolute; inset:0; background:rgba(12,26,29,0.42);
  -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
  opacity:0; transition:opacity .2s ease; }
.hts-sheet.is-open .hts-sheet__overlay { opacity:1; }
.hts-sheet__panel { position:relative; width:100%; max-width:var(--app-max);
  background:#fff; border-radius:24px 24px 0 0; display:flex; flex-direction:column;
  max-height:90vh; transform:translateY(100%); transition:transform .24s cubic-bezier(.22,.61,.36,1); }
.hts-sheet.is-open .hts-sheet__panel { transform:translateY(0); }
.hts-sheet__grabber { width:38px; height:4px; border-radius:9999px; background:var(--hairline);
  margin:10px auto 2px; flex:none; }
.hts-sheet__head { display:flex; align-items:center; justify-content:space-between;
  padding:8px 20px 12px; flex:none; }
.hts-sheet__title { margin:0; font-size:18px; font-weight:700; letter-spacing:-0.01em; color:var(--ink); }
.hts-sheet__close { width:32px; height:32px; border:none; border-radius:9999px; cursor:pointer;
  background:var(--app-bg); color:var(--ink); display:grid; place-items:center; }
.hts-sheet__body { overflow-y:auto; padding:0 20px 4px; flex:1; }
.hts-sheet__foot { display:flex; align-items:center; gap:12px; padding:12px 20px;
  padding-bottom:calc(12px + env(safe-area-inset-bottom)); border-top:1px solid var(--hairline-2); flex:none; }
.hts-clear { background:none; border:none; cursor:pointer; font-family:inherit; font-size:14px;
  font-weight:600; color:var(--muted); padding:12px 4px; }
.hts-apply { flex:1; background:var(--teal); color:#fff; border:none; border-radius:9999px;
  cursor:pointer; font-family:inherit; font-size:15px; font-weight:700; padding:14px 18px; }
.hts-apply:active { background:var(--teal-press); }

/* ---- the four control shapes --------------------------------------------
   Four kinds of decision, four shapes. One 48px row repeated sixteen times
   was 1044px of content in a 557px window: mandatory scrolling, and nothing
   to tell the eye where one question ended and the next began.

     rating  single choice on an ordered scale -> segmented track
     type    multi-select, short labels        -> wrapping chips
     region  multi-select, long geographic     -> two-column grid
     saved   one boolean                       -> switch

   Spacing varies between groups on purpose; even rhythm reads as monotony.
   Selection is the only place the accent appears.
   ------------------------------------------------------------------------ */
.hts-group { margin:0 0 16px; }
.hts-group--type { margin-bottom:18px; }
.hts-group--region { margin-bottom:18px; }
.hts-group--saved { margin-bottom:4px; }
.hts-group__title { margin:0 0 10px; font-size:11.5px; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:var(--muted-2); }

/* rating: segmented track */
.hts-seg { display:flex; gap:4px; background:var(--app-bg); border-radius:12px; padding:4px; }
.hts-seg__opt { flex:1; min-width:0; cursor:pointer; border:none; background:transparent;
  border-radius:9px; padding:9px 6px; font-family:inherit; font-size:13.5px; font-weight:600;
  color:var(--body); display:inline-flex; align-items:center; justify-content:center; gap:5px;
  transition:background .16s ease, color .16s ease, box-shadow .16s ease; }
.hts-seg__opt.is-active { background:#fff; color:var(--teal); font-weight:700;
  box-shadow:0 2px 6px -2px rgba(20,40,45,.24); }
.hts-seg__n { font-size:11px; font-weight:600; color:var(--muted-2); }
.hts-seg__opt.is-active .hts-seg__n { color:var(--teal); opacity:.7; }

/* type: wrapping chips */
.hts-chips { display:flex; flex-wrap:wrap; gap:8px; }
.hts-chip { display:inline-flex; align-items:center; gap:6px; cursor:pointer; font-family:inherit;
  font-size:13.5px; font-weight:600; color:var(--ink); background:#fff;
  border:1px solid var(--hairline); border-radius:9999px; padding:9px 14px;
  transition:background .16s ease, border-color .16s ease, color .16s ease; }
.hts-chip__n { font-size:11px; font-weight:600; color:var(--muted-2); }
.hts-chip.is-active { background:var(--teal-surface); border-color:var(--teal); color:var(--teal); }
.hts-chip.is-active .hts-chip__n { color:var(--teal); opacity:.7; }

/* region: two-column grid */
.hts-tiles { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
/* an odd final tile spans the row rather than sitting orphaned beside a gap */
.hts-tile:last-child:nth-child(odd) { grid-column:1 / -1; flex-direction:row;
  align-items:center; justify-content:space-between; }
.hts-tile:last-child:nth-child(odd) .hts-tile__label { line-height:1.2; }
.hts-tile { display:flex; flex-direction:column; gap:3px; align-items:flex-start; text-align:left;
  cursor:pointer; font-family:inherit; background:#fff; border:1px solid var(--hairline);
  border-radius:14px; padding:10px 12px; min-height:52px; justify-content:center;
  transition:background .16s ease, border-color .16s ease; }
.hts-tile__label { font-size:13.5px; font-weight:600; color:var(--ink); line-height:1.25; }
.hts-tile__n { font-size:11.5px; font-weight:500; color:var(--muted-2); }
.hts-tile.is-active { background:var(--teal-surface); border-color:var(--teal); }
.hts-tile.is-active .hts-tile__label, .hts-tile.is-active .hts-tile__n { color:var(--teal); }

/* saved: switch */
.hts-switch { display:flex; align-items:center; gap:12px; width:100%; cursor:pointer;
  text-align:left; font-family:inherit; background:#fff; border:1px solid var(--hairline);
  border-radius:16px; padding:12px 14px; transition:background .16s ease, border-color .16s ease; }
.hts-switch__ic { flex:none; width:34px; height:34px; border-radius:11px; background:var(--app-bg);
  color:var(--muted-2); display:grid; place-items:center; transition:background .16s, color .16s; }
.hts-switch__txt { flex:1; min-width:0; display:flex; flex-direction:column; gap:1px; }
.hts-switch__label { font-size:14.5px; font-weight:600; color:var(--ink); }
.hts-switch__sub { font-size:11.5px; color:var(--muted-2); }
.hts-switch__track { flex:none; width:44px; height:26px; border-radius:9999px;
  background:var(--hairline); position:relative; transition:background .18s ease; }
.hts-switch__knob { position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%;
  background:#fff; box-shadow:0 1px 4px rgba(20,40,45,.3);
  transition:transform .18s cubic-bezier(.22,.61,.36,1); }
.hts-switch.is-active { background:var(--teal-surface); border-color:var(--teal); }
.hts-switch.is-active .hts-switch__ic { background:#fff; color:var(--teal); }
.hts-switch.is-active .hts-switch__track { background:var(--teal); }
.hts-switch.is-active .hts-switch__knob { transform:translateX(18px); }

@media (prefers-reduced-motion: reduce) {
  .hts-seg__opt, .hts-chip, .hts-tile, .hts-switch,
  .hts-switch__track, .hts-switch__knob, .hts-switch__ic { transition:none; }
}

.hts-seg__opt:focus-visible, .hts-chip:focus-visible, .hts-tile:focus-visible,
.hts-switch:focus-visible, .hts-filters:focus-visible, .hts-sortbtn:focus-visible,
.hts-menu__opt:focus-visible, .hts-apply:focus-visible, .hts-pill:focus-visible {
  outline:2px solid var(--teal); outline-offset:2px; }

body.no-scroll { overflow:hidden; }

/* ---- interaction motion ---------------------------------------------------
   Motion here reports state, nothing else: 150 to 250ms, ease-out, and never
   on a layout property. The controls already transition background and border;
   these add the enter and exit that were missing.
   ------------------------------------------------------------------------ */
@keyframes hts-pill-in { from { opacity:0; transform:translateY(-3px) scale(.96); }
                         to   { opacity:1; transform:none; } }
.hts-pill { animation:hts-pill-in .18s cubic-bezier(.22,.61,.36,1) both; }
.hts-pill.is-going { animation:none; opacity:0; transform:scale(.94);
  transition:opacity .14s ease, transform .14s ease; }

/* the sort menu grows from the button it belongs to */
@keyframes hts-menu-in { from { opacity:0; transform:translateY(-4px) scale(.97); }
                         to   { opacity:1; transform:none; } }
.hts-menu { transform-origin:top right; animation:hts-menu-in .16s cubic-bezier(.22,.61,.36,1) both; }

/* cards settling into a new filtered set */
@keyframes bz-card-in { from { opacity:0; transform:translateY(4px); }
                        to   { opacity:1; transform:none; } }
.hotels-grid.is-refiltering .hotel-card:not([hidden]) {
  animation:bz-card-in .22s cubic-bezier(.22,.61,.36,1) both; }

@media (prefers-reduced-motion: reduce) {
  .hts-pill, .hts-menu, .hotels-grid.is-refiltering .hotel-card:not([hidden]) { animation:none; }
  .hts-pill.is-going { transition:none; }
}



@media (prefers-reduced-motion: reduce) {
  .hts-sheet__panel, .hts-sheet__overlay { transition:none; }
}

/* ============================================================================
   BUSINESS CARDS (.bz-*) — hotels, restaurants and other venues.

   These places carry LOGOS, not photographs (84% of hotel images and 79% of
   restaurant images are square brand marks). The immersive .dest-card cropped
   that square mark, darkened it and printed the venue name over a logo that
   already contained the name. So businesses get a logo-first card instead, and
   real destinations keep .dest-card.

     .bz-stay   crest : tinted band + logo disc in a white ring   (hotels)
     .bz-venue  ticket: booking stub with notches and a tear line (food etc.)

   Both share the disc, the monogram fallback and the chips.
   ========================================================================== */
.bz-logo { background:#fff; border-radius:50%; overflow:hidden; flex:none;
  display:grid; place-items:center; border:1px solid var(--hairline-2); }
/* the source marks are SQUARE and this box is square, so `cover` crops nothing:
   it fills the box and the circle masks the corners. Never `contain` + padding,
   which is what made the logos float small inside the disc. */
.bz-logo img { width:100%; height:100%; object-fit:cover; display:block; }
.bz-mono { background:var(--teal-surface); color:var(--teal); font-weight:700;
  letter-spacing:-0.01em; display:grid; place-items:center; width:100%; height:100%; }
.bz-nm { font-weight:600; color:var(--ink); line-height:1.25; overflow-wrap:anywhere;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.bz-star { color:#e8a33d; }
.bz-sub { color:var(--muted); font-weight:500; }
.bz-chips { display:flex; flex-wrap:wrap; gap:5px; }
.bz-chip { font-size:10.5px; font-weight:600; color:var(--body); background:var(--app-bg);
  border-radius:9999px; padding:3px 8px; white-space:nowrap; }
.bz-chip--food { background:#f7f2ea; color:#8a6d3b; }
/* Halal means CONFIRMED halal. Its absence means UNKNOWN and is never rendered
   as a negative: there is deliberately no "not halal" state anywhere. */
.bz-chip--halal { background:#e8f3ec; color:#1f6b41; font-weight:700; }
.bz-chip--diet { background:var(--teal-surface); color:var(--teal); font-weight:700; }
.bz-open { color:#1f8b4d; font-weight:700; }
.bz-closed { color:#b4423a; font-weight:700; }
.bz-dot { width:6px; height:6px; border-radius:50%; flex:none; }
.bz-dot--open { background:#1f8b4d; }
.bz-dot--closed { background:#b4423a; }

/* ---- stay card: crest ---- */
.bz-stay { display:block; width:100%; background:#fff; border:1px solid var(--hairline);
  border-radius:var(--r-xl); overflow:hidden; text-decoration:none;
  box-shadow:0 10px 24px -20px rgba(20,40,45,0.6);
  transition:transform .14s ease, box-shadow .2s ease; }
.bz-stay__band { height:64px; display:grid; place-items:center; background:var(--teal-surface); }
.bz-stay .bz-logo { width:62px; height:62px; border:3px solid #fff;
  box-shadow:0 4px 12px -6px rgba(20,40,45,0.4); margin-bottom:-26px; }
.bz-stay .bz-mono { font-size:19px; }
/* 13px, not 13.5: hotel names are long and ran past the card edge at the larger size */
.bz-stay__body { padding:34px 9px 13px; text-align:center; }
.bz-stay .bz-nm { font-size:13px; min-height:33px; }
.bz-stay__meta { font-size:11.5px; color:var(--muted); margin-top:5px;
  display:flex; align-items:center; justify-content:center; gap:5px; }
.bz-stay .bz-chips { justify-content:center; margin-top:9px; }

/* ---- venue card: ticket ---- */
.bz-venue { position:relative; display:block; width:100%; background:#fff;
  border:1px solid var(--hairline); border-radius:var(--r-card); overflow:hidden;
  text-decoration:none; box-shadow:0 10px 24px -20px rgba(20,40,45,0.6);
  transition:transform .14s ease, box-shadow .2s ease; }
.bz-venue__top { padding:16px 12px 14px; display:grid; place-items:center; gap:9px; text-align:center; }
.bz-venue .bz-logo { width:56px; height:56px; }
.bz-venue .bz-mono { font-size:18px; }
.bz-venue .bz-nm { font-size:13px; min-height:32px; padding:0 2px; }
/* the tear: a notch, a dashed line, a notch. The notches punch through with the
   page background, so they must match whatever sits behind the card. */
.bz-venue__tear { position:relative; height:14px; }
.bz-venue__tear::before, .bz-venue__tear::after { content:''; position:absolute; top:50%;
  width:14px; height:14px; background:var(--app-bg); border-radius:50%; transform:translateY(-50%); }
.bz-venue__tear::before { left:-7px; }
.bz-venue__tear::after { right:-7px; }
.bz-venue__dash { position:absolute; top:50%; left:9px; right:9px; height:0;
  border-top:1.5px dashed var(--hairline); transform:translateY(-50%); }
.bz-venue__foot { padding:9px 12px 7px; display:flex; align-items:center;
  justify-content:space-between; gap:6px; font-size:11.5px; color:var(--muted); }
.bz-venue__rate { display:inline-flex; align-items:center; gap:4px; font-weight:700; color:var(--ink); }
.bz-venue .bz-chips { padding:0 12px 12px; justify-content:center; }
.bz-venue .bz-chips:empty { display:none; }

.bz-stay:active, .bz-venue:active { transform:scale(0.98); }
@media (hover: hover) {
  .bz-stay:hover, .bz-venue:hover { transform:translateY(-2px);
    box-shadow:0 18px 32px -20px rgba(20,40,45,0.5); }
}
.bz-stay:focus-visible, .bz-venue:focus-visible { outline:2px solid var(--teal); outline-offset:2px; }
/* These cards borrow .hotel-card / .bx-card so the existing filter JS keeps
   working, but those classes force a photo aspect ratio that would squash a
   logo card. Height here comes from the content. */
.bz-stay.hotel-card, .bz-venue.hotel-card,
.bz-stay.bx-card, .bz-venue.bx-card { aspect-ratio:auto; height:auto; overflow:visible; }
.bz-stay.bx-card, .bz-venue.bx-card { border-radius:var(--r-xl); }
.bz-venue.bx-card, .bz-venue.hotel-card { overflow:hidden; } /* the tear notches clip to the card */
@media (prefers-reduced-motion: reduce) {
  .bz-stay, .bz-venue { transition:none; }
  .bz-stay:hover, .bz-venue:hover, .bz-stay:active, .bz-venue:active { transform:none; }
}
/* in a horizontal rail the cards must not stretch; in a grid they fill the column */
.dest-scroller > .bz-stay, .dest-scroller > .bz-venue,
.hotels-grid--rail > .bz-stay, .hotels-grid--rail > .bz-venue { width:170px; flex:0 0 auto; }

.hotels-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.hotel-card { width:100%; height:auto; aspect-ratio:5 / 6; }
.hotel-card[hidden] { display:none; }
.hotel-card .dest-card__title { font-size:14.5px; line-height:1.2; }
.pop-card { width:100%; height:auto; aspect-ratio:5 / 6; }
.hotels-none { padding:32px 4px; text-align:center; color:#8b938f; font-size:14.5px; }

/* ===================================================================
 * Hotels page: the "see on map" pill and the card type badge.
 * The old type/area chip scrollers, search field and sort bar were
 * replaced by the .hts-* concierge bar and filter sheet.
 * =================================================================== */
/* outlined pill, teal stroke and teal content, parked on the right of the hero.
   The hero becomes a flex column purely so align-self can push this to the end;
   align-items:flex-start keeps the eyebrow, title and sub at their natural left. */
.hotels-hero { display:flex; flex-direction:column; align-items:flex-start; }
.hotels-map { align-self:flex-end; display:inline-flex; align-items:center; gap:8px; margin-top:12px; padding:9px 15px; border-radius:9999px;
  background:transparent; border:1.5px solid var(--teal); color:var(--teal); font-size:13.5px; font-weight:600; text-decoration:none;
  transition:background .15s ease; }
.hotels-map i, .hotels-map svg { color:var(--teal); }
.hotels-map__go { margin-left:2px; opacity:.85; }
.hotels-map:active { background:var(--teal-surface); }
@media (hover: hover) { .hotels-map:hover { background:var(--teal-surface); } }
@media (prefers-reduced-motion: reduce) { .hotels-map { transition:none; } }



.hotel-card__type { position:absolute; top:10px; left:10px; z-index:2; padding:4px 9px; border-radius:9999px;
  background:var(--glass-dark-strong); color:#fff; font-size:10.5px; font-weight:700; letter-spacing:.03em; text-transform:uppercase;
  backdrop-filter:var(--glass-dark-blur); -webkit-backdrop-filter:var(--glass-dark-blur); }

/* map: "return to list" pill when opened from a browse page */
.map-return { position:fixed; left:var(--gutter-l); bottom:calc(96px + env(safe-area-inset-bottom)); z-index:1001;
  display:inline-flex; align-items:center; gap:7px; padding:10px 15px 10px 12px; border-radius:9999px; background:var(--glass-panel-bg); backdrop-filter:var(--glass-panel-blur); -webkit-backdrop-filter:var(--glass-panel-blur);
  color:var(--ink); font-size:13.5px; font-weight:600; text-decoration:none; box-shadow:var(--shadow-nav); border:1px solid var(--glass-panel-border);}
.map-return i, .map-return svg { color:var(--teal); }
.map-return:active { background:var(--app-bg); }

/* ============================================================================
   Immersive category page — /explore/{category} (.bx-*)
   Fixed full-bleed hero photo behind a glassmorphism sheet that scrolls over it.
   ========================================================================== */
.app__main--explore { padding:0; position:relative; background:#0c1a1d; }

/* --- still full-screen hero backdrop --- */
.bx-hero {
  position:fixed; top:0; left:50%; transform:translateX(-50%);
  width:100%; max-width:var(--app-max); height:100vh; height:100dvh; z-index:0; overflow:hidden;
  background:#0c1a1d;
}
.bx-hero__img {
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; transform:scale(1.02); will-change:transform;
}
/* progressive blur veil — opacity driven by scroll via --veil (explore-beach.js) */
.bx-hero__veil {
  position:absolute; inset:0; pointer-events:none; opacity:var(--veil, 0);
  backdrop-filter:blur(14px) saturate(120%); -webkit-backdrop-filter:blur(14px) saturate(120%);
  background:rgba(10,24,26,0.28); will-change:opacity;
}
.bx-hero__overlay {
  position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(8,20,22,0.5) 0%, rgba(8,20,22,0.12) 30%, rgba(8,20,22,0.08) 55%, rgba(8,18,20,0.45) 100%);
}
.bx-hero__grad {
  position:absolute; inset:0; pointer-events:none; z-index:1;
  backdrop-filter:blur(16px) saturate(130%); -webkit-backdrop-filter:blur(16px) saturate(130%);
  /* blur only the lower third, where the title sits; fade it out upward so the
     photo stays crisp at the top. One fixed full-screen layer, never on cards. */
  -webkit-mask-image:linear-gradient(to bottom, transparent 46%, #000 88%);
  mask-image:linear-gradient(to bottom, transparent 46%, #000 88%);
  will-change:opacity;
}

/* --- floating content flow (everything glassy, directly on the wallpaper) --- */
.bx-flow {
  position:relative; z-index:2;
  padding:calc(16px + env(safe-area-inset-top)) var(--gutter) calc(120px + env(safe-area-inset-bottom));
  color:#fff;
}
/* Fixed, not sticky: the immersive page scrolls at the document level while
   .app__main--explore is an overflow ancestor, so a sticky bx-top would pin to
   that non-scrolling box and drift off. Mirror .bx-hero's fixed column geometry
   so the controls stay put over the wallpaper. The row is click-through; only
   the buttons take pointer events. */
.bx-top { position:fixed; top:calc(16px + env(safe-area-inset-top)); left:50%; transform:translateX(-50%);
  width:100%; max-width:var(--app-max); padding:0 var(--gutter); z-index:6;
  display:flex; justify-content:space-between; pointer-events:none; }
.bx-top > *, .bx-top .bx-round { pointer-events:auto; }
/* the title/content must clear the now-fixed controls */
.bx-flow { padding-top:calc(74px + env(safe-area-inset-top)); }
.bx-round {
  /* Light glass (asks: normal, not dark). Because it floats over photography, the
     icon is ink and the disc carries a soft ring + shadow so it stays legible over
     a bright sky as well as a dark rock. */
  width:42px; height:42px; border-radius:9999px; display:inline-flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,0.42); backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur);
  border:1px solid rgba(255,255,255,0.55); color:var(--ink); text-decoration:none;
  box-shadow:0 4px 14px -4px rgba(8,20,22,0.45), inset 0 1px 0 rgba(255,255,255,0.6);
  transition:background .16s ease, transform .16s ease;
}
.bx-round:active { background:rgba(255,255,255,0.62); transform:scale(0.94); }

.bx-head { margin-bottom:18px; }
.bx-head__eyebrow {
  display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:600; letter-spacing:.05em; text-transform:uppercase;
  color:#eafaf9; padding:5px 11px; border-radius:9999px; background:var(--glass-dark-bg);
  backdrop-filter:var(--glass-dark-blur); -webkit-backdrop-filter:var(--glass-dark-blur); border:1px solid var(--glass-dark-border);
}
.bx-head__title { font-size:38px; line-height:1.02; font-weight:600; letter-spacing:-0.02em; margin:12px 0 6px; text-shadow:0 2px 22px rgba(0,0,0,0.4); }
.bx-head__sub { font-size:14px; line-height:1.45; color:rgba(255,255,255,0.92); max-width:34ch; text-shadow:0 1px 12px rgba(0,0,0,0.38); }

/* shared dark-glass surface */
.bx-glass {
  background:var(--glass-dark-bg); backdrop-filter:var(--glass-dark-blur); -webkit-backdrop-filter:var(--glass-dark-blur);
  border:1px solid var(--glass-dark-border); border-radius:20px;
  box-shadow:0 14px 34px -20px rgba(4,12,14,0.7);
}

/* --- compact sticky filter capsule (dark glass, floats on the wallpaper) --- */
.bx-capsule-wrap { position:sticky; top:calc(10px + env(safe-area-inset-top)); z-index:5; margin-bottom:10px; }
.bx-capsule {
  display:flex; align-items:center; gap:8px; padding:6px; border-radius:9999px;
  background:rgba(255,255,255,0.5); backdrop-filter:blur(22px) saturate(160%); -webkit-backdrop-filter:blur(22px) saturate(160%);
  border:1px solid rgba(255,255,255,0.65); box-shadow:0 12px 30px -16px rgba(4,12,14,0.45);
}
/* morphing search: a circle that expands into an input */
.bx-cap-search {
  display:flex; align-items:center; gap:6px; height:38px; width:38px; padding:0 10px; border:0; border-radius:9999px;
  background:rgba(20,123,130,0.12); color:var(--teal); cursor:pointer; overflow:hidden; flex:none;
  transition:width .38s cubic-bezier(.2,.8,.25,1), background .2s ease;
}
.bx-cap-search i, .bx-cap-search svg { flex:none; }
.bx-cap-search input {
  flex:1; min-width:0; width:0; background:none; border:0; outline:none;
  color:var(--ink); font-family:inherit; font-size:14px; opacity:0; transition:opacity .25s ease .1s;
}
.bx-cap-search input::placeholder { color:rgba(26,26,26,0.5); }
.bx-cap-search.is-open { width:100%; flex:1; background:rgba(20,123,130,0.09); cursor:text; }
.bx-cap-search.is-open input { opacity:1; }
.bx-cap-clear { display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; flex:none;
  border-radius:9999px; background:rgba(20,123,130,0.18); color:var(--teal); }
.bx-cap-clear[hidden] { display:none; }
/* capsule collapses the seg/vibes/count when search is open */
.bx-capsule.is-searching .bx-seg, .bx-capsule.is-searching .bx-cap-vibes, .bx-capsule.is-searching .bx-cap-count { display:none; }

/* capsule title (when the category has no area facet) */
.bx-cap-title { flex:1; text-align:center; font-size:13.5px; font-weight:600; color:var(--ink); }

/* coast segmented control with gliding thumb */
.bx-seg { position:relative; display:flex; flex:1; height:38px; border-radius:9999px; background:rgba(16,50,54,0.1); padding:3px; }
.bx-seg__thumb {
  position:absolute; top:3px; left:3px; height:32px; width:0; border-radius:9999px; background:var(--teal);
  box-shadow:0 4px 14px -4px rgba(20,123,130,0.7); will-change:transform,width;
  transition:transform .38s cubic-bezier(.2,.8,.25,1), width .38s cubic-bezier(.2,.8,.25,1);
}
.bx-seg__opt {
  position:relative; z-index:1; flex:1; border:0; background:none; border-radius:9999px; cursor:pointer;
  font-family:inherit; font-size:13px; font-weight:600; color:var(--ink); padding:0 6px;
  transition:color .25s ease;
}
.bx-seg__opt.is-active { color:#fff; }

/* vibes trigger + fold-out */
.bx-cap-vibes {
  position:relative; width:38px; height:38px; flex:none; border:0; border-radius:9999px; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
  background:rgba(16,50,54,0.1); color:var(--ink); transition:background .2s ease, color .2s ease;
}
.bx-cap-vibes[aria-expanded="true"], .bx-cap-vibes.has-active { background:var(--teal); color:#fff; }
.bx-cap-vibes__dot { position:absolute; top:6px; right:6px; width:8px; height:8px; border-radius:9999px; background:#ffd66b; border:1.5px solid #fff; }
.bx-cap-vibes__dot[hidden] { display:none; }

.bx-cap-count { flex:none; min-width:30px; text-align:center; font-size:13.5px; font-weight:700; color:var(--teal); padding-right:4px; }
.bx-cap-count.is-tick { animation:bxtick .3s cubic-bezier(.2,.8,.25,1); }
@keyframes bxtick { 0%{transform:scale(1)} 40%{transform:scale(1.28)} 100%{transform:scale(1)} }

.bx-vibes { overflow:hidden; }
.bx-vibes[hidden] { display:none; }
.bx-vibes__row { display:flex; gap:8px; overflow-x:auto; padding:10px 2px 2px; }

.bx-h2 { display:flex; align-items:center; gap:8px; font-size:16px; font-weight:600; color:#fff; margin:38px 0 14px;
  text-shadow:0 1px 14px rgba(0,0,0,0.4); }
.bx-h2 i, .bx-h2 svg { color:#8fe0da; }
.bx-h2--flush { margin-top:0; }

/* filter chips (used inside the vibes fold-out) — glassy */
.bx-chip {
  flex:none; display:inline-flex; align-items:center; gap:7px; padding:9px 15px; border-radius:9999px;
  background:rgba(10,26,28,0.4); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,0.2); color:#fff; font-size:13.5px; font-weight:600; cursor:pointer;
  transition:background .16s ease, color .16s ease, border-color .16s ease, transform .12s ease;
}
.bx-chip--sm { padding:7px 13px; font-size:12.5px; font-weight:500; }
.bx-chip__n { font-size:11.5px; font-weight:700; color:#8fe0da; }
.bx-chip.is-active { background:var(--teal); color:#fff; border-color:var(--teal); }
.bx-chip.is-active .bx-chip__n { color:rgba(255,255,255,0.85); }
.bx-chip:active { transform:scale(0.95); }

/* featured shores: light-frost module, one-beach-per-view snap carousel */
.bx-featwrap {
  margin-top:24px; padding:16px 12px 12px; border-radius:26px;
  background:rgba(255,255,255,0.5); backdrop-filter:blur(22px) saturate(160%); -webkit-backdrop-filter:blur(22px) saturate(160%);
  border:1px solid rgba(255,255,255,0.65); box-shadow:0 14px 34px -20px rgba(4,12,14,0.45);
}
.bx-featwrap .bx-h2 { padding:0 4px; margin-bottom:12px; }
.bx-featwrap[hidden] { display:none; }
.bx-h2--ink { color:var(--ink); text-shadow:none; }
.bx-h2--ink i, .bx-h2--ink svg { color:var(--teal); }

/* featured carousel: one full card per view, buttery snap */
.bx-features {
  display:flex; gap:12px; overflow-x:auto; scroll-snap-type:x mandatory;
  scroll-behavior:smooth; -webkit-overflow-scrolling:touch; border-radius:24px;
}
.bx-feature {
  position:relative; display:block; flex:0 0 100%; scroll-snap-align:center;
  border-radius:24px; overflow:hidden; aspect-ratio:4/5;
  box-shadow:0 14px 30px -16px rgba(8,20,22,0.5); text-decoration:none; isolation:isolate;
  transition:transform .18s ease, box-shadow .18s ease;
}

/* carousel dots */
.bx-dots { display:flex; justify-content:center; gap:6px; padding:11px 0 3px; }
.bx-dots:empty { display:none; }
.bx-dot {
  width:6px; height:6px; border-radius:9999px; border:0; padding:0; cursor:pointer;
  background:rgba(16,50,54,0.25); transition:width .3s cubic-bezier(.2,.8,.25,1), background .3s ease;
}
.bx-dot.is-active { width:18px; background:var(--teal); }
.bx-feature:active { transform:scale(0.985); }
.bx-feature__img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.bx-feature__scrim { position:absolute; inset:0; background:linear-gradient(0deg, rgba(6,16,18,0.88) 2%, rgba(6,16,18,0.42) 45%, rgba(6,16,18,0.04) 72%); }
.bx-feature__cap { position:absolute; left:0; right:0; bottom:0; padding:16px 16px 15px; color:#fff; display:flex; flex-direction:column; gap:5px; }
.bx-feature__coast { display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:600; color:#cfeee9; }
.bx-feature__name { font-size:22px; font-weight:700; letter-spacing:-0.01em; line-height:1.08; }
.bx-feature__blurb { font-size:13px; line-height:1.4; color:rgba(255,255,255,0.85); }
.bx-tags { display:flex; flex-wrap:wrap; gap:6px; margin-top:4px; }
.bx-tag {
  font-size:11px; font-weight:600; color:#fff; padding:4px 9px; border-radius:9999px;
  background:rgba(255,255,255,0.16); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); border:1px solid rgba(255,255,255,0.24);
}

/* rating badge */
.bx-badge {
  position:absolute; top:12px; right:12px; z-index:2; display:inline-flex; align-items:center; gap:4px;
  font-size:12.5px; font-weight:700; color:#fff; padding:5px 9px; border-radius:9999px;
  background:rgba(10,22,24,0.5); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,0.22);
}
.bx-badge i, .bx-badge svg { color:#ffd66b; }
.bx-badge--sm { top:9px; right:9px; font-size:11.5px; padding:4px 8px; }

/* all-beaches grid */
.bx-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.bx-card {
  position:relative; display:block; border-radius:18px; overflow:hidden; aspect-ratio:4/5;
  box-shadow:0 10px 22px -14px rgba(8,20,22,0.45); text-decoration:none;
  transition:transform .18s ease;
}
.bx-card:active { transform:scale(0.97); }
.bx-card__img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.bx-card__scrim { position:absolute; inset:0; background:linear-gradient(0deg, rgba(6,16,18,0.8) 4%, rgba(6,16,18,0.12) 46%, rgba(6,16,18,0) 66%); }
.bx-card__cap { position:absolute; left:0; right:0; bottom:0; padding:11px 12px 12px; color:#fff; }
.bx-card__name { display:block; font-size:14.5px; font-weight:700; line-height:1.12; }
.bx-card__coast { display:block; font-size:11.5px; font-weight:500; color:rgba(255,255,255,0.82); margin-top:2px; }
.bx-tags--sm { margin-top:6px; }
.bx-tags--sm .bx-tag { font-size:10px; padding:3px 7px; }

.bx-none { text-align:center; color:rgba(255,255,255,0.85); font-size:14px; padding:26px 0; text-shadow:0 1px 10px rgba(0,0,0,0.4); }
.bx-none[hidden] { display:none; }

/* season planner cards */
.bx-seasons { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.bx-season { padding:14px 15px; }
.bx-season__months { display:block; font-size:17px; font-weight:700; color:#8fe0da; letter-spacing:-0.01em; }
.bx-season__coast { display:block; font-size:12.5px; font-weight:600; color:#fff; margin:3px 0 6px; }
.bx-season__text { font-size:12px; line-height:1.5; color:rgba(255,255,255,0.8); margin:0; }
.bx-note { font-size:12px; line-height:1.5; color:rgba(255,255,255,0.75); margin:10px 2px 0; text-shadow:0 1px 8px rgba(0,0,0,0.35); }

/* coast-by-coast region cards */
.bx-regions { display:flex; flex-direction:column; gap:10px; }
.bx-region { display:flex; gap:12px; padding:14px 15px; }
.bx-region__ic {
  flex:none; width:38px; height:38px; border-radius:12px; display:inline-flex; align-items:center; justify-content:center;
  background:rgba(143,224,218,0.14); color:#8fe0da;
}
.bx-region__name { display:block; font-size:14.5px; font-weight:600; color:#fff; }
.bx-region__text { font-size:12.5px; line-height:1.5; color:rgba(255,255,255,0.8); margin:4px 0 8px; }

/* surf ladder */
.bx-surf { padding:8px 15px 13px; }
.bx-surf__row { display:flex; align-items:baseline; gap:10px; padding:9px 0; border-bottom:1px solid rgba(255,255,255,0.1); }
.bx-surf__row:last-of-type { border-bottom:0; }
.bx-surf__spot { flex:1; font-size:13.5px; font-weight:600; color:#fff; }
.bx-surf__level { font-size:12px; color:rgba(255,255,255,0.75); }
.bx-surf__season { font-size:11.5px; font-weight:700; color:#8fe0da; }
.bx-surf__note { font-size:12px; line-height:1.5; color:rgba(255,255,255,0.72); margin:9px 0 0; padding-top:10px; border-top:1px solid rgba(255,255,255,0.1); }

/* experiences rail */
.bx-exps { display:flex; gap:10px; overflow-x:auto; margin:0 calc(-1 * var(--gutter)); padding:2px var(--gutter) 6px;
  scroll-snap-type:x mandatory; scroll-padding-inline:var(--gutter); -webkit-overflow-scrolling:touch; }
.bx-exp { flex:none; width:132px; padding:13px 13px 12px; display:flex; flex-direction:column; gap:6px; scroll-snap-align:start; }
.bx-exp__ic {
  width:36px; height:36px; border-radius:11px; display:inline-flex; align-items:center; justify-content:center;
  background:rgba(143,224,218,0.14); color:#8fe0da;
}
.bx-exp__name { font-size:13px; font-weight:600; color:#fff; line-height:1.15; }
.bx-exp__where { font-size:11px; color:rgba(255,255,255,0.72); line-height:1.35; }

/* know-before-you-go (dark glass) */
.bx-know { padding:14px 15px 4px; }
.bx-know__row { display:flex; gap:12px; padding:0 0 13px; }
.bx-know__ic {
  flex:none; width:34px; height:34px; border-radius:10px; display:inline-flex; align-items:center; justify-content:center;
  background:rgba(143,224,218,0.14); color:#8fe0da;
}
.bx-know__txt { font-size:12.5px; line-height:1.5; color:rgba(255,255,255,0.85); }
.bx-know__txt b { font-weight:700; color:#fff; }

/* live knowledge sync: items dim when they don't match the active filters */
.bx-live { transition:opacity .35s ease, filter .35s ease; }
.bx-live.is-dim { opacity:0.38; filter:saturate(0.6); }

/* full-guide link card */
.bx-guide { display:flex; align-items:center; gap:12px; margin-top:12px; padding:14px 15px; text-decoration:none; }
.bx-guide__ic {
  flex:none; width:38px; height:38px; border-radius:12px; display:inline-flex; align-items:center; justify-content:center;
  background:rgba(143,224,218,0.14); color:#8fe0da;
}
.bx-guide__title { display:block; font-size:14px; font-weight:600; color:#fff; }
.bx-guide__sub { display:block; font-size:11.5px; color:rgba(255,255,255,0.72); margin-top:2px; }
.bx-guide__go { margin-left:auto; color:#8fe0da; flex:none; }
.bx-guide:active { background:rgba(10,26,28,0.55); }

/* map link pill */
.bx-maplink {
  display:flex; align-items:center; gap:9px; margin-top:18px; padding:14px 16px; border-radius:15px;
  background:var(--teal); color:#fff; font-size:14.5px; font-weight:600; text-decoration:none;
  box-shadow:0 12px 24px -14px rgba(20,123,130,0.7);
}
.bx-maplink__go { margin-left:auto; }
.bx-maplink:active { background:var(--teal-press); }

/* small-viewport trims */
/* (359px block absorbed into the adaptive tiers at the end of this file) */

/* ============================================================================
   Immersive place detail — /place/{slug} (.pd-*)
   Full-screen photo backdrop + white type + glass cards (shares .bx-* system).
   ========================================================================== */
.pd-air { height:34vh; height:34dvh; }             /* let the photo breathe before the title */

/* no-photo fallback: a calm branded gradient instead of a stretched placeholder */
.bx-hero--plain {
  background:
    radial-gradient(120% 90% at 85% 0%, rgba(38,150,158,0.55) 0%, rgba(16,74,80,0) 60%),
    radial-gradient(130% 100% at 10% 100%, rgba(21,104,110,0.6) 0%, rgba(10,36,40,0) 65%),
    linear-gradient(180deg, #0f3a40 0%, #0b272c 100%);
}
.pd-flow { padding-bottom:calc(150px + env(safe-area-inset-bottom)); } /* clear the action bar */

.pd-head { margin-bottom:14px; }
.pd-title { font-size:34px; line-height:1.05; font-weight:600; letter-spacing:-0.02em; margin:12px 0 8px; color:#fff;
  text-shadow:0 2px 22px rgba(0,0,0,0.45); }
.pd-meta { display:flex; align-items:center; gap:14px; }
.pd-meta__loc { display:inline-flex; align-items:center; gap:5px; font-size:13.5px; font-weight:500; color:rgba(255,255,255,0.92);
  text-shadow:0 1px 10px rgba(0,0,0,0.4); }
.pd-meta__rating { display:inline-flex; align-items:center; gap:5px; font-size:13px; font-weight:700; color:#fff;
  padding:5px 10px; border-radius:9999px; background:rgba(10,26,28,0.42); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,0.2); }
.pd-meta__rating i, .pd-meta__rating svg { color:#ffd66b; }

/* quick-fact chips */
.pd-facts { display:flex; gap:8px; overflow-x:auto; margin:0 calc(-1 * var(--gutter)) 6px; padding:2px var(--gutter); }
.pd-fact {
  flex:none; display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:600; color:#fff;
  padding:8px 13px; border-radius:9999px; background:rgba(10,26,28,0.4); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,0.18);
}
.pd-fact i, .pd-fact svg { color:#8fe0da; }
.pd-fact--open { border-color:rgba(72,199,142,0.55); } .pd-fact--open i, .pd-fact--open svg { color:#54d894; }
.pd-fact--closed { border-color:rgba(224,109,109,0.55); } .pd-fact--closed i, .pd-fact--closed svg { color:#f08c8c; }

.pd-desc { font-size:14px; line-height:1.65; color:rgba(255,255,255,0.92); margin:12px 0 12px;
  text-shadow:0 1px 10px rgba(0,0,0,0.35); }
.pd-note { display:flex; gap:11px; padding:13px 14px; align-items:flex-start; }
.pd-note__ic { flex:none; width:32px; height:32px; border-radius:10px; display:inline-flex; align-items:center; justify-content:center;
  background:rgba(255,214,107,0.16); color:#ffd66b; }
.pd-note__text { font-size:12.5px; line-height:1.5; color:rgba(255,255,255,0.85); margin:0; }

/* practical info rows */
.pd-info { padding:6px 15px; }
.pd-info__row { display:flex; align-items:baseline; gap:10px; padding:11px 0; border-bottom:1px solid rgba(255,255,255,0.1); }
.pd-info__row:last-child { border-bottom:0; }
.pd-info__ic { align-self:center; flex:none; width:30px; height:30px; border-radius:9px; display:inline-flex; align-items:center; justify-content:center;
  background:rgba(143,224,218,0.14); color:#8fe0da; }
.pd-info__label { flex:none; width:88px; font-size:12.5px; font-weight:600; color:rgba(255,255,255,0.65); }
.pd-info__value { flex:1; font-size:13px; line-height:1.45; color:#fff; }

/* photo rail */
.pd-photos { display:flex; gap:10px; overflow-x:auto; margin:0 calc(-1 * var(--gutter)); padding:2px var(--gutter) 6px;
  scroll-snap-type:x mandatory; scroll-padding-inline:var(--gutter); -webkit-overflow-scrolling:touch; }
.pd-photos__img { flex:none; width:190px; aspect-ratio:4/3; object-fit:cover; border-radius:16px; cursor:zoom-in; scroll-snap-align:start;
  border:1px solid rgba(255,255,255,0.2); box-shadow:0 10px 22px -14px rgba(4,12,14,0.6); }

/* day plan */
.pd-day { padding:14px 15px; }
.pd-day__sub { font-size:12px; color:rgba(255,255,255,0.72); margin:0 0 10px; }
.pd-day__list { list-style:none; margin:0; padding:0; }
.pd-day__stop { display:flex; align-items:center; gap:11px; padding:8px 0; }
.pd-day__num { flex:none; width:24px; height:24px; border-radius:9999px; display:inline-flex; align-items:center; justify-content:center;
  background:rgba(143,224,218,0.16); color:#8fe0da; font-size:12px; font-weight:700; }
.pd-day__name { flex:1; font-size:13.5px; font-weight:600; color:#fff; text-decoration:none; }
.pd-day__here { font-size:10.5px; font-weight:700; letter-spacing:.03em; text-transform:uppercase; color:#8fe0da; }
.pd-day__dist { font-size:12px; color:rgba(255,255,255,0.6); }
.pd-day__cta {
  display:flex; align-items:center; justify-content:center; gap:8px; width:100%; margin-top:10px; padding:12px;
  border:0; border-radius:13px; background:var(--teal); color:#fff; font-family:inherit; font-size:13.5px; font-weight:600; cursor:pointer;
  box-shadow:0 10px 20px -12px rgba(20,123,130,0.8);
}
.pd-day__cta:active { background:var(--teal-press); }
.pd-day__note { font-size:11px; line-height:1.45; color:rgba(255,255,255,0.55); margin:9px 0 0; }

.pd-directions { margin-top:20px; }
.pd-rail { padding-top:2px; }

/* related reads */
.pd-reads { display:flex; flex-direction:column; gap:10px; }
.pd-read { display:flex; align-items:center; gap:12px; padding:13px 15px; text-decoration:none; color:#fff; }
.pd-read__body { flex:1; min-width:0; }
.pd-read > i, .pd-read > svg { color:#8fe0da; flex:none; margin-left:auto; }
.pd-read__title { display:block; font-size:13.5px; font-weight:600; color:#fff; }
.pd-read__sum { display:block; font-size:11.5px; line-height:1.4; color:rgba(255,255,255,0.7); margin-top:2px; }

/* verified stamp */
.pd-stamp { display:flex; align-items:center; gap:7px; margin-top:18px; font-size:12px; color:rgba(255,255,255,0.75);
  text-shadow:0 1px 8px rgba(0,0,0,0.35); }
.pd-stamp i, .pd-stamp svg { color:#8fe0da; }
.pd-stamp--partial i, .pd-stamp--partial svg { color:#ffd66b; }
.pd-stamp__source { color:#8fe0da; font-weight:600; text-decoration:none; margin-left:auto; }

/* --- paper section: the page fades from the photo into a clean white ground --- */
.pd-paper {
  margin:34px calc(-1 * var(--gutter)) calc(-1 * (150px + env(safe-area-inset-bottom)));
  padding:64px var(--gutter) calc(150px + env(safe-area-inset-bottom));
  background:linear-gradient(180deg, rgba(246,247,247,0) 0%, rgba(246,247,247,0.9) 56px, #f6f7f7 110px);
}
/* light-ground restyles for everything inside the paper */
.pd-paper .bx-h2 { color:var(--ink); text-shadow:none; }
.pd-paper .bx-h2 i, .pd-paper .bx-h2 svg { color:var(--teal); }
.pd-paper .bx-glass {
  background:#fff; border:1px solid var(--hairline); box-shadow:0 10px 26px -18px rgba(28,26,24,0.25);
  backdrop-filter:none; -webkit-backdrop-filter:none;
}
.pd-paper .pd-day__sub { color:#6b7b7b; }
.pd-paper .pd-day__num { background:var(--teal-surface); color:var(--teal); }
.pd-paper .pd-day__name { color:var(--ink); }
.pd-paper .pd-day__here { color:var(--teal); }
.pd-paper .pd-day__dist { color:#8a9797; }
.pd-paper .pd-day__note { color:#8a9797; }
.pd-paper .bx-guide__ic { background:var(--teal-surface); color:var(--teal); }
.pd-paper .bx-guide__title { color:var(--ink); }
.pd-paper .bx-guide__sub { color:#6b7b7b; }
.pd-paper .bx-guide__go { color:var(--teal); }
.pd-paper .pd-read { color:var(--ink); }
.pd-paper .pd-read i, .pd-paper .pd-read svg { color:var(--teal); }
.pd-paper .pd-read__title { color:var(--ink); }
.pd-paper .pd-read__sum { color:#6b7b7b; }
.pd-paper .pd-stamp { color:#6b7b7b; text-shadow:none; }
.pd-paper .pd-stamp i, .pd-paper .pd-stamp svg { color:var(--teal); }
.pd-paper .pd-stamp--partial i, .pd-paper .pd-stamp--partial svg { color:#c99b2e; }
.pd-paper .pd-stamp__source { color:var(--teal); }
/* stronger scrim on image cards so their captions always read (owner ask) */
.pd-rail .dest-card__scrim { background:linear-gradient(0deg, rgba(10,16,17,0.85) 6%, rgba(10,16,17,0.3) 48%, rgba(10,16,17,0.08) 100%); }

/* --- floating actions: save + add-to-trip stacked above the assistant FAB --- */
.pd-actions {
  position:fixed; right:var(--gutter-r); bottom:calc(108px + env(safe-area-inset-bottom)); z-index:41;
  display:flex; flex-direction:column; gap:10px;
}
.pd-actions__btn {
  width:52px; height:52px; border-radius:9999px; border:1px solid rgba(255,255,255,0.6); cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,0.78); backdrop-filter:blur(16px) saturate(150%); -webkit-backdrop-filter:blur(16px) saturate(150%);
  color:var(--teal); box-shadow:0 10px 24px -12px rgba(8,20,22,0.5);
  transition:transform .16s ease, background .16s ease;
}
.pd-actions__btn:active { transform:scale(0.92); }
.pd-actions__btn.is-saved { background:var(--teal); color:#fff; border-color:var(--teal); }
.pd-actions__btn--primary { background:var(--teal); color:#fff; border-color:rgba(255,255,255,0.35); }
.pd-actions__btn--primary:active { background:var(--teal-press); }

/* ============================================================================
   Airport guide — /airport (.ap-*), shares the immersive bx-/pd- glass system
   ========================================================================== */
.ap-steps { padding:22px 18px 20px; }
.ap-step { display:flex; gap:16px; padding:16px 0; position:relative; }
.ap-step::before { content:''; position:absolute; left:14px; top:36px; bottom:-16px; width:1px; background:rgba(255,255,255,0.14); }
.ap-step:last-of-type::before { display:none; }
.ap-step:last-of-type { padding-bottom:2px; }
.ap-step__num { flex:none; width:29px; height:29px; border-radius:9999px; display:inline-flex; align-items:center; justify-content:center;
  background:rgba(143,224,218,0.16); border:1px solid rgba(143,224,218,0.3); color:#8fe0da; font-size:12.5px; font-weight:700; margin-top:1px; z-index:1;
  position:relative; }
.ap-step__t { display:block; font-size:14px; font-weight:600; color:#fff; }
.ap-step__d { font-size:12.5px; line-height:1.6; color:rgba(255,255,255,0.78); margin:5px 0 0; max-width:46ch; }

.ap-cards { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.ap-card { padding:19px 17px 18px; position:relative; }
.ap-card[data-card] { cursor:pointer; transition:background .15s ease; }
.ap-card[data-card]:active { background:rgba(255,255,255,0.06); }
.ap-card__ic { display:inline-flex; align-items:center; justify-content:center; width:42px; height:42px; border-radius:13px;
  background:rgba(143,224,218,0.14); color:#8fe0da; margin-bottom:12px; }
.ap-card:nth-of-type(3n+2) .ap-card__ic { background:rgba(255,214,107,0.14); color:#ffd66b; }
.ap-card:nth-of-type(3n+3) .ap-card__ic { background:rgba(133,180,255,0.14); color:#85b4ff; }
.ap-card__t { display:block; font-size:13.5px; font-weight:600; color:#fff; line-height:1.25; padding-right:16px; }
.ap-card__d { font-size:12px; line-height:1.55; color:rgba(255,255,255,0.75); margin:6px 0 0; }
.ap-card__more { position:absolute; right:14px; bottom:16px; color:rgba(255,255,255,0.35); }

/* service/transport detail popup (centred modal, opened from an .ap-card) */
.svc-pop-host { position:fixed; inset:0; z-index:95; display:flex; align-items:center; justify-content:center;
  padding:calc(20px + env(safe-area-inset-top)) 20px calc(20px + env(safe-area-inset-bottom)); }
.svc-pop-host[hidden] { display:none; }
.svc-pop__scrim { position:absolute; inset:0; background:rgba(6,14,16,0.55);
  backdrop-filter:blur(5px); -webkit-backdrop-filter:blur(5px); animation:svcfade .2s ease; }
.svc-pop { position:relative; z-index:1; width:100%; max-width:380px; max-height:100%; overflow-y:auto;
  background:#fff; border-radius:24px; padding:28px 24px 26px; -webkit-overflow-scrolling:touch;
  box-shadow:0 30px 80px -24px rgba(4,12,14,0.65); animation:svcpop .3s cubic-bezier(.2,.85,.3,1); }
@keyframes svcfade { from { opacity:0; } to { opacity:1; } }
@keyframes svcpop { from { opacity:0; transform:translateY(14px) scale(.96); } to { opacity:1; transform:none; } }
.svc-pop__x { position:absolute; top:16px; right:16px; width:34px; height:34px; border-radius:9999px; border:none;
  background:var(--app-bg); color:#5c6664; display:flex; align-items:center; justify-content:center; cursor:pointer;
  transition:background .15s ease; }
.svc-pop__x:hover { background:var(--hairline); }
.svc-pop__icon { display:inline-flex; align-items:center; justify-content:center; width:54px; height:54px; border-radius:17px; margin-bottom:18px; }
.svc-pop__title { margin:0 0 12px; font-size:21px; font-weight:600; letter-spacing:-0.01em; color:var(--ink); line-height:1.2; padding-right:28px; }
.svc-pop__body { margin:0 0 22px; font-size:14.5px; line-height:1.68; color:#5c6664; }
.svc-pop__facts { margin:0 0 22px; border-top:1px solid var(--hairline-2); }
.svc-pop__fact { display:flex; align-items:flex-start; gap:12px; padding:14px 0; border-bottom:1px solid var(--hairline-2); }
.svc-pop__fact-ic { flex:none; width:28px; height:28px; border-radius:9px; display:inline-flex; align-items:center; justify-content:center;
  background:var(--teal-surface); color:var(--teal); margin-top:1px; }
.svc-pop__fact-k { flex:none; width:78px; font-size:12.5px; font-weight:600; color:var(--ink); padding-top:5px; }
.svc-pop__fact-v { flex:1; min-width:0; font-size:13px; line-height:1.55; color:#5c6664; padding-top:4px; }
.svc-pop__apps-h { font-size:11px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:#9aa3a1; margin:0 0 11px; }
.svc-pop__apps { display:flex; flex-wrap:wrap; gap:9px; margin-bottom:22px; }
.svc-pop__app { display:inline-flex; align-items:center; gap:8px; padding:9px 13px 9px 10px; border-radius:13px;
  border:1px solid var(--hairline); background:#fff; text-decoration:none; color:var(--ink); font-size:13px; font-weight:600;
  transition:border-color .15s ease, background .15s ease; }
.svc-pop__app:hover { border-color:var(--teal); background:var(--teal-surface); }
.svc-pop__app-logo { width:22px; height:22px; border-radius:6px; object-fit:contain; background:#fff; }
.svc-pop__app i, .svc-pop__app svg { color:#9aa3a1; }
.svc-pop__src { display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:600; color:var(--teal); text-decoration:none; }
.svc-pop__src:hover { text-decoration:underline; }

.ap-rates { padding:6px 18px; }
.ap-rate { display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; column-gap:14px; row-gap:4px;
  padding:15px 0; border-bottom:1px solid rgba(255,255,255,0.1); }
.ap-rate:last-of-type { border-bottom:0; }
.ap-rate__t { flex:1 1 auto; min-width:120px; font-size:13.5px; font-weight:600; color:#fff; }
.ap-rate__v { flex:0 1 auto; font-size:13px; color:rgba(255,255,255,0.8); text-align:right; }
.ap-rate__v--tel { color:#8fe0da; font-weight:700; text-decoration:none; }

/* airport page: breathe — generous section rhythm, roomy rows */
[data-el="airport"] .bx-head { margin-bottom:26px; }
[data-el="airport"] .pd-note { margin-top:14px; padding:17px 18px; }
[data-el="airport"] .pd-reads { gap:14px; }
[data-el="airport"] .pd-read { padding:16px 18px; }

.ap-link { color:#8fe0da; font-weight:600; text-decoration:none; }
.ap-link--row { display:block; padding:10px 0 2px; font-size:13px; border-top:1px solid rgba(255,255,255,0.1); margin-top:6px; }
.ap-stamp { display:flex; align-items:center; gap:5px; padding:10px 0 4px; font-size:10.5px; letter-spacing:.02em;
  color:rgba(255,255,255,0.5); }
.ap-stamp i, .ap-stamp svg { color:#8fe0da; opacity:.7; }
.bx-note .ap-stamp { display:inline-flex; padding:0; }

/* motion: entrance + reveal + filter transitions, only when the user allows it */
@media (prefers-reduced-motion: no-preference) {
  /* one-time magical opening: hero settles, sheet rises */
  .bx-hero__img { animation:bxsettle 1.8s cubic-bezier(.2,.8,.25,1) both; }
  @keyframes bxsettle { from { transform:scale(1.09); } to { transform:scale(1.02); } }
  .bx-flow { animation:bxrise .7s cubic-bezier(.2,.8,.25,1) .15s both; }
  @keyframes bxrise { from { opacity:0; transform:translateY(28px); } to { opacity:1; transform:none; } }

  /* staggered scroll-reveal (delay set per element by explore-beach.js) */
  .bx-ready [data-el="bx-in"] { opacity:0; transform:translateY(16px);
    transition:opacity .5s ease, transform .5s cubic-bezier(.2,.8,.25,1); transition-delay:var(--d, 0s); }
  .bx-ready [data-el="bx-in"].is-in { opacity:1; transform:none; }

  /* filter out/in: fade+shrink before hiding */
  .bx-feature, .bx-card { transition:opacity .18s ease, transform .22s cubic-bezier(.2,.8,.25,1); }
  .bx-feature.is-out, .bx-card.is-out { opacity:0; transform:scale(0.94); }

  /* vibes fold-out spring */
  .bx-vibes { transition:max-height .38s cubic-bezier(.2,.8,.25,1), opacity .3s ease; max-height:0; opacity:0; }
  .bx-vibes.is-open { max-height:64px; opacity:1; }
}
/* no-motion fallback: fold-out just shows/hides via [hidden] */
@media (prefers-reduced-motion: reduce) {
  .bx-vibes.is-open { max-height:none; opacity:1; }
}

/* ============================================================================
   Premium flow motion — MPA page transitions + shared micro-interactions.
   Progressive enhancement: browsers without cross-document View Transitions
   simply get instant navigations, exactly as before.
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  /* Cross-document View Transitions with DIRECTION.
     The bottom nav + FAB get their own transition name so they stay put while
     the page slides underneath. Direction is set on <html data-nav> by a tiny
     inline script (forward | back | tab) before the new page paints. */
  @view-transition { navigation: auto; }
  /* ONLY during an actual navigation (app.js sets html.is-vt on pageswap /
     pagereveal). A view-transition-name promotes the element to its own
     snapshot layer, which isolates it from the page backdrop — so while this
     was applied unconditionally, the backdrop-filter on .floating-nav__bar had
     nothing to sample and the bar's glass NEVER rendered anywhere, on any
     browser. It only ever painted its flat translucent fill, which is why
     lowering the fill kept making it look more transparent, not more frosted.
     Gated this way the blur is live at rest and the nav still gets its own
     snapshot while the page slides underneath. If the events are unsupported
     the class is never added: the glass still works and the nav simply slides
     with the page, exactly as in browsers without View Transitions. */
  html.is-vt .floating-nav { view-transition-name: app-nav; }

  /* forward (default): new page slides in from the right, old exits left */
  ::view-transition-old(root) { animation: vt-out-left var(--dur-page-out) var(--ease) both; }
  ::view-transition-new(root) { animation: vt-in-right var(--dur-page) var(--ease) both; }
  /* back: mirror it */
  html[data-nav="back"]::view-transition-old(root) { animation: vt-out-right var(--dur-page-out) var(--ease) both; }
  html[data-nav="back"]::view-transition-new(root) { animation: vt-in-left var(--dur-page) var(--ease) both; }
  /* tab switch: siblings, so crossfade with a slight lift instead of sliding */
  html[data-nav="tab"]::view-transition-old(root) { animation: vt-fade-out 160ms var(--ease) both; }
  html[data-nav="tab"]::view-transition-new(root) { animation: vt-fade-lift 240ms var(--ease) both; }

  @keyframes vt-in-right  { from { transform: translateX(26px); opacity: 0; } to { transform: none; opacity: 1; } }
  @keyframes vt-out-left  { to   { transform: translateX(-18px); opacity: 0; } }
  @keyframes vt-in-left   { from { transform: translateX(-26px); opacity: 0; } to { transform: none; opacity: 1; } }
  @keyframes vt-out-right { to   { transform: translateX(18px); opacity: 0; } }
  @keyframes vt-fade-out  { to   { opacity: 0; } }
  @keyframes vt-fade-lift { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

  /* Smooth in-page anchor scrolling (article TOCs) */
  html { scroll-behavior: smooth; }

  /* Shared press feedback: cards + tiles compress slightly under the finger */
  .dest-card:active, .kb-article-card:active, .kb-latest__card:active,
  .bento-tile:active, .cat-pill:active, .pd-read:active, .fx-link:active,
  .dsc-cat:active, .pop-card:active, .hotel-card:active {
    transform: scale(0.98);
    transition: transform 120ms var(--ease);
  }
}

/* Global reduced-motion reset: every keyframe/transition collapses to instant.
   Closes the gap where sheet/menu entrance animations ignored the preference. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Home spotlight: ONE portrait card, images cross-fade as a slideshow inside it */
.spot { margin:4px 0 24px; }
.spot-stage { position:relative; width:100%; aspect-ratio:4/7; border-radius:24px;
  overflow:hidden; background:var(--app-bg); box-shadow:0 18px 40px -22px rgba(20,40,45,0.55); }
.spot-slide { position:absolute; inset:0; text-decoration:none;
  opacity:0; visibility:hidden; transition:opacity .6s var(--ease), visibility .6s var(--ease); }
.spot-slide.is-active { opacity:1; visibility:visible; }
.spot-slide__img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; }
.spot-slide__scrim { position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(12,20,20,0) 34%, rgba(12,20,20,0.28) 56%, rgba(10,16,16,0.86) 100%); }
.spot-slide__tag { position:absolute; top:12px; right:12px; z-index:2; font-size:10px; font-weight:700;
  letter-spacing:.04em; text-transform:uppercase; color:#fff; background:rgba(10,16,16,0.5);
  backdrop-filter:var(--glass-dark-blur); -webkit-backdrop-filter:var(--glass-dark-blur); border-radius:var(--r-pill); padding:4px 9px; }
.spot-slide__body { position:absolute; left:0; right:0; bottom:0; z-index:2;
  display:flex; flex-direction:column; gap:8px; padding:22px 20px 22px; }
.spot-slide__eyebrow { display:inline-flex; align-items:center; gap:6px; width:fit-content;
  font-size:10.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  color:#fff; background:var(--glass-dark-bg); backdrop-filter:var(--glass-dark-blur); -webkit-backdrop-filter:var(--glass-dark-blur);
  border-radius:var(--r-pill); padding:5px 10px; }
.spot-slide__title { font-size:23px; font-weight:700; line-height:1.2; color:#fff;
  letter-spacing:-0.015em;
  display:-webkit-box; -webkit-line-clamp:2; line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.spot-slide__sub { font-size:13px; line-height:1.45; color:rgba(255,255,255,0.82);
  display:-webkit-box; -webkit-line-clamp:2; line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.spot-slide__cta { display:inline-flex; align-items:center; gap:6px; margin-top:3px; width:fit-content;
  align-self:flex-end; /* CTA sits on the right edge of the slide body at every size */
  font-size:12.5px; font-weight:700; color:#0f1616; background:#fff;
  border-radius:var(--r-pill); padding:8px 14px; }
.spot-dots { display:flex; justify-content:center; gap:6px; margin-top:14px; }
.spot-dot { width:6px; height:6px; padding:0; border:none; appearance:none; cursor:pointer;
  border-radius:var(--r-pill); background:var(--hairline);
  transition:width .2s var(--ease), background .2s var(--ease); }
.spot-dot.is-active { width:20px; background:var(--teal); }

/* native share button (place + article headers) */
.share-btn { cursor:pointer; border:none; }

/* ============================================================================
   Trains page (.tr2-*) — editorial rail page: bleed hero, featured scenic ride,
   route cards, lines, know-how.
   ========================================================================== */
.tr2-hero { position:relative; height:300px; overflow:hidden; }
.tr2-hero__img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.tr2-hero__scrim { position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(10,16,16,0.18) 0%, rgba(10,16,16,0.05) 40%, rgba(10,16,16,0.78) 100%); }
.tr2-hero__back { position:absolute; top:var(--pad-top-lg); left:20px; z-index:2; }
.tr2-hero__body { position:absolute; left:0; right:0; bottom:0; z-index:2; padding:0 var(--gutter) 20px;
  display:flex; flex-direction:column; gap:6px; }
.tr2-hero__eyebrow { display:inline-flex; align-items:center; gap:6px; width:fit-content; font-size:10.5px;
  font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:#fff;
  background:var(--glass-dark-bg); backdrop-filter:var(--glass-dark-blur); -webkit-backdrop-filter:var(--glass-dark-blur); border-radius:var(--r-pill); padding:5px 10px; }
.tr2-hero__title { margin:0; font-size:27px; font-weight:700; letter-spacing:-0.015em; color:#fff; }
.tr2-hero__sub { margin:0; font-size:13.5px; line-height:1.45; color:rgba(255,255,255,0.85); }

.tr2-wrap { padding:20px var(--gutter) 40px; display:flex; flex-direction:column; gap:26px; }
.tr2-sec__h { margin:0 0 12px; font-size:18px; font-weight:600; letter-spacing:-0.01em; color:var(--ink); }

/* featured ride */
.tr2-feature { background:#fff; border:1px solid var(--hairline); border-radius:22px; overflow:hidden;
  box-shadow:0 16px 34px -24px rgba(20,40,45,0.5); }
.tr2-feature__media { position:relative; height:170px; }
.tr2-feature__media img { width:100%; height:100%; object-fit:cover; }
.tr2-feature__flag { position:absolute; top:12px; left:12px; display:inline-flex; align-items:center; gap:5px;
  font-size:10.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:#fff;
  background:var(--glass-dark-strong); backdrop-filter:var(--glass-dark-blur); -webkit-backdrop-filter:var(--glass-dark-blur); border-radius:var(--r-pill); padding:5px 10px; }
.tr2-feature__body { padding:16px 16px 18px; display:flex; flex-direction:column; gap:11px; }
.tr2-feature__title { margin:0; font-size:20px; font-weight:700; letter-spacing:-0.01em; color:var(--ink); }
.tr2-feature__sub { margin:0; font-size:13px; line-height:1.5; color:var(--muted); }
.tr2-highlights { margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:7px; }
.tr2-highlights li { display:flex; align-items:flex-start; gap:8px; font-size:13px; color:var(--ink); }
.tr2-highlights i, .tr2-highlights svg { color:var(--teal); flex-shrink:0; margin-top:2px; }

.tr2-chips { display:flex; flex-wrap:wrap; gap:7px; }
.tr2-chip { display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:600;
  color:var(--muted); background:var(--app-bg); border-radius:var(--r-pill); padding:6px 11px; }
.tr2-chip--fare { color:var(--teal); background:var(--teal-surface); }
.tr2-alert { display:flex; align-items:center; gap:7px; font-size:12.5px; font-weight:600; color:#a33d3d;
  background:#fbeeee; border-radius:12px; padding:9px 12px; }

.tr2-photospot { display:flex; align-items:center; gap:11px; text-decoration:none;
  background:var(--teal-surface); border-radius:14px; padding:11px 12px; }
.tr2-photospot__ic { width:36px; height:36px; flex-shrink:0; display:grid; place-items:center;
  border-radius:11px; background:#fff; color:var(--teal); }
.tr2-photospot__txt { flex:1; min-width:0; display:flex; flex-direction:column; gap:1px; }
.tr2-photospot__txt strong { font-size:13.5px; font-weight:600; color:var(--ink); }
.tr2-photospot__txt span { font-size:12px; color:var(--muted); }
.tr2-photospot__go { color:var(--teal); flex-shrink:0; }

/* other route cards */
.tr2-routes { display:flex; flex-direction:column; gap:14px; }
.tr2-route { background:#fff; border:1px solid var(--hairline); border-radius:18px; overflow:hidden;
  box-shadow:0 12px 26px -22px rgba(20,40,45,0.45); }
.tr2-route__img { width:100%; height:110px; object-fit:cover; display:block; }
.tr2-route__body { padding:13px 14px 15px; display:flex; flex-direction:column; gap:9px; }
.tr2-route__name { margin:0; font-size:16px; font-weight:600; color:var(--ink); }
.tr2-route__note { margin:0; font-size:12.5px; line-height:1.5; color:var(--muted); }

/* lines strip */
.tr2-lines { display:flex; flex-direction:column; gap:9px; }
.tr2-line { display:flex; align-items:flex-start; gap:11px; background:#fff; border:1px solid var(--hairline);
  border-radius:15px; padding:12px 13px; }
.tr2-line__ic { width:36px; height:36px; flex-shrink:0; display:grid; place-items:center; border-radius:11px;
  background:var(--teal-surface); color:var(--teal); }
.tr2-line__txt { display:flex; flex-direction:column; gap:2px; min-width:0; }
.tr2-line__txt strong { font-size:13.5px; font-weight:600; color:var(--ink); }
.tr2-line__txt span { font-size:12.5px; line-height:1.45; color:var(--muted); }

/* know-how */
.tr2-know { display:flex; flex-direction:column; gap:10px; }
.tr2-know__item { display:flex; align-items:flex-start; gap:10px; font-size:13px; line-height:1.5; color:var(--muted); }
.tr2-know__item i, .tr2-know__item svg { color:var(--teal); flex-shrink:0; margin-top:2px; }
.tr2-know__item strong { color:var(--ink); font-weight:600; }
.tr2-guide { display:inline-flex; align-items:center; gap:6px; margin-top:14px; font-size:13.5px;
  font-weight:600; color:var(--teal); text-decoration:none; }

/* ============================================================================
   Knowledge list toolbar: search / type filter / sort / list-grid toggle.
   Minimal, spacious; grid view flips the article card to a vertical tile.
   ========================================================================== */
.kb-tools { display:flex; flex-direction:column; gap:12px; margin:4px 0 8px; }
.kb-tools__search { display:flex; align-items:center; gap:9px; background:#fff;
  border:1px solid var(--hairline); border-radius:var(--r-pill); padding:11px 15px;
  box-shadow:0 8px 20px -18px rgba(20,40,45,0.4); }
.kb-tools__search i, .kb-tools__search svg { color:var(--muted-2); flex-shrink:0; }
.kb-tools__search input { flex:1; border:none; outline:none; background:none; font-family:inherit;
  font-size:14.5px; color:var(--ink); min-width:0; }
.kb-tools__search input::placeholder { color:var(--muted-2); }
.kb-tools__clear { border:none; background:var(--app-bg); color:var(--muted); cursor:pointer;
  width:24px; height:24px; border-radius:50%; display:grid; place-items:center; flex-shrink:0; }
.kb-tools__row { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.kb-chips { display:flex; gap:7px; flex-wrap:wrap; }
.kb-chip { border:1px solid var(--hairline); background:#fff; color:var(--muted); cursor:pointer;
  font-family:inherit; font-size:12.5px; font-weight:600; border-radius:var(--r-pill); padding:7px 14px;
  transition:background .15s ease, color .15s ease, border-color .15s ease; }
.kb-chip.is-active { background:var(--teal); color:#fff; border-color:var(--teal); }
.kb-tools__right { display:flex; align-items:center; gap:8px; margin-left:auto; }
.kb-sort { display:inline-flex; align-items:center; gap:6px; border:1px solid var(--hairline); background:#fff;
  color:var(--muted); cursor:pointer; font-family:inherit; font-size:12.5px; font-weight:600;
  border-radius:var(--r-pill); padding:7px 13px; white-space:nowrap; }
.kb-sort i, .kb-sort svg { color:var(--teal); }
.kb-view { display:inline-flex; background:var(--app-bg); border-radius:var(--r-pill); padding:3px; gap:2px; }
.kb-view__btn { border:none; background:none; color:var(--muted-2); cursor:pointer; width:34px; height:30px;
  border-radius:calc(var(--r-pill) - 3px); display:grid; place-items:center; transition:background .15s ease, color .15s ease; }
.kb-view__btn.is-active { background:#fff; color:var(--teal); box-shadow:0 2px 6px -3px rgba(20,40,45,0.35); }
.kb-count { font-size:12px; color:var(--muted-2); margin:2px 0 10px; }
.kb-noresults { margin-top:20px; }

/* grid view: article cards become vertical photo tiles, two per row */
.kb-list--grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.kb-list--grid .kb-article-card { flex-direction:column; gap:0; }
.kb-list--grid .kb-article-card__img { width:100%; aspect-ratio:3/2; }
.kb-list--grid .kb-article-card__body { padding:12px 12px 14px; gap:5px; }
.kb-list--grid .kb-article-card__summary { -webkit-line-clamp:3; }

/* ============================================================================
   Toolkit hub (.tlh-*): hero planner tile + 2-col tool grid, live data accents.
   ========================================================================== */
.tlh-wrap { padding:0 var(--gutter) 40px; }
.tlh-hero { position:relative; display:flex; align-items:center; gap:13px; margin:6px 0 14px;
  padding:18px 16px; border-radius:20px; overflow:hidden; text-decoration:none;
  background:linear-gradient(135deg, var(--teal) 0%, #0e5a60 100%); color:#fff;
  box-shadow:0 16px 32px -20px rgba(20,123,130,0.7); }
.tlh-hero__chip { width:44px; height:44px; flex-shrink:0; display:grid; place-items:center;
  border-radius:14px; background:var(--glass-dark-bg); backdrop-filter:var(--glass-dark-blur); -webkit-backdrop-filter:var(--glass-dark-blur); }
.tlh-hero__ghost { position:absolute; right:-18px; bottom:-30px; opacity:0.1; pointer-events:none; }
.tlh-hero__body { flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; }
.tlh-hero__title { font-size:17px; font-weight:700; letter-spacing:-0.01em; }
.tlh-hero__sub { font-size:12.5px; color:rgba(255,255,255,0.82); }
.tlh-hero__go { flex-shrink:0; opacity:0.85; }
/* The tile grid is shared with the "where to go next" card decks at the foot of
   the transport pages (.nx-grid / .nx-card), so the two never drift apart. Add
   new names to these selectors rather than copying the values. */
.tlh-grid, .nx-grid { display:grid; grid-template-columns:1fr 1fr; gap:11px; }
.tlh-tile, .nx-card { display:flex; flex-direction:column; gap:8px; padding:15px 14px 16px;
  background:#fff; border:1px solid var(--hairline); border-radius:18px; text-decoration:none;
  box-shadow:0 10px 24px -22px rgba(20,40,45,0.5); }
.tlh-tile__ic, .nx-card__ic { width:38px; height:38px; display:grid; place-items:center; border-radius:12px;
  background:var(--teal-surface); color:var(--teal); }
.tlh-tile__name, .nx-card__name { font-size:14px; font-weight:600; color:var(--ink); }
.tlh-tile__sub, .nx-card__sub { font-size:11.5px; line-height:1.4; color:var(--muted); }
.tlh-tile:active, .nx-card:active { transform:scale(0.98); }
.tlh-tile--alert .tlh-tile__ic { background:#fbeeee; color:#c13a3a; }

/* ---- "where to go next" deck ------------------------------------------------
   Same tile as the Tools hub, plus the few behaviours these decks need. */
.nx-grid { margin-top:10px; }
/* a lone card (legal, emergency) spans the row instead of sitting orphaned */
.nx-card:only-child { grid-column: 1 / -1; }
.nx-card { transition:transform .14s ease, box-shadow .2s ease, border-color .2s ease; }
/* hover lift only where a real pointer exists, so it never sticks on touch */
@media (hover: hover) {
  .nx-card:hover { transform:translateY(-2px); border-color:var(--teal-surface);
    box-shadow:0 16px 30px -20px rgba(20,40,45,0.55); }
}
/* these cards are the main way onward from the page, so keyboard users need them */
.nx-card:focus-visible { outline:2px solid var(--teal); outline-offset:2px; }
@media (prefers-reduced-motion: reduce) {
  .nx-card { transition:none; }
  .nx-card:hover, .nx-card:active { transform:none; }
}

/* ============================================================================
   Smart visa card (.vsa-*): auto-country requirement card + searchable picker.
   ========================================================================== */
.vsa-card { background:#fff; border:1px solid var(--hairline); border-radius:20px; padding:18px 16px;
  box-shadow:0 14px 30px -24px rgba(20,40,45,0.5); display:flex; flex-direction:column; gap:14px; }
.vsa-card[hidden] { display:none; } /* explicit display: beats [hidden]{display:none} */
.vsa-card__head { display:flex; align-items:center; gap:11px; }
.vsa-card__flag { font-size:30px; line-height:1; }
.vsa-card__who { flex:1; min-width:0; display:flex; flex-direction:column; gap:1px; }
.vsa-card__country { font-size:17px; font-weight:700; letter-spacing:-0.01em; color:var(--ink); }
.vsa-card__passport { font-size:11.5px; color:var(--muted-2); }
.vsa-card__change { display:inline-flex; align-items:center; gap:5px; border:1px solid var(--hairline);
  background:var(--app-bg); color:var(--muted); cursor:pointer; font-family:inherit; font-size:12px;
  font-weight:600; border-radius:var(--r-pill); padding:7px 12px; flex-shrink:0; }
.vsa-pill { display:inline-flex; align-items:center; font-size:14px; font-weight:700;
  color:#fff; background:var(--teal); border-radius:var(--r-pill); padding:8px 16px; }
.vsa-pill--free { background:#1a9a6c; }
.vsa-pill__note { display:block; margin-top:7px; font-size:12px; color:var(--muted); }
.vsa-facts { display:grid; grid-template-columns:repeat(3, 1fr); gap:8px; }
.vsa-fact { display:flex; flex-direction:column; align-items:flex-start; gap:3px;
  background:var(--app-bg); border-radius:13px; padding:10px 11px; }
.vsa-fact i, .vsa-fact svg { color:var(--teal); }
.vsa-fact__k { font-size:10.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--muted-2); }
.vsa-fact__v { font-size:13px; font-weight:600; color:var(--ink); }
.vsa-sec__h { font-size:11px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  color:var(--muted-2); margin-bottom:7px; }
.vsa-doc { display:flex; align-items:flex-start; gap:8px; font-size:13px; color:var(--ink); padding:3px 0; }
.vsa-doc i, .vsa-doc svg { color:var(--teal); flex-shrink:0; margin-top:2px; }
.vsa-flights__row { display:flex; flex-wrap:wrap; gap:7px; }
.vsa-flight { font-size:11.5px; font-weight:600; color:var(--teal); background:var(--teal-surface);
  border-radius:var(--r-pill); padding:6px 11px; }
.vsa-actions { display:flex; flex-direction:column; gap:9px; }
.vsa-actions__primary { display:inline-flex; align-items:center; justify-content:center; gap:7px;
  background:var(--teal); color:#fff; text-decoration:none; font-size:14px; font-weight:600;
  border-radius:var(--r-pill); padding:13px 18px; }
.vsa-actions__more { text-align:center; font-size:12.5px; font-weight:600; color:var(--teal); text-decoration:none; }
.vsa-stamp { display:flex; align-items:center; gap:6px; font-size:11px; color:var(--muted-2); }
.vsa-stamp a { color:var(--teal); }
.vsa-empty { display:flex; flex-direction:column; align-items:center; gap:12px; text-align:center;
  background:#fff; border:1px dashed var(--hairline); border-radius:20px; padding:28px 20px; }
.vsa-empty[hidden] { display:none; } /* explicit display: beats [hidden]{display:none} */
.vsa-empty__ic { width:52px; height:52px; display:grid; place-items:center; border-radius:16px;
  background:var(--teal-surface); color:var(--teal); }
.vsa-empty p { margin:0; font-size:13.5px; color:var(--muted); max-width:260px; }
.vsa-all { margin-top:4px; }
.vsa-all summary { font-size:13.5px; font-weight:600; color:var(--teal); cursor:pointer; padding:8px 0; }
.vsa-search { display:flex; align-items:center; gap:9px; background:var(--app-bg);
  border-radius:var(--r-pill); padding:10px 14px; margin:6px 0 12px; }
.vsa-search input { flex:1; border:none; outline:none; background:none; font-family:inherit; font-size:14px; }
.vsa-opts { max-height:50vh; overflow-y:auto; display:flex; flex-direction:column; gap:4px; }
.vsa-opt { display:flex; align-items:center; gap:11px; width:100%; border:none; background:none;
  cursor:pointer; font-family:inherit; text-align:left; padding:11px 8px; border-radius:12px; }
.vsa-opt:active { background:var(--app-bg); }
.vsa-opt__flag { font-size:22px; }
.vsa-opt__name { flex:1; font-size:14px; font-weight:600; color:var(--ink); }
.vsa-opt__req { font-size:11.5px; font-weight:600; color:var(--teal); }

/* ============================================================================
   ADAPTIVE TIERS. Token retunes live in tokens.css; this section holds the
   component-level adjustments tokens cannot reach. Four tiers:
   Tier 0  cover screens (Z Fold cover ~344px): compress chrome, keep content.
   Tier 2  unfolded foldables / small tablets portrait: densify discovery.
   Tier 3  tablets / unfolded landscape: floating canvas + reading comfort.
   Landscape squeeze: any short-viewport landscape hold.
   ========================================================================== */

/* ---- Tier 0: ultra narrow (foldable cover screens) ---- */
@media (max-width: 359px) {
  .page-intro__title { font-size: 30px; }
  .title-header__title { font-size: 19px; }
  .kb-lead { font-size: 13.5px; }
  .bx-hero__title { font-size: 32px; }
  .tr2-hero__title { font-size: 23px; }
  .tr2-hero { height: 250px; }
  .spot-stage { aspect-ratio: 4/6; }
  .spot-slide__title { font-size: 19px; }
  .cat-pill { width: 62px; }
  .cat-pill__icon { width: 46px; height: 46px; }
  .floating-nav { bottom: calc(16px + var(--safe-b)); }
  .floating-nav__item { width: 46px; height: 46px; }
  .floating-nav__bar { padding: 6px; }
  .floating-nav__fab { width: 58px; height: 58px; }
  .tlh-hero { padding: 15px 14px; }
  .tlh-tile, .nx-card { padding: 12px 11px 13px; }
  .it2-abtn { width: 30px; height: 30px; }
  .it2-stop__img { width: 48px; height: 48px; }
  .vsa-fact__v { font-size: 12px; }
  .vsa-card__country { font-size: 15px; }
  .bento { grid-template-rows: 72px 72px; }
  .bento-tile__title { font-size: 15px; }
  .kb-article-card__img { width: 92px; }
  .today-card__img, .spot-slide__cta { font-size: 12px; }
}

/* ---- Tier 2: unfolded foldables / small tablets portrait (600 to 899px) ---- */
@media (min-width: 600px) {
  /* discovery grids densify instead of stretching */
  .kb-list { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .kb-list--grid { grid-template-columns: repeat(3, 1fr); }
  .kb-article-card { flex-direction: column; gap: 0; }
  .kb-article-card__img { width: 100%; aspect-ratio: 5/3; }
  .kb-article-card__body { padding: 12px 12px 14px; }
  .tlh-grid, .nx-grid { grid-template-columns: repeat(3, 1fr); }
  .bx-grid { grid-template-columns: repeat(3, 1fr); }
  .hotels-grid { grid-template-columns: repeat(3, 1fr); }
  .bento { grid-template-rows: 96px 96px; }
  .spot-stage { aspect-ratio: 4/5; }
  /* reading stays comfortable inside the wider column */
  .kb-section__p, .prose-sec__p { max-width: 62ch; }
}

/* ---- Tier 3: tablets / unfolded landscape (min 900px) ---- */
@media (min-width: 800px) {
  /* the app floats as a rounded canvas on the desktop backdrop */
  body.app { padding: 28px var(--safe-r) 28px var(--safe-l); }
  .app__shell { min-height: calc(100vh - 56px); border-radius: 28px; overflow: hidden;
    box-shadow: 0 30px 80px -40px rgba(15, 35, 38, 0.45); }
  .tlh-grid, .nx-grid { grid-template-columns: repeat(4, 1fr); }
  .kb-list--grid { grid-template-columns: repeat(3, 1fr); }
  .flt-list { display: grid; grid-template-columns: 1fr 1fr; column-gap: 26px; }
  .flt-list[hidden] { display: none; }
  .it2-day, .it2-stops { max-width: 640px; }
  .kb-section__p, .prose-sec__p { max-width: 66ch; }
}

/* ---- Landscape squeeze: phones and folds held sideways ---- */
@media (orientation: landscape) and (max-height: 540px) {
  :root {
    --safe-gap: 4px;
    --pad-top:    max(14px, calc(var(--safe-t) + var(--safe-gap)));
    --pad-top-lg: max(10px, calc(var(--safe-t) + var(--safe-gap)));
  }
  .floating-nav { bottom: calc(12px + var(--safe-b)); }
  .floating-nav__item { width: 44px; height: 44px; }
  .floating-nav__fab { width: 56px; height: 56px; }
  .tr2-hero, .kb-hero { height: 52vh; max-height: 260px; }
  .spot-stage { aspect-ratio: 16/10; }
  .bx-hero__title { font-size: 30px; }
  .title-header { padding-bottom: 10px; }  /* padding-top from --pad-top-lg */
  .pd-air { height: 22vh; }
}

/* ---- Tiny viewports: the Z Flip square cover (~330x330) and anything under
   460px tall in any orientation. Chrome shrinks to a minimum, content wins. */
@media (max-height: 460px) {
  :root {
    --gutter: 14px;
    --safe-gap: 2px;
    --pad-top:    max(12px, calc(var(--safe-t) + var(--safe-gap)));
    --pad-top-lg: max(8px,  calc(var(--safe-t) + var(--safe-gap)));
  }
  .floating-nav { bottom: calc(8px + var(--safe-b)); padding: 0 calc(10px + var(--safe-r)) 0 calc(10px + var(--safe-l)); }
  .floating-nav__bar { padding: 6px; }
  .floating-nav__item { width: 40px; height: 40px; }
  .floating-nav__item i, .floating-nav__item svg { width: 21px; height: 21px; }
  .floating-nav__fab { width: 52px; height: 52px; }
  .title-header { padding-bottom: 8px; }  /* padding-top from --pad-top-lg */
  .title-header__title { font-size: 17px; }
  .page-intro__title { font-size: 22px; }
  .page-intro__sub, .kb-lead { font-size: 12.5px; }
  .searchbar__field { padding-top: 9px; padding-bottom: 9px; }
  .cat-pill { width: 56px; }
  .cat-pill__icon { width: 42px; height: 42px; }
  .spot-stage { aspect-ratio: auto; height: 62vh; min-height: 200px; border-radius: 18px; }
  .spot-slide__title { font-size: 16px; }
  .spot-slide__sub { display: none; }
  .spot-slide__cta { font-size: 11.5px; padding: 6px 11px; }
  .spot-dots { margin-top: 8px; }
  .tr2-hero, .kb-hero, .bx-hero { height: 44vh; min-height: 150px; }
  .bento { grid-auto-rows: 64px; }
  .sheet, .modal { max-height: 94vh; }
  .tlh-hero { padding: 12px 13px; }
  .tlh-tile, .nx-card { padding: 11px 11px 12px; gap: 5px; }
  .tlh-tile__ic, .nx-card__ic { width: 32px; height: 32px; }
}

/* ---- Near-square unfolded inners (Pixel Fold class, ~692x717): heroes must
   never swallow the viewport when width and height are close. ---- */
@media (min-width: 600px) {
  .spot-stage { max-height: 64vh; }
  .tr2-hero, .kb-hero { max-height: 46vh; }
  .bx-hero { max-height: 60vh; }
}

/* ---- Hinge spanning (book foldables with the app across both segments).
   Browsers without viewport segments ignore these blocks entirely. ---- */
@media (horizontal-viewport-segments: 2) {
  :root { --gutter: 40px; }
  .kb-section__p, .prose-sec__p { max-width: 56ch; }
}
@media (vertical-viewport-segments: 2) {
  /* tent/flex posture: keep heroes above or below the fold line */
  .spot-stage, .tr2-hero, .kb-hero, .bx-hero { max-height: 42vh; }
}

/* ============================================================
 * Journey-time planner (/tools/journey)
 * ========================================================== */
.jt-card { background:#fff; border:1px solid var(--hairline); border-radius:var(--r-card); padding:16px; }
.jt-pick { display:flex; align-items:stretch; gap:8px; }
.jt-field { flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; text-align:left; cursor:pointer;
  background:var(--app-bg); border:1px solid var(--hairline); border-radius:14px; padding:11px 13px; }
.jt-field__label { font-size:10.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--muted-2); }
.jt-field__value { font-size:15px; font-weight:600; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.jt-swap { flex-shrink:0; width:38px; border:1px solid var(--hairline); border-radius:12px; background:#fff;
  color:var(--teal); cursor:pointer; display:flex; align-items:center; justify-content:center; }
.jt-result { margin-top:14px; }
.jt-head { display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-bottom:10px; }
.jt-head__route { font-size:14.5px; font-weight:700; color:var(--ink); }
.jt-head__km { font-size:12px; color:var(--muted-2); white-space:nowrap; }
.jt-modes { display:flex; flex-direction:column; gap:2px; }
.jt-mode { display:flex; align-items:center; gap:11px; padding:11px 2px; border-bottom:1px solid var(--hairline-2); }
.jt-mode:last-child { border-bottom:none; }
.jt-mode i, .jt-mode svg { color:var(--teal); flex-shrink:0; }
.jt-mode__label { flex:1; font-size:13.5px; font-weight:600; color:var(--ink); }
.jt-mode__label em { font-style:normal; font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.04em;
  color:var(--teal); background:var(--teal-surface); border-radius:9999px; padding:2px 7px; margin-left:6px; }
.jt-mode__time { font-size:13.5px; font-weight:700; color:var(--ink); white-space:nowrap; }
.jt-mode--off { opacity:.55; }
.jt-mode--off i, .jt-mode--off svg { color:var(--muted-2); }
.jt-mode--off .jt-mode__time { font-weight:600; color:var(--muted-2); }
.jt-note-line { margin:10px 0 0; font-size:12.5px; line-height:1.5; color:var(--body); }
.jt-empty { margin:6px 0 0; font-size:13px; line-height:1.55; color:var(--body); }
.jt-via { display:flex; flex-direction:column; gap:6px; margin-top:12px; }
.jt-via__row { display:flex; align-items:center; justify-content:space-between; gap:10px; cursor:pointer;
  background:var(--app-bg); border:1px solid var(--hairline); border-radius:12px; padding:10px 13px; text-align:left; }
.jt-via__label { font-size:13px; font-weight:600; color:var(--ink); }
.jt-via__time { font-size:12px; color:var(--muted-2); white-space:nowrap; }
.jt-opts { max-height:56vh; overflow-y:auto; display:flex; flex-direction:column; }
.jt-opt { display:flex; align-items:center; gap:12px; width:100%; text-align:left; cursor:pointer;
  background:none; border:none; border-bottom:1px solid var(--hairline-2); padding:13px 4px; }
.jt-opt[hidden] { display:none; }
.jt-opt__name { font-size:14.5px; font-weight:600; color:var(--ink); }
.jt-notes { display:flex; flex-direction:column; gap:8px; }
.jt-note { background:#fff; border:1px solid var(--hairline); border-radius:14px; padding:2px 14px; }
.jt-note__sum { list-style:none; cursor:pointer; padding:12px 0; font-size:13.5px; font-weight:600; color:var(--ink); }
.jt-note__sum::-webkit-details-marker { display:none; }
.jt-note__body { margin:0 0 12px; font-size:13px; line-height:1.6; color:var(--body); }
/* .jt-links / .jt-link retired: the flat single-line rows became the .nx-grid /
   .nx-card tile deck defined alongside .tlh-tile above. Note .jt-card above is
   the journey PICKER panel, a different component that kept its name. */

/* ---- named express services + seating + booking (trains page) ---- */
.trn-list { display:flex; flex-direction:column; gap:8px; }
.trn-card { background:#fff; border:1px solid var(--hairline); border-radius:16px; }
.trn-card__sum { list-style:none; cursor:pointer; display:flex; align-items:center; gap:11px; padding:13px 14px; }
.trn-card__sum::-webkit-details-marker { display:none; }
.trn-card__ic { flex-shrink:0; width:34px; height:34px; border-radius:11px; background:var(--teal-surface);
  color:var(--teal); display:flex; align-items:center; justify-content:center; }
.trn-card__id { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.trn-card__name { font-size:14.5px; font-weight:700; color:var(--ink); }
.trn-card__flag { font-style:normal; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.04em;
  color:var(--teal); background:var(--teal-surface); border-radius:9999px; padding:2px 7px; margin-left:5px; }
.trn-card__route { font-size:12px; color:var(--muted-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.trn-card__time { flex-shrink:0; font-size:14px; font-weight:700; color:var(--teal); }
.trn-card__body { padding:0 14px 14px 59px; }
.trn-card__note { margin:0 0 10px; font-size:13px; line-height:1.55; color:var(--body); }
.trn-stops { display:flex; flex-direction:column; gap:0; margin-bottom:10px; }
.trn-stop { display:flex; align-items:center; gap:10px; padding:6px 0; }
.trn-stop__dot { width:7px; height:7px; border-radius:50%; background:var(--teal); flex-shrink:0; }
.trn-stop__name { flex:1; font-size:13px; font-weight:600; color:var(--ink); }
.trn-stop__time { font-size:12.5px; color:var(--muted-2); }
.trn-card__meta { font-size:11.5px; color:var(--muted-2); }
.trn-side { display:flex; flex-direction:column; gap:8px; }
.trn-side__row { display:flex; align-items:flex-start; gap:11px; background:#fff; border:1px solid var(--hairline);
  border-radius:14px; padding:12px 14px; }
.trn-side__badge { flex-shrink:0; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em;
  color:#fff; background:var(--teal); border-radius:9999px; padding:4px 10px; }
.trn-side__txt { display:flex; flex-direction:column; gap:3px; }
.trn-side__txt strong { font-size:13.5px; font-weight:700; color:var(--ink); }
.trn-side__txt span { font-size:12.5px; line-height:1.5; color:var(--body); }
.trn-chan { display:flex; flex-direction:column; gap:8px; margin-top:12px; }
.trn-chan__row { display:flex; flex-direction:column; gap:3px; background:var(--app-bg); border:1px solid var(--hairline);
  border-radius:12px; padding:11px 13px; }
.trn-chan__name { font-size:13.5px; font-weight:700; color:var(--ink); }
.trn-chan__name a { color:var(--teal); text-decoration:none; }
.trn-chan__note { font-size:12.5px; line-height:1.5; color:var(--body); }

/* ---- expressway network page (/transit/expressways) ---- */
.trn-card__ic--code { font-size:12px; font-weight:800; letter-spacing:.02em; }

.exp-tolls { display:flex; flex-direction:column; gap:1px; background:var(--hairline);
  border:1px solid var(--hairline); border-radius:14px; overflow:hidden; }
.exp-toll { display:flex; align-items:center; gap:11px; background:#fff; padding:12px 14px; }
.exp-toll__code { flex-shrink:0; min-width:38px; display:flex; align-items:center; justify-content:center;
  font-size:11px; font-weight:700; letter-spacing:.03em; color:var(--teal); background:var(--teal-surface);
  border-radius:8px; padding:4px 7px; }
.exp-toll__route { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px;
  font-size:13.5px; font-weight:600; color:var(--ink); }
.exp-toll__route em { font-style:normal; font-size:11.5px; font-weight:400; line-height:1.45; color:var(--muted-2); }
.exp-toll__fare { flex-shrink:0; text-align:right; display:flex; flex-direction:column; gap:2px;
  font-size:14px; font-weight:700; color:var(--ink); }
.exp-toll__fare em { font-style:normal; font-size:12px; font-weight:600; color:var(--teal); }
.exp-toll__fare > em:only-child, .exp-toll__fare em:first-child:last-child { color:var(--muted-2); font-weight:400; }

.exp-hotline { display:flex; align-items:center; gap:12px; text-decoration:none; background:var(--teal-surface);
  border:1px solid var(--teal); border-radius:16px; padding:14px; }
.exp-hotline__ic { flex-shrink:0; width:40px; height:40px; border-radius:12px; background:var(--teal); color:#fff;
  display:flex; align-items:center; justify-content:center; }
.exp-hotline__txt { display:flex; flex-direction:column; gap:3px; }
.exp-hotline__txt strong { font-size:20px; font-weight:800; letter-spacing:.02em; color:var(--ink); }
.exp-hotline__txt span { font-size:12.5px; line-height:1.5; color:var(--body); }

.exp-service { background:#fff; border:1px solid var(--hairline); border-radius:16px; padding:14px; }
.exp-service__head { display:flex; align-items:center; gap:9px; margin-bottom:8px; }
.exp-service__name { flex:1; font-size:14.5px; font-weight:700; color:var(--ink); }
.exp-service__code { font-size:11px; font-weight:700; color:var(--teal); background:var(--teal-surface);
  border-radius:8px; padding:4px 8px; }
.exp-service__note { margin:0 0 8px; font-size:13px; line-height:1.55; color:var(--body); }
.exp-amen { display:flex; flex-wrap:wrap; gap:6px; }
.exp-amen__tag { font-size:11.5px; font-weight:600; color:var(--body); background:var(--app-bg);
  border:1px solid var(--hairline); border-radius:9999px; padding:5px 10px; }

/* toll line inside a journey-tool result / itinerary travel segment */
.jt-exp { display:flex; align-items:center; gap:10px; text-decoration:none; margin-top:10px;
  background:var(--teal-surface); border-radius:12px; padding:10px 12px; }
.jt-exp i, .jt-exp svg { flex-shrink:0; color:var(--teal); }
.jt-exp__txt { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.jt-exp__txt strong { font-size:12.5px; font-weight:700; color:var(--ink); }
.jt-exp__txt span { font-size:11.5px; line-height:1.45; color:var(--body); }
.jt-exp__fare { flex-shrink:0; font-size:13px; font-weight:700; color:var(--teal); }
.jt-exp[hidden] { display:none; }

/* ---- domestic flights (/transit/flights) ---- */
.df-season { display:flex; align-items:center; gap:9px; margin-bottom:10px; }
.df-season__badge { display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:700;
  text-transform:uppercase; letter-spacing:.04em; color:#fff; background:var(--teal);
  border-radius:9999px; padding:5px 10px; }
.df-season__window { font-size:12px; color:var(--muted-2); }
.df-water { font-style:normal; color:var(--teal) !important; font-weight:700 !important; }

/* ---- vehicle rental (/transit/rentals) ---- */
.rt-h3 { margin:18px 0 8px; font-size:14px; font-weight:700; color:var(--ink); }
.rt-compare { display:flex; flex-direction:column; gap:1px; background:var(--hairline);
  border:1px solid var(--hairline); border-radius:14px; overflow:hidden; margin-top:14px; }
.rt-compare__head, .rt-compare__row { display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:8px;
  background:#fff; padding:10px 13px; align-items:center; }
.rt-compare__head { background:var(--app-bg); font-size:11px; font-weight:700; text-transform:uppercase;
  letter-spacing:.03em; color:var(--muted-2); }
.rt-compare__head span:not(:first-child), .rt-compare__row > span:not(:first-child) { text-align:right; }
.rt-compare__cls { display:flex; flex-direction:column; gap:2px; font-size:13px; font-weight:700; color:var(--ink); }
.rt-compare__cls em { font-style:normal; font-size:11px; font-weight:400; color:var(--muted-2); }
.rt-compare__self { font-size:13px; color:var(--body); }
.rt-compare__drv { display:flex; flex-direction:column; gap:2px; font-size:13px; font-weight:700; color:var(--teal); }
.rt-compare__drv em { font-style:normal; font-size:10.5px; font-weight:400; color:var(--muted-2); }
.rt-compare__foot { margin:8px 0 0; font-size:11.5px; line-height:1.5; color:var(--muted-2); }
.rt-warn .trn-side__badge { background:#b3261e; }
.rt-steps { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
.rt-step { display:flex; align-items:flex-start; gap:11px; background:#fff; border:1px solid var(--hairline);
  border-radius:14px; padding:12px 14px; }
.rt-step__n { flex-shrink:0; width:24px; height:24px; border-radius:50%; background:var(--teal); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; }
.rt-step__txt { display:flex; flex-direction:column; gap:3px; }
.rt-step__txt strong { font-size:13.5px; font-weight:700; color:var(--ink); }
.rt-step__txt span { font-size:12.5px; line-height:1.5; color:var(--body); }

/* ---- airport transfers (/transit/airport-transfers) ---- */
.tf-grid { display:flex; flex-direction:column; gap:1px; background:var(--hairline);
  border:1px solid var(--hairline); border-radius:12px; overflow:hidden; }
.tf-grid__head, .tf-grid__row { display:grid; grid-template-columns:1.5fr .9fr .9fr .9fr; gap:6px;
  background:#fff; padding:9px 11px; align-items:center; }
.tf-grid__head { background:var(--app-bg); font-size:10.5px; font-weight:700; text-transform:uppercase;
  letter-spacing:.03em; color:var(--muted-2); }
.tf-grid__head span:not(:first-child), .tf-grid__row > span:not(:first-child) { text-align:right; }
.tf-grid__to { display:flex; flex-direction:column; gap:1px; font-size:12.5px; font-weight:700; color:var(--ink); }
.tf-grid__to em { font-style:normal; font-size:10.5px; font-weight:400; color:var(--muted-2); }
.tf-grid__time { font-size:11px; color:var(--muted-2); }
.tf-grid__car { font-size:12px; font-weight:600; color:var(--body); }
.tf-grid__van { font-size:12px; color:var(--muted-2); }

/* air variant of the journey-tool mode row */
.jt-exp--air { background:rgba(20,123,130,.09); }
.jt-exp--off { opacity:.62; }

/* ============================================================
   Assistant: Ask / Search modes  (partials/assistant.php)
   The FAB is on every page, so this is the site's global search.
   ============================================================ */

/* segmented mode switch */
.asst-modes { position:relative; display:flex; gap:2px; margin:0 var(--gutter) 10px;
  background:var(--app-bg); border:1px solid var(--hairline); border-radius:9999px; padding:3px; }
.asst-modes__pill { position:absolute; top:3px; left:3px; width:calc(50% - 3px); height:calc(100% - 6px);
  background:var(--teal); border-radius:9999px; transition:transform .26s cubic-bezier(.4,0,.2,1); }
.asst-modes.is-search .asst-modes__pill { transform:translateX(100%); }
.asst-mode { position:relative; z-index:1; flex:1; display:inline-flex; align-items:center; justify-content:center;
  gap:6px; padding:9px 10px; border:none; background:none; cursor:pointer; border-radius:9999px;
  font-size:13px; font-weight:600; color:var(--muted-2); transition:color .2s; }
.asst-mode.is-active { color:#fff; }
.asst-mode i, .asst-mode svg { width:15px; height:15px; }

/* search surface */
.asst-srch { display:flex; flex-direction:column; flex:1; min-height:0; }
.asst-srch[hidden] { display:none; }
.asst-srch__body { flex:1; min-height:0; overflow-y:auto; padding:0 var(--gutter) 6px; }
.asst-srch__intro { padding:14px 2px 4px; }
.asst-srch__lead { margin:0 0 12px; font-size:13px; line-height:1.6; color:var(--muted-2); }
.asst-srch__chips { display:flex; flex-wrap:wrap; gap:7px; }

/* the one standout answer */
.asst-best { position:relative; display:block; text-decoration:none; margin:12px 0 4px; padding:14px 44px 14px 15px;
  background:var(--teal-surface); border:1px solid var(--teal); border-radius:16px; }
.asst-best__kind { display:block; font-size:10px; font-weight:800; letter-spacing:.08em;
  text-transform:uppercase; color:var(--teal); margin-bottom:5px; }
.asst-best__title { display:block; font-size:15.5px; font-weight:700; line-height:1.3; color:var(--ink); }
.asst-best__desc { display:block; margin-top:3px; font-size:12.5px; line-height:1.5; color:var(--body); }
.asst-best__go { position:absolute; top:50%; right:13px; transform:translateY(-50%);
  width:28px; height:28px; border-radius:50%; background:var(--teal); color:#fff;
  display:flex; align-items:center; justify-content:center; }

/* result groups */
.asst-grp { margin-top:16px; }
.asst-grp__h { display:flex; align-items:center; gap:8px; margin:0 0 6px; padding:0 2px; }
.asst-grp__label { font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--muted-2); }
.asst-grp--chat .asst-grp__label { display:block; margin:14px 0 6px; }
.asst-grp__n { font-size:11px; font-weight:700; color:var(--teal); background:var(--teal-surface);
  border-radius:9999px; padding:1px 7px; }
.asst-grp__open { margin-left:auto; width:26px; height:26px; border-radius:50%; display:flex;
  align-items:center; justify-content:center; color:var(--teal); background:var(--teal-surface); text-decoration:none; }

/* a result row: 44px tap target, one line of title, one of context */
.asst-row { display:flex; align-items:center; gap:11px; min-height:44px; padding:9px 11px;
  text-decoration:none; border-radius:13px; transition:background .15s; }
.asst-row:active { background:var(--app-bg); }
.asst-row__ic { flex-shrink:0; width:32px; height:32px; border-radius:10px; background:var(--app-bg);
  color:var(--teal); display:flex; align-items:center; justify-content:center; }
.asst-row__txt { flex:1; min-width:0; display:flex; flex-direction:column; gap:1px; }
.asst-row__title { font-size:13.5px; font-weight:600; color:var(--ink);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.asst-row__meta { font-size:11.5px; color:var(--muted-2);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.asst-row__chev { flex-shrink:0; color:var(--muted-2); }

.asst-more { display:block; padding:8px 11px 2px 54px; font-size:12px; font-weight:600;
  color:var(--teal); text-decoration:none; }
.asst-allchat { display:inline-flex; align-items:center; gap:6px; margin-top:12px; padding:8px 13px;
  font-size:12.5px; font-weight:600; color:var(--teal); background:var(--teal-surface);
  border-radius:9999px; text-decoration:none; }

/* footer: open the full result set */
.asst-srch__all { display:flex; align-items:center; justify-content:center; gap:8px;
  margin:8px var(--gutter) 0; padding:13px; border-radius:14px; text-decoration:none;
  font-size:13.5px; font-weight:700; color:#fff; background:var(--teal); }
.asst-srch__all[hidden] { display:none; }

/* empty state */
.asst-srch__empty { text-align:center; padding:34px 16px; }
.asst-srch__empty-ic { display:inline-flex; width:52px; height:52px; border-radius:50%;
  background:var(--app-bg); color:var(--muted-2); align-items:center; justify-content:center; margin-bottom:12px; }
.asst-srch__empty-t { margin:0 0 4px; font-size:14.5px; font-weight:700; color:var(--ink); }
.asst-srch__empty-s { margin:0; font-size:12.5px; color:var(--muted-2); }

/* filter-sheet chip counts */
/* .filter-chip2 retired: the global sheet now uses .fs-chip / .fs-seg / .fs-switch */

/* deep-linked section gets a brief highlight so the eye lands on it */
.is-deeplinked { animation:deeplink-glow 1.6s ease-out; border-radius:16px; }
@keyframes deeplink-glow {
  0%, 60% { box-shadow:0 0 0 3px var(--teal-surface), 0 0 0 4px var(--teal); }
  100%    { box-shadow:0 0 0 3px transparent, 0 0 0 4px transparent; }
}
@media (prefers-reduced-motion: reduce) {
  .asst-modes__pill { transition:none; }
  .is-deeplinked { animation:none; }
}

/* results page: return from an isolated group to everything */
.srch-allback { display:inline-flex; align-items:center; gap:7px; margin-top:18px; padding:11px 15px;
  font-size:13px; font-weight:600; color:var(--teal); background:var(--teal-surface);
  border-radius:9999px; text-decoration:none; }

/* [hidden] needs an explicit rule wherever display is set, or the attribute loses */
.asst__messages[hidden] { display:none; }
.asst__suggest[hidden]  { display:none; }
.asst-srch__intro[hidden] { display:none; }

/* ============================================================
   Transport pages: at-a-glance strip + quiet accordion
   Shared by /transit/{expressways,trains,flights,rentals,transfers}.
   Turns a 7-screen wall into a short glance plus tappable rows.
   ============================================================ */

/* page shell: calm vertical rhythm */
.tp { padding:2px var(--gutter) 40px; display:flex; flex-direction:column; gap:22px; }
.tp__lead { margin:0; font-size:14px; line-height:1.6; color:var(--body); }

/* ---- at-a-glance: the answer before the detail ---- */
/* One quiet card, one fact per row: icon, what it is, then the number.
   Was a 3-up grid, which gave each tile ~103px on a phone and wrapped values
   like "US$70 to 80" onto three lines. Rows breathe and never wrap the value.
   DOM order is ic / value / label, so flex order puts the label before the
   value visually without touching any view. */
.glance { display:flex; flex-direction:column; background:#fff;
  border:1px solid var(--hairline); border-radius:20px; overflow:hidden; }
.glance-tile { display:flex; align-items:center; gap:13px; min-height:62px;
  padding:14px 16px; text-decoration:none; }
.glance-tile + .glance-tile { border-top:1px solid var(--hairline-2); }
.glance-tile__ic { order:1; flex:none; width:36px; height:36px; border-radius:11px;
  background:var(--teal-surface); color:var(--teal);
  display:flex; align-items:center; justify-content:center; }
.glance-tile__l { order:2; flex:1; min-width:0; font-size:13px; line-height:1.4; color:var(--body); }
.glance-tile__v { order:3; flex:none; font-size:16px; font-weight:700; letter-spacing:-0.01em;
  color:var(--ink); line-height:1.2; text-align:right; white-space:nowrap; }

/* the highlighted row (the hotline, the headline price, what is flying now) */
.glance-tile--action { background:var(--teal-surface); }
.glance-tile--action .glance-tile__ic { background:var(--teal); color:#fff; }
.glance-tile--action .glance-tile__v { color:var(--teal); }
.glance-tile--action .glance-tile__l { color:var(--ink); }

/* when the row is genuinely tappable (tel: links), say so */
a.glance-tile::after { content:''; order:4; flex:none; width:7px; height:7px; margin-left:1px;
  border-right:2px solid var(--muted-2); border-bottom:2px solid var(--muted-2);
  border-radius:1px; transform:rotate(-45deg); }
a.glance-tile.glance-tile--action::after { border-color:var(--teal); }
a.glance-tile:active { background:var(--app-bg); }
a.glance-tile.glance-tile--action:active { background:#e3eeed; }

/* a little more room once there is any */
@media (min-width:420px) {
  .glance-tile { padding:16px 18px; min-height:66px; }
  .glance-tile__v { font-size:17px; }
}

/* ---- the quiet accordion ---- */
.acc { display:flex; flex-direction:column; gap:10px; }
.acc-sec { background:#fff; border:1px solid var(--hairline); border-radius:18px; overflow:hidden;
  transition:border-color .18s; }
.acc-sec[open] { border-color:rgba(20,123,130,0.28); }
.acc-sec__sum { list-style:none; cursor:pointer; display:flex; align-items:center; gap:13px;
  padding:16px 16px; min-height:56px; }
.acc-sec__sum::-webkit-details-marker { display:none; }
.acc-sec__ic { flex-shrink:0; width:38px; height:38px; border-radius:12px; background:var(--app-bg);
  color:var(--teal); display:flex; align-items:center; justify-content:center; }
.acc-sec[open] .acc-sec__ic { background:var(--teal-surface); }
.acc-sec__txt { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.acc-sec__title { font-size:15px; font-weight:600; letter-spacing:-0.01em; color:var(--ink); }
.acc-sec__teaser { font-size:12.5px; line-height:1.4; color:var(--muted);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.acc-sec[open] .acc-sec__teaser { white-space:normal; }
.acc-sec__chev { flex-shrink:0; color:var(--muted-2); transition:transform .22s ease; }
.acc-sec[open] .acc-sec__chev { transform:rotate(180deg); }

/* ---- smooth open / close -------------------------------------------------
   A native <details> snaps: the content is there or it is not. These rules
   animate the height instead, so every accordion in the app (the transport
   pages, rides, transit, and the nested .trn-card panels) eases open and
   eases shut.

   Two modern pieces do the work with no JavaScript:
     interpolate-size: allow-keywords   makes `auto` an animatable height
     ::details-content                  the wrapper around everything after
                                        <summary>, which is what we size
   content-visibility must transition with `allow-discrete` or the content
   would vanish on frame one and there would be nothing left to animate.

   Wrapped in @supports: where the browser lacks ::details-content the
   accordion simply behaves as it does today, instantly, with nothing broken.
   ------------------------------------------------------------------------ */
@supports selector(::details-content) {
  .acc-sec, .trn-card { interpolate-size: allow-keywords; }
  .acc-sec::details-content,
  .trn-card::details-content {
    block-size: 0;
    overflow: hidden;
    opacity: 0;
    transition: block-size .30s cubic-bezier(.22,.61,.36,1),
                content-visibility .30s allow-discrete,
                opacity .22s ease;
  }
  .acc-sec[open]::details-content,
  .trn-card[open]::details-content { block-size: auto; opacity: 1; }

  @media (prefers-reduced-motion: reduce) {
    .acc-sec::details-content,
    .trn-card::details-content { transition: none; }
  }
}
.acc-sec__body { padding:2px 16px 18px; }
.acc-sec__body > :first-child { margin-top:0; }
/* the furniture inside was written with its own top margins for a flat page;
   inside an accordion body the first block should hug the summary */
.acc-sec__body .trn-chan:first-child,
.acc-sec__body .tr2-know:first-child,
.acc-sec__body .exp-tolls:first-child,
.acc-sec__body .trn-side:first-child,
.acc-sec__body .trn-list:first-child { margin-top:0; }

@media (prefers-reduced-motion: reduce) {
  .acc-sec, .acc-sec__chev { transition:none; }
}
.acc-sec__lead { margin:0 0 12px; font-size:13px; line-height:1.55; color:var(--body); }
.acc-sec__lead:first-child { margin-top:0; }

/* ============================================================
   Flights hub (/flights): two choice cards + live CMB glance
   ============================================================ */
.fh-choices { display:flex; flex-direction:column; gap:12px; }
.fh-choice { display:flex; align-items:center; gap:14px; text-decoration:none;
  background:#fff; border:1px solid var(--hairline); border-radius:20px; padding:18px 16px;
  box-shadow:0 14px 30px -24px rgba(20,40,45,0.4); transition:transform .16s, box-shadow .16s; }
.fh-choice:active { transform:scale(.99); }
.fh-choice__ic { flex:none; width:52px; height:52px; border-radius:16px; background:var(--teal-surface);
  color:var(--teal); display:flex; align-items:center; justify-content:center; }
.fh-choice__body { flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; }
.fh-choice__title { font-size:18px; font-weight:700; letter-spacing:-0.01em; color:var(--ink); }
.fh-choice__sub { font-size:13px; line-height:1.4; color:var(--body); }
.fh-choice__stat { margin-top:3px; font-size:11.5px; font-weight:600; color:var(--muted); display:flex; align-items:center; gap:5px; flex-wrap:wrap; }
.fh-choice__go { flex:none; color:var(--muted-2); }

.fh-live { display:inline-flex; align-items:center; gap:4px; color:var(--teal); font-weight:700; }
.fh-live__dot { width:7px; height:7px; border-radius:50%; background:var(--teal); position:relative; }
.fh-live__dot::after { content:''; position:absolute; inset:-3px; border-radius:50%;
  border:1px solid var(--teal); opacity:.5; animation:fh-pulse 1.8s ease-out infinite; }
.fh-live__dot--season { background:#c1862a; }
.fh-live__dot--season::after { border-color:#c1862a; }
@keyframes fh-pulse { 0% { transform:scale(1); opacity:.5; } 100% { transform:scale(1.9); opacity:0; } }
@media (prefers-reduced-motion: reduce) { .fh-live__dot::after { animation:none; } }

.fh-live-panel { background:#fff; border:1px solid var(--hairline); border-radius:20px; padding:16px; }
.fh-live-panel__head { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.fh-live-panel__title { display:inline-flex; align-items:center; gap:7px; font-size:14.5px; font-weight:700; color:var(--ink); }
.fh-live-panel__title i, .fh-live-panel__title svg { color:var(--teal); }
.fh-live-panel__meta { font-size:11.5px; font-weight:600; color:var(--muted); display:inline-flex; align-items:center; gap:5px; }

.fh-next { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:14px; }
.fh-next__col { display:flex; flex-direction:column; gap:7px; min-width:0; }
.fh-next__h { display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:700;
  text-transform:uppercase; letter-spacing:.04em; color:var(--muted-2); }
.fh-next__h i, .fh-next__h svg { color:var(--teal); }
.fh-next__row { display:flex; align-items:baseline; gap:7px; min-width:0; }
.fh-next__time { font-size:12.5px; font-weight:700; color:var(--ink); font-variant-numeric:tabular-nums; flex:none; }
.fh-next__where { font-size:12.5px; color:var(--body); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1; }
.fh-next__st { font-size:10px; font-weight:700; flex:none; }
.fh-next__st--good { color:var(--teal); }
.fh-next__st--warn { color:#c1862a; }
.fh-next__st--muted { color:var(--muted-2); }

.fh-boardlink { display:inline-flex; align-items:center; gap:6px; margin-top:14px; padding:11px 15px;
  font-size:13px; font-weight:700; color:#fff; background:var(--teal); border-radius:12px; text-decoration:none; }

/* driver-hire operator directory rows (populated when the owner supplies a list) */
.dh-op { background:#fff; border:1px solid var(--hairline); border-radius:16px; padding:14px; }
.dh-op__head { display:flex; align-items:center; flex-wrap:wrap; gap:8px; }
.dh-op__name { font-size:14.5px; font-weight:700; color:var(--ink); }
.dh-op__type { font-size:11px; font-weight:600; color:var(--muted); background:var(--app-bg); border-radius:9999px; padding:3px 8px; }
.dh-op__badge { display:inline-flex; align-items:center; gap:4px; font-size:10.5px; font-weight:700; color:var(--teal); background:var(--teal-surface); border-radius:9999px; padding:3px 8px; }
.dh-op__note { margin:8px 0 0; font-size:13px; line-height:1.55; color:var(--body); }
.dh-op__meta { display:flex; flex-wrap:wrap; gap:12px; margin-top:8px; font-size:11.5px; color:var(--muted); }
.dh-op__meta span { display:inline-flex; align-items:center; gap:4px; }
.dh-op__meta i, .dh-op__meta svg { color:var(--muted-2); }

/* ============================================================================
   Installed / standalone (home-screen app) chrome.
   These rules fire ONLY when launched from the home screen (display-mode:
   standalone), never in a normal browser tab. Two jobs:
     AP3 — sit the bottom nav close to the screen floor. In a tab the 24px base
           offset is right (it clears the URL bar); installed, iOS already
           reserves the home-indicator inset (--safe-b), so 24px on top of it
           double-spaces and leaves a large gap. Drop the base to 6px so the nav
           sits ~safe-b+6 from the floor with a clean, deliberate margin.
     AP4 — frost the top status-bar strip at REST, not only on scroll, so the
           clock/battery sit on glass the moment the app opens (matches the
           bottom nav's glass). Same recipe as .floating-nav__bar.
   ========================================================================== */
@media (display-mode: standalone) {
  .floating-nav { bottom: calc(6px + var(--safe-b)); }

  /* narrow-screen tiers: keep the reduced offset so a small phone in standalone
     does not re-inherit the tab-sized gap. */
  @media (max-width: 400px)  { .floating-nav { bottom: calc(6px + var(--safe-b)); } }
  @media (max-height: 700px) { .floating-nav { bottom: calc(5px + var(--safe-b)); } }
  @media (max-height: 560px) { .floating-nav { bottom: calc(4px + var(--safe-b)); } }

  /* keep the action-bar variant consistent with the new base so it does not
     reopen the gap on those screens. */
  .app__main:has(.action-bar) ~ .floating-nav { bottom: calc(86px + var(--safe-b)); }

  /* Status-bar strip in standalone. AP4 used to frost this at REST with a grey
     rgba(232,238,238,...) gradient, which composited DARKER than the #f6f7f7 app
     surface — so the band behind the clock/battery read as a foreign grey stripe
     sitting on top of the app instead of part of it. At rest it must simply BE
     the app background (seamless, invisible); the glass belongs to the scrolled
     state, where there is real content passing under it to defocus. Both states
     are already correct on the base rule, so standalone only needs the height
     and the masked fade that softens the strip's lower edge. */
  .app__shell::before {
    /* Taller than the inset so the fade has somewhere to go, and the BLUR is
       masked (not just the tint) so it dissolves into the page instead of
       ending on a hard edge. */
    height: calc(var(--safe-t) + 20px);
    background: var(--app-bg);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 62%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 0%, #000 62%, transparent 100%);
    border-bottom: 0;
  }
  /* Scrolled: now the glass earns its keep, because content is moving beneath. */
  .app__shell.is-scrolled::before {
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
  }
}

/* ============================================================================
   Live search type-ahead panel (search-core.js). Attached under the home
   search bar; reuses the app's card/glass vocabulary. Group-categorised results
   with a highlighted best match, keyboard-navigable, with loading/empty/error
   states.
   ========================================================================== */
.tgs-panel{
  position:absolute; top:calc(100% + 8px); left:0; right:0; z-index:60;
  max-height:min(70vh,520px); overflow-y:auto; -webkit-overflow-scrolling:touch;
  background:var(--surface,#fff); border:1px solid var(--hairline,#e2e8e7);
  border-radius:18px; box-shadow:0 18px 44px -20px rgba(16,48,47,.35), 0 2px 8px rgba(0,0,0,.06);
  padding:6px; overscroll-behavior:contain;
}
.tgs-panel[hidden]{ display:none; }
.tgs-best{
  display:block; position:relative; padding:12px 40px 12px 14px; border-radius:13px;
  background:var(--teal-surface,rgba(20,123,130,.08)); text-decoration:none; margin-bottom:4px;
}
.tgs-best.is-active{ outline:2px solid var(--teal,#147b82); outline-offset:-2px; }
.tgs-best__kind{ display:block; font-size:10.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--teal,#147b82); }
.tgs-best__title{ display:block; font-size:15.5px; font-weight:700; color:var(--ink,#16302f); margin-top:2px; }
.tgs-best__title mark, .tgs-row__title mark{ background:none; color:var(--teal,#147b82); font-weight:800; }
.tgs-best__desc{ display:block; font-size:12.5px; color:var(--body,#4b5a59); margin-top:2px; line-height:1.4; }
.tgs-best__go{ position:absolute; right:14px; top:50%; transform:translateY(-50%); color:var(--teal,#147b82); }
.tgs-grp{ padding:4px 0; }
.tgs-grp__h{ display:flex; align-items:center; gap:8px; padding:8px 12px 4px; }
.tgs-grp__label{ font-size:11px; font-weight:800; letter-spacing:.07em; text-transform:uppercase; color:var(--muted,#5c6b6a); }
.tgs-grp__n{ font-size:10.5px; font-weight:700; color:var(--muted-2,#8896a0); background:var(--app-bg,#f2f5f4); border-radius:9999px; padding:1px 7px; }
.tgs-row{ display:flex; align-items:center; gap:11px; padding:9px 12px; border-radius:11px; text-decoration:none; }
.tgs-row:hover, .tgs-row.is-active{ background:var(--app-bg,#f2f5f4); }
.tgs-row.is-active{ outline:2px solid var(--teal,#147b82); outline-offset:-2px; }
.tgs-row__ic{ flex:0 0 auto; width:30px; height:30px; border-radius:9px; display:flex; align-items:center; justify-content:center;
  background:var(--teal-surface,rgba(20,123,130,.08)); color:var(--teal,#147b82); }
.tgs-row__txt{ flex:1 1 auto; min-width:0; }
.tgs-row__title{ display:block; font-size:14px; font-weight:600; color:var(--ink,#16302f); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tgs-row__meta{ display:block; font-size:11.5px; color:var(--muted,#5c6b6a); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tgs-row__chev{ flex:0 0 auto; color:var(--muted-2,#8896a0); }
.tgs-more{ display:block; padding:7px 12px 9px 53px; font-size:12.5px; font-weight:700; color:var(--teal,#147b82); text-decoration:none; }
.tgs-all{ display:flex; align-items:center; justify-content:center; gap:7px; margin-top:4px; padding:11px; border-radius:12px;
  background:var(--teal,#147b82); color:#fff; font-size:13.5px; font-weight:700; text-decoration:none; }
.tgs-note{ padding:26px 18px; text-align:center; color:var(--muted,#5c6b6a); }
.tgs-note i, .tgs-note svg{ color:var(--muted-2,#8896a0); }
.tgs-note__t{ margin:8px 0 2px; font-size:14px; font-weight:700; color:var(--ink,#16302f); }
.tgs-note__s{ margin:0; font-size:12.5px; }
.tgs-note--load{ display:flex; align-items:center; justify-content:center; gap:9px; padding:20px; font-size:13px; font-weight:600; }
.tgs-spin{ width:15px; height:15px; border-radius:50%; border:2px solid var(--hairline,#dfe6e5); border-top-color:var(--teal,#147b82); animation:tgs-spin .7s linear infinite; }
@keyframes tgs-spin{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce){ .tgs-spin{ animation-duration:1.4s; } }

/* "Download app" as the single primary action on /get-app */
.ga-download--hero{ margin-top:6px; font-size:16px; font-weight:700; padding:16px; box-shadow:0 10px 24px -12px rgba(20,123,130,.6); }
.ga-perm__txt{ min-width:0; flex:1 1 auto; }
.ga-perm__state{ flex:0 0 auto; white-space:nowrap; }

/* Backdrop-filter fallback: without it a translucent fill just looks washed out,
   so go solid rather than pretending to be glass. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .floating-nav__bar { background: #eef2f2; }
  @media (display-mode: standalone) { .app__shell::before { background: var(--app-bg); } }
  /* Panels: without blur, a translucent fill is just a washed-out box, so go
     solid + readable. Overlays go to a plain solid dim. */
  .drawer__panel, .sheet, .modal, .filter-sheet__panel, .menu-grid__panel,
  .notif-popup__panel, .consent__card, .instp__card, .map-cat-dropdown,
  .map-return, .asst__panel { background: #fff; }
  .drawer__overlay, .sheet-host__overlay, .notif-popup__overlay { background: rgba(16,28,30,0.55); }
}

/* ============================================================================
   Install invitation (partials/install-prompt.php). Minimal: brand mark, one
   line, one filled action. Reuses the consent card's centred-dialog geometry so
   it reads as part of the app rather than a bolted-on banner.
   ========================================================================== */
.instp{ position:fixed; inset:0; z-index:1200; display:flex; align-items:center; justify-content:center;
  padding:calc(24px + var(--safe-t)) 20px calc(24px + var(--safe-b)); }
.instp[hidden]{ display:none; }
.instp__overlay{ position:absolute; inset:0; background:rgba(10,28,28,0.42);
  backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px); }
.instp__card{ position:relative; width:100%; max-width:340px; background:var(--glass-panel-bg); backdrop-filter:var(--glass-panel-blur); -webkit-backdrop-filter:var(--glass-panel-blur);
  border-radius:24px; padding:30px 24px 22px; text-align:center;
  
  animation:instp-in .34s var(--ease) both; box-shadow:var(--glass-panel-hi), var(--glass-panel-shadow); border:1px solid var(--glass-panel-border);}
@keyframes instp-in{ from{ opacity:0; transform:translateY(14px) scale(.97); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce){ .instp__card{ animation:none; } }
.instp__x{ position:absolute; top:12px; right:12px; width:32px; height:32px; border:none; background:transparent;
  color:var(--muted-2,#7b8b8a); border-radius:50%; display:flex; align-items:center; justify-content:center; cursor:pointer; }
.instp__x:active{ background:rgba(0,0,0,.05); }
.instp__mark{ display:block; width:60px; height:60px; margin:0 auto 14px; color:var(--teal); }
.instp__mark svg{ width:100%; height:100%; display:block; }
.instp__title{ margin:0 0 8px; font-size:19px; font-weight:700; color:var(--ink); line-height:1.25; }
.instp__text{ margin:0 0 20px; font-size:13.5px; line-height:1.5; color:var(--body,#4b5a59); }
.instp__btn{ width:100%; min-height:50px; border:none; border-radius:var(--r-pill); background:var(--teal); color:#fff;
  font-size:15px; font-weight:700; display:flex; align-items:center; justify-content:center; gap:8px; cursor:pointer;
  box-shadow:0 10px 24px -10px rgba(20,123,130,.65); transition:transform .16s var(--ease); }
.instp__btn:active{ transform:scale(.97); }
.instp__later{ width:100%; margin-top:10px; min-height:44px; padding:11px;
  border:1px solid var(--hairline,#dfe6e5); border-radius:var(--r-pill); background:transparent;
  color:var(--body,#4b5a59); font-size:14px; font-weight:700; cursor:pointer; }
.instp__later:active{ background:rgba(0,0,0,.04); }
/* iOS "Got it" is the ONLY action in that state, so it gets the full primary
   button, not a quiet dismissal. */
.instp__btn--done{ margin-top:14px; box-shadow:0 10px 24px -10px rgba(20,123,130,.65); }
.instp__steps{ list-style:none; margin:0 0 2px; padding:0; text-align:left; }
.instp__steps li{ display:flex; align-items:center; gap:10px; padding:9px 0; font-size:13.5px; color:var(--ink);
  border-bottom:1px solid var(--hairline-2,rgba(16,48,47,.06)); }
.instp__steps li:last-child{ border-bottom:0; }
.instp__step-n{ flex:none; width:22px; height:22px; border-radius:50%; background:var(--teal-surface,rgba(20,123,130,.1));
  color:var(--teal); font-size:11.5px; font-weight:700; display:flex; align-items:center; justify-content:center; }

/* ============================================================================
   Add-a-place submission form (/places/submit).
   ========================================================================== */
.ps-intro{ color:var(--body,#4b5a59); font-size:14px; line-height:1.5; margin:0 0 18px; }
.ps-note{ display:flex; gap:10px; align-items:flex-start; padding:12px 14px; border-radius:14px; font-size:13.5px; line-height:1.45; margin-bottom:16px; }
.ps-note--ok{ background:var(--teal-surface,rgba(20,123,130,.09)); color:var(--teal); }
.ps-note--err{ background:rgba(190,60,50,.09); color:#a8332b; }
.ps-note i{ flex:none; margin-top:1px; }
.ps-form{ display:flex; flex-direction:column; gap:18px; }
.ps-field{ display:flex; flex-direction:column; gap:7px; }
.ps-label{ font-size:13px; font-weight:600; color:var(--ink); }
.ps-label em{ color:var(--teal); font-style:normal; }
.ps-hint{ margin:0; font-size:12px; color:var(--muted,#6b7b7a); line-height:1.4; }
.ps-area{ resize:vertical; min-height:64px; font:inherit; }
.ps-map{ height:220px; border-radius:16px; overflow:hidden; border:1px solid var(--hairline,#e2e8e7); background:#eef2f2; }
.ps-map canvas{ outline:none; }
.ps-geo{ align-self:flex-start; display:inline-flex; align-items:center; gap:6px; margin-top:-2px;
  padding:7px 13px; border-radius:var(--r-pill); border:1px solid var(--hairline); background:#fff;
  color:var(--teal); font-size:12.5px; font-weight:600; cursor:pointer; }
.ps-drop{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
  min-height:110px; border:1.5px dashed var(--hairline-2,rgba(16,48,47,.18)); border-radius:16px;
  color:var(--muted,#6b7b7a); font-size:13.5px; font-weight:600; cursor:pointer; background:rgba(20,123,130,.03); }
.ps-drop:active{ background:rgba(20,123,130,.07); }
.ps-thumbs{ display:flex; flex-wrap:wrap; gap:8px; }
.ps-thumb{ width:72px; height:72px; object-fit:cover; border-radius:12px; border:1px solid var(--hairline); }
.ps-more{ border:1px solid var(--hairline); border-radius:14px; padding:2px 14px; }
.ps-more summary{ padding:12px 0; font-size:13.5px; font-weight:600; color:var(--ink); cursor:pointer; list-style:none; }
.ps-more summary span{ color:var(--muted); font-weight:500; }
.ps-more summary::-webkit-details-marker{ display:none; }
.ps-more[open] summary{ border-bottom:1px solid var(--hairline-2,rgba(16,48,47,.06)); margin-bottom:12px; }
.ps-more .ps-field{ margin-bottom:12px; }
.ps-submit{ margin-top:4px; }
.ps-fine{ margin:0; font-size:11.5px; color:var(--muted,#6b7b7a); line-height:1.45; text-align:center; }

/* Offline readiness state on /get-app */
.ga-ready{ display:flex; align-items:center; gap:9px; padding:11px 14px; border-radius:14px;
  font-size:13px; font-weight:600; margin-top:12px; background:var(--card,#fff); border:1px solid var(--hairline,#e2e8e7); }
.ga-ready__dot{ width:9px; height:9px; border-radius:50%; flex:none; background:var(--muted,#8a9a99); }
.ga-ready.is-ready{ color:var(--teal); } .ga-ready.is-ready .ga-ready__dot{ background:var(--teal); box-shadow:0 0 0 3px rgba(20,123,130,.15); }
.ga-ready.is-partial{ color:#9a6b1e; } .ga-ready.is-partial .ga-ready__dot{ background:#c98a2b; }
.ga-ready.is-none{ color:var(--muted,#6b7b7a); }

/* Offline page: quick links to the precached main destinations */
.offline-page__nav{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:22px; width:100%; max-width:320px; }
.offline-page__nav a{ display:flex; align-items:center; gap:8px; padding:12px 14px; border-radius:13px;
  background:var(--card,#fff); border:1px solid var(--hairline,#e2e8e7); color:var(--ink); font-size:13.5px; font-weight:600; text-decoration:none; }
.offline-page__nav a:active{ background:var(--teal-surface,rgba(20,123,130,.08)); }
.offline-page__nav i, .offline-page__nav svg{ color:var(--teal); }

/* Contact actions (components/call-whatsapp.php): real SVG icons, aligned with
   the label. Overrides the plain inline-block .btn from _scaffold.css so the
   call/WhatsApp controls read as proper buttons. */
.call-whatsapp { display:flex; gap:10px; }
.call-whatsapp .btn { flex:1; display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:50px; padding:0 16px; border-radius:var(--r-lg); font-size:14.5px; font-weight:700;
  border:none; text-decoration:none; transition:background .18s var(--ease), transform .14s var(--ease); }
.call-whatsapp .btn:active { transform:scale(.985); }
.call-whatsapp .btn--call { background:var(--teal); color:#fff; }
.call-whatsapp .btn--call:hover { background:var(--teal-press); }
.call-whatsapp .btn--whatsapp { background:#25d366; color:#fff; }
.call-whatsapp .cw-ic { width:18px; height:18px; flex:none; }

/* Hotels photo hero — a banner behind the eyebrow/title/count, matching the
   photo-led explore category pages. Text sits over a scrim for legibility
   against the bright window in the lodge photo. Falls back to plain text when
   no image is set (the --photo modifier only applies when the img is present). */
/* /hotels wallpaper. Parity with the explore category pages: the photo is a
   FIXED full-screen backdrop (.bx-hero, reused verbatim) rather than a banner
   card at the top, and the page content rides over it on an opaque sheet so the
   filterable grid keeps its contrast. */
.hotels-bx { background:transparent; position:relative; }
.hotels-bx > .hotels-wrap { position:relative; z-index:1; }

/* Header + hero sit ON the photo, so their ink goes light. */
.hotels-bx .title-header { background:transparent; border-bottom:0; }
.hotels-bx .title-header__title { color:#fff; text-shadow:0 2px 16px rgba(0,0,0,0.42); }
.hotels-bx .title-header__back { background:var(--glass-dark-bg); color:#fff;
  backdrop-filter:var(--glass-dark-blur); -webkit-backdrop-filter:var(--glass-dark-blur);
  border:1px solid var(--glass-dark-border); }

.hotels-hero--over { display:flex; flex-direction:column; align-items:flex-start;
  padding:4px 0 26px; margin-bottom:0; }
.hotels-hero--over .hotels-hero__body { display:flex; flex-direction:column; align-items:flex-start; width:100%; }
.hotels-hero--over .hotels-hero__eyebrow { color:#eafaf9; }
.hotels-hero--over .hotels-hero__title { color:#fff; text-shadow:0 2px 18px rgba(0,0,0,0.42); }
.hotels-hero--over .hotels-hero__sub { color:rgba(255,255,255,0.93); text-shadow:0 1px 10px rgba(0,0,0,0.36); }
.hotels-hero--over .hotels-map { margin-top:14px; background:rgba(255,255,255,0.16);
  backdrop-filter:var(--glass-dark-blur); -webkit-backdrop-filter:var(--glass-dark-blur);
  border:1px solid rgba(255,255,255,0.28); color:#fff; }

/* The content column: TRANSPARENT, so the wallpaper stays visible the whole
   scroll and the cards/controls float on it as glass — the role .bx-flow plays
   on the explore category pages. (It was an opaque app-ground sheet that buried
   the photo the moment you scrolled.) Only the bottom padding that clears the
   nav remains. */
.hotels-sheet { position:relative; padding-bottom:calc(24px + var(--nav-space)); }

/* --- the frosted-glass foreground: one material for every surface that floats
   on the /hotels wallpaper, the .bx-capsule recipe (light frost, ink text). All
   scoped under .hotels-bx so the shared biz-card / hts-* partials keep their
   solid look on the home rails, /discover, search and the transport pages. --- */
.hotels-bx .bz-stay,
.hotels-bx .bz-venue {
  background:rgba(255,255,255,0.52);
  backdrop-filter:blur(22px) saturate(160%); -webkit-backdrop-filter:blur(22px) saturate(160%);
  border:1px solid rgba(255,255,255,0.6);
  box-shadow:0 14px 34px -20px rgba(4,12,14,0.55), inset 0 1px 0 rgba(255,255,255,0.65);
}
/* logo disc stays a solid white ring so brand marks are unchanged */
.hotels-bx .bz-stay__band { background:rgba(255,255,255,0.34); }
/* ink stays dark; a faint light halo keeps it crisp over the brightest photo */
.hotels-bx .bz-nm { text-shadow:0 1px 2px rgba(255,255,255,0.5); }
.hotels-bx .bz-stay__meta,
.hotels-bx .bz-venue__foot { color:var(--ink); }
/* the "· Town" sub is --muted-2 (rgb(161)) by default, too faint over the frost;
   lift it to body ink so it stays legible on the glass */
.hotels-bx .bz-sub { color:var(--body); }
/* chips: translucent, or they punch opaque grey holes in the glass */
.hotels-bx .bz-chip { background:rgba(255,255,255,0.55); color:var(--body); }
.hotels-bx .bz-chip--food { background:rgba(247,242,234,0.6); }
.hotels-bx .bz-chip--halal { background:rgba(232,243,236,0.66); }
.hotels-bx .bz-chip--diet { background:rgba(20,123,130,0.14); }

/* concierge bar + the results pill: same frost. The results pill is the glass
   surface; the count and sort sit transparent inside it. */
.hotels-bx .hts-search,
.hotels-bx .hts-filters,
.hotels-bx .hts-results,
.hotels-bx .hts-pill {
  background:rgba(255,255,255,0.52);
  backdrop-filter:blur(22px) saturate(160%); -webkit-backdrop-filter:blur(22px) saturate(160%);
  border:1px solid rgba(255,255,255,0.6);
  box-shadow:0 10px 26px -16px rgba(4,12,14,0.4), inset 0 1px 0 rgba(255,255,255,0.6);
}
.hotels-bx .hts-filters.is-on { border-color:var(--teal); background:rgba(20,123,130,0.14); }
.hotels-bx .hts-results__count { color:var(--body); }
.hotels-bx .hts-sortbtn { color:var(--ink); background:none; box-shadow:none; border:0; }
/* the sort dropdown carries dense text, so it stays a solid readable panel */
.hotels-bx .hts-menu { background:var(--glass-panel-bg); backdrop-filter:var(--glass-panel-blur);
  -webkit-backdrop-filter:var(--glass-panel-blur); box-shadow:var(--glass-panel-shadow); }

/* Place-page FAQ — question-phrased H3s (answer-engine question_headings) with a
   visible answer that matches the FAQPage JSON-LD (schema_agreement). */
.pd-faq { margin: 22px 0 8px; }
.pd-faq .pd-h2 { margin: 0 0 12px; }
.pd-faq__item { padding: 14px 0; border-top: 1px solid var(--hairline); }
.pd-faq__item:first-of-type { border-top: 0; }
.pd-faq__q { margin: 0 0 6px; font-size: 15px; font-weight: 700; color: var(--ink); }
.pd-faq__a { margin: 0; font-size: 14px; line-height: 1.6; color: var(--body); }

/* Article/news answer-first lead + FAQ as question headings (AEO direct_answer_len
   + question_headings; the FAQ text mirrors the FAQPage JSON-LD for schema_agreement). */
.kb-article__lead { margin: 4px 0 14px; font-size: 15.5px; line-height: 1.6; color: var(--ink); font-weight: 500; }
.kb-faq { margin: 4px 0 0; }
.kb-faq__item { padding: 14px 0; border-top: 1px solid var(--hairline); }
.kb-faq__item:first-of-type { border-top: 0; }
.kb-faq__q { margin: 0 0 6px; font-size: 15px; font-weight: 700; color: var(--ink); }
.kb-faq__a { margin: 0; font-size: 14px; line-height: 1.6; color: var(--body); }

/* Live-alert attribution + severity accent in the notifications feed. */
.notif-item__source { display:block; font-size:11.5px; color:var(--muted-2); margin-top:2px; }
.notif-item__icon--alert { position:relative; }

/* Live Metro Bus routes (from lankametro.lk/api/routes). */
.metro-routes { margin:10px 0 4px; }
.metro-routes__h { display:block; font-size:12px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; margin-bottom:8px; }
.metro-route { display:flex; align-items:center; gap:9px; padding:7px 0; }
.metro-route__dot { width:12px; height:12px; border-radius:50%; flex:none; box-shadow:0 0 0 2px rgba(255,255,255,.6); }
.metro-route__name { font-size:13.5px; font-weight:600; color:var(--ink); }
.metro-route__status { font-size:11px; color:var(--muted-2); background:var(--teal-surface); padding:1px 7px; border-radius:9999px; }

/* "Get around" cross-links on place pages. */
.pd-inline-link { color:var(--teal); font-weight:600; }
.pd-info__row--links .pd-info__value { line-height:1.5; }

/* Flights board state banner: sample / stale / live must be unmistakable. */
.flt-banner { display:flex; align-items:flex-start; gap:8px; padding:10px 12px; border-radius:12px; font-size:12.5px; line-height:1.45; margin-bottom:12px; }
.flt-banner a { font-weight:600; text-decoration:underline; }
.flt-banner--sample { background:#fff4e5; color:#8a5200; border:1px solid #f6cf8f; }
.flt-banner--stale  { background:#fdecea; color:#8a1c12; border:1px solid #f2b8b2; }
.flt-banner--live   { background:var(--teal-surface,#e6f4f4); color:var(--teal,#0f6b70); border:1px solid #b9e0e0; align-items:center; }
.flt-banner__dot { width:8px; height:8px; border-radius:50%; background:#1bbf6b; flex:none; box-shadow:0 0 0 3px rgba(27,191,107,.2); }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .flt-banner--sample{background:#3a2a10;color:#f0c98a;border-color:#6b4e1e}
 :root:not([data-theme="light"]) .flt-banner--stale{background:#3a1714;color:#f0a89f;border-color:#6b2820} }
.fh-sample { color:#8a5200; font-weight:600; font-size:11.5px; }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .fh-sample{color:#f0c98a} }

/* Mock-OTP test-mode banner (verify screen; non-production host only). */
.mock-otp { margin:0 0 14px; padding:14px 16px; border:2px dashed #d98a00; border-radius:14px; background:#fff8ec; text-align:center; }
.mock-otp__tag { display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:#8a5200; }
.mock-otp__code { font-size:34px; font-weight:800; letter-spacing:.22em; color:#5c3a00; margin:8px 0 4px; font-variant-numeric:tabular-nums; }
.mock-otp__note { font-size:12px; color:#8a5200; margin:0; }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .mock-otp{background:#3a2a10;border-color:#a06a00}
 :root:not([data-theme="light"]) .mock-otp__tag,:root:not([data-theme="light"]) .mock-otp__note{color:#f0c98a}
 :root:not([data-theme="light"]) .mock-otp__code{color:#ffdfa0} }