/* Reach Home Groups map.
   Colours and type are Reach's own brand tokens, lifted from
   reachchurch.cc/style-guide so the map reads as part of the site rather than
   as a bolted-on tool. Fonts are loaded from Reach's Webflow asset CDN. */

@font-face {
  font-family: "Perfectly Nineties";
  src: url("https://cdn.prod.website-files.com/68e629253cbd6cd644b05f8d/68e62ea50db43191d15a0869_Perfectly-Nineties-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Perfectly Nineties";
  src: url("https://cdn.prod.website-files.com/68e629253cbd6cd644b05f8d/68ef7bcb083ea90bc36cb41d_PerfectlyNineties-Italic-UK-English.woff2") format("woff2");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Courier Prime";
  src: url("https://cdn.prod.website-files.com/68e629253cbd6cd644b05f8d/68e62f78e0e3a7e511bcdaa3_CourierPrime-Regular-Optimized.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Courier Prime";
  src: url("https://cdn.prod.website-files.com/68e629253cbd6cd644b05f8d/68e63287baa607e892f57c0d_CourierPrime-Bold-Optimized.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
/* Reach's subtitle face, used by .text-style-tagline on reachchurch.cc.
   NOTE: this is a subset file — it carries A-Z, a-z, 0-9 and most punctuation
   but NO space glyph, so spaces render from the Arial fallback. That is fine
   for the short labels here; it is a reason not to set long strings in it. */
@font-face {
  font-family: "Tay Birdie";
  src: url("https://cdn.prod.website-files.com/68e629253cbd6cd644b05f8d/68ee3d04fb32ffc9bec59fa2_TAYBirdie-UK-Subset.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}

:root {
  /* ── Reach primitives ── */
  --charcoal: #292929;
  --charcoal-dark: #202020;
  --charcoal-darkest: #0c0c0c;
  --charcoal-light: #696969;
  --charcoal-lighter: #d4d4d4;
  --charcoal-lightest: #e9e9e9;
  --charcoal-10: #2929291a;

  --lakeside: #3886ce;
  --lakeside-dark: #2c6ba4;
  --lakeside-darker: #163552;
  --lakeside-light: #73aadc;
  --lakeside-lighter: #d7e6f5;
  --lakeside-lightest: #ebf2fa;

  --mustard: #e6a20f;
  --mustard-dark: #b8810c;
  --mustard-darker: #5c4006;
  --mustard-light: #edbd57;
  --mustard-lighter: #faeccf;
  --mustard-lightest: #fcf5e7;

  --paper: #f4f2eb;
  --paper-dark: #dcdad4;
  --paper-light: #f7f5f1;
  --paper-lighter: #fcfcfb;
  --paper-lightest: #fdfdfd;

  /* ── Roles ── */
  --bg: var(--paper);
  --surface: var(--paper-lightest);
  --line: var(--paper-dark);
  --line-strong: var(--charcoal-lighter);
  --text: var(--charcoal);
  --text-2: var(--charcoal-light);
  /* Was #8a8a86 — hand-mixed, and 3.41:1 on --surface, under the 4.5:1 floor.
     Every other value here traces to a Reach primitive; this now does too. */
  --text-3: var(--charcoal-light);

  /* Category encoding. Lakeside is the brand's primary, so open groups —
     the ones we want people to join — carry it. Mustard Seed is the brand's
     accent, which is exactly the job "new / launching" needs. Closed recedes
     into charcoal and picks up a dashed outline so it stays distinguishable
     in greyscale. */
  /* Swatches and rings use the brand primitives themselves so the UI matches
     the map exactly. The -ink variants remain available for TEXT, where the
     contrast requirement is 4.5:1 rather than the 3:1 that applies to a ring. */
  --open: var(--lakeside);
  --open-ink: var(--lakeside);
  --launching: var(--mustard);
  --launching-ink: var(--mustard);
  --closed: var(--charcoal-lighter);
  --closed-ink: var(--charcoal-light);

  --font-heading: "Perfectly Nineties", Georgia, serif;
  --font-body: "Courier Prime", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --font-tagline: "Tay Birdie", Arial, sans-serif;

  /* Type scale. Previously 13 sizes, nine of them inside a 4px band and several
     on half-pixels — steps too small to read as hierarchy, large enough to read
     as sloppiness. Seven steps, integer, each doing distinct work. */
  --t-micro: 11px;
  --t-small: 12px;
  --t-body: 13px;
  --t-label: 15px;
  --t-title: 19px;
  --t-display: 32px;
  --t-display-print: 40px;

  --radius: 8px;
  --shadow: 0 1px 2px #2929290f, 0 4px 16px #2929290d;
  --sidebar-w: 348px;
}

/* Ported from reachchurch.cc .text-style-tagline:
     font-family: var(--_typography---font-styles--subtitle)  → Tay Birdie
     text-transform: uppercase; font-size: 1.125rem; font-weight: 400
   The guide also ships .is-event-details at 0.875rem, which establishes that
   this style scales down; the sizes below follow that precedent rather than
   forcing 18px onto every micro-label. Tracking stays `normal` per the guide —
   the face is already wide, and added tracking made it look stretched. */
.text-style-tagline {
  font-family: var(--font-tagline);
  text-transform: uppercase;
  font-weight: 400;
  letter-spacing: normal;
  display: inline-block;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }

body {
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: 1.55;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

#app { display: grid; grid-template-columns: var(--sidebar-w) 1fr; height: 100%; }

/* ── Sidebar ─────────────────────────────────────────────────────────────── */

/* The SIDEBAR scrolls, not the group list inside it. With Legend + Show +
   four filter facets above it, an inner-scrolling list was being squeezed to
   about one visible row — the filters won all the space and the actual content
   lost. Scrolling the whole column lets the list take the height it needs. */
#sidebar {
  display: flex; flex-direction: column; min-height: 0;
  background: var(--surface); border-right: 1px solid var(--line);
  overflow-y: auto; overflow-x: hidden;
}

.brand { padding: 22px 22px 16px; border-bottom: 1px solid var(--line); }
.brand h1 {
  margin: 0; font-family: var(--font-heading); font-weight: 400;
  font-size: var(--t-display); line-height: 1.05; letter-spacing: -0.005em; color: var(--charcoal-darkest);
}
.brand-sub {
  margin: 6px 0 0; font-size: var(--t-label); color: var(--text-3);
}

.panel { padding: 16px 22px; border-bottom: 1px solid var(--line); }
.panel h2 {
  margin: 0 0 11px; font-size: var(--t-label); color: var(--text-3);
  display: flex; justify-content: space-between; align-items: baseline;
}
.panel h2 em { font-style: normal; font-family: var(--font-body); font-size: var(--t-micro); }

.panel-grow { flex: none; display: flex; flex-direction: column; }
/* Pinned so "Print view" is reachable without scrolling to the end of 18
   groups, and so it does not drift mid-list as facets expand and collapse. */
.panel-foot {
  border-bottom: 0; margin-top: auto;
  position: sticky; bottom: 0; z-index: 2; isolation: isolate;
  background: var(--paper-light);
  border-top: 1px solid var(--line);
}

/* ── Legend ──────────────────────────────────────────────────────────────── */

.legend { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.legend li { display: flex; align-items: center; gap: 11px; font-size: var(--t-label); }
.legend-label { display: flex; justify-content: space-between; flex: 1; gap: 8px; }
.legend-label em { font-style: normal; font-family: var(--font-body); font-size: var(--t-micro); color: var(--text-3); }

.swatch { width: 24px; height: 24px; border-radius: 50%; flex: none; box-sizing: border-box; }
.swatch-open {
  background: color-mix(in srgb, var(--open) 32%, transparent);
  border: 2px solid var(--open);
}
.swatch-launching {
  background: color-mix(in srgb, var(--launching) 42%, transparent);
  border: 2px solid var(--launching);
  box-shadow: 0 0 0 2.5px color-mix(in srgb, var(--launching) 38%, transparent);
}
.swatch-closed {
  background: color-mix(in srgb, var(--closed) 45%, transparent);
  border: 2px dashed var(--closed-ink);
}

.legend-note, .alert-note {
  margin: 13px 0 0; font-size: var(--t-micro); line-height: 1.5; color: var(--text-3);
}
.legend-note strong { color: var(--text-2); font-weight: 700; }

/* ── Filters ─────────────────────────────────────────────────────────────── */

.toggles { display: grid; gap: 8px; }
.toggles label {
  display: flex; align-items: center; gap: 10px;
  font-size: var(--t-small); cursor: pointer; user-select: none;
}
.toggles input { accent-color: var(--lakeside); width: 15px; height: 15px; }

/* ── Missing-address callout ─────────────────────────────────────────────── */

.panel-alert { background: var(--mustard-lightest); border-bottom-color: var(--mustard-lighter); }
.panel-alert h2 { color: var(--mustard-darker); }
.panel-alert .alert-note { color: var(--mustard-darker); opacity: 0.85; }
.missing-list { list-style: none; margin: 11px 0 0; padding: 0; display: grid; gap: 7px; }
.missing-list li { font-size: var(--t-small); line-height: 1.4; }
.missing-list a {
  color: var(--mustard-darker); text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--mustard) 55%, transparent);
}
.missing-list a:hover { border-bottom-color: var(--mustard-darker); }

/* ── Group list ──────────────────────────────────────────────────────────── */

.group-list {
  list-style: none; margin: 0; padding: 0 0 8px;
  flex: none;
  /* Adjacent highlighted rows were butting together and reading as one block. */
  display: grid; gap: 4px;
}
.group-row { list-style: none; }

/* The row is a <button>; these resets make it look like the list item it is
   while keeping the semantics and keyboard behaviour of a real control. */
.group-item {
  display: grid; grid-template-columns: 14px 1fr; gap: 12px;
  width: 100%; text-align: left;
  border: 0; background: none; font: inherit; color: inherit;
  padding: 9px 9px; border-radius: var(--radius); cursor: pointer;
  transition: background 120ms ease;
}
.group-item:hover { background: var(--paper); }
/* Selected needs to differ from hovered without going darker — a deeper fill
   read as heavy next to the hover state, and a coloured bar down one edge is a
   tell. Same paper fill as hover plus a full hairline ring: unmistakable as a
   state, quiet as a surface. */
.group-item.is-active {
  background: var(--paper);
  box-shadow: inset 0 0 0 1px var(--charcoal-lighter);
}
.group-item .dot {
  width: 14px; height: 14px; border-radius: 50%; margin-top: 4px;
  box-sizing: border-box;
}
.group-item .g-name { font-size: var(--t-small); font-weight: 700; line-height: 1.35; }
.group-item .g-meta {
  display: block; font-size: var(--t-micro); color: var(--text-3);
  margin-top: 3px; line-height: 1.4;
}
/* Hidden, not ghosted. One checkbox removing a circle from the map while
   leaving its row visible at low opacity makes a single control mean two
   different things in two panes — and 34% opacity fails contrast anyway. */
.group-row:has(.group-item.is-dim), .group-item.is-dim { display: none; }

.list-empty {
  padding: 14px 9px; font-size: var(--t-small); line-height: 1.5;
  color: var(--text-3);
}

/* ── Buttons ─────────────────────────────────────────────────────────────── */

.btn {
  appearance: none; border: 1px solid var(--line-strong); background: var(--surface);
  color: var(--text); font-size: var(--t-label);
  padding: 11px 15px; border-radius: var(--radius); cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}
.btn:hover { background: var(--paper); }
.btn-primary {
  width: 100%; background: var(--charcoal); color: #fff; border-color: var(--charcoal);
}
.btn-primary:hover { background: var(--charcoal-darkest); border-color: var(--charcoal-darkest); }

.foot-note { margin: 11px 0 0; font-size: var(--t-micro); color: var(--text-3); line-height: 1.5; }

/* ── Map ─────────────────────────────────────────────────────────────────── */

#map-wrap {
  position: relative; min-width: 0; overflow: hidden;
  background: var(--bg);
}

/* Centring applies ONLY in print mode. Applied unconditionally it turned
   #print-stage into a flex item that collapsed to its content height, which
   took the live map down to ~20px tall. `safe` centring keeps an oversized
   artboard's top-left reachable instead of overflowing past the scroll origin. */
#app[data-mode="print"] #map-wrap {
  display: flex; align-items: safe center; justify-content: safe center;
  overflow: auto;
  /* Reserve room for the floating toolbar so the artboard is never tucked
     underneath it. --print-bar-h is measured at runtime, because the bar wraps
     to two rows on narrow windows and a fixed guess would be wrong at one
     width or the other. */
  padding-top: calc(var(--print-bar-h, 56px) + 26px);
  padding-bottom: 26px;
}
#print-frame { position: relative; width: 100%; height: 100%; }
#map { position: absolute; inset: 0; }

#map-error {
  position: absolute; inset: 0; display: grid; place-items: center;
  padding: 40px; text-align: center; color: var(--text-2); font-size: var(--t-body);
}
#map-error code {
  display: block; margin-top: 12px; padding: 11px 13px; border-radius: var(--radius);
  background: var(--surface); border: 1px solid var(--line); font-size: var(--t-micro); color: var(--text);
}

/* Info window — quiet down Google's default chrome. */
.gm-style .gm-style-iw-c { border-radius: var(--radius); padding: 0; box-shadow: var(--shadow); }
.gm-style .gm-style-iw-d { overflow: hidden !important; }
.iw { padding: 14px 16px 20px; width: 100%; box-sizing: border-box; font-family: var(--font-body); }
.iw h3 {
  margin: 0 0 4px; font-family: var(--font-heading); font-weight: 400;
  font-size: var(--t-title); line-height: 1.2; color: var(--charcoal-darkest);
}
.iw .iw-cat {
  display: inline-block; font-size: var(--t-micro); font-weight: 700; letter-spacing: 0.09em;
  text-transform: uppercase; padding: 3px 8px; border-radius: 20px; margin-bottom: 8px;
}
.iw dl { margin: 9px 0 0; display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; font-size: var(--t-small); }
.iw dt { color: var(--text-3); }
.iw dd { margin: 0; }
/* Reach's primary button, ported from .button on reachchurch.cc:
     background        Lakeside          #3886ce
     border            1px lakeside-dark on three sides (bottom is style:none)
     box-shadow        0 4px 0 lakeside-dark   ← the 4px "lift"
     radius            6px
     type              Courier Prime 400, uppercase, letter-spacing normal
   On hover the guide collapses the shadow to 0 and fades the side borders,
   so the button reads as pressing down. Using box-shadow rather than a border
   for the lift means the press causes no layout shift.
   Padding follows .button.is-small (8px 20px), which suits a 320px card. */
.iw a.iw-cta {
  display: inline-flex; align-items: center; gap: 0.75rem;
  margin-top: 16px;
  padding: 8px 20px;
  background: var(--lakeside);
  border: 1px solid var(--lakeside-dark);
  border-bottom: 0;
  border-radius: 6px;
  box-shadow: 0 4px 0 0 var(--lakeside-dark);
  color: #fff;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  text-transform: uppercase;
  letter-spacing: normal;
  text-decoration: none;
  transition: box-shadow 140ms ease, border-color 140ms ease;
}
.iw a.iw-cta:hover {
  border-top-color: transparent;
  border-right-color: transparent;
  border-left-color: transparent;
  box-shadow: 0 0 0 0 var(--lakeside-dark);
}

/* Google focuses the card's first control when it opens. For keyboard users
   that is right and the ring should show; after a mouse click it is a stray
   outline on a button the user just aimed at. The ring is offset clear of the
   button's 4px lift so the two never overlap into a muddle. */
.iw a.iw-cta:focus-visible {
  outline: 2px solid var(--lakeside-dark);
  outline-offset: 3px;
}
#app[data-input="pointer"] .iw a.iw-cta:focus-visible { outline: none; }
.iw .iw-area-note { margin: 10px 0 0; font-size: var(--t-micro); color: var(--text-3); line-height: 1.45; }

/* ── Print mode ──────────────────────────────────────────────────────────── */

/* `hidden` must beat the explicit display below — id selectors outrank the
   UA stylesheet's [hidden] { display: none }. */
#print-bar[hidden], #map-error[hidden], #missing-panel[hidden] { display: none !important; }

#print-bar {
  position: absolute; top: 14px; left: 50%; transform: translateX(-50%);
  z-index: 30; display: flex; align-items: center; gap: 14px;
  background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: var(--radius); padding: 10px 14px; box-shadow: var(--shadow);
  font-size: var(--t-small); white-space: nowrap;
}
#print-bar label { display: flex; align-items: center; gap: 6px; color: var(--text-2); }
#print-bar select {
  font-family: var(--font-body); font-size: var(--t-small); padding: 5px 7px;
  border-radius: 6px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--text);
}
#print-bar .chk { gap: 5px; }
#print-bar .spacer { width: 4px; }

