/* Passage — Apple HIG look for the web. Light + dark, rem-based type, 44 pt targets. */

/* ── Tokens (SPEC §7) ─────────────────────────────────────── */
:root {
  color-scheme: light dark;
  --bg: #F2F2F7;
  --surface: #FFFFFF;
  --surface2: #F2F2F7;
  --label: #000000;
  --secondary: rgba(60, 60, 67, 0.60);
  --tertiary: rgba(60, 60, 67, 0.30);
  --separator: rgba(60, 60, 67, 0.29);
  --accent: #007AFF;
  --good: #248A3D;
  --warn: #C93400;
  --bad: #D70015;
  /* derived */
  --secondary-solid: #8A8A8E;
  --tertiary-solid: #C4C4C7;
  --fill: rgba(120, 120, 128, 0.12);
  --fill-press: rgba(120, 120, 128, 0.20);
  --seg-thumb: #FFFFFF;
  --switch-on: #34C759;
  --sheet-bg: #F2F2F7;
  --sheet-surface: #FFFFFF;
  --menu-bg: rgba(250, 250, 252, 0.86);
  --toast-bg: rgba(28, 28, 30, 0.92);
  --toast-fg: #FFFFFF;
  --card-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 4px 16px rgba(0, 0, 0, 0.05);
  --wallet-shadow: 0 -1px 3px rgba(0, 0, 0, 0.05), 0 4px 14px rgba(0, 0, 0, 0.05);
  --wallet-mix: 14%;
  --range: color-mix(in srgb, var(--accent) 14%, transparent);
  /* Floating bars: a strong material so content never reads through their text (SPEC §5). */
  --bar-material: color-mix(in srgb, var(--surface) 90%, transparent);
  --bar-blur: blur(20px) saturate(180%);
  --bar-edge: 0 0 0 0.5px var(--separator), 0 8px 28px rgba(0, 0, 0, 0.12);
  --bb-h: 70px;
  --pin-bg: #FFFFFF;
  --desk-bg: #E5E5EA;

  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;
  --gutter: 16px;
  --tab-h: 62px;
  --tab-bottom: max(12px, calc(env(safe-area-inset-bottom) - 10px));
  --above-tab: calc(var(--tab-bottom) + var(--tab-h) + 10px);
  --ease: cubic-bezier(0.32, 0.72, 0, 1);
  --spring: cubic-bezier(0.32, 0.72, 0, 1);
}
@supports (transition-timing-function: linear(0, 1)) {
  :root { --spring: linear(0, 0.009, 0.035 2.1%, 0.141 4.4%, 0.723 15.5%, 0.938 21.1%, 1.017 25.4%, 1.047 29.6%, 1.051 33.4%, 1.04 38.1%, 1.011 47.9%, 0.999 57.5%, 1); }
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #000000;
    --surface: #1C1C1E;
    --surface2: #2C2C2E;
    --label: #FFFFFF;
    --secondary: rgba(235, 235, 245, 0.60);
    --tertiary: rgba(235, 235, 245, 0.30);
    --separator: rgba(84, 84, 88, 0.65);
    --accent: #0A84FF;
    --good: #30D158;
    --warn: #FF9F0A;
    --bad: #FF453A;
    --secondary-solid: #98989F;
    --tertiary-solid: #5A5A5F;
    --fill: rgba(120, 120, 128, 0.24);
    --fill-press: rgba(120, 120, 128, 0.36);
    --seg-thumb: #636366;
    --switch-on: #30D158;
    --sheet-bg: #1C1C1E;
    --sheet-surface: #2C2C2E;
    --menu-bg: rgba(44, 44, 46, 0.86);
    --toast-bg: rgba(242, 242, 247, 0.94);
    --toast-fg: #000000;
    --card-shadow: none;
    --wallet-shadow: none;
    --wallet-mix: 22%;
    --desk-bg: #111113;
    --bar-material: color-mix(in srgb, #2C2C2E 90%, transparent);
    --bar-edge: 0 0 0 0.5px rgba(255, 255, 255, 0.14), 0 8px 28px rgba(0, 0, 0, 0.5);
    --pin-bg: #2C2C2E;
  }
}
@media (min-width: 400px) { :root { --gutter: 20px; } }

/* ── Base ──────────────────────────────────────────────────── */
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
html { font-size: 100%; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html, body { height: 100%; margin: 0; overflow: hidden; overscroll-behavior: none; }
body {
  font-family: var(--font); font-size: 1.0625rem; line-height: 1.3;
  background: var(--bg); color: var(--label);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
button, input, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; margin: 0; cursor: pointer; text-align: inherit; }
button:disabled { cursor: default; }
a { color: var(--accent); text-decoration: none; }
h1, h2, h3, p { margin: 0; }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 8px; }
.icon { width: 1.375rem; height: 1.375rem; flex: none; display: block; }
.muted { color: var(--secondary); }
.nowrap { white-space: nowrap; }
.accent { color: var(--accent); }
.tone-good { color: var(--good); }
.tone-warn { color: var(--warn); }
.tone-bad { color: var(--bad); }
.tone-secondary { color: var(--secondary); }
.price { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.noscript { padding: 40px; text-align: center; }
/* Prevent the iOS long-press callout/selection on controls. */
button, .row, .day-card, .trip-card { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }

/* ── App frame ─────────────────────────────────────────────── */
#app {
  position: fixed; inset: 0; margin: 0 auto; max-width: 520px; overflow: hidden;
  padding: 0 env(safe-area-inset-right) 0 env(safe-area-inset-left);
  background: var(--bg);
}
@media (min-width: 600px) {
  body { background: var(--desk-bg); }
  #app { box-shadow: 0 0 0 0.5px var(--separator), 0 10px 60px rgba(0, 0, 0, 0.08); }
}
.tab-view { position: absolute; inset: 0; overflow: hidden; }

/* ── Pages: fixed nav bar, own scroll area ─────────────────── */
.page {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  background: var(--bg); will-change: auto;
}
.page.animating { transition: transform 0.38s var(--ease); }
.page.enter { transform: translateX(100%); }
.page.covered { transform: translateX(-30%); }
.page.below { visibility: hidden; }
.page.animating:not(.covered):not(:first-child) { box-shadow: -8px 0 24px rgba(0, 0, 0, 0.08); }
.page.swiping { transition: none !important; box-shadow: -8px 0 24px rgba(0, 0, 0, 0.08); }

