/*
 * Material refresh.
 *
 * This final cascade owns the atlas chrome as one family: opaque paper,
 * hairlines, a contact edge and a single lifted state. The map remains the
 * visual event; controls sit on the plate instead of hovering above it.
 */

:is(#stationSearch, #mobileStationSearch, #mobileMapStationSearch)::-webkit-search-cancel-button {
  display: none;
}

/* Locate is a secondary map action, not part of the station-selection
 * sentence. Its state remains visible without changing the icon's DOM, which
 * keeps the control stable while geolocation resolves. */
body.is-map-active .map-locate-button {
  --locate-state-color: rgba(22, 20, 15, 0.78);
  position: absolute;
  z-index: var(--map-z-chrome, 8);
  top: 154px;
  right: 14px;
  display: grid;
  box-sizing: border-box;
  width: 44px;
  min-width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 0;
  place-items: center;
  overflow: visible;
  border: 1px solid rgba(17, 16, 14, 0.22);
  border-radius: var(--control-radius, 8px);
  background: rgba(255, 253, 247, 0.94);
  color: var(--locate-state-color);
  box-shadow: var(--shadow-contact);
  cursor: pointer;
  transition:
    border-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),
    color var(--motion-duration-fast) var(--motion-ease-standard),
    transform var(--motion-duration-fast) var(--motion-ease-standard),
    opacity var(--motion-duration-fast) var(--motion-ease-standard);
}

/* Time Rings has its own diagram zoom. Keep Locate beneath that two-button
 * utility stack so every action retains a distinct hit area. */
body.is-map-active.is-time-rings-view .map-locate-button {
  top: 154px;
}

body.is-map-active .map-locate-button .map-locate-icon {
  width: 21px;
  height: 21px;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.65;
  stroke-linecap: round;
  transform-origin: center;
}

body.is-map-active .map-locate-button .map-locate-icon-dot {
  fill: currentColor;
  stroke: none;
}

body.is-map-active .map-locate-button:is(:hover, :focus-visible) {
  border-color: rgba(201, 53, 43, 0.4);
  background-color: rgba(255, 253, 247, 0.99);
  color: var(--accent);
  transform: translateY(-1px);
}

body.is-map-active .map-locate-button:focus-visible {
  outline: 2px solid rgba(201, 53, 43, 0.46);
  outline-offset: 2px;
}

body.is-map-active .map-locate-button::after {
  content: attr(data-locate-tooltip);
  position: absolute;
  top: 50%;
  right: calc(100% + 9px);
  width: max-content;
  max-width: 190px;
  padding: 6px 8px;
  border: 1px solid rgba(17, 16, 14, 0.18);
  border-radius: 6px;
  background: rgba(22, 20, 15, 0.94);
  color: #fffdf7;
  font: 700 0.625rem/1.2 var(--font-main);
  letter-spacing: 0.01em;
  opacity: 0;
  transform: translate(4px, -50%);
  transition:
    opacity 120ms var(--motion-ease-standard),
    transform 120ms var(--motion-ease-standard);
  pointer-events: none;
}

body.is-map-active .map-locate-button:is(:hover, :focus-visible)::after {
  opacity: 1;
  transform: translate(0, -50%);
}

body.is-map-active .map-locate-button[data-locate-state="locating"] {
  --locate-state-color: #a12d26;
  cursor: progress;
  opacity: 1;
}

body.is-map-active .map-locate-button[data-locate-state="locating"]::before {
  content: "";
  position: absolute;
  inset: 7px;
  border: 2px solid rgba(161, 45, 38, 0.2);
  border-top-color: #a12d26;
  border-radius: 50%;
  animation: map-locate-spin 760ms linear infinite;
}

body.is-map-active .map-locate-button[data-locate-state="success"] {
  --locate-state-color: #177a4a;
  border-color: rgba(23, 122, 74, 0.4);
  background-color: rgba(234, 247, 238, 0.97);
  box-shadow: 0 0 0 3px rgba(23, 122, 74, 0.1), var(--shadow-contact);
}

body.is-map-active .map-locate-button[data-locate-state="denied"] {
  --locate-state-color: #b33128;
  border-color: rgba(179, 49, 40, 0.44);
  background-color: rgba(251, 236, 232, 0.97);
}

body.is-map-active .map-locate-button[data-locate-state="denied"]::before {
  content: "!";
  position: absolute;
  top: 3px;
  right: 3px;
  display: grid;
  width: 13px;
  height: 13px;
  place-items: center;
  border-radius: 50%;
  background: #b33128;
  color: #fffdf7;
  font: 800 0.55rem/1 var(--font-main);
}

body.is-map-active .map-locate-button[data-locate-state="unavailable"] {
  --locate-state-color: rgba(22, 20, 15, 0.42);
  border-color: rgba(17, 16, 14, 0.16);
  background-color: rgba(242, 238, 229, 0.96);
}

body.is-map-active .map-locate-button[data-locate-state="unavailable"]::before {
  content: "";
  position: absolute;
  width: 24px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transform: rotate(-45deg);
}

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

/* The mobile map owns one location action. The full information sheet keeps
 * a labeled fallback for people who begin with search instead of the map. */
@media (max-width: 760px), (max-width: 980px) and (orientation: portrait), (max-width: 980px) and (max-height: 599px) {
  body.is-map-active .map-locate-button {
    top: calc(env(safe-area-inset-top) + 14px);
    right: calc(env(safe-area-inset-right) + 12px);
  }

  body.is-map-active.is-time-rings-view .map-locate-button {
    top: calc(env(safe-area-inset-top) + 64px);
  }

  html body.is-map-active #mobileSheet #mobileLocateButton .mobile-locate-icon {
    flex: 0 0 auto;
    width: 15px;
    height: 15px;
  }

  html body.is-map-active #mobileSheet #mobileLocateButton .mobile-locate-icon::before {
    width: 20px;
  }

  html body.is-map-active #mobileSheet #mobileLocateButton .mobile-locate-icon::after {
    height: 20px;
  }

  body.is-map-active:is(.is-mobile-sheet-expanded, .is-mobile-sheet-full) .map-locate-button {
    opacity: 0;
    transform: translateY(-4px);
    pointer-events: none;
  }
}

@media (hover: none), (pointer: coarse) {
  body.is-map-active .map-locate-button::after {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.is-map-active .map-locate-button,
  body.is-map-active .map-locate-button::after {
    transition: none;
  }

  body.is-map-active .map-locate-button[data-locate-state="locating"]::before {
    animation-duration: 1.8s;
  }
}

@media print {
  body.is-map-active .map-locate-button { display: none; }
}

/* Hills is a direct map switch that hangs beneath Locate. Locate moves with
 * every breakpoint and dossier state, so Hills follows its anchor instead of
 * copying those offsets. Wherever Locate is hidden, Hills is hidden too. */
body.is-map-active #locateButton {
  anchor-name: --map-locate;
}

body.is-map-active .map-hills-button {
  --hills-state-color: rgba(22, 20, 15, 0.78);
  position: absolute;
  z-index: var(--map-z-chrome, 8);
  position-anchor: --map-locate;
  top: calc(anchor(bottom) + 8px);
  right: anchor(right);
  display: grid;
  box-sizing: border-box;
  width: 44px;
  min-width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 0;
  place-items: center;
  overflow: visible;
  border: 1px solid rgba(17, 16, 14, 0.22);
  border-radius: var(--control-radius, 8px);
  background: rgba(255, 253, 247, 0.94);
  color: var(--hills-state-color);
  box-shadow: var(--shadow-contact);
  cursor: pointer;
  transition:
    border-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),
    color var(--motion-duration-fast) var(--motion-ease-standard),
    transform var(--motion-duration-fast) var(--motion-ease-standard),
    opacity var(--motion-duration-fast) var(--motion-ease-standard);
}

@supports not (anchor-name: --map-locate) {
  body.is-map-active .map-hills-button {
    top: 206px;
    right: 14px;
  }
}

body.is-map-active .map-hills-button[hidden] {
  display: none;
}

body.is-map-active .map-hills-button .map-hills-icon {
  width: 21px;
  height: 21px;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.65;
  stroke-linecap: round;
  stroke-linejoin: round;
}

body.is-map-active .map-hills-button .map-hills-icon-contour {
  stroke-width: 1.2;
  opacity: 0.72;
}

body.is-map-active .map-hills-button:is(:hover, :focus-visible) {
  border-color: rgba(201, 53, 43, 0.4);
  background-color: rgba(255, 253, 247, 0.99);
  color: var(--accent);
  transform: translateY(-1px);
}

body.is-map-active .map-hills-button:focus-visible {
  outline: 2px solid rgba(201, 53, 43, 0.46);
  outline-offset: 2px;
}

/* On: pressed into the plate in the contour ink the overlay draws with. */
body.is-map-active .map-hills-button[aria-pressed="true"] {
  --hills-state-color: #fffdf7;
  border-color: #3f3526;
  background-color: #574a36;
  box-shadow:
    inset 0 3px 8px rgba(30, 22, 12, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 1px 2px rgba(17, 16, 14, 0.1);
  transform: translateY(1px);
}

body.is-map-active .map-hills-button[aria-pressed="true"]:is(:hover, :focus-visible) {
  border-color: #3f3526;
  background-color: #4b4030;
  color: #fffdf7;
}

body.is-map-active .map-hills-button::after {
  content: attr(data-hills-tooltip);
  position: absolute;
  top: 50%;
  right: calc(100% + 9px);
  width: max-content;
  max-width: 190px;
  padding: 6px 8px;
  border: 1px solid rgba(17, 16, 14, 0.18);
  border-radius: 6px;
  background: rgba(22, 20, 15, 0.94);
  color: #fffdf7;
  font: 700 0.625rem/1.2 var(--font-main);
  letter-spacing: 0.01em;
  opacity: 0;
  transform: translate(4px, -50%);
  transition:
    opacity 120ms var(--motion-ease-standard),
    transform 120ms var(--motion-ease-standard);
  pointer-events: none;
}

body.is-map-active .map-hills-button:is(:hover, :focus-visible)::after {
  opacity: 1;
  transform: translate(0, -50%);
}

/* Phones keep the Filters chip directly beneath Locate, so Hills takes the
 * next row down on the same right edge. */
@media (max-width: 760px), (max-width: 980px) and (orientation: portrait), (max-width: 980px) and (max-height: 599px) {
  html body.is-map-active .map-frame #hillsButton.map-hills-button {
    top: calc(env(safe-area-inset-top) + 114px);
    right: calc(env(safe-area-inset-right) + 10px);
  }

  body.is-map-active:is(.is-mobile-sheet-expanded, .is-mobile-sheet-full) .map-hills-button {
    opacity: 0;
    pointer-events: none;
  }
}

