:root {
  --font-family: "Dana", sans-serif;
  --bg: #fffaf2;
  --bg-soft: #fff2dc;
  --bg-elevated: #fffdf9;
  --surface: rgba(255, 253, 249, 0.94);
  --surface-strong: #fffdf9;
  --surface-soft: #fff7ea;
  --text: #2d2013;
  --muted: #80654a;
  --line: rgba(128, 93, 53, 0.14);
  --line-strong: rgba(128, 93, 53, 0.26);
  --accent: #f8b133;
  --accent-strong: #f08a24;
  --accent-soft: rgba(246, 166, 28, 0.18);
  --accent-glow: rgba(249, 115, 22, 0.18);
  --success: #16a34a;
  --shadow: 0 10px 28px rgba(99, 66, 30, 0.08);
  --shadow-soft: 0 5px 16px rgba(99, 66, 30, 0.055);
  --radius-xl: 24px;
  --radius-lg: 18px;
  --radius-md: 14px;
  --radius-sm: 10px;
}

[data-theme="dark"] {
  --bg: #17120d;
  --bg-soft: #211912;
  --bg-elevated: #201913;
  --surface: rgba(31, 25, 19, 0.98);
  --surface-strong: #251d16;
  --surface-soft: #30251b;
  --text: #fff6e9;
  --muted: #d9c2a5;
  --line: rgba(255, 231, 198, 0.16);
  --line-strong: rgba(255, 231, 198, 0.28);
  --accent: #ffca48;
  --accent-strong: #ff9a31;
  --accent-soft: rgba(255, 202, 72, 0.18);
  --accent-glow: rgba(255, 154, 49, 0.26);
  --shadow: 0 10px 28px rgba(0, 0, 0, 0.3);
  --shadow-soft: 0 5px 16px rgba(0, 0, 0, 0.2);
}

@font-face {
  font-family: "Dana";
  src: url("./assets/fonts/dana/dana-fanum-regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Dana";
  src: url("./assets/fonts/dana/dana-fanum-medium.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: "Dana";
  src: url("./assets/fonts/dana/dana-fanum-bold.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

* {
  box-sizing: border-box;
}

html {
  font-size: 17.25px;
}

html,
body {
  margin: 0;
  min-height: 100%;
  color: var(--text);
  font-family: var(--font-family);
  background:
    radial-gradient(circle at 100% 0, rgba(246, 166, 28, 0.13), transparent 31%),
    linear-gradient(180deg, var(--bg) 0%, color-mix(in srgb, var(--bg) 94%, #000 6%) 100%);
  -webkit-tap-highlight-color: transparent;
  touch-action: pan-x pan-y;
}

body {
  overscroll-behavior-y: none;
}

button,
input {
  font: inherit;
}

button {
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
}

input {
  color: inherit;
}

.is-hidden {
  display: none !important;
}

.app-shell {
  position: relative;
  max-width: 560px;
  min-height: 100vh;
  margin: 0 auto;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), transparent 15%), var(--bg);
  padding-bottom: calc(94px + env(safe-area-inset-bottom));
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  direction: rtl;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: calc(14px + env(safe-area-inset-top)) 18px 12px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--bg) 90%, transparent) 0%, color-mix(in srgb, var(--bg) 78%, transparent) 100%);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid color-mix(in srgb, var(--line) 72%, transparent);
}

.topbar-left,
.topbar-right {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 42px;
}

.topbar-left {
  justify-self: start;
}

.topbar-main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  direction: rtl;
  padding: 0;
}

.brand-block {
  display: flex;
  align-items: center;
  gap: 10px;
  direction: rtl;
  min-width: 0;
}

.brand-mark {
  position: relative;
  width: 42px;
  height: 42px;
  border-radius: 13px;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.34), transparent 30%),
    linear-gradient(135deg, var(--accent) 0%, var(--accent-strong) 100%);
  color: #fff;
  font-weight: 700;
  font-size: 0.9rem;
  box-shadow: none;
  overflow: hidden;
}

.brand-mark::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.22), transparent 55%);
}

.brand-title {
  font-size: 0.94rem;
  font-weight: 700;
}

.brand-copy {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.brand-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.brand-domain {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding: 0 7px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-strong);
  font-size: 0.62rem;
  font-weight: 700;
  direction: ltr;
}

.brand-subtitle {
  color: var(--muted);
  font-size: 0.72rem;
}

.topbar-right,
.station-card-actions,
.line-card-actions,
.map-tools,
.badge-row {
  display: flex;
  gap: 10px;
  align-items: center;
}

.badge-row {
  flex-wrap: wrap;
}

.icon-button {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  border: 1px solid var(--line);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface-strong) 78%, var(--surface-soft) 22%) 0%, var(--surface) 100%);
  box-shadow: none;
}

.icon-button,
.primary-button,
.secondary-button,
.small-button,
.toggle-button,
.route-swap-button,
.route-geo-button,
.line-option,
.line-chip,
.quick-card,
.route-picker,
.nav-item,
.route-history-item,
.journey-station-content,
.sheet-item,
.station-card,
.line-station-item {
  transition:
    transform 180ms ease,
    background-color 180ms ease,
    border-color 180ms ease,
    color 180ms ease,
    box-shadow 220ms ease,
    opacity 180ms ease;
}

.map-link {
  transition: color 180ms ease, opacity 180ms ease;
}

/* A flatter transit shell keeps the route itself, not the chrome, in focus. */
.section-title {
  font-size: 1rem;
  letter-spacing: -0.015em;
}

.hero-title,
.detail-title {
  font-size: 1.38rem;
  letter-spacing: -0.025em;
}

.section-caption,
.hero-text {
  font-size: 0.84rem;
  line-height: 1.9;
}

.card,
.hero-card,
.route-card,
.journey-card,
.settings-card,
.station-card,
.line-route-card,
.line-showcase,
.detail-hero {
  box-shadow: none;
}

.route-planner-card {
  padding: 15px;
  border-color: color-mix(in srgb, var(--accent-strong) 18%, var(--line));
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--accent-soft) 58%, transparent) 0%, transparent 57%),
    var(--surface);
}

.route-planner-top {
  margin-bottom: 10px;
}

.route-swap-button {
  min-height: 42px;
  padding-inline: 11px;
  border-radius: 13px;
  box-shadow: none;
}

.route-picker-row,
.route-pickers {
  gap: 8px;
}

.route-picker,
.route-geo-button {
  min-height: 60px;
  border-radius: 13px;
  box-shadow: none;
}

.route-picker {
  padding: 11px;
  grid-template-columns: 34px 1fr;
}

.route-picker-icon {
  width: 34px;
  height: 34px;
  border-radius: 10px;
}

.route-geo-button {
  width: 48px;
  min-width: 48px;
}

.route-submit {
  min-height: 46px;
  border-radius: 13px;
}

.route-history-card,
.route-overview,
.journey-card,
.route-share-card {
  padding: 15px;
}

.route-history-item {
  padding: 11px 12px;
  border-radius: 13px;
  box-shadow: none;
}

.route-brief {
  min-height: 36px;
  padding-inline: 11px;
  font-size: 0.74rem;
}

.route-endpoint {
  padding: 10px 11px;
  border-radius: 12px;
}

.journey-card {
  gap: 12px;
  border-right: 3px solid var(--accent);
}

.journey-station-rail {
  min-height: 60px;
}

.station-list {
  gap: 14px;
}

.station-card {
  gap: 10px;
  margin: 0;
  padding: 14px;
  border-radius: var(--radius-md);
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--station-line-color, var(--accent)) 8%, transparent) 0%, transparent 40%),
    var(--surface);
}

.station-card::before {
  inset: 14px 0 14px auto;
  width: 3px;
  box-shadow: none;
}

.station-card-main {
  gap: 6px;
}

.station-card-title {
  margin-top: 5px;
  font-size: 0.95rem;
}

.station-card-address {
  line-height: 1.7;
  font-size: 0.8rem;
}

.station-card-meta {
  min-height: 29px;
  padding-inline: 9px;
  font-size: 0.71rem;
}

.station-card-actions {
  gap: 7px;
}

.station-action-primary,
.station-action-soft {
  min-height: 38px;
  font-size: 0.74rem;
}

.lines-overview-card {
  padding: 16px;
}

.line-selector-grid {
  gap: 9px;
}

.line-option {
  min-height: 94px;
  padding: 11px;
  gap: 6px;
  border-radius: var(--radius-md);
  box-shadow: none;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--line-color, var(--accent)) 18%, transparent) 0%, transparent 58%),
    linear-gradient(90deg, var(--line-color, var(--accent)) 0 3px, transparent 3px),
    var(--surface-strong);
}

.line-option.is-active {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--line-color, var(--accent)) 25%, transparent) 0%, transparent 62%),
    linear-gradient(90deg, var(--line-color, var(--accent)) 0 4px, transparent 4px),
    var(--surface-strong);
  box-shadow: none;
}

.line-option-badge {
  min-height: 24px;
  padding-inline: 8px;
  font-size: 0.7rem;
}

.line-option strong {
  font-size: 0.84rem;
}

.line-option small {
  font-size: 0.7rem;
  line-height: 1.6;
}

.line-showcase,
.line-route-card {
  border-radius: var(--radius-lg);
}

.line-showcase {
  padding: 16px;
}

.line-showcase-orb {
  width: 50px;
  height: 50px;
  flex-basis: 50px;
  border-radius: 15px;
  box-shadow: none;
}

.line-route-card {
  padding: 14px;
}

.line-track {
  padding: 8px 0 4px 12px;
}

.line-track::before {
  right: 12px;
  top: 8px;
  bottom: 8px;
  width: 2px;
}

.line-station-item {
  margin-bottom: 8px;
  padding: 10px 10px 10px 8px;
  gap: 9px;
  box-shadow: none;
}

.line-station-item::before {
  right: -12px;
  top: 18px;
  width: 10px;
  height: 10px;
}

.line-station-index {
  width: 30px;
  height: 30px;
  flex-basis: 30px;
  border-radius: 9px;
  font-size: 0.75rem;
}

.bottom-nav {
  inset: auto 14px 10px;
  max-width: 532px;
  padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
  gap: 5px;
  border-radius: 18px;
  box-shadow: var(--shadow-soft);
}

.nav-item {
  min-height: 56px;
  gap: 4px;
  border-radius: 13px;
}

.nav-icon {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  font-size: 0.92rem;
}

.nav-item span {
  font-size: 0.67rem;
}

.page-frame {
  padding: 16px 18px 0;
}

.offline-pill {
  padding: 10px 14px;
  margin-bottom: 14px;
  border-radius: 16px;
  background: var(--accent-soft);
  color: var(--accent-strong);
  font-size: 0.88rem;
}

.view-root,
.station-list,
.settings-card,
.detail-hero,
.route-inputs,
.segment-list,
.facility-grid,
.schedule-groups,
.quick-grid,
.stats-row,
.line-chip-row,
.stations-summary-row {
  display: grid;
  gap: 16px;
}

.station-list {
  gap: 18px;
}

.view-root {
  gap: 16px;
}

.view-root.page-enter > * {
  animation: page-fade-in 900ms ease both;
}

.hero-card,
.card,
.station-card,
.route-card,
.list-card,
.map-card,
.line-card,
.settings-card,
.detail-hero,
.journey-card {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface-strong) 68%, var(--surface-soft) 32%) 0%, var(--surface) 100%);
  box-shadow: var(--shadow-soft);
}

.hero-card,
.card,
.station-card,
.route-card,
.list-card,
.map-card,
.line-card,
.settings-card,
.detail-hero,
.journey-card {
  padding: 17px;
}

.hero-card {
  background:
    linear-gradient(140deg, color-mix(in srgb, var(--accent-soft) 75%, transparent) 0%, transparent 58%),
    var(--surface);
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  padding: 8px 12px;
  margin-bottom: 14px;
  border-radius: 999px;
  background: var(--surface-strong);
  border: 1px solid var(--line);
  color: var(--accent-strong);
  font-size: 0.8rem;
  font-weight: 700;
}

.page-loader,
.loader-card,
.loader-pill-row,
.loader-timeline {
  display: grid;
  gap: 12px;
}

.page-loader {
  animation: page-fade-in 220ms ease both;
}

.page-loader-boot,
.loader-card {
  padding: 18px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.page-loader-boot {
  justify-items: start;
}

.loader-orb,
.loader-line,
.loader-pill,
.loader-dot,
.loader-rail {
  position: relative;
  overflow: hidden;
  background: color-mix(in srgb, var(--surface-soft) 86%, var(--surface-strong) 14%);
}

.loader-orb::before,
.loader-line::before,
.loader-pill::before,
.loader-dot::before,
.loader-rail::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.45) 50%, transparent 100%);
  transform: translateX(-100%);
  animation: shimmer 1.15s linear infinite;
}

.loader-orb {
  width: 56px;
  height: 56px;
  border-radius: 20px;
}

.loader-line {
  height: 12px;
  border-radius: 999px;
}

.loader-line.is-wide {
  width: 88%;
}

.loader-line.is-medium {
  width: 58%;
}

.loader-line.is-short {
  width: 42%;
}

.loader-pill-row {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.loader-pill {
  height: 44px;
  border-radius: 18px;
}

.loader-timeline {
  grid-template-columns: 18px 1fr 18px 1fr 18px;
  align-items: center;
}

.loader-dot {
  width: 18px;
  height: 18px;
  border-radius: 999px;
}

.loader-rail {
  height: 3px;
  border-radius: 999px;
}

.hero-title,
.detail-title {
  margin: 0;
  font-size: 1.28rem;
  line-height: 1.55;
}

.hero-text,
.meta-text,
.muted-text,
.section-caption {
  color: var(--muted);
  line-height: 1.8;
}

.hero-text {
  margin: 10px 0 0;
}

.section-caption {
  margin: 8px 0 0;
  font-size: 0.86rem;
}

.section-header,
.route-result-header,
.station-card-top,
.line-card-top,
.schedule-item-top,
.settings-row,
.route-planner-top,
.journey-segment-head,
.journey-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.section-header-stack {
  align-items: flex-start;
}

.section-title,
.route-title {
  margin: 0;
  font-size: 0.96rem;
  font-weight: 700;
}

.route-title {
  font-size: 1rem;
}

.action-row {
  display: grid;
  gap: 12px;
  margin-top: 18px;
}

.primary-button,
.secondary-button,
.small-button,
.toggle-button,
.line-chip,
.station-chip,
.quick-card,
.route-picker {
  border: 1px solid var(--line);
  border-radius: 18px;
}

.primary-button,
.secondary-button,
.small-button,
.toggle-button {
  min-height: 48px;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-weight: 700;
}

.primary-button {
  color: #fff;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-strong) 100%);
  box-shadow: 0 14px 28px rgba(234, 88, 12, 0.18);
}

.primary-button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  box-shadow: none;
  filter: saturate(0.6);
}

.secondary-button,
.small-button,
.toggle-button,
.route-picker,
.line-chip,
.station-chip,
.quick-card {
  background: var(--surface-strong);
}

.tone-button {
  background: var(--surface-soft);
}

.quick-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.quick-card {
  padding: 16px;
  text-align: right;
  display: grid;
  gap: 10px;
  justify-items: start;
  box-shadow: var(--shadow-soft);
}

.quick-card strong {
  font-size: 0.96rem;
}

.quick-card-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: var(--accent-soft);
  color: var(--accent-strong);
}

.stats-row {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.stat-box,
.meta-card,
.facility-item,
.place-item,
.schedule-card,
.line-station-item,
.settings-row,
.summary-box,
.journey-transfer {
  padding: 16px;
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
  background: var(--surface-soft);
}

.stat-value,
.summary-value {
  font-size: 1.08rem;
  font-weight: 700;
}

.summary-label,
.route-endpoint-label,
.selector-label,
.route-picker-label,
.journey-station-content small {
  color: var(--muted);
  font-size: 0.8rem;
}

.line-chip-row {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.line-chip {
  min-height: 92px;
  padding: 16px;
  display: grid;
  gap: 10px;
  text-align: right;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-soft);
}

.line-chip::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--line-color, var(--accent)) 14%, transparent) 0%, transparent 52%),
    linear-gradient(90deg, var(--line-color, var(--accent)) 0 5px, transparent 5px);
}

.line-chip-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.line-chip .line-name {
  font-weight: 700;
}

.line-chip-count {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--line-color, var(--accent)) 14%, var(--surface-strong) 86%);
  color: color-mix(in srgb, var(--line-color, var(--accent)) 74%, var(--text) 26%);
  font-size: 0.78rem;
}

.line-chip .line-endpoint {
  display: block;
  color: var(--muted);
  line-height: 1.7;
  font-size: 0.82rem;
}

.line-selector-grid,
.line-summary-grid {
  display: grid;
  gap: 12px;
}

.line-selector-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.line-option {
  min-height: 102px;
  padding: 13px;
  display: grid;
  gap: 8px;
  text-align: right;
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
  background:
    linear-gradient(150deg, color-mix(in srgb, var(--line-color, var(--accent)) 16%, transparent) 0%, transparent 55%),
    linear-gradient(90deg, color-mix(in srgb, var(--line-color, var(--accent)) 72%, transparent) 0 4px, transparent 4px),
    var(--surface-strong);
  box-shadow: var(--shadow-soft);
}

.line-option strong {
  font-size: 0.9rem;
}

.line-option small {
  color: var(--muted);
  line-height: 1.72;
  font-size: 0.78rem;
}

.line-option-badge {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--line-color, var(--accent)) 18%, var(--surface-strong) 82%);
  color: color-mix(in srgb, var(--line-color, var(--accent)) 82%, var(--text) 18%);
  font-size: 0.75rem;
  font-weight: 700;
}

.lines-empty-state {
  text-align: center;
  padding-block: 24px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface-strong) 76%, var(--surface-soft) 24%) 0%, var(--surface) 100%);
}

.line-option.is-active {
  border-color: color-mix(in srgb, var(--line-color, var(--accent)) 42%, transparent);
  box-shadow: 0 18px 36px color-mix(in srgb, var(--line-color, var(--accent)) 16%, transparent);
}

.line-showcase,
.line-route-card {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}

.line-showcase {
  padding: 20px;
  background:
    radial-gradient(circle at top right, color-mix(in srgb, var(--line-color, var(--accent)) 24%, transparent) 0%, transparent 34%),
    linear-gradient(160deg, color-mix(in srgb, var(--line-color, var(--accent)) 12%, transparent) 0%, transparent 62%),
    var(--surface);
}

.line-showcase-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.line-showcase-badge {
  margin-bottom: 14px;
}

.line-showcase-title {
  margin-bottom: 0;
}

.line-showcase-caption {
  font-size: 0.92rem;
}

.line-showcase-orb {
  width: 62px;
  height: 62px;
  flex: 0 0 62px;
  display: grid;
  place-items: center;
  border-radius: 24px;
  background: linear-gradient(135deg, var(--line-color, var(--accent)) 0%, color-mix(in srgb, var(--line-color, var(--accent)) 62%, #fff 38%) 100%);
  color: #fff;
  font-size: 1.1rem;
  font-weight: 700;
  box-shadow: 0 18px 32px color-mix(in srgb, var(--line-color, var(--accent)) 24%, transparent);
}

.line-summary-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 18px;
}

.line-ribbon {
  margin-top: 18px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
}

.line-ribbon-track {
  height: 8px;
  border-radius: 999px;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--line-color, var(--accent)) 24%, transparent) 0%, var(--line-color, var(--accent)) 48%, color-mix(in srgb, var(--line-color, var(--accent)) 24%, transparent) 100%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--line-color, var(--accent)) 24%, transparent);
}

.line-ribbon-label {
  font-size: 0.82rem;
  color: var(--muted);
}

.search-box,
.selector-field {
  min-height: 54px;
  padding: 0 15px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: var(--surface-strong);
}

.stations-hero {
  background:
    radial-gradient(circle at top right, rgba(246, 166, 28, 0.18), transparent 28%),
    linear-gradient(155deg, rgba(249, 115, 22, 0.08), transparent 36%),
    linear-gradient(180deg, color-mix(in srgb, var(--surface-strong) 72%, var(--surface-soft) 28%) 0%, var(--surface) 100%);
}

.stations-summary-row {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 4px;
}

