/* Local Place Stories pilot: scoped so the existing published screen is unchanged. */
.screen.layout-story:has(.place-stories) { max-width:512px; padding:12px 16px 0; background:white; }
.screen.layout-story:has(.place-stories) h1 { max-width:none; font-size:1.6rem; margin:8px 0 16px; }
.place-stories { min-width:0; }
.screen.layout-story .place-stories .story-media { width:100%; height:auto; aspect-ratio:3/4; max-height:max(240px,calc(100dvh - 300px)); border:0; border-radius:14px; overflow:hidden; background:#f0efeb; touch-action:pan-y pinch-zoom; position:relative; }
.screen.layout-story .place-stories .story-media img { width:100%; height:100%; object-fit:contain; display:block; }
.place-story-caption { margin:6px 0; color:#566572; font-size:.75rem; }
.place-story-pager { display:flex; align-items:center; justify-content:space-between; gap:8px; margin:8px 0 12px; }
.place-story-pager button { min-height:48px; border:1px solid #dce4e1; background:white; color:#102644; border-radius:8px; padding:8px 10px; font:inherit; font-size:.875rem; cursor:pointer; }
.place-story-pager button:disabled { color:#68777c; opacity:.65; cursor:default; }
.place-story-pager span { white-space:nowrap; font-size:.85rem; }
.place-story-player { display:flex; gap:14px; align-items:center; background:#f2f6f4; padding:12px; border-radius:12px; }
.place-story-player > div { flex:1; min-width:0; }
.place-story-player .audio-button { min-width:60px; min-height:52px; border-radius:26px; background:#086c5d; color:white; }
.place-story-player em { float:right; font-size:.8rem; font-style:normal; }
.place-story-player .audio-progress { margin-top:8px; }
.place-story-footer { position:sticky; bottom:0; z-index:2; background:white; padding:12px 0 calc(16px + env(safe-area-inset-bottom)); margin-top:16px; border-top:1px solid #e4e9e7; }
.place-story-footer .actions { margin:0; }
.place-story-details { font-size:.875rem; color:#526172; margin:4px 0 20px; overflow-wrap:anywhere; }
.place-story-details summary { cursor:pointer; min-height:44px; padding:12px 0; }
.place-story-empty { padding:40px 16px; background:#f0efeb; border-radius:14px; }
.place-stories button:focus-visible,.place-story-details summary:focus-visible { outline:3px solid #b34717; outline-offset:3px; }
@media(max-width:320px) { .place-story-pager { flex-wrap:wrap; } .place-story-pager span { order:-1; flex-basis:100%; text-align:center; } .place-story-pager button { flex:1; } }
@media(min-width:600px) { .screen.layout-story .place-stories .story-media { max-height:640px; } }

:root {
  color-scheme: light;
  --bg: #edf5ff;
  --surface: #ffffff;
  --ink: #07122d;
  --muted: #4b5f7a;
  --line: #cbd8e9;
  --primary: #07114a;
  --primary-2: #0b5cff;
  --cta-orange: #bd4600;
  --route: #1769ff;
  --route-done: #12a36c;
  --warning: #ab5c00;
  --radius-card: 8px;
  --radius-control: 12px;
  --space-screen-x: 20px;
  --text-sm: 0.875rem;
  --text-body: 1rem;
  --text-lead: 1.125rem;
  --text-title: 1.875rem;
  --text-action: 1.0625rem;
  --shadow: 0 14px 44px rgba(16, 36, 64, 0.14);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* {
  box-sizing: border-box;
}

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

html,
body {
  width: 100%;
  min-height: 100%;
  margin: 0;
  background: #1d2430;
}

body {
  display: flex;
  justify-content: center;
  font-size: var(--text-body);
  line-height: 1.45;
}

html.map-expanded,
body.map-expanded {
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}

html {
  font-size: 100%;
  -webkit-text-size-adjust: auto;
  text-size-adjust: auto;
}

@supports (font: -apple-system-body) {
  html {
    font: -apple-system-body;
  }
}

html[data-text-scale="default"] {
  font-size: 100%;
}

html[data-text-scale="large"] {
  font-size: 125%;
}

html[data-text-scale="extra-large"] {
  font-size: 150%;
}

button,
input {
  font: inherit;
}

button {
  cursor: pointer;
  touch-action: manipulation;
}

button:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid rgba(11, 92, 255, 0.45);
  outline-offset: 3px;
}

.app-shell {
  position: relative;
  width: min(100vw, 430px);
  min-height: 100vh;
  background: var(--bg);
  color: var(--ink);
  overflow-x: hidden;
}

.screen {
  min-height: 100vh;
  padding: max(14px, env(safe-area-inset-top)) var(--space-screen-x) max(22px, env(safe-area-inset-bottom));
}

.screen > h1 {
  padding-right: 58px;
}

.screen.layout-resume {
  padding: max(32px, calc(env(safe-area-inset-top) + 16px)) var(--space-screen-x) max(22px, env(safe-area-inset-bottom));
}

.resume-handoff {
  width: 100%;
  max-width: 390px;
  padding-top: 64px;
}

.resume-handoff h1 {
  max-width: 330px;
  margin: 0;
  padding-right: 0;
  font-size: 2.25rem;
  line-height: 1.17;
  font-weight: 850;
}

.resume-handoff h1:focus {
  outline: none;
}

.resume-handoff p {
  max-width: 330px;
  margin: 14px 0 0;
  color: var(--muted);
  font-size: 1.125rem;
  line-height: 1.5;
}

.resume-handoff .action-button {
  width: 100%;
  min-height: 56px;
  margin-top: 28px;
}

.resume-handoff__actions {
  margin-top: 28px;
}

.resume-handoff__actions .action-button {
  margin-top: 0;
}

.loading-screen {
  padding: 48px 24px;
}

.text-scale-trigger {
  position: fixed;
  z-index: 55;
  top: max(12px, env(safe-area-inset-top));
  right: max(12px, calc((100vw - min(100vw, 430px)) / 2 + 12px));
  width: 48px;
  height: 48px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--primary);
  box-shadow: 0 4px 18px rgba(16, 36, 64, 0.16);
  font-size: 1rem;
  font-weight: 800;
}

.text-scale-trigger.is-map-expanded {
  right: auto;
  left: max(12px, calc((100vw - min(100vw, 430px)) / 2 + 12px));
}

.text-scale-backdrop {
  position: fixed;
  z-index: 70;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 0;
  background: rgba(7, 18, 45, 0.48);
}

.text-scale-dialog {
  position: fixed;
  z-index: 71;
  left: 50%;
  bottom: max(18px, env(safe-area-inset-bottom));
  width: min(calc(100vw - 32px), 398px);
  padding: 20px;
  transform: translateX(-50%);
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow);
}

.text-scale-dialog__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.text-scale-dialog h2,
.text-scale-dialog p {
  margin: 0;
}

.text-scale-dialog h2 {
  font-size: 1.375rem;
}

.text-scale-dialog p {
  margin-top: 6px;
  color: var(--muted);
  font-size: var(--text-sm);
}

.text-scale-dialog__close {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  font-size: 1.5rem;
  line-height: 1;
}

.text-scale-segments {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin-top: 18px;
}

.text-scale-segments button {
  min-width: 0;
  min-height: 64px;
  padding: 8px 4px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #f7faff;
  color: var(--ink);
}

.text-scale-segments button[aria-pressed="true"] {
  border-color: var(--primary-2);
  background: #e7f0ff;
  box-shadow: inset 0 0 0 1px var(--primary-2);
}

.text-scale-segments strong,
.text-scale-segments span {
  display: block;
}

.text-scale-segments strong {
  font-size: 1.125rem;
}

.text-scale-segments span {
  margin-top: 2px;
  font-size: 0.75rem;
  font-weight: 700;
}

@media (max-width: 360px) {
  .text-scale-dialog {
    padding: 16px;
  }

  .text-scale-segments span {
    font-size: 0.6875rem;
  }
}

.topbar {
  display: grid;
  grid-template-columns: 64px 1fr 64px;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  font-size: var(--text-sm);
  color: var(--ink);
}

.topbar__center {
  text-align: center;
  font-weight: 700;
}

.inline-progress-row {
  display: grid;
  grid-template-columns: auto minmax(54px, 1fr);
  align-items: center;
  gap: 8px;
  max-width: 180px;
  margin: 0 auto;
}

.inline-progress-row span {
  color: var(--ink);
  font-size: var(--text-sm);
  font-weight: 760;
  white-space: nowrap;
}

.inline-progress-track {
  height: 4px;
  overflow: hidden;
  border-radius: 999px;
  background: #cfdbea;
}

.inline-progress-track i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #12a36c, #1769ff);
}

.topbar__right {
  text-align: right;
  color: var(--muted);
  font-weight: 700;
}

.screen[data-state-base="ride"] {
  padding: max(40px, env(safe-area-inset-top)) 0 max(22px, env(safe-area-inset-bottom));
}

.screen[data-state-base="ride"] h1 {
  margin: 0 40px;
  color: #07133d;
}

.ride-get-off-heading span,
.ride-get-off-heading strong {
  display: block;
}

.ride-get-off-heading span {
  margin-bottom: 5px;
  color: var(--muted);
  font-size: 0.8125rem;
  font-weight: 850;
  line-height: 18px;
  text-transform: uppercase;
}

.ride-get-off-heading strong {
  font-size: 1.875rem;
  font-weight: 900;
  line-height: 36px;
}

.eyebrow {
  margin: 12px 0 10px;
  color: #003b88;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

h1 {
  margin: 16px 0 0;
  font-size: var(--text-title);
  line-height: 1.12;
  font-weight: 850;
  letter-spacing: 0;
}

.header-stop-identity {
  margin: 7px 0 0;
  display: grid;
  gap: 2px;
}

.header-stop-identity span {
  color: var(--muted);
  font-size: 0.6875rem;
  font-weight: 800;
  text-transform: uppercase;
}

.header-stop-identity strong {
  color: var(--ink);
  font-size: 1.125rem;
  line-height: 1.18;
}

.screen[data-transit-stop="true"] .header-stop-identity {
  padding-bottom: 9px;
  border-bottom: 1px solid rgba(75, 95, 122, 0.2);
}

.instruction {
  margin: 10px 0 14px;
  color: var(--muted);
  font-size: var(--text-body);
  line-height: 1.45;
}

.next-step-card {
  margin: 14px 0 12px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: rgba(255, 255, 255, 0.82);
}

.next-step-card span {
  display: block;
  color: var(--muted);
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
}

.next-step-card strong {
  display: block;
  margin-top: 5px;
  font-size: 1.0625rem;
  line-height: 1.25;
}

.next-step-card p {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: var(--text-sm);
  line-height: 1.4;
}

.active-stop-identity {
  margin: 8px 0 10px;
  padding: 10px 12px;
  border: 1px solid rgba(19, 54, 93, 0.13);
  border-radius: var(--radius-card);
  background: rgba(255, 255, 255, 0.64);
}

.active-stop-identity span {
  display: block;
  color: var(--muted);
  font-size: 0.6875rem;
  font-weight: 800;
  text-transform: uppercase;
}

.active-stop-identity strong {
  display: block;
  margin-top: 3px;
  color: var(--ink);
  font-size: 1.125rem;
  line-height: 1.18;
}

.route-progress {
  position: relative;
  height: 5px;
  margin: 12px 0;
  overflow: hidden;
  border-radius: 999px;
  background: #cfdbea;
}

.route-progress span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #12a36c, #1769ff);
}

.map-card {
  position: relative;
  height: 330px;
  margin: 12px 0;
  border: 1px solid #c5d2e4;
  border-radius: var(--radius-card);
  background: #dfeaf6;
  overflow: hidden;
  overscroll-behavior: contain;
}

.map-card.is-secondary {
  height: 220px;
}

.map-card.is-preview {
  height: 250px;
  pointer-events: none;
  touch-action: pan-y;
}

.map-card.is-near-arrival {
  height: 270px;
}

.screen[data-state-base="walk"] .map-card {
  height: 310px;
}

.screen[data-state-base="walk"][data-transit-stop="true"] .map-card {
  height: 300px;
}

.screen[data-state-base="walk"] .map-card.is-near-arrival {
  height: 270px;
}

.screen[data-state-base="ride"] .map-card {
  height: 300px;
  margin: 18px 40px 0;
  border-color: #b9d4ee;
  border-radius: 18px;
}

.screen[data-state-base="ride"] .map-canvas {
  border-radius: inherit;
}

.map-card.is-expanded {
  position: fixed;
  inset: 0;
  z-index: 20;
  width: 100vw;
  height: 100dvh;
  margin: 0;
  border: 0;
}

.map-canvas {
  width: 100%;
  height: 100%;
  touch-action: none;
}

.map-orientation-note {
  position: absolute;
  top: 10px;
  left: 50%;
  z-index: 6;
  max-width: calc(100% - 96px);
  margin: 0;
  padding: 7px 10px;
  transform: translateX(-50%);
  border: 1px solid rgba(9, 70, 49, 0.24);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.94);
  color: #094631;
  font-size: var(--text-sm);
  font-weight: 750;
  line-height: 1.25;
  text-align: center;
  pointer-events: none;
}

@media (max-width: 320px) {
  .map-orientation-note {
    top: 8px;
    max-width: calc(100% - 24px);
    border-radius: 8px;
  }
}

/* SGT-321 14731: one visual-viewport contract and strict map/action stacking boundary. */
.app-shell {
  width: min(100vw, var(--sgt-visual-viewport-width, 100vw), 430px);
  max-width: 100%;
}

html[data-sgt-visual-viewport-zoomed="true"] body {
  justify-content: flex-start;
}

html[data-sgt-visual-viewport-zoomed="true"] .app-shell {
  margin-left: var(--sgt-visual-viewport-left, 0);
}

.screen[data-minimal-transit-access="true"] {
  width: 100%;
  height: var(--sgt-visual-viewport-height, 100dvh);
  min-height: var(--sgt-visual-viewport-height, 100dvh);
  max-height: var(--sgt-visual-viewport-height, 100dvh);
  overflow: hidden;
}

.screen[data-minimal-transit-access="true"] > *,
.screen[data-minimal-transit-access="true"] .locate-stop > *,
.screen[data-state-base="ride"] > * {
  min-width: 0;
  max-width: 100%;
}

.sgt318-media-surface,
.sgt318-media-surface.is-map,
.map-card {
  position: relative;
  isolation: isolate;
  max-width: 100%;
  overflow: hidden;
}

.sgt318-media-surface.is-map,
.map-card,
.map-canvas {
  z-index: 1;
}

.map-canvas {
  position: relative;
  contain: layout paint;
  overflow: hidden;
}

.map-canvas .gm-style,
.map-canvas .gm-style > div {
  max-width: 100%;
  max-height: 100%;
}

.screen[data-minimal-transit-access="true"] .locate-stop__primary-action {
  position: relative;
  z-index: 100;
  isolation: isolate;
  pointer-events: auto;
}

.screen.simple-stop { background: #fff; display: block; padding: 20px; height: auto; min-height: 100%; overflow: visible; }
.simple-stop > button { width: auto; min-height: 48px; margin: 0 0 20px; }
.simple-stop__visuals { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,260px),1fr)); gap: 24px; align-items: start; }
.simple-stop__visuals figure { margin: 0; min-width: 0; }
.simple-stop__visuals img { display: block; width: 100%; height: auto; max-height: none; object-fit: contain; border-radius: 12px; }
.simple-stop__visuals figcaption, .simple-stop__visuals [role="status"] { font-size: 0.875rem; line-height: 1.5; color: #526176; margin: 12px 0 0; overflow-wrap: anywhere; }
.simple-stop__panorama { width: 100%; height: 300px; min-height: 260px; }
.screen[data-minimal-transit-access="true"] .locate-stop__primary-action,
.screen[data-minimal-transit-access="true"] .locate-stop__primary-action * {
  pointer-events: auto;
}

/* Simple stop-map: content scrolls in a reserved row above the arrival action. */
.app-shell .screen[data-minimal-transit-access="true"] > .route-progress { margin-bottom:calc(2rem + 12px); }
.app-shell .screen[data-minimal-transit-access="true"] .locate-stop > h1 { font-size:1.5625rem; line-height:1.2; margin:0; letter-spacing:-.025em; overflow-wrap:anywhere; word-break:break-word; }
.app-shell .screen[data-minimal-transit-access="true"] .map-card:has([data-stage2-map-fallback]:not([hidden])) .map-expand,
.app-shell .screen[data-minimal-transit-access="true"] .map-card:has([data-stage2-map-fallback]:not([hidden])) .map-recenter { display:none; }
.app-shell .screen[data-minimal-transit-access="true"] .sgt318-media-surface.is-map:has([data-stage2-map-fallback]:not([hidden])),
.app-shell .screen[data-minimal-transit-access="true"] .map-card:has([data-stage2-map-fallback]:not([hidden])) { height:auto !important; min-height:310px !important; max-height:none; }
.app-shell .screen[data-minimal-transit-access="true"] .map-empty { height:auto; min-height:310px; overflow-wrap:anywhere; }
.app-shell .screen[data-minimal-transit-access="true"] > h1 { overflow-wrap:anywhere; word-break:break-word; }
.app-shell .screen[data-minimal-transit-access="true"] .text-scale-trigger { width:auto; height:auto; min-width:44px; min-height:44px; white-space:nowrap; padding:8px; }
.app-shell .screen[data-minimal-transit-access="true"] .sgt318-media-surface.is-map { height:310px; min-height:310px; max-height:none; aspect-ratio:auto; }
.app-shell .screen[data-minimal-transit-access="true"] { background:#fff; padding-inline:20px; gap:8px; }
.app-shell .screen[data-minimal-transit-access="true"] > h1 { font-size:1.5625rem; line-height:1.2; margin:0; letter-spacing:-.025em; }
.app-shell .screen[data-minimal-transit-access="true"] > .locate-stop { padding:0 0 20px; gap:12px; grid-auto-rows:max-content; align-content:start; }
.app-shell .screen[data-minimal-transit-access="true"] .locate-stop__identity strong { font-size:1.0625rem; line-height:1.45; font-weight:400; }
.app-shell .screen[data-minimal-transit-access="true"] .locate-stop__recognition-trigger { width:100%; min-height:50px; padding:12px; font-size:1rem; line-height:1.4; white-space:normal; background:#fff; border:1px solid #c5d2e2; border-radius:12px; }
.app-shell .screen[data-minimal-transit-access="true"] .current-location-walk { margin:0; padding:0; border:0; border-radius:0; background:transparent; }
.app-shell .screen[data-minimal-transit-access="true"] .current-location-walk[hidden] { display:none; }
.app-shell .screen[data-minimal-transit-access="true"] .current-location-walk__status { font-size:.875rem; color:#536176; font-weight:400; }
.app-shell .screen[data-minimal-transit-access="true"] .current-location-walk__status strong { font-weight:400; }
.app-shell .screen[data-minimal-transit-access="true"] .locate-stop__rider-cue { font-size:1rem; line-height:1.5; font-weight:400; }
.app-shell .screen[data-minimal-transit-access="true"] .locate-stop__primary-action { margin:0; padding:12px 0 max(4px,env(safe-area-inset-bottom)); background:#fff; border:0; border-top:1px solid #e2e8e8; border-radius:0; box-shadow:none; }
.app-shell .screen[data-minimal-transit-access="true"] .locate-stop__primary-action .action-button { min-height:54px; font-size:1.125rem; line-height:1.4; padding:12px; }

.direct-recovery form { display: grid; gap: 1rem; }
.direct-recovery label { display: block; overflow-wrap: anywhere; }
.direct-recovery input[type="text"] { display: block; box-sizing: border-box; width: 100%; min-width: 0; min-height: 44px; font: inherit; }
.direct-recovery button { min-height: 44px; white-space: normal; }
.direct-recovery h1 { font-size: 28px; line-height: 1.2; margin: 0 0 12px; }
.direct-recovery h2 { font-size: 21px; line-height: 1.3; margin: 0 0 16px; }
.direct-recovery .recovery-destination-label { font-size: 14px; margin: 24px 0 6px; color: #43566e; }
.direct-recovery .recovery-primary { display: block; box-sizing: border-box; width: 100%; min-height: 48px; padding: 12px; border: 1px solid #b94700; border-radius: 12px; background: #b94700; color: #fff; font-weight: 700; text-align: center; text-decoration: none; }
.direct-options.direct-recovery .direct-maps-link.recovery-primary { color: #fff; border-color: #b94700; }
.direct-recovery [data-recovery-arrived] + [data-recovery-maps] { margin-top: 12px; }

/* SGT-321 14755: canonical narrow static-fallback recovery occupies the
   established external row without reducing the governed media viewport. */
html[data-sgt-visual-viewport="true-195"]
  .screen[data-minimal-transit-access="true"]
  > .locate-stop.stop-recognition[data-sgt318-narrow-static-fallback="true"] {
  padding-bottom: 0;
}

html[data-sgt-visual-viewport="true-195"]
  .stop-recognition[data-sgt318-narrow-static-fallback="true"]
  [data-stop-recognition="close"][hidden] {
  display: none !important;
}

html[data-sgt-visual-viewport="true-195"]
  .screen[data-minimal-transit-access="true"]
  > .stop-recognition[data-sgt318-narrow-static-fallback="true"]
  > .sgt318-street-view-action {
  display: block;
  flex: 0 0 auto;
  width: 100%;
  min-block-size: 44px;
  height: auto;
  margin: 8px 0;
  padding-block: 8px;
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
}

/* SGT-321 14739: media scroll and recovery action own separate viewport rows. */
.screen[data-minimal-transit-access="true"] {
  --sgt-safe-area-bottom: var(--sgt-test-safe-area-bottom, env(safe-area-inset-bottom));
  padding-bottom: max(10px, var(--sgt-safe-area-bottom));
}

.screen[data-minimal-transit-access="true"] > .locate-stop.stop-recognition {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-height: 0;
  padding: 0;
  overflow: hidden;
}

.stop-recognition__scroll {
  display: grid;
  grid-auto-rows: max-content;
  gap: 9px;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  padding: 0 0 max(16px, var(--sgt-safe-area-bottom));
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scroll-padding-block: 12px max(16px, var(--sgt-safe-area-bottom));
  scrollbar-gutter: stable;
}

.screen[data-minimal-transit-access="true"] > .stop-recognition > .sgt318-street-view-action {
  position: relative;
  z-index: 9;
  flex: 0 0 auto;
  width: 100%;
  min-height: 48px;
  margin: 8px 0 0;
}

.screen[data-minimal-transit-access="true"] > .stop-recognition > .sgt318-street-view-action:not([hidden]) {
  display: block;
}

.screen[data-minimal-transit-access="true"] .sgt318-street-view-action {
  scroll-margin-block-start: 96px;
}

.stop-recognition[data-sgt318-media-mode="street-view"] .sgt318-stop-return-bar {
  pointer-events: none;
}

.stop-recognition[data-sgt318-media-mode="street-view"] .sgt318-stop-return-bar button {
  pointer-events: auto;
}

html[data-sgt-visual-viewport="true-195"] .screen[data-minimal-transit-access="true"],
html[data-sgt-visual-viewport="compact-320"] .screen[data-minimal-transit-access="true"] {
  padding-inline: max(8px, var(--space-screen-x));
}

/* SGT-233 v1.1.0: Product-accepted minimal TTC access hierarchy. */
.screen[data-minimal-transit-access="true"] {
  padding-bottom: calc(96px + env(safe-area-inset-bottom));
}

.screen[data-minimal-transit-access="true"] > h1 {
  margin-bottom: 12px;
  padding-right: 58px;
}

.locate-stop {
  display: grid;
  gap: 8px;
  min-width: 0;
  margin: 0;
  padding: 12px;
  border: 1px solid #c5d2e4;
  border-radius: var(--radius-card);
  background: var(--surface);
}

.locate-stop h2 {
  margin: 0;
  font-size: 1rem;
  line-height: 1.25;
}

.locate-stop__tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  min-width: 0;
}

.locate-stop__tabs button {
  min-width: 0;
  min-height: 44px;
  padding: 8px;
  border: 1px solid #9fb4cc;
  background: #fff;
  color: #0a4595;
  font-weight: 850;
  overflow-wrap: anywhere;
}

.locate-stop__tabs button:first-child {
  border-radius: 10px 0 0 10px;
}

.locate-stop__tabs button:last-child {
  border-radius: 0 10px 10px 0;
}

.locate-stop__tabs button[aria-selected="true"] {
  border-color: #0a4595;
  background: #0a4595;
  color: #fff;
}

.locate-stop__tabs button:disabled {
  cursor: not-allowed;
  opacity: 0.68;
}

.locate-stop__status {
  margin: 0;
  padding: 8px 10px;
  border-radius: 8px;
  background: #fff4d6;
  color: #4b3b08;
  font-size: var(--text-sm);
  line-height: 1.35;
}

.locate-stop__status.is-map-status {
  margin-top: 8px;
}

.locate-stop__panel {
  min-width: 0;
}

.locate-stop__panel .map-card {
  height: clamp(180px, 32vh, 260px);
  margin: 0;
}

.locate-stop__identity {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 10px 2px 0;
}

.locate-stop__identity span {
  color: var(--muted);
  font-size: 0.6875rem;
  font-weight: 850;
  text-transform: uppercase;
}

.locate-stop__identity strong,
.locate-stop__identity p {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
}

.locate-stop__identity strong {
  font-size: 0.9375rem;
  line-height: 1.3;
}

.locate-stop__identity p {
  font-size: var(--text-sm);
  line-height: 1.35;
}

/* SGT-288: accepted SGT-286 map-first stop approach and SGT-287 recognition hierarchy. */
.locate-stop__recognition-trigger {
  width: 100%;
  min-height: 44px;
}

.stop-recognition {
  display: grid;
  min-width: 0;
  gap: 12px;
  padding: 12px;
  border: 1px solid #cbd9e8;
  border-radius: 14px;
  background: #fff;
}

.stop-recognition h2,
.stop-recognition p,
.stop-recognition figure {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
}

.stop-recognition__badge {
  color: var(--muted);
  font-size: var(--text-sm);
  font-weight: 700;
}

.stop-recognition__media {
  display: grid;
  gap: 8px;
}

.stop-recognition__media img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 10px;
}

.stop-recognition__media figcaption {
  color: var(--muted);
  font-size: var(--text-sm);
}

.screen[data-minimal-transit-access="true"] .locate-stop__primary-action {
  position: fixed;
  z-index: 12;
  right: max(12px, calc((100vw - min(100vw, 430px)) / 2 + 12px));
  bottom: max(10px, env(safe-area-inset-bottom));
  left: max(12px, calc((100vw - min(100vw, 430px)) / 2 + 12px));
  margin: 0;
  padding: 8px;
  border: 1px solid rgba(9, 65, 51, 0.18);
  border-radius: 14px;
  background: rgba(247, 250, 248, 0.96);
  box-shadow: 0 8px 28px rgba(16, 36, 64, 0.2);
  backdrop-filter: blur(8px);
}

.screen[data-minimal-transit-access="true"] .locate-stop__primary-action .action-button {
  width: 100%;
  min-height: 56px;
  border-color: #064c3b;
  background: #0b6b53;
}

.install-guide-page.is-android .install-guide-sequence.is-text-only {
  display: grid;
  gap: 18px;
  min-height: 250px;
  margin: 16px 0;
  padding: 18px;
  border: 1px solid #b9cbe2;
  border-radius: var(--radius-card);
  background: #f7faff;
}

.install-guide-page.is-android .install-guide-step-copy {
  min-height: 112px;
}

.map-card.is-preview .map-canvas {
  pointer-events: none;
  touch-action: pan-y;
}

.stop-view-card {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin: 12px 0;
  padding: 0;
  border: 1px solid #c9d6e6;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.94);
  overflow: hidden;
}

.stop-view-card.is-wait {
  border-color: #abc4e4;
  background: #fbfdff;
}

.stop-view-card img,
.stop-view-card__placeholder {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 0;
  object-fit: cover;
  background:
    linear-gradient(90deg, rgba(255,255,255,0.4) 1px, transparent 1px),
    linear-gradient(rgba(255,255,255,0.4) 1px, transparent 1px),
    #dce6f2;
  background-size: 18px 18px;
}

.stop-view-card__copy {
  padding: 11px 12px 12px;
}

.stop-view-card span {
  display: block;
  color: var(--muted);
  font-size: 0.6875rem;
  font-weight: 800;
  text-transform: uppercase;
}

.stop-view-card strong {
  display: block;
  margin-top: 3px;
  font-size: 1.0625rem;
  line-height: 1.2;
}

.stop-view-card p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: var(--text-sm);
  line-height: 1.4;
}

.screen.is-map-expanded {
  position: fixed;
  inset: 0;
  z-index: 19;
  width: 100vw;
  height: 100dvh;
  min-height: 100dvh;
  padding: 0;
  overflow: hidden;
  background: #dfeaf6;
}

.screen.is-map-expanded .map-card.is-expanded {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 100%;
  margin: 0;
  border: 0;
  border-radius: 0;
}

.screen.is-map-expanded .map-expand,
.screen.is-map-expanded .map-recenter {
  width: 48px;
  height: 48px;
}

.screen.is-map-expanded .map-expand {
  top: max(12px, env(safe-area-inset-top));
  right: max(12px, env(safe-area-inset-right));
}

.screen.is-map-expanded .text-scale-trigger.is-map-expanded {
  left: max(12px, env(safe-area-inset-left));
}

.screen.is-map-expanded .map-recenter {
  right: max(12px, env(safe-area-inset-right));
  bottom: max(12px, env(safe-area-inset-bottom));
}

.screen.is-map-expanded .map-context {
  left: max(12px, env(safe-area-inset-left));
  right: max(72px, env(safe-area-inset-right));
  bottom: max(12px, env(safe-area-inset-bottom));
  max-height: calc(100dvh - max(84px, env(safe-area-inset-top)) - max(24px, env(safe-area-inset-bottom)));
  overflow-y: auto;
}

.stop-view-card.is-unavailable {
  display: block;
  border-style: dashed;
  background: #f8fbff;
}

.transit-slice-card {
  display: grid;
  gap: 10px;
  margin: 12px 0;
  padding: 12px;
  border: 1px solid #c9d6e6;
  border-radius: var(--radius-card);
  background: rgba(255, 255, 255, 0.95);
}

.transit-slice-card.is-compact {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 10px 11px;
}

.transit-slice-card.is-compact .transit-slice-card__main strong {
  font-size: 1.0625rem;
  line-height: 1.18;
}

.transit-schedule-line.is-hidden-compact {
  display: none;
}

.transit-slice-card__main span,
.live-transit-status small {
  display: block;
  color: var(--muted);
  font-size: 0.6875rem;
  font-weight: 800;
  text-transform: uppercase;
}

.transit-slice-card__main strong {
  display: block;
  margin-top: 3px;
  font-size: 1.25rem;
  line-height: 1.15;
}

.transit-slice-card__main p,
.transit-schedule-line p,
.live-transit-status p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: var(--text-sm);
  line-height: 1.4;
}

.transit-slice-card__main em {
  display: block;
  margin-top: 5px;
  color: #304158;
  font-size: 0.8125rem;
  font-style: normal;
  font-weight: 760;
}

.transit-schedule-line {
  padding: 8px 10px;
  border-radius: var(--radius-card);
  background: #f2f7ff;
  color: #18345f;
  font-size: 0.8125rem;
  font-weight: 760;
}

.live-transit-status {
  padding: 9px 10px;
  border: 1px solid #d9e4f2;
  border-radius: var(--radius-card);
  background: #fbfdff;
}

.transit-slice-card.is-compact .live-transit-status {
  min-width: 82px;
  padding: 6px 8px;
  text-align: right;
}

.live-transit-status strong {
  display: block;
  color: var(--ink);
  font-size: 0.875rem;
  line-height: 1.2;
}

.live-transit-status.is-live {
  border-color: #9ee3c3;
  background: #f7fffb;
}

.live-transit-status.is-live strong {
  color: #087443;
}

.ride-support {
  display: grid;
  gap: 10px;
  margin: 16px 40px 0;
}

.ride-support > p {
  margin: 0;
  color: #64748b;
  font-size: 1.0625rem;
  font-weight: 400;
  line-height: 22px;
}

.ride-get-off-cue__status {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 20px;
  border-radius: 14px;
  background: #e7f7ef;
  color: #158f68;
}

.ride-get-off-cue__status.is-live {
  background: #e7f7ef;
  color: #158f68;
}

.ride-get-off-cue__status b,
.ride-get-off-cue__status small {
  font-size: 0.875rem;
  line-height: 1.2;
}

.ride-get-off-cue__status small {
  color: inherit;
  opacity: 0.72;
  font-weight: 760;
}

.map-context {
  position: absolute;
  left: max(12px, env(safe-area-inset-left));
  right: max(72px, env(safe-area-inset-right));
  bottom: max(12px, env(safe-area-inset-bottom));
  z-index: 31;
  padding: 12px;
  border: 1px solid rgba(12, 28, 60, 0.14);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 14px 36px rgba(12, 28, 60, 0.18);
}

.map-context span {
  display: block;
  color: var(--muted);
  font-size: 0.6875rem;
  font-weight: 800;
  text-transform: uppercase;
}

.map-context strong {
  display: block;
  margin-top: 3px;
  font-size: 1.125rem;
  line-height: 1.15;
}

.map-context p {
  margin: 5px 0 10px;
  color: var(--muted);
  font-size: 0.8125rem;
  line-height: 1.3;
}

.map-empty {
  display: grid;
  place-items: center;
  height: 100%;
  padding: 20px;
  text-align: center;
  color: #304158;
  background:
    linear-gradient(90deg, rgba(255,255,255,0.55) 1px, transparent 1px),
    linear-gradient(rgba(255,255,255,0.55) 1px, transparent 1px),
    #dce8f5;
  background-size: 34px 34px;
}

.map-empty strong {
  display: block;
  margin-bottom: 6px;
}

.map-loading {
  position: absolute;
  inset: auto 12px 12px;
  z-index: 25;
  margin: 0;
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.94);
  color: #304158;
  font-size: 0.75rem;
  font-weight: 800;
  text-align: center;
}

.map-native-label {
  position: absolute;
  max-width: 190px;
  padding: 7px 10px;
  border: 1px solid rgba(7, 17, 74, 0.14);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.96);
  color: var(--ink);
  box-shadow: 0 8px 22px rgba(20, 34, 60, 0.16);
  font: 800 13px/1.15 Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  text-align: center;
  transform: translate(-50%, calc(-100% - 30px));
  white-space: nowrap;
  pointer-events: none;
}

.map-recenter {
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: 30;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(12, 28, 60, 0.16);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.95);
  color: #24324a;
  box-shadow: 0 8px 22px rgba(20, 34, 60, 0.16);
  pointer-events: auto;
  touch-action: manipulation;
}

.map-expand {
  position: absolute;
  right: 10px;
  top: 10px;
  z-index: 30;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(12, 28, 60, 0.16);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.95);
  color: #24324a;
  box-shadow: 0 8px 22px rgba(20, 34, 60, 0.16);
  pointer-events: auto;
  touch-action: manipulation;
}

.map-recenter.is-tracking {
  color: var(--primary-2);
}

.map-recenter svg,
.map-expand svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.audio-card {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 64px;
  align-items: center;
  gap: 10px;
  margin: 12px 0 14px;
  padding: 12px;
  border: 1px solid var(--line);
  background: var(--surface);
}

.audio-card.is-story-first {
  grid-template-columns: 32px minmax(0, 1fr) 78px;
  align-items: start;
  padding: 13px;
  border-color: #bcd8ff;
  box-shadow: 0 10px 26px rgba(24, 67, 120, 0.1);
}

.audio-card.is-playing {
  border-color: #9ee3c3;
  background: #fbfffd;
}

.audio-card.is-missing {
  border-color: #ffd69b;
  background: #fffaf2;
}

.audio-icon {
  width: 22px;
  height: 22px;
  color: #0aa36f;
}

.audio-card__body {
  min-width: 0;
}

.audio-card__meta {
  display: flex;
  min-height: 16px;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.audio-card span,
.audio-card em {
  display: block;
  color: var(--muted);
  font-size: 0.75rem;
}

.audio-card em {
  min-width: 52px;
  text-align: right;
  font-style: normal;
  white-space: nowrap;
}

.audio-card.is-playing span {
  color: #087443;
  font-weight: 800;
}

.audio-card.is-completed span {
  color: #004f9f;
  font-weight: 800;
}

.audio-card strong {
  display: block;
  margin-top: 2px;
  font-size: 1rem;
  line-height: 1.3;
}

.audio-progress {
  height: 3px;
  margin-top: 9px;
  overflow: hidden;
  border-radius: 999px;
  background: #dbe6f2;
}

.audio-progress span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: #0a56d6;
  transition: width 180ms linear;
}

.audio-card.is-playing .audio-progress span {
  background: #0aa36f;
}

.audio-card.is-completed .audio-progress span {
  background: #004f9f;
}

.audio-button {
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  background: #f8fbff;
  color: #003b88;
  font-size: 0.75rem;
  font-weight: 800;
}

.audio-button:disabled {
  color: #7a4a00;
  background: #fff6e9;
}

.actions {
  display: grid;
  gap: 8px;
}

.screen[data-state-base="ride"] .actions {
  gap: 14px;
  margin: 24px 40px 0;
}

.screen[data-state-base="wait"] .actions,
.screen[data-state-base="walk"] .actions {
  margin: 10px 0 12px;
}

.action-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  padding: 0 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  background: var(--surface);
  color: #003b88;
  font-size: var(--text-action);
  font-weight: 850;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
}

.action-button.primary {
  border-color: var(--cta-orange);
  background: var(--cta-orange);
  color: white;
}

.action-button.secondary {
  background: var(--surface);
  color: #003b88;
}

.screen[data-state-base="ride"] .action-button {
  min-height: 56px;
  border-radius: var(--radius-control);
}

.screen[data-state-base="ride"] .action-button.secondary {
  border-color: #c8d9ed;
}

.action-button.warning {
  border-color: #ffd69b;
  background: #fff6e9;
  color: #6b3a00;
}

.action-button.compact {
  min-height: 46px;
  width: 100%;
}

.dev-panel {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(109, 130, 158, 0.35);
}

.dev-panel__toggle {
  min-height: 34px;
  width: 100%;
  border: 1px solid rgba(109, 130, 158, 0.35);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.58);
  color: #58677d;
  font-size: 0.75rem;
  font-weight: 760;
}

.dev-panel__controls {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 8px;
}

.dev-panel__status {
  display: grid;
  gap: 5px;
  margin-top: 8px;
  padding: 8px 10px;
  border: 1px solid rgba(109, 130, 158, 0.25);
  border-radius: var(--radius-card);
  background: rgba(255, 255, 255, 0.62);
  color: #42526c;
  font-size: 0.6875rem;
  font-weight: 720;
  line-height: 1.25;
}

.dev-panel__controls button {
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.8);
  color: #24324a;
  font-size: 0.75rem;
  font-weight: 750;
}

.notice {
  margin: 12px 0;
  padding: 10px 12px;
  border: 1px solid #ffd69b;
  border-radius: var(--radius-card);
  background: #fff8ed;
  color: var(--warning);
  font-size: var(--text-sm);
  line-height: 1.4;
}

.notice.is-confirmed {
  border-color: #9ee3c3;
  background: #effbf5;
  color: #05603a;
}

.notice.is-quiet {
  border-color: var(--line);
  background: #f8fbff;
  color: var(--muted);
  font-size: 0.75rem;
}

.is-missing-image {
  display: none !important;
}

.tour-option {
  display: grid;
  grid-template-columns: 108px minmax(0, 1fr);
  gap: 13px;
  align-items: start;
  margin: 12px 0;
  padding: 12px;
  border: 1px solid #cbd8e9;
  border-radius: var(--radius-card);
  background: var(--surface);
  box-shadow: 0 10px 28px rgba(16, 36, 64, 0.08);
  scroll-margin-block: 12px;
}

.tour-catalog {
  display: grid;
  gap: 12px;
  margin: 14px 0;
}

.tour-catalog__intro {
  margin: 0 0 2px;
  color: var(--muted);
  font-size: var(--text-body);
  line-height: 1.35;
}

.tour-option.is-active {
  grid-template-columns: 128px minmax(0, 1fr);
  gap: 15px;
  padding: 14px;
  border-color: rgba(217, 87, 0, 0.55);
  background: #fffaf6;
  box-shadow: 0 16px 38px rgba(217, 87, 0, 0.13);
}

.tour-option.is-active .tour-option__magnet {
  min-height: 128px;
}

.tour-option.is-active .tour-option__title {
  font-size: 1.4375rem;
}

.tour-option__magnet {
  position: relative;
  display: block;
  min-height: 108px;
  aspect-ratio: 1;
  overflow: hidden;
  padding: 10px;
  border: 1px solid rgba(7, 18, 45, 0.16);
  border-radius: var(--radius-card);
  background: #f5c97c;
  color: #07122d;
}

.tour-option__magnet.has-image {
  padding: 0;
  background: #eef4fb;
}

.tour-option__magnet img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 1;
  object-fit: cover;
}