#print-overlay { display: none; }

#app[data-mode="print"] { grid-template-columns: 1fr; }
#app[data-mode="print"] #sidebar { display: none; }

#app[data-mode="print"] #print-frame {
  background: var(--paper); box-shadow: 0 3px 34px #29292926; flex: none;
}
#app[data-mode="print"] #print-overlay {
  display: block; position: absolute; inset: 0; pointer-events: none; z-index: 5;
}

.print-title {
  position: absolute; top: 34px; left: 36px;
  background: color-mix(in srgb, var(--paper-lightest) 94%, transparent);
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 20px 26px 18px; box-shadow: 0 1px 12px #29292912;
}
.print-title h2 {
  margin: 0; font-family: var(--font-heading); font-weight: 400;
  font-size: var(--t-display-print); line-height: 1.02; color: var(--charcoal-darkest);
}
.print-title p { margin: 9px 0 0; font-size: var(--t-title); color: var(--text-3); }

.print-legend {
  position: absolute; left: 36px; bottom: 46px;
  background: color-mix(in srgb, var(--paper-lightest) 94%, transparent);
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 17px 22px; box-shadow: 0 1px 12px #29292912;
  display: grid; gap: 10px; min-width: 224px;
}
.print-legend .pl-row { display: flex; align-items: center; gap: 12px; font-size: var(--t-title); }
.print-legend .pl-row em { font-style: normal; font-family: var(--font-body); font-size: var(--t-small); color: var(--text-3); margin-left: auto; }
.print-legend .pl-note {
  font-size: var(--t-micro); color: var(--text-3); line-height: 1.5;
  border-top: 1px solid var(--line); padding-top: 10px; margin-top: 1px;
}

