@media (max-width: 760px),
  (max-width: 980px) and (orientation: portrait),
  (max-width: 980px) and (max-height: 599px) {
  html body.is-map-active {
    --mobile-chrome-edge: max(10px, env(safe-area-inset-left));
    --mobile-chrome-top: calc(env(safe-area-inset-top) + 10px);
    --mobile-chrome-control: 44px;
    --mobile-chrome-gap: 8px;
    --mobile-chrome-row-two: calc(env(safe-area-inset-top) + 62px);
    --mobile-chrome-cream: var(--mobile-paper-floating);
    --mobile-chrome-border: var(--mobile-edge-floating);
    --mobile-chrome-shadow: var(--mobile-shadow-floating);
  }

  html body.is-map-active .map-frame > #mobileMapControlRail.mobile-map-control-rail,
  html body.is-map-active .map-frame > #mapStatePill,
  html body.is-map-active .map-frame > .map-corner-actions:has(#fullscreenButton) {
    display: none;
  }

  html body.is-map-active .mobile-map-context-bar {
    position: absolute;
    top: var(--mobile-chrome-row-two);
    right: calc(env(safe-area-inset-right) + 10px);
    left: calc(env(safe-area-inset-left) + 10px);
    z-index: 18;
    display: none;
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    gap: 8px;
    align-items: start;
    justify-content: start;
    width: auto;
    height: var(--mobile-chrome-control);
    pointer-events: none;
  }

  html body.is-map-active:is(.is-reach-mode, .is-index-mode):not(.is-mobile-sheet-full):not(.is-mobile-settings-open) .mobile-map-context-bar {
    display: grid;
  }

  html body.is-map-active:is(.is-route-mode, .is-inspect-mode) .mobile-map-context-bar,
  html body.is-map-active:has(.mobile-map-search-form:focus-within) .mobile-map-context-bar,
  html body.is-map-active:has(.mobile-map-search-results:not(:empty)) .mobile-map-context-bar {
    display: none;
  }

  html body.is-map-active .mobile-map-context-bar > * {
    pointer-events: auto;
  }

  html body.is-map-active #mobileMapContextBar #mobileSurfaceRail.map-surface-rail {
    position: relative;
    inset: auto;
    z-index: auto;
    display: block;
    width: auto;
    height: var(--mobile-chrome-control);
    opacity: 1;
    visibility: visible;
    transform: none;
  }

  html body.is-map-active.is-index-mode #mobileMapContextBar #mobileSurfaceRail.map-surface-rail {
    display: none;
  }

  #mobileMapContextBar #mobileSurfaceMenuButton,
  #mobileMapContextBar .mobile-map-context-chip {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    min-width: 0;
    height: var(--mobile-chrome-control);
    min-height: var(--mobile-chrome-control);
    margin: 0;
    padding: 0 12px;
    overflow: visible;
    border: 1px solid var(--mobile-chrome-border);
    border-radius: var(--mobile-radius-floating);
    background: var(--mobile-chrome-cream);
    color: #171510;
    box-shadow: var(--mobile-chrome-shadow);
    font: 720 var(--mobile-type-control)/1 var(--font-main);
    letter-spacing: 0;
    text-transform: none;
    white-space: nowrap;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  html body.is-map-active .mobile-map-context-bar .map-surface-rail .mobile-surface-menu-button {
    display: grid;
    grid-template-columns: 18px auto 7px;
    gap: 6px;
    min-width: 76px;
    padding-inline: 11px 10px;
  }

  html body.is-map-active .mobile-map-context-bar .surface-menu-icon {
    width: 18px;
    height: 18px;
  }

  html body.is-map-active .mobile-map-context-bar .surface-menu-icon svg {
    width: 18px;
    height: 18px;
  }

  html body.is-map-active .mobile-map-context-bar .mobile-surface-menu-label {
    overflow: visible;
    font: inherit;
    letter-spacing: 0;
    text-overflow: clip;
    text-transform: none;
  }

  html body.is-map-active .mobile-map-context-bar .mobile-surface-menu-chevron {
    width: 5px;
    height: 5px;
    margin: -3px 0 0;
  }

  html body.is-map-active .mobile-map-context-chip:is(:hover, :focus-visible),
  html body.is-map-active .mobile-map-context-bar .mobile-surface-menu-button:is(:hover, :focus-visible) {
    border-color: rgba(201, 53, 43, 0.48);
    background: var(--mobile-paper-floating-strong);
    outline: 3px solid rgba(201, 53, 43, 0.12);
    outline-offset: 1px;
    box-shadow: var(--mobile-chrome-shadow);
  }

  html body.is-map-active .mobile-map-context-chip[aria-expanded="true"] {
    border-color: rgba(201, 53, 43, 0.36);
    background: #171510;
    color: #fffdf7;
    box-shadow: var(--mobile-shadow-selected);
  }

  #mobileMapContextBar .mobile-map-context-chip[hidden] {
    display: none;
  }

  html body.is-map-active.is-index-mode #mobileMapSpatialViewPill {
    display: none;
  }

  html body.is-map-active .mobile-map-time-chip {
    gap: 6px;
    min-width: 76px;
  }

  html body.is-map-active .mobile-map-filters-chip {
    gap: 7px;
    min-width: 82px;
  }

  html body.is-map-active.is-index-mode .mobile-map-time-chip {
    min-width: 82px;
  }

  /* The four keys share the search row's edges. Earlier tiers sized each chip
     on its own, so the row ran 6px into the right gutter on first load and,
     once a station was chosen, squeezed "Transit" into its chevron. The IDs
     outrank those tiers; other languages keep their two-row layout from
     localization.css. */
  html[lang="en"] body.is-map-active #mobileMapContextBar.mobile-map-context-bar {
    grid-auto-columns: max-content;
    gap: 6px;
    justify-content: space-between;
  }

  html[lang="en"] body.is-map-active #mobileMapContextBar #mobileSurfaceRail #mobileSurfaceMenuButton.mobile-surface-menu-button {
    grid-template-columns: 16px max-content 8px;
    gap: 4px;
    width: max-content;
    min-width: 0;
    padding-inline: 9px 8px;
  }

  html body.is-map-active #mobileMapContextBar #mobileMapTimeChip.mobile-map-time-chip,
  html body.is-map-active #mobileMapContextBar #mobileMapFiltersChip.mobile-map-filters-chip {
    min-width: 0;
  }

  /* Below a 375px phone the Filters key drops to its icon; its aria-label
     still names it. */
  @media (max-width: 374px) {
    html[lang="en"] body.is-map-active #mobileMapContextBar #mobileMapFiltersChip.mobile-map-filters-chip {
      width: var(--mobile-chrome-control);
      padding-inline: 0;
    }

    html[lang="en"] body.is-map-active #mobileMapContextBar #mobileMapFiltersChip [data-mobile-filters-label] {
      display: none;
    }
  }

  .mobile-map-context-chip-icon {
    position: relative;
    display: inline-block;
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
    color: currentColor;
  }

  .mobile-map-context-chip-icon svg {
    display: block;
    width: 14px;
    height: 14px;
    overflow: visible;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .mobile-map-context-chip-icon::before,
  .mobile-map-context-chip-icon::after {
    content: none;
    display: none;
  }

  .mobile-map-time-chip-value {
    display: inline-flex;
    gap: 3px;
    align-items: baseline;
  }

  .mobile-map-time-chip-value b {
    font: 760 0.8rem/1 var(--font-main);
  }

  .mobile-map-time-chip-value i {
    font: 650 0.64rem/1 var(--font-main);
    font-style: normal;
    opacity: 0.68;
  }

  html body.is-map-active .mobile-map-context-bar .map-surface-rail .primary-surface-story-toggle {
    display: none;
  }

  #mobileSurfaceRail.is-open > #primarySurfaceStoryToggle {
    position: absolute;
    top: calc(var(--mobile-chrome-control) + 4px);
    right: auto;
    left: 0;
    z-index: 4;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-auto-rows: 44px;
    gap: 0;
    box-sizing: border-box;
    width: min(124px, calc(100vw - 20px));
    max-width: 124px;
    min-height: 0;
    height: auto;
    padding: 4px;
    border: 1px solid var(--mobile-chrome-border);
    border-radius: var(--mobile-radius-floating);
    background: var(--mobile-paper-floating-strong);
    box-shadow: var(--mobile-shadow-floating);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    transform: none;
  }

  #mobileSurfaceRail.is-open > #primarySurfaceStoryToggle > .surface-story-button:not(.is-active) {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    height: 44px;
    min-height: 44px;
    padding: 0 8px 0 30px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    background-position: left 8px center;
    background-size: 14px 14px;
    color: rgba(23, 21, 16, 0.7);
    opacity: 1;
    font: 650 0.6875rem/1 var(--font-main);
    letter-spacing: 0.04em;
    text-align: left;
    transform: none;
    pointer-events: auto;
  }

  #mobileSurfaceRail.is-open > #primarySurfaceStoryToggle > .surface-story-button.is-active {
    display: none;
  }

  html body.is-map-active #mobileMapSearchForm.mobile-map-search-form:not([hidden]) {
    position: absolute;
    top: var(--mobile-chrome-top);
    right: calc(env(safe-area-inset-right) + 62px);
    left: calc(env(safe-area-inset-left) + 10px);
    z-index: 20;
    display: block;
    width: auto;
    min-width: 0;
    max-width: none;
    margin: 0;
    transform: none;
  }

  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]),
  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]) {
    right: calc(env(safe-area-inset-right) + 62px);
  }

  html body.is-map-active:is(.is-route-mode, .is-inspect-mode, .is-mobile-sheet-full) #mobileMapSearchForm.mobile-map-search-form {
    display: none;
  }

  html body.is-map-active #mobileMapSearchForm > label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  html body.is-map-active #mobileMapSearchForm .mobile-map-search-row {
    box-sizing: border-box;
    height: var(--mobile-chrome-control);
    min-height: var(--mobile-chrome-control);
    border: 1px solid var(--mobile-chrome-border);
    border-radius: var(--mobile-radius-floating);
    background: var(--mobile-chrome-cream);
    box-shadow: var(--mobile-chrome-shadow);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  html body.is-map-active #mobileMapSearchForm.mobile-map-search-form .mobile-map-search-row #mobileMapStationSearch {
    height: 42px;
    min-height: 42px;
    padding: 0 46px 0 42px;
    border: 0;
    border-radius: var(--mobile-radius-floating);
    background: transparent;
    font-size: var(--mobile-type-body);
    font-weight: 630;
    line-height: 1;
  }

  html body.is-map-active #mobileMapSearchForm .mobile-map-search-row::before {
    content: "";
    position: absolute;
    top: 14px;
    left: 16px;
    box-sizing: border-box;
    width: 14px;
    height: 14px;
    border: 1.7px solid rgba(23, 21, 16, 0.72);
    border-radius: 50%;
    pointer-events: none;
  }

  html body.is-map-active #mobileMapSearchForm .mobile-map-search-row::after {
    content: "";
    position: absolute;
    top: 27px;
    left: 27px;
    width: 6px;
    height: 1.7px;
    border-radius: 999px;
    background: rgba(23, 21, 16, 0.72);
    pointer-events: none;
    transform: rotate(45deg);
  }

  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 {
    position: absolute;
    top: var(--mobile-chrome-top);
    right: calc(env(safe-area-inset-right) + 10px);
    z-index: 21;
    display: grid;
    width: var(--mobile-chrome-control);
    min-width: var(--mobile-chrome-control);
    height: var(--mobile-chrome-control);
    min-height: var(--mobile-chrome-control);
    border: 1px solid var(--mobile-chrome-border);
    border-radius: 50%;
    background: var(--mobile-chrome-cream);
    box-shadow: var(--mobile-chrome-shadow);
    opacity: 1;
    visibility: visible;
    transform: none;
    pointer-events: auto;
  }

  /* Hills shares Locate's round key one row below the Filters chip. */
  html body.is-map-active .map-frame #hillsButton.map-hills-button {
    z-index: 21;
    width: var(--mobile-chrome-control);
    min-width: var(--mobile-chrome-control);
    height: var(--mobile-chrome-control);
    min-height: var(--mobile-chrome-control);
    border: 1px solid var(--mobile-chrome-border);
    border-radius: 50%;
    background: var(--mobile-chrome-cream);
    box-shadow: var(--mobile-chrome-shadow);
    transform: none;
  }

  html body.is-map-active .map-frame #hillsButton.map-hills-button[aria-pressed="true"] {
    border-color: #3f3526;
    background: #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);
  }

  html body.is-map-active #mobileMapSearchResults.mobile-map-search-results:not(:empty) {
    right: 0;
    left: 0;
    box-sizing: border-box;
    width: auto;
    border: 1px solid var(--mobile-edge-floating);
    border-radius: var(--mobile-radius-floating);
    background: var(--mobile-paper-floating-strong);
    box-shadow: var(--mobile-shadow-floating);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    transform: none;
  }

  #mobileMapSearchResults.mobile-map-search-results .search-result {
    border-radius: var(--mobile-radius-control);
    background: var(--mobile-paper-floating);
    font-size: var(--mobile-type-body);
  }

  html body.is-map-active:is(.is-route-mode, .is-inspect-mode, .is-mobile-sheet-full) .map-frame #locateButton.map-locate-button,
  html body.is-map-active.is-mobile-settings-open .map-frame #locateButton.map-locate-button,
  html body.is-map-active:is(.is-route-mode, .is-inspect-mode, .is-mobile-sheet-full) .map-frame #hillsButton.map-hills-button,
  html body.is-map-active.is-mobile-settings-open .map-frame #hillsButton.map-hills-button {
    display: none;
  }

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

  html body.is-map-active.is-mobile-time-control-open:not(.is-mobile-sheet-full) #mobileMapTimePopover.mobile-map-time-instrument.mobile-context-time-popover[data-context-open="true"] {
    position: absolute;
    top: calc(var(--mobile-chrome-row-two) + 46px);
    right: auto;
    bottom: auto;
    left: calc(env(safe-area-inset-left) + 10px);
    z-index: 19;
    display: block;
    box-sizing: border-box;
    width: min(252px, calc(100% - env(safe-area-inset-left) - env(safe-area-inset-right) - 20px));
    min-height: 52px;
    margin: 0;
    padding: 4px 9px;
    overflow: visible;
    border: 1px solid var(--mobile-chrome-border);
    border-radius: var(--mobile-radius-floating);
    background: var(--mobile-paper-floating-strong);
    box-shadow: var(--mobile-shadow-floating);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }

  html body.is-map-active .mobile-context-time-popover > .map-zoom-controls,
  html body.is-map-active .mobile-context-time-popover #mobileReachTimeControl > .mobile-time-step-button {
    display: none;
  }

  html body.is-map-active.is-reach-mode.has-origin.is-mobile-time-control-open
    #mobileMapTimePopover.mobile-context-time-popover #mobileReachTimeControl.mobile-reach-time-control {
    display: block;
    box-sizing: border-box;
    width: 100%;
    min-height: 42px;
    height: 42px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: var(--mobile-radius-control);
    background: transparent;
    box-shadow: none;
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }

  html body.is-map-active.is-reach-mode.has-origin.is-mobile-time-control-open
    #mobileMapTimePopover.mobile-context-time-popover #mobileReachTimeControl .mobile-time-range-label {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 27px 11px;
    grid-template-areas: "rail" "scale";
    gap: 0;
    align-items: center;
    box-sizing: border-box;
    width: 100%;
    min-height: 42px;
    height: 42px;
    padding: 0 2px;
    overflow: visible;
    border: 0;
    background: transparent;
  }

  html body.is-map-active.is-reach-mode.has-origin.is-mobile-time-control-open
    #mobileMapTimePopover.mobile-context-time-popover #mobileReachTimeControl .mobile-time-range-label > span {
    display: none;
  }

  html body.is-map-active.is-reach-mode.has-origin.is-mobile-time-control-open
    #mobileMapTimePopover.mobile-context-time-popover #mobileReachTimeControl .mobile-time-range-label > input {
    grid-area: rail;
    width: 100%;
    min-width: 0;
    height: 44px;
    margin: 0;
  }


  html body.is-map-active.is-reach-mode.has-origin.is-mobile-time-control-open
    #mobileMapTimePopover.mobile-context-time-popover #mobileReachTimeControl .mobile-time-range-label > strong {
    display: none;
  }

  html body.is-map-active.is-reach-mode.has-origin.is-mobile-time-control-open
    #mobileMapTimePopover.mobile-context-time-popover .mobile-map-time-scale {
    grid-area: scale;
    position: relative;
    display: block;
    height: 11px;
    margin: 0 2px;
    color: rgba(23, 21, 16, 0.58);
    font: 600 0.5rem/1 var(--font-main);
    letter-spacing: 0;
  }

  html body.is-map-active.is-reach-mode.has-origin.is-mobile-time-control-open
    #mobileMapTimePopover.mobile-context-time-popover .mobile-map-time-scale span[data-time-mark]:not([hidden]) {
    display: block;
  }

  html body.is-map-active #mobileAdjustMap:has(#mobileSettingsDisclosure:not([open])) {
    display: none;
  }

  html body.is-map-active #mobileAdjustMap:has(#mobileSettingsDisclosure[open]) {
    display: block;
  }

  html body.is-map-active #mobileAdjustMap .mobile-settings-disclosure[open] {
    border-radius: var(--mobile-radius-sheet);
  }

  html body.is-map-active #mobileAdjustMap .mobile-settings-disclosure[open] > summary {
    min-height: 52px;
    height: 52px;
    padding-inline: 18px 52px;
    border-radius: var(--mobile-radius-sheet) var(--mobile-radius-sheet) 0 0;
    font-size: var(--mobile-type-caption);
    letter-spacing: 0.03em;
    text-transform: none;
  }

  html body.is-map-active #mobileAdjustMap .mobile-settings-disclosure[open] > h3 {
    display: none;
  }

  html body.is-map-active #mobileAdjustMap .mobile-settings-disclosure[open] > .mobile-control-grid {
    padding-top: 10px;
  }

  /* The Filters sheet has a fixed header and one genuinely scrollable content
     row. A definite block size lets minmax(0, 1fr) constrain the grid instead
     of clipping a content-sized child at the sheet boundary. */
  html body.is-map-active #mobileAdjustMap .mobile-settings-disclosure[open],
  html body.is-map-active.is-reach-mode.has-origin:not(.is-time-rings-view)
    #mobileAdjustMap .mobile-settings-disclosure[open],
  html body.is-time-rings-view.is-map-active.is-reach-mode.has-origin
    #mobileAdjustMap .mobile-settings-disclosure[open] {
    box-sizing: border-box;
    grid-template-rows: 56px minmax(0, 1fr);
    width: 100%;
    height: min(78dvh, 620px);
    max-height: min(78dvh, 620px);
    overflow: hidden;
    border-radius: var(--mobile-radius-sheet);
  }

  html body.is-map-active #mobileAdjustMap .mobile-settings-disclosure[open] > summary,
  html body.is-map-active.is-reach-mode.has-origin:not(.is-time-rings-view)
    #mobileAdjustMap .mobile-settings-disclosure[open] > summary,
  html body.is-time-rings-view.is-map-active.is-reach-mode.has-origin
    #mobileAdjustMap .mobile-settings-disclosure[open] > summary {
    box-sizing: border-box;
    width: 100%;
    min-height: 56px;
    height: 56px;
    padding: 0 18px 0 20px;
    border-radius: var(--mobile-radius-sheet) var(--mobile-radius-sheet) 0 0;
    background: rgba(255, 253, 247, 0.92);
    color: #171510;
    box-shadow: none;
    font: 760 1rem/1 var(--font-main);
    letter-spacing: -0.01em;
    text-transform: none;
    transform: none;
  }

  html body.is-map-active #mobileAdjustMap .mobile-settings-disclosure[open] > summary > span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  html body.is-map-active #mobileAdjustMap .mobile-settings-disclosure[open] > summary::after {
    content: "\00d7";
    display: grid;
    place-items: center;
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    margin-right: -12px;
    background: transparent;
    color: var(--chrome-red, #c9352b);
    font: 680 1.35rem/1 var(--font-main);
    transform: none;
  }

  html body.is-map-active #mobileAdjustMap .mobile-settings-disclosure[open] > .mobile-control-grid,
  html body.is-map-active.is-reach-mode.has-origin:not(.is-time-rings-view)
    #mobileAdjustMap .mobile-settings-disclosure[open] > .mobile-control-grid,
  html body.is-time-rings-view.is-map-active.is-reach-mode.has-origin
    #mobileAdjustMap .mobile-settings-disclosure[open] > .mobile-control-grid {
    box-sizing: border-box;
    grid-auto-rows: max-content;
    align-content: start;
    min-height: 0;
    height: calc(min(78dvh, 620px) - 56px);
    max-height: calc(min(78dvh, 620px) - 56px);
    padding: 12px 18px calc(env(safe-area-inset-bottom) + 22px);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scroll-padding-block: 12px 22px;
    scrollbar-color: rgba(23, 21, 16, 0.32) transparent;
    scrollbar-width: thin;
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
  }

  html body.is-map-active #mobileAdjustMap .mobile-control-section-title {
    color: rgba(23, 21, 16, 0.58);
    font-size: 0.72rem;
    letter-spacing: 0.075em;
  }

  html body.is-map-active .map-frame #distanceLegend.distance-legend {
    box-sizing: border-box;
    min-width: 72px;
    width: auto;
    max-width: 88px;
    min-height: 32px;
    height: 32px;
    max-height: 32px;
    padding: 5px 9px;
    overflow: hidden;
    border: 1px solid rgba(23, 21, 16, 0.1);
    border-radius: var(--mobile-radius-analytic);
    background: var(--mobile-paper-floating);
    box-shadow: var(--mobile-shadow-contact);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  /* Both map keys share one baseline above the collapsed sheet. Keeping this
     value in the sheet-clearance coordinate system prevents mode-specific
     offsets from drifting apart as the peek height changes. */
  html body.is-map-active.is-reach-mode.has-origin:not(.is-time-rings-view):not(.is-mobile-sheet-expanded)
    .map-frame #distanceLegend.distance-legend,
  html body.is-map-active.is-reach-mode.has-origin:not(.is-time-rings-view):not(.is-mobile-sheet-expanded)
    .map-frame #legend.legend {
    top: auto;
    bottom: var(--mobile-map-bottom-clearance, 182px);
  }

  html body.is-map-active:not(.is-mobile-sheet-expanded) .map-frame .map-data-attribution {
    bottom: calc(var(--mobile-map-bottom-clearance, 182px) + 54px);
  }

  html body.is-map-active .map-frame #distanceLegend.distance-legend > span {
    font-size: 0.62rem;
    font-weight: 650;
    opacity: 0.72;
  }

  html body.is-map-active .map-frame .map-data-attribution {
    padding: 2px 5px;
    border: 0;
    background: rgba(255, 253, 247, 0.58);
    box-shadow: none;
    opacity: 0.66;
    font-size: 0.52rem;
  }

  html body.is-map-active #mobileIndexLegend.mobile-index-map-legend {
    max-width: min(268px, calc(100vw - 20px));
    border-color: rgba(23, 21, 16, 0.12);
    border-radius: var(--mobile-radius-analytic);
    background: var(--mobile-paper-floating);
    box-shadow: var(--mobile-shadow-contact);
  }

  html body.is-map-active {
    /* The collapsed sheet is an identity teaser, not a miniature report. It
       carries one desktop-style kicker/title/classification stack while
       preserving the map as the primary canvas. */
    --mobile-sheet-peek: clamp(126px, 15dvh, 134px);
  }

  html body.is-map-active.is-reach-mode.has-origin {
    --mobile-sheet-peek: clamp(126px, 15dvh, 134px);
  }

  html body.is-map-active #mobileSheet.mobile-sheet {
    border-radius: var(--mobile-radius-sheet) var(--mobile-radius-sheet) 0 0;
  }

  html body.is-map-active:is(.is-reach-mode, .is-route-mode, .is-index-mode, .is-inspect-mode)
    #mobileSheet.mobile-sheet:is([data-snap="collapsed"], [data-snap="half"], [data-snap="full"])
    > .mobile-project-signature {
    display: none;
  }

  html body.is-map-active #mobileSheet .mobile-sheet-actions {
    display: none;
  }

  html body.is-map-active #mobileSheet > .mobile-sheet-context-rail {
    display: none;
  }

  html body.is-map-active #mobileSheet.mobile-sheet[data-snap="collapsed"] > #mobileSheetHandle.mobile-sheet-handle {
    position: absolute;
    top: 0;
    left: 50%;
    width: 96px;
    min-width: 96px;
    height: 44px;
    min-height: 44px;
    margin: 0 0 0 -48px;
    transform: none;
  }

  /* One compact grabber serves Launch, Explore, Plan, and Data. The button
     retains its 44px interaction height; only the painted bar is reduced and
     kept in the sheet's top gutter, clear of the identity copy below. */
  html body.is-map-active #mobileSheet.mobile-sheet:is([data-snap="collapsed"], [data-snap="half"], [data-snap="full"])
    > #mobileSheetHandle.mobile-sheet-handle::before {
    position: absolute;
    top: 10px;
    left: 50%;
    z-index: 1;
    width: 38px;
    height: 4px;
    margin: 0;
    border: 0;
    border-radius: 99px;
    background: rgba(17, 16, 14, 0.42);
    box-shadow: none;
    transform: translateX(-50%);
  }

  html body.is-map-active #mobileSheet.mobile-sheet:is([data-snap="collapsed"], [data-snap="half"], [data-snap="full"])
    > #mobileSheetHandle.mobile-sheet-handle::after {
    content: none;
    display: none;
  }

  html body.is-map-active.is-reach-mode:not(.has-origin)
    #mobileSheet.mobile-sheet[data-snap="collapsed"] > #mobilePrimarySummary.mobile-primary-summary {
    box-sizing: border-box;
    padding: 20px 0 0;
  }

  html body.is-map-active #mobileSheet.mobile-sheet[data-snap="collapsed"] > .mobile-sheet-head {
    box-sizing: border-box;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-content: center;
    height: calc(var(--mobile-sheet-peek) - 6px);
    min-height: calc(var(--mobile-sheet-peek) - 6px);
    margin: 0;
    padding: 34px 18px 8px;
    overflow: hidden;
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  html body.is-map-active #mobileSheet.mobile-sheet[data-snap="collapsed"] > .mobile-sheet-head::before,
  html body.is-map-active #mobileSheet.mobile-sheet[data-snap="collapsed"] > .mobile-sheet-head::after,
  html body.is-map-active #mobileSheet.mobile-sheet[data-snap="collapsed"] > .mobile-sheet-head > div:first-child::before,
  html body.is-map-active #mobileSheet.mobile-sheet[data-snap="collapsed"] > .mobile-sheet-head > div:first-child::after {
    content: none;
    display: none;
  }

  html body.is-map-active #mobileSheet.mobile-sheet[data-snap="collapsed"] > .mobile-sheet-head > div:first-child {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    gap: 2px;
    align-content: center;
    min-width: 0;
    padding: 0;
  }

  html body.is-map-active #mobileSheet.mobile-sheet[data-snap="collapsed"] .mobile-sheet-head #mobileSheetEyebrow {
    display: block;
    grid-column: 1;
    grid-row: 1;
    max-width: 100%;
    margin: 0;
    overflow: hidden;
    color: rgba(23, 21, 16, 0.54);
    font: 720 0.625rem/1.1 var(--font-rail-label);
    letter-spacing: 0.075em;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
  }

  html body.is-map-active #mobileSheet.mobile-sheet[data-snap="collapsed"] .mobile-sheet-head #mobileOriginTitle,
  html body.is-map-active #mobileSheet.mobile-sheet[data-snap="collapsed"] .mobile-sheet-head #mobileOriginTitle.is-ekimeihyo {
    display: block;
    grid-column: 1;
    grid-row: 2;
    width: auto;
    max-width: 100%;
    min-width: 0;
    height: auto;
    max-height: none;
    margin: 0;
    overflow: hidden;
    color: var(--ink);
    font: 760 clamp(1rem, 4.6vw, 1.12rem)/1.08 var(--font-ui);
    letter-spacing: -0.015em;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  html body.is-map-active #mobileSheet.mobile-sheet[data-snap="collapsed"] .mobile-sheet-head #mobileOriginTitle.is-ekimeihyo {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto;
    gap: 1px;
  }

  html body.is-map-active #mobileSheet.mobile-sheet[data-snap="collapsed"] .mobile-sheet-head #mobileOriginTitle .mobile-origin-primary {
    overflow: hidden;
    font-size: 1.375rem;
    line-height: 1.05;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  html body.is-map-active #mobileSheet.mobile-sheet[data-snap="collapsed"] .mobile-sheet-head #mobileOriginTitle .mobile-origin-secondary {
    overflow: hidden;
    color: rgba(23, 21, 16, 0.58);
    font-size: 0.75rem;
    line-height: 1;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  html body.is-map-active #mobileSheet[data-snap="collapsed"] :is(
    #mobileStatusText,
    #mobileStationRole,
    #mobileCollapsedLineLogo
  ) {
    display: none;
  }

  html body.is-map-active:is(.is-reach-mode.has-origin, .is-index-mode)
    #mobileSheet.mobile-sheet[data-snap="collapsed"]
    > .mobile-sheet-head
    #mobileCollapsedLineLogo.mobile-collapsed-line-logo:not([hidden]) {
    display: none;
  }

  html body.is-map-active #mobileSheet.mobile-sheet[data-snap="collapsed"] .mobile-sheet-head #mobileCollapsedSummary {
    display: -webkit-box;
    grid-column: 1;
    grid-row: 3;
    max-width: 42ch;
    margin: 1px 0 0;
    overflow: hidden;
    color: rgba(23, 21, 16, 0.62);
    font: 540 0.72rem/1.28 var(--font-ui);
    letter-spacing: 0;
    text-wrap: pretty;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  html body.is-map-active.is-reach-mode.has-origin #mobileSheet.mobile-sheet[data-snap="collapsed"] .mobile-sheet-head #mobileCollapsedSummary {
    display: block;
    position: relative;
    box-sizing: border-box;
    width: 100%;
    max-width: none;
    min-height: 21px;
    margin-top: 0;
    padding-bottom: 7px;
    overflow: hidden;
    font-weight: 650;
    line-height: 1.1;
    text-overflow: ellipsis;
    white-space: nowrap;
    -webkit-line-clamp: initial;
  }

  html body.is-map-active.is-reach-mode.has-origin
    #mobileSheet.mobile-sheet[data-snap="collapsed"]
    .mobile-sheet-head
    #mobileCollapsedSummary[data-network-progress="true"]::before,
  html body.is-map-active.is-reach-mode.has-origin
    #mobileSheet.mobile-sheet[data-snap="collapsed"]
    .mobile-sheet-head
    #mobileCollapsedSummary[data-network-progress="true"]::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    height: 4px;
    border-radius: 99px;
  }

  html body.is-map-active.is-reach-mode.has-origin
    #mobileSheet.mobile-sheet[data-snap="collapsed"]
    .mobile-sheet-head
    #mobileCollapsedSummary[data-network-progress="true"]::before {
    width: 100%;
    background: rgba(23, 21, 16, 0.13);
  }

  html body.is-map-active.is-reach-mode.has-origin
    #mobileSheet.mobile-sheet[data-snap="collapsed"]
    .mobile-sheet-head
    #mobileCollapsedSummary[data-network-progress="true"]::after {
    width: max(8px, var(--mobile-collapsed-reach-progress, 0%));
    background: var(--accent);
  }

  html body.is-map-active.is-reach-mode.has-origin
    #mobileSheet.mobile-sheet[data-snap="collapsed"]
    > #mobilePrimarySummary {
    display: none;
  }

  html body.is-map-active.is-reach-mode.has-origin
    #mobileSheet.mobile-sheet[data-snap="collapsed"]
    > .mobile-sheet-head
    > div:first-child {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    gap: 2px;
  }

  html body.is-map-active.is-reach-mode.has-origin
    #mobileSheet.mobile-sheet[data-snap="collapsed"]
    .mobile-sheet-head
    #mobileOriginTitle.is-ekimeihyo {
    grid-column: 1;
    grid-row: 2;
    width: 100%;
    justify-self: stretch;
  }

  html body.is-map-active.is-reach-mode.has-origin
    #mobileSheet.mobile-sheet[data-snap="collapsed"]
    .mobile-sheet-head
    #mobileOriginTitle .mobile-origin-primary {
    font-size: 1.375rem;
    line-height: 1.05;
  }

  html body.is-map-active.is-reach-mode.has-origin
    #mobileSheet.mobile-sheet[data-snap="collapsed"]
    .mobile-sheet-head
    #mobileOriginTitle .mobile-origin-secondary {
    font-size: 0.75rem;
    line-height: 1;
  }

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

  html body.is-map-active.is-index-mode
    #mobileSheet.mobile-sheet[data-snap="collapsed"]
    .mobile-sheet-head
    #mobileSheetEyebrow {
    grid-column: 1;
    grid-row: 1;
  }

  html body.is-map-active.is-index-mode
    #mobileSheet.mobile-sheet[data-snap="collapsed"]
    .mobile-sheet-head
    #mobileOriginTitle {
    display: block;
    grid-column: 1;
    grid-row: 2;
    font: 760 clamp(1rem, 4.6vw, 1.12rem)/1.08 var(--font-ui);
  }

  html body.is-map-active.is-index-mode
    #mobileSheet.mobile-sheet[data-snap="collapsed"]
    .mobile-sheet-head
    #mobileCollapsedSummary {
    grid-column: 1;
    grid-row: 3;
    margin: 1px 0 0;
    font: 540 0.72rem/1.28 var(--font-ui);
  }

  html body.is-map-active #mobileSheet.mobile-sheet[data-snap="collapsed"] > .mobile-collapsed-control-bar {
    display: grid;
  }

  /* Adaptive map dock: the sheet's collapsed face is a compact instrument
     paired with the existing half workspace and full reader. Geometry has two
     tiers only, so result publication never makes the map jump. */
  html body.is-map-active.has-origin[data-mobile-dock-variant],
  html body.is-map-active.is-route-mode[data-mobile-dock-variant],
  html body.is-map-active.is-index-mode[data-mobile-dock-variant],
  html body.is-map-active.is-inspect-mode[data-mobile-dock-variant] {
    --mobile-sheet-peek: clamp(166px, 20dvh, 174px);
    --mobile-map-bottom-clearance: calc(env(safe-area-inset-bottom) + var(--mobile-sheet-peek) + 10px);
  }

  html body.is-map-active[data-mobile-dock-variant="hidden"] {
    --mobile-sheet-peek: 104px;
    --mobile-map-bottom-clearance: calc(env(safe-area-inset-bottom) + var(--mobile-sheet-peek) + 10px);
  }

  /* The peek has to hold the sheet's 4px top padding, this head, the 2px row
     gap and the 52px mode bar, plus 2px because the sheet geometry seats the
     sheet up to 2px below its peek. At 55px the bar ran 4px past the bottom
     of the viewport. */
  html body.is-map-active #mobileSheet.mobile-sheet[data-snap="collapsed"] > .mobile-sheet-head {
    height: calc(var(--mobile-sheet-peek) - 60px);
    min-height: calc(var(--mobile-sheet-peek) - 60px);
    padding: 27px 16px 4px;
    border-bottom: 1px solid rgba(23, 21, 16, 0.16);
  }

  html body.is-map-active #mobileSheet.mobile-sheet[data-snap="collapsed"] > .mobile-sheet-head > .mobile-dock-content {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    grid-template-rows: auto auto auto 4px;
    gap: 2px 10px;
    align-content: center;
    min-width: 0;
    padding: 0;
  }

  html body.is-map-active #mobileSheet.mobile-sheet[data-snap="collapsed"] .mobile-dock-content #mobileSheetEyebrow {
    grid-column: 1;
    grid-row: 1;
    align-self: end;
    color: rgba(23, 21, 16, 0.58);
    font-size: 0.625rem;
    font-weight: 760;
    letter-spacing: 0.09em;
  }

  html body.is-map-active #mobileSheet.mobile-sheet[data-snap="collapsed"] .mobile-dock-content :is(
    #mobileOriginTitle,
    #mobileOriginTitle.is-ekimeihyo,
    #mobileCollapsedPlanTitle.mobile-collapsed-plan-title:not([hidden])
  ) {
    grid-column: 1;
    grid-row: 2;
    align-self: center;
    min-width: 0;
    margin: 0;
    color: var(--ink);
    font: 760 clamp(1.05rem, 4.8vw, 1.28rem)/1.04 var(--font-ui);
    letter-spacing: -0.018em;
  }

  html body.is-map-active #mobileSheet.mobile-sheet[data-snap="collapsed"] .mobile-dock-content #mobileCollapsedPlanTitle.mobile-collapsed-plan-title {
    display: none;
  }

  html body.is-map-active #mobileSheet.mobile-sheet[data-snap="collapsed"] .mobile-dock-content #mobileOriginTitle {
    display: block;
  }

  html body.is-map-active #mobileSheet.mobile-sheet[data-snap="collapsed"] .mobile-dock-content #mobileOriginTitle:not(.is-ekimeihyo) {
    justify-self: stretch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  html body.is-map-active #mobileSheet.mobile-sheet[data-snap="collapsed"] .mobile-dock-content #mobileOriginTitle.is-ekimeihyo {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto;
    gap: 1px;
  }

  html body.is-map-active #mobileSheet.mobile-sheet[data-snap="collapsed"] .mobile-dock-content #mobileOriginTitle .mobile-origin-primary {
    overflow: hidden;
    font-size: 1.375rem;
    line-height: 1;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  html body.is-map-active #mobileSheet.mobile-sheet[data-snap="collapsed"] .mobile-dock-content #mobileOriginTitle .mobile-origin-secondary {
    overflow: hidden;
    color: rgba(23, 21, 16, 0.58);
    font: 650 0.72rem/1 var(--font-ui);
    letter-spacing: 0.005em;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  html body.is-map-active #mobileSheet.mobile-sheet[data-snap="collapsed"] .mobile-dock-content #mobileCollapsedSummary {
    display: block;
    grid-column: 1;
    grid-row: 3;
    align-self: start;
    max-width: none;
    min-width: 0;
    min-height: 0;
    margin: 1px 0 0;
    padding: 0;
    overflow: hidden;
    color: rgba(23, 21, 16, 0.67);
    font: 540 0.75rem/1.2 var(--font-ui);
    letter-spacing: 0;
    text-overflow: ellipsis;
    white-space: nowrap;
    -webkit-line-clamp: initial;
  }

  html body.is-map-active #mobileSheet.mobile-sheet[data-snap="collapsed"] .mobile-collapsed-focal:not([hidden]) {
    display: grid;
    grid-column: 2;
    grid-row: 1 / 4;
    gap: 2px;
    align-self: center;
    justify-items: end;
    min-width: 56px;
    max-width: 108px;
  }

  html body.is-map-active #mobileSheet.mobile-sheet[data-snap="collapsed"] .mobile-collapsed-focal > strong {
    max-width: 100%;
    overflow: hidden;
    color: var(--ink);
    font: 770 clamp(1.42rem, 6.8vw, 1.72rem)/0.92 var(--font-metric);
    font-variant-numeric: tabular-nums lining-nums;
    letter-spacing: -0.045em;
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  html body.is-map-active #mobileSheet.mobile-sheet[data-snap="collapsed"] .mobile-collapsed-focal > span {
    max-width: 100%;
    overflow: hidden;
    color: rgba(23, 21, 16, 0.6);
    font: 700 0.61rem/1.05 var(--font-rail-label);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.055em;
    text-align: right;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
  }

  html body.is-map-active #mobileSheet.mobile-sheet[data-snap="collapsed"] .mobile-collapsed-progress:not([hidden]) {
    display: block;
    grid-column: 1 / -1;
    grid-row: 4;
    align-self: end;
    width: 100%;
    height: 3px;
    margin: 1px 0 0;
    overflow: hidden;
    border: 0;
    border-radius: 99px;
    appearance: none;
    background: rgba(23, 21, 16, 0.13);
  }

  html body.is-map-active #mobileSheet.mobile-sheet[data-snap="collapsed"] .mobile-collapsed-progress::-webkit-progress-bar {
    border-radius: 99px;
    background: rgba(23, 21, 16, 0.13);
  }

  html body.is-map-active #mobileSheet.mobile-sheet[data-snap="collapsed"] .mobile-collapsed-progress::-webkit-progress-value {
    border-radius: 99px;
    background: var(--accent);
    transition: width 240ms ease-out;
  }

  html body.is-map-active #mobileSheet.mobile-sheet[data-snap="collapsed"] .mobile-collapsed-progress::-moz-progress-bar {
    border-radius: 99px;
    background: var(--accent);
    transition: width 240ms ease-out;
  }

  html body.is-map-active[data-mobile-dock-variant="loading"]
    #mobileSheet.mobile-sheet[data-snap="collapsed"] .mobile-collapsed-progress:not([value]) {
    background:
      linear-gradient(90deg,
        rgba(171, 56, 50, 0.08) 0 32%,
        rgba(171, 56, 50, 0.74) 46% 54%,
        rgba(171, 56, 50, 0.08) 68% 100%);
    background-size: 220% 100%;
    animation: mobile-dock-loading 1.15s ease-in-out infinite;
  }

  html body.is-map-active[data-mobile-dock-variant="unavailable"]
    #mobileSheet.mobile-sheet[data-snap="collapsed"] .mobile-dock-content #mobileCollapsedSummary {
    color: #7d302c;
    font-weight: 650;
  }

  @keyframes mobile-dock-loading {
    from { background-position: 100% 0; }
    to { background-position: -100% 0; }
  }

  html body.is-map-active #mobileSheet.mobile-sheet[data-snap="collapsed"] .mobile-dock-content #mobileCollapsedPrimaryAction:not([hidden]) {
    position: relative;
    inset: auto;
    display: inline-flex;
    grid-column: 3;
    grid-row: 1 / 4;
    align-self: center;
    align-items: center;
    justify-content: center;
    width: 44px;
    min-width: 44px;
    max-width: 44px;
    height: 44px;
    min-height: 44px;
    max-height: 44px;
    padding: 0;
    overflow: hidden;
    border: 1px solid rgba(255, 253, 247, 0.18);
    border-radius: 50%;
    background: linear-gradient(145deg, #1b1915 0%, var(--ink) 72%);
    box-shadow:
      inset 0 0 0 1px rgba(17, 16, 14, 0.2),
      0 1px 2px rgba(23, 21, 16, 0.14),
      0 4px 10px rgba(23, 21, 16, 0.16);
    color: transparent;
    font-size: 0;
    transform: translateX(5px);
    transition:
      box-shadow 160ms ease-out,
      transform 160ms ease-out;
    white-space: nowrap;
  }

  html body.is-map-active #mobileSheet.mobile-sheet[data-snap="collapsed"] .mobile-dock-content #mobileCollapsedPrimaryAction:not([hidden])::before {
    content: "\2192";
    position: absolute;
    inset: 5px 0 auto;
    display: block;
    color: var(--paper);
    font: 760 1.15rem/1 var(--font-ui);
    text-align: center;
    /* Keep the arrow visibly high-set while giving it more optical breathing room. */
    transform: translateX(1px);
  }

  html body.is-map-active #mobileSheet.mobile-sheet[data-snap="collapsed"] .mobile-dock-content #mobileCollapsedPrimaryAction:not([data-collapsed-action="plan-find"]):not([hidden])::before {
    content: "";
    inset: 18px auto auto;
    width: 9px;
    height: 9px;
    border: solid var(--paper);
    border-width: 2px 2px 0 0;
    transform: rotate(-45deg);
  }

  /* An open home area closes from the collapsed card. A light dismiss control
     reads differently from the dark forward and open actions. */
  html body.is-map-active #mobileSheet.mobile-sheet[data-snap="collapsed"] .mobile-dock-content #mobileCollapsedPrimaryAction[data-collapsed-action="plan-close-home"]:not([hidden]) {
    border-color: rgba(17, 16, 14, 0.24);
    background: var(--paper);
    box-shadow: 0 1px 2px rgba(23, 21, 16, 0.12);
  }

  html body.is-map-active #mobileSheet.mobile-sheet[data-snap="collapsed"] .mobile-dock-content #mobileCollapsedPrimaryAction[data-collapsed-action="plan-close-home"]:not([hidden])::before,
  html body.is-map-active #mobileSheet.mobile-sheet[data-snap="collapsed"] .mobile-dock-content #mobileCollapsedPrimaryAction[data-collapsed-action="plan-close-home"]:not([hidden])::after {
    content: "";
    position: absolute;
    inset: 50% auto auto 50%;
    width: 16px;
    height: 2px;
    margin: -1px 0 0 -8px;
    border: 0;
    border-radius: 1px;
    background: var(--ink);
    transform: rotate(45deg);
  }

  html body.is-map-active #mobileSheet.mobile-sheet[data-snap="collapsed"] .mobile-dock-content #mobileCollapsedPrimaryAction[data-collapsed-action="plan-close-home"]:not([hidden])::after {
    transform: rotate(-45deg);
  }

  /* Opening the sheet is a map key, not a commitment: the same paper face as
     the chips above the map, so the ink mode rail stays the dock's one dark
     object. Find (plan-find) keeps its ink commit face. */
  html body.is-map-active #mobileSheet.mobile-sheet[data-snap="collapsed"] .mobile-dock-content #mobileCollapsedPrimaryAction:not([data-collapsed-action="plan-find"]):not([data-collapsed-action="plan-close-home"]):not([hidden]) {
    border: 1px solid var(--mobile-chrome-border);
    border-radius: var(--mobile-radius-floating);
    background: var(--mobile-chrome-cream);
    box-shadow: var(--action-contact, 0 1px 2px rgba(23, 21, 16, 0.12));
  }

  html body.is-map-active #mobileSheet.mobile-sheet[data-snap="collapsed"] .mobile-dock-content #mobileCollapsedPrimaryAction:not([data-collapsed-action="plan-find"]):not([data-collapsed-action="plan-close-home"]):not([hidden])::before {
    border-color: var(--ink);
  }

  html body.is-map-active #mobileSheet.mobile-sheet[data-snap="collapsed"] .mobile-dock-content #mobileCollapsedPrimaryAction:not([data-collapsed-action="plan-find"]):not([data-collapsed-action="plan-close-home"]):not([hidden]):active {
    box-shadow: var(--action-inset, inset 0 1px 3px rgba(55, 45, 31, 0.1));
  }

  @media (hover: hover) {
    html body.is-map-active #mobileSheet.mobile-sheet[data-snap="collapsed"] .mobile-dock-content #mobileCollapsedPrimaryAction:not([hidden]):hover {
      box-shadow:
        inset 0 0 0 1px rgba(17, 16, 14, 0.16),
        0 2px 3px rgba(23, 21, 16, 0.14),
        0 6px 12px rgba(23, 21, 16, 0.16);
      transform: translate(5px, -1px);
    }
  }

  html body.is-map-active #mobileSheet.mobile-sheet[data-snap="collapsed"] .mobile-dock-content #mobileCollapsedPrimaryAction:not([hidden]):focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
  }

  html body.is-map-active #mobileSheet.mobile-sheet[data-snap="collapsed"] .mobile-dock-content #mobileCollapsedPrimaryAction:not([hidden]):active {
    box-shadow:
      inset 0 0 0 1px rgba(17, 16, 14, 0.2),
      0 1px 3px rgba(23, 21, 16, 0.18);
    transform: translate(5px, 1px);
  }

  html body.is-map-active #mobileSheet.mobile-sheet[data-snap="collapsed"] .mobile-dock-content:has(#mobileCollapsedPrimaryAction:not([hidden])) {
    padding-right: 0;
  }

  html body.is-map-active #mobileSheet.mobile-sheet[data-snap="collapsed"] > .mobile-collapsed-control-bar {
    box-sizing: border-box;
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
    width: 100%;
    height: 52px;
    min-height: 52px;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 0;
    background: rgba(23, 21, 16, 0.018);
  }

  /* The ID outranks accessibility.css's #mobileShareButton:not([hidden])
     sizing rule, which otherwise left a focusable poster button clipped
     below the dock. */
  html body.is-map-active #mobileSheet.mobile-sheet[data-snap="collapsed"] > .mobile-collapsed-control-bar > #mobileShareButton.mobile-collapsed-poster-button {
    display: none;
  }

  html body.is-map-active #mobileSheet.mobile-sheet[data-snap="collapsed"] .mobile-collapsed-mode-control {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
    height: 52px;
    min-height: 52px;
    margin: 0;
    padding: 4px;
    gap: 4px;
    overflow: hidden;
    border: 0;
    border-radius: 12px;
    background: #e9e2d5;
    box-shadow: var(--action-inset);
  }

  /* The material prototype installs a moving segmented-control carrier on the
     rail. The collapsed dock already paints its active segment directly, so
     that second carrier only appears as a dark tab protruding into the next
     mode at narrow widths. */
  html body.is-map-active #mobileSheet.mobile-sheet[data-snap="collapsed"]
    .mobile-collapsed-mode-control.has-sliding-indicator::before,
  html body.is-map-active #mobileSheet.mobile-sheet[data-snap="collapsed"]
    .mobile-collapsed-mode-control.has-sliding-indicator::after {
    content: none;
    display: none;
  }

  html body.is-map-active #mobileSheet.mobile-sheet[data-snap="collapsed"] .mobile-collapsed-mode-control .mode-button.mode-button {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    min-width: 0;
    min-height: 44px;
    height: 44px;
    padding: 0 8px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    box-shadow: none;
    color: rgba(23, 21, 16, 0.68);
  }

  html body.is-map-active #mobileSheet.mobile-sheet[data-snap="collapsed"] .mobile-collapsed-mode-control .mode-button.mode-button:last-child {
    border-right: 0;
  }

  html body.is-map-active #mobileSheet.mobile-sheet[data-snap="collapsed"] .mobile-collapsed-mode-control .mode-button.mode-button.is-active {
    background: linear-gradient(180deg, #292722, var(--ink));
    color: var(--paper);
    box-shadow: inset 0 1px 0 #ffffff32, var(--action-contact);
  }

  html body.is-map-active #mobileSheet.mobile-sheet[data-snap="collapsed"] .mobile-collapsed-mode-control .mode-button.mode-button :is(
    .mobile-mode-icon,
    .mobile-mode-selection-rail
  ) {
    display: none;
  }

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

  html body.is-map-active #mobileSheet.mobile-sheet[data-snap="collapsed"] .mobile-collapsed-mode-control .mode-button.mode-button .mobile-mode-copy,
  html body.is-map-active #mobileSheet.mobile-sheet[data-snap="collapsed"] .mobile-collapsed-mode-control .mode-button.mode-button .mobile-mode-copy strong {
    display: block;
    min-width: 0;
    margin: 0;
    color: inherit;
    font: 740 0.7rem/1 var(--font-ui);
    letter-spacing: 0.025em;
    text-align: center;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
  }

  html body.is-map-active[data-mobile-dock-variant="hidden"] #mobileSheet.mobile-sheet[data-snap="collapsed"] > .mobile-sheet-head {
    display: none;
  }

  html body.is-map-active[data-mobile-dock-variant="hidden"] #mobileSheet.mobile-sheet[data-snap="collapsed"] > .mobile-collapsed-control-bar {
    height: 72px;
    min-height: 72px;
    padding-top: 24px;
  }

  html body.is-map-active[data-mobile-dock-variant="hidden"] #mobileSheet.mobile-sheet[data-snap="collapsed"] .mobile-collapsed-mode-control {
    height: 48px;
  }

  html body.is-map-active #mobileSheet.mobile-sheet:is([data-snap="half"], [data-snap="full"]) :is(
    .mobile-collapsed-focal,
    .mobile-collapsed-progress,
    .mobile-collapsed-primary-action
  ) {
    display: none;
  }

  /* Expanded panels own their actions. The collapsed dock CTA must not leak
     into the identity header, where it competes with Map, Rings and Poster. */

  @media (max-width: 360px) {
    /* At the compact phone floor, a side-by-side identity/actions header leaves
       the station name only a few characters wide. Stack the same two regions
       into predictable rows; this preserves the half workspace and full reader
       instead of introducing a fourth panel state. */
    html body.is-map-active #mobileSheet.mobile-sheet:is([data-snap="half"], [data-snap="full"])
      > .mobile-sheet-head {
      grid-template-columns: minmax(0, 1fr);
      grid-template-rows: auto auto;
      align-items: start;
      gap: 8px;
    }

    html body.is-map-active #mobileSheet.mobile-sheet:is([data-snap="half"], [data-snap="full"])
      > .mobile-sheet-head > .mobile-dock-content {
      width: 100%;
      min-width: 0;
    }

    html body.is-map-active #mobileSheet.mobile-sheet[data-snap="half"]
      > .mobile-sheet-head .mobile-station-role:not([hidden]) {
      display: -webkit-box;
      max-width: none;
      overflow: hidden;
      line-height: 1.35;
      text-overflow: ellipsis;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
    }

    html body.is-map-active #mobileSheet.mobile-sheet:is([data-snap="half"], [data-snap="full"])
      > .mobile-sheet-head > .mobile-sheet-actions {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      justify-self: stretch;
      justify-content: stretch;
      justify-items: stretch;
      width: 100%;
      min-width: 0;
    }

  }

  html body.is-map-active #mobileCollapsedAccessibleSummary.mobile-collapsed-accessible-summary {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    border: 0;
    white-space: nowrap;
  }

  @media (prefers-reduced-motion: reduce) {
    html body.is-map-active #mobileSheet.mobile-sheet[data-snap="collapsed"] .mobile-collapsed-progress::-webkit-progress-value,
    html body.is-map-active #mobileSheet.mobile-sheet[data-snap="collapsed"] .mobile-collapsed-progress::-moz-progress-bar,
    html body.is-map-active #mobileSheet.mobile-sheet[data-snap="collapsed"] .mobile-dock-content #mobileCollapsedPrimaryAction:not([hidden]) {
      transition: none;
    }

    html body.is-map-active[data-mobile-dock-variant="loading"]
      #mobileSheet.mobile-sheet[data-snap="collapsed"] .mobile-collapsed-progress:not([value]) {
      animation: none;
      background-position: 50% 0;
    }
  }

  @media (min-width: 600px) and (max-width: 980px) and (max-height: 599px) and (orientation: landscape) {
    html body.is-map-active.has-origin[data-mobile-dock-variant],
    html body.is-map-active.is-route-mode[data-mobile-dock-variant],
    html body.is-map-active.is-index-mode[data-mobile-dock-variant],
    html body.is-map-active.is-inspect-mode[data-mobile-dock-variant] {
      --mobile-sheet-peek: 112px;
    }

    html body.is-map-active #mobileSheet.mobile-sheet[data-snap="collapsed"] {
      grid-template-columns: minmax(0, 1fr) minmax(250px, 38vw);
      align-content: start;
    }

    html body.is-map-active #mobileSheet.mobile-sheet[data-snap="collapsed"] > .mobile-sheet-head {
      height: 107px;
      min-height: 107px;
      padding: 29px 14px 10px;
      border-right: 1px solid rgba(23, 21, 16, 0.16);
      border-bottom: 0;
    }

    html body.is-map-active #mobileSheet.mobile-sheet[data-snap="collapsed"] > .mobile-collapsed-control-bar {
      align-self: stretch;
      height: 107px;
      min-height: 107px;
      padding-top: 30px;
    }

    html body.is-map-active #mobileSheet.mobile-sheet[data-snap="collapsed"] .mobile-collapsed-mode-control {
      height: 48px;
    }
  }

  html body.is-map-active #mobileSheet.mobile-sheet[data-snap="collapsed"] {
    touch-action: none;
  }

  html body.is-map-active #mobileSheet.mobile-sheet:is([data-snap="half"], [data-snap="full"]):not([data-index-ledger-open="true"]) {
    scrollbar-gutter: stable both-edges;
  }

  html body.is-map-active #mobileSheet.mobile-sheet[data-index-ledger-open="true"] {
    scrollbar-gutter: auto;
  }

  /* Expanded Explore previously gave the identity header and the mode rail the
     same sticky offset. Once the rail reached the top of either scrollport it
     painted over the still-sticky identity, making sheet copy show through the
     masthead. Keep one sticky owner in the task sheet: the identity participates
     in the scroll flow and the mode rail becomes the opaque masthead. Plan and
     Data retain their mode-scoped single-sticky overrides below their feature
     layers. */
  html body.is-map-active:not(.is-route-mode):not(.is-index-mode)
    #mobileSheet.mobile-sheet:is([data-snap="half"], [data-snap="full"]) > .mobile-sheet-head {
    position: relative;
    top: auto;
    z-index: 1;
  }

  html body.is-map-active #mobileSheet.mobile-sheet:is([data-snap="half"], [data-snap="full"]) > .mobile-mode-control {
    position: sticky;
    top: 44px;
    z-index: 35;
    box-sizing: border-box;
    justify-self: stretch;
    width: auto;
    max-width: none;
    height: auto;
    min-height: 52px;
    margin: 0 0 10px;
    padding: 4px;
    border: 1px solid var(--mobile-edge-floating, rgba(17, 16, 14, 0.12));
    border-radius: var(--mobile-radius-floating);
    background: rgb(239, 235, 225);
    box-shadow: var(--mobile-shadow-contact);
  }

  /* The relief tray is translucent in normal flow. As Explore's sole sticky
     masthead it must be an opaque paint boundary, otherwise the next summary
     or dossier row remains legible while it scrolls underneath. */
  html body.is-map-active:not(.is-route-mode):not(.is-index-mode) .workspace
    #mobileSheet.mobile-sheet:is([data-snap="half"], [data-snap="full"]) > .mobile-mode-control {
    background: rgb(239, 235, 225);
  }

  html body.is-map-active:is(.is-route-mode, .is-index-mode) #mobileSheet[data-snap="half"] > .mobile-sheet-head {
    display: none;
  }

  html body.is-map-active.is-route-mode #mobileSheet[data-snap="half"] .mobile-route-card .home-finder-baseline:not([hidden]) {
    display: grid;
    gap: 7px;
    padding: 0;
  }

  html body.is-map-active #mobileSheet.mobile-sheet:is([data-snap="half"], [data-snap="full"]) > .mobile-mode-control .mode-button {
    min-height: 44px;
    border-radius: var(--mobile-radius-analytic);
  }

  html body.is-map-active #mobileSheet[data-snap="full"] > :is(
    .mobile-sheet-context-rail,
    .mobile-surface-story-toggle,
    .mobile-spatial-view-guide,
    #mobileAdjustMap
  ) {
    display: none;
  }

  html body.is-map-active #mobileSheet[data-snap="full"] {
    padding-bottom: calc(env(safe-area-inset-bottom) + 18px);
  }

  html body.is-map-active #mobileSheet[data-snap="full"] .mobile-sheet-head {
    border-bottom: 1px solid rgba(23, 21, 16, 0.11);
  }

  html body.is-map-active.is-reach-mode.has-origin
    #mobileSheet.mobile-sheet:is([data-snap="half"], [data-snap="full"]) .mobile-network-coverage {
    grid-template-rows: minmax(25px, auto) 6px minmax(22px, auto);
  }

  html body.is-map-active.is-reach-mode.has-origin
    #mobileSheet.mobile-sheet:is([data-snap="half"], [data-snap="full"]) .mobile-network-coverage > p {
    min-height: 22px;
    overflow: visible;
    line-height: 1.45;
    text-overflow: clip;
  }

  html body.is-map-active.is-mobile-sheet-full .map-frame > :is(
    .mobile-map-context-bar,
    .mobile-map-search-form,
    .map-locate-button,
    .map-hills-button,
    .mobile-map-time-instrument,
    #mobileIndexLegend,
    #distanceLegend,
    #legend
  ) {
    display: none;
  }
}

