/* Accessibility affordances: global focus rings and keyboard-visible states. */

:root {
  --button-focus-ring: color-mix(in srgb, var(--material-signal-red, #c9352b) 78%, var(--ink));
  --button-focus-paper: rgba(255, 253, 247, 0.92);
}

/* Panel utilities share one optical family: 16px artwork, a 20px coordinate
   system, and the same restrained line weight across ink and accent states. */
.panel-utility-icon {
  display: block;
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}

body:not(#a11y-focus-owner) :is(
  .search-row button,
  .utility-button,
  .mobile-search-row button,
  .text-button,
  .secondary-button,
  .share-button,
  .mobile-share-button,
  .dossier-close,
  .dossier-restore,
  .station-shortlist-remove,
  .icon-button,
  .layers-button,
  .mode-button,
  .spatial-view-button,
  .surface-story-button,
  .mobile-time-step-button,
  .route-sketch-chip,
  .route-sketch-reset,
  .route-alternative,
  .line-chip,
  .detail-action,
  .station-line-row,
  .linked-row,
  .line-rank,
  .hub-chip,
  .map-hub-chip,
  .map-hub-tray-toggle,
  .origin-line-evidence-row,
  .daily-life-anchor-toggle,
  .urban-texture-mini-stations button,
  .network-starter-card,
  .network-restore-note button,
  .network-atlas-details > summary,
  .network-source-disclosure > summary,
  .mobile-settings-disclosure > summary,
  .method-link
):focus-visible {
  outline: 2px solid var(--button-focus-ring);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px var(--button-focus-paper);
}

.search-row input:focus-visible,
.mobile-search-row input:focus-visible,
.route-form input:focus-visible,
.select-control:focus-within {
  outline: 2px solid var(--button-focus-ring);
  outline-offset: 2px;
}

body:not(#a11y-focus-owner) .mobile-sheet .mobile-sheet-handle:focus-visible {
  outline: none;
  box-shadow: none;
}

body:not(#a11y-focus-owner) .mobile-sheet .mobile-sheet-handle:focus-visible::before {
  box-shadow:
    0 0 0 2px var(--button-focus-ring),
    0 0 0 5px rgba(255, 253, 247, 0.84);
}

body.is-map-active.is-time-rings-view .map-surface-rail {
  display: none;
}

body.is-map-active.is-time-rings-view #legend.legend {
  width: min(244px, calc(100% - 28px));
  min-width: 0;
  max-width: 244px;
  gap: 5px;
  padding: 8px 10px;
  border-color: rgba(88, 65, 35, 0.34);
  background: rgba(247, 243, 233, 0.82);
  box-shadow: 0 7px 18px rgba(48, 42, 32, 0.09);
}

body.is-map-active.is-time-rings-view #legend.legend .legend-bands,
body.is-map-active.is-time-rings-view #legend.legend .legend-bands > div {
  min-height: 0;
  height: auto;
}

body.is-map-active.is-time-rings-view #legend.legend .legend-foot {
  font-size: 0.46rem;
  line-height: 1.2;
}

.method-modal-card:focus-visible {
  outline: 2px solid var(--button-focus-ring);
  outline-offset: 4px;
}