@media (hover: none), (pointer: coarse) {
  body.is-map-active .map-hills-button::after {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.is-map-active .map-hills-button,
  body.is-map-active .map-hills-button::after {
    transition: none;
  }
}

@media print {
  body.is-map-active .map-hills-button { display: none; }
}

/* Mobile reach readout and settings placement. */
@media (max-width: 760px), (max-width: 980px) and (orientation: portrait), (max-width: 980px) and (max-height: 599px) {
  body.is-map-active.is-reach-mode.has-origin #mobileSheet.mobile-sheet[data-snap="collapsed"] > #mobilePrimarySummary {
    height: 66px;
    padding-top: 2px;
  }

  body.is-map-active.is-reach-mode.has-origin #mobileSheet.mobile-sheet[data-snap="collapsed"] .mobile-primary-card.mobile-score-card.is-result {
    display: block;
    height: 64px;
    min-height: 64px;
    padding: 7px 9px;
  }

  .mobile-network-coverage {
    display: grid;
    grid-template-rows: 25px 6px 14px;
    gap: 3px;
    min-width: 0;
  }

  .mobile-network-coverage-head {
    display: flex;
    min-width: 0;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
  }

  .mobile-network-coverage-head > strong {
    display: flex;
    min-width: 0;
    align-items: baseline;
    gap: 5px;
    color: var(--ink);
  }

  .mobile-network-coverage-head > strong b {
    font: 820 1.2rem/1 var(--font-main);
  }

  .mobile-network-coverage-head > strong span,
  .mobile-network-coverage-head > span {
    color: rgba(17, 16, 14, 0.68);
    font: 650 0.72rem/1 var(--font-main);
    white-space: nowrap;
  }

  .mobile-network-coverage-head > span b {
    color: var(--ink);
    font-weight: 800;
  }

  .mobile-network-coverage-track {
    position: relative;
    display: block;
    height: 6px;
    overflow: hidden;
    border-radius: 99px;
    background: rgba(17, 16, 14, 0.12);
  }

  .mobile-network-coverage-track > i {
    position: absolute;
    inset: 0 auto 0 0;
    width: max(6px, var(--rail-progress, 0%));
    border-radius: inherit;
    background: var(--accent);
  }

  .mobile-network-coverage > p {
    margin: 0;
    overflow: hidden;
    color: rgba(17, 16, 14, 0.62);
    font: 620 0.68rem/1.2 var(--font-main);
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body.is-map-active #mobileAdjustMap .mobile-control-about {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }

  body.is-map-active #mobileAdjustMap .mobile-settings-language {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }

  body.is-map-active #mobileAdjustMap .mobile-settings-language .mobile-control-section-title {
    margin: 0;
  }
}

.search-results[data-result-summary]::before {
  content: attr(data-result-summary);
  display: block;
  padding: 7px 11px 6px;
  border-bottom: 1px solid var(--panel-rule);
  background: var(--panel-paper-fine);
  box-shadow: inset 0 -1px 0 rgba(255, 253, 247, 0.72);
  color: var(--ink-label);
  font-family: var(--font-rail-label);
  font-size: var(--type-micro);
  font-weight: 800;
  letter-spacing: 0.09em;
  line-height: 1;
  text-transform: uppercase;
}

.origin-search-clear {
  position: absolute;
  z-index: 4;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: var(--control-radius);
  background: transparent;
  color: var(--ink-secondary);
  box-shadow: none;
  cursor: pointer;
}

body.is-map-active .panel-header .map-origin-search .search-row .origin-search-clear:not([hidden]),
body.is-map-active .mobile-map-search-row .origin-search-clear:not([hidden]),
body.is-map-active .mobile-search-row .origin-search-clear:not([hidden]) {
  position: absolute;
  display: grid;
  clip: auto;
  clip-path: none;
  overflow: visible;
  white-space: normal;
  width: 32px;
  height: 32px;
  min-height: 32px;
  padding: 0;
  border: 0;
  border-radius: var(--control-radius);
  background: transparent;
  box-shadow: none;
  color: var(--ink-secondary);
  font-size: 0;
}

.origin-search-clear[hidden] {
  display: none;
}

.origin-search-clear > span,
.origin-search-clear > span::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 13px;
  height: 1.5px;
  border-radius: 1px;
  background: currentColor;
  content: "";
  transform: translate(-50%, -50%) rotate(45deg);
}

.origin-search-clear > span::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.origin-search-clear:hover {
  background: rgba(201, 53, 43, 0.09);
  color: var(--accent);
}

.origin-search-clear:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.mobile-map-search-row,
.mobile-search-row {
  position: relative;
}

.mobile-map-search-row .origin-search-clear,
.mobile-search-row .origin-search-clear {
  top: 50%;
  right: 48px;
  transform: translateY(-50%);
}

html body.is-map-active #mobileMapSearchForm .mobile-map-search-row #mobileMapStationSearch,
html body.is-map-active #mobileSheet #mobileSearchForm .mobile-search-row #mobileStationSearch {
  padding-right: 40px;
}

/* Compact landscape keeps the locate action in its own grid track. Do not
   reserve space for the clear action until that action is actually present,
   otherwise the station prompt is reduced to only a few visible words. */
@media (min-width: 761px) and (max-width: 980px) and (min-height: 600px) and (orientation: landscape) {
  html body.is-map-active #mobileMapSearchForm .mobile-map-search-row #mobileMapStationSearch {
    padding-right: 32px;
  }

  html body.is-map-active #mobileMapSearchForm:has(.origin-search-clear:not([hidden])) #mobileMapStationSearch {
    padding-right: 40px;
  }

}

/* Time-instrument geometry and material now live in paper-relief-prototype.css. */
body.is-map-active .command-sentence #desktopReachTimeControl > strong,
body.is-map-active :is(#mobileReachTimeControl, .mobile-sheet-time-control) .mobile-time-range-label > strong {
  position: relative;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #24211d;
  box-shadow: none;
  font-family: var(--font-mono);
  font-weight: 620;
  font-variant-numeric: tabular-nums;
  text-shadow: none;
}

body.is-map-active .command-sentence #desktopReachTimeControl > strong {
  box-sizing: border-box;
  display: flex;
  gap: 3px;
  align-items: center;
  justify-content: flex-end;
  width: 56px;
  min-width: 56px;
  height: 32px;
  padding: 0;
  font-size: 1.08rem;
  line-height: 1;
  transform: translateY(1px);
}

body.is-map-active :is(#mobileReachTimeControl, .mobile-sheet-time-control) .mobile-time-range-label > strong {
  box-sizing: border-box;
  display: flex;
  gap: 3px;
  align-items: center;
  justify-content: flex-end;
  width: 38px;
  min-width: 38px;
  height: 28px;
  min-height: 28px;
  padding: 0;
  font-size: 0.94rem;
  line-height: 1;
}

body.is-map-active .command-sentence #desktopReachTimeControl > strong b.flap-value,
body.is-map-active :is(#mobileReachTimeControl, .mobile-sheet-time-control) .mobile-time-range-label > strong b.flap-value {
  position: relative;
  box-sizing: border-box;
  display: flex;
  width: auto;
  gap: 0;
  align-items: center;
  justify-content: flex-end;
  padding: 0;
  border: 0;
  background: transparent;
  color: #24211d;
  font-weight: 780;
  letter-spacing: -0.02em;
  line-height: 1;
}

body.is-map-active .command-sentence #desktopReachTimeControl > strong i,
body.is-map-active :is(#mobileReachTimeControl, .mobile-sheet-time-control) .mobile-time-range-label > strong i {
  margin: 0 0 1px;
  color: #a12d26;
  font-size: 0.46rem;
  font-style: normal;
  font-weight: 760;
  letter-spacing: 0.04em;
  line-height: 1;
  text-shadow: none;
}

body.is-map-active :is(
  #desktopReachTimeControl,
  #mobileReachTimeControl,
  .mobile-sheet-time-control
) :is(.flap-digit, .flap-digit-roll, .flap-digit-roll em) {
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
}

