/* Oxford Vacancies — mobile-first, WCAG 2.2 AA (4.5:1 contrast, visible focus, 44px targets) */
:root {
  --brand: #14532d;
  --brand-strong: #0f3d21;
  --accent: #b45309;
  --bg: #f8faf8;
  --surface: #ffffff;
  --text: #1a2e1f;
  --text-muted: #4b5c50;
  --border: #d4ddd6;
  --open: #166534;
  --open-bg: #dcfce7;
  --child: #0f766e;
  --child-bg: #ccfbf1;
  --full: #6b7280;
  --full-bg: #f3f4f6;
  --error: #b91c1c;
  --error-bg: #fee2e2;
  --success: #166534;
  --success-bg: #dcfce7;
  --radius: 12px;
  --focus: 3px solid #2563eb;
  --chip-m-bg: #dbeafe;
  --chip-m-fg: #1d4ed8;
  --chip-w-bg: #fce7f3;
  --chip-w-fg: #be185d;
}
:root { color-scheme: light; }

/* Dark tokens apply when the user forced dark, or the system prefers dark and
   the user didn't force light. (Plain CSS can't share the block — keep both
   copies identical.) */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #121416;
  --surface: #1c1f22;
  --text: #e8eaed;
  --text-muted: #a5adb3;
  --border: #34393e;
  --brand: #4ade80;
  --brand-strong: #86efac;
  --accent: #f59e0b;
  --open: #4ade80;
  --open-bg: #1c2b21;
  --child: #2dd4bf;
  --child-bg: #16302c;
  --full: #9ca3af;
  --full-bg: #26292c;
  --error: #f87171;
  --error-bg: #33191c;
  --success: #4ade80;
  --success-bg: #1c2b21;
  --chip-m-bg: #1d3050;
  --chip-m-fg: #8ab8ff;
  --chip-w-bg: #3d1f34;
  --chip-w-fg: #f2a9d4;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #121416;
    --surface: #1c1f22;
    --text: #e8eaed;
    --text-muted: #a5adb3;
    --border: #34393e;
    --brand: #4ade80;
    --brand-strong: #86efac;
    --accent: #f59e0b;
  --open: #4ade80;
  --open-bg: #1c2b21;
  --child: #2dd4bf;
  --child-bg: #16302c;
  --full: #9ca3af;
    --full-bg: #26292c;
    --error: #f87171;
  --error-bg: #33191c;
  --success: #4ade80;
    --success-bg: #1c2b21;
    --chip-m-bg: #1d3050;
    --chip-m-fg: #8ab8ff;
    --chip-w-bg: #3d1f34;
    --chip-w-fg: #f2a9d4;
  }
}

* { box-sizing: border-box; }
html { font-size: 100%; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  line-height: 1.55;
  background: var(--bg);
  color: var(--text);
}
:focus-visible { outline: var(--focus); outline-offset: 2px; border-radius: 4px; }

/* ── Header / nav ─────────────────────────────────────────────── */
.site-header {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 10;
}
.site-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  max-width: 64rem;
  margin: 0 auto;
  padding: 0.5rem 1rem;
  gap: 0.5rem;
}
.brand {
  display: inline-flex;
  align-items: center;
  font-weight: 800;
  font-size: 1.25rem;
  text-decoration: none;
  color: var(--text);
  margin-right: auto;
  padding: 0.5rem 0;
}
.brand-icon { color: var(--brand); flex-shrink: 0; margin-right: 0.4rem; }
.brand span { color: var(--brand); }
.nav-toggle { display: none; }
.nav-toggle-label {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 10px;
  margin: 0;
  cursor: pointer;
  border-radius: 8px;
  align-self: center;
  -webkit-tap-highlight-color: transparent;
}
.nav-toggle-label span {
  display: block;
  height: 2px;
  background: var(--text);
  border-radius: 2px;
  transition: transform 0.18s ease, opacity 0.18s ease;
}
/* Open state: whole button spins a quarter turn while the bars fold into an X */
.nav-toggle-label { transition: transform 0.25s ease; }
.nav-toggle:checked ~ .nav-toggle-label { transform: rotate(90deg); }
.nav-toggle:checked ~ .nav-toggle-label span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle:checked ~ .nav-toggle-label span:nth-child(2) { opacity: 0; }
.nav-toggle:checked ~ .nav-toggle-label span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.nav-links {
  display: none;
  list-style: none;
  margin: 0.4rem 0 0;
  padding: 0.2rem 0 0.6rem;
  width: 100%;
  flex-direction: column;
  border-top: 1px solid var(--border);
}
.nav-links li { border-bottom: 1px solid var(--border); }
.nav-links li:last-child { border-bottom: 0; }
@keyframes menu-in { from { opacity: 0; transform: translateY(-6px); } }
.nav-toggle:checked ~ .nav-links { animation: menu-in 0.16s ease; }
.nav-toggle:checked ~ .nav-links { display: flex; }
.nav-links a, .link-button {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.9rem 0.5rem;
  min-height: 48px;
  text-decoration: none;
  color: var(--text);
  font: inherit;
  font-weight: 600;
  background: none;
  border: 0;
  cursor: pointer;
  width: 100%;
  text-align: left;
  -webkit-tap-highlight-color: transparent;
}
.nav-links a:hover, .link-button:hover { color: var(--brand); }
.nav-links svg { flex-shrink: 0; opacity: 0.65; }
.inline-form { margin: 0; }

@media (min-width: 48rem) {
  .nav-toggle-label { display: none; }
  .nav-links { display: flex; flex-direction: row; width: auto; gap: 0.25rem; margin: 0; padding: 0; border-top: 0; }
  .nav-links li { border-bottom: 0; }
  .nav-links a, .link-button { width: auto; padding: 0.75rem 0.9rem; font-weight: 500; }
}

/* ── Layout ───────────────────────────────────────────────────── */
.site-main { max-width: 64rem; margin: 0 auto; padding: 1rem; }
.site-footer {
  max-width: 64rem;
  margin: 2rem auto 0;
  padding: 1.5rem 1rem;
  color: var(--text-muted);
  border-top: 1px solid var(--border);
  font-size: 0.9rem;
}
.hero { padding: 0.5rem 0 0; text-align: center; }
.hero h1 {
  margin: 0;
  font-size: clamp(1.6rem, 5vw, 2.5rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
}
.hero h1 span { color: var(--brand); }

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem;
  margin-top: 1rem;
}
.card.narrow { max-width: 28rem; margin-left: auto; margin-right: auto; }
.muted { color: var(--text-muted); }

/* ── Forms ────────────────────────────────────────────────────── */
label { display: block; font-weight: 600; margin: 0.9rem 0 0.25rem; }
input, select, textarea {
  width: 100%;
  padding: 0.65rem 0.75rem;
  min-height: 44px;
  font: inherit;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
}
/* The one site-wide field-focus treatment: brand border + soft ring.
   (Links/buttons keep the global :focus-visible outline.) */