.tour-option__magnet::before,
.tour-option__magnet::after {
  content: "";
  position: absolute;
  inset: auto -8px 18px;
  height: 30px;
  background: rgba(255, 255, 255, 0.58);
  transform: rotate(-8deg);
}

.tour-option__magnet::after {
  inset: 16px -10px auto;
  height: 28px;
  background: rgba(9, 95, 150, 0.16);
  transform: rotate(9deg);
}

.tour-option__magnet.has-image::before,
.tour-option__magnet.has-image::after {
  display: none;
}

.tour-option__magnet.is-harbour {
  background: #9bd8d1;
}

.tour-option__magnet.is-market {
  background: #ffd083;
}

.tour-option__magnet.is-downtown {
  background: #b7d8ff;
}

.tour-option__magnet.is-waterfront {
  background: #a9dfef;
}

.tour-option__magnet > * {
  position: relative;
  z-index: 1;
}

.tour-option__magnet-fallback {
  position: absolute;
  inset: 10px;
  z-index: 1;
  display: grid;
  align-content: end;
}

.tour-option__magnet.has-image .tour-option__magnet-fallback {
  display: none;
}

.tour-option__magnet.has-image.is-missing-image {
  display: block !important;
  padding: 10px;
}

.tour-option__magnet.has-image.is-missing-image img {
  display: none;
}

