/* Public open-spots map — page layout (docs/design/map-redesign). Phone first; the desktop
   split view (440px panel + map) from 1024px. Components come from the design system
   (/ds/tennis-lady: tokens.css, bundle.css, map.css); this file only places them. */

html, body { margin: 0; background: var(--surface); }
.mapp { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
.mapp a:not(.tl-btn) { color: inherit; }
.mapp [hidden] { display: none !important; }
.mapp :focus-visible { outline: var(--ring-width) solid var(--focus); outline-offset: 3px; }

/* App bar */
.mapp__bar { position: sticky; top: 0; z-index: 6; gap: var(--space-3); }
.mapp__logo { display: flex; align-items: center; flex: none; border-radius: var(--radius-sm); }
.mapp__logo picture { display: contents; }
.mapp__logo img { display: block; height: 22px; width: auto; }
.mapp__tagline { white-space: nowrap; }
.mapp__bar-right { display: flex; align-items: center; gap: var(--space-6); font-size: 14px; color: var(--ink-muted); }
.mapp__home { display: none; color: var(--court) !important; font-weight: 600; text-underline-offset: 3px; }
@media (max-width: 359px) { .mapp__logo img { height: 18px; } .mapp__bar-right { font-size: 13px; } }

.mapp__layout { flex: 1; display: flex; flex-direction: column; }

/* Intro */
.mapp__intro { padding: var(--space-5) var(--space-4) var(--space-3); display: flex; flex-direction: column; gap: var(--space-2); align-items: flex-start; }
.mapp__sticker { margin-bottom: var(--space-1); }
.mapp__title { font-size: 36px; line-height: 38px; }
.mapp__lede { margin: 0; color: var(--ink); max-width: 36rem; }
/* Referral prompt (Allie, 2026-10-29): a quiet brand link where the "Updated" date was,
   above the fold; never a third button. Text lines up with the title. */
.mapp__intro .mapp__refer { margin: 0 0 0 calc(-1 * var(--space-3)); }
.mapp--embed .mapp__intro { padding-top: var(--space-2); padding-bottom: 0; }

/* Chips + summary */
.mapp__controls { padding: 0 var(--space-4) var(--space-3); display: flex; flex-direction: column; gap: var(--space-3); }
.mapp__chips { margin: 0 calc(-1 * var(--space-4)); padding: 2px var(--space-4); }
.mapp__chips .tl-chip { display: inline-flex; align-items: center; text-decoration: none; }
.mapp__chips .tl-chip[aria-current="true"] { background: var(--ink); color: var(--surface); border-color: var(--ink); }
/* A tick on chosen levels: chips toggle and add up (#82) */
.mapp__chips .tl-chip .tl-ico { width: 16px; height: 16px; margin: 0 6px 0 -4px; stroke-width: 2.5; }
.mapp__summary { margin: 0; font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.mapp__summary strong { color: var(--ink); }
.mapp__early { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-3) var(--space-4); background: var(--optic-tint); border-radius: var(--radius-md); color: var(--ink); font-size: 14px; line-height: 20px; }
.mapp__early .tl-ico { color: var(--ink); margin-top: 2px; }
.mapp__early p { margin: 0; }
.mapp__early-title { font-weight: 700; font-size: 16px; line-height: 24px; }

/* Map */
.mapp__mapwrap { position: relative; height: 52vh; min-height: 320px; max-height: 560px; }
.mapp__map { position: absolute; inset: 0; border-radius: 0; border-left: 0; border-right: 0; }
.mapp__mapwrap--peek { height: 200px; min-height: 0; margin: var(--space-2) var(--space-4) var(--space-4); }
.mapp__mapwrap--peek .mapp__map { border: 1px solid var(--line); border-radius: var(--radius-lg); pointer-events: none; }
.mapp__peek { position: absolute; inset: 0; pointer-events: none; }
.mapp__peek-note { position: absolute; }
.mapp__peek-btn { position: absolute; right: var(--space-3); bottom: var(--space-3); pointer-events: auto; background: var(--surface-raised); }

/* MapLibre chrome in the system's clothes */
.mapp__map .maplibregl-canvas { outline: none; }
.mapp__map .maplibregl-ctrl-attrib { background: var(--surface-raised); color: var(--ink-muted); border-radius: var(--radius-pill); font: 500 11px/16px var(--font-sans); }
.mapp__map .maplibregl-ctrl-attrib a { color: var(--ink-muted); }
.mapp__map .maplibregl-ctrl-attrib-button { filter: none; }
[data-theme="dark"] .mapp__map .maplibregl-ctrl-attrib-button { filter: invert(1); }
.mapp__map .maplibregl-cooperative-gesture-screen { background: var(--map-scrim); color: #ffffff; font: 600 16px/24px var(--font-sans); padding: var(--space-6); }
.mapp__map .tl-map__controls { top: var(--space-3); right: var(--space-3); }
.mapp__map .tl-map__ctrl .tl-ico { color: var(--ink); }
/* MapLibre positions markers with an inline transform; map.css keeps them absolute. */
.mapp__map .tl-area-label[hidden], .mapp__map .tl-venue[hidden] { display: none; }

/* List */
.mapp__list { padding: var(--space-4) var(--space-4) var(--space-6); display: flex; flex-direction: column; gap: var(--space-3); }
.mapp__list-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.mapp__list-head h2 { margin: 0; }
.mapp__sort { white-space: nowrap; flex: none; }
.mapp__sort .tl-ico { width: 16px; height: 16px; }
.mapp__sort-note { margin: 0; font-size: 14px; color: var(--ink-muted); }
.mapp__ask { margin: 0; font: 700 28px/32px var(--font-display); }
.mapp__helper { margin: 0; color: var(--ink-muted); }
.mapp .tl-level { text-decoration: none; }
.mapp .tl-arearow__status, .mapp .tl-level__count { color: var(--ink); }
.mapp__empty { padding: var(--space-4) 0; color: var(--ink-muted); }
.mapp .tl-level__rating strong { color: var(--ink); font-weight: 700; }
.mapp__refer { display: inline-flex; align-items: center; gap: var(--space-2); font-weight: 600; }
.mapp__refer .tl-ico { width: 16px; height: 16px; flex: none; transition: transform .15s ease; }
.mapp__refer:hover .tl-ico:last-child { transform: translate(2px, -2px); }
.mapp__sheet .mapp__refer { margin: 0; justify-content: center; }
.mapp__fine { margin: var(--space-2) 0 0; font-size: 12px; line-height: 16px; color: var(--ink-muted); }
.mapp__fine a { text-underline-offset: 3px; }
.mapp__fine .tl-ico { width: 12px; height: 12px; vertical-align: -1px; }

#sheet-title:focus { outline: none; }
.mapp__allnote { pointer-events: none; }

/* Sheet (phone: fixed bottom sheet from map.css; desktop: docked in the panel) */
.mapp__sheet[hidden] { display: none; }
.mapp__sheet .tl-sheet__meta .tl-ico { color: var(--ink-muted); }
.mapp__back { align-self: flex-start; margin-left: -12px; color: var(--ink) !important; text-decoration: none !important; }
.mapp__price { display: flex; align-items: baseline; gap: var(--space-2); margin: 0; }
.mapp__price b { font: 800 28px/28px var(--font-display); font-variant-numeric: tabular-nums; }
.mapp__price span { font-size: 14px; color: var(--ink-muted); }
.mapp__divs { list-style: none; margin: 0; padding: 0; }
.mapp__divs li { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) 0; border-top: 1px solid var(--line); }
.mapp__divs li:last-child { border-bottom: 1px solid var(--line); }
.mapp__divs b { display: block; }
.mapp__divs small { font-size: 14px; color: var(--ink-muted); display: flex; align-items: center; gap: 4px; }
.mapp__divs small .tl-ico { width: 14px; height: 14px; }
.mapp__sheet p { margin: 0; }
.mapp__also { font-size: 14px; line-height: 20px; color: var(--ink-muted); }

/* Action bar */
.mapp__actions { margin-top: auto; }

/* Phone: an app shell. The document never scrolls; the panel under the app bar does. iOS
   Safari and Chrome shrink their toolbars only when the document scrolls, and while they
   animate, anything pinned to the bottom (the button bar, the card) is left short of the
   screen's edge with the list showing through. No document scroll, no toolbar change,
   no gap. Desktop is a fixed-height shell already. */
html:has(.mapp), html:has(.mapp) body { height: 100%; overflow: hidden; overscroll-behavior: none; }
.mapp { height: 100vh; height: 100dvh; min-height: 0; overflow: hidden; }
.mapp__bar { position: static; flex: none; }
.mapp__layout { min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.mapp__sheet { max-height: 80vh; max-height: 80dvh; }
.mapp__actions .tl-btn { flex: 1 1 0; }
/* A flex column that scrolls (the phone panel; the desktop list) must not squeeze its
   children to fit: a squeezed box with overflow:hidden (the level picker, the map peek)
   clips its rows instead of letting the column scroll to them (#83). */
.mapp__layout > *, .mapp__list > * { flex-shrink: 0; }

/* Embed: no app bar, no intro */
.mapp--embed .mapp__controls { padding-top: var(--space-3); }

@media (prefers-reduced-motion: reduce) { .mapp * { transition: none !important; } }

/* Desktop: 440px panel + full-height map */
@media (min-width: 1024px) {
  .mapp { height: 100vh; height: 100dvh; }
  .mapp__bar { position: static; height: 64px; padding: 0 var(--space-8); flex: none; }
  .mapp__home { display: inline; }
  .mapp__logo img { height: 28px; }
  .mapp__layout { min-height: 0; display: grid; grid-template-columns: 440px minmax(0, 1fr);
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    grid-template-areas: "intro map" "controls map" "list map" "actions map"; }
  .mapp__intro { grid-area: intro; padding: var(--space-6) var(--space-8) var(--space-3); }
  .mapp__title { font-size: 40px; line-height: 42px; }
  .mapp__intro .mapp__refer { min-height: 36px; }
  .mapp[data-mode="level"] .mapp__lede, .mapp[data-mode="all"] .mapp__lede { display: none; }
  .mapp__controls { grid-area: controls; padding: 0 var(--space-8) var(--space-3); }
  .mapp__chips { margin: 0; padding: 2px; flex-wrap: wrap; overflow: visible; }
  .mapp__mapwrap, .mapp__mapwrap--peek { grid-area: map; height: auto; max-height: none; min-height: 0; margin: 0; }
  .mapp__mapwrap--peek .mapp__map, .mapp__map { border: 0; border-left: 1px solid var(--line); border-radius: 0; pointer-events: auto; }
  .mapp__list { grid-area: list; overflow: auto; padding: var(--space-3) var(--space-8) var(--space-6); }
  /* Context, not a stack (design: Desktop map, area expanded). Browsing: intro, level chips,
     list, actions. A circle or tennis center open: the panel becomes that card, led by its
     "All N areas" back link; nothing else competes. If a short window can't hold it, the
     panel scrolls like any sidebar, never a box inside it. */
  .mapp--detail .mapp__intro, .mapp--detail .mapp__controls { display: none; }
  .mapp__sheet { grid-column: 1; grid-row: 1 / -1; align-self: stretch; position: static; max-height: none; min-height: 0; overflow-y: auto; margin: 0; border: 0; border-radius: 0; box-shadow: none; background: var(--surface); padding: var(--space-4) var(--space-8); }
  .mapp--detail .mapp__list { display: none; }
  /* one primary per screen: the docked sheet carries its own actions */
  .mapp--detail .mapp__actions { display: none; }
  .mapp__sheet .tl-sheet__grab { display: none; }
  .mapp__actions { grid-area: actions; position: static; padding: var(--space-4) var(--space-8); }
  .mapp__layout { overflow: hidden; }
  .mapp__actions .tl-btn { flex: 0 1 auto; }
  /* All levels on desktop: the chips above already pick a level and the map beside it is
     the overview, so the address search leads the list and its results sit above the level
     list. The picker keeps its question first everywhere, as do phones (the all-levels map
     is too busy there). */
  .mapp[data-mode="all"] .mapp__pick { order: 1; }
  .mapp[data-mode="all"] .mapp__list > .mapp__fine { order: 2; }
  .mapp[data-mode="all"] .mapp__pick + .mapp__near { margin: 0 0 var(--space-3); }
}

/* Near an address and near me (Allie, 2026-10-28; every mode, #82) */
.mapp__pick, .mapp__near { display: flex; flex-direction: column; gap: var(--space-3); }
.mapp__pick > *, .mapp__near > * { flex-shrink: 0; }
.mapp__pick + .mapp__near { margin-top: var(--space-3); }
.mapp__find { display: grid; gap: var(--space-1); margin: 0; }
.mapp__sort-note { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--space-2); }
.mapp__clear { padding: 0; border: 0; background: none; font: inherit; font-weight: 600; color: var(--brand); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.mapp__rowlvl { color: var(--ink); font-weight: 600; }

/* Promoted areas (#15): Allie's empty target areas, no team yet. Real circles are solid (room
   to join) or dashed (division full); promoted ones are dotted with almost no fill, in the
   same brand colour, on the map, the pill and the list glyph. Their words come with them. */
.tl-arearow__glyph--promoted { border-style: dotted; background: transparent; }
.mapp__pill--promoted { border-style: dotted; border-width: 2px; }
.mapp__promoted .tl-arearow__status { white-space: normal; max-width: 7.5em; }
.mapp__find-row { display: flex; gap: var(--space-2); }
.mapp__find-input { flex: 1; min-width: 0; font: inherit; font-size: 16px; padding: 8px 12px;
  border: 1px solid var(--ink-muted); border-radius: 999px; background: transparent; color: inherit; }
.mapp__dist { font-variant-numeric: tabular-nums; color: var(--ink-muted); }
.mapp__here { width: 18px; height: 18px; border-radius: 50%; background: var(--ink, #222);
  border: 3px solid #fff; box-shadow: 0 0 0 2px var(--ink, #222); }