.stations-summary-box {
  padding: 16px;
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface-soft) 74%, var(--surface-strong) 26%) 0%, var(--surface-strong) 100%);
  box-shadow: var(--shadow-soft);
}

.stations-search-card {
  padding: 14px;
  background:
    linear-gradient(160deg, rgba(246, 166, 28, 0.08), transparent 38%),
    var(--surface);
}

.search-box-rich {
  min-height: 66px;
  padding-inline: 18px;
  border-radius: 24px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface-strong) 74%, var(--surface-soft) 26%) 0%, var(--surface-strong) 100%);
}

.search-box-icon {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: var(--accent-soft);
  color: var(--accent-strong);
}

.search-box input,
.selector-field span,
.selector-field button {
  width: 100%;
}

.search-box input {
  border: 0;
  background: transparent;
  outline: none;
}

.route-planner-card {
  padding: 16px;
  background:
    radial-gradient(circle at top right, rgba(246, 166, 28, 0.16), transparent 28%),
    radial-gradient(circle at left 18%, rgba(249, 115, 22, 0.08), transparent 24%),
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 82%, var(--surface-soft) 18%) 0%, var(--surface) 100%);
}

.route-planner-top {
  align-items: flex-start;
  margin-bottom: 14px;
}

.route-swap-button {
  min-height: 48px;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--accent-strong) 20%, var(--line));
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent-soft) 88%, var(--surface-strong) 12%) 0%, var(--surface-strong) 100%);
  color: var(--accent-strong);
  font-weight: 700;
  box-shadow: 0 14px 28px color-mix(in srgb, var(--accent-strong) 18%, transparent);
}

.route-swap-icon {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: var(--surface-strong);
}

.route-pickers {
  display: grid;
  gap: 10px;
}

.route-picker-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
}

.route-picker-row.is-full {
  grid-template-columns: 1fr;
}

.route-picker {
  width: 100%;
  min-height: 66px;
  padding: 13px;
  display: grid;
  grid-template-columns: 38px 1fr;
  gap: 10px;
  align-items: center;
  text-align: right;
  box-shadow: var(--shadow-soft);
  background:
    linear-gradient(150deg, color-mix(in srgb, var(--accent-soft) 78%, transparent) 0%, transparent 58%),
    var(--surface-strong);
}

.route-picker-icon {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--accent-soft);
  color: var(--accent-strong);
}

.route-picker-content {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.route-picker-content strong {
  font-size: 0.88rem;
}

.route-geo-button {
  width: 52px;
  min-width: 52px;
  min-height: 66px;
  border: 1px solid var(--line);
  border-radius: 16px;
  display: grid;
  place-items: center;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--accent-soft) 86%, var(--surface-strong) 14%) 0%, var(--surface-strong) 100%);
  box-shadow: var(--shadow-soft);
}

.route-geo-button i {
  font-size: 1.05rem;
  color: var(--accent-strong);
}

.route-geo-button.is-loading i {
  animation: route-spin 1s linear infinite;
}

.route-geo-button:disabled {
  opacity: 0.78;
  cursor: wait;
}

.route-feedback {
  min-height: 42px;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-radius: 15px;
  border: 1px solid var(--line);
  background: var(--surface-soft);
  font-size: 0.84rem;
}

.route-feedback i {
  flex: 0 0 auto;
}

.route-feedback-loading {
  color: var(--accent-strong);
}

.route-feedback-loading i {
  animation: route-spin 1s linear infinite;
}

.route-feedback-success {
  color: var(--success);
}

.route-feedback-error {
  color: color-mix(in srgb, var(--accent-strong) 82%, #b91c1c 18%);
}

.route-submit {
  margin-top: 4px;
}

.route-history-card {
  gap: 14px;
  background:
    linear-gradient(160deg, rgba(246, 166, 28, 0.06), transparent 42%),
    var(--surface);
}

.route-history-list {
  display: grid;
  gap: 10px;
}

.route-history-item {
  width: 100%;
  padding: 14px 16px;
  display: grid;
  gap: 8px;
  text-align: right;
  border-radius: 18px;
  border: 1px solid var(--line);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface-soft) 74%, var(--surface-strong) 26%) 0%, var(--surface-strong) 100%);
  box-shadow: var(--shadow-soft);
}

.route-history-top {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.92rem;
  font-weight: 700;
}

.route-history-top i {
  color: var(--muted);
}

.route-empty {
  text-align: center;
  padding-block: 24px;
  background:
    radial-gradient(circle at top, rgba(246, 166, 28, 0.12), transparent 26%),
    var(--surface);
}

.route-overview {
  display: grid;
  gap: 12px;
  background:
    linear-gradient(160deg, rgba(246, 166, 28, 0.08), transparent 44%),
    var(--surface);
}

.route-brief {
  min-height: 42px;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: fit-content;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--accent-strong) 18%, var(--line));
  background: color-mix(in srgb, var(--accent-soft) 72%, var(--surface-strong) 28%);
  color: var(--accent-strong);
  font-size: 0.78rem;
  font-weight: 700;
}

.route-strip {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 8px;
  align-items: center;
}

.route-strip-arrow {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--accent-soft) 0%, color-mix(in srgb, var(--accent-soft) 30%, var(--surface-strong) 70%) 100%);
  color: var(--accent-strong);
}

.route-endpoint {
  padding: 13px 14px;
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface-soft) 74%, var(--surface-strong) 26%) 0%, var(--surface-soft) 100%);
  display: grid;
  gap: 4px;
}

.route-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.journey-card {
  padding: 18px;
  display: grid;
  gap: 14px;
  background:
    linear-gradient(160deg, rgba(246, 166, 28, 0.06), transparent 42%),
    var(--surface);
}

.journey-track {
  display: grid;
  gap: 12px;
}

.journey-segment {
  display: grid;
  gap: 10px;
}

.journey-segment-meta {
  color: var(--muted);
  font-size: 0.84rem;
}

.segment-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  padding: 7px 11px;
  border-radius: 999px;
  color: #fff;
  font-size: 0.8rem;
  font-weight: 700;
  background: var(--line-color, var(--accent));
}

.journey-stations {
  display: grid;
  gap: 0;
}

.journey-station {
  width: 100%;
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 10px;
  align-items: start;
  text-align: right;
}

.journey-station-rail {
  position: relative;
  min-height: 68px;
}

.journey-station-rail::before {
  content: "";
  position: absolute;
  right: 10px;
  top: 0;
  bottom: -4px;
  width: 2px;
  background: color-mix(in srgb, var(--line-color, var(--accent)) 78%, #fff 22%);
}

.journey-station:last-child .journey-station-rail::before {
  bottom: 34px;
}

.journey-station-dot {
  position: absolute;
  top: 7px;
  right: 5px;
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: var(--line-color, var(--accent));
  border: 2px solid var(--surface-strong);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--line-color, var(--accent)) 14%, transparent);
}

.journey-station-content {
  min-height: 56px;
  padding: 12px 14px 11px;
  display: grid;
  gap: 4px;
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
  background: var(--surface-strong);
  box-shadow: var(--shadow-soft);
}

.journey-station-content strong {
  font-size: 0.92rem;
}

.journey-remaining {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: 27px;
  padding: 0 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface-soft) 64%, var(--surface-strong) 36%);
  color: var(--text);
  font-size: 0.69rem;
  font-weight: 700;
}

.journey-remaining.is-close {
  background: color-mix(in srgb, var(--accent-soft) 82%, var(--surface-strong) 18%);
  color: var(--accent-strong);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-strong) 16%, transparent);
}

.journey-remaining.is-arrived {
  background: color-mix(in srgb, var(--success) 16%, var(--surface-strong));
  color: #087337;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--success) 36%, transparent);
}

[data-theme="dark"] .journey-remaining.is-arrived {
  background: color-mix(in srgb, var(--success) 24%, var(--surface-strong));
  color: #a8f0c0;
}

.journey-station.is-start .journey-station-dot {
  background: var(--success);
}

.journey-station.is-end .journey-station-dot {
  background: var(--accent-strong);
}

.journey-station.is-transfer .journey-station-dot {
  background: var(--accent);
}

.journey-transfer {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--accent-strong);
  font-size: 0.82rem;
}

.station-card {
  display: grid;
  gap: 12px;
  margin: 2px 0;
  padding: 16px;
  background:
    radial-gradient(circle at top right, color-mix(in srgb, var(--station-line-color, var(--accent)) 18%, transparent) 0%, transparent 30%),
    linear-gradient(155deg, color-mix(in srgb, var(--station-line-color, var(--accent)) 10%, transparent) 0%, transparent 54%),
    linear-gradient(180deg, color-mix(in srgb, var(--surface-strong) 74%, var(--surface-soft) 26%) 0%, var(--surface) 100%);
  box-shadow: var(--shadow-soft);
}

.station-card::before {
  content: "";
  position: absolute;
  inset: 16px 0 16px auto;
  width: 4px;
  border-radius: 999px;
  background: var(--station-line-color, var(--accent));
  box-shadow: 0 0 0 8px color-mix(in srgb, var(--station-line-color, var(--accent)) 10%, transparent);
}

.station-card-top {
  align-items: flex-start;
}

.station-card-main {
  min-width: 0;
  display: grid;
  gap: 8px;
  flex: 1 1 auto;
}

.station-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.station-card-kicker {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--station-line-color, var(--accent)) 18%, transparent);
  background: color-mix(in srgb, var(--station-line-color, var(--accent)) 12%, var(--surface-strong) 88%);
  color: color-mix(in srgb, var(--station-line-color, var(--accent)) 84%, var(--text) 16%);
  font-size: 0.73rem;
  font-weight: 700;
}

.station-card-title {
  display: block;
  margin: 7px 0 0;
  font-size: 1rem;
  line-height: 1.45;
}

.station-card-chevron {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface-strong) 78%, var(--surface-soft) 22%);
  color: var(--muted);
}

.station-card-address {
  color: var(--muted);
  line-height: 1.82;
  font-size: 0.84rem;
}

.station-card-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 8px;
}

.station-card-badges .mini-badge {
  background: color-mix(in srgb, var(--surface-strong) 76%, var(--station-line-color, var(--accent)) 24%);
}

.station-card-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.station-card-meta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface-soft) 72%, var(--surface-strong) 28%);
  color: var(--muted);
  font-size: 0.76rem;
}

.station-card-meta.is-accent {
  border-color: color-mix(in srgb, var(--station-line-color, var(--accent)) 18%, transparent);
  background: color-mix(in srgb, var(--station-line-color, var(--accent)) 12%, var(--surface-strong) 88%);
  color: color-mix(in srgb, var(--station-line-color, var(--accent)) 88%, var(--text) 12%);
}

.station-card-actions {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: 9px;
}

.station-action-primary,
.station-action-soft {
  min-height: 44px;
  padding-inline: 10px;
  font-size: 0.79rem;
}

.station-action-primary {
  border-color: color-mix(in srgb, var(--station-line-color, var(--accent)) 18%, transparent);
  background: color-mix(in srgb, var(--station-line-color, var(--accent)) 12%, var(--surface-strong) 88%);
  color: color-mix(in srgb, var(--station-line-color, var(--accent)) 88%, var(--text) 12%);
}

.station-action-soft {
  background: var(--surface-strong);
}

.station-card strong,
.line-station-item strong,
.facility-item strong,
.place-item strong {
  display: block;
  margin-bottom: 6px;
}

.mini-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface-soft);
  color: var(--muted);
  font-size: 0.78rem;
}

.line-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  display: inline-block;
  background: var(--line-color, var(--accent));
}

.station-detail-layout {
  display: grid;
  gap: 24px;
}

.detail-hero {
  gap: 14px;
  padding: 18px;
  border-color: color-mix(in srgb, var(--station-line-color, var(--accent)) 18%, var(--line));
  background:
    radial-gradient(circle at top right, color-mix(in srgb, var(--station-line-color, var(--accent)) 20%, transparent) 0%, transparent 32%),
    linear-gradient(150deg, color-mix(in srgb, var(--station-line-color, var(--accent)) 12%, transparent) 0%, transparent 58%),
    linear-gradient(180deg, color-mix(in srgb, var(--surface-strong) 72%, var(--surface-soft) 28%) 0%, var(--surface) 100%);
}

.detail-hero::before {
  content: "";
  position: absolute;
  inset: 18px 0 18px auto;
  width: 3px;
  border-radius: 999px;
  background: var(--station-line-color, var(--accent));
  box-shadow: 0 0 0 8px color-mix(in srgb, var(--station-line-color, var(--accent)) 10%, transparent);
}

.detail-hero-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.detail-hero-main,
.detail-title-wrap {
  display: grid;
  gap: 8px;
}

.detail-hero-main {
  flex: 1 1 auto;
  min-width: 0;
}

.detail-kicker {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--station-line-color, var(--accent)) 20%, transparent);
  background: color-mix(in srgb, var(--station-line-color, var(--accent)) 13%, var(--surface-strong) 87%);
  color: color-mix(in srgb, var(--station-line-color, var(--accent)) 84%, var(--text) 16%);
  font-size: 0.72rem;
  font-weight: 700;
}

.detail-address {
  max-width: 46ch;
  margin-top: 0;
}

.detail-orb {
  width: 58px;
  height: 58px;
  flex: 0 0 58px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 2px;
  border-radius: 18px;
  background: linear-gradient(145deg, var(--station-line-color, var(--accent)) 0%, color-mix(in srgb, var(--station-line-color, var(--accent)) 60%, #fff 40%) 100%);
  color: #fff;
  box-shadow: 0 20px 34px color-mix(in srgb, var(--station-line-color, var(--accent)) 22%, transparent);
}

.detail-orb span {
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1;
}

.detail-orb small {
  font-size: 0.64rem;
  opacity: 0.92;
}

.detail-overview-grid,
.detail-info-grid,
.places-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.place-item.place-tile {
  min-width: 0;
  overflow: hidden;
}

.place-item.place-tile strong,
.place-item.place-tile .place-category,
.place-tile-top,
.place-distance {
  min-width: 0;
}

.place-item.place-tile strong {
  overflow-wrap: anywhere;
}

.place-distance {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.detail-overview-card {
  padding: 12px 13px;
  border-radius: 15px;
  border: 1px solid var(--line);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface-soft) 76%, var(--surface-strong) 24%) 0%, var(--surface-strong) 100%);
  box-shadow: var(--shadow-soft);
}

.detail-overview-card .summary-value {
  margin-top: 6px;
}

.detail-overview-card .meta-text {
  margin-top: 6px;
  font-size: 0.75rem;
  line-height: 1.75;
}

.detail-ribbon {
  padding: 11px 13px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--station-line-color, var(--accent)) 18%, transparent);
  background: color-mix(in srgb, var(--station-line-color, var(--accent)) 10%, var(--surface-strong) 90%);
}

.detail-ribbon-text {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.detail-ribbon-text strong {
  font-size: 0.82rem;
}

.detail-ribbon-text span {
  color: var(--muted);
  line-height: 1.65;
  font-size: 0.76rem;
}

.detail-map-link {
  min-height: 38px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--station-line-color, var(--accent)) 18%, transparent);
  background: var(--surface-strong);
  color: color-mix(in srgb, var(--station-line-color, var(--accent)) 80%, var(--text) 20%);
  text-decoration: none;
  transition:
    transform 180ms ease,
    box-shadow 220ms ease,
    border-color 180ms ease,
    color 180ms ease;
}

.detail-actions {
  margin-top: 0;
}

.detail-actions-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.detail-action-button {
  min-height: 48px;
}

.detail-soft-button {
  min-height: 44px;
  width: 100%;
  border-radius: 13px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface-strong) 74%, var(--surface-soft) 26%) 0%, var(--surface-strong) 100%);
}

.detail-notice {
  min-height: 42px;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-radius: 15px;
  border: 1px solid var(--line);
  background: var(--surface-soft);
  font-size: 0.78rem;
}

.detail-notice-success {
  color: var(--success);
}

.detail-notice-error {
  color: color-mix(in srgb, var(--accent-strong) 78%, #b91c1c 22%);
}

.detail-section-card {
  display: grid;
  gap: 16px;
  background:
    linear-gradient(160deg, rgba(246, 166, 28, 0.05), transparent 40%),
    var(--surface);
}

.detail-section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.detail-count-badge {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface-strong);
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 700;
  white-space: nowrap;
}

.detail-use-cases {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.use-case-pill {
  min-height: 34px;
  padding: 0 11px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--accent-soft) 54%, var(--surface-strong) 46%) 0%, var(--surface-strong) 100%);
  color: var(--accent-strong);
  font-size: 0.73rem;
  font-weight: 700;
}

.detail-tile {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: flex-start;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface-soft) 74%, var(--surface-strong) 26%) 0%, var(--surface-strong) 100%);
}

.detail-tile-icon {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  background: var(--accent-soft);
  color: var(--accent-strong);
}

.detail-tile-body {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.detail-tile-body .meta-text {
  font-size: 0.74rem;
  line-height: 1.65;
}

.place-tile {
  display: grid;
  gap: 9px;
}

.place-tile-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.place-tile-icon {
  background: color-mix(in srgb, var(--accent-soft) 82%, var(--surface-strong) 18%);
}

.place-distance {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface-strong);
  color: var(--muted);
  font-size: 0.69rem;
  white-space: nowrap;
}

.place-category {
  color: var(--muted);
  line-height: 1.7;
  font-size: 0.75rem;
}

.detail-schedule-groups {
  gap: 12px;
}

.settings-card {
  background:
    linear-gradient(160deg, rgba(246, 166, 28, 0.06), transparent 44%),
    var(--surface);
}

.settings-row {
  padding: 13px;
  border-radius: 15px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface-soft) 74%, var(--surface-strong) 26%) 0%, var(--surface-strong) 100%);
}

.settings-row strong {
  display: block;
  margin-bottom: 6px;
}

.more-card {
  background:
    linear-gradient(160deg, rgba(246, 166, 28, 0.06), transparent 42%),
    var(--surface);
}

.more-copy {
  margin: 0;
  line-height: 2;
}

.install-guide-steps {
  display: grid;
  gap: 10px;
}

.install-guide-step {
  padding: 13px 14px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: center;
  border-radius: 16px;
  border: 1px solid var(--line);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface-soft) 76%, var(--surface-strong) 24%) 0%, var(--surface-strong) 100%);
}

.install-guide-step strong {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--accent-soft);
  color: var(--accent-strong);
}

.detail-meta,
.facility-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.contact-placeholder {
  padding: 14px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: flex-start;
  border-radius: 15px;
  border: 1px dashed color-mix(in srgb, var(--accent-strong) 28%, var(--line));
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--accent-soft) 46%, var(--surface-strong) 54%) 0%, var(--surface-strong) 100%);
}

.faq-list {
  display: grid;
  gap: 10px;
}

.faq-item {
  padding: 13px 14px;
  border-radius: 15px;
  border: 1px solid var(--line);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface-soft) 76%, var(--surface-strong) 24%) 0%, var(--surface-strong) 100%);
}

.faq-item strong {
  display: block;
  margin-bottom: 6px;
}

.extra-maps-list {
  display: grid;
  gap: 10px;
}

.extra-map-link {
  padding: 13px 14px;
  display: grid;
  gap: 5px;
  border-radius: 15px;
  border: 1px solid var(--line);
  text-decoration: none;
  color: var(--text);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface-soft) 76%, var(--surface-strong) 24%) 0%, var(--surface-strong) 100%);
}

.extra-map-link strong {
  font-size: 0.88rem;
}

.contact-placeholder-icon {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: var(--surface-strong);
  color: var(--accent-strong);
}

.map-link {
  color: var(--accent-strong);
  text-decoration: none;
}

.schedule-card {
  display: grid;
  gap: 12px;
  padding: 13px;
  background:
    radial-gradient(circle at top right, color-mix(in srgb, var(--line-color, var(--accent)) 16%, transparent) 0%, transparent 30%),
    linear-gradient(165deg, color-mix(in srgb, var(--line-color, var(--accent)) 8%, transparent) 0%, transparent 60%),
    var(--surface);
  box-shadow: var(--shadow-soft);
}

.schedule-item-top {
  align-items: flex-start;
  flex-wrap: wrap;
}

.schedule-heading {
  display: grid;
  gap: 6px;
}