.nav-bar {
  position: relative; z-index: 3; flex: none;
  display: grid; grid-template-columns: minmax(max-content, 1fr) minmax(0, max-content) minmax(max-content, 1fr); align-items: center; gap: 8px;
  min-height: calc(54px + env(safe-area-inset-top));
  padding: env(safe-area-inset-top) var(--gutter) 0;
  background: var(--bg);
  box-shadow: 0 0.5px 0 transparent; transition: box-shadow 0.2s;
}
.nav-bar.scrolled { box-shadow: 0 0.5px 0 var(--separator); }
.nav-bar.large-mode { min-height: calc(46px + env(safe-area-inset-top)); }
.nav-bar.scrolled:has(+ .page-accessory) { box-shadow: none; }
.nav-lead, .nav-trail { display: flex; align-items: center; gap: 8px; min-width: 44px; }
.nav-trail { justify-content: flex-end; }
.nav-title {
  display: flex; flex-direction: column; align-items: center; text-align: center; line-height: 1.2;
  min-width: 0; max-width: 100%; opacity: 0; transition: opacity 0.18s;
}
.nav-bar.show-title .nav-title { opacity: 1; }
.nav-title strong, .nav-title small { max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.nav-title strong { font-size: 1.0625rem; font-weight: 600; }
.nav-title small { font-size: 0.75rem; color: var(--secondary); font-variant-numeric: tabular-nums; }
.page-accessory {
  position: relative; z-index: 2; flex: none; background: var(--bg);
  box-shadow: 0 0.5px 0 transparent; transition: box-shadow 0.2s;
}
.nav-bar.scrolled + .page-accessory { box-shadow: 0 0.5px 0 var(--separator); }
.seg-wrap { padding: 2px var(--gutter) 10px; }

.page-body {
  flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden;
  -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
  padding-bottom: calc(var(--above-tab) + 20px);
}
.has-bottom-bar .page-body { padding-bottom: calc(var(--above-tab) + var(--bb-h) + 20px); }
.page-content { padding-top: 8px; }
.large-head { padding: 2px var(--gutter) 14px; }
.large-title { font-size: 2.125rem; font-weight: 700; letter-spacing: 0.01em; line-height: 1.15; }
.large-sub { font-size: 0.9375rem; color: var(--secondary); margin-top: 2px; font-variant-numeric: tabular-nums; }
.large-head + .page-content { padding-top: 0; }

/* Toolbar buttons: round glyph buttons and capsules (no backdrop blur on small buttons). */
.bar-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-width: 44px; height: 44px; border-radius: 999px; background: var(--fill); color: var(--label);
  font-size: 1.0625rem; flex: none;
}
.bar-btn.text { padding: 0 16px; color: var(--accent); }
.bar-btn.prominent { background: var(--accent); color: #fff; font-weight: 600; }
.bar-btn .icon { width: 1.25rem; height: 1.25rem; }
.bar-btn:active { background: var(--fill-press); }
.bar-btn.prominent:active { opacity: 0.8; }
.bar-btn:disabled { opacity: 0.35; }
.sample-capsule {
  font-size: 0.6875rem; font-weight: 600; color: var(--secondary); white-space: nowrap;
  background: var(--fill); border-radius: 999px; padding: 4px 8px; letter-spacing: 0.01em;
}

/* ── Tab bar (floating capsule) ────────────────────────────── */
.tab-bar {
  position: absolute; z-index: 20; left: 50%; bottom: var(--tab-bottom); transform: translateX(-50%);
  display: flex; padding: 4px; gap: 2px; border-radius: 999px;
  background: var(--bar-material);
  -webkit-backdrop-filter: var(--bar-blur); backdrop-filter: var(--bar-blur);
  box-shadow: var(--bar-edge);
}
.tab-btn {
  width: 92px; height: 54px; border-radius: 999px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  font-size: 0.625rem; font-weight: 600; color: var(--label); transition: background 0.2s, color 0.2s;
}
.tab-btn .icon { width: 1.5rem; height: 1.5rem; }
.tab-btn[aria-selected="true"] { color: var(--accent); background: var(--fill); }
.tab-btn:active { background: var(--fill-press); }

/* ── Grouped lists ─────────────────────────────────────────── */
.group { margin: 0 var(--gutter) 26px; }
.group-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 4px 8px; min-height: 30px; }
.group-head h2 { font-size: 1.25rem; font-weight: 600; }
.head-note { font-size: 0.8125rem; color: var(--secondary); text-align: right; }
.head-btn { font-size: 0.9375rem; color: var(--accent); min-height: 44px; margin: -7px 0; padding: 0 2px; }
.group-foot { font-size: 0.8125rem; color: var(--secondary); padding: 7px 16px 0; line-height: 1.35; }
.group-foot.center { text-align: center; }
.list { background: var(--surface); border-radius: 12px; overflow: hidden; }
.list > * { position: relative; }
.list > * + *::before {
  content: ""; position: absolute; z-index: 2; top: 0; left: 16px; right: 0; height: 0.5px; background: var(--separator); pointer-events: none;
}
.list > :has(> .row-icon) + *::before, .list > :has(> .row-icon)::before { left: 56px; }
.list > .swipe + .swipe::before { left: 16px; }
.list > .swipe:has(.kind-glyph) + .swipe::before { left: 60px; }
.list > .swipe:has(.stop-row) + *::before { left: 56px; }
.row {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 44px;
  padding: 11px 16px; text-align: left; position: relative; background: var(--surface);
}
button.row { color: inherit; }
.row.tappable:active, .row.tappable.pressed { background: var(--fill-press); }
.row-icon { width: 28px; height: 28px; display: grid; place-items: center; color: var(--ic, var(--accent)); flex: none; }
.row-icon .icon { width: 1.375rem; height: 1.375rem; }
.row-icon.filled { background: var(--ibg); color: #fff; border-radius: 7px; }
.row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.row-title { font-size: 1.0625rem; overflow: hidden; text-overflow: ellipsis; }
.row-sub { font-size: 0.9375rem; color: var(--secondary); overflow-wrap: anywhere; }
.row-detail { color: var(--secondary); font-size: 1.0625rem; font-variant-numeric: tabular-nums; flex: none; }
.row-chevron { width: 0.875rem; height: 0.875rem; color: var(--tertiary-solid); flex: none; }
.muted-row { color: var(--secondary); font-size: 0.9375rem; justify-content: center; }
.error-row .row-title { font-size: 0.9375rem; }
.row.destructive-row { justify-content: center; color: var(--bad); font-size: 1.0625rem; }
.form-row { justify-content: space-between; min-height: 48px; padding-top: 6px; padding-bottom: 6px; }
.seg-row { padding: 8px 12px; }
.seg-row .seg { width: 100%; }
.field { gap: 12px; cursor: text; }
.field-label { width: 6.5rem; flex: none; font-size: 1.0625rem; }
.field-input { flex: 1; min-width: 0; border: 0; background: transparent; font-size: 1.0625rem; padding: 0; color: var(--label); outline: none; }
.field-input::placeholder { color: var(--tertiary); }
.field.multiline { align-items: flex-start; }
.field textarea { resize: vertical; min-height: 4.5em; line-height: 1.35; }
.title-field .field-input { font-size: 1.0625rem; font-weight: 600; }
.picker-btn { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; color: var(--secondary); font-size: 1.0625rem; margin: -6px -4px; padding: 0 4px; }
.picker-btn .icon { width: 0.875rem; height: 0.875rem; }
.picker-value.placeholder { color: var(--accent); }
.date-input, .time-input {
  font-size: 1.0625rem; color: var(--label); background: var(--fill); border: 0; border-radius: 8px;
  padding: 6px 10px; min-height: 36px; font-variant-numeric: tabular-nums; -webkit-appearance: none; appearance: none;
}
.date-input::-webkit-date-and-time-value, .time-input::-webkit-date-and-time-value { text-align: center; }
.time-input { min-width: 5.5rem; }

/* ── Buttons, capsules, chips ──────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 50px; padding: 0 22px; border-radius: 999px;
  font-size: 1.0625rem; font-weight: 600; text-align: center;
}
.btn .icon { width: 1.25rem; height: 1.25rem; }
.btn.filled { background: var(--accent); color: #fff; }
.btn.tinted { background: color-mix(in srgb, var(--accent) 15%, transparent); color: var(--accent); }
.btn.plain { color: var(--accent); min-height: 44px; padding: 0 12px; font-weight: 500; }
.btn.small { min-height: 44px; font-size: 0.9375rem; }
.btn.wide { width: 100%; }
.btn:active { opacity: 0.75; }
.btn:disabled { opacity: 0.4; }
.cta-block { padding: 0 var(--gutter) 24px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.cta-block.stack { align-items: stretch; padding-top: 16px; }
.cta-block .btn.wide { max-width: 420px; }
.pill-btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  min-height: 32px; padding: 0 14px; border-radius: 999px; background: var(--fill); color: var(--accent);
  font-size: 0.9375rem; font-weight: 600; flex: none;
}
.pill-btn::after { content: ""; position: absolute; inset: -6px -2px; }
.pill-btn .icon { width: 1rem; height: 1rem; }
.pill-btn.prominent { background: var(--accent); color: #fff; }
.pill-btn.on { background: color-mix(in srgb, var(--good) 16%, transparent); color: var(--good); }
.pill-btn:active { opacity: 0.7; }
.icon-btn { width: 44px; height: 44px; display: grid; place-items: center; color: var(--secondary); flex: none; border-radius: 999px; }
.icon-btn.accent { color: var(--accent); }
.icon-btn.good { color: var(--good); }
.icon-btn:active { background: var(--fill); }
.capsule {
  display: inline-block; font-size: 0.75rem; font-weight: 600; padding: 3px 8px; border-radius: 999px;
  background: var(--fill); color: var(--secondary); white-space: nowrap;
}
.capsule.tone-good { background: color-mix(in srgb, var(--good) 16%, transparent); color: var(--good); }
.dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--c); flex: none; }
.chip {
  position: relative; display: inline-flex; align-items: center; gap: 6px; flex: none;
  min-height: 36px; padding: 0 14px; border-radius: 999px; background: var(--surface);
  box-shadow: inset 0 0 0 0.5px var(--separator); font-size: 0.9375rem; font-weight: 500; white-space: nowrap;
}
.chip::after { content: ""; position: absolute; inset: -4px 0; }
.chip .icon { width: 1rem; height: 1rem; }
.chip.on { background: var(--accent); color: #fff; box-shadow: none; }
.chip.on .dot { box-shadow: 0 0 0 1.5px #fff; }
.chip:active { opacity: 0.7; }
.chip-wrap { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-scroller, .month-scroller {
  display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain;
  padding: 4px var(--gutter) 14px; scroll-padding: 0 var(--gutter);
}
.chip-scroller::-webkit-scrollbar, .month-scroller::-webkit-scrollbar, .tl-scroll::-webkit-scrollbar { display: none; }
.month-scroller { margin: 0 calc(-1 * var(--gutter)); scroll-snap-type: x proximity; }
.chip-div { width: 0.5px; flex: none; margin: 6px 2px; background: var(--separator); }
.month-cap {
  position: relative; flex: none; min-height: 36px; padding: 0 16px; border-radius: 999px;
  background: var(--surface); font-size: 0.9375rem; font-weight: 500; scroll-snap-align: start;
  box-shadow: inset 0 0 0 0.5px var(--separator);
}
.month-cap::after { content: ""; position: absolute; inset: -4px 0; }
.month-cap small { font-size: 0.75rem; opacity: 0.7; }
.month-cap.on { background: var(--accent); color: #fff; box-shadow: none; font-weight: 600; }

/* Segmented control */
.seg {
  position: relative; display: grid; grid-template-columns: repeat(var(--n), 1fr);
  padding: 2px; border-radius: 999px; background: var(--fill); min-height: 36px; --i: 0;
}
.seg-thumb {
  position: absolute; top: 2px; bottom: 2px; border-radius: 999px; background: var(--seg-thumb);
  left: calc(2px + (100% - 4px) * var(--i) / var(--n)); width: calc((100% - 4px) / var(--n));
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12), 0 3px 1px rgba(0, 0, 0, 0.04);
  transition: left 0.3s var(--ease);
}
.seg-btn { position: relative; z-index: 1; min-height: 32px; padding: 0 8px; font-size: 0.875rem; font-weight: 500; text-align: center; white-space: nowrap; border-radius: 999px; }
.seg-btn.on { font-weight: 600; }
.seg-compact { flex: 1; max-width: 230px; }