/* Group-name labels drawn over the map in print mode. */
/* ONE label treatment for every group, wherever it ends up sitting.
   Previously displaced labels got a bordered white plate while centred ones
   were plain text, so the map carried two competing styles at once — which is
   what made it look cluttered. Following the pattern Tide Guide uses for
   multi-feature map labelling: quiet text on a halo, no box, no border, placed
   adjacent to its feature. Size and width are set per-label in JS from the
   circle's current pixel radius. */
.map-label {
  position: absolute;
  transform: translate(-50%, -50%);
  font-family: var(--font-body);
  font-weight: 700;
  line-height: 1.22;
  text-align: center;
  color: var(--charcoal-darkest);
  /* A thick halo is what lets plain text stay legible over a circle fill, a
     road, or water without needing a plate behind it. */
  text-shadow:
    0 0 3px var(--paper), 0 0 3px var(--paper), 0 0 4px var(--paper),
    0 0 6px var(--paper), 0 0 10px var(--paper);
  pointer-events: none;
}


/* Interactive-only Google controls are hidden while printing. Attribution and
   the Google logo stay visible — the Maps Platform terms require them to
   remain on any map image you produce. */
#app[data-mode="print"] .gm-control-active,
#app[data-mode="print"] .gmnoprint:not(.gm-style-cc),
#app[data-mode="print"] .gm-fullscreen-control { display: none !important; }