.schedule-line-chip {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--line-color, var(--accent)) 16%, var(--surface-strong) 84%);
  color: color-mix(in srgb, var(--line-color, var(--accent)) 82%, var(--text) 18%);
  font-size: 0.73rem;
  font-weight: 700;
}

.schedule-destination {
  font-size: 0.9rem;
  line-height: 1.7;
}

.schedule-next-pill {
  min-width: 122px;
  padding: 10px 12px;
  display: grid;
  gap: 4px;
  justify-items: start;
  border-radius: 17px;
  border: 1px solid color-mix(in srgb, var(--line-color, var(--accent)) 24%, transparent);
  background: color-mix(in srgb, var(--line-color, var(--accent)) 12%, var(--surface-strong) 88%);
  color: color-mix(in srgb, var(--line-color, var(--accent)) 88%, var(--text) 12%);
  font-size: 0.78rem;
  font-weight: 700;
}

.schedule-next-pill small {
  font-size: 0.64rem;
  color: var(--muted);
}

.schedule-next-pill strong {
  font-size: 0.9rem;
}

.schedule-next-pill.is-live {
  box-shadow: 0 18px 34px color-mix(in srgb, var(--line-color, var(--accent)) 18%, transparent);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--line-color, var(--accent)) 20%, var(--surface-strong) 80%) 0%, color-mix(in srgb, var(--line-color, var(--accent)) 12%, var(--surface-strong) 88%) 100%);
}

.schedule-stack {
  display: grid;
  gap: 10px;
}

.schedule-block {
  padding: 12px;
  border-radius: 15px;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface-soft) 82%, var(--surface-strong) 18%);
}

.schedule-block-head {
  margin-bottom: 8px;
}

.schedule-label {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  background: var(--surface-strong);
  border: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.72rem;
}

.schedule-times {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.time-pill {
  min-height: 60px;
  padding: 10px;
  display: grid;
  gap: 4px;
  align-content: start;
  border-radius: 13px;
  border: 1px solid var(--line);
  background: var(--surface-strong);
  font-size: 0.74rem;
}

.time-pill small {
  color: var(--muted);
  font-size: 0.67rem;
}

.time-pill strong {
  font-size: 0.84rem;
  line-height: 1.55;
}

.route-share-card {
  gap: 16px;
  background:
    linear-gradient(160deg, rgba(246, 166, 28, 0.08), transparent 42%),
    var(--surface);
}

.route-share-preview {
  display: grid;
  gap: 14px;
  padding: 14px;
  border-radius: 18px;
  border: 1px solid var(--line);
  background:
    radial-gradient(circle at top right, rgba(246, 166, 28, 0.18), transparent 28%),
    linear-gradient(155deg, rgba(249, 115, 22, 0.08), transparent 34%),
    linear-gradient(180deg, color-mix(in srgb, var(--surface-strong) 76%, var(--surface-soft) 24%) 0%, var(--surface-strong) 100%);
}

.route-share-preview-top,
.route-share-preview-brand,
.route-share-preview-strip,
.route-share-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.route-share-preview-brand {
  justify-content: flex-start;
}

.route-share-logo {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-strong) 100%);
  color: #fff;
  font-weight: 700;
}

.route-share-preview-brand strong,
.route-share-preview-brand small {
  display: block;
}

.route-share-preview-brand small,
.route-share-preview-summary {
  color: var(--muted);
}

.route-share-preview-summary {
  font-size: 0.76rem;
  line-height: 1.75;
}

.route-share-preview-strip {
  min-height: 52px;
  padding: 0 14px;
  justify-content: center;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: var(--surface-strong);
  color: var(--accent-strong);
  font-weight: 700;
}

.route-share-preview-endpoint {
  color: var(--text);
}

.route-share-preview-stops {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.route-share-preview-stop {
  min-height: 34px;
  padding: 0 11px;
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface-soft) 72%, var(--surface-strong) 28%);
  color: var(--muted);
  font-size: 0.74rem;
}

.route-share-preview-stop.is-start,
.route-share-preview-stop.is-end {
  background: color-mix(in srgb, var(--accent-soft) 80%, var(--surface-strong) 20%);
  color: var(--accent-strong);
  font-weight: 700;
}

.route-share-actions {
  justify-content: stretch;
}

.route-share-actions .primary-button,
.route-share-actions .secondary-button {
  flex: 1 1 0;
}

.map-card {
  overflow: hidden;
}

.map-tools {
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.map-viewer {
  overflow: auto;
  max-height: 68vh;
  border-radius: 20px;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface-soft) 72%, #000 28%);
}

.map-stage {
  transform-origin: top left;
  transition: transform 180ms ease;
}

.map-stage img {
  display: block;
  width: 100%;
  min-width: 1100px;
  height: auto;
}

.line-track {
  position: relative;
  padding: 12px 0 8px 18px;
}

.line-track::before {
  content: "";
  position: absolute;
  right: 15px;
  top: 12px;
  bottom: 12px;
  width: 3px;
  background: color-mix(in srgb, var(--line-color, var(--accent)) 78%, #fff 22%);
  border-radius: 999px;
}

.line-track-rich {
  margin-top: 14px;
}

.line-route-card {
  padding: 16px;
  background: var(--surface);
}

.line-route-card.is-branch {
  background:
    linear-gradient(150deg, color-mix(in srgb, var(--line-color, var(--accent)) 10%, transparent) 0%, transparent 62%),
    var(--surface);
}

.line-station-item {
  width: 100%;
  position: relative;
  margin-bottom: 12px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
  padding: 13px 13px 13px 11px;
  text-align: right;
  box-shadow: var(--shadow-soft);
}

.line-station-item::before {
  content: "";
  position: absolute;
  right: -15px;
  top: 22px;
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: var(--line-color, var(--accent));
  border: 3px solid var(--bg);
}

.line-station-index {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: color-mix(in srgb, var(--line-color, var(--accent)) 16%, var(--surface-strong) 84%);
  color: color-mix(in srgb, var(--line-color, var(--accent)) 80%, var(--text) 20%);
  font-size: 0.84rem;
  font-weight: 700;
}

.line-station-body {
  min-width: 0;
  display: grid;
  gap: 6px;
}

.line-station-meta {
  color: var(--muted);
  line-height: 1.8;
  font-size: 0.82rem;
}

.line-station-transfer {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.line-station-arrow {
  align-self: center;
  color: var(--muted);
  font-size: 0.9rem;
}

.bottom-nav {
  position: fixed;
  inset: auto 12px 12px;
  max-width: 536px;
  margin: 0 auto;
  padding: 12px 14px calc(12px + env(safe-area-inset-bottom));
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--bg) 84%, transparent) 0%, color-mix(in srgb, var(--bg) 94%, transparent) 100%);
  backdrop-filter: blur(18px);
  border: 1px solid var(--line);
  border-radius: 24px;
  box-shadow: var(--shadow);
  transition:
    padding 180ms ease,
    gap 180ms ease,
    inset 180ms ease,
    border-radius 180ms ease,
    box-shadow 220ms ease;
}

.bottom-nav.is-compact {
  inset: auto 16px 10px;
  padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
  gap: 6px;
  border-radius: 20px;
  box-shadow: var(--shadow-soft);
}

.nav-item {
  min-height: 64px;
  padding: 8px 4px;
  display: grid;
  place-items: center;
  gap: 7px;
  border-radius: 18px;
  color: var(--muted);
  border: 1px solid transparent;
}

.bottom-nav.is-compact .nav-item {
  min-height: 56px;
  gap: 4px;
  padding: 6px 2px;
  border-radius: 18px;
}

.nav-icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: color-mix(in srgb, var(--surface-strong) 72%, transparent);
  font-size: 1rem;
}

.bottom-nav.is-compact .nav-icon {
  width: 30px;
  height: 30px;
  border-radius: 10px;
}

.nav-item span {
  font-size: 0.74rem;
}

.bottom-nav.is-compact .nav-item span:last-child {
  font-size: 0.67rem;
}

.header-nav {
  display: none;
}

.header-nav-item {
  min-height: 36px;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border-radius: 9px;
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 600;
  transition: background-color 180ms ease, color 180ms ease, transform 180ms ease;
}

.header-nav-item.is-active {
  background: var(--text);
  color: var(--bg-elevated);
}

.route-swap-inline {
  justify-self: center;
  min-width: 48px;
  padding-inline: 10px;
}

.directory-intro {
  max-width: 660px;
  margin: 6px auto 0;
  text-align: center;
}

.directory-intro .section-title {
  font-size: 1.38rem;
}

.directory-intro .section-caption {
  margin: 8px 0 0;
}

.stations-search-card {
  max-width: 660px;
  margin: 0 auto;
  padding: 0;
  border: 0;
  background: transparent;
}

.station-directory {
  display: grid;
  gap: 14px;
}

.station-line-group {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
}

.station-line-group-head {
  min-height: 74px;
  padding: 14px 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(135deg, color-mix(in srgb, var(--line-color) 12%, transparent), transparent 64%);
}

button.station-line-group-head {
  cursor: pointer;
}

.station-line-group-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
  font-weight: 700;
}

.station-line-group-title > span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--line-color);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--line-color) 16%, transparent);
}

.station-line-group-head small {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  font-size: 0.72rem;
}

.station-directory-list {
  max-height: 430px;
  padding: 5px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.station-directory-item {
  width: 100%;
  min-height: 54px;
  padding: 9px 10px;
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 9px;
  text-align: right;
  border-radius: 9px;
  transition: background-color 180ms ease, transform 180ms ease;
}

.station-directory-item:not(:last-child) {
  border-bottom: 1px solid color-mix(in srgb, var(--surface-border) 82%, transparent);
}

.station-directory-marker {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--line-color);
}

.station-directory-copy {
  min-width: 0;
}

.station-directory-copy strong,
.station-directory-copy small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.station-directory-copy strong {
  font-size: 0.83rem;
}

.station-directory-copy small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 0.68rem;
}

.station-directory-transfer {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 7px;
  background: color-mix(in srgb, var(--line-color) 13%, var(--surface-strong));
  color: var(--line-color);
  font-size: 0.66rem;
}

.station-directory-item > i {
  color: var(--muted);
  font-size: 0.75rem;
}

@media (hover: hover) {
  .header-nav-item:hover:not(.is-active),
  .station-directory-item:hover {
    background: var(--surface-soft);
  }

}

/* Final compact route-share surface and city control overrides. */
.active-city-label {
  appearance: none;
  cursor: pointer;
  border: 1px solid var(--line-strong);
  transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
}
.active-city-label:hover { border-color: var(--accent-strong); background: var(--accent-soft); }
.active-city-label:active { transform: scale(.98); }

.city-option {
  border: 1px solid var(--line-strong) !important;
  background: var(--surface-strong);
}
.city-option strong { transform: translateY(2px); }
.city-option:hover { border-color: var(--accent-strong) !important; }

.route-share-card {
  display: grid;
  gap: 10px;
  padding: 13px;
  background: var(--surface);
}
.route-share-head,
.route-share-brand,
.route-share-preview-strip,
.route-share-stats,
.detail-map-links { display: flex; align-items: center; }
.route-share-head { justify-content: space-between; gap: 10px; }
.route-share-brand { gap: 8px; min-width: 0; }
.route-share-brand img { width: 32px; height: 32px; border-radius: 9px; }
.route-share-brand h2 { margin: 0; font-size: .86rem; line-height: 1.35; }
.route-share-brand span { color: var(--muted); font-size: .63rem; direction: ltr; text-align: right; }
.route-share-ready { display: inline-flex; align-items: center; gap: 4px; color: var(--success); font-size: .66rem; white-space: nowrap; }
.route-share-preview { gap: 8px; padding: 10px; border-radius: var(--radius-control); border-color: var(--surface-border); background: var(--surface-strong); }
.route-share-preview-strip { min-height: 38px; padding: 0; justify-content: space-between; border: 0; border-radius: 0; background: transparent; font-size: .78rem; }
.route-share-preview-strip > i { color: var(--accent-strong); font-size: .8rem; }
.route-share-preview-endpoint { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.route-share-stats { justify-content: space-between; gap: 8px; padding-top: 8px; border-top: 1px solid var(--surface-border); color: var(--muted); font-size: .66rem; }
.route-share-stats span:last-child { white-space: nowrap; }
.route-share-actions { gap: 7px; }
.route-share-actions .primary-button,
.route-share-actions .secondary-button { min-height: 37px; padding-inline: 7px; font-size: .67rem; }
.route-share-actions i { font-size: .76rem; }
.detail-map-links { flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.detail-map-links .detail-map-link { min-height: 34px; padding-inline: 9px; font-size: .68rem; }
.detail-waze-link { color: #3ac76b; }

@media (max-width: 390px) {
  .route-share-actions { grid-template-columns: 1fr 1fr; }
  .route-share-actions .primary-button { grid-column: 1 / -1; }
  .route-share-ready { display: none; }
}

/* Active city, logo and station picker refinements. */
.brand-mark {
  padding: 0;
  background: transparent;
}

.brand-mark img {
  display: block;
  width: 100%;
  height: 100%;
}

.brand-mark::after { display: none; }

.active-city-label {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 9px;
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-control);
  background: var(--surface);
  color: var(--text);
  font-size: .72rem;
  font-weight: 700;
  white-space: nowrap;
}

.city-picker-mark { padding: 0; overflow: hidden; background: transparent; }
.city-picker-mark img { display: block; width: 100%; height: 100%; }
.city-picker-grid { gap: 10px; }
.city-option {
  grid-template-columns: 38px 1fr auto;
  grid-template-areas: "icon title arrow";
  min-height: 56px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-control);
}
.city-option small { display: none; }

.line-option.is-active {
  position: relative;
  border: 1px solid color-mix(in srgb, var(--line-color) 60%, var(--surface-border));
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--line-color) 20%, transparent), transparent 72%),
    var(--surface-strong);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--line-color) 20%, transparent);
}
.line-option.is-active::after {
  content: "انتخاب شده";
  position: absolute;
  inset: 9px 9px auto auto;
  padding: 3px 6px;
  border-radius: 6px;
  color: var(--line-color);
  background: color-mix(in srgb, var(--line-color) 14%, transparent);
  font-size: .62rem;
  font-weight: 700;
}
.line-option.is-active .line-option-badge { background: var(--line-color); color: #fff; }

.sheet-panel {
  padding: 8px 14px calc(16px + env(safe-area-inset-bottom));
  gap: 9px;
  max-height: min(76vh, 620px);
  border: 1px solid var(--surface-border);
  border-bottom: 0;
  border-radius: 18px 18px 0 0;
  background: var(--surface-strong);
  box-shadow: 0 -12px 36px color-mix(in srgb, #000 22%, transparent);
}
.sheet-handle { width: 42px; height: 4px; background: var(--line-strong); }
.sheet-header h2 { margin: 0; font-size: 1rem; }
.sheet-panel .search-box { min-height: 42px; border-radius: var(--radius-control); background: var(--surface); }
.sheet-list { gap: 6px; padding: 2px 0 4px; }
.sheet-item {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 10px;
  min-height: 58px;
  padding: 9px 11px;
  border-radius: var(--radius-control);
  border-color: var(--surface-border);
  background: var(--surface);
}
.sheet-item strong { font-size: .84rem; line-height: 1.55; }
.sheet-item small { grid-column: 1 / -1; margin: 0; color: var(--muted); font-size: .68rem; line-height: 1.45; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sheet-item-line { align-self: start; display: inline-flex; align-items: center; gap: 5px; color: var(--muted); font-size: .67rem; white-space: nowrap; }
.sheet-item-line .line-dot { width: 7px; height: 7px; background: var(--station-line-color); }

[data-theme="dark"] {
  --text: #fffaf2;
  --muted: #ead9c3;
  --line: rgba(255, 240, 217, .2);
  --line-strong: rgba(255, 240, 217, .34);
}

[data-theme="dark"] .meta-text,
[data-theme="dark"] .section-caption,
[data-theme="dark"] .muted-text,
[data-theme="dark"] .station-card-address,
[data-theme="dark"] .line-option small,
[data-theme="dark"] .sheet-item small { color: #ead9c3; }

@media (max-width: 420px) {
  .active-city-label { max-width: 88px; overflow: hidden; text-overflow: ellipsis; }
}

/* First-run city choice is intentionally compact so the app remains mobile-first. */
.city-picker-open .topbar,
.city-picker-open .bottom-nav {
  display: none;
}

.city-picker-open .page-frame {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px 16px;
}

.city-picker {
  width: min(100%, 580px);
  padding: clamp(24px, 6vw, 42px);
  text-align: center;
  border: 1px solid var(--line-soft);
  border-radius: 20px;
  background: linear-gradient(145deg, var(--surface) 0%, color-mix(in srgb, var(--surface) 88%, var(--accent-soft)) 100%);
  box-shadow: 0 18px 60px color-mix(in srgb, var(--ink) 10%, transparent);
}

.city-picker-mark {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin: 0 auto 12px;
  border-radius: 15px;
  color: #fff;
  background: linear-gradient(135deg, var(--accent), var(--accent-strong));
  font-size: 1.45rem;
  font-weight: 800;
}

.city-picker-kicker { color: var(--accent-strong); font-size: .76rem; font-weight: 800; }
.city-picker h1 { margin: 8px 0 7px; font-size: clamp(1.3rem, 4vw, 1.8rem); }
.city-picker > p { max-width: 430px; margin: 0 auto 20px; color: var(--ink-muted); font-size: .86rem; line-height: 1.9; }
.city-picker-grid { display: grid; gap: 9px; text-align: right; }
.city-option {
  display: grid;
  grid-template-columns: 38px 1fr auto;
  grid-template-areas: "icon title arrow" "icon meta arrow";
  align-items: center;
  column-gap: 10px;
  width: 100%; min-height: 62px; padding: 10px;
  border: 1px solid var(--line-soft); border-radius: 12px;
  color: var(--ink); background: var(--surface); cursor: pointer;
  font-family: inherit; text-align: right; transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
}
.city-option-icon { grid-area: icon; display:grid; place-items:center; width:38px; height:38px; border-radius:10px; color:var(--accent-strong); background:var(--accent-soft); }
.city-option strong { grid-area:title; font-size:.93rem; }
.city-option small { grid-area:meta; margin-top:2px; color:var(--ink-muted); font-size:.7rem; }
.city-option > i { grid-area:arrow; color:var(--ink-muted); }
.city-option:hover { transform: translateY(-1px); border-color:var(--accent); background:color-mix(in srgb, var(--surface) 93%, var(--accent-soft)); }

.map-unavailable-card { min-height: 260px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; text-align:center; }
.map-unavailable-card .section-caption { max-width: 340px; }
.map-unavailable-icon { display:grid; place-items:center; width:46px; height:46px; border-radius:13px; color:var(--accent-strong); background:var(--accent-soft); }

@media (max-width: 520px) {
  .city-picker-open .page-frame { padding: 14px; }
  .city-picker { padding: 22px 16px; border-radius: 16px; }
}

@media (min-width: 760px) {
  .app-shell {
    max-width: none;
    padding-bottom: 40px;
  }

  .topbar {
    width: 100%;
    max-width: none;
    display: grid;
    grid-template-columns: minmax(190px, auto) minmax(0, 1fr) auto;
    flex-wrap: nowrap;
    margin: 0;
    padding: 20px 24px 16px;
  }

  .topbar-main {
    flex: 0 0 auto;
  }

  .header-nav {
    display: inline-flex;
    min-width: 0;
    align-items: center;
    gap: 2px;
    padding: 3px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface);
    justify-self: center;
    white-space: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .topbar-left {
    order: 3;
  }

  .header-route-summary {
    display: none;
    grid-column: 1 / -1;
  }

  .header-route-summary.is-visible {
    display: flex;
  }

  .page-frame {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 28px clamp(24px, 4vw, 64px) 0;
  }

  .bottom-nav {
    display: none;
  }

  .view-root {
    gap: 24px;
  }

  .route-planner-card {
    width: min(100%, 850px);
    margin: 0 auto;
    padding: 20px;
  }

  .route-pickers {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: end;
  }

  .route-picker-row {
    grid-column: 1;
  }

  .route-picker-row.is-full {
    grid-column: 3;
  }

  .route-swap-inline {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
  }

  .route-feedback,
  .route-submit {
    grid-column: 1 / -1;
  }

  .route-submit {
    width: min(100%, 420px);
    justify-self: center;
  }

  .route-history-card,
  .route-overview,
  .journey-card,
  .route-share-card {
    width: min(100%, 850px);
    margin: 0 auto;
  }

  .station-directory {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
  }

  .directory-intro .section-title {
    font-size: 2rem;
  }

  .lines-overview-card,
  .line-showcase,
  .line-route-card,
  .map-card,
  .settings-card,
  .station-detail-layout {
    width: min(100%, 1080px);
    margin-inline: auto;
  }
}

.nav-item.is-active {
  color: var(--accent-strong);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface-strong) 74%, var(--surface-soft) 26%) 0%, var(--surface) 100%);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-soft);
}