/* Stepper */
.stepper { display: flex; align-items: center; gap: 12px; }
.stepper-value { font-variant-numeric: tabular-nums; font-size: 1.0625rem; color: var(--secondary); }
.stepper-btns { display: flex; align-items: center; height: 36px; border-radius: 999px; background: var(--fill); }
.stepper-btn { position: relative; width: 48px; height: 36px; display: grid; place-items: center; color: var(--label); border-radius: 999px; }
.stepper-btn::after { content: ""; position: absolute; inset: -4px 0; }
.stepper-btn .icon { width: 1.125rem; height: 1.125rem; }
.stepper-btn:disabled { color: var(--tertiary); }
.stepper-btn:not(:disabled):active { background: var(--fill-press); }
.stepper-sep { width: 0.5px; height: 18px; background: var(--separator); }
.stepper.compact { gap: 0; height: 36px; border-radius: 999px; background: var(--fill); flex: none; }
.stepper.compact .stepper-btn { width: 40px; }
.stepper.compact .stepper-value { min-width: 1.75rem; text-align: center; font-weight: 600; color: var(--label); font-size: 1rem; white-space: nowrap; }
.cal-controls .stepper.compact .stepper-value { min-width: 4.6rem; font-weight: 500; font-size: 0.9375rem; }

/* Switch */
.switch { position: relative; display: inline-block; width: 51px; height: 31px; flex: none; }
.switch input { position: absolute; inset: -6px; width: calc(100% + 12px); height: calc(100% + 12px); margin: 0; opacity: 0; cursor: pointer; z-index: 1; }
.switch-track { position: absolute; inset: 0; border-radius: 999px; background: var(--fill-press); transition: background 0.25s; }
.switch-track::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: 50%;
  background: #fff; box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), 0 3px 1px rgba(0, 0, 0, 0.06); transition: transform 0.25s var(--ease);
}
.switch input:checked + .switch-track { background: var(--switch-on); }
.switch input:checked + .switch-track::after { transform: translateX(20px); }
.switch input:focus-visible + .switch-track { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Skeleton shimmer */
.skeleton { pointer-events: none; }
.sk { display: block; border-radius: 6px; background: var(--fill); position: relative; overflow: hidden; }
.sk::after {
  content: ""; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.45), transparent);
  animation: shimmer 1.3s infinite;
}
@media (prefers-color-scheme: dark) { .sk::after { background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.07), transparent); } }
@keyframes shimmer { to { transform: translateX(100%); } }
.sk-line { height: 14px; }
.sk-line.short { height: 11px; margin-top: 4px; }
.sk-price { width: 52px; height: 16px; flex: none; }
.sk-icon { width: 28px; height: 28px; border-radius: 50%; flex: none; }
.spinner {
  display: inline-block; width: 1em; height: 1em; border-radius: 50%; flex: none; vertical-align: -0.12em;
  border: 2px solid currentColor; border-right-color: transparent; opacity: 0.7; animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Empty states */
.empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 40px 32px 32px; }
.empty-icon { width: 3rem; height: 3rem; color: var(--secondary-solid); margin-bottom: 4px; }
.empty-title { font-size: 1.375rem; font-weight: 700; }
.empty-hint { font-size: 0.9375rem; color: var(--secondary); max-width: 300px; line-height: 1.4; }
.empty .btn { margin-top: 10px; }
.list .empty { padding: 28px 24px; }
.filter-empty { text-align: center; color: var(--secondary); font-size: 0.9375rem; padding: 24px; }