body.is-map-active :is(
  #desktopReachTimeControl,
  #mobileReachTimeControl,
  .mobile-sheet-time-control
) .flap-digit {
  box-sizing: border-box;
  width: 0.58em;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

body.is-map-active :is(
  #desktopReachTimeControl,
  #mobileReachTimeControl,
  .mobile-sheet-time-control
) .flap-digit::after {
  content: none;
}

@media (hover: hover) and (pointer: fine) {
}

@media (min-width: 1241px) {
  body.is-map-active .command-sentence {
    height: 56px;
  }
}

/* Before an Explore origin is selected, the time ruler is hidden. Do not
 * continue reserving its desktop grid column: that squeezed the origin field
 * and could push the Line picker underneath the adjacent dossier between the
 * compact and full desktop breakpoints. */
@media (min-width: 981px) {
  html body.is-map-active.is-reach-mode:not(.has-origin) .command-sentence {
    grid-template-columns: minmax(0, 1fr) clamp(184px, 18vw, 224px);
    grid-template-areas: "from line";
    height: 52px;
    min-height: 52px;
  }

  html body.is-map-active.is-reach-mode:not(.has-origin) .command-sentence > .map-origin-search {
    min-width: 0;
  }

  html body.is-map-active.is-reach-mode:not(.has-origin) .command-sentence > .explore-line-picker-host {
    grid-area: line;
    display: block;
    width: 100%;
    min-width: 0;
    height: 52px;
  }
}

@media (min-width: 981px) and (max-width: 1320px) {
  html body.is-map-active.is-reach-mode.has-origin .command-sentence {
    grid-template-columns: minmax(0, 1fr) clamp(184px, 18vw, 224px);
    grid-template-areas:
      "from from"
      "time line";
    height: auto;
    min-height: 0;
    row-gap: 8px;
  }

  html body.is-map-active.is-reach-mode.has-origin .command-sentence > .map-origin-search {
    grid-area: from;
    min-width: 0;
  }

  html body.is-map-active.is-reach-mode.has-origin .command-sentence > #desktopReachTimeControl.range-control {
    grid-area: time;
    min-width: 0;
    height: 52px;
  }

  html body.is-map-active.is-reach-mode.has-origin .command-sentence > .explore-line-picker-host {
    grid-area: line;
    display: block;
    width: 100%;
    min-width: 0;
    height: 52px;
  }
}

/* Plan already states its task in the dossier; the shared map-state pill is
 * redundant here and otherwise crowds the spatial-view control. */
html body.is-map-active.is-route-mode #mapStatePill {
  display: none;
}

@media (min-width: 981px), (min-width: 761px) and (max-width: 980px) and (min-height: 600px) and (orientation: landscape) {
  body.is-map-active {
    --chrome-card-bg: var(--panel-paper-fine);
    --chrome-card-radius: var(--control-radius);
    --chrome-card-shadow: var(--shadow-contact);
    --chrome-ink: var(--ink);
  }

  body.is-map-active .panel-header {
    gap: 8px;
    margin-bottom: 8px;
  }

  body.is-map-active .command-mast {
    height: 48px;
  }

  body.is-map-active .command-sentence {
    height: 52px;
    gap: 8px;
  }

  body.is-map-active .map-frame {
    border-color: rgba(12, 12, 12, 0.28);
    border-radius: var(--card-radius);
    box-shadow:
      inset 0 0 0 1px rgba(255, 253, 247, 0.68),
      inset 0 0 0 2px rgba(12, 12, 12, 0.1),
      var(--shadow-contact);
  }

  body.is-map-active .side-panel {
    border-color: var(--paper-edge);
    border-radius: var(--card-radius);
    background:
      var(--paper-panel-background),
      var(--panel-paper);
    background-size: var(--paper-grain-size), var(--paper-formation-size), auto;
    box-shadow: 0 1px 2px rgba(61, 47, 28, 0.06);
  }

  body.is-map-active .side-panel > section + section {
    border-top: 1px solid rgba(12, 12, 12, 0.14);
    box-shadow: inset 0 1px 0 rgba(255, 253, 247, 0.66);
  }

  body.is-map-active .panel-header .map-origin-search {
    grid-template-columns: minmax(0, 1fr) minmax(104px, auto);
    gap: 8px;
  }

  body.is-map-active .panel-header .map-origin-search .search-card-top {
    display: contents;
  }

  body.is-map-active .panel-header .map-origin-search .search-row {
    grid-area: search;
    position: relative;
    display: block;
    min-width: 0;
  }

  body.is-map-active .panel-header .map-origin-search .search-row input {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    padding: 14px 72px 0 42px;
    border-radius: var(--control-radius);
    background-color: var(--panel-paper-fine);
    box-shadow: var(--shadow-contact);
  }

  body.is-map-active .map-origin-search .search-card-top label {
    top: 8px;
  }

  body.is-map-active .panel-header .map-origin-search .search-row input:focus-visible {
    border-color: rgba(201, 53, 43, 0.6);
    box-shadow: var(--shadow-contact), 0 0 0 2px rgba(201, 53, 43, 0.16);
  }

  body.is-map-active.has-origin .panel-header .map-origin-search .search-row input,
  body.is-map-active.has-origin .panel-header .map-origin-search .search-row input:focus-visible {
    border-left-color: var(--chrome-card-border);
    box-shadow: var(--shadow-contact);
  }

  body.is-map-active .map-origin-search.is-origin-resolved .search-row input {
    animation: none;
  }

  body.is-map-active .map-origin-search .origin-search-shortcut {
    position: absolute;
    top: 50%;
    right: 9px;
    z-index: 3;
    min-width: 48px;
    padding: 4px 6px;
    border: 1px solid rgba(12, 12, 12, 0.18);
    border-bottom-color: rgba(12, 12, 12, 0.28);
    border-radius: 3px;
    background: rgba(238, 231, 215, 0.5);
    color: var(--ink-label);
    font-family: var(--font-atlas-mono);
    font-size: 0.62rem;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    transform: translateY(-50%);
  }

  body.is-map-active .map-origin-search .origin-search-clear {
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
  }

  body.is-map-active .panel-header .map-origin-search .text-button,
  body.is-map-active .command-sentence .range-control {
    border-radius: var(--control-radius);
    background-color: var(--panel-paper-fine);
    box-shadow: var(--shadow-contact);
  }

  body.is-map-active .command-sentence .range-control {
    grid-template-columns: auto minmax(0, 1fr) 56px;
    padding: 4px 10px 4px 14px;
  }

  body.is-map-active .mobile-map-control-rail .spatial-view-toggle,
  body.is-map-active .map-surface-rail .surface-story-toggle {
    border-color: rgba(12, 12, 12, 0.22);
    border-radius: var(--control-radius);
    background: var(--panel-paper-fine);
    box-shadow: var(--shadow-contact);
  }

  body.is-map-active .map-surface-rail .surface-story-button[data-surface-story="time"] {
    --surface-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230c0c0c' stroke-opacity='.68' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 16.2V9.3a1.8 1.8 0 0 1 1.8-1.8h13.4a1.8 1.8 0 0 1 1.8 1.8v6.9H3.5ZM5.2 10h3.2v3.1H5.2ZM10.2 9.7h3.6v6.5h-3.6ZM12 9.7v6.5M15.6 10h3.2v3.1h-3.2Z'/%3E%3Ccircle cx='7.3' cy='18.6' r='1.8'/%3E%3Ccircle cx='17.2' cy='18.6' r='1.8'/%3E%3C/svg%3E");
  }

  body.is-map-active .map-surface-rail .surface-story-button[data-surface-story="walk"] {
    --surface-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230c0c0c' stroke-opacity='.68' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12.8' cy='4.2' r='1.65'/%3E%3Cpath d='M12 8l-1 6m.7-4.5-3.4 2.5m3.4-2.5 3 2.2 3 .9M11 14l2.5 3 1.8 4M11 14l-1.3 3-3.1 4'/%3E%3C/svg%3E");
  }

  body.is-map-active .map-surface-rail .surface-story-button[data-surface-story="car"] {
    --surface-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230c0c0c' stroke-opacity='.68' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 16.5v-3.8l3.3-1.1 2.3-4.1h5.8l3.1 4.1 2.5 1.1v3.8M7 11.6h11M3.5 16.5h1.3m3.4 0h7.6m3.4 0h1.3'/%3E%3Ccircle cx='6.5' cy='16.5' r='1.7'/%3E%3Ccircle cx='17.5' cy='16.5' r='1.7'/%3E%3C/svg%3E");
  }

  body.is-map-active .map-surface-rail .surface-story-button[data-surface-story="rail-car"] {
    --surface-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230c0c0c' stroke-opacity='.68' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 8h13m0 0-3-3m3 3-3 3m4 5H6m0 0 3-3m-3 3 3 3'/%3E%3C/svg%3E");
  }

  body.is-map-active :is(
    .map-corner-actions .icon-button,
    .map-zoom-controls .icon-button,
    .distance-legend,
    .legend,
    .map-state-pill
  ) {
    border-radius: var(--control-radius);
    background-color: var(--panel-paper-fine);
    box-shadow: var(--shadow-contact);
  }

  body.is-map-active .legend,
  body.is-map-active .distance-legend,
  body.is-map-active .map-state-pill {
    background-image: none;
  }
}

body.is-map-active .panel-header .map-origin-search .search-row .origin-search-clear:hover,
body.is-map-active .mobile-map-search-row .origin-search-clear:hover,
body.is-map-active .mobile-search-row .origin-search-clear:hover {
  transform: translateY(calc(-50% + 1px));
}

@media (max-width: 980px) {
  /* The compact badge strip belongs to the collapsed identity bar. In the
     expanded Index sheet it duplicated the selected station's badges below
     and could consume the title's entire grid column on narrow phones. */
  body.is-map-active.is-index-mode #mobileSheet.mobile-sheet[data-snap="full"]
    .mobile-sheet-head #mobileCollapsedLineLogo.mobile-collapsed-line-logo {
    display: none;
  }

  body.is-map-active.is-index-mode #mobileSheet.mobile-sheet[data-snap="full"]
    .mobile-sheet-head > div:first-child {
    grid-template-columns: minmax(0, 1fr);
  }

  body.is-map-active.is-index-mode #mobileSheet.mobile-sheet[data-snap="full"]
    .mobile-sheet-head #mobileOriginTitle {
    grid-column: 1;
    width: auto;
  }

  :is(
    .mobile-map-control-rail .spatial-view-toggle,
    .map-surface-rail .surface-story-toggle,
    .mobile-reach-time-control,
    .mobile-sheet-time-control,
    .legend,
    .map-state-pill
  ) {
    background-color: var(--panel-paper-fine);
    box-shadow: var(--shadow-contact);
  }

  .origin-search-shortcut {
    display: none;
  }
}

