/* tokens, base styles, and the pill/toast/popup/corner primitives
       live in ../../shared/map-shell.css (linked before this sheet);
       this file keeps the global app's own layout and machinery. every
       colour, size, radius and shadow here is a chrome token from that
       sheet (design audit 2026-09-03) */
    #map { position: fixed; inset: 0; }
    #dock {
      position: fixed; left: 50%; bottom: calc(var(--safe-bottom) + 64px); transform: translateX(-50%);
      display: flex; flex-direction: column; gap: 6px; z-index: 11;
      width: min(94dvw, 1120px);
      max-width: 94dvw;
    }
    .dock-panel {
      background: var(--chrome-face); border: 1px solid var(--chrome-line);
      border-radius: var(--r-md); padding: 6px 8px; backdrop-filter: blur(10px);
      box-shadow: var(--shadow-2);
      width: 100%;
    }
    .dock-row { display: flex; gap: 6px; flex-wrap: nowrap; align-items: center; min-height: 24px; width: 100%; }
    /* the search input stays at 18px: below 16px ios zooms the page on focus */
    .dock-row input {
      flex: 1 1 auto; min-width: 0; background: var(--chrome-wash); border: 1px solid transparent;
      color: var(--ink); padding: 14px 12px; border-radius: var(--r-md); font-size: var(--fs-chrome-xl);
    }
    .dock-row select {
      background: var(--chrome-wash);
      border: 1px solid var(--chrome-line);
      color: var(--ink);
      padding: 3px 8px;
      border-radius: var(--r-sm);
      font-size: var(--fs-chrome);
      min-width: 104px;
      flex-shrink: 0;
    }
    .dock-row input::placeholder { color: var(--muted); }
    .dock-row button {
      background: var(--chrome-wash); color: var(--ink); border: 1px solid var(--chrome-line);
      border-radius: var(--r-md); padding: 7px 14px; font-weight: 600; cursor: pointer;
      transition: transform 120ms ease, box-shadow 120ms ease; font-size: var(--fs-chrome-lg);
    }
    .dock-row button.secondary { background: var(--chrome-wash); color: var(--ink); }
    .dock-row button:hover { transform: translateY(-1px); box-shadow: var(--shadow-1); }
    .dock-cities-row { align-items: center; }
    .dock-cities {
      display: flex;
      gap: 6px;
      flex-wrap: nowrap;
      width: 100%;
      overflow-x: auto;
      overflow-y: hidden;
      padding-bottom: 4px;
      flex: 1;
      cursor: grab;
      touch-action: pan-x;
      overscroll-behavior-x: contain;
      scrollbar-width: thin;
      scrollbar-color: var(--chrome-line) transparent;
      -webkit-overflow-scrolling: touch;
    }
    .dock-cities.dragging { cursor: grabbing; }
    .dock-cities::-webkit-scrollbar {
      height: 8px;
      background: transparent;
    }
    .dock-cities::-webkit-scrollbar-thumb {
      background: var(--chrome-line);
      border-radius: var(--r-pill);
    }
    .dock-cities::-webkit-scrollbar-thumb:hover {
      background: var(--muted);
    }
    .dock-chip {
      background: var(--chrome-wash); color: var(--ink); border: 1px solid var(--chrome-line);
      padding: 3px 9px; border-radius: var(--r-pill); font-size: var(--fs-chrome); cursor: pointer;
      transition: transform 120ms ease, background 120ms ease;
    }
    .dock-chip:hover { transform: translateY(-1px); background: var(--chrome-line); }
    .dock-row + .dock-row { margin-top: 4px; }
    .streetview {
      width: 100%;
      height: min(260px, 34vh);
      min-width: 180px;
      min-height: 160px;
      max-width: 100%;
      max-height: 72vh;
      border-radius: var(--r-md);
      overflow: hidden;
      background: var(--chrome-face);
      color: var(--ink);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: var(--fs-chrome);
      margin-top: 8px;
      resize: both;
      position: relative;
      cursor: default;
      touch-action: none;
    }
    .streetview.expanded {
      width: min(960px, 92vw);
      height: min(630px, 72vh);
    }
    /* popup skin comes from the shared sheet; the drag affordance is ours.
       popups drag by their body on every pointer type, so the content opts
       out of browser pan/zoom; interactive children keep native gestures
       via the drag-start exclusions, and .streetview declares its own
       touch-action for the pano. the expand button wears the shared
       action-row recipe like its neighbours (one weight, one face) */
    .maplibregl-popup-content {
      cursor: grab;
      touch-action: none;
    }
    .maplibregl-popup-content a,
    .maplibregl-popup-content button,
    .maplibregl-popup-content select,
    .maplibregl-popup-content input,
    .maplibregl-popup-content textarea { touch-action: auto; }
    .maplibregl-popup-content.dragging {
      cursor: grabbing;
    }
    .popup-drag-toast {
      position: absolute;
      left: 50%;
      top: 10px;
      transform: translateX(-50%);
      padding: 6px 12px;
      border-radius: var(--r-pill);
      background: var(--chrome-face);
      border: 1px solid var(--chrome-line);
      color: var(--ink);
      font-size: var(--fs-chrome);
      opacity: 0;
      transition: opacity 200ms ease;
      pointer-events: none;
      z-index: 2;
    }
    .popup-drag-toast.visible {
      opacity: 1;
    }
    .popup-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      margin-bottom: 6px;
      cursor: grab;
      user-select: none;
    }
    .popup-header.dragging { cursor: grabbing; }
    .popup-title {
      font-weight: 600;
      color: var(--ink);
      font-size: var(--fs-chrome-lg);
    }
    .popup-drag-hint {
      font-size: var(--fs-chrome-xs);
      color: var(--muted);
      letter-spacing: 0.02em;
    }
    .sv-resize-handle {
      position: absolute;
      right: 6px;
      bottom: 6px;
      width: 18px;
      height: 18px;
      background: var(--chrome-face);
      border: 1px solid var(--chrome-line);
      border-radius: var(--r-sm);
      cursor: nwse-resize;
      z-index: 3;
      box-shadow: var(--shadow-1);
      display: grid;
      place-items: center;
      color: var(--ink);
      font-size: var(--fs-chrome-xs);
      line-height: 1;
      font-weight: 600;
      user-select: none;
      pointer-events: auto;
    }
    #corner-reset {
      --pill-shadow: none;
      width: 69px;
      height: 69px;
      padding: 0;
      text-decoration: none;
      cursor: pointer;
      /* the set-north badge seats on the right (jb 2026-07-17): below the
         top-right wordmark on desktop (the wordmark is ~35px tall at the
         chrome size); phones hide the wordmark, so the badge takes the
         corner itself (media rule below) */
      top: calc(var(--safe-top) + 42px);
      /* compass on demand: hidden until the map is rotated off north */
      display: none;
      align-items: center;
      justify-content: center;
    }
    #corner-reset.rotated { display: inline-flex; }
    #corner-reset svg {
      width: 50px;
      height: 50px;
      display: block;
    }
    /* the theme select rides in the wordmark pill, behind its own divider;
       the select hides on phones (map-shell.css), which fixes the theme to
       backdrop there (the credit fallback still guards it). select chrome
       comes from .shell-pill-select in the shared sheet. */
    #basemapSelect { max-width: 120px; }
    #tile-status {
      position: fixed;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      background: var(--chrome-face);
      border: 1px solid var(--chrome-line);
      color: var(--ink);
      border-radius: var(--r-pill);
      padding: 3px 8px;
      font-size: var(--fs-chrome-xs);
      opacity: 0;
      pointer-events: none;
      transition: opacity 200ms ease;
      z-index: 11;
    }
    #tile-status.visible { opacity: 0.5; }
    #onboard {
      position: fixed;
      left: var(--safe-left);
      top: calc(var(--safe-top) + 8px);
      z-index: 14;
      display: none;
      max-width: min(320px, 88vw);
      /* cap the card at the viewport and scroll inside it: long onboarding
         copy on small screens must never push the actions row (the close
         button) below a fixed, unscrollable card. vh first as the fallback,
         dvh where supported so the mobile url bar cannot hide the actions. */
      max-height: calc(100vh - var(--safe-top) - var(--safe-bottom) - 16px);
      max-height: calc(100dvh - var(--safe-top) - var(--safe-bottom) - 16px);
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      overscroll-behavior: contain;
      background: var(--chrome-face);
      border: 1px solid var(--chrome-line);
      border-radius: var(--r-lg);
      padding: 12px 14px;
      color: var(--ink);
      box-shadow: var(--shadow-2);
    }
    #onboard.visible { display: block; }
    #onboard h3 {
      margin: 0 0 6px;
      font-size: var(--fs-chrome-lg);
      font-weight: 600;
    }
    #onboard p {
      margin: 0 0 8px;
      font-size: var(--fs-chrome);
      color: var(--ink);
    }
    #onboard ul {
      margin: 0 0 10px;
      padding-left: 16px;
      font-size: var(--fs-chrome);
      color: var(--ink);
    }
    #onboard li { margin-bottom: 4px; }
    #onboard .onboard-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }
    #onboard .onboard-actions a,
    #onboard .onboard-actions button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 6px 10px;
      border-radius: var(--r-pill);
      border: 1px solid var(--chrome-line);
      background: var(--chrome-wash);
      color: var(--ink);
      font: inherit;
      font-size: var(--fs-chrome);
      text-decoration: none;
      cursor: pointer;
    }
    /* the dismiss button is the card's one primary: the light face the
       popup's revise link also wears */
    #onboard .onboard-actions button {
      background: rgba(248, 250, 252, 0.92);
      color: #0f172a;
      border-color: rgba(248, 250, 252, 0.92);
      font-weight: 600;
    }
    #bottom-actions {
      display: flex;
      gap: 8px;
      align-items: center;
    }
    /* the action row's pills keep the loud size (18px): the page's three
       primary controls, and the phone contribute pill beside them */
    #dock-toggle,
    #near-me,
    #contribute-go {
      padding: 12px 22px;
      font-size: var(--fs-chrome-xl);
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      white-space: nowrap;
    }
    /* the data maps split pill: the main zone follows the map (resting
       label, or the offer for the country under the centre); the caret
       zone always opens the searchable country panel. padding lives on
       the zones so each is its own full-height target */
    #datamaps-pill {
      padding: 0;
      font-size: var(--fs-chrome-xl);
      display: inline-flex;
      align-items: stretch;
      white-space: nowrap;
      overflow: hidden;
    }
    #datamaps-go {
      display: inline-flex;
      align-items: center;
      padding: 12px 12px 12px 22px;
      color: inherit;
      text-decoration: none;
      cursor: pointer;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      /* long country names ellipsise instead of breaking the row */
      max-width: min(52vw, 340px);
    }
    /* offers ellipsise the name, never the arrow: the shrinkable span
       carries the text and the arrow sits outside it */
    #datamaps-go .dm-offer-name {
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    #datamaps-go .dm-offer-arrow { flex: none; margin-left: 6px; }
    #datamaps-caret {
      display: inline-flex;
      align-items: center;
      padding: 12px 16px 12px 10px;
      margin-left: 2px;
      background: none;
      border: none;
      border-left: 1px solid var(--chrome-line);
      color: inherit;
      font: inherit;
      font-size: var(--fs-chrome);
      cursor: pointer;
    }
    /* the caret zone names its object: the visible word says a menu of
       all countries lives here (field lesson: bare glyphs go
       undiscovered), and the glyph turns while the panel is open —
       state carried by the aria-expanded the switcher already sets */
    #datamaps-caret .dm-caret-word { margin-right: 5px; }
    #datamaps-caret .dm-caret-glyph { display: inline-block; transition: transform 120ms ease; }
    #datamaps-caret[aria-expanded="true"] .dm-caret-glyph { transform: rotate(180deg); }
    /* offering: the main zone names the country under the map centre and
       the pill wears the chrome's "go" colour: emerald glass, distinct
       from amber (caution) and the blue data ramp, and separable from
       both without colour vision. the face matches the chrome alpha and
       the pale mint ink clears AA over the light basemap */
    #datamaps-pill.offering {
      --pill-opacity: 1;
      background: rgba(6, 78, 59, 0.85);
      border-color: rgba(52, 211, 153, 0.55);
      color: #d1fae5;
    }
    #datamaps-pill.offering:hover { background: rgba(6, 95, 70, 0.9); }
    #datamaps-pill.offering #datamaps-caret { border-left-color: rgba(52, 211, 153, 0.45); }
    /* the census toggle dot (country pages, over home): filled blue —
       the data ramp's colour — while the choropleth is on, hollow when
       off; mirrors the near-me pill's dot idiom */
    .dm-dot {
      width: 11px;
      height: 11px;
      border-radius: 50%;
      border: 2px solid var(--muted);
      background: transparent;
      box-sizing: border-box;
      flex: none;
      margin-right: 8px;
    }
    .dm-dot.on {
      border-color: var(--action);
      background: var(--action);
      box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.35);
    }
    /* hint state (global map, far out over a data country): an
       instruction to zoom, not yet an offer, so the label dims */
    #datamaps-pill.hinting #datamaps-go { color: var(--muted); }
    /* the pill names its action in full on desktop and by its object on
       phones, mirroring the census pill's long/short label swap */
    #datamaps-pill .dm-label-short { display: none; }
    /* phones: every resting pill shrinks as one (the filter chip and the
       contribute pill too), and an overfull row wraps upward instead of
       running off-screen */
    @media (max-width: 640px) {
      #bottom-actions {
        flex-wrap: wrap;
        justify-content: center;
        max-width: 96vw;
      }
      #dock-toggle,
      #near-me,
      #contribute-go,
      #filters-clear {
        padding: 10px 13px;
        font-size: var(--fs-chrome);
      }
      #datamaps-pill { font-size: var(--fs-chrome); }
      #datamaps-go {
        padding: 10px 8px 10px 13px;
        max-width: 56vw;
      }
      #datamaps-caret { padding: 10px 12px 10px 8px; font-size: var(--fs-chrome-xs); }
      #datamaps-pill .dm-label-long { display: none; }
      #datamaps-pill .dm-label-short { display: inline; }
    }
    #near-me .nm-dot {
      width: 11px;
      height: 11px;
      border-radius: 50%;
      border: 2px solid var(--muted);
      background: transparent;
      box-sizing: border-box;
      flex: none;
    }
    #near-me.active .nm-dot {
      border-color: var(--action);
      background: var(--action);
      box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.35);
    }
    /* the labelled near-me pill replaces the stock geolocate icon */
    .maplibregl-ctrl-group:has(.maplibregl-ctrl-geolocate) { display: none; }
    .maplibregl-ctrl button.maplibregl-ctrl-geolocate { display: none; }
    #counts-wrap {
      gap: 4px;
      pointer-events: none;
    }
    #counts-wrap > * {
      pointer-events: auto;
    }
    /* the drag wrap around the key bar and its panel (global map): keeps
       the pair centred as one column so a drag moves them together */
    #counts-wrap > #key-wrap {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
    }
    /* touch drag (phone parity with desktop): the draggable chrome opts
       out of browser pan/zoom so a touch drag reaches the page's pointer
       handlers instead of being claimed for scrolling, and a stalled touch
       must not pop text selection or the link callout. the onboarding card
       is absent from this set on purpose: it scrolls, and it is not
       draggable anywhere. */
    #counts-bar, #wordmark, #dock {
      touch-action: none;
      -webkit-user-select: none;
      user-select: none;
      -webkit-touch-callout: none;
    }
    #wordmark select { touch-action: auto; }
    /* the dock's own controls keep native touch and text behaviour: the
       search input must take a caret and a selection, and drags never
       start from inputs or selects anyway */
    #dock input, #dock select {
      touch-action: auto;
      -webkit-user-select: text;
      user-select: text;
    }
    /* the denomination key list scrolls on phones: touches there scroll it */
    #counts { touch-action: pan-y; }
    #counts-bar {
      display: flex;
      align-items: center;
      gap: 8px;
    }
    #counts-toggle {
      z-index: 12;
      /* compact pull-down: three palette dots and a caret, panel on tap */
      padding: 7px 14px;
      font-size: var(--fs-chrome);
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      width: auto;
      min-width: 0;
      justify-content: center;
      letter-spacing: 0.01em;
      white-space: nowrap;
    }
    #counts-toggle .key-dot {
      width: 11px;
      height: 11px;
      border-radius: 50%;
      flex: none;
    }
    #counts-toggle .key-label {
      font-weight: 600;
      margin-left: 2px;
    }
    #counts-toggle .key-caret {
      color: var(--muted);
      font-size: var(--fs-chrome-xs);
    }
    /* disabled keeps its label readable: muted ink, dimmed dots, never
       element opacity */
    #counts-toggle[disabled] { color: var(--muted); cursor: default; }
    #counts-toggle[disabled] .key-dot { opacity: 0.5; }
    /* the denomination key: list at the chrome size, heading one step up;
       the legend must not be the loudest text on the map */
    #counts {
      display: none;
      z-index: 11;
      background: var(--chrome-face);
      border: 1px solid var(--chrome-line);
      border-radius: var(--r-lg);
      padding: 12px 16px;
      font-size: var(--fs-chrome);
      color: var(--ink);
      width: min(260px, 30vw);
      min-width: 236px;
    }
    #counts h3 {
      margin: 0 0 12px;
      font-size: var(--fs-chrome-lg);
      font-weight: 600;
      letter-spacing: 0.01em;
    }
    #counts ul {
      list-style: none;
      padding: 0;
      margin: 0;
      display: grid;
      gap: 6px;
    }
    #countsHint {
      display: none;
      text-align: center;
      color: var(--ink);
      font-size: var(--fs-chrome);
      padding: 4px 0 12px;
    }
    #counts li {
      display: flex;
      justify-content: space-between;
      gap: 12px;
      color: var(--ink);
      align-items: center;
    }
    #counts .legend {
      display: inline-flex;
      align-items: center;
      gap: 12px;
    }
    #counts .dot {
      width: 16px;
      height: 16px;
      border-radius: var(--r-pill);
      border: 1px solid var(--chrome-line);
    }
    #counts .count-total {
      margin-top: 12px;
      font-weight: 600;
      color: var(--ink);
    }
    #corner-refresh {
      width: 55px;
      height: 55px;
      display: grid;
      place-items: center;
      cursor: pointer;
      padding: 0;
    }
    #corner-refresh svg {
      width: 26px;
      height: 26px;
      display: block;
    }
    @media (max-width: 640px) {
      #dock {
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        width: 86dvw;
        max-width: 86dvw;
        /* sit above the pill row so the open panel hides no controls;
           the band wraps to two pill rows on phones since the data maps
           pill joined it, so the old 64px offset overlapped by 20px
           (measured at 430px, jb report 2026-07-17) */
        bottom: calc(var(--safe-bottom) + 92px);
      }
      #corner-refresh {
        width: 44px;
        height: 44px;
        /* the action row needs the whole bottom band on a phone, so the
           refresh button steps up out of its way */
        bottom: calc(var(--safe-bottom) + 60px);
      }
      #corner-refresh svg { width: 22px; height: 22px; }
      #onboard {
        left: 50%;
        transform: translateX(-50%);
        top: calc(var(--safe-top) + 10px);
        max-width: min(88vw, 360px);
      }
      .dock-cities-row { display: none; }
      #counts {
        display: none;
        width: min(86vw, 480px);
        top: 44px;
        bottom: auto;
        max-height: min(50vh, 480px);
        overflow-y: auto;
        padding: 12px 16px;
        font-size: var(--fs-chrome-lg);
      }
      #counts h3 { font-size: var(--fs-chrome-lg); }
      #counts ul { gap: 6px; }
      #counts li { font-size: var(--fs-chrome-lg); }
      #counts .dot { width: 12px; height: 12px; }
      #cityChips { display: none; }
      .dock-row { gap: 4px; }
      .dock-row input { padding: 12px 12px; font-size: var(--fs-chrome-xl); }
      .dock-row button { padding: 5px 9px; font-size: var(--fs-chrome); }
      .dock-cities { gap: 6px; }
      .dock-chip { font-size: var(--fs-chrome-xs); padding: 3px 6px; }
      #counts-toggle {
        gap: 9px;
        padding: 6px 20px;
        min-width: max-content;
      }
      .maplibregl-ctrl { transform: scale(0.85); transform-origin: bottom right; }
      #corner-reset {
        width: 54px;
        height: 54px;
        /* the wordmark hides on phones; the badge takes the corner */
        top: var(--safe-top);
      }
      #corner-reset svg {
        width: 44px;
        height: 44px;
      }
    }

