/* Schedule and data inputs use the same paper faces as Explore and Plan. */
html[data-material-prototype="relief"] body .sf-schedule-controls :is(input:not([type="checkbox"]), select) {
  border-radius: 8px;
  border-color: var(--relief-edge-strong);
  background: #fffdf7;
  box-shadow: var(--relief-inset);
}
html[data-material-prototype="relief"] body .sf-schedule-controls > summary {
  border-radius: 8px;
  box-shadow: var(--relief-contact);
  background: #fbfaf4;
}
html[data-material-prototype="relief"] body .sf-schedule-controls button {
  border-radius: 8px;
  background: #11100e;
  color: #fffdf7;
  box-shadow: var(--relief-contact);
}
/* Shared feedback changes depth, never route colors or selection semantics. */
html[data-material-prototype="relief"] body.is-map-active :is(
  .secondary-button, .text-button, .mobile-time-step-button,
  .home-finder-map-pick-button, .commute-fit-priority button,
  .commute-task-index a, .station-index-tabs button, .explore-line-picker summary,
  .sf-schedule-controls summary, .sf-schedule-controls button
) {
  transition: box-shadow 140ms ease, transform 140ms ease, background-color 140ms ease;
}
@media (hover: hover) {
  html[data-material-prototype="relief"] body.is-map-active :is(
    .secondary-button, .text-button, .mobile-time-step-button,
    .home-finder-map-pick-button, .commute-fit-priority button,
    .commute-task-index a, .station-index-tabs button, .explore-line-picker summary,
    .sf-schedule-controls summary, .sf-schedule-controls button
  ):not(:disabled):hover { transform: translateY(-1px); }
}
html[data-material-prototype="relief"] body.is-map-active :is(
  .secondary-button, .text-button, .mobile-time-step-button,
  .home-finder-map-pick-button, .commute-fit-priority button,
  .commute-task-index a, .station-index-tabs button, .explore-line-picker summary,
  .sf-schedule-controls summary, .sf-schedule-controls button
):not(:disabled):active { transform: translateY(1px); box-shadow: var(--relief-inset); }
html body.is-map-active .sf-schedule-controls :is(input, select, button, summary):focus-visible {
  outline: 2px solid #3d858d;
  outline-offset: 2px;
}
html[data-material-prototype="relief"] body.is-map-active :is(.mode-button, .text-button, .mobile-time-step-button, .sf-schedule-controls button):disabled {
  opacity: 0.5;
  box-shadow: none;
  transform: none;
  cursor: default;
}
@media (prefers-reduced-motion: reduce) {
  html[data-material-prototype="relief"] body.is-map-active :is(button, summary, .commute-task-index a) { transition: none; }
}

/* Time instrument: geometry is identical in flat and relief comparison modes.
 * The transparent native track preserves native keyboard/AT behavior; the
 * channel is painted on the input at the exact center-travel dimensions. */
