/* ============================================================
   TOKENS
   ============================================================ */
:root{
  --jade:#123C33; --jade-deep:#0B2620; --jade-soft:#1C4E43; --jade-70:rgba(18,60,51,.7);
  --cream:#EFE9DC; --sand:#FBF8F1; --paper:#FFFFFF;
  --surf:#0FB5AE; --surf-deep:#0A8A85; --surf-soft:#DCF1EF;
  --lotus:#F26D6D; --gold:#C79A3E;
  --ink:#15211D; --ink-soft:#33443D; --muted:#67766E; --faint:#9AA69F;
  --line:rgba(18,32,28,.10); --line-2:rgba(18,32,28,.16);
  --f-disp:'Fraunces',Georgia,serif;
  --f-alt:'Inter','Plus Jakarta Sans',system-ui,sans-serif;
  --f-ui:'Plus Jakarta Sans',system-ui,sans-serif;
  --f-mono:'Roboto Mono',ui-monospace,monospace;
  --sh-1:0 2px 8px rgba(18,40,32,.06),0 1px 2px rgba(18,40,32,.08);
  --sh-2:0 10px 30px rgba(18,40,32,.10),0 3px 8px rgba(18,40,32,.06);
  --sh-3:0 20px 48px rgba(11,38,32,.22);
  --ease:cubic-bezier(.22,.61,.36,1);
  --r:22px; --r-lg:28px; --r-sm:14px;
}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:#0C1410;
  min-height:100vh;
  font-family:var(--f-ui);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  display:flex;justify-content:center;
  overflow-x:hidden;
}
/* STATIC forest backdrop — plane in the pines, behind the app shell.
   A single fixed pseudo-element. No animation → nothing for Safari to
   restart on stylesheet injection, and no per-tab switching. Height is
   pinned to the large viewport (100vh/100lvh) rather than bottom-anchored
   so the iOS toolbar collapsing/expanding never reframes the photo. */
body::before{
  content:'';position:fixed;top:0;left:0;right:0;
  height:100vh;height:100lvh;z-index:-1;pointer-events:none;
  background:#0C1410 url('img/backdrop-forest.jpg') center/cover no-repeat;
}
.material-symbols-rounded{font-variation-settings:'opsz' 24,'wght' 400,'FILL' 0,'GRAD' 0;line-height:1}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
img{display:block;max-width:100%}

/* ============================================================
   APP SHELL — a phone-width column
   ============================================================ */
.app{
  width:100%;max-width:440px;min-height:100vh;position:relative;
  /* translucent DARK veil: the forest backdrop reads through the shell;
     the dark-backdrop theme at the end of this file flips on-background
     text to warm white (cards stay light) */
  background:rgba(10,17,13,.55);
  box-shadow:0 40px 120px rgba(11,38,32,.16);
  padding-bottom:96px;
}
@media(min-width:480px){ .app{min-height:auto;margin:22px 0;border-radius:38px} }

/* ============================================================
   TOP BAR (glass)
   ============================================================ */
.topbar{
  position:sticky;top:0;z-index:40;
  display:flex;align-items:center;gap:12px;
  padding:calc(env(safe-area-inset-top,0px) + 16px) 18px 12px;
  background:linear-gradient(rgba(10,17,13,.88) 55%, transparent);
}
.tb-btn{
  width:44px;height:44px;border-radius:50%;flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;
  background:var(--paper);box-shadow:var(--sh-1);color:var(--jade);
}
.tb-btn .material-symbols-rounded{font-size:22px}
.tb-title{flex:1;min-width:0}
.tb-title .ey{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--surf-deep)}
.tb-title .nm{font-size:15px;font-weight:700;color:var(--ink);margin-top:1px}
.tb-av{width:44px;height:44px;border-radius:50%;flex:0 0 auto;object-fit:cover;box-shadow:var(--sh-1);border:2px solid var(--paper)}

.scroll{padding:2px 18px 0}

/* ============================================================
   HERO — the day, on a photo (editorial + ref4 card)
   ============================================================ */