:is(input, select, textarea):focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 18%, transparent);
}
fieldset { border: 1px solid var(--border); border-radius: 8px; margin: 1rem 0; padding: 0.75rem 1rem 1rem; }
legend { font-weight: 700; padding: 0 0.35rem; }
.checkbox-inline { display: flex; align-items: center; gap: 0.5rem; font-weight: 400; margin-top: 0.75rem; }
.checkbox-inline input { width: 1.35rem; height: 1.35rem; min-height: 0; }

.btn {
  display: inline-block;
  padding: 0.7rem 1.4rem;
  min-height: 44px;
  font: inherit;
  font-weight: 600;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  text-decoration: none;
  margin-top: 1rem;
}
.btn-primary { background: var(--brand); border-color: var(--brand); color: #fff; }
.btn-primary:hover { background: var(--brand-strong); }
.btn-small { padding: 0.45rem 1rem; min-height: 40px; font-size: 0.95rem; margin-top: 0.25rem; }
:root[data-theme="dark"] .btn-primary { color: #08130b; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .btn-primary { color: #08130b; }
}

/* ── Theme toggle (icon-only, discreet) ───────────────────────── */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  color: var(--text);
  background: none;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  opacity: 0.75;
  align-self: center;
  -webkit-tap-highlight-color: transparent;
}
.theme-toggle:hover { opacity: 1; }
.theme-toggle svg { display: block; }

.alert { padding: 0.75rem 1rem; border-radius: 8px; margin: 0.75rem 0; }
.alert-error { background: var(--error-bg); color: var(--error); }
.alert-success { background: var(--success-bg); color: var(--success); }

/* ── Search ───────────────────────────────────────────────────── */
.search-form {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem;
  margin-top: 1rem;
}
.clear-all {
  position: absolute;
  top: 0.6rem;
  right: 0.9rem;
  padding: 0.5rem;
  min-height: 44px;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--brand);
  background: none;
  border: 0;
  cursor: pointer;
}
.clear-all:hover { color: var(--brand-strong); }
#map-toggle { display: inline-flex; align-items: center; gap: 0.45rem; }
#map-toggle svg { flex-shrink: 0; }
.search-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: 1rem;
}

/* Switch-style toggle */
.switch-label {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-weight: 600;
  margin: 0;
  cursor: pointer;
  min-height: 44px;
}
.switch { position: relative; display: inline-block; width: 48px; height: 28px; flex-shrink: 0; }
.switch input[type="checkbox"] { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; z-index: 1; }
.switch .slider {
  position: absolute;
  inset: 0;
  background: var(--full-bg);
  border: 1px solid var(--border);
  border-radius: 999px;
  transition: background 0.15s ease;
}
.switch .slider::before {
  content: "";
  position: absolute;
  width: 22px; height: 22px;
  left: 2px; top: 2px;
  background: var(--surface);
  border-radius: 50%;
  box-shadow: 0 1px 3px rgb(0 0 0 / 0.3);
  transition: transform 0.15s ease;
}
.switch input:checked ~ .slider { background: var(--brand); border-color: var(--brand); }
.switch input:checked ~ .slider::before { transform: translateX(20px); }
.switch input:focus-visible ~ .slider { outline: var(--focus); outline-offset: 2px; }

/* Map */
#map {
  height: min(70vh, 34rem);
  margin-top: 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  z-index: 0;
}
.distance { color: var(--accent); font-weight: 700; white-space: nowrap; }
.house-loc { color: var(--text-muted); }
.house-details { margin-top: 0.35rem; grid-row: 2; grid-column: 1 / -1; }
.house-details summary {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  min-height: 36px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--brand);
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.house-details summary::-webkit-details-marker { display: none; }
.house-details summary::before { content: "▸"; transition: transform 0.12s ease; }
.house-details[open] summary::before { transform: rotate(90deg); }
.house-meta {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  margin: 0.3rem 0 0;
  padding: 0.65rem 0.8rem;
  font-size: 0.92rem;
  background: var(--bg);
  border-radius: 8px;
}
.house-meta > div { display: flex; align-items: baseline; gap: 0.7rem; min-width: 0; }
.house-meta dt {
  flex: 0 0 5.4rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.house-meta dd { flex: 1; margin: 0; overflow-wrap: break-word; min-width: 0; }
/* "Contact X at Y" reads as prose (mirrors the PDF cards), not a dt/dd flex row. */
.house-meta .contact-line { display: block; }
.house-meta .contact-note {
  display: flex;
  align-items: flex-start;
  gap: 0.45rem;
  margin-top: 0.2rem;
  padding: 0.5rem 0.65rem;
  color: var(--text-muted);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow-wrap: anywhere;
}
.contact-note svg { flex-shrink: 0; margin-top: 0.15rem; color: var(--brand); }
.contact-note-label { font-weight: 600; color: var(--text); }
.house-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: 0.6rem;
  padding-top: 0.55rem;
  border-top: 1px solid var(--border);
}
/* Admin pages keep footers separator-free (Tim's call, 2026-07-11). */
.admin-house-list .house-foot { border-top: 0; padding-top: 0; }
.house-foot .btn { margin-top: 0; min-height: 38px; padding: 0.35rem 0.9rem; }
/* Full house that hasn't opted into receive-all: identical button box (same hidden
   width-reserve as .apply-toggle below), clearly inert. */
.apply-closed:disabled { color: var(--text-muted); background: transparent; border-style: dashed; opacity: 0.8; cursor: not-allowed; }
.apply-closed {
  display: inline-grid;
  justify-items: center;
  align-content: center;
}
.apply-closed::after {
  content: "Apply to this house";
  visibility: hidden;
  height: 0;
  overflow: hidden;
}
.updated { font-size: 0.78rem; color: var(--text-muted); text-align: right; }

/* Cluster circle colors from the HouseLocator project (nextstephelp.org).
   .leaflet-container prefix outranks MarkerCluster.Default.css, which loads later. */
