/* ── Design tokens ────────────────────────────────────────────────── */
:root {
  --bg:           #eeedf5;
  --surface:      #ffffff;
  --border:       #dddce8;
  --border-light: #f2f1f8;
  --primary:      #1a3a5c;
  --blue:         #185FA5;
  --blue-light:   #E6F1FB;
  --blue-mid:     #B5D4F4;
  --green:        #0F6E56;
  --green-light:  #E1F5EE;
  --green-dark:   #085041;
  --amber:        #854F0B;
  --amber-light:  #FAEEDA;
  --red:          #E24B4A;
  --muted:        #aaaaaa;
  --muted-dark:   #888888;
  --text:         #1a1a2e;
  --font:         'DM Sans', system-ui, sans-serif;
  --mono:         'IBM Plex Mono', 'Courier New', monospace;
  --radius:       12px;
  --radius-sm:    8px;
  --radius-xs:    6px;
  --topbar-h:       54px;
  --sidebar-w:      220px;
}

/* ── Reset ────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-font-smoothing: antialiased; }

body.page {
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.5;
  color: var(--text);
  background: var(--bg);

  /* The page is a flex column: topbar, banner (if any), the page body, footer.
     It used to be plain blocks, with .layout claiming
     calc(100vh - topbar - banner - guest-banner) as its min-height. That sum
     left the footer out, so every page came out roughly 57px taller than the
     window on a laptop and 150px+ on a phone, and nothing could ever fit on one
     screen. Laying it out as a column makes the footer part of the budget by
     construction and removes the arithmetic, so a banner added later just works
     with no height variable to keep in step. (ZI-69)

     svh, not dvh: svh is the viewport with the phone's URL bar showing, so the
     page is never taller than what is visible at rest. dvh changes as the bar
     slides in and out, which would reflow the page mid-scroll. */
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
}

a { text-decoration: none; }

button {
  font-family: var(--font);
  cursor: pointer;
  border: none;
  background: none;
}

/* ── Topbar ───────────────────────────────────────────────────────── */
.topbar {
  position: sticky;
  top: 0;
  z-index: 200;
  height: var(--topbar-h);
  background: var(--surface);
  border-bottom: 0.5px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
}

.topbar-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.logo {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 700;
  color: var(--primary);
  letter-spacing: -0.2px;
  transition: opacity 0.15s;
}
.logo:hover { opacity: 0.75; }

.logo-mark {
  height: 22px;
  width: auto;
  border-radius: 5px;
}

.v1-pill {
  font-size: 10px;
  background: var(--blue-light);
  color: #0C447C;
  border-radius: 20px;
  padding: 2px 8px;
  font-weight: 500;
}

.topbar-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.fb-btn {
  font-size: 12px;
  font-weight: 500;
  color: var(--green);
  background: var(--green-light);
  border: 0.5px solid #5DCAA5;
  border-radius: var(--radius-xs);
  padding: 5px 12px;
  display: flex;
  align-items: center;
  gap: 5px;
  transition: opacity 0.15s;
}
.fb-btn:hover { opacity: 0.85; }

.fb-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green);
  flex-shrink: 0;
}

/* ── Plan nav button ──────────────────────────────────────────────── */
/* The upgrade path, on every page. Matches .fb-btn's proportions so the nav
   still reads as one row. Renders only when there is an upgrade to make. */
.plan-nav-btn {
  font-size: 12px;
  font-weight: 600;
  border-radius: var(--radius-xs);
  padding: 5px 12px;
  display: flex;
  align-items: center;
  white-space: nowrap;
  transition: opacity 0.15s;
}
.plan-nav-btn:hover { opacity: 0.85; }

/* Free user: the action, so it carries weight */
.plan-nav-btn--upgrade {
  color: #fff;
  background: var(--blue);
  border: 0.5px solid var(--blue);
}

/* Trial user: a countdown, not an ask, so it stays quiet */
.plan-nav-btn--trial {
  color: var(--amber);
  background: var(--amber-light);
  border: 0.5px solid #E8C88A;
}

.avatar-circle {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--blue-mid);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: #0C447C;
  flex-shrink: 0;
}

.uname {
  font-size: 13px;
  color: #555;
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.signout-btn {
  font-size: 12px;
  color: var(--muted-dark);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-xs);
  padding: 4px 10px;
}
.signout-btn:hover { background: var(--bg); }