html body :is(#maxTimeRange, #mobileMapMaxTimeRange, #mobileSheetMaxTimeRange) {
  --reach-thumb-size: 24px;
  --reach-channel: #d0cec5;
  --reach-channel-paint: linear-gradient(var(--reach-channel), var(--reach-channel));
  --reach-thumb-shadow: none;
  appearance: none;
  -webkit-appearance: none;
  box-sizing: border-box;
  height: 44px;
  min-height: 44px;
  margin-block: -10px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background:
    linear-gradient(#c9352b, #c9352b) left calc(var(--reach-thumb-size) / 2) center / var(--reach-fill-width, 0px) 4px no-repeat,
    var(--reach-channel-paint) center / var(--reach-channel-width, calc(100% - var(--reach-thumb-size))) 6px no-repeat;
  box-shadow: none;
  cursor: pointer;
  touch-action: none;
  user-select: none;
}
html body :is(#maxTimeRange, #mobileMapMaxTimeRange, #mobileSheetMaxTimeRange)::-webkit-slider-runnable-track {
  height: 6px;
  border: 0;
  background: transparent;
  box-shadow: none;
}
html body :is(#maxTimeRange, #mobileMapMaxTimeRange, #mobileSheetMaxTimeRange)::-moz-range-track {
  height: 6px;
  border: 0;
  background: transparent;
  box-shadow: none;
}
html body :is(#maxTimeRange, #mobileMapMaxTimeRange, #mobileSheetMaxTimeRange)::-moz-range-progress { background: transparent; }
html body :is(#maxTimeRange, #mobileMapMaxTimeRange, #mobileSheetMaxTimeRange)::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  box-sizing: border-box;
  width: var(--reach-thumb-size);
  height: var(--reach-thumb-size);
  margin-top: calc((6px - var(--reach-thumb-size)) / 2);
  border: 1px solid #8a877e;
  border-radius: 50%;
  background: radial-gradient(circle, #c9352b 0 4px, #fffdf7 4.5px 8px, #b6b3a9 8.5px 9px, #e2e0d7 9.5px);
  box-shadow: var(--reach-thumb-shadow);
  cursor: grab;
}
html body :is(#maxTimeRange, #mobileMapMaxTimeRange, #mobileSheetMaxTimeRange)::-moz-range-thumb {
  box-sizing: border-box;
  width: var(--reach-thumb-size);
  height: var(--reach-thumb-size);
  border: 1px solid #8a877e;
  border-radius: 50%;
  background: radial-gradient(circle, #c9352b 0 4px, #fffdf7 4.5px 8px, #b6b3a9 8.5px 9px, #e2e0d7 9.5px);
  box-shadow: var(--reach-thumb-shadow);
  cursor: grab;
}
html[data-material-prototype="relief"] body :is(#maxTimeRange, #mobileMapMaxTimeRange, #mobileSheetMaxTimeRange) {
  --reach-thumb-shadow: inset 0 1px 0 #fffdf7, 0 2px 3px #29251c33;
  --reach-channel: #b8b5ab;
  --reach-channel-paint: linear-gradient(#a09c92 0 1px, #d0cdc3 1px 5px, #fffdf7 5px);
}
html body :is(#maxTimeRange, #mobileMapMaxTimeRange, #mobileSheetMaxTimeRange):focus-visible {
  outline: 2px solid #3d858d;
  outline-offset: 1px;
  border-radius: 8px;
}
html body :is(#maxTimeRange, #mobileMapMaxTimeRange, #mobileSheetMaxTimeRange):disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
html body :is(#maxTimeRange, #mobileMapMaxTimeRange, #mobileSheetMaxTimeRange):disabled::-webkit-slider-thumb { cursor: not-allowed; }
html body :is(#maxTimeRange, #mobileMapMaxTimeRange, #mobileSheetMaxTimeRange):disabled::-moz-range-thumb { cursor: not-allowed; }
html body :is(#maxTimeRange, #mobileMapMaxTimeRange, #mobileSheetMaxTimeRange):not(:disabled):active::-webkit-slider-thumb { cursor: grabbing; }
html body :is(#maxTimeRange, #mobileMapMaxTimeRange, #mobileSheetMaxTimeRange):not(:disabled):active::-moz-range-thumb { cursor: grabbing; }
html[data-material-prototype="relief"] body :is(#maxTimeRange, #mobileMapMaxTimeRange, #mobileSheetMaxTimeRange):not(:disabled):active {
  --reach-thumb-shadow: inset 0 1px 1px #29251c33, 0 1px 1px #29251c26;
}
html body .reach-time-instrument { position: relative; }
html body #desktopReachTimeControl.reach-time-instrument {
  grid-template-rows: 11px 21px 10px;
}
html body .reach-time-instrument .reach-time-scale {
  position: absolute;
  display: block;
  height: 12px;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  pointer-events: none;
  color: #625e55;
  font: 600 9px/1 var(--font-mono);
}
html body .reach-time-instrument .reach-time-scale i {
  position: absolute;
  top: 0;
  width: 1px;
  height: 3px;
  background: #89857b;
  transform: translateX(-50%);
  font-style: normal;
}
html body .reach-time-instrument .reach-time-scale i[data-major="true"] { height: 4px; background: #625e55; }
html body .reach-time-instrument .reach-time-scale i > span {
  position: absolute;
  top: 5px;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
}
@media (pointer: coarse) {
  html body :is(#maxTimeRange, #mobileMapMaxTimeRange, #mobileSheetMaxTimeRange) { --reach-thumb-size: 28px; }
}
@media (forced-colors: active) {
  html body :is(#maxTimeRange, #mobileMapMaxTimeRange, #mobileSheetMaxTimeRange) {
    forced-color-adjust: none;
    background: linear-gradient(CanvasText, CanvasText) center / var(--reach-channel-width) 2px no-repeat;
  }
  html body :is(#maxTimeRange, #mobileMapMaxTimeRange, #mobileSheetMaxTimeRange)::-webkit-slider-thumb { background: Highlight; border: 2px solid CanvasText; box-shadow: none; }
  html body :is(#maxTimeRange, #mobileMapMaxTimeRange, #mobileSheetMaxTimeRange)::-moz-range-thumb { background: Highlight; border: 2px solid CanvasText; box-shadow: none; }
  html body :is(#maxTimeRange, #mobileMapMaxTimeRange, #mobileSheetMaxTimeRange):focus-visible { outline-color: Highlight; }
  html body .reach-time-instrument .reach-time-scale i { background: CanvasText; }
  html body .reach-time-instrument .reach-time-scale { color: CanvasText; }
}

/*
 * Default paper-relief interface treatment.
 *
 * The treatment remains deliberately limited to interactive chrome; maps,
 * charts, dense data rows, and rail identity stay flat and high-contrast.
 * Use `?material=flat` as a temporary comparison and rollback escape hatch.
 */

html[data-material-prototype="relief"] {
  --relief-paper: #fbfaf4;
  --relief-paper-warm: #f7f1e4;
  --relief-control-bg: rgba(255, 250, 240, 0.9);
  --relief-control-height: 52px;
  --relief-control-radius: 12px;
  --relief-control-radius-inner: 8px;
  --relief-panel-radius: 16px;
  --relief-segment-gap: 4px;
  --relief-segment-padding: 4px;
  --relief-segment-radius: 12px;
  --relief-segment-radius-inner: 8px;
  --relief-segment-tray: rgba(232, 224, 208, 0.4);
  --relief-segment-tray-strong: rgba(226, 217, 201, 0.52);
  --relief-control-paper-bright: #fffdf7;
  --relief-control-edge: rgba(55, 45, 31, 0.18);
  --relief-map-segment-tray: rgba(247, 241, 228, 0.84);
  --relief-map-segment-edge: rgba(55, 45, 31, 0.18);
  --relief-edge: rgba(55, 45, 31, 0.14);
  --relief-edge-strong: rgba(55, 45, 31, 0.22);
  --relief-highlight: rgba(255, 255, 255, 0.82);
  --relief-contact:
    0 1px 2px rgba(55, 45, 31, 0.065),
    0 0 0 1px var(--relief-edge),
    inset 0 1px 0 var(--relief-highlight);
  --relief-lift:
    0 3px 8px rgba(55, 45, 31, 0.09),
    0 1px 2px rgba(55, 45, 31, 0.06),
    0 0 0 1px var(--relief-edge),
    inset 0 1px 0 rgba(255, 255, 255, 0.86);
  --relief-float:
    0 7px 18px rgba(55, 45, 31, 0.105),
    0 2px 4px rgba(55, 45, 31, 0.065),
    0 0 0 1px var(--relief-edge),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  --relief-inset:
    inset 0 1px 3px rgba(55, 45, 31, 0.095),
    inset 0 0 0 1px rgba(55, 45, 31, 0.065),
    0 1px 0 rgba(255, 255, 255, 0.62);
  --relief-focus:
    0 0 0 3px rgba(201, 53, 43, 0.18),
    var(--relief-lift);
}

/* Shape and depth are semantic rather than component-specific. Command-row
 * instruments share one shell; segmented choices use a recessed tray with a
 * raised selection; pills remain reserved for singular actions and chips. */
html[data-material-prototype="relief"] body.is-map-active {
  --chrome-radius: var(--relief-control-radius);
  --chrome-radius-inner: var(--relief-control-radius-inner);
}

/* Floating controls: enough lift to read as objects resting on the map. */
html[data-material-prototype="relief"] body.is-map-active :is(
  .map-corner-actions .icon-button,
  .map-zoom-controls .icon-button,
  .map-surface-rail .surface-story-toggle
) {
  border-color: var(--relief-edge-strong);
  border-radius: 10px;
  background-color: rgba(255, 250, 240, 0.96);
  box-shadow: var(--relief-float);
}

/* Fullscreen and zoom read as one map instrument. The two DOM groups stay
 * separate so the existing reach-time and responsive controllers retain
 * their semantics, while a shared backing plate visually joins the tools. */
@media (min-width: 981px), (min-width: 761px) and (max-width: 980px) and (min-height: 600px) and (orientation: landscape) {
  html[data-material-prototype="relief"] body.is-map-active .map-corner-actions {
    top: 14px;
    right: 14px;
    width: 44px;
    height: 44px;
  }

  html[data-material-prototype="relief"] body.is-map-active .map-zoom-controls::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: -44px;
    right: 0;
    width: 44px;
    height: 132px;
    border: 1px solid var(--relief-edge-strong);
    border-radius: 13px;
    background: rgba(255, 250, 240, 0.96);
    box-shadow: var(--relief-float);
    pointer-events: none;
  }

  html[data-material-prototype="relief"] body.is-map-active .map-zoom-controls {
    top: 58px;
    right: 14px;
    gap: 0;
    isolation: isolate;
  }

  html[data-material-prototype="relief"] body.is-map-active :is(
    .map-corner-actions .icon-button,
    .map-zoom-controls .icon-button
  ) {
    box-sizing: border-box;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: rgba(17, 16, 14, 0.82);
    transform: translateY(0);
    transition:
      color var(--motion-duration-fast) var(--motion-ease-standard),
      background-color var(--motion-duration-fast) var(--motion-ease-standard),
      box-shadow var(--motion-duration-fast) var(--motion-ease-standard),
      transform var(--motion-duration-fast) var(--motion-ease-standard);
  }

  html[data-material-prototype="relief"] body.is-map-active .map-corner-actions .icon-button {
    border-radius: 12px 12px 0 0;
    border-bottom: 1px solid rgba(55, 45, 31, 0.11);
  }

  html[data-material-prototype="relief"] body.is-map-active .map-zoom-controls .icon-button:first-child {
    border-bottom: 1px solid rgba(55, 45, 31, 0.11);
  }

  html[data-material-prototype="relief"] body.is-map-active .map-zoom-controls .icon-button:last-child {
    border-radius: 0 0 12px 12px;
  }

  html[data-material-prototype="relief"] body.is-map-active :is(
    .map-corner-actions .icon-button,
    .map-zoom-controls .icon-button
  ):hover {
    background: rgba(255, 253, 247, 0.8);
    color: var(--ink);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
  }

  html[data-material-prototype="relief"] body.is-map-active :is(
    .map-corner-actions .icon-button,
    .map-zoom-controls .icon-button
  ):active,
  html[data-material-prototype="relief"] body.is-map-active :is(
    .map-corner-actions .icon-button,
    .map-zoom-controls .icon-button
  ).is-control-pressed {
    background: rgba(232, 224, 208, 0.56);
    box-shadow: var(--relief-inset);
    transform: translateY(1px);
  }

  html[data-material-prototype="relief"] body.is-map-active :is(
    .map-corner-actions .icon-button,
    .map-zoom-controls .icon-button
  ):focus-visible {
    z-index: 1;
    outline: 0;
    box-shadow: inset 0 0 0 2px rgba(17, 16, 14, 0.32);
  }
}

/* Search, line, and time are one command-instrument family. */
html[data-material-prototype="relief"] body.is-map-active :is(
  .panel-header .map-origin-search .search-row input,
  .command-sentence .explore-line-picker summary,
  .command-sentence .range-control,
  #mobileMapStationSearch,
  #mobileStationSearch,
  .mobile-reach-time-control,
  .mobile-sheet-time-control,
  .station-index-search input,
  .station-index-line-filter select
) {
  border-color: var(--relief-instrument-edge, var(--relief-edge));
  border-radius: var(--relief-control-radius);
  background-color: var(--relief-instrument-bg, var(--relief-control-bg));
  box-shadow: var(--relief-inset);
}

html[data-material-prototype="relief"] body.is-map-active :is(
  .panel-header .map-origin-search .search-row input,
  .command-sentence .explore-line-picker summary,
  #mobileMapStationSearch,
  #mobileStationSearch,
  .station-index-search input,
  .station-index-line-filter select
):focus-visible {
  border-color: rgba(201, 53, 43, 0.5);
  outline: 0;
  box-shadow: inset 0 2px 5px rgba(55, 45, 31, 0.1), 0 0 0 3px rgba(201, 53, 43, 0.16);
}

html[data-material-prototype="relief"] body.is-map-active .command-sentence .range-control:focus-within {
  border-color: rgba(201, 53, 43, 0.5);
  box-shadow: inset 0 2px 5px rgba(55, 45, 31, 0.1), 0 0 0 3px rgba(201, 53, 43, 0.16);
}

html[data-material-prototype="relief"] body.is-map-active .explore-line-picker-popover {
  border-color: var(--relief-edge-strong);
  border-radius: var(--relief-panel-radius);
  background: var(--relief-paper);
  box-shadow: var(--relief-float);
}

@media (min-width: 981px), (min-width: 761px) and (max-width: 980px) and (min-height: 600px) and (orientation: landscape) {
  html[data-material-prototype="relief"] body.is-map-active .command-sentence :is(
    .map-origin-search,
    .map-origin-search .search-row input,
    .explore-line-picker-host,
    .explore-line-picker,
    .explore-line-picker summary,
    .range-control
  ) {
    box-sizing: border-box;
    height: var(--relief-control-height);
    min-height: var(--relief-control-height);
  }

  /* Desktop instruments benefit from a more explicit paper stack: a deeper
   * recessed housing, a bright control face, and an edge that remains visible
   * against both the washi field and the analytical panel paper. Phone sheets
   * already provide this separation and intentionally retain the quieter base
   * tokens above. */
  html[data-material-prototype="relief"] body.is-map-active .command-mast .mode-control-lenses,
  html[data-material-prototype="relief"] body.is-route-mode .route-card .commute-task-index,
  html[data-material-prototype="relief"] body.is-index-mode .station-index-workspace:not(.is-mobile) .station-index-tabs {
    --relief-segment-edge: var(--relief-control-edge);
    --relief-segment-tray: var(--relief-segment-tray-strong);
    --relief-segment-face-edge: var(--relief-control-edge);
    --relief-segment-face-bg: var(--relief-control-paper-bright);
    border-color: var(--relief-control-edge);
    background: var(--relief-segment-tray-strong);
  }

  html[data-material-prototype="relief"] body.is-map-active .command-sentence,
  html[data-material-prototype="relief"] body.is-index-mode .station-index-workspace:not(.is-mobile) {
    --relief-instrument-bg: var(--relief-control-paper-bright);
    --relief-instrument-edge: var(--relief-control-edge);
  }

  html[data-material-prototype="relief"] body.is-map-active .command-mast .command-utility-tray {
    border-color: var(--relief-control-edge);
    background: var(--relief-control-paper-bright);
  }

  html[data-material-prototype="relief"] body.is-route-mode .route-card .commute-task-index::before,
  html[data-material-prototype="relief"] body.is-index-mode .station-index-workspace:not(.is-mobile) .station-index-tabs.has-sliding-indicator::before {
    border-color: var(--relief-control-edge);
    background: var(--relief-control-paper-bright);
  }

  html[data-material-prototype="relief"] body.is-index-mode .station-index-workspace:not(.is-mobile) .station-index-story-context > span {
    background: rgba(55, 45, 31, 0.055);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.52);
  }
}

@media (min-width: 1321px) {
  html[data-material-prototype="relief"] body.is-map-active .command-sentence {
    height: var(--relief-control-height);
    min-height: var(--relief-control-height);
  }
}

/* Secondary actions lift; the black primary action retains decisive contrast. */
html[data-material-prototype="relief"] body.is-map-active :is(
  .station-index-dossier-actions button,
  .station-index-story-results button,
  .text-button,
  .secondary-button
) {
  border: 1px solid var(--relief-edge);
  border-radius: var(--relief-control-radius);
  background: linear-gradient(180deg, rgba(255, 253, 247, 0.98), rgba(245, 239, 226, 0.94));
  color: var(--ink);
  box-shadow: var(--relief-contact);
  transform: translateY(0);
  transition:
    box-shadow var(--motion-duration-fast) var(--motion-ease-standard),
    transform var(--motion-duration-fast) var(--motion-ease-standard),
    border-color var(--motion-duration-fast) var(--motion-ease-standard),
    background-color var(--motion-duration-fast) var(--motion-ease-standard);
}

html[data-material-prototype="relief"] body.is-map-active :is(
  .station-index-dossier-actions button,
  .station-index-story-results button,
  .text-button,
  .secondary-button
):hover {
  border-color: var(--relief-edge-strong);
  background: var(--relief-paper);
  box-shadow: var(--relief-lift);
  transform: translateY(-1px);
}

html[data-material-prototype="relief"] body.is-map-active :is(
  .station-index-dossier-actions button,
  .station-index-story-results button,
  .text-button,
  .secondary-button
):active {
  box-shadow: var(--relief-inset);
  transform: translateY(1px);
}

html[data-material-prototype="relief"] body.is-map-active :is(
  .station-index-dossier-actions button,
  .station-index-story-results button,
  .text-button,
  .secondary-button
):focus-visible {
  outline: 0;
  box-shadow: var(--relief-focus);
}

/* Commute tasks are local navigation, so they use the same raised-paper
 * selection as the analytical view toggles. Parent task state already mirrors
 * both desktop and mobile. */
html[data-material-prototype="relief"] body.is-route-mode :is(.route-card, .mobile-route-card) .commute-task-index {
  position: relative;
  isolation: isolate;
  gap: var(--relief-segment-gap);
  padding: var(--relief-segment-padding);
  overflow: hidden;
  border: 1px solid var(--relief-segment-edge, rgba(55, 45, 31, 0.09));
  border-radius: var(--relief-segment-radius);
  background: var(--relief-segment-tray);
  box-shadow: var(--relief-inset);
}

html[data-material-prototype="relief"] body.is-route-mode :is(.route-card, .mobile-route-card) .commute-task-index::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: var(--relief-segment-padding);
  bottom: var(--relief-segment-padding);
  left: var(--relief-segment-padding);
  width: calc((100% - var(--relief-segment-padding) - var(--relief-segment-padding) - var(--relief-segment-gap)) / 2);
  border: 1px solid var(--relief-segment-face-edge, var(--relief-edge));
  border-radius: var(--relief-segment-radius-inner);
  background: var(--relief-segment-face-bg, rgba(255, 250, 240, 0.98));
  box-shadow: var(--relief-lift);
  pointer-events: none;
  transform: translateX(0);
  transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
}

html[data-material-prototype="relief"] body.is-route-mode :is(.route-card, .mobile-route-card)[data-commute-task="check"] .commute-task-index::before {
  transform: translateX(calc(100% + var(--relief-segment-gap)));
}

html[data-material-prototype="relief"] body.is-route-mode :is(.route-card, .mobile-route-card) .commute-task-index a {
  z-index: 1;
  min-height: 48px;
  border: 0;
  border-radius: var(--relief-segment-radius-inner);
  background: transparent;
  box-shadow: none;
  color: rgba(17, 16, 14, 0.68);
  transition:
    color var(--motion-duration-fast) var(--motion-ease-standard),
    background-color var(--motion-duration-fast) var(--motion-ease-standard);
}

html[data-material-prototype="relief"] body.is-route-mode :is(.route-card, .mobile-route-card) .commute-task-index a + a {
  border-left: 0;
}

html[data-material-prototype="relief"] body.is-route-mode :is(.route-card, .mobile-route-card) .commute-task-index a[aria-current="page"] {
  background: transparent;
  color: var(--ink);
}

html[data-material-prototype="relief"] body.is-route-mode :is(.route-card, .mobile-route-card) .commute-task-index a[aria-current="page"] strong {
  color: inherit;
}

html[data-material-prototype="relief"] body.is-route-mode :is(.route-card, .mobile-route-card) .commute-task-index a:not([aria-current="page"]):hover {
  background: rgba(255, 253, 247, 0.5);
  color: var(--ink);
}

html[data-material-prototype="relief"] body.is-route-mode :is(.route-card, .mobile-route-card) .commute-task-index a:focus-visible {
  outline: 0;
  box-shadow: inset 0 0 0 2px rgba(17, 16, 14, 0.34);
}

html[data-material-prototype="relief"] body.is-route-mode :is(.route-card, .mobile-route-card) .commute-task-index a[aria-current="page"]:focus-visible {
  box-shadow: inset 0 0 0 2px rgba(17, 16, 14, 0.34);
}

/* Geography and Travel Time share the same raised selection language as the
 * Station Data lenses, with body state providing the animation target. */
html[data-material-prototype="relief"] body.is-map-active .spatial-view-toggle {
  position: relative;
  isolation: isolate;
  gap: var(--relief-segment-gap);
  padding: var(--relief-segment-padding);
  overflow: hidden;
  border: 1px solid var(--relief-map-segment-edge);
  border-radius: var(--relief-segment-radius);
  background: var(--relief-map-segment-tray);
  box-shadow: var(--relief-inset);
}

html[data-material-prototype="relief"] body.is-map-active .spatial-view-toggle::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: var(--relief-segment-padding);
  bottom: var(--relief-segment-padding);
  left: var(--relief-segment-padding);
  width: calc((100% - var(--relief-segment-padding) - var(--relief-segment-padding) - var(--relief-segment-gap)) / 2);
  border: 1px solid var(--relief-edge);
  border-radius: var(--relief-segment-radius-inner);
  background: rgba(255, 250, 240, 0.98);
  box-shadow: var(--relief-lift);
  pointer-events: none;
  transform: translateX(0);
  transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
}

html[data-material-prototype="relief"] body.is-map-active.is-time-rings-view .spatial-view-toggle::before {
  transform: translateX(calc(100% + var(--relief-segment-gap)));
}

html[data-material-prototype="relief"] body.is-map-active .spatial-view-toggle .spatial-view-button {
  z-index: 1;
  border: 0;
  border-radius: var(--relief-segment-radius-inner);
  background: transparent;
  box-shadow: none;
  transform: none;
  transition:
    color var(--motion-duration-fast) var(--motion-ease-standard),
    background-color var(--motion-duration-fast) var(--motion-ease-standard);
}

html[data-material-prototype="relief"] body.is-map-active .spatial-view-toggle .spatial-view-button.is-active {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}

html[data-material-prototype="relief"] body.is-map-active .spatial-view-toggle .spatial-view-button:not(.is-active):not(:disabled):hover {
  background: rgba(255, 253, 247, 0.46);
  color: var(--ink);
}

html[data-material-prototype="relief"] body.is-map-active .spatial-view-toggle .spatial-view-button:focus-visible {
  outline: 0;
  box-shadow: inset 0 0 0 2px rgba(17, 16, 14, 0.32);
}

html[data-material-prototype="relief"] body.is-map-active .spatial-view-toggle .spatial-view-button:disabled {
  opacity: 0.38;
}

/* A segmented paper tray with one raised selection. */
html[data-material-prototype="relief"] body.is-index-mode .station-index-workspace .station-index-tabs {
  --station-index-indicator-x: var(--relief-segment-padding);
  --station-index-indicator-width: 0px;
  position: relative;
  isolation: isolate;
  gap: var(--relief-segment-gap);
  padding: var(--relief-segment-padding);
  border: 1px solid var(--relief-segment-edge, rgba(55, 45, 31, 0.08));
  border-radius: var(--relief-segment-radius);
  background: var(--relief-segment-tray);
  box-shadow: var(--relief-inset);
}

html[data-material-prototype="relief"] body.is-index-mode .station-index-workspace .station-index-tabs.has-sliding-indicator::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: var(--relief-segment-padding);
  bottom: var(--relief-segment-padding);
  left: 0;
  width: var(--station-index-indicator-width);
  border: 1px solid var(--relief-edge);
  border-radius: var(--relief-segment-radius-inner);
  background: rgba(255, 250, 240, 0.98);
  box-shadow: var(--relief-lift);
  pointer-events: none;
  transform: translateX(var(--station-index-indicator-x));
}

html[data-material-prototype="relief"] body.is-index-mode .station-index-workspace .station-index-tabs.has-sliding-indicator.is-indicator-ready::before {
  transition:
    width 260ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
}

html[data-material-prototype="relief"] body.is-index-mode .station-index-workspace .station-index-tab {
  position: relative;
  z-index: 1;
  border: 1px solid transparent;
  border-radius: var(--relief-segment-radius-inner);
  box-shadow: none;
  transition:
    color var(--motion-duration-fast) var(--motion-ease-standard),
    background-color var(--motion-duration-fast) var(--motion-ease-standard),
    box-shadow var(--motion-duration-fast) var(--motion-ease-standard),
    transform var(--motion-duration-fast) var(--motion-ease-standard);
}

html[data-material-prototype="relief"] body.is-index-mode .station-index-workspace.is-plate.is-story .station-index-tab:is(.is-active, [aria-selected="true"]) {
  border-color: transparent;
  background: transparent;
  color: var(--ink);
  box-shadow: none;
  transform: translateY(0);
}

html[data-material-prototype="relief"] body.is-index-mode .station-index-workspace .station-index-tab:not(.is-active):not([aria-selected="true"]):hover {
  background: rgba(255, 253, 247, 0.52);
}

@media (prefers-reduced-motion: reduce) {
  html[data-material-prototype="relief"] body.is-index-mode .station-index-workspace .station-index-tabs.has-sliding-indicator.is-indicator-ready::before {
    transition: none;
  }

  html[data-material-prototype="relief"] body.is-route-mode :is(.route-card, .mobile-route-card) .commute-task-index::before,
  html[data-material-prototype="relief"] body.is-map-active .spatial-view-toggle::before {
    transition: none;
  }
}

/* The expanded commute sheet has a long, scrolling workflow beneath a sticky
 * identity masthead. Keep that masthead on the compact route grammar even when
 * legacy station-sign rules win during an endpoint-state change: a single-line
 * journey title, no duplicate status line, and an opaque stacking surface. */
@media (max-width: 980px) {
  html[data-material-prototype="relief"] body.is-route-mode #mobileSheet.mobile-sheet[data-snap="full"] > .mobile-sheet-head {
    z-index: 36;
    grid-template-columns: minmax(0, 1fr) auto;
    min-height: 58px;
    max-height: 72px;
    overflow: hidden;
    background: #faf8f1;
    box-shadow: 0 8px 14px rgba(17, 16, 14, 0.08);
  }

  html[data-material-prototype="relief"] body.is-route-mode #mobileSheet.mobile-sheet[data-snap="full"] > .mobile-sheet-head > div:first-child {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto;
    gap: 2px;
    min-width: 0;
    overflow: hidden;
  }

  html[data-material-prototype="relief"] body.is-route-mode #mobileSheet.mobile-sheet[data-snap="full"] #mobileOriginTitle,
  html[data-material-prototype="relief"] body.is-route-mode #mobileSheet.mobile-sheet[data-snap="full"] #mobileOriginTitle.is-ekimeihyo {
    display: block;
    grid-column: 1;
    grid-row: 2;
    min-width: 0;
    max-width: 100%;
    margin: 0;
    overflow: hidden;
    font: 820 clamp(0.98rem, 4.6vw, 1.2rem)/1.08 var(--font-rail-label);
    letter-spacing: 0;
    text-overflow: ellipsis;
    text-transform: none;
    white-space: nowrap;
  }

  html[data-material-prototype="relief"] body.is-route-mode #mobileSheet.mobile-sheet[data-snap="full"] #mobileStatusText,
  html[data-material-prototype="relief"] body.is-route-mode #mobileSheet.mobile-sheet[data-snap="full"] #mobileStationRole,
  html[data-material-prototype="relief"] body.is-route-mode #mobileSheet.mobile-sheet[data-snap="full"] #mobileCollapsedLineLogo {
    display: none;
  }

  html[data-material-prototype="relief"] body.is-route-mode #mobileSheet.mobile-sheet[data-snap="full"] > .mobile-mode-control,
  html[data-material-prototype="relief"] body.is-route-mode #mobileSheet.mobile-sheet[data-snap="full"] > .mobile-route-card {
    position: relative;
    top: auto;
    z-index: 1;
  }
}

/* The top-level mode remains ink-selected, but its housing becomes tactile. */
html[data-material-prototype="relief"] body.is-map-active :is(
  .command-mast .mode-control-lenses,
  .mobile-mode-control,
  .mobile-collapsed-mode-control
) {
  gap: var(--relief-segment-gap);
  padding: var(--relief-segment-padding);
  border: 1px solid var(--relief-segment-edge, rgba(55, 45, 31, 0.09));
  border-radius: var(--relief-segment-radius);
  background: var(--relief-segment-tray);
  box-shadow: var(--relief-inset);
}

html[data-material-prototype="relief"] body.is-map-active :is(
  .command-mast .mode-button,
  .mobile-mode-control .mode-button,
  .mobile-collapsed-mode-control .mode-button
) {
  border: 1px solid transparent;
  border-radius: var(--relief-segment-radius-inner);
}

html[data-material-prototype="relief"] body.is-map-active :is(
  .command-mast .mode-button,
  .mobile-mode-control .mode-button,
  .mobile-collapsed-mode-control .mode-button
).is-active {
  border-color: rgba(0, 0, 0, 0.72);
  box-shadow:
    0 3px 8px rgba(17, 16, 14, 0.17),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

/* Poster creation uses a small paper ticket and vermilion print glyph. */
html[data-material-prototype="relief"] body.is-map-active .command-mast .share-button {
  align-self: center;
  display: inline-flex;
  width: 128px;
  min-width: 128px;
  max-width: 128px;
  height: 44px;
  min-height: 44px;
  margin-left: auto;
  padding: 0 14px 0 40px;
  border: 1px solid var(--relief-edge);
  border-radius: 8px;
  background-color: rgba(255, 250, 240, 0.88);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Crect x='4.5' y='3.5' width='15' height='17' rx='3.5' stroke='%23b84636' stroke-width='1.7'/%3E%3Cpath d='m7.7 16.7 3.15-4.4 2.35 2.7 1.65-2.05 1.95 3.75H7.7Z' fill='%23b84636' fill-opacity='.16' stroke='%23b84636' stroke-width='1.2' stroke-linejoin='round'/%3E%3Ccircle cx='15.7' cy='8.1' r='1.35' fill='%23d8892c'/%3E%3C/svg%3E");
  background-position: left 14px center;
  background-repeat: no-repeat;
  background-size: 18px 18px;
  color: rgba(22, 20, 15, 0.84);
  font-family: var(--font-main);
  font-size: 0.68rem;
  font-weight: 720;
  letter-spacing: -0.01em;
  line-height: 1;
  text-align: left;
  text-transform: none;
  box-shadow: var(--relief-contact);
  transform: translateY(0);
}

html[data-material-prototype="relief"] body.is-map-active .command-mast .share-button::before {
  content: none;
  display: none;
  animation: none;
}

html[data-material-prototype="relief"] body.is-map-active .command-mast .share-button:is(
  .is-context-ready,
  :hover,
  :focus-visible
) {
  border-color: rgba(184, 70, 54, 0.26);
  background-color: rgba(255, 250, 240, 0.98);
  color: var(--ink);
  box-shadow: var(--relief-lift);
  animation: none;
  transform: translateY(-1px);
}

html[data-material-prototype="relief"] body.is-map-active .command-mast .share-button:focus-visible {
  outline: none;
  box-shadow: var(--relief-focus);
}

html[data-material-prototype="relief"] body.is-map-active .command-mast .share-button:active {
  box-shadow: var(--relief-inset);
  transform: translateY(0);
}

html[data-material-prototype="relief"] body.is-map-active .command-mast .share-button:is(
  :disabled,
  .is-context-muted:disabled
) {
  border-color: rgba(55, 45, 31, 0.08);
  background-color: rgba(247, 241, 228, 0.5);
  color: rgba(22, 20, 15, 0.42);
  box-shadow: none;
  transform: none;
}

@media (min-width: 761px) and (max-width: 980px) and (min-height: 600px) and (orientation: landscape) {
  html[data-material-prototype="relief"] body.is-map-active .panel-controls > .command-mast {
    grid-template-columns: minmax(0, 1fr) 98px 72px 84px;
  }

  html[data-material-prototype="relief"] body.is-map-active .command-mast .share-button {
    width: 98px;
    min-width: 98px;
    max-width: 98px;
    padding: 0 9px 0 32px;
    background-position: left 10px center;
    background-size: 16px 16px;
    font-size: 0.6rem;
  }
}

/* Expanded mobile mode switch: a compact navigation control rather than
 * three adjacent dashboard buttons. The collapsed sheet keeps its denser
 * one-line switch so the map retains as much vertical room as possible. */
@media (max-width: 760px), (max-width: 980px) and (orientation: portrait), (max-width: 980px) and (max-height: 599px) {
  html[data-material-prototype="relief"] body.is-map-active
    #mobileSheet.mobile-sheet[data-snap="full"] > .mobile-mode-control {
    box-sizing: border-box;
    display: grid;
    grid-template-columns: 0.95fr 1.12fr 1fr;
    gap: 4px;
    width: 100%;
    min-width: 0;
    min-height: 58px;
    padding: 4px;
    overflow: hidden;
    border: 1px solid rgba(55, 45, 31, 0.1);
    border-radius: 14px;
    background: rgba(232, 224, 208, 0.4);
    box-shadow: var(--relief-inset);
  }

  html[data-material-prototype="relief"] body.is-map-active
    #mobileSheet.mobile-sheet[data-snap="full"] > .mobile-mode-control .mode-button {
    position: relative;
    box-sizing: border-box;
    display: grid;
    grid-template-columns: 17px minmax(0, 1fr);
    gap: 6px;
    align-items: center;
    justify-items: stretch;
    min-width: 0;
    min-height: 50px;
    padding: 6px 8px;
    overflow: hidden;
    border: 1px solid transparent;
    border-radius: 10px;
    background: transparent;
    box-shadow: none;
    color: rgba(17, 16, 14, 0.68);
    text-align: left;
    transform: none;
  }

  html[data-material-prototype="relief"] body.is-map-active
    #mobileSheet.mobile-sheet[data-snap="full"] > .mobile-mode-control .mode-button::before,
  html[data-material-prototype="relief"] body.is-map-active
    #mobileSheet.mobile-sheet[data-snap="full"] > .mobile-mode-control .mode-button::after {
    content: none;
    display: none;
  }

  html[data-material-prototype="relief"] body.is-map-active
    #mobileSheet.mobile-sheet[data-snap="full"] > .mobile-mode-control .mode-button + .mode-button {
    border-left-color: transparent;
  }

  html[data-material-prototype="relief"] body.is-map-active
    #mobileSheet.mobile-sheet[data-snap="full"] > .mobile-mode-control .mobile-mode-icon {
    display: block;
    grid-column: 1;
    width: 17px;
    height: 17px;
    opacity: 0.74;
    color: currentColor;
    background-color: currentColor;
  }

  html[data-material-prototype="relief"] body.is-map-active
    #mobileSheet.mobile-sheet[data-snap="full"] > .mobile-mode-control .mobile-mode-copy {
    display: grid;
    grid-column: 2;
    min-width: 0;
    align-content: center;
  }

  html[data-material-prototype="relief"] body.is-map-active
    #mobileSheet.mobile-sheet[data-snap="full"] > .mobile-mode-control .mobile-mode-copy strong {
    display: block;
    width: 100%;
    max-width: none;
    overflow: visible;
    color: inherit;
    font: 700 0.75rem/1.08 var(--font-main);
    letter-spacing: 0;
    text-align: left;
    text-overflow: clip;
    text-transform: none;
    text-wrap: balance;
    white-space: normal;
  }

  html[data-material-prototype="relief"] body.is-map-active
    #mobileSheet.mobile-sheet[data-snap="full"] > .mobile-mode-control .mobile-mode-copy em,
  html[data-material-prototype="relief"] body.is-map-active
    #mobileSheet.mobile-sheet[data-snap="full"] > .mobile-mode-control .mobile-mode-selection-rail {
    display: none;
  }

  html[data-material-prototype="relief"] body.is-map-active
    #mobileSheet.mobile-sheet[data-snap="full"] > .mobile-mode-control .mode-button:not(.is-active):hover {
    border-color: rgba(55, 45, 31, 0.08);
    background: rgba(255, 253, 247, 0.48);
    color: var(--ink);
  }

  html[data-material-prototype="relief"] body.is-map-active
    #mobileSheet.mobile-sheet[data-snap="full"] > .mobile-mode-control .mode-button.is-active {
    border-color: rgba(0, 0, 0, 0.72);
    background: var(--ink);
    color: #fffdf7;
    box-shadow:
      0 3px 8px rgba(17, 16, 14, 0.17),
      inset 0 1px 0 rgba(255, 255, 255, 0.12);
  }

  html[data-material-prototype="relief"] body.is-map-active
    #mobileSheet.mobile-sheet[data-snap="full"] > .mobile-mode-control .mode-button.is-active .mobile-mode-icon {
    opacity: 0.94;
  }

  html[data-material-prototype="relief"] body.is-map-active
    #mobileSheet.mobile-sheet[data-snap="full"] > .mobile-mode-control .mode-button:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 3px rgba(201, 53, 43, 0.2);
  }

  @media (max-width: 340px) {
    html[data-material-prototype="relief"] body.is-map-active
      #mobileSheet.mobile-sheet[data-snap="full"] > .mobile-mode-control .mode-button {
      grid-template-columns: 15px minmax(0, 1fr);
      gap: 4px;
      padding-inline: 6px;
    }

    html[data-material-prototype="relief"] body.is-map-active
      #mobileSheet.mobile-sheet[data-snap="full"] > .mobile-mode-control .mobile-mode-icon {
      width: 15px;
      height: 15px;
    }

    html[data-material-prototype="relief"] body.is-map-active
      #mobileSheet.mobile-sheet[data-snap="full"] > .mobile-mode-control .mobile-mode-copy strong {
      font-size: 0.7rem;
    }
  }
}

