/* ══════════════════════════════════════════════════════════════════════
   Pathfinder · one palette for the whole app.

   The opening screen is the reference: deep moss ground, cream serif
   headlines, grey-green mono captions, one pale-sage action. Everything
   below re-uses the SAME tokens and the SAME serif stack as the opening
   screen, so the two can never drift apart again. There is no cream card
   anywhere and no second, lighter theme.
   ══════════════════════════════════════════════════════════════════════ */
/* NB: the theme block in styles.css is `:root.cyberpunk`, and :root is a
   pseudo-CLASS — that selector scores (0,2,0) and quietly outranked a plain
   `html.atlas-ui` (0,1,1). Every token remap below was being ignored. Match
   its shape so source order decides, and we load last. */
html:root.atlas-ui {
  --pf-bg:#23261f;
  --pf-surface:#2b2f26;
  --pf-surface-2:#32362b;
  --pf-line:#434936;
  --pf-line-soft:#373c2e;
  --pf-cream:#efe9d9;
  --pf-cream-2:#d7d3c0;
  --pf-muted:#a7ad94;
  --pf-dim:#848a70;
  --pf-sage:#bcc7a3;
  --pf-sage-2:#cdd7b6;
  --pf-sage-ink:#252b1d;
  --pf-serif:Georgia,'Noto Serif KR',serif;
  /* Every legacy accent token is re-pointed at this one palette. Mapping
     --coral onto the sage is deliberate: it is what removes the second
     accent hue from the stamps, the ticket totals, the progress pins and a
     hundred other places at once, without hunting each of them down. */
  --paper:#23261f; --paper-2:#2b2f26; --paper-3:#32362b;
  --ink:#efe9d9; --ink-2:#d7d3c0; --ink-3:#a7ad94; --ink-soft:#a7ad94;
  --sage:#bcc7a3; --sage-soft:#cdd7b6; --sage-bg:rgba(188,199,163,.13);
  --coral:#bcc7a3; --coral-soft:#cdd7b6; --coral-bg:rgba(188,199,163,.10);
  --gold:#c9b689; --gold-soft:#ddcda6; --gold-bg:rgba(201,182,137,.13);
  --hair:rgba(226,226,206,.14); --hair-2:rgba(226,226,206,.26);
  --display:Georgia,'Noto Serif KR',serif;
  color-scheme:dark;
}
html.atlas-ui, html.atlas-ui body { height:auto; min-height:100%; overflow-x:hidden; overflow-y:auto; background:var(--pf-bg); }
html.atlas-ui body { padding:0; color:var(--pf-cream); }
html.atlas-ui #root { width:100%; height:auto; min-height:100vh; overflow:visible; }
.atlas-ui [data-screen-label="01 World Map"] { min-height:100vh; position:relative; background:var(--pf-bg); }
.atlas-ui [data-screen-label="01 World Map"] > .bg-paper,
.atlas-ui [data-screen-label="01 World Map"] > .bg-noise { display:none; }

/* ───────────────────────── shell ───────────────────────── */
.atlas-desk {
  width:100%; max-width:560px; margin:0 auto;
  padding:0 20px calc(34px + env(safe-area-inset-bottom,0px));
  color:var(--pf-cream); font-family:var(--sans); font-size:14px; line-height:1.55;
}
/* NB: no colour or background in this reset. A one-class-plus-element
   selector outranks the single-class component rules below, which silently
   repainted every button in the desk. Keep this rule typographic only. */
.atlas-desk button, .atlas-desk input { font:inherit; }
.atlas-desk button { cursor:pointer; border:0; -webkit-tap-highlight-color:transparent; }
.atlas-desk input { color:var(--pf-cream); }
.atlas-desk button:disabled { cursor:default; }
.atlas-desk button:focus-visible, .atlas-desk input:focus-visible { outline:2px solid var(--pf-sage); outline-offset:3px; }
.ad-kicker { font:9px/1.6 var(--mono); letter-spacing:2px; text-transform:uppercase; color:var(--pf-dim); margin:0; }

/* header */
.ad-top {
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:calc(16px + env(safe-area-inset-top,0px)) 0 14px;
}
.ad-brand { font:400 25px/1 var(--pf-serif); letter-spacing:-.5px; color:var(--pf-cream); display:inline-flex; align-items:baseline; gap:5px; }
.ad-brand i { width:5px; height:5px; border-radius:50%; background:var(--pf-sage); display:inline-block; }
.ad-nav { display:flex; gap:4px; }
.ad-nav button { width:40px; height:40px; display:grid; place-items:center; border-radius:50%; color:var(--pf-muted); }
.ad-nav button:hover { color:var(--pf-cream); background:var(--pf-surface); }

/* where you are + what you have */
.ad-here {
  display:flex; align-items:flex-end; justify-content:space-between; gap:18px;
  padding:18px 0 20px; border-top:1px solid var(--pf-line-soft);
}
.ad-here-main { min-width:0; }
.ad-here h1 {
  font:400 clamp(30px,8.6vw,38px)/1.15 var(--pf-serif); letter-spacing:-.8px;
  margin:9px 0 8px; color:var(--pf-cream); display:flex; align-items:center; gap:9px; overflow-wrap:anywhere;
}
.ad-flag { font-size:.72em; line-height:1; }
.ad-here-link { display:inline-flex; align-items:center; gap:6px; color:var(--pf-muted); font-size:11px; padding:4px 0; min-height:32px; }
.ad-here-link:hover:not(:disabled) { color:var(--pf-sage); }
.ad-here-link:disabled { opacity:.45; }
.ad-funds { text-align:right; flex-shrink:0; padding-bottom:4px; }
.ad-funds small { display:block; font:9px var(--mono); letter-spacing:1.5px; text-transform:uppercase; color:var(--pf-dim); }
.ad-funds strong { display:block; font:400 30px/1.2 var(--pf-serif); color:var(--pf-cream); font-variant-numeric:tabular-nums; margin-top:3px; }
.ad-funds strong span { font-size:.55em; color:var(--pf-muted); margin-right:2px; }

.ad-section-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; }
.ad-text-btn { display:inline-flex; align-items:center; gap:6px; color:var(--pf-muted); font-size:11px; min-height:36px; }
.ad-text-btn:hover { color:var(--pf-sage); }