/* ── Banner ───────────────────────────────────────────────────────── */
.banner {
  background: #F0F5FF;
  border-bottom: 0.5px solid #D0DEFF;
  padding: 9px 24px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.ban-icon {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--blue);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ban-icon::after {
  content: 'i';
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  font-style: italic;
}

.ban-text {
  font-size: 12px;
  color: #2d4a8a;
}
.ban-text a {
  color: var(--blue);
  font-weight: 500;
}

/* ── Site footer ──────────────────────────────────────────────────── */
/* Was an inline style attribute on base.html's <footer>. Moved here so the
   phone rule below can override its padding, which an inline style would
   always have beaten. (ZI-69) */
.site-footer {
  text-align: center;
  padding: 16px 24px;
  font-size: 12px;
  color: #aaa;
  border-top: 0.5px solid #eeedf5;
  margin-top: 24px;
}

/* ── Two-column layout ────────────────────────────────────────────── */
.layout {
  display: flex;
  flex: 1;
  /* min-height stays at its default of auto. Setting it to 0 would let a tall
     dashboard be squashed into the viewport and run under the footer. */
}

/* ── Sidebar ──────────────────────────────────────────────────────── */
.sidebar {
  width: var(--sidebar-w);
  background: var(--surface);
  border-right: 0.5px solid var(--border);
  padding: 16px 12px;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  position: sticky;
  /* The banner scrolls away, so the topbar is the only thing to clear. This
     used to add a banner that no longer renders, leaving a 35.5px dead gap. */
  top: var(--topbar-h);
  /* max-height, not height. A sticky element is still in flow, so a fixed
     height here would force .layout to be at least that tall and put the
     document back over the viewport, undoing the body change above. With no
     height set the sidebar stretches to .layout (the flex default) and this
     only stops it running past the bottom of the window on a long page.
     dvh is right for a cap, where svh would be right for a reservation. */
  max-height: calc(100vh - var(--topbar-h));
  max-height: calc(100dvh - var(--topbar-h));
  overflow: hidden;
}
.sidebar-journey-list {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
}

.sidebar-mobile { display: none; }

.sb-label {
  font-size: 10px;
  letter-spacing: 0.09em;
  color: var(--muted);
  text-transform: uppercase;
  padding: 0 8px 8px;
}

/* Journey cards */
.jcard {
  border-radius: var(--radius-sm);
  padding: 9px 11px;
  cursor: pointer;
  margin-bottom: 3px;
  position: relative;
}
.jcard:hover { background: var(--bg); }
.jcard.active { background: var(--blue-light); }

.jcard-delete {
  position: absolute;
  top: 0;
  right: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  font-size: 13px;
  line-height: 1;
  display: none;
  align-items: center;
  justify-content: center;
  transition: background 0.12s, color 0.12s;
}
.jcard:hover .jcard-delete { display: flex; }
.jcard-delete:hover { background: #f5e8e8; color: #c0392b; }

.jc-route {
  font-size: 13px;
  font-weight: 600;
  color: #333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-right: 20px;
}
.jcard.active .jc-route { color: #0C447C; }

.jc-meta {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 2px;
}

.jc-dates {
  font-size: 11px;
  color: var(--muted);
}

.jc-badge {
  font-size: 10px;
  background: var(--green-light);
  color: var(--green-dark);
  border-radius: 20px;
  padding: 1px 6px;
}
.jc-badge.am {
  background: var(--amber-light);
  color: var(--amber);
}

.add-jbtn {
  display: flex;
  align-items: center;
  gap: 7px;
  width: 100%;
  padding: 8px 11px;
  border: 0.5px dashed #c8c7d4;
  border-radius: var(--radius-sm);
  color: var(--muted);
  font-size: 12px;
  margin-top: 4px;
  transition: border-color 0.15s, color 0.15s;
}
.add-jbtn:hover { border-color: var(--blue); color: var(--blue); }

.add-jbtn-plus { font-size: 16px; line-height: 1; }

/* Sidebar settings footer */
.sidebar-settings { flex-shrink: 0; border-top: 0.5px solid #e8eaf0; padding: 12px 14px; }
.ss-header { font-size: 9px; letter-spacing: 0.09em; text-transform: uppercase; color: #bbb; margin-bottom: 10px; }
.ss-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 9px; }
.ss-row-tappable { cursor: pointer; border-radius: 5px; padding: 2px 0; }
.ss-row-link { text-decoration: none; }
.ss-row-right { display: flex; align-items: center; gap: 4px; }
.ss-value-tappable { font-size: 12px; font-weight: 500; color: #4a7fa5; text-align: right; }
.ss-row-tappable:hover .ss-value-tappable { color: #185FA5; }
.ss-chevron { font-size: 14px; color: #9ab8cc; line-height: 1; }
.ss-label { font-size: 12px; color: #888; }
.ss-value { font-size: 12px; font-weight: 500; color: var(--text); cursor: pointer; }
.ss-toggle { width: 32px; height: 17px; background: var(--primary); border-radius: 99px; position: relative; cursor: pointer; flex-shrink: 0; transition: background 0.15s; }
.ss-toggle.off { background: #dde0e8; }
.ss-toggle-knob { width: 13px; height: 13px; background: #fff; border-radius: 50%; position: absolute; top: 2px; right: 2px; box-shadow: 0 1px 2px rgba(0,0,0,0.2); transition: left 0.15s, right 0.15s; }
.ss-toggle.off .ss-toggle-knob { left: 2px; right: auto; }
.ss-divider { border: none; border-top: 0.5px solid #f0f1f5; margin: 8px 0; }
.ss-account-row { display: flex; justify-content: space-between; align-items: center; }
.ss-email { font-size: 11px; color: #aaa; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 130px; }
.ss-signout { font-size: 11px; color: #dc2626; cursor: pointer; }
.ss-nudge { background: var(--bg); border: 0.5px solid #e8eaf0; border-radius: 8px; padding: 10px 11px; }
.ss-nudge-text { font-size: 11px; color: #888; line-height: 1.5; margin-bottom: 8px; }
.ss-nudge-btn { width: 100%; font-size: 12px; font-weight: 600; color: var(--blue); background: #EEF4FB; border: 0.5px solid #b8d0ea; border-radius: 6px; padding: 7px; cursor: pointer; font-family: var(--font); }

/* ── Main content ─────────────────────────────────────────────────── */
.main {
  flex: 1;
  padding: 24px;
  overflow-x: hidden;
  min-width: 0;
}

/* Journey head */
.jhead {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 12px;
  gap: 12px;
}

.jh-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--primary);
}

.jh-sub {
  font-size: 12px;
  color: var(--muted);
  margin-top: 3px;
  /* Empty in the HTML and filled by JS, so without a reservation the whole page
     jumped down 18px once the sidebar fetch returned. (ZI-69) */
  min-height: 18px;
}

.jh-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.btn-ghost {
  font-size: 13px;
  color: #555;
  border: 0.5px solid #ccc;
  border-radius: 7px;
  padding: 6px 12px;
  background: var(--surface);
  transition: background 0.12s;
}
.btn-ghost:hover { background: var(--bg); }

.btn-check {
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  background: var(--primary);
  border-radius: 7px;
  padding: 6px 14px;
  transition: opacity 0.15s;
}
.btn-check:hover { opacity: 0.85; }
.btn-check:disabled { opacity: 0.4; cursor: not-allowed; }

/* Cards */
.card {
  background: var(--surface);
  border: 0.5px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 12px;
  overflow: hidden;
}

.card-hdr {
  padding: 12px 18px;
  border-bottom: 0.5px solid var(--bg);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.card-hdr-title {
  font-size: 10px;
  letter-spacing: 0.09em;
  color: var(--muted);
  text-transform: uppercase;
}

.last-checked-lbl {
  font-size: 11px;
  color: var(--muted);
}

.card-hdr-left {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.last-checked-label { font-size: 11px; color: var(--muted); }
.last-checked-label span { color: var(--muted-dark); font-weight: 500; }

/* ── Date chips ───────────────────────────────────────────────────── */
.date-chips-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  padding: 14px 18px;
  align-items: center;
  /* min-height: 48px removed. It reserved 48px for the 18px "No dates tracked
     yet." line, and once chips exist they set their own height anyway. (ZI-69) */
}

.no-dates-hint {
  font-size: 12px;
  color: var(--muted);
}

/* ZI-105: shown only to accounts at or over their date allowance. */
.date-limit-note {
  margin: 0;
  padding: 0 18px 14px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--muted);
}
.cal-count {
  margin: 10px 0 0;
  font-size: 12px;
  text-align: center;
  color: var(--muted);
}
.cal-count[hidden] { display: none; }
.date-limit-note a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

.date-chip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 5px;
  font-size: 12px;
  background: var(--border-light);
  border: 0.5px solid var(--border);
  border-radius: 20px;
  padding: 4px 11px;
  color: #333;
  white-space: nowrap;
}

.date-chip span { white-space: nowrap; }

.chip-remove {
  color: var(--muted);
  font-size: 13px;
  line-height: 1;
  min-width: 28px;
  min-height: 28px;
  padding: 0 4px;
  background: none;
  border: none;
  cursor: pointer;
  transition: color 0.12s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.chip-remove:hover { color: #c0392b; }

.add-chip-btn {
  font-size: 12px;
  color: var(--blue);
  border: 0.5px dashed #85B7EB;
  border-radius: 20px;
  padding: 4px 11px;
  background: none;
  transition: background 0.12s;
}
.add-chip-btn:hover { background: var(--blue-light); }

/* ── Near-term date nudge ─────────────────────────────────────────── */
.near-term-nudge {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 10px 18px 12px;
  padding: 11px 14px;
  background: #fdf8ed;
  border: 1px solid #e8d898;
  border-left: 3px solid #c9a227;
  border-radius: 6px;
  animation: nudge-in 0.2s ease;
}
@keyframes nudge-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.near-term-nudge svg { flex-shrink: 0; margin-top: 1px; }
.near-term-nudge p {
  margin: 0;
  font-size: 12.5px;
  color: #6b4f12;
  line-height: 1.55;
}
.near-term-nudge[hidden] { display: none; }

/* Calendar modal variant — sits above the Done button, spans the grid width */
.near-term-nudge--modal { margin: 16px 0 0; }

/* Onboarding variant — full-width, no side margin */
.ob-near-term-nudge {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 10px 0 6px;
  padding: 11px 14px;
  background: #fdf8ed;
  border: 1px solid #e8d898;
  border-left: 3px solid #c9a227;
  border-radius: 6px;
  animation: nudge-in 0.2s ease;
}
.ob-near-term-nudge svg { flex-shrink: 0; margin-top: 1px; }
.ob-near-term-nudge p {
  margin: 0;
  font-size: 12.5px;
  color: #6b4f12;
  line-height: 1.55;
}
.ob-near-term-nudge[hidden] { display: none; }

/* ── Price blocks ─────────────────────────────────────────────────── */
.pblock {
  border-bottom: 0.5px solid var(--bg);
  /* handleDeepLink() scrolls a ?date= target into view with block:'start',
     which would otherwise put it under the sticky topbar. (ZI-69) */
  scroll-margin-top: calc(var(--topbar-h) + 8px);
}
.pblock:last-child { border-bottom: none; }

.pblock-hdr {
  padding: 13px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  gap: 8px;
}
.pblock-hdr:hover { background: #faf9fc; }

.pb-left { flex: 1; min-width: 0; }

.pb-remove-date {
  border: 1px solid #f0cece;
  border-radius: var(--radius-xs);
  background: #fff4f4;
  color: #a13d3d;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 19px;
  line-height: 1;
  cursor: pointer;
}
.pb-remove-date:hover { background: #fce7e7; }
.pb-remove-date:focus-visible { outline: 2px solid #a13d3d; outline-offset: 2px; }
.pb-remove-date:disabled { opacity: 0.55; cursor: wait; }

.pb-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--primary);
}

.pb-away {
  font-size: 11px;
  color: var(--muted);
  margin-left: 8px;
}

.pb-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.pb-price {
  font-size: 15px;
  font-weight: 700;
  color: var(--primary);
  font-family: var(--mono);
}

.pb-drop {
  font-size: 11px;
  color: var(--green);
  background: var(--green-light);
  border-radius: 20px;
  padding: 2px 7px;
}

.pb-rise {
  font-size: 11px;
  color: var(--amber);
  background: var(--amber-light);
  border-radius: 20px;
  padding: 2px 7px;
}

.expand-btn {
  font-size: 13px;
  color: var(--muted-dark);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-xs);
  padding: 3px 9px;
  background: var(--surface);
  white-space: nowrap;
}
.expand-btn:hover { background: var(--bg); }

/* Price block body (expanded) */
.pblock-body { overflow: hidden; }
.pblock-body[hidden] { display: none; }

/* ── Combo content (best + 2nd combo) ────────────────────────────── */
.combo-content {
  padding: 0 18px 4px;
}

.combo-section {
  padding: 10px 0 8px;
  border-bottom: 0.5px solid var(--border-light);
}
.combo-section:last-child { border-bottom: none; }
.combo-section-second { opacity: 0.72; }

.combo-header-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}

.combo-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--muted);
}

.combo-total {
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.combo-was {
  font-size: 11px;
  color: var(--green);
  font-family: var(--font);
  font-weight: 400;
}

/* A higher total than the comparison is a rise, so it takes the rise colour. */
.combo-was-up {
  color: var(--amber);
}

.combo-leg-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 0;
  font-size: 13px;
}

.combo-leg-time {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 700;
  color: var(--primary);
  min-width: 40px;
  flex-shrink: 0;
}
.combo-leg-unavail {
  color: var(--muted);
  font-weight: 400;
  font-family: var(--font);
}

.combo-leg-route {
  flex: 1;
  font-size: 12px;
  color: #555;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.combo-leg-price {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 600;
  color: var(--primary);
}

/* ZI-47 — this leg's price is older than the newest check for the date.
   Indented past the 40px time column plus its 10px gap, so it lines up under
   the route rather than under the departure time. */
.combo-leg-stale {
  font-size: 11px;
  color: var(--muted);
  padding: 0 0 4px 50px;
}

.combo-trend {
  font-size: 13px;
  min-width: 16px;
  text-align: center;
  flex-shrink: 0;
}
.trend-down { color: var(--green); }
.trend-up   { color: #C17B00; }
.trend-flat { color: var(--muted); }

.combo-buy-row {
  margin-top: 8px;
}

.btn-buy {
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  background: var(--primary);
  border-radius: var(--radius-xs);
  padding: 5px 12px;
  transition: opacity 0.15s;
}
.btn-buy:hover { opacity: 0.85; }

/* ── Train tables (expanded per date) ────────────────────────────── */
.tbl-lbl {
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--muted);
  text-transform: uppercase;
  padding: 8px 18px;
  background: #faf9fc;
  border-top: 0.5px solid var(--bg);
  border-bottom: 0.5px solid var(--bg);
}

.trains-table, table.tt {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.trains-table th, table.tt th {
  font-size: 10px;
  letter-spacing: 0.07em;
  color: #bbb;
  text-transform: uppercase;
  padding: 8px 18px;
  text-align: left;
  background: #faf9fc;
  border-bottom: 0.5px solid var(--bg);
  font-weight: 500;
}

.trains-table td, table.tt td {
  padding: 9px 18px;
  color: #444;
  border-bottom: 0.5px solid var(--border-light);
  vertical-align: middle;
}

.trains-table tr:last-child td,
table.tt tr:last-child td { border-bottom: none; }

.train-time-cell .t-time {
  font-size: 13px;
  font-weight: 700;
  color: var(--primary);
  font-family: var(--mono);
}

.train-time-cell .t-arr-t,
.t-arr-t {
  font-size: 11px;
  color: #bbb;
  margin-left: 2px;
}

.train-journey-cell,
.t-journey { font-size: 12px; color: var(--muted-dark); }

.train-price-cell .t-price,
.t-price {
  font-size: 13px;
  font-weight: 600;
  color: var(--primary);
  font-family: var(--mono);
}

/* ZI-47 — same note, under the price in the expanded table. */
.t-stale {
  font-size: 11px;
  font-weight: 400;
  font-family: var(--font);
  color: var(--muted);
  white-space: nowrap;
  margin-top: 2px;
}

.train-sparkline-cell { width: 90px; min-width: 70px; }
.train-ticket-type-cell { color: var(--muted-dark); font-size: 12px; }

.buy-sm {
  font-size: 13px;
  color: var(--blue);
  border: 0.5px solid #85B7EB;
  border-radius: 5px;
  padding: 3px 9px;
  background: var(--surface);
  white-space: nowrap;
  display: inline-block;
}
.buy-sm:hover { background: var(--blue-light); }

.trains-table td:last-child { padding: 9px 10px; }
.trains-table th:last-child { padding: 8px 10px; }
.train-sparkline-cell { padding: 9px 6px !important; }

.muted-text { color: var(--muted); font-size: 12px; }

/* direct-only row (hidden — setting is in Edit journey panel) */
.direct-only-row { display: none; }

/* trains-expand-section lives inside pblock-body */
.trains-expand-section { margin-top: 4px; border-top: 0.5px solid var(--border-light); padding-top: 8px; }
.trains-expand-section[hidden] { display: none; }

/* ── Pills ────────────────────────────────────────────────────────── */
.pill {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  padding: 3px 10px;
  white-space: nowrap;
}
.pill-blue  { background: var(--blue-light);  color: #0C447C; }
.pill-amber { background: var(--amber-light); color: #633806; }
.pill-red   { background: #FCEBEB;            color: #791F1F; }
.pill-grey  { background: #F1EFE8;            color: #444441; }

/* ── Calendar modal ───────────────────────────────────────────────── */
.cal-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(8, 20, 40, 0.5);
  backdrop-filter: blur(4px);
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}
.cal-modal-overlay.open {
  opacity: 1;
  pointer-events: auto;
}

.cal-modal-card {
  background: var(--surface);
  border-radius: var(--radius);
  padding: 24px 20px 20px;
  position: relative;
  max-width: 620px;
  width: 100%;
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  box-shadow: 0 16px 60px rgba(8,20,40,0.2);
  transform: translateY(12px);
  transition: transform 0.2s;
}
.cal-modal-overlay.open .cal-modal-card { transform: translateY(0); }

.cal-modal-close {
  position: absolute;
  top: 8px;
  right: 10px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 0.5px solid var(--border);
  background: var(--bg);
  font-size: 16px;
  color: var(--muted-dark);
  display: flex;
  align-items: center;
  justify-content: center;
}
.cal-modal-close:hover { background: var(--border); }

/* ── Calendar ─────────────────────────────────────────────────────── */
.cal-nav {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}

.cal-nav button {
  background: transparent;
  color: var(--blue);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 5px 12px;
  font-size: 0.95rem;
  font-family: var(--font);
  cursor: pointer;
}
.cal-nav button:hover { background: var(--blue-light); }

.cal-month-label {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text);
  flex: 1;
  min-width: 0;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cal-inner { width: fit-content; margin: 0 auto; }

.cal-grids-row {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
@media (min-width: 600px) {
  .cal-grids-row { flex-direction: row; }
}

.cal-save-row { margin-top: 16px; text-align: center; }

.cal-month-heading {
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--muted-dark);
  margin-bottom: 10px;
}

.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 34px);
  gap: 3px;
}

.cal-header {
  width: 34px;
  height: 20px;
  text-align: center;
  font-size: 0.6rem;
  font-weight: 600;
  color: var(--muted);
  line-height: 20px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.cal-cell {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.82rem;
  font-weight: 400;
  border-radius: 6px;
  border: 1.5px solid transparent;
  cursor: pointer;
  user-select: none;
  transition: background 0.12s, border-color 0.12s;
  color: var(--text);
}
.cal-cell:hover:not(.disabled) {
  background: var(--blue-light);
  border-color: var(--blue);
}
.cal-cell.tracked {
  background: var(--primary);
  color: #fff;
  font-weight: 500;
  border-color: var(--primary);
}
.cal-cell.tracked:hover { background: #2a5a8c; }
.cal-cell.disabled { color: #ccc; pointer-events: none; }
.cal-cell.empty    { pointer-events: none; }
.cal-error { color: var(--red, #c0392b); font-size: 13px; margin: 0 0 8px; text-align: center; }

/* Cal save button */
.cal-save-row button {
  font-family: var(--font);
  font-size: 13px;
  font-weight: 500;
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  padding: 8px 24px;
  cursor: pointer;
}
.cal-save-row button:hover { opacity: 0.85; }

/* ── Edit journey slide-in panel ──────────────────────────────────── */
.edit-panel-overlay {
  position: fixed;
  inset: 0;
  background: rgba(8, 20, 40, 0.35);
  z-index: 400;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s;
}
.edit-panel-overlay.open {
  opacity: 1;
  pointer-events: auto;
}

.edit-panel {
  position: fixed;
  top: 0;
  right: 0;
  width: 380px;
  max-width: 100vw;
  height: 100vh;
  height: 100dvh; /* dynamic viewport height — adjusts as iOS address bar shows/hides */
  background: var(--surface);
  border-left: 0.5px solid var(--border);
  z-index: 401;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.edit-panel.open { transform: translateX(0); }

.edit-panel-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px;
  border-bottom: 0.5px solid var(--border);
  flex-shrink: 0;
}

.edit-panel-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--primary);
}

.edit-panel-close {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 0.5px solid var(--border);
  background: var(--bg);
  font-size: 16px;
  color: var(--muted-dark);
  display: flex;
  align-items: center;
  justify-content: center;
}
.edit-panel-close:hover { background: var(--border); }

.edit-panel-body {
  padding: 20px;
  padding-bottom: max(20px, env(safe-area-inset-bottom)); /* clear iOS home indicator */
  flex: 1;
  min-height: 0; /* allow flex child to shrink so overflow-y: auto activates */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* Form fields shared */
.ep-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ep-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted-dark);
}
.ep-checkbox-label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text);
}

.ep-direct-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
}
.ep-direct-label input[type="checkbox"] {
  width: 14px;
  height: 14px;
  accent-color: var(--primary);
  cursor: pointer;
}

.ep-error-msg {
  font-size: 13px;
  color: #dc2626;
  margin: 8px 0 0;
}

.price-check-error {
  font-size: 13px;
  color: #dc2626;
  padding: 10px 0;
  margin: 0;
}

.price-check-error strong {
  display: block;
  margin-bottom: 2px;
}

.price-check-error a {
  color: #dc2626;
  text-decoration: underline;
}

.ep-actions {
  display: flex;
  gap: 10px;
  padding-top: 4px;
}

.ep-save-btn {
  flex: 1;
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 600;
  font-family: var(--font);
  cursor: pointer;
  transition: opacity 0.15s;
}
.ep-save-btn:hover { opacity: 0.85; }
.ep-save-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.ep-save-btn--danger { background: #dc2626; }

.ep-cancel-btn {
  padding: 10px 16px;
  font-size: 13px;
  color: var(--muted-dark);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  font-family: var(--font);
  cursor: pointer;
}
.ep-cancel-btn:hover { background: var(--bg); }

/* ── Train picker (step 2 of edit panel) ──────────────────────────────────── */
.ep-step2-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}
.ep-step2-body > .ep-actions {
  padding: 12px 20px;
  border-top: 0.5px solid var(--border);
  flex-shrink: 0;
}
.ep-save-trains-btn { background: #0F6E56 !important; }
#ep-trains-list, #ep-trains-loading {
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}

/* ── Create-flow date picker (step 2 of add-journey panel) ───────────────── */
.ep-step2-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  margin: 0 0 4px;
}

.ep-cal-nav {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.ep-cal-nav button {
  background: transparent;
  color: var(--blue);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 4px 11px;
  font-size: 0.9rem;
  font-family: var(--font);
  cursor: pointer;
}
.ep-cal-nav button:hover { background: var(--blue-light); }
.ep-cal-nav button:disabled { opacity: 0.35; cursor: not-allowed; }
#ep-cal-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text);
  flex: 1;
  min-width: 0;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#ep-cal-grids {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.ep-date-hint {
  font-size: 12px;
  color: var(--muted);
  margin-top: 10px;
}

.ep-date-hint-error { color: var(--red, #c0392b); }

#ep-step-1, #ep-step-2 {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
#ep-step-1[hidden], #ep-step-2[hidden] { display: none; }

.ep-summary-strip {
  padding: 10px 20px;
  background: #f5f4fb;
  font-size: 13px;
  color: var(--muted-dark);
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #ebe9f5;
  flex-shrink: 0;
}
.ep-back-link {
  font-size: 12px;
  color: #1a3a5c;
  text-decoration: none;
  white-space: nowrap;
  margin-left: 8px;
}
.ep-back-link:hover { text-decoration: underline; }

.ep-trains-loading {
  padding: 24px 20px;
  color: var(--muted);
  font-size: 14px;
}

.ep-trains-group { margin-bottom: 4px; }

.ep-trains-group-hdr {
  padding: 10px 20px 4px;
  font-size: 12px;
  color: var(--muted);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.ep-trains-counter {
  font-size: 11px;
  font-weight: 700;
  color: #1a3a5c;
  white-space: nowrap;
  margin-left: 8px;
}

.ep-train-row {
  padding: 9px 20px;
  border-bottom: 0.5px solid #f5f4fb;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 13px;
  user-select: none;
}
.ep-train-row:hover { background: #fafafa; }
.ep-train-row.selected { background: #f0f7ff; }
.ep-train-row.disabled { opacity: 0.38; pointer-events: none; }
.ep-train-row input[type=checkbox] { accent-color: #1a3a5c; flex-shrink: 0; }

.ep-train-time { font-weight: 600; min-width: 38px; }
.ep-train-arr  { color: var(--muted-dark); min-width: 38px; }
.ep-train-dur  { color: var(--muted); font-size: 12px; min-width: 36px; }

.ep-pill-direct {
  background: #E1F5EE;
  color: #0F6E56;
  font-size: 11px;
  padding: 2px 7px;
  border-radius: 20px;
  white-space: nowrap;
}
.ep-pill-stops {
  background: #FAEEDA;
  color: #854F0B;
  font-size: 11px;
  padding: 2px 7px;
  border-radius: 20px;
  white-space: nowrap;
}

.ep-trains-empty {
  padding: 12px 20px;
  color: var(--muted);
  font-size: 13px;
}

.ep-select {
  font-family: var(--font);
  font-size: 16px;
  padding: 8px 10px;
  border: 0.5px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--text);
  outline: none;
  cursor: pointer;
}
.ep-select:focus { border-color: var(--blue); }

/* Time range */
.time-range-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.time-range-row input[type="time"] {
  font-family: var(--mono);
  font-size: 1rem;
  padding: 7px 10px;
  border: 0.5px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--text);
  outline: none;
}
.time-range-row input[type="time"]:focus { border-color: var(--blue); }

.time-range-sep {
  font-size: 0.75rem;
  color: var(--muted);
}

/* Station typeahead */
.station-picker-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 2px;
}

.station-input-wrap {
  position: relative;
  flex: 1;
}

.station-input {
  width: 100%;
  font-family: var(--font);
  font-size: 16px; /* 16px min — iOS Safari auto-zooms inputs below this */
  padding: 8px 10px;
  border: 0.5px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--text);
  outline: none;
}
.station-input:focus { border-color: var(--blue); }

.station-swap-btn {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  border: 0.5px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--muted-dark);
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
.station-swap-btn:hover { border-color: var(--blue); color: var(--blue); }

.station-dropdown {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: var(--surface);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: 0 4px 16px rgba(8,20,40,0.1);
  z-index: 100;
  overflow: hidden;
  /* The national list can return 20 matches for a query like "london". Without
     a height the box grew off the bottom of the screen and overflow:hidden
     clipped it. Roughly eight rows, then scroll. */
  max-height: 280px;
  overflow-y: auto;
}

.station-option {
  padding: 8px 12px;
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
}
.station-option:hover { background: var(--blue-light); }

.station-no-data {
  padding: 8px 12px;
  font-size: 12px;
  color: var(--muted);
  font-style: italic;
}

/* ── Modal (global settings) ──────────────────────────────────────── */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(8, 20, 40, 0.6);
  backdrop-filter: blur(4px);
  z-index: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.modal-overlay[hidden] { display: none; }

.modal-card {
  background: var(--surface);
  border-radius: var(--radius);
  max-width: 400px;
  width: 100%;
  padding: 28px 24px 24px;
  position: relative;
  box-shadow: 0 16px 60px rgba(8,20,40,0.2);
}

.modal-dismiss {
  position: absolute;
  top: 8px;
  right: 10px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 0.5px solid var(--border);
  background: var(--bg);
  font-size: 16px;
  color: var(--muted-dark);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.modal-dismiss:hover { background: var(--border); }

.gs-modal-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--primary);
}

/* ── Check progress ───────────────────────────────────────────────── */
#check-progress { margin-bottom: 16px; }

.check-progress-bar-track {
  height: 5px;
  background: var(--border);
  border-radius: 3px;
  overflow: visible;
  position: relative;
  margin: 14px 0 10px;
}
.check-progress-bar-fill {
  height: 100%;
  background: var(--primary);
  border-radius: 3px;
  width: 0%;
  transition: width 0.4s ease;
}
.check-progress-bar-fill.is-complete { background: var(--green); }

@keyframes trainchug {
  0%, 100% { transform: scaleX(-1) translateY(0); }
  50%      { transform: scaleX(-1) translateY(-1.5px); }
}

.check-train-emoji {
  position: absolute;
  top: -10px;
  left: 0%;
  transform: scaleX(-1);
  font-size: 16px;
  line-height: 1;
  pointer-events: none;
  transition: left 0.4s ease;
  animation: trainchug 0.45s ease-in-out infinite;
}
.check-train-emoji.is-arrived { animation: none; }

@media (prefers-reduced-motion: reduce) {
  .check-train-emoji { animation: none; }
}

/* ── Skeleton loading cards ───────────────────────────────────────── */
@keyframes shimmer {
  from { background-position: -600px 0; }
  to   { background-position:  600px 0; }
}

.sk-card {
  border-bottom: 0.5px solid var(--bg);
  padding: 13px 18px 14px;
}
.sk-card:last-child { border-bottom: none; }

.sk-bar {
  background: linear-gradient(90deg, #f0f1f5 25%, #e4e6ec 50%, #f0f1f5 75%);
  background-size: 600px 100%;
  animation: shimmer 1.4s infinite linear;
  border-radius: 4px;
}

.sk-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #e4e6ec;
  flex-shrink: 0;
}

.sk-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.sk-body-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 7px;
}

.sk-footer-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 10px;
}

.sk-date       { height: 13px; width: 120px; }
.sk-price-hdr  { height: 13px; width: 55px; }
.sk-time       { height: 12px; width: 36px; flex-shrink: 0; }
.sk-route      { height: 12px; flex: 1; }
.sk-price-body { height: 12px; width: 40px; flex-shrink: 0; }
.sk-total      { height: 12px; width: 80px; }
.sk-btn        { height: 26px; width: 90px; border-radius: 6px; }

.check-results-feed {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 140px;
  overflow: hidden;
}

.check-result-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  padding: 3px 0;
  border-bottom: 0.5px solid var(--border-light);
  color: var(--text);
}
.check-result-item:last-child { border-bottom: none; }

.cri-dir   { color: var(--muted); width: 36px; flex-shrink: 0; }
.cri-time  { font-family: var(--mono); font-size: 12px; width: 40px; flex-shrink: 0; }
.cri-date  { color: var(--muted); flex: 1; }
.cri-price { font-family: var(--mono); font-size: 12px; text-align: right; flex-shrink: 0; }

@keyframes result-fadein {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.check-result-fadein { animation: result-fadein 0.2s ease both; }

/* ── Spinner ──────────────────────────────────────────────────────── */
@keyframes spin { to { transform: rotate(360deg); } }
.spinner {
  display: inline-block;
  width: 13px;
  height: 13px;
  border: 2px solid var(--border);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  vertical-align: middle;
}

/* ── Feedback page (also used by /billing) ────────────────────────── */
.fb-page {
  background: #f0eff8;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.fb-wrap {
  max-width: 540px;
  margin: 40px auto;
  width: 100%;
  padding: 0 16px;
}

.fb-card {
  background: var(--surface);
  border: 0.5px solid #e0dfe8;
  border-radius: 14px;
  padding: 32px 36px;
}

.fb-card-top { margin-bottom: 28px; }

.fb-card-title {
  font-size: 22px;
  font-weight: 600;
  color: var(--primary);
  margin-bottom: 6px;
}

.fb-card-sub {
  font-size: 14px;
  color: var(--muted-dark);
  line-height: 1.5;
}

.fb-field { margin-bottom: 20px; }

.fb-label {
  display: block;
  font-size: 11px;
  letter-spacing: 0.07em;
  color: var(--muted);
  text-transform: uppercase;
  margin-bottom: 6px;
}

.fb-type-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
}

.fb-type-opt {
  border: 0.5px solid #d0cfda;
  border-radius: var(--radius-sm);
  padding: 9px 12px;
  text-align: center;
  font-size: 13px;
  font-family: var(--font);
  color: #444;
  background: var(--surface);
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s;
}
.fb-type-opt.selected {
  border-color: var(--blue);
  background: var(--blue-light);
  color: #0C447C;
  font-weight: 500;
}
.fb-type-opt:hover:not(.selected) { background: var(--bg); }

.fb-textarea, .fb-input {
  width: 100%;
  border: 0.5px solid #d0cfda;
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  font-size: 16px;
  color: var(--text);
  background: var(--surface);
  outline: none;
  font-family: var(--font);
}
.fb-textarea {
  resize: vertical;
  min-height: 110px;
  line-height: 1.5;
}
.fb-textarea:focus, .fb-input:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(24,95,165,0.1);
}

.fb-submit-btn {
  width: 100%;
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  padding: 13px;
  font-size: 15px;
  font-weight: 500;
  font-family: var(--font);
  cursor: pointer;
  margin-top: 8px;
  transition: opacity 0.15s;
}
.fb-submit-btn:hover { opacity: 0.85; }
.fb-submit-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.fb-privacy {
  font-size: 12px;
  color: #bbb;
  text-align: center;
  margin-top: 12px;
}

.fb-error {
  font-size: 13px;
  color: #c0392b;
  text-align: center;
  margin-top: 10px;
  min-height: 18px;
}

.fb-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 28px;
}

.fb-card-header .fb-card-top { margin-bottom: 0; }

.fb-close {
  font-size: 16px;
  color: var(--muted);
  text-decoration: none;
  line-height: 1;
  padding: 4px;
  flex-shrink: 0;
  margin-left: 16px;
}
.fb-close:hover { color: var(--text); }

.fb-success-card { text-align: center; }

.fb-success-body { padding: 16px 0 8px; }

.fb-success-icon {
  font-size: 28px;
  color: #27ae60;
  margin-bottom: 14px;
}

.fb-back-link {
  display: inline-block;
  margin-top: 20px;
  font-size: 14px;
  color: var(--blue);
  text-decoration: none;
}
.fb-back-link:hover { text-decoration: underline; }

/* ── Billing page ─────────────────────────────────────────────────── */
.bill-banner {
  background: var(--blue-light);
  border-radius: var(--radius-sm);
  padding: 11px 14px;
  margin-bottom: 26px;
}

.bill-banner-text {
  font-size: 13px;
  line-height: 1.5;
  color: #0C447C;
}

.bill-heading {
  font-size: 27px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--primary);
  margin-bottom: 8px;
}

.bill-subheading {
  font-size: 14px;
  color: var(--muted-dark);
  line-height: 1.5;
  margin-bottom: 22px;
}

/* Monthly / Annual segmented toggle */
.bill-toggle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  background: var(--bg);
  border-radius: 10px;
  padding: 4px;
  margin-bottom: 22px;
}

.bill-toggle-opt {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 0.5px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  padding: 10px 8px;
  font-family: var(--font);
  font-size: 14px;
  font-weight: 500;
  color: var(--muted-dark);
  transition: background 0.15s, color 0.15s;
}
.bill-toggle-opt:hover { color: var(--primary); }

.bill-toggle-opt.is-active {
  background: var(--surface);
  border-color: #dcdbe6;
  color: var(--primary);
  box-shadow: 0 1px 2px rgba(26, 58, 92, 0.06);
}

.bill-toggle-pill {
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.02em;
  background: var(--green-light);
  color: var(--green-dark);
  border-radius: 20px;
  padding: 2px 8px;
}

/* Selected-plan price block */
.bill-price {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 42px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--primary);
  line-height: 1.1;
}

.bill-price-sub {
  font-size: 13px;
  color: var(--muted-dark);
  margin-top: 8px;
}

.bill-months-free {
  display: inline-block;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.02em;
  background: var(--green-light);
  color: var(--green-dark);
  border-radius: 20px;
  padding: 3px 10px;
  vertical-align: middle;
}

.bill-plan-btn {
  width: 100%;
  border-radius: var(--radius-sm);
  padding: 11px;
  font-size: 13px;
  font-weight: 500;
  font-family: var(--font);
  margin-top: auto;
  transition: opacity 0.15s, background 0.15s;
}
.bill-plan-btn:hover { opacity: 0.85; }
.bill-plan-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.bill-plan-btn--filled {
  border: none;
  background: var(--primary);
  color: #fff;
}

/* Full-width primary CTA on the upgrade page */
.bill-plan-btn--lg {
  padding: 15px;
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 20px;
}

.bill-feature-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 13px;
  margin-bottom: 18px;
}

.bill-feature-item {
  display: flex;
  align-items: center;
  gap: 11px;
  font-size: 13.5px;
  line-height: 1.4;
  color: var(--muted-dark);
}

.bill-fi-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--blue);
}

.bill-divider {
  height: 0.5px;
  background: var(--border);
  margin: 24px 0;
}

.bill-guarantee {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  background: var(--green-light);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
}

.bill-guarantee-icon {
  flex-shrink: 0;
  margin-top: 1px;
}

.bill-guarantee-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--green-dark);
  margin-bottom: 4px;
}