.tour-option__magnet.has-image.is-missing-image::before,
.tour-option__magnet.has-image.is-missing-image::after {
  display: block;
}

.tour-option__magnet.has-image.is-missing-image .tour-option__magnet-fallback {
  display: grid;
}

.tour-option__magnet span {
  display: block;
  width: fit-content;
  padding: 3px 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.78);
  color: #17304d;
  font-size: 0.5625rem;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
}

.tour-option__magnet strong {
  display: block;
  margin-top: 5px;
  color: #07122d;
  font-size: 1rem;
  font-weight: 900;
  line-height: 0.98;
}

.tour-option__magnet ul {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  margin: 7px 0 0;
  padding: 0;
  list-style: none;
}

.tour-option__magnet li {
  max-width: 100%;
  padding: 2px 5px;
  border-radius: 999px;
  background: rgba(7, 18, 45, 0.72);
  color: #ffffff;
  font-size: 0.5rem;
  font-weight: 800;
  line-height: 1.15;
}

.tour-option__body {
  min-width: 0;
}

.tour-option__badge {
  display: block;
  width: fit-content;
  padding: 4px 8px;
  border-radius: 999px;
  background: #fff0e7;
  color: #93420a;
  font-size: 0.6875rem;
  font-weight: 850;
  line-height: 1;
  text-transform: uppercase;
}