.nav-item.is-active .nav-icon {
  background: color-mix(in srgb, var(--accent-soft) 70%, var(--surface-strong) 30%);
}

.sheet {
  position: fixed;
  inset: 0;
  z-index: 40;
}

.sheet-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 10, 5, 0.46);
}

.sheet-panel {
  position: absolute;
  inset: auto 0 0;
  max-width: 560px;
  margin: 0 auto;
  right: 0;
  left: 0;
  padding: 10px 16px calc(26px + env(safe-area-inset-bottom));
  display: grid;
  grid-template-rows: auto auto auto auto minmax(0, 1fr);
  gap: 12px;
  max-height: 82vh;
  border-radius: 28px 28px 0 0;
  background: var(--bg);
  box-shadow: 0 -24px 52px rgba(0, 0, 0, 0.24);
  min-height: 0;
  overflow: hidden;
}

.sheet-handle {
  width: 72px;
  height: 5px;
  margin: 0 auto;
  border-radius: 999px;
  background: var(--line-strong);
}

.sheet-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.sheet-list {
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-bottom: 8px;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
}

.sheet-item {
  width: 100%;
  text-align: right;
  padding: 14px;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: var(--surface);
}

.sheet-item small {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  line-height: 1.7;
}

.empty-state {
  padding: 24px 16px;
  text-align: center;
  color: var(--muted);
}

@media (hover: hover) {
  .icon-button:hover,
  .small-button:hover,
  .toggle-button:hover,
  .secondary-button:hover,
  .route-swap-button:hover,
  .route-geo-button:hover,
  .line-option:hover,
  .quick-card:hover,
  .route-picker:hover,
  .line-chip:hover,
  .nav-item:hover,
  .route-history-item:hover,
  .station-card:hover,
  .line-station-item:hover,
  .sheet-item:hover {
    transform: translateY(-2px);
    border-color: var(--line-strong);
    box-shadow: 0 16px 30px rgba(90, 57, 16, 0.12);
  }

  [data-theme="dark"] .icon-button:hover,
  [data-theme="dark"] .small-button:hover,
  [data-theme="dark"] .toggle-button:hover,
  [data-theme="dark"] .secondary-button:hover,
  [data-theme="dark"] .route-swap-button:hover,
  [data-theme="dark"] .route-geo-button:hover,
  [data-theme="dark"] .line-option:hover,
  [data-theme="dark"] .quick-card:hover,
  [data-theme="dark"] .route-picker:hover,
  [data-theme="dark"] .line-chip:hover,
  [data-theme="dark"] .nav-item:hover,
  [data-theme="dark"] .route-history-item:hover,
  [data-theme="dark"] .station-card:hover,
  [data-theme="dark"] .line-station-item:hover,
  [data-theme="dark"] .sheet-item:hover {
    box-shadow: 0 16px 30px rgba(0, 0, 0, 0.24);
  }

  .primary-button:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 18px 34px var(--accent-glow);
  }

  .detail-map-link:hover {
    transform: translateY(-2px);
    border-color: var(--line-strong);
    box-shadow: 0 14px 26px rgba(90, 57, 16, 0.12);
  }

  [data-theme="dark"] .detail-map-link:hover {
    box-shadow: 0 14px 26px rgba(0, 0, 0, 0.24);
  }

  .map-link:hover {
    color: var(--accent);
  }
}

.icon-button:active,
.small-button:active,
.toggle-button:active,
.secondary-button:active,
.route-swap-button:active,
.route-geo-button:active,
.line-option:active,
.quick-card:active,
.route-picker:active,
.line-chip:active,
.nav-item:active,
.route-history-item:active,
.sheet-item:active,
.detail-map-link:active,
.primary-button:active:not(:disabled) {
  transform: scale(0.985);
}

@keyframes shimmer {
  to {
    transform: translateX(100%);
  }
}

@keyframes route-spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes page-fade-in {
  0% {
    opacity: 0;
    transform: translateY(10px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (min-width: 460px) {
  .line-chip-row,
  .line-selector-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 420px) {
  .page-frame {
    padding: 14px 12px 0;
  }

  .topbar {
    padding-inline: 12px;
  }

  .topbar-left,
  .topbar-right {
    gap: 8px;
  }

  .brand-domain {
    display: none;
  }

  .topbar-main,
  .line-showcase-top,
  .detail-hero-top,
  .detail-section-head {
    align-items: flex-start;
  }

  .quick-grid,
  .stats-row,
  .stations-summary-row,
  .detail-meta,
  .detail-overview-grid,
  .detail-info-grid,
  .places-grid,
  .facility-grid,
  .line-summary-grid,
  .schedule-times,
  .line-selector-grid,
  .route-summary,
  .route-strip {
    grid-template-columns: 1fr;
  }

  .route-planner-card,
  .journey-card,
  .detail-hero,
  .schedule-card,
  .line-route-card,
  .line-showcase {
    padding: 16px;
  }

  .detail-hero::before {
    inset: 16px 0 16px auto;
  }

  .line-ribbon {
    grid-template-columns: 1fr;
    justify-items: start;
  }

  .detail-ribbon {
    flex-direction: column;
    align-items: flex-start;
  }

  .contact-placeholder {
    grid-template-columns: 1fr;
  }

  .detail-map-link {
    width: 100%;
    justify-content: center;
  }

  .schedule-next-pill {
    width: 100%;
  }

  .detail-actions-grid {
    grid-template-columns: 1fr;
  }

  .route-share-actions,
  .route-share-preview-top {
    flex-direction: column;
    align-items: stretch;
  }

  .route-share-preview-strip {
    flex-wrap: wrap;
  }

  .detail-orb {
    width: 68px;
    height: 68px;
    flex-basis: 68px;
  }

  .route-strip-arrow {
    justify-self: center;
    transform: rotate(-90deg);
  }

  .station-card-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .station-action-primary {
    grid-column: 1 / -1;
  }

  .brand-subtitle {
    display: none;
  }

  .hero-title,
  .detail-title {
    font-size: 1.22rem;
  }
}

/* Unified component system: one flat surface, one control shape, one border language. */
:root {
  --radius-surface: 14px;
  --radius-control: 10px;
  --radius-pill: 999px;
  --control-height: 42px;
  --control-height-small: 36px;
  --surface-border: color-mix(in srgb, var(--line) 92%, transparent);
}

[data-theme="dark"] {
  --surface-border: color-mix(in srgb, var(--line) 86%, transparent);
}

.hero-card,
.card,
.route-card,
.journey-card,
.map-card,
.line-card,
.settings-card,
.detail-hero,
.line-showcase,
.line-route-card,
.station-line-group,
.station-card,
.schedule-card {
  border-color: var(--surface-border);
  border-radius: var(--radius-surface);
  box-shadow: none;
}

.hero-card,
.route-planner-card,
.route-history-card,
.route-overview,
.journey-card,
.station-card,
.line-showcase,
.line-route-card,
.stations-hero,
.settings-card,
.detail-hero {
  background: var(--surface);
}

.primary-button,
.secondary-button,
.small-button,
.toggle-button,
.icon-button,
.route-swap-button,
.route-geo-button,
.line-option,
.quick-card,
.route-picker,
.line-chip,
.station-chip,
.header-nav-item {
  border-radius: var(--radius-control);
  box-shadow: none;
}

.primary-button,
.secondary-button,
.small-button,
.toggle-button {
  min-height: var(--control-height);
  padding-inline: 13px;
  border-color: var(--surface-border);
  font-size: 0.8rem;
}

.primary-button {
  background: var(--accent-strong);
  color: #fff;
}

.secondary-button,
.small-button,
.toggle-button {
  background: var(--surface-strong);
  color: var(--text);
}

.small-button,
.toggle-button {
  min-height: var(--control-height-small);
}

.icon-button {
  width: var(--control-height);
  height: var(--control-height);
  flex-basis: var(--control-height);
  border-color: var(--surface-border);
  background: var(--surface-strong);
}

.route-swap-button {
  min-height: var(--control-height);
  border-color: var(--surface-border);
  background: var(--surface-strong);
  color: var(--accent-strong);
}

.route-swap-icon,
.route-picker-icon,
.search-box-icon,
.quick-card-icon,
.nav-icon {
  border-radius: 8px;
}

.route-picker,
.route-geo-button,
.search-box,
.selector-field {
  border-color: var(--surface-border);
  background: var(--surface-strong);
  box-shadow: none;
}

.route-picker,
.route-geo-button {
  min-height: 58px;
}

.search-box-rich {
  min-height: 52px;
  border-radius: var(--radius-control);
}

.quick-card,
.line-option,
.station-directory-item,
.line-station-item,
.route-history-item,
.summary-box,
.detail-overview-card,
.detail-tile,
.place-tile,
.faq-item,
.settings-row {
  border-radius: var(--radius-control);
  box-shadow: none;
}

.quick-card,
.line-option,
.route-history-item,
.summary-box,
.detail-overview-card,
.detail-tile,
.place-tile,
.faq-item,
.settings-row {
  border-color: var(--surface-border);
  background: var(--surface-strong);
}

.line-option,
.line-option.is-active {
  background:
    linear-gradient(90deg, var(--line-color, var(--accent)) 0 3px, transparent 3px),
    var(--surface-strong);
}

.line-option.is-active {
  border-color: color-mix(in srgb, var(--line-color, var(--accent)) 42%, var(--surface-border));
}

.line-option-badge,
.hero-badge,
.mini-badge,
.station-card-kicker,
.route-brief,
.detail-count-badge,
.segment-badge,
.schedule-line-chip {
  border-radius: var(--radius-pill);
}

.bottom-nav {
  border-color: var(--surface-border);
  border-radius: var(--radius-surface);
  background: color-mix(in srgb, var(--bg) 94%, transparent);
  box-shadow: 0 8px 20px rgba(61, 40, 14, 0.08);
}

.nav-item,
.bottom-nav.is-compact .nav-item {
  border-radius: var(--radius-control);
}

.nav-item.is-active {
  border-color: transparent;
  background: var(--accent-soft);
  box-shadow: none;
}

.header-nav {
  border-radius: var(--radius-surface);
  border-color: var(--surface-border);
  background: var(--surface-strong);
}

.header-nav-item.is-active {
  background: var(--accent-strong);
  color: #fff;
}

.station-line-group-head {
  border-color: var(--surface-border);
  background: color-mix(in srgb, var(--line-color) 8%, var(--surface-strong));
  border-right: 3px solid var(--line-color);
}

.station-directory-item {
  border-radius: 8px;
}

.station-line-group-title {
  color: color-mix(in srgb, var(--line-color) 76%, var(--text));
}

.station-line-search-box {
  min-height: 38px;
  margin: 9px 9px 4px;
  padding: 0 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line-color, var(--accent));
  border-radius: var(--radius-control);
  background: color-mix(in srgb, var(--line-color) 5%, var(--surface-strong));
  color: var(--line-color);
}

.station-line-search-box input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
  font-size: 0.73rem;
}

.station-line-search-box input::placeholder {
  color: var(--muted);
}

.stations-search-card {
  max-width: 900px;
}

.line-option {
  position: relative;
  border-right: 3px solid var(--line-color, var(--accent));
}

.line-option-badge::before {
  content: "";
  width: 7px;
  height: 7px;
  display: inline-block;
  margin-left: 6px;
  border-radius: 50%;
  background: var(--line-color, var(--accent));
}

.line-station-item {
  min-height: 46px;
  margin-bottom: 5px;
  padding: 7px 8px 7px 7px;
  grid-template-columns: 26px minmax(0, 1fr) auto;
  gap: 8px;
  border: 1px solid var(--surface-border);
  border-right: 2px solid var(--line-color, var(--accent));
  border-radius: var(--radius-control);
  background: var(--surface-strong);
}

.line-station-item::before {
  right: -12px;
  top: 15px;
  width: 8px;
  height: 8px;
  border-width: 2px;
}

.line-station-index {
  width: 26px;
  height: 26px;
  flex-basis: 26px;
  border-radius: 7px;
  font-size: 0.68rem;
}

.line-station-body {
  gap: 2px;
}

.line-station-item strong {
  margin-bottom: 0;
  font-size: 0.78rem;
  line-height: 1.4;
}

.line-station-meta {
  line-height: 1.45;
  font-size: 0.68rem;
}

.line-station-transfer {
  gap: 4px;
}

.line-station-transfer .mini-badge {
  padding: 3px 6px;
  font-size: 0.63rem;
}

.view-root > * {
  width: 100%;
  max-width: 100%;
}

@media (min-width: 760px) {
  .view-root > * {
    width: min(100%, 1080px);
    margin-inline: auto;
  }

  .stations-search-card {
    max-width: 900px;
  }
}

@media (max-width: 759px) {
  .app-shell {
    padding-bottom: calc(72px + env(safe-area-inset-bottom));
  }

  .bottom-nav,
  .bottom-nav.is-compact {
    inset: auto 8px 8px;
    padding: 5px 6px calc(5px + env(safe-area-inset-bottom));
    gap: 2px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--bg-elevated) 96%, transparent);
    box-shadow: 0 5px 14px rgba(61, 40, 14, 0.09);
  }

  .nav-item,
  .bottom-nav.is-compact .nav-item {
    min-height: 45px;
    gap: 1px;
    padding: 3px 1px;
    border-radius: 8px;
  }

  .nav-icon,
  .bottom-nav.is-compact .nav-icon {
    width: 24px;
    height: 24px;
    border-radius: 7px;
    font-size: 0.76rem;
  }

  .nav-item span,
  .bottom-nav.is-compact .nav-item span:last-child {
    font-size: 0.58rem;
  }
}

/* Route timeline: a quiet, list-like journey rather than stacked mini cards. */
.journey-card {
  display: grid;
  gap: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-surface);
  background: var(--surface);
}

.journey-header {
  padding: 15px 16px 13px;
  border-bottom: 1px solid var(--surface-border);
}

.journey-header .meta-text {
  margin-top: 4px;
  font-size: 0.76rem;
}

.journey-track {
  gap: 0;
}

.journey-segment {
  gap: 0;
}

.journey-segment + .journey-segment {
  border-top: 1px solid var(--surface-border);
}

.journey-segment-head {
  min-height: 42px;
  padding: 8px 14px;
  background: color-mix(in srgb, var(--line-color, var(--accent)) 6%, var(--surface-strong));
}

.segment-badge {
  min-height: 25px;
  padding: 0 8px;
  font-size: 0.68rem;
}

.journey-segment-meta {
  font-size: 0.72rem;
}

.journey-stations {
  gap: 0;
}

.journey-station {
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 8px;
  min-height: 48px;
  padding: 0 13px;
}

.journey-station-rail {
  min-height: 48px;
}

.journey-station-rail::before {
  right: 9px;
  width: 2px;
  bottom: -1px;
}

.journey-station:last-child .journey-station-rail::before {
  bottom: 23px;
}

.journey-station-dot {
  top: 17px;
  right: 4px;
  width: 12px;
  height: 12px;
  border-width: 2px;
  box-shadow: none;
}

.journey-station-content {
  min-height: 48px;
  padding: 8px 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 4px 9px;
  border: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--surface-border) 76%, transparent);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.journey-station:last-child .journey-station-content {
  border-bottom: 0;
}

.journey-station-content strong {
  margin: 0;
  font-size: 0.8rem;
  line-height: 1.35;
}

.journey-station-content small {
  grid-column: 1;
  font-size: 0.65rem;
  line-height: 1.3;
}

.journey-remaining {
  grid-column: 2;
  grid-row: 1 / span 2;
  min-height: 25px;
  padding-inline: 7px;
  border-radius: var(--radius-pill);
  font-size: 0.62rem;
}

.journey-transfer {
  min-height: 40px;
  margin: 0;
  padding: 7px 14px 7px 44px;
  border-top: 1px dashed color-mix(in srgb, var(--line) 80%, transparent);
  border-radius: 0;
  background: color-mix(in srgb, var(--accent-soft) 36%, var(--surface));
  font-size: 0.7rem;
}

.route-share-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.route-share-actions .primary-button,
.route-share-actions .secondary-button {
  min-width: 0;
  padding-inline: 8px;
  font-size: 0.72rem;
}

@media (max-width: 420px) {
  .route-share-actions {
    grid-template-columns: 1fr;
  }
}

html,
body {
  overflow-x: clip;
}

.page-frame,
.route-card,
.route-inputs,
.route-picker-row,
.route-picker,
.route-picker-content,
.route-picker-content strong {
  min-width: 0;
}

.route-picker-content strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.station-directory-item:hover {
  background: color-mix(in srgb, var(--line-color) 7%, var(--surface-soft));
}

.station-directory-item[hidden] {
  display: none;
}

.map-viewer {
  min-height: 360px;
  padding: 0;
  scrollbar-color: var(--accent-strong) transparent;
}

.map-stage {
  width: 1100px;
  min-width: 1100px;
  transform: none;
  will-change: width;
}

.map-stage img {
  width: 100%;
  min-width: 0;
}

.more-section {
  display: grid;
  gap: 14px;
  padding: 16px;
  border-color: var(--surface-border);
  border-radius: var(--radius-surface);
  background: var(--surface);
}

.more-section .detail-section-head,
.more-settings-card .section-header {
  padding-bottom: 12px;
  border-bottom: 1px solid var(--surface-border);
}

.more-section .section-caption {
  font-size: 0.78rem;
}

.more-section .settings-row,
.more-section .install-guide-step,
.more-section .extra-map-link,
.more-section .faq-item,
.more-section .contact-placeholder {
  border-color: var(--surface-border);
  border-radius: var(--radius-control);
  background: var(--surface-strong);
}

.more-section .settings-row {
  min-height: 58px;
  padding: 10px 11px;
}

.more-section .settings-row strong,
.more-section .faq-item strong {
  margin-bottom: 3px;
  font-size: 0.82rem;
}

.more-section .install-guide-steps,
.more-section .extra-maps-list,
.more-section .faq-list {
  gap: 8px;
}

.more-section .install-guide-step,
.more-section .extra-map-link,
.more-section .faq-item,
.more-section .contact-placeholder {
  padding: 11px;
}

.more-section .install-guide-step strong,
.more-section .contact-placeholder-icon {
  width: 30px;
  height: 30px;
  border-radius: 8px;
}

.more-section .contact-placeholder {
  border-style: solid;
}

.more-section .more-copy {
  font-size: 0.82rem;
  line-height: 1.9;
}