.bill-guarantee-body {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--green-dark);
}
.bill-guarantee-body a {
  color: var(--green-dark);
  text-decoration: underline;
}

.bill-stripe-note {
  font-size: 12px;
  color: var(--muted);
  text-align: center;
  margin-top: 16px;
}

.bill-section-label {
  font-size: 11px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 14px;
}

/* ── Pro view ─────────────────────────────────────────────────────── */
.bill-status {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  background: #F4FBF8;
  border: 0.5px solid #CDE9DE;
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 26px;
}

.bill-status-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
  background: var(--green-light);
  color: var(--green);
}

.bill-status-head {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 15px;
  font-weight: 600;
  color: var(--primary);
  margin-bottom: 5px;
}

.bill-status-pill {
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.02em;
  background: var(--green-light);
  color: var(--green-dark);
  border-radius: 20px;
  padding: 2px 9px;
}

.bill-status-pill--ending {
  background: var(--amber-light);
  color: var(--amber);
}

.bill-status-body {
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted-dark);
}

.bill-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 11px 0;
  border-top: 0.5px solid var(--border-light);
  font-size: 13.5px;
}
.bill-row:last-of-type { border-bottom: 0.5px solid var(--border-light); }

.bill-row-key { color: var(--muted-dark); }

.bill-row-val {
  color: var(--primary);
  text-align: right;
}
.bill-row-val strong { font-weight: 600; }

.bill-portal-form { margin-top: 18px; }

.bill-switch {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 5px;
  margin-top: 8px;
  font-size: 13px;
  color: var(--muted-dark);
}

.bill-guarantee--muted {
  background: none;
  padding: 0;
  gap: 9px;
  color: var(--muted);
}
.bill-guarantee--muted .bill-guarantee-icon { margin-top: 2px; }
.bill-guarantee--muted .bill-guarantee-body {
  font-size: 12px;
  color: var(--muted);
}
.bill-guarantee--muted .bill-guarantee-body strong {
  font-weight: 600;
  color: var(--muted-dark);
}
.bill-guarantee--muted .bill-guarantee-body a { color: var(--muted-dark); }