.leaflet-container .marker-cluster-small { background-color: #00a6ff; }
.leaflet-container .marker-cluster-small div { background-color: #008dfb; color: #000; }
.leaflet-container .marker-cluster-medium { background-color: #efca3e; }
.leaflet-container .marker-cluster-medium div { background-color: #f9bf02; color: #000; }
.leaflet-container .marker-cluster-large { background-color: #ff3966; }
.leaflet-container .marker-cluster-large div { background-color: #ff0b05; color: #000; }

/* ── Map popup: a slimmed-down house card ─────────────────────────
   The .leaflet-container/.leaflet-popup-content prefixes outrank leaflet.css,
   which loads after this file (same trick as the cluster colors above). */
.leaflet-container .leaflet-popup-content-wrapper {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 12px;
}
.leaflet-container .leaflet-popup-tip { background: var(--surface); }
.leaflet-container .leaflet-popup-content {
  margin: 0.85rem 0.95rem;
  font-family: inherit;
  font-size: 0.88rem;
  line-height: 1.45;
}
.leaflet-container .leaflet-popup a { color: var(--brand); }
.leaflet-container .leaflet-popup a.leaflet-popup-close-button { color: var(--text-muted); }
.map-pop h3 { margin: 0; padding-right: 1rem; font-size: 1rem; line-height: 1.3; }
/* Same offset as the card's city/state line under the house name (.house-card p). */
.leaflet-popup-content .map-pop-sub { margin: 0.3rem 0 0; color: var(--text-muted); }
.map-pop-addr { font-weight: 600; text-decoration: none; -webkit-tap-highlight-color: transparent; }
.map-pop-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem; margin-top: 0.45rem; }
/* Popup: the preferences note keeps its icon but sheds the box — one slim line */
.map-pop .house-meta .contact-note { margin-top: 0; padding: 0.1rem 0 0; border: 0; background: none; }
.map-pop .house-meta { margin-top: 0.5rem; }
.leaflet-popup-content .map-pop-updated { margin: 0; font-size: 0.78rem; color: var(--text-muted); text-align: right; }
.sort-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  margin-top: 0.7rem;
}
.sort-panel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.7rem;
  padding-top: 0.7rem;
  border-top: 1px solid var(--border);
}
.sort-panel[hidden] { display: none; }
.sort-panel-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-right: 0.2rem;
}
.sort-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.2rem 0.6rem;
  font: inherit;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-muted);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  cursor: pointer;
}
.sort-chip.active {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--surface);
}
.sort-chip[hidden] { display: none; }
.sort-chip .dir { font-size: 0.6rem; line-height: 1; }
.sort-chip .dir:empty { display: none; }
.search-grid { display: grid; grid-template-columns: 1fr; gap: 0 1rem; }
@media (min-width: 40rem) { .search-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 64rem) { .search-grid { grid-template-columns: repeat(4, 1fr); } }
.result-count { color: var(--text-muted); margin: 1rem 0 0.5rem; }

/* ── House cards ──────────────────────────────────────────────── */
.house-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.7rem; }
@media (min-width: 48rem) { .house-list { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.house-card { min-width: 0; }
.house-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.8rem 1rem;
}
.house-card.has-vacancy { border-left: 5px solid var(--open); }
.house-card h2 { font-size: 1.05rem; margin: 0; line-height: 1.3; }
.house-card p { margin: 0.3rem 0 0; }
.house-sub { color: var(--text-muted); font-size: 0.88rem; line-height: 1.4; }
.map-link {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  /* Padding + matching negative margin: a finger-sized tap target with no
     effect on the line height, so the card stays exactly as tall. */
  padding: 0.45rem 0.4rem;
  margin: -0.45rem -0.4rem;
  font-weight: 600;
  color: var(--brand);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.map-link:hover, .map-link:active { text-decoration: underline; }
.house-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin: 0.35rem 0 0;
  font-size: 0.85rem;
  color: var(--text-muted);
}
.chip {
  display: inline-flex;
  align-items: center;
  padding: 0.1rem 0.6rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  white-space: nowrap;
}
.chip-sm {
  font-size: 0.68rem;
  padding: 0.12rem 0.55rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.card-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 0.6rem;
  align-items: start;
}
.badge-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.3rem;
  justify-self: end;
}
.badge-cell {
  display: flex;
  align-items: center;
  justify-self: end;
  align-self: start;
  grid-row: 2;
  grid-column: 2;
  min-height: 36px;   /* matches the Contact & details summary row height */
  margin-top: 0.35rem; /* matches .house-details margin-top */
}
.chip-m { background: var(--chip-m-bg); color: var(--chip-m-fg); }
.chip-w { background: var(--chip-w-bg); color: var(--chip-w-fg); }
.card-title { min-width: 0; }
.badge {
  white-space: nowrap;
  font-size: 0.82rem;
  font-weight: 700;
  border-radius: 999px;
  padding: 0.2rem 0.7rem;
}
.badge-open { background: var(--open-bg); color: var(--open); }
.badge-child { background: var(--child-bg); color: var(--child); }
.badge-full { background: var(--full-bg); color: var(--full); }
.tel { color: var(--brand); font-weight: 600; text-decoration: none; }
.apply-cta { margin-top: 0.6rem; }

/* ── Results header: count + PDF/print icon buttons ───────────── */
.results-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin: 1.25rem 0 0.05rem; /* sits low, hugging the first card (was on .result-count;
                                 there its asymmetry broke the icons' vertical centering) */
}
.results-head .result-count { flex: 1 1 auto; min-width: 0; margin: 0; }
.result-actions { display: flex; gap: 0.35rem; flex-shrink: 0; }
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px; /* invisible 42px hit area keeps the touch target comfortable */
  height: 42px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--text-muted);
  cursor: pointer;
}
.icon-btn:hover { color: var(--brand); }
.icon-btn .icon-share { display: none; }
@media (pointer: coarse) {
  .icon-btn .icon-download { display: none; }
  .icon-btn .icon-share { display: inline; }
}