@media (hover: hover) {
  .icon-button:hover,
  .small-button:hover,
  .toggle-button:hover,
  .secondary-button:hover,
  .route-swap-button:hover,
  .route-geo-button:hover,
  .line-option:hover,
  .quick-card:hover,
  .route-picker:hover,
  .line-chip:hover,
  .nav-item:hover,
  .route-history-item:hover,
  .station-card:hover,
  .line-station-item:hover,
  .sheet-item:hover,
  .header-nav-item:hover:not(.is-active) {
    transform: translateY(-1px);
    border-color: var(--line-strong);
    box-shadow: none;
  }

  .primary-button:hover:not(:disabled) {
    transform: translateY(-1px);
    background: color-mix(in srgb, var(--accent-strong) 90%, #000 10%);
    box-shadow: none;
  }
}

/* Keep the latest city, share and map controls after legacy style overrides. */
.active-city-label {
  appearance: none;
  cursor: pointer;
  border: 1px solid var(--line-strong);
  transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
}
.active-city-label:hover { border-color: var(--accent-strong); background: var(--accent-soft); }
.active-city-label:active { transform: scale(.98); }
.city-option { border: 1px solid var(--line-strong) !important; background: var(--surface-strong); }
.city-option strong { transform: translateY(2px); }
.city-option:hover { border-color: var(--accent-strong) !important; }
.route-share-card { display: grid; gap: 10px; padding: 13px; background: var(--surface); }
.route-share-head,.route-share-brand,.route-share-preview-strip,.route-share-stats,.detail-map-links { display:flex; align-items:center; }
.route-share-head { justify-content:space-between; gap:10px; }
.route-share-brand { gap:8px; min-width:0; }
.route-share-brand img { width:32px; height:32px; border-radius:9px; }
.route-share-brand h2 { margin:0; font-size:.86rem; line-height:1.35; }
.route-share-brand span { color:var(--muted); font-size:.63rem; direction:ltr; text-align:right; }
.route-share-ready { display:inline-flex; align-items:center; gap:4px; color:var(--success); font-size:.66rem; white-space:nowrap; }
.route-share-preview { gap:8px; padding:10px; border-radius:var(--radius-control); border-color:var(--surface-border); background:var(--surface-strong); }
.route-share-preview-strip { min-height:38px; padding:0; justify-content:space-between; border:0; border-radius:0; background:transparent; font-size:.78rem; }
.route-share-preview-strip > i { color:var(--accent-strong); font-size:.8rem; }
.route-share-preview-endpoint { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.route-share-stats { justify-content:space-between; gap:8px; padding-top:8px; border-top:1px solid var(--surface-border); color:var(--muted); font-size:.66rem; }
.route-share-stats span:last-child { white-space:nowrap; }
.route-share-actions { gap:7px; }
.route-share-actions .primary-button,.route-share-actions .secondary-button { min-height:37px; padding-inline:7px; font-size:.67rem; }
.route-share-actions i { font-size:.76rem; }
.detail-map-links { flex-wrap:wrap; justify-content:flex-end; gap:6px; }
.detail-map-links .detail-map-link { min-height:34px; padding-inline:9px; font-size:.68rem; }
.detail-waze-link { color:#3ac76b; }
@media (max-width:390px) { .route-share-actions { grid-template-columns:1fr 1fr; } .route-share-actions .primary-button { grid-column:1 / -1; } .route-share-ready { display:none; } }

/* Route flow refinements. */
.route-planner-card {
  gap: 10px;
  padding: 14px;
  border-color: var(--surface-border);
  background: linear-gradient(145deg, color-mix(in srgb, var(--accent-soft) 42%, transparent), transparent 56%), var(--surface);
}
.route-planner-top { margin-bottom: 4px; }
.route-planner-top .section-caption { margin: 3px 0 0; font-size: .78rem; }
.route-pickers { gap: 7px; }
.route-picker-row,.route-picker-row.is-full { grid-template-columns: minmax(0, 1fr) auto; gap: 7px; }
.route-picker,.route-geo-button { min-height: 54px; border-radius: var(--radius-control); box-shadow: none; }
.route-picker { padding: 9px; grid-template-columns: 32px minmax(0, 1fr); gap: 8px; border: 1px solid var(--surface-border); background: var(--surface-strong); }
.route-picker-icon { width: 32px; height: 32px; border-radius: 9px; }
.route-picker-content strong { font-size: .8rem; }
.route-picker-label { font-size: .67rem; }
.route-geo-button { width: 44px; min-width: 44px; border-color: var(--surface-border); background: var(--surface-strong); }
.route-geo-button i { font-size: .88rem; }
.route-swap-button { justify-self: center; min-height: 32px; padding: 0 10px; border-radius: 9px; font-size: .68rem; box-shadow: none; }
.route-swap-icon { width: 22px; height: 22px; border-radius: 7px; }
.route-submit { min-height: 41px; border-radius: var(--radius-control); font-size: .78rem; }
.route-empty { padding: 14px; text-align: center; }
.route-empty .hero-text { margin: 0; font-size: .78rem; }

.journey-station { position: relative; grid-template-columns: 22px minmax(0, 1fr) 26px; }
.journey-station-info { grid-column: 3; align-self: center; width: 26px; height: 26px; border: 1px solid var(--surface-border); border-radius: 8px; color: var(--muted); background: var(--surface-strong); font-size: .67rem; }
.journey-station-info:hover { color: var(--accent-strong); border-color: var(--accent-strong); }

.station-quick-modal { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 18px; }
.station-quick-backdrop { position: absolute; inset: 0; background: color-mix(in srgb, #0d0905 54%, transparent); backdrop-filter: blur(3px); }
.station-quick-panel { position: relative; width: min(100%, 420px); display: grid; gap: 11px; padding: 20px; border: 1px solid var(--surface-border); border-radius: 16px; background: var(--surface-strong); box-shadow: 0 20px 52px rgba(0,0,0,.22); }
.station-quick-accent { position: absolute; top: 0; right: 18px; left: 18px; height: 3px; border-radius: 0 0 5px 5px; background: var(--station-line-color); }
.station-quick-close { position: absolute; top: 10px; left: 10px; display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid var(--surface-border); border-radius: 8px; color: var(--muted); }
.station-quick-panel h2 { margin: 3px 0 0; font-size: 1rem; }
.station-quick-panel > p { margin: 0; color: var(--muted); font-size: .75rem; line-height: 1.8; }
.station-quick-meta { display: flex; flex-wrap: wrap; gap: 6px; }
.station-quick-meta span { display: inline-flex; align-items: center; gap: 5px; padding: 5px 7px; border-radius: 7px; color: var(--muted); background: var(--surface-soft); font-size: .67rem; }
.station-quick-actions { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 3px; }
.station-quick-actions .small-button { min-height: 34px; padding-inline: 9px; font-size: .67rem; }
.station-quick-actions a { display: inline-flex; align-items: center; gap: 5px; text-decoration: none; }

/* Station chooser, route overview and detail grids. */
.sheet-item { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name line" "address address"; }
.sheet-item strong { grid-area: name; text-align: right; }
.sheet-item-line { grid-area: line; justify-self: end; text-align: left; }
.sheet-item small { grid-area: address; }

.route-overview { display: grid; gap: 9px; padding: 13px; background: var(--surface); }
.route-overview .route-brief { min-height: 32px; padding-inline: 9px; border: 0; background: var(--surface-soft); font-size: .69rem; }
.route-overview .route-strip { gap: 7px; }
.route-overview .route-endpoint { min-height: 50px; padding: 8px 10px; border-radius: var(--radius-control); border-color: var(--surface-border); background: var(--surface-strong); }
.route-overview .route-endpoint strong { font-size: .78rem; }
.route-overview .route-strip-arrow { width: 25px; height: 25px; border: 0; background: transparent; color: var(--accent-strong); }
.route-overview .route-summary { gap: 6px; }
.route-overview .summary-box { min-height: 58px; padding: 8px; border-radius: var(--radius-control); border-color: var(--surface-border); background: var(--surface-strong); }
.route-overview .summary-label { font-size: .63rem; }
.route-overview .summary-value { margin-top: 3px; font-size: .84rem; }
.route-wait-note { display: inline-flex; align-items: center; gap: 6px; width: fit-content; padding: 6px 8px; border-radius: 8px; color: var(--muted); background: var(--surface-soft); font-size: .66rem; }
.station-filter-button { width: 100%; min-height: 38px; margin-top: 7px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 1px solid var(--surface-border); border-radius: var(--radius-control); color: var(--muted); background: var(--surface); font-size: .7rem; }
.station-filter-button.is-active { color: var(--accent-strong); border-color: var(--accent-strong); background: var(--accent-soft); }

.facility-grid,.places-grid { gap: 7px; }
.facility-item.detail-tile,.place-item.place-tile { min-height: 0; padding: 10px; border-radius: var(--radius-control); border-color: var(--surface-border); background: var(--surface-strong); box-shadow: none; }
.facility-item.detail-tile { display: flex; align-items: center; gap: 8px; }
.detail-tile-icon { width: 28px; height: 28px; border-radius: 8px; font-size: .74rem; }
.detail-tile-body { gap: 1px; }
.detail-tile-body strong,.place-item.place-tile strong { font-size: .76rem; }
.detail-tile-body .meta-text,.place-item.place-tile .place-category { font-size: .62rem; }
.place-tile-top { margin-bottom: 6px; }
.place-distance { padding: 3px 5px; border-radius: 6px; font-size: .6rem; }

[data-accessibility="enhanced"] { font-size: 18px; }
[data-accessibility="enhanced"] .small-button,
[data-accessibility="enhanced"] .primary-button,
[data-accessibility="enhanced"] .secondary-button,
[data-accessibility="enhanced"] .route-picker,
[data-accessibility="enhanced"] .route-geo-button,
[data-accessibility="enhanced"] .journey-station-info { min-height: 48px; }
[data-accessibility="enhanced"] .section-caption,
[data-accessibility="enhanced"] .meta-text { font-size: .86rem; }

/* Header journey context and line list readability. */
.brand-block { border: 0; padding: 0; text-align: right; }
.route-sticky-summary { position: fixed; top: calc(60px + env(safe-area-inset-top)); right: 50%; z-index: 29; display: flex; align-items: center; gap: 7px; width: min(calc(100% - 28px), 532px); min-height: 32px; padding: 0 11px; border: 1px solid var(--surface-border); border-radius: 0 0 9px 9px; color: var(--text); background: color-mix(in srgb, var(--surface-strong) 94%, transparent); box-shadow: 0 5px 16px rgba(0,0,0,.08); transform: translate(50%, -135%); opacity: 0; pointer-events: none; transition: transform 260ms ease, opacity 220ms ease; font-size: .7rem; }
.route-sticky-summary.is-visible { transform: translate(50%, 0); opacity: 1; }
.route-sticky-summary span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.route-sticky-summary i { color: var(--accent-strong); font-size: .7rem; }
.route-history-list { position: relative; }
.route-history-item { padding-left: 38px; }
.route-history-remove { position: absolute; left: 7px; display: grid; place-items: center; width: 27px; height: 27px; border: 1px solid var(--surface-border); border-radius: 8px; color: var(--muted); background: var(--surface-strong); }
.route-history-list > :nth-child(2) { top: calc(33.333% + 4px); }
.route-history-list > :nth-child(4) { top: calc(66.666% + 7px); }
.line-option.is-active { padding-top: 26px; }
.line-option.is-active::after { top: 7px; right: auto; left: 8px; z-index: 2; }
.line-option.is-active .line-option-badge { position: absolute; top: 8px; right: 8px; }
.line-route-card { padding: 13px; border-color: var(--surface-border); background: var(--surface); }
.line-route-card .section-header { margin-bottom: 8px; }
.line-track-rich { gap: 8px; padding-right: 0; }
.line-station-item { min-height: 56px; padding: 8px 10px; gap: 9px; border: 1px solid var(--surface-border); border-radius: var(--radius-control); background: var(--surface-strong); }
.line-station-index { width: 25px; height: 25px; border-radius: 7px; font-size: .64rem; }
.line-station-body { gap: 2px; }
.line-station-item strong { font-size: .78rem; }
.line-station-meta { font-size: .63rem; }
.line-station-arrow { width: 24px; height: 24px; border-radius: 7px; background: var(--surface-soft); }
.route-alternative { display: flex; align-items: center; gap: 6px; width: 100%; min-height: 35px; padding: 7px 8px; border: 1px dashed color-mix(in srgb, var(--accent-strong) 46%, var(--surface-border)); border-radius: 8px; color: var(--accent-strong); background: transparent; font-size: .67rem; }
.route-alternative small { margin-right: auto; color: var(--muted); }
[data-contrast="high"] { --text: #1d1309; --muted: #4f351e; --line: rgba(72,44,20,.46); --line-strong: rgba(72,44,20,.68); --surface: #fffdf8; --surface-strong: #ffffff; --accent-strong: #b94f00; }
[data-theme="dark"][data-contrast="high"] { --text: #ffffff; --muted: #fff0d9; --line: rgba(255,238,210,.54); --line-strong: rgba(255,238,210,.76); --surface: #15100c; --surface-strong: #20170f; --accent-strong: #ffd05b; }
@media (max-width: 500px) { .route-sticky-summary { top: calc(56px + env(safe-area-inset-top)); width: calc(100% - 20px); } }

/* Header-integrated route context, settings and mobile station accordion. */
.header-route-summary { grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; gap: 8px; max-height: 0; overflow: hidden; margin: -12px 0 0; padding: 0 12px; border-top: 1px solid transparent; color: var(--text); opacity: 0; transition: max-height 260ms ease, margin 260ms ease, padding 260ms ease, opacity 180ms ease, border-color 200ms ease; font-size: .7rem; }
.topbar { flex-wrap: wrap; }
.header-route-summary { flex: 0 0 100%; }
.header-route-summary.is-visible { max-height: 38px; margin-top: 9px; padding: 8px 12px 0; border-top-color: var(--surface-border); opacity: 1; }
.header-route-summary span { max-width: 42%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.header-route-summary i { color: var(--accent-strong); font-size: .68rem; }

.more-settings-card { gap: 8px; padding: 13px; background: var(--surface); }
.more-settings-card .settings-row { min-height: 52px; padding: 9px 10px; border: 1px solid var(--surface-border); border-radius: var(--radius-control); background: var(--surface-strong); transition: border-color 180ms ease, background 180ms ease, transform 180ms ease; }
.more-settings-card .settings-row:hover { border-color: var(--line-strong); background: var(--surface); }
.more-settings-card .settings-row strong { font-size: .76rem; }
.more-settings-card .settings-row .meta-text { font-size: .64rem; }
.more-settings-card .settings-row .small-button { min-height: 32px; padding-inline: 9px; font-size: .67rem; }

.city-option { position: relative; display: flex; align-items: center; justify-content: center; min-height: 58px; padding: 10px 48px; }
.city-option strong { transform: translateY(3px); text-align: center; }
.city-option-icon { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); }
.city-option > i { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); }

.line-option.is-active { padding: 11px; align-content: start; }
.line-option.is-active .line-option-badge { position: static; }
.line-option.is-active::after { top: 8px; right: auto; left: 8px; bottom: auto; }
.line-option.is-active strong { margin-top: 5px; }

.accessibility-fab { position: fixed; right: max(14px, env(safe-area-inset-right)); bottom: calc(86px + env(safe-area-inset-bottom)); z-index: 35; display: grid; justify-items: end; gap: 8px; }
.accessibility-fab-trigger { display: grid; place-items: center; width: 46px; height: 46px; border: 1px solid color-mix(in srgb, var(--accent-strong) 48%, var(--surface-border)); border-radius: 14px; color: #fff; background: var(--accent-strong); box-shadow: 0 10px 24px color-mix(in srgb, var(--accent-strong) 30%, transparent); font-size: 1rem; }
.accessibility-fab-panel { display: grid; gap: 6px; width: 0; max-height: 0; overflow: hidden; opacity: 0; transform: translateY(6px); transition: width 220ms ease, max-height 220ms ease, opacity 180ms ease, transform 220ms ease; }
.accessibility-fab.is-open .accessibility-fab-panel { width: 194px; max-height: 176px; padding: 7px; border: 1px solid var(--surface-border); border-radius: 14px; opacity: 1; transform: translateY(0); background: color-mix(in srgb, var(--surface-strong) 94%, var(--accent-soft)); box-shadow: 0 12px 28px rgba(0,0,0,.14); }
.accessibility-fab-panel button { display: flex; align-items: center; gap: 7px; min-height: 35px; padding: 7px 9px; border: 1px solid var(--surface-border); border-radius: 9px; color: var(--text); background: var(--surface-strong); box-shadow: var(--shadow-soft); font-size: .66rem; white-space: nowrap; }
.accessibility-fab-panel i { width: 15px; color: var(--accent-strong); }

[data-color-vision="enhanced"] { --accent: #0072b2; --accent-strong: #005f9e; --success: #007a5a; }
[data-theme="dark"][data-color-vision="enhanced"] { --accent: #56b4e9; --accent-strong: #8cd8ff; --success: #72d6b1; }
@media (max-width: 700px) {
  .station-line-group { overflow: hidden; }
  .station-line-group-head { width: 100%; min-height: 54px; padding: 10px 11px; display: flex; align-items: center; justify-content: space-between; color: var(--text); text-align: right; }
  .station-line-group-head::after { content: "\f107"; font-family: "Font Awesome 6 Free"; font-weight: 900; color: var(--muted); transition: transform 200ms ease; }
  .station-line-group.is-open .station-line-group-head::after { transform: rotate(180deg); }
  .station-line-group .station-line-search-box,
  .station-line-group .station-directory-list { display: none; }
  .station-line-group.is-open .station-line-search-box { display: flex; margin: 0 10px 8px; }
  .station-line-group.is-open .station-directory-list { display: grid; }
}

/* Bus mode, accessibility controls and mobile selection. */
.city-option-bus { margin-top: 6px; border-style: dashed !important; border-color: color-mix(in srgb, #0072b2 58%, var(--line-strong)) !important; background: linear-gradient(135deg, color-mix(in srgb, #56b4e9 14%, var(--surface-strong)), var(--surface-strong)); }
.city-option-bus .city-option-icon { color: #0072b2; background: color-mix(in srgb, #56b4e9 16%, var(--surface)); }
.city-option-bus strong { max-width: 250px; font-size: .8rem; line-height: 1.65; }
.more-section .detail-count-badge { display: none; }
.accessibility-fab-trigger { border-radius: 50%; background: linear-gradient(135deg, var(--accent-strong), var(--accent)); box-shadow: 0 10px 28px color-mix(in srgb, var(--accent-strong) 36%, transparent); transition: background-color 200ms ease, color 200ms ease, box-shadow 200ms ease, border-color 200ms ease; }
.accessibility-fab-panel button { position: relative; border-radius: 11px; }
.accessibility-fab-panel button.is-active { border-color: var(--success); color: var(--success); background: color-mix(in srgb, var(--success) 10%, var(--surface-strong)); }
.accessibility-fab-panel button.is-active::after { content: "\f00c"; margin-right: auto; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: .68rem; }
@media (max-width: 700px) {
  body { -webkit-user-select: none; user-select: none; }
  input, textarea, [contenteditable="true"] { -webkit-user-select: text; user-select: text; }
}

.osm-map-viewer { height: min(62vh, 520px); overflow: hidden; border: 1px solid var(--surface-border); border-radius: var(--radius-surface); background: var(--surface-soft); }
.osm-map-viewer iframe { width: 100%; height: 100%; border: 0; }
.interchange-note,.intermodal-note { display: flex; align-items: flex-start; gap: 7px; margin-top: 8px; padding: 8px 10px; border: 1px solid var(--surface-border); border-radius: var(--radius-control); color: var(--muted); background: var(--surface-soft); font-size: .7rem; line-height: 1.7; }
.interchange-note i { color: var(--accent-strong); }
.intermodal-note i { color: #7d4ae3; }
.static-map-card { margin-bottom: 12px; }
.osm-map-card { margin-top: 0; }

/* BRT purple identity and icon-safe controls. */
.city-option-bus { border-color: color-mix(in srgb, #8b5cf6 62%, var(--line-strong)) !important; background: linear-gradient(135deg, color-mix(in srgb, #8b5cf6 15%, var(--surface-strong)), var(--surface-strong)); }
.city-option-bus .city-option-icon { color: #7545dc; background: color-mix(in srgb, #8b5cf6 16%, var(--surface)); }
.station-line-group-head { width: 100%; }
.station-line-group-chevron { display: inline-grid; place-items: center; width: 24px; height: 24px; color: var(--muted); transition: transform 200ms ease; }
.station-line-group.is-open .station-line-group-chevron { transform: rotate(180deg); }
@media (max-width: 700px) { .station-line-group-head::after { display: none; } .station-line-group-head { box-sizing: border-box; } }
.accessibility-fab-panel .fab-check { display: none; width: auto; margin-right: auto; color: var(--success); }
.accessibility-fab-panel button.is-active::after { display: none; }
.accessibility-fab-panel button.is-active .fab-check { display: inline-block; }
.route-share-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.route-share-actions .primary-button,.route-share-actions .secondary-button { width: 100%; }
@media (max-width:390px) { .route-share-actions .primary-button { grid-column: auto; } }

/* Brand-led loaders replace content-shaped skeletons. */
.page-loader-brand {
  min-height: 236px;
  place-items: center;
  align-content: center;
  gap: 11px;
  padding: 30px 20px;
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-surface);
  background: radial-gradient(circle at 50% 0, var(--accent-soft), transparent 48%), var(--surface);
  box-shadow: var(--shadow-soft);
  text-align: center;
}

.page-loader-inline { min-height: 180px; }
.brand-loader-mark {
  position: relative;
  width: 62px;
  height: 62px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 18px;
  background: linear-gradient(135deg, var(--accent), var(--accent-strong));
  box-shadow: 0 12px 24px color-mix(in srgb, var(--accent-strong) 25%, transparent);
  animation: brand-loader-pulse 1.2s ease-in-out infinite;
}

.brand-loader-mark img { width: 100%; height: 100%; padding: 7px; object-fit: contain; }
.brand-loader-copy { display: grid; gap: 3px; }
.brand-loader-copy strong { font-size: .9rem; }
.brand-loader-copy span { color: var(--muted); font-size: .7rem; }
.brand-loader-track { width: min(156px, 78%); display: grid; grid-template-columns: 10px 1fr 10px 1fr 10px; align-items: center; gap: 5px; }
.brand-loader-track span { width: 10px; height: 10px; border: 2px solid var(--surface-strong); border-radius: 50%; background: var(--accent-strong); box-shadow: 0 0 0 3px var(--accent-soft); }
.brand-loader-track i { height: 2px; overflow: hidden; border-radius: 999px; background: color-mix(in srgb, var(--accent-strong) 28%, var(--surface-border)); }
.brand-loader-track i::after { content: ""; display: block; width: 42%; height: 100%; border-radius: inherit; background: var(--accent-strong); animation: brand-loader-travel 1s ease-in-out infinite; }
.brand-loader-track i:nth-of-type(2)::after { animation-delay: .18s; }
@keyframes brand-loader-pulse { 50% { transform: translateY(-3px) scale(1.03); } }
@keyframes brand-loader-travel { from { transform: translateX(-160%); } to { transform: translateX(320%); } }

/* BRT keeps a distinct purple identity and gets its own legible dark palette. */
[data-transport="bus"] {
  --accent: #7c3aed;
  --accent-strong: #5b21b6;
  --accent-soft: rgba(124, 58, 237, .15);
  --accent-glow: rgba(124, 58, 237, .23);
}

[data-theme="dark"][data-transport="bus"] {
  --bg: #15111e;
  --bg-soft: #20182e;
  --bg-elevated: #1d1729;
  --surface: rgba(29, 23, 41, .98);
  --surface-strong: #251d34;
  --surface-soft: #302542;
  --text: #faf6ff;
  --muted: #d4c9e3;
  --line: rgba(231, 218, 255, .18);
  --line-strong: rgba(231, 218, 255, .32);
  --accent: #c4b5fd;
  --accent-strong: #a78bfa;
  --accent-soft: rgba(196, 181, 253, .19);
  --accent-glow: rgba(167, 139, 250, .26);
}

[data-theme="dark"][data-transport="bus"] .primary-button,
[data-theme="dark"][data-transport="bus"] .nav-item.is-active .nav-icon { color: #241639; }

[data-transport="bus"][data-color-vision="enhanced"] {
  --accent: #b45309;
  --accent-strong: #92400e;
  --accent-soft: rgba(180, 83, 9, .16);
  --accent-glow: rgba(180, 83, 9, .22);
}

[data-theme="dark"][data-transport="bus"][data-color-vision="enhanced"] {
  --accent: #fbbf24;
  --accent-strong: #fcd34d;
  --accent-soft: rgba(251, 191, 36, .2);
  --accent-glow: rgba(251, 191, 36, .25);
}

[data-theme="dark"][data-transport="bus"][data-color-vision="enhanced"] .primary-button,
[data-theme="dark"][data-transport="bus"][data-color-vision="enhanced"] .nav-item.is-active .nav-icon { color: #33240c; }

/* A low, flat mobile dock with a clear active destination. */
@media (max-width: 759px) {
  .app-shell { padding-bottom: calc(74px + env(safe-area-inset-bottom)); }
  .bottom-nav,
  .bottom-nav.is-compact {
    inset: auto 0 0;
    width: 100%;
    max-width: none;
    min-height: 64px;
    padding: 6px 10px calc(6px + env(safe-area-inset-bottom));
    gap: 3px;
    border: 0;
    border-top: 1px solid var(--surface-border);
    border-radius: 17px 17px 0 0;
    background: color-mix(in srgb, var(--surface-strong) 96%, transparent);
    box-shadow: 0 -8px 24px rgba(43, 29, 12, .08);
    backdrop-filter: blur(20px);
  }

  [data-theme="dark"] .bottom-nav,
  [data-theme="dark"] .bottom-nav.is-compact { box-shadow: 0 -8px 24px rgba(0, 0, 0, .2); }

  .nav-item,
  .bottom-nav.is-compact .nav-item {
    min-height: 50px;
    gap: 2px;
    padding: 3px 1px;
    border-radius: 10px;
    color: var(--muted);
  }

  .nav-icon,
  .bottom-nav.is-compact .nav-icon {
    width: 31px;
    height: 28px;
    border-radius: 9px;
    background: transparent;
    font-size: .82rem;
  }

  .nav-item.is-active,
  .bottom-nav.is-compact .nav-item.is-active { color: var(--accent-strong); background: transparent; }
  .nav-item.is-active .nav-icon { color: #fff; background: var(--accent-strong); box-shadow: 0 5px 11px color-mix(in srgb, var(--accent-strong) 26%, transparent); }
  .nav-item span,
  .bottom-nav.is-compact .nav-item span:last-child { font-size: .59rem; font-weight: 600; }
  .bottom-nav.is-compact { min-height: 58px; padding-top: 3px; padding-bottom: calc(3px + env(safe-area-inset-bottom)); }
  .bottom-nav.is-compact .nav-item { min-height: 45px; }
  .bottom-nav.is-compact .nav-icon { width: 28px; height: 25px; }
}

/* Station map providers are destination cards, not generic utility buttons. */
.detail-map-links {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.detail-map-links .detail-map-link {
  --provider-color: var(--accent-strong);
  min-height: 46px;
  width: auto;
  padding: 7px 9px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  border: 1px solid color-mix(in srgb, var(--provider-color) 26%, var(--surface-border));
  border-radius: 11px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--provider-color) 9%, var(--surface-strong)), var(--surface-strong));
  color: var(--text);
  box-shadow: none;
  font-size: .66rem;
  font-weight: 600;
  line-height: 1.55;
}

.detail-map-link i {
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: color-mix(in srgb, var(--provider-color) 15%, var(--surface-strong));
  color: var(--provider-color);
  font-size: .76rem;
}

.detail-map-link span { min-width: 0; }
.detail-map-link.is-balad { --provider-color: #e66f22; }
.detail-map-link.is-neshan { --provider-color: #d34b3f; }
.detail-map-link.is-google { --provider-color: #3179d8; }
.detail-map-link.is-waze { --provider-color: #119ec9; }

@media (hover: hover) {
  .detail-map-links .detail-map-link:hover {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--provider-color) 48%, var(--surface-border));
    box-shadow: 0 9px 18px color-mix(in srgb, var(--provider-color) 15%, transparent);
  }
}

/* Schedules read as a compact service board instead of nested cards. */
.schedule-card {
  gap: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--line-color, var(--accent)) 22%, var(--surface-border));
  border-radius: 12px;
  background: var(--surface);
  box-shadow: none;
}

.schedule-card::before {
  content: "";
  display: block;
  width: 100%;
  height: 3px;
  background: var(--line-color, var(--accent));
}

.schedule-item-top {
  min-height: 67px;
  padding: 10px 11px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid var(--surface-border);
}

.schedule-heading { gap: 3px; }
.schedule-line-chip { min-height: 21px; padding: 0 7px; border: 0; background: transparent; font-size: .64rem; }
.schedule-destination { font-size: .78rem; line-height: 1.5; }
.schedule-next-pill,
.schedule-next-pill.is-live {
  min-width: 86px;
  width: auto;
  padding: 6px 8px;
  gap: 1px;
  border: 0;
  border-right: 2px solid var(--line-color, var(--accent));
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--text);
}
.schedule-next-pill small { font-size: .57rem; }
.schedule-next-pill strong { color: var(--line-color, var(--accent)); font-size: .75rem; }
.schedule-stack { gap: 0; padding: 2px 11px 4px; }
.schedule-block { padding: 8px 0; border: 0; border-radius: 0; background: transparent; }
.schedule-block + .schedule-block { border-top: 1px solid var(--surface-border); }
.schedule-block-head { margin: 0 0 6px; }
.schedule-label { min-height: auto; padding: 0; border: 0; border-radius: 0; background: transparent; color: var(--muted); font-size: .62rem; }
.schedule-times { gap: 0; border: 1px solid var(--surface-border); border-radius: 8px; overflow: hidden; }
.time-pill { min-height: 43px; padding: 6px 8px; gap: 1px; border: 0; border-radius: 0; background: var(--surface-strong); font-size: .67rem; }
.time-pill + .time-pill { border-right: 1px solid var(--surface-border); }
.time-pill small { font-size: .57rem; }
.time-pill strong { font-size: .71rem; }

@media (max-width: 440px) {
  .detail-map-links { grid-template-columns: 1fr; }
  .detail-map-links .detail-map-link { min-height: 40px; font-size: .65rem; }
  .schedule-next-pill,
  .schedule-next-pill.is-live { width: auto; min-width: 79px; }
}

/* More: one icon language for sections and individual controls. */
.more-section-title { display: flex; align-items: flex-start; gap: 9px; min-width: 0; }
.more-section-title > div { min-width: 0; }
.more-section-icon,
.settings-row-icon {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  display: grid;
  place-items: center;
  border: 1px solid var(--surface-border);
  border-radius: 9px;
  color: var(--accent-strong);
  background: var(--accent-soft);
  font-size: .76rem;
}
.more-section-title .section-title { margin: 0; }
.more-settings-card .settings-row {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
}
.settings-row-copy { min-width: 0; }
.settings-row-copy .meta-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.more-section:nth-of-type(3n) .more-section-icon { color: #b45309; background: color-mix(in srgb, #f59e0b 13%, var(--surface-strong)); }
.more-section:nth-of-type(3n + 1) .more-section-icon { color: #16825e; background: color-mix(in srgb, #16a34a 11%, var(--surface-strong)); }

/* Compact facility filters that work together with station search. */
.station-filter-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 8px; }
.station-filter-row .station-filter-button { width: auto; min-height: 36px; margin: 0; padding: 0 6px; font-size: .62rem; }
.station-filter-row .station-filter-button i { font-size: .72rem; }

.destination-alert-button {
  width: 100%;
  min-height: 40px;
  padding: 7px 9px;
  display: grid;
  grid-template-columns: 25px minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
  border: 1px dashed var(--surface-border);
  border-radius: 9px;
  color: var(--muted);
  background: transparent;
  text-align: right;
  font-size: .67rem;
}
.destination-alert-button > i { color: var(--accent-strong); font-size: .84rem; }
.destination-alert-button small { color: var(--muted); font-size: .58rem; white-space: nowrap; }
.destination-alert-button.is-active { border-style: solid; border-color: color-mix(in srgb, var(--success) 46%, var(--surface-border)); color: var(--success); background: color-mix(in srgb, var(--success) 8%, var(--surface-strong)); }
.destination-alert-button.is-active > i { color: var(--success); animation: destination-alert-ring 1.4s ease-in-out infinite; }
@keyframes destination-alert-ring { 50% { transform: rotate(-12deg) scale(1.08); } }

/* Mobile line cards: two balanced, compact cards instead of cramped columns. */
@media (max-width: 600px) {
  .line-selector-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .line-option,
  .line-option.is-active {
    min-height: 88px;
    padding: 9px 9px 8px;
    gap: 3px;
    align-content: start;
    border-radius: 10px;
    background:
      linear-gradient(180deg, color-mix(in srgb, var(--line-color, var(--accent)) 13%, transparent) 0%, transparent 54%),
      linear-gradient(90deg, var(--line-color, var(--accent)) 0 3px, transparent 3px),
      var(--surface-strong);
  }
  .line-option.is-active { border-color: color-mix(in srgb, var(--line-color, var(--accent)) 54%, var(--surface-border)); box-shadow: none; }
  .line-option.is-active::after { display: none; }
  .line-option-badge { min-height: 21px; padding-inline: 6px; font-size: .62rem; }
  .line-option strong { margin-top: 1px; font-size: .74rem; line-height: 1.38; }
  .line-option small { font-size: .61rem; line-height: 1.48; }
}

@media (max-width: 759px) {
  .app-shell { padding-bottom: calc(80px + env(safe-area-inset-bottom)); }
  .bottom-nav,
  .bottom-nav.is-compact { grid-template-columns: repeat(5, minmax(0, 1fr)); min-height: 69px; }
  .nav-item,
  .bottom-nav.is-compact .nav-item { min-height: 54px; gap: 3px; }
  .nav-icon,
  .bottom-nav.is-compact .nav-icon { width: 34px; height: 31px; font-size: .92rem; }
  .nav-item span,
  .bottom-nav.is-compact .nav-item span:last-child { font-size: .65rem; }
  .bottom-nav.is-compact { min-height: 61px; }
  .bottom-nav.is-compact .nav-item { min-height: 48px; }
  .bottom-nav.is-compact .nav-icon { width: 31px; height: 28px; }
}

@media (max-width: 390px) {
  .station-filter-row { grid-template-columns: 1fr; }
  .station-filter-row .station-filter-button { justify-content: flex-start; padding-inline: 10px; }
}

/* Final app-shell utilities. */
html { touch-action: pan-x pan-y; }
.page-loader-brand,
.page-loader-brand.page-loader-inline {
  min-height: 206px;
  width: min(100%, 300px);
  margin-inline: auto;
  place-items: center;
  align-content: center;
}

.view-root.is-loading-view {
  min-height: calc(100dvh - 210px);
  display: grid;
  align-content: center;
}

.route-install-hint {
  display: grid;
  grid-template-columns: 31px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--surface-border);
  border-radius: 10px;
  background: var(--surface);
}
.route-install-hint-icon { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 8px; color: var(--accent-strong); background: var(--accent-soft); font-size: .76rem; }
.route-install-hint > div { display: grid; gap: 2px; min-width: 0; }
.route-install-hint strong { font-size: .7rem; }
.route-install-hint span { color: var(--muted); font-size: .59rem; line-height: 1.65; }
.route-install-hint .small-button { min-height: 31px; padding-inline: 8px; font-size: .61rem; }

.app-footer {
  max-width: 560px;
  margin: 0 auto;
  padding: 16px 18px calc(94px + env(safe-area-inset-bottom));
  color: var(--muted);
  text-align: center;
  font-size: .58rem;
  line-height: 1.9;
}
.app-footer a { color: var(--accent-strong); font-weight: 700; text-decoration: none; }
.app-footer span { display: block; }
.header-route-summary.is-visible { font-weight: 700; }
.header-route-summary.is-visible span { font-weight: 750; }

.install-guide-modal {
  position: fixed;
  inset: 0;
  z-index: 72;
  display: grid;
  place-items: center;
  padding: 18px;
  animation: install-guide-fade-in 260ms ease both;
}
.install-guide-modal-panel {
  position: relative;
  width: min(100%, 390px);
  display: grid;
  gap: 12px;
  padding: 21px 18px 18px;
  border: 1px solid var(--surface-border);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: 0 22px 64px rgba(27, 20, 12, .22);
  transform-origin: 50% 72%;
  animation: install-guide-panel-in 360ms cubic-bezier(.2, .9, .25, 1) both;
}
.install-guide-modal-icon {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  color: var(--accent-strong);
  background: var(--accent-soft);
  font-size: .92rem;
}
.install-guide-modal-panel h2 { margin: 2px 0 0; font-size: .92rem; }
.install-guide-modal-panel > p { margin: 0; color: var(--muted); font-size: .68rem; line-height: 1.8; }
.install-guide-modal-panel .install-guide-steps { gap: 7px; }
.install-guide-modal-panel .install-guide-step { padding: 8px 9px; border-radius: 9px; }
@keyframes install-guide-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes install-guide-panel-in { from { opacity: 0; transform: translateY(20px) scale(.96); } 65% { transform: translateY(-2px) scale(1.008); } to { opacity: 1; transform: translateY(0) scale(1); } }

.hybrid-route-card { display: grid; gap: 12px; padding: 14px; border-color: color-mix(in srgb, #7c3aed 38%, var(--surface-border)); background: linear-gradient(145deg, color-mix(in srgb, #7c3aed 8%, var(--surface)), var(--surface)); }
.smart-route-card { width: min(100%, 980px); margin: 0 auto; }
.smart-route-unavailable { width: min(100%, 600px); margin: 0 auto; display: grid; gap: 9px; text-align: center; }
.smart-route-unavailable .hybrid-beta-badge { justify-self: center; }
.smart-route-card { gap: 15px; padding: 18px; }
.smart-route-card .section-title { font-size: 1.12rem; }
.smart-route-card .section-caption { font-size: .82rem; line-height: 1.85; }
.smart-route-notes { display: flex; flex-wrap: wrap; gap: 7px; }
.smart-route-notes span { display: inline-flex; align-items: center; gap: 5px; min-height: 30px; padding: 0 9px; border: 1px solid color-mix(in srgb, #7c3aed 22%, var(--surface-border)); border-radius: 8px; color: var(--muted); background: var(--surface-strong); font-size: .71rem; }
.smart-route-notes i { color: #7c3aed; }
.smart-beta-callout { display: grid; gap: 7px; padding: 11px 12px; border: 1px solid color-mix(in srgb, #7c3aed 32%, var(--surface-border)); border-radius: 10px; background: linear-gradient(135deg, color-mix(in srgb, #7c3aed 9%, var(--surface-strong)), var(--surface-strong)); }
.smart-beta-callout > div { display: flex; align-items: center; gap: 7px; color: #6934bf; }
.smart-beta-callout p { margin: 0; color: var(--muted); font-size: .76rem; line-height: 1.85; }
.smart-area-picker-grid { display: grid; grid-template-columns: minmax(0, 1fr) 24px minmax(0, 1fr); align-items: end; gap: 8px; }
.smart-area-direction { padding-bottom: 22px; color: #7c3aed; text-align: center; font-size: .76rem; }
.smart-area-picker { display: grid; gap: 6px; min-width: 0; }
.smart-area-picker-label { color: var(--muted); font-size: .72rem; }
.smart-area-picker-actions { display: grid; grid-template-columns: minmax(0, 1fr) 40px; gap: 6px; }
.smart-area-picker-main { min-width: 0; min-height: 59px; padding: 8px 9px; display: grid; grid-template-columns: 28px minmax(0, 1fr) 16px; align-items: center; gap: 7px; border: 1px solid var(--surface-border); border-radius: 10px; color: var(--text); background: var(--surface-strong); text-align: right; transition: border-color 180ms ease, background-color 180ms ease, transform 180ms ease, box-shadow 180ms ease; }
.smart-area-picker-main:hover { border-color: color-mix(in srgb, #7c3aed 48%, var(--surface-border)); background: var(--surface); transform: translateY(-1px); }
.smart-area-picker-icon { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 8px; color: #6934bf; background: color-mix(in srgb, #7c3aed 13%, var(--surface)); }
.smart-area-picker-main > span:nth-child(2) { min-width: 0; display: grid; gap: 2px; }
.smart-area-picker-main strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .82rem; }
.smart-area-picker-main small { color: var(--muted); font-size: .68rem; }
.smart-area-picker-main > i { color: var(--muted); font-size: .65rem; }
.smart-area-picker .route-geo-button { min-height: 59px; border-color: color-mix(in srgb, #7c3aed 26%, var(--surface-border)); color: #6934bf; background: color-mix(in srgb, #7c3aed 7%, var(--surface-strong)); }
.smart-area-picker .route-geo-button i { color: #7c3aed; }
.smart-route-notice { display: flex; align-items: flex-start; gap: 7px; margin: 0; padding: 9px 10px; border: 1px solid color-mix(in srgb, #7c3aed 26%, var(--surface-border)); border-radius: 9px; color: var(--muted); background: var(--surface-strong); font-size: .74rem; line-height: 1.8; }
.smart-route-notice i { margin-top: 3px; color: #6934bf; }
.smart-area-sheet-item { --station-line-color: #7c3aed; }
.smart-route-mixed-note { display: flex; align-items: flex-start; gap: 7px; margin: 0; padding: 9px 10px; border: 1px solid color-mix(in srgb, #7c3aed 30%, var(--surface-border)); border-radius: 9px; color: var(--muted); background: color-mix(in srgb, #7c3aed 7%, var(--surface-strong)); font-size: .74rem; line-height: 1.8; }
.smart-route-mixed-note i { margin-top: 3px; color: #7c3aed; }
.hybrid-route-head { display: flex; align-items: flex-start; gap: 9px; }
.hybrid-route-head .section-title { margin: 0; font-size: .86rem; }
.hybrid-route-head .section-caption { margin: 3px 0 0; font-size: .66rem; }
.hybrid-beta-badge { display: inline-flex; align-items: center; min-height: 24px; padding: 0 8px; border-radius: 7px; color: #6530bd; background: color-mix(in srgb, #7c3aed 14%, var(--surface)); font-size: .61rem; font-weight: 750; }
.hybrid-area-fields { display: grid; grid-template-columns: minmax(0, 1fr) 22px minmax(0, 1fr); align-items: end; gap: 7px; }
.hybrid-area-fields > i { padding-bottom: 10px; color: #7c3aed; text-align: center; font-size: .7rem; }
.hybrid-area-fields label { display: grid; gap: 5px; min-width: 0; color: var(--muted); font-size: .62rem; }
.hybrid-area-fields select { width: 100%; min-height: 38px; padding: 0 8px; border: 1px solid var(--surface-border); border-radius: 8px; outline: none; color: var(--text); background: var(--surface-strong); font: inherit; font-size: .67rem; }
.hybrid-area-fields select:focus { border-color: #7c3aed; box-shadow: 0 0 0 3px color-mix(in srgb, #7c3aed 15%, transparent); }
.hybrid-route-submit { min-height: 38px; border-color: color-mix(in srgb, #7c3aed 45%, var(--surface-border)); color: #6934bf; background: color-mix(in srgb, #7c3aed 8%, var(--surface-strong)); font-size: .68rem; }
.hybrid-disclaimer { display: flex; align-items: flex-start; gap: 6px; margin: 0; color: var(--muted); font-size: .59rem; line-height: 1.7; }
.hybrid-disclaimer i { margin-top: 2px; color: #7c3aed; }
.hybrid-route-result { display: grid; gap: 9px; padding-top: 10px; border-top: 1px solid color-mix(in srgb, #7c3aed 20%, var(--surface-border)); }
.hybrid-route-summary { display: grid; gap: 2px; }
.hybrid-route-summary strong { font-size: .73rem; }
.hybrid-route-summary span { color: var(--muted); font-size: .61rem; }
.hybrid-route-result ol { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }
.hybrid-route-result li { display: grid; grid-template-columns: max-content minmax(0, 1fr) max-content; align-items: center; gap: 7px; min-height: 36px; padding: 7px 8px; border-radius: 8px; background: var(--surface-strong); }
.hybrid-route-result li strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .65rem; }
.hybrid-route-result li small { color: var(--muted); font-size: .56rem; white-space: nowrap; }
.hybrid-mode { display: inline-flex; align-items: center; gap: 4px; min-height: 22px; padding: 0 6px; border-radius: 6px; font-size: .56rem; font-weight: 700; }
.hybrid-mode-metro { color: #19723b; background: color-mix(in srgb, #16a34a 13%, var(--surface)); }
.hybrid-mode-bus { color: #6934bf; background: color-mix(in srgb, #7c3aed 13%, var(--surface)); }
.hybrid-route-empty { margin: 0; padding: 9px; border: 1px dashed var(--surface-border); border-radius: 8px; color: var(--muted); font-size: .62rem; line-height: 1.75; }
[data-theme="dark"] .hybrid-beta-badge, [data-theme="dark"] .hybrid-route-submit, [data-theme="dark"] .hybrid-mode-bus { color: #d7c3ff; }

.smart-route-result { gap: 11px; }
.smart-route-steps { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.smart-route-step { display: grid; grid-template-columns: 28px minmax(0, 1fr) max-content; align-items: center; gap: 8px; min-height: 52px; padding: 8px; border: 1px solid var(--surface-border); border-radius: 9px; background: var(--surface-strong); }
.smart-route-step-number { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 7px; color: #fff; background: #6b3cc1; font-size: .61rem; font-weight: 750; }
.smart-route-step > div { min-width: 0; display: grid; gap: 3px; }
.smart-route-step strong { font-size: .84rem; }
.smart-route-step small { color: var(--muted); font-size: .73rem; line-height: 1.75; }
.smart-route-line-chip,.smart-route-walk { display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-height: 28px; max-width: 170px; padding: 0 8px; border-radius: 7px; color: #6934bf; background: color-mix(in srgb, #7c3aed 11%, var(--surface)); font-size: .68rem; font-weight: 700; text-align: center; line-height: 1.55; }
.smart-route-step-metro .smart-route-step-number { background: #2478d3; }
.smart-route-step-bus .smart-route-step-number { background: #7c3aed; }
.smart-route-transfer { border-style: dashed; background: color-mix(in srgb, #7c3aed 5%, var(--surface-strong)); }
.smart-route-transfer .smart-route-step-number { color: #6934bf; background: color-mix(in srgb, #7c3aed 14%, var(--surface)); }

.route-history-card { gap: 10px; padding: 13px; border-color: var(--surface-border); background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 7%, var(--surface)), var(--surface)); box-shadow: none; }
.route-history-list { display: grid; gap: 7px; }
.route-history-row { display: grid; grid-template-columns: minmax(0, 1fr) 36px; align-items: stretch; gap: 7px; }
.route-history-item { min-height: 56px; padding: 9px 11px; gap: 4px; border-radius: 10px; border-color: var(--surface-border); background: var(--surface-strong); box-shadow: none; transition: border-color 180ms ease, transform 180ms ease, background-color 180ms ease; }
.route-history-item:hover { border-color: var(--line-strong); background: var(--surface); }
.route-history-top { gap: 7px; font-size: .75rem; }
.route-history-top i { font-size: .65rem; }
.route-history-meta { font-size: .61rem; line-height: 1.55; }
.route-history-remove { position: static; width: 36px; height: auto; min-height: 36px; margin: 0; padding: 0; display: grid; place-items: center; align-self: stretch; border: 1px solid var(--surface-border); border-radius: 10px; color: var(--muted); background: var(--surface-strong); line-height: 1; transition: color 180ms ease, border-color 180ms ease, background-color 180ms ease, transform 180ms ease; }
.route-history-remove i { display: block; line-height: 1; font-size: .78rem; }
.route-history-remove:hover { border-color: color-mix(in srgb, #d44 42%, var(--surface-border)); color: #c73d3d; background: color-mix(in srgb, #d44 7%, var(--surface)); }
.route-history-list > :nth-child(2),.route-history-list > :nth-child(4) { top: auto; }

@media (max-width: 430px) {
  .hybrid-area-fields { grid-template-columns: 1fr; }
  .hybrid-area-fields > i { display: none; }
  .hybrid-route-result li { grid-template-columns: max-content minmax(0, 1fr); }
  .hybrid-route-result li small { grid-column: 2; }
}

@media (max-width: 700px) {
  .places-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .detail-ribbon:has(.detail-map-links) { display: block; padding: 0; border: 0; background: transparent; }
  .detail-ribbon-text { display: none; }
  .detail-map-links { width: 100%; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .detail-map-links .detail-map-link { min-width: 0; min-height: 46px; padding: 7px 8px; justify-content: flex-start; gap: 6px; border-radius: 10px; font-size: .64rem; line-height: 1.5; white-space: normal; }
  .detail-map-link i { width: 24px; height: 24px; flex-basis: 24px; border-radius: 7px; }
  .detail-map-link span { overflow-wrap: anywhere; }
  .smart-route-step { grid-template-columns: 26px minmax(0, 1fr); align-items: start; }
  .smart-route-line-chip,.smart-route-walk { grid-column: 2; justify-self: start; max-width: none; }
  .smart-area-picker-grid { grid-template-columns: 1fr; }
  .smart-area-direction { display: none; }
  .smart-route-card { padding: 14px; }
}

@media (max-width: 340px) {
  .places-grid { grid-template-columns: 1fr; }
}

/* Keep the footer at the viewport edge on sparse pages without affecting long content. */
.app-shell {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  padding-bottom: 0;
}
.page-frame { flex: 1 0 auto; }
.app-footer { margin-top: auto; }

@media (max-width: 759px) {
  .stations-search-card .search-box.search-box-rich { display: none; }

  .topbar {
    top: 0;
    margin-top: 0;
    padding-top: 14px;
  }
  .app-footer { padding: 14px 16px calc(86px + env(safe-area-inset-bottom)); font-size: .55rem; }
  .route-install-hint { grid-template-columns: 30px minmax(0, 1fr); }
  .route-install-hint .small-button { grid-column: 2; width: fit-content; }
}

/* Installed PWAs reserve the display cutout above the application header. */
@media (max-width: 759px) and (display-mode: standalone) {
  .topbar {
    top: env(safe-area-inset-top);
    margin-top: env(safe-area-inset-top);
  }
}

/* Desktop header: fixed three-part layout prevents secondary control rows. */
@media (min-width: 760px) {
  .topbar {
    direction: ltr;
    grid-template-areas: "controls navigation brand";
    grid-template-columns: max-content minmax(0, 1fr) max-content;
    align-items: center;
  }
  .topbar-main { grid-area: brand; direction: rtl; }
  .header-nav { grid-area: navigation; direction: rtl; }
  .topbar-left { grid-area: controls; order: initial; direction: rtl; justify-self: start; }
  .header-route-summary { display: none; grid-column: 1 / -1; grid-row: 2; }
  .header-route-summary.is-visible { display: flex; }
}

/* Desktop navigation uses individual controls instead of a single pill container. */
@media (min-width: 760px) {
  .header-nav { display: flex; align-items: center; justify-content: center; gap: 5px; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; overflow: visible; }
  .header-nav-item { min-height: 40px; padding: 0 11px; border: 1px solid transparent; border-radius: 9px; color: var(--muted); background: transparent; font-size: .74rem; font-weight: 650; }
  .header-nav-item i { width: 16px; color: color-mix(in srgb, var(--muted) 80%, var(--text)); font-size: .74rem; }
  .header-nav-item:hover:not(.is-active) { border-color: var(--surface-border); color: var(--text); background: var(--surface-strong); transform: translateY(-1px); }
  .header-nav-item.is-active { border-color: var(--accent-strong); color: #fff; background: var(--accent-strong); box-shadow: 0 7px 15px color-mix(in srgb, var(--accent-strong) 22%, transparent); }
  .header-nav-item.is-active i { color: #fff; }
}

.accessibility-fab-trigger { transition: background-color 200ms ease, color 200ms ease, box-shadow 200ms ease, border-color 200ms ease; }
.accessibility-fab.is-open .accessibility-fab-trigger { transform: none; color: var(--accent-strong); border-color: color-mix(in srgb, var(--accent-strong) 50%, var(--surface-border)); background: var(--surface-strong); box-shadow: 0 7px 18px color-mix(in srgb, var(--accent-strong) 20%, transparent); }

/* Final interaction and release polish. */
.accessibility-fab.is-open .accessibility-fab-trigger { transform: none !important; translate: none; }
.view-root.page-enter > * { animation-duration: 320ms; }

.route-install-hint {
  position: relative;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  gap: 10px;
  overflow: hidden;
  padding: 12px;
  border-color: color-mix(in srgb, var(--accent-strong) 26%, var(--surface-border));
  border-radius: 12px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent-soft) 78%, var(--surface)), var(--surface));
}
.route-install-hint::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--accent-strong); }
.route-install-hint-icon { width: 38px; height: 38px; border-radius: 11px; color: #fff; background: var(--accent-strong); box-shadow: 0 7px 15px color-mix(in srgb, var(--accent-strong) 22%, transparent); }
.route-install-hint-icon i { color: #fff; font-size: 1.08rem; }
.route-install-hint-copy { display: grid; gap: 3px; min-width: 0; }
.route-install-hint-copy > span { color: var(--accent-strong); font-size: .63rem; font-weight: 750; }
.route-install-hint-copy strong { color: var(--text); font-size: .73rem; line-height: 1.75; }
.route-install-hint .small-button { min-height: 34px; padding-inline: 10px; border-color: color-mix(in srgb, var(--accent-strong) 32%, var(--surface-border)); color: var(--accent-strong); background: var(--surface-strong); font-size: .64rem; white-space: nowrap; }

.smart-route-result {
  gap: 12px;
  padding: 13px;
  border: 1px solid color-mix(in srgb, #7c3aed 30%, var(--surface-border));
  border-radius: 13px;
  background: linear-gradient(145deg, color-mix(in srgb, #7c3aed 7%, var(--surface)), var(--surface));
}
.smart-route-overview { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; }
.smart-route-overview > div:first-child { min-width: 0; display: grid; gap: 5px; }
.smart-route-kicker { display: inline-flex; align-items: center; gap: 5px; width: fit-content; color: #6934bf; font-size: .68rem; font-weight: 750; }
.smart-route-overview strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); font-size: .92rem; line-height: 1.6; }
.smart-route-metrics { display: grid; grid-template-columns: repeat(3, minmax(58px, 1fr)); gap: 5px; }
.smart-route-metrics span { min-height: 53px; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: 1fr 1fr; align-items: center; column-gap: 4px; padding: 7px 6px; border: 1px solid color-mix(in srgb, #7c3aed 18%, var(--surface-border)); border-radius: 9px; color: #6934bf; background: var(--surface-strong); }
.smart-route-metrics i { grid-row: 1 / -1; font-size: .72rem; }
.smart-route-metrics b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); font-size: .72rem; line-height: 1; }
.smart-route-metrics small { color: var(--muted); font-size: .54rem; line-height: 1; }
.smart-route-result .smart-route-steps { gap: 9px; }
.smart-route-result .smart-route-step { position: relative; grid-template-columns: 30px minmax(0, 1fr) max-content; min-height: 58px; gap: 9px; padding: 9px; border-color: var(--surface-border); border-radius: 10px; box-shadow: none; }
.smart-route-result .smart-route-step-number { width: 27px; height: 27px; border-radius: 8px; font-size: .66rem; }
.smart-route-result .smart-route-step strong { font-size: .8rem; line-height: 1.55; }
.smart-route-result .smart-route-step small { font-size: .66rem; line-height: 1.75; white-space: normal; }
.smart-route-result .smart-route-line-chip,
.smart-route-result .smart-route-walk { min-height: 29px; max-width: 154px; padding-inline: 8px; border: 1px solid color-mix(in srgb, #7c3aed 18%, transparent); border-radius: 8px; font-size: .61rem; }
.smart-route-result .smart-route-step-metro .smart-route-line-chip { color: #1f68ba; background: color-mix(in srgb, #2879e0 11%, var(--surface)); }
.smart-route-result .smart-route-step-bus .smart-route-line-chip { color: #6934bf; background: color-mix(in srgb, #7c3aed 11%, var(--surface)); }
.smart-route-result .smart-route-transfer { border-style: solid; background: color-mix(in srgb, #7c3aed 5%, var(--surface-strong)); }
[data-theme="dark"] .smart-route-kicker,
[data-theme="dark"] .smart-route-metrics span,
[data-theme="dark"] .smart-route-result .smart-route-step-bus .smart-route-line-chip { color: #ddcbff; }
[data-theme="dark"] .smart-route-result .smart-route-step-metro .smart-route-line-chip { color: #9dccff; }

.release-notes-modal { z-index: 84; }
.release-notes-panel { position: relative; width: min(100%, 410px); display: grid; gap: 11px; padding: 21px; border: 1px solid color-mix(in srgb, var(--accent-strong) 28%, var(--surface-border)); border-radius: 16px; background: radial-gradient(circle at 84% 0, var(--accent-soft), transparent 41%), var(--surface); box-shadow: 0 24px 64px rgba(27, 20, 12, .26); animation: install-guide-panel-in 360ms cubic-bezier(.2, .9, .25, 1) both; }
.release-notes-icon { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; color: #fff; background: var(--accent-strong); box-shadow: 0 9px 18px color-mix(in srgb, var(--accent-strong) 24%, transparent); }
.release-notes-panel h2 { margin: 0; font-size: 1rem; }
.release-notes-panel ul { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }
.release-notes-panel li { position: relative; padding-right: 15px; color: var(--muted); font-size: .72rem; line-height: 1.75; }
.release-notes-panel li::before { content: ""; position: absolute; top: .7em; right: 1px; width: 6px; height: 6px; border-radius: 50%; background: var(--accent-strong); }
.release-notes-panel .primary-button { min-height: 42px; margin-top: 2px; font-size: .75rem; }

/* Circular brand loader and unified bitmap app icon. */
.brand-loader-orbit { position: relative; width: 72px; height: 72px; display: grid; place-items: center; }
.brand-loader-orbit::before { content: ""; position: absolute; inset: -5px; border: 3px solid color-mix(in srgb, var(--accent-strong) 18%, var(--surface-border)); border-top-color: var(--accent-strong); border-right-color: var(--accent); border-radius: 50%; animation: brand-loader-orbit 850ms linear infinite; }
.brand-loader-orbit::after { content: ""; position: absolute; inset: -10px; border: 1px dashed color-mix(in srgb, var(--accent-strong) 30%, transparent); border-radius: 50%; animation: brand-loader-orbit 3.4s linear infinite reverse; }
.brand-loader-orbit img { position: relative; z-index: 1; width: 62px; height: 62px; border-radius: 50%; object-fit: cover; box-shadow: 0 9px 20px color-mix(in srgb, var(--accent-strong) 20%, transparent); }
@keyframes brand-loader-orbit { to { transform: rotate(360deg); } }

.release-notes-head { display: flex; align-items: center; gap: 10px; min-width: 0; }
.release-notes-head .release-notes-icon { flex: 0 0 auto; overflow: hidden; padding: 0; color: #fff; background: var(--accent-strong); }
.release-notes-head .release-notes-icon i { display: block; color: #fff !important; font-size: 1rem; line-height: 1; }
.release-notes-head h2 { min-width: 0; margin: 0; font-size: .98rem; }

/* The control owns a fixed 46px anchor; the expanding panel is detached from its layout. */
.accessibility-fab { display: block; width: 46px; height: 46px; }
.accessibility-fab-trigger { position: absolute; right: 0; bottom: 0; }
.accessibility-fab-panel { position: absolute; right: 0; bottom: 54px; }
.accessibility-fab.is-open .accessibility-fab-trigger { right: 0; bottom: 0; transform: none !important; translate: none; }

.more-disclaimer { display: flex; align-items: flex-start; gap: 7px; margin: 11px 0 0; padding: 9px 10px; border: 1px solid color-mix(in srgb, var(--accent-strong) 18%, var(--surface-border)); border-radius: 9px; color: var(--muted); background: var(--surface-soft); font-size: .69rem; line-height: 1.8; }
.more-disclaimer i { margin-top: 3px; color: var(--accent-strong); }
.official-contact-list { display: grid; gap: 7px; }
.official-contact-list a { display: grid; grid-template-columns: 30px minmax(0, 1fr); align-items: center; gap: 8px; min-height: 50px; padding: 9px; border: 1px solid var(--surface-border); border-radius: var(--radius-control); color: inherit; background: var(--surface-strong); text-decoration: none; transition: border-color 180ms ease, background-color 180ms ease, transform 180ms ease; }
.official-contact-list a:hover { border-color: var(--accent-strong); background: var(--surface); transform: translateY(-1px); }
.official-contact-list > a > i { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 8px; color: var(--accent-strong); background: var(--accent-soft); font-size: .72rem; }
.official-contact-list span { min-width: 0; display: grid; gap: 2px; }
.official-contact-list strong { font-size: .72rem; }
.official-contact-list small { color: var(--muted); font-size: .64rem; direction: ltr; text-align: right; }

@media (max-width: 700px) {
  .route-install-hint { grid-template-columns: 38px minmax(0, 1fr); }
  .route-install-hint .small-button { grid-column: 2; justify-self: start; }
  .smart-route-overview { grid-template-columns: 1fr; }
  .smart-route-metrics { width: 100%; }
  .smart-route-result .smart-route-step { grid-template-columns: 28px minmax(0, 1fr); }
  .smart-route-result .smart-route-line-chip,
  .smart-route-result .smart-route-walk { grid-column: 2; justify-self: start; max-width: 100%; }
}

@media (prefers-reduced-motion: no-preference) {
  .topbar { transition: padding 260ms ease, background-color 260ms ease, border-color 260ms ease; }
  .header-nav, .active-city-label, .icon-button, .route-picker, .route-geo-button, .line-option, .station-card, .station-directory-item, .settings-row, .detail-map-link {
    transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease, background-color 200ms ease, color 180ms ease;
  }
  .header-nav-item { transition: transform 180ms ease, background-color 220ms ease, color 200ms ease, box-shadow 220ms ease; }
  .header-nav-item:hover, .active-city-label:hover, .icon-button:hover, .detail-map-link:hover { transform: translateY(-2px); }
  .line-option:hover, .station-card:hover, .station-directory-item:hover, .settings-row:hover { transform: translateY(-2px); }
  .route-picker:hover, .route-geo-button:hover { transform: translateY(-1px); }
}

/* Route station picker: complete, line-aware and compact on small screens. */
.sheet-line-filter-row { display: flex; gap: 7px; overflow-x: auto; padding: 1px 1px 3px; scrollbar-width: none; }
.sheet-line-filter-row::-webkit-scrollbar { display: none; }
.sheet-line-filter-button { min-height: 32px; display: inline-flex; flex: 0 0 auto; align-items: center; gap: 5px; padding: 0 10px; border: 1px solid var(--surface-border); border-radius: 9px; color: var(--muted); background: var(--surface-strong); font-size: .68rem; font-weight: 600; transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease, transform 180ms ease; }
.sheet-line-filter-button span { width: 7px; height: 7px; border-radius: 50%; background: var(--sheet-line-color, var(--accent-strong)); }
.sheet-line-filter-button.is-active { color: var(--text); border-color: color-mix(in srgb, var(--sheet-line-color, var(--accent-strong)) 52%, var(--surface-border)); background: color-mix(in srgb, var(--sheet-line-color, var(--accent-strong)) 13%, var(--surface-strong)); }
.sheet-line-filter-button.is-active:first-child { color: var(--accent-strong); border-color: color-mix(in srgb, var(--accent-strong) 48%, var(--surface-border)); background: var(--accent-soft); }
.sheet-line-filter-button:hover { transform: translateY(-1px); }

/* The filter rail must remain above the independently scrolling station results. */
.sheet-panel { grid-template-rows: auto auto auto auto minmax(0, 1fr); }
.sheet-line-filter-row { position: relative; z-index: 3; flex: 0 0 auto; isolation: isolate; }
.sheet-list { position: relative; z-index: 1; }
.sheet-item-interchange-icon { width: 17px; display: inline-grid; place-items: center; color: var(--station-line-color, var(--accent-strong)); font-size: .76rem; }

/* Route availability is communicated beside the wait estimate without obscuring it. */
.route-wait-row { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
.route-service-warning { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 6px 9px; border: 1px solid #dc4c43; border-radius: 8px; color: #a72d28; background: color-mix(in srgb, #dc4c43 10%, var(--surface-strong)); font-size: .7rem; font-weight: 750; line-height: 1.55; }
.route-service-warning i { color: #dc4c43; }
[data-theme="dark"] .route-service-warning { color: #ffd3cf; border-color: #ff7b72; background: rgba(220, 76, 67, .2); }

/* Route actions acknowledge successful copying in a compact, in-card notification. */
.route-share-nut { display: flex; align-items: center; justify-content: center; gap: 7px; min-height: 34px; padding: 7px 10px; border: 1px solid color-mix(in srgb, var(--success) 34%, var(--surface-border)); border-radius: 9px; color: var(--success); background: color-mix(in srgb, var(--success) 9%, var(--surface-strong)); font-size: .72rem; font-weight: 700; animation: route-share-nut-in 220ms ease both; }
.route-share-nut i { font-size: .8rem; }
.route-share-nut.is-hidden { display: none; }
.route-share-nut-error { color: #a72d28; border-color: rgba(220, 76, 67, .42); background: color-mix(in srgb, #dc4c43 10%, var(--surface-strong)); }
@keyframes route-share-nut-in { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }

/* Keep the info affordance visible among the dense station timeline. */
.journey-station-info { color: #fff; border-color: var(--accent-strong); background: var(--accent-strong); box-shadow: 0 5px 12px color-mix(in srgb, var(--accent-strong) 24%, transparent); }
.journey-station-info:hover { color: #fff; border-color: var(--accent); background: var(--accent); }

.contact-placeholder a { color: var(--text); text-decoration-color: color-mix(in srgb, var(--text) 34%, transparent); }
[data-theme="dark"] .contact-placeholder a { color: #fff; }

/* Use non-red/green-only signals and brighter borders in the color-vision mode. */
[data-color-vision="enhanced"] { --accent: #0072b2; --accent-strong: #005f93; --accent-soft: rgba(0, 114, 178, .16); --accent-glow: rgba(0, 114, 178, .26); --success: #007f67; --muted: #485b68; --line: rgba(0, 86, 132, .3); --line-strong: rgba(0, 86, 132, .5); }
[data-theme="dark"][data-color-vision="enhanced"] { --text: #fff; --muted: #e0ebf1; --line: rgba(183, 223, 245, .36); --line-strong: rgba(183, 223, 245, .58); --accent: #56b4e9; --accent-strong: #9adcfb; --accent-soft: rgba(86, 180, 233, .2); --accent-glow: rgba(86, 180, 233, .3); --success: #75d7bf; }
[data-transport="bus"][data-color-vision="enhanced"] { --accent: #d97706; --accent-strong: #a85200; --accent-soft: rgba(217, 119, 6, .16); --accent-glow: rgba(217, 119, 6, .25); --success: #007f67; }
[data-theme="dark"][data-transport="bus"][data-color-vision="enhanced"] { --accent: #f6c453; --accent-strong: #ffe08a; --accent-soft: rgba(246, 196, 83, .2); --accent-glow: rgba(246, 196, 83, .3); --success: #75d7bf; }

/* Slightly larger default type preserves readability without invoking accessibility mode. */
.section-caption, .meta-text { font-size: .84rem; }
.route-picker-label, .journey-station-content small, .sheet-line-filter-button { font-size: .72rem; }

.detail-station-save-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.detail-station-save-actions .small-button { min-height: 34px; padding-inline: 9px; color: var(--muted); border-color: var(--surface-border); background: var(--surface-strong); font-size: .67rem; }
.detail-station-save-actions .small-button.is-active { color: var(--accent-strong); border-color: color-mix(in srgb, var(--accent-strong) 42%, var(--surface-border)); background: var(--accent-soft); }

/* Boarding starts one timer chain; resuming the app yields only the latest useful alert. */
.journey-boarded-button { width: 100%; min-height: 42px; display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: center; gap: 7px; padding: 8px 10px; border: 1px solid color-mix(in srgb, var(--accent-strong) 32%, var(--surface-border)); border-radius: 9px; color: var(--accent-strong); background: color-mix(in srgb, var(--accent-soft) 48%, var(--surface-strong)); text-align: right; font-size: .74rem; font-weight: 750; }
.journey-boarded-button > i { font-size: .86rem; }
.journey-boarded-button small { color: var(--muted); font-size: .61rem; font-weight: 600; white-space: nowrap; }
.journey-boarded-button.is-active { color: var(--success); border-color: color-mix(in srgb, var(--success) 48%, var(--surface-border)); background: color-mix(in srgb, var(--success) 9%, var(--surface-strong)); }
.journey-boarded-button.is-active > i { color: var(--success); animation: destination-alert-ring 1.4s ease-in-out infinite; }
.journey-nutbar { position: fixed; right: 50%; bottom: calc(86px + env(safe-area-inset-bottom)); z-index: 58; width: min(calc(100% - 28px), 440px); display: flex; align-items: center; gap: 8px; padding: 10px 12px; border: 1px solid color-mix(in srgb, var(--success) 40%, var(--surface-border)); border-radius: 11px; color: var(--text); background: color-mix(in srgb, var(--surface-strong) 92%, var(--success)); box-shadow: 0 15px 34px rgba(0,0,0,.18); transform: translateX(50%); font-size: .74rem; font-weight: 700; line-height: 1.65; animation: journey-nutbar-in 240ms ease both; }
.journey-nutbar i { color: var(--success); }
.journey-nutbar.is-hidden { display: none; }
@keyframes journey-nutbar-in { from { opacity: 0; transform: translate(50%, 10px); } to { opacity: 1; transform: translateX(50%); } }

@media (max-width: 700px) {
  .route-wait-row { align-items: stretch; }
  .route-wait-note, .route-service-warning { width: 100%; }
}

/* Lean route overview with clear endpoints instead of the legacy route strip. */
.route-overview { gap: 10px; padding: 14px; border-color: color-mix(in srgb, var(--accent-strong) 18%, var(--surface-border)); background: linear-gradient(145deg, color-mix(in srgb, var(--accent-soft) 48%, transparent), transparent 48%), var(--surface); }
.route-overview .route-brief { min-height: 34px; padding-inline: 10px; border: 0; background: transparent; color: var(--text); font-size: .73rem; }
.route-overview .route-brief i { color: var(--accent-strong); }
.route-overview .route-summary { gap: 7px; }
.route-overview .summary-box { min-height: 53px; padding: 7px; border-color: var(--surface-border); background: var(--surface-strong); }
.route-overview .summary-label { font-size: .64rem; }
.route-overview .summary-value { font-size: .82rem; }
.route-wait-note { max-width: 100%; padding: 7px 9px; border: 1px solid color-mix(in srgb, var(--accent-strong) 14%, var(--surface-border)); color: var(--muted); background: color-mix(in srgb, var(--accent-soft) 45%, var(--surface-strong)); font-size: .68rem; line-height: 1.65; }

.journey-transfer { min-height: 44px; padding: 9px 12px 9px 42px; border: 1px solid color-mix(in srgb, var(--accent-strong) 38%, var(--surface-border)); border-inline-start: 3px solid var(--accent-strong); border-radius: 10px; color: var(--text); background: color-mix(in srgb, var(--accent-soft) 48%, var(--surface-strong)); font-size: .78rem; font-weight: 700; line-height: 1.75; }
.journey-transfer i { color: var(--accent-strong); font-size: .82rem; }

.detail-map-links-standalone { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.detail-map-links-standalone .detail-map-link { min-width: 0; min-height: 42px; justify-content: flex-start; white-space: normal; }

/* Keep the modal mounted long enough for both entry and exit motion. */
.station-quick-modal { opacity: 1; visibility: visible; transition: opacity 220ms ease, visibility 0s linear; }
.station-quick-modal.is-hidden { display: grid !important; visibility: hidden; opacity: 0; pointer-events: none; transition: opacity 180ms ease, visibility 0s linear 180ms; }
.station-quick-modal .station-quick-backdrop { opacity: 1; transition: opacity 220ms ease; }
.station-quick-modal .station-quick-panel { transform: translateY(0) scale(1); opacity: 1; transition: transform 280ms cubic-bezier(.2, .85, .25, 1), opacity 180ms ease; }
.station-quick-modal.is-hidden .station-quick-backdrop { opacity: 0; }
.station-quick-modal.is-hidden .station-quick-panel { transform: translateY(14px) scale(.975); opacity: 0; }

@media (max-width: 700px) {
  .sheet-line-filter-row { margin-inline: -1px; }
  .detail-map-links-standalone .detail-map-link { padding-inline: 8px; font-size: .66rem; }
}

/* Final 2.1.0 spacing and saved-station management polish. */
.sheet-item { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name line"; min-height: 52px; }
.sheet-item strong { grid-area: name; align-self: center; }
.sheet-item-line { grid-area: line; align-self: center; display: inline-flex; align-items: center; justify-self: end; gap: 5px; color: var(--muted); font-size: .67rem; white-space: nowrap; }
.sheet-item-line .line-dot { width: 8px; height: 8px; background: var(--station-line-color); }
.sheet-item-line .sheet-item-interchange-icon { color: var(--station-line-color); }

.sheet-saved-stations { display: grid; gap: 7px; padding: 2px 0 7px; border-bottom: 1px solid var(--surface-border); }
.sheet-saved-stations-head { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: .68rem; font-weight: 750; }
.sheet-saved-stations-head i { color: var(--accent-strong); }
.sheet-saved-stations-list { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
.sheet-saved-stations-list::-webkit-scrollbar { display: none; }
.sheet-saved-station { min-width: 124px; display: grid; grid-template-columns: 24px minmax(0, 1fr); align-items: center; gap: 6px; padding: 7px; border: 1px solid var(--surface-border); border-radius: 9px; color: var(--text); background: var(--surface-strong); text-align: right; transition: transform 180ms ease, border-color 180ms ease, background 180ms ease; }
.sheet-saved-station:not(:disabled):hover { transform: translateY(-1px); border-color: color-mix(in srgb, var(--accent-strong) 38%, var(--surface-border)); }
.sheet-saved-station > i { color: var(--accent-strong); }
.sheet-saved-station > span { min-width: 0; display: grid; gap: 1px; }
.sheet-saved-station small { color: var(--muted); font-size: .58rem; }
.sheet-saved-station strong { overflow: hidden; font-size: .67rem; text-overflow: ellipsis; white-space: nowrap; }
.sheet-saved-station:disabled { cursor: not-allowed; opacity: .5; filter: grayscale(.2); }

.detail-actions-grid { margin-top: 14px; padding-top: 13px; border-top: 1px solid var(--surface-border); }

.station-line-search-box { margin-top: 13px; }
.line-track.line-track-rich { margin-left: 0; padding-left: 0; }

.journey-transfer {
  display: grid;
  grid-template-columns: 31px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  min-height: 52px;
  margin: 7px 0 11px;
  padding: 5px 3px;
  border: 0;
  border-radius: 0;
  color: var(--text);
  background: transparent;
  font-size: .76rem;
  font-weight: 750;
  line-height: 1.7;
}
.journey-transfer i {
  width: 31px;
  height: 31px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--accent-strong);
  background: transparent;
  font-size: .72rem;
}

.journey-boarded-button {
  grid-template-columns: 38px minmax(0, 1fr) 16px;
  min-height: 54px;
  margin-top: 13px;
  padding: 8px 9px;
  border-radius: var(--radius-control);
  color: var(--text);
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent-soft) 72%, var(--surface-strong)), var(--surface-strong));
  box-shadow: 0 8px 20px color-mix(in srgb, var(--accent-strong) 10%, transparent);
  font-size: .78rem;
}
.journey-boarded-icon {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  color: #fff;
  background: var(--accent-strong);
}
.journey-boarded-icon i { font-size: .82rem; }
.journey-boarded-button strong { min-width: 0; font-weight: 800; }
.journey-boarded-chevron { color: var(--accent-strong); font-size: .67rem; }
.journey-boarded-button.is-active { color: var(--text); }
.journey-boarded-button.is-active .journey-boarded-icon { background: var(--success); animation-name: destination-alert-ring; animation-duration: 1.4s; animation-timing-function: ease-in-out; animation-iteration-count: 5; }
.journey-boarded-button.is-active .journey-boarded-chevron { color: var(--success); }

.saved-stations-manager-card { display: grid; gap: 12px; }
.saved-station-manager-list { display: grid; gap: 7px; }
.saved-station-manager-row {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  min-height: 48px;
  padding: 7px 8px;
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-control);
  background: var(--surface-strong);
}
.saved-station-manager-row > div:nth-child(2) { min-width: 0; display: grid; gap: 1px; }
.saved-station-manager-row strong { overflow: hidden; color: var(--text); font-size: .73rem; text-overflow: ellipsis; white-space: nowrap; }
.saved-station-manager-row small, .saved-station-manager-empty { margin: 0; color: var(--muted); font-size: .65rem; line-height: 1.55; }
.saved-station-manager-icon { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 8px; color: var(--accent-strong); background: var(--accent-soft); }
.saved-station-manager-row.is-favorite .saved-station-manager-icon { color: #9a5a00; background: #fff0cc; }
.saved-station-manager-actions { display: inline-flex; align-items: center; gap: 5px; }
.saved-station-manager-row .small-button { min-height: 30px; padding-inline: 8px; font-size: .65rem; }
.saved-station-manager-row .icon-button { width: 30px; height: 30px; min-height: 30px; display: grid; place-items: center; padding: 0; border-color: var(--surface-border); color: var(--muted); background: var(--surface); }
.saved-station-manager-row .icon-button i { margin: 0; }

@media (max-width: 700px) {
  .view-root { gap: 28px; }
  .station-detail-layout { gap: 28px; }
  .journey-card + .route-share-card { margin-top: 4px; }
  .station-line-group.is-open .station-line-search-box { margin: 11px 10px 10px; }
  .route-overview .route-summary { gap: 5px; }
  .route-overview .summary-box { min-height: 44px; padding: 5px 4px; }
  .route-overview .summary-label { font-size: .57rem; line-height: 1.35; }
  .route-overview .summary-value { margin-top: 1px; font-size: .71rem; line-height: 1.35; }
}

/* Timeline rails overlap slightly to avoid broken vertical segments on compact screens. */
.journey-station-rail::before { bottom: -8px; }
.journey-station:last-child .journey-station-rail::before { bottom: 23px; }

/* Transfers separate route legs with one restrained divider only. */
.journey-transfer { border: 0; border-top: 1px solid var(--accent-strong); background: transparent; }

/* Line-directory controls need equal visual weight and breathing room. */
.line-station-item { margin-block: 10px; }
.line-station-arrow { display: grid; width: 24px; height: 24px; place-items: center; align-self: center; line-height: 1; }
.line-station-arrow i { display: block; line-height: 1; }

/* Keep the picker mounted so both entry and exit motion remain perceptible. */
.sheet { display: block; opacity: 1; visibility: visible; pointer-events: auto; transition: opacity 220ms ease, visibility 0s linear; }
.sheet .sheet-backdrop { opacity: 1; transition: opacity 220ms ease; }
.sheet-panel { transform: translateY(0); opacity: 1; transition: transform 320ms cubic-bezier(.2, .85, .25, 1), opacity 220ms ease; will-change: transform, opacity; }
.sheet.is-hidden { display: block !important; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 180ms ease, visibility 0s linear 180ms; }
.sheet.is-hidden .sheet-backdrop { opacity: 0; }
.sheet.is-hidden .sheet-panel { transform: translateY(28px); opacity: 0; }

.route-empty { display: grid; justify-items: center; gap: 10px; min-height: 156px; padding: 18px 16px; border-color: color-mix(in srgb, var(--accent-strong) 20%, var(--surface-border)); background: linear-gradient(145deg, color-mix(in srgb, var(--accent-soft) 42%, transparent), transparent 60%), var(--surface); }
.route-empty-mark { width: 43px; height: 43px; display: grid; place-items: center; border-radius: 13px; color: #fff; background: var(--accent-strong); box-shadow: 0 9px 20px color-mix(in srgb, var(--accent-strong) 22%, transparent); }
.route-empty-mark i { font-size: 1rem; }
.route-empty-copy { display: grid; gap: 4px; text-align: center; }
.route-empty-copy h2 { margin: 0; color: var(--text); font-size: .89rem; }
.route-empty-copy p { max-width: 310px; margin: 0; color: var(--muted); font-size: .72rem; line-height: 1.8; }
.route-empty.is-ready .route-empty-mark { background: var(--success); }
.route-empty.is-warning .route-empty-mark { background: #c84a3f; }

/* Lift the station sheet above virtual keyboards while preserving an internal result scroller. */
:root { --sheet-keyboard-offset: 0px; --sheet-visible-height: 100dvh; }
.sheet-panel { height: min(82vh, 620px); }
@media (max-width: 700px) {
  .sheet-panel {
    bottom: var(--sheet-keyboard-offset);
    height: min(82vh, calc(var(--sheet-visible-height) - env(safe-area-inset-top) - 12px));
    max-height: none;
  }
  .sheet-list { scroll-padding-block: 12px; }
}