/* ============================================================
   Trips — shared premium design system for all private pages.
   Same tokens and visual language as the public homepage:
   navy cinematic heroes, white content, blue/purple accents.
   ============================================================ */

:root {
  --navy-950: #081120;
  --navy-900: #0c1a30;
  --navy-800: #122448;
  --accent: #2563eb;
  --accent-strong: #1d4ed8;
  --accent-bright: #3b82f6;
  --accent-soft: rgba(59, 130, 246, 0.13);
  --accent-glow: rgba(59, 130, 246, 0.4);
  --cloud: #f5f8fd;
  --card: #ffffff;
  --ink: #0f1b2d;
  --muted: #5a6b85;
  --line: #e3eaf5;
  --green: #059669;
  --green-soft: #d9f2e7;
  --red: #dc2626;
  --red-soft: #fde4e4;
  --amber: #d97706;
  --amber-soft: #fdeed3;
  --purple: #7c3aed;
  --purple-soft: #ece4fb;
  --radius: 16px;
  --shadow-soft: 0 4px 18px rgba(13, 31, 63, 0.07);
  --shadow-lift: 0 14px 38px rgba(13, 31, 63, 0.14);
  --border: var(--line);
  --surface: var(--card);
  --surface-2: var(--cloud);
  --primary: var(--accent);
  --shadow-sm: var(--shadow-soft);
  --font-display: "Playfair Display", Georgia, serif;
  --font-body: "Inter", system-ui, sans-serif;
}

body[data-trip-theme="purple"] {
  --accent: #7c3aed;
  --accent-strong: #6d28d9;
  --accent-bright: #8b5cf6;
  --accent-soft: rgba(139, 92, 246, 0.13);
  --accent-glow: rgba(139, 92, 246, 0.4);
}

* { box-sizing: border-box; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001s !important; transition-duration: 0.001s !important; }
}

body.trips-ui {
  margin: 0;
  font-family: var(--font-body);
  background: var(--cloud);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
}

.trips-ui img { max-width: 100%; }
.trips-ui svg { width: 18px; height: 18px; flex: 0 0 auto; }

.trips-ui :focus-visible { outline: 3px solid var(--accent-bright); outline-offset: 2px; border-radius: 6px; }

.sr-only { position: absolute; width: 1px; height: 1px; clip: rect(0 0 0 0); overflow: hidden; white-space: nowrap; }

/* ---------- Top platform bar ---------- */

.ws-topbar { background: var(--navy-950); color: #fff; }

.ws-topbar__inner {
  width: min(1240px, 100% - 32px);
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: 22px;
  min-height: 62px;
}

.ws-brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: #fff;
  text-decoration: none;
  font-size: 1.15rem;
  font-weight: 900;
}

.ws-brand svg { width: 24px; height: 24px; }

.ws-topbar__nav { display: flex; gap: 6px; }

.ws-topbar__nav a {
  color: rgba(255, 255, 255, 0.75);
  text-decoration: none;
  font-weight: 700;
  font-size: 0.88rem;
  padding: 8px 14px;
  border-radius: 9px;
}