/* ── Print (mirrors the PDF: Letter, compact listing) ─────────── */
.print-header { display: none; }
@media print {
  @page { size: letter; margin: 0.55in; }
  .site-header, .site-footer, .search-form, #map, .apply-bar, .result-actions,
  .house-details, .house-foot .btn, .apply-toggle, .theme-toggle, .map-link { display: none !important; }
  body { background: #fff !important; color: #1a2e1f; padding-bottom: 0 !important; }
  .site-main { max-width: none; padding: 0; margin: 0; }
  .print-header { display: block; border-bottom: 2pt solid #14532d; padding-bottom: 6pt; }
  .print-title { margin: 0; font-size: 17pt; font-weight: 800; }
  .print-title span { color: #14532d; }
  .print-sub { margin: 2pt 0 0; font-size: 9pt; color: #4b5c50; }
  .results-head .result-count { display: none; }
  .house-list { display: block !important; margin-top: 4pt; }
  .house-card {
    display: block;
    border: 0 !important;
    border-bottom: 0.6pt solid #d4ddd6 !important;
    border-radius: 0;
    padding: 4pt 0;
    break-inside: avoid;
    background: #fff !important;
  }
  .house-card h2 { font-size: 10pt; margin: 0; display: inline; }
  .house-sub { display: inline; font-size: 9pt; color: #4b5c50; margin-left: 6pt; }
  .card-top { display: flex; align-items: baseline; gap: 6pt; }
  .card-title { flex: 1 1 auto; }
  .badge-stack { flex-direction: row; gap: 4pt; }
  .badge, .chip {
    font-size: 8pt;
    padding: 1pt 6pt;
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }
  .house-foot { margin: 0; padding: 0; border: 0; justify-content: flex-end; }
  .updated { font-size: 8pt; }
}

/* ── Apply cart ───────────────────────────────────────────────── */
/* The label swaps between "Apply to this house" and the shorter "✓ Selected";
   a zero-height hidden copy of the long label keeps the width constant. */
.apply-toggle {
  display: inline-grid;
  justify-items: center;
  align-content: center;
}
.apply-toggle::after {
  content: "Apply to this house";
  visibility: hidden;
  height: 0;
  overflow: hidden;
}
.apply-toggle.selected {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}
:root[data-theme="dark"] .apply-toggle.selected { color: #08130b; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .apply-toggle.selected { color: #08130b; }
}
.apply-toggle.blocked { opacity: 0.45; cursor: not-allowed; }
.apply-bar {
  position: fixed;
  left: 50%;
  bottom: max(1rem, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  display: flex;
  align-items: stretch;
  max-width: calc(100vw - 2rem);
  background: var(--brand);
  border-radius: 999px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.3);
  z-index: 1100; /* above Leaflet's controls (z-index 1000) */
}
.apply-bar[hidden] { display: none; }
.apply-bar-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0.7rem 1.1rem 0.7rem 1.4rem;
  border-radius: 999px 0 0 999px;
  font-weight: 600;
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
}
.apply-bar-link:hover { background: var(--brand-strong); }
.apply-bar-clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 1rem 0 0.9rem;
  border: 0;
  border-left: 1px solid color-mix(in srgb, currentColor 30%, transparent);
  border-radius: 0 999px 999px 0;
  background: none;
  color: #fff;
  cursor: pointer;
}
.apply-bar-clear:hover { background: var(--brand-strong); }
:root[data-theme="dark"] .apply-bar-link,
:root[data-theme="dark"] .apply-bar-clear { color: #08130b; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .apply-bar-link,
  :root:not([data-theme="light"]) .apply-bar-clear { color: #08130b; }
}
/* Keep the fixed bar from covering the last card's button. */
body.has-apply-bar { padding-bottom: 4.5rem; }

.steps li { margin: 0.5rem 0; }

/* ── Admin ────────────────────────────────────────────────────── */
.admin-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 1rem;
}
.admin-tab {
  padding: 0.45rem 0.9rem;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
}
.admin-tab.active {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}
:root[data-theme="dark"] .admin-tab.active { color: #08130b; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .admin-tab.active { color: #08130b; }
}
.admin-head { margin-top: 1.25rem; }
.admin-head h1 { margin-bottom: 0.25rem; }

/* State status leaderboard — a ranked list you read top-to-bottom, with the
   freshness bars aligned down a shared column so the gradient is scannable at
   a glance. Single column on phones; one aligned row per state on desktop. */
.rank-list {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
  max-width: 56rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.rank-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas:
    "flag name  grade"
    "meter meter meter"
    "stats stats stats";
  align-items: center;
  gap: 0.5rem 0.7rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.7rem 0.9rem;
}

/* State silhouette: the shape itself is filled with the state's status color
   (via currentColor, set inline per row). No tile, no outline. Each symbol keeps
   its own aspect ratio (preserveAspectRatio meet), centred in the square. */
.rank-flag {
  grid-area: flag;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  /* Stacked (phone) layout: the flag is the tallest thing in the header row, so
     the row-gap slack all sits below it. Nudge it down half that gap to sit
     centred in the band between the card top and the top of the bar. Reset on
     desktop, where the flag shares the bar's row (see the min-width block). */
  transform: translateY(0.25rem);
}
.rank-flag svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: currentColor;
}

.rank-state { grid-area: name; display: flex; flex-direction: column; min-width: 0; }
.rank-name { font-size: 1.2rem; font-weight: 800; line-height: 1.2; overflow-wrap: anywhere; }

.rank-meter { grid-area: meter; display: flex; align-items: center; gap: 0.6rem; }
.rank-bar {
  flex: 1;
  height: 0.6rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 999px;
  overflow: hidden;
}
.rank-bar-fill { height: 100%; border-radius: 999px; min-width: 2px; }
.rank-pct {
  min-width: 3.4rem;
  text-align: right;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.rank-row .grade-badge { grid-area: grade; align-self: center; }

.rank-stats {
  grid-area: stats;
  display: flex;
  gap: 0.9rem;
  margin: 0;
  padding-top: 0.55rem;
  border-top: 1px solid var(--border);
  justify-content: space-between;
}
.rank-stats div { min-width: 0; text-align: center; }
.rank-stats dt {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
}
.rank-stats dd { margin: 0.1rem 0 0; font-weight: 700; font-variant-numeric: tabular-nums; }

/* Desktop: collapse each state onto one aligned row so columns line up. */
@media (min-width: 46rem) {
  .rank-row {
    grid-template-columns: auto minmax(6rem, 10rem) minmax(9rem, 1fr) auto auto;
    grid-template-areas: "flag name meter grade stats";
    gap: 0.5rem 1.25rem;
  }
  .rank-flag { transform: none; }
  .rank-stats {
    border-top: 0;
    padding-top: 0;
    justify-content: flex-start;
    gap: 1.1rem;
  }
}

/* Board lists (Monday-style item rows) */
.board { list-style: none; margin: 1rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.6rem; }
.board-item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 5px solid var(--border);
  border-radius: var(--radius);
  padding: 0.7rem 0.9rem;
  min-width: 0;
}
.board-item.item-open { border-left-color: var(--open); }
.board-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.7rem;
}
.board-title { flex: 1 1 12rem; min-width: 0; display: flex; flex-direction: column; }
.board-title a, .board-name { font-weight: 700; color: var(--text); text-decoration: none; overflow-wrap: anywhere; }
.board-title a:hover { color: var(--brand); }
.board-sub { color: var(--text-muted); font-size: 0.85rem; overflow-wrap: anywhere; }
.board-edit { margin-left: auto; }
.board-id { font-size: 0.8rem; }
.board-buttons { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-left: auto; align-items: center; }
.board-buttons .inline-form { display: inline; }
/* Admin card: name + level pill up top, email full width beneath the pill,
   phone with the state pill on one line, buttons in a bordered footer. */
.admin-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
}
.admin-card-head { display: flex; align-items: center; gap: 0.7rem; min-width: 0; }
.admin-email { margin: 0.5rem 0 0; overflow-wrap: anywhere; }
.admin-sub-row { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.3rem; }
.tel-sub { font-size: 0.85rem; }
.admin-sub-row .pill { margin-left: auto; }
.admin-foot { justify-content: flex-start; flex-wrap: wrap; gap: 0.4rem; border-top: 0; padding-top: 0; }
.admin-foot .inline-form { display: inline; }
.btn-danger { color: var(--error); }
.btn-danger:hover { border-color: var(--error); }
.btn-danger-solid { background: var(--error); border-color: var(--error); color: #fff; }
:root[data-theme="dark"] .btn-danger-solid { color: #1a0d0d; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .btn-danger-solid { color: #1a0d0d; }
}
.pw-row { display: flex; align-items: center; gap: 0.5rem; margin: 1rem 0; }
.pw-row .pw-code { margin-left: 0; font-size: 1.15rem; padding: 0.4rem 0.8rem; }
.pw-code {
  margin-left: 0.35rem;
  padding: 0.15rem 0.5rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-weight: 700;
  letter-spacing: 0.06em;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  user-select: all;
}
.copy-btn {
  margin-left: 0.35rem;
  padding: 0.2rem 0.7rem;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--brand);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  cursor: pointer;
}
.copy-btn:hover { border-color: var(--brand); }