/* ── Info-window media ───────────────────────────────────────────────────── */

/* The close button is removed entirely. The card already dismisses on a map
   click, a drag, a zoom, or Escape, so the control was a redundant target — and
   it sat on top of the group photo, needing a scrim that darkened the image
   purely to keep itself readable. Collapsing the header row also lets the photo
   start at the very top of the card. */
.gm-style .gm-style-iw-chr { display: none !important; }


.iw.has-media { padding-top: 0; }

.iw-media {
  margin: 0 -16px 13px;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--paper-dark);
  position: relative;
}
.iw-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
   translucent disc behind the button itself, which is the smallest surface
   that can do the job — a gradient pool over the corner darkened far more of
   the image than the 34px control needed. */

/* ── Focus ───────────────────────────────────────────────────────────────── */

/* :focus-visible rather than :focus, so the ring appears for keyboard and
   assistive-tech users without flashing on every mouse click. It is kept, not
   removed — this is a public church page and losing the focus indicator would
   make it unusable without a mouse. */
:where(a, button, input, select, [tabindex]):focus-visible {
  outline: 2px solid var(--lakeside);
  outline-offset: 2px;
  border-radius: 3px;
}
.iw a:focus-visible { outline-color: var(--lakeside-dark); }

/* ── In-circle status badges ─────────────────────────────────────────────── */