.ws-topbar__nav a:hover { color: #fff; background: rgba(255, 255, 255, 0.08); }
.ws-topbar__nav a.is-active { color: #fff; background: rgba(255, 255, 255, 0.14); }

.ws-topbar__side { margin-left: auto; display: flex; align-items: center; gap: 12px; }

.ws-topbar__ghost {
  color: rgba(255, 255, 255, 0.75);
  text-decoration: none;
  font-weight: 700;
  font-size: 0.85rem;
  padding: 7px 12px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 9px;
}

.ws-topbar__ghost:hover { color: #fff; border-color: rgba(255, 255, 255, 0.5); }

.theme-switch {
  display: inline-flex;
  gap: 3px;
  padding: 3px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.theme-switch button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  padding: 0 12px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: rgba(255, 255, 255, 0.75);
  font: 700 0.76rem/1 var(--font-body);
  cursor: pointer;
}

.theme-switch button::before { content: ""; width: 10px; height: 10px; border-radius: 50%; }
.theme-switch button[data-trip-theme-choice="blue"]::before { background: #3b82f6; }
.theme-switch button[data-trip-theme-choice="purple"]::before { background: #a855f7; }
.theme-switch button.is-active { background: rgba(255, 255, 255, 0.92); color: var(--navy-900); }

/* ---------- Workspace hero ---------- */

.ws-hero {
  background: linear-gradient(120deg, var(--navy-900), var(--navy-800));
  background-size: cover;
  background-position: center;
  color: #fff;
}

.ws-hero__inner {
  width: min(1240px, 100% - 32px);
  margin-inline: auto;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  padding: 34px 0 22px;
  flex-wrap: wrap;
}

.ws-hero__eyebrow {
  margin: 0 0 6px;
  font: 800 0.74rem/1 var(--font-body);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.65);
}

.ws-hero h1 {
  margin: 0 0 10px;
  font: 800 clamp(1.7rem, 4.5vw, 2.5rem)/1.08 var(--font-display);
}

.ws-hero__facts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 18px;
  font-size: 0.86rem;
  color: rgba(255, 255, 255, 0.85);
}

.ws-hero__facts span { display: inline-flex; align-items: center; gap: 6px; }
.ws-hero__facts svg { width: 15px; height: 15px; opacity: 0.8; }

.ws-hero__side { display: flex; align-items: center; gap: 14px; }

/* Workspace nav */

.ws-nav {
  background: rgba(8, 17, 32, 0.35);
  backdrop-filter: blur(8px);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.ws-nav__scroll {
  width: min(1240px, 100% - 32px);
  margin-inline: auto;
  display: flex;
  gap: 2px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.ws-nav__scroll::-webkit-scrollbar { display: none; }

.ws-nav__link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 13px 13px;
  color: rgba(255, 255, 255, 0.72);
  text-decoration: none;
  font-weight: 700;
  font-size: 0.82rem;
  white-space: nowrap;
  border-bottom: 3px solid transparent;
  transition: color 140ms ease;
}

.ws-nav__link svg { width: 15px; height: 15px; }
.ws-nav__link:hover { color: #fff; }
.ws-nav__link.is-active { color: #fff; border-bottom-color: var(--accent-bright); }

/* The five journey links share the row evenly so none of them can be pushed
   off the edge of a small phone. */
.ws-nav__scroll .ws-nav__link { flex: 1 1 0; min-width: 0; justify-content: center; }

/* On a phone, a trip page can run to several thousand pixels (Overview, the
   Road Book) and the journey tabs -- the one thing that gets a traveller to
   Places, Vote, Plan or Go -- used to scroll away with the hero the moment
   you left the very top of the page, forcing a scroll back up to switch
   anywhere. Sticking the row under the shared top bar keeps that switch one
   tap away for the length of the page. 720px is the shared top bar's own
   breakpoint (assets/trips-meridian.css), so 53px is its real height here,
   not a guess. Go keeps its own bottom controls and sticky day tabs instead:
   they already solve this for Go specifically, and stacking a second sticky
   bar on top of them is more likely to fight for the same pixels than help. */
@media (max-width: 720px) {
  body:not([data-page="journey"]) .ws-nav {
    position: sticky;
    top: 53px;
    z-index: 70;
  }
}

/* ---------- Trip tools: everything that is not the journey itself ---------- */

.ws-tools {
  width: min(1240px, 100% - 32px);
  margin-inline: auto;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}
.ws-tools__summary {
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 4px;
  color: rgba(255, 255, 255, 0.66);
  font-weight: 750;
  font-size: 0.76rem;
  letter-spacing: .04em;
  cursor: pointer;
  list-style: none;
}
.ws-tools__summary::-webkit-details-marker { display: none; }
.ws-tools__summary::after { content: "▾"; font-size: .7rem; transition: transform 140ms ease; }
.ws-tools[open] .ws-tools__summary::after { transform: rotate(180deg); }
.ws-tools__summary svg { width: 15px; height: 15px; }
.ws-tools__summary:hover { color: #fff; }
.ws-tools__summary:focus-visible { outline: 2px solid var(--accent-bright); outline-offset: 2px; border-radius: 6px; }
/* Scoped to [open]: an unconditional display:grid here would override the
   browser's own closed-<details> hiding for this element specifically (the
   display property cascades per-element), leaving a real, positioned,
   250px-tall grid of links sitting in normal flow underneath the guided-flow
   band whenever "Trip tools" is collapsed -- exactly the wall-of-controls the
   disclosure exists to avoid, and geometry a scroll-anchoring or accessibility
   pass could still latch onto even where today's Chromium paint order happens
   to hide it. Closed means closed, in every browser, unconditionally. */
.ws-tools[open] .ws-tools__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(140px, 100%), 1fr));
  gap: 4px;
  padding: 2px 0 12px;
}
.ws-tools__link {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 8px 10px;
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.74);
  text-decoration: none;
  font-weight: 650;
  font-size: 0.8rem;
}
.ws-tools__link svg { width: 15px; height: 15px; flex: none; }
.ws-tools__link:hover { color: #fff; background: rgba(255, 255, 255, 0.07); }
.ws-tools__link.is-active { color: #fff; background: rgba(255, 255, 255, 0.12); }


/* ---------- Guided-journey band: one next action + four-stage progress ---------- */

.ws-flow {
  background: var(--card);
  border-bottom: 1px solid var(--line);
  box-shadow: var(--shadow-soft);
}
.ws-flow__inner {
  width: min(1240px, 100% - 32px);
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px 28px;
  padding: 12px 0;
  flex-wrap: wrap;
}
.ws-flow__next {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
  color: var(--ink);
  padding: 7px 8px 7px 8px;
  border-radius: 999px;
  background: var(--accent-soft);
  border: 1px solid transparent;
  transition: border-color 140ms ease, transform 140ms ease;
  min-width: 0;
}
.ws-flow__choice { display: grid; min-width: 0; gap: 3px; }
/* Where the trip has got to, and what has actually happened — said once,
   quietly, above the one thing to do next. */
.ws-flow__where {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
  margin: 0 0 2px;
  font-size: .74rem;
  line-height: 1.35;
}
.ws-flow__where strong {
  color: var(--accent-strong);
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
  font-size: .64rem;
}
.ws-flow__where span { color: var(--muted); font-weight: 600; }
.ws-flow__escape { justify-self: center; display: inline-flex; align-items: center; min-height: 44px; padding-inline: 8px; color: var(--muted); font-size: .72rem; font-weight: 750; text-decoration: none; }
.ws-flow__escape:hover { color: var(--ink); text-decoration: underline; }
.ws-flow__next:hover { border-color: var(--accent-glow); transform: translateY(-1px); }
.ws-flow__next-tag {
  font: 800 0.66rem/1 var(--font-body);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-strong);
  background: #fff;
  padding: 6px 10px;
  border-radius: 999px;
  white-space: nowrap;
  flex: none;
}
.ws-flow__next-text {
  font-weight: 750;
  font-size: 0.95rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.ws-flow__next-go {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-weight: 800;
  font-size: 0.84rem;
  color: #fff;
  background: var(--accent);
  padding: 8px 14px;
  border-radius: 999px;
  white-space: nowrap;
  flex: none;
}
.ws-flow__next-go svg { width: 15px; height: 15px; }
.ws-flow--ready .ws-flow__next { background: var(--green-soft); }
.ws-flow--ready .ws-flow__next-tag { color: var(--green); }
.ws-flow--ready .ws-flow__next-go { background: var(--green); }

.ws-progress {
  display: flex;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 2px 0;
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
}
.ws-progress::-webkit-scrollbar { display: none; }
.ws-progress__step { position: relative; display: flex; align-items: center; flex: none; }
.ws-progress__step + .ws-progress__step { padding-left: 8px; }
.ws-progress__step + .ws-progress__step::before {
  content: "";
  width: 16px;
  height: 2px;
  border-radius: 2px;
  background: var(--line);
  margin-right: 8px;
  flex: none;
}
.ws-progress__step.is-done + .ws-progress__step::before { background: var(--green); }
.ws-progress__link {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  text-decoration: none;
  color: var(--muted);
  white-space: nowrap;
}
a.ws-progress__link:hover .ws-progress__label { color: var(--ink); }
.ws-progress__dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid var(--line);
  color: var(--muted);
  font-weight: 800;
  font-size: 0.76rem;
  flex: none;
  background: #fff;
}
.ws-progress__dot svg { width: 14px; height: 14px; }
.ws-progress__num { line-height: 1; }
.ws-progress__label { font-weight: 700; font-size: 0.82rem; }
.ws-progress__copy { display: grid; gap: 1px; }
.ws-progress__copy small { color: var(--muted); font-size: .56rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.ws-progress__step.is-done .ws-progress__dot { background: var(--green); border-color: var(--green); color: #fff; }
.ws-progress__step.is-done .ws-progress__label { color: var(--ink); }
.ws-progress__step.is-current .ws-progress__dot { border-color: var(--accent); color: var(--accent-strong); box-shadow: 0 0 0 4px var(--accent-soft); }
.ws-progress__step.is-current .ws-progress__label { color: var(--accent-strong); }
.ws-progress__step.is-todo .ws-progress__link { opacity: 0.65; }

/* ---------- Trip Readiness card (Phase 8) ---------- */

.readiness-card { display: grid; gap: 12px; margin-bottom: 16px; }
.day-readiness { display: grid; gap: 12px; margin: 0 0 16px; }
.day-readiness__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.day-readiness__head h3 { margin: 2px 0 0; }
.day-readiness__list { list-style: none; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 8px; margin: 0; padding: 0; }
.day-readiness__list li { display: flex; align-items: center; gap: 7px; padding: 9px 10px; border-radius: 10px; background: var(--surface-2); font-size: .84rem; font-weight: 700; }
.day-readiness__list svg { width: 17px; height: 17px; flex: none; }
.day-readiness__list .is-complete { color: var(--green); background: var(--green-soft); }
@media (max-width: 700px) { .day-readiness__list { grid-template-columns: 1fr 1fr; } .day-readiness__head { align-items: flex-start; } }
.ws-active-trip {
  width: min(1180px, calc(100% - 32px)); margin: 12px auto 0; padding: 10px 14px;
  border: 1px solid var(--line); border-radius: 12px; background: var(--card); color: var(--ink);
  box-shadow: var(--shadow-sm); font-size: .9rem;
}
.readiness-card__top { display: flex; align-items: center; gap: 16px; }
.readiness-meter {
  flex: none;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--accent-soft);
  border: 3px solid var(--accent);
  color: var(--accent-strong);
}
.readiness-card.is-ready .readiness-meter { background: var(--green-soft); border-color: var(--green); color: var(--green); }
.readiness-card.is-start .readiness-meter { background: var(--surface-2); border-color: var(--line); color: var(--muted); }
.readiness-meter__num { font: 800 1.25rem/1 var(--font-body); }
.readiness-meter__num small { font-size: 0.7rem; font-weight: 700; }
.readiness-card__lead { min-width: 0; }
.readiness-card__lead h3 { margin: 2px 0 8px; font: 800 1.15rem/1.1 var(--font-display); }
.readiness-card__bar { height: 10px; }
.readiness-card.is-ready .readiness-card__bar i { background: var(--green); }
.readiness-card__cta { justify-self: start; }
.readiness-card__done { margin: 0; display: inline-flex; align-items: center; gap: 8px; color: var(--green); font-weight: 700; }
.readiness-card__done svg { width: 18px; height: 18px; }
.readiness-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.readiness-list__item a {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  text-decoration: none;
  color: var(--ink);
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-2);
  transition: border-color 140ms ease;
  font-size: 0.9rem;
}
.readiness-list__item a:hover { border-color: var(--accent-glow); }
.readiness-list__dot { flex: none; display: inline-flex; color: var(--accent); }
.readiness-list__dot svg { width: 16px; height: 16px; margin-top: 1px; }
.readiness-list__item.is-partly .readiness-list__dot { color: var(--amber); }
.readiness-all { border-top: 1px solid var(--line); padding-top: 8px; }
.readiness-all > summary { cursor: pointer; font-weight: 700; font-size: 0.86rem; color: var(--muted); }
.readiness-all__list { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 4px; }
.readiness-all__list li { display: flex; align-items: center; gap: 10px; font-size: 0.86rem; padding: 4px 0; }
.readiness-all__icon { flex: none; display: inline-flex; }
.readiness-all__icon svg { width: 16px; height: 16px; }
.readiness-all__list li.is-complete .readiness-all__icon { color: var(--green); }
.readiness-all__list li.is-partly .readiness-all__icon { color: var(--amber); }
.readiness-all__list li.is-incomplete .readiness-all__icon { color: var(--muted); }
.readiness-all__list li.is-not_required { opacity: 0.6; }
.readiness-all__label { flex: 1; min-width: 0; }
.readiness-all__state { color: var(--muted); font-weight: 700; font-size: 0.78rem; white-space: nowrap; }
.readiness-all__note { margin: 8px 0 0; color: var(--muted); font-size: 0.82rem; }

/* ---------- Main / layout ---------- */

.ws-main {
  flex: 1;
  width: min(1240px, 100% - 32px);
  margin-inline: auto;
  padding: 30px 0 70px;
}

.page-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 22px;
}

.page-head h2 { margin: 0 0 4px; font: 800 1.5rem/1.15 var(--font-display); }
.page-head p { margin: 0; color: var(--muted); font-size: 0.92rem; max-width: 560px; }
.page-head__actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  padding: 0 20px;
  border-radius: 11px;
  border: 0;
  font: 800 0.9rem/1 var(--font-body);
  cursor: pointer;
  text-decoration: none;
  transition: transform 150ms ease, box-shadow 150ms ease, background 150ms ease, border-color 150ms ease;
}

.btn svg { width: 16px; height: 16px; }
.btn:active { transform: translateY(1px); }
.btn--sm { min-height: 38px; padding: 0 14px; font-size: 0.8rem; border-radius: 9px; }
.btn--xs { min-height: 32px; padding: 0 11px; font-size: 0.74rem; border-radius: 8px; }

.btn--primary { background: var(--accent); color: #fff; box-shadow: 0 4px 16px var(--accent-glow); }
.btn--primary:hover { background: var(--accent-strong); transform: translateY(-1px); }

.btn--soft { background: var(--accent-soft); color: var(--accent); }
.btn--soft:hover { background: var(--accent); color: #fff; }

.btn--ghost { background: transparent; color: var(--ink); border: 1.5px solid var(--line); }
.btn--ghost:hover { border-color: var(--accent); color: var(--accent); }

.btn--danger { background: var(--red-soft); color: var(--red); }
.btn--danger:hover { background: var(--red); color: #fff; }

.btn--outline { background: rgba(255,255,255,.06); color: #fff; border: 1.5px solid rgba(255,255,255,.4); }
.btn--outline:hover { background: rgba(255,255,255,.15); }

.btn[disabled] { opacity: 0.5; cursor: not-allowed; }

/* ---------- Cards / panels ---------- */

.panel {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  padding: 22px;
}

.panel > h3:first-child { margin-top: 0; }

.panel h3 { font-size: 1.05rem; font-weight: 800; margin: 0 0 12px; }

.card-grid { display: grid; gap: 14px; }
.card-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.card-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.card-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.glass-panel {
  background: rgba(16, 30, 56, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(12px);
  border-radius: var(--radius);
  color: #fff;
  padding: 18px;
}

/* ---------- Badges / status ---------- */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: 999px;
  font: 800 0.7rem/1 var(--font-body);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.badge.is-blue { background: var(--accent-soft); color: var(--accent); }
.badge.is-green { background: var(--green-soft); color: var(--green); }
.badge.is-red { background: var(--red-soft); color: var(--red); }
.badge.is-amber { background: var(--amber-soft); color: var(--amber); }
.badge.is-purple { background: var(--purple-soft); color: var(--purple); }
.badge.is-muted { background: #edf1f8; color: var(--muted); }

/* status → badge colours */
.badge[data-status="Suggested"] { background: #edf1f8; color: var(--muted); }
.badge[data-status="Shortlisted"] { background: var(--amber-soft); color: var(--amber); }
.badge[data-status="Approved"] { background: var(--green-soft); color: var(--green); }
.badge[data-status="Rejected"] { background: var(--red-soft); color: var(--red); }
.badge[data-status="Added to Plan"] { background: var(--purple-soft); color: var(--purple); }

/* ---------- Avatars ---------- */

.avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: inline-grid;
  place-items: center;
  color: #fff;
  font: 900 0.72rem/1 var(--font-body);
  border: 2px solid rgba(255, 255, 255, 0.9);
  flex: 0 0 auto;
}

.avatar--more { background: var(--navy-800); }
.avatar--self { border-color: rgba(255, 255, 255, 0.4); }

.avatar-stack { display: flex; }
.avatar-stack .avatar { margin-left: -10px; }
.avatar-stack .avatar:first-child { margin-left: 0; }

/* ---------- Forms ---------- */

.field { display: grid; gap: 6px; }

.field > span,
.field > label > span {
  font: 800 0.78rem/1 var(--font-body);
  color: var(--muted);
}

.field input,
.field select,
.field textarea {
  min-height: 46px;
  border: 1.5px solid var(--line);
  border-radius: 11px;
  padding: 10px 13px;
  font: 600 0.92rem/1.4 var(--font-body);
  color: var(--ink);
  background: #fff;
  width: 100%;
  transition: border-color 140ms ease;
}

.field textarea { min-height: 90px; resize: vertical; }

.field input:focus,
.field select:focus,
.field textarea:focus { border-color: var(--accent); outline: none; }

.field-row { display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); }

.field-error { color: var(--red); font-size: 0.8rem; font-weight: 700; min-height: 16px; margin: 0; }
.trip-type-choice { border: 0; padding: 0; margin: 0; min-width: 0; }
.trip-type-choice legend { padding: 0; margin-bottom: 9px; font-size: 0.8rem; font-weight: 800; line-height: 1.2; color: var(--muted); }
.trip-type-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.trip-type-card { position: relative; display: grid; grid-template-columns: 22px minmax(0, 1fr); align-items: start; gap: 10px; min-height: 84px; padding: 13px; border: 1px solid var(--line); border-radius: 13px; background: var(--card); cursor: pointer; }
.trip-type-card:hover { border-color: #94a3b8; }
.trip-type-card:has(input:checked) { border: 2px solid var(--accent); padding: 12px; box-shadow: 0 0 0 2px var(--accent-soft); }
.trip-type-card input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--accent); }
.trip-type-card input:focus-visible { outline: 3px solid var(--accent-bright); outline-offset: 3px; }
.trip-type-card__copy { display: grid; gap: 4px; min-width: 0; }
.trip-type-card__copy strong { color: var(--ink); font-size: 0.9rem; line-height: 1.2; }
.trip-type-card__copy small { color: var(--muted); font-size: 0.76rem; line-height: 1.35; }
.trip-type-card__selected { display: none; grid-column: 2; align-items: center; gap: 4px; color: var(--ink); font-size: 0.7rem; font-weight: 900; text-transform: uppercase; letter-spacing: 0.04em; }
.trip-type-card__tick { font-size: 1rem; line-height: 0.8; }
.trip-type-card input:checked ~ .trip-type-card__selected { display: inline-flex; }
.trip-type-choice.is-invalid .trip-type-options { outline: 2px solid var(--red); outline-offset: 3px; border-radius: 13px; }
.trip-type-error { min-height: 18px; margin: 5px 0 0; color: var(--red); font-size: 0.8rem; font-weight: 800; }

.form-status { font-weight: 800; font-size: 0.88rem; min-height: 20px; margin: 8px 0 0; }
.form-status.is-error { color: var(--red); }
.form-status.is-ok { color: var(--green); }
.btn.is-api-busy,
button.is-api-busy { position: relative; cursor: wait; opacity: .78; }
.btn.is-api-busy::after,
button.is-api-busy::after { content: ""; display: inline-block; width: .75em; height: .75em; margin-left: .55em; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; vertical-align: -.08em; animation: trips-api-turn .7s linear infinite; }
@keyframes trips-api-turn { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .btn.is-api-busy::after, button.is-api-busy::after { animation-duration: 1.8s; } }

.check-row { display: flex; align-items: center; gap: 9px; font-weight: 650; font-size: 0.9rem; cursor: pointer; }
.check-row input { width: 18px; height: 18px; accent-color: var(--accent); }

/* ---------- Filters / tabs / toolbar ---------- */

.toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
}

.toolbar input[type="search"],
.toolbar select {
  min-height: 44px;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  padding: 0 16px;
  font: 650 0.88rem/1 var(--font-body);
  background: #fff;
  color: var(--ink);
}

.toolbar input[type="search"] { flex: 1; min-width: min(170px, 100%); }
/* Without this a control refuses to shrink below its longest option, which is
   what pushed the Ideas toolbar 71px past a 320px screen. */
.toolbar > * { min-width: 0; max-width: 100%; }
.toolbar select { text-overflow: ellipsis; }

.tabs {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
  margin-bottom: 18px;
  padding-bottom: 2px;
}

.tabs::-webkit-scrollbar { display: none; }

.tab {
  flex: 0 0 auto;
  min-height: 40px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1.5px solid var(--line);
  background: #fff;
  color: var(--muted);
  font: 750 0.84rem/1 var(--font-body);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  transition: all 140ms ease;
}

.tab:hover { border-color: var(--accent); color: var(--accent); }
.tab.is-active { background: var(--accent); border-color: var(--accent); color: #fff; }
.tab .count { font-size: 0.72rem; opacity: 0.8; }

/* ---------- Empty / loading states ---------- */

.empty-state {
  text-align: center;
  padding: 54px 22px;
  border: 2px dashed var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.6);
}

.empty-state__icon {
  width: 60px;
  height: 60px;
  margin: 0 auto 14px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  display: grid;
  place-items: center;
}

.empty-state__icon svg { width: 28px; height: 28px; }
.empty-state h3 { margin: 0 0 6px; font-size: 1.15rem; }
.empty-state p { margin: 0 auto 18px; color: var(--muted); max-width: 380px; font-size: 0.9rem; line-height: 1.5; }
.empty-state__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }

.loading-state { display: grid; gap: 10px; }

.skeleton {
  border-radius: 12px;
  min-height: 68px;
  background: linear-gradient(100deg, #eef2f9 30%, #f7fafd 48%, #eef2f9 64%);
  background-size: 220% 100%;
  animation: skeletonShift 1.2s ease-in-out infinite;
}

@keyframes skeletonShift {
  from { background-position: 120% 0; }
  to { background-position: -120% 0; }
}
@media (prefers-reduced-motion: reduce) { .skeleton { animation: none; } }

/* ---------- Alerts / warnings ---------- */

.alert {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 13px 15px;
  border-radius: 12px;
  font-size: 0.87rem;
  font-weight: 650;
  line-height: 1.45;
  margin-bottom: 12px;
}

.alert svg { width: 17px; height: 17px; margin-top: 1px; }
.alert.is-warning { background: var(--amber-soft); color: #92400e; }
.alert.is-error { background: var(--red-soft); color: var(--red); }
.alert.is-ok { background: var(--green-soft); color: var(--green); }
.alert.is-info { background: var(--accent-soft); color: var(--accent-strong); }

/* ---------- Progress ---------- */

.progress {
  height: 9px;
  border-radius: 99px;
  background: #e8edf6;
  overflow: hidden;
}

.progress i {
  display: block;
  height: 100%;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--accent-bright), var(--accent-strong));
  transition: width 700ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* ---------- Modal / drawer ---------- */

.ui-modal-backdrop {
  position: fixed;
  z-index: 90;
  inset: 0;
  background: rgba(5, 10, 22, 0.68);
  backdrop-filter: blur(4px);
}

.ui-modal {
  position: fixed;
  z-index: 95;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(620px, calc(100vw - 28px));
  max-height: 88svh;
  overflow-y: auto;
  border-radius: 18px;
  background: var(--card);
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.4);
  padding: 26px;
}

.ui-modal h3 { margin: 0 0 16px; font: 800 1.3rem/1.15 var(--font-display); padding-right: 40px; }

.ui-modal__close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 0;
  background: #eef2f9;
  color: var(--ink);
  font-size: 1.15rem;
  cursor: pointer;
}

.ui-modal form { display: grid; gap: 14px; }
.ui-modal .modal-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 6px; }

@media (max-width: 640px) {
  .ui-modal {
    left: 0;
    top: auto;
    bottom: 0;
    transform: none;
    width: 100%;
    border-radius: 18px 18px 0 0;
    max-height: 92svh;
  }
}

/* ---------- Toasts ---------- */

.ui-toast {
  position: fixed;
  z-index: 99;
  left: 50%;
  bottom: 20px;
  transform: translate(-50%, 16px);
  background: var(--navy-900);
  color: #fff;
  border-radius: 12px;
  padding: 12px 20px;
  font: 700 0.88rem/1.3 var(--font-body);
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease, transform 200ms ease;
  max-width: calc(100vw - 32px);
}

.ui-toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

/* display:flex would otherwise override the browser's built-in
   [hidden] { display: none } and pin the toast on screen permanently. */
.update-toast[hidden] { display: none; }

.update-toast {
  position: fixed;
  z-index: 98;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--navy-900);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 13px;
  padding: 11px 16px;
  font-size: 0.88rem;
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.4);
}