/* Edit sheet (native dialog: centered card on desktop, bottom sheet on phones) */
.edit-sheet {
  width: min(30rem, calc(100vw - 2rem));
  margin: auto;
  padding: 1.25rem 1.4rem 1.4rem;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
}
.edit-sheet::backdrop { background: rgba(0, 0, 0, 0.45); }
.edit-sheet h2 { margin: 0 0 0.25rem; font-size: 1.2rem; }
@media (max-width: 40rem) {
  .edit-sheet {
    width: 100vw;
    max-width: 100vw;
    margin: auto 0 0;
    border-radius: 16px 16px 0 0;
    border-bottom: 0;
    padding-bottom: max(1.4rem, env(safe-area-inset-bottom));
  }
}

.pill {
  display: inline-flex;
  align-items: center;
  padding: 0.15rem 0.65rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  white-space: nowrap;
}
.pill-open { background: var(--open-bg); color: var(--open); }
.pill-full { background: var(--full-bg); color: var(--full); }
.pill-accent { background: var(--child-bg); color: var(--child); }
.pill-error { background: var(--error-bg); color: var(--error); }
.pill-neutral { background: var(--bg); color: var(--text-muted); border: 1px solid var(--border); }

.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  font-weight: 700;
  font-size: 0.85rem;
  flex-shrink: 0;
}
:root[data-theme="dark"] .avatar { color: #08130b; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .avatar { color: #08130b; }
}

.grade-badge {
  display: inline-block;
  min-width: 2.4rem;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  font-weight: 700;
  text-align: center;
  color: #1a2e1f; /* status colors from USP_STATE_STATUS are light — keep dark text in both themes */
}
.totals { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1rem 0 1.25rem; }
.sort-row-end { justify-content: flex-end; }
.totals-chip {
  padding: 0.35rem 0.8rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 0.92rem;
}
/* Form pages (add/edit house, send text): grouped surface cards, 2-col grids */
.form-page { max-width: 44rem; }
.form-page h1 { margin: 0.4rem 0 0.15rem; }
.form-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.1rem 1.25rem 1.35rem;
  margin-top: 0.9rem;
}
.form-card-head { display: flex; align-items: center; gap: 0.75rem; }
.form-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--open-bg);
  color: var(--open);
  flex-shrink: 0;
}
.form-icon-teal { background: var(--child-bg); color: var(--child); }
.form-icon-amber { background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); }
.form-card-head h2 { margin: 0; font-size: 1.02rem; font-weight: 700; line-height: 1.3; }
.form-card-head .form-hint { margin: 0.15rem 0 0; font-size: 0.84rem; }
.form-card label { font-size: 0.85rem; margin: 0.95rem 0 0.3rem; }
.form-card :is(input, select, textarea) { background: var(--bg); }
.form-card :is(input, select, textarea):focus { background: var(--surface); }
.form-grid { display: grid; grid-template-columns: 1fr; gap: 0 1rem; }
@media (min-width: 40rem) {
  .form-grid { grid-template-columns: 1fr 1fr; }
  .form-grid .full { grid-column: 1 / -1; }
}
/* Sticky save bar: stays reachable at the bottom of long forms on phones. */
.form-actions-bar {
  position: sticky;
  bottom: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.5rem;
  padding: 0.7rem 0 max(0.7rem, env(safe-area-inset-bottom));
  background: linear-gradient(to top, var(--bg) 72%, transparent);
}
.form-actions-bar .btn { margin-top: 0; }
.switch-row { margin-top: 0.9rem; font-weight: 400; }
.char-row { display: flex; justify-content: flex-end; margin-top: 0.25rem; }
.char-count { font-size: 0.78rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.field-row { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.field-row > div { flex: 1 1 8rem; min-width: 0; }
.form-actions { display: flex; gap: 0.5rem; margin-top: 1rem; align-items: center; }
.admin-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  align-items: flex-end;
  margin-top: 0.75rem;
}
.card > h1:first-child { margin-top: 0.25rem; }
/* ── Login ────────────────────────────────────────────────────── */
.login-card { margin-top: 2rem; }
.login-head { text-align: center; padding: 0.5rem 0 0.75rem; }
.login-head svg { color: var(--brand); }
.login-head h1 { margin: 0.4rem 0 0.2rem; font-size: 1.45rem; }
.login-head p { margin: 0; }
.btn-block { display: block; width: 100%; text-align: center; }
.login-divider { border-top: 1px solid var(--border); margin: 1.4rem 0 0.4rem; }
.reset-details { margin-top: 1.25rem; }
.reset-details summary { cursor: pointer; font-weight: 600; min-height: 44px; display: flex; align-items: center; }

/* ── Apply page ───────────────────────────────────────────────── */
/* Author display rules beat the UA's [hidden] style — make hidden always win. */
[hidden] { display: none !important; }

.apply-intro { margin: 0.25rem 0 0; max-width: 38rem; }
.req { color: var(--error); font-weight: 700; }
.label-note { font-weight: 400; color: var(--text-muted); font-size: 0.85em; }
.field-hint { font-size: 0.82rem; margin: 0.35rem 0 0; }
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.linklike {
  padding: 0;
  font: inherit;
  font-weight: 600;
  color: var(--brand);
  background: none;
  border: 0;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.linklike:hover { color: var(--brand-strong); }
/* Anchors in the apply page's top card match the .linklike retrieve/clear actions */
.mode-switch a,
.apply-page [data-field="Houses"] .form-hint a {
  font-weight: 600;
  color: var(--brand);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.mode-switch a:hover,
.apply-page [data-field="Houses"] .form-hint a:hover { color: var(--brand-strong); }
.retrieve-hint { margin: 1rem 0 0; font-size: 0.9rem; }
.empty-apply { margin-top: 2rem; }
.empty-apply .login-head p { max-width: 24rem; margin: 0 auto; }

/* Selected-house chips */
.house-chips { list-style: none; display: flex; flex-direction: column; gap: 0.45rem; margin: 0.9rem 0 0; padding: 0; }
.house-chip {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.55rem 0.5rem 0.85rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  min-width: 0;
}
.house-chip-name { font-weight: 700; overflow-wrap: anywhere; }
.house-chip-sub { color: var(--text-muted); font-size: 0.85rem; flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.house-chip .pill { flex-shrink: 0; }
.house-chip-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  flex-shrink: 0;
  color: var(--text-muted);
  background: none;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
}
/* Mouse-only, and neutral: on touch screens the "hover" sticks to whichever chip
   slides up under the finger after a removal, which read as an alarming red ✕. */
@media (hover: hover) and (pointer: fine) {
  .house-chip-remove:hover { color: var(--text); background: var(--full-bg); }
}
.mode-switch { margin: 0.9rem 0 0; font-size: 0.9rem; }
.apply-error-summary { margin-top: 1rem; }

/* Segmented Yes/No + pill radio groups */
.seg { display: inline-flex; gap: 0.4rem; }
.seg-wrap { display: flex; flex-wrap: wrap; }
.seg-opt { margin: 0; }
.seg-opt input {
  position: absolute;
  width: 1px; height: 1px;
  min-height: 0;
  opacity: 0;
  pointer-events: none;
}
.seg-opt span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  min-width: 4.25rem;
  padding: 0.45rem 1.1rem;
  font-weight: 600;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
  -webkit-tap-highlight-color: transparent;
}
.seg-opt span:hover { border-color: var(--brand); }
.seg-opt input:checked + span { background: var(--brand); border-color: var(--brand); color: #fff; }
:root[data-theme="dark"] .seg-opt input:checked + span { color: #08130b; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .seg-opt input:checked + span { color: #08130b; }
}
.seg-opt input:focus-visible + span { outline: var(--focus); outline-offset: 2px; }

/* Date-of-birth trio + money inputs */
.dob-row { display: flex; align-items: center; gap: 0.4rem; max-width: 16rem; }
.dob-row input { text-align: center; }
.dob-sep { color: var(--text-muted); font-weight: 700; }
.money-wrap { position: relative; }
.money-sign {
  position: absolute;
  left: 0.8rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  font-weight: 600;
  pointer-events: none;
}
.money-input { padding-left: 1.7rem; }

/* Conditional reveals */
@keyframes reveal-in { from { opacity: 0; transform: translateY(-4px); } }
.reveal-in { animation: reveal-in 0.18s ease; }
.subgrid { margin-top: 0; }

/* Emergency contact blocks */
.contact-block { margin-top: 1.1rem; padding-top: 0.9rem; border-top: 1px dashed var(--border); }
.contact-block:first-of-type { border-top: 0; padding-top: 0; }
.contact-block-title {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.contact-grid { grid-template-columns: 1fr; }
@media (min-width: 48rem) { .contact-grid { grid-template-columns: 1fr 1fr 1fr; } }
#add-contact { margin-top: 1rem; }

/* Tag picker */
.tagbox { position: relative; margin-top: 0.25rem; }
.tagbox-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
  padding: 0.4rem 0.5rem;
  min-height: 48px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: text;
}
.tagbox-chips:focus-within {
  background: var(--surface);
  border-color: var(--brand);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 18%, transparent);
}
.tagbox-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  padding: 0.2rem 0.3rem 0.2rem 0.65rem;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--brand);
  background: var(--open-bg);
  border-radius: 999px;
  max-width: 100%;
}
.tagbox-chip > span { overflow-wrap: anywhere; }
.tagbox-chip-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px; height: 24px;
  font-size: 1.05rem;
  line-height: 1;
  color: inherit;
  background: none;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
}
.tagbox-chip-remove:hover { background: color-mix(in srgb, currentColor 15%, transparent); }
.tagbox-input {
  flex: 1 1 8rem;
  min-width: 8rem;
  min-height: 34px;
  padding: 0.2rem 0.25rem;
  background: none;
  border: 0;
}
.tagbox-input:focus { outline: none; box-shadow: none; border: 0; }
.tagbox-menu {
  position: absolute;
  z-index: 30;
  left: 0; right: 0;
  top: calc(100% + 4px);
  max-height: 15rem;
  overflow-y: auto;
  margin: 0;
  padding: 0.3rem;
  list-style: none;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
}
.tagbox-option { padding: 0.5rem 0.7rem; border-radius: 7px; cursor: pointer; overflow-wrap: anywhere; }
.tagbox-option.active { background: var(--open-bg); color: var(--brand); }
.tagbox-free { font-style: italic; color: var(--text-muted); }
.tagbox-free.active { color: var(--brand); }