.circle-badge {
  position: absolute;
  transform: translate(-50%, -50%);
  font-family: var(--font-tagline);
  text-transform: uppercase;
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 1;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}

/* NEW reads bright: full-strength Mustard Seed with a paper halo so it stays
   vivid against the fill rather than muddying into it. */
.circle-badge.is-launching {
  color: var(--mustard-dark);
  text-shadow:
    0 0 3px var(--paper-lightest), 0 0 3px var(--paper-lightest),
    0 0 6px var(--paper-lightest), 0 0 10px var(--paper-lightest);
}

/* ── Tag facet filters ───────────────────────────────────────────────────── */

.panel-facets h2 { align-items: center; }

.facet-clear {
  appearance: none; border: 0; background: none; cursor: pointer;
  font-family: var(--font-body); font-size: var(--t-micro);
  color: var(--lakeside-dark); padding: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--lakeside) 45%, transparent);
}
.facet-clear:hover { color: var(--charcoal); border-bottom-color: var(--charcoal); }

.facet { border-top: 1px solid var(--line); }
.facet:first-of-type { border-top: 0; }

.facet > summary {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; padding: 9px 0; cursor: pointer; user-select: none;
  font-size: var(--t-small); color: var(--text-2); list-style: none;
}
.facet > summary::-webkit-details-marker { display: none; }
.facet > summary::after {
  content: ""; flex: none; width: 7px; height: 7px; margin-left: auto;
  border-right: 1.5px solid var(--text-3);
  border-bottom: 1.5px solid var(--text-3);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 140ms ease;
}
.facet[open] > summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.facet > summary:hover { color: var(--text); }