/* larger blue dot on phones: easier to spot under a thumb */
@media (max-width: 640px) {
  .maplibregl-user-location-dot,
  .maplibregl-user-location-dot::before {
    width: 22px;
    height: 22px;
  }
  .maplibregl-user-location-dot::after {
    width: 28px;
    height: 28px;
    left: -3px;
    top: -3px;
    border-width: 3px;
  }
}

/* top-right wordmark: repo link plus the contribute entry and the theme
   select; the pill, corner seat, and entry dividers come from the shared
   sheet. it holds contribute, so it wears the pill default in full ink
   at the chrome size (it was the faintest, smallest control on the page) */
#wordmark {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ink);
  padding: 8px 14px;
  font-size: var(--fs-chrome);
  letter-spacing: 0.02em;
}
#wordmark a {
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}
#wordmark a:hover {
  color: #fff;
  text-decoration: underline;
}
/* phones: the shared sheet (map-shell.css) hides the whole wordmark pill
   below 640px — phones are exploration surfaces (jb ruling 2026-07-16);
   the action row's contribute pill stands in there (r-d2, 2026-09-04) */

/* lazy street view: the popup shows a button until someone asks */
.streetview .sv-show {
  padding: 9px 16px;
  border-radius: var(--r-pill);
  border: 1px solid var(--chrome-line);
  background: var(--chrome-wash);
  color: var(--ink);
  font: inherit;
  font-size: var(--fs-chrome);
  cursor: pointer;
}
.streetview .sv-show:hover { background: var(--chrome-line); }