@media (min-width: 1141px) and (max-width: 1240px) {
  body.is-map-active .command-sentence {
    grid-template-areas: "from time";
    grid-template-columns: minmax(451px, 1fr) minmax(270px, 0.62fr);
    height: 52px;
    row-gap: 0;
  }

  body.is-map-active .command-sentence .range-control {
    grid-template-columns: 72px minmax(0, 1fr) 48px;
    min-height: 52px;
  }

  body.is-map-active .command-sentence .range-control > span {
    white-space: normal;
    line-height: 1.05;
  }
}

@media (min-width: 981px) and (max-width: 1140px), (min-width: 761px) and (max-width: 980px) and (min-height: 600px) and (orientation: landscape) {
  body.is-map-active .command-sentence {
    height: auto;
    row-gap: 9px;
  }

  body.is-map-active .command-sentence .range-control {
    min-height: 52px;
  }
}

html[data-print-experiment="deckle"] body.is-map-active .side-panel {
  clip-path: polygon(
    0 0,
    99.5% 0,
    100% 3%,
    99.35% 7%,
    100% 12%,
    99.4% 19%,
    100% 27%,
    99.3% 36%,
    100% 45%,
    99.45% 54%,
    100% 64%,
    99.3% 74%,
    100% 84%,
    99.45% 93%,
    100% 100%,
    0 100%
  );
}

/* Final mobile map geometry. */
@media (max-width: 760px), (max-width: 980px) and (orientation: portrait), (max-width: 980px) and (max-height: 599px) {
  html body.is-map-active.is-reach-mode.has-origin .mobile-map-time-instrument {
    min-height: 54px;
    height: 54px;
    border-radius: 11px;
  }

  html body.is-map-active.is-reach-mode.has-origin .mobile-map-time-instrument #mobileReachTimeControl.mobile-reach-time-control {
    min-height: 52px;
    height: 52px;
    padding: 4px;
  }

  html body.is-map-active.is-reach-mode.has-origin:not(.is-mobile-sheet-expanded) #mobileReachTimeControl .mobile-time-range-label {
    grid-template-columns: 64px minmax(0, 1fr) 64px;
    grid-template-rows: 28px 12px;
    gap: 0 8px;
    min-height: 44px;
    height: 44px;
    padding: 0 8px;
    border-radius: 8px;
  }

  html body.is-map-active.is-reach-mode.has-origin:not(.is-mobile-sheet-expanded) #mobileReachTimeControl .mobile-time-range-label > span {
    font-size: 0.64rem;
    line-height: 1;
  }

  html body.is-map-active.is-reach-mode.has-origin:not(.is-mobile-sheet-expanded) #mobileReachTimeControl .mobile-time-range-label strong {
    align-self: center;
    min-width: 46px;
    height: 32px;
    padding-left: 4px;
  }

  html body.is-map-active.is-reach-mode.has-origin:not(.is-time-rings-view):not(.is-mobile-sheet-expanded):not(.is-mobile-sheet-full):not(.is-mobile-settings-open) .map-surface-rail {
    top: calc(env(safe-area-inset-top) + 62px);
  }

  html body.is-map-active.is-reach-mode.has-origin:not(.is-mobile-sheet-expanded) .map-surface-rail .mobile-surface-menu-button {
    border-radius: 7px;
  }
}

/* Landscape tablets use the desktop dossier beside a deliberately compact
 * map, but still load the mobile map-control styles. Own that overlap here so
 * the header, map controls, and Station Data plate form one coherent shell. */
@media (min-width: 761px) and (max-width: 980px) and (min-height: 600px) and (orientation: landscape) {
  html body.is-map-active.is-time-rings-view .map-frame #locateButton.map-locate-button {
    top: 158px;
  }

  html body.is-map-active .panel-controls > .command-mast {
    box-sizing: border-box;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 86px 162px;
    gap: 6px;
    width: 100%;
    height: 52px;
    min-height: 52px;
  }

  html body.is-map-active .panel-controls > .command-sentence {
    grid-area: sentence;
    grid-column: 1 / -1;
    grid-row: 2;
    justify-self: stretch;
    width: auto;
    min-width: 0;
    max-width: none;
  }

  html body.is-map-active .command-mast .mode-control-lenses {
    grid-area: 1 / 1 / 2 / 2;
    min-width: 0;
    width: 100%;
  }

  html body.is-map-active .command-mast .mode-control-lenses .mode-button,
  html body.is-map-active .command-mast .mode-control-lenses .mode-button.is-active {
    min-width: 0;
    padding-inline: 7px;
    background-image: none;
    text-align: center;
  }

  html body.is-map-active .command-mast .mode-control-lenses .mode-button strong {
    max-width: 100%;
    overflow: hidden;
    font-family: var(--font-main);
    font-size: 0.6875rem;
    font-weight: 720;
    letter-spacing: 0;
    line-height: 1.1;
    text-overflow: ellipsis;
    text-transform: none;
  }

  html body.is-map-active .command-mast .share-button {
    grid-area: 1 / 2 / 2 / 3;
    width: 86px;
    min-width: 86px;
    max-width: 86px;
    padding: 0 6px 0 27px;
    background-position: left 8px center;
    font-size: 0.46rem;
    letter-spacing: 0.045em;
  }

  html body.is-map-active .command-mast .command-utility-tray {
    grid-area: 1 / 3 / 2 / 4;
    grid-template-columns: 86px 66px;
    width: 162px;
    min-width: 162px;
    height: 52px;
    min-height: 52px;
    box-sizing: border-box;
    border-radius: var(--chrome-radius);
  }

  html body.is-map-active .command-mast .command-utility-tray .mast-language-toggle {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 66px;
    min-width: 66px;
    padding-left: 2px;
  }

  /* The persistent mode pill repeated information already present in the
     masthead and occupied the same upper-right map lane as language. */
  html body.is-map-active .map-frame .map-state-pill {
    display: none;
  }

  html body.is-map-active .map-frame .map-data-attribution {
    top: auto;
    right: 8px;
    bottom: 6px;
    left: auto;
    transform: none;
  }

  /* This hybrid shell already owns origin search in the command bar. A second
     map-mounted field duplicated the same task and consumed the space needed
     by the map's lens and surface controls. */
  html body.is-map-active.is-reach-mode #mobileMapSearchForm.mobile-map-search-form:not([hidden]) {
    display: none;
  }

  /* The phone sheet owns Map / Rings below this range. In landscape tablet
     shells, restore the map rail at the leading edge so the lens, compact
     travel-mode disclosure, and Isochrones form one aligned vertical stack. */
  html body.is-map-active.is-reach-mode.has-origin .map-frame > #mobileMapControlRail.mobile-map-control-rail {
    top: calc(env(safe-area-inset-top) + 12px);
    right: auto;
    left: calc(env(safe-area-inset-left) + 14px);
    z-index: 12;
    display: flex;
    width: clamp(212px, calc(100vw - 548px), var(--map-spatial-control-width));
    height: 48px;
    opacity: 1;
    visibility: visible;
    transform: none;
    pointer-events: auto;
  }

  html body.is-map-active.is-reach-mode.has-origin .map-frame > #mobileMapControlRail
    .mobile-map-language-toggle {
    display: none;
  }

  html body.is-map-active.is-reach-mode.has-origin .map-frame > #mobileMapControlRail
    .mobile-map-spatial-view-guide {
    display: block;
    width: 100%;
    min-width: 0;
  }

  html body.is-map-active.is-reach-mode.has-origin .map-frame > #mobileMapControlRail
    .mobile-map-spatial-view-toggle {
    width: 100%;
  }

  /* Search is already map-mounted here, so the question bar becomes one
     compact row: the time ruler and its line filter read as paired controls. */
  html body.is-map-active.is-reach-mode .command-sentence {
    grid-template-columns: minmax(0, 1fr) minmax(108px, 0.28fr);
    grid-template-areas: "time line";
    gap: 8px;
    height: 52px;
    min-height: 52px;
    row-gap: 0;
  }

  html body.is-map-active.is-reach-mode .command-sentence > #desktopReachTimeControl.range-control {
    grid-area: time;
    min-height: 52px;
  }

  html body.is-map-active.is-reach-mode .command-sentence > .explore-line-picker-host {
    grid-area: line;
    display: block;
    width: 100%;
    height: 52px;
    min-height: 52px;
  }

  html body.is-map-active.is-reach-mode .command-sentence > .explore-line-picker-host .explore-line-picker summary {
    height: 52px;
    min-height: 52px;
    padding-inline: 9px;
  }

  /* Tablet keeps only the active travel mode on the map. Its alternatives
     disclose to the right; the lower Isochrone Bands legend owns that
     overlay's visibility so the map does not repeat the same control here. */
  html body.is-map-active.is-reach-mode.has-origin .map-surface-rail {
    top: calc(env(safe-area-inset-top) + 68px);
    right: auto;
    left: calc(env(safe-area-inset-left) + 14px);
    transform: none;
  }

  html body.is-map-active.is-reach-mode.has-origin .map-frame .map-corner-actions {
    top: calc(env(safe-area-inset-top) + 68px);
    right: calc(env(safe-area-inset-right) + 14px);
  }

  /* The relief prototype normally joins fullscreen and zoom on one backing
     plate. In the narrower tablet column, use distinct opaque cards so every
     action remains visible over dense rail geometry. */
  html body.is-map-active.is-reach-mode.has-origin .map-frame .map-zoom-controls::before {
    content: none;
    display: none;
  }

  html body.is-map-active.is-reach-mode.has-origin .map-frame .map-corner-actions #fullscreenButton.icon-button,
  html body.is-map-active.is-reach-mode.has-origin .map-frame .map-zoom-controls .icon-button,
  html body.is-map-active.is-reach-mode.has-origin .map-frame #locateButton.map-locate-button,
  html body.is-map-active.is-reach-mode.has-origin .map-frame #hillsButton.map-hills-button:not([aria-pressed="true"]) {
    border: 1px solid var(--relief-edge-strong, rgba(55, 45, 31, 0.22));
    border-radius: 12px;
    background: rgba(255, 250, 240, 0.98);
    box-shadow: var(--relief-contact, var(--shadow-contact));
  }

  /* The Index panel itself spans the map. Its analytical dock owns the right
     edge while the search console and map legend share the left edge. */
  html body.is-map-active.is-index-mode #stationIndexPanel.station-index-panel.is-plate-layout {
    top: 12px;
    right: 12px;
    bottom: 12px;
    left: 12px;
    width: auto;
    max-width: none;
    margin: 0;
    transform: none;
  }

  html body.is-map-active.is-index-mode #stationIndexPanel.station-index-panel.is-plate-layout
    > :is(.station-index-map-console, .station-index-story-map-legend) {
    left: 0;
    margin-left: 0;
    transform: none;
  }

  html body.is-map-active.is-index-mode #stationIndexPanel.station-index-panel.is-plate-layout.is-compact {
    top: 12px;
    right: 12px;
    bottom: auto;
    left: auto;
    width: min(420px, calc(100% - 24px));
    max-width: calc(100% - 24px);
  }

  html body.is-map-active.is-index-mode #stationIndexPanel.station-index-panel.is-plate-layout.is-compact
    .station-index-panel-inner.station-index-workspace {
    right: auto;
    left: auto;
    width: 100%;
  }
}