.bill-success {
  font-size: 13px;
  color: var(--green-dark);
  background: var(--green-light);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  margin-bottom: 22px;
}

.bill-manage-link {
  font-size: 13px;
  font-family: var(--font);
  color: var(--blue);
  padding: 0;
}
.bill-manage-link:hover { text-decoration: underline; }

/* ── Responsive — tablet / phone ─────────────────────────────────── */
@media (max-width: 900px) {
  .sidebar { display: none; }
  .sidebar-mobile {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--surface);
    border-bottom: 0.5px solid var(--border);
    padding: 8px 16px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .sidebar-mobile::-webkit-scrollbar { display: none; }
  .sidebar-mobile-inner {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
  }
  .add-j-chip {
    font-size: 12px;
    color: var(--blue);
    border: 0.5px dashed #85B7EB;
    border-radius: 20px;
    padding: 4px 10px;
    white-space: nowrap;
    flex-shrink: 0;
    background: none;
  }
  .sidebar-mobile .date-chip {
    width: auto;
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .trains-expand-section {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .layout { flex-direction: column; }
  .main { padding: 16px; }
  .jhead { flex-wrap: wrap; }
  .jh-actions { width: 100%; }
  .btn-ghost, .btn-check { flex: 1; text-align: center; }
}

.journey-type-toggle {
  display: flex;
  background: var(--bg);
  border-radius: var(--radius-sm);
  padding: 3px;
  gap: 2px;
  margin-bottom: 16px;
}

.jt-btn {
  flex: 1;
  text-align: center;
  padding: 6px 0;
  font-size: 13px;
  font-family: var(--font);
  font-weight: 400;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  background: transparent;
  color: var(--muted-dark);
  transition: background 0.15s, color 0.15s;
}

.jt-btn--active {
  background: var(--primary);
  color: #fff;
  font-weight: 500;
}

@media (max-width: 600px) {
  .journey-type-toggle { margin-bottom: 12px; }
  .jt-btn { font-size: 13px; padding: 7px 0; min-height: 36px; }
  .topbar { padding: 0 14px; }
  .uname  { display: none; }
  .v1-pill { display: none; }
  .last-checked-lbl { display: none; }
  .last-checked-label { display: none; }
  .main { padding: 12px; }
  .trains-table td:nth-child(2),
  .trains-table th:nth-child(2),
  .trains-table td:nth-child(5),
  .trains-table th:nth-child(5) { display: none; }
  .trains-table th { padding: 8px 10px; }
  .trains-table td { padding: 9px 10px; }
  .trains-table td:last-child,
  .trains-table th:last-child { padding: 8px 6px; }
  .train-sparkline-cell { width: 60px; min-width: 50px; padding: 6px 4px !important; }
  .pblock-hdr { flex-wrap: wrap; }
  .pb-right { gap: 6px; }
  .expand-btn { font-size: 10px; padding: 3px 7px; }
  .cal-grid { grid-template-columns: repeat(7, 32px); gap: 2px; }
  .cal-cell, .cal-header { width: 32px; }
  .cal-cell { height: 32px; }
  .fb-card { padding: 24px 20px; }
  .fb-type-grid { grid-template-columns: 1fr; }
}

/* ── Onboarding ────────────────────────────────────────────────── */
.ob-main {
  flex: 1;
  padding: 20px 24px 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow-x: hidden;
  min-width: 0;
}

/* Value intro — frames the wizard, not a step */
.ob-intro {
  width: 100%;
  max-width: 580px;
  background: linear-gradient(180deg, var(--blue-light) 0%, var(--surface) 100%);
  border: 0.5px solid var(--blue-mid);
  border-radius: var(--radius-sm);
  padding: 16px 18px;
  margin-bottom: 14px;
}
.ob-intro[hidden] { display: none; }

/* Which step is on screen, published on <body> by goToStep(). Step 3 is the
   tallest, and a date inside 45 days adds the near-term warning under the
   calendar, which together pushed "Start tracking" below the fold. The intro
   costs 118px and has already done its framing job by the time someone is
   choosing dates. The phone rules go further: see the media query below. (ZI-69) */
body[data-ob-step="3"] .ob-intro { display: none; }

/* One month at a time on a phone, so the nav names one month rather than a
   range that is half off screen. Both spans are always filled by
   renderCalendar(); only one is ever shown. */
.ob-cal-title-single { display: none; }
.ob-intro-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--primary);
  margin: 0 0 6px;
  letter-spacing: -0.01em;
}
.ob-intro-body {
  font-size: 13px;
  line-height: 1.55;
  color: var(--text);
  margin: 0;
}
.ob-intro-stat { color: var(--blue); font-weight: 600; }

.ob-stepper {
  display: flex;
  align-items: center;
  margin-bottom: 18px;
  width: 100%;
  max-width: 580px;
  justify-content: center;
}

.ob-stepper[hidden] { display: none; }

.ob-step-item { display: flex; align-items: center; gap: 8px; }

.ob-step-num {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  flex-shrink: 0;
}
.ob-step-num.active { background: var(--primary); color: #fff; }
.ob-step-num.done   { background: var(--green-light); color: var(--green); font-size: 14px; }
.ob-step-num.todo   { background: var(--border-light); color: var(--muted); border: 0.5px solid var(--border); }

.ob-step-label { font-size: 13px; font-weight: 500; }
.ob-step-label.active { color: var(--primary); }
.ob-step-label.done   { color: var(--green); }
.ob-step-label.todo   { color: var(--muted); }

.ob-step-line {
  width: 32px;
  height: 1px;
  background: var(--border);
  margin: 0 4px;
  flex-shrink: 0;
}
.ob-step-line.done { background: #5DCAA5; }

/* Card */
.onboard-card {
  background: var(--surface);
  border: 0.5px solid var(--border);
  border-radius: var(--radius);
  width: 100%;
  max-width: 580px;
  overflow: hidden;
}

.oc-header {
  padding: 20px 24px 16px;
  border-bottom: 0.5px solid var(--border-light);
}
.oc-title { font-size: 17px; font-weight: 700; color: var(--primary); margin-bottom: 3px; }
.oc-sub   { font-size: 13px; color: var(--muted); line-height: 1.5; }

.oc-body { padding: 20px 24px; }

.oc-footer {
  padding: 14px 24px;
  border-top: 0.5px solid var(--border-light);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.ob-next-btn {
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  background: var(--primary);
  border: none;
  border-radius: var(--radius-sm);
  padding: 9px 22px;
  cursor: pointer;
  font-family: var(--font);
  transition: opacity 0.15s;
}
.ob-next-btn:hover:not(:disabled) { opacity: 0.85; }
.ob-next-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.ob-next-btn.green { background: var(--green); }

.ob-back-link {
  font-size: 13px;
  color: var(--muted);
  cursor: pointer;
  background: none;
  border: none;
  font-family: var(--font);
  padding: 0;
}
.ob-back-link:hover { color: var(--muted-dark); }

/* Step 1 — stations + time */
.ob-field-row {
  display: grid;
  grid-template-columns: 1fr 36px 1fr;
  gap: 8px;
  align-items: end;
  margin-bottom: 18px;
}

.ob-label {
  font-size: 11px;
  letter-spacing: 0.07em;
  color: var(--muted);
  text-transform: uppercase;
  margin-bottom: 6px;
  display: block;
}

.ob-input {
  width: 100%;
  height: 38px;
  border: 0.5px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0 12px;
  font-size: 16px;
  color: var(--primary);
  background: var(--surface);
  outline: none;
  font-family: var(--font);
}
.ob-input:focus { border-color: var(--blue); }

.ob-swap-wrap {
  display: flex;
  align-items: flex-end;
}

.ob-swap-btn {
  width: 36px;
  height: 38px;
  border: 0.5px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  cursor: pointer;
  color: var(--muted-dark);
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.15s, color 0.15s;
}
.ob-swap-btn:hover { border-color: var(--blue); color: var(--blue); }

.ob-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 18px;
}

.ob-time-row { display: flex; align-items: center; gap: 8px; }

.ob-time-input {
  width: 116px;
  height: 38px;
  border: 0.5px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0 10px;
  font-size: 16px;
  color: var(--primary);
  background: var(--surface);
  outline: none;
  font-family: var(--mono);
}
.ob-time-input:focus { border-color: var(--blue); }

.ob-time-sep { font-size: 13px; color: var(--muted); }

.ob-check-row { display: flex; align-items: center; gap: 8px; }
.ob-check-row input { accent-color: var(--blue); }
.ob-check-row label { font-size: 14px; color: #555; cursor: pointer; }

.ob-section-label  { display: none; }
.ob-section-divider { display: none; }

/* Step 2 — railcard */
.rc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px; }

.rc-opt {
  border: 0.5px solid var(--border);
  border-radius: 10px;
  padding: 12px 16px;
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s;
}
.rc-opt:hover:not(.selected) { border-color: #aaa; }
.rc-opt.selected { border-color: var(--blue); background: var(--blue-light); }
.rc-opt.selected .rc-name { color: #0C447C; }

.rc-name { font-size: 14px; font-weight: 600; color: #333; margin-bottom: 2px; }
.rc-desc { font-size: 12px; color: var(--muted); }

.rc-none {
  border: 0.5px solid var(--border);
  border-radius: 10px;
  padding: 12px 16px;
  cursor: pointer;
  font-size: 14px;
  color: var(--muted-dark);
  transition: border-color 0.12s, background 0.12s;
}
.rc-none:hover:not(.selected) { border-color: #aaa; }
.rc-none.selected { border-color: var(--blue); background: var(--blue-light); color: #0C447C; font-weight: 500; }

/* Step 3 — calendar */
.ob-cal-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px 0;
}
.ob-cal-title { font-size: 13px; font-weight: 600; color: var(--primary); }

.ob-cal-arrow {
  width: 36px;
  height: 36px;
  border: 0.5px solid var(--border);
  border-radius: var(--radius-xs);
  background: var(--surface);
  cursor: pointer;
  color: var(--muted-dark);
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font);
  transition: background 0.12s;
}
.ob-cal-arrow:hover:not(:disabled) { background: var(--bg); }
.ob-cal-arrow:disabled { opacity: 0.3; cursor: default; }

.ob-cal-grids {
  display: flex;
  gap: 0;
  padding: 12px 24px 0;
}

.ob-cal-month { flex: 1; min-width: 0; }
.ob-cal-month + .ob-cal-month { margin-left: 16px; }

.ob-cal-month-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted-dark);
  margin-bottom: 8px;
  text-align: center;
}

.ob-cal-month .cal-grid {
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  width: 100%;
}
.ob-cal-month .cal-header { width: auto; font-size: 9px; }
.ob-cal-month .cal-cell   { width: auto; height: 32px; font-size: 12px; }

.ob-chips-area {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  padding: 12px 24px 4px;
  min-height: 36px;
}

.ob-chip {
  font-size: 12px;
  background: var(--blue-light);
  border: 0.5px solid var(--blue-mid);
  border-radius: 20px;
  padding: 4px 11px;
  color: #0C447C;
  font-weight: 500;
}

.ob-date-hint {
  font-size: 12px;
  color: var(--muted);
  text-align: center;
  padding: 4px 24px 12px;
}

.ob-date-hint-error { color: var(--red, #c0392b); }

/* Pending journey card in sidebar */
.ob-pending-jcard {
  border-radius: var(--radius-sm);
  padding: 9px 11px;
  background: var(--border-light);
  border: 0.5px dashed var(--border);
  margin-bottom: 4px;
}
.ob-pending-jcard .jc-route { color: #bbb; }
.ob-pending-jcard .jc-dates { color: #ccc; }

/* Guest sign-in overlay */
.ob-guest-overlay {
  position: fixed;
  inset: 0;
  background: rgba(8, 20, 40, 0.55);
  backdrop-filter: blur(4px);
  z-index: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}
.ob-guest-overlay.open { opacity: 1; pointer-events: auto; }

.ob-guest-card {
  background: var(--surface);
  border-radius: var(--radius);
  padding: 32px 28px 28px;
  max-width: 400px;
  width: 100%;
  max-height: calc(100dvh - 48px);
  overflow-y: auto;
  box-shadow: 0 16px 60px rgba(8,20,40,0.2);
  position: relative;
  transform: translateY(10px);
  transition: transform 0.2s;
}
.ob-guest-overlay.open .ob-guest-card { transform: translateY(0); }

.ob-guest-close {
  position: absolute;
  top: 8px;
  right: 10px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 0.5px solid var(--border);
  background: var(--bg);
  font-size: 16px;
  color: var(--muted-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.ob-guest-close:hover { background: var(--border); }

.ob-guest-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--primary);
  margin-bottom: 8px;
}

.ob-guest-body {
  font-size: 14px;
  color: var(--muted-dark);
  line-height: 1.55;
  margin-bottom: 24px;
}

.ob-google-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  padding: 11px 16px;
  font-size: 14px;
  font-weight: 600;
  font-family: var(--font);
  cursor: pointer;
  transition: opacity 0.15s;
}
.ob-google-btn:hover { opacity: 0.85; }

/* Guest modal — subtitle, bullets, secondary button, caveat */
.ob-guest-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--blue-light);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  margin-bottom: 14px;
}

.ob-guest-subtitle {
  font-size: 13.5px;
  color: var(--muted-dark);
  line-height: 1.55;
  margin-bottom: 18px;
}

.ob-guest-bullets {
  background: var(--bg);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  margin-bottom: 22px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.ob-guest-bullet {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 13px;
  color: var(--text);
  line-height: 1.45;
}

.ob-guest-bullet::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--blue);
  margin-top: 4px;
  flex-shrink: 0;
}

.ob-guest-continue-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  background: transparent;
  color: var(--text);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 11px 16px;
  font-size: 14px;
  font-weight: 500;
  font-family: var(--font);
  cursor: pointer;
  transition: background 0.15s;
  margin-top: 10px;
}
.ob-guest-continue-btn:hover { background: var(--bg); }
.ob-guest-continue-btn:disabled { opacity: 0.6; cursor: default; }

.ob-guest-caveat {
  font-size: 11.5px;
  color: var(--muted);
  text-align: center;
  margin-top: 14px;
  line-height: 1.55;
}

/* Guest dashboard banner */
.guest-banner {
  background: #FFFBEB;
  border-bottom: 0.5px solid #F5E6A3;
  padding: 9px 24px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.guest-banner-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #c8850a;
  flex-shrink: 0;
}

.guest-banner-text {
  font-size: 12px;
  color: #78510a;
  flex: 1;
  line-height: 1.4;
}

.guest-banner-signin {
  font-size: 12px;
  font-weight: 600;
  color: #185FA5;
  background: #EEF4FB;
  border: 0.5px solid #b8d0ea;
  border-radius: 20px;
  padding: 4px 12px;
  white-space: nowrap;
  flex-shrink: 0;
  transition: opacity 0.15s;
}
.guest-banner-signin:hover { opacity: 0.85; }

.guest-banner-dismiss {
  font-size: 16px;
  color: #bbb;
  background: none;
  border: none;
  cursor: pointer;
  line-height: 1;
  padding: 0 2px;
  flex-shrink: 0;
  font-family: var(--font);
}
.guest-banner-dismiss:hover { color: #888; }

/* Guest sidebar — "Guest session" label under journey name */
.jc-guest-label {
  font-size: 11px;
  color: var(--muted);
  font-style: italic;
  margin-top: 1px;
}

/* Railcard "not saved" note */
.gs-not-saved {
  font-size: 11px;
  color: var(--muted);
  font-style: italic;
  margin-left: 4px;
}

@media (max-width: 600px) {
  .ob-cal-grids { flex-direction: column; }
  /* One month, not two stacked. Two cost 457px on a phone, which is most of
     why step 3 would not fit. The arrows already move a single month at a
     time, so every month is still reachable; this only stops the second one
     being drawn. Desktop keeps both, side by side. (ZI-69) */
  .ob-cal-month + .ob-cal-month { display: none; }
  .ob-cal-title-range  { display: none; }
  .ob-cal-title-single { display: inline; }
  .ob-two-col { grid-template-columns: 1fr; gap: 0; }
  .ob-two-col > div + div { margin-top: 16px; }
  .ob-main { padding: 20px 12px; }
  /* Guest banner — mobile layout */
  .guest-banner { flex-wrap: nowrap; align-items: center; padding: 8px 16px; gap: 8px; }
  .guest-banner-dismiss { font-size: 18px; line-height: 1; opacity: 0.5; }

  /* Onboarding FROM/TO — stack vertically, full width to match time boxes */
  .ob-field-row { grid-template-columns: 1fr; gap: 6px; }
  .ob-swap-wrap { justify-content: center; align-items: center; }
  .t-arr-t { display: none; }
  .fb-btn { display: none; }
}

@media (max-width: 600px) {
  /* Price block header — two rows */
  .pblock-hdr { flex-direction: column; gap: 5px; }
  .pb-left { display: flex; justify-content: space-between; align-items: center; gap: 8px; width: 100%; }
  .pb-away { white-space: nowrap; }
  .pb-right { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; width: 100%; }
  .expand-btn { margin-left: auto; font-size: 12px; padding: 5px 11px; min-height: 36px; }
  .pb-remove-date { margin-left: auto; width: 36px; height: 36px; }

  /* Expanded train table — flex card rows, no horizontal scroll */
  .trains-expand-section { overflow-x: unset; -webkit-overflow-scrolling: unset; }
  .trains-table { display: block; }
  .trains-table thead { display: none; }
  .trains-table tbody { display: block; }
  .trains-table tr {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 9px 18px 4px;
    border-bottom: 0.5px solid #f0f1f5;
    flex-wrap: wrap;
  }
  .trains-table tr:last-child { border-bottom: none; }
  .trains-table td { display: block; padding: 0; border: none; }
  .trains-table td:last-child { display: block; padding: 0; border: none; }

  /* Column sizing */
  .trains-table td:nth-child(1) { flex: 0 0 40px; }
  /* Un-hide journey cell as route column */
  .trains-table td:nth-child(2) { display: block; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .trains-table td:nth-child(3) { flex: 0 0 auto; }
  /* Sparkline — wraps to full-width second row */
  .trains-table td:nth-child(4) { flex: 0 0 100%; order: 10; padding: 2px 0 8px 0 !important; }
  .trains-table td:nth-child(5) { display: none; }
  /* Buy — sits in first row, order before sparkline */
  .trains-table td:nth-child(6) { flex: 0 0 auto; order: 4; }
  .train-sparkline-cell { width: 100% !important; min-width: 0 !important; padding: 2px 0 8px 0 !important; }

  /* Station picker — stack vertically */
  .station-picker-row { flex-direction: column; align-items: stretch; }
  .station-swap-btn { align-self: center; }
  .station-input { width: 100%; font-size: 16px; } /* 16px min — iOS Safari auto-zooms inputs below this */

  /* Tap targets */
  .btn-check, .btn-ghost { padding: 9px 14px; min-height: 36px; }
  .date-chip { padding: 7px 12px; font-size: 13px; min-height: 36px; }
  .chip-remove { min-height: 36px; min-width: 36px; }
  .journey-chip { padding: 7px 12px; font-size: 13px; min-height: 36px; }
}

/* ── Onboarding done — the trial, stated as a status ─────────────── */
/* This replaced a day-15 fork: two equal cards side by side, "Upgrade to Pro
   £4.99" and "Stay on Free", with an "or" between them under the heading
   "From day 15, it's your choice". That is the grammar of a pricing table, so
   it read as a decision to take right now and the button below it looked like
   a third option. Nothing on this screen is a choice: the trial is already
   running. So what is happening now gets the only coloured card, and day 15
   drops to a quiet footnote panel with the do-nothing path first. */
.ob-done-card { padding: 30px 26px 24px; text-align: center; }

/* Live status, not a tick. A tick says "saved"; this says "Pro is on". */
.ob-live-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--green-light);
  color: var(--green-dark);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 5px 11px 5px 9px;
  border-radius: 999px;
  margin-bottom: 14px;
}
.ob-live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green);
  flex-shrink: 0;
}