.tour-option__title {
  display: block;
  margin-top: 7px;
  color: var(--ink);
  font-size: 1.25rem;
  line-height: 1.12;
  font-weight: 850;
  padding-bottom: 3px;
}

.tour-option__subtitle {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 0.9375rem;
  line-height: 1.35;
  padding-bottom: 3px;
}

.tour-option__facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
  margin: 10px 0 0;
  color: #304158;
}

.tour-option__facts div {
  min-width: 0;
  padding: 7px 8px;
  border: 1px solid #e0e8f3;
  border-radius: var(--radius-card);
  background: #f8fbff;
}

.tour-option__facts dt {
  color: var(--muted);
  font-size: 0.625rem;
  font-weight: 800;
  line-height: 1.2;
  text-transform: uppercase;
  padding-bottom: 3px;
}

.tour-option__facts dd {
  margin: 4px 0 0;
  color: #14243c;
  font-size: 0.8125rem;
  font-weight: 850;
  line-height: 1.15;
  padding-bottom: 3px;
}

.tour-option .action-button {
  grid-column: 1 / -1;
  margin-top: 12px;
  width: 100%;
  border-radius: var(--radius-control);
  font-weight: 900;
}

.tour-option__selection-error {
  grid-column: 1 / -1;
  width: 100%;
  margin: 0;
}

.tour-option.has-selection-error,
.tour-option.has-selection-error.is-active {
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
}

.tour-option.has-selection-error .tour-option__magnet,
.tour-option.has-selection-error.is-active .tour-option__magnet {
  width: 100%;
  min-height: 0;
  aspect-ratio: 16 / 9;
}

.tour-option.has-selection-error .tour-option__magnet img {
  aspect-ratio: 16 / 9;
  object-fit: contain;
}

.tour-option.has-selection-error .action-button,
.tour-option.has-selection-error .tour-option__selection-error {
  grid-column: 1;
}

@media (max-width: 359px) {
  .tour-option,
  .tour-option.is-active {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    padding: 10px;
    overflow: visible;
  }

  .tour-option__magnet,
  .tour-option.is-active .tour-option__magnet {
    width: 100%;
    min-height: 0;
    aspect-ratio: 16 / 9;
  }

  .tour-option__magnet img {
    aspect-ratio: 16 / 9;
    object-fit: contain;
  }

  .tour-option .action-button,
  .tour-option__selection-error {
    grid-column: 1;
  }
}

html[data-text-scale="extra-large"] .tour-option,
html[data-text-scale="extra-large"] .tour-option.is-active {
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
}

html[data-text-scale="extra-large"] .tour-option__magnet,
html[data-text-scale="extra-large"] .tour-option.is-active .tour-option__magnet {
  width: 100%;
  min-height: 0;
  aspect-ratio: 16 / 9;
}

html[data-text-scale="extra-large"] .tour-option__magnet img {
  aspect-ratio: 16 / 9;
  object-fit: contain;
}

html[data-text-scale="extra-large"] .tour-option__facts {
  grid-template-columns: minmax(0, 1fr);
}

.pwa-install-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  margin: 10px 0 12px;
  padding: 12px 14px;
  border: 1px solid rgba(18, 163, 108, 0.28);
  border-radius: 8px;
  background: #f5fff9;
}

.pwa-install-card span {
  display: block;
  color: #05603a;
  font-size: 0.6875rem;
  font-weight: 800;
  text-transform: uppercase;
}

.pwa-install-card strong {
  display: block;
  margin-top: 4px;
  font-size: 0.9375rem;
  line-height: 1.2;
}

.pwa-install-card p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: var(--text-sm);
  line-height: 1.4;
}

.pwa-install-card button {
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--primary);
  border-radius: var(--radius-control);
  background: var(--primary);
  color: #ffffff;
  font-size: 0.8125rem;
  font-weight: 800;
}

.poi-montage {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 10px 0 12px;
}

.poi-montage__item {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.poi-montage__item img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
}

.poi-montage__item figcaption {
  min-height: 34px;
  padding: 6px 7px;
  color: var(--ink);
  font-size: 0.6875rem;
  font-weight: 760;
  line-height: 1.15;
}

.tour-places-preview {
  margin: 16px 0 12px;
  scroll-margin-top: 18px;
}

.tour-places-preview__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.tour-places-preview__header span {
  color: var(--muted);
  font-size: 0.6875rem;
  font-weight: 800;
  text-transform: uppercase;
}

.tour-places-preview__header strong {
  color: var(--ink);
  font-size: 0.8125rem;
  font-weight: 780;
}

.tour-places-grid {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 0 2px 8px;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
}

.tour-place-tile {
  flex: 0 0 190px;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  scroll-snap-align: start;
}

.tour-place-tile img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
}

.tour-place-tile div:not(.tour-place-tile__marker) {
  padding: 8px 9px 10px;
}

.tour-place-tile span,
.tour-anchor-tile span {
  display: block;
  color: var(--muted);
  font-size: 0.625rem;
  font-weight: 820;
  text-transform: uppercase;
}

.tour-place-tile strong {
  display: block;
  margin-top: 3px;
  color: var(--ink);
  font-size: 0.9375rem;
  font-weight: 800;
  line-height: 1.14;
}

.tour-place-tile__marker {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  background: #edf4ff;
  color: var(--primary-2);
  font-size: 1.125rem;
  font-weight: 850;
}

.tour-anchor-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 9px;
}

.tour-anchor-tile {
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.72);
}

.tour-anchor-tile strong {
  display: block;
  margin-top: 3px;
  color: var(--ink);
  font-size: 0.75rem;
  font-weight: 760;
  line-height: 1.18;
}

.tour-anchor-tile.is-start {
  border-color: rgba(18, 163, 108, 0.28);
  background: #f5fff9;
}

.tour-anchor-tile.is-transit {
  background: #f8fbff;
}

.tour-anchor-tile.is-finish {
  border-color: rgba(11, 92, 255, 0.25);
  background: #f5f9ff;
}

.destination-media-card {
  display: grid;
  grid-template-columns: minmax(128px, 39%) 1fr;
  gap: 13px;
  align-items: center;
  margin: 12px 0;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.92);
}

.destination-media-card img {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 7px;
  object-fit: cover;
}

.destination-media-card.is-near-arrival {
  grid-template-columns: minmax(148px, 44%) 1fr;
  border-color: #bcd8ff;
  background: #fbfdff;
}

.destination-media-card span,
.story-media span {
  display: block;
  color: var(--muted);
  font-size: 0.6875rem;
  font-weight: 800;
  text-transform: uppercase;
}

.destination-media-card strong {
  display: block;
  margin-top: 3px;
  font-size: 1rem;
  line-height: 1.18;
}

.destination-media-card p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 0.75rem;
  line-height: 1.3;
}

.first-destination-preview {
  display: grid;
  grid-template-columns: minmax(132px, 42%) 1fr;
  gap: 13px;
  align-items: center;
  margin: 14px 0 12px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.92);
}

.first-destination-preview img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 7px;
  object-fit: cover;
}

.first-destination-preview span {
  display: block;
  color: var(--muted);
  font-size: 0.6875rem;
  font-weight: 800;
  text-transform: uppercase;
}

.first-destination-preview strong {
  display: block;
  margin-top: 4px;
  font-size: 1.25rem;
  line-height: 1.12;
}

.first-destination-preview p {
  margin: 7px 0 0;
  color: var(--muted);
  font-size: 0.8125rem;
  line-height: 1.35;
}

.story-media {
  margin: 12px 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.story-media__status {
  min-height: 88px;
  display: grid;
  place-items: center;
  padding: 18px;
  color: var(--muted);
  text-align: center;
  line-height: 1.4;
  background: #f8fbff;
}

.story-media.has-usable-image .story-media__status {
  display: none;
}

.story-media.has-media-error {
  display: block !important;
  border-style: dashed;
}

.story-media.has-media-error img {
  display: none;
}

.story-media img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
}

.story-media div {
  padding: 12px 13px 13px;
}

.story-media p {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: var(--text-sm);
  line-height: 1.45;
}

.completion-recap {
  margin: 22px 0 10px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.completion-recap__header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
}

.completion-recap__header span {
  display: block;
  margin-bottom: 3px;
  color: var(--muted);
  font-size: 0.6875rem;
  font-weight: 820;
  text-transform: uppercase;
}

.completion-recap__header h2 {
  margin: 0;
  color: var(--ink);
  font-size: 1.3125rem;
  line-height: 1.15;
}

.completion-recap__header > strong {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 0.8125rem;
}

.completion-recap__gallery {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 0 2px 10px;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
}

.completion-place-card {
  flex: 0 0 156px;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--surface);
  scroll-snap-align: start;
}

.completion-place-card__media {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  background: #edf4ff;
}

.completion-place-card img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.completion-place-card__fallback {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 14px;
  color: var(--primary-2);
  font-size: 0.875rem;
  font-weight: 820;
  text-align: center;
}

.completion-place-card > strong {
  display: block;
  min-height: 54px;
  padding: 10px 11px;
  color: var(--ink);
  font-size: 0.9375rem;
  line-height: 1.16;
}

.completion-place-card.has-missing-media .completion-place-card__media {
  background: #edf4ff;
}

.route-summary {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 14px 0 12px;
}

.route-summary div,
.permission-panel,
.install-panel,
.transition-panel,
.story-intro,
.completion-panel,
.instruction-chip {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.9);
}

.route-summary div {
  min-height: 74px;
  padding: 11px 12px;
}

.route-summary__headline {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--muted);
  font-size: 0.9375rem;
  font-weight: 800;
  line-height: 1.35;
}

.route-summary span,
.transition-panel span,
.story-intro span,
.instruction-chip span {
  display: block;
  color: var(--muted);
  font-size: 0.6875rem;
  font-weight: 800;
  text-transform: uppercase;
}

.route-summary strong {
  display: block;
  margin-top: 5px;
  font-size: 1rem;
  line-height: 1.2;
}

.permission-panel,
.install-panel,
.transition-panel,
.story-intro,
.completion-panel,
.instruction-chip {
  margin: 14px 0 12px;
  padding: 13px 14px;
}

.permission-panel strong,
.install-panel strong,
.transition-panel strong,
.story-intro strong,
.completion-panel strong,
.instruction-chip strong {
  display: block;
  font-size: var(--text-lead);
  line-height: 1.25;
}

.permission-panel p,
.install-panel p,
.transition-panel p,
.story-intro p,
.completion-panel p,
.instruction-chip p {
  margin: 7px 0 0;
  color: var(--muted);
  font-size: var(--text-sm);
  line-height: 1.45;
}

.install-panel__support {
  width: 100%;
  min-height: 56px;
  margin-top: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  background: var(--surface);
  color: #0a4595;
  font-weight: 900;
}

.install-panel__status {
  padding: 10px 12px;
  border-radius: 8px;
  background: #eef7ff;
  color: var(--muted);
  font-weight: 760;
}

.install-panel__status.is-saved {
  background: #e9f8f0;
  color: #126c4b;
}

.android-install-help {
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--surface);
  color: var(--ink);
}

.android-install-help > strong {
  display: block;
  margin-bottom: 6px;
}

.android-install-help ol {
  margin: 0;
  padding-left: 22px;
  color: var(--muted);
}

.android-install-help li + li {
  margin-top: 5px;
}

.install-panel__actions {
  margin: 0;
}

.onboarding-panel {
  display: grid;
  gap: 14px;
  padding: 14px;
}

.onboarding-visual {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid rgba(11, 92, 255, 0.16);
  border-radius: var(--radius-card);
  background: #f7fbff;
}

.onboarding-visual img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.install-guide-page > h1 {
  margin: 18px 0 12px;
}

.install-guide-brand {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 48px;
  padding-right: 56px;
}

.install-guide-brand > div {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}

.install-guide-brand img {
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  border-radius: 8px;
}

.install-guide-brand button {
  min-width: 48px;
  min-height: 48px;
  padding: 8px;
  border: 0;
  background: transparent;
  color: #0a4595;
  font-weight: 850;
}