/* Expanded mobile Index time control.
 *
 * This is one contained surface, not an instrument nested inside another
 * instrument. Keep its label, readout, track, and thumb within the control's
 * measured height so the shared range styles cannot protrude past the frame. */
@media (max-width: 760px), (max-width: 980px) and (orientation: portrait), (max-width: 980px) and (max-height: 599px) {
  html body.is-map-active.is-index-mode #mobileSheet.mobile-sheet[data-snap="full"]
    #mobileSheetTimeControl.mobile-sheet-time-control {
    box-sizing: border-box;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
    height: 58px;
    min-height: 58px;
    max-height: 58px;
    padding: 7px 10px 8px;
    overflow: hidden;
    border: 1px solid rgba(17, 16, 14, 0.14);
    border-radius: 11px;
    background: rgba(255, 253, 247, 0.8);
    box-shadow: var(--shadow-contact);
  }

  html body.is-map-active.is-index-mode #mobileSheet.mobile-sheet[data-snap="full"]
    #mobileSheetTimeControl .mobile-time-range-label {
    box-sizing: border-box;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: 15px 27px;
    gap: 1px 10px;
    width: 100%;
    height: 43px;
    min-height: 43px;
    margin: 0;
    padding: 0;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
  }

  html body.is-map-active.is-index-mode #mobileSheet.mobile-sheet[data-snap="full"]
    #mobileSheetTimeControl .mobile-time-range-label::before,
  html body.is-map-active.is-index-mode #mobileSheet.mobile-sheet[data-snap="full"]
    #mobileSheetTimeControl .mobile-time-range-label::after {
    content: none;
    display: none;
  }

  html body.is-map-active.is-index-mode #mobileSheet.mobile-sheet[data-snap="full"]
    #mobileSheetTimeControl .mobile-time-range-label > span {
    position: static;
    grid-column: 1;
    grid-row: 1;
    align-self: center;
    margin: 0;
    color: rgba(17, 16, 14, 0.62);
    font: 650 0.6875rem/1 var(--font-main);
    letter-spacing: 0;
    text-transform: none;
    white-space: nowrap;
  }

  html body.is-map-active.is-index-mode #mobileSheet.mobile-sheet[data-snap="full"]
    #mobileSheetTimeControl .mobile-time-range-label > strong {
    position: static;
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    width: auto;
    min-width: 44px;
    height: 15px;
    min-height: 15px;
    padding: 0;
    color: var(--ink);
    font: 760 0.8125rem/1 var(--font-main);
  }

  html body.is-map-active.is-index-mode #mobileSheet.mobile-sheet[data-snap="full"]
    #mobileSheetTimeControl .mobile-time-range-label > strong b.flap-value {
    font: inherit;
    letter-spacing: -0.01em;
  }

  html body.is-map-active.is-index-mode #mobileSheet.mobile-sheet[data-snap="full"]
    #mobileSheetTimeControl .mobile-time-range-label > strong i {
    margin: 0 0 0 2px;
    color: rgba(17, 16, 14, 0.56);
    font: 650 0.625rem/1 var(--font-main);
    letter-spacing: 0;
    text-transform: none;
  }

  html body.is-map-active.is-index-mode #mobileSheet.mobile-sheet[data-snap="full"]
    #mobileSheetMaxTimeRange {
    grid-column: 1 / -1;
    grid-row: 2;
    align-self: center;
    width: 100%;
    min-width: 0;
  }

}

/* Final responsive ownership for the map-mounted location action and the
 * Explore command sentence. Keep this after the legacy tablet adapters. */
@media (min-width: 981px), (min-width: 761px) and (max-width: 980px) and (min-height: 600px) and (orientation: landscape) {
  html body.is-map-active .panel-header #searchForm.map-origin-search {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "search";
    width: 100%;
    min-width: 0;
    height: 52px;
  }

  html body.is-map-active .panel-header #searchForm.map-origin-search .search-row {
    grid-area: search;
    min-width: 0;
  }

  html body.is-map-active .panel-header #searchForm.map-origin-search .search-row input {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    height: 52px;
    min-height: 52px;
  }
}

@media (min-width: 981px) and (max-width: 1320px), (min-width: 761px) and (max-width: 980px) and (min-height: 600px) and (orientation: landscape) {
  html body.is-map-active.is-reach-mode .command-sentence {
    grid-template-columns: minmax(0, 1fr) clamp(128px, 19vw, 224px);
    grid-template-areas: "from line";
    gap: 8px;
    height: 52px;
    min-height: 52px;
  }

  html body.is-map-active.is-reach-mode.has-origin .command-sentence {
    grid-template-areas:
      "from line"
      "time time";
    height: auto;
    min-height: 112px;
    row-gap: 8px;
  }

  html body.is-map-active.is-reach-mode .command-sentence > #searchForm.map-origin-search {
    grid-area: from;
  }

  html body.is-map-active.is-reach-mode .command-sentence > .explore-line-picker-host {
    grid-area: line;
    display: block;
    width: 100%;
    min-width: 0;
    height: 52px;
  }

  html body.is-map-active.is-reach-mode.has-origin .command-sentence > #desktopReachTimeControl.range-control {
    grid-area: time;
    width: 100%;
    min-width: 0;
    height: 52px;
  }
}

/* A laptop-width map still has enough room for the complete Explore question.
 * Cap the search and line fields so the time ruler stays in the second chrome
 * row instead of creating a third row beneath them. */
@media (min-width: 1141px) and (max-width: 1320px) {
  html body.is-map-active.is-reach-mode.has-origin .command-sentence {
    grid-template-columns: minmax(240px, 0.82fr) clamp(142px, 14vw, 184px) minmax(300px, 1.18fr);
    grid-template-areas: "from line time";
    height: 52px;
    min-height: 52px;
    row-gap: 0;
  }

  html body.is-map-active.is-reach-mode.has-origin .command-sentence > #desktopReachTimeControl.range-control {
    min-width: 300px;
  }
}

@media (min-width: 761px) and (max-width: 980px) and (min-height: 600px) and (orientation: landscape) {
  html body.is-map-active.is-reach-mode #mobileMapSearchForm.mobile-map-search-form {
    display: none;
  }

  html body.is-map-active.is-reach-mode.has-origin #mobileMapTimePopover.mobile-map-time-instrument {
    display: contents;
  }

  html body.is-map-active .mobile-map-time-instrument #mobileReachTimeControl {
    display: none;
  }

  html body.is-map-active.is-reach-mode.has-origin .mobile-map-time-instrument > .map-zoom-controls {
    position: absolute;
    top: 118px;
    right: 14px;
    bottom: auto;
    left: auto;
    display: grid;
    grid-template-rows: repeat(2, 44px);
    width: 44px;
    min-width: 44px;
    height: 94px;
    min-height: 94px;
    gap: 6px;
  }

  html body.is-map-active.is-reach-mode.has-origin #locateButton.map-locate-button {
    top: calc(env(safe-area-inset-top) + 218px);
    right: calc(env(safe-area-inset-right) + 14px);
  }

  html body.is-map-active.is-time-rings-view.has-origin .map-locate-button {
    top: calc(env(safe-area-inset-top) + 152px);
  }
}

@media (min-width: 981px) and (max-width: 1120px) {
  html body.is-map-active.has-origin:not(.is-dossier-minimized) :is(
    .map-corner-actions,
    .map-zoom-controls,
    .map-locate-button
  ) {
    right: calc(var(--tablet-dossier-width, clamp(310px, 32vw, 340px)) + 14px);
  }

  /* Keep the required basemap credit in the exposed map area instead of
     letting the hybrid dossier cover the map's lower-right corner. */
  html body.is-map-active.has-origin:not(.is-dossier-minimized):not(.is-time-rings-view)
    .map-frame .map-data-attribution {
    right: calc(var(--tablet-dossier-width, clamp(310px, 32vw, 340px)) + 14px);
  }
}

/* Geography maps reserve a slim attribution row below their analytical keys.
 * Register the distance scale and isochrone plate to the same baseline so the
 * two objects read as one map-key system on desktop and landscape tablets. */