.update-toast button {
  min-height: 36px;
  padding: 0 14px;
  border-radius: 9px;
  border: 0;
  background: var(--accent);
  color: #fff;
  font-weight: 800;
  cursor: pointer;
}

/* ---------- Trip cards (My Trips) ---------- */

.trip-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  display: flex;
  flex-direction: column;
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.trip-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }

.trip-card__cover {
  height: 140px;
  background: linear-gradient(120deg, var(--navy-900), var(--navy-800));
  background-size: cover;
  background-position: center;
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 12px;
}

.trip-card__cover .badge { backdrop-filter: blur(4px); }

.trip-card__body { padding: 16px; display: grid; gap: 9px; flex: 1; }
.trip-card__body h3 { margin: 0; font-size: 1.08rem; font-weight: 800; }

.trip-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 14px;
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 650;
}

.trip-card__meta span { display: inline-flex; align-items: center; gap: 5px; }
.trip-card__meta svg { width: 13px; height: 13px; }

.trip-card__footer {
  display: flex;
  gap: 8px;
  padding: 0 16px 16px;
}

.trip-card__footer .btn:first-child { flex: 1; }

/* ---------- Stat tiles (Overview) ---------- */

.stat-tile {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 16px;
  display: grid;
  gap: 4px;
}

.stat-tile span { font: 800 0.7rem/1.2 var(--font-body); text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }
.stat-tile strong { font-size: 1.45rem; font-weight: 900; color: var(--ink); }
.stat-tile small { color: var(--muted); font-size: 0.76rem; }

.quick-actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* ---------- Place cards ---------- */

.place-row {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 15px 16px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: start;
  transition: box-shadow 160ms ease;
}

.place-row:hover { box-shadow: var(--shadow-soft); }

.place-row__main h4 { margin: 0 0 4px; font-size: 1rem; font-weight: 800; }
.place-row__main p { margin: 0 0 6px; color: var(--muted); font-size: 0.85rem; line-height: 1.45; }

.place-row__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 650;
}

.place-row__facts span { display: inline-flex; align-items: center; gap: 5px; }
.place-row__facts svg { width: 13px; height: 13px; }

.place-row__side { display: grid; gap: 8px; justify-items: end; }
.place-row__actions { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }

/* Vote widgets */

.vote-bar { display: flex; align-items: center; gap: 8px; font-size: 0.78rem; font-weight: 800; }
.vote-bar .progress { flex: 1; min-width: 90px; }

.vote-buttons { display: flex; gap: 6px; }

.vote-btn {
  min-height: 38px;
  padding: 0 14px;
  border-radius: 9px;
  border: 1.5px solid var(--line);
  background: #fff;
  font: 800 0.8rem/1 var(--font-body);
  cursor: pointer;
  color: var(--muted);
  transition: all 140ms ease;
}

.vote-btn:hover { border-color: currentColor; }
.vote-btn.is-yes.is-active, .vote-btn.is-yes:hover { background: var(--green-soft); color: var(--green); border-color: var(--green); }
.vote-btn.is-maybe.is-active, .vote-btn.is-maybe:hover { background: var(--amber-soft); color: var(--amber); border-color: var(--amber); }
.vote-btn.is-no.is-active, .vote-btn.is-no:hover { background: var(--red-soft); color: var(--red); border-color: var(--red); }

/* ---------- Plan / itinerary ---------- */

.day-tabs { margin-bottom: 16px; }

.ui-toast__undo {
  margin-left: 12px;
  border: 1px solid rgba(255,255,255,.65);
  border-radius: 999px;
  padding: 5px 10px;
  color: #fff;
  background: transparent;
  font: 800 .78rem/1 var(--font-body);
  cursor: pointer;
}

/* Four children — grip, time, main, actions — so the grid needs four columns.
   With three, the actions wrapped onto their own row and left a dead band
   down the middle of every card. */
.plan-item {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 13px;
  padding: 12px 14px;
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto;
  gap: 6px 14px;
  align-items: start;
  transition: box-shadow 150ms ease, border-color 150ms ease;
}

.plan-item.is-dragging { opacity: 0.5; border-style: dashed; }
.plan-item.is-dragover { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }

.plan-item__grip {
  cursor: grab;
  color: var(--muted);
  padding: 4px 2px;
  border: 0;
  background: none;
  font-size: 1rem;
  line-height: 0.5;
  letter-spacing: 2px;
  align-self: center;
}

.plan-item__time {
  display: flex;
  flex-direction: column;
  font: 900 0.85rem/1.35 var(--font-body);
  color: var(--accent);
  min-width: 52px;
  padding-top: 2px;
}
.plan-item__time small { color: var(--muted); font-weight: 700; font-size: 0.72rem; }

.plan-item__main { display: grid; gap: 5px; min-width: 0; }
.plan-item__main h4 { margin: 0; font-size: 0.98rem; font-weight: 800; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; line-height: 1.3; }
.plan-item__main small { color: var(--muted); font-size: 0.78rem; font-weight: 650; }
/* Facts (duration, travel, address) sit quietly under the name. */
.plan-item__main .place-row__facts { gap: 6px 12px; font-size: 0.78rem; }

.plan-item__type {
  font-size: 0.64rem;
  font-weight: 900;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 99px;
  background: var(--accent-soft);
  color: var(--accent);
}

.plan-item__side { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }

.plan-list { display: grid; gap: 9px; }

/* Status badges kept together rather than scattered through the card. */
.place-state-badges { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 0; }

.plan-warning-list { display: grid; gap: 8px; margin-bottom: 16px; }

/* ---------- Journey legs ---------- */

.journey-leg {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 16px;
  display: grid;
  gap: 10px;
}

.journey-leg__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
}

.journey-leg__head strong { font-size: 0.98rem; }

.journey-leg__mode {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  font: 800 0.74rem/1 var(--font-body);
}

.journey-leg__mode svg { width: 14px; height: 14px; }

.journey-leg__facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(140px, 100%), 1fr));
  gap: 8px;
}

.journey-leg__facts div {
  background: var(--cloud);
  border-radius: 10px;
  padding: 8px 11px;
  font-size: 0.8rem;
}

.journey-leg__facts span { display: block; font-size: 0.64rem; font-weight: 900; text-transform: uppercase; color: var(--muted); }

.journey-leg__source { font-size: 0.72rem; color: var(--muted); font-style: italic; }

/* ---------- Map ---------- */

.map-shell {
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-soft);
}

#tripMap { height: min(62svh, 560px); }

.map-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  padding: 13px 16px;
  background: var(--card);
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--muted);
}

.map-legend span { display: inline-flex; align-items: center; gap: 7px; }

.map-legend i {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

/* ---------- Checklist ---------- */

.check-item {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 14px;
}

.check-item input[type="checkbox"] { width: 20px; height: 20px; accent-color: var(--accent); cursor: pointer; }
.check-item.is-done .check-item__title { text-decoration: line-through; opacity: 0.55; }
.check-item__main { flex: 1; min-width: 0; }
.check-item__title { font-weight: 750; font-size: 0.92rem; }
.check-item__meta { display: flex; flex-wrap: wrap; gap: 4px 12px; color: var(--muted); font-size: 0.74rem; font-weight: 650; margin-top: 2px; }

/* ---------- Notes ---------- */

.note-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 13px;
  padding: 15px;
  display: grid;
  gap: 8px;
}

.note-card__head { display: flex; align-items: center; gap: 10px; }
.note-card__head strong { font-size: 0.86rem; }
.note-card__head time { color: var(--muted); font-size: 0.74rem; margin-left: auto; }
.note-card p { margin: 0; font-size: 0.9rem; line-height: 1.55; white-space: pre-wrap; }

/* ---------- Members ---------- */

.member-row {
  display: flex;
  align-items: center;
  gap: 13px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 13px;
  padding: 13px 15px;
}

.member-row__main { flex: 1; }
.member-row__main strong { display: block; font-size: 0.95rem; }
.member-row__main small { color: var(--muted); font-size: 0.76rem; }
.member-row select { min-height: 38px; border-radius: 9px; border: 1.5px solid var(--line); padding: 0 10px; font-weight: 700; font-size: 0.82rem; }
.guest-invite-result { display:grid; gap:10px; margin-top:14px; padding:14px; border:1px solid var(--line); border-radius:14px; background:var(--cloud); }
.guest-invite-result[hidden] { display:none; }
.guest-invite-result p { margin:0; font-size:.86rem; color:var(--muted); }
.guest-pin-display { display:block; font:900 clamp(1.8rem,8vw,2.6rem)/1 var(--font-body); letter-spacing:.18em; color:var(--accent-strong); }
.guest-invite-result code { padding:9px 10px; overflow-wrap:anywhere; border-radius:9px; background:var(--card); font-size:.76rem; }
.guest-invite-result__actions { display:flex; flex-wrap:wrap; gap:8px; }
.invite-role-form { display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.invite-role-form select { min-height:34px; }
.pin-guest-join { display:grid; gap:14px; max-width:360px; }
.pin-guest-join input { min-height:54px; text-align:center; font-size:1.35rem; font-weight:900; letter-spacing:.2em; }
@media(max-width:680px){
  body[data-page="members"] .member-row { align-items:flex-start; flex-wrap:wrap; }
  body[data-page="members"] .member-row__main { min-width:calc(100% - 58px); }
  body[data-page="members"] .member-row .place-row__actions { width:100%; }
  body[data-page="members"] .member-row .place-row__actions .btn { flex:1 1 125px; }
  .guest-invite-result__actions { display:grid; }
  .guest-invite-result__actions .btn { width:100%; }
}

/* ---------- Live trip weather ---------- */

.weather-plan-switch {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 16px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--card);
  box-shadow: var(--shadow-sm);
}
.weather-plan-switch__choices,
.weather-plan-switch__status { display: flex; align-items: center; gap: 8px; }
.weather-plan-switch__status { color: var(--muted); font-size: .8rem; }
.weather-replacement-note { margin: 6px 0 0; color: var(--green); font-size: .82rem; }
.weather-replacement-note.is-warning { color: var(--amber); }

.live-transport-panel { display: grid; gap: 12px; margin-bottom: 16px; }
.live-transport-panel.is-unavailable { border-color: color-mix(in srgb,var(--amber) 45%,var(--line)); }
.live-transport-panel__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.live-transport-panel__head h3 { margin: 2px 0 0; }
.live-transport-counts { display: flex; flex-wrap: wrap; gap: 8px; }
.live-transport-counts span { padding: 7px 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--soft); color: var(--muted); font-size: .8rem; }
.live-transport-counts strong { color: var(--ink); }
.live-transport-notices summary { cursor: pointer; color: var(--link); font-weight: 700; font-size: .85rem; }
.live-transport-notices__list { display: grid; gap: 8px; margin-top: 10px; }
.live-transport-notices__list article { padding: 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--soft); }
.live-transport-notices__list p { margin: 4px 0; color: var(--muted); font-size: .82rem; }
.live-transport-notices__list a { font-size: .78rem; font-weight: 700; }
.journey-transit-steps { margin-top: 10px; padding: 10px; border-radius: 12px; background: var(--soft); }
.journey-transit-steps p { margin: 0 0 6px; font-size: .8rem; }
.journey-transit-steps ol { display: grid; gap: 7px; margin: 0; padding-left: 20px; }
.journey-transit-steps li { font-size: .82rem; }
.journey-transit-steps li span { display: block; color: var(--muted); margin-top: 2px; }
.journey-live-alert { display: grid; gap: 8px; margin-top: 10px; padding: 11px; border: 1px solid color-mix(in srgb,var(--amber) 55%,var(--line)); border-radius: 12px; background: color-mix(in srgb,var(--amber) 8%,var(--card)); }
.journey-live-alert__notice p { margin: 3px 0 0; color: var(--muted); font-size: .8rem; }
.journey-live-alternative { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; padding-top: 8px; border-top: 1px solid var(--line); font-size: .82rem; }
.journey-live-alternative p { flex-basis: 100%; margin: 0; color: var(--muted); }
.journey-live-alternative .btn { margin-left: auto; }