/* where next — a photograph of the city, nothing else */
.ad-next { padding-bottom:22px; }
.ad-photo {
  position:relative; overflow:hidden;
  background:radial-gradient(circle at 50% 38%, #3c4234 0%, #292d23 100%);
}
.ad-photo::before {
  content:attr(data-initial); position:absolute; inset:0; display:grid; place-items:center;
  font:400 clamp(48px,16vw,78px)/1 var(--pf-serif); color:#4e5544; letter-spacing:-2px;
}
.ad-photo img {
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity .45s ease;
  /* Photographs are tied to the palette by pulling the saturation down, NOT
     by dimming them. A flat multiply used to sit over the whole frame on top
     of the caption gradient, which made the destination — the one thing the
     screen is asking about — the darkest object on it, dimmer than its own
     two thumbnails. Every photo now gets exactly this and nothing else, so
     the three read at the same brightness. */
  filter:saturate(.72) contrast(1.03);
}
.ad-photo img.is-ready { opacity:1; }
.ad-hero { position:relative; border-radius:14px; overflow:hidden; border:1px solid var(--pf-line); background:var(--pf-surface); }
.ad-hero-photo { aspect-ratio:16/10; width:100%; }
.ad-hero::after {
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg,
    rgba(28,32,24,0) 0%, rgba(28,32,24,0) 34%,
    rgba(28,32,24,.30) 54%, rgba(28,32,24,.74) 78%, rgba(26,30,22,.95) 100%);
}
.ad-hero-body { position:absolute; left:0; right:0; bottom:0; z-index:2; padding:18px 18px 17px; }
.ad-hero-country {
  font:9px var(--mono); text-transform:uppercase; color:var(--pf-sage); margin:0;
  text-shadow:0 1px 6px rgba(16,20,13,.9), 0 0 18px rgba(16,20,13,.7);
}
.ad-hero-body h2 {
  font:400 clamp(28px,7.6vw,34px)/1.15 var(--pf-serif); letter-spacing:-.7px;
  color:var(--pf-cream); margin:7px 0 0; overflow-wrap:anywhere;
  text-shadow:0 2px 14px rgba(16,20,13,.6);
}
.ad-hero-note {
  display:flex; align-items:center; gap:7px; margin:9px 0 0; font-size:11.5px;
  color:var(--pf-cream-2); line-height:1.5; text-shadow:0 1px 8px rgba(16,20,13,.8);
}
.ad-hero-note svg { flex-shrink:0; color:var(--pf-sage); }
.ad-hero-empty { aspect-ratio:16/10; display:grid; place-items:center; }
.ad-hero-empty .ad-hero-body { position:static; text-align:center; }

.ad-alts { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:10px; }
.ad-alt {
  position:relative; display:block; text-align:left; border-radius:11px; overflow:hidden;
  border:1px solid var(--pf-line-soft); transition:border-color .18s;
}
.ad-alt:hover { border-color:var(--pf-sage); }
.ad-alt-photo { aspect-ratio:16/10; width:100%; }
.ad-alt::after {
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(28,32,24,0) 40%, rgba(26,30,22,.95) 100%);
}
.ad-alt-name {
  position:absolute; left:11px; right:11px; bottom:9px; z-index:2;
  font:400 16px/1.25 var(--pf-serif); color:var(--pf-cream); overflow-wrap:anywhere;
  text-shadow:0 1px 10px rgba(16,20,13,.65);
}