@media (min-width: 981px),
  (min-width: 761px) and (max-width: 980px) and (min-height: 600px) and (orientation: landscape) {
  html body.is-map-active.is-reach-mode.has-origin:not(.is-time-rings-view):not(.is-car-surface):not(.is-walking-surface):not(.is-comparison-surface)
    .map-frame :is(#distanceLegend.distance-legend, #legend.legend) {
    top: auto;
    bottom: calc(env(safe-area-inset-bottom) + 32px);
  }
}

@media (max-width: 760px), (max-width: 980px) and (orientation: portrait), (max-width: 980px) and (max-height: 599px) {
  html body.is-map-active #mobileMapSearchForm .mobile-map-search-row {
    grid-template-columns: minmax(0, 1fr);
  }

  html body.is-map-active #mobileMapSearchForm .origin-search-clear {
    right: 8px;
  }

  html body.is-map-active #mobileSheet .mobile-sheet-context-rail #mobileSearchForm .mobile-search-row {
    grid-template-columns: minmax(0, 1fr) minmax(126px, auto);
    gap: 7px;
  }

  html body.is-map-active #mobileSheet #mobileLocateButton.mobile-locate-fallback {
    display: inline-flex;
    gap: 8px;
    align-items: center;
    justify-content: center;
    width: auto;
    min-width: 126px;
    padding: 0 11px;
    color: rgba(22, 20, 15, 0.72);
    font: 760 0.6875rem/1.05 var(--font-main);
    letter-spacing: 0;
    text-transform: none;
    white-space: nowrap;
  }

  html body.is-map-active #mobileSheet #mobileSearchForm .origin-search-clear {
    right: 140px;
  }

  html body.is-map-active.has-network-overview #mobileSheet.mobile-sheet[data-snap="full"]
    > .mobile-sheet-context-rail > #mobileSearchForm.mobile-search-form .mobile-search-row {
    grid-template-columns: minmax(0, 1fr) minmax(126px, auto);
    gap: 7px;
  }

  html body.is-map-active.has-network-overview #mobileSheet.mobile-sheet[data-snap="full"]
    #mobileSearchForm #mobileLocateButton.mobile-locate-fallback {
    width: auto;
    min-width: 126px;
    padding-inline: 11px;
  }

  html body.is-map-active #mobileSheet #mobileLocateButton.mobile-locate-fallback > .mobile-locate-icon {
    display: none;
  }

  html body.is-map-active #mobileSheet #mobileLocateButton.mobile-locate-fallback > .mobile-locate-label {
    display: inline;
    width: auto;
    height: auto;
    border: 0;
    background: transparent;
  }
}

/* Compact travel-mode switcher --------------------------------------------
 * The active surface remains a stable map control. Alternatives are rendered
 * beside it as a low-opacity preview on hover, but only become interactive
 * after the user explicitly opens the group. */
html body.is-map-active.is-reach-mode.has-origin:not(.is-time-rings-view):not(.is-mobile-sheet-expanded):not(.is-mobile-sheet-full):not(.is-mobile-settings-open):not(:has(.mobile-map-search-form:focus-within)):not(:has(.mobile-map-search-results:not(:empty))) .map-surface-rail {
  --surface-menu-control-width: 112px;
  --surface-menu-option-gap: 8px;
  --surface-menu-preview-shift: -7px;
  display: flex;
  align-items: flex-start;
  width: var(--surface-menu-control-width);
  height: 44px;
  overflow: visible;
  isolation: isolate;
}

html body.is-map-active .map-surface-rail .surface-menu-button {
  position: relative;
  z-index: 3;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 18px minmax(42px, 1fr) 13px;
  gap: 7px;
  align-items: center;
  width: var(--surface-menu-control-width, 112px);
  min-width: var(--surface-menu-control-width, 112px);
  height: 44px;
  min-height: 44px;
  padding: 0 10px;
  border: 1px solid rgba(17, 16, 14, 0.22);
  border-radius: 10px;
  background: rgba(255, 253, 247, 0.95);
  color: var(--ink);
  box-shadow: var(--shadow-contact);
  cursor: pointer;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition:
    border-color 170ms ease,
    background-color 170ms ease,
    box-shadow 170ms ease,
    transform 170ms cubic-bezier(0.2, 0.78, 0.24, 1);
}

html body.is-map-active .map-surface-rail .surface-menu-button::before {
  content: none;
  display: none;
}

html body.is-map-active .map-surface-rail .surface-menu-button:is(:hover, :focus-visible),
html body.is-map-active .map-surface-rail.is-open .surface-menu-button {
  border-color: rgba(17, 16, 14, 0.34);
  background: rgba(255, 253, 247, 0.99);
  box-shadow: var(--shadow-lift-with-line);
}

html body.is-map-active .map-surface-rail .surface-menu-button:active {
  box-shadow: inset 0 2px 5px rgba(17, 16, 14, 0.14);
  transform: translateY(1px);
}

html body.is-map-active .map-surface-rail .surface-menu-button:focus-visible {
  outline: 2px solid rgba(17, 16, 14, 0.46);
  outline-offset: 2px;
}

html body.is-map-active .map-surface-rail .surface-menu-icon {
  display: block;
  width: 18px;
  height: 18px;
}

html body.is-map-active .map-surface-rail .surface-menu-icon svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

html body.is-map-active .map-surface-rail .surface-menu-button:not([data-active-surface="time"]) [data-surface-menu-icon="time"],
html body.is-map-active .map-surface-rail .surface-menu-button:not([data-active-surface="walk"]) [data-surface-menu-icon="walk"],
html body.is-map-active .map-surface-rail .surface-menu-button:not([data-active-surface="car"]) [data-surface-menu-icon="car"],
html body.is-map-active .map-surface-rail .surface-menu-button:not([data-active-surface="rail-car"]) [data-surface-menu-icon="rail-car"] {
  display: none;
}