/* filter chips inside the search panel */
.dock-filters {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 4px 2px 2px;
}
.filter-group {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-chrome);
  color: var(--ink);
  background: var(--chrome-wash);
  border: 1px solid var(--chrome-line);
  border-radius: var(--r-pill);
  padding: 3px 9px;
  cursor: pointer;
  user-select: none;
}
.filter-chip input {
  margin: 0;
  width: 13px;
  height: 13px;
  accent-color: var(--action);
}
.filter-chip .dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex: none;
}
/* an unchecked chip recedes by muted ink and a bare face, not by fading
   its label */
.filter-chip.unchecked { color: var(--muted); background: transparent; }
.filter-chip.unchecked .dot { opacity: 0.5; }
/* the denomination row nests under the christian chip */
#denom-filters {
  margin-left: 14px;
  border-left: 2px solid var(--chrome-line);
  padding-left: 10px;
}
.dock-filters-row { min-height: 0; }
#filters-toggle {
  background: none;
  border: none;
  color: var(--ink);
  font: inherit;
  font-size: var(--fs-chrome);
  font-weight: 600;
  cursor: pointer;
  /* a real touch target: full row width, thumb-sized height */
  width: 100%;
  text-align: left;
  padding: 8px 6px;
  min-height: 36px;
}
#filters-toggle:hover { color: #fff; }
@media (max-width: 640px) {
  #filters-toggle {
    font-size: var(--fs-chrome);
    padding: 11px 6px;
    /* the id rule above outranks the class-based .shell-touch floor,
       so the thumb floor is restated here */
    min-height: 44px;
  }
}
#dock-close {
  background: none;
  border: none;
  color: var(--muted);
  font-size: var(--fs-chrome-xl);
  line-height: 1;
  cursor: pointer;
  padding: 0 6px;
  flex: none;
}
#dock-close:hover { color: #fff; }

/* the select-all / unselect-all box leads each filter row */
.filter-chip-all {
  background: rgba(59,130,246,0.16);
  border-color: rgba(59,130,246,0.35);
  font-weight: 600;
}

/* closed-panel filter indicator: count plus one-tap clear */
#filters-clear {
  --pill-bg: rgba(59, 130, 246, 0.22);
  --pill-border: rgba(59, 130, 246, 0.5);
  padding: 12px 14px;
  font-size: var(--fs-chrome);
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
#filters-clear:hover { background: rgba(59,130,246,0.32); }

/* the phone-only contribute pill: the bottom-row group above sets inline-flex, so re-hide it here and let only the phone breakpoint show it (r-d2) */
#contribute-go { display: none; }
@media (max-width: 640px) {
  #contribute-go { display: inline-flex; }
}