.facet-count:not(:empty) {
  font-style: normal; font-size: var(--t-micro);
  background: var(--lakeside); color: #fff;
  min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 20px; display: grid; place-items: center;
}

.facet-options { display: grid; gap: 6px; padding: 2px 0 12px 2px; }
.facet-options label {
  display: flex; align-items: center; gap: 9px;
  font-size: var(--t-small); cursor: pointer; line-height: 1.35;
}
.facet-options input { accent-color: var(--lakeside); width: 14px; height: 14px; flex: none; }

/* ── Print stage (fit-to-viewport) ───────────────────────────────────────── */

/* #print-frame keeps its TRUE pixel size so the export renders at full
   resolution; #print-stage carries the visually scaled dimensions so layout,
   centring and scrolling behave. Without this an A3 or portrait frame is simply
   larger than the window and its top-left is unreachable. */
#print-stage { position: relative; width: 100%; height: 100%; }
#app:not([data-mode="print"]) #print-stage { position: absolute; inset: 0; }
#app[data-mode="print"] #print-stage { flex: none; }
#app[data-mode="print"] #print-frame { transform-origin: top left; }

.print-attribution {
  position: absolute; right: 10px; bottom: 8px; z-index: 6;
  font-family: var(--font-body); font-size: 11px; color: #5f5f5c;
  text-shadow: 0 0 3px var(--paper-lightest), 0 0 3px var(--paper-lightest);
  display: none;
}
#app[data-mode="print"] .print-attribution { display: block; }

/* Export and Done sit side by side, so they match in height and footprint —
   different widths made the pair look accidental. */
/* Export and Done sit side by side and share a HEIGHT, not a width — each
   sizes to its own label. Height is pinned rather than left to intrinsic
   content because the two carry different classes and were otherwise
   resolving to 41px and 38px. */
.btn-inline {
  width: auto;
  height: 42px;
  padding: 0 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1;
}
#print-bar .scale-note {
  font-size: var(--t-micro); color: var(--text-3); font-variant-numeric: tabular-nums;
}
#btn-export[disabled] { opacity: 0.55; cursor: progress; }

/* ── Scrollbars ──────────────────────────────────────────────────────────── */

/* macOS hides overlay scrollbars until you scroll, so a long sidebar reads as
   "the list is only three groups". A permanently visible, quiet track is the
   discoverability cue. */
#sidebar { scrollbar-width: thin; scrollbar-color: var(--charcoal-lighter) transparent; }
#sidebar::-webkit-scrollbar { width: 10px; }
#sidebar::-webkit-scrollbar-track { background: transparent; }
#sidebar::-webkit-scrollbar-thumb {
  background: var(--charcoal-lighter); border-radius: 10px; border: 3px solid var(--surface);
}
#sidebar::-webkit-scrollbar-thumb:hover { background: var(--text-3); }