html body.is-map-active .map-surface-rail .mobile-surface-menu-label {
  overflow: hidden;
  font: 790 0.6875rem/1 var(--font-rail-label, var(--font-ui));
  letter-spacing: 0.065em;
  text-align: left;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

html body.is-map-active .map-surface-rail .surface-menu-more {
  width: 3px;
  height: 3px;
  margin: 0 0 0 1px;
  border: 0;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 5px 0 0 currentColor, 10px 0 0 currentColor;
  opacity: 0.46;
  transform: translateX(0);
  transition: opacity 170ms ease, transform 220ms cubic-bezier(0.2, 0.78, 0.24, 1);
}

html body.is-map-active .map-surface-rail .surface-menu-button:is(:hover, :focus-visible) .surface-menu-more {
  opacity: 0.8;
  transform: translateX(2px);
}

html body.is-map-active .map-surface-rail.is-open .surface-menu-more {
  opacity: 0.28;
  transform: translateX(1px) scale(0.86);
}

html body.is-map-active.is-reach-mode.has-origin .map-surface-rail .primary-surface-story-toggle {
  position: absolute;
  z-index: 2;
  top: 0;
  right: auto;
  left: calc(100% + var(--surface-menu-option-gap, 8px));
  box-sizing: border-box;
  display: flex;
  grid-template-columns: none;
  gap: 4px;
  width: max-content;
  max-width: none;
  min-height: 44px;
  height: 44px;
  padding: 3px;
  overflow: visible;
  visibility: hidden;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  box-shadow: none;
  pointer-events: none;
  transform: translateX(var(--surface-menu-preview-shift, -7px)) scale(0.985);
  transform-origin: left center;
  transition:
    visibility 0s linear 190ms,
    border-color 180ms ease,
    background-color 180ms ease,
    box-shadow 180ms ease,
    transform 240ms cubic-bezier(0.2, 0.78, 0.24, 1);
}

html body.is-map-active.is-reach-mode.has-origin .map-surface-rail .primary-surface-story-toggle::before {
  content: none;
}

html body.is-map-active.is-reach-mode.has-origin .map-surface-rail .primary-surface-story-toggle > .surface-story-button.is-active {
  display: none;
}

html body.is-map-active.is-reach-mode.has-origin .map-surface-rail .primary-surface-story-toggle > .surface-story-button:not(.is-active) {
  flex: 0 0 auto;
  width: auto;
  min-width: 72px;
  height: 38px;
  min-height: 38px;
  padding: 0 10px 0 28px;
  border: 0;
  border-radius: 8px;
  background-position: left 8px center;
  color: rgba(17, 16, 14, 0.68);
  font-size: 0.6875rem;
  letter-spacing: 0.05em;
  opacity: 0;
  transform: translateX(var(--surface-menu-preview-shift, -7px));
  transition:
    color 150ms ease,
    background-color 150ms ease,
    box-shadow 150ms ease,
    opacity 180ms ease,
    transform 240ms cubic-bezier(0.2, 0.78, 0.24, 1);
}

html body.is-map-active.is-reach-mode.has-origin .map-surface-rail .primary-surface-story-toggle > .surface-story-button:not(.is-active):nth-child(2) {
  transition-delay: 18ms;
}

html body.is-map-active.is-reach-mode.has-origin .map-surface-rail .primary-surface-story-toggle > .surface-story-button:not(.is-active):nth-child(3) {
  transition-delay: 42ms;
}

html body.is-map-active.is-reach-mode.has-origin .map-surface-rail .primary-surface-story-toggle > .surface-story-button:not(.is-active):nth-child(4) {
  transition-delay: 66ms;
}

@media (hover: hover) and (pointer: fine) {
  html body.is-map-active.is-reach-mode.has-origin .map-surface-rail:not(.is-open) .surface-menu-button:hover + .primary-surface-story-toggle,
  html body.is-map-active.is-reach-mode.has-origin .map-surface-rail:not(.is-open) .surface-menu-button:focus-visible + .primary-surface-story-toggle {
    visibility: visible;
    transition-delay: 0s;
    transform: translateX(0) scale(1);
  }

  html body.is-map-active.is-reach-mode.has-origin .map-surface-rail:not(.is-open) .surface-menu-button:hover + .primary-surface-story-toggle > .surface-story-button:not(.is-active),
  html body.is-map-active.is-reach-mode.has-origin .map-surface-rail:not(.is-open) .surface-menu-button:focus-visible + .primary-surface-story-toggle > .surface-story-button:not(.is-active) {
    opacity: 0.22;
    transform: translateX(0);
  }
}

html body.is-map-active.is-reach-mode.has-origin .map-surface-rail.is-open .primary-surface-story-toggle {
  visibility: visible;
  border-color: rgba(17, 16, 14, 0.18);
  background: rgba(255, 253, 247, 0.96);
  box-shadow: var(--shadow-lift-with-line);
  pointer-events: auto;
  transform: translateX(0) scale(1);
  transition-delay: 0s;
}

html body.is-map-active.is-reach-mode.has-origin .map-surface-rail.is-open .primary-surface-story-toggle > .surface-story-button:not(.is-active) {
  opacity: 1;
  transform: translateX(0);
}

html body.is-map-active.is-reach-mode.has-origin .map-surface-rail.is-open .primary-surface-story-toggle > .surface-story-button:not(.is-active):is(:hover, :focus-visible) {
  background-color: rgba(17, 16, 14, 0.065);
  color: var(--ink);
  box-shadow: inset 0 0 0 1px rgba(17, 16, 14, 0.12);
}

/* Narrow phone layouts reveal toward the open left side. Landscape tablets
 * retain the default rightward disclosure beside the active mode. */
@media (max-width: 760px), (max-width: 980px) and (orientation: portrait), (max-width: 980px) and (max-height: 599px) {
  html body.is-map-active.is-reach-mode.has-origin .map-surface-rail {
    --surface-menu-preview-shift: 7px;
  }

  html body.is-map-active.is-reach-mode.has-origin .map-surface-rail .primary-surface-story-toggle {
    right: calc(100% + var(--surface-menu-option-gap, 8px));
    left: auto;
    transform-origin: right center;
  }

  html body.is-map-active .map-surface-rail .surface-menu-button:is(:hover, :focus-visible) .surface-menu-more {
    transform: translateX(-2px);
  }
}

@media (max-width: 760px), (max-width: 980px) and (orientation: portrait), (max-width: 980px) and (max-height: 599px) {
  html body.is-map-active.is-reach-mode.has-origin:not(.is-time-rings-view):not(.is-mobile-sheet-expanded):not(.is-mobile-sheet-full):not(.is-mobile-settings-open) .map-surface-rail.is-open .primary-surface-story-toggle {
    top: 0;
    right: calc(100% + var(--surface-menu-option-gap, 8px));
    left: auto;
    display: flex;
    grid-template-columns: none;
    width: max-content;
    max-width: none;
    min-height: 44px;
    height: 44px;
  }

  html body.is-map-active.is-reach-mode.has-origin:not(.is-mobile-sheet-expanded) .map-surface-rail.is-open .primary-surface-story-toggle > .surface-story-button:not(.is-active) {
    display: inline-flex;
    grid-template-columns: none;
    gap: 6px;
    width: 72px;
    min-width: 72px;
    height: 38px;
    min-height: 38px;
    padding: 0 10px;
    font-size: 0.6875rem;
  }

  html body.is-map-active.is-reach-mode.has-origin:not(.is-mobile-sheet-expanded) .map-surface-rail.is-open .primary-surface-story-toggle > .surface-story-button[data-surface-story="rail-car"]:not(.is-active) {
    width: 90px;
    min-width: 90px;
  }
}

@media (max-width: 360px) {
  html body.is-map-active.is-reach-mode.has-origin:not(.is-mobile-sheet-expanded) .map-surface-rail.is-open .primary-surface-story-toggle > .surface-story-button:not(.is-active) {
    display: grid;
    place-items: center;
    width: 42px;
    min-width: 42px;
    padding: 0;
    background-position: center;
    font-size: 0;
  }

  html body.is-map-active.is-reach-mode.has-origin:not(.is-mobile-sheet-expanded) .map-surface-rail.is-open .primary-surface-story-toggle > .surface-story-button[data-surface-story="rail-car"]:not(.is-active) {
    width: 42px;
    min-width: 42px;
  }
}

/* Desktop travel modes are a persistent peer of the Geography / Travel Time
 * lens. The compact trigger remains the small-screen owner. */
@media (min-width: 981px) {
  html body.is-map-active.is-reach-mode.has-origin:not(.is-time-rings-view):not(.is-mobile-sheet-expanded):not(.is-mobile-sheet-full):not(.is-mobile-settings-open):not(:has(.mobile-map-search-form:focus-within)):not(:has(.mobile-map-search-results:not(:empty))) .map-surface-rail.is-persistent {
    --surface-menu-control-width: 316px;
    display: block;
    width: 316px;
    height: 50px;
  }

  html body.is-map-active .map-surface-rail.is-persistent .surface-menu-button {
    display: none;
  }

  html body.is-map-active.is-reach-mode.has-origin .map-surface-rail.is-persistent .primary-surface-story-toggle {
    position: static;
    flex: 0 0 316px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr)) 82px;
    gap: 3px;
    width: 316px;
    max-width: 316px;
    height: 50px;
    min-height: 50px;
    padding: 3px;
    visibility: visible;
    border-color: rgba(17, 16, 14, 0.22);
    background: var(--panel-paper-fine);
    box-shadow: var(--shadow-contact);
    pointer-events: auto;
    transform: none;
    transition: border-color 180ms ease, background-color 180ms ease, box-shadow 180ms ease;
  }

  html body.is-map-active.is-reach-mode.has-origin .map-surface-rail.is-persistent .primary-surface-story-toggle > .surface-story-button,
  html body.is-map-active.is-reach-mode.has-origin .map-surface-rail.is-persistent .primary-surface-story-toggle > .surface-story-button.is-active,
  html body.is-map-active.is-reach-mode.has-origin .map-surface-rail.is-persistent .primary-surface-story-toggle > .surface-story-button:not(.is-active) {
    display: inline-flex;
    width: 100%;
    min-width: 0;
    height: 42px;
    min-height: 42px;
    padding: 0 6px 0 24px;
    border-radius: 7px;
    background-image: var(--surface-icon, none), none;
    background-repeat: no-repeat;
    background-position: left 7px center;
    background-size: 14px 14px, auto;
    color: rgba(17, 16, 14, 0.68);
    font-size: var(--type-micro);
    font-weight: 900;
    letter-spacing: 0.025em;
    opacity: 1;
    transform: none;
    transition:
      background-color 210ms cubic-bezier(0.22, 1, 0.36, 1),
      box-shadow 210ms cubic-bezier(0.22, 1, 0.36, 1),
      color 210ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  html body.is-map-active.is-reach-mode.has-origin .map-surface-rail.is-persistent .primary-surface-story-toggle > .surface-story-button.is-active {
    background-color: transparent;
    color: var(--ink);
    box-shadow: none;
  }

  html body.is-map-active.is-reach-mode.has-origin .map-surface-rail.is-persistent .primary-surface-story-toggle > .surface-story-button:not(.is-active):is(:hover, :focus-visible) {
    background-color: rgba(17, 16, 14, 0.05);
    background-image: var(--surface-icon, none), none;
    color: var(--ink);
  }
}

@media (prefers-reduced-motion: reduce) {
  html body.is-map-active .map-surface-rail :is(.surface-menu-button, .surface-menu-more, .primary-surface-story-toggle, .surface-story-button) {
    transition-duration: 0.01ms;
    transition-delay: 0s;
  }
}

/* Mobile top actions -------------------------------------------------------
 * Search, Settings, and Locate share one measured rail. Keeping the two 44px
 * actions in fixed columns prevents later mode-specific rules from assigning
 * them the same top-right hit area. */
@media (max-width: 760px), (max-width: 980px) and (orientation: portrait), (max-width: 980px) and (max-height: 599px) {
  html body.is-map-active {
    --mobile-top-action-edge: 10px;
    --mobile-top-action-size: 44px;
    --mobile-top-action-reserve-one: 52px;
    --mobile-top-action-reserve-two: 104px;
  }

  html body.is-map-active .map-frame #locateButton.map-locate-button,
  html body.is-map-active.is-time-rings-view .map-frame #locateButton.map-locate-button {
    top: calc(env(safe-area-inset-top) + var(--mobile-top-action-edge));
    right: calc(env(safe-area-inset-right) + var(--mobile-top-action-edge));
    width: var(--mobile-top-action-size);
    min-width: var(--mobile-top-action-size);
    height: var(--mobile-top-action-size);
    min-height: var(--mobile-top-action-size);
  }

  html body.is-map-active .map-frame #mobileAdjustMap:not(:has(.mobile-settings-disclosure[open])),
  html body.is-map-active.has-origin .map-frame #mobileAdjustMap:not(:has(.mobile-settings-disclosure[open])),
  html body.is-time-rings-view.is-map-active.is-reach-mode.has-origin .map-frame #mobileAdjustMap:not(:has(.mobile-settings-disclosure[open])) {
    position: absolute;
    inset: calc(env(safe-area-inset-top) + var(--mobile-top-action-edge))
      calc(env(safe-area-inset-right) + var(--mobile-top-action-edge) + var(--mobile-top-action-reserve-one))
      auto auto;
    width: var(--mobile-top-action-size);
    min-width: var(--mobile-top-action-size);
    height: var(--mobile-top-action-size);
    min-height: var(--mobile-top-action-size);
    margin: 0;
  }

  html body.is-map-active.is-reach-mode.has-origin:not(.is-mobile-sheet-expanded):not(.is-mobile-sheet-full) #mobileMapSearchForm.mobile-map-search-form:not([hidden]) {
    top: calc(env(safe-area-inset-top) + var(--mobile-top-action-edge));
    right: calc(env(safe-area-inset-right) + var(--mobile-top-action-edge) + var(--mobile-top-action-reserve-two));
    left: calc(env(safe-area-inset-left) + var(--mobile-top-action-edge));
    width: auto;
    min-width: 0;
    max-width: none;
  }

  html body.is-map-active.is-reach-mode:not(.has-origin) #mobileMapSearchForm.mobile-map-search-form:not([hidden]) {
    top: calc(env(safe-area-inset-top) + var(--mobile-top-action-edge));
    right: calc(env(safe-area-inset-right) + var(--mobile-top-action-edge) + var(--mobile-top-action-reserve-one));
    left: calc(env(safe-area-inset-left) + var(--mobile-top-action-edge));
    width: auto;
    min-width: 0;
    max-width: none;
  }

  /* The Station Data sheet already names the active lens and conditions. */
  html body.is-map-active.is-index-mode .map-frame #mapStatePill {
    display: none;
  }

  /* Reserve the trigger's full width on the right at the narrowest supported
   * phone size instead of letting the spatial lens rail slide underneath it. */
  html body.is-map-active.is-reach-mode.has-origin:not(.is-time-rings-view):not(.is-mobile-sheet-expanded):not(.is-mobile-sheet-full) .mobile-map-control-rail {
    width: min(214px, calc(100% - 140px));
  }
}

