:root {
  color-scheme: light;
  background: var(--ground);
}

html, body { margin: 0; min-height: 100%; }

#sfm-container { position: relative; background: var(--card); }
.result-count { margin-left: auto; color: var(--muted); font-size: 0.8rem; }

#sfm-map { width: 100%; height: calc(100vh - 130px); min-height: 520px; background: #abd3e0; }
/* Its place and colours are below, under .map-page, which the finder's page
   always is. */
.map-error { padding: 14px 18px; }

/* The dialog a card's Message button opens, drawn as the site's .lightbox:
   the page's darker band, the hairline, the page's corner, and the plum
   button that acts. The finder's markup keeps its own class names. */
.intro-dialog {
  width: min(28rem, calc(100vw - 2rem)); max-height: calc(100vh - 3rem); max-height: calc(100dvh - 3rem);
  padding: 0; border: 1px solid var(--rule); border-radius: var(--radius);
  background: var(--ground-2); color: var(--ink); box-shadow: var(--shadow);
}
.intro-dialog::backdrop { background: var(--backdrop, rgb(43 39 35 / 45%)); }
.intro-dialog-header {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem;
  padding: 1.2rem 1.4rem 0.9rem; border-bottom: 1px solid var(--rule);
}
.intro-dialog-header h2 { margin: 0; font-size: 1.35rem; }
.intro-dialog-header p { margin: 0.25rem 0 0; color: var(--muted); font-size: 0.95rem; }
.intro-dialog-close {
  appearance: none; background: none; border: 0; padding: 0; cursor: pointer;
  display: inline-grid; place-items: center; min-width: 2.25rem; min-height: 2.25rem;
  margin: -0.35rem -0.55rem -0.35rem 0;
  font: inherit; font-size: 1.6rem; line-height: 1; color: var(--muted);
}
.intro-dialog-close:hover { color: var(--ink); }
.intro-dialog form { padding: 1rem 1.4rem 1.2rem; overflow: auto; max-height: calc(100vh - 10rem); max-height: calc(100dvh - 10rem); }
.intro-note { margin: 0 0 1rem; color: var(--muted); }
.intro-field { display: block; margin-bottom: 1rem; }
.intro-label { display: block; font-weight: 600; font-size: 0.95rem; margin-bottom: 0.35rem; }
.intro-field input {
  width: 100%; font: inherit; font-size: var(--control-font); line-height: var(--control-line); color: var(--ink);
  background: var(--card); border: var(--control-border) solid var(--rule);
  border-radius: var(--radius-xs); padding: var(--control-pad-y) var(--control-pad-x); box-shadow: var(--sink);
}
.intro-field input:focus { outline: var(--focus-ring); outline-offset: 2px; }
.intro-submit {
  display: inline-flex; align-items: center; font-family: var(--font); font-size-adjust: var(--x-height); font-weight: 400; font-size: 1rem;
  line-height: var(--control-line); padding: var(--control-pad-y) var(--control-pad-x); border-radius: var(--radius-xs); border: var(--control-border) solid transparent;
  cursor: pointer;
  /* The white button (site.css .btn-ghost), no longer filled plum
     (Alipasha, 16 Oct 2026). */
  color: var(--ink);
  background: var(--white-face);
  border-color: var(--white-face-edge);
  box-shadow: var(--white-face-lines);
}
.intro-submit:hover {
  background: var(--white-face-hover);
}
.intro-submit:disabled { opacity: 0.6; cursor: wait; box-shadow: none; }
.intro-submit:focus-visible { outline: var(--focus-ring); outline-offset: 2px; }

@media (max-width: 700px) {
  .result-count { margin-left: 0; }
}

/* ---- the finder page ---------------------------------------
   index.html now loads tokens.css and site.css, so the bar, the
   footer, the type and the colours are the site's own. What is
   left here is the part no other page has: the filter row, the
   map, and the cards. Everything below is written in tokens, and
   scoped to .map-page over the older rules above. Since part 2d of
   #71 no other page loads this file: the sangha form, its meeting
   editor, the intro page and the 404 page moved to site.css and
   plumliners.css. */
/* Every part of the box is the same height, so it is said once: the height
   of the box's middle row (see #sfm-views). */
.map-page {
  --box-height: clamp(460px, 68vh, 860px);
  /* Wide enough for the views beside the sidebar's switch, and for the
     count on one line up to "Showing 9,999 of 9,999 Sanghas": 219px of the
     230 it has from the words' edge, in FiraGO (measured 20 Oct 2026,
     Alipasha's ask). A phone has no column for it. */
  --side-width: 17rem;
  /* The sidebar's dark: the accent's own hue, at a
     lightness of 0.4 and a fifth of its colour (Alipasha, 11 Oct 2026). */
  --finder-dark: oklch(from var(--accent-strong) 0.4 calc(c * 0.2) h);
  /* The pins' and clusters' face: the accent, lighter at the top, as the
     Sangha Finder link's is (Alipasha, 28 Oct 2026). */
  --marker-face: linear-gradient(oklch(from var(--accent-strong) calc(l + 0.2) calc(c * 0.8) h), var(--accent-strong));
  --marker-face-hover: linear-gradient(oklch(from var(--accent-strong-hover) calc(l + 0.2) calc(c * 0.8) h), var(--accent-strong-hover));
}
.map-page #sfm-container { position: relative; background: transparent; }

/* ---- the whole screen ---------------------------------------------
   The finder has the window under the site's bar (Alipasha, 11 Oct 2026):
   the bar across the top, as on every other page, and no footer under it.
   The footer is still in the page, the same as every other page's, and
   hidden here. On a computer the box takes the rest of the window's height
   exactly, and what it holds scrolls inside it; on a phone the page
   scrolls (see the phone's rules at the end). */
.map-page > .site-footer { display: none; }
.map-page #finder { padding: 0; border-top: 0; }
@media (min-width: 701px) {
  body.map-page {
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
  }
  .map-page > main,
  .map-page #finder,
  .map-page #sfm-container { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
  .map-page #sfm-views { flex: 1 1 auto; min-height: 0; }
}

/* ---- the welcome -------------------------------------------------
   The title and the welcome, with the photograph to their right, in a box
   over the finder the first time somebody comes: a deep shadow, and the
   finder dimmed behind it. Under them, the way Home on the left, and on the
   right Don't Show Again, not ticked to begin with, beside the way on to
   the finder in the accent colour (Alipasha, 11 Oct 2026). home.js opens
   and closes it. */
.map-page .welcome-dialog {
  width: min(58rem, calc(100vw - 2rem));
  max-height: calc(100dvh - 2rem);
  padding: 0;
  overflow: auto;
  color: var(--ink);
  background: var(--ground);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: 0 24px 64px color-mix(in srgb, var(--charcoal) 34%, transparent), 0 6px 18px color-mix(in srgb, var(--charcoal) 18%, transparent);
}
.map-page .welcome-dialog::backdrop { background: var(--backdrop, rgb(43 39 35 / 45%)); }
.map-page .welcome-dialog .welcome { padding: clamp(1.5rem, 4vw, 2.6rem) clamp(1.5rem, 4vw, 2.6rem) clamp(1.2rem, 3vw, 1.8rem); }
/* The title light, at 300. */
.map-page .welcome-dialog h2 {
  margin: 0 0 clamp(1rem, 2.5vw, 1.5rem);
  font-size: clamp(1.9rem, 5vw, 2.8rem);
  font-weight: 300;
}
.map-page .welcome-dialog figure.photo { align-self: center; }
.map-page .welcome-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.8rem 1.2rem;
  padding: 1rem clamp(1.5rem, 4vw, 2.6rem) 1.2rem;
  background: var(--ground-2);
  border-top: 1px solid var(--rule);
}
.map-page .welcome-again {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-right: auto;
  cursor: pointer;
}
.map-page .welcome-again input { width: 1.05rem; height: 1.05rem; margin: 0; accent-color: var(--accent-strong); }
/* On a phone the tick has a line of its own, and the two buttons share the
   one under it, at the right. */
@media (max-width: 700px) {
  .map-page .welcome-again { flex: 1 0 100%; margin-right: 0; }
  .map-page .welcome-foot .btn-ghost { margin-left: auto; }
}


.map-page .place-search input {
  /* The browser's own control drew its own corners, rounder in Safari, so
     the field is drawn here instead, with the corner every control has. */
  appearance: none;
  -webkit-appearance: none;
  width: auto;
  min-width: 9rem;
  /* The height of every button and field on the site. */
  height: var(--control-height);
  padding: 0 var(--control-pad-x);
  color: var(--ink);
  /* Lighter than the bar it is on, never darker. */
  background: var(--card);
  border: var(--control-border) solid var(--rule);
  /* The same corner as the boxes you tick, the smallest the page has. */
  border-radius: var(--radius-xs);
  font: inherit;
  font-size: var(--control-font);
  line-height: var(--control-line);
}
/* A field is a thing you put words into, so it sits a little into the bar. */
.map-page .place-search input { box-shadow: var(--sink); }
.map-page .place-search input:focus-visible {
  outline: var(--focus-ring);
  outline-offset: 1px;
}
/* The search: a narrow box at the right end of the bar, saying Search. It
   has no button: Enter, or a phone's search key, asks where the place is
   (Alipasha, 11 Oct 2026). */
