/* ============================================================================
   Harbor — GoThere's design system: cool, airy, boarding-pass clean. A single
   marine accent, restrained hierarchy. Every color is a token; light + dark are
   the same tokens redefined. The old names (--sky/--indigo/--good/--warn/--bad)
   are kept as ALIASES so the ~50 rules using them re-theme to the marine accent.
   ========================================================================= */
:root, :root[data-theme="light"] {
  color-scheme: light;
  --bg: #e9eef2;                 /* pale blue-gray page ground */
  --card: #ffffff;               /* card surface */
  --surface-2: #dde6ec;          /* cool secondary/elevated surface */
  --line: #d6e0e7;               /* cool hairline border */
  --ink: #1d2a36;                /* cool slate ink */
  --muted: #66747f;

  --accent: #2f7391;             /* marine — primary */
  --accent-2: #275f79;           /* deeper marine for gradients/hover */
  --accent-ink: #ffffff;         /* text on an accent fill */
  --accent-soft: color-mix(in srgb, var(--accent) 13%, var(--card));
  --accent-line: color-mix(in srgb, var(--accent) 32%, var(--card));
  --accent-text: #276379;        /* marine-colored text, readable on light */
  --chip-ink: #10222b;           /* text on a soft-tint pill (§15) */

  --teal: #2b8a72;               /* support hue + success/money/good (sea-green) */
  --teal-soft: color-mix(in srgb, var(--teal) 15%, var(--card));
  --teal-text: #1f7a63;
  --grape: #5a6ea8;              /* support hue — categories/2nd series (cool indigo) */
  --grape-soft: color-mix(in srgb, var(--grape) 14%, var(--card));
  --grape-text: #47588c;
  --gold: #c98a2e;               /* warn/amber */
  --gold-soft: color-mix(in srgb, var(--gold) 18%, var(--card));
  --gold-text: #8a5c1f;
  --danger: #c0483f;
  --danger-soft: color-mix(in srgb, var(--danger) 13%, var(--card));
  --danger-text: #a63a32;

  --glass: rgba(255,255,255,.82);
  --shadow: 0 6px 20px rgba(29,42,54,.10);
  --shadow-sm: 0 1px 6px rgba(29,42,54,.07);
  --theme-color: #2f7391;

  /* aliases so pre-Popsicle rules re-theme for free */
  --sky: var(--accent);
  --indigo: var(--accent);
  --good: var(--teal);
  --warn: var(--gold-text);
  --bad: var(--danger);

  --radius: 15px;
  --safe-b: env(safe-area-inset-bottom, 0px);
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #111820;
  --card: #1c242e;
  --surface-2: #26313d;
  --line: #2e3a46;
  --ink: #e6edf2;
  --muted: #8a99a5;

  --accent: #5aabca;             /* luminous marine */
  --accent-2: #3f93b4;
  --accent-ink: #0a1720;         /* near-black on the light accent */
  --accent-soft: color-mix(in srgb, var(--accent) 18%, var(--card));
  --accent-line: color-mix(in srgb, var(--accent) 38%, var(--card));
  --accent-text: #7ec2dc;
  --chip-ink: #ffffff;

  --teal: #3fd0b4;
  --teal-soft: color-mix(in srgb, var(--teal) 20%, var(--card));
  --teal-text: #56dcc4;
  --grape: #8aa0e0;
  --grape-soft: color-mix(in srgb, var(--grape) 22%, var(--card));
  --grape-text: #a3b6ee;
  --gold: #e0a45c;
  --gold-soft: color-mix(in srgb, var(--gold) 22%, var(--card));
  --gold-text: #e6b877;
  --danger: #ff6b78;
  --danger-soft: color-mix(in srgb, var(--danger) 22%, var(--card));
  --danger-text: #ff8a94;

  --glass: rgba(17,24,32,.82);
  --shadow: 0 10px 26px rgba(0,0,0,.42);
  --shadow-sm: 0 2px 10px rgba(0,0,0,.35);
  --theme-color: #111820;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
/* overflow-x: HIDDEN turns body into a scroll container and silently BREAKS every
   position:sticky inside (focus Back bar, top bar). CLIP guards against sideways
   scroll without doing that; the hidden line is the fallback for old browsers. */
html, body { margin: 0; padding: 0; overflow-x: hidden; overflow-x: clip; }
body {
  font-family: ui-rounded, "SF Pro Rounded", "Segoe UI Variable Text", "Segoe UI", Nunito, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  font-variant-numeric: tabular-nums;
  background: var(--bg);
  color: var(--ink);
  line-height: 1.5;
  min-height: 100vh;
  padding-bottom: calc(78px + var(--safe-b));
}

/* Top bar */
.topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  background: linear-gradient(120deg, var(--accent), var(--accent-2));
  color: var(--accent-ink); padding: 14px 18px calc(14px);
  padding-top: calc(14px + env(safe-area-inset-top, 0px));
  box-shadow: var(--shadow-sm);
}
.topbar .brand, .topbar .tagline { color: var(--accent-ink); }
/* The build, very small, in the top corner (2026-09-25). Inside the sticky header, so it sits below
   the notch and clears the landscape edge; small enough to ignore, there when he needs it. */
.appver {
  /* Anchored to the header's BOTTOM corner, under the theme toggle (2026-09-25). It first sat 2px
     below the status bar, and on an iPhone that strip is blurred and washed out by the system, so
     the badge showed as a smudge he could not read. Measured from the bottom, the notch height no
     longer matters, and it lines up with the toggle's right edge. */
  position: absolute; bottom: 6px; right: calc(18px + env(safe-area-inset-right, 0px));
  font: 500 9.5px/1.2 ui-monospace, 'SF Mono', Menlo, Consolas, monospace; letter-spacing: .02em;
  /* Full-strength ink: faded to 72% it measured 3.47:1 in dark mode, under the 4.5 floor, and text
     this small needs the contrast more, not less. It stays quiet by being small, not by being faint. */
  color: var(--accent-ink); cursor: pointer; user-select: none; -webkit-user-select: none;
  padding: 1px 3px; border-radius: 4px;
}
/* A newer build is live: an inverted pill, the header's own two colors swapped (7.0:1 light, 5.23:1
   dark). A darkened backdrop was tried first and would have put dark-mode's navy ink on a darker teal. */
.appver.stale { background: var(--accent-ink); color: var(--accent-2); }
/* app.js failed to load (the onerror on its script tag): an error pill in the header's own ink,
   white on --danger 4.95:1 light, near-black on the dark --danger 6.60:1. */
.appver.fail { background: var(--danger); color: var(--accent-ink); font-weight: 700; }
/* The PIN gate (fixed, z 100) covers the whole page, header included, so the badge vanished on
   exactly the screen that loads before sign-in. While the gate is up, lift the header above it
   with everything but the badge hidden and untappable, and ink the badge for the gate's pale (or
   midnight) ground: --ink is 11.07:1 on the gate's darkest light stop, 12.93:1 in dark. */