/* Signature pad */
.signature-wrap {
  position: relative;
  margin-top: 0.95rem; /* same gap under the card title as the form-grid sections */
  background: #fff; /* the captured PNG is white-backed; dark mode inverts the DISPLAY only */
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  touch-action: none;
}
.signature-wrap canvas { display: block; width: 100%; cursor: crosshair; }
.signature-line {
  position: absolute;
  left: 1.25rem; right: 1.25rem;
  bottom: 2.1rem;
  border-bottom: 1.5px dashed #b9c4bc;
  pointer-events: none;
}
.signature-hint {
  position: absolute;
  left: 50%;
  bottom: 0.55rem;
  transform: translateX(-50%);
  font-size: 0.82rem;
  color: #7c8a80;
  pointer-events: none;
}
/* Dark-mode signature pad: invert the canvas for DISPLAY only — toDataURL reads the
   raw bitmap, so the captured PNG stays dark-on-white for the PDF. The dashed line
   and hint are overlay siblings (not canvas pixels), so they get their own colors. */
:root[data-theme="dark"] .signature-wrap { background: #000; }
:root[data-theme="dark"] #signature-canvas { filter: invert(1); }
:root[data-theme="dark"] .signature-line { border-bottom-color: #4a544d; }
:root[data-theme="dark"] .signature-hint { color: #98a49b; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .signature-wrap { background: #000; }
  :root:not([data-theme="light"]) #signature-canvas { filter: invert(1); }
  :root:not([data-theme="light"]) .signature-line { border-bottom-color: #4a544d; }
  :root:not([data-theme="light"]) .signature-hint { color: #98a49b; }
}

/* Disclaimer */
.disclaimer-text {
  max-height: 14rem;
  overflow-y: auto;
  margin-top: 0.95rem; /* same gap under the card title as the form-grid sections */
  padding: 0.9rem 1rem;
  font-size: 0.88rem;
  color: var(--text-muted);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.disclaimer-text p { margin: 0 0 0.8rem; }
.disclaimer-text p:last-child { margin-bottom: 0; }
.disclaimer-ack {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.9rem;
  padding: 0.85rem 1rem;
  font-weight: 600;
  background: var(--open-bg);
  border: 1.5px solid var(--brand);
  border-radius: 10px;
  cursor: pointer;
}
.disclaimer-ack input { width: 1.4rem; height: 1.4rem; min-height: 0; flex-shrink: 0; accent-color: var(--brand); }

/* Errors, submit bar, toast */
.field-error {
  margin: 0.35rem 0 0;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--error);
}
.has-error :is(input, select, textarea, .tagbox-chips, .signature-wrap) { border-color: var(--error); }
.btn-submit-apply { flex: 1 1 auto; max-width: 26rem; text-align: center; }
.btn-busy { opacity: 0.75; cursor: progress; }
.toast {
  position: fixed;
  left: 50%;
  /* Clears the sticky "Apply to N houses" bar instead of covering it. */
  bottom: calc(max(0.7rem, env(safe-area-inset-bottom)) + 5.2rem);
  transform: translateX(-50%) translateY(10px);
  z-index: 1200;
  max-width: calc(100vw - 2rem);
  padding: 0.85rem 1.2rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  /* Card, not button: the green edge open-house cards use, plus a leading check. */
  border-left: 5px solid var(--brand);
  border-radius: 12px;
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.4);
  opacity: 0;
  transition: opacity 0.22s ease, transform 0.22s ease;
}
.toast::before { content: "✓ "; font-weight: 800; color: var(--brand); }
.toast.toast-in { opacity: 1; transform: translateX(-50%) translateY(0); }

/* Retrieve sheet */
.retrieve-row { display: flex; gap: 0.5rem; align-items: stretch; }
.retrieve-row .btn { margin-top: 0; flex-shrink: 0; }
.retrieve-row input { flex: 1 1 auto; min-width: 0; }
.retrieve-status { min-height: 1.3rem; margin: 0.6rem 0 0.2rem; font-size: 0.88rem; }
.code-input {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* Applied (success) page */
.applied-card { margin-top: 2.5rem; text-align: center; }
.applied-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 74px; height: 74px;
  color: var(--open);
  background: var(--open-bg);
  border-radius: 50%;
  animation: applied-pop 0.45s ease;
}
@keyframes applied-pop { 0% { transform: scale(0.5); opacity: 0; } 70% { transform: scale(1.08); } 100% { transform: scale(1); opacity: 1; } }
.applied-check svg { width: 38px; height: 38px; }
.applied-steps { text-align: left; max-width: 26rem; margin: 1.4rem auto 0; padding-left: 1.4rem; }
.applied-steps li { margin: 0.55rem 0; }

/* ── Apply: area picker ───────────────────────────────────────── */
.or-divider {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin: 1.1rem 0 0.2rem;
  color: var(--text-muted);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.or-divider::before, .or-divider::after {
  content: "";
  flex: 1;
  border-top: 1px solid var(--border);
}
.county-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.15rem 0.8rem;
  max-height: 16rem;
  overflow-y: auto;
  margin-top: 0.3rem;
  padding: 0.5rem 0.6rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
}
@media (min-width: 40rem) { .county-grid { grid-template-columns: 1fr 1fr; } }
.county-opt {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0;
  padding: 0.35rem 0.4rem;
  min-height: 42px;
  font-weight: 500;
  border-radius: 8px;
  cursor: pointer;
}
.county-opt:hover { background: var(--surface); }
.county-opt input {
  width: 1.25rem; height: 1.25rem;
  min-height: 0;
  flex-shrink: 0;
  accent-color: var(--brand);
}
.county-opt .county-name { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.county-opt .pill { flex-shrink: 0; font-size: 0.7rem; }
.area-count-line { margin: 0.8rem 0 0; font-weight: 600; }
.area-chip-row { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.9rem; }
.retrieve-card { text-align: center; }
.retrieve-card .retrieve-hint { margin: 0; }
#area-continue:disabled { opacity: 0.55; cursor: not-allowed; }

/* Lazy-loading sentinel (search + admin house lists) */
.load-more { display: flex; justify-content: center; padding: 1.1rem 0 0.4rem; }
.load-more .btn { margin-top: 0; }
@media print { .load-more { display: none !important; } }

/* Dynamic report viewer (/OxfordReport?report=name) */
.report-page { max-width: 1100px; margin: 0 auto; padding: 1.2rem 1rem 2rem; }
.report-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.report-head h1 { margin: 0; overflow-wrap: anywhere; }
.report-count { margin: 0.4rem 0 0.8rem; }
.report-scroll { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.report-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.report-table th, .report-table td { padding: 0.55rem 0.8rem; text-align: left; white-space: nowrap; border-bottom: 1px solid var(--border); }
.report-table th { position: sticky; top: 0; background: var(--surface); font-weight: 600; color: var(--text-muted); text-transform: uppercase; font-size: 0.72rem; letter-spacing: 0.04em; }
.report-table tbody tr:last-child td { border-bottom: none; }
.report-table tbody tr:nth-child(even) { background: var(--bg); }

/* Disclaimer scroll affordance (apply page) */
.disclaimer-scroll { position: relative; }
.disclaimer-scroll .disclaimer-text { padding-bottom: 2.4rem; }
.disclaimer-more {
  position: absolute;
  left: 50%;
  bottom: 0.6rem;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.9rem;
  min-height: 0;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--brand);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.14);
  cursor: pointer;
}
.disclaimer-more[hidden] { display: none; } /* the hidden attr loses to any display rule */
.disclaimer-more svg { animation: nudge-down 1.6s ease-in-out infinite; }
@keyframes nudge-down { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(3px); } }
@media (prefers-reduced-motion: reduce) { .disclaimer-more svg { animation: none; } }

/* "Starting over?" clear-form line in the top card */
.clear-hint { margin: 0.35rem 0 0; font-size: 0.88rem; }

/* Login: password-reset call feedback */
.calling-now { margin-top: 0.9rem; line-height: 1.5; }
.calling-now strong { display: block; margin-bottom: 0.25rem; }
.reset-status { margin: 0.75rem 0 0; color: var(--error); font-size: 0.9rem; }

/* House portal */
.portal-intro { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin: 0.25rem 0 0.9rem; }
.stepper-row { display: flex; gap: 0.9rem 1.1rem; flex-wrap: wrap; }
.stepper-block > label { display: block; margin-bottom: 0.4rem; }
.stepper {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  background: var(--surface);
}
.stepper input {
  width: 4.4rem;
  text-align: center;
  border: 0;
  border-radius: 0;
  font-size: 1.35rem;
  font-weight: 700;
  min-height: 52px;
  background: transparent;
}
.stepper input:focus { outline-offset: -3px; }
.stepper-btn {
  width: 52px;
  min-height: 52px;
  border: 0;
  background: var(--bg);
  color: var(--brand);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}
.stepper-btn:active { background: var(--open-bg); }
.preview-label { margin: 1.2rem 0 0.4rem; font-size: 0.85rem; }
.portal-preview { flex-direction: row; align-items: center; justify-self: start; flex-wrap: wrap; }
.portal-preview .badge[hidden] { display: none; } /* the hidden attr loses to any display rule */
.stepper, .stepper-btn, .stepper input { touch-action: manipulation; } /* no double-tap zoom on +/- */
.stepper-btn { -webkit-user-select: none; user-select: none; } /* rapid taps must not select the glyph */
.label-with-icon { display: inline-flex; align-items: center; gap: 0.35rem; }
.label-with-icon .pref-icon { color: var(--brand); flex-shrink: 0; }
.pref-hint { margin: -0.1rem 0 0.25rem; font-size: 0.8rem; }
[data-field="AdditionalInformation"] textarea { margin-top: 0.95rem; } /* its label is visually hidden */

/* Retrieve dialog: sent-state button + prominent next-steps block */
.btn-sent { background: var(--success-bg); color: var(--success); border-color: var(--success); opacity: 1; }
.retrieve-next { margin: 1rem 0 0.25rem; font-size: 0.95rem; line-height: 1.5; animation: pop-in 0.25s ease-out; }
.retrieve-next[hidden] { display: none; } /* the hidden attr loses to any display rule */
.retrieve-next strong { display: block; margin-bottom: 0.3rem; font-size: 1.05rem; }
@keyframes pop-in { from { transform: scale(0.96); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .retrieve-next { animation: none; } }

/* Error / not-found page */
.error-card { text-align: center; padding: 2.5rem 1.5rem; margin-top: 2.5rem; }
.error-card .error-icon { color: var(--brand); }
.error-card .error-emoji { font-size: 3rem; line-height: 1; }
.error-card h1 { margin: 0.9rem 0 0.5rem; font-size: 1.45rem; letter-spacing: -0.01em; }
.error-card p { max-width: 22rem; margin: 0 auto; }
.error-card .btn { margin-top: 1.4rem; }

/* How-it-works page */
.howto-steps { list-style: none; margin: 1rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 1rem; }
.howto-steps li { display: flex; gap: 0.85rem; align-items: flex-start; }
.howto-steps strong { display: block; margin-bottom: 0.15rem; }
.howto-steps p { margin: 0; font-size: 0.92rem; }
.step-num {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--open-bg);
  color: var(--open);
  font-weight: 800;
}
.howto-list { list-style: none; margin: 1rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.9rem; }
.howto-list li { display: flex; gap: 0.7rem; align-items: flex-start; font-size: 0.92rem; }
.howto-list svg { flex-shrink: 0; margin-top: 0.15rem; color: var(--brand); }
.howto-list code { background: var(--bg); border: 1px solid var(--border); border-radius: 6px; padding: 0.05rem 0.4rem; font-weight: 700; }
.howto-video { margin-top: 1.1rem; }
.howto-video summary { cursor: pointer; font-weight: 600; color: var(--brand); }
.howto-video summary:hover { color: var(--brand-strong); }
.video-frame { margin-top: 0.7rem; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; border: 1px solid var(--border); background: #000; }
.video-frame iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ── Find-a-vacancy: desktop app frame (≥64rem; phones/tablets unchanged) ──
   One committed layout, no map toggle: filter toolbar band up top, a fixed
   30rem card column that scrolls by itself, and the map owning every
   remaining pixel. Approved from the 2026-07-19 design mockup. */
.house-card.flash {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 25%, transparent);
}
/* Popup footer mirrors the card footer: jump link left, updated date right */
.map-pop-foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.7rem;
  margin-top: 0.55rem;
}
.leaflet-popup .view-card {
  padding: 0;
  font: inherit;
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--brand);
  background: none;
  border: 0;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}