.panel-foot::before {
  content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px;
  background: linear-gradient(to top, var(--paper-light), transparent);
  pointer-events: none;
}

/* ── Mobile bottom sheet ─────────────────────────────────────────────────── */

/* Hidden on desktop, where the sidebar is simply always present. */
.sheet-head { display: none; }

/* ── Mobile menu trigger ─────────────────────────────────────────────────── */

/* Base styles come BEFORE the media query on purpose: these rules and the
   ones inside @media have identical specificity, so source order decides the
   winner. With the query first, `display: none` here silently overrode it and
   the button never appeared. */
#menu-fab {
  display: none;
  position: fixed; z-index: 55;
  left: 50%; transform: translateX(-50%);
  bottom: calc(30px + env(safe-area-inset-bottom, 0px));
  align-items: center; gap: 10px;
  padding: 13px 20px;
  border: 1px solid var(--charcoal);
  border-radius: 999px;
  background: var(--charcoal); color: #fff;
  font-family: var(--font-tagline); text-transform: uppercase;
  font-size: var(--t-label);
  white-space: nowrap;
  box-shadow: 0 6px 22px rgba(41, 41, 41, 0.3);
  cursor: pointer;
}

/* Drawn as an SVG rather than with borders. The border version squeezed three
   2px rules into an 11px box, leaving ~1.5px gaps that closed up into a solid
   block at phone density. */
.fab-bars {
  width: 18px;
  height: 14px;
  flex: none;
  overflow: visible;
}

#fab-badge:not([hidden]) {
  font-style: normal; font-family: var(--font-body); font-size: var(--t-micro);
  background: var(--mustard); color: var(--charcoal-darkest);
  min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 999px; display: grid; place-items: center;
}

/* Desktop keeps the export button and never shows the mobile Save. */
#btn-menu-save { display: none; }

/* ── Mobile layout ───────────────────────────────────────────────────────── */

@media (max-width: 860px) {
  /* Map owns the screen; the sidebar is a drawer that is fully off-screen
     until the trigger is pressed. An earlier version rested it partly open,
     which put three overlapping affordances on screen at once (peek sheet,
     filter pill, Save) with no clear division of labour. */
  #app { grid-template-columns: 1fr; grid-template-rows: 1fr; }
  #map-wrap { grid-column: 1; grid-row: 1; }

  #sidebar {
    position: fixed; inset: 0; z-index: 60;
    max-height: none; border-right: 0;
    transform: translateY(100%);
    transition: transform 280ms cubic-bezier(0.32, 0.72, 0, 1);
    will-change: transform;
    overscroll-behavior: contain;
  }
  #app[data-menu="open"] #sidebar { transform: translateY(0); }

  .sheet-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; position: sticky; top: 0; z-index: 3;
    padding: 14px 16px 14px 20px;
    background: var(--surface); border-bottom: 1px solid var(--line);
    font-family: var(--font-tagline); text-transform: uppercase;
    font-size: var(--t-label); color: var(--text-2);
  }
  .sheet-close {
    appearance: none; border: 1px solid var(--line-strong); background: var(--surface);
    width: 38px; height: 38px; border-radius: 50%;
    font-size: 24px; line-height: 1; color: var(--text-2);
    display: grid; place-items: center; cursor: pointer; flex: none;
  }
  .sheet-close:hover { background: var(--paper); color: var(--text); }

  .brand { display: none; }

  #btn-print-mode { display: none; }
  #btn-menu-save { display: block; }
  .panel-foot { padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }

  /* Legend is the only explanation of the circles, so it carries more weight
     here than on desktop. */
  .swatch { width: 28px; height: 28px; }
  .legend li { font-size: var(--t-title); gap: 13px; }
  .legend { gap: 13px; }
  .group-item .dot { width: 16px; height: 16px; }
  .group-item { grid-template-columns: 16px 1fr; }

  #menu-fab { display: inline-flex; }
  #app[data-menu="open"] #menu-fab { display: none; }

  #print-bar {
    left: 12px; right: 12px; transform: none;
    flex-wrap: wrap; white-space: normal; gap: 10px 12px;
  }
}

/* Save is only meaningful once something changed; until then it is inert and
   Close is the honest way out. */
#btn-menu-save[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
  background: var(--charcoal-light);
  border-color: var(--charcoal-light);
}

@media (prefers-reduced-motion: reduce) {
  #sidebar { transition: none; }
}