body:has(#pin-gate:not([hidden])) .topbar { z-index: 101; background: none; box-shadow: none; pointer-events: none; }
body:has(#pin-gate:not([hidden])) .topbar > :not(.appver) { visibility: hidden; }
body:has(#pin-gate:not([hidden])) .appver:not(.fail) { color: var(--ink); background: none; }
/* L / D / A theme segmented pill (sits on the brand gradient) */
.theme-seg { display: inline-flex; flex: 0 0 auto; background: rgba(0,0,0,.16); border-radius: 999px; padding: 2px; }
.theme-seg button { border: 0; background: transparent; color: var(--accent-ink); opacity: .72; width: 30px; height: 26px; border-radius: 999px; font-weight: 800; font-size: 12px; cursor: pointer; font-family: inherit; }
.topbar-r { display: flex; align-items: center; gap: 8px; }
.bell-btn { border: 0; background: rgba(255,255,255,.16); color: var(--accent-ink); width: 30px; height: 30px; border-radius: 999px; font-size: 15px; cursor: pointer; line-height: 1; }
.bell-btn:active { transform: scale(.94); }

/* Travel updates (alert history) */
.alert-row { margin: 0 0 10px; }
.alert-head { display: flex; align-items: baseline; gap: 8px; }
.alert-head b { flex: 1 1 auto; min-width: 0; font-size: 14.5px; }
.alert-ico { flex: 0 0 auto; }
.alert-when { flex: 0 0 auto; color: var(--muted); font-size: 11.5px; white-space: nowrap; }
.alert-body { margin-top: 5px; color: var(--muted); font-size: 13px; line-height: 1.55; white-space: pre-line; }
.theme-seg button.on { background: var(--card); color: var(--accent-text); opacity: 1; box-shadow: 0 1px 3px rgba(0,0,0,.2); }
.brand { font-size: 22px; font-weight: 800; display: flex; align-items: center; gap: 8px; }
.logo { font-size: 22px; }
.tagline { font-size: 12.5px; opacity: .9; margin-top: 1px; }

main { max-width: 1600px; margin: 0 auto; padding: 16px clamp(12px, 2.5vw, 30px) 40px; }
.loading { text-align: center; color: var(--muted); padding: 40px 0; }

/* Trip lists: column count scales with window. 1fr columns always shrink to fit,
   so there's never sideways scroll. Phone 1 · iPad 2 · laptop 3 · wide 4. */
.trip-grid { display: grid; grid-template-columns: 1fr; gap: 14px; align-items: start; }
@media (min-width: 620px)  { .trip-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1020px) { .trip-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1500px) { .trip-grid { grid-template-columns: repeat(4, 1fr); } }
/* Forms + settings read best in a constrained column rather than stretched wide. */
.narrow { max-width: 640px; margin: 0 auto; }
.settings-wrap { max-width: 900px; margin: 0 auto; }
.trip-grid > .card { margin: 0; }

/* Section headers */
.sec-title { font-size: 13px; font-weight: 800; letter-spacing: .04em; color: var(--accent-text); text-transform: uppercase; margin: 22px 4px 10px; }
.hint { color: var(--muted); font-size: 13px; margin: 4px 4px 12px; }

/* Cards */
.card {
  background: var(--card); border-radius: var(--radius); padding: 14px 16px;
  margin: 10px 0; box-shadow: 0 1px 6px rgba(15, 23, 42, .07);
  border: 1px solid var(--line);
}
.trip-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; cursor: pointer; }
.trip-name { font-size: 17px; font-weight: 800; }
.trip-dates { color: var(--muted); font-size: 13px; margin-top: 2px; }
.trip-kinds { font-size: 16px; white-space: nowrap; }
.trip-loc { display: inline-block; background: var(--accent-soft); color: var(--chip-ink); border-radius: 999px; padding: 2px 10px; font-size: 12px; font-weight: 700; margin-top: 6px; margin-right: 4px; }
.trip-loc.who-other { background: var(--gold-soft); color: var(--chip-ink); }
.trip-loc.who-with { background: var(--grape-soft); color: var(--chip-ink); }
/* Who is going (2026-10-09): just him, him with others, or others without him. Same soft-tint pills and
   --chip-ink as the rest, so the contrast is the pills' own: measured below with the guide's numbers. */
.trip-loc.who-me { background: var(--teal-soft); color: var(--chip-ink); }
.trip-loc.who-both { background: var(--grape-soft); color: var(--chip-ink); }

/* Traveler filter bar — individual pills that wrap (scales to any # of people) */
.filterbar { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 4px 12px; }
.fbtn { border: 1px solid var(--line); background: var(--card); color: var(--muted); font-weight: 700; font-size: 13px; padding: 6px 13px; border-radius: 999px; cursor: pointer; }
.fbtn.on { background: var(--sky); color: var(--accent-ink); border-color: var(--accent-text); }

/* Trip photos — small icon-like thumbnails */
.thumbs { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 8px 2px 2px; }
.thumb { width: 54px; height: 54px; object-fit: cover; border-radius: 10px; box-shadow: 0 1px 3px rgba(15,23,42,.18); background: var(--line); }
.thumb-add { border: 1px dashed var(--line); background: var(--surface-2); color: var(--muted); border-radius: 10px; height: 54px; padding: 0 12px; font-size: 12.5px; font-weight: 700; cursor: pointer; }
.thumb-add:active { background: var(--surface-2); }
/* Subtle "+" when the trip already has photos — a quiet affordance, not a big button. */
.thumb-add.mini { width: 26px; height: 26px; padding: 0; border-radius: 8px; background: transparent; border-color: var(--line); color: var(--muted); font-size: 15px; font-weight: 400; line-height: 1; opacity: .5; transition: opacity .12s; }
.thumb-add.mini:hover { opacity: 1; }
.imgmgr { background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; margin: 4px 0 2px; }
.sec-mini { font-size: 11.5px; font-weight: 800; letter-spacing: .03em; color: var(--muted); text-transform: uppercase; margin: 12px 0 8px; }
.mthumbs { display: flex; flex-wrap: wrap; gap: 8px; }
.mthumb { position: relative; display: inline-block; }
.mthumb img { width: 64px; height: 64px; object-fit: cover; border-radius: 10px; box-shadow: 0 1px 3px rgba(15,23,42,.18); }
.thumb-x { position: absolute; top: -6px; right: -6px; width: 20px; height: 20px; border-radius: 50%; border: 0; background: var(--ink); color: var(--card); font-size: 11px; line-height: 20px; cursor: pointer; padding: 0; }
.dropzone { border: 1.5px dashed var(--line); border-radius: 10px; padding: 12px; text-align: center; color: var(--muted); font-size: 13px; margin: 8px 0; }
.dropzone.drag { border-color: var(--accent-text); background: var(--accent-soft); color: var(--accent-text); }
.linklike { color: var(--accent-text); font-weight: 700; cursor: pointer; text-decoration: underline; }

/* Person avatar on a family trip card */
.trip-head-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.avatar { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; box-shadow: 0 1px 4px rgba(15,23,42,.25); background: var(--line); }
.avatar-i { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; background: linear-gradient(135deg, var(--accent), var(--grape)); color: var(--accent-ink); font-weight: 800; font-size: 14px; }
.avatar-i.big { width: 56px; height: 56px; font-size: 20px; }
/* Grid items default to min-width:auto and refuse to shrink below their content's
   min-width — which let wide form controls push a trip card past its track. */
.trip-grid > .card { min-width: 0; }
.grid2 > * { min-width: 0; }
.field input, .field select { max-width: 100%; box-sizing: border-box; }

/* Multiple travelers — overlapping avatar stack */
.avatars { display: inline-flex; align-items: center; }
.avatars .avatar { margin-left: -10px; border: 2px solid var(--card); }
.avatars .avatar:first-child { margin-left: 0; }
.avatars .avatar-i.more { background: var(--muted); font-size: 12px; }
/* Traveler checkboxes + flexible dates */
.travs { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 6px; }
.trav { display: inline-flex; align-items: center; gap: 7px; padding: 7px 11px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface-2); font-size: 13px; cursor: pointer; max-width: 100%; box-sizing: border-box; }
.trav span { min-width: 0; white-space: normal; }
.trav input { width: 16px; height: 16px; accent-color: var(--accent-text); flex: 0 0 auto; }
.trav input:checked + span { color: var(--accent-text); font-weight: 600; }
.editpanel > .trav, .card > .trav { border-radius: 10px; margin: 4px 0 8px; }
.trip-dates.flex-dates { color: var(--accent-text); font-weight: 600; }
/* Share link box */
.sharebox { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; margin-top: 8px; background: var(--surface-2); }
.shareurl { display: flex; align-items: center; gap: 6px; background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 6px 9px; margin: 4px 0 8px; overflow: hidden; }
.shareurl a { font-size: 12.5px; color: var(--accent-text); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1 1 auto; }

/* Trip edit panel + add-record form */
.editpanel { background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; margin: 6px 0 2px; }
.addrec { display: flex; flex-direction: column; gap: 7px; }
.addrec input, .addrec select, .addrec textarea { margin-top: 0; }

/* People manager */
.person-row { display: flex; gap: 12px; padding: 12px 0; border-top: 1px solid var(--surface-2); }
.person-row:first-of-type { border-top: 0; }
.person-ava { position: relative; flex-shrink: 0; cursor: pointer; width: 56px; height: 56px; }
.person-ava img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; box-shadow: 0 1px 4px rgba(15,23,42,.25); }
.person-ava .ava-edit { position: absolute; bottom: -2px; right: -2px; background: var(--ink); color: var(--card); width: 20px; height: 20px; border-radius: 50%; font-size: 11px; display: flex; align-items: center; justify-content: center; }
.person-fields { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.person-fields input, .person-fields textarea { margin-top: 0; }
.person-fields textarea { min-height: 52px; }

/* Loyalty programs */
.loy-row { display: flex; gap: 12px; padding: 12px 0; border-top: 1px solid var(--surface-2); }
.loy-logo { position: relative; flex-shrink: 0; width: 56px; height: 56px; cursor: pointer; }
.loy-logo img { width: 56px; height: 56px; border-radius: 12px; object-fit: contain; background: var(--card); border: 1px solid var(--line); }
.loy-ph { display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 12px; background: var(--surface-2); color: var(--muted); font-weight: 800; }
.loy-fields { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.loy-fields input, .loy-fields select, .loy-fields textarea { margin-top: 0; }
.loy-fields textarea { min-height: 46px; }

/* Elite-status tracker */
.statusbox { background: var(--accent-soft); border: 1px solid var(--accent-line); border-radius: 10px; padding: 10px 12px; margin-top: 8px; font-size: 13px; }
.status-top { font-size: 14px; }
.pbar { position: relative; height: 10px; background: var(--line); border-radius: 999px; margin: 9px 0 6px; }
.pfill { height: 100%; background: linear-gradient(90deg, var(--accent), var(--grape)); border-radius: 999px; }
.pbar .tick { position: absolute; top: -2px; width: 2px; height: 14px; background: var(--muted); border-radius: 1px; }
.status-sub { color: var(--muted); font-size: 12px; }
.pace { margin-top: 6px; line-height: 1.5; }
.pace-good { color: var(--teal); font-weight: 700; }
.pace-bad { color: var(--danger); font-weight: 700; }
.snaps { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.snap-chip { display: inline-flex; align-items: center; gap: 5px; background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: 2px 8px; font-size: 11.5px; }
.snap-x { border: 0; background: transparent; color: var(--muted); cursor: pointer; padding: 0; font-size: 11px; }

/* Stats / trivia */
.narrow-wide { max-width: 1040px; margin: 0 auto; }
.two-col { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 700px) { .two-col { grid-template-columns: 1fr 1fr; } }
.two-col > * { min-width: 0; } /* grid items default to min-width:auto → wide rows blow past the track */
.mapcard { padding: 8px; overflow: hidden; }
.worldmap { width: 100%; height: auto; display: block; border-radius: 10px; background: var(--surface-2); }
.worldmap { background: var(--card); }
.worldmap .wm-land { fill: var(--surface-2); stroke: var(--line); stroke-opacity: .8; }
.worldmap .wm-route { stroke: var(--accent); }
.worldmap .wm-dot { fill: var(--grape); }
.spark-line { stroke: var(--accent); }
.triv ul { margin: 6px 0 0; padding-left: 18px; font-size: 14px; line-height: 1.65; }
.rank { display: flex; align-items: center; gap: 9px; padding: 6px 0; border-top: 1px solid var(--surface-2); font-size: 14px; }
.rank .rk { width: 18px; color: var(--muted); font-weight: 800; font-size: 12px; text-align: right; }
.rank .rkn { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.barchart { display: flex; align-items: flex-end; gap: 4px; overflow-x: auto; padding-bottom: 2px; min-height: 110px; }
.bar { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; flex: 1; min-width: 20px; }
.bar-fill { width: 62%; min-width: 8px; background: linear-gradient(var(--accent), var(--grape)); border-radius: 4px 4px 0 0; }
.bar-lbl { font-size: 10px; color: var(--muted); margin-top: 3px; }
.bar-n { font-size: 9px; color: var(--muted); margin-bottom: 2px; }
/* Cabin colors (shared by the mix bar + the stacked year chart) */
.cm-first { background: var(--accent); }
.cm-biz { background: var(--grape); }
.cm-eco { background: var(--teal); }
.cm-unk { background: color-mix(in srgb, var(--muted) 38%, var(--card)); }
/* Stacked-by-cabin year chart */
.sb-stack { width: 62%; min-width: 8px; display: flex; flex-direction: column-reverse; border-radius: 4px 4px 0 0; overflow: hidden; }
.sb-seg { width: 100%; }
.sb-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; margin-top: 8px; font-size: 11px; color: var(--muted); }
.sb-legend span, .cm-key { display: inline-flex; align-items: center; gap: 5px; }
.cm-dot { width: 10px; height: 10px; border-radius: 3px; display: inline-block; flex-shrink: 0; }
/* 100%-stacked cabin-mix bar */
.cm-bar { display: flex; height: 22px; border-radius: 7px; overflow: hidden; border: 1px solid var(--line); }
.cm-seg { height: 100%; }
.cm-legend { display: flex; flex-wrap: wrap; gap: 7px 16px; margin-top: 11px; font-size: 12.5px; color: var(--muted); }
.cm-key b { color: var(--ink); font-weight: 700; }
.cabin-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.cabin-pct { font-size: 34px; font-weight: 800; color: var(--accent-text); line-height: 1; font-variant-numeric: tabular-nums; }
.cabin-head-l { font-size: 14px; font-weight: 700; }
.cabin-head-l .hint { display: block; font-weight: 400; margin-top: 2px; }
/* Trivia tile wall (from Wingspan) */
.trivia-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (min-width: 620px) { .trivia-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1020px) { .trivia-grid { grid-template-columns: repeat(4, 1fr); } }
.tcard { border-radius: 15px; padding: 13px 13px 11px; border: 1px solid var(--line); background: var(--card); }
.tcard .te { font-size: 21px; }
.tcard .tv { font-size: 19px; font-weight: 800; margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tcard .tcc { font-size: 11.5px; color: var(--muted); margin-top: 1px; }
.tc1 { background: color-mix(in srgb, var(--accent) 10%, var(--card)); }
.tc2 { background: color-mix(in srgb, var(--teal) 11%, var(--card)); }
.tc3 { background: color-mix(in srgb, var(--grape) 11%, var(--card)); }
.tc4 { background: color-mix(in srgb, var(--gold) 13%, var(--card)); }
.tc5 { background: color-mix(in srgb, var(--teal) 7%, var(--card)); }
.tc6 { background: color-mix(in srgb, var(--grape) 6%, var(--card)); }
.tc7 { background: color-mix(in srgb, var(--accent) 5%, var(--card)); }
.tc8 { background: color-mix(in srgb, var(--gold) 7%, var(--card)); }
/* Horizontal route/fleet bars */
.hrow { display: flex; flex-wrap: wrap; align-items: center; gap: 5px 9px; padding: 5px 0; border-top: 1px solid var(--surface-2); font-size: 13px; }
.hrow-l { flex: 0 0 96px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hbar { flex: 1; height: 12px; border-radius: 6px; background: var(--surface-2); overflow: hidden; min-width: 40px; }
.hbar-fill { height: 100%; border-radius: 6px; background: linear-gradient(90deg, var(--accent), var(--grape)); }
.hbar-fill.hb-grape { background: var(--grape); }
.hb-duo { background: var(--grape); } /* mainline remainder */
.hbar-fill.hb-rj { background: var(--accent); border-radius: 6px 0 0 6px; }
.hb-main { background: var(--grape); }
.hb-rj { background: var(--accent); }
.hrow-meta { flex: 0 0 auto; color: var(--muted); font-size: 12px; display: inline-flex; flex-wrap: wrap; align-items: center; gap: 3px 5px; max-width: 100%; }
.hrow-meta b { color: var(--ink); font-variant-numeric: tabular-nums; }
.premtag { background: color-mix(in srgb, var(--teal) 16%, var(--card)); color: var(--teal-text); border-radius: 999px; padding: 1px 7px; font-size: 10.5px; font-weight: 700; }
.fx-good-t { color: var(--teal-text); } .fx-mid-t { color: var(--gold-text); } .fx-bad-t { color: var(--danger-text); }
/* Chart color variants for miniBars */
.bar-fill.hb-grape-v { background: var(--grape); }
.bar-fill.hb-teal-v { background: var(--teal); }
.bar-fill.hb-cyan-v { background: color-mix(in srgb, var(--teal) 60%, var(--grape)); }
/* Premium-over-time line */
.premline { width: 100%; height: auto; display: block; }
.pl-line { stroke: var(--grape); }
.pl-area { fill: color-mix(in srgb, var(--grape) 13%, transparent); }
.pl-grid { stroke: var(--surface-2); stroke-width: 1; }
.pl-tick { font-size: 10px; fill: var(--muted); }
.pl-move { stroke: var(--gold); stroke-width: 1.4; stroke-dasharray: 5 4; }
.pl-move-l { font-size: 10px; fill: var(--gold-text); font-weight: 700; }
/* Seat lab */
.persona { display: flex; align-items: center; gap: 12px; }
.persona-i { font-size: 30px; }
.persona b { font-size: 15.5px; }
.stats4 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 10px 0 12px; }
@media (min-width: 700px) { .stats4 { grid-template-columns: repeat(4, 1fr); } }
.seatcard { text-align: center; }
.seatmap { max-height: 420px; width: auto; max-width: 100%; margin: 0 auto; display: block; }
.sm-front { font-size: 10px; fill: var(--muted); font-weight: 700; letter-spacing: .12em; }
.sm-row { font-size: 8px; fill: var(--muted); }
.sm-seat { stroke: var(--line); stroke-width: .5; }
.meter { display: flex; align-items: center; gap: 9px; padding: 5px 0; font-size: 13px; }
.meter-l { flex: 0 0 58px; font-weight: 700; }
.meter-track { flex: 1; height: 12px; border-radius: 6px; background: var(--surface-2); overflow: hidden; }
.meter-fill { height: 100%; border-radius: 6px; }
.meter-fill.hb-cyan { background: color-mix(in srgb, var(--teal) 60%, var(--grape)); }
.meter-fill.hb-gold { background: var(--gold); }
.meter-fill.hb-grape { background: var(--grape); }
.meter-n { flex: 0 0 40px; text-align: right; font-variant-numeric: tabular-nums; }
/* Trip attachments (PDFs + photos) */
.docszone { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; padding: 7px 9px; border: 1.5px dashed var(--line); border-radius: 11px; background: var(--surface-2); }
.docszone.drag { border-color: var(--accent); background: var(--accent-soft); }
.docchip { display: inline-flex; align-items: center; gap: 2px; background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: 3px 4px 3px 10px; font-size: 12px; font-weight: 600; max-width: 100%; }
.docchip a { color: var(--ink); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.doc-x { border: 0; background: transparent; cursor: pointer; font-size: 11px; color: var(--muted); padding: 4px 6px; opacity: .6; }
.doc-x:hover { opacity: 1; color: var(--danger-text); }
.docadd { display: inline-flex; align-items: center; font-size: 12px; font-weight: 700; color: var(--accent-text); cursor: pointer; padding: 4px 8px; border-radius: 999px; }
.docadd:hover { background: var(--accent-soft); }
.doc-hint { font-size: 11px; color: var(--muted); }
@media (hover: none) { .doc-hint { display: none; } } /* touch devices: no drag-drop hint */
/* Tidy up (auto-dedupe + reviewed fixes) */
.clean-auto { margin-top: 8px; padding: 8px 11px; background: var(--teal-soft); border: 1px solid color-mix(in srgb, var(--teal) 35%, var(--card)); border-radius: 11px; font-size: 12.5px; color: var(--teal-text); font-weight: 600; }
.clean-auto ul { margin: 4px 0 0; padding-left: 18px; font-weight: 400; color: var(--ink); }
.clean-auto li { margin: 2px 0; font-size: 12px; }
/* Plan doctor: AI-flagged gaps + proposed solutions */
.gapsbox { margin-top: 8px; padding: 9px 11px; background: var(--gold-soft); border: 1px solid color-mix(in srgb, var(--gold) 40%, var(--card)); border-radius: 11px; }
.gaprow { display: flex; align-items: flex-start; gap: 8px; padding: 6px 0; border-top: 1px solid color-mix(in srgb, var(--gold) 22%, transparent); }
.gaprow:first-of-type { border-top: 0; }
.gap-dot { width: 9px; height: 9px; border-radius: 50%; margin-top: 4px; flex-shrink: 0; }
.gap-high { background: var(--danger); }
.gap-med { background: var(--gold); }
.gap-low { background: var(--muted); }
.gap-main { flex: 1; min-width: 0; }
.gap-l { font-size: 13px; font-weight: 700; }
.gap-d { font-size: 12px; color: var(--muted); margin-top: 1px; }
.gap-s { font-size: 12px; color: var(--teal-text); font-weight: 600; margin-top: 2px; }
/* AI findings review (from attachments) + confirmed key facts */
.findpanel { margin-top: 8px; padding: 9px 11px; background: var(--accent-soft); border: 1px solid var(--accent-line); border-radius: 11px; }
.findrow { display: flex; align-items: flex-start; gap: 8px; padding: 6px 0; border-top: 1px solid color-mix(in srgb, var(--accent) 18%, transparent); }
.findrow:first-of-type { border-top: 0; }
.find-main { flex: 1; min-width: 0; }
.find-sum { font-size: 13px; font-weight: 600; }
.find-sum a { text-decoration: none; }
.find-note { font-size: 11.5px; color: var(--muted); margin-top: 1px; }
.find-acts { display: flex; gap: 4px; flex-shrink: 0; }
.find-edit { margin-top: 6px; display: flex; flex-direction: column; gap: 5px; }
.find-edit input { font: inherit; font-size: 13px; padding: 5px 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: var(--ink); width: 100%; box-sizing: border-box; }
.find-edit .row { display: flex; gap: 5px; }
.factsbox { margin-top: 8px; padding: 10px 13px; background: var(--surface-2); border-radius: 11px; }
/* Facts flow like text (label inline-bold, value wraps full-width) — a flex
   label/value split squeezed long values into 1-word columns that bled out. */
.factrow { position: relative; padding: 7px 24px 7px 0; font-size: 12.5px; line-height: 1.55; overflow-wrap: anywhere; border-top: 1px solid color-mix(in srgb, var(--line) 60%, transparent); }
.factrow:first-of-type { border-top: 0; }
.factrow b { margin-right: 6px; }
.factrow .fact-v { color: var(--muted); }
.factrow a { text-decoration: none; margin-left: 4px; }
.factrow .doc-x { position: absolute; right: -8px; top: 1px; }
.rec-web { text-decoration: none; font-size: 12px; opacity: .8; }
/* Time-zone labels + inline date/time editor */
.tzn { color: var(--muted); font-weight: 600; font-size: 10.5px; letter-spacing: .02em; }
.rec-editbtn { border: 0; background: transparent; cursor: pointer; font-size: 11px; color: var(--muted); opacity: .45; padding: 4px 6px; margin: -3px 0; }
.rec-editbtn:hover { opacity: 1; color: var(--accent-text); }
.dt-edit { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 5px; }
.dt-edit input { font: inherit; font-size: 12.5px; padding: 4px 6px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: var(--ink); }
.dt-edit input[type="date"] { width: 128px; }
.dt-edit input[type="time"] { width: 86px; }
/* Edit panel: per-record split rows + merge picker */
.splitrow { display: flex; align-items: center; gap: 8px; padding: 4px 0; border-top: 1px solid var(--surface-2); font-size: 13px; }
.splitrow .sr-i { flex: 0 0 20px; text-align: center; }
.splitrow .sr-t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.splitrow .sr-d { flex: 0 0 auto; color: var(--muted); font-size: 11.5px; }
.merge-slot select { max-width: 100%; }
/* Home-base eras timeline */
.eras { display: flex; gap: 8px; }
.era { flex: 1; background: var(--surface-2); border: 1px solid var(--line); border-radius: 11px; padding: 9px 10px; text-align: center; }
.era b { display: block; font-size: 13.5px; }
.era span { font-size: 11px; color: var(--muted); }
.era.ca { background: color-mix(in srgb, var(--teal) 14%, var(--card)); border-color: color-mix(in srgb, var(--teal) 32%, var(--card)); }

/* Itinerary / trip planner */
.planpanel { margin-top: 10px; border-top: 1px dashed var(--line); padding-top: 10px; }
.briefbox { background: var(--accent-soft); border: 1px solid var(--accent-line); border-radius: 14px; padding: 10px 12px; margin-bottom: 12px; }
.briefbox textarea { width: 100%; box-sizing: border-box; min-height: 68px; resize: vertical; padding: 9px 11px; margin: 4px 0 8px; border: 1px solid var(--line); border-radius: 10px; font: inherit; background: var(--card); }
.briefbox .btn[data-aiplan] { background: linear-gradient(135deg, var(--accent), var(--grape)); color: var(--accent-ink); border: none; }
.briefbox .row { flex-wrap: wrap; }
.iday { margin-bottom: 18px; }
.iday-h { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 13px; color: var(--ink); padding: 5px 2px; border-bottom: 2px solid var(--line); margin-bottom: 9px; }
.iday-h .iadd { margin-left: auto; padding: 1px 9px; line-height: 1.3; }
.iday.ideas .iday-h { border-bottom-color: var(--gold); }
.iempty { font-size: 12px; color: var(--muted); padding: 4px 2px 6px; }
.ientry { display: flex; align-items: flex-start; gap: 10px; padding: 9px 11px; border-radius: 10px; background: var(--surface-2); margin-bottom: 7px; line-height: 1.5; }
.ientry.item-entry { background: var(--accent-soft); }
.ientry.item-entry.booked { background: var(--teal-soft); }
.ientry.rec-entry { background: var(--surface-2); border-left: 3px solid var(--indigo); }
.ientry.cx { opacity: .5; text-decoration: line-through; }
.iemoji { font-size: 17px; line-height: 1.3; flex: 0 0 auto; }
.ibody { flex: 1 1 auto; min-width: 0; }
.ititle { font-size: 13.5px; font-weight: 600; color: var(--ink); display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.isub { font-size: 11.5px; color: var(--muted); margin-top: 1px; }
.itime { font-size: 11px; font-weight: 700; color: var(--accent-text); white-space: nowrap; flex: 0 0 auto; padding-top: 1px; }
.ibooked { font-size: 11px; opacity: .7; }
.ilink { text-decoration: none; font-size: 12px; }
.iprice { font-size: 11px; font-weight: 700; color: var(--good); }
.iacts { display: flex; gap: 1px; flex: 0 0 auto; align-items: center; }
.ibtn { border: none; background: transparent; cursor: pointer; font-size: 12px; padding: 3px 4px; border-radius: 6px; color: var(--muted); min-width: 24px; }
.ibtn:hover { background: var(--line); color: var(--ink); }
.itinform { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 10px; margin-top: 8px; }
.itinform input, .itinform select, .itinform textarea { width: 100%; box-sizing: border-box; margin: 4px 0; padding: 8px 10px; border: 1px solid var(--line); border-radius: 9px; font: inherit; }
.itinform textarea { min-height: 48px; resize: vertical; }
.placesbar { margin-bottom: 8px; }
.placesbar input { width: 100%; box-sizing: border-box; padding: 8px 11px; border: 1px solid var(--line); border-radius: 10px; font: inherit; }
.disc-row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.disc-row .btn { flex: 1 1 auto; white-space: nowrap; text-align: center; }
.places-slot:not(:empty) { margin-bottom: 12px; }
.placegrid { display: grid; grid-template-columns: 1fr; gap: 8px; }
@media (min-width: 560px) { .placegrid { grid-template-columns: 1fr 1fr; } }
.placecard { display: flex; gap: 10px; align-items: center; background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px; padding: 8px; }
.pcimg { flex: 0 0 auto; width: 56px; height: 56px; border-radius: 9px; background-size: cover; background-position: center; background-color: var(--line); }
.pcimg.pcno { display: flex; align-items: center; justify-content: center; font-size: 22px; }
.pcbody { flex: 1 1 auto; min-width: 0; }
.pctitle { font-size: 13px; font-weight: 700; color: var(--ink); }
.pcblurb { font-size: 11px; color: var(--muted); margin-top: 2px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pcacts { flex: 0 0 auto; display: flex; flex-direction: column; gap: 4px; align-items: flex-end; }
.stars { color: var(--gold); font-size: 11px; }
.hoods { margin-bottom: 8px; }
.hood { font-size: 12.5px; padding: 6px 10px; background: var(--gold-soft); border-left: 3px solid var(--gold); border-radius: 8px; margin-bottom: 5px; }
.hood b { color: var(--ink); }
.hood span { color: var(--muted); }
.maprow { margin-bottom: 8px; }
.tripmap { height: 320px; border-radius: 12px; overflow: hidden; border: 1px solid var(--line); margin-bottom: 12px; }
.tripmap .leaflet-container { height: 100%; width: 100%; font: inherit; background: var(--surface-2); }
.mpin span { font-size: 20px; line-height: 1; display: block; text-align: center; filter: drop-shadow(0 1px 1px rgba(0,0,0,.35)); }
/* Budget + packing */
.gr-slot:not(:empty) { margin: 4px 0 12px; }
.budget { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; margin-bottom: 6px; }
.brow { display: flex; justify-content: space-between; align-items: center; padding: 9px 12px; border-bottom: 1px solid var(--line); font-size: 13px; }
.brow:last-child { border-bottom: none; }
.blabel { color: var(--ink); }
.bamt { font-weight: 700; color: var(--ink); white-space: nowrap; }
.brow.btotal { background: var(--accent-soft); }
.brow.btotal .blabel, .brow.btotal .bamt { font-weight: 800; color: var(--accent-text); }
.pack-g { margin-bottom: 10px; }
.pack-h { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); margin: 6px 0 4px; }
.packitem { display: flex; align-items: center; gap: 9px; padding: 5px 4px; font-size: 13.5px; color: var(--ink); cursor: pointer; }
.packitem input { width: 17px; height: 17px; flex: 0 0 auto; accent-color: var(--accent-text); }
.packitem input:checked + span { color: var(--muted); text-decoration: line-through; }
/* Plan review */
.rv-verdict { font-size: 13.5px; color: var(--ink); background: var(--accent-soft); border-radius: 10px; padding: 9px 11px; margin-bottom: 8px; }
.rv-timing { font-size: 12.5px; color: var(--warn); background: var(--gold-soft); border-radius: 10px; padding: 8px 11px; margin-bottom: 8px; }
.rv-issue { border: 1px solid var(--line); border-left: 3px solid var(--line); border-radius: 10px; padding: 8px 11px; margin-bottom: 7px; }
.rv-issue.sev-high { border-left-color: var(--bad); }
.rv-issue.sev-medium { border-left-color: var(--gold); }
.rv-issue.sev-low { border-left-color: var(--accent-text); }
.rv-h { font-weight: 700; font-size: 13px; }
.rv-d { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.rv-fix { font-size: 12.5px; color: var(--accent-text); margin-top: 3px; }
.rv-issue .btn { margin-top: 6px; }
.rv-ideas { margin: 4px 0 0; padding-left: 18px; }
.rv-ideas li { font-size: 12.5px; color: var(--ink); margin-bottom: 3px; }
/* Flights into a trip */
.flt-homes { display: flex; gap: 6px; margin-bottom: 8px; }
.flt-homes input { flex: 1 1 auto; min-width: 0; padding: 8px 11px; border: 1px solid var(--line); border-radius: 9px; font: inherit; text-transform: uppercase; }
.flt-homes .btn { flex: 0 0 auto; }
.flt-row { display: flex; align-items: center; gap: 10px; padding: 8px 4px; border-bottom: 1px solid var(--surface-2); }
.flt-route { flex: 1 1 auto; min-width: 0; font-size: 13px; }
.flt-sub { font-size: 11px; color: var(--muted); }
.flt-price { font-size: 16px; font-weight: 800; color: var(--accent-text); white-space: nowrap; }
.flt-acts { display: flex; align-items: center; gap: 3px; flex: 0 0 auto; }
/* Multi-city legs */
.cities-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 10px; }
.city-chip { display: inline-flex; align-items: center; gap: 1px; background: var(--grape-soft); border: 1px solid var(--accent-line); border-radius: 999px; padding: 2px 4px 2px 2px; }
.city-pick { border: none; background: transparent; cursor: pointer; font: inherit; font-size: 12.5px; padding: 4px 8px; border-radius: 999px; color: var(--ink); }
.city-pick.on { background: var(--indigo); color: var(--accent-ink); }
.city-pick b { color: var(--accent-text); }
.city-pick.on b { color: var(--accent-ink); }
.city-arrow { color: var(--muted); font-size: 12px; }
.cityform { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
.cityform input[data-cf="name"] { flex: 1 1 160px; min-width: 0; padding: 8px 11px; border: 1px solid var(--line); border-radius: 9px; font: inherit; }
.cityform input[data-cf="nights"] { width: 72px; padding: 8px; border: 1px solid var(--line); border-radius: 9px; font: inherit; }
.iday-city { font-size: 11px; font-weight: 700; color: var(--chip-ink); background: var(--grape-soft); border-radius: 6px; padding: 1px 7px; margin-left: 8px; }
/* Planning section + pop-out focus view */
.sec-title.plan-sec { color: var(--accent-text); }
.plan-grid { display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 620px) { .plan-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1020px) { .plan-grid { grid-template-columns: 1fr 1fr 1fr; } }
.plancard { display: flex; align-items: center; gap: 12px; padding: 12px; cursor: pointer; border: 1px solid transparent; transition: box-shadow .12s, border-color .12s; }
.plancard:hover { border-color: var(--accent-line); box-shadow: 0 4px 14px rgba(99,102,241,.16); }
.pc-thumb { flex: 0 0 auto; width: 62px; height: 62px; border-radius: 12px; background-size: cover; background-position: center; background-color: var(--line); }
.pc-thumb.pc-noimg { display: flex; align-items: center; justify-content: center; font-size: 26px; }
.pc-info { flex: 1 1 auto; min-width: 0; }
.pc-info .trip-name { font-size: 15px; }
.pc-meta { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.pc-count { font-size: 11px; color: var(--muted); background: var(--surface-2); border-radius: 6px; padding: 1px 7px; }
.pc-open { flex: 0 0 auto; color: var(--accent-text); font-weight: 700; font-size: 13px; }
/* Focus mode: a trip takes the whole window — app header hidden, Back bar floats. */
body.focus-mode .topbar { display: none; }
.focus-bar {
  display: flex; align-items: center; gap: 10px;
  position: sticky; top: calc(8px + env(safe-area-inset-top, 0px)); z-index: 30;
  background: var(--glass);
  -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4);
  border: 1px solid var(--line); border-radius: 999px;
  padding: 8px 12px; margin: calc(6px + env(safe-area-inset-top, 0px)) 0 14px;
  box-shadow: var(--shadow-sm);
}
.focus-title { flex: 1 1 auto; min-width: 0; font-weight: 800; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.focus-body { max-width: none; margin: 0; }
.focus-body .card { max-width: none; }
/* Focus two-column: main narrative (bookings + itinerary) beside a reference sidebar. */
.focus-grid { display: block; }
.tb-main { min-width: 0; }
.tb-side { min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.tb-side > * { margin-top: 0; } /* the flex gap handles spacing in the sidebar */
@media (min-width: 1080px) {
  .focus-grid { display: grid; grid-template-columns: minmax(0, 1fr) clamp(300px, 33%, 400px); gap: 20px; align-items: start; }
  .tb-side { position: sticky; top: 74px; }
  /* Keep the sticky sidebar from overflowing the viewport — scroll within itself. */
  .tb-side { max-height: calc(100vh - 88px); overflow: auto; padding-right: 2px; }
}
/* Collapsible sections (key facts / attachments) */
.foldbox > summary, .docsfold > summary, .qa-history > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 6px; }
.foldbox > summary::-webkit-details-marker, .docsfold > summary::-webkit-details-marker, .qa-history > summary::-webkit-details-marker { display: none; }
.foldbox > summary::after, .docsfold > summary::after, .qa-history > summary::after { content: '▾'; margin-left: auto; opacity: .55; transition: transform .15s ease; }
.foldbox[open] > summary::after, .docsfold[open] > summary::after, .qa-history[open] > summary::after { transform: rotate(180deg); }
.foldbox > summary { margin: 0; }
.foldbox[open] > summary { margin-bottom: 6px; }
/* Ask: keep only the newest Q&A in view, fold the rest — answers run long and
   otherwise stack forever above the thing you actually came back to check. */
.qa-history { margin: 14px 0 0; padding: 10px 13px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); }
.qa-history > summary { margin: 0; font-size: 12.5px; }
.qa-history[open] > summary { margin-bottom: 8px; }
.qa-history .fold-body > .qa:first-child { margin-top: 0; }
.fold-n { font-size: 11px; font-weight: 700; color: var(--chip-ink); background: var(--accent-soft); border-radius: 999px; padding: 0 7px; min-width: 18px; text-align: center; }
.docsfold { flex: 1 0 100%; }
.docsfold > summary { font-weight: 700; font-size: 12px; color: var(--ink); }
.docsfold .docchips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; }
/* Settings groups: whole cards folded behind one summary line + status, so the tab
   opens short instead of a dozen always-expanded "configure once" cards. */
.setgroup { margin: 0 0 14px; border: 1px solid var(--line); border-radius: var(--radius, 14px); background: var(--card); padding: 13px 15px; box-shadow: var(--shadow-sm); }
.setgroup > summary { cursor: pointer; list-style: none; display: flex; align-items: baseline; gap: 8px; font-weight: 700; font-size: 14.5px; color: var(--ink); }
.setgroup > summary::-webkit-details-marker { display: none; }
.setgroup > summary::after { content: '▾'; margin-left: auto; opacity: .55; transition: transform .15s ease; font-weight: 400; align-self: center; }
.setgroup[open] > summary::after { transform: rotate(180deg); }
.setgroup > summary .sg-status { font-weight: 400; font-size: 12.5px; color: var(--muted); }
.setgroup[open] > summary { margin-bottom: 13px; padding-bottom: 11px; border-bottom: 1px solid var(--line); }
.setgroup .sg-body .sec-mini:first-child { margin-top: 0; }
.setgroup .sg-body .card { margin-bottom: 12px; }
.setgroup .sg-body .card:last-child { margin-bottom: 0; }
/* Compressed run of empty itinerary days */
.iday-empty { margin-bottom: 6px; }
.iempty-range { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); padding: 3px 2px; border-bottom: 1px dashed color-mix(in srgb, var(--line) 70%, transparent); }
.iempty-range .iadd { margin-left: auto; }
/* Hotels browser — map, filter, enriched rows */
.hotelmap { height: 320px; border-radius: 14px; overflow: hidden; border: 1px solid var(--line); margin: 0 4px 10px; }
.hotelmap .leaflet-container { height: 100%; width: 100%; background: var(--surface-2); }
.hotel-filter { max-width: max-content; }
.hotel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.hh-actions { display: flex; align-items: center; gap: 4px; flex: 0 0 auto; }
.hotel-row.enriched { border-left: 3px solid var(--indigo); }
/* Favorites sort to the top and win the accent over `enriched` */
.hotel-row.favorite { border-left: 3px solid var(--gold); background: linear-gradient(180deg,var(--gold-soft), var(--card)); }
.favbtn { border: none; background: transparent; cursor: pointer; font-size: 19px; line-height: 1; padding: 6px 7px; margin: -4px -3px; border-radius: 8px; filter: grayscale(1); opacity: .55; transition: transform .1s, filter .1s, opacity .1s; } /* ~31px tap target, same visual footprint */
.favbtn:hover { transform: scale(1.15); opacity: 1; }
.favbtn[data-fav="1"] { filter: none; opacity: 1; }
.hotel-row.flash { animation: flashcard 1.4s ease; }
@keyframes flashcard { 0%,100% { box-shadow: none; } 25% { box-shadow: 0 0 0 3px rgba(99,102,241,.5); } }
.all-done { font-size: 12px; font-weight: 600; color: var(--chip-ink); background: var(--teal-soft); border-radius: 999px; padding: 5px 11px; }

/* Duplicate-merge proposals */
.dupe { border: 1px solid var(--gold); background: var(--gold-soft); border-radius: 12px; padding: 10px 12px; margin: 0 4px 8px; }
.dupe-head { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.dupe-head b { color: var(--accent-text); }
.conf { font-size: 10px; text-transform: uppercase; letter-spacing: .03em; border-radius: 6px; padding: 1px 6px; margin-left: 4px; vertical-align: middle; }
.conf.high { background: var(--teal-soft); color: var(--chip-ink); }
.conf.medium { background: var(--gold-soft); color: var(--chip-ink); }
.conf.low { background: var(--danger-soft); color: var(--chip-ink); }
.dupe-reason { font-size: 12px; color: var(--muted); margin: 3px 0 7px; }
.dupe-members { display: grid; gap: 6px; margin-bottom: 8px; }
.dm { background: var(--card); border: 1px solid var(--line); border-radius: 9px; padding: 6px 9px; font-size: 12.5px; }
.dm-url { font-size: 10.5px; color: var(--accent-text); word-break: break-all; margin-top: 2px; }

/* Individual stay dates on a hotel card */
.stay-dates { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.stay { font-size: 11px; background: var(--surface-2); color: var(--ink); border-radius: 7px; padding: 4px 9px; white-space: nowrap; }
.stay .sn { color: var(--muted); }
.stay.future { background: var(--teal-soft); color: var(--chip-ink); font-weight: 700; }
.stay.future .sn { color: var(--chip-ink); }
.stay.more { background: transparent; color: var(--muted); }
button.stay { border: 1px solid transparent; font: inherit; font-size: 11px; cursor: pointer; }
button.stay.linked:hover { border-color: var(--accent-text); background: var(--grape-soft); }
button.stay.future.linked:hover { border-color: var(--teal); }
.hotel-edit { border-top: 1px dashed var(--line); margin-top: 8px; padding-top: 8px; }
.addtrip-box { background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px; padding: 8px 10px; margin-top: 8px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }

/* Fare watch */
.watch-price { font-size: 19px; font-weight: 800; color: var(--accent-text); }
.watch-off { opacity: .6; }
.spark { margin-top: 8px; }
.sparksvg { width: 100%; height: 34px; display: block; }

.rec { display: flex; gap: 11px; padding: 12px 0; border-top: 1px solid var(--surface-2); }
.rec:first-child { border-top: 0; }
.rec .ico { font-size: 18px; width: 24px; text-align: center; position: relative; flex-shrink: 0; }
.rec-logo { width: 24px; height: 24px; object-fit: contain; border-radius: 5px; background: var(--card); box-shadow: 0 0 0 1px var(--line); vertical-align: middle; }
.ico-badge { position: absolute; bottom: -5px; right: -7px; font-size: 10px; line-height: 1; }
.rec .body { flex: 1; min-width: 0; }
.rec .t { font-weight: 700; font-size: 14.5px; line-height: 1.35; }
.rec .sub { color: var(--muted); font-size: 12.5px; margin-top: 4px; line-height: 1.5; }
.rec .route { font-variant-numeric: tabular-nums; font-weight: 700; }
/* Departure time + seat: the info you scan for at the gate — pulled forward from the muted sub. */
.rec-key { color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; }
/* Confirmation code: kept available but visually quiet (no pill, no highlight). */
.conf-line { margin-top: 2px; }
.conf-mini { display: inline-flex; align-items: center; gap: 2px; font-size: 11px; color: var(--muted); font-weight: 400; letter-spacing: .01em; }
.conf-mini .copy { font-size: 12px; padding: 0 3px; opacity: .4; }
/* Compact list rows: slim one-liners; the rich detail is a click away in the focus view. */
.rec-compact { padding: 8px 0; gap: 9px; }
.rec-compact .sub { margin-top: 3px; }
.rec-compact .ico { font-size: 16px; width: 20px; }
.rec-compact .rec-logo { width: 20px; height: 20px; }
.rec-compact .t { font-size: 13.5px; }
.rec-compact .sub { font-size: 12px; }
.conn-hint { font-size: 11.5px; color: var(--muted); margin-top: 5px; line-height: 1.45; }
/* A segment that's over recedes — dimmed and de-saturated, but still there. */
.rec-past { opacity: .5; }
.rec-past .rec-logo { filter: grayscale(.7); }
.rec-past:hover { opacity: .85; transition: opacity .15s; }
/* Compact-card footer: quiet meta + a clear "open the full trip" affordance. */
.tc-compact { cursor: pointer; }
.tc-open { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); cursor: pointer; }
.tc-meta { font-size: 11.5px; color: var(--muted); }
.tc-open-cta { font-size: 12px; font-weight: 700; color: var(--accent-text); white-space: nowrap; }
/* Missing booking/conf number: quiet amber flag, click to type it in. */
.conf-missing { display: inline-flex; align-items: center; border: 1px solid color-mix(in srgb, var(--gold) 55%, var(--card)); background: var(--gold-soft); color: var(--gold-text); border-radius: 999px; padding: 2px 9px; font-size: 11px; font-weight: 700; cursor: pointer; font-family: inherit; }
.conf-add { display: inline-flex; align-items: center; gap: 5px; }
.conf-add input { font: inherit; font-size: 12px; padding: 4px 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: var(--ink); width: 130px; text-transform: uppercase; }
/* Inline flight-extras strip (on-time, TSA, weather, live status, lounges) — kept compact. */
.fx { margin-top: 7px; }
.fxtags { display: flex; flex-wrap: wrap; gap: 5px; }
.fxtag { display: inline-flex; align-items: center; gap: 4px; background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: 2px 8px; font-size: 11.5px; font-weight: 600; color: var(--ink); line-height: 1.55; }
.fxtag.fx-good { border-color: color-mix(in srgb, var(--teal) 45%, var(--line)); color: var(--teal-text); }
.fxtag.fx-mid { border-color: color-mix(in srgb, var(--gold) 50%, var(--line)); color: var(--gold-text); }
.fxtag.fx-bad { border-color: color-mix(in srgb, var(--danger) 45%, var(--line)); color: var(--danger-text); }
.fxlng { display: flex; flex-wrap: wrap; align-items: baseline; gap: 3px 8px; margin-top: 5px; font-size: 11.5px; line-height: 1.5; }
.fxlng-h { font-weight: 700; color: var(--accent-text); }
.lng-item { color: var(--ink); font-weight: 600; }
.lng-item a { color: var(--accent-text); text-decoration: none; }
.lng-item a:hover { text-decoration: underline; }
.lng-item[data-openclub] { cursor: pointer; border-bottom: 1px dashed var(--accent-line); }
.lng-item[data-openclub]:hover { color: var(--accent-text); }
b.lng-item[data-openclub] { color: var(--gold-text); border-bottom-color: var(--gold); }
.fx-commute { margin-top: 6px; background: var(--accent-soft); border-left: 3px solid var(--accent); border-radius: 6px; padding: 5px 9px; font-size: 11.5px; line-height: 1.6; color: var(--ink); }
.fx-commute-ask { background: var(--gold-soft); border-left-color: var(--gold); }
.commute-input { font: inherit; border: 1px solid var(--line); border-radius: 8px; padding: 4px 8px; background: var(--card); color: var(--ink); min-width: 180px; max-width: 100%; }
.commute-editbox { display: inline-flex; gap: 6px; margin-left: 6px; flex-wrap: wrap; }
.commute-editbox[hidden] { display: none !important; }
.lng-hours { font-weight: 700; border-radius: 999px; padding: 1px 7px; }
.lng-hours-closed { background: color-mix(in srgb, var(--danger) 15%, transparent); color: var(--danger-text); }
.lng-hours-warn { background: var(--gold-soft); color: var(--gold-text); }
.lng-term { color: var(--muted); font-weight: 400; }
.lng-note { color: var(--muted); font-weight: 400; font-style: italic; }
.fxwarn { margin-top: 6px; background: var(--gold-soft); border-left: 3px solid var(--gold); border-radius: 6px; padding: 5px 9px; color: var(--gold-text); font-weight: 600; font-size: 11.5px; line-height: 1.5; }
.fxlng-tip { margin-top: 6px; background: var(--gold-soft); border-left: 3px solid var(--gold); border-radius: 6px; padding: 5px 9px; color: var(--ink); font-weight: 500; font-size: 11.5px; line-height: 1.5; }

/* Taste rounds */
.tr-item { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--surface-2); }
.tr-item:first-of-type { border-top: 0; }
.tr-label { flex: 1 1 auto; min-width: 0; font-size: 13.5px; line-height: 1.4; }
.tr-sub { display: block; color: var(--muted); font-size: 11.5px; margin-top: 1px; }
.tr-choices { flex: 0 0 auto; display: flex; gap: 4px; }
.tr-btn { border: 1px solid var(--line); background: var(--card); color: var(--ink); width: 40px; height: 34px;
  border-radius: 10px; font-size: 15px; cursor: pointer; line-height: 1; font-family: inherit; }
.tr-btn:active { transform: scale(.95); }
.tr-btn.tr-on { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent-text); font-weight: 800; }
.tr-pair { display: flex; align-items: stretch; gap: 8px; padding: 8px 0; border-top: 1px solid var(--surface-2); }
.tr-pair:first-of-type { border-top: 0; }
.tr-ab { flex: 1 1 0; min-width: 0; text-align: left; border: 1px solid var(--line); background: var(--card);
  color: var(--ink); border-radius: 11px; padding: 9px 11px; font-size: 13px; line-height: 1.35; cursor: pointer; font-family: inherit; }
.tr-ab.tr-on { background: var(--accent-soft); border-color: var(--accent-line); }
.tr-or { flex: 0 0 auto; align-self: center; color: var(--muted); font-size: 11.5px; }
.tr-skip { flex: 0 0 auto; border: 1px solid var(--line); background: var(--card); color: var(--muted);
  border-radius: 10px; width: 34px; cursor: pointer; font-family: inherit; font-size: 14px; }
.tr-skip.tr-on { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent-text); }
/* Tastes tab is sized to fit the window: the two windows switch instead of stacking,
   and the reference blocks below collapse. Belt-and-braces on [hidden] because any
   author `display:` on .card would otherwise beat the attribute. */
.tr-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 4px 6px; }
.segbar { margin-left: auto; display: flex; gap: 4px; background: var(--surface-2); border-radius: 999px; padding: 3px; }
/* The History tab's Trips · Stats · Reviews switch (2026-09-25). Its own container: the rule below
   hides every .segbar while a taste fold-out is open, and this one must never vanish. */
.histbar { display: flex; gap: 4px; width: fit-content; max-width: 100%; margin: 12px auto 4px;
  background: var(--surface-2); border-radius: 999px; padding: 3px; }
.segbar .seg, .histbar .seg { border: 0; background: transparent; color: var(--muted); cursor: pointer; font-family: inherit;
  font-size: 12.5px; font-weight: 700; padding: 5px 11px; border-radius: 999px; display: flex; align-items: center; gap: 5px; }
.segbar .seg.on, .histbar .seg.on { background: var(--card); color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,.13); }
.tr-hint { margin: 0 4px 8px; }
.tr-pane[hidden] { display: none !important; }
.tr-actions { margin-top: 10px; }
/* Last-resort per §3: if a full round still can't fit (short window, iPhone), THIS card
   scrolls inside itself — the page never does, and Submit stays visible below it. */
/* A vh FRACTION is the wrong model: everything around the list (81px header, 62px fixed
   tab bar, title, hint, Submit, three fold rows) is a fixed ~427px that does not shrink
   with the window, so 42vh overflowed by 98px at 620px tall. Subtract the overhead
   instead. dvh second so it wins where supported (iOS toolbar). */
/* No absolute ceiling: a 460px cap forced a scrollbar on a 1,470px-tall window with a
   third of the screen empty. max-height only CAPS — when the round is shorter than the
   space available the list sizes to its content and no scrollbar appears at all. */
/* 460 is correct, verified the hard way. Summing the visible blocks below the list gives
   371, which tempted me to hand the list the difference: at 430 the page itself started
   scrolling, over by 28px. The gap is the MARGINS between those blocks (10+10+5+10+5+10+5),
   which a height-only measurement misses entirely. Measure the document, not the parts. */
.tr-scroll { max-height: calc(100vh - 460px); max-height: calc(100dvh - 460px);
  min-height: 110px; overflow-y: auto; margin: -2px -2px 0; padding: 2px 2px 0; }
/* One line per item: the city/tags ride alongside the name and truncate, so ten rows
   cost ~380px instead of ~530px. */
.tr-item { padding: 5px 0; }
/* Sized so the food is actually legible - at 38px a dish was unrecognizable. The list
   inside .tr-scroll absorbs the extra height, so the PAGE still never scrolls; the card
   does. The A/B faces are largest because there the picture IS the question. */
.tr-thumb { flex: 0 0 auto; width: 136px; height: 136px; border-radius: 12px; object-fit: cover;
  background: var(--surface-2); }
.tr-abimg { display: block; width: 100%; height: 300px; object-fit: cover; border-radius: 12px;
  margin-bottom: 6px; background: var(--surface-2); }
/* Was a single-line row (title beside tags) when rows had to stay 45px tall. Now that a
   dish carries a real description, the label stacks: name, then what it actually is. */
.tr-label { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; white-space: normal; }
.tr-label > b { overflow: hidden; }
/* Scoped to .tr-item on purpose: unscoped, this collapsed the A/B buttons' tag line onto
   the dish name ("sauceindian,rich,dairy-forward"). */
/* flex-basis 0 on the sub means the city/tags give up space first and the NAME stays
   readable — the other way round truncated every restaurant to "Star of I…". */
.tr-item .tr-label > b { flex: 0 1 auto; min-width: 0; }
/* `flex: 1 1 0` here was left over from the single-LINE layout, where it let the city take
   the remaining width and ellipsis. Once .tr-label became a COLUMN that basis applies to the
   HEIGHT, so the city computed to 0px tall and vanished from every restaurant row. */
.tr-item .tr-sub { display: block; flex: 0 0 auto; margin-top: 1px; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; }
.taste-archive { margin-top: 10px; }
.tfold { padding: 6px 14px; margin-bottom: 5px; }
.tfold > summary { margin: 0; }
.tp-bare { margin: 0; border: 0; background: transparent; padding: 0; }
/* Same reasoning; an open fold hides the round, so it has ~330px of chrome to clear. */
.tl-scroll { max-height: calc(100vh - 330px); max-height: calc(100dvh - 330px); overflow-y: auto; margin-top: 0; }
/* Opening a fold hands it the window: the round yields rather than pushing the page into
   a scroll. Submit stays put so answers already made are never stranded behind a fold. */
#view:has(.tfold[open]) .tr-pane,
#view:has(.tfold[open]) .tr-hint,
#view:has(.tfold[open]) .segbar { display: none !important; }

/* MUST stay after the base .tr-* rules above: same specificity, so source order decides.
   Sitting before them, `max-height: 16vh` here lost to `min(42vh, 460px)` and every
   phone-height fix silently did nothing. */
@media (max-width: 520px) {
  /* Full-bleed dish photo above its row: 136px inline would squeeze the name to nothing,
     and the point of the picture is to actually see the food. */
  .tr-item { flex-wrap: wrap; }
  .tr-thumb { flex: 0 0 100%; width: 100%; height: 190px; }
  /* A and B stay side by side on phones: stacking them made each pair ~130px tall,
     which pushed Submit off an iPhone screen. */
  .tr-pair { flex-wrap: nowrap; gap: 6px; }
  .tr-ab { flex: 1 1 0; padding: 8px 9px; font-size: 12.5px; }
  .tr-or { display: none; }
  .tr-skip { flex: 0 0 auto; width: 30px; }
  /* Three columns in 375px leaves ~140px per option: the tag line only cramps and
     lengthens it, and the dish name already carries the choice. */
  .tr-ab .tr-sub { display: none; }
  /* Phones give up the most room to chrome (81px header + 62px fixed tab bar + a
     wrapped title/segbar), so the list keeps less of the viewport here, not more. */
  /* Phone overhead measures ~452px (taller header share, wrapped title/segbar). */
  .tr-scroll { max-height: calc(100vh - 486px); max-height: calc(100dvh - 486px); }
  .tfold { padding: 5px 12px; margin-bottom: 4px; }
  .taste-archive { margin-top: 6px; }
  .tr-hint { font-size: 11.5px; line-height: 1.4; margin-bottom: 4px; }
  .tr-head { gap: 6px; margin-bottom: 4px; }
  .tr-head .sec-title { font-size: 15px; }
  .tr-actions { margin-top: 8px; }
  .tr-pane { padding: 10px 12px; }
  .tl-scroll { max-height: 40vh; }
}
/* With the page pinned to one screen, tab-bar clearance comes from where the content
   actually ends, not from padding below it — padding here only adds phantom scroll. */
#view:has(#taste-round) { padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)); }

/* Airport Clubs section */
.club-airport { margin-bottom: 6px; }
.club-airport-h { margin: 4px 4px 8px; font-size: 15px; }
.club-grid { display: grid; grid-template-columns: 1fr; gap: 14px; align-items: start; }
@media (min-width: 900px) { .club-grid { grid-template-columns: repeat(2, 1fr); } }
.club-card { margin: 0; overflow: hidden; }
.club-photo { position: relative; margin: -14px -16px 10px; height: 160px; background: var(--surface-2); }
.club-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.club-photo-credit { position: absolute; right: 6px; bottom: 6px; background: rgba(0,0,0,.55); color: #fff; font-size: 10px; font-weight: 600; padding: 2px 7px; border-radius: 999px; line-height: 1.6; }
.club-overall { flex: 0 0 auto; font-size: 20px; font-weight: 800; color: var(--accent-text); line-height: 1; font-variant-numeric: tabular-nums; }
.club-bars { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px 14px; margin-top: 8px; }
.club-bar { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--muted); }
.club-bar-l { flex: 0 0 44px; }
.club-bar-track { flex: 1 1 auto; height: 6px; background: var(--surface-2); border-radius: 999px; overflow: hidden; }
.club-bar-fill { height: 100%; background: linear-gradient(90deg, var(--accent), var(--grape)); border-radius: 999px; }
.club-bar-v { flex: 0 0 16px; text-align: right; font-weight: 700; color: var(--ink); }
.club-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 14px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--surface-2); }
.club-fact { font-size: 12px; display: flex; gap: 5px; }
.club-fact-l { color: var(--muted); flex: 0 0 auto; }
.club-fact-v { color: var(--ink); font-weight: 600; }
@keyframes clubFlash { 0%, 100% { box-shadow: none; } 25%, 75% { box-shadow: 0 0 0 3px var(--accent-line); } }
.club-flash { animation: clubFlash 1.6s ease; }
button.fxtag.fx-live { cursor: pointer; font-family: inherit; }
button.fxtag.fx-live:hover { border-color: var(--accent-text); }
.fx-why:empty { display: none; }
.fx-why .fxwarn b { color: inherit; }
.why-srcs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.why-src { display: inline-block; background: var(--card); border: 1px solid var(--gold); border-radius: 999px; padding: 2px 9px; font-size: 11px; font-weight: 700; color: var(--gold-text); text-decoration: none; white-space: nowrap; }
.why-src:hover { background: var(--gold-soft); }
/* Gate-to-gate connection card */
.conn-card { margin-top: 6px; padding: 8px 11px; border-radius: 10px; border: 1px solid var(--line); border-left-width: 3px; background: var(--surface-2); font-size: 12px; line-height: 1.5; }
.conn-card.fx-good { border-left-color: var(--teal); }
.conn-card.fx-mid { border-left-color: var(--gold); }
.conn-card.fx-bad { border-left-color: var(--danger); }
.conn-head { font-size: 13px; display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.conn-head b { color: var(--ink); }
.conn-sum { margin-top: 5px; color: var(--ink); line-height: 1.55; }
.conn-bits { margin-top: 7px; color: var(--accent-text); font-weight: 700; line-height: 1.6; }
.conn-tips { margin: 9px 0 0; padding-left: 18px; color: var(--muted); }
.conn-tips li { margin: 5px 0; line-height: 1.5; }
.conn-head .conn-eff { color: var(--danger-text); }
.conn-head s { opacity: .6; }
/* "During my connection:" pit-stop picker */
.conn-stops { margin-top: 8px; padding: 9px 11px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface-2); }
.conn-stops-h { font-size: 12px; font-weight: 700; color: var(--ink); margin-bottom: 7px; }
.conn-chks { display: flex; flex-wrap: wrap; gap: 6px 12px; }
.conn-chk { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); cursor: pointer; }
.conn-chk input[type=checkbox] { width: 15px; height: 15px; accent-color: var(--accent); flex: none; }
.conn-chk-other { flex-basis: 100%; }
.conn-chk-other .conn-other { flex: 1; min-width: 120px; font-size: 12px; padding: 4px 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink); }
.conn-stops-go { margin-top: 9px; font-size: 12px; padding: 6px 12px; }
.conn-stops-go:disabled { opacity: .65; cursor: default; }
.conn-stops-out:not(:empty) { margin-top: 8px; }
.conn-stops-list { margin: 6px 0 0; padding-left: 18px; color: var(--muted); }
.conn-stops-list li { margin: 5px 0; }
.conn-stops-list b { color: var(--ink); }
.conn-stop-d { margin-top: 2px; }
/* Schedule-aware tour planner */
.tourplan { margin-top: 8px; }
.tp-interests { width: 100%; font: inherit; font-size: 13px; padding: 9px 11px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); color: var(--ink); }
.tp-params { display: flex; flex-wrap: wrap; gap: 8px 14px; margin: 9px 0; }
.tp-f { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.tp-num, .tp-sel { font: inherit; font-size: 12px; padding: 5px 7px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: var(--ink); }
.tp-num { width: 66px; }
.tp-results { margin-top: 10px; }
.tcardgrid { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 620px) { .tcardgrid { grid-template-columns: 1fr 1fr; } }
.tcard { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 13px; background: var(--card); overflow: hidden; box-shadow: var(--shadow-sm); }
.tcard-img { height: 132px; background-size: cover; background-position: center; background-color: var(--surface-2); }
.tcard-noimg { background-image: linear-gradient(135deg, color-mix(in srgb, var(--accent) 20%, var(--surface-2)), var(--surface-2)); }
.tcard-body { padding: 11px 13px 12px; display: flex; flex-direction: column; gap: 3px; }
.tcard-t { font-weight: 640; font-size: 14px; line-height: 1.3; }
.tcard-op { font-size: 11.5px; color: var(--muted); }
.tcard-meta { font-size: 12.5px; color: var(--ink); margin-top: 2px; font-variant-numeric: tabular-nums; }
.tcard-rate { font-size: 12px; color: var(--gold-text); font-weight: 600; }
.tcard-why { font-size: 12px; color: var(--muted); line-height: 1.45; margin-top: 2px; }
.tcard-travel { font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.tcard-fit { font-size: 11.5px; font-weight: 700; border-radius: 999px; padding: 3px 10px; align-self: flex-start; margin-top: 7px; }
.tcard-fit.fit-yes { background: var(--teal-soft); color: var(--teal-text); }
.tcard-fit.fit-flex { background: var(--surface-2); color: var(--muted); }
.tcard-acts { display: flex; gap: 6px; margin-top: 10px; }
/* Dietary filter checkboxes + tags, menu sample, review quote (restaurant planner) */
.diet-row { display: flex; flex-wrap: wrap; gap: 6px 12px; margin: 2px 0 10px; }
.diet-chk { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--muted); cursor: pointer; }
.diet-chk input { accent-color: var(--accent); }
.diet-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 5px; }
.diet-tag { font-size: 10.5px; font-weight: 600; color: var(--teal-text); background: var(--teal-soft); border-radius: 999px; padding: 1px 8px; text-transform: capitalize; }
.tcard-menu { font-size: 12px; color: var(--ink); margin-top: 4px; line-height: 1.45; }
.tcard-quote { font-size: 12px; color: var(--muted); font-style: italic; margin-top: 4px; line-height: 1.45; padding-left: 8px; border-left: 2px solid var(--line); }
/* Tastes tab — rated dataset the planners learn from */
.taste-profile { background: var(--accent-soft); border: 1px solid var(--accent-line); border-radius: 12px; padding: 11px 14px; margin: 0 4px 14px; font-size: 13px; line-height: 1.5; color: var(--ink); }
.taste-profile > b { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--accent-text); margin-bottom: 3px; }
.taste-add .row { gap: 8px; margin-bottom: 8px; }
.taste-add input, .taste-add textarea, .taste-add select { font: inherit; font-size: 13px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 9px; background: var(--card); color: var(--ink); }
.taste-add input { flex: 1; min-width: 0; }
.taste-add textarea { width: 100%; min-height: 46px; resize: vertical; box-sizing: border-box; }
.taste-r1 #taste-kind { flex: 0 0 auto; }
.star-pick { display: flex; align-items: center; gap: 2px; margin: 4px 0 8px; }
.star-btn { background: none; border: 0; font-size: 24px; line-height: 1; color: var(--gold); cursor: pointer; padding: 0 2px; }
.star-clear { font-size: 11px; margin-left: 8px; cursor: pointer; }
.taste-list { margin-top: 6px; }
.taste-row { display: flex; align-items: flex-start; gap: 10px; padding: 9px 2px; border-top: 1px solid var(--line); }
.taste-row:first-of-type { border-top: 0; }
.tr-main { flex: 1; min-width: 0; }
.tr-top { font-size: 14px; }
.tr-kind { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); background: var(--surface-2); border-radius: 6px; padding: 1px 7px; margin-right: 4px; }
.stars-ro { color: var(--gold); font-size: 13px; letter-spacing: 1px; }
.tr-meta { font-size: 12px; color: var(--muted); margin-top: 2px; }
.tr-review { font-size: 12.5px; color: var(--ink); margin-top: 3px; line-height: 1.45; }
.muted { color: var(--muted); }
.badge { display: inline-block; font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 999px; margin-left: 6px; }
.badge.cancelled { background: var(--danger-soft); color: var(--chip-ink); }
.badge.changed { background: var(--gold-soft); color: var(--chip-ink); }

