/* Mason's phone map pattern: the layout half of phone-map.js, whose header states the contract. Loaded after the
   page's own styles. The attribute is repeated in the panel and stage selectors so the pattern outranks a page's own
   panel and stage rules (up to two classes) without !important. No colour literal: the sheet takes the page's colours. */
.phone-map-grip { display: none; }
.phone-map-chooser-lead { margin: 12px 0 4px; font-size: 13px; opacity: .8; }
.phone-map-chooser { margin: 0; padding: 0; list-style: none; }
.phone-map-chooser button { display: grid; gap: 4px; width: 100%; min-height: 48px; padding: 12px 0; border: 0; border-bottom: 1px solid color-mix(in srgb, currentColor 14%, transparent); background: none; color: inherit; font: inherit; font-size: 15px; font-weight: 600; text-align: left; cursor: pointer; }
.phone-map-chooser small { font-size: 13px; font-weight: 400; opacity: .75; }

/* Hover labels are for a mouse and the keyboard; a device that cannot hover never shows one. */
@media (hover: none) { [data-map-tooltip][data-map-tooltip] { display: none; } }

@media (max-width: 680px) {
  /* The map takes a fixed share of the screen and the list beside it sits under it in a bounded panel with a scroll of
     its own, never printed in full down the page (Ben, 16 Oct: "Lists don't need to show in their entirety."). Where
     the rail holds a [data-map-rail-scroll], that child scrolls inside the bounded rail. */
  [data-map-layout][data-map-layout][data-map-layout] { display: flex; flex-direction: column; height: auto; min-height: 0; }
  [data-map-stage][data-map-stage][data-map-stage] { flex: none; width: 100%; height: var(--map-phone-height, 60svh); min-height: 300px; aspect-ratio: auto; }
  [data-map-rail][data-map-rail][data-map-rail] { flex: none; max-height: var(--map-rail-phone-height, 56svh); overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
  [data-map-rail][data-map-rail][data-map-rail]:has([data-map-rail-scroll]) { display: flex; flex-direction: column; overflow: hidden; }
  [data-map-rail] [data-map-rail-scroll][data-map-rail-scroll] { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }

  /* What a tap opens: a bottom sheet over the lower part of the screen, the map above it. Its head stays in view with
     the close control; its body scrolls on its own and never scrolls the page. */
  [data-map-panel][data-map-panel][data-map-panel] {
    position: fixed; inset: auto 0 0 0; top: auto; width: auto; height: var(--map-sheet-height, 58dvh);
    max-height: calc(100dvh - var(--map-sheet-gap, 64px)); display: flex; flex-direction: column; overflow: hidden;
    border: 0; border-top: 1px solid color-mix(in srgb, currentColor 16%, transparent); border-radius: 14px 14px 0 0;
    box-shadow: 0 -8px 28px color-mix(in srgb, currentColor 22%, transparent); z-index: 60;
    transform: none; opacity: 1; pointer-events: auto; transition: height .2s ease;
  }
  [data-map-panel][data-map-panel][data-map-panel][hidden] { display: none; }
  [data-map-panel][data-map-panel][data-map-panel].map-sheet-full { height: calc(100dvh - var(--map-sheet-gap, 64px)); }
  [data-map-panel] [data-map-panel-head][data-map-panel-head] { position: relative; flex: none; padding-top: 24px; }
  [data-map-panel] [data-map-panel-scroll][data-map-panel-scroll] { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
  [data-map-panel] [data-map-close][data-map-close] { min-width: 44px; min-height: 44px; }
  .phone-map-grip { display: block; position: absolute; top: 0; left: 50%; width: 88px; height: 24px; margin-left: -44px; padding: 0; border: 0; background: none; color: inherit; cursor: pointer; }
  .phone-map-grip::before { content: ""; display: block; width: 40px; height: 4px; margin: 8px auto 0; border-radius: 2px; background: currentColor; opacity: .3; }
  /* The page holds still under an open sheet, so a swipe in the sheet never moves the map away. Only the root is held:
     a body that clips its overflow becomes its own scroller and the sticky page header would scroll away with it. */
  html.map-sheet-open { overflow: hidden; }
  /* The map's own controls ([data-map-controls]: filters, modes) step aside while a sheet is open, so the strip of map
     above it shows the place picked. They return when it closes. */
  html.map-sheet-open [data-map-controls] { display: none; }
}
@media (max-width: 680px) and (prefers-reduced-motion: reduce) { [data-map-panel][data-map-panel][data-map-panel] { transition: none; } }