@media (min-width: 64rem) {
  body.find-page {
    height: 100dvh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  .find-page .site-header { flex: none; }
  .find-page .site-nav { max-width: none; padding: 0.5rem 1.5rem; } /* full-bleed frame, full-bleed nav */
  .find-page .site-main {
    flex: 1 1 auto;
    min-height: 0;
    max-width: none;
    width: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
  }
  .find-page .site-footer { display: none; }

  /* Slim headline + filter toolbar share one surface band */
  .find-page .hero { text-align: left; padding: 0.85rem 1.5rem 0; background: var(--surface); }
  .find-page .hero h1 { font-size: 1.3rem; }
  .find-page .search-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
    margin: 0;
    padding: 0.55rem 1.5rem 0.85rem;
    background: var(--surface);
    border: 0;
    border-bottom: 1px solid var(--border);
    border-radius: 0;
  }
  .find-page .search-grid { display: flex; flex: 1 1 auto; gap: 0.6rem; }
  .find-page .search-grid > div { flex: 0 1 12.5rem; min-width: 0; }
  .find-page .search-grid > div:last-child { flex: 1 1 16rem; }
  /* Field labels leave the layout but stay for assistive tech */
  .find-page .search-grid label {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }
  .find-page .search-footer { margin: 0; }
  .find-page .sort-row { margin: 0; }
  .find-page #map-toggle { display: none; } /* the map is always on */
  .find-page .clear-all { position: static; order: 10; }

  /* The sort chip panel presents as a dropdown menu under the Sort button */
  .find-page .sort-panel {
    position: absolute;
    right: 1.5rem;
    top: calc(100% - 0.35rem);
    z-index: 40;
    flex-direction: column;
    align-items: stretch;
    width: 13.5rem;
    margin: 0;
    padding: 0.35rem;
    border-top: 0;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
  }
  .find-page .sort-panel-label { margin: 0; padding: 0.35rem 0.7rem 0.15rem; }
  .find-page .sort-chip {
    justify-content: space-between;
    border: 0;
    border-radius: 7px;
    padding: 0.5rem 0.7rem;
    font-size: 0.92rem;
    background: none;
    color: var(--text);
  }
  .find-page .sort-chip:hover,
  .find-page .sort-chip.active { background: var(--open-bg); color: var(--brand); }
  .find-page .sort-chip.active { font-weight: 700; }

  /* Fixed list column + the map owns every remaining pixel */
  .find-page .split {
    flex: 1 1 auto;
    min-height: 0;
    display: grid;
    grid-template-columns: 30rem minmax(0, 1fr);
  }
  .find-page .split:has(> #map[hidden]) { grid-template-columns: minmax(0, 1fr); } /* pre-JS / no-JS */
  .find-page #results {
    grid-row: 1;
    grid-column: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 0 1rem 1rem 1.5rem;
    border-right: 1px solid var(--border);
    scrollbar-gutter: stable;
  }
  .find-page #map {
    grid-row: 1;
    grid-column: 2;
    height: auto;
    margin: 0;
    border: 0;
    border-radius: 0;
  }
  .find-page .results-head {
    position: sticky;
    top: 0;
    z-index: 5;
    margin: 0 -1rem 0.8rem -1.5rem;
    padding: 0.55rem 1rem 0.55rem 1.5rem;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
  }
  .find-page .house-list { grid-template-columns: minmax(0, 1fr); }

  /* Apply pill centers over the list column; the frame never scrolls, so pad
     the scrolling column instead of the body. */
  .find-page .apply-bar { left: 15rem; }
  body.find-page.has-apply-bar { padding-bottom: 0; }
  .find-page.has-apply-bar #results { padding-bottom: 5rem; }

  /* Hovered cards lift their pin */
  .find-page .marker-hot { filter: drop-shadow(0 0 5px var(--accent)) brightness(1.12); }
}
@media print {
  body.find-page { display: block; height: auto; overflow: visible; }
  .find-page .split { display: block; }
  .find-page #results { overflow: visible; border-right: 0; padding: 0; }
  .find-page .results-head { position: static; border-bottom: 0; background: none; }
}