/* Clear: companion screens for the white, blue and navy home interface. */
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 3px solid #93b4f3;
  outline-offset: 3px;
}

button:disabled { cursor: default; }
.icon-button { color: var(--muted); }
.icon-button:hover { color: var(--green); background: #f2f5fa; }
.primary-button {
  min-height: 50px;
  height: auto;
  padding: 13px 16px;
  border-radius: 11px;
  background: var(--green);
  color: #fff;
  box-shadow: none;
  font-weight: 600;
}
.primary-button:hover:not(:disabled) { background: var(--green-dark); }
.primary-button:disabled { opacity: .5; }
.secondary-button {
  min-height: 44px;
  padding: 10px 14px;
  color: #405770;
  background: #f3f6fa;
  border: 1px solid var(--line);
  border-radius: 9px;
  font-size: 13px;
  white-space: normal;
}
.secondary-button:hover:not(:disabled) { background: #eaf0f8; }
.secondary-button:disabled { color: var(--muted); opacity: .6; }

/* Search and route results. Subway line colors retain their real identity. */
.workspace { background: transparent; }
.map-card { border-color: var(--line); border-radius: 16px; background: #fff; }
.map-top { background: #fff; }
.map-title > span > .icon { color: #61768c; }
.map-title h1 { color: var(--ink); }
.map-label { border-color: var(--line); color: var(--muted); background: #f7f9fc; }
.map-reset { color: #526b84; }
.map-canvas { background: #fafbfd; }
.map-selection button {
  border-color: var(--line);
  border-radius: 10px;
  background: #fff;
  color: var(--ink);
}
.map-selection button[aria-pressed="true"] {
  border-color: #91b3f0;
  background: #f3f7fe;
  box-shadow: none;
}
.map-selection button span,
.map-selection button > [data-icon],
.map-selection-status p { color: var(--muted); }
.map-selection button strong { font-weight: 600; }
.map-selection-status button { color: var(--green); }
.map-route-options {
  padding: 4px;
  gap: 4px;
  background: #f2f4f7;
  border-radius: 9px;
}
.map-route-options .option {
  border-color: transparent;
  border-radius: 6px;
  color: var(--muted);
  background: transparent;
  font-size: 13px;
}
.map-route-options .option.active {
  border-color: transparent;
  background: #fff;
  color: var(--ink);
  font-weight: 600;
}




.map-legend { background: #fff; border-color: var(--line); }
.legend-item { color: #5f7082; }
.station-label { fill: #5e6d7c; stroke: #fafbfd; }
.station-transfer .station-label { fill: #344b62; }
.station-popover {
  background: #fff;
  border-color: #dbe3ec;
  border-radius: 13px;
  box-shadow: 0 8px 24px #142c4514;
}
.popover-head button { color: var(--muted); }
.popover-actions button { background: #edf3ff; color: var(--green); border-radius: 8px; }
.popover-actions button:last-child { background: var(--green); color: #fff; }
.form-error { color: #ae4145; }
.has-search #route-result {
  background: #fff;
  border-color: var(--line);
  border-radius: 16px;
  box-shadow: none;
}
.route-result { border-color: var(--line); }
.result-top > span { color: #4e6278; font-size: 13px; }
.save-route { color: var(--muted); }
.save-route.saved { color: var(--green); }
.save-route.saved .icon { fill: #e5eeff; }
.route-summary { flex-wrap: wrap; gap: 6px; }
.route-summary strong { color: var(--ink); font-size: 48px; font-weight: 650; }
.route-summary > small,
.result-meta,
.segment-copy p,
.segment-end,
.route-disclaimer { color: var(--muted); }
.result-track i { color: #8190a0; }
.route-timeline { border-color: var(--line); }
.route-segment { min-height: 72px; }
.segment-copy strong { color: var(--ink); font-weight: 600; }
.result-home-button { color: var(--green); background: #edf3ff; }
.result-home-button:hover:not(:disabled) { color: var(--green-dark); background: #e1ebfd; }
.result-home-button + .begin-journey { color: #fff; background: var(--green); border: 0; }
.result-home-button + .begin-journey:hover:not(:disabled) { background: var(--green-dark); }

/* Saved and recent routes are simple lists, without a card around every row. */
.app-layout:not(.has-home):not(.has-search) {
  display: block;
  max-width: 600px;
  width: calc(100% - 48px);
  padding: 36px 0 40px;
}
.app-layout:not(.has-home):not(.has-search) > .sidebar {
  padding: 0;
  background: #fff;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.favorites-heading { margin-bottom: 22px; }
.favorites-heading h1 { color: var(--ink); font-weight: 700; letter-spacing: -1px; }
.favorites-heading #favorites-add {
  border-color: transparent;
  border-radius: 10px;
  color: var(--green);
  background: var(--theme-raised, #f1f5fc);
}
.favorites-heading #favorites-add:hover { background: var(--theme-subtle, #f1f5fc); }
.saved-route {
  min-height: 90px;
  margin: 0;
  padding: 18px 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: #fff;
  gap: 14px;
}
.saved-route:hover { background: #fafbfd; border-color: var(--line); }
.saved-number { background: #edf3ff; color: var(--green); border-radius: 8px; font-weight: 600; }
.saved-route .saved-main { font-size: 15px; font-weight: 600; }
.saved-main > span { color: #8795a4 !important; }
.saved-main small { color: var(--muted); font-size: 12px; }
.remove-saved { width: 44px; color: #7b8a9a; }
.remove-saved:hover { background: #fff1f2; color: #b14851; }
.empty-state {
  border: 0;
  border-radius: 0;
  background: var(--theme-surface, #fff);
  color: var(--muted);
  padding: 48px 8px;
}
.empty-state > .icon { color: var(--theme-accent, #92a6bd); }
.empty-state p { font-size: 13px; }
.section-label h2, .section-label h3 { color: #425a72; font-weight: 600; }
.section-label > button { color: var(--muted); }
.recent-route { color: var(--ink); border-color: var(--line); }
.recent-route > span:first-child { background: #f2f5f9; border-color: transparent; color: #7a8a9c; }
.recent-names i, .recent-route > span:last-child { color: #8796a6; }

/* Pickers and system settings share the same native-feeling surface. */
.modal {
  color: var(--ink);
  background: #fff;
  border: 1px solid #e3e9f0;
  border-radius: 16px;
  box-shadow: 0 16px 56px #152f4824;
}
.modal::backdrop { background: #142a4666; backdrop-filter: none; }

#info-dialog,
.release-widgets-dialog,
.journey-settings-dialog,
.wifi-settings-dialog {
  --dialog-edge-gap: 20px;
  --dialog-top: max(var(--dialog-edge-gap), calc(env(safe-area-inset-top, 0px) + 8px));
  --dialog-bottom: max(var(--dialog-edge-gap), calc(env(safe-area-inset-bottom, 0px) + 8px));
  position: fixed;
  inset-block: var(--dialog-top) var(--dialog-bottom);
  max-height: calc(100dvh - var(--dialog-top) - var(--dialog-bottom));
  margin: auto;
}

#info-dialog,
.release-widgets-dialog {
  overflow-y: auto;
  overscroll-behavior-y: contain;
}

.modal-top > strong { font-weight: 650; }
.modal > p, .payment-availability { color: var(--muted); }
.modal-top .icon-button { background: #f3f5f8; width: 44px; height: 44px; }
.history-clear-button { color: #63778b; }
.usage-guide {
  padding: 18px;
  border: 0;
  border-radius: 11px;
  background: #f4f7fb;
  margin: 20px 0;
}
.usage-guide > strong { color: var(--ink); font-size: 15px; }
.usage-guide #monthly-usage-reset { color: var(--muted); font-size: 12px; }
.usage-guide ul { padding-left: 18px; color: #52677c; font-size: 13px; line-height: 1.8; }
.usage-guide li + li { margin-top: 7px; }
.usage-guide .payment-availability { margin-bottom: 0; }
.station-picker-modal .modal-top h2 { font-weight: 650; }
html:has(.station-picker-modal[open]) { overflow: hidden; }
.station-picker-modal[open] {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  height: calc(min(360px, 50svh) + 168px);
  max-height: calc(100svh - 32px);
  overflow: hidden;
}
.station-picker-search {
  margin-bottom: 12px;
  padding-bottom: 3px;
  background: #fff;
}
#station-picker-input {
  display: block;
  width: 100%;
  min-height: 52px;
  font-family: inherit;
  line-height: 1.5;
  border-color: #e3e9f0;
  border-radius: 10px;
  background: #f3f6fa;
  color: var(--ink);
}
#station-picker-input::placeholder { color: #718297; }
#station-picker-results {
  max-height: none;
  overflow-y: auto;
  overscroll-behavior: none;
  scrollbar-width: thin;
  padding: 3px;
}
button.station-choice {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  border: 1px solid transparent;
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  text-align: left;
  line-height: 1.6;
}
.station-choice strong { min-width: 0; overflow-wrap: anywhere; font-weight: 550; }
button.station-choice:hover,
button.station-choice.selected,
button.station-choice[aria-selected="true"] { background: #edf3ff; border-color: #d5e3fc; color: var(--green); }
button.station-choice:disabled { opacity: .45; }
.station-choice-lines {
  flex: 0 1 auto;
  max-width: 47%;
  color: var(--muted);
  text-align: right;
  line-height: 1.7;
  overflow-wrap: anywhere;
}
.station-picker-empty { padding: 24px 10px; text-align: center; line-height: 1.8; }
.suggestions { background: #fff; border-color: #dfe7f1; border-radius: 12px; box-shadow: 0 6px 20px #18355314; }
.suggestion:hover, .suggestion.selected { background: #edf3ff; }
.suggestion-empty, .station-picker-empty { color: var(--muted); }

.journey-mode { color: #416487; background: #edf3fb; border-radius: 6px; }
.journey-current h2 { font-weight: 650; }
.journey-line::before { background: #dfe8f7; }
.journey-stop { color: #728398; }
.journey-stop i { border-color: #d1def2; }
.journey-stop.current { color: var(--green); }
.journey-stop.current i { border-color: var(--green); box-shadow: 0 0 0 4px #eaf1fd; }
.journey-stop.passed i { background: #90afe0; border-color: #90afe0; }
.alarm-config { background: #f5f7fa; border-color: var(--line); border-radius: 12px; padding: 18px; }
.alarm-row { min-height: 44px; }
.alarm-row > label { color: #4d6278; line-height: 1.6; }
.alarm-row select { border-color: #dce4ed; color: var(--ink); background: #fff; }
.modal .switch { background: #cbd4de; }
.modal .switch[aria-checked=true] { background: var(--green); }
.modal .switch::after { box-shadow: none; }
.arrival-banner { background: #edf3ff; border-color: #d7e5fb; color: var(--green); }
.journey-footnote { color: var(--muted) !important; }
.toast { color: #fff; background: #20364d; border-radius: 10px; box-shadow: none; }

.native-settings { border-color: var(--line); }
.native-settings input { min-height: 48px; border-color: #dce4ed; background: #f7f9fc; color: var(--ink); }
.native-settings p, .native-connection-note { color: var(--muted); }
.boarding-candidate { border-color: var(--line); border-radius: 11px; background: #f6f8fc; color: var(--ink); }
.boarding-candidate:hover:not(:disabled) { border-color: #a6bfe9; background: #edf3ff; }
.boarding-candidate span { color: var(--muted); line-height: 1.7; }
.boarding-candidate:focus-visible { outline-color: #93b4f3; }
.native-floating-badge { border-color: var(--line); background: #f5f7fa; border-radius: 12px; }

@media (max-width: 720px) {
  .app-layout:not(.has-home):not(.has-search) { width: 100%; padding: 24px 24px 32px; }
  .favorites-heading h1 { font-size: 28px; }
  .saved-route { gap: 11px; }
  .modal { padding: 22px; border-radius: 16px; }
  .map-card { border-radius: 14px; }
  .map-title h1 { letter-spacing: -.4px; }
  .route-summary strong { font-size: 44px; }
  .route-summary > small { font-size: 11px; }
  .journey-current h2 { font-size: 36px; }
  .journey-actions { gap: 10px; }
  .alarm-row { gap: 12px; }
}
@media (max-width: 370px) {
  .app-layout:not(.has-home):not(.has-search) { padding-left: 20px; padding-right: 20px; }
  .saved-route .saved-main { font-size: 14px; }
  .saved-route { gap: 8px; }
  .modal { padding: 18px; }
  .alarm-config { padding: 14px; }
  .alarm-row > label { font-size: 12px; }
  button.station-choice { gap: 8px; padding-left: 9px; padding-right: 9px; }
  .station-choice-lines { font-size: 11px; }
}

/* Favorite labels remain separate from the route, including on narrow screens. */
.saved-route { display: grid; grid-template-columns: 28px minmax(0, 1fr) 44px 44px; gap: 6px; align-items: center; }
.saved-route .saved-main { min-width: 0; width: 100%; overflow-wrap: anywhere; padding-block: 10px; }
.saved-custom-name { display: block; color: var(--ink); font-size: 15px; font-weight: 650; line-height: 1.5; }
.saved-stations { display: block; font-size: 13px; line-height: 1.6; }
.saved-stations > span { color: var(--muted); }
.rename-saved, .saved-route .remove-saved { min-width: 44px; min-height: 44px; padding: 6px; }
.rename-saved { color: var(--green); font-size: 12px; }
.favorite-name-dialog { width: 420px; }
.favorite-name-dialog form > label { display: block; font-size: 13px; margin-bottom: 8px; color: var(--ink); }
.favorite-name-dialog input { box-sizing: border-box; width: 100%; min-width: 0; min-height: 48px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 9px; font: inherit; font-size: 16px; color: var(--ink); background: #fff; }
#favorite-name-route { color: var(--muted); font-size: 13px; line-height: 1.7; margin: 16px 0 20px; }
#favorite-name-hint, #favorite-name-error { font-size: 12px; line-height: 1.7; margin: 8px 0 0; }
#favorite-name-hint { color: var(--muted); }
#favorite-name-error { color: #b13e49; }
.favorite-name-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 22px; }