/* how you travel */
.ad-go { padding-bottom:22px; border-top:1px solid var(--pf-line-soft); padding-top:20px; }
.ad-go > .ad-kicker { margin-bottom:11px; }
.ad-modes { display:flex; flex-direction:column; gap:8px; }
.ad-mode {
  display:flex; align-items:center; gap:12px; width:100%; text-align:left; min-height:60px;
  padding:11px 14px; border:1px solid var(--pf-line); border-radius:10px;
  background:var(--pf-surface); color:var(--pf-cream-2); transition:background .18s, border-color .18s;
}
.ad-mode:hover:not(.is-selected) { border-color:#5b6249; background:var(--pf-surface-2); }
.ad-mode.is-selected { background:var(--pf-sage); border-color:var(--pf-sage-2); color:var(--pf-sage-ink); }
.ad-mode-icon { display:grid; place-items:center; width:24px; flex-shrink:0; color:var(--pf-muted); }
.ad-mode.is-selected .ad-mode-icon { color:#3c452f; }
.ad-mode-copy { min-width:0; flex:1; }
.ad-mode-copy strong { display:block; font-size:13px; font-weight:500; }
.ad-mode-copy small { display:block; font-size:10.5px; margin-top:3px; color:var(--pf-dim); line-height:1.45; }
.ad-mode.is-selected .ad-mode-copy small { color:#4c5540; }
.ad-mode-quote { display:flex; flex-direction:column; align-items:flex-end; flex-shrink:0; }
.ad-mode-quote strong { font:400 17px/1.2 var(--pf-serif); font-variant-numeric:tabular-nums; }
.ad-mode-quote small { font:9px var(--mono); color:var(--pf-dim); margin-top:3px; }
.ad-mode.is-selected .ad-mode-quote small { color:#4c5540; }

.ad-cabins { display:flex; gap:7px; margin-top:12px; flex-wrap:wrap; }
.ad-cabin {
  padding:8px 13px; min-height:36px; border:1px solid var(--pf-line); border-radius:999px;
  font:10px var(--mono); letter-spacing:.6px; color:var(--pf-muted); background:transparent;
}
.ad-cabin:hover { border-color:#5b6249; color:var(--pf-cream-2); }
.ad-cabin.is-selected { border-color:var(--pf-sage); color:var(--pf-sage); background:#2f3628; }

.ad-balance { display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin:20px 0 12px; font-size:11px; color:var(--pf-dim); }
.ad-balance strong { font:400 19px/1.2 var(--pf-serif); color:var(--pf-cream); font-variant-numeric:tabular-nums; }
.ad-depart {
  width:100%; min-height:54px; display:flex; align-items:center; justify-content:center; gap:10px;
  border-radius:8px; background:var(--pf-sage); color:var(--pf-sage-ink); font-size:14px; letter-spacing:.2px;
  transition:background .18s;
}
.ad-depart:hover:not(:disabled) { background:var(--pf-sage-2); }
.ad-depart:disabled { background:#3d422f; color:#8b9276; }
.ad-fare-note { text-align:center; font-size:10px; color:var(--pf-dim); margin:11px 0 0; }

.ad-inflight { padding:44px 0 40px; text-align:center; font:italic 400 20px/1.6 var(--pf-serif); color:var(--pf-cream-2); }

/* the collection strip */
.ad-stamps-row { border-top:1px solid var(--pf-line-soft); padding-top:20px; }
.ad-stamps { display:flex; gap:8px; margin-top:11px; }
.ad-stamp { width:40px; height:52px; display:grid; place-items:center; border:1px dashed var(--pf-line); border-radius:50% 50% 5px 5px; color:var(--pf-dim); }
.ad-stamp.is-collected { border:1px solid var(--pf-sage); color:var(--pf-sage); background:#333a29; }
.ad-collection-link { display:flex; align-items:center; gap:10px; width:100%; min-height:44px; color:var(--pf-muted); text-align:left; }
.ad-collection-link strong { font:400 17px/1.3 var(--pf-serif); color:var(--pf-cream); margin-left:auto; }
.ad-collection-link:hover { color:var(--pf-sage); }

.ad-notice { margin-top:16px; padding:13px 16px; border:1px solid var(--pf-line); border-radius:9px; background:var(--pf-surface-2); font-size:12px; color:var(--pf-cream-2); }

/* ───────────────────────── drawer ───────────────────────── */
.ad-drawer-scrim { position:fixed; inset:0; background:rgba(14,17,11,.82); z-index:850; display:flex; justify-content:flex-end; }
.ad-drawer {
  width:min(420px,100%); height:100%; display:flex; flex-direction:column;
  padding:calc(20px + env(safe-area-inset-top,0px)) 20px calc(20px + env(safe-area-inset-bottom,0px));
  background:var(--pf-surface); color:var(--pf-cream); border-left:1px solid var(--pf-line);
  box-shadow:-14px 0 60px rgba(10,13,8,.5);
}
.ad-drawer header { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:18px; }
.ad-drawer h2 { font:400 24px/1.2 var(--pf-serif); color:var(--pf-cream); margin:0; }
.ad-drawer header button { width:40px; height:40px; display:grid; place-items:center; border:1px solid var(--pf-line); border-radius:50%; color:var(--pf-muted); }
.ad-drawer header button:hover { color:var(--pf-cream); }
.ad-search { display:flex; align-items:center; gap:9px; padding:11px 13px; border:1px solid var(--pf-line); border-radius:8px; background:var(--pf-bg); margin-bottom:14px; color:var(--pf-muted); }
.ad-search input { flex:1; min-width:0; border:0; background:none; color:var(--pf-cream); }
.ad-search input::placeholder { color:var(--pf-dim); }
.ad-city-list, .ad-menu-list { overflow-y:auto; -webkit-overflow-scrolling:touch; }
.ad-city-list button, .ad-menu-list button {
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:14px;
  text-align:left; min-height:62px; padding:11px 2px; color:var(--pf-cream-2);
  border-bottom:1px solid var(--pf-line-soft);
}
.ad-city-list button:hover, .ad-menu-list button:hover { color:var(--pf-cream); }
.ad-city-list strong { font:400 18px/1.3 var(--pf-serif); color:var(--pf-cream); }
.ad-city-list small { display:block; font:9px var(--mono); letter-spacing:.6px; margin-top:4px; color:var(--pf-dim); }
.ad-empty { color:var(--pf-dim); font-size:12px; padding:18px 2px; }

/* ─────────────── opening screen: same tokens, same serif ─────────────── */
.atlas-ui .intro { background:var(--pf-bg); padding:calc(28px + env(safe-area-inset-top,0px)) 20px calc(28px + env(safe-area-inset-bottom,0px)); overflow-y:auto; }
.atlas-ui .intro::after { display:none; }
.atlas-ui .intro-inner.intro-spawn { width:min(470px,100%); max-width:100%; margin:auto; padding:34px 26px; border:1px solid var(--pf-line); border-radius:14px; background:var(--pf-surface); box-shadow:none; }
.atlas-ui .intro-mark { font:400 48px/1.25 var(--pf-serif)!important; letter-spacing:-1px; color:var(--pf-cream); }
.atlas-ui .intro-mark .dot { width:7px; height:7px; background:var(--pf-sage); }
.atlas-ui .intro-kr { color:var(--pf-dim); font:9px/1.8 var(--mono); letter-spacing:2px; margin:12px 0; }
.atlas-ui .intro-tag { color:var(--pf-cream-2); font:italic 400 16px/1.6 var(--pf-serif); }
.atlas-ui .spawn-card { border:1px solid var(--pf-line); border-radius:80px 80px 10px 10px; margin:24px 0; padding:24px 20px; background:var(--pf-surface-2); box-shadow:none; font-family:var(--sans); }
.atlas-ui .spawn-label { color:var(--pf-dim); font:9px var(--mono); letter-spacing:2px; }
.atlas-ui .spawn-city { font:400 30px/1.25 var(--pf-serif)!important; color:var(--pf-cream); }
.atlas-ui .spawn-country { color:var(--pf-muted); }
.atlas-ui .spawn-tier-label { color:var(--pf-dim); }
.atlas-ui .spawn-hint { color:var(--pf-muted); font:12px/1.8 var(--sans); }
.atlas-ui .intro-cta { background:var(--pf-sage); color:var(--pf-sage-ink); box-shadow:none; border-radius:8px; min-height:52px; font:14px var(--sans); }
.atlas-ui .intro-cta:hover { background:var(--pf-sage-2); }
.atlas-ui .spawn-locked { color:var(--pf-muted); }
.atlas-ui .intro-skip, .atlas-ui .intro-store-line { color:var(--pf-dim); font:10px/1.9 var(--mono); }

/* ───────────── every dialog lives in the same palette ───────────── */
.atlas-ui .modal-overlay { background:rgba(14,17,11,.84); }
.atlas-ui .modal {
  background:var(--pf-surface); color:var(--pf-cream);
  border:1px solid var(--pf-line); border-radius:15px; box-shadow:0 24px 70px rgba(10,13,8,.55);
}
.atlas-ui .modal-title, .atlas-ui .modal h2, .atlas-ui .modal h3 { color:var(--pf-cream); font-family:var(--pf-serif); }
.atlas-ui .modal-head { border-bottom:1px solid var(--pf-line-soft); }
.atlas-ui .modal-close { color:var(--pf-muted); background:none; }
.atlas-ui .modal-close:hover { color:var(--pf-cream); }
.atlas-ui .modal-actions { border-top:1px solid var(--pf-line-soft); }
.atlas-ui .btn { background:var(--pf-surface-2); color:var(--pf-cream-2); border:1px solid var(--pf-line); border-radius:8px; }
.atlas-ui .btn:hover:not(:disabled) { background:#3a4030; color:var(--pf-cream); }
.atlas-ui .btn.primary { background:var(--pf-sage); color:var(--pf-sage-ink); border-color:var(--pf-sage-2); }
.atlas-ui .btn.primary:hover:not(:disabled) { background:var(--pf-sage-2); }
.atlas-ui .ms-tabs { border-bottom:1px solid var(--pf-line-soft); }
.atlas-ui .ms-tab { color:var(--pf-dim); }
.atlas-ui .ms-tab.active { color:var(--pf-cream); border-bottom-color:var(--pf-sage); }
.atlas-ui .print-container { background:var(--pf-bg); color:var(--pf-cream); }
.atlas-ui .print-header, .atlas-ui .print-footer { color:var(--pf-muted); border-color:var(--pf-line-soft); }

/* arrival = one stamp and one keepsake ticket, in the same ink */
.atlas-ui .arrival-popup, .atlas-ui .journey-moment-modal {
  background:var(--pf-surface); border:1px solid var(--pf-line); box-shadow:0 24px 70px rgba(10,13,8,.55); border-radius:15px;
}
.atlas-ui .ap-city { font-family:var(--pf-serif); color:var(--pf-cream); }
.atlas-ui .ap-tag, .atlas-ui .ap-sub, .atlas-ui .ap-meta { color:var(--pf-muted); }
.atlas-ui .ap-stamp { border-color:var(--pf-sage); color:var(--pf-cream); background:#333a29; }
.atlas-ui .ap-stamp strong { font-family:var(--pf-serif); }
.atlas-ui .ap-stamp-kicker, .atlas-ui .ap-stamp-theme { color:var(--pf-sage); }
.atlas-ui .ap-rewards { border-top:1px solid var(--pf-line-soft); }
.atlas-ui .ap-reward-row span { color:var(--pf-dim); }
.atlas-ui .ap-reward-row strong { color:var(--pf-cream-2); }
.atlas-ui .arrival-popup .ap-cta, .atlas-ui .arrival-popup .ap-continue { background:var(--pf-sage); color:var(--pf-sage-ink); box-shadow:none; }

.atlas-ui .pp-skin.locked { opacity:.55; }
.atlas-ui .pp-section-title { color:var(--pf-muted); }

.atlas-ui .city-panel {
  position:fixed; z-index:400; top:calc(16px + env(safe-area-inset-top,0px)); right:16px;
  bottom:calc(16px + env(safe-area-inset-bottom,0px)); max-height:calc(100vh - 56px);
  width:min(440px,calc(100vw - 32px)); overflow:auto;
  border:1px solid var(--pf-line); box-shadow:0 0 0 100vmax rgba(14,17,11,.72);
}
.atlas-ui .travel-overlay { position:fixed; }

/* ───────────────────────── responsive ───────────────────────── */
@media (min-width:620px) {
  .atlas-desk { max-width:600px; padding-left:26px; padding-right:26px; }
  .ad-hero-photo { aspect-ratio:2/1; }
  .ad-here h1 { font-size:40px; }
}
@media (max-width:380px) {
  .atlas-desk { padding-left:15px; padding-right:15px; }
  .ad-brand { font-size:22px; }
  .ad-here { padding:16px 0 20px; }
  .ad-here h1 { font-size:28px; }
  .ad-funds strong { font-size:25px; }
  .ad-hero-body { padding:14px; }
  .ad-hero-body h2 { font-size:25px; }
  .ad-alts { gap:8px; }
  .ad-alt > span { font-size:13px; padding:8px 9px 10px; }
  .ad-mode { padding:10px 11px; gap:9px; min-height:56px; }
  .ad-mode-copy small { font-size:9.5px; }
}
@media (prefers-reduced-motion:reduce) {
  .atlas-ui *, .atlas-ui *::before, .atlas-ui *::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; }
}

/* ══════════════════════════════════════════════════════════════════════
   Tickets — the boarding pass you confirm with and the keepsake you keep
   are the same object, so they get the same ink as everything else. The
   old cream stock with a coral stub was the loudest surviving fragment of
   the second theme.
   ══════════════════════════════════════════════════════════════════════ */
.atlas-ui .ticket, .atlas-ui .dc-ticket {
  background:var(--pf-surface-2); border:1px solid var(--pf-line);
  color:var(--pf-cream-2); box-shadow:none;
}
/* the perforation used to be an opaque strip painted ON TOP of the ticket
   body, which clipped the city names on a phone. It is a border now. */
.atlas-ui .ticket::before, .atlas-ui .dc-ticket::before { display:none; }
.atlas-ui .tk-stub, .atlas-ui .dc-stub,
.atlas-ui .ticket.tk-plane .tk-stub, .atlas-ui .ticket.tk-ship .tk-stub,
.atlas-ui .ticket.tk-bus .tk-stub, .atlas-ui .ticket.tk-subway .tk-stub,
.atlas-ui .dc-ticket.tk-plane .dc-stub, .atlas-ui .dc-ticket.tk-ship .dc-stub,
.atlas-ui .dc-ticket.tk-bus .dc-stub, .atlas-ui .dc-ticket.tk-subway .dc-stub {
  background:linear-gradient(180deg,#3c4433,#2c3325); color:var(--pf-sage);
  border-right:2px dashed var(--pf-line);
}
.atlas-ui .tk-stub-bar, .atlas-ui .dc-stub-bar {
  background:repeating-linear-gradient(90deg, rgba(188,199,163,.75) 0 1.5px, transparent 1.5px 3px, rgba(188,199,163,.75) 3px 5px, transparent 5px 7px);
}
.atlas-ui .tk-main, .atlas-ui .dc-main { padding-left:16px; }
.atlas-ui .tk-city, .atlas-ui .dc-city { font-family:var(--pf-serif); font-weight:400; color:var(--pf-cream); }
.atlas-ui .tk-tag, .atlas-ui .dc-tag-sm, .atlas-ui .tk-l, .atlas-ui .dc-l { color:var(--pf-dim); }
.atlas-ui .tk-v, .atlas-ui .dc-v { color:var(--pf-cream-2); }
.atlas-ui .tk-arrow, .atlas-ui .dc-arrow { color:var(--pf-sage); }
.atlas-ui .tk-fare, .atlas-ui .dc-fare, .atlas-ui .tk-pet { border-top-color:var(--pf-line); }
.atlas-ui .dc-fare-row { color:var(--pf-muted); }
.atlas-ui .dc-fare-row.total { border-top-color:var(--pf-line); color:var(--pf-cream); }
.atlas-ui .tk-fare .tk-total, .atlas-ui .dc-fare-row.total strong { color:var(--pf-sage); }
.atlas-ui .dc-local { color:var(--pf-dim); }
.atlas-ui .dc-tag { color:var(--pf-dim); }
.atlas-ui .dc-warn { color:#d9ab8c; }
.atlas-ui .tk-pet { color:var(--pf-muted); }

/* Skins stay a reward, but they are hairlines and stub tints inside the
   same palette rather than four separate colour schemes. */
.atlas-ui .ticket-list.ts-vintage .ticket { background-image:repeating-linear-gradient(45deg, transparent 0 8px, rgba(201,182,137,.07) 8px 9px); border-color:rgba(201,182,137,.45)!important; }
.atlas-ui .ticket-list.ts-vintage .tk-stub { filter:none; background:linear-gradient(180deg,#4a4531,#332f22)!important; color:#dccb9e!important; }
.atlas-ui .ticket-list.ts-neon .ticket { border-color:rgba(150,214,196,.45)!important; box-shadow:0 0 0 1px rgba(150,214,196,.16), 0 8px 26px rgba(70,110,96,.28)!important; }
.atlas-ui .ticket-list.ts-neon .tk-stub { background:linear-gradient(180deg,#2f4a44,#22332f)!important; color:#9fdcc9!important; }
.atlas-ui .ticket-list.ts-neon .tk-city { color:var(--pf-cream); }
.atlas-ui .ticket-list.ts-sakura .ticket { border-color:rgba(214,163,173,.45)!important; background:var(--pf-surface-2)!important; }
.atlas-ui .ticket-list.ts-sakura .tk-stub { background:linear-gradient(180deg,#4b3a3d,#33272a)!important; color:#e3bcc4!important; }
.atlas-ui .ticket-list.ts-gold .ticket { border:1px solid rgba(201,182,137,.75)!important; background:var(--pf-surface-2)!important; box-shadow:0 0 0 1px rgba(201,182,137,.18), 0 8px 24px rgba(120,102,60,.22)!important; }
.atlas-ui .ticket-list.ts-gold .tk-stub { background:linear-gradient(180deg,#4d452c,#332e1e)!important; color:#e5cf9b!important; }
.atlas-ui .ticket-list.ts-gold .tk-city { color:var(--pf-cream); }

.atlas-ui .pp-skin { background:var(--pf-surface-2); border:1px solid var(--pf-line); color:var(--pf-cream-2); }
.atlas-ui .pp-skin.active { border-color:var(--pf-sage); }
.atlas-ui .pps-skin-hint, .atlas-ui .pps-name, .atlas-ui .pps-visits { color:var(--pf-dim); }
.atlas-ui .pp-stamp { background:var(--pf-surface-2); border:1px solid var(--pf-line-soft); }
.atlas-ui .pp-stamp.stamped { border-color:var(--pf-sage); }
.atlas-ui .pp-summary, .atlas-ui .pps-l { color:var(--pf-dim); }
.atlas-ui .pps-v { color:var(--pf-cream); font-family:var(--pf-serif); }

/* The stub is a fixed 110px column; an 18px mono flight number does not fit
   in it on a phone and used to spill across the seat row. */
.atlas-ui .dc-stub, .atlas-ui .tk-stub { width:92px; overflow:hidden; padding:13px 11px; gap:8px; }
.atlas-ui .dc-stub-meta, .atlas-ui .tk-stub-meta { font-size:8px; letter-spacing:.14em; }
.atlas-ui .dc-stub-no, .atlas-ui .tk-stub-no { font-size:14px; letter-spacing:0; overflow-wrap:anywhere; }
.atlas-ui .dc-main, .atlas-ui .tk-main { min-width:0; padding-left:15px; }
.atlas-ui .dc-ticket { margin:14px; }
.atlas-ui .dc-route { gap:10px; }
.atlas-ui .dc-tag { letter-spacing:.18em; }

/* The one moment mid-journey — same ink, no coral, no gold. */
.atlas-ui .jm-tag { color:var(--pf-sage); }
.atlas-ui .jm-title { font-family:var(--pf-serif); color:var(--pf-cream); font-weight:400; }
.atlas-ui .jm-sub { color:var(--pf-muted); }
.atlas-ui .jm-choice { background:var(--pf-surface-2); border:1px solid var(--pf-line); color:var(--pf-cream-2); }
.atlas-ui .jm-choice:hover, .atlas-ui .jm-choice:focus-visible { border-color:var(--pf-sage); background:#373d2e; }
.atlas-ui .jm-choice.clue, .atlas-ui .jm-choice.rest, .atlas-ui .jm-choice.scenic { border-color:var(--pf-line); }
.atlas-ui .jm-choice-icon { background:#3a4132; color:var(--pf-sage); border-color:var(--pf-line); }
.atlas-ui .jm-choice-copy strong { color:var(--pf-cream); font-weight:500; }
.atlas-ui .jm-choice-copy > span { color:var(--pf-muted); }
.atlas-ui .jm-choice-copy em { color:var(--pf-sage); }

/* ══════════════════════════════════════════════════════════════════════
   In flight. One cabin, at dusk, in the app's palette. The illustration
   used to be a cream daylight room with a coral blanket, a gold curtain,
   a flickering coral screen and a plate of food — a second art direction
   living inside the same app.
   ══════════════════════════════════════════════════════════════════════ */
.atlas-ui .travel-overlay { background:var(--pf-bg); }
.atlas-ui .cabin,
.atlas-ui .cabin.plane.premium, .atlas-ui .cabin.plane.economy,
.atlas-ui .cabin.bus, .atlas-ui .cabin.train.first, .atlas-ui .cabin.train.standard,
.atlas-ui .cabin.ship.first, .atlas-ui .cabin.ship.suite,
.atlas-ui .cabin.ship.sea, .atlas-ui .cabin.ship.inside {
  background:linear-gradient(180deg,#2e3329 0%,#232720 100%);
  color:var(--pf-cream-2);
  border:1px solid var(--pf-line);
  box-shadow:0 26px 70px rgba(10,13,8,.55);
}
/* the window is the only bright thing in the room */
.atlas-ui .cabin-window { background:linear-gradient(180deg,#3f5468 0%,#6d7d78 58%,#9c8f6d 100%); }
.atlas-ui .cabin-window.porthole, .atlas-ui .cabin-window.big-window { background:linear-gradient(180deg,#3c4f5a,#243039); }
.atlas-ui .plane-window, .atlas-ui .bus-window, .atlas-ui .train-window { border-bottom-color:rgba(12,16,10,.55); }
.atlas-ui .window-frame { border-color:rgba(14,18,12,.6); box-shadow:inset 0 0 0 2px rgba(222,226,205,.14); }
.atlas-ui .porthole-rim { border-color:rgba(14,18,12,.6); }
.atlas-ui .window-scene.clouds {
  background-image:
    radial-gradient(ellipse 50px 18px at 30px 40%, rgba(226,226,206,.5), transparent 70%),
    radial-gradient(ellipse 80px 22px at 130px 60%, rgba(226,226,206,.36), transparent 70%);
}
.atlas-ui .window-scene.mountains {
  background-image:
    linear-gradient(180deg, transparent 0 50%, #4e5a43 50%, #333d2c 90%, #232720 100%),
    repeating-linear-gradient(90deg, transparent 0 60px, rgba(226,226,206,.09) 60px 65px);
}
.atlas-ui .window-scene.highway {
  background-image:
    linear-gradient(180deg, transparent 0 60%, #3b4232 60% 100%),
    repeating-linear-gradient(90deg, rgba(226,226,206,.7) 0 30px, transparent 30px 80px);
}
.atlas-ui .window-scene.ocean { background-color:rgba(60,79,90,.35); }
.atlas-ui .sun { opacity:.5; }

.atlas-ui .ambient-glow { background:radial-gradient(ellipse at 50% 0%, rgba(188,199,163,.22) 0%, transparent 58%); }
.atlas-ui .ambient-glow.soft { background:radial-gradient(ellipse at 50% 0%, rgba(188,199,163,.13) 0%, transparent 58%); }
.atlas-ui .cabin-banner.tier-first,
.atlas-ui .cabin-banner.tier-business,
.atlas-ui .cabin-banner.tier-economy {
  background:rgba(22,27,18,.8); color:var(--pf-sage); box-shadow:none;
  border:1px solid var(--pf-line); font-weight:500;
}
.atlas-ui .roof-light { background:radial-gradient(circle, #e6dcae 30%, rgba(230,220,174,.28)); box-shadow:0 4px 9px rgba(214,205,158,.35); }
.atlas-ui .overhead-bin { background:linear-gradient(180deg,#3d4433 60%, rgba(0,0,0,.34) 100%); border-bottom-color:rgba(12,16,10,.5); box-shadow:inset 0 -3px 0 rgba(12,16,10,.55); }
.atlas-ui .bin-no { color:var(--pf-cream-2); }
.atlas-ui .cabin-roof { background:linear-gradient(180deg, rgba(12,16,10,.25), transparent); }
.atlas-ui .lay-flat { background:linear-gradient(180deg,#414835,#2f3627); }
.atlas-ui .seat-blanket { background:linear-gradient(135deg,#5c6647 25%,#4a5439 50%,#5c6647 75%); }
.atlas-ui .seat-pillow, .atlas-ui .bed-pillow { background:#ded9c4; box-shadow:none; }
.atlas-ui .seat.economy { background:linear-gradient(180deg,#454c39,#2f3527); }
.atlas-ui .seat.bus-seat { background:linear-gradient(180deg,#454c39,#2f3527); }
.atlas-ui .seat.train-seat, .atlas-ui .seat.train-seat.wide { background:linear-gradient(180deg,#4a5440,#2e3629); }
.atlas-ui .seat-head { background:rgba(226,226,206,.18); }
.atlas-ui .suite-divider { background:repeating-linear-gradient(180deg,#5c6647 0 8px,#3f4733 8px 16px); opacity:.55; }
.atlas-ui .cabin-curtain { background:repeating-linear-gradient(180deg,#4a5439 0 6px,#353c2a 6px 12px); opacity:.6; }
.atlas-ui .reading-lamp { background:radial-gradient(circle,#e6dcae, rgba(230,220,174,.25)); box-shadow:0 0 14px rgba(214,205,158,.45); }
.atlas-ui .suite-bed, .atlas-ui .bunk { background:linear-gradient(180deg,#414835,#2f3627); }
.atlas-ui .bed-blanket { background:linear-gradient(180deg, transparent, #5c6647 60%); }
.atlas-ui .suite-rug { background:repeating-linear-gradient(90deg,#4a5439 0 8px,#3a4230 8px 16px); opacity:.55; }
.atlas-ui .ship-wood-wall { background:repeating-linear-gradient(0deg, rgba(90,100,70,.07) 0 18px, rgba(90,100,70,.12) 18px 19px, rgba(90,100,70,.07) 19px 38px, rgba(90,100,70,.12) 38px 39px); }
.atlas-ui .ship-lifebuoy { opacity:.35; }
.atlas-ui .aisle-strip { background:linear-gradient(180deg, transparent, rgba(70,80,56,.32)); border-left-color:rgba(12,16,10,.3); border-right-color:rgba(12,16,10,.3); }
.atlas-ui .cabin-label { color:var(--pf-dim); }
/* Props that read as clutter at phone size, and the only two coral things left. */
.atlas-ui .seat-tv, .atlas-ui .meal, .atlas-ui .slippers,
.atlas-ui .suite-table, .atlas-ui .tray-side .champagne-glass { display:none; }

/* the flight card under the cabin */
.atlas-ui .travel-card, .atlas-ui .travel-overlay .travel-card {
  background:var(--pf-surface); border:1px solid var(--pf-line); color:var(--pf-cream-2); box-shadow:none;
}
.atlas-ui .tv-tag { color:var(--pf-sage); }
.atlas-ui .tv-class { background:var(--pf-surface-2); color:var(--pf-sage); border:1px solid var(--pf-line); }
.atlas-ui .tv-code { font-family:var(--pf-serif); color:var(--pf-cream); }
.atlas-ui .tv-city, .atlas-ui .tv-km, .atlas-ui .tv-eta { color:var(--pf-dim); }
.atlas-ui .tv-track { background:var(--pf-line); }
.atlas-ui .tv-pin { background:var(--pf-sage); }
.atlas-ui .travel-overlay .travel-route .arrow { color:var(--pf-sage); }
.atlas-ui .travel-upgrade-btn, .atlas-ui .travel-cancel-btn {
  background:var(--pf-surface-2); border:1px solid var(--pf-line); color:var(--pf-muted);
}
.atlas-ui .travel-upgrade-btn:hover, .atlas-ui .travel-cancel-btn:hover { color:var(--pf-cream); border-color:var(--pf-sage); }
.atlas-ui .ambient-sound-mixer .asm-toggle {
  background:var(--pf-surface-2); border:1px solid var(--pf-line); color:var(--pf-muted); box-shadow:none;
}
.atlas-ui .asm-panel { background:var(--pf-surface); border:1px solid var(--pf-line); color:var(--pf-cream-2); }
.atlas-ui .asm-track { background:var(--pf-surface-2); border-color:var(--pf-line); }
.atlas-ui .asm-track.on { border-color:var(--pf-sage); }
.atlas-ui .asm-sub, .atlas-ui .asm-track-name { color:var(--pf-muted); }

/* ── the cabin, reduced to the one thing worth looking at ──────────────
   The suite illustration was drawn for a 640px card. On a phone the seats,
   trays and dividers collapse into loose shapes floating in an empty room.
   What survives is the part that always reads: the window, the sky moving
   past it, and the class on the door. Every vehicle gets the same frame,
   and the scene behind the glass is what tells you how you are travelling.
   ────────────────────────────────────────────────────────────────────── */
.atlas-ui .cabin > *:not(.cabin-banner):not(.ambient-glow):not(.cabin-window) { display:none; }
.atlas-ui .cabin .cabin-window {
  position:absolute!important; inset:0!important;
  width:100%!important; height:auto!important; margin:0!important;
  border:0!important; border-radius:0!important; box-shadow:none!important;
}
.atlas-ui .cabin .window-frame {
  display:block; border:0; border-radius:0;
  box-shadow:inset 0 0 120px 30px rgba(18,22,14,.85), inset 0 0 0 1px rgba(226,226,206,.08);
}
.atlas-ui .cabin .window-scene { display:block; }
.atlas-ui .cabin .sun { display:block; opacity:.45; }
.atlas-ui .cabin-window { background:linear-gradient(180deg,#2c3c50 0%,#5a6a68 52%,#8f8161 78%,#4a4735 100%); }
.atlas-ui .cabin-banner { top:14px; }

.atlas-ui .travel-overlay.premium .tv-class, .atlas-ui .tv-class {
  background:var(--pf-surface-2); color:var(--pf-sage);
  border:1px solid var(--pf-line); box-shadow:none; background-image:none;
}
.atlas-ui .tv-tag { color:var(--pf-sage); font-weight:500; }
.atlas-ui .asm-dot { background:var(--pf-sage); box-shadow:0 0 0 0 rgba(188,199,163,.5); }
.atlas-ui .ambient-sound-mixer.idle .asm-toggle { background:var(--pf-surface-2); }
.atlas-ui .jm-choice.scenic .jm-choice-copy em,
.atlas-ui .jm-choice.rest .jm-choice-copy em,
.atlas-ui .jm-choice-copy em { color:var(--pf-sage); }
.atlas-ui .jm-choice.rest .jm-choice-icon,
.atlas-ui .jm-choice.scenic .jm-choice-icon { background:#3a4132; color:var(--pf-sage); border-color:var(--pf-line); }
.atlas-ui .tv-pin { background:var(--pf-dim); box-shadow:none; }
.atlas-ui .tv-pin.end { background:var(--pf-sage); box-shadow:0 0 0 2px rgba(188,199,163,.22), 0 0 12px rgba(188,199,163,.35); }

/* Arrival = the stamp, then the ticket you keep. */
.atlas-ui .arrival-popup .ap-stamp, .atlas-ui .arrival-popup .ap-stamp.new {
  border:2px double var(--pf-sage); color:var(--pf-sage); background:rgba(188,199,163,.06);
}
.atlas-ui .arrival-popup .ap-stamp strong { font-family:var(--pf-serif); font-weight:400; color:var(--pf-cream); }
.atlas-ui .arrival-popup .ap-reward-row, .atlas-ui .arrival-popup .ap-reward-row.outcome {
  background:var(--pf-surface-2); color:var(--pf-muted);
}
.atlas-ui .arrival-popup .ap-reward-row strong,
.atlas-ui .arrival-popup .ap-reward-row.outcome strong { color:var(--pf-sage); }
.ap-keepsake { margin:4px 0 14px; }
.ap-keepsake-sheet { background:var(--pf-bg); border-radius:12px; padding:12px; border:1px solid var(--pf-line-soft); }
.ap-save {
  width:100%; margin-top:9px; min-height:44px; border-radius:8px;
  background:var(--pf-surface-2); border:1px solid var(--pf-line); color:var(--pf-muted);
  font:11px var(--sans); cursor:pointer;
}
.ap-save:hover:not(:disabled) { color:var(--pf-cream); border-color:var(--pf-sage); }
.ap-save:disabled { opacity:.6; cursor:default; }
/* The keepsake ticket has to fit a 390px phone without a single letter of
   the city name falling off the right edge. */
.ap-keepsake-sheet { overflow:hidden; }
.ap-keepsake-sheet .ticket { max-width:100%; width:100%; }
.ap-keepsake-sheet .tk-stub { width:78px; padding:11px 9px; }
.ap-keepsake-sheet .tk-stub-no { font-size:12px; }
.ap-keepsake-sheet .tk-main { padding:12px 12px 12px 12px; gap:9px; min-width:0; }
.ap-keepsake-sheet .tk-route { gap:8px; }
.ap-keepsake-sheet .tk-city { font-size:15px; }
.ap-keepsake-sheet .tk-arrow { font-size:11px; flex:0 0 auto; }
.ap-keepsake-sheet .tk-row { gap:8px 10px; font-size:10px; }
.ap-keepsake-sheet .tk-l { font-size:8px; }
/* A keepsake whose city names are cut to "HON…" is not a keepsake. Stack
   the route so both names get a full line to themselves. */
.ap-keepsake-sheet .tk-route { flex-direction:column; align-items:stretch; gap:6px; }
.ap-keepsake-sheet .tk-arrow { display:none; }
.ap-keepsake-sheet .tk-side { display:flex; align-items:baseline; gap:9px; }
.ap-keepsake-sheet .tk-tag { flex:0 0 34px; }
.ap-keepsake-sheet .tk-city { white-space:normal; overflow:visible; text-overflow:clip; line-height:1.2; }

/* Dark literal text colours left over from the cream theme. On the moss
   ground they are near-invisible; these are every one the audit found
   (node tools/darken-audit.cjs). */
.atlas-ui .print-header .ph-title,
.atlas-ui body.cony-image-capture .print-header .ph-title { color:var(--pf-cream); font-family:var(--pf-serif); }
.atlas-ui .print-header .ph-sub, .atlas-ui .print-header .ph-date,
.atlas-ui body.cony-image-capture .print-header .ph-sub,
.atlas-ui body.cony-image-capture .print-header .ph-date { color:var(--pf-dim); }
.atlas-ui .rp-amount, .atlas-ui .rp-num { color:var(--pf-sage); -webkit-text-fill-color:var(--pf-sage); }
.atlas-ui .rp-source, .atlas-ui .rp-queue-hint { color:var(--pf-muted); }
.atlas-ui .album-group-title, .atlas-ui .de-title, .atlas-ui .de-body,
.atlas-ui .ap-cap, .atlas-ui .dc-city-opt { color:var(--pf-cream-2); }
.atlas-ui .ap-date, .atlas-ui .de-meta, .atlas-ui .de-act, .atlas-ui .dc-count { color:var(--pf-muted); }
.atlas-ui .outcome-good .sf-tip { color:var(--pf-sage); background:rgba(188,199,163,.12); }
.atlas-ui .outcome-mid  .sf-tip { color:#dbc79a; background:rgba(201,182,137,.12); }
.atlas-ui .outcome-bad  .sf-tip { color:#dfae93; background:rgba(212,150,120,.13); }
.atlas-ui .encounter-tag, .atlas-ui .sf-tag { color:var(--pf-sage); }
.atlas-ui .encounter-title, .atlas-ui .sf-title { color:var(--pf-cream); font-family:var(--pf-serif); font-weight:400; }
.atlas-ui .encounter-text, .atlas-ui .sf-text { color:var(--pf-cream-2); border-left-color:var(--pf-sage); }
.atlas-ui .encounter-choice, .atlas-ui .sf-choice {
  background:var(--pf-surface-2); border:1px solid var(--pf-line); color:var(--pf-cream-2);
}
.atlas-ui .encounter-choice:hover, .atlas-ui .sf-choice:hover { background:#3a4030; border-color:var(--pf-sage); }
.atlas-ui .enc-tip { background:rgba(188,199,163,.10); color:var(--pf-cream-2); }
.atlas-ui .enc-reward.gain { color:var(--pf-sage); }
.atlas-ui .enc-reward.loss { color:#dfae93; }
.atlas-ui .rp-tag { color:var(--pf-sage); }
.atlas-ui .rp-plus { color:var(--pf-sage); }
.atlas-ui .reward-popup { background:var(--pf-surface); border:1px solid var(--pf-line); }
.atlas-ui .rp-claim-btn, .atlas-ui .rp-claim-btn.going {
  background:var(--pf-sage); color:var(--pf-sage-ink); box-shadow:none; border-radius:8px; font-family:var(--sans);
}
.atlas-ui .rp-claim-btn:hover:not(:disabled) { background:var(--pf-sage-2); transform:none; box-shadow:none; }
.atlas-ui .rp-claim-btn:active:not(:disabled) { transform:none; box-shadow:none; }
.atlas-ui .media-type-tag.MUSICAL, .atlas-ui .media-type-tag.GAME,
.atlas-ui .media-type-tag.SHOW, .atlas-ui .media-type-tag.ANIME,
.atlas-ui .media-type-tag.FILM, .atlas-ui .media-type-tag.BOOK,
.atlas-ui .media-type-tag.SONG, .atlas-ui .media-type-tag.FOOD { color:var(--pf-sage); }
.atlas-ui .seasonal-badge, .atlas-ui .seasonal-badge.tone-lavender,
.atlas-ui .seasonal-badge.tone-summer { background:rgba(24,29,19,.78); color:var(--pf-sage); border:1px solid var(--pf-line); }

/* City cards inside the country map get the same photo treatment as the
   destination card: moss plate underneath, the photograph toned to match. */
.atlas-ui .cc-hero { background-color:var(--pf-surface-2); filter:saturate(.62) contrast(1.04) brightness(.9); }
.atlas-ui .cc-hero-tint {
  background:linear-gradient(180deg, rgba(28,32,24,.18) 0%, rgba(28,32,24,.82) 100%),
             linear-gradient(135deg, rgba(70,84,56,.24), rgba(28,32,24,.24));
}
.atlas-ui .cc-hero-watermark { color:rgba(226,226,206,.14); }
.atlas-ui .cc-name, .atlas-ui .cc-tag, .atlas-ui .cc-here { color:var(--pf-cream); }

/* ── the country atlas ──────────────────────────────────────────────────
   The landmass was a cream cut-out on a cream page. On the moss ground it
   reads as a hole; give it its own surface and darken the labels' halo. */
.atlas-ui .country-land { fill:#3a4132; stroke:rgba(226,226,206,.22); }
.atlas-ui .country-province { stroke:rgba(226,226,206,.16); }
.atlas-ui .province-label { fill:rgba(226,226,206,.5); stroke:#3a4132; }
.atlas-ui .sub-city .sub-dot { fill:var(--pf-cream-2); stroke:#2b3125; }
.atlas-ui .sub-city.primary .sub-dot { fill:var(--pf-sage); }
.atlas-ui .sub-city .sub-halo { fill:var(--pf-sage); }
.atlas-ui .sub-city .sub-label { fill:var(--pf-cream-2); stroke:#2b3125; }
.atlas-ui .sub-city.open .sub-dot, .atlas-ui .sub-city.open .sub-label { fill:var(--pf-sage); }

/* ── inverted chips ─────────────────────────────────────────────────────
   These all said `background: var(--ink)` — "paint me the opposite of the
   page". With the ink token now cream that reads as a blank cream blob with
   cream text on it (the travel log's active tab was exactly that). The
   opposite of a moss page is the sage, so that is what they get. */
.atlas-ui .transport-option.active, .atlas-ui .chip.active, .atlas-ui .ms-tab.active,
.atlas-ui .mb-filter.active, .atlas-ui .lp-chip.active, .atlas-ui .cp-pill.active,
.atlas-ui .db-pill.active, .atlas-ui .db-class.active, .atlas-ui .jc-go,
.atlas-ui .deck-btn.primary, .atlas-ui .total-banner {
  background:var(--pf-sage); background-image:none; color:var(--pf-sage-ink); border-color:var(--pf-sage-2);
}
.atlas-ui .total-banner .tb-l, .atlas-ui .total-banner .tb-v { color:var(--pf-sage-ink); }
.atlas-ui .ms-tab { color:var(--pf-muted); border-color:var(--pf-line); }
.atlas-ui .ms-tab:hover:not(.active) { color:var(--pf-cream); border-color:var(--pf-sage); }
.atlas-ui .ms-row strong { color:var(--pf-sage); }
.atlas-ui .modal-actions { background:var(--pf-surface); border-top-color:var(--pf-line); }
.atlas-ui .panel-subtitle .sep, .atlas-ui .jc-50-mark { background:var(--pf-line); }
.atlas-ui .panel-close:hover, .atlas-ui .modal-close:hover { background:var(--pf-surface-2); color:var(--pf-cream); }

/* skin swatches: still five distinct strips, all inside the palette */
.atlas-ui .pp-skin.sk-classic .pps-skin-strip { background:linear-gradient(90deg,#8d947a,#5c6448); }
.atlas-ui .pp-skin.sk-vintage .pps-skin-strip { background:linear-gradient(90deg,#c9b689,#8d7d52,#c9b689); }
.atlas-ui .pp-skin.sk-neon    .pps-skin-strip { background:linear-gradient(90deg,#8fd6c2,#bcc7a3,#8fd6c2); }
.atlas-ui .pp-skin.sk-sakura  .pps-skin-strip { background:linear-gradient(90deg,#d6a3ad,#b58a92,#d6a3ad); }
.atlas-ui .pp-skin.sk-gold    .pps-skin-strip { background:linear-gradient(90deg,#c9b689,#e5cf9b,#c9b689); }
.atlas-ui .pps-skin-name { color:var(--pf-cream); }
.atlas-ui .pp-stamp.stamped .pps-name, .atlas-ui .pps-name { color:var(--pf-cream-2); }

/* The window needs a horizon, or it reads as a grey box rather than a view. */
.atlas-ui .cabin-window {
  background:linear-gradient(180deg,
    #22304a 0%, #35455c 34%, #5d6a6c 56%,
    #8d7f5e 60%, #6a6448 66%, #3c4133 100%);
}
.atlas-ui .cabin-window::after {
  content:''; position:absolute; left:0; right:0; top:59.5%; height:1px; z-index:1;
  background:linear-gradient(90deg, transparent, rgba(238,236,214,.35) 22%, rgba(238,236,214,.35) 78%, transparent);
}

/* Gradients with a hard-coded warm stop — the token remap cannot reach them. */
.atlas-ui .cf-btn, .atlas-ui .cf-btn.going {
  background:var(--pf-sage); background-image:none; color:var(--pf-sage-ink);
  box-shadow:none; font-family:var(--sans); border-radius:8px; transform:none;
}
.atlas-ui .cf-btn:hover:not(:disabled) { background:var(--pf-sage-2); transform:none; box-shadow:none; }
.atlas-ui .cf-icon { color:var(--pf-sage); }
.atlas-ui .cf-currency { color:var(--pf-muted); }
.atlas-ui .cf-num { background:none; -webkit-background-clip:border-box; background-clip:border-box; color:var(--pf-cream); -webkit-text-fill-color:var(--pf-cream); }
.atlas-ui .cf-title { font-family:var(--pf-serif); color:var(--pf-cream); }
.atlas-ui .cf-tag, .atlas-ui .cf-tip { color:var(--pf-muted); }
.atlas-ui .jc-pay { color:var(--pf-sage); }
/* the idle pulse on the sound toggle was a coral ring */
.atlas-ui .ambient-sound-mixer.idle .asm-toggle { animation:none; border-color:var(--pf-line); }
.atlas-ui .asm-dot { animation:none; }
/* All five skins must be visible: the two behind the unlock were scrolled off
   the right edge, which is a poor way to advertise them. */
.atlas-ui .pp-skins { grid-template-columns:repeat(2, minmax(0, 1fr)); }
.atlas-ui .pp-skin { min-width:0; }
.atlas-ui .pps-skin-name, .atlas-ui .pps-skin-hint { overflow-wrap:anywhere; }
/* A mobile rule turned the skin shelf into a horizontal scroller, which parks
   the two skins the unlock actually buys off the right edge where nobody
   scrolls to. Two columns, all five visible. */
@media (max-width: 760px) {
  .atlas-ui .pp-skins {
    display:grid; grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:8px; overflow-x:visible; padding:0;
  }
}
.atlas-ui .pp-skin { min-width:0; }
.atlas-ui .pps-skin-name, .atlas-ui .pps-skin-hint { overflow-wrap:anywhere; }
/* the country grid was pinned to four fixed columns and ran off the right */
@media (max-width: 760px) {
  .atlas-ui .pp-grid { grid-template-columns:repeat(auto-fill, minmax(0, 1fr)); grid-template-columns:repeat(3, minmax(0, 1fr)); }
  .atlas-ui .pp-stamp { min-width:0; }
  .atlas-ui .pp-stamp .pps-name { overflow-wrap:anywhere; }
}

/* The full-size keepsake ticket does not fit a phone: its stub, its two city
   names and its fare row are laid out side by side, so the list scrolled
   sideways inside the travel log and clipped the city names to "HON…".
   Same treatment as the arrival keepsake — stack the route, let it wrap. */
@media (max-width: 760px) {
  .atlas-ui .ticket-list .ticket { max-width:100%; width:100%; }
  .atlas-ui .ticket-list .tk-stub { width:78px; padding:11px 9px; }
  .atlas-ui .ticket-list .tk-stub-no { font-size:12px; }
  .atlas-ui .ticket-list .tk-main { min-width:0; padding:12px; gap:9px; }
  .atlas-ui .ticket-list .tk-route { flex-direction:column; align-items:stretch; gap:6px; }
  .atlas-ui .ticket-list .tk-arrow { display:none; }
  .atlas-ui .ticket-list .tk-side { display:flex; align-items:baseline; gap:9px; min-width:0; }
  .atlas-ui .ticket-list .tk-tag { flex:0 0 34px; }
  .atlas-ui .ticket-list .tk-city { white-space:normal; overflow:visible; text-overflow:clip; font-size:15px; line-height:1.2; }
  .atlas-ui .ticket-list .tk-row { gap:8px 10px; font-size:10px; }
  .atlas-ui .ticket-list .tk-l { font-size:8px; }
  .atlas-ui .modal-body { overflow-x:hidden; }
}
/* the boarding pass clipped its two city names to "HON…" on a phone too */
@media (max-width: 760px) {
  .atlas-ui .dc-route { flex-direction:column; align-items:stretch; gap:6px; }
  .atlas-ui .dc-arrow { display:none; }
  .atlas-ui .dc-side { display:flex; align-items:baseline; gap:9px; min-width:0; }
  .atlas-ui .dc-tag-sm { flex:0 0 34px; }
  .atlas-ui .dc-city { white-space:normal; overflow:visible; text-overflow:clip; font-size:17px; line-height:1.2; }
}

/* Mono tracking is set for Latin small caps. On Hangul, kana, hanzi and the
   RTL scripts the same tracking pulls the characters apart, so the whole
   scale collapses to almost nothing for those languages. i18n.js keeps
   <html lang> in step with the chosen language. */
html:root.atlas-ui { --pf-track:1; }
html[lang="ko"], html[lang="ja"], html[lang="zh"],
html[lang="ar"], html[lang="he"], html[lang="fa"], html[lang="ur"] { --pf-track:.12; }
.ad-kicker { letter-spacing:calc(2px * var(--pf-track, 1)); }
.ad-hero-country { letter-spacing:calc(1.6px * var(--pf-track, 1)); }
.ad-funds small { letter-spacing:calc(1.5px * var(--pf-track, 1)); }
.ad-city-list small, .ad-cabin { letter-spacing:calc(.6px * var(--pf-track, 1)); }