.summary { background: linear-gradient(120deg, var(--accent-soft), var(--grape-soft)); border: 1px solid var(--accent-soft); border-radius: 12px; padding: 11px 13px; font-size: 13.5px; line-height: 1.5; margin-top: 10px; }
.summary .lbl { font-weight: 800; color: var(--accent-text); font-size: 11px; letter-spacing: .04em; text-transform: uppercase; display: block; margin-bottom: 3px; }

/* Buttons */
button { font-family: inherit; }
.btn { background: var(--sky); color: var(--accent-ink); border: 0; border-radius: 11px; padding: 10px 15px; font-weight: 700; font-size: 14px; cursor: pointer; }
.btn.ghost { background: var(--accent-soft); color: var(--accent-text); }
.btn.sm { padding: 8px 13px; font-size: 12.5px; border-radius: 9px; }
.btn:active { transform: translatey(1px); }
/* Destructive actions (delete a trip / record) — quiet by default, reads as a warning on hover. */
.btn.danger { background: var(--danger-soft); color: var(--danger-text); }
.btn.danger:hover { background: var(--danger); color: #fff; }
.row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.spacer { flex: 1; }

/* Copyable contact bits */
.chip { display: inline-flex; align-items: center; gap: 6px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px; padding: 4px 10px; font-size: 13px; margin: 3px 4px 3px 0; }
.chip a { color: var(--accent-text); text-decoration: none; }
.copy { cursor: pointer; border: 0; background: transparent; font-size: 15px; padding: 6px 8px; margin: -4px -2px; opacity: .6; } /* padding+negative margin = 28px tap target without shifting layout */
.copy:active { opacity: 1; }

/* Forms */
label.field { display: block; margin: 10px 0; font-size: 13px; color: var(--muted); font-weight: 600; }
input, select, textarea { width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 11px; font-size: 15px; margin-top: 4px; background: var(--card); color: var(--ink); }
textarea { min-height: 70px; resize: vertical; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

/* Stats */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 6px 0 4px; }
.stat { background: var(--card); border-radius: 14px; padding: 12px; text-align: center; box-shadow: 0 1px 6px rgba(15,23,42,.07); }
.stat .n { font-size: 22px; font-weight: 800; color: var(--accent-text); }
.stat .l { font-size: 11.5px; color: var(--muted); margin-top: 2px; }

/* Ask chat */
.qa { margin: 10px 0; }
.qa .q { font-weight: 700; }
.qa .a { background: var(--card); border-radius: 12px; padding: 11px 13px; margin-top: 6px; box-shadow: 0 1px 6px rgba(15,23,42,.06); font-size: 14px; line-height: 1.5; white-space: pre-wrap; }

/* Recent-data log rows */
.log { font-size: 13px; }
.log .r { padding: 8px 0; border-top: 1px solid var(--surface-2); }
.log .r:first-child { border-top: 0; }
.st { font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 999px; }
.st.done { background: var(--teal-soft); color: var(--chip-ink); }
.st.pending { background: var(--accent-soft); color: var(--chip-ink); }
.st.error { background: var(--danger-soft); color: var(--chip-ink); }
.st.rejected { background: var(--surface-2); color: var(--muted); }
.st.no_records { background: var(--gold-soft); color: var(--chip-ink); }

/* Tab bar */
.tabbar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 30;
  display: flex; background: var(--glass); backdrop-filter: blur(12px) saturate(1.4);
  border-top: 1px solid var(--line); padding-bottom: var(--safe-b);
}
.tabbar button {
  /* Sized to its own label, then the spare room shared out evenly (2026-09-25). With equal slices
     ("flex: 1") a short label like "Ask" wasted half its slot while "Upcoming" filled its own edge to
     edge and ran into the next one: "UpcomingHistory" on his phone. */
  flex: 1 1 auto; min-width: 0; white-space: nowrap; border: 0; background: transparent; color: var(--muted);
  font-size: 10.5px; font-weight: 700; padding: 9px 0 8px; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
}
.tabbar button span { font-size: 20px; }
/* The smallest phones: a touch smaller, so nine labels still keep clear air between them. */
@media (max-width: 360px) { .tabbar button { font-size: 9.5px; } .tabbar button span { font-size: 18px; } }
.tabbar button.active { color: var(--accent-text); }