/* The mobile sheet reads as one substantial sheet of paper above the map. */
@media (max-width: 980px) {
  html[data-material-prototype="relief"] body.is-map-active .mobile-sheet {
    border-color: rgba(55, 45, 31, 0.18);
    border-radius: 22px 22px 0 0;
    box-shadow:
      0 -12px 30px rgba(55, 45, 31, 0.12),
      0 -2px 6px rgba(55, 45, 31, 0.065),
      inset 0 1px 0 rgba(255, 255, 255, 0.86);
  }

  html[data-material-prototype="relief"] body.is-map-active .mobile-sheet-handle::before {
    border-radius: 99px;
    background: rgba(17, 16, 14, 0.62);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.65);
  }

  html[data-material-prototype="relief"] body.is-index-mode .station-index-workspace.is-mobile .station-index-story-header > .station-index-tabs {
    gap: 4px;
    padding: 4px;
    border-radius: 13px;
  }

  html[data-material-prototype="relief"] body.is-index-mode .station-index-workspace.is-mobile .station-index-story-header > .station-index-tabs .station-index-tab {
    border-radius: 9px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html[data-material-prototype="relief"] * {
    scroll-behavior: auto;
  }
}

/* ------------------------------------------------------------
 * Contextual sliding selection surfaces
 * ------------------------------------------------------------ */
