html { height: 100%; }
body[data-app] { margin: 0; padding: 0; height: 100dvh; overflow: hidden; background: #f6f6f2; }
body[data-app] [hidden] { display: none !important; }
.app-root { width: 100%; height: 100%; }
.app-root > .option { height: 100%; }
.app-root .option-title, .app-root .option-caption { display: none; }
.app-root .screen { width: 100%; height: 100%; border-radius: 0; }
body[data-app] .screen-content { padding-top: max(12px, env(safe-area-inset-top)); }
body[data-app] .header-tools { gap: 4px; }
body[data-app] .icon-button { width: 44px; height: 44px; flex: none; }
body[data-app] .preview-toggle { width: 52px; font-size: 12px; color: var(--ink-2); }
body[data-app] .bottom-nav { padding-bottom: max(4px, env(safe-area-inset-bottom)); }
body[data-app] .bottom-nav a { min-width: 80px; }
body[data-app] .campus-map { position: relative; }
body[data-app] dialog { width: min(440px, calc(100vw - 32px)); }
.preview-banner { border-top: 1px solid currentColor; margin: 12px 0; padding: 12px 0 0; font-size: 12px; display: flex; align-items: center; gap: 12px; justify-content: space-between; }
.preview-banner span { display: flex; flex-direction: column; gap: 4px; }
.preview-banner output { font-size: 18px; font-weight: 650; }
.preview-banner button { min-height: 44px; padding: 8px; border: 1px solid currentColor; border-radius: 6px; background: transparent; color: inherit; }
.live-clock { display: flex; justify-content: space-between; gap: 12px; }
#preview-form { display: flex; flex-direction: column; gap: 8px; margin: 16px 0; }
#preview-form label { font-size: 14px; }
#preview-form input { color: inherit; background: transparent; min-height: 44px; font-size: 20px; border: 1px solid currentColor; border-radius: 6px; padding: 8px; }
#preview-form button { min-height: 44px; background: #226192; color: #fff; border: none; border-radius: 6px; font-size: 16px; }
.loading { padding: 24px; font-size: 16px; }
.app-root .screen[data-empty-boarding="true"] .arrival-label { font-size: 20px; font-weight: 650; }
body[data-app] .eta-seconds { font-size: 22px; font-weight: 600; color: var(--ink-2); font-variant-numeric: tabular-nums; }
body[data-app] .eta-units { display: contents; }
body[data-app] .next-stop-ring { display: none; fill: none; stroke: var(--route-ink); stroke-width: 2; pointer-events: none; transform-box: fill-box; transform-origin: center; }
body[data-app] .next-stop .next-stop-ring { display: block; animation: next-stop-throb 1.8s ease-in-out infinite; }
@keyframes next-stop-throb { 0%,100% { transform: scale(1); opacity: .8; } 50% { transform: scale(1.25); opacity: .3; } }
body[data-app].reduce-motion .next-stop .next-stop-ring { animation: none; opacity: .8; }
@media (prefers-reduced-motion: reduce) { body[data-app] .next-stop .next-stop-ring { animation: none; opacity: .8; } }
body[data-app] .departure-strip { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; margin: 0 0 8px; color: var(--ink); }
body[data-app] .departure-time { font-size: 18px; }
body[data-app] .departure-left { font-size: 14px; font-weight: 650; font-variant-numeric: tabular-nums; }
body[data-app][data-departure-style="line"] .departure-time { font-size: 22px; }
body[data-app][data-departure-style="line"] .departure-strip { padding: 4px 0 8px; border-bottom: 1px solid var(--rule); }
body[data-app][data-departure-style="band"] .departure-strip { padding: 10px 12px; background: var(--route-tint); border-left: 3px solid var(--route-ink); border-radius: 0 8px 8px 0; }
body[data-app][data-departure-style="band"] .departure-left { font-size: 18px; color: var(--route-ink); }
body[data-app] .countdown-seconds { font-size: .9em; font-weight: 600; font-variant-numeric: tabular-nums; }
body[data-app] .bus-detail { flex-wrap: wrap; }
body[data-app][data-boarding-layout] .stop-choice > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
body[data-app][data-boarding-layout] .stop-choice label { font-size: 22px; font-weight: 650; color: var(--ink); white-space: nowrap; }
body[data-app][data-boarding-layout] .picker-field { width: 180px; max-width: 60%; border: 1px solid var(--rule); border-radius: 8px; }
body[data-app][data-boarding-layout] .picker-face { padding: 0 12px; justify-content: flex-end; }
body[data-app][data-boarding-layout] .picker-face > svg { margin-left: 8px; flex: none; }
body[data-app][data-boarding-layout] .picker-face .place-name { font-size: 22px; }
body[data-app][data-boarding-layout] .picker-face .stop-badge { width: 26px; height: 26px; font-size: 14px; }
body[data-app][data-boarding-layout] .screen-content > .arrival-group { margin-top: 8px; }
body[data-app][data-timer-layout] .stop-choice > div { justify-content: flex-end; gap: 10px; }
body[data-app][data-timer-layout] .stop-choice label { font-size: 20px; }
body[data-app][data-timer-layout] .picker-field { width: 156px; }
body[data-app][data-timer-layout] .screen-content > .arrival-group { margin-top: 2px; }
body[data-app][data-timer-layout] .arrival-display { align-items: center; gap: 10px; }
body[data-app][data-timer-layout] .eta-units { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; min-height: 52px; min-width: 66px; }
body[data-app][data-timer-layout] .eta-unit { font-size: 28px; font-weight: 650; line-height: 1; color: var(--ink); }
body[data-app][data-timer-layout] .eta-seconds { font-size: 17px; font-weight: 550; line-height: 1.2; }
body[data-app][data-timer-layout="rail"] .eta-units { border-left: 2px solid var(--route-ink); padding-left: 10px; }
body[data-app][data-timer-layout="rail"] .eta-unit { color: var(--route-ink); font-weight: 550; }
@media (max-width: 899px) {
  body[data-app][data-timer-layout][data-service-day="today"] .screen:not([data-empty-boarding="true"]) .screen-content > .arrival-group { position: relative; }
  body[data-app][data-timer-layout][data-service-day="today"] .screen:not([data-empty-boarding="true"]) .screen-content > .arrival-group .arrival-label { position: absolute; left: 0; top: -30px; max-width: calc(100% - 224px); }
  /* Route feedback occupies the row used by the lifted label. Keep the label
     in its own arrival row while feedback is visible, including wrapped text. */
  body[data-app][data-timer-layout][data-service-day="today"] .screen:not([data-empty-boarding="true"]) .screen-content:has(> .selection-note:not([hidden])) > .arrival-group .arrival-label { position: static; max-width: none; }
  body[data-app][data-boarding-layout="compact"][data-view="map"] .screen-content > .app-header { order: 0; }
  body[data-app][data-boarding-layout="compact"][data-view="map"] .screen-content > .route-toggle { order: 1; }
  body[data-app][data-boarding-layout="compact"][data-view="map"] .screen-content > .arrival-group { order: 2; margin-top: 2px; }
  body[data-app][data-boarding-layout="compact"][data-view="map"] .screen-content > .stop-choice { order: 3; margin-bottom: 8px; }
  body[data-app][data-boarding-layout="compact"][data-view="map"] .screen-content > .stop-prompt,
  body[data-app][data-boarding-layout="compact"][data-view="map"] .screen-content > .selection-note { order: 4; }
  body[data-app][data-boarding-layout="compact"][data-view="map"] .screen-content > .bus-status-panel { order: 5; }
  body[data-app][data-boarding-layout="compact"][data-view="map"] .screen-content > .departure-strip { order: 5; }
  body[data-app][data-boarding-layout="compact"][data-view="map"] .screen-content > .campus-map { order: 6; }
}
@media (min-width: 900px) {
  body[data-app] .screen-content { display: grid; padding: 16px 24px 0; gap: 12px 24px; }
  body[data-app] .route-toggle, body[data-app] .arrival-group, body[data-app] .bus-status-panel { margin: 0; }
  body[data-app] .app-header { grid-area: header; }
  body[data-app] .route-toggle { grid-area: route; }
  body[data-app] .stop-choice { grid-area: board; }
  body[data-app] .arrival-group { grid-area: hero; align-self: center; }
  body[data-app] .bus-status-panel { grid-area: status; align-self: center; }
  body[data-app] .screen-content > .departure-strip { grid-area: status; align-self: center; }
  body[data-app] .campus-map, body[data-app] .timetable-view { grid-area: map; margin: 0; width: 100%; height: 100%; min-height: 0; }
  body[data-app] .stop-inspector { grid-area: inspect; margin: 0; }
  body[data-app] .selection-note:not([hidden]) { position: absolute; top: 18px; left: 220px; }
  body[data-app] .bottom-nav { justify-content: center; gap: 56px; }
  body[data-app][data-desktop-layout="canvas"] .screen-content { grid-template-columns: 1fr 1fr; grid-template-rows: 44px 58px 104px minmax(0, 1fr); grid-template-areas: 'header header' 'route board' 'hero status' 'map map'; }
  body[data-app][data-desktop-layout="canvas"] .screen-content > .route-toggle,
  body[data-app][data-desktop-layout="canvas"] .screen-content > .arrival-group,
  body[data-app][data-desktop-layout="canvas"] .screen-content > .stop-choice { width: 100%; max-width: 420px; }
  body[data-app][data-desktop-layout="canvas"][data-view="map"] .screen[data-empty-boarding="true"] .screen-content { grid-template-rows: 44px 58px 40px minmax(0, 1fr); }
  body[data-app][data-desktop-layout="canvas"][data-stops-review] .screen-content { grid-template-rows: 44px 58px minmax(0, 1fr) 112px; grid-template-areas: 'header header' 'route board' 'map map' 'inspect inspect'; }
  body[data-app][data-desktop-layout="canvas"] .stop-inspector { display: grid; grid-template-columns: 1fr 1fr 180px; grid-template-areas: 'place hero here' 'status departure here'; gap: 0 24px; padding: 8px 0; }
  body[data-app][data-desktop-layout="canvas"] .inspect-picker { grid-area: place; }
  body[data-app][data-desktop-layout="canvas"] .stop-inspector .arrival-group { grid-area: hero; }
  body[data-app][data-desktop-layout="canvas"] .stop-inspector .boarding-departure { grid-area: departure; }
  body[data-app][data-desktop-layout="canvas"] .stop-inspector .bus-status-panel { grid-area: status; }
  body[data-app][data-desktop-layout="canvas"] .stop-inspector .departure-strip { grid-area: status; }
  body[data-app][data-desktop-layout="canvas"] .board-here { grid-area: here; align-self: center; }
  body[data-app][data-desktop-layout="canvas"][data-timetable-review] .screen-content { grid-template-rows: 44px 58px minmax(0, 1fr); grid-template-areas: 'header header' 'route board' 'map map'; }
  body[data-app][data-desktop-layout="canvas"] .timetable-view { max-width: 720px; justify-self: center; }
  body[data-app][data-desktop-layout="panel"] .screen-content { grid-template-columns: 320px minmax(0, 1fr); grid-template-rows: 44px 54px 58px 112px 54px minmax(0, 1fr); grid-template-areas: 'header header' 'route map' 'board map' 'hero map' 'status map' '. map'; }
  body[data-app][data-desktop-layout="panel"][data-stops-review] .screen-content { grid-template-rows: 44px 54px 44px auto minmax(0, 1fr); grid-template-areas: 'header header' 'route map' 'board map' 'inspect map' '. map'; }
  body[data-app][data-desktop-layout="panel"][data-timetable-review] .screen-content { grid-template-rows: 44px 54px 58px minmax(0, 1fr); grid-template-areas: 'header header' 'route map' 'board map' '. map'; }
  body[data-app][data-desktop-layout="panel"] .stop-inspector { padding: 8px 0; }
}
@media (max-width: 360px) { body[data-app] .brand { font-size: 12px; } body[data-app] .header-tools { gap: 0; } }