/* Toast */
.toast {
  position: fixed; left: 50%; transform: translatex(-50%); bottom: calc(86px + var(--safe-b));
  background: var(--ink); color: var(--card); padding: 10px 16px; border-radius: 11px; font-size: 13.5px;
  opacity: 0; pointer-events: none; transition: opacity .2s; z-index: 40; max-width: 90%;
}
.toast.show { opacity: .96; }

/* Break-glass PIN gate (§2) */
.pin-gate { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 20px;
  background: linear-gradient(160deg, var(--bg), color-mix(in srgb, var(--accent) 10%, var(--bg))); }
.pin-gate[hidden] { display: none; }
.pin-card { width: 100%; max-width: 340px; text-align: center; touch-action: manipulation; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
.pin-gate { padding: max(20px, env(safe-area-inset-top)) 20px max(20px, env(safe-area-inset-bottom)); overflow: hidden; }
.pin-logo { font-size: clamp(30px, 6vh, 44px); }
.pin-title { font-size: 24px; font-weight: 800; color: var(--ink); margin-top: 2px; }
.pin-sub { font-size: 14px; color: var(--ink); margin: 4px 0 clamp(8px, 2vh, 18px); }
.pin-dots { display: flex; justify-content: center; gap: 10px; margin-bottom: clamp(8px, 2vh, 16px); }
.pin-dots span { width: 14px; height: 14px; border-radius: 50%; background: transparent; border: 2px solid var(--ink); transition: background .1s; }
.pin-dots span.on { background: var(--ink); }
.pin-gate.busy .pin-dots span.on { animation: pinpulse .9s ease-in-out infinite; }
@keyframes pinpulse { 50% { opacity: .35; } }
.pin-pad { display: grid; grid-template-columns: repeat(3, clamp(64px, 22vw, 84px)); justify-content: center; gap: clamp(8px, 1.6vh, 14px); touch-action: manipulation; }
.pin-pad button { height: clamp(56px, 9vh, 84px); border: 1px solid var(--line); background: var(--card); color: var(--ink); border-radius: 50%; font-size: clamp(26px, 4vh, 32px); font-weight: 700; font-family: inherit; cursor: pointer; box-shadow: var(--shadow-sm); touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.pin-pad button:active { transform: scale(.96); background: var(--accent-soft); }
.pin-pad button:disabled { opacity: .5; }
.pin-pad .pin-back { font-size: 24px; color: var(--ink); box-shadow: none; background: transparent; border-color: transparent; }
.pin-msg { min-height: 1.3em; margin-top: clamp(8px, 2vh, 16px); font-size: 16px; font-weight: 700; color: var(--ink); }
.pin-gate.shake .pin-card { animation: pinshake .4s; }
@keyframes pinshake { 0%,100%{transform:translateX(0)} 20%,60%{transform:translateX(-8px)} 40%,80%{transform:translateX(8px)} }

.empty { text-align: center; color: var(--muted); padding: 30px 10px; }
.empty .big { font-size: 34px; }

@media (min-width: 720px) { .stats { grid-template-columns: repeat(6, 1fr); } }
/* A time zone label riding after a time. Always the zone where the place IS. */
.tzsuf { font-size: 10.5px; font-weight: 700; color: var(--muted); margin-left: 3px; letter-spacing: .02em; }

/* ---- Reviews: real visits, the strongest signal the planners have ---- */
.rv-list { display: grid; gap: 8px; margin-top: 10px; }
.rv-card { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; }
.rv-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rv-emoji { font-size: 15px; }
.rv-name { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rv-when { margin-left: auto; font-size: 11px; color: var(--muted); }
.rv-meta { font-size: 12px; color: var(--muted); margin-top: 3px; }
.rv-ret { font-size: 10.5px; font-weight: 700; color: var(--accent-text); background: var(--accent-soft);
  border-radius: 999px; padding: 1px 8px; margin-left: 4px; }
.rv-ret.rv-no { color: #b4472f; background: rgba(180,71,47,.12); }
.rv-dishes { font-size: 12.5px; margin-top: 5px; line-height: 1.45; }
.rv-dishes.rv-dn { color: var(--muted); }
.rv-notes { font-size: 12.5px; margin-top: 5px; font-style: italic; color: var(--muted); }
.rv-head { display: flex; align-items: center; gap: 8px; }
.rv-match { display: block; width: 100%; text-align: left; margin-top: 6px; padding: 8px 10px;
  border: 1px solid var(--line); background: var(--card); border-radius: 10px; cursor: pointer;
  font-family: inherit; font-size: 13.5px; color: var(--ink); }
.rv-match:hover { border-color: var(--accent-line); background: var(--accent-soft); }
.rv-again { font-size: 12px; color: var(--muted); margin-left: auto; display: flex; align-items: center; gap: 5px; }
.rv-menu { margin-top: 4px; }
.rv-msec:first-child .sec-mini { margin-top: 0; }
.rv-unver { color: #b4472f; }
.rv-editing { font-size: 10.5px; font-weight: 700; color: var(--accent-text); background: var(--accent-soft);
  border-radius: 999px; padding: 1px 8px; }
.rv-card .rv-meta a { color: var(--accent-text); }
/* What the dish actually is - the line that decides whether he'd order it. */
.tr-blurb { display: block; font-size: 12.5px; line-height: 1.45; color: var(--ink); opacity: .82; margin-top: 3px; white-space: normal; }
/* Dishes served inside a hotel he is about to stay in — flagged so the ask explains itself. */
.tr-venue { display: block; font-size: 12px; font-weight: 700; line-height: 1.35; margin-top: 2px;
  color: var(--accent-text); white-space: normal; }
.tr-ab .tr-blurb { font-weight: 400; }

/* ---- Order helper ---- */
.oh-shoot { cursor: pointer; display: inline-block; }
.oh-busy { display: flex; align-items: center; gap: 12px; }
.oh-spin { width: 22px; height: 22px; border: 3px solid var(--line); border-top-color: var(--accent-line);
  border-radius: 50%; animation: oh-turn 900ms linear infinite; flex: 0 0 auto; }
@keyframes oh-turn { to { transform: rotate(360deg); } }
.oh-pick { display: flex; gap: 10px; padding: 9px 0; border-top: 1px solid var(--surface-2); }
.oh-pick:first-of-type { border-top: 0; }
.oh-rank { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; background: var(--accent-soft);
  color: var(--accent-text); font-weight: 800; font-size: 12px; display: flex; align-items: center; justify-content: center; }
.oh-body { flex: 1 1 auto; min-width: 0; }
.oh-name { font-size: 14px; display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; }
.oh-what { font-size: 12.5px; line-height: 1.45; margin-top: 3px; opacity: .85; }
.oh-why { font-size: 12.5px; line-height: 1.45; margin-top: 3px; color: var(--accent-text); }
.oh-note { font-size: 12px; margin-top: 3px; color: var(--muted); }
.oh-d { font-size: 10px; font-weight: 800; letter-spacing: .03em; border-radius: 999px; padding: 1px 7px; text-transform: uppercase; }
.oh-safe { color: #0e7a5c; background: rgba(14,122,92,.13); }
.oh-ask { color: #a86b12; background: rgba(168,107,18,.14); }
.oh-avoid { color: #b4472f; background: rgba(180,71,47,.13); }
.oh-ask-row { padding: 7px 0; border-top: 1px solid var(--surface-2); font-size: 13.5px; }
.oh-q { font-size: 12.5px; color: var(--muted); margin-top: 2px; font-style: italic; }
div.oh-avoid { font-size: 12.5px; line-height: 1.7; color: var(--ink); background: none; padding: 0; }
.oh-footer { font-size: 12.5px; margin-top: 10px; color: var(--muted); font-style: italic; }
.oh-photo { width: 100%; border-radius: 10px; }
.oh-past { position: relative; padding: 7px 26px 7px 0; border-top: 1px solid var(--surface-2); font-size: 13px; }
.oh-past:first-child { border-top: 0; }
.oh-past-picks { font-size: 12px; color: var(--muted); margin-top: 2px; }
.oh-img { flex: 0 0 auto; width: 132px; height: 132px; object-fit: cover; border-radius: 10px; background: var(--surface-2); }
@media (max-width: 520px) {
  .oh-pick { flex-wrap: wrap; }
  .oh-img { flex: 0 0 100%; width: 100%; height: 190px; order: -1; }
}
/* A flight you rebooked, still sitting confirmed on every calendar you share. */
.sup-card { border-color: #e0b44a; }
.sup-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--surface-2); }
.sup-row:first-of-type { border-top: 0; }
.sup-body { flex: 1 1 auto; min-width: 0; font-size: 13.5px; }
.sup-new { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.sup-why { font-size: 12px; color: var(--muted); margin-top: 3px; }

/* Two columns once there is room. A single column of 136px-tall rows left most of a wide
   window empty and pushed the list into its own scrollbar; side by side, ten items fit
   without scrolling and the space is actually used. */
@media (min-width: 980px) {
  .tr-scroll { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 20px; align-content: start; }
  .tr-scroll > .sec-mini,
  .tr-scroll > .hint { grid-column: 1 / -1; }
  .tr-scroll > .tr-item { border-top: 0; border-bottom: 1px solid var(--surface-2); }
}
/* The taste round opts OUT of the 1040px reading width it inherits from .narrow-wide.
   That cap is right for the prose-ish views that share the class (order, reviews, hotels),
   but this view is a grid of picture cards, and at 1040 inside a 1600px window it left 560px
   empty while pushing the list into its own scrollbar. Cards can use the whole window. */
#taste-round { max-width: none; }
/* ...and the page shell's 1600px reading cap comes off with it, for this view only. At 1990px
   the grid was still boxed to 1510, which made four columns 377px wide and started truncating
   the restaurant names that ARE the question. */
main:has(#taste-round) { max-width: none; }
/* More columns as the window allows, so the round FITS instead of scrolling inside itself.
   Stops at three until the window is very wide: at four columns the name and city line of a
   restaurant starts truncating, and the label is the question. */
@media (min-width: 1240px) {
  .tr-scroll { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1900px) {
  .tr-scroll { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* A plan check that predates the latest booking states things that are no longer true. */
.gap-stale-note { font-size: 12.5px; line-height: 1.5; background: rgba(224,180,74,.14); border: 1px solid #e0b44a;
  border-radius: 10px; padding: 8px 10px; margin: 6px 0 8px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.gaps-stale .gap-row { opacity: .58; }
/* One-tap dinner: the app deciding, rather than a form asking him to. */
.dn-hero { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 4px; }
.dn-wrap { margin-top: 8px; }
.dn-card { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; margin-top: 8px; }
.dn-top { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; font-size: 14.5px; }
.dn-rank { flex: 0 0 auto; width: 20px; height: 20px; border-radius: 50%; background: var(--accent-soft);
  color: var(--accent-text); font-weight: 800; font-size: 11.5px; display: inline-flex; align-items: center; justify-content: center; }
.dn-where { font-size: 12px; color: var(--muted); margin-top: 3px; }
.dn-order { font-size: 13px; line-height: 1.5; margin-top: 5px; }
.dn-why { font-size: 12.5px; line-height: 1.45; margin-top: 4px; color: var(--accent-text); }
.dn-note { font-size: 12px; margin-top: 3px; color: var(--muted); }
.dn-foot { font-size: 11.5px; color: var(--muted); margin-top: 5px; }

/* ---- Per-trip chat ---- */
.tchat { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 10px 12px; margin: 0 4px 10px; }
.tchat-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13.5px; }
.tchat-head .btn { margin-left: auto; }
.tchat-log { max-height: min(46vh, 420px); overflow-y: auto; margin: 8px 0 0; }
.tchat-log:empty { display: none; }
.tchat-msg { border-radius: 12px; padding: 8px 11px; margin-top: 7px; font-size: 13.5px; line-height: 1.5; }
.tchat-me { background: var(--accent-soft); color: var(--accent-text); margin-left: 18%; }
.tchat-ai { background: var(--surface-2); }
.tchat-ai p { margin: 0 0 6px; } .tchat-ai p:last-child { margin-bottom: 0; }
.tchat-ai ul { margin: 4px 0 6px; padding-left: 18px; } .tchat-ai li { margin: 2px 0; }
.tchat-wait { opacity: .7; font-style: italic; }
.tchat-eg { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.tchat-chip { border: 1px solid var(--line); background: var(--card); color: var(--muted); border-radius: 999px;
  padding: 5px 11px; font-size: 12px; cursor: pointer; font-family: inherit; text-align: left; }
.tchat-chip:hover { border-color: var(--accent-line); color: var(--accent-text); background: var(--accent-soft); }
.tchat-row { display: flex; gap: 8px; align-items: flex-end; margin-top: 8px; }
.tchat-row textarea { flex: 1 1 auto; min-height: 38px; max-height: 120px; resize: vertical; }

/* ---- Hotel dossier ------------------------------------------------------ */
/* Research read before checking in. Long by nature, so it is grouped into collapsible
   sections (rule 17) with the things he asked to prioritize open by default: the maps and
   the layout, the pictures, the essentials and the on-property dining. */
.hd-wrap { max-width: 980px; margin: 0 auto; }
.hd-head { padding: 2px 4px 10px; }
.hd-name { font-size: 21px; font-weight: 800; line-height: 1.2; }
.hd-city { color: var(--muted); font-size: 13.5px; margin-top: 2px; }
.hd-stay { color: var(--accent-text); font-size: 13px; font-weight: 700; margin-top: 4px; }
.hd-loading { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 16px; font-size: 14.5px; }

.hd-sec { background: var(--card); border: 1px solid var(--line); border-radius: 14px; margin: 0 0 10px; overflow: hidden; }
.hd-sec > summary { cursor: pointer; list-style: none; padding: 11px 13px; font-weight: 800; font-size: 14.5px; }
.hd-sec > summary::-webkit-details-marker { display: none; }
.hd-sec > summary::after { content: '▾'; float: right; color: var(--muted); font-weight: 400; }
.hd-sec[open] > summary::after { content: '▴'; }
.hd-sec > summary:hover { background: var(--surface-2); }
.hd-body { padding: 2px 13px 13px; }

.hd-p { margin: 6px 0; font-size: 13.5px; line-height: 1.55; }
.hd-lead { font-weight: 600; }
.hd-row { display: flex; gap: 10px; padding: 6px 0; border-bottom: 1px dotted var(--line); font-size: 13.5px; align-items: baseline; }
.hd-row:last-child { border-bottom: 0; }
.hd-row > b { flex: 0 0 108px; color: var(--muted); font-size: 12.5px; text-transform: uppercase; letter-spacing: .02em; }
.hd-row > span { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }

/* Maps first: on a property with several towers this is the single most useful thing. */
.hd-maps { display: flex; flex-direction: column; gap: 7px; margin: 6px 0 10px; }
.hd-map { display: flex; align-items: center; gap: 8px; padding: 11px 13px; border-radius: 12px;
  background: var(--accent-soft); color: var(--accent-text); border: 1px solid var(--accent-line);
  font-weight: 700; font-size: 14px; text-decoration: none; }
.hd-map:hover { filter: brightness(1.03); }
.hd-map-k { margin-left: auto; font-size: 11px; font-weight: 700; text-transform: uppercase;
  opacity: .7; letter-spacing: .04em; }

.hd-pics { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.hd-fig { margin: 0; }
.hd-fig img { width: 100%; height: 168px; object-fit: cover; border-radius: 11px; display: block; background: var(--surface-2); }
.hd-fig figcaption { font-size: 11.5px; color: var(--muted); margin-top: 3px; line-height: 1.35; }

.hd-dine { padding: 10px 0; border-bottom: 1px solid var(--line); }
.hd-dine:last-child { border-bottom: 0; }
.hd-dine-h { font-size: 14.5px; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.hd-hours { font-size: 13px; font-weight: 700; color: var(--accent-text); margin-top: 3px; }
.hd-where { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.hd-known { font-size: 13px; margin-top: 4px; }
.hd-note { font-size: 12.5px; margin-top: 4px; background: var(--surface-2); border-radius: 9px; padding: 6px 9px; line-height: 1.45; }
.hd-dairy { font-size: 11px; font-weight: 800; border-radius: 999px; padding: 2px 8px; white-space: nowrap; }
.hd-ok { background: #e4f4ec; color: #16624a; }
.hd-mid { background: #fdf1dd; color: #8a5a12; }
.hd-bad { background: #fce8e8; color: #8f2b2b; }
:root[data-theme="dark"] .hd-ok, :root:not([data-theme="light"]) .hd-ok { background: #14372b; color: #7fd8b3; }
:root[data-theme="dark"] .hd-mid, :root:not([data-theme="light"]) .hd-mid { background: #3d2f13; color: #f0c477; }
:root[data-theme="dark"] .hd-bad, :root:not([data-theme="light"]) .hd-bad { background: #3d1d1d; color: #f0a0a0; }

.hd-tip { padding: 7px 0; border-bottom: 1px dotted var(--line); font-size: 13.5px; }
.hd-tip:last-child { border-bottom: 0; }
.hd-tip > b { display: block; }
.hd-tip > span { display: block; color: var(--muted); font-size: 12.5px; line-height: 1.45; margin-top: 2px; }
.hd-rev { padding: 8px 0; border-bottom: 1px dotted var(--line); }
.hd-rev:last-child { border-bottom: 0; }
.hd-rev-h { font-size: 12px; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: .02em; }
.hd-list { margin: 4px 0; padding-left: 20px; font-size: 13.5px; line-height: 1.55; }
.hd-list li { margin: 4px 0; }
.hd-warn { background: var(--surface-2); border-radius: 11px; padding: 9px 12px; margin-top: 8px; font-size: 13px; }
.hd-warn ul { margin: 5px 0 0; padding-left: 18px; }
.hd-warn li { margin: 3px 0; line-height: 1.45; }
.hd-foot { margin-top: 8px; }

/* The hotel name in an itinerary row is the control that opens all of the above. */
.rec-open { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer;
  text-align: left; font-weight: inherit; }
.rec-open:hover { color: var(--accent-text); }
.rec-open-i { color: var(--accent-text); font-weight: 800; }

@media (max-width: 560px) {
  .hd-row { flex-direction: column; gap: 1px; }
  .hd-row > b { flex: 0 0 auto; }
  .hd-fig img { height: 148px; }
}

/* ---- Dairy flags on any dish (2026-09-10) --------------------------------- */
/* His ask: "I want those two things to be more visually prominent, not dominant but easy for
   me to see." So: bigger than the old 11px grey pill and colour-coded, but still a badge
   rather than a banner. Green reads as "just order it", amber as "you'll have to say
   something" - which is the distinction he actually cares about, because an instruction to
   the server is both a risk and a disclosure he'd rather not make at a table of colleagues. */
.dflag { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; font-weight: 800;
  border-radius: 999px; padding: 3px 10px; white-space: nowrap; letter-spacing: .01em;
  border: 1px solid transparent; }
.dflag-ok  { color: #14663f; background: #dff3e7; border-color: #a9dcc2; }
.dflag-ask { color: #8a5312; background: #fdefd8; border-color: #edcb92; }
.dflag-no  { color: #8f2b2b; background: #fbe4e4; border-color: #eeb4b4; font-weight: 700; }
:root[data-theme="dark"] .dflag-ok,  :root:not([data-theme="light"]) .dflag-ok  { color: #86dcb0; background: #123528; border-color: #1e5a41; }
:root[data-theme="dark"] .dflag-ask, :root:not([data-theme="light"]) .dflag-ask { color: #f2c67c; background: #3a2c12; border-color: #6b5220; }
:root[data-theme="dark"] .dflag-no,  :root:not([data-theme="light"]) .dflag-no  { color: #f0a0a0; background: #3b1c1c; border-color: #6a3030; }
/* On a taste card it sits on its own line under the venue, so it never fights the dish name. */
.tr-item .dflag { margin-top: 4px; }
.tr-label > .dflag { align-self: flex-start; }

/* Room service, called out at the top of a hotel's dining section (2026-09-10). "I will very
   often order room service when it is available", so whether there IS any is a headline fact
   about the property, not a row to hunt for among ten venues. A plain "no" earns the same
   banner: knowing there is none is what changes the evening's plan. */
.hd-rs { border-radius: 12px; padding: 10px 12px; margin: 2px 0 12px; border: 1px solid var(--line); }
.hd-rs-h { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 14.5px; }
.hd-rs-hours { font-size: 13px; font-weight: 700; opacity: .9; }
.hd-rs-l { font-size: 13px; line-height: 1.5; margin-top: 4px; }
.rs-yes  { background: #dff3e7; border-color: #a9dcc2; color: #14663f; }
.rs-part { background: #fdefd8; border-color: #edcb92; color: #8a5312; }
.rs-no   { background: var(--surface-2); color: var(--muted); }
:root[data-theme="dark"] .rs-yes,  :root:not([data-theme="light"]) .rs-yes  { background: #123528; border-color: #1e5a41; color: #86dcb0; }
:root[data-theme="dark"] .rs-part, :root:not([data-theme="light"]) .rs-part { background: #3a2c12; border-color: #6b5220; color: #f2c67c; }

/* "Where to say you'll meet" (2026-09-10). A named landmark visible from the front door, for
   telling someone where to find you before going out. Not a place to sit: a rendezvous. The
   quoted line is copyable because its whole purpose is to be pasted into a message. */
.hd-meet-wrap { margin: 10px 0 4px; }
.hd-meet-t { font-size: 12.5px; font-weight: 800; color: var(--muted); text-transform: uppercase;
  letter-spacing: .03em; margin-bottom: 6px; }
.hd-meet { background: var(--accent-soft); border: 1px solid var(--accent-line); border-radius: 12px;
  padding: 10px 13px; margin-bottom: 8px; }
.hd-meet-h { font-size: 15px; color: var(--accent-text); }
.hd-meet-l { font-size: 13px; line-height: 1.5; margin-top: 3px; }
.hd-meet-why { color: var(--muted); }
.hd-meet-say { font-size: 13.5px; line-height: 1.5; margin-top: 7px; font-style: italic;
  background: var(--card); border-radius: 9px; padding: 7px 10px; }

/* A copy control that says what it does, for sentences meant to be pasted into a message. */
.copy-lg { font-size: 12.5px; font-weight: 700; padding: 4px 10px; border-radius: 999px;
  border: 1px solid var(--accent-line); background: var(--card); color: var(--accent-text);
  cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 4px; }
.copy-lg:hover { background: var(--accent-soft); }
.hd-meet-acts { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 7px; }

/* The one sentence to say at the front desk. Leads the room section because it is the only
   part he acts on, and it is copyable for the same reason the meeting lines are. */
.hd-ask { background: var(--accent-soft); border: 1px solid var(--accent-line); border-radius: 12px;
  padding: 10px 13px; margin: 4px 0 10px; }
.hd-ask-l { font-size: 12px; font-weight: 800; color: var(--accent-text); text-transform: uppercase; letter-spacing: .03em; }
.hd-ask-s { font-size: 14px; line-height: 1.5; margin-top: 4px; font-style: italic; }
.dflag-unk { color: var(--muted); background: var(--surface-2); border-color: var(--line); font-weight: 700; }

/* ---- Restaurant / activity page (2026-09-12) --------------------------------------------- */
/* Opens on what to order, because that is the decision the page exists for. */
.pl-pick { padding: 10px 0; border-bottom: 1px solid var(--line); }
.pl-pick:last-of-type { border-bottom: 0; }
.pl-pick-h { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 15px; }
.pl-rank { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px;
  border-radius: 999px; background: var(--accent-soft); color: var(--accent-text); font-size: 12px; font-weight: 800; }
.pl-why { font-size: 13px; color: var(--muted); line-height: 1.5; margin-top: 2px; }
.pl-liked { margin: 4px 0; padding-left: 4px; list-style: none; font-size: 13.5px; }
.pl-liked li { margin: 5px 0; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.pl-sec { margin: 6px 0 12px; }
.pl-sec-h { font-size: 12.5px; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: .03em;
  border-bottom: 1px solid var(--line); padding-bottom: 4px; margin-bottom: 4px; }
.pl-item { padding: 6px 0; border-bottom: 1px dotted var(--line); }
.pl-item:last-child { border-bottom: 0; }
.pl-item-h { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; font-size: 14px; }
.pl-item-d { font-size: 12.5px; color: var(--muted); line-height: 1.45; margin-top: 2px; }

/* The travel update he just got a notification about, surfaced where he lands (2026-09-12).
   A tapped notification can cold-launch the installed iOS app at its start URL and lose its
   deep link, so this banner is the guarantee the alert is never silently lost. */
.alert-banner { display: flex; align-items: center; gap: 10px; width: calc(100% - 24px); max-width: 980px;
  margin: 10px auto 4px; padding: 11px 14px; border-radius: 14px; border: 1px solid var(--accent-line);
  background: var(--accent-soft); color: var(--ink); text-align: left; font: inherit; cursor: pointer; }
.alert-banner-ico { font-size: 20px; flex: 0 0 auto; }
.alert-banner-txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.alert-banner-txt b { font-size: 14.5px; }
.alert-banner-txt span { font-size: 13px; color: var(--muted); line-height: 1.4; }
.alert-banner-go { font-size: 22px; font-weight: 800; color: var(--accent-text); flex: 0 0 auto; }
.alert-row.alert-focus { border: 2px solid var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.trip-alert { margin: 0 0 12px; }
.trip-alert .alert-head .btn { margin-left: auto; }
.alert-trip { margin-top: 8px; }

/* Outdated menu information (2026-09-13): "Not on the menu" and where the menu came from. */
.gone-btn { display: inline-flex; align-items: center; gap: 3px; font: inherit; font-size: 11.5px; font-weight: 700;
  color: var(--muted); background: transparent; border: 1px dashed currentColor; border-radius: 999px;
  padding: 2px 8px; cursor: pointer; white-space: nowrap; opacity: .85; }
.gone-btn:hover { opacity: 1; color: #8f2b2b; }
.gone-btn:disabled { opacity: .5; cursor: progress; }
.tr-label .gone-btn { align-self: flex-start; margin-top: 4px; }
.menu-src { font-size: 12.5px; line-height: 1.45; margin: 0 0 8px; }
.menu-src-ok { color: #14663f; }
.menu-src-ok a { font-weight: 700; }
.menu-src-warn { color: #8a5312; background: #fdefd8; border: 1px solid #edcb92; border-radius: 10px; padding: 7px 10px; }
:root[data-theme="dark"] .menu-src-ok, :root:not([data-theme="light"]) .menu-src-ok { color: #86dcb0; }
:root[data-theme="dark"] .menu-src-warn, :root:not([data-theme="light"]) .menu-src-warn { color: #f2c67c; background: #3a2c12; border-color: #6b5220; }
.pl-gone { opacity: .6; }
.gone-btn-sm { padding: 1px 6px; font-size: 11px; border-style: dotted; opacity: .6; }


/* ------------------------------------------- pictures drawn by photolab
   A count on the Settings tab, and the review cards under it. The tab's own
   rule sets span{font-size:20px} for the emoji, so this uses its own element
   and its own size rather than inheriting that. */
.tabbar button { position: relative; }
.tab-count {
  position: absolute; top: 4px; left: 50%; margin-left: 5px;
  min-width: 15px; height: 15px; padding: 0 4px; border-radius: 999px;
  background: var(--danger); color: #fff;
  font-size: 9.5px; font-weight: 800; font-style: normal; line-height: 15px;
  text-align: center;
}
.pipe-card {
  display: flex; gap: 10px; align-items: flex-start;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 8px; margin-top: 8px;
}
.pipe-shot {
  width: 108px; height: 108px; object-fit: cover; flex: none;
  border-radius: 10px; border: 1px solid var(--line); background: var(--surface-2);
}
.pipe-facts { min-width: 0; flex: 1; }
/* Said plainly on every card: these are drawn, and the app does not pretend
   otherwise about a real place. Same posture as the taste-card art. */
.pipe-tag {
  display: inline-block; font-size: 10.5px; font-weight: 700;
  color: var(--gold-text, var(--muted)); background: var(--gold-soft, var(--surface-2));
  border-radius: 999px; padding: 1px 7px; margin-bottom: 4px;
}

/* A picture drawn for a pick, once he has approved it (placepics.ts). */
.pl-shot { width: 100%; max-height: 220px; object-fit: cover; border-radius: 12px;
  margin: 0 0 8px; display: block; background: var(--card-2, #eee); }
@media (min-width: 860px) { .pl-shot { max-height: 260px; } }

/* The drawn picture at the top of a tour or site page (placepics.ts). */
.pl-hero { width: 100%; max-height: 240px; object-fit: cover; border-radius: 14px; display: block;
  margin: 0 0 10px; background: var(--card-2, #eee); }

/* A drawn picture of a tour or site, on its itinerary row. */
.ithumb { width: 44px; height: 44px; object-fit: cover; border-radius: 9px; flex: 0 0 auto; display: block; }

/* Drawn, not photographed (PICTURES.md): every surface that shows a photolab picture says so. */
.pl-shot-tag { font-size: 11px; color: var(--muted); letter-spacing: .01em; margin: -4px 0 8px; }
.thumb-drawn, .mthumb-drawn img { outline: 1px dashed var(--muted); outline-offset: -1px; }
.mthumb-drawn::after, .ithumb-drawn { position: relative; }
.mthumb-drawn::after { content: "✎"; position: absolute; left: 3px; bottom: 3px; font-size: 10px;
  background: rgba(0,0,0,.55); color: #fff; border-radius: 4px; padding: 0 3px; }
.ithumb-drawn { outline: 1px dashed var(--muted); outline-offset: -1px; }

/* Removing a booking from a trip: the ✕ is quiet until asked, the confirm is not. */
.rec-delbtn:hover { color: #b3261e; }
.rec-del-ask { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 13px; }
.btn.danger { background: #b3261e; border-color: #b3261e; color: #fff; }
.btn.danger:hover { background: #8f1d18; border-color: #8f1d18; }

/* How far the lounge is from his gate (airportwalk.ts). */
.lng-walk { font-size: 11.5px; font-weight: 700; color: #14663f; background: #dff3e7; border-radius: 999px; padding: 1px 7px; white-space: nowrap; }
.lng-walk-exit { color: #8a5312; background: #fdefd8; }
:root[data-theme="dark"] .lng-walk, :root:not([data-theme="light"]) .lng-walk { color: #86dcb0; background: #123528; }
:root[data-theme="dark"] .lng-walk-exit, :root:not([data-theme="light"]) .lng-walk-exit { color: #f2c67c; background: #3a2c12; }

/* Things he always avoids (avoid.ts). */
.av-box { margin: 6px 4px 10px; border: 1px solid var(--line); border-radius: 12px; padding: 6px 10px; }
.av-box > summary { cursor: pointer; font-weight: 800; font-size: 13.5px; }
.av-body { padding: 6px 0 2px; }
.av-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.av-chip { display: inline-flex; align-items: center; gap: 4px; background: #fbe4e4; color: #8f2b2b;
  border: 1px solid #eeb4b4; border-radius: 999px; padding: 2px 6px 2px 10px; font-size: 12.5px; font-weight: 700; }
.av-x { border: 0; background: transparent; color: inherit; cursor: pointer; font-size: 11px; opacity: .7; padding: 0 2px; }
.av-x:hover { opacity: 1; }
.av-sugg { border: 1px dashed var(--line); background: transparent; color: var(--ink); border-radius: 999px;
  padding: 3px 10px; font-size: 12.5px; cursor: pointer; margin: 0 6px 6px 0; }
.av-sugg:hover { border-style: solid; }
.av-n { color: var(--muted); font-size: 11px; }
.tr-never { opacity: .5; }
.tr-never:hover { opacity: 1; }
.tr-never-ask { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; flex-wrap: wrap; }
:root[data-theme="dark"] .av-chip, :root:not([data-theme="light"]) .av-chip { background: #3b1c1c; color: #f0a0a0; border-color: #6a3030; }

/* An A-or-B that decides a booked meal, not general palate research (decisive.ts).
   .tr-pair is a FLEX ROW: without these two lines the heading became a third column and squeezed
   both choices into one-character-wide slivers on an iPhone. */
/* EVERY pair card wraps, not just the venue ones. The ranking cards carry a heading too and had
   no wrap, so the 100% heading ate the row and squeezed both choices to slivers on an iPad. */
.tr-pair { flex-wrap: wrap; }
.tr-pair-head { flex: 1 0 100%; font-size: 12px; font-weight: 800; color: var(--accent-text); margin: 0 0 2px; }
.tr-pair-why { font-weight: 600; color: var(--muted); }

/* His order of preference, learned from the A-or-B answers (rank.ts). */
.rk-list { margin: 4px 0 0; padding: 0 0 0 4px; list-style: none; }
.rk-list li { display: flex; align-items: baseline; gap: 6px; font-size: 13px; padding: 3px 0; border-top: 1px solid var(--surface-2); }
.rk-list li:first-child { border-top: 0; }
.rk-n { font-weight: 800; color: var(--accent-text); min-width: 18px; }
.rk-venue { color: var(--muted); font-size: 11.5px; }
.rk-n2 { margin-left: auto; color: var(--muted); font-size: 11px; white-space: nowrap; }
.tr-pair-rank { color: var(--muted); }

/* On a phone the two choices sit side by side at about 150px each, which is unreadable once a
   picture is in them. Stack them: one full-width choice above the other, skip at the bottom. */
@media (max-width: 560px) {
  .tr-pair { flex-direction: column; align-items: stretch; }
  .tr-ab { flex: 0 0 auto; width: 100%; }
  .tr-or { align-self: flex-start; padding: 2px 0; }
  .tr-skip { width: 100%; height: 34px; }
}
.fxtag-sub { font-weight: 600; opacity: .75; font-size: 11px; }

/* "How was the ride?" — the forecast's only real evidence (flightday.ts turbBias). */
.ride-ask { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12.5px;
  color: var(--muted); padding: 6px 0 2px; }

/* Event menu planner (2026-09-25). A card under the itinerary item that opened it. The suggestions
   are folded to one line each (global rule 17) with the first open; the full menu is folded by
   section. The cost table scrolls inside its own box on a narrow phone, never the page. */
.evm-open { margin-top: 6px; }
.evm-slot:empty { display: none; }
.evm-panel { margin: 6px 0 12px; padding: 14px; }
.evm-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.evm-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.evm-chip { background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px; padding: 3px 9px; font-size: 12.5px; }
.evm-warn { background: var(--surface-2); border-left: 3px solid var(--danger); border-radius: 8px; padding: 8px 10px; font-size: 13.5px; margin: 6px 0; }
.evm-notes { margin: 6px 0 4px 18px; padding: 0; font-size: 13px; color: var(--muted); }
.evm-sub-h { font-weight: 800; margin: 14px 0 6px; }
.evm-sug, .evm-sec { border: 1px solid var(--line); border-radius: 12px; margin: 6px 0; background: var(--card); }
.evm-sug > summary, .evm-sec > summary { cursor: pointer; padding: 9px 12px; list-style: revert; }
.evm-sug-name { font-weight: 800; margin-right: 6px; }
.evm-sug-line { color: var(--muted); font-size: 13px; }
.evm-sug-body { padding: 0 12px 10px; font-size: 14px; }
.evm-sug-body p { margin: 6px 0; }
.evm-idea { color: var(--muted); font-style: italic; }
.evm-kv { display: flex; gap: 8px; padding: 2px 0; }
.evm-kv > span { min-width: 86px; color: var(--muted); font-size: 13px; }
.evm-table-wrap { overflow-x: auto; margin: 8px 0 2px; }
.evm-table { border-collapse: collapse; font-size: 13px; min-width: 100%; }
.evm-table th, .evm-table td { text-align: left; padding: 4px 7px 4px 0; white-space: nowrap; border-bottom: 1px solid var(--line); }
.evm-table th { color: var(--muted); font-weight: 700; }
.evm-short { color: var(--danger); font-weight: 700; }
.evm-ok { color: var(--muted); }
.evm-list { list-style: none; margin: 0; padding: 0 12px 8px; }
.evm-list li { padding: 7px 0; border-top: 1px solid var(--line); }
.evm-item-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; }
.evm-price { color: var(--muted); font-size: 13px; }
.evm-milk { font-size: 11.5px; font-weight: 700; border: 1px solid var(--line); border-radius: 999px; padding: 0 7px; }
.evm-desc { font-size: 13px; color: var(--muted); margin-top: 2px; }
.evm-tags { font-size: 12px; color: var(--muted); margin-top: 2px; }
.evm-milk-body { border-color: var(--danger); }
.evm-milk-note { font-size: 12px; color: var(--muted); }
@media (max-width: 360px) { .evm-table { font-size: 12px; } .evm-table th, .evm-table td { padding-right: 5px; } .evm-panel { padding: 12px 10px; } }
/* Drawn pictures of the event's dishes: a row in each suggested menu, a thumbnail in the full menu. */
.evm-pics { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 6px; margin: 6px 0 2px; }
.evm-pic { width: 44px; height: 44px; object-fit: cover; border-radius: 8px; float: left; margin: 2px 10px 2px 0; }
.evm-pic-big { width: 100%; height: auto; aspect-ratio: 1; float: none; margin: 0; }
.evm-list li.evm-has-pic { overflow: hidden; }

/* ------------------------------------------- Local: restaurants near the two homes (2026-09-27)
   The switch, search and filters stay put; only the list scrolls (sizeLocList sets its height).
   Contrast, computed from the tokens (light / dark): our stars --gold-text on --gold-soft 4.86 / 5.58;
   fit estimate --accent-text on --accent-soft 5.62 / 5.81; --muted on --card 4.81 / 5.35; the group
   headers and the line under the switch sit on the PAGE, where --muted is only 4.11 in light, so they
   use --ink (12.51 / 15.11) with the counts in --accent-text (5.71 / 9.05). */
.tastebar { margin-bottom: 8px; }
.loc { display: flex; flex-direction: column; min-width: 0; }
.loc-top { display: flex; flex-direction: column; gap: 6px; padding: 0 4px 6px; }
.loc-bars { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 8px; }
.loc-bars .histbar { margin: 0; }
.loc-home { font-size: 12.5px; text-align: center; color: var(--ink); }
.loc-srow { display: flex; gap: 8px; align-items: center; min-width: 0; }
.loc-srow .histbar { margin: 0; flex: 0 0 auto; }
.loc-srow .loc-q { flex: 1 1 auto; min-width: 0; }
.loc-addbtn { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 11px; border: 1px solid var(--line); background: var(--card);
  color: var(--accent-text); font-size: 22px; line-height: 1; cursor: pointer; }
.loc-add { display: flex; flex-direction: column; gap: 6px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 10px 11px; }
.loc-add-t { font-weight: 750; font-size: 14px; color: var(--ink); }
.loc-add input { font: inherit; font-size: 15px; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg); color: var(--ink); min-width: 0; }
.loc-empty-add { margin-top: 8px; }
.loc-facts { display: flex; flex-wrap: wrap; gap: 6px 12px; font-size: 13px; margin: 0 0 6px; }
.loc-q { width: 100%; box-sizing: border-box; font: inherit; font-size: 15px; padding: 9px 12px; border-radius: 11px;
  border: 1px solid var(--line); background: var(--card); color: var(--ink); }
.loc-chips { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.loc-chips::-webkit-scrollbar { display: none; }
.loc-chips .locsort { flex: 0 0 auto; margin: 0 4px 0 0; }
.loc-chips .locsort .seg { padding: 4px 10px; }
@media (min-width: 860px) { .loc-list:has(.loc-near) { display: block; } .loc-near { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 0 12px; align-content: start; } }
.loc-chip { flex: 0 0 auto; border: 1px solid var(--line); background: var(--card); color: var(--ink); border-radius: 999px;
  padding: 5px 11px; font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.loc-chip span { color: var(--muted); font-weight: 600; margin-left: 2px; }
.loc-chip.on { background: var(--accent-soft); color: var(--accent-text); border-color: transparent; }
.loc-chip.on span { color: var(--accent-text); }
.loc-list { overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 0 2px 10px; min-width: 0; }
.loc-grp { margin-bottom: 10px; }
.loc-gh { position: sticky; top: 0; z-index: 1; background: var(--bg); font-size: 12px; font-weight: 800; letter-spacing: .03em;
  text-transform: uppercase; color: var(--ink); padding: 8px 4px 5px; }
.loc-gh .muted { color: var(--accent-text); }
.loc-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 4px 10px;
  background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 9px 11px; margin-bottom: 6px; }
.loc-row.open { box-shadow: 0 2px 10px rgba(0,0,0,.08); }
.loc-row { scroll-margin-top: 36px; }   /* clear of the sticky cuisine heading when scrolled into view */
.loc-main { all: unset; cursor: pointer; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.loc-name { font-weight: 750; font-size: 15px; color: var(--ink); overflow-wrap: anywhere; }
.loc-chain { font-size: 10.5px; font-weight: 700; color: var(--muted); border: 1px solid var(--line); border-radius: 6px; padding: 0 5px; vertical-align: 1px; }
.loc-sub { font-size: 12.5px; color: var(--muted); overflow-wrap: anywhere; }
.loc-order { font-size: 12.5px; color: var(--ink); opacity: .85; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.loc-badge { font-size: 13px; font-weight: 800; border-radius: 9px; padding: 3px 8px; white-space: nowrap; align-self: center; }
.loc-badge.ours { background: var(--gold-soft); color: var(--gold-text); }
.loc-badge.fit { background: var(--accent-soft); color: var(--accent-text); }
.loc-badge.pending { color: var(--muted); }
.loc-detail { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 8px; padding-top: 6px; border-top: 1px solid var(--line); margin-top: 4px; }
.loc-stars { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; }
.loc-star { background: none; border: 0; font-size: 26px; line-height: 1; color: var(--gold); cursor: pointer; padding: 2px 3px; min-width: 34px; min-height: 36px; }
.loc-star.zero { font-size: 22px; color: var(--muted); }
.loc-star.zero.on { color: var(--danger, #c0392b); }
.loc-clear { background: none; border: 0; color: var(--accent-text); font: inherit; font-size: 12.5px; cursor: pointer; margin-left: 6px; text-decoration: underline; }
.loc-acts { display: flex; flex-wrap: wrap; gap: 6px; }
.loc-fit { font-size: 13.5px; display: flex; flex-direction: column; gap: 3px; }
.loc-look p { margin: 0 0 6px; font-size: 13.5px; }
.loc-look ul { margin: 0 0 6px; padding-left: 18px; font-size: 13.5px; }
.loc-look li { margin-bottom: 4px; }
.loc-dairy { font-size: 11.5px; font-weight: 700; border-radius: 6px; padding: 1px 6px; margin-left: 4px; white-space: nowrap; }
.loc-dairy.d-none { background: var(--surface-2); color: var(--ink); }
.loc-dairy.d-ask { background: var(--gold-soft); color: var(--gold-text); }
.loc-dairy.d-avoid { background: var(--danger-soft); color: var(--chip-ink); }
.loc-askq { font-size: 12.5px; color: var(--ink); margin-top: 2px; }
.loc-warn { background: var(--danger-soft); color: var(--chip-ink); border-radius: 8px; padding: 6px 9px; font-size: 13px; font-weight: 700; margin-bottom: 6px; }
.loc-contact { display: flex; flex-direction: column; gap: 4px; font-size: 13.5px; min-width: 0; }
.loc-contact a { overflow-wrap: anywhere; color: var(--accent-text); }   /* 6.67 light / 7.93 dark on --card */
.loc-notes { width: 100%; box-sizing: border-box; font: inherit; font-size: 14px; border-radius: 10px; border: 1px solid var(--line);
  background: var(--bg); color: var(--ink); padding: 8px 10px; resize: vertical; }
.loc-more { display: block; margin: 2px auto 0; border: 0; background: transparent; color: var(--accent-text); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; padding: 6px 10px; }
@media (min-width: 860px) {
  .loc-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 0 12px; align-content: start; }
  .loc-grp { min-width: 0; }
}