.map-page .place-search {
  flex: 0 1 11rem;
  width: 11rem;
  display: flex;
  min-width: 0;
  margin: 0;
}
.map-page .place-search label { flex: 1 1 auto; display: flex; min-width: 0; }
.map-page .place-search input {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
}

/* The bar's buttons that are a picture and no words: Near Me, with the map's
   own crosshair so the two are known for the same thing, and the switches
   for the sidebar and the list. Square, with the face of the bar's other
   buttons; a switch that is on wears the accent, as the view you are in does
   (Alipasha, 11 Oct 2026). */
.map-page .head-icon {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: var(--control-height);
  height: var(--control-height);
  padding: 0;
  color: var(--ink);
  background: var(--card);
  border: var(--control-border) solid var(--rule);
  border-radius: var(--radius-xs);
  box-shadow: var(--lift);
  cursor: pointer;
}
.map-page .head-icon svg { width: 1.2rem; height: 1.2rem; }
.map-page .near-me svg { fill: currentColor; }
.map-page .head-icon:hover { border-color: var(--sect); background: var(--ground-2); }
.map-page .head-icon[aria-pressed="true"] {
  color: var(--on-accent);
  background: var(--accent-strong);
  border-color: var(--accent-strong);
}
.map-page .head-icon[aria-pressed="true"]:hover { background: var(--accent-strong-hover); border-color: var(--accent-strong-hover); }
.map-page .head-icon:focus-visible { outline: var(--focus-ring); outline-offset: 2px; }
.map-page .near-me:disabled { opacity: 0.6; cursor: progress; }
/* Near Me measures from where you are on the map, and the list steps aside
   from the map, so both are only beside the map. */
.map-page .near-me[hidden],
.map-page:not(.view-local) .near-me,
.map-page:not(.view-local) #list-toggle { display: none; }

/* A second line of the bar while something is being measured from, or could
   be: what the list is in order of, the other places of the same name, and
   the way out. It is in the bar because it is an answer to the search box on
   it, and because the box has two halves with no row to spare. */
.map-page .near-bar {
  grid-column: 1 / -1;
  justify-content: flex-end;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem 0.7rem;
  min-width: 0;
  font-size: 0.9rem;
}
.map-page .near-line { margin: 0; color: var(--ink); }
.map-page .near-line.is-error { color: var(--unwhole-text); }
.map-page .near-action,
.map-page .near-other select {
  height: 1.9rem;
  padding: 0 0.7rem;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--radius-xs);
  box-shadow: var(--lift);
  font: inherit;
  font-weight: 400;
  cursor: pointer;
}
.map-page .near-other { display: flex; min-width: 0; }
.map-page .near-other select { max-width: min(22rem, 100%); font-weight: 400; }
/* At 16px on a phone, or an iPhone zooms the page in when it is tapped. */
@media (max-width: 700px) { .map-page .near-other select { font-size: var(--control-font); } }
.map-page .near-action:hover { border-color: var(--sect); background: var(--ground-2); }
.map-page .near-action:focus-visible,
.map-page .near-other select:focus-visible { outline: var(--focus-ring); outline-offset: 2px; }
/* Where the distances are counted from. The reader's own position keeps its
   blue dot; a place that was searched for takes the page's ink, so the two
   are never mistaken for each other. */
.map-page .near-origin { stroke: var(--card); fill: var(--ink); fill-opacity: 1; }
/* How far, ahead of where: it is what the list is in order of, so it is the
   one part of the second line set in the ink, and it never gives way to the
   ellipsis — the place after it does. */
