/* Black-and-white theme (the base; index.html currently turns on the akvoterscount.org palette below). The earlier Midnight Sun palette is also kept below:
   add data-theme="midnight" to <html> in index.html to switch back. */
:root {
  color-scheme: light;
  --bg: #ffffff;
  --surface: #ffffff;
  --footer-bg: #ffffff;
  --text: #000000;
  --muted: #000000;                    /* all text is black (or white on black) for contrast */
  --faint: #000000;
  --line: #cfcfcf;
  --accent: #000000;                   /* links */
  --button: #000000;
  --button-text: #ffffff;
  --button-hover: #333333;
  --halftone: radial-gradient(circle, #000 0.7px, transparent 1px) 0 0 / 3px 3px;  /* fine black dots; small enough that clipped edges don't visibly slice them */
  --stripes: repeating-linear-gradient(-45deg, #999999 0 2px, #fff 2px 4px);  /* mid-gray and white diagonal stripes */
  --offset-shadow: #999999;            /* solid mid-gray offset shadow behind the search box */
  --early: #ffffff;                    /* Early Vote badge: white on black */
  --early-bg: #000000;
  --badge-bg: #e6e6e6;                 /* other badges: black on light gray */
  --badge-text: #000000;
  --open-mark: #4fe073;                /* open today: bright green segment (lightened from #00d23c) */
  --closed-mark: #e00000;              /* red X: closed today */
  --selected-bg: #000000;              /* highlighted town suggestion */
  --selected-text: #ffffff;
  --warn-bg: #f2f2f2;
  --ak-bg: #fdcfaa;                    /* background Alaska shape: peach dot fill */
  --link-hover: #f39a5b;               /* peach underline on hovered / clicked links */
  --search-bg: #ffe8d6;                /* light peach: lower bands (community search, filters), Election Day heading highlight */
  --search-band-bg: #fdcfaa;           /* darker peach: tops of the search box and results header */
  --results-bg: #fff4ea;               /* pale peach behind the result cards */
  --warn-line: #000000;
  --stale-bg: #fff4f4;
  --error: #b00020;                    /* red accents (borders) only; error text itself is black */
  --error-text: #000000;
  --focus: #000000;
  --shadow: rgba(0, 0, 0, 0.18);
}

/* Palette from akvoterscount.org: deep teal text, pale-blue panels, and their blue / green /
   orange stripe. On by default via data-theme="akvc" on <html> in index.html; remove the
   attribute to go back to black and white. Every text pairing passes WCAG AA (teal on
   white 9.4:1, on the light blues 7.7–8.4:1, on the green 4.6:1). */
:root[data-theme="akvc"] {
  --text: #074d62;                     /* their deep teal, used for all text, outlines and the top strip */
  --muted: #3a5866;
  --faint: #3a5866;
  --line: #b9dcea;
  --accent: #074d62;
  --button: #074d62;
  --button-text: #ffffff;
  --button-hover: #047fa2;
  --halftone: radial-gradient(circle, #074d62 0.7px, transparent 1px) 0 0 / 3px 3px;
  --stripes: repeating-linear-gradient(-45deg, #9fd3e4 0 2px, #fff 2px 4px);
  --offset-shadow: #9fd3e4;            /* soft blue offset shadow instead of gray */
  --early: #ffffff;
  --early-bg: #074d62;
  --badge-bg: #e6f6fc;
  --badge-text: #074d62;
  --open-mark: #9ac43d;                /* their lime green */
  --closed-mark: #d9480f;
  --selected-bg: #074d62;
  --selected-text: #ffffff;
  --warn-bg: #e6f6fc;
  --ak-bg: #cceff9;                    /* background Alaska shape */
  --link-hover: #f29137;               /* their orange, for hovered link underlines */
  --search-bg: #e6f6fc;                /* pale blue: lower bands, Election Day heading highlight */
  --search-band-bg: #cceff9;           /* light blue: tops of the search box and results header, countdown tiles */
  --results-bg: #f3fbfe;
  --warn-line: #074d62;
  --focus: #047fa2;
}
/* Their three-color stripe (blue / green / orange) under the countdown strip */
:root[data-theme="akvc"] .countdown {
  border-bottom: 5px solid;
  border-image: linear-gradient(to right, #00b0e1 0 33.33%, #9ac43d 33.33% 66.66%, #f29137 66.66%) 1;
}

/* Palette from midnightsunindependencefund.com (dark), kept for switching back. */
:root[data-theme="midnight"] {
  color-scheme: dark;
  --bg: #0a1622;
  --surface: #0f2032;
  --footer-bg: #08131f;
  --text: #f4f1e9;
  --muted: #c5cdd6;
  --faint: #8190a0;
  --line: rgba(244, 241, 233, 0.14);
  --accent: #f0c987;
  --button: #e3a13a;
  --button-text: #0a1622;
  --button-hover: #f0c987;
  --halftone: radial-gradient(circle, rgba(0, 0, 0, 0.6) 0.7px, transparent 1px) 0 0 / 3px 3px;
  --stripes: repeating-linear-gradient(-45deg, rgba(0, 0, 0, 0.6) 0 2px, transparent 2px 4px);
  --offset-shadow: rgba(0, 0, 0, 0.6);
  --early: #f0c987;
  --early-bg: rgba(227, 161, 58, 0.14);
  --badge-bg: rgba(244, 241, 233, 0.12);
  --badge-text: #c5cdd6;
  --open-mark: #3ddc6e;
  --closed-mark: #ff6b6b;
  --selected-bg: rgba(227, 161, 58, 0.14);
  --selected-text: #f0c987;
  --warn-bg: rgba(227, 161, 58, 0.08);
  --ak-bg: rgba(244, 241, 233, 0.06);
  --search-bg: #0f2032;
  --link-hover: #e3a13a;
  --search-band-bg: rgba(227, 161, 58, 0.08);
  --results-bg: #0a1622;
  --warn-line: #e3a13a;
  --stale-bg: rgba(255, 155, 143, 0.08);
  --error: #ff9b8f;
  --error-text: #ff9b8f;
  --focus: #f0c987;
  --shadow: rgba(0, 0, 0, 0.4);
}

* { box-sizing: border-box; }
/* Sharp corners everywhere, including form controls (iOS rounds them by default). */
input[type="text"], button { border-radius: 0; -webkit-appearance: none; appearance: none; }
input[type="checkbox"] { border-radius: 0; accent-color: #000; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 17px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
a { color: var(--accent); }
/* Links: the underline turns peach on hover, keyboard focus and while clicking. A deeper peach
   than the panels so it still shows on the peach headers. */
a:hover, a:focus-visible, a:active,
.link-btn:hover span, .link-btn:focus-visible span, .link-btn:active span {
  text-decoration-color: var(--link-hover);
  text-decoration-thickness: 3px;
}
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.wrap { max-width: 760px; margin: 0 auto; padding: 0 16px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.muted { color: var(--muted); }
.small { font-size: 0.875rem; }

/* Countdown banner: a black strip across the very top of the page, with a live
   days / hours / minutes / seconds clock on peach tiles. */
.countdown {
  position: sticky; top: 0; z-index: 30;   /* stays pinned to the top while scrolling, above cards and pop-ups */
  margin: 0; padding: 8px 16px;
  background: var(--text); color: var(--bg);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 10px;
  font-size: 0.95rem;
}
.countdown[hidden] { display: none; }
/* Sections the page scrolls to (town links, "change location") stop below the pinned banner. */
#search, #results { scroll-margin-top: 60px; }
.countdown-clock { display: inline-flex; align-items: center; gap: 10px; }
.countdown-unit { display: inline-flex; align-items: baseline; gap: 3px; }
.countdown-num {
  display: inline-block; min-width: 2.1em; padding: 1px 5px; text-align: center;
  background: var(--search-band-bg); color: var(--text);
  font-weight: 800; font-variant-numeric: tabular-nums;   /* digits don't jiggle as they tick */
}
.countdown-label { font-size: 0.75rem; opacity: 0.85; }
.top { padding: 48px 0 34px; }
/* Big Alaska silhouette in the background, top right. The heading and search box sit over it.
   Kept light so text over it stays readable. */
.top .wrap { position: relative; }
.ak-bg {
  position: absolute; z-index: -1;
  top: -44px; right: 0;                /* flush with the page column's outer edge (the screen edge on phones) */
  width: min(460px, 78vw); height: auto;
  pointer-events: none;
  will-change: transform;   /* drifts with scroll (parallax), see app.js */
}
.ak-bg path { fill: url(#ak-dots); }         /* filled with a dot grid, not solid */
.ak-bg .ak-dot { fill: var(--ak-bg); }       /* ~3px dots every ~6px at full size */
h1 { margin: 0 0 8px; font-size: clamp(1.75rem, 5vw, 2.4rem); line-height: 1.15; }


h2 { font-size: 1.25rem; margin: 0 0 8px; }

.search {
  position: relative;
  background: var(--search-band-bg);
  border: 2px solid var(--text);   /* black outline */
  padding: 20px 20px 20px 34px;    /* wider on the left: room for the arrow */
}
/* Solid drop shadow, offset down and right behind the box. var(--stripes) or var(--halftone) give patterned versions. */
.search::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 8px -9px -9px 8px;
  background: var(--offset-shadow);
  pointer-events: none;
}
.search label { display: block; font-weight: 600; margin-bottom: 6px; }/* Looping arrow in the box's left padding: leaves the start of the "Enter your address…"
   sentence, curls down and points into the start of the address field. It stretches with
   the label, so it still lands on the field when the sentence wraps. */
#address-form { position: relative; --arrow-to: 24px; }   /* field's middle, measured from the form's bottom */
/* Geometry (x measured from the start of the text, negative = into the box's left padding):
   loop runs from x=-22 to x=-5 (12px clear of the box border), so the line starts 5px before
   "Enter"; its corners have an 8px radius, leaving a short straight run at the bottom that
   joins the arrowhead. The head is 6px
   long, from x=-11 to x=-5, so its tip also stops 5px before the field. */
#address-form::before {
  content: "";
  position: absolute;
  left: -22px;
  width: 17px;
  top: 12px;                          /* middle of the label's first line */
  bottom: calc(var(--arrow-to) - 1px);
  border: 2px solid var(--text);
  border-right: 0;
  border-radius: 8px 0 0 8px;
  /* cut the last 6px of the bottom line, where the arrowhead takes over */
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) calc(100% - 6px), calc(100% - 6px) 100%, 0 100%);
  pointer-events: none;
}
#address-form::after {                /* arrowhead, centered on the bottom line */
  content: "";
  position: absolute;
  left: -11px;
  bottom: calc(var(--arrow-to) - 5px);
  border-left: 6px solid var(--text);
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  pointer-events: none;
}
.row { display: flex; gap: 8px; }
input[type="text"] {
  font: inherit;
  font-weight: 700;                /* typed text is bold */
  color: var(--text);
  background: var(--bg);
  border: 2px solid var(--text);   /* matches the search box outline */
  padding: 9px 11px;               /* 1px less, so the field stays the same size with the thicker border */
  min-height: 46px;
}
input[type="text"] { flex: 1; min-width: 0; }
button { font: inherit; cursor: pointer; }
.primary, .secondary {
  min-height: 46px;
  padding: 0 18px;
  font-weight: 600;
}
.primary { background: var(--button); color: var(--button-text); border: 0; }
.primary:hover { background: var(--button-hover); }
.secondary { background: var(--surface); color: var(--text); border: 2px solid var(--text); width: 100%; margin: 8px 0 12px; }
.secondary:hover, .secondary:active { background: var(--text); color: var(--surface); }   /* fills in on hover */
.link-btn { background: none; border: 0; padding: 0; color: var(--accent); text-decoration: underline; }
#locate { display: inline-flex; align-items: center; gap: 5px; text-decoration: none; margin-top: 16px; }   /* sits midway between the field and the OR line */
#locate span { text-decoration: underline; }
#locate .pin { width: 1.05em; height: 1.05em; flex: none; fill: currentColor; }
/* The community search sits in a lighter peach band across the bottom of the search box.
   Its top edge is a dashed line with "OR" sitting on it: the separator between the white
   address area and the gray band. */
.alt { display: flex; flex-direction: column; align-items: stretch; gap: 10px; margin: 20px -20px -20px -34px; padding: 18px 20px 20px 34px; color: var(--muted);
  /* top edge: an even row of 2px square dots, 6px apart (a CSS dashed border spaces unevenly) */
  background: linear-gradient(to right, var(--text) 2px, transparent 2px) 0 0 / 6px 2px repeat-x, var(--search-bg); }   /* lighter peach below the OR line */
.or-divider {                              /* "OR" in a white circle, centered on the dotted edge above */
  align-self: center;
  width: 36px; height: 36px;
  margin-top: calc(-18px - 18px + 1px);      /* band's top padding + half the circle - half the 2px dot line */
  display: flex; align-items: center; justify-content: center;
  padding-left: 0.12em;                      /* balances the letter-spacing after the R */
  border-radius: 50%;
  border: 2px solid var(--text);            /* same weight as the box and field outlines */
  background: var(--surface);
  color: var(--faint); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.12em;
}
.combo { position: relative; display: flex; flex-direction: column; }
.combo input { width: 100%; }
.combo ul {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 10;
  margin: 4px 0 0; padding: 4px; list-style: none;
  max-height: 320px; overflow-y: auto;
  background: var(--surface); border: 1px solid var(--line);  box-shadow: 0 8px 24px var(--shadow);
}
.combo li { padding: 10px 12px; cursor: pointer; color: var(--text); }
.combo li[aria-selected="true"] { background: var(--selected-bg); color: var(--selected-text); }
.combo .combo-via { color: var(--faint); font-size: 0.85rem; }
.combo .combo-empty { cursor: default; color: var(--muted); }
.status { margin: 12px 0 0; }
.status:empty { margin: 0; }   /* no gap above the gray band when there's no message */
.status.error { color: var(--error-text); border-left: 3px solid var(--error); padding-left: 10px; }   /* red bar marks it as an error */
.choices { list-style: none; margin: 8px 0 0; padding: 0; }
.choices button {
  width: 100%; text-align: left; padding: 10px 12px; margin-top: 6px;
  background: var(--bg); color: var(--text); border: 1px solid var(--line);}

.callout {
  margin: 16px 0 0;
  padding: 14px 16px;
  background: var(--warn-bg);
  border-left: 4px solid var(--warn-line);
}
.callout strong { display: block; }
/* Election Day box */
.election-callout {
  border-left: 0; margin-top: 28px; padding: 16px 18px;
  /* square-dot border matching the OR separator (2px dots, 6px apart). "round" stretches the
     spacing a hair so each side ends on a dot and the corners meet. */
  --dot-x: linear-gradient(to right, var(--text) 2px, transparent 2px);
  --dot-y: linear-gradient(to bottom, var(--text) 2px, transparent 2px);
  background:
    var(--dot-x) top left / 6px 2px round no-repeat,
    var(--dot-x) bottom left / 6px 2px round no-repeat,
    var(--dot-y) top left / 2px 6px no-repeat round,
    var(--dot-y) top right / 2px 6px no-repeat round,
    var(--surface);                  /* white inside the dotted border */
}
/* Peach highlighter stroke under the heading */
.election-callout strong {
  display: inline;
  padding: 0 3px;
  background: linear-gradient(transparent 55%, var(--search-bg) 55%);   /* lighter peach */
}
.callout-p { margin: 10px 0 0; }
/* Headings in the Election Day box, each with a line icon (ballot box, envelope) */
.callout-h { margin: 0; }
/* Lucide icons (see the note in index.html), inside the heading on the highlight and
   centered on the text. 24px with 2px rounded lines, as Lucide draws them. */
.callout-icon {
  width: 24px; height: 24px; vertical-align: -5px; margin-right: 6px;
  fill: none; stroke: var(--text); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.nowrap { white-space: nowrap; }
.callout-more { margin-top: 22px; }   /* second question in the Election Day box (voting by mail) */
.callout.stale { border-left-color: var(--error); background: var(--stale-bg); }

/* Results: one framed panel, like the search box (2px black outline, gray offset shadow).
   Light peach header, filters in a darker peach band under a dotted line, then the location
   cards inset on a pale peach panel so they read as belonging to the header above. */
.results {
  margin-top: 28px;
  border: 2px solid var(--text);
  box-shadow: 7px 7px 0 var(--offset-shadow);
  background: var(--results-bg);
}
.results-head {
  background: var(--search-band-bg);
  padding: 16px 20px 0;
}
.results-head h2 { margin: 0 0 10px; }
#results-h:focus { outline: none; }
.change-loc { color: inherit; text-decoration-thickness: 2px; text-underline-offset: 3px; }   /* the place name: click to choose a different location */
.results-head p { margin: 0 0 8px; }
#origin { color: var(--muted); }
#origin:empty { display: none; }
#filter-note:empty { display: none; }
.filters {
  display: flex; flex-wrap: wrap; gap: 8px 18px;
  margin: 6px -20px 0; padding: 14px 20px;
  /* dotted rule above and below, like the OR separator */
  background:
    linear-gradient(to right, var(--text) 2px, transparent 2px) 0 0 / 6px 2px repeat-x,
    linear-gradient(to right, var(--text) 2px, transparent 2px) 0 100% / 6px 2px repeat-x,
    var(--search-bg);
}
.filters label { display: inline-flex; gap: 4px; align-items: center; }
/* Square checkboxes with a 2px border, like the text boxes. Checked fills black with a
   check cut out in the surface color, so it follows the theme. */
.filters input {
  -webkit-appearance: none; appearance: none;
  display: inline-grid; place-content: center;
  width: 20px; height: 20px; margin: 0; flex: none;
  border: 2px solid var(--text); border-radius: 0; background: var(--surface); cursor: pointer;
}
.filters input::before {
  content: ""; width: 14px; height: 14px; background: var(--surface);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2 7.5l3.2 3.2L12 3.8' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='square'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2 7.5l3.2 3.2L12 3.8' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='square'/%3E%3C/svg%3E") center / contain no-repeat;
  visibility: hidden;
}
.filters input:checked { background: var(--text); }
.filters input:checked::before { visibility: visible; }
.list { list-style: none; margin: 0; padding: 20px 20px 2px; }
.results > #more, .results > p { margin-left: 20px; margin-right: 20px; }
.results > #more { width: calc(100% - 40px); }
.results > p { margin-top: 0; margin-bottom: 16px; }

.card {                                 /* same frame as the search box: 2px black outline, solid gray offset shadow */
  background: var(--surface);
  border: 2px solid var(--text);
  box-shadow: 5px 5px 0 var(--offset-shadow);
  padding: 16px;
  margin-bottom: 18px;                   /* room for the shadow before the next card */
}
.card-top { display: flex; justify-content: space-between; gap: 12px; align-items: center; }
.card h3 { margin: 0; font-size: 1.1rem; line-height: 1.3; }
.dist { white-space: nowrap; color: var(--muted); font-size: 0.9rem; }
.where { margin: 4px 0 8px; color: var(--muted); font-size: 0.92rem; }   /* a touch smaller than body text */
.where .pin { width: 0.95em; height: 0.95em; vertical-align: -2px; margin-right: 4px; fill: currentColor; }
.where a { white-space: nowrap; }   /* keep "Directions →" together */
.where .dir-arrow { display: inline-block; margin-left: 4px; text-decoration: none; }   /* inline-block keeps the arrow out of the underline */
.where .dir-arrow { transition: transform 0.18s ease-out; }
.where a:hover .dir-arrow, .where a:focus-visible .dir-arrow { transform: translateX(4px); }   /* arrow nudges out on hover / focus */
@media (prefers-reduced-motion: reduce) { .where .dir-arrow { transition: none; } }   /* inline-block keeps the arrow out of the underline */
/* Badges are small ribbons: a flat band with a swallowtail notch on the right end. In result
   cards they sit beside the site name; a second badge nests in the first's notch. */
:root { --seg-h: 26px; }
.badge {
  display: inline-flex; align-items: center; min-height: var(--seg-h);
  font-size: 0.78rem; font-weight: 700; padding: 0 18px 0 9px;
  background: var(--badge-bg); color: var(--badge-text);
  clip-path: polygon(0 0, 100% 0, calc(100% - 8px) 50%, 100% 100%, 0 100%);
}
.badge.early { background: var(--early-bg); color: var(--early); }
.title-line { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.badge-row { display: inline-flex; align-items: stretch; }     /* type badges chained together */
.badge-row .badge { flex: none; }
.badge-row .chained {                    /* a following badge nests its point in the notch of the one before */
  margin-left: -5px; padding-left: 16px;
  clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 50%, 100% 100%, 8px 100%, 0 50%);
}
/* Open / closed today: a plain rectangle under the address */
.today {
  display: inline-flex; align-items: center; min-height: var(--seg-h);
  margin: 8px 0; padding: 3px 10px;
  background: var(--warn-bg);
  font-weight: 600;
  font-size: 0.86rem;
}
/* Badge explanations: shown on hover, keyboard focus or tap. */
.tip { position: relative; display: flex; flex: none; }
.tip .badge { cursor: help; }
.tip-text {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 20;
  width: max-content; max-width: min(300px, 80vw);
  padding: 8px 10px; background: var(--text); color: var(--bg);
  font-size: 0.8rem; font-weight: 400; line-height: 1.4;
  display: none;                 /* takes no space while hidden, so it can't widen the page */
  pointer-events: none;
}
.tip.show .tip-text { display: block; }   /* app.js toggles .show and keeps it on screen */
.explain .badge { min-height: 0; padding: 3px 18px 3px 9px; }   /* the key at the bottom keeps plain badges */
/* Open-today / closed-today markers */
.today .mark { display: inline-block; flex: none; margin-right: 8px; }
.today.open { background: var(--open-mark); }   /* open today: the whole segment is green */
.today .mark.closed-x { width: 0.85em; height: 0.85em; }
.today .mark.closed-x path { stroke: var(--closed-mark); stroke-width: 3; stroke-linecap: square; fill: none; }
.today .closed { color: var(--muted); font-weight: 400; }
.check { display: block; font-size: 0.85rem; font-weight: 400; color: var(--muted); }
details { margin-top: 8px; }
summary { cursor: pointer; color: var(--accent); }
.sched { margin: 8px 0 0; padding: 0; list-style: none; font-size: 0.95rem; }
.sched li { display: flex; gap: 12px; padding: 4px 0; border-bottom: 1px dashed var(--line); }
.sched li span:first-child { min-width: 7.5em; font-weight: 600; }
.approx { font-size: 0.85rem; color: var(--muted); }

.explain { margin: 36px 0; }
.explain dl { margin: 0; }
.explain dt { margin-top: 12px; }
.explain dd { margin: 4px 0 0; }

.foot { background: var(--footer-bg); border-top: 1px solid var(--line); margin-top: 36px; padding: 20px 0 40px; color: var(--faint); }
/* "Paid for by" disclaimer: boxed, like the other framed panels */
.paid-for {
  width: fit-content; margin: 8px auto 0;   /* centered in the footer */
  border: 2px solid var(--text); color: var(--text); padding: 6px 12px; font-weight: 600;
}

@media (max-width: 520px) {
  #search, #results { scroll-margin-top: 84px; }   /* banner is two lines on phones */
  .top { padding: 36px 0 26px; }
    .results-head { padding: 14px 14px 0; }
  .filters { margin-left: -14px; margin-right: -14px; padding-left: 14px; padding-right: 14px; }
  .list { padding: 14px 14px 2px; }
  .results > #more, .results > p { margin-left: 14px; margin-right: 14px; }
  .results > #more { width: calc(100% - 28px); }
  /* Too narrow for badge + status on one line: status gets its own full-width line, flat-ended. */
  #address-form { --arrow-to: calc(46px + 8px + 24px); }   /* Search button sits under the field on phones */
  .row { flex-direction: column; }
  .primary { width: 100%; }
  .card-top { flex-direction: column; align-items: flex-start; gap: 2px; }
}