#mapCanvas:focus-visible {
  outline: 2px solid var(--button-focus-ring);
  outline-offset: -3px;
}
@media (max-width: 980px) {
  /* Final-cascade touch floors for actions whose feature themes deliberately
     use compact visual treatments. Existing 44/48px controls do not grow. */
  body.is-map-active :is(.share-button, .mobile-share-button),
  html[data-material-prototype="relief"] body.is-route-mode
    #mobileSheet .mobile-route-card .commute-fit-priority button,
  body.is-map-active #mobileSheet :is(
    .life-opportunity-row,
    .life-neighborhood-node,
    .life-opportunity-more > summary
  ) {
    box-sizing: border-box;
    min-height: 44px;
  }

  body.is-map-active :is(.share-button, .mobile-share-button) {
    min-width: 44px;
  }

  html body.is-map-active:is(.has-origin, .is-route-mode, .is-index-mode)
    #mobileSheet.mobile-sheet[data-snap="full"] > .mobile-sheet-head
    #mobileSheetShareButton.mobile-share-button:not([hidden]) {
    appearance: none;
    -webkit-appearance: none;
    box-sizing: border-box;
    width: auto;
    min-width: 76px;
    max-width: none;
    height: 44px;
    min-height: 44px;
    max-height: none;
    gap: 7px;
    padding: 0 11px;
    border-radius: var(--mobile-radius-control, 10px);
    background-color: var(--mobile-paper-floating-strong, #fffdf7);
    box-shadow: var(--mobile-shadow-contact, 0 2px 6px rgba(17, 16, 14, 0.1));
  }

  /* A compact wordmark makes the poster affordance self-explanatory while the
     44px height preserves the mobile touch floor. */
  html body.is-map-active:is(.has-origin, .is-route-mode, .is-index-mode)
    #mobileSheet.mobile-sheet:is([data-snap="half"], [data-snap="full"]) > .mobile-sheet-head
    #mobileSheetShareButton.mobile-share-button:not([hidden]) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: auto;
    min-width: 76px;
    max-width: none;
    height: 44px;
    min-height: 44px;
    max-height: 44px;
    gap: 7px;
    padding: 0 11px;
    overflow: hidden;
    color: var(--ink, #171510);
    font-size: var(--panel-label, 0.625rem);
    font-weight: 820;
    letter-spacing: 0.02em;
    line-height: 1;
  }

  html body.is-map-active #mobileSheet :is(#mobileSheetShareButton, #mobileShareButton).mobile-share-button {
    background-image: none;
  }

  html body.is-map-active #mobileSheet #mobileSheetShareButton.mobile-share-button::before {
    content: none;
    display: none;
  }

  html body.is-map-active #mobileSheet #mobileShareButton.mobile-share-button:not([hidden]) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 64px;
    min-height: 44px;
    height: 44px;
    gap: 6px;
    padding: 0 8px;
    color: rgba(146, 36, 28, 0.92);
    font-size: 0.625rem;
    font-weight: 820;
    letter-spacing: 0;
    line-height: 1;
  }

  @media (max-width: 359px) {
    html body.is-map-active #mobileSheet :is(#mobileSheetShareButton, #mobileShareButton).mobile-share-button:not([hidden]) {
      width: 44px;
      min-width: 44px;
      max-width: 44px;
      gap: 0;
      padding: 0;
    }

    html body.is-map-active #mobileSheet :is(#mobileSheetShareButton, #mobileShareButton)
      [data-share-button-label] {
      display: none;
    }
  }

  body.is-map-active #mobileSheet :is(
    .atlas-dossier-tabs.is-mobile > button,
    .line-chip,
    .station-line-row,
    .origin-line-evidence-row,
    button[data-linked-station-index],
    .line-chain-stop,
    #mobileInspector details > summary,
    #mobileReachDetails details > summary,
    .mobile-route-card details > summary,
    .station-index-mobile-card details > summary
  ) {
    box-sizing: border-box;
    min-width: 44px;
    min-height: 44px;
  }

  /* Station / Life changes panel content but remains subordinate to the
     product mode. Preserve full-size targets while using the quieter content
     rail instead of repeating the primary navigation's ink fill. */
  html body.is-map-active #mobileSheet .atlas-dossier-tabs.is-mobile > button {
    border-radius: var(--mobile-radius-control, 10px);
    font-size: var(--mobile-type-control, 13px);
  }

  html body.is-map-active #mobileSheet.mobile-sheet:is([data-snap="half"], [data-snap="full"])
    > .atlas-dossier-tabs.is-mobile:not([hidden]) > button {
    appearance: none;
    -webkit-appearance: none;
    border-radius: var(--mobile-radius-control, 10px);
  }

  html body.is-map-active #mobileSheet .atlas-dossier-tabs.is-mobile
    > button[aria-selected="true"] {
    border-color: transparent;
    background: transparent;
    box-shadow: inset 0 -2px 0 var(--accent);
    color: var(--ink);
  }

  html[data-material-prototype="relief"] body.is-map-active #mobileSheet
    .atlas-dossier-tabs.is-mobile > button[aria-selected="true"] {
    box-shadow: none;
  }

  body.is-map-active.is-time-rings-view.is-reach-mode.has-origin .mobile-map-time-instrument {
    grid-template-columns: minmax(0, 1fr);
  }

  body.is-map-active.is-time-rings-view.is-reach-mode.has-origin .mobile-map-time-instrument #mobileReachTimeControl {
    grid-column: 1;
    width: 100%;
  }

  body.is-map-active.is-time-rings-view:not(.is-mobile-sheet-expanded) #legend.legend {
    top: auto;
    right: calc(env(safe-area-inset-right) + 10px);
    bottom: calc(env(safe-area-inset-bottom) + var(--mobile-sheet-peek, 126px) + 10px);
    width: min(228px, calc(100vw - 20px));
    min-width: 0;
    max-width: 228px;
    gap: 0;
    padding: 6px 8px;
    opacity: 1;
    pointer-events: none;
    transform: none;
  }

  body.is-map-active.is-time-rings-view #legend.legend .legend-bands,
  body.is-map-active.is-time-rings-view #legend.legend .legend-bands > div,
  body.is-map-active.is-time-rings-view #legend.legend .time-ring-symbol-key {
    height: auto;
    min-height: 0;
  }

  body.is-map-active.is-time-rings-view #legend.legend .time-ring-symbol-key {
    gap: 8px;
    font-size: 0.55rem;
  }

  body.is-map-active.is-time-rings-view #legend.legend :is(
    .legend-kicker,
    .legend-foot,
    .time-ring-route-key,
    .time-ring-route-note
  ) {
    display: none;
  }

  body.is-map-active.is-time-rings-view.is-mobile-sheet-expanded #legend.legend {
    opacity: 0;
    pointer-events: none;
    transform: translateY(8px);
  }

  /* iOS Safari zooms the page when a focused field renders below 16px. Every
     typed field in the sheet stays at 16px so tapping one never shifts the
     viewport; feature owners keep their field heights, radii, and weights. The
     never-matching id lifts this above per-mode control sizing. */
  html body.is-map-active:not(#a11y-focus-owner) #mobileSheet.mobile-sheet :is(
    input:not([type="range"], [type="checkbox"], [type="radio"]),
    select,
    textarea
  ) {
    font-size: 16px;
  }
}

@media (min-width: 981px) {
  body.is-map-active .panel-header .map-origin-search .search-row input,
  body.is-map-active .panel-header .map-origin-search .text-button {
    align-self: stretch;
    box-sizing: border-box;
    min-height: 0;
  }

  body.is-map-active.is-time-rings-view .mobile-map-time-instrument {
    display: contents;
  }

  body.is-map-active.is-time-rings-view .map-corner-actions,
  body.is-map-active.is-time-rings-view .map-corner-actions #fullscreenButton.icon-button {
    width: 44px;
    height: 44px;
    min-height: 44px;
  }
}

@media (min-width: 1241px) {
  body.is-map-active .panel-header .map-origin-search .search-row input,
  body.is-map-active .panel-header .map-origin-search .text-button {
    height: 60px;
  }
}

@media (min-width: 981px) and (max-width: 1240px) {
  body.is-map-active .panel-header .map-origin-search .search-row input,
  body.is-map-active .panel-header .map-origin-search .text-button {
    height: 62px;
  }
}