/* Toast */
.toast {
  position: fixed; inset: auto; margin: 0; border: 0; z-index: 1000;
  left: 50%; top: calc(env(safe-area-inset-top) + 10px); transform: translate(-50%, -16px);
  width: max-content; max-width: calc(100vw - 32px); padding: 12px 18px; border-radius: 22px; text-align: center;
  background: var(--toast-bg); color: var(--toast-fg); font-size: 0.9375rem; font-weight: 600;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2); opacity: 0; pointer-events: none;
  transition: opacity 0.25s, transform 0.35s var(--ease);
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ── Sheets ────────────────────────────────────────────────── */
dialog.sheet, dialog.menu-dialog {
  position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0; background: transparent; color: var(--label); overflow: hidden;
}
dialog::backdrop { background: transparent; }
dialog.sheet { background: rgba(0, 0, 0, 0); transition: background 0.35s; }
dialog.sheet.open { background: rgba(0, 0, 0, 0.32); }
.sheet-panel {
  --bg: var(--sheet-bg); --surface: var(--sheet-surface);
  position: absolute; left: 0; right: 0; bottom: 0; margin: 0 auto; max-width: 520px;
  display: flex; flex-direction: column;
  max-height: calc(100dvh - env(safe-area-inset-top) - 10px);
  background: var(--bg); border-radius: 16px 16px 0 0;
  box-shadow: 0 -4px 30px rgba(0, 0, 0, 0.12);
  transform: translateY(100%); transition: transform 0.42s var(--ease);
  padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right);
}
.sheet-panel.size-large { height: calc(100dvh - env(safe-area-inset-top) - 10px); }
dialog.sheet.open .sheet-panel { transform: none; }
.sheet-panel.dragging { transition: none; }
.sheet-grabber { width: 36px; height: 5px; border-radius: 3px; background: var(--tertiary-solid); margin: 6px auto 0; flex: none; }
.sheet-bar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; padding: 2px 8px 8px; min-height: 52px; flex: none; touch-action: none; }
.sheet-title { font-size: 1.0625rem; font-weight: 600; text-align: center; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.sheet-lead { justify-self: start; }
.sheet-trail { justify-self: end; }
.sheet-btn { min-height: 44px; padding: 0 10px; color: var(--accent); font-size: 1.0625rem; border-radius: 999px; }
.sheet-btn.prominent { font-weight: 600; }
.sheet-btn:disabled { color: var(--tertiary); }
.sheet-btn:active { background: var(--fill); }
.sheet-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 8px 0 calc(24px + env(safe-area-inset-bottom)); }
.sheet-body > .group:last-child { margin-bottom: 8px; }
.search-wrap { padding: 0 var(--gutter) 14px; }
.search-field { display: flex; align-items: center; gap: 6px; height: 40px; padding: 0 6px 0 10px; border-radius: 12px; background: var(--fill); color: var(--secondary); }
.search-field.inset { flex: 1; }
.search-field .icon { width: 1.125rem; height: 1.125rem; }
.search-input { flex: 1; min-width: 0; border: 0; background: transparent; font-size: 1.0625rem; color: var(--label); outline: none; padding: 0; -webkit-appearance: none; appearance: none; }
.search-input::placeholder { color: var(--secondary); }
.search-input::-webkit-search-cancel-button { display: none; }
.search-clear { width: 32px; height: 32px; display: grid; place-items: center; color: var(--secondary); }
.search-hint { text-align: center; font-size: 0.9375rem; color: var(--secondary); padding: 16px 32px; }
.search-row { padding: 8px 12px; }
.poi-results:empty { display: none; }
.poi-results > * { border-top: 0.5px solid var(--separator); }

/* Action sheet */
.action-sheet .as-panel {
  position: absolute; left: 8px; right: 8px; bottom: calc(8px + env(safe-area-inset-bottom));
  max-width: 504px; margin: 0 auto; transform: translateY(120%); transition: transform 0.35s var(--ease);
}
dialog.action-sheet.open .as-panel { transform: none; }
.as-group { background: var(--menu-bg); -webkit-backdrop-filter: blur(30px); backdrop-filter: blur(30px); border-radius: 14px; overflow: hidden; }
.as-head { padding: 14px 16px 12px; text-align: center; }
.as-title { font-size: 0.8125rem; font-weight: 600; color: var(--secondary); }
.as-msg { font-size: 0.8125rem; color: var(--secondary); margin-top: 2px; line-height: 1.35; }
.as-btn { display: block; width: 100%; min-height: 56px; font-size: 1.25rem; color: var(--accent); text-align: center; border-top: 0.5px solid var(--separator); }
.as-group > .as-btn:first-child { border-top: 0; }
.as-btn.destructive { color: var(--bad); }
.as-btn:active { background: var(--fill); }
.as-cancel { margin-top: 8px; border: 0; border-radius: 14px; background: var(--sheet-surface); font-weight: 600; }

/* Menus */
.menu {
  position: fixed; overflow-y: auto; border-radius: 14px; padding: 4px 0;
  background: var(--menu-bg); -webkit-backdrop-filter: blur(30px) saturate(180%); backdrop-filter: blur(30px) saturate(180%);
  box-shadow: 0 12px 44px rgba(0, 0, 0, 0.22), 0 0 0 0.5px var(--separator);
  opacity: 0; transform: scale(0.88); transition: opacity 0.16s, transform 0.22s var(--ease);
}
.menu-dialog.open .menu { opacity: 1; transform: none; }
.menu-item {
  display: grid; grid-template-columns: 20px 1fr 22px; align-items: center; gap: 8px; width: 100%;
  min-height: 44px; padding: 10px 14px 10px 10px; text-align: left; font-size: 1.0625rem;
}
.menu-item + .menu-item { border-top: 0.5px solid var(--separator); }
.menu-item .icon { width: 1.25rem; height: 1.25rem; justify-self: end; }
.menu-item small { display: block; font-size: 0.8125rem; color: var(--secondary); }
.menu-item.destructive { color: var(--bad); }
.menu-item:active, .menu-item:focus-visible { background: var(--fill); outline: none; }
.menu-item:disabled { color: var(--tertiary); }
.menu-check .icon { width: 1rem; height: 1rem; color: var(--label); }
.menu-head { font-size: 0.8125rem; color: var(--secondary); padding: 8px 14px 6px; }
.menu-div { height: 8px; background: var(--fill); }