.ob-done-title {
  font-size: 21px;
  font-weight: 700;
  color: var(--primary);
  margin: 0 0 10px;
  letter-spacing: -0.01em;
}
.ob-done-sub {
  font-size: 13px;
  line-height: 1.6;
  color: var(--text);
  margin: 0 auto 22px;
  max-width: 400px;
}

/* Days 1-14 — the active state, full width so nothing sits beside it to be
   weighed against. */
.ob-now-card {
  border: 0.5px solid var(--green);
  background: var(--green-light);
  border-radius: var(--radius-sm);
  padding: 15px 16px;
  text-align: left;
}
.ob-now-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}
.ob-now-title {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--green-dark);
}
.ob-now-days {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--green-dark);
  opacity: 0.75;
  flex-shrink: 0;
}
.ob-now-body {
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--text);
  margin: 0;
}
.ob-now-free {
  font-size: 12px;
  font-weight: 600;
  color: var(--green-dark);
  margin: 8px 0 0;
}

/* Day 15 — a heads-up, deliberately quieter than the card above it. Two rows,
   no borders around either, so neither can read as a button. */
.ob-later {
  margin-top: 14px;
  border: 0.5px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--border-light);
  padding: 14px 16px;
  text-align: left;
}
.ob-later-label {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted-dark);
  margin-bottom: 10px;
}
.ob-later-row {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 12.5px;
  line-height: 1.5;
}
.ob-later-row + .ob-later-row {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 0.5px solid var(--border);
}
.ob-later-key {
  flex-shrink: 0;
  width: 78px;
  font-weight: 600;
  color: var(--text);
}
.ob-later-val { color: var(--muted-dark); }
.ob-later-val b { font-weight: 600; color: var(--text); }
.ob-later-foot {
  font-size: 12px;
  line-height: 1.5;
  color: var(--muted-dark);
  margin: 11px 0 0;
}

.ob-done-actions {
  margin-top: 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ob-done-btn { width: 100%; padding: 13px; }

/* Was a small grey text link. It is a real button now, but still plainly the
   second of the two — the dashboard is what this screen is for. The id and the
   hidden attribute are unchanged, so showDone() still governs when it appears. */
.ob-done-plans {
  display: block;
  width: 100%;
  padding: 11px;
  text-align: center;
  font-size: 13.5px;
  font-weight: 600;
  font-family: var(--font);
  color: var(--primary);
  background: var(--surface);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-sm);
  text-decoration: none;
}
.ob-done-plans:hover { border-color: var(--muted); color: var(--blue); }
.ob-done-plans[hidden] { display: none; }

/* ── Onboarding Step 1 — mobile layout refinements ───────────────── */
@media (max-width: 600px) {
  /* Section group labels */
  .ob-section-label {
    display: block;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 10px;
  }
  /* Divider between route and time sections */
  .ob-section-divider {
    display: block;
    border-top: 0.5px solid var(--border);
    margin: 16px 0;
  }
  /* Time inputs — equal width */
  .ob-time-input { flex: 1; width: auto; min-width: 0; }
  /* Next button — full width, clearly tappable */
  #ob-step-1 .oc-footer { flex-direction: column; }
  #ob-step-1 .ob-next-btn { width: 100%; padding: 14px; text-align: center; }
  /* Card header — reduce top whitespace */
  .oc-header { padding: 16px 20px; }

  /* Value intro — tighter, still above the stepper */
  .ob-intro { padding: 14px 15px; margin-bottom: 16px; }
  .ob-intro-title { font-size: 15px; }

  /* Done screen — the after-that rows stack rather than squeezing */
  .ob-done-card { padding: 24px 18px 20px; }
  .ob-done-title { font-size: 19px; }
  .ob-later-row { flex-direction: column; gap: 2px; }
  .ob-later-key { width: auto; }
}

/* ── Mobile avatar button (hidden on desktop) ───────────────────────── */
.mobile-avatar-btn { display: none; }

/* ── Guest settings button (hidden on desktop) ──────────────────────── */
.guest-settings-btn { display: none; }

/* ── Plan nav button, phone-width version (mobile-only, new element) ─ */
.plan-nav-btn-mobile {
  display: none;
  font-size: 12px;
  font-weight: 600;
  color: var(--amber);
  background: var(--amber-light);
  border: 0.5px solid #E8C88A;
  border-radius: 20px;
  padding: 5px 12px;
  text-decoration: none;
  align-items: center;
  white-space: nowrap;
  flex-shrink: 0;
}
@media (max-width: 600px) {
  .plan-nav-btn-mobile { display: inline-flex; }
}

/* ── Feedback nav button (mobile-only, new element) ────────────────── */
.feedback-nav-btn {
  display: none;
  font-size: 12px;
  font-weight: 500;
  color: #185FA5;
  background: #EEF4FB;
  border: 0.5px solid #b8d0ea;
  border-radius: 20px;
  padding: 5px 12px;
  text-decoration: none;
  align-items: center;
}
@media (max-width: 600px) {
  .feedback-nav-btn { display: inline-flex; }
}
.mobile-signin-btn {
  display: none;
}
@media (max-width: 600px) {
  .mobile-signin-btn {
    display: inline-flex;
    font-size: 11px;
    font-weight: 600;
    color: #fff;
    background: #1a3a5c;
    border: none;
    border-radius: 20px;
    padding: 5px 12px;
    cursor: pointer;
    white-space: nowrap;
    text-decoration: none;
    align-items: center;
  }
  .tb-divider {
    width: 1px;
    height: 16px;
    background: #e8eaf0;
    flex-shrink: 0;
  }
}

/* ── Banner — mobile overrides ──────────────────────────────────────── */
@media (max-width: 600px) {
  .banner { padding: 10px 16px; }
  .ban-icon { display: none; }
  .ban-text { font-size: 12px; font-weight: 400; line-height: 1.5; }
}

/* ── Guest / sign-in banner — mobile overrides ──────────────────────── */
@media (max-width: 600px) {
  .guest-banner { padding: 10px 16px; }
}

/* ── Date chips — compact mobile size ──────────────────────────────── */
@media (max-width: 600px) {
  .date-chip { font-size: 12px; padding: 3px 9px; border-radius: 20px; min-height: unset; }
  .chip-remove { min-height: unset; min-width: unset; }
}

/* ── Sticky check bar (new element, hidden by default) ──────────────── */
#sticky-check-bar { display: none; }

/* ── Onboarding step 3 on a phone ──────────────────────────────────── */
@media (max-width: 600px) {
  /* Step 2's railcard grid is 297px on its own, which put "Next: Pick dates"
     104px below the fold. The intro comes off here too, which is enough on its
     own: the whole step then fits with room to spare. (ZI-69) */
  body[data-ob-step="2"] .ob-intro { display: none; }

  /* Step 3 needs more than that. Even showing one month, the calendar plus the
     chips plus the near-term warning is taller than a phone screen, so the
     button is pinned rather than chased down the page. Same pattern as
     #sticky-check-bar on the dashboard, and the same trap: a fixed bar covers
     whatever is beneath it, so .ob-main and the site footer both have to clear
     it. Scoped to step 3, so steps 1 and 2 gain no dead space. */
  body[data-ob-step="3"] #ob-step-3 .oc-footer {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 50;
    margin: 0;
    padding: 10px 16px calc(14px + env(safe-area-inset-bottom, 0px));
    background: var(--surface);
    border-top: 0.5px solid var(--border);
  }
  body[data-ob-step="3"] .ob-main,
  body[data-ob-step="3"] .site-footer {
    padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px));
  }
}

@media (max-width: 600px) {
  #sticky-check-bar {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #fff;
    border-top: 0.5px solid #e2e4ea;
    padding: 9px 16px 14px;
    align-items: center;
    justify-content: space-between;
    z-index: 100;
  }
  .sticky-meta { display: flex; flex-direction: column; gap: 1px; }
  .sticky-lbl { font-size: 11px; color: #bbb; display: block; }
  #sticky-last-checked { font-size: 12px; color: #555; font-weight: 500; }
  #sticky-check-btn {
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    background: #1a3a5c;
    border: none;
    border-radius: 8px;
    padding: 10px 18px;
    cursor: pointer;
    white-space: nowrap;
  }
  #sticky-check-btn:disabled { background: #7a98b8; cursor: not-allowed; }
  /* Prevent content hiding behind sticky bar */
  .main { padding-bottom: 70px; }
  /* The footer is a body-level element, not inside .main, so it had no such
     compensation. That only went unnoticed because the page always overscrolled
     and you could scroll past the bar. Now that a short dashboard fits the
     screen exactly, the Privacy and Terms links would sit behind the bar for
     good. The sibling selector scopes this to the dashboard, the only template
     that contains the bar, so no other page gains dead space. (ZI-69) */
  #sticky-check-bar ~ .site-footer {
    padding-bottom: calc(70px + env(safe-area-inset-bottom, 0px));
  }
  /* Hide original button on mobile */
  #check-now-btn { display: none; }
}