html[data-material-prototype="relief"] body.is-map-active [data-segmented-indicator].has-sliding-indicator {
  --segmented-indicator-duration: 260ms;
  --segmented-indicator-ease: cubic-bezier(0.22, 1, 0.36, 1);
  position: relative;
  isolation: isolate;
}

html[data-material-prototype="relief"] body.is-map-active [data-segmented-indicator].has-sliding-indicator::before {
  content: "";
  position: absolute;
  z-index: 0;
  left: 0;
  width: var(--segmented-indicator-width, 0px);
  pointer-events: none;
  transform: translateX(var(--segmented-indicator-x, 0px));
}

html[data-material-prototype="relief"] body.is-map-active [data-segmented-indicator].has-sliding-indicator.is-indicator-ready::before {
  transition:
    width var(--segmented-indicator-duration) var(--segmented-indicator-ease),
    transform var(--segmented-indicator-duration) var(--segmented-indicator-ease),
    background-color 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease;
}

/* Product navigation: one decisive ink carriage, preserving each mode's
 * existing icon while the carriage moves beneath it. */
html[data-material-prototype="relief"] body.is-map-active [data-segmented-indicator="mode"].has-sliding-indicator {
  --segmented-indicator-duration: 285ms;
  --segmented-indicator-ease: cubic-bezier(0.2, 0.86, 0.24, 1);
}