/* Half-sheet task state keeps the map fully operable. These declarations live
 * at the end of the final material layer so legacy expanded-sheet rules cannot
 * restore full-width search or push controls behind the task sheet. */
@media (max-width: 760px), (max-width: 980px) and (orientation: portrait), (max-width: 980px) and (max-height: 599px) {
  html body.is-map-active.is-route-mode.is-mobile-sheet-half:not(.is-reach-mode):not(.is-index-mode):not(.is-inspect-mode) .map-frame > .mobile-map-control-rail {
    display: none;
  }

  html body.is-map-active.is-reach-mode.has-origin.is-mobile-sheet-half:not(.is-mobile-sheet-full) #mobileMapSearchForm.mobile-map-search-form:not([hidden]) {
    top: calc(env(safe-area-inset-top) + var(--mobile-top-action-edge, 10px));
    right: calc(env(safe-area-inset-right) + var(--mobile-top-action-edge, 10px) + var(--mobile-top-action-reserve-two, 104px));
    left: calc(env(safe-area-inset-left) + var(--mobile-top-action-edge, 10px));
    width: auto;
    min-width: 0;
    max-width: none;
  }

  html body.is-map-active.is-mobile-sheet-half:not(.is-mobile-sheet-full) .map-frame #mobileAdjustMap:not(:has(.mobile-settings-disclosure[open])) {
    z-index: 15;
  }

  html body.is-map-active.is-mobile-sheet-half:not(.is-mobile-sheet-full) .map-frame #locateButton.map-locate-button,
  html body.is-map-active.is-mobile-sheet-half:not(.is-mobile-sheet-full) .map-frame #hillsButton.map-hills-button {
    z-index: 14;
  }

  html body.is-map-active.is-reach-mode.has-origin.is-mobile-sheet-half:not(.is-mobile-sheet-full) .mobile-map-control-rail {
    position: absolute;
    top: calc(env(safe-area-inset-top) + 62px);
    right: auto;
    left: calc(env(safe-area-inset-left) + 16px);
    z-index: 10;
    display: flex;
    width: min(214px, calc(100% - 153px));
    height: 46px;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
  }

  html body.is-map-active.is-reach-mode.has-origin:not(.is-time-rings-view).is-mobile-sheet-half:not(.is-mobile-sheet-full):not(.is-mobile-settings-open) .map-surface-rail {
    position: absolute;
    top: calc(env(safe-area-inset-top) + 62px);
    right: calc(env(safe-area-inset-right) + 12px);
    left: auto;
    z-index: 12;
    display: flex;
    align-items: flex-start;
    width: 112px;
    height: 44px;
    overflow: visible;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
  }

  html body.is-map-active.is-reach-mode.has-origin.is-mobile-sheet-half:not(.is-mobile-sheet-full) .mobile-map-time-instrument {
    right: calc(env(safe-area-inset-right) + 14px);
    bottom: calc(env(safe-area-inset-bottom) + var(--mobile-task-panel-height) + 10px);
    left: calc(env(safe-area-inset-left) + 14px);
    opacity: 1;
    pointer-events: auto;
    transform: none;
  }

  html body.is-map-active.is-reach-mode.has-origin.is-mobile-sheet-half:not(.is-mobile-sheet-full) #mobileReachTimeControl.mobile-reach-time-control {
    opacity: 1;
    pointer-events: auto;
    transform: none;
  }

  html body.is-map-active.is-mobile-sheet-half:not(.is-mobile-sheet-full) .map-frame .distance-legend {
    top: auto;
    bottom: calc(env(safe-area-inset-bottom) + var(--mobile-task-panel-height) + 74px);
    height: 38px;
    min-height: 38px;
    max-height: 38px;
    align-self: start;
    opacity: 1;
    pointer-events: none;
    transform: none;
  }

  /* Plan and Data do not render Explore's travel-time instrument beneath the
   * scale. Keep their half-sheet scale on the shared 8px panel datum instead
   * of reserving the Explore-only instrument lane. */
  html body.is-map-active:is(.is-route-mode, .is-index-mode).is-mobile-sheet-half:not(.is-mobile-sheet-full)
    .map-frame #distanceLegend.distance-legend {
    bottom: calc(env(safe-area-inset-bottom) + var(--mobile-task-panel-height) + 8px);
  }

  /* Visible clear actions use a full touch target while retaining the quiet
   * 13px glyph. Padding reserves the same space inside both search owners. */
  html body.is-map-active #mobileMapSearchForm .mobile-map-search-row .origin-search-clear:not([hidden]),
  html body.is-map-active #mobileSheet #mobileSearchForm .mobile-search-row .origin-search-clear:not([hidden]) {
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
  }

  html body.is-map-active #mobileMapSearchForm .mobile-map-search-row #mobileMapStationSearch,
  html body.is-map-active #mobileSheet #mobileSearchForm .mobile-search-row #mobileStationSearch {
    padding-right: 52px;
  }

  /* The shared sheet system still reserves a 23px DOM-icon column here. The
   * atlas layer paints that icon with ::before, so collapse the stale column
   * and let the compact bilingual copy use the complete remaining button. */
  html body.is-map-active #mobileSheet.mobile-sheet
    > .mobile-mode-control .mode-button {
    grid-template-columns: minmax(0, 1fr);
    justify-items: stretch;
  }

  html body.is-map-active #mobileSheet.mobile-sheet
    > .mobile-mode-control .mode-button .mobile-mode-copy {
    grid-column: 1 / -1;
    justify-self: stretch;
    width: auto;
    min-width: 0;
    margin: 0;
  }

  /* Language names are content, not abbreviations: give 日本語 a real column
   * and make both choices direct 44px targets. */
  html body.is-map-active #mobileAdjustMap .mobile-settings-disclosure[open] .mobile-settings-language-toggle,
  html body.is-map-active.is-reach-mode.has-origin #mobileAdjustMap .mobile-settings-disclosure[open] .mobile-settings-language-toggle,
  html body.is-map-active.is-index-mode #mobileAdjustMap .mobile-settings-disclosure[open] .mobile-settings-language-toggle,
  html body.is-map-active.is-route-mode #mobileAdjustMap .mobile-settings-disclosure[open] .mobile-settings-language-toggle {
    box-sizing: border-box;
    grid-template-columns: 44px 64px;
    gap: 2px;
    width: 116px;
    min-width: 116px;
    min-height: 50px;
    padding: 2px;
    overflow: visible;
  }

}
/* The contextual rail wrapper is layout-transparent outside its mobile
 * progressive-disclosure treatment. */
.mobile-map-context-bar {
  display: contents;
}

.mobile-map-context-chip {
  display: none;
}

.sf-rent-comparison { margin-block: 10px; }
.sf-rent-comparison table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.sf-rent-comparison caption { text-align: left; padding-block: 8px; }
.sf-rent-comparison th, .sf-rent-comparison td {
  padding: 7px 4px;
  border-bottom: 1px solid var(--line, #d0d0ca);
  text-align: right;
}
.sf-rent-comparison th:first-child { text-align: left; }
.sf-rent-comparison p { overflow-wrap: anywhere; }
.rent-bedroom-controls, .character-thresholds { display:flex; flex-wrap:wrap; gap:6px; margin-block:10px; }
.rent-bedroom-controls button, .character-thresholds button { min-height:36px; padding:6px 10px; border:1px solid currentColor; border-radius:5px; color:inherit; background:transparent; font:inherit; cursor:pointer; }
.rent-bedroom-controls button[aria-pressed="true"], .character-thresholds button[aria-pressed="true"] { background:#254f49; color:#fff; }
.rent-provider-reference { border-inline-start:3px solid #67897d; padding:10px 12px; margin-block:12px; }
.neighborhood-character { margin-block:14px; overflow-wrap:anywhere; }
.neighborhood-character h3 { margin-block:8px; }
.character-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr)); gap:10px; }
.character-grid article { display:block; min-width:0; padding:12px; border:1px solid #c5cec5; border-radius:6px; }
.character-grid article header { display:flex; align-items:baseline; justify-content:space-between; gap:8px; }
.character-grid h4 { margin:0; font-size:14px; }
.character-grid article header strong { font-size:22px; }
.character-grid article p, .character-grid article small { font-size:12px; }
.character-grid ul { padding-inline-start:16px; margin-block:8px; font-size:12px; }
.character-grid li span { white-space:nowrap; }
@media (max-width:600px) { .rent-bedroom-controls button, .character-thresholds button { min-height:44px; } }