/* ── Mobile avatar + settings sheet ────────────────────────────────── */
@media (max-width: 600px) {
  .mobile-avatar-btn {
    display: flex;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #1a3a5c;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: none;
    flex-shrink: 0;
  }
  .avatar-circle { display: none; }
  .signout-btn   { display: none; }
  .fb-btn        { display: none; }

  /* The nav is tight on a phone — the full-width pill doesn't fit next to
     Feedback and the avatar button. .plan-nav-btn-mobile carries the upgrade
     path instead. */
  .plan-nav-btn { display: none; }

  .settings-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.3);
    z-index: 200;
  }
  .settings-sheet {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #fff;
    border-radius: 14px 14px 0 0;
    z-index: 210;
    padding-bottom: 12px;
    max-height: 85vh;
    overflow-y: auto;
  }
  .sheet-handle {
    width: 36px;
    height: 4px;
    background: #dde0e8;
    border-radius: 99px;
    margin: 10px auto 0;
  }
  .sheet-header {
    padding: 14px 16px 10px;
    border-bottom: 0.5px solid #f0f1f5;
  }
  .sheet-title { font-size: 15px; font-weight: 700; color: #1a1a2e; }
  .sheet-sub   { font-size: 12px; color: #aaa; margin-top: 2px; }
  .sheet-back  {
    font-size: 20px;
    color: #aaa;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    line-height: 1;
  }
  .settings-list { padding: 4px 0; }
  .settings-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 0.5px solid #f5f6f8;
    cursor: pointer;
    text-decoration: none;
  }
  .settings-item:last-child { border-bottom: none; }
  .si-left { display: flex; align-items: center; gap: 11px; }
  .si-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    flex-shrink: 0;
  }
  .si-icon-blue  { background: #EEF4FB; }
  .si-icon-green { background: #E8F8F2; }
  .si-icon-red   { background: #FEF2F2; }
  .si-text  { display: flex; flex-direction: column; gap: 1px; }
  .si-label { font-size: 13px; font-weight: 500; color: #1a1a2e; }
  .si-value { font-size: 11px; color: #aaa; }
  .si-chevron { font-size: 18px; color: #ccc; }
  .si-signout-label { color: #dc2626; }
  .si-toggle {
    width: 36px;
    height: 20px;
    background: #1a3a5c;
    border-radius: 99px;
    position: relative;
    cursor: pointer;
    flex-shrink: 0;
  }
  .si-toggle.off { background: #dde0e8; }
  .si-toggle-knob {
    width: 16px;
    height: 16px;
    background: #fff;
    border-radius: 50%;
    position: absolute;
    top: 2px;
    right: 2px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
    transition: left 0.15s;
  }
  .si-toggle.off .si-toggle-knob { left: 2px; right: auto; }
  .railcard-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    padding: 10px 14px 14px;
  }
  .rc-option {
    border: 0.5px solid #e2e4ea;
    border-radius: 8px;
    padding: 9px 10px;
    cursor: pointer;
  }
  .rc-option.selected { border-color: #185FA5; background: #EEF4FB; }
  .rc-option.full-width { grid-column: 1 / -1; }
  .rc-name { font-size: 12px; font-weight: 500; color: #1a1a2e; margin-bottom: 2px; }
  .rc-desc { font-size: 10px; color: #aaa; line-height: 1.3; }
  .rc-option.selected .rc-name { color: #185FA5; }

  .guest-settings-btn {
    color: #888;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .sheet-signin-nudge {
    margin: 8px 14px 6px;
    background: #FFFBEB;
    border: 0.5px solid #F5E6A3;
    border-radius: 9px;
    padding: 11px 13px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
  }
  .nudge-text {
    font-size: 12px;
    color: #78510a;
    line-height: 1.4;
    flex: 1;
  }
  .nudge-btn {
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    background: #1a3a5c;
    border: none;
    border-radius: 20px;
    padding: 6px 12px;
    white-space: nowrap;
    flex-shrink: 0;
    cursor: pointer;
  }

  /* Mobile journey chip × button */
  .jchip-remove {
    font-size: 15px;
    color: #bbb;
    line-height: 1;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0 0 0 2px;
    flex-shrink: 0;
  }
  .jchip-remove:hover { color: #c0392b; }

  /* Mobile journey remove bottom sheet */
  .confirm-sheet {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #fff;
    border-radius: 14px 14px 0 0;
    z-index: 210;
    padding: 16px 16px 24px;
  }
  .cs-title {
    font-size: 16px;
    font-weight: 700;
    color: #1a1a2e;
    margin: 12px 0 8px;
  }
  .cs-sub {
    font-size: 13px;
    color: #888;
    line-height: 1.6;
    margin-bottom: 20px;
  }
  .cs-remove-btn {
    width: 100%;
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    background: #dc2626;
    border: none;
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 8px;
    cursor: pointer;
    font-family: var(--font);
    display: block;
  }
  .cs-cancel-btn {
    width: 100%;
    font-size: 13px;
    font-weight: 500;
    color: #555;
    background: #f5f6f8;
    border: 0.5px solid #dde0e8;
    border-radius: 8px;
    padding: 12px;
    cursor: pointer;
    font-family: var(--font);
    display: block;
  }
}

/* ── Transactional pages (unsubscribe, remove date) ─────────────────── */
/* The two pages a user lands on straight from an email, usually logged
   out. Both used to be standalone documents with their own <head> and a
   near-identical inline <style>. They now extend base.html and share this
   block, so they get the topbar, the footer disclaimer and body.page.

   The card is drawn with a hairline border and no shadow, matching
   .fb-card. Shadows in this file are for modals and overlays only. Do not
   reach for box-shadow: var(--shadow) here — that token does not exist,
   which is why these cards had no edge at all until 2026-09-03. */

.tp-wrap {
  max-width: 480px;
  margin: 56px auto 64px;
  padding: 0 16px;
  width: 100%;
}

.tp-card {
  background: var(--surface);
  border: 0.5px solid #e0dfe8;
  border-radius: 14px;
  padding: 32px 32px 28px;
  text-align: center;
}

.tp-icon { font-size: 26px; line-height: 1; margin-bottom: 14px; }
.tp-icon--ok   { color: #27ae60; }
.tp-icon--info { color: var(--blue); }
.tp-icon--warn { color: var(--amber); }

.tp-title {
  font-size: 21px;
  font-weight: 600;
  color: var(--primary);
  letter-spacing: -0.01em;
  margin-bottom: 7px;
}

.tp-sub {
  font-size: 14px;
  color: var(--muted-dark);
  line-height: 1.55;
}
.tp-sub strong { color: var(--text); font-weight: 600; }

.tp-route {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 12px;
}

.tp-help {
  font-size: 13.5px;
  color: var(--muted-dark);
  line-height: 1.55;
  margin-top: 12px;
}
.tp-help a { color: var(--blue); text-decoration: underline; }

/* Row by default, one column when --stack is set. The form wrapper has to
   carry the flex sizing too, since each button is posted on its own. */
.tp-actions { display: flex; gap: 10px; margin-top: 22px; }
.tp-actions > form { flex: 1 1 0; display: flex; }
.tp-actions--stack { flex-direction: column; }
.tp-actions--stack > form,
.tp-actions--stack > .tp-btn { flex: 0 0 auto; }

.tp-btn {
  flex: 1 1 auto;
  width: 100%;
  display: block;
  padding: 11px 18px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-family: var(--font);
  font-size: 14px;
  font-weight: 500;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.tp-btn--primary { background: var(--blue); color: #fff; }
.tp-btn--primary:hover { background: #12508c; }
.tp-btn--ghost { background: transparent; color: var(--text); border-color: var(--border); }
.tp-btn--ghost:hover { border-color: var(--muted-dark); }
.tp-btn:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

.tp-undo { margin-top: 15px; }
.tp-undo button {
  font-size: 13px;
  color: var(--muted-dark);
  text-decoration: underline;
  padding: 0;
}
.tp-undo button:hover { color: var(--text); }

.tp-split {
  margin-top: 26px;
  padding-top: 22px;
  border-top: 0.5px solid #e0dfe8;
  text-align: left;
}

.tp-label {
  display: block;
  font-size: 11px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 7px;
}

.tp-textarea {
  width: 100%;
  min-height: 72px;
  padding: 9px 11px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-family: var(--font);
  font-size: 13.5px;
  color: var(--text);
  background: #fbfbfd;
  resize: vertical;
}
.tp-textarea:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(24,95,165,0.1);
}

.tp-send {
  margin-top: 10px;
  padding: 8px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 13px;
  color: var(--muted-dark);
  background: transparent;
  transition: border-color 0.15s, color 0.15s;
}
.tp-send:hover { border-color: var(--muted-dark); color: var(--text); }

.tp-thanks {
  margin-top: 26px;
  padding-top: 22px;
  border-top: 0.5px solid #e0dfe8;
  font-size: 13.5px;
  color: var(--muted-dark);
}

/* "Yes, I booked it" and "No, I didn't" do not fit side by side on a
   narrow phone, so every action row stacks below this width. */
@media (max-width: 420px) {
  .tp-wrap { margin: 32px auto 48px; }
  .tp-card { padding: 26px 20px 22px; }
  .tp-actions { flex-direction: column; }
  .tp-actions > form { flex: 0 0 auto; }
}

/* ── Public homepage (ZI-71) ───────────────────────────────────────── */
/* Built from the tokens above: the same navy, blue and green, hairline borders,
   and cards with no shadow (shadows are for modals and overlays, see
   .tp-card). Every class starts home- so none of this can leak onto a product
   page.

   Green is reserved for the one action, Start tracking, the same green as the
   Start tracking button at the end of onboarding. Navy is headings and
   structure, so the button never blends into them. */

.home {
  flex: 1;
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 24px 24px;
}

.home-preview-note {
  margin: 16px 0 0;
  padding: 9px 14px;
  font-size: 12.5px;
  color: var(--amber);
  background: var(--amber-light);
  border: 0.5px solid #E8C88A;
  border-radius: var(--radius-sm);
}

/* Header links, only rendered on the homepage */
.home-nav { display: flex; align-items: center; gap: 4px; margin-right: 6px; }
.home-nav-link {
  font-size: 13px;
  color: var(--muted-dark);
  padding: 5px 9px;
  border-radius: var(--radius-xs);
}
.home-nav-link:hover { color: var(--primary); background: var(--bg); }
.home-nav-signin {
  font-size: 12px;
  font-weight: 500;
  color: var(--green);
  background: var(--green-light);
  border: 0.5px solid #5DCAA5;
  border-radius: var(--radius-xs);
  padding: 5px 12px;
}
.home-nav-cta {
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  background: var(--green);
  border-radius: var(--radius-sm);
  padding: 7px 14px;
  white-space: nowrap;
  transition: background 0.15s;
}
.home-nav-cta:hover { background: var(--green-dark); }
/* Last in the header, after Sign in, which base.html renders later in source. */
.home-nav-cta { order: 1; }
/* base.html's Sign in is a green pill on every page. On the homepage green is
   the action colour, so it goes quiet here. The sibling selector keeps this to
   pages that render .home-nav-cta, which is only the homepage. */
.home-nav-cta ~ .fb-btn {
  color: var(--primary);
  background: var(--surface);
  border: 0.5px solid var(--border);
  padding: 7px 14px;
  font-size: 13px;
}
.home-nav-cta ~ .fb-btn:hover { background: var(--bg); opacity: 1; }

/* Type */
.home-eyebrow {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 14px;
}
.home-h1 {
  font-size: 54px;
  line-height: 1.04;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--primary);
  margin-bottom: 20px;
}
.home-h2 {
  font-size: 32px;
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--primary);
  margin-bottom: 28px;
}
.home-h2--center { text-align: center; }
.home-h3 { font-size: 18px; line-height: 1.3; font-weight: 700; color: var(--primary); margin-bottom: 8px; }
.home-lede { font-size: 19px; line-height: 1.55; color: var(--text); max-width: 520px; }
.home-sub  { font-size: 15px; line-height: 1.6; color: var(--muted-dark); margin: -16px 0 28px; }
.home-sub--center { text-align: center; }
/* Vertical rhythm between sections. This existed only under 600px, so on a
   desktop the button closing one section butted straight into the next
   section's heading with nothing between them. */
.home-section { padding: 56px 0; }
.home-caption { font-size: 12.5px; line-height: 1.5; color: var(--muted-dark); margin-top: 12px; }
.home-caption--center { text-align: center; }
.home-center { text-align: center; margin-top: 32px; }

/* The one action */
.home-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 17px;
  font-weight: 600;
  border-radius: 10px;
  padding: 16px 28px;
  transition: background 0.15s, transform 0.15s, box-shadow 0.15s;
}
.home-btn--go {
  color: #fff;
  background: var(--green);
  box-shadow: 0 1px 0 rgba(8, 80, 65, 0.25), 0 6px 18px rgba(15, 110, 86, 0.22);
}
.home-btn--go:hover { background: var(--green-dark); transform: translateY(-1px); }
.home-btn--go span { transition: transform 0.15s; }
.home-btn--go:hover span { transform: translateX(3px); }
.home-btn--xl { font-size: 18px; padding: 18px 34px; }
.home-link { font-size: 15px; font-weight: 500; color: var(--blue); padding: 8px 4px; }
.home-link:hover { text-decoration: underline; }
.home-btn:focus-visible,
.home-link:focus-visible,
.home-nav-cta:focus-visible,
.home-nav-link:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  .home-btn, .home-btn--go span { transition: none; }
  .home-btn--go:hover, .home-btn--go:hover span { transform: none; }
}

/* Hero */
.home-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 56px;
  align-items: center;
  padding: 72px 0 56px;
}
.home-hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 20px;
  margin-top: 32px;
}

/* Hero chart */
.home-chart {
  background: var(--surface);
  border: 0.5px solid var(--border);
  border-radius: 16px;
  padding: 24px 24px 18px;
}
.home-chart-title {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--primary);
}
.home-chart-legend {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin: 10px 0 8px;
  font-size: 12.5px;
  color: var(--muted-dark);
}
.home-chart-legend li { display: flex; align-items: center; gap: 7px; }
.home-key { display: inline-block; width: 22px; height: 0; border-top: 3px solid; }
.home-key--expect { border-top: 3px dashed var(--muted); }
.home-key--actual { border-color: var(--blue); border-radius: 2px; }
.home-chart-svg { display: block; width: 100%; height: auto; }
.home-chart-axis { font-family: var(--font); font-size: 12px; fill: var(--muted-dark); }
.home-chart-callout { font-family: var(--font); font-size: 13px; font-weight: 600; fill: var(--green-dark); }

/* Proof */
.home-proof {
  text-align: center;
  padding: 36px 24px 40px;
  margin-bottom: 8px;
  background: var(--surface);
  border: 0.5px solid var(--border);
  border-radius: 16px;
}
.home-proof-stat {
  font-size: 26px;
  line-height: 1.35;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--primary);
  max-width: 760px;
  margin: 0 auto;
}
.home-proof-stat strong { color: var(--green); font-weight: 700; }

/* Live counters. Three aggregates that read as one object: hairline gaps, and a
   fine rail running along the top of all three so the gaps land on it like
   joints. That is why the grid gap is 1px and not a real gutter, and why the
   rail bleeds by exactly the card padding rather than sitting inside it. */
.home-stats { padding: 52px 0 64px; }
.home-stats[hidden] { display: none; }

.home-stats-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px 24px;
  margin-bottom: 26px;
}
.home-stats-head .home-h2 { margin-bottom: 0; max-width: 520px; }
.home-stats-updated {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted-dark);
  white-space: nowrap;
}
.home-stats-updated[hidden] { display: none; }
.home-stats-updated::before {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--blue);
}

.home-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1px;
  background: var(--border);
  border: 0.5px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
}
.home-stat {
  --stat-pad: 26px;
  background: var(--surface);
  padding: 20px var(--stat-pad) 26px;
}
.home-stat[hidden] { display: none; }

/* Sleepers under a single running line, with a stop above each number. Kept at
   the top of the card and in normal flow, so all three segments line up however
   the labels below them wrap. */
.home-stat-rail {
  position: relative;
  display: block;
  height: 9px;
  margin-bottom: 18px;
}
.home-stat-rail::before,
.home-stat-rail::after {
  content: "";
  position: absolute;
  left: calc(var(--stat-pad) * -1);
  right: calc(var(--stat-pad) * -1);
}
.home-stat-rail::before {
  top: 2px;
  height: 7px;
  background: repeating-linear-gradient(90deg, var(--border) 0 1px, transparent 1px 8px);
}
.home-stat-rail::after {
  top: 4px;
  border-top: 1px solid var(--border);
}
.home-stat-stop {
  position: absolute;
  left: 0;
  top: 0;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--surface);
  border: 2px solid var(--blue);
}

/* Tabular figures, so a counting number does not jitter its own width. */
.home-stat-number {
  font-size: clamp(44px, 5.4vw, 64px);
  line-height: 1;
  font-weight: 700;
  letter-spacing: -0.045em;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  color: var(--primary);
}
.home-stat-label {
  margin-top: 12px;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted-dark);
}