.hero{
  position:relative;border-radius:var(--r-lg);overflow:hidden;
  min-height:270px;display:flex;flex-direction:column;justify-content:flex-end;
  box-shadow:var(--sh-3);isolation:isolate;
}
.hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:opacity .5s var(--ease);will-change:transform}
.hero-scrim{position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(11,38,32,.05) 0%,rgba(11,38,32,.35) 46%,rgba(11,38,32,.86) 100%)}
.hero-top{position:absolute;top:16px;left:16px;right:16px;display:flex;justify-content:space-between;align-items:flex-start;z-index:2}
.chip-glass{
  display:inline-flex;align-items:center;gap:6px;
  padding:8px 13px;border-radius:99px;
  background:rgba(255,255,255,.16);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.22);
  color:#fff;font-size:12px;font-weight:600;
}
.chip-glass .material-symbols-rounded{font-size:15px}
.fav{
  width:40px;height:40px;border-radius:50%;
  background:rgba(255,255,255,.16);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.22);color:#fff;
  display:flex;align-items:center;justify-content:center;
}
.fav.on{background:var(--lotus);border-color:transparent}
.fav.on .material-symbols-rounded{font-variation-settings:'FILL' 1}
.hero-body{padding:20px;z-index:1}
.hero-eyebrow{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.hero-daynum{font-family:var(--f-mono);font-size:12px;font-weight:600;letter-spacing:.12em;color:#fff;opacity:.85}
.hero-eyebrow .dot{width:4px;height:4px;border-radius:50%;background:var(--surf)}
.hero-eyebrow .city{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--surf);text-shadow:0 1px 8px rgba(0,0,0,.3)}
.hero-city{
  font-family:var(--f-disp);font-optical-sizing:auto;
  font-size:40px;font-weight:560;line-height:.98;color:#fff;letter-spacing:-.02em;
  text-shadow:0 2px 24px rgba(0,0,0,.25);
}
.hero-title{font-size:14.5px;font-weight:500;color:rgba(255,255,255,.9);margin-top:9px;line-height:1.35}
.hero-meta{display:flex;gap:8px;margin-top:15px;flex-wrap:wrap}
.hpill{
  display:inline-flex;align-items:center;gap:6px;padding:8px 12px;border-radius:14px;
  background:rgba(255,255,255,.14);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.18);color:#fff;font-size:12.5px;font-weight:600;
}
.hpill .material-symbols-rounded{font-size:16px;color:var(--surf)}
.hpill .num{font-family:var(--f-mono);font-weight:600}

/* ============================================================
   CALENDAR RAIL (ref 4)
   ============================================================ */