.install-guide-truth {
  margin: 12px 0 0;
  color: #3e536f;
  font-size: var(--text-sm);
  line-height: 1.42;
}

.install-guide-page > .action-button {
  width: 100%;
  min-height: 56px;
}

.install-guide-sequence {
  margin-top: 14px;
}

.install-guide-visual-stage {
  position: sticky;
  z-index: 3;
  top: max(8px, env(safe-area-inset-top));
  margin-inline: -8px;
  padding: 8px;
  border-radius: 10px;
  background: var(--bg);
}

.install-guide-progress-row {
  display: grid;
  grid-template-columns: auto minmax(60px, 1fr);
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}

.install-guide-progress-row > span {
  color: var(--cta-orange);
  font-size: 0.8125rem;
  font-weight: 900;
  white-space: nowrap;
}

.install-guide-progress {
  height: 5px;
  overflow: hidden;
  border-radius: 999px;
  background: #c7d5e8;
}

.install-guide-progress span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--primary-2);
  transition: width 180ms ease;
}

.install-guide-visual {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  border: 1px solid #b9cbe2;
  border-radius: var(--radius-card);
  background: #eaf3ff;
  object-fit: contain;
}

.install-guide-step-copy {
  min-height: 76px;
}

.install-guide-step-copy h2 {
  margin: 10px 0 0;
  font-size: 1.25rem;
  line-height: 1.2;
}

.install-guide-step-copy p,
.install-guide-summary p {
  margin: 5px 0 0;
  color: var(--muted);
  line-height: 1.42;
}

.install-guide-playback {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.install-guide-playback button {
  min-height: 48px;
  border: 1px solid #9db6d6;
  border-radius: var(--radius-control);
  background: var(--surface);
  color: #0a4595;
  font-weight: 900;
}

.install-guide-summary {
  margin-top: 14px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--surface);
}

.install-guide-summary strong {
  display: block;
}

.install-guide-summary p {
  font-size: var(--text-sm);
}