/* What it does. Two columns side by side, each stacking its own picture under
   its own copy. This replaced two full-bleed rows plus a separate three-step
   list that said the same thing again in fewer words. */
.home-features {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: auto auto;
  column-gap: 44px;
}
/* Row 1 is the copy, row 2 the picture, shared across both columns. Where
   subgrid is unavailable this falls back to a plain column and the pictures sit
   under their own copy, which is untidy rather than broken. */
.home-feature {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 2;
}
.home-feature-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 10px;
}
.home-feature-text .home-h3 { font-size: 24px; letter-spacing: -0.01em; }
.home-feature-text p:last-child { font-size: 16px; line-height: 1.65; color: var(--muted-dark); }
.home-feature-media {
  margin-top: 22px;
  /* Hug the picture. The shared grid row is as tall as the taller of the two,
     and without this the shorter picture's frame stretched to match it and left
     a band of empty white under the image. */
  align-self: start;
  background: var(--border-light);
  border: 0.5px solid var(--border);
  border-radius: 16px;
  padding: 18px;
}
.home-feature-media img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
}

/* Pricing */
.home-plans {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.home-plan {
  background: var(--surface);
  border: 0.5px solid var(--border);
  border-radius: 16px;
  padding: 28px;
}
.home-plan--pro { border: 1.5px solid var(--blue); }
.home-plan-price { font-size: 34px; font-weight: 700; letter-spacing: -0.02em; color: var(--primary); margin-top: 2px; }
.home-plan-price span { font-size: 14px; font-weight: 400; letter-spacing: 0; color: var(--muted-dark); }
.home-plan-note {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-height: 24px;
  font-size: 13.5px;
  color: var(--muted-dark);
  margin: 4px 0 20px;
}
.home-pill {
  font-size: 11px;
  font-weight: 600;
  color: var(--green-dark);
  background: var(--green-light);
  border-radius: 20px;
  padding: 3px 9px;
}
.home-plan-list { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.home-plan-list li {
  position: relative;
  padding-left: 20px;
  font-size: 15px;
  line-height: 1.45;
  color: var(--text);
}
.home-plan-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 7px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--blue);
}
.home-plan-foot { font-size: 13px; color: var(--muted-dark); margin-top: 18px; }

/* FAQ */
.home-faq { display: flex; flex-direction: column; gap: 10px; }
.home-faq-item {
  background: var(--surface);
  border: 0.5px solid var(--border);
  border-radius: var(--radius);
}
.home-faq-item summary {
  cursor: pointer;
  list-style: none;
  padding: 18px 52px 18px 22px;
  font-size: 16px;
  font-weight: 600;
  color: var(--primary);
  position: relative;
}
.home-faq-item summary::-webkit-details-marker { display: none; }
.home-faq-item summary::after {
  content: '+';
  position: absolute;
  right: 22px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 20px;
  font-weight: 400;
  color: var(--muted-dark);
}
.home-faq-item[open] summary::after { content: '\2212'; }
.home-faq-item summary:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; border-radius: var(--radius); }
.home-faq-item p { padding: 0 22px 20px; font-size: 15px; line-height: 1.65; color: var(--muted-dark); max-width: 820px; }

/* Final push */
.home-final {
  text-align: center;
  margin: 24px 0 16px;
  padding: 64px 24px;
  background: var(--primary);
  border-radius: 20px;
}
.home-final-h2 {
  font-size: 34px;
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #fff;
  margin-bottom: 12px;
}
.home-final-sub { font-size: 17px; line-height: 1.55; color: var(--blue-mid); margin-bottom: 30px; }
.home-final .home-btn--go { box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25); }

/* Sticky phone bar. Never on desktop, where the header button is always in view. */
.home-sticky { display: none; }

@media (max-width: 900px) {
  .home-hero { grid-template-columns: minmax(0, 1fr); gap: 36px; padding: 44px 0 40px; }
  .home-h1 { font-size: 42px; }
  .home-features {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    row-gap: 32px;
  }
  .home-feature { display: flex; flex-direction: column; }
  .home-nav { display: none; }
  .home-stats { padding: 44px 0 48px; }
  .home-stats-grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
}

@media (max-width: 600px) {
  .home { padding: 0 16px 16px; }
  .home-h1 { font-size: 34px; }
  .home-h2 { font-size: 26px; margin-bottom: 22px; }
  .home-lede { font-size: 17px; }
  .home-section { padding: 48px 0; }
  .home-plans { grid-template-columns: minmax(0, 1fr); }
  .home-hero-actions { flex-direction: column; align-items: stretch; }
  .home-hero-actions .home-link { text-align: center; }
  .home-btn { width: 100%; }
  .home-proof-stat { font-size: 20px; }
  /* Stacked, so every number is readable without swiping sideways. */
  .home-stats { padding: 40px 0 8px; }
  .home-stats-grid { grid-template-columns: minmax(0, 1fr); }
  .home-stat { --stat-pad: 20px; padding-bottom: 22px; }
  .home-stat-number { font-size: 44px; }
  .home-chart { padding: 18px 14px 14px; }
  .home-feature-media { padding: 10px; border-radius: var(--radius); }
  .home-feature-text .home-h3 { font-size: 21px; }
  .home-plan { padding: 22px; }
  .home-final { padding: 44px 20px; }
  .home-final-h2 { font-size: 26px; }
  /* The phone topbar has room for Sign in and little else. The hero button is
     a thumb's width below, and the sticky bar takes over once it scrolls away. */
  .home-nav-cta { display: none; }

  .home-sticky {
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 150;
    padding: 10px 16px calc(12px + env(safe-area-inset-bottom, 0px));
    background: var(--surface);
    border-top: 0.5px solid var(--border);
  }
  .home-sticky[hidden] { display: none; }
  .home-sticky .home-btn { padding: 14px 20px; font-size: 16px; }
  /* Keep the footer links clear of the bar while it shows. */
  body.home-sticky-on .site-footer { padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
}


/* ── Guest choice review (ZI-93) ───────────────────────────────────────
   Built from the components already in this file — .card, .card-hdr-title,
   .date-chip, .ep-save-btn, .ep-cancel-btn — because this page must look like
   the dashboard, not like a thing of its own. The first build invented a
   gradient bar, a slot meter and coloured checkbox-chips; none of that
   vocabulary exists anywhere else in the product, and it showed.

   What is left here is only what those components do not already cover.      */

.gr-page {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 30px 20px 48px;
}

.gr-col { width: 100%; max-width: 560px; }

.gr-title {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.018em;
  color: var(--primary);
  margin-bottom: 7px;
}

.gr-lede {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--muted-dark);
  margin-bottom: 20px;
}

.gr-msg {
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--amber);
  background: var(--amber-light);
  border: 0.5px solid rgba(133, 79, 11, 0.22);
  border-radius: var(--radius-sm);
  padding: 11px 14px;
  margin-bottom: 12px;
}

/* Rows inside a .card, matching the dashboard's hairline separation. */
.gr-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 11px 18px;
  font-size: 13px;
  color: var(--muted-dark);
}
.gr-rows > .gr-row + .gr-row,
.gr-prop + .gr-prop { border-top: 0.5px solid var(--border-light); }
.gr-row b { color: var(--primary); font-weight: 600; }
.gr-row--j { align-items: flex-start; }
.gr-row--note { display: block; line-height: 1.55; color: var(--amber); }

.gr-route {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--primary);
}
.gr-arr  { color: var(--muted); font-weight: 400; }
.gr-meta {
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
}

.gr-count {
  font-size: 11.5px;
  color: var(--muted);
  white-space: nowrap;
  flex-shrink: 0;
}
.gr-count--add  { color: var(--green-dark); font-weight: 600; }
.gr-count--stop { color: var(--amber); font-weight: 600; }

.gr-prop { padding: 4px 0; }
.gr-prop--off { background: #FCFBFD; }

/* Dates ride the existing .date-chip. Added ones take the blue the dashboard
   already uses for a tracked date; skipped ones stay grey and carry the reason,
   because a date the person chose is never dropped without saying so. */
.gr-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0 18px 12px;
}
.gr-chip--add {
  background: var(--blue-light);
  border-color: var(--blue-mid);
  color: #0C447C;
}
.gr-chip--skip { color: var(--muted); }
.gr-chip--skip .gr-chip-why {
  color: var(--muted);
  font-size: 10.5px;
  padding-left: 5px;
  border-left: 0.5px solid var(--border);
  margin-left: 4px;
}

.gr-sum {
  padding: 11px 18px;
  border-top: 0.5px solid var(--border-light);
  background: var(--bg);
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--muted-dark);
}

/* The difference table. Two columns, and which one is the account's is never
   in doubt. */
.gr-diff {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
  padding: 0 18px;
}
.gr-diff thead th {
  font-size: 10px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 400;
  text-align: left;
  padding: 2px 14px 7px 0;
}
.gr-diff thead th:first-child,
.gr-diff tbody th { padding-left: 18px; }
.gr-diff tbody th {
  font-weight: 400;
  color: var(--muted-dark);
  text-align: left;
  padding-top: 8px;
  padding-bottom: 8px;
  white-space: nowrap;
}
.gr-diff td {
  padding: 8px 14px 8px 0;
  font-variant-numeric: tabular-nums;
}
.gr-diff td:last-child { padding-right: 18px; }
.gr-diff tbody tr + tr th,
.gr-diff tbody tr + tr td { border-top: 0.5px solid var(--border-light); }
.gr-mine   { color: var(--primary); font-weight: 600; }
.gr-theirs { color: var(--muted-dark); font-weight: 600; }

.gr-pick {
  border-top: 0.5px solid var(--border-light);
  padding: 4px 18px 14px;
}
.gr-opt {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 0 0;
  cursor: pointer;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text);
}
.gr-opt input { margin-top: 3px; accent-color: var(--primary); flex-shrink: 0; }
.gr-opt b { font-weight: 600; color: var(--primary); }
.gr-opt-note { display: block; font-size: 12px; color: var(--muted); margin-top: 1px; }

.gr-actions {
  display: flex;
  gap: 9px;
  margin-top: 16px;
}
.gr-btn-link { display: inline-block; text-decoration: none; }
.gr-actions .ep-save-btn:disabled { opacity: 0.35; cursor: not-allowed; }

.gr-fine {
  font-size: 11.5px;
  line-height: 1.55;
  color: var(--muted);
  margin-top: 12px;
}

/* The choice: two cards side by side, the rows that differ highlighted in the
   amber the product already uses for "look at this". The checked card gets a
   blue border; the end line below it follows the checked card in CSS, so the
   page needs no script. */
.gr-legend {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--muted-dark);
  margin-bottom: 12px;
}
.gr-swatch {
  width: 14px;
  height: 14px;
  flex: none;
  background: var(--amber-light);
  border: 0.5px solid var(--amber);
  border-radius: 3px;
}
.gr-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 12px;
}
.gr-card {
  display: block;
  min-width: 0;
  position: relative;
  background: var(--surface);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px;
  cursor: pointer;
}
.gr-card input { position: absolute; opacity: 0; pointer-events: none; }
.gr-card:has(input:checked) { border: 1.5px solid var(--blue); padding: 11.5px; }
.gr-card:has(input:focus-visible) { outline: 2px solid var(--blue); outline-offset: 2px; }
.gr-card-hd {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--primary);
}
.gr-dot {
  position: relative;
  flex: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1.5px solid var(--muted-dark);
}
.gr-card:has(input:checked) .gr-dot { border-color: var(--blue); }
.gr-card:has(input:checked) .gr-dot::after {
  content: '';
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: var(--blue);
}
.gr-rec {
  display: inline-block;
  margin: 6px 0 0 24px;
  padding: 1px 8px;
  font-size: 11px;
  color: var(--blue);
  background: var(--blue-light);
  border-radius: 10px;
}
.gr-card-note { display: block; margin: 4px 0 6px 24px; font-size: 12px; color: var(--muted-dark); }
.gr-card-note:empty { display: none; }
.gr-sub { display: block; margin: 10px 0 2px; font-size: 12.5px; font-weight: 600; color: var(--primary); }
.gr-f { display: block; margin: 0 -6px; padding: 7px 6px; }
.gr-f--diff { background: var(--amber-light); border-radius: 4px; }
.gr-k {
  display: block;
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted-dark);
}
.gr-f--diff .gr-k { color: var(--amber); }
.gr-v {
  display: block;
  font-family: var(--mono);
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  word-break: break-word;
}
.gr-panel {
  background: var(--blue-light);
  border: 0.5px solid var(--blue-mid);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  margin-bottom: 12px;
}
.gr-panel-h { display: block; font-size: 13px; color: var(--primary); }
.gr-panel-m { font-size: 12px; color: var(--muted-dark); margin: 2px 0 8px; }
.gr-chips--flush { padding: 0 0 8px; }
.gr-end { font-size: 13px; line-height: 1.5; color: var(--text); margin: 0; }
.gr-end b { font-weight: 600; color: var(--primary); }
.gr-end--guest { display: none; }
.gr-col:has(input[value="guest"]:checked) .gr-end--mine { display: none; }
.gr-col:has(input[value="guest"]:checked) .gr-end--guest { display: block; }