/* Swipe actions */
.swipe { position: relative; overflow: hidden; }
.swipe-actions { position: absolute; top: 0; right: 0; bottom: 0; display: flex; }
.swipe-btn { width: 78px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: #fff; font-size: 0.8125rem; font-weight: 600; }
.swipe-btn .icon { width: 1.25rem; height: 1.25rem; }
.swipe-btn.tone-destructive { background: #FF3B30; }
.swipe-btn.tone-accent { background: var(--accent); }
.swipe-btn.tone-gray { background: #8E8E93; }
.swipe-content { position: relative; z-index: 1; touch-action: pan-y; transition: transform 0.3s var(--ease); }

/* ── Explore ───────────────────────────────────────────────── */
.ft-row { gap: 10px; }
.ft-label { width: 2.75rem; flex: none; font-size: 0.9375rem; color: var(--secondary); }
.ft-value { flex: 1; min-width: 0; font-size: 1.0625rem; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; display: flex; align-items: center; gap: 6px; }
.dest-row { padding-top: 12px; padding-bottom: 12px; }
.dest-city { font-size: 1.25rem; font-weight: 600; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.dest-price { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex: none; }
.dest-price .price { font-size: 1.0625rem; }
.dest-dates { font-size: 0.75rem; color: var(--secondary); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ── Explore map (SPEC §4.1a) ──────────────────────────────── */
.when-row { display: flex; align-items: center; gap: 10px; }
.when-row .seg { flex: 1; max-width: none; }
.when-row .stepper.compact .stepper-value { min-width: 4.6rem; font-weight: 500; font-size: 0.9375rem; }
.dest-row.selected { background: color-mix(in srgb, var(--accent) 10%, var(--surface)); }
.results-area { position: relative; }
.map-box { position: absolute; inset: 0; overflow: hidden; background: var(--surface2); }
.map-box > .map-canvas, .map-box > .map-canvas.maplibregl-map { position: absolute; inset: 0; } /* beats MapLibre’s own position: relative */
.xsheet-grab { display: none; }

/* Phone: map under the controls, list in a bottom sheet (peek / half; full = the plain list page). */
.explore-map .page-body { overflow: hidden; display: flex; flex-direction: column; padding-bottom: 0; }
.explore-map .large-head { flex: none; }
.explore-map .page-content { flex: 1; min-height: 0; display: flex; flex-direction: column; padding-top: 0; }
.explore-map .page-content > .group { flex: none; margin-bottom: 14px; }
.explore-map .results-area { flex: 1; min-height: 0; }
/* The map ends at the sheet's top edge (it only runs under the rounded corners), so a world-wide fit
   isn't limited by the part the sheet covers. */
.explore-map .map-box { bottom: calc(var(--sheet-h, 50%) - 18px); }
.explore-map .map-callout { bottom: 28px; }
.explore-map .results-group {
  position: absolute; z-index: 4; left: 0; right: 0; bottom: 0; height: var(--sheet-h, 50%); margin: 0;
  display: flex; flex-direction: column; background: var(--bg); border-radius: 16px 16px 0 0;
  box-shadow: 0 -0.5px 0 var(--separator), 0 -6px 24px rgba(0, 0, 0, 0.12);
  transition: height 0.36s var(--ease);
}
.explore-map .results-group.dragging { transition: none; }
.explore-map .xsheet-grab { display: flex; justify-content: center; padding: 6px 0 2px; touch-action: none; cursor: grab; }
.xsheet-grab span { width: 36px; height: 5px; border-radius: 3px; background: var(--tertiary-solid); }
.explore-map .xsheet-head { padding: 0 calc(var(--gutter) + 4px) 8px; touch-action: none; cursor: grab; }
.explore-map .results-list { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; margin: 0 var(--gutter) var(--tab-space, 90px); }
.map-list-btn {
  position: absolute; z-index: 5; top: 10px; right: 10px; display: inline-flex; align-items: center; gap: 6px;
  min-height: 36px; padding: 0 14px; border-radius: 999px; font-size: 0.9375rem; font-weight: 600; color: var(--accent);
  background: var(--bar-material); -webkit-backdrop-filter: var(--bar-blur); backdrop-filter: var(--bar-blur); box-shadow: var(--bar-edge);
}
.map-list-btn::after { content: ""; position: absolute; inset: -4px; }
.map-list-btn .icon { width: 1.125rem; height: 1.125rem; }
.map-callout {
  position: absolute; z-index: 5; left: 12px; right: 12px; bottom: 12px;
  display: flex; align-items: center; gap: 12px; padding: 12px 12px 12px 16px; border-radius: 18px;
  background: var(--bar-material); -webkit-backdrop-filter: var(--bar-blur); backdrop-filter: var(--bar-blur); box-shadow: var(--bar-edge);
  transition: bottom 0.36s var(--ease);
}
.co-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.co-city { font-size: 1.0625rem; font-weight: 600; }
.co-country, .co-dates { font-size: 0.8125rem; color: var(--secondary); font-variant-numeric: tabular-nums; }
.co-side { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; flex: none; }
.co-price { font-size: 1.25rem; }
.maplibregl-ctrl-attrib.maplibregl-compact { margin: 10px 0 0 10px !important; }

/* Wide: the list is a left panel, the map fills the rest. */
.explore-wide > .nav-bar, .explore-wide > .page-body { width: 400px; flex: none; }
.explore-wide .results-area { position: static; }
.explore-wide .map-box { position: absolute; top: 0; bottom: 0; left: 400px; right: 0; box-shadow: -0.5px 0 0 var(--separator); }
.explore-wide .map-callout { left: 50%; right: auto; width: min(440px, calc(100% - 32px)); transform: translateX(-50%); bottom: calc(var(--above-tab) + 8px); }
@media (min-width: 900px) {
  #app { max-width: none; box-shadow: none; }
  .page:not(.explore-wide) > .nav-bar, .page:not(.explore-wide) > .page-accessory,
  .page:not(.explore-wide) .page-content, .page:not(.explore-wide) .large-head { width: 100%; max-width: 600px; margin-left: auto; margin-right: auto; }
  .bottom-bar { max-width: 560px; margin-inline: auto; }
}

/* Pins and the origin dot */
.pin-wrap.fresh .pin { animation: pin-in 0.35s var(--ease) both; }
@keyframes pin-in { from { opacity: 0; transform: scale(0.6); } }
.pin {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 26px; padding: 3px 9px; border-radius: 999px; white-space: nowrap; cursor: pointer;
  background: var(--pin-bg); border: 1px solid var(--separator); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
  font-size: 0.8125rem; font-weight: 600; line-height: 1.15; color: var(--label); font-variant-numeric: tabular-nums;
}
.pin::after { content: ""; position: absolute; inset: -9px -4px; }
.pin.cheap .pin-price { color: var(--good); }
.pin-city { display: none; font-size: 0.6875rem; font-weight: 500; color: var(--secondary); }
.pin.named { border-radius: 12px; padding: 3px 9px 4px; }
.pin.named .pin-city { display: block; }
.pin.selected { background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3); }
.pin.selected .pin-price { color: #fff; }
.pin.selected .pin-city { color: rgba(255, 255, 255, 0.85); }
.pin:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.origin-pin { position: relative; width: 14px; height: 14px; pointer-events: none; }
.origin-dot { position: absolute; inset: 0; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px #fff, 0 1px 5px rgba(0, 0, 0, 0.35); }
.origin-code {
  position: absolute; left: 20px; top: 50%; transform: translateY(-50%); padding: 1px 6px; border-radius: 6px;
  font-size: 0.75rem; font-weight: 700; color: var(--label); background: var(--pin-bg); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}

/* ── Destination calendar ──────────────────────────────────── */
.cal-accessory { padding: 0 var(--gutter); }
.cal-controls { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 2px 0 6px; }
.cal-hint { font-size: 0.75rem; color: var(--secondary); text-align: center; padding: 2px 0 6px; }
.cal-weekdays { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; font-size: 0.75rem; font-weight: 600; color: var(--secondary); padding: 4px 0 8px; }
.cal-months { padding: 0 var(--gutter); }
.cal-month-title { font-size: 1.0625rem; font-weight: 600; margin: 18px 4px 8px; }
.cal-month:first-child .cal-month-title { margin-top: 10px; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); row-gap: 4px; }
.cal-day {
  position: relative; isolation: isolate; min-height: 52px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
}
.cal-num { font-size: 1.0625rem; font-variant-numeric: tabular-nums; line-height: 1.2; }
.cal-price { font-size: 0.6875rem; font-variant-numeric: tabular-nums; color: var(--tertiary); min-height: 0.85rem; line-height: 1.2; letter-spacing: -0.01em; }
.cal-day.t0 .cal-price { color: var(--good); font-weight: 600; }
.cal-day.t1 .cal-price { color: var(--secondary); }
.cal-day.t2 .cal-price { color: var(--tertiary); }
.cal-day.past { opacity: 0.3; }
.cal-day.loading .cal-price::before { content: ""; display: block; width: 26px; height: 7px; margin-top: 3px; border-radius: 4px; background: var(--fill); }
.cal-day:not(:disabled):active::before { content: ""; position: absolute; inset: 3px; border-radius: 14px; background: var(--fill); z-index: -1; }
.cal-day.in-range { background: var(--range); }
.cal-day.range-open { background: linear-gradient(to right, transparent 50%, var(--range) 50%); }
.cal-day.range-close { background: linear-gradient(to left, transparent 50%, var(--range) 50%); }
.cal-day.sel-start::after, .cal-day.sel-end::after {
  content: ""; position: absolute; inset: 2px 3px; border-radius: 14px; background: var(--accent); z-index: -1;
}
.cal-day.sel-start .cal-num, .cal-day.sel-end .cal-num { color: #fff; font-weight: 600; }
.cal-day.sel-start .cal-price, .cal-day.sel-end .cal-price { color: rgba(255, 255, 255, 0.9); font-weight: 600; }
.cal-blank { min-height: 52px; }
.cal-day.before-depart { opacity: 0.3; }
.cal-month-note { font-size: 0.8125rem; color: var(--secondary); margin: -4px 4px 8px; }
.bb-link { position: relative; align-self: flex-start; margin-top: 2px; font-size: 0.875rem; font-weight: 500; color: var(--accent); }
.bb-link::after { content: ""; position: absolute; inset: -12px -6px; }

.bottom-bar {
  position: absolute; z-index: 5; left: var(--gutter); right: var(--gutter); bottom: var(--above-tab);
  display: flex; align-items: center; gap: 12px; padding: 12px 12px 12px 18px; border-radius: 22px;
  min-height: 70px;
  background: var(--bar-material);
  -webkit-backdrop-filter: var(--bar-blur); backdrop-filter: var(--bar-blur);
  box-shadow: var(--bar-edge);
}
.bb-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.bb-title { font-size: 0.9375rem; font-weight: 600; font-variant-numeric: tabular-nums; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.bb-sub { font-size: 0.9375rem; color: var(--secondary); font-variant-numeric: tabular-nums; }
.bottom-bar .btn { min-height: 46px; padding: 0 18px; flex: none; }

/* ── Flights ───────────────────────────────────────────────── */
.flight-row { padding: 0; align-items: stretch; gap: 0; }
.flight-row.selected { background: color-mix(in srgb, var(--accent) 6%, var(--surface)); }
.flight-pick { flex: 1; min-width: 0; display: flex; gap: 12px; align-items: flex-start; padding: 12px 8px 12px 14px; text-align: left; }
.flight-pick:active { background: var(--fill); }
.pick-mark { color: var(--accent); padding-top: 1px; }
.pick-mark .icon { width: 1.5rem; height: 1.5rem; }
.flight-row:not(.selected) .pick-mark { color: var(--tertiary-solid); }
.flight-times { font-size: 1.0625rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.flight-side { display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; gap: 8px; padding: 12px 14px 12px 0; flex: none; }
.flight-side .price { font-size: 1.0625rem; }
.flight-list .row-title strong { font-weight: 600; }
.flight-trail { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex: none; }
.plane-icon { color: var(--accent); }
.plane-icon.flip .icon { transform: scaleX(-1); }
.small-caps { font-size: 0.8125rem; }

/* ── Trips ─────────────────────────────────────────────────── */
.cards-group .group-head { padding-bottom: 10px; }
.card-stack { display: flex; flex-direction: column; gap: 12px; }
.card-stack > .swipe { border-radius: 22px; }
.trip-card {
  display: flex; flex-direction: column; gap: 4px; width: 100%; text-align: left;
  padding: 16px 18px 18px; background: var(--surface); border-radius: 22px; box-shadow: var(--card-shadow);
}
.trip-card:active { background: color-mix(in srgb, var(--surface) 92%, var(--label)); }
.tc-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.tc-name { font-size: 1.375rem; font-weight: 600; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.tc-count { font-size: 0.9375rem; font-weight: 600; color: var(--secondary); flex: none; font-variant-numeric: tabular-nums; }
.tc-count.live { color: var(--accent); }
.tc-dates { font-size: 0.9375rem; color: var(--secondary); font-variant-numeric: tabular-nums; }
.phase-past .tc-name { color: var(--secondary); }
.stop-bar { display: flex; gap: 3px; height: 6px; margin-top: 10px; }
.stop-bar > span { border-radius: 3px; min-width: 6px; }
.stop-bar .empty-seg { background: var(--fill); }

/* ── Trip · Plan ───────────────────────────────────────────── */
.plan-summary { font-size: 0.9375rem; color: var(--secondary); padding: 0 4px 10px; line-height: 1.4; }
.stop-row { padding: 6px 12px 6px 2px; gap: 2px; align-items: center; }
.reorder-handle { width: 40px; height: 44px; display: grid; place-items: center; color: var(--tertiary-solid); touch-action: none; cursor: grab; flex: none; }
.reorder-handle .icon { width: 1.25rem; height: 1.25rem; }
.stop-main { flex: 1; min-width: 0; display: flex; align-items: flex-start; gap: 10px; text-align: left; padding: 6px 4px 6px 0; }
.stop-dot { width: 12px; height: 12px; margin-top: 6px; }
.stop-city { font-weight: 600; }
.stop-why { font-size: 0.8125rem; color: var(--secondary); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: 2px; }
.stops-list .swipe { transition: transform 0.2s var(--ease); }
.stops-list .swipe.lifted { z-index: 5; transition: none; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); border-radius: 12px; }
.stops-list.reordering { overflow: visible; }
.suggest-card { background: var(--surface); border-radius: 22px; padding: 18px; display: flex; flex-direction: column; gap: 10px; }
.suggest-head { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 4px; }
.suggest-head h3 { font-size: 1.0625rem; font-weight: 600; margin-bottom: 2px; }
.suggest-glyph { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; flex: none; color: #fff; background: linear-gradient(135deg, #0A84FF, #5E5CE6); }
.suggest-glyph .icon { width: 1.375rem; height: 1.375rem; }
.field-cap { font-size: 0.8125rem; font-weight: 600; color: var(--secondary); margin-top: 6px; }
.suggest-card .btn.wide { margin-top: 8px; }
.suggest-card .btn.plain { margin-top: -2px; }
.suggest-card .error-row { border-radius: 12px; background: var(--fill); }

/* Plan job in progress */
.progress-head { display: flex; gap: 14px; align-items: flex-start; }
.progress-head h3 { font-size: 1.0625rem; font-weight: 600; margin-bottom: 4px; }
.progress-glyph { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; flex: none; color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.progress-glyph .still { display: none; width: 1.375rem; height: 1.375rem; }
.spinner.big { width: 1.25rem; height: 1.25rem; border-width: 2.5px; opacity: 1; }
.plan-elapsed { font-size: 0.8125rem; color: var(--tertiary); font-variant-numeric: tabular-nums; margin-top: 6px; }
@media (prefers-reduced-motion: reduce) {
  .progress-glyph .spinner { display: none; }
  .progress-glyph .still { display: block; }
}
.plan-notice {
  display: flex; align-items: center; gap: 10px; margin-bottom: 10px; padding: 10px 12px 10px 14px; border-radius: 12px;
  background: color-mix(in srgb, var(--warn) 12%, var(--surface)); font-size: 0.9375rem; line-height: 1.3;
}
.plan-notice > .icon { color: var(--warn); width: 1.25rem; height: 1.25rem; }
.plan-notice > span { flex: 1; }
.tl-card { background: var(--surface); border-radius: 12px; overflow: hidden; }
.tl-scroll { overflow-x: auto; scrollbar-width: none; padding: 12px 12px 14px; }
.tl { display: grid; grid-template-columns: repeat(var(--days), 44px); row-gap: 6px; width: max-content; }
.tl-day { display: flex; flex-direction: column; align-items: center; gap: 1px; }
.tl-day small { font-size: 0.6875rem; color: var(--secondary); font-weight: 600; }
.tl-day b { font-size: 0.9375rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.tl-day.weekend small { color: var(--tertiary); }
.tl-stop {
  height: 28px; margin: 0 1.5px; border-radius: 8px; display: flex; align-items: center; overflow: hidden;
  padding: 0 8px; font-size: 0.8125rem; font-weight: 600; white-space: nowrap;
  background: color-mix(in srgb, var(--c) 22%, var(--surface)); box-shadow: inset 4px 0 0 var(--c);
}
.tl-stop span { overflow: hidden; text-overflow: ellipsis; }
.tl-event {
  --ec: var(--accent);
  display: flex; align-items: center; gap: 6px; min-height: 34px; min-width: 0; margin: 0 1.5px; text-align: left;
  font-size: 0.75rem; font-weight: 600; white-space: nowrap; color: color-mix(in srgb, var(--ec) 80%, var(--label));
}
.tl-event.festival { --ec: #FF375F; }
.tl-ev-bar {
  flex: 0 0 calc(var(--len) / var(--span) * 100% - 3px); min-width: 30px; height: 30px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center; gap: 4px; padding: 0 8px; overflow: hidden;
  background: color-mix(in srgb, var(--ec) 18%, var(--surface)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ec) 35%, transparent);
}
.tl-event.inside .tl-ev-bar { flex: 1; justify-content: flex-start; }
.tl-event .icon { width: 0.9375rem; height: 0.9375rem; flex: none; }
.tl-ev-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.tl-event:active { opacity: 0.7; }
.find-link { font-size: 0.9375rem; flex: none; }
.rating {
  display: inline-grid; place-items: center; min-width: 2rem; height: 1.3rem; padding: 0 5px; border-radius: 6px;
  background: var(--fill); color: var(--label); font-size: 0.8125rem; font-weight: 700; font-variant-numeric: tabular-nums;
}
.rating.high { background: color-mix(in srgb, var(--good) 18%, transparent); color: var(--good); }
.rating.small { min-width: 1.8rem; height: 1.15rem; font-size: 0.75rem; }
.cost-row .price { font-weight: 500; }
.cost-row.total .row-title, .cost-row.total .price { font-weight: 700; }

/* ── Trip · Days (Wallet stack) ────────────────────────────── */
.saved-tray { padding: 0 var(--gutter) 14px; }
.tray-btn {
  position: relative; display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px 0 14px;
  border-radius: 999px; background: var(--surface); color: var(--accent); font-size: 0.9375rem; font-weight: 600;
  box-shadow: inset 0 0 0 0.5px var(--separator);
}
.tray-btn::after { content: ""; position: absolute; inset: -4px 0; }
.tray-btn .icon { width: 1rem; height: 1rem; }
.tray-btn .icon:last-child { width: 0.75rem; height: 0.75rem; opacity: 0.7; }
.wallet { padding: 0 var(--gutter); display: flex; flex-direction: column; }
.day-card {
  --band: color-mix(in srgb, var(--stop) var(--wallet-mix), var(--surface));
  position: relative; border-radius: 22px; background: var(--band); padding-bottom: 14px;
  box-shadow: var(--wallet-shadow);
  transition: margin-bottom 0.38s var(--spring), background-color 0.2s;
}
.day-card + .day-card { margin-top: -14px; }
.day-card:last-child:not(.expanded) { padding-bottom: 0; }
.day-card.expanded { background: var(--surface); margin-bottom: 28px; }
.day-card.expanded:last-child { margin-bottom: 0; }
@media (prefers-color-scheme: dark) {
  .day-card { box-shadow: inset 0 0.5px 0 rgba(255, 255, 255, 0.10); }
  .day-head { box-shadow: inset 0 0.5px 0 rgba(255, 255, 255, 0.10); }
}
.day-head {
  display: flex; align-items: center; gap: 12px; width: 100%; height: 56px; padding: 0 16px 0 18px;
  background: var(--band); border-radius: 22px 22px 0 0; text-align: left;
}
.day-card:not(.expanded) .day-head { border-radius: 22px; }
.day-head:active { filter: brightness(0.97); }
.dh-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.dh-date { font-size: 1.0625rem; font-weight: 600; display: flex; align-items: center; gap: 8px; font-variant-numeric: tabular-nums; }
.dh-city { font-size: 0.9375rem; color: var(--secondary); display: flex; align-items: center; gap: 6px; overflow: hidden; white-space: nowrap; }
.dh-city .dot { width: 8px; height: 8px; }
.today-tag { font-size: 0.6875rem; font-weight: 700; color: #fff; background: var(--accent); border-radius: 999px; padding: 2px 7px; }
.dh-count {
  min-width: 28px; height: 24px; padding: 0 8px; border-radius: 999px; display: grid; place-items: center;
  background: color-mix(in srgb, var(--stop) 30%, transparent); font-size: 0.8125rem; font-weight: 600; font-variant-numeric: tabular-nums;
}
.day-head.drop-target { box-shadow: inset 0 0 0 2.5px var(--accent); }
.day-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.38s var(--spring); }
.day-card.expanded .day-body { grid-template-rows: 1fr; }
.day-body-inner { min-height: 0; overflow: hidden; }
.day-items { padding: 4px 0 0; }
.day-item {
  display: flex; align-items: flex-start; gap: 12px; width: 100%; min-height: 56px; padding: 10px 16px 10px 18px;
  text-align: left; position: relative; touch-action: pan-y; -webkit-user-select: none; user-select: none;
}
.day-item + .day-item::before { content: ""; position: absolute; top: 0; left: 120px; right: 0; height: 0.5px; background: var(--separator); }
.day-item:active { background: var(--fill); }
.di-time { width: 3.1rem; flex: none; display: flex; flex-direction: column; font-size: 0.9375rem; font-weight: 600; font-variant-numeric: tabular-nums; padding-top: 4px; }
.di-time small { font-size: 0.75rem; font-weight: 400; color: var(--secondary); }
.di-time .anytime { font-size: 0.8125rem; font-weight: 500; color: var(--secondary); }
.di-glyph { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; flex: none; color: color-mix(in srgb, var(--stop) 85%, var(--label)); background: color-mix(in srgb, var(--stop) 16%, transparent); }
.di-glyph .icon { width: 1.0625rem; height: 1.0625rem; }
.di-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; padding-top: 5px; }
.di-title { font-size: 1.0625rem; overflow-wrap: anywhere; }
.di-status { font-size: 0.8125rem; }
.day-item.done { opacity: 0.5; }
.day-empty { padding: 12px 18px 4px; color: var(--secondary); font-size: 0.9375rem; }
.day-add { display: flex; align-items: center; gap: 6px; min-height: 48px; padding: 0 18px 4px; color: var(--accent); font-size: 1.0625rem; }
.day-add .icon { width: 1.125rem; height: 1.125rem; }
.drag-ghost {
  position: fixed; z-index: 1000; pointer-events: none; margin: 0; background: var(--surface);
  border-radius: 12px; box-shadow: 0 14px 40px rgba(0, 0, 0, 0.28); --stop: var(--accent);
}
.drag-source { opacity: 0.3; }
html.dragging-item, html.dragging-item * { cursor: grabbing !important; -webkit-user-select: none; user-select: none; }

/* ── Trip · Saved ──────────────────────────────────────────── */
.saved-row { padding: 0 6px 0 0; }
.saved-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; padding: 10px 6px 10px 16px; text-align: left; }
.saved-main:active { background: var(--fill); }
.kind-glyph { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; flex: none; color: color-mix(in srgb, var(--c) 85%, var(--label)); background: color-mix(in srgb, var(--c) 16%, transparent); }
.kind-glyph .icon { width: 1.0625rem; height: 1.0625rem; }
.list > :has(.kind-glyph) + *::before { left: 60px; }

/* Event + stay detail */
.event-hero, .stay-hero { display: flex; gap: 14px; align-items: flex-start; padding: 4px var(--gutter) 14px; }
.stay-hero { flex-direction: column; gap: 6px; }
.event-hero h3, .stay-hero h3 { font-size: 1.375rem; font-weight: 700; margin: 6px 0 4px; line-height: 1.2; }
.event-glyph { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; flex: none; color: var(--c); background: color-mix(in srgb, var(--c) 16%, transparent); }
.event-glyph .icon { width: 1.625rem; height: 1.625rem; }
.event-hero .row-sub { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.event-notes { padding: 0 var(--gutter) 8px; font-size: 0.9375rem; color: var(--secondary); line-height: 1.45; }
.stay-price { font-size: 1.0625rem; }
.swatches { display: flex; gap: 12px; flex-wrap: wrap; padding: 4px 0; }
.swatch { position: relative; width: 32px; height: 32px; border-radius: 50%; background: var(--c); }
.swatch::after { content: ""; position: absolute; inset: -6px; }
.swatch.on { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--c); }
.hours-row { display: grid; grid-template-columns: 1fr auto auto; align-items: center; column-gap: 10px; row-gap: 8px; }
.hours-day { font-size: 1.0625rem; }
.closed-label { font-size: 1.0625rem; }
.hours-row .switch { grid-column: 3; grid-row: 1; }
.hours-ranges { grid-column: 1 / -1; grid-row: 2; display: flex; flex-direction: column; gap: 6px; }
.hours-range { display: flex; align-items: center; gap: 8px; }
.hours-range .time-input { flex: 1; min-width: 0; }
.range-remove { position: relative; width: 28px; height: 28px; display: grid; place-items: center; flex: none; }
.range-remove::after { content: ""; position: absolute; inset: -8px; }
.range-remove .icon { width: 1.375rem; height: 1.375rem; }
.range-remove-space { width: 28px; flex: none; }
.add-hours { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; min-height: 44px; color: var(--accent); font-size: 1.0625rem; margin-bottom: -6px; }
.add-hours .icon { width: 1.375rem; height: 1.375rem; color: var(--good); }

/* Stays */
.stay-row { align-items: flex-start; padding: 14px 16px; }
.stay-photo { width: 64px; height: 64px; border-radius: 12px; object-fit: cover; flex: none; }
.stay-photo.ph { display: grid; place-items: center; background: var(--fill); color: var(--secondary-solid); }
.stay-photo.ph .icon { width: 1.75rem; height: 1.75rem; }
.stay-name { font-weight: 600; white-space: normal; }
.stay-row .row-sub { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.stay-prices { font-size: 0.9375rem; font-variant-numeric: tabular-nums; margin-top: 2px; }
.stay-actions { display: flex; gap: 10px; margin-top: 10px; }
.stay-row.selected { background: color-mix(in srgb, var(--good) 6%, var(--surface)); }

/* ── Today ─────────────────────────────────────────────────── */
.card { background: var(--surface); border-radius: 22px; }
.upnext { margin: 0 var(--gutter) 22px; padding: 16px; display: flex; flex-direction: column; gap: 4px; box-shadow: var(--card-shadow); }
.eyebrow { font-size: 0.8125rem; font-weight: 600; color: var(--secondary); }
.un-main { display: flex; gap: 12px; align-items: flex-start; width: 100%; text-align: left; margin: 4px 0 12px; }
.un-glyph { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; flex: none; color: color-mix(in srgb, var(--stop) 85%, var(--label)); background: color-mix(in srgb, var(--stop) 16%, transparent); }
.un-title { font-size: 1.375rem; font-weight: 600; line-height: 1.2; }
.un-time { font-size: 0.9375rem; color: var(--secondary); font-variant-numeric: tabular-nums; }
.un-status { font-size: 0.9375rem; font-weight: 500; }
.upnext .row-sub { margin-top: 2px; }
.group > .card.tday { padding: 0; overflow: hidden; }
.bound-row { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 50px; padding: 0 16px; font-size: 0.9375rem; font-weight: 600; text-align: left; font-variant-numeric: tabular-nums; }
.bound-row span { flex: 1; }
.bound-row .icon:first-child { width: 1.25rem; height: 1.25rem; color: #FF9F0A; }
.bound-row:last-child .icon:first-child { color: #5E5CE6; }
.bound-row:active { background: var(--fill); }
.bound-row:first-child { border-bottom: 0.5px solid var(--separator); }
.bound-row:last-child { border-top: 0.5px solid var(--separator); }
.tday-grid { position: relative; margin: 16px 10px 16px 0; }
.hour { position: absolute; left: 58px; right: 0; height: 0; border-top: 0.5px solid var(--separator); }
.hour-label { position: absolute; left: -58px; width: 50px; top: -0.5em; text-align: right; font-size: 0.75rem; line-height: 1; color: var(--secondary); font-variant-numeric: tabular-nums; }
.hour-label.hidden-label { visibility: hidden; }
.bound-mark { position: absolute; left: 58px; right: 0; border-top: 1px dashed var(--tertiary-solid); }
.lane { position: absolute; top: 0; bottom: 0; left: 62px; right: 0; }
.block {
  position: absolute; display: flex; overflow: hidden; border-radius: 8px;
  background: color-mix(in srgb, var(--stop) 12%, var(--surface)); box-shadow: inset 4px 0 0 var(--stop);
}
.block-main { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 5px 0 5px 12px; text-align: left; overflow: hidden; }
.block-main > * { flex-shrink: 0; }
.block-title { font-size: 0.9375rem; font-weight: 600; max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.block-time { font-size: 0.75rem; color: var(--secondary); font-variant-numeric: tabular-nums; }
.block-status { font-size: 0.75rem; font-weight: 500; white-space: nowrap; }
.block.narrow .block-title { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
.block.narrow .block-status { white-space: normal; }
.block.narrow .check { width: 34px; }
.block.narrow .block-main { padding-left: 10px; }
.block.compact .block-main { flex-direction: row; align-items: center; gap: 6px; padding-top: 0; padding-bottom: 0; }
.block.compact .block-status { display: none; }
.block.done { opacity: 0.45; }
.check { width: 44px; height: 44px; display: grid; place-items: center; color: var(--tertiary-solid); flex: none; }
.check .icon { width: 1.5rem; height: 1.5rem; }
.check[aria-pressed="true"] { color: var(--accent); }
.block .check { align-self: flex-start; height: 40px; }
.now-line { position: absolute; z-index: 6; left: 58px; right: 0; height: 2px; margin-top: -1px; background: var(--bad); pointer-events: none; }
.now-line::before { content: ""; position: absolute; left: -5px; top: -4px; width: 10px; height: 10px; border-radius: 50%; background: var(--bad); }
.now-label { position: absolute; left: -58px; width: 50px; top: -0.5em; padding-right: 2px; text-align: right; font-size: 0.75rem; font-weight: 700; line-height: 1; color: var(--bad); background: var(--surface); font-variant-numeric: tabular-nums; }
.anytime-row { padding: 0 6px 0 4px; gap: 0; }
.anytime-row.done .saved-main { opacity: 0.45; }
.anytime-row .saved-main { padding-left: 4px; }
.inline-icon { width: 1.25rem; height: 1.25rem; color: var(--accent); }

/* ── Motion preferences ────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}

/* Tone colors win over any text color set above. */
[class].tone-good { color: var(--good); }
[class].tone-warn { color: var(--warn); }
[class].tone-bad { color: var(--bad); }
[class].tone-secondary { color: var(--secondary); }
.flight-dates { font-size: 0.9375rem; font-weight: 600; color: var(--accent); font-variant-numeric: tabular-nums; }