@media (max-width: 350px) {
  html body.is-map-active .mobile-map-context-bar {
    gap: 5px;
  }

  html body.is-map-active .mobile-map-context-bar .map-surface-rail .mobile-surface-menu-button,
  html body.is-map-active .mobile-map-context-chip {
    padding-inline: 10px;
  }

  html body.is-map-active .mobile-map-context-bar .map-surface-rail .mobile-surface-menu-button {
    min-width: 72px;
  }

  html body.is-map-active .mobile-map-time-chip {
    min-width: 72px;
  }

  html body.is-map-active .mobile-map-filters-chip {
    min-width: 78px;
  }
}

@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)
    .map-frame #legend.legend.is-isochrone-toggle {
    width: min(180px, calc(100vw - 126px));
    max-width: 180px;
    gap: 2px;
    padding: 4px 7px;
    border-color: rgba(23, 21, 16, 0.1);
    border-radius: var(--mobile-radius-analytic);
    background: var(--mobile-paper-floating);
    box-shadow: var(--mobile-shadow-contact);
  }

  html body.is-map-active #legend.legend.is-isochrone-toggle .legend-kicker {
    padding-right: 30px;
    font-size: 0.5rem;
  }

  html body.is-map-active #legend.legend.is-isochrone-toggle .isochrone-legend-toggle-state {
    top: 3px;
    right: 5px;
    min-width: 24px;
    padding: 2px 3px;
    font-size: 0.46rem;
  }

  html body.is-map-active #legend.legend.is-isochrone-toggle .legend-isochrone-bands,
  html body.is-map-active #legend.legend.is-isochrone-toggle .legend-isochrone-bands li {
    gap: 2px;
  }

  html body.is-map-active #legend.legend.is-isochrone-toggle .legend-isochrone-bands li i {
    height: 7px;
  }
}

/* Legacy 320px iPhones leave exactly enough room for both lower map keys only
   when the isochrone plate sheds a little horizontal chrome. Typography stays
   unchanged; the narrower carrier preserves a readable gap from the scale. */
@media (max-width: 340px) {
  html body.is-map-active.is-reach-mode.has-origin:not(.is-time-rings-view):not(.is-mobile-sheet-expanded)
    .map-frame #legend.legend {
    width: min(180px, calc(100vw - 126px));
    max-width: 180px;
    gap: 2px;
    padding-inline: 7px;
  }
}

/* Mobile map hierarchy: search remains the primary surface while filters use
   a smaller visual pill inside a full 44px touch target. */
@media (max-width: 760px),
  (max-width: 980px) and (orientation: portrait),
  (max-width: 980px) and (max-height: 599px) {
  /* 16px is the iOS Safari threshold below which focusing a field zooms the page. */
  html body.is-map-active #mobileMapSearchForm.mobile-map-search-form .mobile-map-search-row #mobileMapStationSearch {
    font-size: 16px;
  }

  #mobileMapContextBar #mobileSurfaceMenuButton,
  #mobileMapContextBar .mobile-map-context-chip {
    position: relative;
    isolation: isolate;
    height: 44px;
    min-height: 44px;
    padding-inline: 9px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    font-size: 0.8125rem;
    font-weight: 560;
  }

  #mobileMapContextBar #mobileSurfaceMenuButton::after,
  #mobileMapContextBar .mobile-map-context-chip::after {
    content: "";
    position: absolute;
    inset: 5px 0;
    z-index: -1;
    box-sizing: border-box;
    border: 1px solid var(--mobile-chrome-border);
    border-radius: 12px;
    background: rgba(255, 253, 247, 0.9);
    box-shadow: 0 1px 3px rgba(48, 42, 32, 0.06);
    pointer-events: none;
  }

  html body.is-map-active .mobile-map-context-bar .map-surface-rail .mobile-surface-menu-button {
    grid-template-columns: 16px auto 8px;
    gap: 5px;
    min-width: 74px;
    padding-inline: 9px 8px;
    color: #171510;
    font-weight: 660;
  }

  #mobileMapContextBar #mobileSurfaceMenuButton {
    font-weight: 660;
  }

  html body.is-map-active .mobile-map-context-bar .surface-menu-icon,
  html body.is-map-active .mobile-map-context-bar .surface-menu-icon svg {
    width: 16px;
    height: 16px;
    stroke-width: 1.7;
  }

  #mobileMapContextBar #mobileSurfaceMenuButton::after {
    border-color: rgba(55, 45, 31, 0.22);
    background: #fffdf7;
    box-shadow: 0 2px 6px rgba(48, 42, 32, 0.1);
  }

  html body.is-map-active .mobile-map-context-bar .mobile-surface-menu-chevron,
  html body.is-map-active .mobile-map-context-bar .mobile-surface-menu-button:is(:hover, :focus-visible)
    .mobile-surface-menu-chevron {
    box-sizing: border-box;
    justify-self: center;
    width: 6px;
    height: 6px;
    margin: -3px 0 0;
    border: 0;
    border-right: 1.4px solid currentColor;
    border-bottom: 1.4px solid currentColor;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    opacity: 0.58;
    transform: rotate(45deg);
  }

  html body.is-map-active .mobile-map-context-bar .map-surface-rail.is-open .mobile-surface-menu-chevron,
  html body.is-map-active .mobile-map-context-bar .map-surface-rail.is-open
    .mobile-surface-menu-button:is(:hover, :focus-visible) .mobile-surface-menu-chevron {
    margin: 3px 0 0;
    transform: rotate(225deg);
  }

  html body.is-map-active .mobile-map-time-chip {
    min-width: 72px;
  }

  html body.is-map-active .mobile-map-filters-chip {
    min-width: 78px;
  }

  html body.is-map-active .mobile-map-context-chip {
    color: rgba(23, 21, 16, 0.78);
  }

  html body.is-map-active .mobile-map-context-chip-icon,
  html body.is-map-active .mobile-map-context-chip-icon svg {
    width: 15px;
    height: 15px;
  }

  html body.is-map-active .mobile-map-time-chip-value b {
    font: 640 0.8125rem/1 var(--font-main);
  }

  html body.is-map-active .mobile-map-time-chip-value i {
    font: 540 0.625rem/1 var(--font-main);
  }

  html body.is-map-active .mobile-map-time-chip[aria-expanded="false"]::before {
    content: "";
    position: absolute;
    right: 10px;
    bottom: 6px;
    left: 10px;
    z-index: 0;
    height: 2px;
    border-radius: 99px;
    background: linear-gradient(
      to right,
      rgba(186, 48, 39, 0.72) 0 var(--mobile-time-progress, 40%),
      rgba(55, 45, 31, 0.12) var(--mobile-time-progress, 40%) 100%
    );
    pointer-events: none;
  }

  html body.is-map-active .mobile-map-context-chip:is(:hover, :focus-visible),
  html body.is-map-active .mobile-map-context-bar .mobile-surface-menu-button:is(:hover, :focus-visible) {
    border: 0;
    background: transparent;
    outline: 0;
    box-shadow: none;
  }

  html body.is-map-active .mobile-map-context-chip:is(:hover, :focus-visible)::after,
  html body.is-map-active .mobile-map-context-bar .mobile-surface-menu-button:is(:hover, :focus-visible)::after {
    border-color: rgba(201, 53, 43, 0.48);
    background: var(--mobile-paper-floating-strong);
    box-shadow: 0 1px 5px rgba(48, 42, 32, 0.1);
  }

  html body.is-map-active .mobile-map-context-chip[aria-expanded="true"] {
    border: 0;
    background: transparent;
    color: #fffdf7;
    box-shadow: none;
  }

  html body.is-map-active .mobile-map-context-chip[aria-expanded="true"]::after {
    border-color: #171510;
    background: #171510;
    box-shadow: 0 3px 8px rgba(17, 16, 14, 0.16);
  }

  /* Spatial view changes the map itself, so its compact two-option pill lives
     with Rail, time, and Filters. Two icon-only 44px targets give Map and
     Time Rings identical visual weight without competing with the time chip. */
  #mobileMapSpatialViewPill {
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: repeat(2, 44px);
    width: 88px;
    height: 44px;
    min-height: 44px;
    overflow: visible;
  }

  #mobileMapSpatialViewPill::before {
    content: "";
    position: absolute;
    inset: 5px 0;
    z-index: -2;
    box-sizing: border-box;
    border: 1px solid rgba(55, 45, 31, 0.2);
    border-radius: 12px;
    background: rgba(255, 253, 247, 0.9);
    box-shadow: 0 1px 3px rgba(48, 42, 32, 0.06);
    pointer-events: none;
  }

  #mobileMapSpatialViewPill .mobile-map-spatial-view-option {
    position: relative;
    isolation: isolate;
    display: flex;
    min-width: 0;
    width: 44px;
    height: 44px;
    min-height: 44px;
    padding: 0;
    align-items: center;
    justify-content: center;
    gap: 0;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: rgba(23, 21, 16, 0.66);
  }

  #mobileMapSpatialViewPill .mobile-map-spatial-view-option::after {
    content: "";
    position: absolute;
    inset: 6px 2px;
    z-index: -1;
    border-radius: 10px;
    background: transparent;
    pointer-events: none;
  }

  #mobileMapSpatialViewPill .mobile-map-spatial-view-option:hover {
    color: #171510;
  }

  #mobileMapSpatialViewPill .mobile-map-spatial-view-option:hover::after {
    box-shadow: inset 0 0 0 1px rgba(17, 16, 14, 0.16);
  }

  #mobileMapSpatialViewPill .mobile-map-spatial-view-option.is-active {
    background: transparent;
    box-shadow: none;
    color: #fffdf7;
  }

  #mobileMapSpatialViewPill .mobile-map-spatial-view-option.is-active::after {
    background: #171510;
    box-shadow: 0 2px 5px rgba(17, 16, 14, 0.16);
  }

  /* The global focus treatment outlines the square 44px hit targets. Keep the
     keyboard cue inside the pill's rounded visible surface instead. */
  html body:not(#a11y-focus-owner).is-map-active #mobileMapSpatialViewPill
    .spatial-view-button.mobile-map-spatial-view-option:focus-visible {
    outline: 0;
    outline-offset: 0;
    box-shadow: none;
  }

  #mobileMapSpatialViewPill .mobile-map-spatial-view-option:focus-visible::after {
    box-shadow: inset 0 0 0 2px rgba(17, 16, 14, 0.38);
  }

  #mobileMapSpatialViewPill .mobile-map-spatial-view-option.is-active:focus-visible::after {
    box-shadow:
      inset 0 0 0 2px rgba(255, 253, 247, 0.72),
      0 2px 5px rgba(17, 16, 14, 0.16);
  }

  #mobileMapSpatialViewPill .mobile-map-spatial-view-option:disabled {
    opacity: 0.42;
  }

  #mobileMapSpatialViewPill .mobile-map-spatial-view-icon {
    display: grid;
    width: 19px;
    height: 19px;
    place-items: center;
    pointer-events: none;
  }

  #mobileMapSpatialViewPill .mobile-map-spatial-view-icon svg {
    display: block;
    width: 19px;
    height: 19px;
    overflow: visible;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.55;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  #mobileMapSpatialViewPill .mobile-map-spatial-view-icon.is-rings svg {
    stroke-width: 1.45;
  }

  #mobileMapSpatialViewPill .mobile-map-spatial-view-origin {
    fill: currentColor;
    stroke: none;
  }

  #mobileMapSpatialViewPill .spatial-view-text {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }

  /* Geography owns the OSM basemap credit. Abstract Time Rings do not. */
  html body.is-map-active:not(.is-time-rings-view) .map-frame .map-data-attribution {
    right: calc(env(safe-area-inset-right) + 14px);
    bottom: calc(env(safe-area-inset-bottom) + var(--mobile-sheet-peek, 126px) + 8px);
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    opacity: 0.58;
    font-size: 0.5rem;
  }

  html body.is-map-active.is-mobile-sheet-half:not(.is-time-rings-view) .map-frame .map-data-attribution {
    bottom: calc(env(safe-area-inset-bottom) + var(--mobile-task-panel-height, 52dvh) + 8px);
  }

  /* The expanded sheet carries the explanation and the exact-route ledger. */
  html body.is-map-active.is-time-rings-view #mobilePrimarySummary .mobile-time-rings-card {
    display: grid;
    gap: 10px;
    padding: 13px;
  }

  .mobile-time-rings-card-heading {
    display: grid;
    gap: 3px;
  }

  .mobile-time-rings-card-heading > span,
  .mobile-time-rings-route-detail > span {
    color: rgba(120, 71, 39, 0.72);
    font: 760 0.625rem/1 var(--font-mono);
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .mobile-time-rings-card-heading > strong {
    font-size: 0.92rem;
    line-height: 1.2;
  }

  .mobile-time-rings-symbol-key,
  .mobile-time-rings-line-key {
    display: grid;
    align-items: center;
    gap: 7px;
    color: rgba(23, 21, 16, 0.7);
    font: 700 0.6875rem/1.15 var(--font-ui);
  }

  .mobile-time-rings-symbol-key {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding: 8px 0;
    border-top: 1px solid rgba(88, 65, 35, 0.14);
    border-bottom: 1px solid rgba(88, 65, 35, 0.14);
  }

  .mobile-time-rings-symbol-key > span,
  .mobile-time-rings-line-key > span {
    display: inline-flex;
    gap: 5px;
    align-items: center;
    min-width: 0;
  }

  .mobile-time-rings-symbol-key b {
    box-sizing: border-box;
    display: inline-block;
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    border: 1px solid rgba(23, 21, 16, 0.68);
    border-radius: 50%;
    background: rgba(23, 21, 16, 0.68);
  }

  .mobile-time-rings-symbol-key b:is(.is-one, .is-multiple) {
    background: rgba(255, 253, 247, 0.96);
  }

  .mobile-time-rings-symbol-key b.is-multiple {
    box-shadow: 0 0 0 2px rgba(255, 253, 247, 0.96), 0 0 0 3px rgba(23, 21, 16, 0.38);
  }

  .mobile-time-rings-line-key {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mobile-time-rings-line-key b {
    display: block;
    flex: 0 0 34px;
    height: 3px;
    border-radius: 99px;
    background: #2f7f89;
  }

  .mobile-time-rings-line-key b.is-transfer {
    height: 0;
    border-top: 2px dotted #9f6b2f;
    border-radius: 0;
    background: transparent;
  }

  #mobilePrimarySummary .mobile-time-rings-method-note,
  #mobilePrimarySummary .mobile-time-rings-route-prompt,
  #mobilePrimarySummary .mobile-time-rings-route-loading {
    display: block;
    max-height: none;
    margin: 0;
    overflow: visible;
    color: rgba(23, 21, 16, 0.62);
    font-size: 0.75rem;
    line-height: 1.45;
    text-overflow: clip;
    white-space: normal;
    -webkit-box-orient: initial;
    -webkit-line-clamp: unset;
  }

  .mobile-time-rings-route-detail {
    display: grid;
    gap: 6px;
    margin-top: 2px;
    padding-top: 10px;
    border-top: 1px solid rgba(88, 65, 35, 0.2);
  }

  .mobile-time-rings-route-detail > strong {
    font-size: 0.86rem;
    line-height: 1.3;
  }

  .mobile-time-rings-route-steps {
    display: grid;
    gap: 0;
    margin: 2px 0 0;
    padding: 0;
    list-style: none;
  }

  .mobile-time-rings-route-steps > li {
    position: relative;
    display: grid;
    grid-template-columns: 14px minmax(0, 1fr);
    gap: 8px;
    min-width: 0;
    padding: 7px 0;
  }

  .mobile-time-rings-route-steps > li:not(:last-child) {
    border-bottom: 1px solid rgba(88, 65, 35, 0.1);
  }

  .mobile-time-rings-route-steps > li > i {
    width: 10px;
    height: 10px;
    margin-top: 3px;
    border: 2px solid rgba(255, 253, 247, 0.96);
    border-radius: 50%;
    background: var(--time-ring-route-color, #2f7f89);
    box-shadow: 0 0 0 1px var(--time-ring-route-color, #2f7f89);
  }

  .mobile-time-rings-route-steps > li:is(.is-transfer, .is-wait) > i {
    border: 1px dashed #9f6b2f;
    background: rgba(255, 253, 247, 0.96);
    box-shadow: none;
  }

  .mobile-time-rings-route-steps > li > span {
    display: grid;
    gap: 2px;
    min-width: 0;
  }

  .mobile-time-rings-route-steps > li b {
    overflow-wrap: anywhere;
    font-size: 0.78rem;
    line-height: 1.2;
  }

  .mobile-time-rings-route-steps > li small {
    color: rgba(23, 21, 16, 0.58);
    font-size: 0.69rem;
    line-height: 1.3;
  }
}

@media (max-width: 350px) {
  html body.is-map-active .mobile-map-context-bar {
    gap: 4px;
  }

  html body.is-map-active .mobile-map-context-bar .map-surface-rail .mobile-surface-menu-button {
    min-width: 68px;
    padding-inline: 7px 6px;
  }

  html body.is-map-active .mobile-map-time-chip {
    min-width: 62px;
    padding-inline: 7px;
  }

  #mobileMapSpatialViewPill {
    width: 88px;
  }

  html body.is-map-active .mobile-map-filters-chip {
    min-width: 44px;
    width: 44px;
    padding: 0;
  }

  #mobileMapFiltersChip [data-mobile-filters-label] {
    display: none;
  }
}

/* The half-height Plan sheet is an action workspace, not a stack of control
   trays. Keep task navigation quiet and give destination entry one clear,
   tactile primary surface. */
@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.is-route-mode
    #mobileSheet[data-snap="half"] .mobile-route-card {
    gap: 7px;
    padding-block: 4px 10px;
  }

  html[data-material-prototype="relief"] body.is-map-active.is-route-mode
    #mobileSheet[data-snap="half"] .mobile-route-card .commute-task-index {
    --relief-segment-gap: 0px;
    min-height: 38px;
    padding: 0;
    overflow: visible;
    border: 0;
    border-bottom: 1px solid rgba(23, 21, 16, 0.16);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  html[data-material-prototype="relief"] body.is-map-active.is-route-mode
    #mobileSheet[data-snap="half"] .mobile-route-card .commute-task-index::before {
    top: auto;
    bottom: -1px;
    left: 0;
    width: 50%;
    height: 2px;
    border: 0;
    border-radius: 2px 2px 0 0;
    background: #b84635;
    box-shadow: none;
  }

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

  html[data-material-prototype="relief"] body.is-map-active.is-route-mode
    #mobileSheet[data-snap="half"] .mobile-route-card .commute-task-index a:is(
      [aria-current="page"],
      :hover
    ) {
    background: transparent;
  }

  html body.is-map-active.is-route-mode #mobileSheet[data-snap="half"]
    .mobile-route-card .home-finder-progress {
    display: none;
  }

  /* Back in destinations with unchanged results, the steps return so step 2
     can reopen the ranked list without running the search again. */
  html body.is-map-active.is-route-mode #mobileSheet[data-snap="half"]
    .mobile-route-card[data-home-finder-stage="setup"][data-home-finder-results-ready="true"] .home-finder-progress {
    display: grid;
    margin-bottom: 4px;
  }

  html[data-material-prototype="relief"] body.is-map-active.is-route-mode
    #mobileSheet[data-snap="half"] .mobile-route-card .home-finder-destination-intro {
    display: block;
    padding: 1px 0 0;
  }


  html body.is-map-active.is-route-mode #mobileSheet[data-snap="half"]
    .mobile-route-card :is(
      .commute-workflow,
      .home-finder-setup,
      .home-finder-destination-phase,
      .home-finder-destinations
    ) {
    gap: 7px;
  }

  html body.is-map-active.is-route-mode #mobileSheet[data-snap="half"]
    .mobile-route-card .home-finder-add {
    gap: 7px;
  }

  html[data-material-prototype="relief"] body.is-map-active.is-route-mode
    #mobileSheet[data-snap="half"] .mobile-route-card .home-finder-add-heading {
    align-items: baseline;
  }

  html[data-material-prototype="relief"] body.is-map-active.is-route-mode
    #mobileSheet[data-snap="half"] .mobile-route-card .home-finder-add-heading label {
    color: var(--ink);
    font: 760 0.9rem/1.15 var(--font-main);
    letter-spacing: -0.01em;
  }

  html[data-material-prototype="relief"] body.is-map-active.is-route-mode
    #mobileSheet[data-snap="half"] .mobile-route-card .home-finder-add-status small {
    display: inline-flex;
    min-width: 30px;
    min-height: 20px;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(23, 21, 16, 0.15);
    border-radius: 999px;
    background: rgba(255, 253, 247, 0.7);
    color: rgba(23, 21, 16, 0.56);
    font-size: 0.66rem;
  }

  html body.is-map-active.is-route-mode #mobileSheet[data-snap="half"]
    .mobile-route-card .home-finder-entry-note {
    margin: -2px 0 1px;
    color: rgba(23, 21, 16, 0.6);
    font: 540 0.72rem/1.35 var(--font-main);
  }

  html[data-material-prototype="relief"] body.is-map-active.is-route-mode
    #mobileSheet[data-snap="half"] .mobile-route-card :is(.home-finder-add-input-row, .home-finder-baseline-input-row) {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 9px;
    min-height: 50px;
  }

  html body.is-map-active.is-route-mode #mobileSheet[data-snap="half"]
    .mobile-route-card .home-finder-search-field {
    position: relative;
    display: block;
    min-width: 0;
  }

  html body.is-map-active.is-route-mode #mobileSheet[data-snap="half"]
    .mobile-route-card .home-finder-search-field > svg {
    display: block;
    position: absolute;
    top: 50%;
    left: 13px;
    z-index: 2;
    width: 19px;
    height: 19px;
    color: rgba(23, 21, 16, 0.72);
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-width: 1.7;
    pointer-events: none;
    transform: translateY(-50%);
  }

  html[data-material-prototype="relief"] body.is-map-active.is-route-mode
    #mobileSheet[data-snap="half"] .mobile-route-card
    .home-finder-search-field > input:is([data-home-finder-add-search], [data-home-finder-baseline-search]) {
    box-sizing: border-box;
    width: 100%;
    min-height: 50px;
    height: 50px;
    padding: 0 13px 0 41px;
    border: 2px solid rgba(23, 21, 16, 0.82);
    border-radius: 10px;
    background: rgba(255, 253, 247, 0.98);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.72),
      0 2px 5px rgba(23, 21, 16, 0.11);
    color: var(--ink);
    font-size: 0.85rem;
  }

  html[data-material-prototype="relief"] body.is-map-active.is-route-mode
    #mobileSheet[data-snap="half"] .mobile-route-card
    .home-finder-search-field > input:is([data-home-finder-add-search], [data-home-finder-baseline-search])::placeholder {
    color: rgba(23, 21, 16, 0.52);
    opacity: 1;
  }

  html[data-material-prototype="relief"] body.is-map-active.is-route-mode
    #mobileSheet[data-snap="half"] .mobile-route-card
    .home-finder-search-field > input:is([data-home-finder-add-search], [data-home-finder-baseline-search]):focus {
    border-color: #a33b31;
    outline: 0;
    box-shadow:
      0 0 0 3px rgba(184, 70, 53, 0.12),
      0 3px 7px rgba(23, 21, 16, 0.13);
  }

  html[data-material-prototype="relief"] body.is-map-active.is-route-mode
    #mobileSheet[data-snap="half"] .mobile-route-card :is(.home-finder-map-pick-button, .home-finder-clear-button) {
    align-self: center;
    min-width: 108px;
    min-height: 36px;
    height: 36px;
    border-color: rgba(23, 21, 16, 0.3);
    background: transparent;
    box-shadow: none;
    color: rgba(23, 21, 16, 0.78);
    transform: none;
  }

  html[data-material-prototype="relief"] body.is-map-active.is-route-mode
    #mobileSheet[data-snap="half"] .mobile-route-card
    .home-finder-map-pick-button[aria-pressed="true"] {
    border-color: var(--ink);
    background: var(--ink);
    box-shadow: 0 2px 5px rgba(23, 21, 16, 0.16);
    color: var(--paper);
    transform: none;
  }

  html[data-material-prototype="relief"] body.is-map-active.is-route-mode
    #mobileSheet[data-snap="half"] .mobile-route-card
    .home-finder-map-pick-button[aria-pressed="true"]::before {
    border-color: rgba(255, 253, 247, 0.9);
    background: #b84635;
    box-shadow: 0 0 0 2px rgba(255, 253, 247, 0.12);
  }

  html body.is-map-active.is-route-mode #mobileSheet[data-snap="half"]
    .mobile-route-card .home-finder-add-results:not(:empty) {
    display: grid;
    gap: 4px;
    max-height: 176px;
    padding: 3px 1px 1px;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  html body.is-map-active.is-route-mode #mobileSheet[data-snap="half"]
    .mobile-route-card .home-finder-add-results .search-result {
    box-sizing: border-box;
    align-content: center;
    min-height: 52px;
    padding: 7px 9px;
    overflow: hidden;
    border-color: rgba(23, 21, 16, 0.16);
    border-radius: 8px;
    background: rgba(255, 253, 247, 0.82);
  }

  html body.is-map-active.is-route-mode #mobileSheet[data-snap="half"]
    .mobile-route-card .home-finder-add-results .search-result > strong {
    overflow: hidden;
    font-size: 0.8rem;
    line-height: 1.15;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  html body.is-map-active.is-route-mode #mobileSheet[data-snap="half"]
    .mobile-route-card .home-finder-add-results .search-result > span {
    display: block;
    overflow: hidden;
    font-size: 0.66rem;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
/* Keep the time key readable over the map without enlarging the Station sheet. */
@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) .map-frame #legend.legend.is-isochrone-toggle {
    width: min(250px, calc(100vw - 32px));
    max-width: calc(100vw - 32px);
    padding: 8px 10px;
    gap: 6px;
    bottom: calc(var(--mobile-map-bottom-clearance, 182px) + 44px);
  }
  html body.is-map-active #legend.legend.is-isochrone-toggle .legend-kicker {font-size: .62rem; padding-right: 30px;}
  html body.is-map-active #legend.legend.is-isochrone-toggle .legend-isochrone-bands li span,
  html body.is-map-active #legend.legend.is-isochrone-toggle .legend-gradient-time span {font-size: .65rem; line-height: 1.3;}
  html body.is-map-active #legend.legend.is-isochrone-toggle .legend-isochrone-bands {
    grid-template-columns: repeat(var(--isochrone-mobile-band-count, var(--isochrone-band-count, 4)), minmax(0, 1fr));
  }
  html body.is-map-active #legend.legend.is-isochrone-toggle .legend-isochrone-bands li i {height: 10px;}
  html body.is-map-active.is-reach-mode.has-origin:not(.is-time-rings-view) #legend.legend.is-isochrone-toggle .legend-foot {display:block;font-size:.6rem;line-height:1.35;white-space:normal;}
}
.transit-walking-note {font-size:12px;line-height:1.45;grid-column:1/-1;margin:0;color:var(--muted,#656159);}