@media (max-width: 620px) {
  .gr-cards { grid-template-columns: 1fr; }
  .gr-page  { padding: 16px 12px 36px; }
  .gr-title { font-size: 19px; }
  .gr-row, .gr-chips, .gr-sum, .gr-pick { padding-left: 14px; padding-right: 14px; }
  .gr-diff thead th:first-child, .gr-diff tbody th { padding-left: 14px; }
  .gr-diff td:last-child { padding-right: 14px; }
  .gr-actions { flex-direction: column; }
  .gr-actions .ep-save-btn, .gr-actions .ep-cancel-btn { width: 100%; text-align: center; }
  /* Three columns will not hold at 320px, so each difference becomes a stacked
     pair carrying its own labels. */
  .gr-diff thead { display: none; }
  .gr-diff, .gr-diff tbody, .gr-diff tr, .gr-diff th, .gr-diff td { display: block; width: 100%; }
  .gr-diff tbody tr { padding: 9px 14px; border-top: 0.5px solid var(--border-light); }
  .gr-diff tbody tr + tr th, .gr-diff tbody tr + tr td { border-top: none; }
  .gr-diff tbody th { padding: 0 0 3px; }
  .gr-diff td { padding: 1px 0; }
  .gr-mine::before   { content: 'Yours: ';  color: var(--muted); font-weight: 400; }
  .gr-theirs::before { content: 'Guest: '; color: var(--muted); font-weight: 400; }
}

/* ── Homepage redesign (home_v2.html, behind HOMEPAGE_V2_ENABLED) ───────── */
/* Same tokens as the rest of the site. Every class starts home2- (or h2c- for
   the chart's SVG parts) so nothing here can reach another page, and the old
   home- block above is untouched while the switch is off.

   Green is fare movement only: the cheapest stretches in the charts. The one
   primary action is Ink Navy, which is where DESIGN.md says the green homepage
   button should migrate to. Muted text is #5C6B7C, measured at 4.7:1 on the
   lilac ground, because --muted-dark fails WCAG AA for body copy. */
.home2 {
  --h2-muted: #5C6B7C;
  flex: 1;
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 24px 24px;
  color: var(--text);
}
.home2-hero {
  padding: clamp(40px, 9vw, 88px) 0 0;
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 22px;
}
.home2-h1 {
  font-size: clamp(34px, 8.4vw, 58px); font-weight: 600; line-height: 1.05;
  letter-spacing: -0.034em; color: var(--primary); max-width: 15ch; text-wrap: balance;
}
.home2-lede {
  font-size: clamp(16px, 2.4vw, 18px); line-height: 1.6; color: var(--h2-muted);
  max-width: 50ch; text-wrap: pretty;
}
.home2-lede em { font-style: italic; font-weight: 600; color: var(--primary); }
.home2-btn {
  display: inline-block; font-size: 15px; font-weight: 600; color: #fff; background: var(--primary);
  padding: 14px 26px; border-radius: 10px; transition: background 0.15s, transform 0.15s;
}
.home2-btn:hover { background: #13293f; transform: translateY(-1px); }
.home2-btn:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.home2-note { font-size: 13.5px; color: var(--h2-muted); }

.home2-sec {
  padding: clamp(64px, 11vw, 104px) 0 0;
  display: flex; flex-direction: column; align-items: center; gap: clamp(28px, 4.5vw, 44px);
}
.home2-h2 {
  font-size: clamp(26px, 5.4vw, 36px); font-weight: 600; line-height: 1.12; letter-spacing: -0.028em;
  color: var(--primary); text-align: center; text-wrap: balance;
}
.home2-sub {
  font-size: 16px; line-height: 1.6; color: var(--h2-muted); text-align: center;
  max-width: 60ch; text-wrap: balance; margin-top: -18px;
}
.home2 .home-section { padding-top: clamp(64px, 11vw, 104px); }

/* two fare histories: side by side, a swipe on phones */
.home2-stage { padding-top: clamp(48px, 8vw, 80px); }
.home2-ticket {
  width: 100%; background: var(--surface); border-radius: 14px; overflow: hidden;
  box-shadow: 0 1px 1px rgba(26,58,92,.07), 0 3px 6px rgba(26,58,92,.06), 0 18px 44px rgba(26,58,92,.13);
}
.home2-pair { display: grid; grid-template-columns: 1fr 1fr; }
.home2-panel { min-width: 0; margin: 0; display: flex; flex-direction: column; }
.home2-panel + .home2-panel { border-left: 1px solid var(--border-light); }
.home2-pcap { padding: 18px 22px 4px; font-size: 15px; line-height: 1.45; color: var(--h2-muted); }
.home2-pcap strong { font-weight: 600; color: var(--primary); }
.home2-plotwrap {
  position: relative; overflow: hidden; height: clamp(250px, 30vw, 290px);
  border-radius: 0 0 14px 14px;
}
.home2-plotwrap:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }
svg.home2-plot { display: block; width: 100%; height: 100%; }
.h2c-grid { stroke: var(--border-light); stroke-width: 1; shape-rendering: crispEdges; }
.h2c-grid.major { stroke: var(--border); }
.h2c-base, .h2c-tick { stroke: var(--border); stroke-width: 1; shape-rendering: crispEdges; }
.h2c-now { stroke: var(--blue-mid); stroke-width: 1; stroke-dasharray: 3 4; }
.h2c-area { fill: var(--blue-light); stroke: none; }
.h2c-trace { fill: none; stroke: var(--primary); stroke-width: 1.75; stroke-linejoin: miter; stroke-linecap: butt; }
.h2c-low, .h2c-lowkey { fill: var(--green); }
.h2c-legend { font-family: var(--mono); font-size: 12.5px; font-weight: 500; fill: var(--green); }
.h2c-axl { font-family: var(--mono); font-size: 12px; fill: #636F7E; }
.h2c-ring { fill: none; stroke: var(--blue); stroke-width: 1.25; opacity: .4; }
.h2c-dot { fill: var(--blue); }
/* The curve is still. Only the cheapest stretches move: left to right, once. */
@media (prefers-reduced-motion: no-preference) {
  svg.home2-plot:not(.go) .h2c-low { transform: scaleX(0); }
  svg.home2-plot .h2c-low {
    transform-box: fill-box; transform-origin: 0 50%;
    transition: transform 0.7s cubic-bezier(.2,.7,.2,1) calc(var(--i, 0) * 0.3s);
  }
  svg.home2-plot.go .h2c-low { transform: scaleX(1); }
}
.home2-read {
  position: absolute; z-index: 3; pointer-events: none; background: var(--surface);
  border: 1px solid var(--border); border-radius: 9px; padding: 9px 12px; min-width: 152px;
  box-shadow: 0 1px 2px rgba(26,58,92,.08), 0 10px 24px rgba(26,58,92,.14);
}
.home2-read-when { font-family: var(--mono); font-size: 12px; color: var(--h2-muted); }
.home2-read-now { font-family: var(--mono); font-size: 21px; font-weight: 500; margin-top: 2px; letter-spacing: -0.02em; color: var(--primary); }
.home2-read-delta { font-family: var(--mono); font-size: 12.5px; color: var(--green); margin-top: 2px; }
.home2-read-delta.up { color: #8C5B0E; }
.home2-dots { display: none; justify-content: center; gap: 6px; padding: 0 0 12px; }
.home2-dots button { width: 24px; height: 24px; border: 0; background: none; position: relative; cursor: pointer; }
.home2-dots button::after {
  content: ""; position: absolute; left: 8px; top: 8px; width: 8px; height: 8px;
  border-radius: 50%; background: var(--blue-mid); transition: background 0.2s;
}
.home2-dots button.on::after { background: var(--primary); }
.home2-dots button:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; border-radius: 6px; }
@media (max-width: 800px) {
  .home2-pair {
    display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
    overscroll-behavior-x: contain;
  }
  .home2-pair::-webkit-scrollbar { display: none; }
  .home2-panel { flex: 0 0 100%; scroll-snap-align: start; }
  .home2-panel + .home2-panel { border-left: 0; }
  .home2-dots { display: flex; }
  .home2-plotwrap { height: 270px; }
}

/* three steps */
.home2-steps { width: 100%; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(28px, 4vw, 48px); }
.home2-step { display: flex; flex-direction: column; gap: 8px; }
.home2-step-n { font-family: var(--mono); font-size: 13px; color: var(--blue); }
.home2-step-t { font-size: 18px; font-weight: 600; letter-spacing: -0.016em; color: var(--primary); }
.home2-step-d { font-size: 15px; line-height: 1.6; color: var(--h2-muted); }
@media (max-width: 760px) { .home2-steps { grid-template-columns: 1fr; gap: 28px; } }

/* flip counters */
.home2-stats-sec { gap: 0; }
.home2-stats { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 48px); }
.home2-stat { padding-top: 18px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.home2-stat-l { font-family: var(--mono); font-size: 12.5px; color: var(--h2-muted); }
.home2-flip {
  --w: clamp(26px, 5.4vw, 50px); --h: calc(var(--w) * 1.45);
  display: flex; align-items: center; gap: clamp(3px, .6vw, 6px); perspective: 600px;
}
.home2-sep {
  font-family: var(--mono); font-size: calc(var(--w) * .8); font-weight: 500; color: var(--primary);
  line-height: 1; align-self: flex-end; padding-bottom: calc(var(--w) * .1);
}
.home2-flip .fd {
  position: relative; width: var(--w); height: var(--h); font-family: var(--mono); font-weight: 500;
  font-size: calc(var(--h) * .74); color: #fff; font-variant-numeric: tabular-nums;
}
.home2-flip .fd .h {
  position: absolute; left: 0; right: 0; height: 50%; overflow: hidden; background: var(--primary);
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
}
.home2-flip .fd .h.t { top: 0; border-radius: 5px 5px 0 0; transform-origin: 50% 100%; border-bottom: .5px solid rgba(255,255,255,.18); }
.home2-flip .fd .h.b { bottom: 0; border-radius: 0 0 5px 5px; transform-origin: 50% 0; background: #16324f; }
.home2-flip .fd .h span { position: absolute; left: 0; right: 0; height: var(--h); display: flex; align-items: center; justify-content: center; line-height: 1; }
.home2-flip .fd .h.t span { top: 0; }
.home2-flip .fd .h.b span { bottom: 0; }
.home2-flip .fd .fl { visibility: hidden; z-index: 2; }
.home2-flip .fd .fl.t { z-index: 3; }
.home2-flip .fd::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: rgba(0,0,0,.35); z-index: 5; pointer-events: none; }
@media (max-width: 640px) { .home2-stats { grid-template-columns: 1fr; } }

/* pricing: the home- plan cards, centred under the new heading */
.home2-plans { width: 100%; max-width: 860px; }

/* quote */
.home2-quote { max-width: 760px; display: flex; flex-direction: column; gap: 20px; margin: 0; }
.home2-quote blockquote { font-size: clamp(20px, 3.6vw, 26px); font-weight: 500; line-height: 1.42; letter-spacing: -0.018em; color: var(--primary); text-wrap: pretty; }
.home2-quote blockquote a { color: var(--blue); border-bottom: 1.5px solid var(--blue-mid); }
.home2-quote figcaption { font-size: 15px; font-weight: 600; color: var(--primary); }
.home2-quote figcaption span { font-weight: 400; color: var(--h2-muted); }

/* closing sign-up */
.home2-close {
  padding: clamp(64px, 11vw, 104px) 0 56px;
  display: flex; flex-direction: column; align-items: center; gap: 22px; text-align: center;
}

/* header: Sign up beside Sign in. Navy, and last in the row (base.html renders
   Sign in later in source), with Sign in going quiet exactly as it does on home.html. */
.home2-nav-cta {
  order: 1; font-size: 13px; font-weight: 600; color: #fff; background: var(--primary);
  border-radius: var(--radius-sm); padding: 7px 14px; white-space: nowrap; transition: background 0.15s;
}
.home2-nav-cta:hover { background: #13293f; }
.home2-nav-cta:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.home2-nav-cta ~ .fb-btn {
  color: var(--primary); background: var(--surface); border: 0.5px solid var(--border);
  padding: 7px 14px; font-size: 13px;
}
.home2-nav-cta ~ .fb-btn:hover { background: var(--bg); opacity: 1; }

/* plan card eyebrows */
.home2-plan-e { font-family: var(--mono); font-size: 12px; letter-spacing: 0.11em; text-transform: uppercase; color: #636F7E; margin-top: -6px; }
.home-plan--pro .home2-plan-e { color: var(--blue); }

/* Phone pass. The same page, tighter: less air between sections, steps as rows,
   the two counters side by side, and a header that is a link and one button
   rather than two pills. */
@media (max-width: 640px) {
  .home2 { padding: 0 18px 16px; }
  .home2-hero { padding-top: 28px; gap: 16px; }
  .home2-h1 { font-size: 34px; }
  .home2-lede { font-size: 16px; line-height: 1.55; }
  .home2-sec { padding-top: 44px; gap: 22px; }
  .home2-stage { padding-top: 32px; }
  .home2 .home-section { padding-top: 44px; }
  .home2-h2 { font-size: 25px; }
  .home2-sub { font-size: 15px; margin-top: -10px; }
  .home2-pcap { padding: 14px 18px 2px; font-size: 14.5px; }
  .home2-plotwrap { height: 250px; }
  .home2-steps { gap: 18px; }
  .home2-step { display: grid; grid-template-columns: 30px 1fr; column-gap: 6px; row-gap: 2px; }
  .home2-step-n { grid-row: 1 / 3; padding-top: 4px; }
  .home2-step-t { font-size: 16.5px; }
  .home2-step-d { font-size: 14.5px; line-height: 1.5; }
  .home2-stats { grid-template-columns: 1fr 1.7fr; gap: 16px; }
  .home2-stat { gap: 10px; padding-top: 14px; }
  .home2-flip { --w: 24px; }
  .home2-stat-l { font-size: 12px; }
  .home2 .home-plan { padding: 20px; }
  .home2-quote { gap: 14px; }
  .home2-quote blockquote { font-size: 18.5px; line-height: 1.45; }
  .home2-close { padding: 44px 0 32px; gap: 18px; }
  /* header: Sign in is a plain link, Start tracking is the one button */
  .home2-nav-cta { padding: 8px 14px; font-size: 13.5px; border-radius: 9px; }
  .home2-nav-cta ~ .mobile-signin-btn {
    font-size: 14px; font-weight: 500; color: var(--primary); background: none;
    padding: 8px 6px; border-radius: 6px;
  }
}

/* .home2-sec sets display:flex, which beats the browser's [hidden] rule. The
   counters section starts hidden and must stay hidden until the feed answers,
   or a failed feed leaves two captions with no numbers above them. */
.home2-sec[hidden] { display: none; }