html[data-material-prototype="relief"] body.is-map-active [data-segmented-indicator="mode"].has-sliding-indicator::before {
  top: var(--relief-segment-padding);
  bottom: var(--relief-segment-padding);
  border: 1px solid rgba(0, 0, 0, 0.72);
  border-radius: var(--relief-segment-radius-inner);
  background: var(--ink);
  box-shadow:
    0 3px 8px rgba(17, 16, 14, 0.17),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

html[data-material-prototype="relief"] body.is-map-active [data-segmented-indicator="mode"] .mode-button {
  position: relative;
  z-index: 1;
  background-color: transparent;
  box-shadow: none;
}

html[data-material-prototype="relief"] body.is-map-active [data-segmented-indicator="mode"] .mode-button.is-active {
  border-color: transparent;
  background-color: transparent;
  box-shadow: none;
  color: #fffdf7;
}

html[data-material-prototype="relief"] body.is-map-active [data-segmented-indicator="mode"] .mode-button.is-active :is(strong, em) {
  color: inherit;
}

html[data-material-prototype="relief"] body.is-map-active [data-segmented-indicator="mode"] .mode-button:focus-visible {
  outline: 0;
  outline-offset: 0;
  box-shadow: inset 0 0 0 2px rgba(17, 16, 14, 0.34);
}

html[data-material-prototype="relief"] body.is-map-active [data-segmented-indicator="mode"] .mode-button.is-active:focus-visible {
  box-shadow: inset 0 0 0 2px rgba(255, 253, 247, 0.72);
}

/* Travel surfaces: a quicker, lighter carriage. Its tint responds to the
 * active travel model without becoming a colored underline or rail badge. */
html[data-material-prototype="relief"] body.is-map-active {
  --surface-indicator-border: rgba(201, 53, 43, 0.22);
  --surface-indicator-fill: rgba(255, 249, 238, 0.98);
}

html[data-material-prototype="relief"] body.is-map-active.is-walking-surface {
  --surface-indicator-border: rgba(47, 127, 137, 0.3);
  --surface-indicator-fill: rgba(239, 248, 244, 0.98);
}

html[data-material-prototype="relief"] body.is-map-active.is-car-surface {
  --surface-indicator-border: rgba(171, 111, 37, 0.28);
  --surface-indicator-fill: rgba(251, 245, 229, 0.98);
}

html[data-material-prototype="relief"] body.is-map-active.is-comparison-surface {
  --surface-indicator-border: rgba(74, 92, 96, 0.28);
  --surface-indicator-fill: rgba(241, 246, 243, 0.98);
}

html[data-material-prototype="relief"] body.is-map-active [data-segmented-indicator="surface"].has-sliding-indicator {
  --segmented-indicator-duration: 225ms;
  --segmented-indicator-ease: cubic-bezier(0.2, 0.78, 0.24, 1);
}

html[data-material-prototype="relief"] body.is-map-active [data-segmented-indicator="surface"].has-sliding-indicator::before {
  top: var(--relief-segment-padding);
  bottom: var(--relief-segment-padding);
  border: 1px solid var(--surface-indicator-border);
  border-radius: var(--relief-segment-radius-inner);
  background-color: var(--surface-indicator-fill);
  box-shadow: var(--relief-lift);
}

html[data-material-prototype="relief"] body.is-map-active [data-segmented-indicator="surface"] .surface-story-button {
  position: relative;
  z-index: 1;
  border-color: transparent;
  border-radius: var(--relief-segment-radius-inner);
  background-color: transparent;
  box-shadow: none;
  transform: none;
}

html[data-material-prototype="relief"] body.is-map-active [data-segmented-indicator="surface"] .surface-story-button.is-active {
  border-color: transparent;
  background-color: transparent;
  box-shadow: none;
  color: var(--ink);
}

html[data-material-prototype="relief"] body.is-map-active [data-segmented-indicator="surface"] .surface-story-button:focus-visible {
  outline: 0;
  outline-offset: 0;
  box-shadow: inset 0 0 0 2px rgba(17, 16, 14, 0.32);
}

/* Information tabs sit one tier below product navigation: a paper rail and
 * moving accent rule communicate the content handoff without creating a
 * second raised or ink-filled selection. */
html[data-material-prototype="relief"] body.is-map-active [data-segmented-indicator="dossier"].has-sliding-indicator {
  --segmented-indicator-duration: 305ms;
  --segmented-indicator-ease: cubic-bezier(0.22, 1, 0.36, 1);
  gap: 0;
  padding: 0 4px;
  border: 0;
  border-radius: 0;
  background: rgba(255, 253, 247, 0.7);
  box-shadow: inset 0 -1px 0 rgba(55, 45, 31, 0.08);
}

html[data-material-prototype="relief"] body.is-map-active [data-segmented-indicator="dossier"].has-sliding-indicator::before {
  top: auto;
  bottom: 2px;
  height: 2px;
  border: 0;
  border-radius: 999px;
  background: var(--accent);
  box-shadow: none;
}

html[data-material-prototype="relief"] body.is-map-active [data-segmented-indicator="dossier"] > button {
  position: relative;
  z-index: 1;
  border-color: transparent;
  border-radius: 6px 6px 0 0;
  background: transparent;
  box-shadow: none;
  transform: none;
}

html[data-material-prototype="relief"] body.is-map-active [data-segmented-indicator="dossier"] > button:is(.is-active, [aria-selected="true"]) {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  color: var(--ink);
}

html[data-material-prototype="relief"] body.is-map-active [data-segmented-indicator="dossier"] > button:focus-visible {
  outline: 0;
  outline-offset: 0;
  box-shadow: inset 0 0 0 2px rgba(17, 16, 14, 0.3);
}

/* The desktop dossier owner fixes a compact structural height earlier in the
 * cascade. Reapply the content rail at that same ownership boundary. */
@media (min-width: 981px), (min-width: 761px) and (max-width: 980px) and (min-height: 600px) and (orientation: landscape) {
  html[data-material-prototype="relief"] body.is-map-active.has-origin
    .side-panel > .atlas-dossier-tabs[data-segmented-indicator="dossier"].has-sliding-indicator:not([hidden]) {
    flex: 0 0 48px;
    height: 48px;
    min-height: 48px;
    align-items: center;
    padding: 0 4px;
    border: 0;
    border-radius: 0;
    background: rgba(255, 253, 247, 0.7);
    box-shadow: inset 0 -1px 0 rgba(55, 45, 31, 0.08);
  }

  html[data-material-prototype="relief"] body.is-map-active.has-origin
    .side-panel > .atlas-dossier-tabs[data-segmented-indicator="dossier"].has-sliding-indicator:not([hidden]) > button {
    border-radius: 6px 6px 0 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  html[data-material-prototype="relief"] body.is-map-active [data-segmented-indicator].has-sliding-indicator.is-indicator-ready::before {
    transition: none;
  }
}

/* Plan Commute: destination-first Home Search --------------------------------
 * The workflow uses the reading face for decisions and reserves mono for tiny
 * operational stamps. Ranking is a compact instrument at the top; the final
 * action is the only full-width dark command. */
html[data-material-prototype="relief"] body.is-route-mode .home-finder-progress b {
  border-radius: 50%;
  background: rgba(255, 250, 240, 0.96);
  box-shadow: var(--relief-contact);
}

html[data-material-prototype="relief"] body.is-route-mode .home-finder-progress > li:is(.is-active, .is-complete) b {
  border-color: #b84635;
}

html[data-material-prototype="relief"] body.is-route-mode .home-finder-progress > li.is-complete b {
  background: #b84635;
  color: #fffdf7;
}

html[data-material-prototype="relief"] body.is-route-mode .home-finder-progress > li.is-active b {
  background: rgba(255, 250, 240, 0.98);
  color: #8b2f29;
  box-shadow:
    0 0 0 3px rgba(184, 70, 53, 0.08),
    var(--relief-contact);
}

html[data-material-prototype="relief"] body.is-route-mode .home-finder-baseline {
  border: 0;
  background: transparent;
  box-shadow: none;
}

html[data-material-prototype="relief"] body.is-route-mode .home-finder-destination-intro {
  gap: 3px;
  padding: 5px 2px 8px;
}

html[data-material-prototype="relief"] body.is-route-mode .home-finder-destination-intro > span {
  display: none;
}

html[data-material-prototype="relief"] body.is-route-mode .home-finder-destination-intro > strong {
  font: 760 1.08rem/1.16 var(--font-main);
  letter-spacing: -0.015em;
}

html[data-material-prototype="relief"] body.is-route-mode .home-finder-destination-intro > p {
  max-width: 42ch;
  margin: 0;
  font: 540 0.82rem/1.38 var(--font-main);
}

html[data-material-prototype="relief"] body.is-route-mode .home-finder-add-heading,
html[data-material-prototype="relief"] body.is-route-mode .home-finder-baseline > header,
html[data-material-prototype="relief"] body.is-route-mode .home-finder-add-heading label,
html[data-material-prototype="relief"] body.is-route-mode .home-finder-place-controls label,
html[data-material-prototype="relief"] body.is-route-mode .home-finder-place-controls select,
html[data-material-prototype="relief"] body.is-route-mode .home-finder-add-input-row input,
html[data-material-prototype="relief"] body.is-route-mode .home-finder-baseline-input-row input,
html[data-material-prototype="relief"] body.is-route-mode .home-finder-map-pick-button,
html[data-material-prototype="relief"] body.is-route-mode .home-finder-clear-button,
html[data-material-prototype="relief"] body.is-route-mode .commute-fit-priority button,
html[data-material-prototype="relief"] body.is-route-mode .commute-fit-run {
  font-family: var(--font-main);
}

html[data-material-prototype="relief"] body.is-route-mode :is(.home-finder-add-heading, .home-finder-baseline > header) {
  align-items: baseline;
  color: var(--ink);
  font-size: 0.8rem;
  line-height: 1.2;
}

html[data-material-prototype="relief"] body.is-route-mode .home-finder-add-heading label {
  font-weight: 720;
  letter-spacing: 0;
  text-transform: none;
}

html[data-material-prototype="relief"] body.is-route-mode .home-finder-baseline > header > span {
  font-weight: 720;
  letter-spacing: 0;
  text-transform: none;
}

html[data-material-prototype="relief"] body.is-route-mode :is(.home-finder-add-heading, .home-finder-baseline > header) small {
  font: 650 0.7rem/1 var(--font-main);
}

html[data-material-prototype="relief"] body.is-route-mode :is(.home-finder-add-input-row, .home-finder-baseline-input-row) {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}

html[data-material-prototype="relief"] body.is-route-mode :is(.home-finder-add-input-row, .home-finder-baseline-input-row) input {
  border-radius: var(--relief-control-radius);
  background: rgba(255, 253, 247, 0.88);
  box-shadow: var(--relief-inset);
  font-size: 0.88rem;
}

html[data-material-prototype="relief"] body.is-route-mode :is(.home-finder-map-pick-button, .home-finder-clear-button) {
  display: inline-flex;
  gap: 7px;
  align-items: center;
  justify-content: center;
  min-width: 104px;
  border-color: var(--relief-edge);
  border-radius: var(--relief-control-radius);
  background: rgba(255, 250, 240, 0.95);
  box-shadow: var(--relief-lift);
  font-size: 0.78rem;
  transition:
    transform 160ms cubic-bezier(0.2, 0.78, 0.24, 1),
    background-color 160ms ease,
    box-shadow 160ms ease;
}

html[data-material-prototype="relief"] body.is-route-mode .home-finder-map-pick-button::before {
  content: "";
  width: 8px;
  height: 8px;
  border: 1px solid currentColor;
  border-radius: 50%;
  box-shadow: inset 0 0 0 2px rgba(255, 253, 247, 0.7);
}

html[data-material-prototype="relief"] body.is-route-mode .home-finder-map-pick-button[aria-pressed="true"] {
  border-color: #8f2e24;
  background: #b84635;
  color: #fffdf7;
  box-shadow:
    inset 0 3px 8px rgba(72, 17, 12, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    0 1px 2px rgba(17, 16, 14, 0.1);
  transform: translateY(1px);
}

html[data-material-prototype="relief"] body.is-route-mode .home-finder-map-pick-button[aria-pressed="true"]::before {
  border-color: rgba(255, 253, 247, 0.9);
  background: #fffdf7;
  box-shadow: 0 0 0 3px rgba(255, 253, 247, 0.16);
}

html[data-material-prototype="relief"] body.is-route-mode .home-finder-starter {
  min-height: 44px;
  border-color: var(--relief-edge);
  border-radius: var(--relief-control-radius);
  background: rgba(255, 250, 240, 0.94);
  box-shadow: var(--relief-contact);
  transition:
    transform 160ms cubic-bezier(0.2, 0.78, 0.24, 1),
    box-shadow 160ms ease,
    border-color 160ms ease;
}

html[data-material-prototype="relief"] body.is-route-mode .home-finder-starter:is(:hover, :focus-visible) {
  border-color: rgba(184, 70, 53, 0.52);
  box-shadow: var(--relief-lift);
  transform: translateY(-1px);
}

html[data-material-prototype="relief"] body.is-route-mode .home-finder-starter-rail > i {
  background: rgba(255, 250, 240, 0.98);
}
html[data-material-prototype="relief"] body.is-route-mode .home-finder-starter:active {
  transform: translateY(1px);
  box-shadow: var(--relief-inset);
}

html[data-material-prototype="relief"] body.is-route-mode .home-finder-place-controls label {
  color: rgba(17, 16, 14, 0.68);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.025em;
  text-transform: none;
}

html[data-material-prototype="relief"] body.is-route-mode .home-finder-place-controls select {
  border-radius: 9px;
  background-color: rgba(255, 253, 247, 0.9);
  box-shadow: var(--relief-inset);
  font-size: 0.78rem;
}

html[data-material-prototype="relief"] body.is-route-mode .home-finder-ranking-options {
  container: commute-fit-ranking / inline-size;
  gap: 8px;
  padding: 10px;
  border: 1px solid rgba(55, 45, 31, 0.13);
  border-radius: 14px;
  background: rgba(232, 224, 208, 0.36);
  box-shadow: var(--relief-inset);
}

html[data-material-prototype="relief"] body.is-route-mode .commute-fit-priority-label {
  color: rgba(17, 16, 14, 0.74);
  font: 720 0.75rem/1.15 var(--font-main);
  letter-spacing: 0;
  text-transform: none;
}

html[data-material-prototype="relief"] body.is-route-mode .commute-fit-priority {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  overflow: visible;
  border: 0;
  background: transparent;
}

html[data-material-prototype="relief"] body.is-route-mode .commute-fit-priority button {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 6px;
  align-items: center;
  width: 100%;
  min-width: 0;
  min-height: 40px;
  padding: 6px 8px;
  border: 1px solid var(--relief-edge);
  border-radius: 10px;
  background: rgba(255, 250, 240, 0.94);
  box-shadow: var(--relief-contact);
  color: rgba(17, 16, 14, 0.78);
  font-size: 0.69rem;
  font-weight: 680;
  line-height: 1.08;
  overflow: hidden;
  text-align: left;
  white-space: normal;
}

html[data-material-prototype="relief"] body.is-route-mode .commute-fit-priority button::before {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border: 1px solid rgba(17, 16, 14, 0.18);
  border-radius: 7px;
  background: rgba(232, 224, 208, 0.52);
  color: currentColor;
  font: 750 0.8rem/1 var(--font-main);
}

html[data-material-prototype="relief"] body.is-route-mode .commute-fit-priority button[data-commute-fit-priority="balanced"]::before { content: "◒"; }
html[data-material-prototype="relief"] body.is-route-mode .commute-fit-priority button[data-commute-fit-priority="fastest"]::before { content: "→"; }
html[data-material-prototype="relief"] body.is-route-mode .commute-fit-priority button[data-commute-fit-priority="fairest"]::before { content: "="; }
html[data-material-prototype="relief"] body.is-route-mode .commute-fit-priority button[data-commute-fit-priority="low-transfer"]::before { content: "—"; }

html[data-material-prototype="relief"] body.is-route-mode .commute-fit-priority button.is-active {
  border-color: #11100e;
  background: #181613;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    0 2px 4px rgba(17, 16, 14, 0.16);
  color: #fffdf7;
  transform: none;
}

html[data-material-prototype="relief"] body.is-route-mode .commute-fit-priority button.is-active::before {
  border-color: rgba(255, 253, 247, 0.2);
  background: rgba(255, 253, 247, 0.1);
}

html[data-material-prototype="relief"] body.is-route-mode .commute-fit-priority button:disabled {
  filter: grayscale(1);
  opacity: 0.42;
}

html[data-material-prototype="relief"] body.is-route-mode .commute-fit-priority-description {
  min-height: 0;
  margin: 0 2px;
  color: rgba(17, 16, 14, 0.6);
  font: 520 0.75rem/1.32 var(--font-main);
}

html[data-material-prototype="relief"] body.is-route-mode .secondary-button.commute-fit-run {
  display: flex;
  width: 100%;
  min-height: 52px;
  justify-self: stretch;
  padding: 10px 14px;
  border: 1px solid #11100e;
  border-radius: 12px;
  background: #181613;
  box-shadow: var(--relief-lift);
  color: #fffdf7;
  font-size: 0.9rem;
  font-weight: 760;
  letter-spacing: -0.005em;
}

html[data-material-prototype="relief"] body.is-route-mode .secondary-button.commute-fit-run::before {
  display: block;
  width: 8px;
  height: 8px;
  border: 0;
  border-radius: 50%;
  background: #ef5a49;
  box-shadow: 0 0 0 3px rgba(239, 90, 73, 0.14);
}

html[data-material-prototype="relief"] body.is-route-mode .secondary-button.commute-fit-run::after {
  content: "→";
  margin-left: auto;
  font-size: 1rem;
}

html[data-material-prototype="relief"] body.is-route-mode .secondary-button.commute-fit-run:is(:hover, :focus-visible) {
  background: #2a2722;
  color: #fffdf7;
  transform: translateY(-1px);
}

html[data-material-prototype="relief"] body.is-route-mode .secondary-button.commute-fit-run[hidden] {
  display: none;
}

html[data-material-prototype="relief"] body.is-route-mode .secondary-button.commute-fit-run:disabled:not([hidden]) {
  border-color: rgba(17, 16, 14, 0.16);
  background: rgba(232, 224, 208, 0.42);
  box-shadow: none;
  color: rgba(17, 16, 14, 0.48);
  opacity: 1;
  transform: none;
}

html[data-material-prototype="relief"] body.is-route-mode .route-return-button {
  border-color: var(--relief-edge);
  border-radius: 999px;
  background: rgba(255, 250, 240, 0.96);
  box-shadow: var(--relief-contact);
  transition:
    transform 160ms cubic-bezier(0.2, 0.78, 0.24, 1),
    box-shadow 160ms ease;
}

html[data-material-prototype="relief"] body.is-route-mode .route-return-button:is(:hover, :focus-visible) {
  box-shadow: var(--relief-lift);
  transform: translateX(-2px);
}

@media (max-width: 980px) {
  html[data-material-prototype="relief"] body.is-route-mode #mobileSheet.mobile-sheet[data-snap="full"]:has(> .mobile-route-card[data-commute-task="find"]) > #mobilePrimarySummary {
    display: none;
  }
}

@container commute-fit-ranking (min-width: 500px) {
  html[data-material-prototype="relief"] body.is-route-mode .commute-fit-priority {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 340px) {
  html[data-material-prototype="relief"] body.is-route-mode .home-finder-add-input-row {
    grid-template-columns: minmax(0, 1fr);
  }

  html[data-material-prototype="relief"] body.is-route-mode .home-finder-map-pick-button {
    width: 100%;
  }
}

/* Mobile Plan controls retain the relief language without inheriting the
 * roomier desktop proportions. The 36px faces sit inside 44px interaction
 * rows, keeping touch behavior generous while clarifying their secondary role. */
@media (max-width: 760px) {
  html[data-material-prototype="relief"] body.is-route-mode
    #mobileSheet[data-snap="half"] .mobile-route-card .commute-task-index {
    --relief-segment-padding: 4px;
    min-height: 44px;
    padding: 4px;
    overflow: visible;
    border-radius: var(--relief-control-radius);
  }

  html[data-material-prototype="relief"] body.is-route-mode
    #mobileSheet[data-snap="half"] .mobile-route-card .commute-task-index a {
    min-height: 36px;
    height: 36px;
    padding: 0 10px;
    border-radius: 7px;
    font-weight: 650;
  }

  html[data-material-prototype="relief"] body.is-route-mode .mobile-route-card
    .secondary-button.commute-fit-run {
    min-height: 44px;
    padding: 8px 12px;
    border-radius: 9px;
    font-size: 0.8125rem;
  }

  html[data-material-prototype="relief"] body.is-route-mode .mobile-route-card
    .home-finder-starter {
    min-height: 36px;
    border-radius: 8px;
    box-shadow: none;
  }
}

/* Location is deliberately detached from the zoom instrument: it shares the
 * same material language, but its own contact shadow makes the action read as
 * recentering rather than another zoom step. */
html[data-material-prototype="relief"] body.is-map-active .map-locate-button {
  border-color: var(--relief-edge-strong);
  border-radius: 10px;
  background-color: rgba(255, 250, 240, 0.96);
  box-shadow: var(--relief-float);
}

html[data-material-prototype="relief"] body.is-map-active .map-locate-button:is(:hover, :focus-visible) {
  border-color: rgba(201, 53, 43, 0.34);
  background-color: rgba(255, 253, 247, 0.99);
  box-shadow: var(--relief-lift);
}

html[data-material-prototype="relief"] body.is-map-active .map-locate-button:active,
html[data-material-prototype="relief"] body.is-map-active .map-locate-button.is-control-pressed {
  background-color: rgba(232, 224, 208, 0.62);
  box-shadow: var(--relief-inset);
  transform: translateY(1px);
}

html[data-material-prototype="relief"] body.is-map-active .map-locate-button[data-locate-state="success"] {
  background-color: rgba(234, 247, 238, 0.97);
  box-shadow: 0 0 0 3px rgba(23, 122, 74, 0.1), var(--relief-float);
}

html[data-material-prototype="relief"] body.is-map-active .map-locate-button[data-locate-state="denied"] {
  background-color: rgba(251, 236, 232, 0.97);
}

html[data-material-prototype="relief"] body.is-map-active .map-locate-button[data-locate-state="unavailable"] {
  background-color: rgba(242, 238, 229, 0.96);
  box-shadow: var(--relief-contact);
}

/* Hills is Locate's raised key while off; on, it stays pressed into the
 * plate in contour ink (material-refresh.css). */
html[data-material-prototype="relief"] body.is-map-active .map-hills-button:not([aria-pressed="true"]) {
  border-color: var(--relief-edge-strong);
  border-radius: 10px;
  background-color: rgba(255, 250, 240, 0.96);
  box-shadow: var(--relief-float);
}

html[data-material-prototype="relief"] body.is-map-active .map-hills-button[aria-pressed="true"] {
  border-radius: 10px;
}

html[data-material-prototype="relief"] body.is-map-active .map-hills-button:not([aria-pressed="true"]):is(:hover, :focus-visible) {
  border-color: rgba(201, 53, 43, 0.34);
  background-color: rgba(255, 253, 247, 0.99);
  box-shadow: var(--relief-lift);
}

html[data-material-prototype="relief"] body.is-map-active .map-hills-button:not([aria-pressed="true"]):active {
  background-color: rgba(232, 224, 208, 0.62);
  box-shadow: var(--relief-inset);
  transform: translateY(1px);
}

@media (min-width: 981px) and (max-width: 1120px) {
  html[data-material-prototype="relief"] body.is-map-active.has-origin :is(
    .map-corner-actions,
    .map-zoom-controls,
    .map-locate-button
  ) {
    right: calc(clamp(310px, 32vw, 340px) + 24px);
  }
}

/* Compact surface switcher: one stable raised control, with the remaining
 * modes unfolding as a lighter paper wing beside it. */
html[data-material-prototype="relief"] body.is-map-active .map-surface-rail .surface-menu-button {
  border-color: var(--relief-edge-strong);
  background: linear-gradient(180deg, rgba(255, 253, 247, 0.99), rgba(247, 241, 228, 0.97));
  box-shadow: var(--relief-lift);
}

html[data-material-prototype="relief"] body.is-map-active .map-surface-rail .surface-menu-button:is(:hover, :focus-visible),
html[data-material-prototype="relief"] body.is-map-active .map-surface-rail.is-open .surface-menu-button {
  border-color: rgba(55, 45, 31, 0.3);
  background: rgba(255, 250, 240, 0.99);
  box-shadow: var(--relief-float);
}

html[data-material-prototype="relief"] body.is-map-active .map-surface-rail .surface-menu-button:active {
  background: rgba(232, 224, 208, 0.62);
  box-shadow: var(--relief-inset);
}

html[data-material-prototype="relief"] body.is-map-active .map-surface-rail:not(.is-persistent) [data-segmented-indicator="surface"]::before {
  content: none;
}

html[data-material-prototype="relief"] body.is-map-active .map-surface-rail.is-persistent [data-segmented-indicator="surface"].has-sliding-indicator {
  --segmented-indicator-duration: 300ms;
  --segmented-indicator-ease: cubic-bezier(0.22, 1, 0.36, 1);
  gap: var(--relief-segment-gap);
  padding: var(--relief-segment-padding);
  border-color: var(--relief-map-segment-edge);
  border-radius: var(--relief-segment-radius);
  background: var(--relief-map-segment-tray);
  box-shadow: var(--relief-inset);
}

html[data-material-prototype="relief"] body.is-map-active .map-surface-rail.is-persistent [data-segmented-indicator="surface"].has-sliding-indicator::before {
  content: "";
  border-color: var(--surface-indicator-border);
  border-radius: var(--relief-segment-radius-inner);
  background-color: var(--surface-indicator-fill);
  box-shadow: var(--relief-lift);
}

html[data-material-prototype="relief"] body.is-map-active .map-surface-rail .primary-surface-story-toggle {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}

html[data-material-prototype="relief"] body.is-map-active .map-surface-rail.is-open .primary-surface-story-toggle {
  border-color: var(--relief-edge-strong);
  background: rgba(255, 250, 240, 0.97);
  box-shadow: var(--relief-float);
}

html[data-material-prototype="relief"] body.is-map-active .map-surface-rail.is-persistent .primary-surface-story-toggle {
  border-color: var(--relief-map-segment-edge);
  border-radius: var(--relief-segment-radius);
  background: var(--relief-map-segment-tray);
  box-shadow: var(--relief-inset);
}

html[data-material-prototype="relief"] body.is-map-active .map-surface-rail.is-open .primary-surface-story-toggle > .surface-story-button:not(.is-active):is(:hover, :focus-visible) {
  background-color: rgba(232, 224, 208, 0.48);
  box-shadow: var(--relief-inset);
}

/* The carriage owns selection motion; labels stay on the instrument plane. */
html[data-material-prototype="relief"] body.is-map-active .mode-button:is(:hover, :active) { transform: none; }
html body.is-route-mode .spatial-view-guide { display: none; }
html body.is-map-active.is-route-mode #mobileMapControlRail .spatial-view-guide { display: none; }
html body.is-route-mode #mobileMapSpatialViewPill { display: none; }
html body .mast-brand:is(:hover, :focus-visible) { background-color: #d9ceb622; }
html body .mast-brand:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }