@media (max-width: 760px), (max-width: 980px) and (orientation: portrait), (max-width: 980px) and (max-height: 599px) {
  html,
  body,
  body.is-map-active :is(.page-shell, .workspace, .map-panel, .map-frame) {
    max-width: 100vw;
    min-width: 0;
  }

  html,
  body {
    overflow-x: clip;
  }

  html {
    width: 100%;
    height: 100%;
    min-height: 0;
    overflow: hidden;
    overscroll-behavior: none;
  }

  body.is-map-active {
    width: 100%;
    height: 100dvh;
    min-height: 0;
    max-height: 100dvh;
    overflow: hidden;
    overscroll-behavior: none;
  }

  :root,
  body.is-map-active,
  body.is-map-active.is-reach-mode.has-origin,
  body.is-map-active.is-route-mode,
  body.is-map-active.is-inspect-mode,
  body.is-map-active.is-index-mode {
    --mobile-sheet-peek: clamp(104px, 13dvh, 112px);
    /* Task sheets keep roughly half the map usable. Full is an intentional
       reader state, so it occupies the viewport instead of leaving a map sliver. */
    --mobile-task-panel-height: clamp(272px, 50dvh, 420px);
    --mobile-panel-height: calc(100dvh - max(8px, env(safe-area-inset-top)));
    --mobile-panel-pad: clamp(10px, 3vw, 14px);
    --mobile-panel-gap: 10px;
    --mobile-panel-radius: 3px;
    --mobile-panel-control-radius: 3px;
    --mobile-expanded-handle-height: 44px;
    --mobile-panel-line: rgba(17, 16, 14, 0.18);
    --mobile-panel-line-strong: rgba(17, 16, 14, 0.42);
    --mobile-panel-paper: rgba(248, 245, 236, 0.985);
    --mobile-pixel-train-image: url("./assets/sf-transit-pixel.svg");
    --mobile-map-bottom-clearance: calc(env(safe-area-inset-bottom) + var(--mobile-sheet-peek) + 10px);
  }

  body.is-map-active .mobile-sheet {
    position: fixed;
    right: 0;
    bottom: auto;
    left: 0;
    z-index: 4;
    contain: layout style;
    box-sizing: border-box;
    touch-action: pan-y;
    display: grid;
    grid-auto-rows: max-content;
    align-content: start;
    gap: var(--mobile-panel-gap);
    width: 100%;
    max-width: 100vw;
    height: var(--mobile-panel-height);
    padding: 7px var(--mobile-panel-pad) calc(max(18px, env(safe-area-inset-bottom)) + 22px);
    overflow-x: clip;
    overflow-y: hidden;
    border: 1px solid rgba(92, 76, 52, 0.34);
    border-bottom: 0;
    border-radius: 16px 16px 0 0;
    background:
      var(--paper-panel-background),
      linear-gradient(180deg, rgba(252, 250, 244, 0.99), rgba(239, 233, 219, 0.985));
    background-size: var(--paper-grain-size), var(--paper-formation-size), auto;
    box-shadow: 0 -4px 12px rgba(61, 47, 28, 0.08);
    color: var(--ink);
    font-family: var(--font-main);
    isolation: isolate;
    overscroll-behavior: contain;
  }

  /* Blur is expensive while the canvas is animating under the sheet. */
  body.is-map-interacting .mobile-sheet {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  body.is-map-active .mobile-sheet[data-snap="collapsed"] {
    gap: 5px;
    height: var(--mobile-panel-height);
    padding-top: 4px;
    overflow: hidden;
    border-radius: 14px 14px 0 0;
    box-shadow: 0 -8px 24px rgba(25, 21, 15, 0.1);
  }

  body.is-map-active .mobile-sheet[data-snap="collapsed"] > #mobileCompassSummary {
    display: none;
  }

  body.is-map-active .mobile-sheet[data-snap="half"],
  body.is-map-active.is-index-mode .mobile-sheet[data-snap="half"] {
    gap: var(--mobile-panel-gap);
    height: var(--mobile-task-panel-height);
    max-height: var(--mobile-task-panel-height);
    padding-top: 0;
    overflow-x: clip;
    overflow-y: auto;
    scrollbar-color: rgba(17, 16, 14, 0.32) transparent;
    scrollbar-gutter: stable;
    scrollbar-width: thin;
    scroll-padding: 92px 0 calc(max(22px, env(safe-area-inset-bottom)) + 28px);
  }

  body.is-map-active .mobile-sheet[data-snap="full"],
  body.is-map-active.is-index-mode .mobile-sheet[data-snap="full"] {
    gap: var(--mobile-panel-gap);
    height: var(--mobile-panel-height);
    max-height: var(--mobile-panel-height);
    padding-top: 0;
    overflow-x: clip;
    overflow-y: auto;
    scrollbar-color: rgba(17, 16, 14, 0.32) transparent;
    scrollbar-gutter: stable;
    scrollbar-width: thin;
    scroll-padding: 92px 0 calc(max(22px, env(safe-area-inset-bottom)) + 28px);
  }

  body.is-map-active .mobile-sheet:is([data-snap="half"], [data-snap="full"])::-webkit-scrollbar {
    width: 6px;
  }

  body.is-map-active .mobile-sheet:is([data-snap="half"], [data-snap="full"])::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: rgba(17, 16, 14, 0.3);
  }

  body.is-map-active .mobile-sheet .mobile-sheet-handle,
  body.is-map-active.is-reach-mode .mobile-sheet .mobile-sheet-handle,
  body.is-map-active.is-route-mode .mobile-sheet .mobile-sheet-handle,
  body.is-map-active.is-inspect-mode .mobile-sheet .mobile-sheet-handle,
  body.is-map-active.is-index-mode .mobile-sheet .mobile-sheet-handle {
    position: relative;
    z-index: 35;
    display: grid;
    order: 0;
    width: 100px;
    min-width: 100px;
    height: 44px;
    min-height: 44px;
    margin: -2px auto -3px;
    padding: 0;
    place-items: center;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    touch-action: none;
  }

  body.is-map-active .mobile-sheet .mobile-sheet-handle::before,
  body.is-map-active .mobile-sheet[data-snap="collapsed"] .mobile-sheet-handle::before,
  body.is-map-active .mobile-sheet[data-snap="full"] .mobile-sheet-handle::before,
  body.is-map-active.is-inspect-mode .mobile-sheet[data-snap="full"] .mobile-sheet-handle::before {
    content: "";
    display: block;
    width: 42px;
    height: 4px;
    margin: 0;
    border: 0;
    border-radius: 999px;
    background: rgba(17, 16, 14, 0.74);
    box-shadow: none;
    transform: none;
  }

  body.is-map-active .mobile-sheet .mobile-sheet-handle::after {
    content: none;
    display: none;
  }

  body.is-map-active .mobile-sheet[data-snap="half"] > .mobile-sheet-handle,
  body.is-map-active .mobile-sheet[data-snap="full"] > .mobile-sheet-handle {
    position: sticky;
    top: 0;
    z-index: 36;
    box-sizing: border-box;
    justify-self: stretch;
    width: calc(100% + (var(--mobile-panel-pad) * 2));
    min-width: 0;
    height: var(--mobile-expanded-handle-height);
    min-height: var(--mobile-expanded-handle-height);
    margin: 0 calc(var(--mobile-panel-pad) * -1);
    padding: 0;
    border-radius: 15px 15px 0 0;
    background: linear-gradient(180deg, rgba(252, 250, 244, 0.998), rgba(249, 247, 239, 0.995));
    background-size: auto;
    box-shadow: 0 1px 0 rgba(17, 16, 14, 0.1);
    isolation: isolate;
  }

  body.is-map-active .mobile-sheet[data-snap="half"] > .mobile-sheet-handle::before,
  body.is-map-active .mobile-sheet[data-snap="full"] > .mobile-sheet-handle::before {
    position: relative;
    z-index: 1;
  }

  body.is-map-active .mobile-sheet[data-snap="half"] > .mobile-sheet-handle::after,
  body.is-map-active .mobile-sheet[data-snap="full"] > .mobile-sheet-handle::after {
    content: none;
    display: none;
  }

  body.is-map-active .mobile-sheet > .mobile-sheet-head,
  body.is-map-active.is-index-mode .mobile-sheet > .mobile-sheet-head {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    order: 1;
    gap: 9px;
    min-width: 0;
    margin: 0;
    padding: 2px 0 9px;
    border: 0;
    border-bottom: 1px solid rgba(17, 16, 14, 0.34);
    background: transparent;
    box-shadow: none;
    touch-action: none;
  }

  body.is-map-active .mobile-sheet > .mobile-sheet-head::before {
    content: none;
  }

  body.is-map-active .mobile-sheet > .mobile-sheet-head::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: -1px;
    left: 0;
    height: 1px;
    background: rgba(17, 16, 14, 0.24);
    pointer-events: none;
  }

  body.is-map-active .mobile-sheet[data-snap="half"] > .mobile-sheet-head,
  body.is-map-active .mobile-sheet[data-snap="full"] > .mobile-sheet-head {
    position: sticky;
    z-index: 34;
    top: var(--mobile-expanded-handle-height);
    margin-inline: calc(var(--mobile-panel-pad) * -1);
    padding: 7px var(--mobile-panel-pad) 10px;
    background: linear-gradient(180deg, rgba(249, 247, 239, 0.995), rgba(247, 243, 233, 0.975));
    background-size: auto;
    box-shadow: 0 9px 16px rgba(17, 16, 14, 0.075);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }

  .mobile-sheet-head > div:first-child {
    display: grid;
    min-width: 0;
    gap: 2px;
    align-content: center;
    padding-left: 0;
  }

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

  .mobile-sheet .mobile-sheet-eyebrow {
    margin: 0;
    color: var(--accent);
    font: 700 var(--type-micro)/1.1 var(--font-rail-label);
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  .mobile-sheet .mobile-sheet-head h3,
  .mobile-sheet .mobile-sheet-head h3.is-ekimeihyo {
    min-width: 0;
    margin: 0;
    overflow: hidden;
    color: var(--ink);
    font: 820 clamp(0.98rem, 4.6vw, 1.16rem)/1.08 var(--font-rail-label);
    letter-spacing: -0.015em;
    text-overflow: ellipsis;
    text-transform: none;
    white-space: nowrap;
  }

  .mobile-sheet .mobile-sheet-head #mobileStatusText {
    display: block;
    max-width: 48ch;
    margin: 1px 0 0;
    overflow: hidden;
    color: rgba(17, 16, 14, 0.62);
    font: 570 0.67rem/1.25 var(--font-main);
    letter-spacing: 0;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Expanded labels are identity, not metadata: let them wrap instead of
     collapsing station and lens names into ambiguous ellipses. */
  html body.is-map-active #mobileSheet.mobile-sheet:not([data-snap="collapsed"]) .mobile-sheet-head h3,
  html body.is-map-active #mobileSheet.mobile-sheet:not([data-snap="collapsed"]) .mobile-sheet-head h3.is-ekimeihyo,
  html body.is-map-active #mobileSheet.mobile-sheet:not([data-snap="collapsed"]) .mobile-sheet-head #mobileStatusText {
    max-width: none;
    overflow: visible;
    overflow-wrap: anywhere;
    text-overflow: clip;
    text-wrap: pretty;
    white-space: normal;
  }

  .mobile-sheet .mobile-sheet-head .mobile-collapsed-summary {
    color: rgba(17, 16, 14, 0.62);
    font: 650 0.64rem/1.15 var(--font-main);
  }

  .mobile-sheet .mobile-sheet-actions {
    display: grid;
    grid-template-columns: 90px 44px;
    max-width: none;
    align-items: center;
    align-self: center;
    gap: 6px;
    justify-content: center;
    justify-items: end;
  }

  .mobile-sheet #mobileSheetShareButton {
    display: none;
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
    padding: 0;
    place-items: center;
    border: 1px solid rgba(17, 16, 14, 0.3);
    border-radius: 8px;
    background: rgba(255, 253, 247, 0.72);
    box-shadow: none;
    color: var(--ink);
    font-size: 0;
  }

  body:is(.has-origin, .is-route-mode, .is-index-mode) .mobile-sheet #mobileSheetShareButton:not([hidden]) {
    display: grid;
  }

  .mobile-sheet #mobileSheetShareButton::before {
    content: "";
    display: block;
    width: 19px;
    height: 19px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='4' y='5' width='16' height='14' rx='1' fill='none' stroke='black' stroke-width='2'/%3E%3Ccircle cx='9' cy='10' r='2' fill='black'/%3E%3Cpath d='m6 17 4-4 3 3 2-2 3 3' fill='none' stroke='black' stroke-width='2'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='4' y='5' width='16' height='14' rx='1' fill='none' stroke='black' stroke-width='2'/%3E%3Ccircle cx='9' cy='10' r='2' fill='black'/%3E%3Cpath d='m6 17 4-4 3 3 2-2 3 3' fill='none' stroke='black' stroke-width='2'/%3E%3C/svg%3E") center / contain no-repeat;
  }

  .mobile-map-language-toggle,
  .mobile-settings-language-toggle {
    box-sizing: border-box;
    display: grid;
    grid-template-columns: repeat(2, 44px);
    width: 90px;
    min-width: 90px;
    min-height: 44px;
    padding: 2px;
    place-items: center;
    border: 1px solid rgba(17, 16, 14, 0.3);
    border-radius: 8px;
    background: rgba(255, 253, 247, 0.72);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
  }

  body.is-map-active.has-network-overview .mobile-sheet[data-snap="full"] > .mobile-sheet-head {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
  }

  body.is-map-active.has-network-overview .mobile-sheet[data-snap="full"] > .mobile-sheet-head .mobile-sheet-actions {
    justify-self: center;
    justify-content: center;
    margin-inline: auto;
  }

  .mobile-sheet :is(.mobile-collapsed-mode-control, .mobile-mode-control) {
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
    min-width: 0;
    padding: 3px;
    overflow: hidden;
    border: 1px solid rgba(17, 16, 14, 0.3);
    border-radius: 4px;
    background: rgba(255, 253, 247, 0.62);
    box-shadow: 0 2px 8px rgba(17, 16, 14, 0.055), inset 0 1px 0 rgba(255, 255, 255, 0.74);
  }

  .mobile-sheet :is(.mobile-collapsed-mode-control, .mobile-mode-control) .mode-button {
    position: relative;
    display: grid;
    grid-template-columns: 23px minmax(0, 1fr);
    gap: 7px;
    align-items: center;
    min-width: 0;
    min-height: 52px;
    padding: 6px 8px 8px;
    overflow: hidden;
    border: 0;
    border-radius: 2px;
    background: transparent;
    box-shadow: none;
    color: rgba(17, 16, 14, 0.58);
    text-align: left;
  }

  .mobile-sheet :is(.mobile-collapsed-mode-control, .mobile-mode-control) .mode-button::before,
  .mobile-sheet :is(.mobile-collapsed-mode-control, .mobile-mode-control) .mode-button::after {
    content: none;
    display: none;
  }

  .mobile-sheet :is(.mobile-collapsed-mode-control, .mobile-mode-control) .mode-button + .mode-button {
    border-left: 1px solid rgba(17, 16, 14, 0.1);
  }

  .mobile-sheet :is(.mobile-collapsed-mode-control, .mobile-mode-control) .mode-button.is-active {
    border-left-color: transparent;
    background: #151411;
    color: #fffdf7;
  }

  .mobile-sheet :is(.mobile-collapsed-mode-control, .mobile-mode-control) .mode-button.is-active + .mode-button {
    border-left-color: transparent;
  }

  .mobile-mode-copy {
    display: grid;
    min-width: 0;
    gap: 2px;
    align-content: center;
  }

  .mobile-mode-copy strong {
    width: auto;
    max-width: none;
    overflow: hidden;
    color: inherit;
    font: 790 0.7rem/1.05 var(--font-rail-label);
    letter-spacing: 0.01em;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
  }

  .mobile-mode-copy em {
    overflow: hidden;
    color: currentColor;
    font: 620 0.6875rem/1.08 var(--font-main);
    opacity: 0.62;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .mobile-mode-icon {
    display: block;
    width: 22px;
    height: 22px;
    background: currentColor;
    opacity: 0.9;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
  }

  .mobile-mode-icon.is-reach {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='4.2' fill='black'/%3E%3Ccircle cx='12' cy='12' r='8.6' fill='none' stroke='black' stroke-width='1.6' opacity='.68'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='4.2' fill='black'/%3E%3Ccircle cx='12' cy='12' r='8.6' fill='none' stroke='black' stroke-width='1.6' opacity='.68'/%3E%3C/svg%3E");
  }

  .mobile-mode-icon.is-route {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='5.5' cy='18.5' r='2.3'/%3E%3Ccircle cx='18.5' cy='5.5' r='2.3'/%3E%3Cpath d='M7.5 16.5C10 14 14 10 16.5 7.5' stroke-dasharray='.5 3.4'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='5.5' cy='18.5' r='2.3'/%3E%3Ccircle cx='18.5' cy='5.5' r='2.3'/%3E%3Cpath d='M7.5 16.5C10 14 14 10 16.5 7.5' stroke-dasharray='.5 3.4'/%3E%3C/svg%3E");
  }

  .mobile-mode-icon.is-index {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4.8' y='5.2' width='14.4' height='13.6' rx='1.7'/%3E%3Cpath d='M8 9h8M8 12h8M8 15h5M4.8 9h14.4'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4.8' y='5.2' width='14.4' height='13.6' rx='1.7'/%3E%3Cpath d='M8 9h8M8 12h8M8 15h5M4.8 9h14.4'/%3E%3C/svg%3E");
  }

  .mobile-mode-icon.is-life {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 11 12 4l8 7v9H4z' fill='none' stroke='black' stroke-width='2'/%3E%3Ccircle cx='12' cy='13' r='3' fill='black'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 11 12 4l8 7v9H4z' fill='none' stroke='black' stroke-width='2'/%3E%3Ccircle cx='12' cy='13' r='3' fill='black'/%3E%3C/svg%3E");
  }

  .mobile-mode-selection-rail {
    display: none;
  }

  .mobile-mode-selection-rail::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 7px;
    height: 7px;
    border: 1px solid currentColor;
    border-radius: 50%;
    background: var(--paper-strong);
    transform: translate(-50%, -50%);
  }

  .mobile-mode-selection-rail::after {
    content: "";
    position: absolute;
    top: -1px;
    left: 50%;
    width: 18px;
    height: 3px;
    background: var(--gold);
    opacity: 0;
    transform: translateX(-50%);
  }

  .mode-button.is-active > .mobile-mode-selection-rail {
    opacity: 1;
    transform: none;
  }

  .mode-button.is-active > .mobile-mode-selection-rail::before {
    border-color: var(--paper);
    background: var(--material-signal-red);
    box-shadow: 0 0 0 2px rgba(201, 53, 43, 0.16);
  }

  .mode-button.is-active > .mobile-mode-selection-rail::after {
    opacity: 1;
  }

  .mobile-sheet[data-snap="collapsed"] > .mobile-collapsed-control-bar {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    order: 2;
    gap: 6px;
    align-items: stretch;
    height: 48px;
    padding: 0;
    box-sizing: border-box;
    min-width: 0;
  }

  .mobile-sheet[data-snap="collapsed"] :is(
    .mobile-collapsed-poster-button
  ) {
    display: none;
  }

  body.is-reach-mode .mobile-sheet[data-snap="collapsed"] > .mobile-collapsed-control-bar {
    grid-template-columns: minmax(0, 1fr);
  }

  body.is-reach-mode .mobile-sheet[data-snap="collapsed"] :is(
    .mobile-collapsed-mode-control,
    .mobile-collapsed-poster-button
  ) {
    display: none;
  }

  .mobile-sheet[data-snap="collapsed"] .mobile-collapsed-mode-control {
    grid-template-columns: minmax(58px, 0.9fr) minmax(78px, 1.2fr) minmax(58px, 0.9fr);
    min-width: 0;
    height: 48px;
  }

  .mobile-sheet[data-snap="collapsed"] .mobile-collapsed-mode-control .mode-button {
    grid-template-columns: 17px minmax(0, 1fr);
    gap: 4px;
    min-height: 40px;
    padding: 5px 5px 7px;
  }

  .mobile-sheet[data-snap="collapsed"] .mobile-mode-icon {
    width: 17px;
    height: 17px;
  }

  .mobile-sheet[data-snap="collapsed"] .mobile-mode-copy strong {
    font-size: clamp(0.6875rem, 2.8vw, 0.74rem);
    line-height: 1.02;
    text-wrap: balance;
    white-space: normal;
  }

  .mobile-sheet[data-snap="collapsed"] .mobile-mode-selection-rail {
    right: 0;
    bottom: 3px;
    left: 0;
  }

  .mobile-sheet[data-snap="collapsed"] .mobile-collapsed-poster-button {
    display: grid;
    width: 44px;
    min-width: 44px;
    height: 48px;
    min-height: 48px;
    padding: 0;
    place-items: center;
    border: 1px solid rgba(17, 16, 14, 0.3);
    border-radius: 4px;
    background: rgba(255, 253, 247, 0.62);
    box-shadow: none;
    color: var(--ink);
    text-transform: uppercase;
  }

  .mobile-sheet:is([data-snap="half"], [data-snap="full"]) > .mobile-collapsed-control-bar {
    display: none;
  }

  body.is-map-active .mobile-sheet[data-snap="half"] > .mobile-mode-control,
  body.is-map-active.is-index-mode .mobile-sheet[data-snap="half"] > .mobile-mode-control,
  body.is-map-active .mobile-sheet[data-snap="full"] > .mobile-mode-control,
  body.is-map-active.is-index-mode .mobile-sheet[data-snap="full"] > .mobile-mode-control {
    display: grid;
    order: 2;
  }

  .mobile-sheet:is([data-snap="half"], [data-snap="full"]) > #mobilePrimarySummary {
    display: block;
    order: 3;
    min-width: 0;
    min-height: 0;
    margin: 0;
    padding: 0;
    overflow: visible;
  }

  html body.is-map-active #mobileSheet.mobile-sheet > [data-mobile-sheet-mode-inactive="true"] {
    display: none !important;
  }

  /* Workflow ownership is mode-scoped even before the controller's inert pass
     runs. Shared navigation remains visible; inactive workflow content does not. */
  html body.is-map-active:is(.is-reach-mode, .is-inspect-mode) #mobileSheet.mobile-sheet > .mobile-route-card,
  html body.is-map-active.is-route-mode #mobileSheet.mobile-sheet > :is(
    #mobilePrimarySummary,
    #mobileShortlistPanel,
    .mobile-sheet-context-rail,
    .atlas-dossier-tabs.is-mobile,
    #mobileInspector,
    #mobileCompassSummary,
    #mobileReachDetails,
    .mobile-surface-story-toggle,
    .mobile-spatial-view-guide
  ),
  html body.is-map-active.is-index-mode #mobileSheet.mobile-sheet > :is(
    .mobile-route-card,
    .atlas-dossier-tabs.is-mobile,
    #mobileInspector,
    #mobileCompassSummary,
    #mobileReachDetails,
    .mobile-surface-story-toggle,
    .mobile-spatial-view-guide
  ) {
    display: none !important;
  }

  .mobile-sheet[data-snap="full"] > .mobile-sheet-context-rail {
    order: 3;
  }

  .mobile-sheet[data-snap="full"] > .mobile-spatial-view-guide {
    order: 4;
  }

  .mobile-sheet[data-snap="full"] > .mobile-surface-story-toggle {
    order: 4;
  }

  body.is-map-active.is-reach-mode #mobileSheet.mobile-sheet[data-snap="full"][data-atlas-tab="station"] > :is(#mobileReachDetails, .mobile-surface-story-toggle) {
    display: grid;
  }

  body.is-map-active.is-reach-mode #mobileSheet.mobile-sheet[data-snap="full"][data-atlas-tab="station"] > #mobileReachDetails {
    display: none;
  }

  body.is-map-active.is-reach-mode #mobileSheet.mobile-sheet[data-snap="full"][data-atlas-tab="station"] > .mobile-surface-story-toggle {
    display: grid;
  }

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

  .mobile-sheet[data-snap="full"] > .atlas-dossier-tabs.is-mobile {
    order: 6;
  }

  .mobile-sheet[data-snap="full"] > #mobileReachDetails,
  .mobile-sheet[data-snap="full"] > .mobile-route-card {
    order: 5;
  }

  .mobile-sheet[data-snap="full"] > #mobileInspector {
    order: 6;
  }

  .mobile-sheet[data-snap="full"] > .mobile-search-form,
  .mobile-sheet[data-snap="full"] > .mobile-map-search-form {
    order: 7;
  }

  .mobile-sheet[data-snap="full"] > .mobile-adjust-map {
    order: 8;
  }

  .mobile-sheet[data-snap="full"] > :last-child {
    margin-bottom: calc(max(18px, env(safe-area-inset-bottom)) + 18px);
  }

  /* Half is the map-and-task composition. It exposes the current workflow and
     its compact evidence while leaving map search/time controls on the map. */
  html body.is-map-active #mobileSheet.mobile-sheet[data-snap="half"] > .mobile-sheet-context-rail,
  html body.is-map-active #mobileSheet.mobile-sheet[data-snap="half"] > .mobile-spatial-view-guide,
  html body.is-map-active #mobileSheet.mobile-sheet[data-snap="half"] > .mobile-surface-story-toggle,
  html body.is-map-active #mobileSheet.mobile-sheet[data-snap="half"] > .mobile-search-form,
  html body.is-map-active #mobileSheet.mobile-sheet[data-snap="half"] > .mobile-map-search-form,
  html body.is-map-active #mobileSheet.mobile-sheet[data-snap="half"] > .mobile-adjust-map {
    display: none;
  }

  /* Half is the working surface: keep navigation, the compact answer, and the
     Station/Life task switch in view. Long-form station evidence belongs to
     the full reader opened by the handle's explicit "Open full details" step. */
  html body.is-map-active #mobileSheet.mobile-sheet[data-snap="half"] > :is(
    #mobileInspector,
    #mobileCompassSummary,
    #mobileReachDetails
  ) {
    display: none !important;
  }

  /* The project signature and map already establish context in Explore. Keep
     the working sheet header to station identity plus its concise role so the
     mode rail, answer, and Station/Life switch fit in the first task screen. */
  html body.is-map-active.is-reach-mode #mobileSheet.mobile-sheet[data-snap="half"]
    > .mobile-sheet-head :is(#mobileSheetEyebrow, #mobileStatusText) {
    display: none;
  }

  html body.is-map-active.is-route-mode #mobileSheet.mobile-sheet[data-snap="half"] > .mobile-route-card:not([data-mobile-sheet-mode-inactive="true"]) {
    display: grid;
    order: 5;
  }

  html body.is-map-active #mobileSheet.mobile-sheet[data-snap="half"] > #mobileInspector[data-panel-visible="true"],
  html body.is-map-active #mobileSheet.mobile-sheet[data-snap="half"] > #mobileReachDetails[data-panel-visible="true"] {
    display: block;
  }

  html body.is-map-active:is(.is-reach-mode, .is-inspect-mode) #mobileSheet.mobile-sheet[data-snap="half"] > .atlas-dossier-tabs.is-mobile:not([hidden]):not([data-mobile-sheet-mode-inactive="true"]) {
    position: relative;
    top: auto;
    display: grid;
    order: 6;
    margin: 0;
  }

  html body.is-map-active.is-reach-mode.has-origin:not(.is-car-surface):not(.is-comparison-surface) #mobileSheet.mobile-sheet[data-snap="half"][data-atlas-tab="station"] > :is(#mobileReachDetails, .mobile-surface-story-toggle),
  html body.is-map-active.is-reach-mode.has-origin:not(.is-car-surface):not(.is-comparison-surface) #mobileSheet.mobile-sheet[data-snap="half"][data-atlas-tab="life"] > :is(#mobilePrimarySummary, #mobileInspector, #mobileCompassSummary) {
    display: none;
  }

  html body.is-map-active.is-mobile-sheet-half:not(.is-mobile-sheet-full) :is(
    .mobile-map-search-form,
    .mobile-map-control-rail,
    .map-surface-rail,
    .mobile-map-time-instrument,
    .map-locate-button,
    .map-hills-button,
    #mobileAdjustMap,
    .map-frame .map-corner-actions
  ) {
    opacity: 1;
    pointer-events: auto;
    transform: none;
  }

  html body.is-map-active.is-mobile-sheet-half:not(.is-mobile-sheet-full) :is(
    .mobile-map-control-rail,
    .map-surface-rail,
    .map-frame .map-corner-actions
  ),
  html body.is-map-active.is-mobile-sheet-half:not(.is-mobile-sheet-full) .map-surface-rail .mobile-surface-menu-button {
    display: grid;
  }

  html body.is-map-active.is-mobile-sheet-half:not(.is-mobile-sheet-full) .mobile-map-time-instrument {
    bottom: calc(env(safe-area-inset-bottom) + var(--mobile-task-panel-height) + 10px);
  }

  body.is-index-mode .mobile-sheet[data-snap="full"] > #mobileInspector,
  body.is-index-mode .mobile-sheet[data-snap="full"] > .mobile-spatial-view-guide,
  body.is-index-mode .mobile-sheet[data-snap="full"] > .mobile-surface-story-toggle,
  body.is-index-mode .mobile-sheet[data-snap="full"] > .mobile-search-form,
  body.is-index-mode .mobile-sheet[data-snap="full"] > .mobile-map-search-form,
  body.is-index-mode .mobile-sheet[data-snap="full"] > #mobileReachDetails,
  body.is-index-mode .mobile-sheet[data-snap="full"] > .mobile-adjust-map{
    display: none;
  }

  body.is-map-active.is-route-mode .mobile-sheet[data-snap] > .mobile-sheet-context-rail,
  body.is-map-active.is-route-mode .mobile-sheet[data-snap] > .mobile-surface-story-toggle {
    display: none;
  }

  .mobile-sheet,
  .mobile-sheet p,
  .mobile-sheet input,
  .mobile-sheet select,
  .mobile-sheet textarea,
  .mobile-sheet button {
    font-family: var(--font-main);
  }

  .mobile-sheet :is(h2, h3, h4, summary > strong, button, label, .mobile-mode-copy strong) {
    font-family: var(--font-rail-label);
  }

  .mobile-sheet :is(.network-count, .mobile-route-ledger strong, .station-index-selection-metric strong, .station-index-row-value strong, .station-index-housing-primary strong, .station-index-housing-equivalent strong) {
    font-family: var(--font-metric);
    font-variant-numeric: tabular-nums;
  }

  .mobile-sheet :is(.detail-section-label, .life-access-category, .station-index-selection span, .station-index-selection small, .station-index-ledger-meta, .station-index-row-head, .station-index-row-rank, .station-index-chart figcaption span, .station-index-chart figcaption small) {
    font-family: var(--font-mono);
  }

  .mobile-sheet p,
  .mobile-sheet .empty-data-note,
  .mobile-sheet .route-method-note,
  .mobile-sheet .commute-fit-method span{
    color: rgba(17, 16, 14, 0.67);
    font: 560 0.76rem/1.42 var(--font-main);
    letter-spacing: 0;
  }

  .mobile-sheet :is(.mobile-primary-card, .mobile-reach-details, .mobile-route-card, .mobile-inspector, .mobile-search-form, .mobile-adjust-map) {
    border: 1px solid var(--mobile-panel-line);
    border-radius: var(--mobile-panel-radius);
    background: rgba(255, 253, 247, 0.58);
    box-shadow: 0 4px 14px rgba(17, 16, 14, 0.045), inset 0 1px 0 rgba(255, 255, 255, 0.66);
  }

  .mobile-sheet :is(.mobile-search-row input, .route-form input, .commute-fit-extra input, .station-index-search input, .station-index-line-filter select) {
    min-height: 44px;
    border: 1px solid rgba(17, 16, 14, 0.28);
    border-radius: var(--mobile-panel-control-radius);
    background: rgba(255, 253, 247, 0.82);
    box-shadow: none;
    color: var(--ink);
  }

  .mobile-sheet :is(.mobile-search-row input, .route-form input, .commute-fit-extra input, .station-index-search input, .station-index-line-filter select):focus {
    border-color: var(--ink);
    outline: 2px solid rgba(216, 137, 44, 0.5);
    outline-offset: 1px;
    box-shadow: none;
  }

  .mobile-sheet :is(.life-access-actions button, .route-actions button, .commute-fit-run, .route-view-button, .station-index-selection-actions button, .station-index-pagination button) {
    min-height: 44px;
    border: 1px solid rgba(17, 16, 14, 0.26);
    border-radius: var(--mobile-panel-control-radius);
    background: rgba(255, 253, 247, 0.72);
    box-shadow: none;
    color: var(--ink);
    font: 730 0.67rem/1.1 var(--font-rail-label);
  }

  .mobile-sheet :is(.life-access-actions button, .route-actions button, .commute-fit-run, .route-view-button, .station-index-selection-actions button, .station-index-pagination button):is(:active, .is-active, [aria-pressed="true"]) {
    background: var(--ink);
    color: var(--paper);
  }

  .mobile-sheet :is(
    .empty-data-note,
    .linked-row,
    .line-rank,
    .commute-fit-method,
    .route-sketch-chip,
    .route-alternative,
    .station-index-analysis > summary,
    .station-index-row,
    .station-index-panel-inner,
    .mobile-primary-card,
    .surface-story-button
  ) {
    border-left: 0;
  }

  .mobile-sheet :is(
    .empty-data-note,
    .linked-row,
    .line-rank,
    .commute-fit-method,
    .route-sketch-chip.is-active,
    .route-alternative.is-active,
    .station-index-analysis[open] > summary,
    .station-index-row.is-selected,
    .surface-story-button.is-active
  ) {
    box-shadow: none;
  }

  .mobile-sheet .empty-data-note {
    margin: 0;
    padding: 12px 2px;
    border-top: 1px solid rgba(17, 16, 14, 0.14);
    border-bottom: 1px solid rgba(17, 16, 14, 0.14);
    background: transparent;
  }

  .mobile-sheet .surface-story-toggle {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    min-height: 48px;
    padding: 3px;
    overflow: hidden;
    border: 1px solid rgba(17, 16, 14, 0.26);
    border-radius: 4px;
    background: rgba(255, 253, 247, 0.6);
  }

  .mobile-sheet .surface-story-button {
    position: relative;
    min-height: 40px;
    border: 0;
    border-radius: 2px;
    background: transparent;
    box-shadow: none;
    color: rgba(17, 16, 14, 0.6);
    font: 700 var(--type-micro)/1 var(--font-rail-label);
    letter-spacing: 0.03em;
    text-transform: uppercase;
  }

  
  .mobile-sheet .surface-story-button.is-active {
    border-color: rgba(17, 16, 14, 0.3);
    background: rgba(17, 16, 14, 0.075);
    color: var(--ink);
    box-shadow: inset 0 0 0 1px rgba(17, 16, 14, 0.18);
  }

  .mobile-sheet .surface-story-button.is-active::after {
    content: none;
    display: none;
  }

  /* Atlas: one graphical hero, then evidence. */
  body.is-map-active.is-reach-mode .mobile-sheet[data-snap="full"] #mobilePrimarySummary .mobile-score-card {
    --rail-progress: 8%;
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px 12px;
    align-items: center;
    padding: 14px 14px 62px;
    border-radius: var(--mobile-panel-radius);
    background:
      repeating-linear-gradient(90deg, rgba(17, 16, 14, 0.18) 0 1px, transparent 1px 9px) 14px 11px / calc(100% - 28px) 5px no-repeat,
      rgba(255, 253, 247, 0.58);
  }

  body.is-reach-mode .mobile-sheet[data-snap="full"] .mobile-score-card.is-result::before {
    content: "";
    position: absolute;
    right: 0;
    bottom: 11px;
    left: 0;
    height: 9px;
    background:
      radial-gradient(circle at 4px 50%, var(--paper-strong) 0 2px, rgba(17, 16, 14, 0.72) 2.2px 3px, transparent 3.2px) 0 50% / 24px 9px repeat-x,
      linear-gradient(rgba(17, 16, 14, 0.58), rgba(17, 16, 14, 0.58)) 0 50% / 100% 1px no-repeat;
    pointer-events: none;
  }

  body.is-reach-mode .mobile-sheet[data-snap="full"] .mobile-score-card.is-result::after {
    content: "";
    position: absolute;
    bottom: 12px;
    left: clamp(12px, var(--rail-progress), calc(100% - 12px));
    width: 40px;
    height: 20px;
    background: var(--mobile-pixel-train-image) center / contain no-repeat;
    image-rendering: pixelated;
    pointer-events: none;
    filter: drop-shadow(0 1px 0 rgba(255, 253, 247, 0.8));
    transform: translateX(-50%);
  }

  /* The Rail result uses a platform line and pixel train. Walking retains the
     same paper ticket register but gives that semantic space back to content. */
  body.is-walking-surface .mobile-sheet[data-snap="full"] #mobilePrimarySummary .mobile-score-card {
    padding-bottom: 14px;
  }

  body.is-walking-surface .mobile-sheet[data-snap="full"] .mobile-score-card.is-result::before,
  body.is-walking-surface .mobile-sheet[data-snap="full"] .mobile-score-card.is-result::after {
    content: none;
    display: none;
  }

  body.is-reach-mode .mobile-sheet[data-snap="full"] .mobile-score-card > span {
    display: none;
  }

  body.is-reach-mode .mobile-sheet[data-snap="full"] .mobile-score-card > strong {
    grid-column: 1 / -1;
    margin-top: 6px;
  }

  body.is-reach-mode .mobile-sheet[data-snap="full"] .mobile-score-card .network-count {
    display: flex;
    gap: 7px;
    align-items: baseline;
  }

  body.is-reach-mode .mobile-sheet[data-snap="full"] .mobile-score-card .network-count b {
    font-size: clamp(2.2rem, 13vw, 3.15rem);
    font-weight: 420;
    line-height: 0.88;
  }

  body.is-reach-mode .mobile-sheet[data-snap="full"] .mobile-score-card .network-count span {
    color: rgba(17, 16, 14, 0.58);
    font: 560 var(--type-micro)/1.18 var(--font-rail-code);
    letter-spacing: 0.015em;
    text-transform: uppercase;
  }

  body.is-reach-mode .mobile-sheet[data-snap="full"] .mobile-score-card > p {
    grid-column: 1 / -1;
    margin: 2px 0 0;
    padding-top: 8px;
    border-top: 1px solid rgba(17, 16, 14, 0.14);
  }

  body.is-comparison-surface .mobile-sheet[data-snap="full"] #mobilePrimarySummary .mobile-route-ledger {
    display: grid;
    grid-template-columns: minmax(0, 0.88fr) minmax(0, 0.88fr) minmax(0, 1.35fr);
    margin-top: 4px;
    border-top: 1px solid rgba(17, 16, 14, 0.14);
    border-bottom: 1px solid rgba(17, 16, 14, 0.14);
  }

  body.is-comparison-surface .mobile-sheet[data-snap="full"] #mobilePrimarySummary .mobile-score-card > strong {
    max-width: 100%;
    overflow: visible;
    font-size: clamp(1.15rem, 5.55vw, 1.42rem);
    line-height: 1.08;
    letter-spacing: -0.025em;
    overflow-wrap: normal;
    text-wrap: balance;
    white-space: normal;
    word-break: normal;
  }

  body.is-comparison-surface .mobile-sheet[data-snap="full"] #mobilePrimarySummary .mobile-route-ledger > span {
    display: grid;
    align-content: start;
    gap: 3px;
    min-width: 0;
    padding: 8px 7px;
  }

  body.is-comparison-surface .mobile-sheet[data-snap="full"] #mobilePrimarySummary .mobile-route-ledger > span + span {
    border-left: 1px solid rgba(17, 16, 14, 0.12);
  }

  body.is-comparison-surface .mobile-sheet[data-snap="full"] #mobilePrimarySummary .mobile-route-ledger strong,
  body.is-comparison-surface .mobile-sheet[data-snap="full"] #mobilePrimarySummary .mobile-route-ledger small {
    min-width: 0;
    overflow-wrap: anywhere;
    white-space: normal;
  }

  body.is-comparison-surface .mobile-sheet[data-snap="full"] #mobilePrimarySummary .mobile-route-ledger strong {
    font-size: clamp(0.72rem, 3.1vw, 0.88rem);
    line-height: 1.12;
  }

  body.is-comparison-surface .mobile-sheet[data-snap="full"] #mobilePrimarySummary .mobile-route-ledger small {
    color: rgba(17, 16, 14, 0.58);
    font: 700 0.6875rem/1.2 var(--font-rail-label);
    letter-spacing: 0.025em;
    text-transform: uppercase;
  }

  .mobile-sheet .life-access-orbit {
    gap: 7px;
    margin: 0;
    border-top: 2px solid var(--ink);
    border-bottom: 0;
  }

  .mobile-sheet .life-access-orbit > header {
    padding: 9px 2px 7px;
  }

  .mobile-sheet .life-access-row {
    grid-template-columns: minmax(62px, 0.7fr) minmax(0, 1.5fr) minmax(68px, auto);
    min-height: 50px;
    padding: 7px 3px;
    border-top: 1px solid rgba(17, 16, 14, 0.12);
    border-radius: 0;
  }

  .mobile-sheet .life-access-row.is-selected {
    outline: 1px solid rgba(17, 16, 14, 0.36);
    outline-offset: -1px;
    background: rgba(216, 137, 44, 0.08);
  }

  /* Commutes: the shared header names the mode; the form starts with its lens. */
  body.is-route-mode .mobile-sheet[data-snap="full"] > .mobile-route-card {
    display: grid;
    gap: 11px;
    min-width: 0;
    padding: 12px;
  }

  body.is-route-mode .mobile-sheet[data-snap="full"] > .mobile-route-card > h3 {
    display: none;
  }

  body.is-route-mode .mobile-sheet[data-snap="full"] .route-view-toggle {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 3px;
    padding: 3px;
    border: 1px solid rgba(17, 16, 14, 0.24);
    border-radius: 4px;
    background: rgba(17, 16, 14, 0.035);
  }

  body.is-route-mode .mobile-sheet[data-snap="full"] .route-form {
    display: grid;
    gap: 7px;
  }

  body.is-route-mode .mobile-sheet .commute-fit-extra {
    display: grid;
    gap: 7px;
    min-width: 0;
    margin-top: 2px;
    padding-top: 0;
    border-top: 1px solid rgba(17, 16, 14, 0.16);
  }

  body.is-route-mode .mobile-sheet .commute-fit-extra > summary {
    position: relative;
    display: grid;
    gap: 3px;
    min-height: 44px;
    padding: 9px 28px 8px 0;
    cursor: pointer;
    list-style: none;
  }

  body.is-route-mode .mobile-sheet .commute-fit-extra > summary::-webkit-details-marker {
    display: none;
  }

  body.is-route-mode .mobile-sheet .commute-fit-extra > summary::after {
    content: "+";
    position: absolute;
    top: 50%;
    right: 4px;
    color: rgba(17, 16, 14, 0.7);
    font: 760 1rem/1 var(--font-rail-label);
    transform: translateY(-50%);
  }

  body.is-route-mode .mobile-sheet .commute-fit-extra[open] > summary::after {
    content: "−";
  }

  body.is-route-mode .mobile-sheet details.commute-fit-extra:not([open]) > :not(summary) {
    display: none;
  }

  body.is-route-mode .mobile-sheet .commute-fit-extra[open] > summary {
    margin-bottom: 2px;
    border-bottom: 1px solid rgba(17, 16, 14, 0.1);
  }

  body.is-route-mode .mobile-sheet[data-snap="full"] .route-form label::before {
    width: 14px;
    height: 2px;
    border-radius: 999px;
    background: var(--gold);
  }

  body.is-route-mode .mobile-sheet[data-snap="full"] .route-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) repeat(2, 52px);
    gap: 6px;
  }

  body.is-route-mode .mobile-sheet[data-snap="full"] .route-actions .utility-button:first-of-type {
    min-width: 0;
    background: var(--ink);
    color: var(--paper);
  }

  body.is-route-mode .mobile-sheet[data-snap="full"] .route-actions .secondary-button {
    min-width: 52px;
    padding-inline: 4px;
    font-size: 0.68rem;
    white-space: nowrap;
  }

  body.is-route-mode .mobile-sheet .commute-fit-method {
    padding: 10px 0;
    border-top: 1px solid rgba(17, 16, 14, 0.16);
    border-bottom: 1px solid rgba(17, 16, 14, 0.16);
    background: transparent;
  }

  body.is-route-mode .mobile-sheet .route-cost-bar {
    position: relative;
    align-items: end;
    height: 18px;
    margin-top: 4px;
    overflow: visible;
    border: 0;
    border-bottom: 1px solid rgba(17, 16, 14, 0.52);
    background:
      repeating-linear-gradient(90deg, transparent 0 11px, rgba(17, 16, 14, 0.24) 11px 12px, transparent 12px 23px) 0 100% / auto 6px no-repeat;
    box-shadow: none;
  }

  body.is-route-mode .mobile-sheet .route-cost-segment {
    height: 7px;
    min-width: 0;
  }

  body.is-route-mode .mobile-sheet .route-cost-ride {
    position: relative;
  }

  body.is-route-mode .mobile-sheet .route-cost-ride::after {
    content: "";
    position: absolute;
    z-index: 2;
    right: -9px;
    bottom: 5px;
    width: 30px;
    height: 15px;
    background: var(--mobile-pixel-train-image) center / contain no-repeat;
    image-rendering: pixelated;
    pointer-events: none;
  }

  body.is-route-mode .mobile-sheet .commute-day-evidence-header {
    padding: 10px;
    border: 1px solid #b8ad8f;
    border-top: 3px solid var(--livery, var(--accent));
    border-radius: 2px;
    background:
      repeating-linear-gradient(118deg, rgba(255, 255, 255, 0.46) 0 1px, transparent 1px 5px),
      var(--material-ticket-bay);
  }

  /* Keep the narrowest supported devices usable without text collisions. */
  @media (max-width: 370px) {
    :root,
    body.is-map-active {
      --mobile-panel-pad: 8px;
    }

    .mobile-sheet[data-snap="collapsed"] > .mobile-collapsed-control-bar {
      grid-template-columns: minmax(0, 1fr) 84px 42px;
      gap: 4px;
    }

    .mobile-sheet .mobile-sheet-actions {
      grid-template-columns: 90px;
    }

    .mobile-sheet #mobileSheetShareButton {
      display: none;
    }

    .mobile-sheet[data-snap="full"] .mobile-mode-control .mode-button {
      grid-template-columns: 18px minmax(0, 1fr);
      gap: 4px;
      padding: 5px;
    }

    .mobile-sheet[data-snap="full"] .mobile-mode-control .mobile-mode-icon {
      width: 18px;
      height: 18px;
    }

    .mobile-sheet[data-snap="collapsed"] .mobile-collapsed-mode-control .mode-button {
      grid-template-columns: 15px minmax(0, 1fr);
      gap: 3px;
      padding-inline: 4px;
    }

    .mobile-sheet[data-snap="collapsed"] .mobile-mode-icon {
      width: 15px;
      height: 15px;
    }

    body.is-map-active .mobile-sheet[data-snap="collapsed"] .mobile-collapsed-control-bar .mobile-share-button.mobile-share-button {
      background-position: center;
      color: transparent;
      font-size: 0;
    }

    body.is-map-active .mobile-sheet[data-snap="collapsed"] .mobile-collapsed-control-bar .mobile-share-button.mobile-share-button::before {
      content: none;
    }

    .mobile-mode-copy strong {
      font-size: 0.6875rem;
    }

    .mobile-mode-copy em {
      display: none;
    }

    .station-index-workspace.is-mobile .station-index-tabs {
      grid-template-columns: repeat(5, minmax(64px, 1fr));
    }

    .station-index-workspace.is-mobile .station-index-selection-actions {
      grid-template-columns: 1fr;
    }
  }

  /* The expanded sheet already carries a persistent identity header. */
  html body.is-map-active:not(.has-network-overview) #mobileSheet.mobile-sheet[data-snap="full"] > .mobile-project-signature {
    display: none;
  }

  /* Make the collapsed drag handle read as an expand action too. */
  html body.is-map-active #mobileSheet.mobile-sheet[data-snap="collapsed"] > .mobile-sheet-handle {
    grid-template-columns: auto auto;
    gap: 8px;
    justify-content: center;
    width: 100%;
    min-width: 100%;
    height: 44px;
    min-height: 44px;
    margin: 0;
  }

  html body.is-map-active #mobileSheet.mobile-sheet[data-snap="collapsed"] > .mobile-sheet-handle::before {
    width: 36px;
    margin: 0;
  }

  html body.is-map-active #mobileSheet.mobile-sheet[data-snap="collapsed"] > .mobile-sheet-handle::after {
    content: "";
    display: block;
    width: 7px;
    height: 7px;
    border-top: 1.5px solid rgba(17, 16, 14, 0.72);
    border-left: 1.5px solid rgba(17, 16, 14, 0.72);
    transform: translateY(2px) rotate(45deg);
  }

  /* Five peer lenses stay in one ordered, discoverable rail. */
  #mobileSheet .station-index-workspace.is-mobile .station-index-story-header {
    gap: 6px;
    padding: 8px;
  }

  #mobileSheet .station-index-workspace.is-mobile .station-index-story-heading {
    gap: 1px;
  }

  #mobileSheet .station-index-workspace.is-mobile .station-index-story-heading > span {
    display: none;
  }

  #mobileSheet .station-index-workspace.is-mobile .station-index-story-heading > strong {
    font-size: 1rem;
    line-height: 1.12;
  }

  #mobileSheet .station-index-workspace.is-mobile .station-index-story-heading > p {
    margin-top: 0;
    font-size: 0.75rem;
    line-height: 1.35;
    text-wrap: pretty;
  }

  #mobileSheet .station-index-workspace.is-mobile .station-index-story-header > .station-index-tabs {
    display: flex;
    gap: 5px;
    padding: 4px 30px 8px 4px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-padding-inline: 4px 30px;
    scroll-snap-type: x mandatory;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
    touch-action: pan-x;
    -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 30px), transparent 100%);
    mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 30px), transparent 100%);
  }

  #mobileSheet .station-index-workspace.is-mobile .station-index-story-header > .station-index-tabs::-webkit-scrollbar {
    display: none;
  }

  #mobileSheet .station-index-workspace.is-mobile .station-index-story-header > .station-index-tabs .station-index-tab strong {
    font-size: 0.6875rem;
    line-height: 1.15;
  }

  /* One compact metadata rail prevents orphaned units such as “min”. */
  #mobileSheet .station-index-workspace.is-mobile .station-index-story-context {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px;
  }

  #mobileSheet .station-index-workspace.is-mobile .station-index-story-context > span,
  #mobileSheet .station-index-workspace.is-mobile .station-index-story-context > span:last-child {
    grid-column: auto;
    gap: 1px;
    min-height: 48px;
    padding: 6px 8px;
  }

  #mobileSheet .station-index-workspace.is-mobile .station-index-story-context :is(small, strong) {
    min-width: 0;
    font-size: 0.6875rem;
    line-height: 1.2;
    white-space: nowrap;
  }

  #mobileSheet .station-index-workspace.is-mobile .station-index-story-context strong {
    overflow: hidden;
    text-overflow: ellipsis;
  }

  #mobileSheet .station-index-mobile-card .station-index-story-map-legend {
    gap: 6px;
    margin: 0 8px 8px;
    padding: 8px;
  }

  #mobileSheet .station-index-mobile-card .station-index-story-map-legend > small {
    display: -webkit-box;
    overflow: hidden;
    font-size: 0.6875rem;
    line-height: 1.25;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
  }
}

/* The half sheet is the map's glanceable mode preview. On portrait phones with
   enough height, let the selected Bay Area scene carry that role while retaining
   the two useful reach measures as a compact caption. Collapsed, full, short,
   and landscape layouts keep the information-first card. */
.mobile-shinhanga-teaser {
  display: none;
}

@media (max-width: 980px) and (orientation: portrait) and (min-height: 720px) {
  .mobile-shinhanga-teaser.is-rail { --mobile-shinhanga-image: var(--horizon-image); --mobile-shinhanga-position: center 55%; }
  .mobile-shinhanga-teaser.is-rail.is-underground { --mobile-shinhanga-position: center 51%; --mobile-shinhanga-saturation: 0.84; }
  .mobile-shinhanga-teaser.is-rail:is(.is-terminal, .is-bayfront) { --mobile-shinhanga-position: center 52%; }
  .mobile-shinhanga-teaser.is-rail.is-local { --mobile-shinhanga-position: center 54%; }
  .mobile-shinhanga-teaser.is-rail:is(.is-regional, .is-waterside) { --mobile-shinhanga-position: center 54%; }
  .mobile-shinhanga-teaser.is-rail:is(.is-countryside, .is-mountain) { --mobile-shinhanga-position: center 56%; }
  .mobile-shinhanga-teaser.is-walk { --mobile-shinhanga-image: var(--walk-horizon-image); --mobile-shinhanga-position: center 55%; }
  .mobile-shinhanga-teaser:is(.is-walk-waterfront, .is-walk-metropolitan) { --mobile-shinhanga-position: center 54%; }
  .mobile-shinhanga-teaser.is-walk-countryside { --mobile-shinhanga-position: center 56%; }
  .mobile-shinhanga-teaser.is-road { --mobile-shinhanga-image: var(--road-horizon-image); --mobile-shinhanga-position: center 57%; }
  .mobile-shinhanga-teaser.is-road.is-metropolitan { --mobile-shinhanga-position: center 55%; }

  #mobileSheet[data-snap="half"] .has-shinhanga-teaser {
    position: relative;
    isolation: isolate;
    display: grid;
    min-height: clamp(112px, 15dvh, 132px);
    align-content: end;
    gap: 2px;
    padding: 0;
    overflow: hidden;
    border-color: rgba(17, 16, 14, 0.28);
    background: #353934;
    box-shadow: 0 3px 12px rgba(17, 16, 14, 0.1), inset 0 1px 0 rgba(255, 253, 247, 0.3);
    color: #fffdf7;
  }

  #mobileSheet[data-snap="half"] .has-shinhanga-teaser > .mobile-shinhanga-teaser {
    position: absolute;
    z-index: 0;
    inset: 0;
    display: block;
    width: auto;
    height: auto;
    margin: 0;
    border: 0;
    box-shadow: none;
    background-image:
      linear-gradient(180deg, rgba(248, 245, 236, 0.28) 0%, transparent 15%, transparent 54%, rgba(15, 17, 15, 0.16) 72%, rgba(12, 13, 12, 0.82) 100%),
      var(--mobile-shinhanga-image);
    background-position: center, var(--mobile-shinhanga-position, center 55%);
    background-size: cover;
    filter: saturate(var(--mobile-shinhanga-saturation, 0.9)) contrast(0.99);
    transform: scale(1.002);
  }

  #mobileSheet[data-snap="half"] .has-shinhanga-teaser > .mobile-shinhanga-teaser::after {
    position: absolute;
    inset: 0;
    border-top: 1px solid rgba(255, 253, 247, 0.22);
    border-bottom: 1px solid rgba(255, 253, 247, 0.18);
    content: "";
    pointer-events: none;
  }

  #mobileSheet[data-snap="half"] .has-shinhanga-teaser > span {
    display: none;
  }

  #mobileSheet[data-snap="half"] .has-shinhanga-teaser > :is(strong, p, .mobile-network-coverage) {
    position: relative;
    z-index: 1;
  }

  #mobileSheet[data-snap="half"] .has-shinhanga-teaser > strong {
    margin: 0;
    padding: 60px 12px 0;
    color: #fffdf7;
    font: 780 clamp(1.04rem, 4.6vw, 1.22rem)/1.05 var(--font-main);
    letter-spacing: -0.015em;
    text-shadow: 0 1px 5px rgba(8, 10, 8, 0.72);
    white-space: nowrap;
  }

  #mobileSheet[data-snap="half"] .has-shinhanga-teaser > p {
    display: block;
    margin: 0;
    padding: 0 12px 11px;
    overflow: hidden;
    color: rgba(255, 253, 247, 0.88);
    font: 650 0.7rem/1.25 var(--font-main);
    text-overflow: ellipsis;
    text-shadow: 0 1px 4px rgba(8, 10, 8, 0.78);
    white-space: nowrap;
  }

  #mobileSheet[data-snap="half"] .has-shinhanga-teaser > .mobile-network-coverage {
    display: grid;
    align-self: end;
    grid-template-rows: auto;
    gap: 0;
    padding: 68px 12px 12px;
  }

  #mobileSheet[data-snap="half"] .has-shinhanga-teaser .mobile-network-coverage-head {
    align-items: baseline;
    gap: 12px;
  }

  #mobileSheet[data-snap="half"] .has-shinhanga-teaser .mobile-network-coverage-head :is(strong, span, b) {
    color: #fffdf7;
    text-shadow: 0 1px 5px rgba(8, 10, 8, 0.8);
  }

  #mobileSheet[data-snap="half"] .has-shinhanga-teaser .mobile-network-coverage-head > strong b {
    font-size: clamp(1.12rem, 5vw, 1.34rem);
  }

  #mobileSheet[data-snap="half"] .has-shinhanga-teaser .mobile-network-coverage-head > strong span,
  #mobileSheet[data-snap="half"] .has-shinhanga-teaser .mobile-network-coverage-head > span {
    color: rgba(255, 253, 247, 0.84);
    font-size: 0.7rem;
  }

  #mobileSheet[data-snap="half"] .has-shinhanga-teaser :is(.mobile-network-coverage-track, .mobile-network-coverage > p) {
    display: none;
  }
}

/* Tall portrait phones have enough map above the task sheet to make the
   half state a useful glance surface. Reuse the real dossier evidence here:
   a compact reach compass for Station and the three ranked neighborhood
   signatures for Life From Here. Short phones keep the lean task surface so
   these previews never force its core controls below the fold. */
@media (max-width: 980px) and (orientation: portrait) and (min-height: 840px) {
  html body.is-map-active.is-reach-mode.has-origin:not(.has-reach-neighborhoods):not(.is-car-surface):not(.is-comparison-surface)
    #mobileSheet.mobile-sheet[data-snap="half"][data-atlas-tab="station"] > #mobileCompassSummary:not([hidden]) {
    box-sizing: border-box;
    display: block !important;
    order: 7;
    height: 68px;
    margin: 0;
    padding: 0 !important;
    overflow: hidden;
    border: 1px solid rgba(17, 16, 14, 0.18);
    border-radius: 5px;
    background:
      linear-gradient(90deg, rgba(255, 253, 247, 0.88), rgba(244, 238, 225, 0.72)),
      var(--paper-panel-background);
  }

  html body.is-map-active.is-reach-mode.has-origin:not(.is-car-surface):not(.is-comparison-surface)
    #mobileSheet.mobile-sheet[data-snap="half"][data-atlas-tab="station"] #mobileCompassSummary .mobile-compass-card {
    box-sizing: border-box;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 72px;
    align-items: center;
    gap: 8px;
    height: 66px;
    padding: 7px 9px 7px 11px;
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  html body.is-map-active.is-reach-mode.has-origin:not(.is-car-surface):not(.is-comparison-surface)
    #mobileSheet.mobile-sheet[data-snap="half"][data-atlas-tab="station"] #mobileCompassSummary .detail-section-label {
    display: grid;
    gap: 5px;
    min-width: 0;
    color: var(--ink);
    font: 760 var(--type-micro)/1.1 var(--font-rail-label);
    letter-spacing: 0.05em;
    grid-column: 1;
    grid-row: 1;
  }

  html body.is-map-active.is-reach-mode.has-origin:not(.is-car-surface):not(.is-comparison-surface)
    #mobileSheet.mobile-sheet[data-snap="half"][data-atlas-tab="station"] #mobileCompassSummary .detail-section-label::after {
    color: var(--ink-soft);
    content: "8 bearings \00b7  stations + distance";
    font: 600 0.63rem/1.25 var(--font-ui);
    letter-spacing: 0;
    text-transform: none;
  }

  html body.is-map-active.is-reach-mode.has-origin:not(.is-car-surface):not(.is-comparison-surface)
    #mobileSheet.mobile-sheet[data-snap="half"][data-atlas-tab="station"] #mobileCompassSummary .mobile-score-card-clock {
    display: grid;
    width: 72px;
    height: 58px;
    margin: 0;
    overflow: hidden;
    place-items: center;
    grid-column: 2;
    grid-row: 1;
  }

  html body.is-map-active.is-reach-mode.has-origin:not(.is-car-surface):not(.is-comparison-surface)
    #mobileSheet.mobile-sheet[data-snap="half"][data-atlas-tab="station"] #mobileCompassSummary .reach-clock {
    display: grid;
    width: 58px;
    height: 58px;
    margin: 0;
    padding: 0;
    overflow: hidden;
    place-items: center;
  }

  html body.is-map-active.is-reach-mode.has-origin:not(.is-car-surface):not(.is-comparison-surface)
    #mobileSheet.mobile-sheet[data-snap="half"][data-atlas-tab="station"] #mobileCompassSummary .reach-clock-svg {
    width: 58px !important;
    height: 58px !important;
    max-width: 58px;
    max-height: 58px;
  }

  html body.is-map-active.is-reach-mode.has-origin:not(.is-car-surface):not(.is-comparison-surface)
    #mobileSheet.mobile-sheet[data-snap="half"][data-atlas-tab="station"] #mobileCompassSummary :is(.reach-clock-direct-label, .reach-clock-foot) {
    display: none;
  }

  html body.is-map-active.is-reach-mode.has-origin:not(.is-car-surface):not(.is-comparison-surface)
    #mobileSheet.mobile-sheet[data-snap="half"][data-atlas-tab="life"] > #mobileReachDetails[aria-hidden="false"] {
    box-sizing: border-box;
    display: block !important;
    order: 7;
    max-height: 116px;
    margin: 0;
    padding: 0 !important;
    overflow: hidden;
  }

  html body.is-map-active.is-reach-mode.has-origin:not(.is-car-surface):not(.is-comparison-surface)
    #mobileSheet.mobile-sheet[data-snap="half"][data-atlas-tab="life"] #mobileReachDetails .life-opportunity-panel {
    box-sizing: border-box;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
    width: 100%;
    max-width: 100%;
    min-height: 0;
    padding: 7px 8px 8px;
    overflow: hidden;
    border: 1px solid rgba(17, 16, 14, 0.18);
    border-radius: 5px;
    background:
      linear-gradient(180deg, rgba(255, 253, 247, 0.9), rgba(244, 238, 225, 0.74)),
      var(--paper-panel-background);
  }

  html body.is-map-active.is-reach-mode.has-origin:not(.is-car-surface):not(.is-comparison-surface)
    #mobileSheet.mobile-sheet[data-snap="half"][data-atlas-tab="life"] #mobileReachDetails .life-opportunity-panel > :not(header):not(.life-opportunity-list.is-featured) {
    display: none !important;
  }

  html body.is-map-active.is-reach-mode.has-origin:not(.is-car-surface):not(.is-comparison-surface)
    #mobileSheet.mobile-sheet[data-snap="half"][data-atlas-tab="life"] #mobileReachDetails .life-opportunity-panel > header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    padding: 0 1px 5px;
  }

  html body.is-map-active.is-reach-mode.has-origin:not(.is-car-surface):not(.is-comparison-surface)
    #mobileSheet.mobile-sheet[data-snap="half"][data-atlas-tab="life"] #mobileReachDetails .life-opportunity-panel > header strong {
    min-width: 0;
    overflow: hidden;
    font-size: 0.68rem;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  html body.is-map-active.is-reach-mode.has-origin:not(.is-car-surface):not(.is-comparison-surface)
    #mobileSheet.mobile-sheet[data-snap="half"][data-atlas-tab="life"] #mobileReachDetails .life-opportunity-panel > header p {
    flex: 0 1 auto;
    min-width: 0;
    max-width: 50%;
    overflow: hidden;
    color: var(--ink-soft);
    font: 0/0 var(--font-mono);
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  html body.is-map-active.is-reach-mode.has-origin:not(.is-car-surface):not(.is-comparison-surface)
    #mobileSheet.mobile-sheet[data-snap="half"][data-atlas-tab="life"] #mobileReachDetails .life-opportunity-panel > header p::after {
    content: "Top 3 \00b7  tap to focus";
    font: 600 0.61rem/1.1 var(--font-mono);
  }

  html body.is-map-active.is-reach-mode.has-origin:not(.is-car-surface):not(.is-comparison-surface)
    #mobileSheet.mobile-sheet[data-snap="half"][data-atlas-tab="life"] #mobileReachDetails .life-opportunity-list.is-featured {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 5px;
    width: 100%;
    min-width: 0;
    padding: 0;
    overflow: hidden;
  }

  html body.is-map-active.is-reach-mode.has-origin:not(.is-car-surface):not(.is-comparison-surface)
    #mobileSheet.mobile-sheet[data-snap="half"][data-atlas-tab="life"] #mobileReachDetails .life-opportunity-list.is-featured .life-opportunity-row {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    grid-template-rows: auto auto;
    gap: 2px 5px;
    width: auto;
    max-width: 100%;
    min-width: 0;
    min-height: 63px;
    padding: 5px;
    border: 1px solid rgba(17, 16, 14, 0.13);
    border-radius: 4px;
    background: rgba(255, 253, 247, 0.62);
    text-align: left;
  }

  html body.is-map-active.is-reach-mode.has-origin:not(.is-car-surface):not(.is-comparison-surface)
    #mobileSheet.mobile-sheet[data-snap="half"][data-atlas-tab="life"] #mobileReachDetails .life-opportunity-list.is-featured .life-opportunity-row > .life-station-roundel {
    grid-row: 1 / 3;
    width: 23px;
    height: 23px;
    align-self: center;
  }

  html body.is-map-active.is-reach-mode.has-origin:not(.is-car-surface):not(.is-comparison-surface)
    #mobileSheet.mobile-sheet[data-snap="half"][data-atlas-tab="life"] #mobileReachDetails .life-opportunity-list.is-featured .life-opportunity-row > span {
    align-self: end;
  }

  html body.is-map-active.is-reach-mode.has-origin:not(.is-car-surface):not(.is-comparison-surface)
    #mobileSheet.mobile-sheet[data-snap="half"][data-atlas-tab="life"] #mobileReachDetails .life-opportunity-list.is-featured .life-opportunity-row :is(strong, em) {
    display: block;
    min-width: 0;
    overflow: hidden;
    font-size: 0.62rem;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  html body.is-map-active.is-reach-mode.has-origin:not(.is-car-surface):not(.is-comparison-surface)
    #mobileSheet.mobile-sheet[data-snap="half"][data-atlas-tab="life"] #mobileReachDetails .life-opportunity-list.is-featured .life-opportunity-row small {
    display: none;
  }

  html body.is-map-active.is-reach-mode.has-origin:not(.is-car-surface):not(.is-comparison-surface)
    #mobileSheet.mobile-sheet[data-snap="half"][data-atlas-tab="life"] #mobileReachDetails .life-opportunity-list.is-featured .life-opportunity-row > em {
    align-self: start;
    justify-self: start;
    color: var(--ink-soft);
  }
}

/* In short landscape, the full sheet becomes a scroll-owning side drawer. */
@media (min-width: 600px) and (max-width: 980px) and (max-height: 599px) and (orientation: landscape) {
  :root,
  body.is-map-active,
  body.is-map-active.is-reach-mode.has-origin,
  body.is-map-active.is-route-mode,
  body.is-map-active.is-inspect-mode,
  body.is-map-active.is-index-mode {
    --mobile-panel-pad: 12px;
    --mobile-panel-gap: 9px;
  }

  body.is-map-active .mobile-sheet[data-snap="full"],
  body.is-map-active.is-index-mode .mobile-sheet[data-snap="full"] {
    right: max(8px, env(safe-area-inset-right));
    left: auto;
    width: clamp(360px, 52vw, 440px);
    max-width: calc(100vw - 72px);
    height: calc(100dvh - 16px);
    padding-bottom: calc(max(12px, env(safe-area-inset-bottom)) + 12px);
    border: 1px solid rgba(92, 76, 52, 0.34);
    border-radius: 14px;
    background:
      var(--paper-panel-background),
      linear-gradient(180deg, #fbf9f2, #f0eadc);
    background-size: var(--paper-grain-size), var(--paper-formation-size), auto;
    box-shadow:
      -2px 4px 12px rgba(61, 47, 28, 0.1),
      inset 0 1px 0 rgba(255, 255, 255, 0.72);
  }

  body.is-map-active .mobile-sheet[data-snap="full"] > .mobile-sheet-handle {
    border-radius: 13px 13px 0 0;
  }

  body.is-map-active .mobile-sheet[data-snap="full"] > .mobile-sheet-head {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

@media (min-width: 761px) and (max-width: 980px) and (orientation: portrait) {
  :root, body.is-map-active, body.is-map-active.is-reach-mode.has-origin,
  body.is-map-active.is-route-mode, body.is-map-active.is-inspect-mode,
  body.is-map-active.is-index-mode {
    --mobile-panel-pad: 12px;
    --mobile-panel-gap: 10px;
    --mobile-panel-paper: #f8f5ec;
    --mobile-panel-line: rgba(17, 16, 14, 0.2);
    --mobile-panel-line-strong: rgba(17, 16, 14, 0.48);
  }

  body.is-map-active .mobile-sheet[data-snap="full"],
  body.is-map-active.is-index-mode .mobile-sheet[data-snap="full"] {
    top: 10px;
    right: 10px;
    bottom: 10px;
    left: auto;
    width: clamp(400px, 52vw, 440px);
    max-width: calc(100vw - 260px);
    height: auto;
    max-height: none;
    padding: 7px var(--mobile-panel-pad) 24px;
    border: 1px solid rgba(92, 76, 52, 0.36);
    border-radius: 14px;
    background: var(--paper-panel-background),
      linear-gradient(180deg, #fbf9f2, #f0eadc);
    background-color: #f8f5ec;
    background-size: var(--paper-grain-size), var(--paper-formation-size), auto;
    box-shadow: -2px 4px 12px rgba(61, 47, 28, 0.1), 0 1px 0 rgba(255, 255, 255, 0.7) inset;
    contain: layout style paint;
  }

  body.is-map-active .mobile-sheet[data-snap="full"] > .mobile-sheet-handle::after {
    width: calc(100% + (var(--mobile-panel-pad) * 2));
    background: var(--mobile-panel-paper);
  }

  body.is-map-active .mobile-sheet[data-snap="full"] > .mobile-sheet-head {
    top: 24px;
    background: linear-gradient(180deg, #faf8f1 0%, rgba(248, 245, 236, 0.99) 100%);
    background-size: auto;
    box-shadow: 0 8px 14px rgba(17, 16, 14, 0.07);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .mobile-sheet .mobile-sheet-head h3,
  .mobile-sheet .mobile-sheet-head h3.is-ekimeihyo { font-size: 1.2rem; }
  .mobile-sheet .mobile-sheet-head #mobileStatusText,
  .mobile-sheet .mobile-sheet-head .mobile-collapsed-summary {
    font-size: 0.72rem;
    line-height: 1.28;
  }

  .mobile-sheet :is(.mobile-collapsed-mode-control, .mobile-mode-control) .mode-button {
    grid-template-columns: 24px minmax(0, 1fr);
    gap: 8px;
    padding-inline: 10px;
  }
  .mobile-sheet .mobile-mode-copy strong { font-size: 0.72rem; }
  .mobile-sheet .mobile-mode-copy em { font-size: 0.6875rem; }
  .mobile-sheet p,
  .mobile-sheet .empty-data-note,
  .mobile-sheet .route-method-note,
  .mobile-sheet .commute-fit-method span{
    font-size: 0.8rem;
    line-height: 1.48;
  }
  .mobile-sheet :is(.detail-section-label, .life-access-category,
    .station-index-selection span, .station-index-selection small,
    .station-index-ledger-meta, .station-index-row-head, .station-index-row-rank,
    .station-index-chart figcaption span, .station-index-chart figcaption small) {
    font-size: 0.62rem;
    line-height: 1.25;
  }
  .mobile-sheet :is(.life-access-row strong, .linked-row strong, .line-rank strong,
    .route-sketch-chip strong, .route-alternative strong,
    .station-index-row-station strong) { font-size: 0.79rem; line-height: 1.25; }
  .mobile-sheet :is(.mobile-primary-card, .mobile-reach-details, .mobile-route-card,
    .mobile-inspector, .mobile-search-form, .mobile-adjust-map,
    .station-index-mobile-card) {
    background-color: rgba(255, 253, 247, 0.86);
  }
  body.is-reach-mode .mobile-sheet[data-snap="full"] .mobile-score-card .network-count b { font-size: 3.15rem; }
  .station-index-workspace.is-mobile .station-index-chart-stage,
  .station-index-workspace.is-mobile .station-index-chart canvas { min-height: 210px; }
}

@media (max-width: 980px) {
  .mobile-sheet[data-snap="collapsed"] > .mobile-collapsed-control-bar { padding: 0; }
  body.is-map-active #mobileAdjustMap:not(:has(.mobile-settings-disclosure[open])) {
    border: 0;
    background: none;
    box-shadow: none;
  }
  body.is-map-active #mobileAdjustMap .mobile-settings-disclosure:not([open]) {
    width: 44px;
    height: 44px;
    min-height: 44px;
    margin: 0;
  }
  body.is-map-active #mobileAdjustMap .mobile-settings-disclosure:not([open]) > summary::after { margin: 0; }
}

@media (max-width: 980px) and (max-height: 500px) and (orientation: landscape) {
  body.is-reach-mode .mobile-sheet[data-snap="collapsed"] > .mobile-collapsed-control-bar {
    grid-template-columns: minmax(0, 1fr) 92px 44px;
  }
  body.is-reach-mode .mobile-sheet[data-snap="collapsed"] :is(
    .mobile-collapsed-mode-control,
    .mobile-collapsed-poster-button
  ) {
    display: grid;
  }
}

@media (max-width: 359px) {
  html body.is-map-active.is-reach-mode.has-origin #mobileSheet.mobile-sheet[data-snap="full"] > .mobile-sheet-context-rail {
    position: relative;
    top: auto;
    grid-template-columns: minmax(0, 1fr);
    gap: 7px;
    margin-inline: 0;
    padding: 0 0 9px;
    box-shadow: none;
  }

  html body.is-map-active.is-reach-mode.has-origin #mobileSheet.mobile-sheet[data-snap="full"] .mobile-sheet-context-rail > :is(
    .mobile-search-form,
    .mobile-sheet-time-control,
    .mobile-spatial-view-guide
  ) {
    width: 100%;
    min-width: 0;
  }

  html body.is-map-active.is-reach-mode.has-origin #mobileSheet.mobile-sheet[data-snap="full"] .mobile-sheet-time-control {
    display: block;
    grid-template-columns: minmax(0, 1fr);
    min-height: 52px;
    padding: 7px 9px;
  }

  html body.is-map-active.is-reach-mode.has-origin #mobileSheet.mobile-sheet[data-snap="full"] .mobile-sheet-time-control .mobile-time-step-button {
    display: none;
  }

  #mobileSheet[data-snap="full"] #mobileSheetTimeControl.mobile-sheet-time-control > :is(#mobileSheetTimeDown, #mobileSheetTimeUp) {
    display: none;
  }

  html body.is-map-active.is-reach-mode.has-origin #mobileSheet.mobile-sheet[data-snap="full"] .mobile-sheet-time-control .mobile-time-range-label {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 5px 8px;
    width: 100%;
    min-width: 0;
  }

  html body.is-map-active.is-reach-mode.has-origin #mobileSheet.mobile-sheet[data-snap="full"] .mobile-sheet-time-control .mobile-time-range-label > span {
    font-size: 0.6875rem;
    line-height: 1.15;
    white-space: nowrap;
  }

  html body.is-map-active.is-reach-mode.has-origin #mobileSheet.mobile-sheet[data-snap="full"] .mobile-sheet-time-control .mobile-time-range-label input {
    grid-column: 1 / -1;
    width: 100%;
    min-width: 0;
  }

  body.is-comparison-surface .mobile-sheet[data-snap="full"] #mobilePrimarySummary .mobile-score-card > strong {
    font-size: 1.12rem;
    text-wrap: pretty;
  }

  body.is-comparison-surface .mobile-sheet[data-snap="full"] #mobilePrimarySummary .mobile-route-ledger {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.is-comparison-surface .mobile-sheet[data-snap="full"] #mobilePrimarySummary .mobile-route-ledger > span:nth-child(3) {
    grid-column: 1 / -1;
    border-top: 1px solid rgba(17, 16, 14, 0.12);
    border-left: 0;
  }
}

/* Mobile panel owns its primary touch targets; keep this later than dossier chrome. */
@media (max-width: 980px) {
  html body.is-map-active #mobileSheet .mobile-sheet-context-rail #mobileLocateButton.mobile-locate-button {
    height: 48px;
    min-height: 48px;
  }

}

@media (max-width: 820px) {
  html body.is-map-active #mobileSheet.mobile-sheet[data-snap="full"] > .mobile-sheet-context-rail {
    grid-template-columns: minmax(0, 1fr) minmax(128px, .75fr);
  }

  html body.is-map-active #mobileSheet.mobile-sheet[data-snap="full"] > .mobile-sheet-context-rail > .mobile-search-form {
    grid-column: 1 / -1;
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
    min-width: 0;
  }

  html body.is-map-active #mobileSheet .mobile-sheet-context-rail .mobile-search-row {
    grid-template-columns: minmax(0, 1fr) 44px;
    width: 100%;
    min-width: 0;
  }

  html body.is-map-active #mobileSheet .mobile-sheet-context-rail #mobileStationSearch {
    width: 100%;
    min-width: 0;
  }
}

@media (max-width: 760px), (max-width: 980px) and (orientation: portrait), (max-width: 980px) and (max-height: 599px) {
  body.is-map-active.has-network-overview #mobileSheet.mobile-sheet[data-snap="full"] > .mobile-sheet-context-rail {
    position: relative;
    top: auto;
    order: 4;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    margin: 12px 0 0;
    padding: 14px 0 4px;
    border: 0;
    border-top: 1px solid rgba(17, 16, 14, 0.18);
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    animation: none;
  }

  body.is-map-active.has-network-overview #mobileSheet.mobile-sheet[data-snap="full"] > .mobile-sheet-context-rail > :is(
    #mobileSheetTimeControl,
    .mobile-spatial-view-guide
  ) {
    display: none;
  }

  body.is-map-active.has-network-overview #mobileSheet.mobile-sheet[data-snap="full"] > .mobile-sheet-context-rail > #mobileSearchForm.mobile-search-form {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 7px;
    width: 100%;
    min-width: 0;
    padding: 11px;
    border: 1px solid rgba(17, 16, 14, 0.2);
    border-radius: 8px;
    background:
      linear-gradient(90deg, rgba(17, 16, 14, 0.018) 1px, transparent 1px),
      rgba(255, 253, 247, 0.78);
    background-size: 18px 18px, auto;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.72),
      0 8px 20px rgba(35, 29, 20, 0.06);
  }

  body.is-map-active.has-network-overview #mobileSheet.mobile-sheet[data-snap="full"] #mobileSearchForm.mobile-search-form > label {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip: auto;
    color: rgba(17, 16, 14, 0.62);
    font: 760 0.6875rem/1 var(--font-mono);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    pointer-events: none;
  }

  body.is-map-active.has-network-overview #mobileSheet.mobile-sheet[data-snap="full"] #mobileSearchForm .mobile-search-row {
    grid-template-columns: minmax(0, 1fr) 48px;
    gap: 7px;
    width: 100%;
    min-width: 0;
  }

  body.is-map-active.has-network-overview #mobileSheet.mobile-sheet[data-snap="full"] #mobileSearchForm #mobileStationSearch,
  body.is-map-active.has-network-overview #mobileSheet.mobile-sheet[data-snap="full"] #mobileSearchForm #mobileLocateButton {
    height: 52px;
    min-height: 52px;
  }

  body.is-map-active.has-network-overview #mobileSheet.mobile-sheet[data-snap="full"] #mobileSearchForm #mobileStationSearch {
    padding: 0 14px;
  }

  body.is-map-active.has-network-overview #mobileSheet.mobile-sheet[data-snap="full"] #mobileSearchForm #mobileLocateButton {
    width: 48px;
    min-width: 48px;
  }
}

@media (max-width: 980px) and (prefers-reduced-motion: reduce) {
  .mobile-mode-selection-rail,
  .mobile-sheet,
  .mobile-sheet * {
    scroll-behavior: auto;
    transition-duration: 0.01ms;
  }
}

@media (max-width: 980px) {
  body.is-map-active #mobileSheet[data-snap="full"] .mobile-mode-control .mode-button {
    grid-template-columns: 22px minmax(0, 1fr);
    gap: 5px;
    padding: 7px 8px;
  }

  body.is-map-active #mobileSheet[data-snap="full"] .mobile-mode-copy {
    min-width: 0;
  }

  body.is-map-active #mobileSheet[data-snap="full"] .mobile-spatial-view-guide .spatial-view-button { grid-template-columns: minmax(0, 1fr); }
  body.is-map-active #mobileSheet[data-snap="full"] .mobile-spatial-view-guide .spatial-view-copy { width: 100%; justify-items: center; }

}

/* Mobile-first map chrome: the canvas is the product, so persistent controls
   stay compact and redundant browser-like actions yield to native gestures. */
@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 {
    min-height: 44px;
    height: 44px;
    padding: 2px;
    border-radius: 9px;
  }

  html body.is-map-active #mobileMapSearchForm #mobileMapStationSearch {
    height: 40px;
    min-height: 40px;
    padding-inline: 10px 28px;
    border-radius: 7px;
    font-size: 16px;
  }

  html body.is-map-active #mobileMapSearchForm #mobileMapLocateButton {
    display: none;
  }

  html body.is-map-active #mobileAdjustMap,
  html body.is-map-active.has-origin #mobileAdjustMap,
  html body.is-map-active.is-reach-mode.has-origin:not(.is-time-rings-view) #mobileAdjustMap,
  html body.is-time-rings-view.is-map-active.is-reach-mode.has-origin #mobileAdjustMap {
    top: calc(env(safe-area-inset-top) + 8px);
    right: calc(env(safe-area-inset-right) + 10px);
    width: 44px;
    min-height: 44px;
    height: 44px;
  }

  html body.is-map-active .map-frame .map-corner-actions,
  html body.is-time-rings-view.is-map-active .map-frame .map-corner-actions {
    display: none;
  }

  html body.is-map-active.is-reach-mode .mobile-map-control-rail,
  html body.is-time-rings-view.is-map-active.is-reach-mode .mobile-map-control-rail {
    top: calc(env(safe-area-inset-top) + 60px);
    left: calc(env(safe-area-inset-left) + 10px);
    width: min(154px, calc(100% - 132px));
    height: 44px;
  }

  html body.is-map-active.is-reach-mode .mobile-map-control-rail .mobile-map-spatial-view-guide,
  html body.is-map-active.is-reach-mode .mobile-map-control-rail .mobile-map-spatial-view-toggle {
    height: 44px;
    min-height: 44px;
  }

  html body.is-map-active.is-reach-mode .mobile-map-control-rail .mobile-map-spatial-view-toggle {
    min-height: 44px;
    padding: 0;
  }

  html body.is-map-active.is-reach-mode .mobile-map-control-rail .spatial-view-button {
    height: 44px;
    min-height: 44px;
    padding-inline: 5px;
  }

  html body.is-map-active #mobileSheet.mobile-sheet[data-snap="full"] > .mobile-sheet-handle {
    height: 44px;
    min-height: 44px;
    touch-action: none;
    cursor: grab;
  }

  html body.is-map-active #mobileSheet.mobile-sheet[data-snap="full"] > .mobile-sheet-handle:active {
    cursor: grabbing;
  }

  html body.is-map-active #mobileSheet.mobile-sheet[data-snap="full"] > .mobile-sheet-head {
    top: var(--mobile-expanded-handle-height);
    touch-action: none;
  }

  html body.is-map-active .mobile-sheet .mobile-sheet-eyebrow,
  html body.is-map-active .mobile-sheet .mobile-mode-copy em,
  html body.is-map-active.is-reach-mode .mobile-map-control-rail .spatial-view-button {
    font-size: 0.6875rem;
  }
}

  /* Taller landscape tablets use compact desktop proportions. */
@media (min-width: 761px) and (max-width: 980px) and (min-height: 600px) and (orientation: landscape) {
  body.is-index-mode .station-index-panel.is-plate-layout,
  body.is-index-mode .station-index-panel.is-plate-layout:has(.station-index-workspace[data-index-metric="rent"]) {
    right: 10px;
    left: clamp(88px, 14vw, 132px);
  }

  body.is-index-mode .station-index-panel.is-plate-layout .station-index-panel-inner.station-index-workspace.is-plate,
  body.is-index-mode .station-index-panel.is-plate-layout .station-index-panel-inner.station-index-workspace.is-story,
  body.is-index-mode .station-index-panel.is-plate-layout .station-index-workspace.is-plate[data-index-metric="rent"] {
    width: min(440px, 52vw);
  }

  body.is-index-mode .station-index-panel.is-plate-layout > .station-index-map-console {
    width: min(260px, calc(100% - min(440px, 52vw) - 18px));
  }

  body.is-index-mode .station-index-panel.is-plate-layout > .station-index-story-map-legend {
    width: min(300px, calc(100% - min(440px, 52vw) - 18px));
    max-width: 300px;
  }
}

/* Mobile reader design system. The map keeps its deliberately compact chrome;
   Task and Details use a calmer, legible paper hierarchy. */
@media (max-width: 980px) {
  html body.is-map-active #mobileSheet.mobile-sheet {
    --mobile-panel-radius: var(--mobile-radius-sheet, 18px);
    --mobile-panel-control-radius: var(--mobile-radius-control, 10px);
    --panel-control-radius: var(--mobile-radius-control, 10px);
    border-color: var(--mobile-edge-floating, rgba(17, 16, 14, 0.18));
    border-radius: var(--mobile-radius-sheet, 18px) var(--mobile-radius-sheet, 18px) 0 0;
    background: var(--mobile-paper-floating, rgba(248, 245, 236, 0.985));
    box-shadow: var(--mobile-shadow-contact, 0 -4px 14px rgba(17, 16, 14, 0.1));
  }

  html body.is-map-active #mobileSheet.mobile-sheet:is([data-snap="half"], [data-snap="full"])
    > .mobile-sheet-handle {
    border-radius: var(--mobile-radius-sheet, 18px) var(--mobile-radius-sheet, 18px) 0 0;
    background: var(--mobile-paper-floating-strong, #fffdf7);
    box-shadow: 0 1px 0 var(--mobile-edge-floating, rgba(17, 16, 14, 0.14));
  }

  html body.is-map-active #mobileSheet.mobile-sheet:is([data-snap="half"], [data-snap="full"]) :is(
    .mobile-primary-card,
    .mobile-route-card,
    .mobile-inspector,
    .mobile-reach-details,
    .station-index-mobile-card
  ) {
    border-color: var(--mobile-edge-floating, rgba(17, 16, 14, 0.16));
    border-radius: var(--mobile-radius-floating, 14px);
    background: var(--mobile-paper-floating-strong, rgba(255, 253, 247, 0.96));
    box-shadow: var(--mobile-shadow-contact, 0 2px 8px rgba(17, 16, 14, 0.08));
  }

  html body.is-map-active #mobileSheet.mobile-sheet:is([data-snap="half"], [data-snap="full"])
    > .mobile-mode-control {
    gap: 4px;
    padding: 4px;
    border: 1px solid var(--mobile-edge-floating, rgba(17, 16, 14, 0.12));
    border-radius: var(--mobile-radius-floating, 14px);
    background: color-mix(in srgb, var(--mobile-paper-floating, #f8f5ec) 84%, var(--ink) 4%);
    box-shadow: none;
  }

  html[data-material-prototype="relief"] body.is-map-active .workspace
    #mobileSheet.mobile-sheet:is([data-snap="half"], [data-snap="full"])
    > .mobile-mode-control .mode-button {
    grid-template-columns: minmax(0, 1fr);
    min-width: 0;
    min-height: 44px;
    gap: 0;
    padding: 7px 6px;
    border: 1px solid transparent;
    border-radius: var(--mobile-radius-control, 10px);
    background: transparent;
    box-shadow: none;
    font-size: var(--mobile-type-control, 13px);
    text-align: center;
  }

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

  html[data-material-prototype="relief"] body.is-map-active .workspace
    #mobileSheet.mobile-sheet:is([data-snap="half"], [data-snap="full"])
    > .mobile-mode-control .mobile-mode-copy {
    display: grid;
    grid-column: 1;
    min-width: 0;
    place-items: center;
  }

  html[data-material-prototype="relief"] body.is-map-active .workspace
    #mobileSheet.mobile-sheet:is([data-snap="half"], [data-snap="full"])
    > .mobile-mode-control .mobile-mode-copy strong {
    overflow: visible;
    font: 720 var(--mobile-type-control, 13px)/1.18 var(--font-main);
    letter-spacing: 0;
    text-align: center;
    text-overflow: clip;
    text-transform: none;
    white-space: normal;
  }

  html[data-material-prototype="relief"] body.is-map-active .workspace
    #mobileSheet.mobile-sheet:is([data-snap="half"], [data-snap="full"])
    > .mobile-mode-control .mode-button.is-active {
    border-color: var(--ink);
    background: var(--ink);
    box-shadow: var(--mobile-shadow-selected, 0 2px 5px rgba(17, 16, 14, 0.16));
    color: #fffdf7;
  }

  html body.is-map-active #mobileSheet.mobile-sheet:is([data-snap="half"], [data-snap="full"]) :is(
    .mobile-primary-card,
    .mobile-route-card,
    .station-index-mobile-card,
    .mobile-inspector,
    .mobile-reach-details
  ) p {
    font-size: var(--mobile-type-body, 14px);
    line-height: 1.45;
  }

  html body.is-map-active #mobileSheet.mobile-sheet:is([data-snap="half"], [data-snap="full"]) :is(
    button,
    input,
    select,
    summary
  ) {
    font-size: max(var(--mobile-type-control, 13px), 13px);
  }

  html body.is-map-active #mobileSheet.mobile-sheet:is([data-snap="half"], [data-snap="full"]) :is(
    small,
    figcaption,
    .detail-section-label,
    .station-index-ledger-meta
  ) {
    font-size: max(var(--mobile-type-caption, 12px), 12px);
  }
}