.cal{margin-top:22px}
.cal-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:12px}
.cal-month{font-family:var(--f-disp);font-size:19px;font-weight:540;color:var(--ink)}
.cal-sub{font-size:12px;font-weight:600;color:var(--muted)}
.cal-rail{display:flex;gap:9px;overflow-x:auto;padding:4px 2px 8px;scrollbar-width:none;scroll-snap-type:x proximity}
.cal-rail::-webkit-scrollbar{display:none}
.day{
  flex:0 0 auto;width:52px;scroll-snap-align:center;
  display:flex;flex-direction:column;align-items:center;gap:7px;
  padding:10px 0 9px;border-radius:18px;
  background:var(--sand);border:1px solid var(--line);
  position:relative;transition:transform .15s var(--ease);
}
.day:active{transform:scale(.95)}
.day-wd{font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--faint)}
.day-n{
  width:34px;height:34px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--f-mono);font-size:15px;font-weight:600;color:var(--ink);
  transition:background .2s var(--ease),color .2s var(--ease);
}
.day-dot{width:5px;height:5px;border-radius:50%;background:var(--surf);opacity:0;transition:opacity .2s}
.day.has .day-dot{opacity:1}
.day.sel{background:var(--jade);border-color:transparent;box-shadow:var(--sh-2)}
.day.sel .day-wd{color:rgba(255,255,255,.7)}
.day.sel .day-n{background:var(--surf);color:#04322f}
.day.sel .day-dot{background:#fff;opacity:.9}
.day.anniv .day-n{box-shadow:0 0 0 2px var(--gold)}
.day.anniv.sel .day-n{background:var(--gold);color:#3a2a05;box-shadow:none}

/* ============================================================
   MAP CARD
   ============================================================ */
.mapwrap{position:relative;margin-top:20px;border-radius:var(--r);overflow:hidden;box-shadow:var(--sh-2);border:1px solid var(--line)}
#map{height:210px;width:100%;background:#e9efec}
.map-ctrls{position:absolute;top:12px;right:12px;z-index:500;display:flex;flex-direction:column;gap:8px}
.map-btn{width:40px;height:40px;border-radius:13px;background:var(--paper);box-shadow:var(--sh-1);display:flex;align-items:center;justify-content:center;color:var(--jade)}
.map-btn .material-symbols-rounded{font-size:20px}
.map-open{position:absolute;left:12px;bottom:12px;z-index:500}
.map-open .chip-glass{background:rgba(11,38,32,.62);border-color:rgba(255,255,255,.14)}
.leaflet-tile{filter:saturate(.92) brightness(1.02)}
.leaflet-control-attribution{font-size:9px;opacity:.6}
.pin{
  width:30px;height:30px;border-radius:50% 50% 50% 2px;transform:rotate(45deg);
  background:var(--jade);border:2px solid #fff;box-shadow:0 4px 10px rgba(0,0,0,.28);
  display:flex;align-items:center;justify-content:center;
}
.pin.anniv{background:var(--gold)}
.pin b{transform:rotate(-45deg);color:#fff;font-family:var(--f-mono);font-size:12px;font-weight:700}
.pin.sea{background:var(--surf)}
.pin.done{opacity:.45}

/* ============================================================
   ACTIVITIES + JOURNEY THREAD (signature)
   ============================================================ */
.sec-head{display:flex;align-items:baseline;justify-content:space-between;margin:26px 2px 4px}
.sec-title{font-family:var(--f-disp);font-size:21px;font-weight:540;color:var(--ink)}
.sec-count{font-family:var(--f-mono);font-size:12px;font-weight:600;color:var(--surf-deep);background:var(--surf-soft);padding:5px 10px;border-radius:99px}
.plan{position:relative;margin-top:14px;padding-left:34px}
.thread{position:absolute;left:14px;top:8px;bottom:34px;width:2.5px;overflow:hidden}
.thread::before{content:'';position:absolute;inset:0;background:linear-gradient(var(--surf),var(--surf-deep));border-radius:2px;transform-origin:top;transform:scaleY(var(--thread,1))}
.act{
  position:relative;margin-bottom:12px;
  background:var(--paper);border-radius:var(--r-sm);padding:14px 15px 14px 14px;
  box-shadow:var(--sh-1);border:1px solid var(--line);
  display:flex;gap:12px;align-items:flex-start;
  transition:transform .2s var(--ease),box-shadow .2s var(--ease),opacity .2s var(--ease),background .2s var(--ease);
  will-change:transform,box-shadow,opacity;
  user-select:none;
  -webkit-user-select:none;
}
.act:active{transform:scale(.985)}
.act.drag-ghost{
  opacity:0.22!important;
  background:rgba(18,60,51,.04)!important;
  border:1px dashed var(--line-2)!important;
  box-shadow:none!important;
}
.act.drag-chosen{
  box-shadow:0 12px 28px rgba(11,38,32,0.12)!important;
  transform:scale(1.025);
}
.sortable-fallback-card{
  opacity:0.95!important;
  background:rgba(255,255,255,0.92)!important;
  border:1px solid var(--surf-deep)!important;
  box-shadow:0 18px 40px rgba(11,38,32,0.22)!important;
  transform:scale(1.03) rotate(1.5deg)!important;
  backdrop-filter:blur(8px)!important;
  -webkit-backdrop-filter:blur(8px)!important;
  z-index:99999!important;
  pointer-events:none;
}
/* The rail node is the done-checkbox. A white fill + jade ring reads as an empty
   box on BOTH surfaces it lives on — the cream page and the dark forest backdrop —
   so it needs no theme override. Ticked = solid jade with a white check. */
.node{
  position:absolute;left:-34px;top:16px;
  width:28px;height:28px;border-radius:50%;
  background:var(--paper);color:transparent;
  border:2px solid var(--jade);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 0 0 4px var(--cream);z-index:2;
  padding:0;cursor:pointer;-webkit-tap-highlight-color:transparent;
  transition:background .18s var(--ease),color .18s var(--ease),border-color .18s var(--ease);
}
.node .material-symbols-rounded{font-size:17px;font-weight:700;line-height:1}
.act.done .node{background:var(--jade);color:#fff}
.act.a-anniv .node{border-color:var(--gold)}
.act.a-anniv.done .node{background:var(--gold);color:#3a2a05}

/* Done: fade the whole card, strike the title only — striking a three-line note
   reads as damage rather than completion. */
.act.done{opacity:.55}
.act.done .act-title{text-decoration:line-through;text-decoration-thickness:1.5px}
/* The stop's number, displaced from the node so the map pins still have a referent. */
.act-n{font-family:var(--f-mono);font-size:11px;font-weight:600;color:var(--faint)}
.act-icn{
  width:38px;height:38px;border-radius:12px;flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;
  background:var(--surf-soft);color:var(--surf-deep);
}
.act-icn .material-symbols-rounded{font-size:21px}
.a-anniv .act-icn{background:#F6ECD4;color:var(--gold)}
.act-body{flex:1;min-width:0;user-select:none;-webkit-user-select:none;}
.act-top{display:flex;align-items:center;gap:9px}
.act-time{font-family:var(--f-mono);font-size:12px;font-weight:600;color:var(--surf-deep)}
.act-time.free{color:var(--faint)}
.act-title{font-size:14.5px;font-weight:700;color:var(--ink);line-height:1.28;margin-top:3px}
.act-note{font-size:12.5px;color:var(--muted);line-height:1.45;margin-top:3px}
.act-grip{
  align-self:center;color:var(--faint);font-size:24px;cursor:grab;
  touch-action:none;
  -webkit-touch-callout:none;
  user-select:none;
  -webkit-user-select:none;
  padding:8px 6px;
  margin-right:-4px;
}
.act-grip:active{cursor:grabbing}
.add{
  display:flex;align-items:center;justify-content:center;gap:8px;width:100%;
  margin-top:2px;padding:14px;border-radius:var(--r-sm);
  border:1.5px dashed var(--line-2);color:var(--jade-soft);
  font-weight:700;font-size:13.5px;background:rgba(255,255,255,.4);
}
.add .material-symbols-rounded{font-size:20px}

/* nearby */
.near{margin-top:28px}
.near-h{font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);margin:0 2px 12px}
.near-row{display:flex;gap:12px;overflow-x:auto;padding:2px 2px 8px;scrollbar-width:none}
.near-row::-webkit-scrollbar{display:none}
.ncard{flex:0 0 200px;border-radius:var(--r);overflow:hidden;background:var(--paper);box-shadow:var(--sh-1);border:1px solid var(--line)}
.ncard img{height:112px;width:100%;object-fit:cover}
.ncard-b{padding:12px 13px 14px}
.ncard-t{font-size:13.5px;font-weight:700;color:var(--ink)}
.ncard-m{font-size:11.5px;color:var(--muted);margin-top:3px;display:flex;align-items:center;gap:4px}
.ncard-m .material-symbols-rounded{font-size:13px;color:var(--surf-deep)}
.ncard-add{margin-top:10px;display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:700;color:var(--surf-deep)}

/* ============================================================
   BOTTOM NAV (glass, sliding indicator)
   ============================================================ */
.nav{
  position:fixed;left:50%;transform:translateX(-50%);
  bottom:calc(14px + env(safe-area-inset-bottom,0px));
  width:min(408px,calc(100% - 28px));z-index:60;
  display:flex;justify-content:space-around;align-items:center;
  padding:9px 10px;border-radius:26px;
  background:rgba(15,44,37,.9);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  box-shadow:0 16px 40px rgba(11,38,32,.4);border:1px solid rgba(255,255,255,.08);
}
.nav-ind{position:absolute;top:9px;height:calc(100% - 18px);width:64px;border-radius:18px;background:rgba(15,181,174,.16);border:1px solid rgba(15,181,174,.4);transition:left .35s var(--ease);left:9px}
.nitem{position:relative;z-index:2;flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:7px 0;color:rgba(255,255,255,.55)}
.nitem .material-symbols-rounded{font-size:23px}
.nitem span:last-child{font-size:10px;font-weight:600;letter-spacing:.01em}
.nitem.on{color:#fff}
.nitem.on .material-symbols-rounded{font-variation-settings:'FILL' 1;color:var(--surf)}

/* toast */
/* width:max-content — see the note on .ap-toast below; this rule has the same
   shape and had the same bug. left:50% with no right and no width makes the
   available width 100vw − 50vw, so the pill could never exceed HALF the
   viewport however short its text was. max-width is paired with it because
   max-content on its own is uncapped, and a long message would then run off
   the right edge instead of wrapping. */
.toast{
  position:fixed;left:50%;transform:translateX(-50%) translateY(20px);
  bottom:calc(84px + env(safe-area-inset-bottom,0px));z-index:80;
  width:max-content;max-width:min(92vw,420px);
  background:var(--jade);color:#fff;padding:11px 18px;border-radius:14px;
  font-size:13px;font-weight:600;box-shadow:var(--sh-3);opacity:0;pointer-events:none;
  transition:opacity .3s,transform .3s var(--ease);
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
/* .ap-toast is the element core.js:43 actually creates. Until now it was styled
   ONLY inside two screen modules' injected <style> blocks (screen-trip.js and
   screen-guide.js), which run on those screens' onEnter — so on Home → Setup →
   Checklist, the most ordinary path there is, the snackbar had NO container
   styles at all. It rendered as a tall unstyled column in normal flow over the
   topbar, and — because opacity and pointer-events both come from this rule —
   it never faded and its action button stayed live forever, so a dismissed
   Undo could still fire and write a stale snapshot over later edits. This rule
   is now the ONLY one: both screen copies have been deleted, so the snackbar's
   geometry no longer depends on which screens the session happened to visit.

   width:max-content is load-bearing, not tidying. position:fixed + left:50%
   with no right and no width makes the shrink-to-fit available width
   100vw − 50vw, so the pill was hard-capped at HALF the viewport — 188px on a
   375px phone — and the max-width below never bound at all. "Item deleted" plus
   its icon and Undo button wrapped to three lines. max-content sizes the pill
   to its content and lets max-width do the capping, with translateX(-50%)
   still centring it because the transform is relative to the used width. */
.ap-toast{
  position:fixed;left:50%;transform:translateX(-50%) translateY(20px);
  bottom:calc(84px + env(safe-area-inset-bottom,0px));z-index:1200;
  display:flex;align-items:center;gap:8px;
  width:max-content;max-width:min(92vw,420px);
  background:var(--jade);color:#fff;padding:11px 18px;border-radius:14px;
  font-size:13px;font-weight:600;line-height:1.5;box-shadow:var(--sh-3);
  opacity:0;pointer-events:none;transition:opacity .3s var(--ease),transform .3s var(--ease);
}
.ap-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.ap-toast .material-symbols-rounded{font-size:18px;color:var(--surf);flex:0 0 auto}
.ap-toast-act{
  margin-left:auto; padding:6px 12px; border:none; border-radius:99px;
  background:rgba(255,255,255,.16); color:#fff;
  font-family:var(--f-ui); font-weight:700; font-size:12.5px;
  letter-spacing:.02em; cursor:pointer; flex:0 0 auto; min-height:32px;
}
.ap-toast-act:active{ background:rgba(255,255,255,.28); }
/* .ap-toast is pointer-events:none and pointer-events inherits, so a tap would
   otherwise fall straight through this button to whatever sits beneath it.
   Scoped to .show on purpose: unscoped, a dismissed toast (opacity:0, still in
   the DOM, still over the page) would leave an invisible click target behind.
   An explicit declaration beats the inherited none wherever .ap-toast lives.
   The base rule above is what makes this guard bite — without a container
   rule in a stylesheet that is ALWAYS loaded, there is no inherited none to
   scope against and the button is live on every screen, dismissed or not. */
.ap-toast.show .ap-toast-act{ pointer-events:auto; }

.rd-badge{position:fixed;top:12px;left:12px;z-index:90;font-size:11px;font-weight:700;letter-spacing:.04em;
  background:var(--jade);color:var(--surf);padding:6px 11px;border-radius:99px;box-shadow:var(--sh-2);opacity:.92}
@media(min-width:480px){.rd-badge{top:34px;left:34px}}

@media(prefers-reduced-motion:reduce){*{animation-duration:.001s!important;transition-duration:.05s!important}}

/* ==== v2 SHELL (screen router) ==== */
.screen{width:100%}
.screen.hidden{display:none!important}
.screen-body{padding:2px 18px 0}

/* ==== v2 shared: full-bleed heroes · Ken Burns · lazy photos ==== */
/* .bleed cancels the 18px body padding so a hero runs edge-to-edge
   inside the phone frame (the .app has overflow:hidden so corners clip). */
.bleed{margin-left:-18px;margin-right:-18px;border-radius:0!important}
.bleed.hero,.bleed.mapwrap{box-shadow:none;border:none}

/* slow Ken Burns drift on hero photos (disabled under reduced-motion by the
   global rule above; the img already has will-change:transform) */
@keyframes kenburns{
  0%{transform:scale(1.05) translate(0,0)}
  50%{transform:scale(1.14) translate(-1.6%,-1.4%)}
  100%{transform:scale(1.05) translate(0,0)}
}
.kenburns{animation:kenburns 28s ease-in-out infinite}

/* horizontal rails scroll sideways ONLY — kill the iOS vertical drag/rubber-band.
   The calendar additionally locks touch to pan-x (it's short, so losing it as a
   page-scroll surface costs nothing); the tall card rows keep vertical page
   scrolling so a swipe starting on a card still scrolls the page. */
.cal-rail,.near-row,.jrow,.exp-filters{overflow-y:hidden}
.cal-rail{touch-action:pan-x}

/* ============================================================
   DARK BACKDROP THEME — with the forest photo + dark veil, any
   text sitting DIRECTLY on the backdrop flips to warm white;
   cards/pills keep their light surfaces. `html` prefix outranks
   the equal-specificity rules screen modules inject at runtime.
   ============================================================ */
html .tb-title .nm{color:#F4F1E8}
html .tb-title .ey{color:var(--surf)}
html .sec-title{color:#F4F1E8}
html .cal-month{color:#F4F1E8}
html .cal-sub{color:rgba(244,241,232,.65)}
html .near-h{color:rgba(244,241,232,.7)}
html .node{box-shadow:0 0 0 4px rgba(10,17,13,.6)}
/* trip */
html .trip-dayhead .hero-city{color:#F4F1E8}
html .trip-dayhead .hero-daynum{color:rgba(244,241,232,.6)}
html .trip-dayhead .hero-title{color:rgba(244,241,232,.75)}
html .trip-dayhead .hero-eyebrow .city{color:var(--surf)}
html .trip-seg{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.14)}
html .trip-seg-btn{color:rgba(244,241,232,.65)}
html .trip-acts .leg{color:rgba(244,241,232,.75)}
html .trip-acts .leg b{color:#F4F1E8}
html .trip-acts .leg-dir{color:var(--surf)}
/* home */
html #screen-home .qlink-cat{color:rgba(244,241,232,.7)}
html #screen-home .jdot{background:rgba(255,255,255,.32)}
html #screen-home .jdot.on{background:var(--surf)}
/* apps */
html .ap-mast h1{color:#F4F1E8}
html .ap-mast p{color:rgba(244,241,232,.7)}
html .ap-mast .ap-ey{color:var(--surf)}
html .ap-cat{color:rgba(244,241,232,.65)}
html .ap-note{color:rgba(244,241,232,.55)}
/* guide */
html .g-mast h1{color:#F4F1E8}
html .g-mast p{color:rgba(244,241,232,.7)}
html .g-mast .g-ey{color:var(--surf)}
html .g-note{color:rgba(244,241,232,.68)}
html .g-note strong{color:#F4F1E8}
html .g-ph-h{color:var(--surf)}
html .g-fine{color:rgba(244,241,232,.5)}
html .g-cam-cap{color:rgba(244,241,232,.6)}
html .g-cam-cap strong{color:#F4F1E8}
html .g-cam-cap a{color:var(--surf)}
/* stays */
html .st-eyebrow{color:var(--surf)}
html .st-tier-name{color:rgba(244,241,232,.7)}
html .st-tier-name.is-booked{color:var(--surf)}
html .st-flight-date{color:#F4F1E8}
html .st-preset-lbl{color:rgba(244,241,232,.65)}
html .st-route{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.16);color:rgba(244,241,232,.7)}
/* explore */
html .exp-title{color:#F4F1E8}
html .exp-title em{color:var(--lotus)}
html .exp-sub{color:rgba(244,241,232,.7)}
html .exp-eyebrow{color:var(--surf)}
/* (.exp-status/.exp-hint/.exp-sim-lbl live INSIDE the white locate card — keep their muted ink colors) */

/* lazy photo: gradient+glyph placeholder that the real image fades over */
.ph{position:relative;overflow:hidden;background:linear-gradient(150deg,var(--surf-soft),var(--cream))}
.ph-glyph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--surf-deep);z-index:0;pointer-events:none}
.ph-glyph .material-symbols-rounded{font-size:30px;opacity:.55}
.ph-img{position:relative;z-index:1;opacity:0;transition:opacity .55s var(--ease)}
.ph-img.ph-loaded{opacity:1}
.ph.ph-none .ph-img{display:none}