.install-guide-fallback {
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

.install-guide-fallback summary {
  display: flex;
  align-items: center;
  min-height: 48px;
  color: #0a4595;
  font-weight: 850;
  cursor: pointer;
}

.install-guide-fallback ol {
  display: grid;
  gap: 8px;
  margin: 8px 0 0;
  padding-left: 26px;
  color: var(--muted);
}

.install-guide-fallback li {
  padding-left: 3px;
  line-height: 1.35;
}

.install-guide-fallback li::marker {
  color: var(--cta-orange);
  font-weight: 900;
}

html[data-text-scale="extra-large"] .install-guide-visual-stage {
  position: static;
}

.onboarding-panel__copy {
  display: grid;
  gap: 5px;
}

.onboarding-panel__eyebrow {
  color: var(--muted);
  font-size: 0.6875rem;
  font-weight: 850;
  letter-spacing: 0;
  text-transform: uppercase;
}

.onboarding-benefits {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.onboarding-benefits li {
  position: relative;
  min-height: 32px;
  padding: 7px 10px 7px 34px;
  border: 1px solid rgba(203, 216, 233, 0.86);
  border-radius: var(--radius-card);
  background: #f8fbff;
  color: #18345f;
  font-size: var(--text-sm);
  font-weight: 760;
  line-height: 1.25;
}

.onboarding-benefits li::before {
  position: absolute;
  left: 11px;
  top: 10px;
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: var(--route-done);
  content: "";
}

.permission-panel__status {
  display: grid;
  gap: 4px;
  padding: 12px 14px;
  border: 1px solid #bfd3e8;
  border-radius: var(--radius-card);
  background: #f4f8fc;
}

.permission-panel__status strong {
  font-size: var(--text-body);
}

.permission-panel__status p {
  margin: 0;
  color: var(--muted);
  font-size: var(--text-sm);
  line-height: 1.4;
}

.permission-panel__status.is-requesting,
.permission-panel__status.is-timeout {
  border-color: #ecd39a;
  background: #fff8e8;
}

.permission-panel__status.is-allowed {
  border-color: #abd7c3;
  background: #effaf5;
}

.permission-panel__status.is-denied,
.permission-panel__status.is-unavailable {
  border-color: #e2b5b5;
  background: #fff3f3;
}

.action-button:disabled {
  cursor: wait;
  opacity: 0.72;
}

.layout-install .actions {
  margin-top: 14px;
}

.instruction-chip.is-compact {
  margin: 10px 0 8px;
  padding: 10px 12px;
}

.instruction-chip.is-compact strong {
  font-size: 1.125rem;
}

.instruction-chip.is-walk-cue {
  margin: 4px 0 10px;
  padding: 0;
  border: 0;
  background: transparent;
}

.instruction-chip.is-walk-cue strong {
  color: var(--muted);
  font-size: var(--text-body);
  font-weight: 760;
}

.instruction-chip.is-boarding {
  margin: 12px 0;
  padding: 13px 14px;
  border-color: #b7c9e2;
  background: #fbfdff;
}

.instruction-chip.is-boarding strong {
  margin-top: 2px;
  font-size: 1.625rem;
  line-height: 1.05;
}

.instruction-chip.is-boarding p {
  font-size: 0.875rem;
}

.recovery-guidance {
  margin: 12px 0;
  padding: 13px 14px;
  border-left: 4px solid var(--warning);
  border-radius: var(--radius-card);
  background: #fff8ec;
}

.recovery-guidance strong {
  display: block;
  font-size: var(--text-lead);
  line-height: 1.25;
}

.recovery-guidance p {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: var(--text-body);
  line-height: 1.4;
}

.layout-selection .tour-option {
  margin-top: 18px;
}

.layout-permission .actions,
.layout-transition .actions,
.layout-completion .actions {
  margin-top: 18px;
}

.layout-completion .completion-panel {
  margin-bottom: 12px;
  border-color: #abd7c3;
  background: #effaf5;
}

.completion-panel__label {
  display: block;
  margin-bottom: 5px;
  color: var(--success);
  font-size: 0.6875rem;
  font-weight: 850;
  text-transform: uppercase;
}

.layout-completion .actions {
  margin-top: 0;
  margin-bottom: 0;
}

.layout-completion .action-button.primary {
  font-size: 1.1875rem;
}

.layout-story .audio-card {
  margin-top: 10px;
}

.layout-story h1 {
  max-width: 13ch;
  font-size: 2rem;
}

.layout-story .story-media {
  margin-bottom: 0;
  border-bottom: 0;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

.layout-story .audio-card.is-story-first {
  margin: 0 0 12px;
  border-color: var(--line);
  border-top: 0;
  border-top-right-radius: 0;
  border-top-left-radius: 0;
  background: var(--surface);
  box-shadow: none;
}

.layout-story .audio-card.is-story-first.is-playing {
  background: #fbfffd;
}

.layout-story .audio-card.is-story-first .audio-button {
  align-self: center;
}

.layout-story .actions {
  margin-top: 10px;
}

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

  .install-guide-visual-stage {
    position: static;
  }
}

@media (max-height: 700px) {
  .install-guide-visual-stage {
    position: static;
  }
}

@media (min-width: 720px) {
  body {
    padding: 28px 0;
  }

  .app-shell {
    min-height: 860px;
    border-radius: 18px;
    box-shadow: var(--shadow);
  }
}


/* SGT-221 UX revision v2: governed 200%-equivalent element-safe reflow. */
.transit-journey-facts {
  display: grid;
  gap: 10px;
  margin: 12px 0;
  padding: 13px 14px;
  border: 1px solid #b7c9e2;
  border-radius: var(--radius-card);
  background: #fbfdff;
}

.transit-journey-facts__heading {
  display: grid;
  gap: 3px;
}

.transit-journey-facts__heading span,
.transit-journey-facts dt {
  color: var(--muted);
  font-size: 0.6875rem;
  font-weight: 800;
  text-transform: uppercase;
}

.transit-journey-facts__heading strong {
  color: var(--ink);
  font-size: 1.1875rem;
  line-height: 1.2;
}

/* SGT-288: accepted SGT-285 one-task progressive disclosure. */
.phase-label {
  color: #07533f;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.transit-journey-facts__essential {
  display: grid;
  gap: 8px;
}

.transit-status-line {
  margin: 0;
  padding: 10px 12px;
  border-radius: 10px;
  background: #eef6ff;
  overflow-wrap: anywhere;
}

.transit-status-line strong {
  white-space: nowrap;
}

.transit-journey-facts__provenance summary {
  display: flex;
  align-items: center;
  min-height: 44px;
  cursor: pointer;
  font-weight: 800;
}

.screen[data-state-base="wait"] > .actions,
.screen[data-state-base="ride"] > .actions {
  position: sticky;
  z-index: 8;
  bottom: 0;
  margin-top: 12px;
  padding: 10px 0 max(10px, env(safe-area-inset-bottom));
  background: linear-gradient(to bottom, rgb(255 255 255 / 0.94), #fff 18%);
}

.screen[data-state-base="wait"] {
  padding-bottom: calc(92px + env(safe-area-inset-bottom));
}

.screen[data-state-base="wait"] > .actions {
  position: fixed;
  z-index: 54;
  right: max(12px, calc((100vw - min(100vw, 430px)) / 2 + 12px));
  bottom: 0;
  left: max(12px, calc((100vw - min(100vw, 430px)) / 2 + 12px));
  margin: 0;
  padding: 10px 0 max(10px, env(safe-area-inset-bottom));
  background: linear-gradient(to bottom, rgb(237 245 255 / 0.92), #edf5ff 18%);
}

.screen[data-state-base="wait"] > .actions .action-button,
.screen[data-state-base="ride"] > .actions .action-button {
  min-height: 52px;
}

.screen[data-state-base="ride"] .transit-journey-facts__heading:empty {
  display: none;
}

@media (max-width: 390px) {
  .stop-recognition,
  .locate-stop,
  .transit-journey-facts {
    padding: 10px;
  }

  .transit-journey-facts__essential,
  .transit-journey-facts__provenance dl {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 200px) {
  .locate-stop,
  .stop-recognition,
  .transit-journey-facts,
  .ride-support {
    width: 100%;
    min-width: 0;
    padding: 8px;
  }

  .locate-stop__panel .map-card {
    height: 150px !important;
    min-height: 150px;
  }

  .locate-stop__panel .map-empty span {
    display: none !important;
  }

  .screen[data-state-base="wait"] > .actions,
  .screen[data-state-base="ride"] > .actions {
    padding-right: 0;
    padding-left: 0;
  }
}

/* SGT-316 v8: the persistent arrival action owns a dedicated viewport row.
   Only the guidance panel scrolls, so content can never pass underneath it. */
.screen[data-minimal-transit-access="true"] {
  --access-sticky-surface-clearance: 16px;
  --access-sticky-visual-outset: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  height: 100dvh;
  min-height: 100dvh;
  max-height: 100dvh;
  padding-bottom: max(10px, env(safe-area-inset-bottom));
  overflow: hidden;
}

.screen[data-minimal-transit-access="true"] > .route-progress,
.screen[data-minimal-transit-access="true"] > h1 {
  flex: 0 0 auto;
}

.screen[data-minimal-transit-access="true"] > .locate-stop,
.screen[data-minimal-transit-access="true"] > .stop-recognition {
  flex: 1 1 auto;
  min-height: 0;
  padding-bottom: 18px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scroll-padding-block: 12px 24px;
  scrollbar-gutter: stable;
}

.screen[data-minimal-transit-access="true"] .locate-stop__primary-action {
  position: relative;
  z-index: 12;
  right: auto;
  bottom: auto;
  left: auto;
  flex: 0 0 auto;
  width: 100%;
  margin: 8px 0 0;
  padding: 8px;
  border: 1px solid rgba(9, 65, 51, 0.18);
  border-radius: 14px;
  background: #f7faf8;
  box-shadow: 0 8px 14px -12px rgba(16, 36, 64, 0.28);
  backdrop-filter: none;
}

.screen[data-minimal-transit-access="true"] .locate-stop__primary-action:focus-within {
  outline: 3px solid #ffbd2e;
  outline-offset: 2px;
}

.transit-journey-facts dl {
  display: grid;
  gap: 8px;
  margin: 0;
}

.transit-journey-facts dl > div {
  min-width: 0;
  padding-top: 8px;
  border-top: 1px solid #e0e8f3;
}

.transit-journey-facts dd {
  margin: 3px 0 0;
  color: #14243c;
  font-size: var(--text-sm);
  font-weight: 760;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.transit-journey-facts__provenance {
  min-width: 0;
  border-top: 1px solid #e0e8f3;
  padding-top: 8px;
}

.transit-journey-facts__provenance summary {
  min-height: 44px;
  color: #0a4595;
  font-size: var(--text-sm);
  font-weight: 850;
  line-height: 44px;
  overflow-wrap: anywhere;
}

.transit-journey-facts__provenance ul {
  margin: 4px 0 0;
  padding-left: 18px;
}

.transit-journey-facts__provenance li {
  overflow-wrap: anywhere;
}

@media (max-width: 280px) {
  .screen {
    padding-right: 10px;
    padding-left: 10px;
  }

  .screen > *,
  .tour-option *,
  .route-summary *,
  .onboarding-panel *,
  .transit-journey-facts *,
  .locate-stop *,
  .transit-slice-card *,
  .ride-support *,
  .completion-recap * {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  .tour-option,
  .tour-option.is-active {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    padding: 10px;
    overflow: visible;
  }

  .tour-option__magnet,
  .tour-option.is-active .tour-option__magnet {
    width: 100%;
    min-height: 0;
    aspect-ratio: 16 / 9;
  }

  .tour-option__magnet img {
    aspect-ratio: 16 / 9;
    object-fit: contain;
  }

  .tour-option.is-active .tour-option__title {
    font-size: 1.1875rem;
  }

  .tour-option__facts,
  .route-summary,
  .transit-slice-card.is-compact,
  .install-guide-progress-row,
  .install-guide-playback {
    grid-template-columns: minmax(0, 1fr);
  }

  .tour-option .action-button {
    grid-column: 1;
  }

  .tour-places-grid,
  .completion-recap__gallery {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    overflow: visible;
    scroll-snap-type: none;
  }

  .tour-place-tile,
  .completion-place-card {
    width: 100%;
    max-width: none;
    flex-basis: auto;
  }

  .tour-places-preview__header,
  .completion-recap__header {
    display: grid;
    align-items: start;
    gap: 5px;
  }

  .onboarding-panel,
  .permission-panel,
  .install-panel,
  .transit-journey-facts {
    padding: 10px;
  }

  .onboarding-visual,
  .onboarding-visual img {
    width: 100%;
    height: auto;
  }

  .transit-slice-card.is-compact .live-transit-status {
    width: 100%;
    min-width: 0;
    text-align: left;
  }

  .ride-support {
    margin-right: 0;
    margin-left: 0;
  }

  .ride-get-off-heading strong {
    overflow-wrap: anywhere;
  }

  .install-guide-visual-stage {
    position: static;
    margin-inline: 0;
    padding: 0;
  }

  .install-guide-brand {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    padding-right: 0;
  }

  .install-guide-brand button,
  .install-guide-playback button,
  .install-panel__support,
  .action-button {
    width: 100%;
    min-height: 48px;
  }

  .map-context {
    right: 8px;
    left: 8px;
  }
}

/* SGT-293 exact-stop arrivals: additive, single-column, 195 CSS px safe. */
.arrival-component.direct-service-card { display: block; min-width: 0; overflow-wrap: anywhere; padding: 0; border: 0; background: transparent; margin: .25rem 0; }
.direct-map-empty { box-sizing: border-box; padding: 64px 16px 16px; }
.direct-estimate-eyebrow { display: block; font-size: .55em; font-weight: 500; margin-bottom: .25em; }
.direct-service-card :is(button, summary, a) { scroll-margin-block: 16px 112px; }
.direct-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.direct-service-card p { margin: .25rem 0; }
.direct-service-card p:empty { display: none; }
.direct-service-card button, .direct-service-card summary, .direct-service-card .direct-maps-link {
  min-height: 44px; min-width: 44px; box-sizing: border-box; padding: .65rem; display: block; white-space: normal; overflow-wrap: anywhere;
}
.direct-service-card button { width: auto; max-width: 100%; font: inherit; border-radius: 8px; border: 0; background: transparent; text-decoration: underline; }
.direct-service-card button[aria-disabled="true"] { opacity: .65; }
.direct-service-card :focus-visible { outline: 3px solid #005a9c; outline-offset: 3px; }
.direct-service-line { font-size: 1.15em; }
.direct-recovery { display: block; overflow-wrap: anywhere; }
.screen:has(.direct-options), body:has(.direct-options) { background: #fff; }
.screen:has(.direct-options) { position:relative; padding-top:80px; }
.screen:has(.direct-options) .text-scale-tools { position:absolute; top:12px; right:12px; display:flex; justify-content:flex-end; min-height:48px; }
.screen:has(.direct-options) .text-scale-trigger { position:static; flex:0 0 48px; box-shadow:none; }
[data-direct-cta-context]:empty { display:none; }
.arrival-component.direct-options { display:block; padding:0; border:0; background:#fff; color:#09203d; margin:.4rem 0; }
.direct-options p { margin:.4rem 0; }
.direct-options p:empty { display:none; }
.direct-options [data-direct-list] { border:1px solid #c5d2e2; border-radius:14px; overflow:hidden; background:#f8fbff; }
.direct-option { display:flex; align-items:center; gap:10px; min-height:44px; padding:12px; border:0; border-bottom:1px solid #c5d2e2; box-sizing:border-box; cursor:pointer; }
.direct-option:last-child { border-bottom:0; }
.direct-option:has(input:checked) { background:#dceafa; box-shadow:inset 3px 0 #216bbb; }
.direct-option input { flex:0 0 18px; width:18px; height:18px; margin:0; }
.direct-option span { min-width:0; overflow-wrap:anywhere; }
.direct-option strong,.direct-option small { display:block; line-height:1.35; }
.direct-option strong { font-size:1.15em; font-weight:500; }
.direct-option small { font-size:1em; }
.direct-options :is(button,summary,a) { min-width:44px; min-height:44px; box-sizing:border-box; padding:10px 8px; font:inherit; white-space:normal; overflow-wrap:anywhere; scroll-margin-block:16px 160px; }
.direct-options button { background:transparent; border:0; text-decoration:underline; color:inherit; }
.direct-options summary { cursor:pointer; }
.direct-tools { display:grid; grid-template-columns:max-content minmax(0,1fr); column-gap:12px; align-items:start; }
.direct-tools details { display:block; min-width:0; }
.direct-tools details[open] { grid-column:1 / -1; }
.direct-tools summary { min-width:0; }
.direct-tools details:not([open]) .direct-detail-content { display:none; }
.direct-detail-content { min-width:0; overflow-wrap:anywhere; padding:4px 8px; }
.direct-options .direct-budget { font-size:.8em; margin:0 8px 6px; }
.direct-options [hidden] { display:none !important; }
.direct-options [aria-disabled="true"] { opacity:.65; }
.direct-options .direct-maps-link { display:block; text-align:center; border:1px solid #c5d2e2; border-radius:10px; text-decoration:none; color:inherit; }
.direct-options .direct-maps-link.is-fallback { background:#b94700; color:#fff; }
.direct-options .direct-maps-hint { font-size:.8em; text-align:center; }
.direct-options :focus-visible { outline:3px solid #005a9c; outline-offset:2px; }
.screen:has(.direct-options) > .actions { display:flex; flex-direction:column; gap:4px; background:#fff; }
.screen:has(.direct-options) { padding-bottom:190px; }
[data-direct-cta-context] { margin:0; font-size:.85em; line-height:1.3; overflow-wrap:anywhere; }
.arrival-component {
  display: grid;
  gap: 0.65rem;
  min-width: 0;
  margin: 0.9rem 0;
  padding: 0.9rem;
  border: 1px solid rgba(7, 17, 74, 0.18);
  border-radius: 0.9rem;
  background: #f8fbff;
  overflow-wrap: anywhere;
}
.arrival-component__heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.6rem;
  min-width: 0;
}
.arrival-component__heading h2 { margin: 0; font-size: 1rem; line-height: 1.35; }
.arrival-badge { display: inline-block; max-width: 100%; padding: 0.25rem 0.5rem; border-radius: 999px; background: #e7edf5; color: #07114a; font-size: 0.78rem; font-weight: 800; }
.arrival-badge.is-live { background: #d9f4e8; color: #07583b; }
.arrival-badge.is-scheduled { background: #fff0c7; color: #6c4300; }
.arrival-badge.is-unavailable, .arrival-badge.is-offline { background: #f0f1f3; color: #3d4651; }
.arrival-status, .arrival-source, .arrival-provider-message p { margin: 0; }
.arrival-status { font-weight: 700; }
.arrival-estimate-label { margin: 0; color: #0a4595; font-weight: 800; }
.arrival-source { font-size: 0.78rem; color: #4d5968; line-height: 1.45; }
.arrival-list, .arrival-later ol { display: grid; gap: 0.45rem; margin: 0; padding-left: 1.35rem; }
.arrival-list li, .arrival-later li { padding-left: 0.15rem; }
.arrival-list li strong, .arrival-list li span, .arrival-later li strong, .arrival-later li span { display: block; }
.arrival-list li span, .arrival-later li span { margin-top: 0.1rem; font-size: 0.85rem; color: #4d5968; }
.arrival-later summary, .arrival-provider-message summary { min-height: 44px; display: flex; align-items: center; font-weight: 750; cursor: pointer; }
.arrival-refresh { min-height: 44px; min-width: 44px; justify-self: start; padding: 0.65rem 0.9rem; border: 1px solid #07114a; border-radius: 0.65rem; color: #07114a; background: #fff; font: inherit; font-weight: 750; }
.arrival-refresh:disabled { opacity: 0.55; cursor: not-allowed; }
.arrival-refresh:focus-visible, .arrival-later summary:focus-visible, .arrival-provider-message summary:focus-visible { outline: 3px solid #ffbd2e; outline-offset: 3px; }
.arrival-secondary {
  min-width: 0;
  border-top: 1px solid #cbd8e9;
  padding-top: 0.25rem;
}
.arrival-secondary summary {
  display: flex;
  align-items: center;
  min-height: 44px;
  cursor: pointer;
  color: #0a4595;
  font-weight: 800;
}
.arrival-secondary h3 { margin: 0.75rem 0 0.35rem; font-size: 0.875rem; }
.arrival-secondary ol { display: grid; gap: 0.45rem; margin: 0; padding-left: 1.35rem; }
.arrival-secondary dl { display: grid; gap: 0.5rem; margin: 0.75rem 0 0; }
.arrival-secondary dd { margin: 0.15rem 0 0; }
.arrival-secondary p { margin: 0.75rem 0 0; }
.arrival-secondary .arrival-refresh { margin-top: 0.75rem; }
.arrival-secondary summary:focus-visible { outline: 3px solid #ffbd2e; outline-offset: 3px; }
@media (max-width: 240px) {
  .arrival-component { padding: 0.75rem; }
  .arrival-component__heading { display: grid; }
  .arrival-badge { border-radius: 0.55rem; }
  .arrival-list, .arrival-later ol { padding-left: 1.1rem; }
}
@media (prefers-reduced-motion: reduce) {
  .arrival-component * { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}

/* SGT-300: accepted stop-recognition and whole-screen hierarchy integration. */
.arrival-status {
  display: grid;
  gap: 0.2rem;
  min-width: 0;
  padding: 0.7rem 0.8rem;
  border-radius: 0.7rem;
  background: #edf4fb;
  overflow-wrap: anywhere;
}

.arrival-status strong,
.arrival-status span {
  display: block;
}

.arrival-status.is-live {
  background: #d9f4e8;
  color: #07583b;
}

.arrival-status.is-scheduled {
  background: #fff0c7;
  color: #6c4300;
}

.arrival-status.is-unavailable,
.arrival-status.is-offline {
  background: #f0f1f3;
  color: #3d4651;
}

.screen[data-state-base="ride"] .map-card {
  height: clamp(210px, 34vh, 300px);
  margin: 12px 0;
}

.screen[data-state-base="ride"] .ride-support,
.screen[data-state-base="ride"] .transit-journey-facts {
  margin-right: 0;
  margin-left: 0;
}

.stop-recognition__media figcaption {
  color: #334155;
  line-height: 1.45;
}

[data-map-heading]:focus-visible {
  outline: 3px solid #ffbd2e;
  outline-offset: 3px;
}

@media (max-width: 320px) {
  .screen[data-state-base="ride"] .map-card {
    height: 190px;
  }

  .arrival-status,
  .transit-journey-facts,
  .stop-recognition {
    padding: 0.7rem;
  }
}

@media (max-width: 200px) {
  .screen[data-state-base="ride"] .map-card {
    height: 150px;
  }

  .arrival-component__heading,
  .arrival-status {
    display: grid;
  }

  .screen {
    --space-screen-x: 7px;
    padding-top: max(8px, env(safe-area-inset-top));
  }

  .screen > h1,
  .screen[data-state-base="ride"] h1 {
    margin-right: 0;
    margin-left: 0;
    padding-right: 48px;
    font-size: 1.25rem;
    line-height: 1.2;
  }

  .ride-get-off-heading strong {
    font-size: 1.125rem;
    line-height: 1.25;
  }

  .transit-journey-facts,
  .arrival-component,
  .ride-support {
    gap: 6px;
    margin-top: 6px;
    margin-bottom: 6px;
    padding: 6px;
  }

  .phase-label,
  .transit-journey-facts dt,
  .arrival-component__heading h2 {
    font-size: 0.625rem;
    letter-spacing: 0.01em;
  }

  .transit-journey-facts dd,
  .arrival-status,
  .arrival-list,
  .arrival-secondary,
  .ride-support,
  .map-empty,
  .action-button {
    font-size: 0.75rem;
    line-height: 1.3;
  }

  .screen > h1,
  .ride-get-off-heading span,
  .ride-get-off-heading strong,
  .transit-journey-facts dt,
  .transit-journey-facts dd,
  .phase-label,
  .arrival-component,
  .arrival-component *,
  .ride-support,
  .ride-support *,
  .map-empty,
  .map-empty *,
  .action-button {
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
  }

  .screen[data-state-base="wait"] > .actions {
    right: 6px;
    left: 6px;
  }

  .screen[data-state-base="wait"] > .actions .action-button,
  .screen[data-state-base="ride"] > .actions .action-button {
    min-height: 48px;
    padding: 8px 6px;
  }
}

/* SGT-308 immutable local stop-variant successor. */
.sgt308-instruction{margin:0;color:#172554;font-weight:700;line-height:1.45}.sgt308-variant-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.sgt308-variant{margin:0;min-width:0;border:1px solid #cbd5e1;border-radius:12px;overflow:hidden;background:#fff}.sgt308-variant figcaption{padding:10px;font-weight:800;color:#172554}.sgt308-variant img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover}.sgt308-qualifier{margin:0;color:#334155;font-weight:700}@media (max-width:359px){.sgt308-variant-grid{grid-template-columns:minmax(0,1fr)}}@media (prefers-reduced-motion:reduce){.sgt308-variant *{transition:none!important;animation:none!important}}

/* SGT-311 injected Street View; no provider resource is encoded here. */
.sgt311-street-view{display:grid;gap:10px;margin-top:12px}.sgt311-action,.sgt311-back,.sgt311-close{min-height:44px}.sgt311-action,.sgt311-status,.sgt311-viewer{scroll-margin-block:16px 104px}.sgt311-action[hidden],.sgt311-back[hidden],.sgt311-close[hidden],.sgt311-viewer[hidden],.sgt311-street-view[hidden]{display:none!important}.sgt311-qualifier,.sgt311-status{margin:0;color:#334155;line-height:1.45}.sgt311-viewer{min-height:210px;border:1px solid #94a3b8;border-radius:12px;background:#e2e8f0}@media(max-width:359px){.sgt311-viewer{min-width:280px}}@media(max-width:279px){.sgt311-viewer{display:none}}@media(prefers-reduced-motion:reduce){.sgt311-street-view *{transition:none!important;animation:none!important}}

/* SGT-313 live Street View successor. */
.sgt313-viewer{position:relative;min-height:360px;overflow:hidden;border-radius:16px;background:#eef2f1}
.sgt313-viewer>div{min-height:360px}
.sgt313-disclaimer{margin:.5rem 0 1rem;color:#44524f;font-size:.875rem;line-height:1.45}
@media(max-width:360px){.sgt313-viewer,.sgt313-viewer>div{min-height:300px}}

/* SGT-316 v2: the fixed image decodes offscreen; customers see it only after a usable-image signal. */
.sgt316-fixed-guidance{width:100%;max-width:100%;min-width:0!important;margin:0;isolation:isolate;touch-action:pan-y;user-select:none}
.sgt316-fixed-guidance__surface{width:100%;max-width:100%;min-width:0;min-height:360px;touch-action:none;pointer-events:none}
.sgt316-fixed-guidance__image{display:block;width:100%;height:360px;max-width:100%;object-fit:cover;pointer-events:none;user-select:none}
.sgt316-fixed-guidance__shield{position:absolute;inset:0;z-index:50;touch-action:pan-y;pointer-events:auto;background:transparent}
.sgt316-fixed-guidance[data-paint-stage="true"]{position:fixed!important;inset:0 auto auto -10000px!important;width:min(390px,100vw)!important;height:360px!important;opacity:.01!important;overflow:hidden!important;pointer-events:none!important;contain:strict!important}
.sgt316-fixed-guidance[data-paint-stage="true"] .sgt316-fixed-guidance__shield{display:none}
.sgt316-fixed-guidance[data-paint-ready="true"]{position:relative;opacity:1;overflow:hidden;pointer-events:auto}
.sgt316-fixed-guidance[data-paint-ready="true"] .gm-style button,.sgt316-fixed-guidance[data-paint-ready="true"] .gm-style [role="button"]{display:none!important}
@media(max-width:360px){.sgt316-fixed-guidance__surface{min-height:300px}}
@media(max-width:360px){.sgt316-fixed-guidance__image{height:300px}}
@media(prefers-reduced-motion:reduce){.sgt316-fixed-guidance,.sgt316-fixed-guidance *{animation:none!important;transition:none!important}}

/* SGT-315 current-location walking route status; location data remains memory-only. */
.current-location-walk{display:grid;gap:.65rem;margin:.75rem 0;padding:.75rem;border:1px solid #b8c8c3;border-radius:12px;background:#f5faf8}
.current-location-walk__status,.current-location-walk__detail{margin:0;line-height:1.45;overflow-wrap:anywhere}
.current-location-walk__status{color:#173f35;font-weight:800}
.current-location-walk__detail{color:#44524f;font-size:.925rem}
.current-location-walk__update{width:100%;min-height:48px}
.current-location-walk__update[disabled]{cursor:wait;opacity:.72}
@media(max-width:240px){.current-location-walk{padding:.55rem}.current-location-walk__status,.current-location-walk__detail{word-break:normal;overflow-wrap:anywhere}}
@media(prefers-reduced-motion:reduce){.current-location-walk *{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* SGT-317 v10: stable ride viewport and one coherent Get off at hierarchy. */
.screen[data-state-base="ride"] {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  height: 100vh;
  min-height: 100vh;
  max-height: 100vh;
  padding: max(10px, env(safe-area-inset-top)) var(--space-screen-x) max(8px, var(--ride-safe-area-bottom, env(safe-area-inset-bottom)));
  overflow: hidden;
}

@supports (height: 100svh) {
  .screen[data-state-base="ride"] {
    height: 100svh;
    min-height: 100svh;
    max-height: 100svh;
  }
}

.screen[data-state-base="ride"] > .route-progress,
.screen[data-state-base="ride"] > .ride-on-board-context,
.screen[data-state-base="ride"] > h1,
.screen[data-state-base="ride"] > .actions {
  flex: 0 0 auto;
}

.screen[data-state-base="ride"] > h1 {
  margin: 0;
  padding-right: 58px;
  color: #07133d;
}

.screen[data-state-base="ride"] > h1:focus {
  outline: none;
}

.ride-on-board-context {
  display: flex;
  align-items: baseline;
  gap: 7px;
  min-width: 0;
  margin: 0;
  color: #43566f;
  font-size: .75rem;
  line-height: 1.25;
  text-transform: uppercase;
}

.ride-on-board-context span {
  color: #087443;
  font-weight: 900;
  letter-spacing: .04em;
}

.ride-on-board-context strong {
  min-width: 0;
  overflow-wrap: anywhere;
  font-weight: 800;
}

.ride-get-off-heading span {
  margin-bottom: 2px;
}

.ride-get-off-heading strong {
  font-size: clamp(1.5rem, 7vw, 1.875rem);
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.ride-guidance-scroll {
  display: block;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scroll-padding-block: 10px 18px;
  scrollbar-gutter: stable;
}

.screen[data-state-base="ride"] .ride-guidance-scroll > .map-card {
  width: 100%;
  height: clamp(190px, 26svh, 230px);
  min-height: 190px;
  margin: 0 0 10px;
  border-color: #b9d4ee;
  border-radius: 14px;
  contain: layout paint;
}

.screen[data-state-base="ride"] .ride-support {
  display: block;
  width: 100%;
  min-width: 0;
  margin: 0 0 8px;
  padding: 10px 12px;
  border: 1px solid #c7d8cc;
  border-radius: 12px;
  background: #f2faf6;
}

.screen[data-state-base="ride"] .ride-support > p {
  margin: 0;
  color: #173f35;
  font-size: .9375rem;
  font-weight: 760;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.screen[data-state-base="ride"] .transit-journey-facts {
  width: 100%;
  min-width: 0;
  margin: 0;
}

.screen[data-state-base="ride"] > .actions {
  position: relative;
  z-index: 8;
  bottom: auto;
  display: grid;
  gap: 8px;
  width: 100%;
  margin: 0;
  padding: 8px 0 0;
  background: var(--bg);
}

.screen[data-state-base="ride"] > .actions .action-button {
  width: 100%;
  min-width: 0;
  min-height: 48px;
  padding: 10px 12px;
  line-height: 1.25;
  white-space: normal;
}

.screen[data-state-base="ride"] > .actions .action-button.primary {
  order: 1;
  border-color: #8a3300;
  background: #bd4600;
}

.screen[data-state-base="ride"] > .actions .action-button.secondary {
  order: 0;
}

@media (max-width: 320px) {
  .screen[data-state-base="ride"] {
    gap: 6px;
  }

  .screen[data-state-base="ride"] .ride-guidance-scroll > .map-card {
    height: 180px;
    min-height: 180px;
  }

  .screen[data-state-base="ride"] > .actions {
    gap: 6px;
    padding-top: 6px;
  }
}

@media (max-width: 200px) {
  .screen[data-state-base="ride"] {
    --space-screen-x: 7px;
    padding-top: max(7px, env(safe-area-inset-top));
  }

  .screen[data-state-base="ride"] > h1 {
    padding-right: 44px;
  }

  .ride-on-board-context {
    display: block;
    padding-right: 48px;
  }

  .ride-on-board-context span,
  .ride-on-board-context strong {
    display: block;
  }

  .ride-get-off-heading strong {
    font-size: 1.0625rem;
  }

  .screen[data-state-base="ride"] .ride-guidance-scroll > .map-card {
    height: 150px;
    min-height: 150px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .screen[data-state-base="ride"],
  .screen[data-state-base="ride"] * {
    animation: none !important;
    scroll-behavior: auto !important;
    transition: none !important;
  }
}

/* SGT-318 v14: provider-free fail-closed and accessibility coherence over protected v13. */
.screen[data-minimal-transit-access="true"] {
  --space-screen-x: 16px;
}

.screen[data-minimal-transit-access="true"] > .locate-stop {
  gap: 8px;
  padding: 0 0 max(112px, env(safe-area-inset-bottom));
  border: 0;
  background: transparent;
  scrollbar-gutter: auto;
  scrollbar-width: none;
}

.screen[data-minimal-transit-access="true"] > .stop-recognition {
  grid-auto-rows: max-content;
  align-content: start;
}

.screen[data-minimal-transit-access="true"] > .locate-stop::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.screen[data-minimal-transit-access="true"] .locate-stop__identity {
  padding: 0;
}

.screen[data-minimal-transit-access="true"] .locate-stop__identity span {
  font-size: .75rem;
  letter-spacing: .04em;
}

.screen[data-minimal-transit-access="true"] .locate-stop__identity strong {
  color: #07133d;
  font-size: 1.0625rem;
  line-height: 1.35;
}

.screen[data-minimal-transit-access="true"] .locate-stop__panel {
  display: grid;
  gap: 8px;
}

.locate-stop__rider-cue {
  margin: 0;
  color: #173f35;
  font-weight: 750;
  line-height: 1.4;
}

.sgt318-media-surface {
  position: relative;
  display: block;
  width: 100%;
  min-width: 0;
  aspect-ratio: 4 / 3;
  min-height: 134px;
  max-height: 269px;
  border: 1px solid #9fb4cc;
  border-radius: 12px;
  background: #e7edf5;
  overflow: hidden;
  contain: layout paint;
}

.sgt318-media-surface .map-card {
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
}

.sgt318-media-surface .map-canvas,
.sgt318-media-surface .map-shell,
.sgt318-media-surface .map-empty {
  width: 100%;
  height: 100%;
  min-height: 100%;
}

.sgt318-media-surface.is-recognition {
  aspect-ratio: 4 / 3;
  min-height: 0;
  max-height: none;
  overflow: hidden;
  contain: layout paint;
}

.stop-recognition__media {
  position: absolute;
  inset: 0;
  display: block;
  margin: 0;
  background: #eef1f4;
}

.stop-recognition__media img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  object-position: 50% 50%;
  border-radius: 0;
}

.stop-recognition__image-unavailable {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  margin: 0;
  padding: 16px;
  background: #eef1f4;
  color: #173f35;
  font-weight: 800;
  text-align: center;
}

.stop-recognition__image-unavailable[hidden] {
  display: none !important;
}

.stop-recognition__caption,
.stop-recognition__instruction {
  margin: 0;
  color: #334155;
  font-size: var(--text-sm);
  line-height: 1.45;
}

.stop-recognition__caption {
  font-weight: 700;
}

.sgt318-narrow-message {
  margin: 0;
  padding: 8px 10px;
  border: 1px solid #9fb4cc;
  border-radius: 10px;
  background: #f3f7fb;
  color: #173f35;
  font-size: var(--text-sm);
  font-weight: 750;
  line-height: 1.4;
}

.sgt318-narrow-message[hidden],
.sgt318-street-view-action[hidden] {
  display: none !important;
}

.current-location-walk__update {
  scroll-margin-block: 16px 32px;
}

.sgt318-media-status {
  flex: 0 0 auto;
  margin: 8px 0 0;
  color: #334155;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.sgt318-media-status:empty {
  display: none;
}

.sgt318-street-view-panel {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  grid-template-rows: auto auto 1fr;
  min-width: 0;
  min-height: 0;
  padding: 10px;
  background: #e7edf5;
  overflow: hidden;
}

.sgt318-street-view-panel[hidden] {
  display: none !important;
}

.sgt318-street-view-panel h3,
.sgt318-street-view-panel p {
  position: relative;
  z-index: 3;
  margin: 0;
  padding: 4px 6px;
  border-radius: 6px;
  background: rgba(255, 255, 255, .92);
  color: #07133d;
  line-height: 1.3;
}

.sgt318-street-view-panel h3 {
  justify-self: start;
  font-size: 1rem;
}

.sgt318-street-view-panel p {
  margin-top: 4px;
  font-size: .75rem;
}

.sgt318-street-view-canvas {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: 0;
  background: #dfe7ef;
}

.sgt318-street-view-canvas img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sgt318-street-view-panel:not([data-paint-ready="true"]) .sgt318-street-view-canvas::after {
  content: "Loading nearby Street View…";
  padding: 10px;
  color: #334155;
  font-weight: 750;
  text-align: center;
}

.sgt318-street-view-action,
.locate-stop__recognition-trigger {
  width: 100%;
  min-height: 48px;
}

@media (max-width: 200px) {
  .screen[data-minimal-transit-access="true"] {
    --space-screen-x: 8px;
    padding-right: 8px;
    padding-left: 8px;
  }

  .screen[data-minimal-transit-access="true"] .locate-stop__identity strong {
    font-size: .875rem;
  }

  .sgt318-media-surface {
    min-height: 134px;
  }

  .sgt318-street-view-panel h3,
  .sgt318-street-view-panel p {
    font-size: .6875rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .screen[data-minimal-transit-access="true"],
  .screen[data-minimal-transit-access="true"] * {
    animation: none !important;
    scroll-behavior: auto !important;
    transition: none !important;
  }
}

/* SGT-323 14899: the recovery control and arrival CTA already own external
   flex rows. Reserving a second 148px inset on the recognition root collapsed
   the internal media viewport on native Chrome, leaving only a shallow strip
   of the otherwise-correct 4:3 image. Keep that legacy clearance for the map
   access panel only; the recognition scroller owns its complete content. */
.screen[data-minimal-transit-access="true"] > .locate-stop.stop-recognition {
  padding-bottom: 0;
  scroll-padding-block-end: max(16px, env(safe-area-inset-bottom));
}

.screen[data-minimal-transit-access="true"]
  > .locate-stop.stop-recognition
  > .stop-recognition__scroll {
  padding-bottom: max(16px, env(safe-area-inset-bottom));
  scroll-padding-block-end: max(16px, env(safe-area-inset-bottom));
}

.screen[data-minimal-transit-access="true"]
  .sgt318-media-surface.is-recognition {
  flex: 0 0 auto;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.screen[data-minimal-transit-access="true"]
  .sgt318-media-surface.is-recognition
  .stop-recognition__media,
.screen[data-minimal-transit-access="true"]
  .sgt318-media-surface.is-recognition
  [data-stop-recognition-image] {
  inset: 0;
  width: 100%;
  height: 100%;
  max-height: none;
  transform: none;
  object-fit: contain;
  object-position: 50% 50%;
}

.screen[data-minimal-transit-access="true"] .sgt318-street-view-action {
  position: relative;
  z-index: 2;
  scroll-margin-block: 16px max(112px, calc(84px + env(safe-area-inset-bottom)));
}

/* SGT-318 v17: keep safety-critical stop identity and disclosure return visible in live Street View. */
.sgt318-stop-return-bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(112px, auto);
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.sgt318-stop-return-bar .locate-stop__identity {
  padding-top: 0;
}

.sgt318-stop-return-bar .locate-stop__recognition-trigger {
  width: auto;
  min-width: 112px;
  min-height: 44px;
  padding: 8px 12px;
}

.stop-recognition[data-sgt318-media-mode="street-view"] .sgt318-stop-return-bar {
  position: sticky;
  z-index: 8;
  top: 0;
  margin: -2px -2px 0;
  padding: 8px;
  border: 1px solid #b9cade;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 4px 14px rgba(16, 36, 64, 0.12);
}

[data-sgt318-static-provenance][hidden],
[data-sgt318-street-view-provenance][hidden] {
  display: none !important;
}

@media (max-width: 320px) {
  .sgt318-stop-return-bar {
    grid-template-columns: minmax(0, 1fr);
  }

  .sgt318-stop-return-bar .locate-stop__recognition-trigger {
    width: 100%;
  }
}

/* SGT-321 14731 terminal override: visual viewport and pointer containment win cascade. */
.app-shell {
  width: min(100vw, var(--sgt-visual-viewport-width, 100vw), 430px);
  max-width: 100%;
}

.screen[data-minimal-transit-access="true"] {
  width: 100%;
  height: var(--sgt-visual-viewport-height, 100dvh);
  min-height: var(--sgt-visual-viewport-height, 100dvh);
  max-height: var(--sgt-visual-viewport-height, 100dvh);
  overflow: hidden;
}

.screen[data-minimal-transit-access="true"] > *,
.screen[data-minimal-transit-access="true"] .locate-stop > *,
.screen[data-state-base="ride"] > * {
  min-width: 0;
  max-width: 100%;
}

.sgt318-media-surface,
.sgt318-media-surface.is-map,
.map-card {
  position: relative;
  isolation: isolate;
  max-width: 100%;
  overflow: hidden;
}

.sgt318-media-surface.is-map,
.map-card,
.map-canvas {
  z-index: 1;
}

.map-canvas {
  position: relative;
  contain: layout paint;
  overflow: hidden;
}

.screen[data-minimal-transit-access="true"] .locate-stop__primary-action {
  position: relative;
  z-index: 100;
  isolation: isolate;
  pointer-events: auto;
}

.screen[data-minimal-transit-access="true"] .locate-stop__primary-action,
.screen[data-minimal-transit-access="true"] .locate-stop__primary-action * {
  pointer-events: auto;
}

.audio-language { max-width:480px; min-height:100dvh; display:flex; flex-direction:column; padding:20px; margin:auto; background:white; color:#102644; }
.audio-language header { padding-bottom:28px; }
.audio-language button { min-height:48px; cursor:pointer; }
.audio-language header button { background:none; border:0; color:inherit; font:inherit; }
.audio-language h1 { font-size:1.85rem; margin:0 0 10px; }
.audio-language fieldset { border:0; padding:0; margin:24px 0; }
.audio-language-choice { display:flex; align-items:center; gap:12px; border:1px solid #d6dfdc; border-radius:12px; padding:16px; margin:12px 0; min-height:76px; cursor:pointer; }
.audio-language-choice:has(input:checked) { border:2px solid #086c5d; padding:15px; background:#f0f7f4; }
.audio-language-choice input { width:22px; height:22px; flex-shrink:0; accent-color:#086c5d; }
.audio-language-choice span { flex:1; min-width:0; }
.audio-language-choice strong,.audio-language-choice small { display:block; }
.audio-language-choice small { color:#526172; font-size:.85em; }
.language-selected { font-size:.8em; color:#086c5d; }
.audio-language-choice:not(:has(input:checked)) .language-selected { display:none; }
.audio-language footer { margin-top:auto; padding:16px 0; }
.audio-language footer button { width:100%; }
.audio-language button:focus-visible,.audio-language input:focus-visible { outline:3px solid #b34717; outline-offset:4px; }
.audio-language-entry { display:block; min-height:48px; margin:12px auto; padding:8px 12px; border:1px solid #d6dfdc; border-radius:8px; background:white; color:#102644; font:inherit; }
.screen:has(.direct-options) .text-scale-tools:has(.audio-language-entry) { position:static; flex-wrap:wrap; }

/* ENTRY_FACTS_V11_START — scoped to tour entry, never map/story controls. */
body:has(.screen[data-state-id="routeOverview"]) { background: #fff; }
.screen[data-state-id="routeOverview"] { background:#fff; color:#132842; max-width:460px; margin:auto; padding:22px 28px 24px; font-family:Arial,Helvetica,sans-serif; }
.screen[data-state-id="routeOverview"] .entry-brand-row { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:34px; }
.entry-brand { display:flex; align-items:center; gap:9px; font-size:.875rem; font-weight:700; min-height:44px; }
.entry-brand img { object-fit:contain; }
.screen[data-state-id="routeOverview"] .text-scale-tools { position:static; display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px; }
.screen[data-state-id="routeOverview"] .text-scale-trigger { position:static; min-width:44px; min-height:44px; width:44px; height:44px; box-shadow:none; background:#fff; border-color:#dce2e5; }
.screen[data-state-id="routeOverview"] h1 { font-size:clamp(1.5rem,12.3vw,3rem); line-height:1.04; letter-spacing:-.045em; font-weight:750; margin:0; overflow-wrap:break-word; }
.entry-accent { color:#b94600; }
.entry-eyebrow { font-size:.6875rem; letter-spacing:.12em; color:#537166; font-weight:700; text-transform:uppercase; margin:0 0 12px; }
.entry-intro { font-size:1rem; line-height:1.6; color:#536272; margin:18px 0 24px; font-weight:400; }
.entry-endpoints { margin:0 0 26px; padding-left:47px; position:relative; }
.entry-endpoints::before { content:'◎'; position:absolute; left:0; top:3px; color:#0a6d60; font-size:1.8rem; }
.entry-endpoints dt { font-size:.625rem; letter-spacing:.11em; text-transform:uppercase; color:#63716d; }
.entry-endpoints dd { margin:0; font-size:1.125rem; font-weight:700; }
.entry-timing { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,8rem),1fr)); gap:24px; margin:0; padding:20px 0; border-block:1px solid #e4e9e7; cursor:default; }
.entry-timing dt { font-size:.8125rem; color:#596775; margin-bottom:5px; }
.entry-timing dd { font-size:1.6rem; font-weight:700; line-height:1.3; margin:0; letter-spacing:-.03em; }
.entry-timing small { display:block; font-size:.6875rem; letter-spacing:0; font-weight:400; color:#64717e; margin-top:5px; line-height:1.5; }
.entry-timing [data-route-preview-row], .entry-endpoints [data-route-preview-row] { background:none; border:0; border-radius:0; box-shadow:none; cursor:default; min-width:0; }
.entry-places,.entry-requirement { font-size:.8125rem; color:#596775; line-height:1.65; font-weight:400; margin:18px 0 24px; }
.screen[data-state-id="routeOverview"] .actions.is-overview { display:flex; flex-direction:column; gap:7px; margin:0; }
.screen[data-state-id="routeOverview"] [data-route-overview-primary] { display:block; width:100%; }
.screen[data-state-id="routeOverview"] [data-route-overview-primary] button { display:flex; justify-content:space-between; width:100%; min-height:54px; padding:14px 18px; background:#b94600; color:#fff; border:0; border-radius:10px; font-size:1rem; font-weight:700; text-align:left; }
.screen[data-state-id="routeOverview"] [data-route-overview-primary] button::after { content:'→'; float:right; }
.screen[data-state-id="routeOverview"] .entry-disclosure { min-height:46px; margin:auto; padding:10px 8px; background:none; border:0; box-shadow:none; color:#215a72; font-size:.875rem; text-decoration:underline; text-underline-offset:4px; }
.screen[data-state-id="routeOverview"] .tour-privacy-notice { text-align:center; margin:10px 0 0; }
.screen[data-state-id="routeOverview"] .tour-privacy-notice a { display:inline-block; min-height:44px; padding:8px; color:#63717b; font-size:.75rem; text-decoration:underline; }
.screen[data-state-id="routeOverview"] .entry-language { display:block; margin:8px auto; min-height:44px; font-size:.8125rem; background:none; border:0; color:#215a72; text-decoration:underline; }
.screen[data-state-id="routeOverview"] [hidden] { display:none!important; }
@media(max-width:350px) { .screen[data-state-id="routeOverview"] { padding:18px 22px; } .entry-timing { gap:16px; } }
@media(max-width:260px) { .entry-timing { grid-template-columns:1fr; } }
html[data-text-scale="large"] .entry-timing, html[data-text-scale="extra-large"] .entry-timing { grid-template-columns:1fr; }
html[data-text-scale="extra-large"] .screen[data-state-id="routeOverview"] h1 { font-size:2rem; }
/* ENTRY_FACTS_V11_END */
.simple-transit{background:white;color:#132842;padding:22px 28px max(24px,env(safe-area-inset-bottom));overflow-wrap:anywhere;min-height:100svh}
.image-information-link{text-align:center;background:white;padding:12px}.image-information-link button,.image-information button{min-height:44px;font:inherit;color:#215a72;background:white;border:0;text-decoration:underline;cursor:pointer}.image-information{box-sizing:border-box;width:min(92vw,560px);max-height:90svh;overflow:auto;border:1px solid #bccbc8;border-radius:12px;padding:20px;color:#132842;background:white;overflow-wrap:anywhere}.image-information pre{white-space:pre-wrap;font-size:.75rem;overflow-wrap:anywhere}.image-information::backdrop{background:#13284299}.image-information h1{font-size:1.6rem}.image-information h2{font-size:1.15rem}.image-information summary{min-height:44px;cursor:pointer}
.simple-transit p.handoff-instruction{color:#132842;font-weight:600;font-size:1.0625rem;line-height:1.5;margin:22px 0 18px}
.handoff-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(max-width:320px){.place-stories .place-story-player{flex-direction:column;align-items:stretch}.place-stories .place-story-player>div{width:100%;overflow-wrap:normal;word-break:normal}.place-stories .place-story-player .audio-button{width:100%;overflow-wrap:normal;word-break:normal}.place-stories .place-story-pager{display:flex;flex-direction:column;align-items:stretch}.place-stories .place-story-pager button{width:100%;flex:auto;overflow-wrap:normal;word-break:normal}.place-stories .place-story-pager span{flex-basis:auto;text-align:center}.place-stories .place-story-player em{float:none;display:block}}
.place-story-pager{margin-bottom:12px;gap:10px}.place-story-pager button{min-height:48px;white-space:normal;overflow-wrap:anywhere}.place-story-pager button[data-story-move="1"]{border:1.5px solid #132842;background:#f4f7fa;color:#132842;font-weight:700}.place-story-pager button[data-story-move="-1"]{color:#536272}.place-story-pager button:disabled{opacity:.45}.place-story-player .audio-button{background:#146c70;color:white;min-height:48px;white-space:normal}.story-replay{min-height:44px;background:transparent;border:0;color:#215a72;text-decoration:underline;font:inherit;cursor:pointer}.place-story-player [data-audio-state]{display:block}
.image-information-link{width:100%;box-sizing:border-box;clear:both}.image-information[open]{display:flex;flex-direction:column;padding:0;overflow:hidden}.image-information>header{flex:none;padding:8px 16px;border-bottom:1px solid #bccbc8}.image-information-content{overflow:auto;min-height:0;padding:16px 20px max(20px,env(safe-area-inset-bottom))}
.simple-transit header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:32px;flex-wrap:wrap}.simple-transit header label{font-size:.75rem}.simple-transit select{min-height:44px;max-width:100%;background:white;color:#132842;border:1px solid #bccbc8;border-radius:8px}
.simple-transit h1{font-size:2.5rem;line-height:1.12;letter-spacing:-.035em;margin:0 0 20px}.simple-transit p{color:#536272}.simple-transit .eyebrow{font-size:.7rem;color:#537166;letter-spacing:.12em}.simple-transit figure{margin:0 0 20px}.simple-transit figure img{width:100%;aspect-ratio:4/3;object-fit:cover;object-position:50% 60%;border-radius:12px}.simple-transit figcaption{font-size:.7rem;color:#63717b}
.simple-transit button{font:inherit;cursor:pointer;overflow-wrap:anywhere}.simple-transit .primary,.simple-transit .secondary{display:block;min-height:54px;width:100%;padding:14px 16px;border-radius:10px;font-weight:700;line-height:1.35}.simple-transit .primary{background:#b94600;color:white;border:1px solid #b94600}.simple-transit .secondary{background:white;color:#132842;border:1px solid #bccbc8;margin-top:12px}.simple-transit .quiet{min-height:44px;width:100%;padding:10px;background:none;border:0;color:#215a72;text-decoration:underline;font-size:.85rem}.simple-transit button:disabled{cursor:default;color:#68737e;text-decoration:none}.simple-transit .note,.simple-transit .external-note{font-size:.8rem}.simple-transit .external-note{text-align:center}.simple-transit summary{min-height:44px;padding:10px 0;color:#215a72;cursor:pointer}.simple-transit details{font-size:.85rem}.simple-transit .simple-actions{margin-top:20px}.simple-transit button:focus-visible,.simple-transit select:focus-visible,.simple-transit summary:focus-visible{outline:3px solid #1969a5;outline-offset:3px}.simple-transit [data-simple-status]:empty{display:none}
@media(max-width:350px){.simple-transit{padding:18px 22px 24px}.simple-transit h1{font-size:2.15rem}}@media(max-width:230px){.simple-transit{padding:14px}.simple-transit h1{font-size:1.65rem}}