@media (max-width: 720px) {
  .weather-plan-switch { align-items: stretch; flex-direction: column; }
  .weather-plan-switch__choices { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
  .weather-plan-switch__choices .btn { justify-content: center; }
  .weather-plan-switch__status { align-items: stretch; flex-direction: column; }
  .live-transport-panel__head { align-items: flex-start; flex-direction: column; }
  .live-transport-counts { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
  .live-transport-counts span { border-radius: 10px; }
  .journey-live-alternative { align-items: stretch; flex-direction: column; }
  .journey-live-alternative .btn { margin-left: 0; width: 100%; justify-content: center; }
}

.weather-tile {
  display: flex;
  align-items: center;
  gap: 13px;
  background: linear-gradient(120deg, var(--navy-900), var(--navy-800));
  color: #fff;
  border-radius: 14px;
  padding: 16px;
}

.weather-tile svg { width: 30px; height: 30px; opacity: 0.85; }
.weather-tile strong { display: block; font-size: 0.95rem; }
.weather-tile small { color: rgba(255, 255, 255, 0.65); font-size: 0.78rem; }
.weather-tile--live { display: grid; align-items: stretch; gap: 15px; overflow: hidden; }
.weather-tile__head { display: flex; align-items: center; gap: 12px; }
.weather-tile__icon { display: grid; flex: 0 0 auto; place-items: center; width: 44px; height: 44px; border-radius: 13px; background: rgba(255,255,255,.1); }
.weather-tile__icon svg { width: 25px; height: 25px; color: #fbbf24; }
.weather-unavailable { display: grid; gap: 4px; padding: 13px; border: 1px solid rgba(255,255,255,.13); border-radius: 12px; background: rgba(255,255,255,.06); }
.weather-current { display: grid; grid-template-columns: minmax(min(100px, 100%),.75fr) minmax(min(190px, 100%),1.25fr); gap: 12px; }
.weather-current__summary { display: grid; align-content: center; padding: 13px; border-radius: 12px; background: rgba(255,255,255,.09); }
.weather-current__summary > span { color: rgba(255,255,255,.65); font-size: .7rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.weather-current__summary > strong { font-size: 1.8rem; line-height: 1.1; }
.weather-facts { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 7px; margin: 0; }
.weather-facts div { display: grid; align-content: center; min-width: 0; padding: 10px 8px; border: 1px solid rgba(255,255,255,.1); border-radius: 11px; background: rgba(255,255,255,.05); }
.weather-facts dt { color: rgba(255,255,255,.6); font-size: .66rem; }
.weather-facts dd { margin: 2px 0 0; font-size: .78rem; font-weight: 800; overflow-wrap: anywhere; }
.weather-trip-forecast { display: grid; gap: 8px; }
.weather-days { display: flex; gap: 8px; padding-bottom: 4px; overflow-x: auto; overscroll-behavior-inline: contain; scrollbar-width: thin; }
.weather-day { display: grid; flex: 0 0 126px; gap: 3px; padding: 10px; border: 1px solid rgba(255,255,255,.12); border-radius: 11px; background: rgba(255,255,255,.06); }
.weather-day > span { min-height: 30px; color: rgba(255,255,255,.82); font-size: .72rem; }
.weather-trip-forecast__note { display: block; line-height: 1.45; }
.weather-attribution { display: block; padding-top: 4px; border-top: 1px solid rgba(255,255,255,.1); }
.weather-attribution a { color: #bfdbfe; font-weight: 750; }

@media (max-width: 520px) {
  .weather-current { grid-template-columns: 1fr; }
  .weather-facts { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .weather-facts div { padding: 9px 6px; }
}

/* ---------- Responsive ---------- */

@media (max-width: 1000px) {
  .card-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .card-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 680px) {
  .ws-topbar__nav { display: none; }
  .ws-topbar__side .theme-switch { display: none; }
  .card-grid--2, .card-grid--3, .card-grid--4 { grid-template-columns: 1fr; }
  .field-row { grid-template-columns: 1fr; }
  .trip-type-options { grid-template-columns: 1fr; }
  .trip-type-card { min-height: 68px; }
  .place-row { grid-template-columns: 1fr; }
  .place-row__side { justify-items: start; }
  .place-row__actions { justify-content: flex-start; }
  /* Mobile: time and title on one row, actions on their own full-width row. */
  .plan-item { grid-template-columns: auto auto minmax(0, 1fr); }
  .plan-item__side { grid-column: 1 / -1; justify-content: flex-start; flex-wrap: wrap; }
  .ws-hero__inner { padding: 24px 0 16px; }
  .page-head__actions { width: 100%; }
  .page-head__actions .btn { flex: 1; }
  /* Compact guided band: big next-action button, then a slim dot progress. */
  .ws-flow__inner { flex-direction: column; align-items: stretch; gap: 10px; padding: 10px 0 12px; }
  .ws-flow__choice,
  .ws-flow__next { width: 100%; }
  .ws-flow__next { justify-content: space-between; }
  .ws-progress { padding-bottom: 0; }
  .ws-progress__label { font-size: .7rem; }
  .ws-progress__copy small { font-size: .5rem; }
  /* Five journey tabs have to fit a 320px phone without a horizontal scroll,
     so the icon sits above the word rather than beside it. */
  .ws-nav__scroll { overflow-x: visible; }
  .ws-nav__scroll .ws-nav__link {
    flex-direction: column;
    gap: 3px;
    padding: 8px 2px;
    font-size: .64rem;
    letter-spacing: 0;
  }
  .ws-tools__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ============================================================
   Create Trip — premium onboarding page
   ============================================================ */

.create-hero {
  background:
    radial-gradient(90% 140% at 85% -20%, var(--accent-glow), transparent 60%),
    linear-gradient(120deg, var(--navy-950), var(--navy-800));
  color: #fff;
  border-radius: var(--radius);
  padding: clamp(28px, 5vw, 52px) clamp(20px, 4vw, 48px);
  margin-bottom: 22px;
  position: relative;
  overflow: hidden;
}
.create-hero p.eyebrow {
  margin: 0 0 10px;
  font: 800 0.78rem/1 var(--font-body);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-bright);
}
.create-hero h2 {
  margin: 0 0 10px;
  font: 800 clamp(1.7rem, 4.5vw, 2.6rem)/1.12 var(--font-display);
}
.create-hero > p:not(.eyebrow) {
  margin: 0;
  max-width: 56ch;
  color: rgba(235, 242, 252, 0.85);
  font-size: 0.98rem;
  line-height: 1.55;
}

.create-steps {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 22px;
}
.create-steps span {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 8px 14px 8px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.07);
  font: 700 0.82rem/1 var(--font-body);
  color: rgba(235, 242, 252, 0.75);
}
.create-steps span i {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  font-style: normal;
  font-size: 0.75rem;
}
.create-steps span.is-current {
  border-color: var(--accent-bright);
  background: var(--accent-soft);
  color: #fff;
}
.create-steps span.is-current i { background: var(--accent); color: #fff; }

.create-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}
@media (max-width: 900px) {
  .create-layout { grid-template-columns: 1fr; }
}

.create-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lift);
  padding: clamp(18px, 3vw, 30px);
  display: grid;
  gap: 18px;
}
.create-card h3 {
  margin: 0;
  font: 800 1.05rem/1.2 var(--font-body);
}
.create-card .form-section {
  display: grid;
  gap: 12px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.create-card .form-section:first-of-type { border-top: 0; padding-top: 0; }
.create-card .form-section > h4 {
  margin: 0;
  font: 800 0.8rem/1 var(--font-body);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
}
.create-card .form-hint {
  margin: -4px 0 0;
  font-size: 0.82rem;
  color: var(--muted);
}

.create-side { display: grid; gap: 14px; align-content: start; }
.create-side .glass-panel {
  background: linear-gradient(140deg, var(--navy-900), var(--navy-800));
  border: 1px solid rgba(255, 255, 255, 0.12);
}
.create-side .glass-panel h3 { margin: 0 0 12px; font: 800 1rem/1.2 var(--font-body); }
.create-side-step {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 10px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.create-side-step:first-of-type { border-top: 0; padding-top: 0; }
.create-side-step i {
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 10px;
  background: var(--accent-soft);
  color: var(--accent-bright);
  font-style: normal;
  font-weight: 800;
  font-size: 0.82rem;
}
.create-side-step strong { display: block; font-size: 0.9rem; }
.create-side-step small {
  display: block;
  margin-top: 2px;
  color: rgba(235, 242, 252, 0.68);
  font-size: 0.8rem;
  line-height: 1.45;
}
.field-error{display:block;color:#b91c1c;font-size:.78rem;font-weight:700;margin-top:5px;min-height:1em}.field [aria-invalid="true"]{border-color:#dc2626;box-shadow:0 0 0 3px rgba(220,38,38,.12)}
.starter-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(240px, 100%),1fr));gap:10px}.starter-card{border:1px solid var(--border);border-radius:14px;padding:14px;background:var(--surface)}.starter-card>div:first-child{display:flex;justify-content:space-between;gap:8px;align-items:center}.starter-card p{margin:7px 0 12px;color:var(--muted);font-size:.82rem}

body[data-page="places"] .ws-main{max-width:1400px}
.places-hero{position:relative;overflow:hidden;display:flex;justify-content:space-between;align-items:flex-end;gap:24px;padding:34px;border-radius:24px;background:radial-gradient(circle at 88% 15%,rgba(96,165,250,.3),transparent 34%),linear-gradient(135deg,#07162c,#102f59 65%,#173f73);color:#fff;box-shadow:0 24px 60px rgba(7,22,44,.22);margin-bottom:16px}
[data-trip-theme="purple"] .places-hero{background:radial-gradient(circle at 88% 15%,rgba(196,181,253,.32),transparent 34%),linear-gradient(135deg,#17102f,#342367 65%,#4c2e83)}
.places-hero h2{font:800 clamp(2rem,5vw,3.6rem)/1 var(--font-display);margin:4px 0 10px}.places-hero p{max-width:680px;color:rgba(255,255,255,.78);margin:0}.places-hero .eyebrow{color:#93c5fd}.places-hero .page-head__actions{flex:none}.places-hero .btn--primary{background:#fff;color:#102f59;border-color:#fff;box-shadow:0 10px 28px rgba(0,0,0,.2)}
.places-stats{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}.places-stats span{display:grid;min-width:105px;padding:10px 14px;border:1px solid rgba(255,255,255,.17);border-radius:13px;background:rgba(255,255,255,.09);backdrop-filter:blur(8px);color:rgba(255,255,255,.72);font-size:.72rem;text-transform:uppercase;letter-spacing:.04em}.places-stats strong{color:#fff;font-size:1.22rem;letter-spacing:0}
.workflow-strip{display:flex;align-items:center;justify-content:center;gap:12px;overflow:auto;padding:12px 16px;margin-bottom:16px;border:1px solid var(--border);border-radius:16px;background:rgba(255,255,255,.75);box-shadow:var(--shadow-sm);font-size:.82rem;font-weight:800;white-space:nowrap}.workflow-strip span{padding:7px 12px;border-radius:999px;background:var(--surface-2);color:var(--muted)}.workflow-strip .is-current{background:var(--primary);color:#fff}.workflow-strip i{color:var(--muted);font-style:normal}
.places-toolbar{position:sticky;top:68px;z-index:8;padding:12px;border:1px solid var(--border);border-radius:17px;background:rgba(255,255,255,.9);backdrop-filter:blur(16px);box-shadow:var(--shadow-sm);margin-bottom:20px}.places-toolbar input{min-width:min(320px,100%);flex:1}
.starter-ideas{padding:24px;margin-bottom:22px;background:linear-gradient(145deg,rgba(239,246,255,.95),rgba(255,255,255,.95));box-shadow:0 18px 45px rgba(30,64,175,.08)}[data-trip-theme="purple"] .starter-ideas{background:linear-gradient(145deg,rgba(245,243,255,.95),rgba(255,255,255,.95))}.section-heading h3{font:800 1.55rem/1.1 var(--font-display);margin:2px 0 6px}.section-heading p{margin:0;color:var(--muted)}
.starter-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:18px}.starter-card{padding:0;overflow:hidden;border:0;border-radius:18px;background:#fff;box-shadow:0 10px 30px rgba(15,35,65,.1);transition:transform .2s ease,box-shadow .2s ease}.starter-card:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(15,35,65,.16)}.starter-card__visual{height:105px;display:grid;place-items:center;background:linear-gradient(135deg,#dbeafe,#93c5fd);color:#1d4ed8}.starter-card:nth-child(3n+2) .starter-card__visual{background:linear-gradient(135deg,#dcfce7,#86efac);color:#047857}.starter-card:nth-child(3n) .starter-card__visual{background:linear-gradient(135deg,#fef3c7,#fcd34d);color:#b45309}.starter-card__visual svg{width:38px;height:38px}.starter-card__body{padding:15px}.starter-card__title{display:flex;align-items:start;justify-content:space-between;gap:8px}.starter-card__title strong{font-size:1rem}.starter-card__body>small{display:block;color:var(--muted);margin:-5px 0 10px}.starter-card .place-row__actions{margin-top:12px}
.onboarding-actions{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:16px}
.places-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.places-card{display:grid;grid-template-columns:170px minmax(0,1fr);padding:0;overflow:hidden;border:0;border-radius:20px;background:var(--surface);box-shadow:0 12px 34px rgba(15,35,65,.1);transition:transform .2s ease,box-shadow .2s ease}.places-card:hover{transform:translateY(-3px);box-shadow:0 20px 45px rgba(15,35,65,.15)}.places-card__visual{min-height:220px;display:grid;place-items:center;align-content:center;gap:8px;background:linear-gradient(145deg,#dbeafe,#bfdbfe);color:#1d4ed8}.places-card:nth-child(4n+2) .places-card__visual{background:linear-gradient(145deg,#ede9fe,#c4b5fd);color:#6d28d9}.places-card__visual img{width:100%;height:100%;object-fit:cover}.places-card__visual svg{width:42px;height:42px}.places-card__visual small{font-weight:800;text-transform:uppercase;letter-spacing:.08em}.places-card__content{display:flex;flex-direction:column;padding:18px;min-width:0}.places-card .place-row__side{margin-top:auto;padding-top:14px}.places-card .place-row__actions{gap:7px}.places-card .btn{min-height:34px}.places-card h4{font:800 1.15rem/1.25 var(--font-body)}
/* The Add/Edit place dialog only. The shared Info drawer owns its own width,
   sticky title row, internal scrolling and 92svh/88svh phone and desktop caps. */
body[data-page="places"] .ui-modal:not(.place-info-modal){width:min(650px,calc(100vw - 24px));max-height:calc(100vh - 32px);overflow:auto;border-radius:22px;box-shadow:0 30px 80px rgba(5,20,45,.3)}body[data-page="places"] .ui-modal:not(.place-info-modal)>h3{font:800 1.5rem/1.1 var(--font-display)}body[data-page="places"] .ui-modal:not(.place-info-modal) details{background:var(--surface-2);border:1px solid var(--border)}
@media(max-width:1100px){.starter-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.places-grid{grid-template-columns:1fr}}
@media(max-width:700px){.places-hero{padding:24px 20px;align-items:stretch;flex-direction:column}.places-hero .page-head__actions,.places-hero .btn{width:100%}.places-stats{display:grid;grid-template-columns:1fr 1fr;width:100%}.places-stats span{min-width:0}.workflow-strip{justify-content:flex-start}.places-toolbar{position:static;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.places-toolbar input{grid-column:1/-1;min-width:0}.starter-ideas{padding:17px}.starter-grid{grid-template-columns:1fr}.places-card{grid-template-columns:1fr}.places-card__visual{min-height:145px}.places-card__content{padding:16px}.places-card .place-row__actions .btn{flex:1}.onboarding-actions{display:grid}.onboarding-actions .btn{width:100%}}

/* Image-led discovery cards. Fallbacks are local CSS artwork: no remote or private assets. */
.starter-card__visual,.places-card__visual{position:relative;isolation:isolate;overflow:hidden;background:#173f73;color:#fff}
.starter-card__visual{height:150px;align-content:center;gap:7px}.starter-card__visual>span,.visual-fallback>span{display:grid;place-items:center;width:58px;height:58px;border:1px solid rgba(255,255,255,.32);border-radius:50%;background:rgba(255,255,255,.14);backdrop-filter:blur(7px);z-index:1}.starter-card__visual svg,.visual-fallback svg{width:29px;height:29px}.starter-card__visual>small,.visual-fallback>small{z-index:1;color:#fff;font-size:.7rem;font-weight:900;letter-spacing:.11em;text-transform:uppercase;text-shadow:0 2px 9px rgba(0,0,0,.35)}
.visual-theme--historic{background:linear-gradient(180deg,#8da9bd 0 48%,#536b62 49% 100%)}.visual-theme--historic::before{content:"";position:absolute;left:19%;bottom:22%;width:62%;height:39%;background:linear-gradient(90deg,transparent 0 8%,#293c48 8% 24%,transparent 24% 31%,#293c48 31% 69%,transparent 69% 76%,#293c48 76% 92%,transparent 92%);clip-path:polygon(0 18%,10% 18%,10% 0,25% 0,25% 18%,42% 18%,42% 5%,58% 5%,58% 18%,75% 18%,75% 0,90% 0,90% 18%,100% 18%,100% 100%,0 100%)}
.visual-theme--nature{background:linear-gradient(180deg,#7cc4d5 0 52%,#4d8076 53% 64%,#234b54 65%)}.visual-theme--nature::before,.visual-theme--viewpoint::before{content:"";position:absolute;inset:25% -5% 0;background:linear-gradient(145deg,transparent 0 33%,#496a62 34% 50%,transparent 51%),linear-gradient(215deg,transparent 0 36%,#274e54 37% 57%,transparent 58%)}
.visual-theme--viewpoint{background:linear-gradient(180deg,#f2b77f 0,#889fba 48%,#334e62 49%)}.visual-theme--food{background:radial-gradient(circle at 30% 38%,#efc56c 0 8%,transparent 9%),radial-gradient(circle at 62% 50%,#a94336 0 10%,transparent 11%),radial-gradient(circle at 49% 40%,#6d8b45 0 13%,transparent 14%),linear-gradient(145deg,#7b4931,#35261f)}
.visual-theme--museum{background:repeating-linear-gradient(90deg,rgba(255,255,255,.12) 0 2px,transparent 2px 23%),linear-gradient(145deg,#b8a992,#4e5c69)}.visual-theme--museum::before{content:"";position:absolute;left:18%;right:18%;top:24%;bottom:22%;border:10px solid rgba(245,237,215,.68);box-shadow:inset 0 0 0 4px rgba(56,67,79,.55)}
.visual-theme--coast{background:linear-gradient(180deg,#65bad0 0 48%,#167d9b 49% 66%,#e9cc91 67%)}.visual-theme--road{background:linear-gradient(180deg,#79a9bd 0 54%,#60755d 55%)}.visual-theme--road::before{content:"";position:absolute;left:37%;right:37%;bottom:-10%;height:65%;background:#303940;clip-path:polygon(42% 0,58% 0,100% 100%,0 100%)}.visual-theme--road::after{content:"";position:absolute;left:49%;bottom:0;width:2%;height:42%;background:repeating-linear-gradient(#f6e9ad 0 12px,transparent 12px 23px)}
.visual-theme--city{background:linear-gradient(180deg,#7d9fc3 0 52%,#283c59 53%)}.visual-theme--city::before{content:"";position:absolute;inset:25% 5% 0;background:repeating-linear-gradient(90deg,#20334d 0 13%,transparent 13% 16%);clip-path:polygon(0 40%,15% 40%,15% 5%,30% 5%,30% 30%,48% 30%,48% 0,64% 0,64% 45%,80% 45%,80% 20%,100% 20%,100% 100%,0 100%)}
.visual-theme--journey{background:radial-gradient(circle at 76% 25%,rgba(255,255,255,.3) 0 9%,transparent 10%),linear-gradient(145deg,#5d9ec4,#354e73 56%,#263a4b)}.visual-horizon{position:absolute;inset:auto -10% -42% -10%;height:72%;border-radius:50% 50% 0 0;background:rgba(11,33,49,.38);z-index:0}
.places-card{display:block}.places-card__visual{height:255px;min-height:255px;display:block}.places-card__visual>img{position:absolute;inset:0;z-index:1;width:100%;height:100%;object-fit:cover;transition:transform .35s ease}.places-card:hover .places-card__visual>img{transform:scale(1.035)}.visual-fallback{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:7px}.places-card__overlay{position:absolute;z-index:2;inset:0;display:flex;flex-direction:column;justify-content:space-between;padding:16px;background:linear-gradient(180deg,rgba(5,16,31,.1) 30%,rgba(5,16,31,.88) 100%)}.places-card__overlay>div{display:flex;gap:6px;flex-wrap:wrap}.places-card__overlay h4{margin:0;color:#fff;font:800 1.4rem/1.15 var(--font-display);text-shadow:0 2px 14px rgba(0,0,0,.55)}.badge.is-light{background:rgba(255,255,255,.92);color:#17243a}.places-card.is-image-error img{display:none}.places-card__content{min-height:190px}
@media(max-width:700px){.starter-card__visual{height:175px}.places-card__visual{height:220px;min-height:220px}.places-card__overlay h4{font-size:1.3rem}}

.recommended-section{margin:26px 0 34px}.recommended-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:18px}.recommendation-card{overflow:hidden;border-radius:22px;background:var(--card);box-shadow:0 14px 38px rgba(13,31,63,.12);transition:transform .22s ease,box-shadow .22s ease}.recommendation-card:hover{transform:translateY(-4px);box-shadow:0 22px 48px rgba(13,31,63,.18)}.recommendation-card__image{position:relative;height:245px;overflow:hidden;background:#18283e}.recommendation-card__image img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease}.recommendation-card:hover img{transform:scale(1.035)}.recommendation-card__overlay{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between;padding:16px;background:linear-gradient(180deg,rgba(4,13,27,.12),rgba(4,13,27,.88))}.recommendation-card__overlay>div{display:flex;gap:6px;flex-wrap:wrap}.recommendation-card__overlay h4{margin:0;color:#fff;font:800 1.45rem/1.12 var(--font-display);text-shadow:0 3px 16px rgba(0,0,0,.55)}.recommendation-card__body{padding:17px}.recommendation-card__body>p{min-height:43px;margin:0 0 12px;color:var(--muted);font-size:.88rem;line-height:1.5}.recommendation-card__actions{display:flex;gap:7px;flex-wrap:wrap;margin-top:15px}.recommendation-card__actions .btn{flex:1;min-width:96px}.added-heading{margin:8px 0 16px}.places-card__visual{background:#14243a}.places-card__visual img{visibility:visible!important}
@media(max-width:1080px){.recommended-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:680px){.recommended-grid{grid-template-columns:1fr}.recommendation-card__image{height:225px}.recommendation-card__actions{display:grid;grid-template-columns:1fr 1fr}.recommendation-card__actions .btn:first-child{grid-column:1/-1}}

/* Clear, persistent workflow states for destination and trip place cards. */
.place-state-badges { display:flex; flex-wrap:wrap; gap:6px; margin-top:12px; min-height:22px; }
.badge.is-favourite { background:#fee2e2; color:#be123c; }
.favourite-btn.is-active { background:#fee2e2; border-color:#fb7185; color:#be123c; box-shadow:0 0 0 2px rgba(244,63,94,.12); }
.recommendation-card.is-added { box-shadow:0 0 0 2px rgba(5,150,105,.35),0 14px 38px rgba(13,31,63,.12); }
.recommendation-card.is-favourited { background:linear-gradient(180deg,var(--card),#fff7f8); }
.recommendation-card .btn:disabled { cursor:default; opacity:.78; }
.vote-btn.is-active { box-shadow:0 0 0 3px rgba(37,99,235,.12); transform:translateY(-1px); }
.vote-btn.is-active::before { content:"✓ "; }

.plan-ready-panel{display:grid;grid-template-columns:minmax(min(220px, 100%),1.2fr) minmax(min(300px, 100%),1fr);gap:22px;padding:24px;margin-bottom:22px;border:1px solid var(--line);border-radius:22px;background:linear-gradient(135deg,#fff,#eff6ff);box-shadow:var(--shadow-soft)}[data-trip-theme="purple"] .plan-ready-panel{background:linear-gradient(135deg,#fff,#f5f3ff)}.plan-ready-panel h3{font:800 1.5rem/1.15 var(--font-display);margin:3px 0 7px}.plan-ready-panel p{margin:0;color:var(--muted)}.plan-ready-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.plan-ready-stats span{display:grid;padding:11px;border:1px solid var(--line);border-radius:13px;background:rgba(255,255,255,.8);font-size:.72rem;color:var(--muted)}.plan-ready-stats strong{font-size:1.15rem;color:var(--ink)}.plan-ready-actions{grid-column:1/-1;display:flex;gap:8px;flex-wrap:wrap}.plan-day-head{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:18px 4px 12px}.plan-day-head h3{margin:2px 0}.plan-day-meta{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap}.plan-day-meta>span{padding:7px 10px;border-radius:999px;background:var(--card);border:1px solid var(--line);font-size:.77rem;font-weight:700;color:var(--muted)}
@media(max-width:760px){.plan-ready-panel{grid-template-columns:1fr;padding:18px}.plan-ready-stats{grid-template-columns:1fr 1fr}.plan-ready-actions{display:grid;grid-template-columns:1fr 1fr}.plan-day-head{align-items:flex-start;flex-direction:column}.plan-day-meta{justify-content:flex-start}.plan-item__side .btn{flex:1}}

/* ============================================================
   Route engine — plan, journey timeline, numbered map order
   ============================================================ */

.plan-warning-summary { display: grid; gap: 8px; margin-bottom: 16px; }
.plan-warning-summary .alert { margin: 0; align-items: center; }
.plan-warning-summary .alert > span { flex: 1; }

.alert.is-soft {
  background: var(--accent-soft);
  border: 1px solid rgba(37, 99, 235, 0.18);
  color: var(--ink);
}

.plan-ready-panel {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  justify-content: space-between;
  align-items: center;
  background: linear-gradient(120deg, var(--navy-900), var(--navy-800));
  color: #fff;
  border-radius: var(--radius);
  padding: 20px 22px;
  margin-bottom: 16px;
}
.plan-ready-panel h3 { margin: 4px 0 6px; font: 800 1.2rem/1.2 var(--font-body); }
.plan-ready-panel p:not(.eyebrow) { margin: 0; max-width: 62ch; color: rgba(235, 242, 252, 0.8); font-size: 0.88rem; line-height: 1.5; }
.plan-ready-panel .eyebrow { margin: 0; font: 800 0.72rem/1 var(--font-body); letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-bright); }
.plan-ready-stats { display: flex; flex-wrap: wrap; gap: 10px; }
.plan-ready-stats span {
  display: grid;
  gap: 2px;
  padding: 10px 14px;
  min-width: 92px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  font-size: 0.72rem;
  color: rgba(235, 242, 252, 0.75);
  font-weight: 700;
}
.plan-ready-stats strong { font-size: 1.25rem; color: #fff; }

.plan-day-head {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  margin: 16px 0 12px;
}
.plan-day-head h3 { margin: 2px 0 0; font: 800 1.1rem/1.2 var(--font-body); }
.plan-day-head .eyebrow { margin: 0; font: 800 0.72rem/1 var(--font-body); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.plan-day-meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 0.82rem; color: var(--muted); font-weight: 650; }

.plan-item.is-locked { border-color: rgba(124, 58, 237, 0.45); }
.plan-item__number {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  margin-right: 6px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 0.75rem;
  font-weight: 800;
}
.plan-unscheduled { margin-top: 12px; border-color: rgba(217, 119, 6, 0.35); }
.plan-unscheduled h3 { display: flex; align-items: center; gap: 8px; }
.plan-unscheduled h3 svg { width: 18px; height: 18px; color: var(--amber); }

/* Journey timeline */
.journey-day-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.journey-day-summary h3 { margin: 2px 0 0; font: 800 1.1rem/1.2 var(--font-body); }
.journey-day-summary .eyebrow { margin: 0; font: 800 0.72rem/1 var(--font-body); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }

.journey-timeline { display: grid; gap: 0; }
.journey-stop {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 16px;
  box-shadow: var(--shadow-soft);
}
.journey-stop__number,
.map-pin-number span {
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--purple);
  color: #fff;
  font-weight: 800;
  font-size: 0.85rem;
}
.journey-stop__body { flex: 1; min-width: 0; }
.journey-stop.is-current-stop { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); }
.journey-mobile-controls { display: grid; grid-template-columns: 1fr 1.25fr 1fr; gap: 10px; margin: 18px 0; }
.journey-mobile-controls .btn { min-height: 54px; font-size: 1rem; }
.journey-stop__body h4 { margin: 0 0 6px; font: 800 1rem/1.3 var(--font-body); }
.journey-stop.is-completed { opacity: .76; }
.journey-stop.is-completed h4 { opacity: 1; }
.journey-next-indicator { display:inline-flex; margin:0 0 7px; padding:4px 8px; border-radius:999px; background:var(--accent); color:#fff; font-size:.7rem; font-weight:900; text-transform:uppercase; letter-spacing:.06em; }
.journey-route-context { margin:0; color:var(--muted); font-size:.82rem; }
.journey-route-context strong { color:var(--ink); }

.journey-gap { display: flex; padding: 0 0 0 13px; }
.journey-gap > .journey-leg {
  flex: 1;
  margin: 8px 0 8px 27px;
  position: relative;
}
.journey-stop__body > .journey-gap { padding: 0; }
.journey-stop__body > .journey-gap > .journey-leg { margin: 12px 0 0; box-shadow: none; background: var(--cloud); }
.journey-stop__body > .journey-gap > .journey-leg::before { display:none; }
/* The line that visually links one stop to the next. */
.journey-gap > .journey-leg::before {
  content: "";
  position: absolute;
  left: -21px;
  top: -12px;
  bottom: -12px;
  width: 2px;
  background: linear-gradient(var(--line), var(--accent-soft), var(--line));
}
.journey-leg--empty { border-style: dashed; background: transparent; }
.journey-leg__head { flex-wrap: wrap; }
.journey-leg__source { margin: 8px 0 0; font-size: 0.75rem; color: var(--muted); font-weight: 650; }

/* Automatic route details extend the existing Journey cards without changing
   the page layout or visual language. */
.journey-provider-setup { margin-bottom: 14px; }
.journey-route-summary { display: flex; align-items: baseline; flex-wrap: wrap; gap: 7px 14px; }
.journey-route-summary strong { font: 850 1.05rem/1.2 var(--font-body); }
.journey-route-summary span, .journey-calculated-at, .journey-route-copy { color: var(--muted); font-size: .82rem; }
.journey-calculated-at, .journey-route-copy { margin: 0; }
.journey-route-warning { margin: 0; color: var(--amber); font-size: .78rem; }
.journey-route-steps { list-style: none; display: grid; gap: 8px; margin: 2px 0; padding: 0; }
.journey-route-steps > li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 9px; align-items: start; }
.journey-route-steps p { margin: 2px 0; color: var(--muted); font-size: .82rem; }
.journey-route-steps small { display: block; color: var(--muted); margin-top: 2px; }
.journey-route-step-number { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--cloud); color: var(--accent); font-size: .7rem; font-weight: 900; }
.journey-walking-step summary { cursor: pointer; color: var(--ink); font-weight: 750; }
.journey-leg-actions { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; }
.journey-more-menu { position: relative; }
.journey-more-menu > summary { list-style: none; cursor: pointer; }
.journey-more-menu > summary::-webkit-details-marker { display: none; }
.journey-more-menu__panel { position: absolute; z-index: 20; right: 0; top: calc(100% + 6px); width: min(300px, calc(100vw - 46px)); padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); box-shadow: var(--shadow); display: grid; gap: 10px; }
.journey-more-menu__panel form { display: grid; gap: 8px; }
.journey-more-menu__panel .field span { font-size: .72rem; }
.modal-intro { margin: -8px 0 14px; color: var(--muted); font-size: .86rem; }

.dynamic-reroute-review { display: grid; gap: 12px; margin-bottom: 14px; border-color: color-mix(in srgb, var(--purple) 45%, var(--line)); }
.dynamic-reroute-review.is-accepted { border-color: color-mix(in srgb, var(--green) 45%, var(--line)); }
.dynamic-reroute-review__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.dynamic-reroute-review__head h3 { margin: 2px 0 0; font: 800 1.05rem/1.25 var(--font-body); }
.dynamic-reroute-review__head .eyebrow { margin: 0; }
.dynamic-reroute-review > p { margin: 0; color: var(--muted); font-size: .86rem; }
.dynamic-reroute-review__changes { display: grid; gap: 7px; }
.dynamic-reroute-review__changes span { padding: 8px 10px; border-radius: 9px; background: var(--cloud); font-size: .84rem; }
.journey-leg--return { border-color: color-mix(in srgb, #0f766e 45%, var(--line)); background: color-mix(in srgb, #0f766e 5%, var(--card)); }
.journey-return-label { margin: 0 0 7px; color: #0f766e; }
.journey-return-panel { display: grid; gap: 12px; margin-top: 14px; }
.journey-return-panel__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.journey-return-panel__head h3, .map-return-summary h3 { margin: 2px 0 0; font: 800 1.05rem/1.25 var(--font-body); }
.journey-return-panel__head .eyebrow, .map-return-summary .eyebrow { margin: 0; }
.journey-return-options { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 9px; }
.journey-return-options > label { display: flex; gap: 9px; align-items: flex-start; padding: 11px; border: 1px solid var(--line); border-radius: 11px; background: var(--card); cursor: pointer; }
.journey-return-options input { margin-top: 3px; accent-color: var(--purple); }
.journey-return-options span { display: grid; gap: 3px; min-width: 0; }
.journey-return-options strong { font-size: .84rem; }
.journey-return-options small { color: var(--muted); line-height: 1.35; }
.journey-return-summary { margin: 0; color: var(--muted); font-size: 0.82rem; line-height: 1.5; }
.journey-return-summary[hidden] { display: none; }
.journey-return-summary__route { color: var(--accent-strong, #245ca6); }
.journey-return-panel__actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.journey-return-panel__actions .form-status { margin: 0; }
.map-return-summary { display: grid; gap: 9px; border-color: color-mix(in srgb, #0f766e 40%, var(--line)); }
.map-return-live { padding: 9px; border-radius: 9px; background: color-mix(in srgb,var(--amber) 9%,var(--card)); font-size: .8rem; }
.map-return-live p { margin: 3px 0 0; }

.map-pin-number { background: none; border: 0; }
.map-pin-number span { box-shadow: 0 2px 8px rgba(13, 31, 63, 0.35); border: 2px solid #fff; }

@media (max-width: 720px) {
  body[data-page="journey"] .ws-main { padding-bottom: 96px; }
  .journey-mobile-controls { position: fixed; z-index: 90; left: 10px; right: 10px; bottom: max(10px, env(safe-area-inset-bottom)); margin: 0; padding: 10px; border: 1px solid var(--line); border-radius: 16px; background: var(--card); box-shadow: var(--shadow-lg); }
  .journey-mobile-controls .btn { min-height: 58px; font-size: 1.02rem; }
  [data-sticky-days] { position: sticky; top: 0; z-index: 30; margin-inline: -12px; padding: 9px 12px; background: color-mix(in srgb, var(--card) 94%, transparent); backdrop-filter: blur(10px); box-shadow: 0 1px 0 var(--line); }
  [data-sticky-days] .tab.is-active { box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 30%, transparent); }
  .plan-ready-panel, .plan-day-head, .journey-day-summary { flex-direction: column; align-items: flex-start; }
  .plan-day-meta { width: 100%; }
  .journey-gap { padding-left: 6px; }
  .journey-gap > .journey-leg { margin-left: 20px; }
  .journey-gap > .journey-leg::before { left: -14px; }
  .journey-more-menu__panel { position: fixed; left: 12px; right: 12px; top: auto; bottom: 12px; width: auto; }
  .journey-leg-actions .btn { min-height: 36px; }
  .journey-stop { padding: 13px 12px; gap: 10px; }
  .journey-stop__body > .journey-gap > .journey-leg { margin-left: 0; }
  .journey-leg-actions .btn { flex: 1 1 100%; justify-content:center; }
  .dynamic-reroute-review__head { align-items: flex-start; }
  .dynamic-reroute-review > .btn { width: 100%; }
  .journey-return-options { grid-template-columns: 1fr; }
  .journey-return-panel__head { align-items: flex-start; }
  .journey-return-panel__actions .btn { width: 100%; }
}

/* A place arrived at from a "Fix details" link — make it obvious which one. */
.place-row.is-highlighted {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

/* ==========================================================================
   Smart Trip Generator — premium promo card on My Trips + its planner popup.
   The card uses the dark navy/accent palette so it reads as premium against
   the white trip cards; the popup reuses the shared .ui-modal shell.
   ========================================================================== */

.smart-trip {
  position: relative;
  overflow: hidden;
  margin: 4px 0 24px;
  padding: 30px 32px;
  border-radius: var(--radius);
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: linear-gradient(135deg, var(--navy-950) 0%, var(--navy-800) 58%, var(--accent-strong) 150%);
  color: #fff;
  box-shadow: var(--shadow-lift);
}

/* Soft accent glow, purely decorative. */
.smart-trip__glow {
  position: absolute;
  top: -55%;
  right: -8%;
  width: 340px;
  height: 340px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--accent-glow) 0%, transparent 68%);
  opacity: 0.75;
  pointer-events: none;
}

.smart-trip__body { position: relative; max-width: 640px; }

.smart-trip__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  font: 800 0.72rem/1 var(--font-body);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.smart-trip__eyebrow svg { width: 15px; height: 15px; }

.smart-trip h3 {
  margin: 14px 0 6px;
  font: 800 clamp(1.4rem, 3.2vw, 1.9rem)/1.1 var(--font-display);
  color: #fff;
}
.smart-trip p { margin: 0; color: rgba(255, 255, 255, 0.82); font-size: 0.95rem; max-width: 560px; }

.smart-trip__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }

@media (max-width: 560px) {
  .smart-trip { padding: 24px 20px; }
  .smart-trip__actions { display: grid; }
  .smart-trip__actions .btn { width: 100%; }
}

/* ---------- Planner popup ---------- */

.smart-modal__intro { margin: -6px 0 6px; color: var(--muted); font-size: 0.9rem; }
.smart-modal .req { color: var(--accent); font-style: normal; font-weight: 900; }
.form-status.is-hint { color: var(--muted); font-weight: 700; }

/* Collapsed "Personalise my trip" section — closed by default. */
.smart-more {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-2);
}
.smart-more > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 13px 15px;
  font: 800 0.92rem/1 var(--font-body);
  color: var(--ink);
}
.smart-more > summary::-webkit-details-marker { display: none; }
.smart-more__label { display: inline-flex; align-items: center; gap: 9px; }
.smart-more__label svg { width: 17px; height: 17px; color: var(--accent); }
.smart-more__hint {
  font: 800 0.68rem/1 var(--font-body);
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
/* Chevron affordance that flips when open. */
.smart-more__label::before {
  content: "";
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(-45deg);
  transition: transform 0.18s ease;
}
.smart-more[open] .smart-more__label::before { transform: rotate(45deg); }
.smart-more[open] > summary { border-bottom: 1px solid var(--line); }
.smart-more__body { display: grid; gap: 16px; padding: 16px 15px 8px; }

.smart-field { border: 0; padding: 0; margin: 0; display: grid; gap: 9px; min-width: 0; }
.smart-field legend { padding: 0; font: 800 0.78rem/1 var(--font-body); color: var(--muted); }

/* Interest pills — checkboxes styled as selectable chips. */
.chip-choices { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { position: relative; display: inline-flex; }
.chip input { position: absolute; opacity: 0; width: 0; height: 0; }
.chip span {
  display: inline-block;
  padding: 8px 13px;
  border-radius: 999px;
  border: 1.5px solid var(--line);
  background: var(--card);
  font: 700 0.82rem/1 var(--font-body);
  color: var(--ink);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.chip span:hover { border-color: var(--accent); }
.chip input:checked + span {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  box-shadow: 0 4px 14px var(--accent-glow);
}
.chip input:focus-visible + span { outline: 3px solid var(--accent-bright); outline-offset: 2px; }

/* Segmented single-choice controls (pace, transport). */
.segmented {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  border: 1.5px solid var(--line);
  border-radius: 11px;
  overflow: hidden;
  background: var(--card);
}
.segmented label { position: relative; display: block; min-width: 0; }
.segmented input { position: absolute; opacity: 0; width: 0; height: 0; }
.segmented span {
  display: block;
  text-align: center;
  padding: 10px 8px;
  border-left: 1.5px solid var(--line);
  font: 700 0.82rem/1 var(--font-body);
  color: var(--muted);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.segmented label:first-child span { border-left: 0; }
.segmented input:checked + span { background: var(--accent-soft); color: var(--accent); }
.segmented input:focus-visible + span { outline: 2px solid var(--accent-bright); outline-offset: -2px; }

/* Post-generation Plan: one completion state, then a quiet untimed stop list. */
.plan-completion-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(min(340px, 100%), auto);
  gap: 20px 28px;
  padding: 24px;
  margin-bottom: 22px;
  border-radius: var(--radius);
  background: linear-gradient(120deg, var(--navy-900), var(--navy-800));
  color: #fff;
  box-shadow: var(--shadow-soft);
}
.plan-completion-panel .eyebrow { margin: 0 0 6px; color: var(--accent-bright); }
.plan-completion-panel h2 { margin: 0 0 8px; color: #fff; font: 800 1.55rem/1.15 var(--font-display); }
.plan-completion-panel__copy > p:not(.eyebrow) { margin: 0; color: rgba(235,242,252,.84); }
.plan-completion-panel__note { margin-top: 8px !important; font-size: .82rem; }
.plan-completion-panel__actions { display: grid; gap: 10px; align-content: start; }
.plan-completion-panel__actions > .btn { justify-self: stretch; }
.plan-completion-panel__secondary { display: flex; flex-wrap: wrap; gap: 7px; }
.plan-completion-panel__secondary .btn,
.plan-completion-panel__secondary .btn:hover,
.plan-completion-panel__secondary .btn:focus-visible { color: #fff; -webkit-text-fill-color: currentColor; }
.plan-completion-panel__secondary .btn svg { color: inherit; stroke: currentColor; }
.plan-completion-panel__secondary .btn:disabled,
.plan-completion-panel__secondary .btn[disabled] { color: rgba(255,255,255,.92); opacity: .76; -webkit-text-fill-color: currentColor; }
.plan-completion-panel__optional { margin: 0; color: rgba(235,242,252,.68); font-size: .78rem; }
.plan-completion-panel__cost { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px 14px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.14); font-size: .8rem; }
.plan-completion-panel__cost span { color: rgba(235,242,252,.72); }

.plan-item.is-generated { grid-template-columns: minmax(0,1fr) auto; padding: 14px 16px; }
.plan-item.is-generated .plan-item__main { align-self: center; }
.plan-item-more { position: relative; }
.plan-item-more > summary { list-style: none; cursor: pointer; }
.plan-item-more > summary::-webkit-details-marker { display: none; }
.plan-item-more__menu { position: absolute; z-index: 20; right: 0; top: calc(100% + 6px); display: grid; min-width: 170px; gap: 5px; padding: 8px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); box-shadow: var(--shadow); }
.plan-item-more__menu .btn { width: 100%; justify-content: flex-start; white-space: nowrap; }

@media (max-width: 760px) {
  .plan-completion-panel { grid-template-columns: 1fr; padding: 18px; }
  .plan-completion-panel__secondary { display: grid; grid-template-columns: 1fr 1fr; }
  .plan-completion-panel__secondary .btn { width: 100%; }
  .plan-item.is-generated { grid-template-columns: 1fr; }
  .plan-item.is-generated .plan-item__side { grid-column: 1; width: 100%; }
  .plan-item-more__menu { right: auto; left: 0; }
}

@media (max-width: 430px) {
  .plan-completion-panel__secondary { grid-template-columns: 1fr; }
}


/* Automatic journey details shared by Plan and Journey. */
.journey-day-stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}
.journey-day-stats span {
  display: grid;
  gap: 2px;
  min-width: 118px;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--card);
  color: var(--muted);
  font-size: .72rem;
}
.journey-day-stats strong { color: var(--text); font-size: .88rem; }

.plan-route-between {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: -3px 12px -3px 32px;
  padding: 5px 10px;
  border-left: 2px dashed var(--line-strong, var(--line));
  color: var(--muted);
  font-size: .78rem;
}
.plan-route-between svg { width: 14px; height: 14px; color: var(--accent); flex: 0 0 auto; }
.plan-route-between strong { color: var(--text); }
.journey-provider-note {
  margin: 14px 0 0;
  color: var(--muted);
  font-size: .72rem;
  text-align: center;
}

@media (max-width: 760px) {
  .journey-day-stats { justify-content: flex-start; width: 100%; }
  .journey-day-stats span { min-width: 0; flex: 1 1 120px; }
  .plan-route-between { margin-left: 18px; }
}

/* ---------- Vote workspace ---------- */

body[data-page="vote"] .vote-page,
body[data-page="vote"] .vote-page__card,
body[data-page="vote"] .vote-page__card-main { min-width: 0; }
body[data-page="vote"] .vote-page [hidden] { display: none !important; }

body[data-page="vote"] .vote-page__head { margin-bottom: 18px; }

body[data-page="vote"] .vote-page__controls {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
}

body[data-page="vote"] .vote-page__tabs {
  display: flex;
  flex: 1 1 auto;
  gap: 5px;
  min-width: 0;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-width: thin;
}

body[data-page="vote"] .vote-page__tab {
  flex: 0 0 auto;
  min-height: 42px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: rgba(255, 255, 255, .72);
  color: var(--muted);
  font: 800 .82rem/1 var(--font-body);
  cursor: pointer;
  white-space: nowrap;
}

body[data-page="vote"] .vote-page__tab span {
  display: inline-grid;
  place-items: center;
  min-width: 23px;
  height: 23px;
  margin-left: 5px;
  padding-inline: 6px;
  border-radius: 999px;
  background: var(--cloud);
  color: var(--ink);
  font-size: .72rem;
}

body[data-page="vote"] .vote-page__tab.is-active {
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
  box-shadow: 0 5px 15px rgba(37, 99, 235, .18);
}

body[data-page="vote"] .vote-page__tab.is-active span {
  background: rgba(255, 255, 255, .2);
  color: #fff;
}

body[data-page="vote"] .vote-page__search {
  position: relative;
  flex: 0 0 250px;
}

body[data-page="vote"] .vote-page__search svg {
  position: absolute;
  left: 12px;
  top: 50%;
  width: 16px;
  height: 16px;
  color: var(--muted);
  transform: translateY(-50%);
  pointer-events: none;
}

body[data-page="vote"] .vote-page__search input {
  width: 100%;
  min-height: 42px;
  padding: 0 12px 0 38px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: #fff;
  color: var(--ink);
  font: 650 .85rem/1 var(--font-body);
}

body[data-page="vote"] .vote-page__panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: 0 0 12px;
}

body[data-page="vote"] .vote-page__panel-head p,
body[data-page="vote"] .vote-page__modal-copy {
  margin: 0;
  color: var(--muted);
  font-size: .85rem;
  line-height: 1.5;
}

body[data-page="vote"] .vote-page__list { display: grid; gap: 11px; }

body[data-page="vote"] .vote-page__card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  padding: 17px 18px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: var(--card);
  box-shadow: 0 3px 14px rgba(13, 31, 63, .055);
}

body[data-page="vote"] .vote-page__card--voting.is-awaiting-vote {
  border-left: 4px solid var(--accent);
  padding-left: 15px;
}

body[data-page="vote"] .vote-page__title-line {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 9px;
  margin-bottom: 6px;
}

body[data-page="vote"] .vote-page__title-line h3 {
  margin: 0;
  font: 850 1.02rem/1.25 var(--font-body);
}

body[data-page="vote"] .vote-page__card-main > p {
  display: -webkit-box;
  max-width: 76ch;
  margin: 0 0 7px;
  overflow: hidden;
  color: var(--muted);
  font-size: .83rem;
  line-height: 1.45;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

body[data-page="vote"] .vote-page__status,
body[data-page="vote"] .vote-page__deadline,
body[data-page="vote"] .vote-page__assigned-day {
  display: inline-flex;
  align-items: center;
  min-height: 23px;
  padding: 0 8px;
  border-radius: 999px;
  font-size: .7rem;
  font-weight: 850;
  white-space: nowrap;
}

body[data-page="vote"] .vote-page__status.is-open { background: var(--accent-soft); color: var(--accent-strong); }
body[data-page="vote"] .vote-page__status.is-approved { background: var(--green-soft); color: var(--green); }
body[data-page="vote"] .vote-page__status.is-planned { background: var(--purple-soft); color: var(--purple); }
body[data-page="vote"] .vote-page__status.is-rejected { background: #edf1f7; color: var(--muted); }
body[data-page="vote"] .vote-page__deadline { background: var(--amber-soft); color: #92400e; }
body[data-page="vote"] .vote-page__assigned-day { background: var(--cloud); color: var(--ink); }

body[data-page="vote"] .vote-page__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 15px;
  color: var(--muted);
  font-size: .75rem;
  font-weight: 650;
}

body[data-page="vote"] .vote-page__facts span + span::before {
  content: "\00b7";
  margin-right: 15px;
  color: #a1aec0;
}

body[data-page="vote"] .vote-page__totals {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

body[data-page="vote"] .vote-page__totals > span {
  display: inline-flex;
  gap: 4px;
  align-items: center;
  min-height: 25px;
  padding: 0 8px;
  border-radius: 7px;
  background: var(--cloud);
  color: var(--muted);
  font-size: .71rem;
  font-weight: 750;
}

body[data-page="vote"] .vote-page__totals > .is-yes { background: var(--green-soft); color: var(--green); }
body[data-page="vote"] .vote-page__totals > .is-maybe { background: var(--amber-soft); color: #9a5805; }
body[data-page="vote"] .vote-page__totals > .is-no { background: var(--red-soft); color: var(--red); }
body[data-page="vote"] .vote-page__totals > .vote-page__my-vote { background: var(--green-soft); color: var(--green); }
body[data-page="vote"] .vote-page__totals > .vote-page__my-vote.is-missing { background: var(--purple-soft); color: var(--purple); }

body[data-page="vote"] .vote-page__card-actions {
  display: grid;
  justify-items: end;
  gap: 9px;
  width: min(360px, 100%);
}

body[data-page="vote"] .vote-page__card-actions .vote-buttons {
  display: grid;
  grid-template-columns: repeat(3, minmax(min(78px, 100%), 1fr));
  width: 100%;
}

body[data-page="vote"] .vote-page__card-actions .vote-btn { min-height: 42px; }

body[data-page="vote"] .vote-page__secondary-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 7px;
}

body[data-page="vote"] .vote-page__menu { position: relative; }
body[data-page="vote"] .vote-page__menu > summary { list-style: none; cursor: pointer; user-select: none; }
body[data-page="vote"] .vote-page__menu > summary::-webkit-details-marker { display: none; }

body[data-page="vote"] .vote-page__more {
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  color: var(--muted);
  font: 900 1.25rem/1 var(--font-body);
}

body[data-page="vote"] .vote-page__menu-popover {
  position: absolute;
  z-index: 8;
  top: calc(100% + 6px);
  right: 0;
  display: grid;
  width: max-content;
  min-width: 155px;
  max-width: calc(100vw - 36px);
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: #fff;
  box-shadow: var(--shadow-lift);
}

body[data-page="vote"] .vote-page__menu-popover button {
  min-height: 38px;
  padding: 0 10px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--ink);
  font: 750 .8rem/1 var(--font-body);
  text-align: left;
  cursor: pointer;
}

body[data-page="vote"] .vote-page__menu-popover button:hover { background: var(--cloud); }

body[data-page="vote"] .vote-page__empty {
  padding: 42px 18px;
  border: 1px dashed #cad5e5;
  border-radius: 15px;
  background: rgba(255, 255, 255, .58);
  text-align: center;
}

body[data-page="vote"] .vote-page__empty h3 { margin: 0 0 5px; font-size: 1rem; }
body[data-page="vote"] .vote-page__empty p { margin: 0; color: var(--muted); font-size: .83rem; }

@media (max-width: 850px) {
  body[data-page="vote"] .vote-page__card { grid-template-columns: 1fr; gap: 14px; }
  body[data-page="vote"] .vote-page__card-actions { justify-items: stretch; width: 100%; }
  body[data-page="vote"] .vote-page__secondary-actions { justify-content: flex-start; }
}

@media (max-width: 640px) {
  body[data-page="vote"] .vote-page__head { gap: 12px; }
  body[data-page="vote"] .vote-page__controls { display: grid; gap: 10px; }
  body[data-page="vote"] .vote-page__tabs {
    width: calc(100vw - 32px);
    margin-inline: calc(50% - 50vw + 16px);
    padding: 0 0 4px;
  }
  body[data-page="vote"] .vote-page__search { width: 100%; }
  body[data-page="vote"] .vote-page__panel-head { align-items: stretch; flex-direction: column; }
  body[data-page="vote"] .vote-page__panel-head .btn { width: 100%; }
  body[data-page="vote"] .vote-page__card { padding: 15px; }
  body[data-page="vote"] .vote-page__card--voting.is-awaiting-vote { padding-left: 12px; }
  body[data-page="vote"] .vote-page__card-actions .vote-buttons { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
  body[data-page="vote"] .vote-page__card-actions .vote-btn { min-height: 48px; padding-inline: 7px; font-size: .82rem; }
  body[data-page="vote"] .vote-page__secondary-actions { width: 100%; }
  body[data-page="vote"] .vote-page__secondary-actions > .btn--primary { margin-left: auto; }
  body[data-page="vote"] .vote-page__menu-popover { right: 0; }
}

/* ---------- Account recovery pages (forgot / reset password) ---------- */

.auth-narrow { width: min(540px, 100% - 32px); margin: 48px auto; }
/* Structure says h1 — the first heading on the page — but the size stays
   the panel's, not a page title's. */
.auth-narrow .panel h1 { margin: 0 0 6px; font: 800 1.5rem/1.18 var(--font-display); }
.auth-narrow__note { margin: 0 0 18px; color: var(--muted); font-size: 0.9rem; line-height: 1.55; }
.auth-narrow__form { display: grid; gap: 14px; }
.auth-narrow__form .modal-actions { margin-top: 4px; }
.auth-narrow .alert { margin-bottom: 16px; }

.trips-legal-footer {
  display: flex;
  justify-content: center;
  padding: 22px 16px max(22px, env(safe-area-inset-bottom));
  color: var(--muted);
  font-size: .72rem;
}
.trips-legal-footer a { color: inherit; text-underline-offset: 3px; }
.trips-legal-footer a:hover { color: var(--ink); }

@media (max-width: 600px) {
  .auth-narrow { margin: 28px auto; }
  .auth-narrow__form .modal-actions { display: grid; grid-template-columns: 1fr; gap: 10px; }
  .auth-narrow__form .modal-actions .btn { width: 100%; min-height: 50px; }
}

/* ============================================================
   Phase 4 — where am I, what happened, what do I do next
   ============================================================ */

/* Trip Overview's control card: the state of the trip in one sentence, the one
   action that follows from it, and the four stages as a plain progress list. */
.trip-state {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 18px 28px;
  align-items: start;
  margin-bottom: 18px;
  padding: 20px 22px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--card);
  box-shadow: var(--shadow-soft);
}
.trip-state__where {
  margin: 0 0 6px;
  color: var(--accent-strong);
  font: 800 .66rem/1 var(--font-body);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.trip-state h3 { margin: 0 0 16px; font-size: 1.22rem; line-height: 1.35; }
.trip-state__do { display: grid; justify-items: start; gap: 8px; }
.trip-state__do-label {
  margin: 0;
  color: var(--muted);
  font: 800 .62rem/1 var(--font-body);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.trip-state__do .btn { min-height: 46px; }
.trip-state__do-text { margin: 0; color: var(--muted); font-size: .86rem; line-height: 1.5; }
.trip-state__escape { color: var(--muted); font-size: .76rem; font-weight: 750; text-decoration: none; }
.trip-state__escape:hover { color: var(--ink); text-decoration: underline; }

.trip-state__steps { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.trip-state__steps a {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 46px;
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 11px;
  color: inherit;
  text-decoration: none;
}
.trip-state__steps a:hover { border-color: var(--accent-glow); }
.trip-state__dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--line);
  border-radius: 50%;
  font-size: .8rem;
  font-weight: 800;
}
.trip-state__dot svg { width: 14px; height: 14px; }
.trip-state__steps strong { font-size: .92rem; }
.trip-state__steps small {
  color: var(--muted);
  font: 800 .58rem/1 var(--font-body);
  letter-spacing: .1em;
  text-transform: uppercase;
}
.trip-state__steps .is-done .trip-state__dot { background: var(--green); border-color: var(--green); color: #fff; }
.trip-state__steps .is-current a { border-color: var(--accent); background: var(--accent-soft); }
.trip-state__steps .is-current .trip-state__dot { border-color: var(--accent); color: var(--accent-strong); }
.trip-state__steps .is-later a { opacity: .72; }

.trip-state__nudge {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px 18px;
  margin-bottom: 18px;
  padding: 14px 18px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--accent-soft);
}
.trip-state__nudge strong { display: block; font-size: .96rem; }
.trip-state__nudge p { margin: 4px 0 0; color: var(--muted); font-size: .84rem; line-height: 1.5; }

/* Four numbers a traveller recognises, each one a way in. */
.trip-facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 18px;
}
.trip-facts__item {
  display: grid;
  gap: 3px;
  min-height: 84px;
  padding: 13px 15px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--card);
  color: inherit;
  text-decoration: none;
}
.trip-facts__item:hover { border-color: var(--accent-glow); }
.trip-facts__item span {
  color: var(--muted);
  font: 800 .6rem/1 var(--font-body);
  letter-spacing: .1em;
  text-transform: uppercase;
}
.trip-facts__item strong { font-size: 1.55rem; line-height: 1.05; }
.trip-facts__item small { color: var(--muted); font-size: .74rem; line-height: 1.4; }

/* Trip watch stays available but stops competing with the journey. */
.trip-watch { margin-bottom: 18px; }
.trip-watch > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 14px;
  min-height: 48px;
  padding: 12px 18px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--card);
  cursor: pointer;
  font-weight: 750;
  font-size: .92rem;
  list-style: none;
}
.trip-watch > summary::-webkit-details-marker { display: none; }
.trip-watch > summary small { color: var(--muted); font-size: .76rem; font-weight: 700; }
.trip-watch > summary:focus-visible { outline: 2px solid var(--accent-bright); outline-offset: 2px; }
.trip-watch[open] > summary { margin-bottom: 14px; }

/* The group's decision, said in words rather than a lock icon. */
.trip-agreement {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px 20px;
  margin-bottom: 18px;
  padding: 16px 20px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--card);
}
.trip-agreement__copy { min-width: 0; }
.trip-agreement__tag {
  display: inline-block;
  margin-bottom: 5px;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-strong);
  font: 800 .6rem/1.6 var(--font-body);
  letter-spacing: .1em;
  text-transform: uppercase;
}
.trip-agreement.is-agreed { background: var(--green-soft); border-color: var(--green); }
.trip-agreement.is-agreed .trip-agreement__tag { background: var(--green); color: #fff; }
.trip-agreement__copy strong { display: block; font-size: 1.02rem; }
.trip-agreement__copy p { margin: 5px 0 0; color: var(--muted); font-size: .85rem; line-height: 1.5; max-width: 62ch; }
.trip-agreement__actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* Two words that people confuse: mine, and the group's. */
.ideas-explainer {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 18px;
}
.ideas-explainer > div {
  padding: 13px 16px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--card);
}
.ideas-explainer strong { display: block; font-size: .92rem; }
.ideas-explainer p { margin: 4px 0 0; color: var(--muted); font-size: .82rem; line-height: 1.5; }

@media (max-width: 900px) {
  .trip-state { grid-template-columns: 1fr; }
  .trip-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .trip-state { padding: 17px 16px; }
  .trip-state h3 { font-size: 1.08rem; }
  .trip-state__do .btn { width: 100%; justify-content: center; }
  .trip-state__nudge .btn { width: 100%; justify-content: center; }
  .ideas-explainer { grid-template-columns: 1fr; }
  .trip-agreement__actions { width: 100%; }
  .trip-agreement__actions .btn { flex: 1 1 auto; justify-content: center; }
}

/* An invitation should answer "what am I being asked to do?" before it asks
   for a password. */
.invite-what {
  width: min(760px, 100% - 32px);
  margin: 0 auto 22px;
  padding: 18px 22px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--card);
}
.invite-what h3 { margin: 0 0 12px; font-size: 1rem; }
.invite-what ol { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; counter-reset: invite-step; }
.invite-what li { display: grid; gap: 2px; padding-left: 34px; position: relative; counter-increment: invite-step; }
.invite-what li::before {
  content: counter(invite-step);
  position: absolute;
  left: 0;
  top: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent-strong);
  font-size: .74rem;
  font-weight: 800;
}
.invite-what li strong { font-size: .92rem; }
.invite-what li span { color: var(--muted); font-size: .84rem; line-height: 1.5; }
.invite-what__note { margin: 14px 0 0; color: var(--muted); font-size: .82rem; line-height: 1.55; }

/* Inviting people: two honest routes, not three buttons of equal weight. */
.invite-ways {
  margin-bottom: 20px;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--card);
}
.invite-ways h3 { margin: 0 0 14px; font-size: 1rem; }
.invite-ways__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 14px; }
.invite-ways__grid > div { display: grid; align-content: start; gap: 8px; }
.invite-ways__grid strong { font-size: .94rem; }
.invite-ways__grid p { margin: 0; color: var(--muted); font-size: .84rem; line-height: 1.5; }
.invite-ways__grid .btn { justify-self: start; }

@media (max-width: 560px) {
  .invite-ways__grid .btn { justify-self: stretch; width: 100%; justify-content: center; }
}

/* Go, on the day: where next, when, how do I get there. Nothing else at the
   top of the screen, because this is read while walking. */
.go-now {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 18px;
}
.go-now__slot {
  display: grid;
  align-content: start;
  gap: 5px;
  padding: 15px 17px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--card);
}
.go-now__slot.is-now { border-color: var(--accent); background: var(--accent-soft); }
.go-now__heading {
  margin: 0;
  color: var(--muted);
  font: 800 .62rem/1 var(--font-body);
  letter-spacing: .14em;
  text-transform: uppercase;
}
.go-now__slot.is-now .go-now__heading { color: var(--accent-strong); }
.go-now__slot strong { font-size: 1.02rem; line-height: 1.3; }
.go-now__slot.is-now strong { font-size: 1.35rem; }
.go-now__when { margin: 0; color: var(--muted); font-size: .88rem; font-weight: 700; }
.go-now__slot.is-now .go-now__when { color: var(--ink); font-size: 1.02rem; }
.go-now__flag { display: flex; align-items: center; gap: 6px; margin: 0; color: var(--amber, #b45309); font-size: .78rem; font-weight: 750; }
.go-now__flag svg { width: 14px; height: 14px; }
/* Phase 7: the leave-by number carries its evidence, and expired advice is
   replaced by the fact that the traveller is behind rather than repeated. */
.go-now__flag--late { color: var(--danger, #b91c1c); flex-wrap: wrap; }
.go-now__flag--soon { color: var(--accent-strong, #1d4ed8); flex-wrap: wrap; }
.go-now__evidence { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 0; font-size: .74rem; }
.go-now__evidence span { color: var(--muted); }
.go-now__slot .btn { justify-self: start; margin-top: 6px; }

.go-aside { margin-bottom: 18px; }
.go-aside > summary {
  min-height: 46px;
  padding: 12px 18px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--card);
  cursor: pointer;
  font-weight: 750;
  font-size: .88rem;
}
.go-aside > summary:focus-visible { outline: 2px solid var(--accent-bright); outline-offset: 2px; }
.go-aside[open] > summary { margin-bottom: 12px; }

@media (max-width: 760px) {
  .go-now { grid-template-columns: 1fr; }
  .go-now__slot .btn { justify-self: stretch; width: 100%; justify-content: center; }
}

/* ============================================================
   Phase 9 — asking a pilot group what actually happened
   ============================================================ */

.pilot-ask {
  margin-bottom: 18px;
  padding: 20px 22px;
  border: 1px solid var(--accent);
  border-radius: 16px;
  background: var(--accent-soft);
}
.pilot-ask__tag {
  margin: 0 0 5px;
  color: var(--accent-strong);
  font: 800 .62rem/1 var(--font-body);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.pilot-ask__intro h3 { margin: 0 0 6px; font-size: 1.14rem; }
.pilot-ask__intro p { margin: 0 0 16px; color: var(--muted); font-size: .88rem; line-height: 1.55; max-width: 68ch; }
.pilot-ask__question { margin: 0 0 14px; padding: 0; border: 0; }
.pilot-ask__question legend { margin-bottom: 8px; padding: 0; font-size: .92rem; font-weight: 750; }
.pilot-ask__choices { display: flex; flex-wrap: wrap; gap: 8px; }
.pilot-ask__choices label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 6px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--card);
  cursor: pointer;
  font-size: .85rem;
}
.pilot-ask__choices label:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); font-weight: 750; }
.pilot-ask__choices label:focus-within { outline: 2px solid var(--accent-bright); outline-offset: 2px; }
.pilot-ask__comment { display: grid; gap: 6px; margin: 4px 0 16px; }
.pilot-ask__comment > span { font-size: .92rem; font-weight: 750; }
.pilot-ask__comment textarea { width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 11px; font: inherit; }
.pilot-ask__comment small { color: var(--muted); font-size: .76rem; line-height: 1.45; }
.pilot-ask__actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.pilot-ask__done strong { display: block; font-size: 1.02rem; }
.pilot-ask__done p { margin: 5px 0 0; color: var(--muted); font-size: .88rem; }

@media (max-width: 560px) {
  .pilot-ask { padding: 17px 16px; }
  .pilot-ask__choices label { width: 100%; }
  .pilot-ask__actions .btn { width: 100%; justify-content: center; }
}

/* Phase 9 — the one thing a traveller must not be allowed to miss on the day:
   that we have not verified when this place is open. Amber rather than red;
   it is a caution, not a failure, and the words carry it without the colour. */
.journey-stop__hours-warning {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  max-width: 100%;
  white-space: normal;
  text-align: left;
}
.journey-stop__hours-warning svg { width: 13px; height: 13px; flex: none; }
.journey-stop__hours-warning a { color: inherit; text-decoration: underline; text-underline-offset: 2px; font-weight: 800; }