.map-page .row-distance {
  flex: none;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.map-page .row-distance::after { content: '\00b7'; margin-left: 0.35rem; color: var(--muted); }

/* The finder's one bar, on a phone: above 700px what it holds moves into
   the sidebar (see "the sidebar holds the finder's controls" below). It is
   the foot of the box, the whole width of the window
   from the left edge, under the sidebar and the map (Alipasha, 11 Oct 2026).
   Add/Edit and the two switches on the left, the three views in the
   middle, Near Me and the search on the right. The outer two columns
   are equal, so the views stay in the middle whatever is either side of
   them. It is in the markup first, so a keyboard and a screen reader still
   reach the ways of narrowing the finder before what they narrow. */
.map-page .finder-head {
  grid-column: 1 / -1;
  grid-row: -2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  grid-template-areas: "start middle end";
  align-items: center;
  gap: 0.6rem 1rem;
  padding: 0.6rem 1rem;
  /* Dark, so it stands out beside the map: the sidebar's own colour, the
     accent's hue at a fifth of its colour, running down from a little
     darker than the sidebar to darker still, so the two read as one frame
     round the map (Alipasha, 11 Oct 2026). On it the buttons and the views
     not chosen run down from a muted purple to a darker one, edged in black,
     with a light line along their top and a dark one under them; the chosen
     view and the switches that are on run down in the accent, richer; and
     the search sinks into the sidebar's own dark. The words on every one
     have a shadow under them, as the sidebar's do (Alipasha, 12 Oct 2026).
     Under the pointer a button is a little lighter. */
  color: var(--bar-words);
  background: linear-gradient(oklch(from var(--accent-strong) 0.35 calc(c * 0.2) h), oklch(from var(--accent-strong) 0.2 calc(c * 0.2) h));
  border-top: 1px solid oklch(from var(--accent-strong) 0.48 calc(c * 0.2) h);
  /* A shadow rises from it over what the box holds. */
  position: relative;
  z-index: 2;
  box-shadow: 0 -1px 4px rgb(30 20 30 / 18%);
}
/* The bar's colours, for the filter sheet too: on a phone the views and
   Add/Edit move into it, out of the bar (app.js). Above 700px everything
   the bar held moves into the sidebar's head and foot, and keeps them. */
.map-page :is(.finder-head, .sheet-views, .side-head, .side-foot) {
  --bar-button: linear-gradient(oklch(from var(--accent-strong) 0.45 calc(c * 0.4) h), oklch(from var(--accent-strong) 0.35 calc(c * 0.1) h));
  --bar-button-hover: linear-gradient(oklch(from var(--accent-strong) 0.5 calc(c * 0.4) h), oklch(from var(--accent-strong) 0.4 calc(c * 0.1) h));
  --bar-on: linear-gradient(oklch(from var(--accent-strong) 0.5 calc(c * 1.5) h), oklch(from var(--accent-strong) 0.4 calc(c * 1.2) h));
  /* The view you are in, at the accent's own colour (Alipasha, 28 Oct 2026). */
  --bar-segment-on: linear-gradient(oklch(from var(--accent-strong) 0.55 c h), oklch(from var(--accent-strong) 0.45 c h));
  --bar-under: 0 1px oklch(from var(--accent-strong) calc(l - 0.05) calc(c * 0.2) h);
  --bar-top: inset 0 1px oklch(from var(--accent-strong) calc(l + 0.1) calc(c * 0.2) h);
  --bar-on-top: inset 0 1px oklch(from var(--accent-strong) calc(l + 0.2) calc(c * 1.5) h);
  --bar-words: var(--ground-2);
  --bar-quiet: oklch(from var(--ground-2) 0.76 c h);
  --bar-ring: oklch(from var(--accent-strong) 0.86 calc(c * 0.6) h);
}
/* The bar, the sidebar and the filter sheet in plain colours, for Safari
   before 18 (see tokens.css): light words on all three. */
@supports not (color: oklch(from red calc(l + 0.1) c calc(h + 1))) {
  .map-page {
    --finder-dark: #4c4452;
    --marker-face: linear-gradient(#a179ba, var(--accent-strong));
    --marker-face-hover: linear-gradient(#8d69a3, var(--accent-strong-hover));
  }
  .map-page .finder-head { background: linear-gradient(#3f3744, #1a131f); }
  .map-page :is(.finder-head, .sheet-views, .side-head, .side-foot) {
    --bar-button: linear-gradient(#5f4d6a, #3d393f);
    --bar-button-hover: linear-gradient(#6d5b79, #4a464d);
    --bar-on: linear-gradient(#8734b0, #632482);
    --bar-segment-on: linear-gradient(#8b59a7, #6d3c88);
  }
}
.map-page :is(.finder-head, .sheet-views, .side-head, .side-foot) :is(.btn-ghost, .head-icon),
.map-page :is(.finder-head, .side-head) .near-action,
.map-page :is(.finder-head, .side-head) .near-other select {
  color: var(--bar-words);
  background: var(--bar-button);
  border: 1px solid black;
  box-shadow: var(--bar-under), var(--bar-top);
  text-shadow: 0 1px 1px black;
}
/* Its edge is thinner than a button's elsewhere, so Edit is told its
   height, to stay as tall as the switches beside it. */
.map-page :is(.finder-head, .sheet-views, .side-head, .side-foot) .btn { height: var(--control-height); }
.map-page :is(.finder-head, .sheet-views, .side-head, .side-foot) :is(.btn-ghost, .head-icon):hover,
.map-page :is(.finder-head, .side-head) .near-action:hover { background: var(--bar-button-hover); }
.map-page .finder-head .head-icon[aria-pressed="true"],
.map-page .finder-head .head-icon[aria-pressed="true"]:hover {
  color: var(--on-accent);
  background: var(--bar-on);
  box-shadow: var(--bar-under), var(--bar-on-top);
}
/* The views are one control, so the black edge and the line under it are
   the control's, and each view has its own face and the light line along
   its top. */
.map-page :is(.finder-head, .sheet-views, .side-head, .side-foot) .view-toggle { background: none; border: 1px solid black; box-shadow: var(--bar-under); }
.map-page :is(.finder-head, .sheet-views, .side-head, .side-foot) .view-toggle button {
  color: var(--bar-words);
  background: var(--bar-button);
  box-shadow: var(--bar-top);
  text-shadow: 0 1px 1px black;
}
.map-page :is(.finder-head, .sheet-views, .side-head, .side-foot) .view-toggle button + button { border-left-color: black; }
.map-page :is(.finder-head, .sheet-views, .side-head, .side-foot) .view-toggle button:hover:not(.is-active):not([disabled]) { color: var(--bar-words); background: var(--bar-button-hover); }
.map-page :is(.finder-head, .sheet-views, .side-head, .side-foot) .view-toggle button.is-active {
  color: var(--on-accent);
  background: var(--bar-segment-on);
  box-shadow: var(--bar-on-top);
}
.map-page :is(.finder-head, .side-head) .place-search input {
  color: var(--bar-words);
  caret-color: var(--bar-words);
  background: var(--finder-dark);
  border: 1px solid black;
  box-shadow: var(--bar-under), inset 0 1px 3px oklch(from var(--accent-strong) 0.3 calc(c * 0.2) h);
  text-shadow: 0 1px 1px black;
}
.map-page :is(.finder-head, .side-head) .place-search input::placeholder { color: var(--bar-quiet); opacity: 1; }
.map-page :is(.finder-head, .side-head) .near-line { color: var(--bar-words); }
.map-page :is(.finder-head, .side-head) .near-line.is-error { color: oklch(from var(--unwhole-text) 0.82 c h); }
.map-page :is(.finder-head, .sheet-views, .side-head, .side-foot) :is(a, button, input, select):focus-visible { outline-color: var(--bar-ring); }
/* What Edit opens: a word to sangha builders and the way to sign in, on the
   page's own card over the dark bar, with the floating panel's shadow.
   home.js sets where it stands; until it has, it stands over the bar's
   left end. */
.map-page .edit-pop {
  position: fixed;
  inset: auto auto 4.5rem 1rem;
  width: min(21rem, calc(100vw - 2rem));
  margin: 0;
  padding: 1rem 1.1rem 1.1rem;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--radius-xs);
  /* At the sidebar's foot it is inside the dark, whose words have a shadow. */
  text-shadow: none;
  box-shadow: 0 6px 16px color-mix(in srgb, var(--charcoal) 13%, transparent),
              0 28px 64px color-mix(in srgb, var(--charcoal) 20%, transparent);
}
.map-page .edit-pop h2 { margin: 0 0 0.5rem; font-size: 1.1rem; }
.map-page .edit-pop p { margin: 0 0 0.6rem; font-size: 0.95rem; line-height: 1.5; }
.map-page .edit-pop .btn { margin-top: 0.3rem; }
/* A browser without pop-ups (Safari before 17) would show it all the time
   over the map; there it stays out of the way. */
@supports not selector(:popover-open) { .map-page .edit-pop { display: none; } }
/* It is on the card, not the dark, so its ring is the page's own. */
.map-page :is(.finder-head, .side-foot) .edit-pop :focus-visible { outline-color: var(--accent); }
.map-page :is(.head-start, .head-middle, .head-end) { display: flex; align-items: center; gap: 0.6rem; min-width: 0; }
.map-page .head-start { grid-area: start; justify-self: start; }
.map-page .head-middle { grid-area: middle; }
/* What is on the right keeps to the right edge, whatever width a browser
   gives the group. Safari measured the search box by the field's own width
   rather than the box's, so the group came out wider than what was in it
   and the room was left over at the right (Alipasha, 11 Oct 2026). */
.map-page .head-end { grid-area: end; justify-self: end; justify-content: flex-end; }
/* Where the three do not fit on one line, the views take a line of their
   own over the other two. With the two switches and Edit on the
   left and Near Me and the search on the right, one line needs about 830px
   (the views in the middle, and each side as wide as the wider of the two);
   it was 1040 when the left held more (Alipasha, 11 Oct 2026). */
@media (max-width: 900px) {
  .map-page .finder-head {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: "middle middle" "start end";
  }
  .map-page .head-middle { justify-self: center; }
}
/* The sidebar: what narrows the finder, down the left of the box over the
   bar, drawn as the plumliners' sidebar is (Alipasha, 11 Oct 2026): the
   finder's dark, with the bar under it in a light shade of it, light words, each
   section's name small and spaced in capitals, and each place the sidebar's
   whole width. Here each section folds away under a disclosure triangle. It
   is never taller than the map beside it; when its sections are, it
   scrolls. A shadow inside its right edge sets it back from the map. */
.map-page .finder-side {
  --side-words: var(--ground-2);
  --side-bright: var(--card);
  --side-name: oklch(from var(--plum) 0.86 c h);                          /* 5.9:1 */
  --side-hover: color-mix(in srgb, var(--ground-2) 10%, var(--finder-dark));
  --side-edge: color-mix(in srgb, var(--ground-2) 52%, var(--finder-dark)); /* 3.5:1 */
  grid-column: 1;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  max-height: var(--box-height);
  overflow-y: auto;
  padding: 0.9rem 0 0;
  color: var(--side-words);
  background: var(--finder-dark);
  box-shadow: inset -10px 0 14px -8px rgb(8 2 12 / 85%);
  /* Its words sit on the dark with a shadow under them (Alipasha, 12 Oct 2026). */
  text-shadow: 0 1px 1px black;
  font-size: 0.95rem;
  scrollbar-color: var(--side-edge) transparent;
}
.map-page .side-section + .side-section { margin-top: 0.9rem; }
/* How many sanghas the filters leave, at the sidebar's foot, and kept in
   sight there while the sections scroll above it. */
.map-page .finder-side .result-count {
  position: sticky;
  bottom: 0;
  margin: auto 0 0;
  padding: 0.7rem 1rem 0.8rem 1.6rem;
  color: var(--side-words);
  background: var(--finder-dark);
  border-top: 1px solid color-mix(in srgb, var(--ground-2) 18%, var(--finder-dark));
  font-size: 0.9rem;
}
/* Put away with the switch in the bar: its column closes, and what the box
   holds takes the room. */
.map-page.side-hidden { --side-width: 0px; }
.map-page.side-hidden .finder-side { display: none; }
/* The sidebar's switch shows the filters on a phone, and the sidebar
   itself above 700px; the list's switch says its name beside the map. */
.map-page #side-toggle .sidebar-glyph,
.map-page #list-toggle .toggle-word { display: none; }

/* ---- the sidebar holds the finder's controls (above 700px) ----------
   There is no bar: what it held is in the sidebar, as the phone's sheet
   already holds the views (Alipasha, 20 Oct 2026). At its head, what you
   look for: the switch that puts the sidebar away, the three views, and
   Near Me and the search, in the bar's own faces, the two square buttons
   in one column and the views and the search in the other, and under
   them how many sanghas all of it leaves. Under a line the filters, which
   narrow what the head finds. At its foot, under a line of its own, Add or
   Edit Your Sangha, for sangha builders rather than visitors (its name
   the same as what it opens, Alipasha, 20 Oct 2026). app.js
   moves them there (parkFinderViews); until it has, the bar is kept out
   of sight rather than drawn at the foot and then moved. */
@media (min-width: 701px) {
  .map-page .finder-head {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    border: 0;
  }
  .map-page .finder-side { padding: 0; }
  /* Both stay in sight while the filters scroll between them. */
  .map-page :is(.side-head, .side-foot) {
    position: sticky;
    z-index: 1;
    flex: none;
    background: var(--finder-dark);
  }
  .map-page .side-head {
    top: 0;
    display: grid;
    grid-template-columns: var(--control-height) minmax(0, 1fr);
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.9rem;
    padding: 1rem;
    border-bottom: 1px solid color-mix(in srgb, var(--ground-2) 18%, var(--finder-dark));
  }
  .map-page .side-head :is(.head-middle, .head-end) { display: contents; }
  .map-page .side-head .view-toggle { grid-column: 2; display: flex; width: 100%; }
  .map-page .side-head .view-toggle button { flex: 1 1 auto; padding-inline: 0.5em; white-space: nowrap; }
  .map-page .side-head .near-me { grid-column: 1; }
  .map-page .side-head .place-search { grid-column: 2; width: auto; }
  .map-page .side-head .near-bar { grid-column: 1 / -1; justify-content: flex-start; }
  .map-page .side-head .near-line { padding-left: 0.6rem; }
  /* The way to the nearest to a place names the place, which can take two
     or three lines at the sidebar's width. */
  .map-page .side-head .near-action {
    height: auto;
    min-height: 1.9rem;
    padding-block: 0.3rem;
    line-height: 1.3;
    text-align: start;
  }
  .map-page .side-head .near-other select { max-width: 100%; }
  /* The switch is the sidebar's own, and there while it is open, so it
     wears the face of the buttons beside it rather than the accent. */
  .map-page .side-head #side-toggle .filters-glyph { display: none; }
  .map-page .side-head #side-toggle .sidebar-glyph { display: block; }
  /* The count is the answer to the head and the filters both, so it is
     the head's last line, kept in sight with it while the filters scroll,
     and quieter than the controls over it. Its words start where every
     other line of words in the sidebar does, the sections' names and the
     places under them, at 1.6rem; the buttons and the boxes keep the edge
     a rem in (Alipasha, 20 Oct 2026). So does the line saying what the
     list is in order of. */
  .map-page .side-head .result-count {
    grid-column: 1 / -1;
    position: static;
    margin: 0.15rem 0 0;
    padding: 0 0 0 0.6rem;
    color: var(--side-name);
    background: none;
    border: 0;
    /* Never on two lines: a font a little wider than FiraGO runs into the
       head's own margin rather than wrapping. */
    white-space: nowrap;
  }
  /* The same room over Add or Edit Your Sangha as under it, so the line is the foot's
     edge rather than sitting on the button. */
  .map-page .side-foot {
    bottom: 0;
    margin-top: auto;
    padding: 1rem;
    border-top: 1px solid color-mix(in srgb, var(--ground-2) 18%, var(--finder-dark));
  }
  .map-page .side-foot #edit-toggle { width: 100%; justify-content: center; }
  /* Put away, the sidebar keeps a strip as wide as its switch, so the way
     to bring it back stays where it was. */
  .map-page.side-hidden { --side-width: calc(var(--control-height) + 2rem); }
  .map-page.side-hidden .finder-side { display: flex; overflow: hidden; }
  .map-page.side-hidden .finder-side > :not(.side-head),
  .map-page.side-hidden .side-head > :not(#side-toggle) { display: none; }
  .map-page.side-hidden .side-head { grid-template-columns: var(--control-height); margin: 0; border-bottom: 0; }

  /* The list's switch, in the site's white face, where the list comes in:
     on the map's corner beside the sidebar while the list is away, and in
     the same place while it is in, in a band at the list's head, like the
     tables' heads, sunk as the bar's current page is. It never moves, so a
     second press puts the list away from where the first brought it
     (Alipasha, 20 Oct 2026). */
  .map-page.view-local #sfm-views > #list-toggle {
    grid-column: 2;
    grid-row: 1;
    align-self: start;
    justify-self: start;
    z-index: 1001;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    width: auto;
    margin: 0.75rem 0.75rem 0.75rem 1rem;
    padding: 0 0.9rem 0 0.75rem;
    color: var(--ink);
    background: var(--white-face);
    border: 1px solid var(--white-face-edge);
    border-radius: var(--radius-xs);
    box-shadow: var(--white-face-lines);
    font-size: 0.95rem;
  }
  .map-page.view-local #sfm-views > #list-toggle:hover { background: var(--white-face-hover); }
  .map-page.view-local #sfm-views > #list-toggle[aria-pressed="true"] {
    background: var(--sunk-face);
    box-shadow: var(--sunk-face-lines);
  }
  .map-page #sfm-views > #list-toggle .toggle-word { display: inline; }

  .map-page.view-local:not(.map-wide) .sangha-cards:not([hidden])::before {
    content: "";
    position: sticky;
    top: 0;
    z-index: 1;
    height: calc(var(--control-height) + 1.5rem);
    background: var(--ground-2);
    border-bottom: 1px solid var(--rule);
  }
}
/* The section's name, with the triangle in the margin before it, so the
   names and the places under them start at one edge. */
.map-page .side-section > summary {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 0 0.5rem;
  padding: 0.25rem 1rem 0.3rem 1.6rem;
  list-style: none;
  cursor: pointer;
  color: var(--side-name);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.map-page .side-section > summary::-webkit-details-marker { display: none; }
.map-page .side-section > summary::before {
  content: '';
  position: absolute;
  left: 0.8rem;
  top: 0.62rem;
  border-left: 0.34rem solid currentColor;
  border-block: 0.24rem solid transparent;
  transition: transform 0.12s ease;
}
.map-page .side-section[open] > summary::before { transform: rotate(90deg); }
.map-page .side-section > summary:hover { color: var(--side-bright); }
/* Folded, a section says what is chosen in it, on a line under its name. */
.map-page .side-chosen {
  flex: 1 0 100%;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--side-words);
  font-size: 0.9rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}
.map-page .side-chosen:empty,
.map-page .side-section[open] .side-chosen { display: none; }
.map-page .side-items {
  display: flex;
  flex-direction: column;
  min-width: 0;
  margin: 0.2rem 0 0;
  padding: 0;
  border: 0;
}
.map-page .side-item {
  position: relative;
  display: flex;
  /* The box stands beside the first line of a name that runs to two
     (Alipasha, 15 Oct 2026), rather than between its lines. */
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.3rem 1rem 0.3rem 1.6rem;
  line-height: 1.3;
  cursor: pointer;
}
.map-page .side-item:hover { background: var(--side-hover); }
.map-page .side-item > span { min-width: 0; overflow-wrap: anywhere; }
/* Every place shows its box: an edge that holds 3:1, and filled with the
   bar's words, a dark tick in it, when ticked (Alipasha, 11 Oct 2026: several
   languages and affinities at once). */
.map-page .side-tick input {
  appearance: none;
  -webkit-appearance: none;
  flex: none;
  display: grid;
  place-items: center;
  width: 1rem;
  height: 1rem;
  /* Centred on that first line: 1.3 × 0.95rem high, against a 1rem box. */
  margin: calc((1.3 * 0.95rem - 1rem) / 2) 0 0;
  background: transparent;
  border: 1.5px solid var(--side-edge);
  border-radius: 3px;
  cursor: pointer;
}
.map-page .side-tick input:checked { background: var(--side-words); border-color: var(--side-words); }
.map-page .side-tick input:checked::after {
  content: '';
  width: 0.28rem;
  height: 0.56rem;
  margin-top: -0.12rem;
  border: solid var(--finder-dark);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.map-page .side-tick:has(input:checked) { color: var(--side-bright); }
/* Select All, while only some of its section are ticked: a dash. */
.map-page .side-tick input:indeterminate { background: var(--side-words); border-color: var(--side-words); }
.map-page .side-tick input:indeterminate::after {
  content: '';
  width: 0.5rem;
  height: 0;
  border-top: 2px solid var(--finder-dark);
}
.map-page .finder-side summary:focus-visible,
.map-page .side-item:has(input:focus-visible) {
  outline: 2px solid var(--accent-soft);
  outline-offset: -2px;
}
.map-page .side-tick input:focus-visible { outline: none; }

/* One control in three parts rather than three buttons: a track, and the view
   you are in sitting in it. */
/* The same corner as the menus and the field it shares a row with: it was the
   one pill among boxes. */
/* One control, not three buttons floating in a tray: the segments run edge to
   edge inside it, so the one you are in reaches the control's own border
   instead of sitting in from it. The lift belongs to the control, the way it
   belongs to a menu. */
.map-page .view-toggle {
  display: inline-flex;
  align-items: stretch;
  gap: 0;
  /* The same height as the menus on the row above it. */
  height: var(--control-height);
  padding: 0;
  overflow: hidden;
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--radius-xs);
  box-shadow: var(--lift);
}
/* A segment you have not chosen wears the menus' own surface; one line
   divides it from the next. */
.map-page .view-toggle button {
  font-family: var(--font); font-size-adjust: var(--x-height);
  font-size: 0.95rem;
  font-weight: 400;
  padding: 0.3em 1.05em;
  color: var(--ink);
  background: var(--card);
  border: 0;
  border-radius: 0;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}
.map-page .view-toggle button + button { border-left: 1px solid var(--rule); }
.map-page .view-toggle button:hover:not(.is-active):not([disabled]) { color: var(--sect-text); background: var(--card); }
/* The one you are in is filled, corner to corner. */
.map-page .view-toggle button.is-active {
  color: var(--on-accent);
  background: var(--accent-strong);
  border-color: var(--accent-strong);
}
.map-page .view-toggle button[disabled] { opacity: 0.5; cursor: default; }
/* The bar's light ring, inside the view, so the toggle's edge does not cut it off. */
.map-page .view-toggle button:focus-visible { outline: 2.5px solid var(--bar-ring, var(--accent)); outline-offset: -3px; }

/* The map no longer fills the window — the page has a bar above it and a
   footer below, and a band reads as part of a page where a full screen does
   not. */
.map-page #sfm-map {
  height: var(--box-height);
  min-height: 0;
  /* The sea's blue from the map's own tiles. Between zoom levels the tiles
     are drawn a fraction of a pixel apart, and on the band's colour that
     hairline crossed the whole map; on the sea's it is gone over water and
     faint over land. */
  background: #aad3df;
  border-block: 1px solid var(--rule);
  /* Leaflet stacks its own panes from 400 up. Left in the page's own stacking
     order those beat the site header's 50 and the map slid over the bar as
     soon as anybody scrolled; a stacking context of its own keeps Leaflet's
     numbers inside the map, where they mean something. */
  position: relative;
  z-index: 0;
}
/* Over the box, since the box has the whole window. */
.map-page .map-error {
  position: fixed;
  inset: 5rem auto auto 50%;
  z-index: 1000;
  width: max-content;
  max-width: min(36rem, calc(100% - 2rem));
  margin: 0;
  transform: translateX(-50%);
  color: var(--unwhole-text);
  background: var(--unwhole-soft);
  border: 1px solid var(--unwhole);
  border-radius: var(--radius-xs);
}

/* Split: the list in a column beside the map, both inside the page's own
   width. The list scrolls on its own so the map stays put while you read. */
/* ---- the box, and the two shapes it takes ------------------------
   One container holds a view: the map with its list beside it, or the table
   with the sangha beside that, with the sidebar down the left of both. One
   line down the middle, and the row the edge cuts in half is what says the
   list carries on. */
.map-page #sfm-views {
  /* The rest of the window under the site's bar, and its whole width, in two
     rows: the finder's bar, and what the view holds. Each part of the view
     fills its row and scrolls where it holds more. */
  --box-height: 100%;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 0;
  align-items: stretch;
  width: 100%;
  margin: 0;
  padding: 0;
  background: var(--card);
  overflow: hidden;
}
/* The map takes the wider half; the table takes the narrower one, because a
   line of columns needs less room than a map does. */
.map-page.view-local #sfm-views { grid-template-columns: var(--side-width) minmax(19rem, 24rem) 1fr; }
/* The pane holds one sangha and stops growing once it has room for one; the
   table holds four columns and every pixel it does not get comes out of them.
   Split in fractions, the pane took 459px at every width over 1120 and the
   table's Languages column was left with 87 — enough for "Engl…" on four
   lines in five. */
.map-page.view-table #sfm-views { grid-template-columns: var(--side-width) minmax(0, 1fr) minmax(20rem, 22rem); }
.map-page.view-table .sangha-cards:not([hidden]) {
  grid-column: 2;
  grid-row: 1;
  display: block;
  max-width: none;
  max-height: var(--box-height);
  overflow-y: auto;
  margin: 0;
  padding: 0;
  background: transparent;
}
/* Both regions can be given focus by hand when a panel closes under the
   reader; neither draws a ring for it, because arriving there is not an
   error and a ring around a whole column reads as one. */
.map-page .sangha-cards:focus,
.map-page .sangha-cards:focus-visible,
.map-page .detail-pane:focus,
.map-page .detail-pane:focus-visible { outline: none; }
/* The pane, the finder's inspector, is white from the top of the box to the
   foot, with no head of its own (Alipasha, 11 Oct 2026): the chosen row is
   the deep fill, and the pane is what it opens. */
.map-page .detail-pane {
  grid-column: 3;
  grid-row: 1;
  max-height: var(--box-height);
  overflow-y: auto;
  padding: 1.5rem 1.5rem 2rem;
  background: var(--card);
  border-left: 1px solid var(--rule);
}
/* A real table, and sized like one. It was a grid of <button>s, and a grid or
   a flex box set on a table or its rows takes the table semantics away in
   every browser — which is the whole of why it is a table now (#37). So the
   columns are sized the way a table's are: `table-layout: fixed`, and a width
   on each column. Each cell is cut where it runs out rather than wrapping, so
   every line is one line.

   All leads with the name, then the kind, then the languages. Online leads
   with the two questions left when every sangha is online — the language and
   when it meets — and the name follows. Which columns there are, and in what
   order, is app.js's; these are the widths that order needs. */
.map-page .sangha-table {
  width: 100%;
  table-layout: fixed;
  /* Separate rather than collapsed: a collapsed table drops the borders of a
     sticky head, and the head has to hold its line over the rows passing
     underneath it. */
  border-collapse: separate;
  border-spacing: 0;
}
.map-page .sangha-table th,
.map-page .sangha-table td {
  padding: 0.35rem 0.5rem;
  text-align: left;
  font-weight: 400;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.map-page .sangha-table th:first-child,
.map-page .sangha-table td:first-child { padding-left: 1rem; }
.map-page .sangha-table th:last-child,
.map-page .sangha-table td:last-child { padding-right: 1rem; }
/* Kind is a fixed measure because it is a fixed vocabulary: 9.5rem is what
   "Lay Practice Centre" needs, which is 180 sanghas. "Monastic Practice
   Centre" wants half as much again and is one sangha in 1,497, so it is the
   one label that is cut. The name and the affinities share what is left. */
.map-page .sangha-table .line-name { width: 47%; }
.map-page .sangha-table .line-kind { width: 9.5rem; }
.map-page .sangha-table .line-affinities { width: 34%; }
.map-page.view-online .sangha-table .line-name { width: 45%; }
.map-page.view-online .sangha-table .line-when { width: 30%; }
.map-page.view-online .sangha-table .line-affinities { width: 25%; }

/* The head stays put while the rows go under it. Its padding is the cells'
   own across and less of it up and down, moved onto the button inside it, so
   the button is the full height of a narrow band while its text starts
   exactly where a cell's does. The first and
   last are named here as well, because the rule above that gives the end
   cells their wider padding outweighs this one, and the head's first word
   was sitting a rem to the right of the column under it. */
.map-page .sangha-table thead th,
.map-page .sangha-table thead th:first-child,
.map-page .sangha-table thead th:last-child {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 0;
  background: var(--ground-2);
  border-bottom: 1px solid var(--rule);
}
/* On a phone the page scrolls rather than the box, so the box only clips
   what spills (overflow: clip, which makes no box of its own to scroll), and
   the head stays put under the site's bar instead: 49.6px tall up to 620px,
   where its links fold under Menu, and 52.4px from there to 700px, less the
   pixel of its edge (the look review, 16 Oct 2026; measured 20 Oct). */
@media (max-width: 700px) {
  .map-page #sfm-views { overflow: clip; }
  .map-page .sangha-table thead th,
  .map-page .sangha-table thead th:first-child,
  .map-page .sangha-table thead th:last-child { top: calc(3.1rem - 1px); }
}
@media (min-width: 621px) and (max-width: 700px) {
  .map-page .sangha-table thead th,
  .map-page .sangha-table thead th:first-child,
  .map-page .sangha-table thead th:last-child { top: calc(3.27rem - 1px); }
}
/* Each heading is the control that sorts by its column: pressed once it
   sorts, pressed again it turns round. The arrow says which way to anyone
   looking, and `aria-sort` on the heading says it to everyone else. */
.map-page .head-sort {
  display: block;
  width: 100%;
  min-width: 0;
  padding: 0.35rem 0.5rem;
  text-align: left;
  color: var(--muted);
  background: transparent;
  border: 0;
  font: inherit;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.map-page .head-cell:first-child .head-sort { padding-left: 1rem; }
.map-page .head-cell:last-child .head-sort { padding-right: 1rem; }
.map-page .head-sort:hover { color: var(--ink); }
.map-page .head-sort:focus-visible { outline: var(--focus-ring); outline-offset: -3px; }
.map-page .head-cell[data-sorted] .head-sort { color: var(--sect-text); }
.map-page .head-cell[data-sorted="up"] .head-sort::after { content: " \2191"; }
.map-page .head-cell[data-sorted="down"] .head-sort::after { content: " \2193"; }

.map-page .sangha-line {
  font-size: 0.95rem;
  color: var(--ink);
  cursor: pointer;
}
/* The rows take turns between the list's ground and a breath of the head's
   band, rather than each having a line under it, as the plumliners' tables
   do. A row that is hidden does not count. */
.map-page .sangha-table > tbody > .sangha-line:nth-child(even of :not([hidden])) {
  background: color-mix(in srgb, var(--ground-2) 70%, var(--card));
}
/* The name cell carries the control, because a row is not a control and a
   button in every cell would be four tab stops where one is wanted. It is
   drawn as the text it replaced. */
.map-page .line-choose {
  display: block;
  width: 100%;
  min-width: 0;
  padding: 0;
  text-align: left;
  font: inherit;
  color: inherit;
  background: transparent;
  border: 0;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.map-page .line-choose:focus-visible { outline: var(--focus-ring); outline-offset: 2px; }
/* On the filled row the ring is white, or it would vanish into the fill. */
.map-page .sangha-line.is-selected .line-choose:focus-visible { outline-color: var(--on-accent); }
.map-page .sangha-line .line-kind,
.map-page .sangha-line .line-when,
.map-page .sangha-line .line-affinities { color: var(--muted); }
.map-page .sangha-line:hover th,
.map-page .sangha-line:hover td { background: var(--sect-soft); }
/* The one you are looking at is filled, like the segment you are in. */
.map-page .sangha-line.is-selected th,
.map-page .sangha-line.is-selected td,
.map-page .sangha-line.is-selected:hover th,
.map-page .sangha-line.is-selected:hover td {
  color: var(--on-accent);
  background: var(--accent-strong);
}
.map-page .sangha-line.is-selected .line-kind,
.map-page .sangha-line.is-selected .line-when,
.map-page .sangha-line.is-selected .line-affinities { color: var(--on-accent); }
.map-page.view-table .list-more { display: block; margin: 1rem auto 1.2rem; }

/* Under 1040px there is no room for the sidebar, a table and a pane beside
   it: the pane goes below the table, and the sidebar runs down beside both. */
@media (max-width: 1040px) {
  /* Beside the map the list and the map share what the sidebar leaves, the
     map the larger part, rather than the list keeping its full width and the
     map being squeezed to a strip. */
  .map-page.view-local #sfm-views { grid-template-columns: var(--side-width) minmax(14rem, 1fr) minmax(0, 1.2fr); }
  /* The table and the pane under it share the window's height. */
  .map-page.view-table #sfm-views {
    grid-template-columns: var(--side-width) minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) minmax(0, 0.8fr) auto;
  }
  .map-page .detail-pane { grid-column: 2; grid-row: 2; border-left: 0; border-top: 1px solid var(--rule); }
  .map-page.view-table .finder-side { grid-row: 1 / span 2; max-height: none; }
}
/* Under 900px the table keeps the two columns that fit. */
@media (max-width: 900px) {
  /* Two columns, and the affinities are the ones that go: All keeps the name
     and the kind, Online the name and when it meets. The name leads here
     whatever the order of the wide table, because somebody scrolling a phone
     finds the sangha by its name first — and both of those are app.js's doing
     now. A column can be hidden from the stylesheet; a column cannot be moved
     from it, since a table's columns are the order they are written in. */
  .map-page .sangha-table .line-name { width: 63%; }
  .map-page .sangha-table .line-kind,
  .map-page .sangha-table .line-when { width: 37%; }
  .map-page.view-online .sangha-table .line-name { width: 63%; }
  .map-page.view-online .sangha-table .line-when { width: 37%; }
}

/* Expanded: the list steps aside and the map takes the whole box. Only
   above 700px, where app.js lets the map expand (mapMayExpand): the page
   arrives expanded, and a phone shows its list under the map as before. */
@media (min-width: 701px) {
  .map-page.view-local.map-wide #sfm-views { grid-template-columns: var(--side-width) minmax(0, 1fr); }
  .map-page.view-local.map-wide .sangha-cards { display: none; }
  .map-page.view-local.map-wide #sfm-map { grid-column: 2; border-left: 0; }
}

/* Inside the box the map has no edges of its own; the one line between it and
   the list is what divides the two halves. */
.map-page.view-local #sfm-map {
  grid-column: 3;
  grid-row: 1;
  height: var(--box-height);
  border: 0;
  border-left: 1px solid var(--rule);
  border-radius: 0;
  box-shadow: none;
}
.map-page.view-local .sangha-cards:not([hidden]) {
  grid-column: 2;
  grid-row: 1;
  /* minmax(0, 1fr), not 1fr: a grid track's automatic minimum is its content,
     and the address line does not wrap, so the column grew past the page and
     took a horizontal scrollbar with it. */
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  max-height: var(--box-height);
  overflow-y: auto;
  padding: 0;
  margin: 0;
  max-width: none;
  background: transparent;
}
/* In the box the rows are one list rather than a stack of small panels: no
   box of their own, and no line between one and the next. They take turns
   in the tables' two tones instead, so the list beside the map reads as the
   tables do (Alipasha, 11 Oct 2026). A row that is hidden does not count,
   and the row under the pointer keeps its own tint. */
.map-page.view-local .sangha-row {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0.7rem 1rem 0.75rem;
}
.map-page.view-local .sangha-row:nth-child(even of .sangha-row:not([hidden])):not(:hover) {
  background: color-mix(in srgb, var(--ground-2) 70%, var(--card));
}
.map-page.view-local .list-more { margin: 0.9rem 0 1.1rem; }
.map-page.view-local .cards-empty { min-height: 0; padding: 2rem 1rem; }

/* An online sangha has no address and no pin, so the cards are the only place
   it can appear (#36). They carry every match, local sanghas included, in the
   panel shape the rest of the site uses for a list of things. */
.map-page .sangha-cards:not([hidden]) {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr));
  min-width: 0;
  /* Rows, so they sit closer together than the cards did. */
  gap: 0.5rem;
  align-content: start;
  align-items: start;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 1.4rem 20px 2.4rem;
}
/* A row. The list beside the map is a list of names, not a stack of panels:
   the name, and one line under it saying what kind of sangha it is and where
   or when it meets. Everything else is in the panel the row opens. */
.map-page .sangha-row {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0.65rem 0.9rem 0.7rem;
  text-align: left;
  font: inherit;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--radius-xs);
  /* No --lift of its own. The rows run edge to edge inside a box that is
     already lifted, and a shadow under each of two hundred names turned the
     list into a stack of slabs. The hairline between them is enough. */
  cursor: pointer;
}
.map-page .sangha-row:hover { background: var(--sect-soft); }
/* Inside the row: the list's box would cut off a ring drawn outside it. */
.map-page .sangha-row:focus-visible { outline: var(--focus-ring); outline-offset: -3px; }
/* One line each, cut with an ellipsis: a row that wraps is a row that makes
   the list a different height everywhere it happens. */
/* Quiet: a list of two hundred names is read by scanning, and every one of
   them set bold and every kind set in its own colour made a wall. The map
   keeps the colours — that is where they tell you something. */
.map-page .row-name {
  min-width: 0;
  color: var(--ink);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* The second line is what a name is checked against, not what is read, so it
   is set smaller than the name above it. It stays on --muted: the page's grey
   is 5.5:1 on the card, and anything lighter stops holding the 4.5 small text
   has to hold. */
.map-page .row-meta {
  display: flex;
  min-width: 0;
  align-items: baseline;
  gap: 0.35rem;
  font-size: 0.8rem;
  line-height: 1.45;
}
/* On the hover fill the page's grey is 4.4:1, under what small text has to
   hold, so it takes a step towards the ink. */
.map-page .sangha-row:hover :is(.row-meta, .row-rest),
.map-page .sangha-line:hover .line-kind,
.map-page .sangha-line:hover .line-when,
.map-page .sangha-line:hover .line-affinities { color: color-mix(in srgb, var(--muted) 85%, var(--ink)); }
.map-page .row-rest {
  min-width: 0;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* No separator in front of it: the row's second line begins with where the
   sangha is. The middot that used to sit here divided that from the kind, and
   the kind has gone. */

/* The panel a row or a pin opens: the sangha in full, over the page rather
   than pushing the list apart under it. `popover` puts it in the top layer,
   so it clears the map without a z-index of its own. */
.map-page .sangha-panel {
  display: none;
  width: min(32rem, calc(100vw - 2rem));
  /* The panel does not scroll — the tail is drawn outside its edge and would
     be clipped away. What is inside it scrolls. */
  overflow: visible;
  padding: 1.2rem 1.2rem 1.1rem;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--radius-xs);
  /* It takes the page's corner like everything else; what lifts it off the
     page is the shadow, and only the shadow — deeper and wider than anything
     else here carries, because it is the one thing that floats. */
  box-shadow: 0 6px 16px color-mix(in srgb, var(--charcoal) 13%, transparent),
              0 28px 64px color-mix(in srgb, var(--charcoal) 20%, transparent);
}
@supports selector(:popover-open) {
  .map-page .sangha-panel:popover-open { display: block; }
}
/* Where `popover` is not understood the panel is shown by hand, and placed by
   hand with it. */
.map-page .sangha-panel.is-open {
  display: block;
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 2000;
  transform: translate(-50%, -50%);
}
/* Where it has been placed beside a row, it is placed in full: the centring
   above would move it half its own width and height off that spot. */
.map-page .sangha-panel.is-open[data-tail] { transform: none; }
/* No dimming behind it: it is a panel beside the row you pressed, not a
   light box over the page. It carries a little more shadow instead, since
   nothing else separates it from what is underneath. */
.map-page .sangha-panel::backdrop { background: transparent; }
.map-page .panel-scroll { max-height: min(40rem, 80vh); max-height: min(40rem, 80dvh); overflow-y: auto; }
/* Over the map the card is kept low, so it covers less of what is around
   the pin: the name a step smaller, and three lines of the sangha's own
   words before More. */
.map-page .sangha-panel .card-title { font-size: 1.35rem; }
.map-page .sangha-panel .card-description.is-clamped { -webkit-line-clamp: 3; line-clamp: 3; }
/* The way out, spoken above 700px and drawn below it. Outside the scrolling
   part, so on a phone it is at the foot of the panel wherever the reader has
   got to in the sangha. */
.map-page .panel-close {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
@media (max-width: 700px) {
  .map-page .panel-close {
    position: static;
    display: block;
    width: 100%;
    height: auto;
    margin: 1rem 0 0;
    padding: var(--control-pad-y) var(--control-pad-x);
    overflow: visible;
    clip: auto;
    color: var(--ink);
    background: var(--card);
    border: var(--control-border) solid var(--rule);
    border-radius: var(--radius-xs);
    box-shadow: var(--lift);
    font: inherit;
    font-size: var(--control-font);
    line-height: var(--control-line);
    font-weight: 400;
    cursor: pointer;
  }
  .map-page .panel-close:hover { border-color: var(--sect); background: var(--ground-2); }
}
/* Nothing inside closes it — Escape, a press outside, or the row again — so
   the panel itself takes the focus when it opens. It draws no ring for that:
   the panel arriving is what says where you are, and a ring around the whole
   of it reads as an error. */
.map-page .sangha-panel:focus,
.map-page .sangha-panel:focus-visible { outline: none; }
/* The tail: a small square of the panel's own surface, turned on its corner
   and pushed half out of the edge, with the two sides that show carrying the
   panel's border. It sits level with the middle of the row that opened the
   panel, so the two are read as one thing. */
.map-page .sangha-panel[data-tail]::before {
  content: "";
  position: absolute;
  top: var(--tail-top, 2rem);
  width: 0.75rem;
  height: 0.75rem;
  margin-top: -0.375rem;
  background: var(--card);
  border: 1px solid var(--rule);
  transform: rotate(45deg);
}
.map-page .sangha-panel[data-tail="left"]::before {
  left: -0.4rem;
  border-top: 0;
  border-right: 0;
}
.map-page .sangha-panel[data-tail="right"]::before {
  right: -0.4rem;
  border-bottom: 0;
  border-left: 0;
}

/* ---- the sangha, in full --------------------------------------
   The card a row, a pin or a line opens: in the panel over the map, and in
   the pane beside the table. Begun again from a blank sheet (Alipasha,
   11 Oct 2026): each part on a shaded tile of its own, with its name small
   and in capitals over what answers it, as the sidebar names what it
   narrows. The short facts — where, when, languages, affinities — stand two
   to a row wherever there is room for two, which is the panel over the map,
   and one under another in the narrow pane beside the table. Three kinds of
   words: the name, the answers in the ink, and quiet notes. The panel and
   the pane draw their own surface, so the card brings only its contents. */
.map-page .card-open {
  --card-tile: var(--ground-2);
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  color: var(--ink);
}
.map-page .card-head { display: flex; flex-direction: column; gap: 0.3rem; margin-bottom: 0.4rem; }
/* The name is the biggest thing on the card, in the weight of every heading
   under a page's title. Where the sangha has a page, the name is the way
   there, in the plum of everything else on the card that can be followed. */
.map-page .card-title {
  margin: 0;
  font-size: 1.5rem;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--ink);
  overflow-wrap: anywhere;
}
.map-page .card-title a { color: var(--sect-text); text-decoration: none; }
.map-page .card-title a:hover { text-decoration: underline; }
.map-page .card-title a:focus-visible { outline: var(--focus-ring); outline-offset: 2px; border-radius: var(--radius-xs); }
.map-page .card-lede { margin: 0; color: var(--muted); font-size: 0.95rem; line-height: 1.45; }
.map-page .card-part {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.3rem;
  min-width: 0;
  padding: 0.65rem 0.85rem 0.75rem;
  background: var(--card-tile);
  border-radius: var(--radius-xs);
}
/* Two to a row where each can be at least 11rem wide, and one where not; a
   fact left on its own at the end takes the whole row. */
.map-page .card-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 0.6rem;
}
.map-page .card-facts > :last-child:nth-child(odd) { grid-column: 1 / -1; }
/* A part's name, set as the sidebar sets its sections' names. */
.map-page .card-label {
  margin: 0 0 0.1rem;
  color: var(--sect-text);
  font-size: 0.75rem;
  line-height: 1.4;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.map-page .card-value,
.map-page .card-description {
  margin: 0;
  color: var(--ink);
  font-size: 1rem;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.map-page .card-note { margin: 0; color: var(--muted); font-size: 0.9rem; line-height: 1.45; overflow-wrap: anywhere; }
/* Each meeting its own line, and the sangha's own time under the reader's. */
.map-page .card-meetings {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.map-page .card-meetings li { display: flex; flex-direction: column; gap: 0.1rem; }
/* Whose time a line is, before it, quietly, as on a sangha's own page. */
.map-page .card-time-label { color: var(--muted); }
/* Six lines of a sangha's own words, and a way to the rest. Some of them run
   to a page. */
.map-page .card-description.is-clamped {
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
  line-clamp: 6;
  overflow: hidden;
}
.map-page .card-more {
  margin: 0;
  padding: 0;
  font: inherit;
  font-size: 0.9rem;
  color: var(--sect-text);
  background: none;
  border: 0;
  text-decoration: var(--link-underline);
  text-underline-offset: var(--link-offset);
  cursor: pointer;
}
.map-page .card-more:focus-visible { outline: var(--focus-ring); outline-offset: 2px; border-radius: var(--radius-xs); }
/* Who you would reach, and the ways to reach them beside the name where
   there is room, under it where not. */
.map-page .card-reach {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  align-self: stretch;
}
.map-page .card-ways { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 0; }
/* Who stands behind the sangha: last, quiet, and off the tiles, because it
   is not how you reach the group. */
.map-page .card-support {
  margin: 0.2rem 0 0;
  color: var(--muted);
  font-size: 0.9rem;
  overflow-wrap: anywhere;
}

/* The marker is a dot drawn by the page, not an image from a CDN — which is
   also why the shadow the CSP refused is gone. */
.map-page .sangha-pin .pin-dot {
  display: block;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--marker-face);
  border: 2px solid var(--card);
  /* A thin dark edge as well as the pale ring, so the dot holds its shape on
     pale ground and on dark, and a shadow under it, so it stands off the map. */
  box-shadow: 0 0 1px 1px rgba(0,0,0,0.3), 0 2px 5px rgba(0,0,0,0.6);
}
.map-page .leaflet-marker-icon:focus-visible .pin-dot { outline: var(--focus-ring); outline-offset: 2px; }

/* The map's own + and −, and the line that credits its makers, in the
   site's type and the white button's face, as the List button above them
   is, rather than in the map library's grey and blue (Alipasha, 21 Oct
   2026). */
.map-page .leaflet-container { font-family: var(--font); }
.map-page .leaflet-bar {
  border: 0; border-radius: var(--radius-xs); overflow: hidden;
  box-shadow: var(--white-face-lines);
}
.map-page .leaflet-bar a {
  width: 2.1rem; height: 2.1rem;
  font: 400 1.35rem/2.1rem var(--font); text-indent: 0;
  color: var(--ink); background: var(--white-face);
  border-bottom: 1px solid var(--rule);
}
.map-page .leaflet-bar a:last-child { border-bottom: 0; }
.map-page .leaflet-bar a:is(:hover, :focus) { color: var(--ink); background: var(--white-face-hover); }
.map-page .leaflet-bar a.leaflet-disabled { color: var(--muted); background: var(--white-face); cursor: default; }
.map-page .leaflet-bar a:focus-visible { outline: var(--focus-ring); outline-offset: -3px; }
.map-page .leaflet-control-attribution { font-size: 0.75rem; color: var(--muted); background: color-mix(in srgb, var(--card) 85%, transparent); }
.map-page .leaflet-control-attribution a { color: var(--sect-text); }

/* A cluster is not a kind of sangha, so it wears the site's accent rather than
   any family's colour, with the same ring and edge the pins have. */
.map-page .sangha-cluster {
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--on-accent);
  background: var(--marker-face);
  text-shadow: 0 -1px 1px black;
  border: 2px solid var(--card);
  box-shadow: 0 0 1px 1px rgba(0,0,0,0.3), 0 2px 5px rgba(0,0,0,0.6);
  font-family: var(--font); font-size-adjust: var(--x-height);
  font-weight: 600;
  font-size: 0.85rem;
  line-height: 1;
}
.map-page .sangha-cluster.cluster-many { font-size: 0.95rem; }
.map-page .sangha-cluster:hover { background: var(--marker-face-hover); }
.map-page .sangha-cluster:focus-visible { outline: var(--focus-ring); outline-offset: 2px; }
/* Nothing matched: the box keeps its height, says so in the middle of it, and
   offers the way back. */
.map-page .cards-empty {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 0.9rem;
  min-height: 12rem;
  margin: 0;
  padding: 2rem 1.4rem;
  color: var(--muted);
  text-align: center;
}
.map-page .cards-empty-line { margin: 0; }
/* And the pane beside the table goes while there is nothing to put in it,
   rather than standing there as an empty column with a line down its side. */
.map-page.no-matches.view-table #sfm-views { grid-template-columns: var(--side-width) minmax(0, 1fr); }
.map-page.no-matches .detail-pane { display: none; }
/* Where the pane sits under the table, the table takes the pane's room too,
   rather than leaving an empty band under "nothing matched". */
@media (min-width: 701px) and (max-width: 1040px) {
  .map-page.no-matches.view-table #sfm-views { grid-template-rows: minmax(0, 1fr) auto; }
  .map-page.no-matches.view-table .finder-side { grid-row: 1; }
}
/* The way to the rest of the list, on a row of its own however many columns
   the list has. */
.map-page .list-more {
  grid-column: 1 / -1;
  justify-self: center;
  margin: 0.4rem 0 0.2rem;
  font-size: 0.95rem;
}

@media (max-width: 700px) {
  /* A phone screen is 844px tall, and the page was spending 580 of them before
     the map began. The words stay — they say what the page is for — but they
     are set at reading size rather than at the size a landing page gives
     them. */
  /* The bar is pinned to the foot of the screen while the page scrolls
     under it (Alipasha, 11 Oct 2026). With the filters script, it is one
     line — Filters, then Near Me and the search — and In-Person, Online,
     All and Edit sit at the top of the sheet. Without that script the
     views stay on the bar, on a line of their own. The page keeps room at
     its foot so the end of the list is not left under the bar. A field
     under 16px makes an iPhone zoom the page when it is pressed, and the
     page does not zoom back. */
  .map-page .finder-head {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 40;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: "middle middle" "start end";
    gap: 0.5rem;
    padding: 0.55rem 0.7rem calc(0.6rem + env(safe-area-inset-bottom, 0px));
  }
  html.filters-away .map-page .finder-head {
    grid-template-areas: "start end";
    grid-template-columns: auto minmax(0, 1fr);
  }
  /* Until the finder's script moves the views and Edit up into the filter
     sheet, they are not shown in the bar, so the bar does not open on two
     lines and then drop to one (16 Oct 2026). */
  html.filters-away .map-page .finder-head :is(.head-middle, #edit-toggle) { display: none; }
  .map-page > main { padding-bottom: 7.5rem; }
  .map-page .head-middle { justify-self: stretch; }
  .map-page .head-end { justify-self: stretch; }
  .map-page .head-middle .view-toggle { flex: 1 1 auto; display: flex; }
  /* Each view as wide as its name needs and the rest shared out, so
     "In-Person" stays on one line; split in thirds it broke at the hyphen
     and lost its second half. */
  .map-page .head-middle .view-toggle button { flex: 1 1 auto; padding-inline: 0.6em; white-space: nowrap; }
  .map-page .head-end .place-search { flex: 1 1 auto; }
  .map-page .place-search input { font-size: 1rem; padding-inline: 0.55rem; }
  .map-page .finder-head .btn { justify-content: center; white-space: nowrap; }
  /* The list is always under the map on a phone, so it has no switch. */
  .map-page #list-toggle { display: none; }
  .map-page #sfm-map { height: clamp(380px, 62vh, 620px); }
  .map-page .sangha-cards:not([hidden]) { grid-template-columns: 1fr; padding: 1.1rem 12px 2rem; }
  /* No room for two columns on a phone: split stacks, the map first, and the
     list runs on below it rather than scrolling inside a box. */
  /* One column on a phone: the bar, the sidebar, the map under them and the
     list under that. The box stays — it is the same container, and the other
     two views keep theirs — but the list inside it runs down the page rather
     than scrolling in a box of its own, which on a touch screen is a trap. */
  .map-page.view-local #sfm-views,
  .map-page.view-table #sfm-views {
    display: block;
    height: auto;
  }
  .map-page.view-local #sfm-map {
    height: clamp(300px, 45vh, 460px);
    border: 0;
    border-radius: 0;
  }
  .map-page.view-local .sangha-cards:not([hidden]),
  .map-page.view-table .sangha-cards:not([hidden]) {
    max-height: none;
    overflow: visible;
    padding: 0;
  }
  /* Freed of the box, the table is paged instead — app.js draws twenty-four
     of it below this width, for the same reason the list beside the map is
     paged: a phone scrolls the page, not a box inside it. */
  /* No pane here. It would sit under the end of a table that runs down the
     page, which is where Christian found it (#37): the row was at 685px and
     what pressing it changed began at 1,742. The panel shows the sangha
     instead, the way a row beside the map does. */
  .map-page.view-table .detail-pane { display: none; }
  /* With scripts off, the sections stay in the page under the head, folded,
     each name a target a thumb can find. With them on, that list starts put
     away. Filters opens it as a sheet rising from the foot bar, no taller
     than three quarters of the room between that bar and the site's own, so
     the map or the list keeps the rest. The views and Edit are its first row. */
  .map-page .finder-side { max-height: none; padding: 0.3rem 0 0; }
  html.filters-away .map-page .finder-side { display: none; }
  html.filters-away.filters-open .map-page .finder-side {
    display: flex;
    position: fixed;
    z-index: 35;
    top: auto;
    right: 0;
    bottom: calc(4.6rem + env(safe-area-inset-bottom, 0px));
    left: 0;
    width: auto;
    max-height: calc((100dvh - 3.2rem - 4.6rem - env(safe-area-inset-bottom, 0px)) * 0.75);
    margin: 0;
    padding: 0;
    box-shadow: 0 -10px 24px rgb(8 2 12 / 35%);
    overscroll-behavior: contain;
  }
  .map-page .sheet-views {
    position: sticky;
    top: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.45rem;
    flex: none;
    width: 100%;
    padding: 0.7rem 0.7rem 0.55rem;
    background: var(--finder-dark);
    border-bottom: 1px solid color-mix(in srgb, var(--ground-2) 18%, var(--finder-dark));
  }
  .map-page .sheet-views .head-middle { width: 100%; }
  .map-page .sheet-views .view-toggle { width: 100%; }
  .map-page .finder-side .result-count { position: static; padding-block: 0.55rem; }
  .map-page .side-section + .side-section { margin-top: 0; }
  .map-page .side-section > summary { padding-block: 0.6rem; }
  .map-page .side-section > summary::before { top: 0.97rem; }
  .map-page .side-item { padding-block: 0.55rem; }
}

/* ---- small type ---------------------------------------
   Everything this sheet sets at 0.9rem or smaller, apart from
   small capitals, is set a little apart (--tracking-small in
   tokens.css). Kept in one list rather than beside each size,
   at no weight of its own, so a rule that sets its own spacing
   still has the last word. A new small size belongs here too. */
:where(
  .result-count,
  .map-page .result-count,
  .map-page .near-me,
  .map-page .near-bar,
  .map-page .row-meta,
  .map-page .sangha-cluster,
  .map-page .card-more
) { letter-spacing: var(--tracking-small); }