/* Fonts are loaded once, via <link> in layouts/application.html.erb.
   Never reintroduce an @import here: an @import inside the stylesheet cannot
   start downloading until this file has itself downloaded and parsed, so it
   serializes the font request behind the CSS instead of running alongside it. */

/* ──────────────────────────────────────────────────────────────────────────
   This file holds two design systems during the Accessible Menu migration.

   1. Aequitas Glass (legacy, below) — still drives the admin route, the
      affiliate banner, the auth modal, and the WYSIWYG editor. Token names
      `--legacy-bg` / `--legacy-surface` were renamed so they don't collide
      with the new system. Safe to delete once those screens are refit.
   2. The Accessible Menu (new, near the bottom) — owns the home/discover/
      detail/review routes via `.am-*` classes and `:root` tokens
      (`--bg`, `--ink`, `--rule`, `--accent`, …). Theme toggles live as
      `html.theme-dark`, `html.high-contrast`, `html.size-L|XL|XXL`,
      `html.letter-tight|loose`, `html.reduce-motion`, `html.underline-links`
      and are driven by `app/javascript/components/chrome/PrefsContext.jsx`.

   Search for "The Accessible Menu — design system" below to jump to the
   new section.
   ────────────────────────────────────────────────────────────────────── */

/* ─── Aequitas Glass — Liquid Glass Framework (legacy) ────────────────────── */
:root {
  --legacy-bg: #f6f3f2;
  --card: #ffffff;
  --text: #1b1c1c;
  --muted: #3d4947;
  --line: rgba(188, 201, 198, 0.22);
  --legacy-surface: #f0eded;
  --surface-low: #f6f3f2;
  --surface-high: #eae8e7;
  --primary: #2a9d8f;
  --primary-base: #00685d;
  --primary-container: #008376;
  --primary-dark: #00685d;
  --primary-gradient: linear-gradient(135deg, #00685d 0%, #008376 100%);
  --primary-on: #ffffff;
  --secondary: #006e25;
  --tertiary: #6049b5;
  --danger: #ba1a1a;
  --danger-container: #ffdad6;
  --radius: 24px;
  --radius-lg: 16px;
  --shadow: 0 2px 8px rgba(27, 28, 28, 0.04), 0 8px 24px -4px rgba(27, 28, 28, 0.07);
  --shadow-float: 0 16px 48px -4px rgba(27, 28, 28, 0.12);
  --focus-ring: rgba(96, 73, 181, 0.55);
  --glass-bg: rgba(251, 249, 248, 0.84);
  --glass-blur: blur(18px);
}

/* ─── Dark Mode — Aequitas Night ──────────────────────────────────────────── */
[data-theme="dark"] {
  --legacy-bg: #0f1729;
  --card: #1a2340;
  --text: #dae2fd;
  --muted: #859490;
  --line: rgba(45, 52, 73, 0.8);
  --legacy-surface: #1e2840;
  --surface-low: #151e35;
  --surface-high: #2d3449;
  --primary: #57f1db;
  --primary-base: #2dd4bf;
  --primary-container: #2dd4bf;
  --primary-dark: #2dd4bf;
  --primary-gradient: linear-gradient(135deg, #57f1db 0%, #2dd4bf 100%);
  --primary-on: #00201c;
  --secondary: #7ad7c6;
  --tertiary: #cbbeff;
  --danger: #ffb4ab;
  --danger-container: rgba(186, 26, 26, 0.4);
  --shadow: 0 2px 8px rgba(0, 0, 0, 0.3), 0 8px 24px -4px rgba(0, 0, 0, 0.45);
  --shadow-float: 0 16px 48px -4px rgba(0, 0, 0, 0.6);
  --glass-bg: rgba(15, 23, 41, 0.88);
  --glass-blur: blur(18px);
}

[data-theme="dark"] body {
  background: radial-gradient(circle at top right, #162040, transparent 50%), var(--legacy-bg);
}

[data-theme="dark"] input,
[data-theme="dark"] select,
[data-theme="dark"] textarea {
  background: var(--legacy-surface);
  color: var(--text);
  border-color: var(--line);
}

[data-theme="dark"] .site-header {
  background: var(--glass-bg);
}

[data-theme="dark"] .brand-mark {
  box-shadow: 0 8px 22px rgba(87, 241, 219, 0.28);
}

[data-theme="dark"] .site-nav {
  color: #94a3b8;
}

[data-theme="dark"] .site-nav a:hover {
  color: var(--text);
}

[data-theme="dark"] .btn.ghost {
  background: var(--legacy-surface);
  color: var(--text);
}

[data-theme="dark"] .mock-card {
  background: var(--card);
}

[data-theme="dark"] .panel-head,
[data-theme="dark"] .map-head {
  background: var(--legacy-surface);
}

[data-theme="dark"] .map-canvas-wrap {
  background: linear-gradient(140deg, #0f1729, #1a2340);
}

[data-theme="dark"] .map-google-results {
  background: var(--surface-high);
}

[data-theme="dark"] .map-google-item,
[data-theme="dark"] .map-pick-item {
  background: var(--card);
}

[data-theme="dark"] .chip {
  background: var(--legacy-surface);
  color: var(--muted);
  border-color: var(--line);
}

[data-theme="dark"] .chip-active {
  background: rgba(87, 241, 219, 0.14);
  border-color: rgba(87, 241, 219, 0.4);
  color: #57f1db;
}

[data-theme="dark"] .result-card {
  background: var(--card);
}

[data-theme="dark"] .result-card:hover {
  background: var(--surface-high);
}

[data-theme="dark"] .pill-tab {
  background: var(--legacy-surface);
  color: var(--muted);
}

[data-theme="dark"] .pill-tab.active {
  background: rgba(87, 241, 219, 0.14);
  border-color: rgba(87, 241, 219, 0.4);
  color: #57f1db;
}

[data-theme="dark"] .search-section {
  background: var(--card);
}

[data-theme="dark"] .search-input {
  background: var(--legacy-surface);
  border-color: var(--line);
}

[data-theme="dark"] .results-toolbar {
  background: var(--card);
}

[data-theme="dark"] .affiliate-banner {
  background: linear-gradient(160deg, var(--card) 0%, var(--legacy-surface) 100%);
}

[data-theme="dark"] .affiliate-card,
[data-theme="dark"] .affiliate-rotation-slot,
[data-theme="dark"] .affiliate-admin-create,
[data-theme="dark"] .affiliate-admin-item {
  background: var(--card);
}

[data-theme="dark"] .admin-scorecard-filters,
[data-theme="dark"] .admin-scorecard-item,
[data-theme="dark"] .resource-admin-create,
[data-theme="dark"] .admin-resource-item {
  background: var(--card);
}

[data-theme="dark"] .wysiwyg-editor {
  background: var(--legacy-surface);
  color: var(--text);
}

[data-theme="dark"] .skip-link {
  background: var(--card);
  color: var(--text);
}

[data-theme="dark"] .metric-row strong {
  color: var(--text);
}

[data-theme="dark"] .score-badge {
  background: rgba(87, 241, 219, 0.12);
  color: #57f1db;
  border-color: rgba(87, 241, 219, 0.25);
}

[data-theme="dark"] .score-breakdown-item.score-tone-blue { background: rgba(87, 241, 219, 0.1); color: #57f1db; }
[data-theme="dark"] .score-breakdown-item.score-tone-purple { background: rgba(203, 190, 255, 0.1); color: #cbbeff; }
[data-theme="dark"] .score-breakdown-item.score-tone-orange { background: rgba(255, 213, 145, 0.1); color: #ffd591; }
[data-theme="dark"] .score-breakdown-item.score-tone-green { background: rgba(125, 253, 148, 0.1); color: #7dfd94; }
[data-theme="dark"] .score-breakdown-item.score-tone-cyan { background: rgba(87, 241, 219, 0.1); color: #57f1db; }
[data-theme="dark"] .score-breakdown-item.score-tone-slate { background: rgba(148, 164, 184, 0.1); color: #94a4b8; }

[data-theme="dark"] .map-google-confidence.high {
  background: rgba(87, 241, 219, 0.12);
  color: #57f1db;
  border-color: rgba(87, 241, 219, 0.3);
}

[data-theme="dark"] .map-google-confidence.medium {
  background: rgba(255, 213, 145, 0.1);
  color: #ffd591;
  border-color: rgba(255, 213, 145, 0.25);
}

[data-theme="dark"] .map-google-confidence.low {
  background: rgba(255, 180, 171, 0.1);
  color: #ffb4ab;
  border-color: rgba(255, 180, 171, 0.25);
}

[data-theme="dark"] .scorecard-circle {
  border-color: rgba(87, 241, 219, 0.35);
  color: #57f1db;
}

[data-theme="dark"] .affiliate-html-segment a {
  background: var(--primary-gradient);
  color: var(--primary-on);
  border-color: transparent;
}

[data-theme="dark"] .wizard-pick-item {
  background: var(--card);
  border-color: var(--line);
}

[data-theme="dark"] .wizard-pick-item:hover {
  background: var(--surface-high);
}

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

/* Visible-on-focus skip link for keyboard navigation */
.skip-link {
  position: absolute;
  left: 8px;
  top: -44px;
  z-index: 200;
  background: #0f172a;
  color: #fff;
  padding: 10px 12px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 700;
}

.skip-link:focus {
  top: 8px;
}

body {
  margin: 0;
  background: radial-gradient(circle at top right, #d8f3ef, transparent 40%), var(--legacy-bg);
  color: var(--text);
  font-family: "Inter", sans-serif;
}

a {
  color: inherit;
  text-decoration: none;
}

input,
select,
textarea,
button {
  font: inherit;
}

input,
select,
textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px 12px;
  background: #fff;
  color: var(--text);
}

textarea {
  resize: vertical;
  min-height: 110px;
}

button {
  border: 0;
  background: transparent;
}

button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
a:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 3px;
}

.material-symbols-outlined {
  font-variation-settings: "FILL" 0, "wght" 450, "GRAD" 0, "opsz" 24;
  font-size: 20px;
  line-height: 1;
}

.app-shell {
  min-height: 100%;
}

.site-wrap {
  width: min(1680px, calc(100% - 2rem));
  margin: 0 auto;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 30;
  border-bottom: none;
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: 0 1px 0 rgba(188, 201, 198, 0.25), 0 4px 20px -4px rgba(27, 28, 28, 0.06);
}

.site-header-inner {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 14px 0;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 250px;
}

.brand-mark {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: var(--primary-gradient);
  color: #ffffff;
  box-shadow: 0 8px 22px rgba(42, 157, 143, 0.38);
}

.brand-mark .material-symbols-outlined {
  font-size: 28px;
}

.brand-copy {
  display: grid;
  gap: 2px;
}

.brand-copy strong {
  font-size: 18px;
  letter-spacing: -0.02em;
}

.brand-copy span {
  color: var(--muted);
  font-size: 12px;
}

.site-nav {
  display: flex;
  gap: 20px;
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
}

.site-nav a:hover {
  color: var(--text);
}

.header-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 9px 16px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  cursor: pointer;
  transition: all 0.18s ease;
}

.btn:hover {
  transform: translateY(-1px);
}

.btn.primary {
  background: var(--primary-gradient);
  border-color: transparent;
  color: var(--primary-on);
}

.btn.primary:hover {
  background: linear-gradient(135deg, #2a9d8f 0%, #00685d 100%);
}

.btn.ghost {
  background: var(--card);
}

.site-main {
  padding: 24px 0 28px;
}

.site-footer {
  border-top: 1px solid var(--line);
  padding: 0 0 28px;
}

.affiliate-banner {
  margin-top: 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(160deg, #ffffff 0%, var(--surface-low) 100%);
  box-shadow: var(--shadow);
  padding: 16px;
}

.affiliate-banner-head h2 {
  margin: 0;
  font-size: 24px;
  line-height: 1.2;
}

.affiliate-banner-head p {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
}

.affiliate-grid {
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.affiliate-rotation-slot {
  margin-top: 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  padding: 12px;
}

.affiliate-rotation-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.affiliate-rotation-head h3 {
  margin: 0;
  font-size: 18px;
}

.affiliate-rotation-head span {
  border-radius: 999px;
  border: 1px solid #cbd5e1;
  padding: 4px 8px;
  font-size: 11px;
  font-weight: 700;
  color: #334155;
  background: #f8fafc;
}

.affiliate-html-segment {
  margin-top: 10px;
}

.affiliate-html-segment img {
  max-width: 100%;
  height: auto;
  border-radius: 10px;
}

.affiliate-html-segment a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 6px;
  border: 1px solid transparent;
  border-radius: 10px;
  padding: 8px 12px;
  background: var(--primary-gradient);
  color: var(--primary-on);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}

.affiliate-admin {
  margin-top: 16px;
  border-top: 1px dashed var(--line);
  padding-top: 14px;
  display: grid;
  gap: 12px;
}

.affiliate-admin h3 {
  margin: 0;
  font-size: 18px;
}

.affiliate-admin-create,
.affiliate-admin-item {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  padding: 12px;
  display: grid;
  gap: 8px;
}

.affiliate-admin-create label,
.affiliate-admin-item label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  font-weight: 700;
}

.affiliate-admin-create input[type="checkbox"],
.affiliate-admin-item input[type="checkbox"] {
  width: auto;
  justify-self: start;
}

.affiliate-admin-list {
  display: grid;
  gap: 10px;
}

.admin-shell {
  display: grid;
  gap: 12px;
}

.admin-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.admin-card {
  padding: 16px;
  display: grid;
  gap: 12px;
}

.admin-card h2 {
  margin: 0;
  font-size: 22px;
}

.admin-scorecard-list {
  display: grid;
  gap: 10px;
}

.resource-admin-create {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  padding: 12px;
  display: grid;
  gap: 8px;
}

.resource-admin-create .admin-item-actions {
  display: flex;
}

.resource-admin-create textarea {
  min-height: 180px;
}

.resource-logo-preview-wrap {
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #f8faf8;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.resource-logo-preview {
  max-width: 260px;
  max-height: 80px;
  width: auto;
  height: auto;
  object-fit: contain;
}

.resource-logo-preview-wrap + label {
  margin-top: 8px;
}

.admin-resource-list {
  margin-top: 12px;
  display: grid;
  gap: 10px;
}

.admin-resource-item {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  padding: 12px;
  display: grid;
  gap: 10px;
}

.admin-resource-item-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.admin-resource-item-head img {
  width: 120px;
  height: 50px;
  object-fit: contain;
}

.admin-resource-item p {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.admin-resource-body-preview {
  border-top: 1px dashed var(--line);
  border-bottom: 1px dashed var(--line);
  padding: 8px 0;
  max-height: 170px;
  overflow: hidden;
  color: var(--muted);
  line-height: 1.45;
  font-size: 13px;
}

.admin-resource-body-preview img {
  max-width: 140px;
  height: auto;
}

.wysiwyg-editor-wrap {
  display: grid;
  gap: 8px;
}

.wysiwyg-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.wysiwyg-toolbar-btn {
  padding: 8px 10px;
  font-size: 12px;
}

.wysiwyg-editor {
  min-height: 220px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  padding: 10px;
  color: var(--text);
}

.wysiwyg-editor p {
  margin: 0 0 10px;
}

.wysiwyg-editor:empty::before,
.wysiwyg-editor[data-empty="true"]::before {
  content: attr(data-placeholder);
  color: var(--muted);
  pointer-events: none;
}

.wysiwyg-editor img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
}

.wysiwyg-editor:focus,
.wysiwyg-editor:focus-visible {
  outline: 2px solid rgba(42, 157, 143, 0.45);
  outline-offset: 2px;
}

.wysiwyg-file-input {
  display: none;
}

.admin-scorecard-filters {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  padding: 12px;
  display: grid;
  gap: 8px;
}

.admin-scorecard-filters label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  font-weight: 700;
}

.admin-scorecard-item {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  padding: 12px;
  display: grid;
  gap: 10px;
}

.admin-scorecard-item strong {
  display: block;
}

.admin-scorecard-item p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.admin-scorecard-item small {
  display: block;
  margin-top: 6px;
  color: #475569;
  font-size: 12px;
}

.admin-scorecard-controls {
  display: grid;
  gap: 8px;
}

.admin-scorecard-controls label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  font-weight: 700;
}

.admin-scorecard-controls input[type="checkbox"] {
  width: auto;
  justify-self: start;
}

.admin-item-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.admin-scorecard-pagination {
  border-top: 1px solid var(--line);
  padding-top: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.admin-scorecard-pagination span {
  font-size: 13px;
  color: var(--muted);
}

.affiliate-card {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  padding: 12px;
  display: grid;
  gap: 8px;
  align-content: start;
}

.affiliate-focus {
  margin: 0;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--primary-dark);
  font-weight: 800;
}

.affiliate-card h3 {
  margin: 0;
  font-size: 16px;
  line-height: 1.3;
}

.affiliate-card p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.affiliate-card .btn {
  margin-top: 4px;
  justify-self: start;
}

.affiliate-disclosure {
  margin: 12px 0 0;
  font-size: 12px;
  color: #475569;
}

.search-section {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px;
  margin-bottom: 16px;
}

.search-input {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 12px 14px;
  background: var(--legacy-surface);
}

.search-input .material-symbols-outlined {
  color: #475569;
}

.search-input input {
  border: 0;
  background: transparent;
  padding: 0;
  font-size: 15px;
}

.quick-chips {
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: #fff;
  color: #334155;
  font-size: 13px;
  font-weight: 600;
  padding: 8px 12px;
  cursor: pointer;
}

.chip .material-symbols-outlined {
  font-size: 18px;
}

.chip-active {
  border-color: rgba(42, 157, 143, 0.55);
  background: rgba(42, 157, 143, 0.12);
  color: var(--primary-dark);
}

.content-layout {
  display: grid;
  grid-template-columns: 310px minmax(0, 1fr);
  gap: 16px;
}

.filters-rail {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.filters-rail:not(.open) {
  display: none;
}

.mock-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

/* ─── Dark mode toggle ─────────────────────────────────────────────────────── */
.dark-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--legacy-surface);
  color: var(--muted);
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.dark-toggle:hover {
  background: var(--surface-high);
  color: var(--text);
  transform: scale(1.08);
}

.filters-card {
  overflow: hidden;
}

.panel-head {
  padding: 14px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--surface-low);
}

.panel-head h2 {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
}

.reset-link {
  font-size: 12px;
  font-weight: 700;
  color: var(--primary-dark);
  cursor: pointer;
}

.filter-group,
.filter-list {
  padding: 14px;
}

.filter-group label,
.filter-item span {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  font-weight: 700;
}

.filter-list {
  display: grid;
  gap: 10px;
}

.filter-item {
  display: grid;
  gap: 8px;
}

.filter-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.filter-label .material-symbols-outlined {
  font-size: 18px;
  color: #334155;
}

.cta-card {
  padding: 16px;
  display: grid;
  gap: 12px;
}

.cta-card h2 {
  margin: 0;
  font-size: 17px;
}

.cta-card p {
  margin: 0;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.5;
}

.metric-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 10px 0;
  font-size: 13px;
  color: var(--muted);
}

.metric-row strong {
  color: #0f172a;
  font-size: 18px;
}

.results-shell {
  display: grid;
  gap: 12px;
}

.results-toolbar {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

.results-toolbar h2 {
  margin: 0;
  font-size: 20px;
}

.toolbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.pill-tab {
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  font-size: 12px;
  font-weight: 700;
  padding: 7px 11px;
  color: #475569;
  cursor: pointer;
}

.pill-tab.active {
  background: rgba(42, 157, 143, 0.12);
  border-color: rgba(42, 157, 143, 0.5);
  color: var(--primary-dark);
}

.discovery-layout {
  display: grid;
  gap: 12px;
}

.map-panel {
  overflow: hidden;
}

.map-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  background: var(--surface-low);
}

.map-head h3 {
  margin: 0;
  font-size: 16px;
}

.map-head span {
  font-size: 12px;
  color: var(--muted);
  text-transform: uppercase;
  font-weight: 700;
}

.map-canvas-wrap {
  position: relative;
  min-height: 360px;
  background: linear-gradient(140deg, var(--surface-low), var(--legacy-surface));
}

.map-canvas {
  position: absolute;
  inset: 0;
}

.map-pick-card {
  padding: 14px;
}

.map-pick-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.map-pick-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.map-pick-head h3 {
  margin: 0;
  font-size: 16px;
}

.map-pick-card p {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.map-pick-list {
  margin-top: 10px;
  display: grid;
  gap: 8px;
}

.map-google-results {
  margin-top: 10px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-low);
}

.map-google-title {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
}

.map-google-list {
  margin-top: 8px;
  display: grid;
  gap: 8px;
}

.map-google-item {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 8px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.map-google-item strong {
  display: block;
  font-size: 13px;
}

.map-google-item span {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 12px;
}

.map-google-meta {
  margin-top: 6px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.map-google-meta small {
  color: var(--muted);
  font-size: 11px;
}

.map-google-confidence {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 3px 8px;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border: 1px solid transparent;
}

.map-google-confidence.high {
  background: rgba(42, 157, 143, 0.1);
  color: var(--primary-dark);
  border-color: rgba(42, 157, 143, 0.35);
}

.map-google-confidence.medium {
  background: #fef9c3;
  color: #854d0e;
  border-color: #fde68a;
}

.map-google-confidence.low {
  background: #fee2e2;
  color: #991b1b;
  border-color: #fca5a5;
}

.map-pick-item {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.map-pick-item strong {
  display: block;
  font-size: 14px;
}

.map-pick-item span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  margin-top: 2px;
}

.map-pick-item small {
  display: block;
  color: var(--primary-dark);
  font-size: 11px;
  margin-top: 4px;
  font-weight: 700;
}

.list-panel {
  padding: 14px;
}

.list-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.list-head h3 {
  margin: 0;
  font-size: 18px;
}

.list-head span {
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
}

.result-list {
  display: grid;
  gap: 10px;
}

.result-card {
  width: 100%;
  text-align: left;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  padding: 14px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  cursor: pointer;
}

.result-card:hover {
  border-color: rgba(0, 104, 93, 0.5);
}

.result-main h4 {
  margin: 0;
  font-size: 16px;
}

.result-main p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.result-tags {
  margin-top: 10px;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.result-tags span {
  border: 1px solid #cde6cf;
  background: var(--surface-low);
  color: var(--primary-dark);
  border-radius: 999px;
  padding: 4px 8px;
  font-size: 11px;
  font-weight: 700;
  text-transform: capitalize;
}

.result-score {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: var(--primary);
  color: #0f172a;
  display: grid;
  place-items: center;
  font-weight: 900;
  font-size: 18px;
  align-self: center;
}

.empty-state {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
}

.detail-shell {
  display: grid;
  gap: 12px;
}

.detail-hero {
  padding: 16px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
}

.detail-hero-actions {
  display: grid;
  gap: 8px;
}

.detail-heading h1 {
  margin: 0;
  font-size: 30px;
  line-height: 1.1;
}

.detail-heading p {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 14px;
}

.hero-score {
  text-align: right;
}

.hero-score span {
  display: block;
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
  font-weight: 700;
}

.hero-score strong {
  font-size: 42px;
  line-height: 1;
}

.hero-score small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.detail-card {
  padding: 16px;
}

.detail-card h3 {
  margin: 0 0 12px;
  font-size: 18px;
}

.detail-card h4 {
  margin: 0 0 8px;
  font-size: 14px;
}

.metric-list {
  display: grid;
  gap: 8px;
}

.metric-item {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.metric-item strong {
  display: block;
  font-size: 14px;
}

.metric-item p {
  margin: 4px 0 0;
  font-size: 12px;
  color: var(--muted);
}

.metric-item span {
  font-size: 22px;
  font-weight: 900;
  color: var(--primary-dark);
}

.stat-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.stat-grid div {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px;
}

.stat-grid span {
  display: block;
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
  font-weight: 700;
}

.stat-grid strong {
  display: block;
  margin-top: 5px;
  font-size: 20px;
}

.form-grid {
  display: grid;
  gap: 8px;
}

.field-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 110px;
  align-items: center;
  gap: 10px;
}

.field-row span {
  font-size: 14px;
}

.mobility-block {
  margin-top: 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px;
  display: grid;
  gap: 10px;
  background: var(--surface-low);
}

.review-list {
  display: grid;
  gap: 10px;
}

.review-item {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px;
}

.review-item h4 {
  margin: 0;
  font-size: 13px;
}

.review-item p {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.scorecard-page {
  display: grid;
  gap: 12px;
}

.scorecard-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.scorecard-breadcrumb {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--muted);
}

.scorecard-breadcrumb button {
  color: var(--primary-dark);
  font-weight: 700;
  cursor: pointer;
}

.scorecard-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.scorecard-hero {
  padding: 18px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
}

.scorecard-hero h1 {
  margin: 0;
  font-size: 34px;
  line-height: 1.04;
  letter-spacing: -0.02em;
}

.scorecard-hero p {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 14px;
}

.scorecard-badges {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.score-badge {
  border: 1px solid rgba(42, 157, 143, 0.28);
  border-radius: 999px;
  padding: 5px 9px;
  font-size: 11px;
  font-weight: 700;
  background: rgba(42, 157, 143, 0.08);
  color: var(--primary-dark);
}

.scorecard-circle {
  width: 132px;
  height: 132px;
  border-radius: 999px;
  border: 8px solid var(--primary);
  display: grid;
  place-items: center;
  text-align: center;
  background: var(--surface-low);
}

.scorecard-circle strong {
  font-size: 34px;
  line-height: 1;
}

.scorecard-circle span {
  margin-top: -6px;
  display: block;
  font-size: 11px;
  color: var(--muted);
  text-transform: uppercase;
  font-weight: 700;
}

.scorecard-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.scorecard-panel {
  padding: 16px;
}

.scorecard-panel h3 {
  margin: 0 0 12px;
  font-size: 20px;
  letter-spacing: -0.01em;
}

.score-breakdown-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.score-breakdown-item {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 11px;
  background: #fff;
}

.score-breakdown-item h4 {
  margin: 0;
  font-size: 13px;
}

.score-breakdown-item strong {
  display: block;
  margin-top: 5px;
  font-size: 20px;
}

.score-tone-blue {
  border-color: #bfdbfe;
  background: #eff6ff;
}

.score-tone-purple {
  border-color: #ddd6fe;
  background: #f5f3ff;
}

.score-tone-orange {
  border-color: #fed7aa;
  background: #fff7ed;
}

.score-tone-green {
  border-color: #bbf7d0;
  background: #f0fdf4;
}

.score-tone-cyan {
  border-color: #a5f3fc;
  background: #ecfeff;
}

.score-tone-slate {
  border-color: #cbd5e1;
  background: #f8fafc;
}

.scorecard-photos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.scorecard-photos img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid var(--line);
}

.scorecard-empty {
  padding: 16px;
}

.submit-form {
  padding: 18px;
}

.submit-head h2 {
  margin: 0;
  font-size: 24px;
}

.submit-head p {
  margin: 8px 0 0;
  font-size: 13px;
  color: var(--muted);
}

.submit-grid {
  margin-top: 16px;
  display: grid;
  grid-template-columns: 170px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
}

.submit-grid label {
  color: #334155;
  font-size: 13px;
  font-weight: 600;
}

.footer-actions {
  margin-top: 14px;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.form-locked {
  padding: 24px;
}

.form-locked h2 {
  margin: 0;
}

.form-locked p {
  margin: 8px 0 0;
  color: var(--muted);
}

.auth-modal-wrap {
  position: relative;
}

.auth-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.6);
  display: grid;
  place-items: center;
  z-index: 120;
  padding: 20px;
}

/* Migrated onto the Accessible Menu tokens. This was a hardcoded white panel
   that opened over a near-black page in dark mode — a 17.9:1 luminance jump in
   the face of the photophobic and migraine-prone users who chose dark in the
   first place. Every size here is a --fs-* token too, so the text-size
   preference finally reaches the form that gates contributing a review. */
.auth-modal {
  width: min(100%, 460px);
  background: var(--bg-elev);
  color: var(--ink);
  border: 1.5px solid var(--edge);
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
  padding: var(--space-5);
  display: grid;
  gap: var(--space-3);
  font-family: var(--sans);
}

.auth-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.auth-modal-head h2 {
  margin: 0;
  font-family: var(--serif);
  font-size: var(--fs-24);
  line-height: 1.2;
  color: var(--ink);
}

.auth-modal-description {
  margin: 0;
  font-size: var(--fs-14);
  color: var(--ink-muted);
}

.auth-mode {
  background: var(--bg-sunken);
  border: 1.5px solid var(--edge);
  border-radius: var(--radius-md);
  padding: 3px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 3px;
}

.auth-mode button {
  border-radius: var(--radius-sm);
  padding: 10px 7px;
  min-height: 44px;
  font-size: var(--fs-13);
  font-weight: 700;
  color: var(--ink-soft);
  background: transparent;
  cursor: pointer;
  font-family: inherit;
}

.auth-mode button.active {
  background: var(--ink);
  color: var(--bg);
}

.auth-modal label {
  font-size: var(--fs-14);
  font-weight: 700;
  color: var(--ink);
}

.auth-modal input {
  border: 2px solid var(--edge);          /* was #cbd5e1 — 1.48:1, failed 1.4.11 */
  border-radius: var(--radius-md);
  padding: 12px 14px;
  min-height: 48px;
  background: var(--surface);
  color: var(--ink);
  /* 16px floor: iOS Safari force-zooms a focused input below it, which threw
     the modal's layout off on iPhone. */
  font-size: var(--fs-16);
  font-family: inherit;
}

.auth-modal input:focus-visible {
  outline: 3px solid var(--focus);        /* was --primary at 3.32:1 */
  outline-offset: 2px;
}

.auth-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

.auth-user {
  display: flex;
  align-items: center;
  gap: 8px;
}

.auth-badge {
  border: 1.5px solid var(--edge);
  border-radius: 999px;
  padding: 6px 10px;
  font-size: var(--fs-12);
  font-weight: 700;
  color: var(--ink);
  background: var(--surface);
}

.error-text {
  margin: 0 0 14px;
  color: var(--danger);
  font-size: 13px;
  font-weight: 600;
}

.wizard-layout {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 12px;
}

.wizard-shell {
  padding: 16px;
}

.wizard-sidebar {
  padding: 16px;
  display: grid;
  gap: 14px;
  align-content: start;
  position: sticky;
  top: 88px;
  height: max-content;
}

.wizard-score {
  border: 1px solid #cde6cf;
  background: var(--surface-low);
  border-radius: 14px;
  padding: 12px;
}

.wizard-score h3 {
  margin: 0;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.wizard-score strong {
  font-size: 40px;
  line-height: 1;
}

.wizard-score span {
  color: var(--muted);
  font-weight: 700;
}

.wizard-steps {
  display: grid;
  gap: 8px;
}

.wizard-step {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  padding: 9px 10px;
  text-align: left;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.wizard-step span {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  border: 1px solid #cbd5e1;
  display: grid;
  place-items: center;
  font-size: 11px;
}

.wizard-step.active {
  border-color: rgba(0, 104, 93, 0.5);
  background: rgba(42, 157, 143, 0.12);
}

.wizard-step.active span {
  border-color: #15803d;
  background: var(--primary);
  color: #0f172a;
}

.wizard-main {
  padding: 16px;
}

.wizard-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

.wizard-kicker {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
}

.wizard-head h2 {
  margin: 6px 0 0;
  font-size: 34px;
  line-height: 1.05;
  letter-spacing: -0.02em;
}

.wizard-sub {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.wizard-venue {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-low);
  padding: 10px 12px;
  text-align: right;
}

.wizard-venue strong {
  display: block;
  font-size: 13px;
}

.wizard-venue span {
  color: var(--muted);
  font-size: 12px;
}

.wizard-body {
  margin-top: 16px;
  display: grid;
  gap: 10px;
}

.switch-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px 12px;
}

.switch-row span {
  font-size: 14px;
}

.switch {
  width: 44px;
  height: 24px;
  border-radius: 999px;
  border: 1px solid #cbd5e1;
  background: #e2e8f0;
  padding: 2px;
  cursor: pointer;
}

.switch span {
  width: 18px;
  height: 18px;
  border-radius: 999px;
  display: block;
  background: #fff;
  transition: transform 0.15s ease;
}

.switch.on {
  background: var(--primary);
  border-color: var(--primary-dark);
}

.switch.on span {
  transform: translateX(20px);
}

.wizard-footer {
  margin-top: 14px;
  border-top: 1px solid var(--line);
  padding-top: 12px;
  display: flex;
  justify-content: space-between;
  gap: 8px;
}

.wizard-review-score {
  border: 1px solid #cde6cf;
  background: var(--surface-low);
  border-radius: 12px;
  padding: 14px;
}

.wizard-review-score h3 {
  margin: 0;
  font-size: 14px;
}

.wizard-review-score strong {
  display: block;
  margin-top: 6px;
  font-size: 28px;
}

.consent-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}

.consent-row input {
  width: auto;
}

.wizard-picker {
  margin-top: 12px;
  display: grid;
  gap: 8px;
}

.wizard-pick-item {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  padding: 10px 12px;
  text-align: left;
  cursor: pointer;
}

.wizard-pick-item:hover {
  border-color: rgba(0, 104, 93, 0.5);
}

.wizard-pick-item strong {
  display: block;
  font-size: 14px;
}

.wizard-pick-item span {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  color: var(--muted);
}

@media (max-width: 1180px) {
  .site-nav {
    display: none;
  }

  .content-layout {
    grid-template-columns: 1fr;
  }

  .filters-rail {
    order: 2;
  }

  .results-shell {
    order: 1;
  }

  .detail-grid {
    grid-template-columns: 1fr;
  }

  .wizard-layout {
    grid-template-columns: 1fr;
  }

  .wizard-sidebar {
    position: static;
  }

  .scorecard-grid {
    grid-template-columns: 1fr;
  }

  .affiliate-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .admin-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .site-wrap {
    width: calc(100% - 1rem);
  }

  .site-header-inner {
    flex-wrap: wrap;
  }

  .brand {
    min-width: 0;
  }

  .header-actions {
    width: 100%;
    justify-content: flex-end;
  }

  .search-section {
    padding: 12px;
  }

  .detail-hero {
    grid-template-columns: 1fr;
  }

  .hero-score {
    text-align: left;
  }

  .field-row {
    grid-template-columns: 1fr;
  }

  .submit-grid {
    grid-template-columns: 1fr;
  }

  .result-card {
    grid-template-columns: 1fr;
  }

  .map-pick-item {
    flex-direction: column;
    align-items: flex-start;
  }

  .map-pick-actions {
    width: 100%;
    justify-content: flex-start;
  }

  .map-google-item {
    flex-direction: column;
    align-items: flex-start;
  }

  .result-score {
    width: 64px;
    height: 44px;
    border-radius: 12px;
  }

  .auth-modal {
    width: min(100%, 520px);
    padding: 14px;
  }

  .auth-modal-head h2 {
    font-size: 21px;
  }

  .stat-grid {
    grid-template-columns: 1fr;
  }

  .wizard-head {
    flex-direction: column;
  }

  .wizard-venue {
    width: 100%;
    text-align: left;
  }

  .wizard-head h2 {
    font-size: 28px;
  }

  .scorecard-topline {
    flex-direction: column;
    align-items: flex-start;
  }

  .scorecard-hero {
    grid-template-columns: 1fr;
  }

  .scorecard-circle {
    width: 110px;
    height: 110px;
    border-width: 6px;
  }

  .scorecard-hero h1 {
    font-size: 28px;
  }

  .score-breakdown-grid {
    grid-template-columns: 1fr;
  }

  .affiliate-banner {
    padding: 14px;
  }

  .affiliate-banner-head h2 {
    font-size: 21px;
  }

  .affiliate-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   The Accessible Menu — design system (Path A migration)
   New tokens prefixed in palette but use generic semantic names
   so screens read clearly: --bg, --ink, --rule, --accent, etc.
   Coexists with legacy Aequitas Glass tokens above until those
   are deleted in the final migration step.
   Fonts (Source Serif 4, JetBrains Mono) are loaded in the
   layout file alongside Inter — @import here would be skipped
   because it isn't at the top of the file.
   ============================================================ */

:root {
  /* Palette — Light */
  --teal-900: #0a2828;
  --teal-800: #0e3b3b;
  --teal-700: #155050;
  --teal-600: #1f6868;
  --teal-50:  #e8efef;

  --cream-50:  #faf6ec;
  --cream-100: #f5efe3;
  --cream-200: #ece4d2;
  --sand-300:  #e0d5bd;
  --sand-400:  #cfc1a3;
  --sand-500:  #c0ae8c;
  --sand-700:  #8a7a5c;

  --ink-900: #0a1414;
  --ink-700: #2a3434;
  --ink-500: #5a6464;
  --ink-300: #8a9090;

  --amber-700: #a04a1f;
  --amber-600: #c8612c;
  --amber-100: #fbe7d6;

  --red-700: #9b1c1c;
  --red-100: #fbe3e1;
  --green-700: #1c6b47;
  --green-100: #dff0e7;

  /* Semantic — Light (default) */
  --bg:           var(--cream-100);
  --bg-elev:      var(--cream-50);
  --bg-sunken:    var(--cream-200);
  --surface:      #ffffff;
  --ink:          var(--teal-900);
  --ink-soft:     var(--teal-700);
  --ink-muted:    var(--ink-500);
  --rule:         var(--teal-800);

  /* Two separate border jobs, deliberately not one token:
     --edge bounds something you can act on (card, input, rating cell, list
     item) and must clear 3:1 per WCAG 1.4.11. --rule-soft only separates
     stacked content and is exempt — but it was 1.55:1, which is invisible
     rather than quiet, so it comes up too. Never use --rule-soft on a
     control: that is the bug this split exists to prevent. */
  --edge:         var(--sand-700);
  --rule-soft:    var(--sand-500);

  --brand:        var(--teal-800);
  --brand-on:     var(--cream-50);

  /* Amber has one job: the warm brand fill. It is not the error colour and
     it is not accent-coloured text — at 3.53:1 it never passed as either. */
  --accent:        var(--amber-600);
  --accent-strong: var(--amber-700);
  --accent-text:   var(--amber-700);
  --accent-soft:   var(--amber-100);
  --focus:         var(--amber-600);

  /* Status roles. Always pair these with a word or an icon — colour alone
     never carries the meaning (WCAG 1.4.1). */
  --danger:       var(--red-700);
  --danger-soft:  var(--red-100);
  --success:      var(--green-700);
  --success-soft: var(--green-100);

  /* Type scale (responds to --type-scale tweak) */
  /* Every step is rem, never px. rem follows the reader's browser font-size
     setting, which px silently ignores — and a person who has set 24px as their
     default did that because they need it, on every site, without asking.
     --type-scale then multiplies the in-app control on top of their setting, so
     the two compose instead of competing. The name keeps the px value it had at
     a 16px root (--fs-18 is still "the 18px step") so call sites did not move. */
  --type-scale: 1;
  --fs-12: calc(0.75rem   * var(--type-scale));
  --fs-13: calc(0.8125rem * var(--type-scale));
  --fs-14: calc(0.875rem  * var(--type-scale));
  --fs-15: calc(0.9375rem * var(--type-scale));
  --fs-16: calc(1rem      * var(--type-scale));
  --fs-18: calc(1.125rem  * var(--type-scale));
  --fs-20: calc(1.25rem   * var(--type-scale));
  /* Two rules already used var(--fs-22, 22px). The token was never defined, so
     both silently fell back to a literal 22px that the text-size control could
     not reach. Defining it is the fix; the fallbacks stay harmless. */
  --fs-22: calc(1.375rem  * var(--type-scale));
  --fs-24: calc(1.5rem    * var(--type-scale));
  --fs-28: calc(1.75rem   * var(--type-scale));
  --fs-32: calc(2rem      * var(--type-scale));
  --fs-40: calc(2.5rem    * var(--type-scale));
  --fs-48: calc(3rem      * var(--type-scale));
  --fs-64: calc(4rem      * var(--type-scale));

  --letter-spacing-body: 0em;

  --sans:  "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --serif: "Source Serif 4", "Iowan Old Style", Georgia, serif;
  --mono:  "JetBrains Mono", ui-monospace, monospace;

  --radius-sm: 6px;
  --radius-md: 10px;
  /* --radius-lg: 16px is already declared above with the same value */

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
}

/* Dark mode — controlled by .theme-dark on <html>.
   The legacy [data-theme="dark"] selector above flips the legacy palette;
   the prefs context sets both so the whole app turns together. */
html.theme-dark {
  --bg:        #061414;
  --bg-elev:   #0a1d1d;
  --bg-sunken: #030a0a;
  --surface:   #0e2424;
  --ink:       #f1ead8;
  --ink-soft:  #d6cdb6;
  --ink-muted: #9ea69a;
  --rule:      #f1ead8;
  --edge:      #5f7575;
  --rule-soft: #4a5c5c;
  --brand:     #f1ead8;
  --brand-on:  #061414;
  --accent:        #f0a163;
  --accent-strong: #f0a163;
  --accent-text:   #f0a163;
  --accent-soft:   #3a2818;
  --focus:         #f0a163;
  --danger:       #ff9c92;
  --danger-soft:  #3a1614;
  --success:      #7fd4a9;
  --success-soft: #0f2a1f;
}

/* High contrast (Maximum) */
html.high-contrast {
  --bg: #ffffff;
  --bg-elev: #ffffff;
  --bg-sunken: #ffffff;
  --surface: #ffffff;
  --ink: #000000;
  --ink-soft: #000000;
  --ink-muted: #000000;
  --rule: #000000;
  --edge: #000000;
  --rule-soft: #000000;
  --brand: #000000;
  --brand-on: #ffffff;
  --accent: #b53a00;
  --accent-strong: #b53a00;
  --accent-text: #b53a00;
  --accent-soft: #ffe9d7;
  --focus: #b53a00;
  --danger: #8f1414;
  --danger-soft: #ffffff;
  --success: #12523a;
  --success-soft: #ffffff;
}
html.theme-dark.high-contrast {
  --bg: #000000;
  --bg-elev: #000000;
  --bg-sunken: #000000;
  --surface: #000000;
  --ink: #ffffff;
  --ink-soft: #ffffff;
  --ink-muted: #ffffff;
  --rule: #ffffff;
  --edge: #ffffff;
  --rule-soft: #ffffff;
  --brand: #ffffff;
  --brand-on: #000000;
  --accent: #ffb070;
  --accent-strong: #ffb070;
  --accent-text: #ffb070;
  --accent-soft: #2a1a08;
  --danger: #ffa79e;
  --danger-soft: #000000;
  --success: #8fe0b6;
  --success-soft: #000000;
}

/* Apply text-size & letter-spacing prefs at the root. */
/* Four steps, topping out at 2.0 — the 200% WCAG 1.4.4 expects support to.
   The old ramp stopped at 1.30, which is not a large-text mode, it is a nudge.
   The middle steps exist because most low-vision readers settle around 125–150%;
   a single jump from 1 to 2 would make the control useful to almost nobody.
   These multiply whatever the reader's browser font-size already is. */
html.size-L   { --type-scale: 1.25; }
html.size-XL  { --type-scale: 1.5; }
html.size-XXL { --type-scale: 2; }
html.letter-tight  { --letter-spacing-body: -0.01em; }
html.letter-loose  { --letter-spacing-body:  0.03em; }

/* Reduce motion (user pref or system) */
html.reduce-motion *,
html.reduce-motion *::before,
html.reduce-motion *::after {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
  scroll-behavior: auto !important;
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Links in prose are underlined whether or not the global toggle is on:
   `a { text-decoration: none }` is global, so colour would otherwise be the
   only signal that something is a link (WCAG 1.4.1). Navigation, buttons and
   pills are excluded — their affordance is position and shape, not underline. */
.am-app .am-resource-body a,
.am-app .am-plain a,
.am-app .am-prose a,
.am-app p > a:not(.am-btn):not(.am-pill):not(.am-skip):not(.am-link),
.am-link {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
}

/* The toggle extends that to every link on the page. */
html.underline-links a:not(.am-btn):not(.am-pill):not(.am-skip),
html.underline-links .am-link {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
}
html.underline-links .am-mainnav a,
html.underline-links .am-footer a {
  text-underline-offset: 4px;
}

/* Root container for new design (set on App's outer div) */
.am-app {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  letter-spacing: var(--letter-spacing-body);
  font-size: var(--fs-18);
  line-height: 1.6;
  min-height: 100%;
}
.am-app * { letter-spacing: inherit; }

.am-app :focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ===== Skip link row (always visible) ===== */
.am-skiprow {
  background: var(--ink);
  color: var(--bg);
  display: flex;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-5);
  font-size: var(--fs-13);
  align-items: center;
  font-weight: 600;
  flex-wrap: wrap;
}
.am-skiprow .am-skiprow-label {
  opacity: 0.6;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: var(--fs-12);
}
.am-skiprow .am-skip {
  color: var(--bg);
  text-decoration: underline;
  text-underline-offset: 3px;
  padding: 4px 8px;
  border: 2px solid transparent;
  font-size: var(--fs-13);
  border-radius: 4px;
}
.am-skiprow .am-skip:hover,
.am-skiprow .am-skip:focus-visible {
  border-color: var(--focus);
  outline: none;
}

/* ===== Top accessibility prefs bar ===== */
.am-a11ybar {
  background: var(--bg-elev);
  border-bottom: 1.5px solid var(--rule);
  padding: var(--space-3) var(--space-6);
  display: flex;
  gap: var(--space-5);
  align-items: center;
  font-size: var(--fs-13);
  flex-wrap: wrap;
  color: var(--ink);
}
/* Both of these wrap, and they have to. At the largest text setting the word
   labels ("Maximum", "Loose") make a segmented group wider than a phone, and a
   control that runs off screen is worst for the person who chose the largest
   text — the one group in this app that must survive its own maximum. */
.am-a11ybar .am-grp {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  flex-wrap: wrap;
}
.am-a11ybar .am-grp-label {
  font-size: var(--fs-12);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-muted);
  font-weight: 600;
  margin-right: var(--space-1);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.am-a11ybar .am-seg {
  display: flex;
  flex-wrap: wrap;
  border: 1.5px solid var(--rule);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.am-a11ybar .am-seg button {
  background: var(--bg);
  border: 0;
  border-right: 1.5px solid var(--rule);
  padding: 8px 12px;
  font-size: var(--fs-13);
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  font-family: inherit;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.am-a11ybar .am-seg button:last-child { border-right: 0; }
.am-a11ybar .am-seg button[aria-pressed="true"] {
  background: var(--ink);
  color: var(--bg);
}

/* ===== Top nav ===== */
.am-topnav {
  background: var(--bg);
  border-bottom: 1.5px solid var(--rule);
  padding: var(--space-5) var(--space-6);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--space-6);
  color: var(--ink);
}
.am-brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
  color: inherit;
}
/* The brand mark is a glyph in a box, not body text, so it stays off
   --type-scale — a logo that doubles when someone picks XXL is a logo bug.
   Box and glyph are both rem so they grow together with the reader's browser
   font-size and the letter can never outgrow its square. */
.am-brand .am-mark {
  width: 3rem;
  height: 3rem;
  background: var(--ink);
  color: var(--bg);
  border-radius: var(--radius-md);
  display: grid;
  place-items: center;
  font-family: var(--serif);
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 1;
  flex: none;
}
.am-brand .am-word { display: flex; flex-direction: column; }
.am-brand .am-word .am-top {
  font-family: var(--serif);
  font-size: var(--fs-20);
  font-weight: 700;
  line-height: 1.1;
  color: var(--ink);
}
.am-brand .am-word .am-sub {
  font-size: var(--fs-12);
  color: var(--ink-muted);
  letter-spacing: 0.04em;
}
.am-mainnav {
  display: flex;
  gap: var(--space-6);
  justify-content: center;
}
.am-mainnav a {
  color: var(--ink);
  text-decoration: none;
  font-size: var(--fs-16);
  font-weight: 500;
  padding: 8px 4px;
  border-bottom: 2px solid transparent;
}
.am-mainnav a[aria-current="page"] {
  border-bottom-color: var(--ink);
  font-weight: 700;
}
.am-mainnav a:hover { border-bottom-color: var(--ink-muted); }

.am-nav-actions {
  display: flex;
  gap: var(--space-3);
  align-items: center;
}

/* ===== Buttons ===== */
.am-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 12px 20px;
  font-size: var(--fs-16);
  font-weight: 600;
  font-family: inherit;
  border: 2px solid var(--rule);
  background: var(--bg);
  color: var(--ink);
  border-radius: var(--radius-md);
  cursor: pointer;
  text-decoration: none;
  line-height: 1.2;
  min-height: 48px;
}
.am-btn.am-primary {
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
}
.am-btn.am-accent {
  background: var(--accent-strong);
  color: var(--cream-50);
  border-color: var(--accent-strong);
}
html.theme-dark .am-btn.am-accent { color: #061414; }
.am-btn.am-ghost {
  background: transparent;
  border-color: transparent;
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 2px;
  padding: 12px 8px;
}
.am-btn.am-sm { padding: 8px 14px; font-size: var(--fs-14); min-height: 40px; }
.am-btn.am-lg { padding: 16px 28px; font-size: var(--fs-18); min-height: 56px; }
.am-btn.am-iconbtn { padding: 10px; min-width: 44px; min-height: 44px; justify-content: center; }
.am-btn[disabled] { opacity: 0.5; cursor: not-allowed; }

/* The text-size control's preview letters. These are a legend, not content, so
   they are rem without --type-scale: they still honour the reader's browser
   font-size, but they do not multiply by the setting they exist to choose —
   otherwise picking XXL would blow the control off its own bar. */
.am-a-m   { font-size: 0.875rem; }  /* the --fs-14 step, unmultiplied */
.am-a-l   { font-size: 1.125rem; }  /* --fs-18 */
.am-a-xl  { font-size: 1.25rem; }   /* --fs-20 */
.am-a-xxl { font-size: 1.5rem; }    /* --fs-24 */

/* Read-aloud control. Wraps rather than shrinks: at XL text the Listen and Stop
   buttons go to two lines instead of dropping under the 40px target floor. */
.am-audio {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

/* Icon base sizes */
.am-icon { width: 20px; height: 20px; flex: none; }
.am-icon-lg { width: 28px; height: 28px; }

/* ===== Inputs ===== */
.am-input {
  width: 100%;
  border: 2px solid var(--rule);
  background: var(--surface);
  padding: 14px 16px;
  font-size: var(--fs-16);
  font-family: inherit;
  color: var(--ink);
  border-radius: var(--radius-md);
  min-height: 48px;
}
.am-label {
  display: block;
  font-size: var(--fs-14);
  font-weight: 600;
  color: var(--ink);
  margin-bottom: var(--space-2);
}
.am-help {
  font-size: var(--fs-13);
  color: var(--ink-muted);
  margin-top: var(--space-2);
}

/* ===== Pills ===== */
.am-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 8px 14px;
  border: 2px solid var(--rule);
  border-radius: 999px;
  font-size: var(--fs-14);
  font-weight: 600;
  background: var(--bg);
  color: var(--ink);
  cursor: pointer;
  font-family: inherit;
  min-height: 40px;
}
.am-pill[aria-pressed="true"],
.am-pill.is-active {
  background: var(--ink);
  color: var(--bg);
}

/* ===== Section heads ===== */
/* The eyebrow is gone. It sat above 25 headings across nine screens, and in
   every case the heading already said it — "Highest scoring" over "Top rated
   near you", "The maths" over "How scores are calculated". A label that
   restates the heading is noise the reader has to parse before reaching the
   thing they came for. If a label ever carries something the heading lacks,
   put it in the heading.

   What survives is the disclosure label, which only ever borrowed the
   eyebrow's look for a <summary> element. */
.am-disclosure-label {
  display: inline-block;
  font-family: var(--mono);
  font-size: var(--fs-13);
  font-weight: 700;
  color: var(--ink);
}
.am-h1 {
  font-family: var(--serif);
  font-size: var(--fs-64);
  line-height: 1.05;
  font-weight: 600;
  letter-spacing: -0.015em;
  margin: 0;
  text-wrap: balance;
  color: var(--ink);
}
.am-h2 {
  font-family: var(--serif);
  font-size: var(--fs-40);
  line-height: 1.1;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0;
  text-wrap: balance;
  color: var(--ink);
}
.am-h3 {
  font-family: var(--serif);
  font-size: var(--fs-28);
  line-height: 1.15;
  font-weight: 600;
  margin: 0;
  text-wrap: balance;
  color: var(--ink);
}
.am-h4 {
  font-size: var(--fs-20);
  font-weight: 700;
  margin: 0;
  line-height: 1.25;
  color: var(--ink);
}
.am-lead {
  font-size: var(--fs-20);
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 0;
  max-width: 620px;
  text-wrap: pretty;
}
.am-meta {
  font-family: var(--mono);
  font-size: var(--fs-13);
  color: var(--ink-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
}

/* ===== Plain-language summary block ===== */
.am-plain {
  /* A bounded callout rather than a 4px side-tab, so it matches .am-alert and
     reads as one object instead of a stripe with text beside it. */
  border: 1.5px solid var(--accent);
  background: var(--accent-soft);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-md);
  font-size: var(--fs-16);
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  color: var(--ink);
}
.am-plain .am-plain-lbl {
  font-family: var(--mono);
  font-size: var(--fs-12);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 700;
  color: var(--amber-700);
  display: block;
  margin-bottom: 4px;
}
html.theme-dark .am-plain .am-plain-lbl { color: var(--accent-text); }

/* ===== Image slots ===== */
.am-imgslot {
  position: relative;
  background: var(--bg-sunken);
  border: 1.5px solid var(--edge);
  border-radius: var(--radius-md);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-muted);
  font-size: var(--fs-13);
  text-align: center;
  padding: var(--space-3);
}
.am-imgslot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  color: transparent;
  font-size: 0;
}
.am-imgslot.am-altmode {
  background: var(--bg);
  color: var(--ink);
  font-style: italic;
  border: 2px dashed var(--rule);
  font-size: var(--fs-16);
  line-height: 1.5;
  padding: var(--space-5);
}

/* ===== Footer ===== */
.am-footer {
  background: var(--ink);
  color: var(--bg);
  padding: var(--space-7) var(--space-6) var(--space-6);
}
.am-footer .am-footer-row {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: var(--space-6);
  max-width: 1440px;
  margin: 0 auto;
}
/* Footer column headings. These are <h2> because they sit directly under the
   page <h1> in the document outline — an <h5> there skipped three levels on
   every route. The mono/uppercase treatment below is the *role*, independent
   of the level: in this system the tag carries structure and the class or
   selector carries appearance. Never pick a heading level to get a font size. */
.am-footer h2 {
  font-family: var(--mono);
  font-size: var(--fs-13);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin: 0 0 var(--space-3);
  color: var(--bg);
  opacity: 0.7;
}
.am-footer ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.am-footer a {
  color: var(--bg);
  text-decoration: none;
  font-size: var(--fs-15);
}
.am-footer a:hover { text-decoration: underline; }

/* ===== Card ===== */
.am-card {
  background: var(--surface);
  border: 1.5px solid var(--edge);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
html.theme-dark .am-card { background: var(--bg-elev); }

/* ===== Score badge ===== */
.am-score {
  background: var(--ink);
  color: var(--bg);
  border-radius: 12px;
  display: grid;
  place-items: center;
  font-family: var(--serif);
  font-weight: 700;
  flex: none;
}

/* ===== Page wrapper ===== */
.am-page {
  max-width: 1440px;
  margin: 0 auto;
  width: 100%;
}

.am-resource-card {
  padding: 0;
}
.am-resource-card-head {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: var(--space-5);
  align-items: start;
  padding: var(--space-6);
  border-bottom: 1.5px solid var(--rule-soft);
}
.am-resource-logo,
.am-resource-logo-placeholder {
  width: 72px;
  height: 72px;
  border-radius: var(--radius-md);
  border: 1.5px solid var(--rule-soft);
  background: var(--bg-elev);
}
.am-resource-logo {
  object-fit: contain;
  padding: var(--space-2);
}
.am-resource-logo-placeholder {
  display: grid;
  place-items: center;
  color: var(--ink-muted);
}
.am-resource-body {
  padding: var(--space-6);
  color: var(--ink);
  font-size: var(--fs-16);
  line-height: 1.7;
}
.am-resource-body > *:first-child { margin-top: 0; }
.am-resource-body > *:last-child { margin-bottom: 0; }
.am-resource-body h2,
.am-resource-body h3,
.am-resource-body h4 {
  color: var(--ink);
  line-height: 1.2;
  margin: var(--space-5) 0 var(--space-3);
}
.am-resource-body p,
.am-resource-body li,
.am-resource-body blockquote {
  color: var(--ink-soft);
}
.am-resource-body a {
  color: var(--ink);
  font-weight: 700;
  text-underline-offset: 3px;
}
.am-resource-body img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  border: 1.5px solid var(--rule-soft);
  margin: var(--space-4) 0;
}
.am-resource-body blockquote {
  margin: var(--space-5) 0;
  padding: var(--space-4) var(--space-5);
  border-left: 4px solid var(--accent);
  background: var(--accent-soft);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

/* ===== Mobile bottom tab bar (hidden on desktop) ===== */
.am-mobile-tabbar { display: none; }

/* ===== A11yBar mobile toggle button (hidden on desktop) ===== */
.am-a11ybar-toggle { display: none; }
.am-a11ybar-controls { display: contents; }
.am-mobile-home-search,
.am-mobile-stats,
.am-home-title-mobile,
.am-home-lead-mobile {
  display: none;
}

/* The Directory's compact filter controls are mounted by JS, not hidden by CSS.
   Their breakpoint is COMPACT_FILTERS_QUERY in screens/Directory.jsx — the one
   place it is defined. Don't add a media query here to match it: the component
   renders either the sidebar or the sheet, never both, so any query written
   here can only drift out of sync with the one that actually decides. */

/* ===== Responsive — tablet (≤880px) ===== */
@media (max-width: 880px) {
  .am-topnav { grid-template-columns: 1fr auto; gap: var(--space-3); }
  .am-mainnav { display: none; }
  .am-a11ybar { padding: var(--space-3); gap: var(--space-3); }
  .am-footer .am-footer-row { grid-template-columns: 1fr 1fr; }
  .am-h1 { font-size: var(--fs-40); }
  .am-h2 { font-size: var(--fs-28); }

  /* Screen grid collapses */
  .am-hero-grid    { grid-template-columns: 1fr !important; }
  .am-category-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .am-toprated-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .am-problem-grid  { grid-template-columns: 1fr !important; }
  .am-mobility-grid { grid-template-columns: 1fr !important; }
  .am-resources-layout { grid-template-columns: 1fr !important; }
  .am-resources-layout aside { position: static !important; }

  /* Reduce hero padding */
  .am-hero-section { padding: 40px 32px 36px !important; }
  .am-browse-section,
  .am-toprated-section { padding: 48px 32px !important; }
  .am-cta-band { padding: 56px 32px !important; }
}

/* ===== Responsive — mobile devices =====
   Uses viewport + input capability, not OS or user-agent headers. This catches
   large Android phones and browser desktop-mode viewports that still report a
   coarse touch pointer. */
@media (max-width: 760px), (hover: none) and (pointer: coarse) and (max-width: 980px) {
  .am-app {
    font-size: var(--fs-16);
    line-height: 1.55;
    overflow-x: hidden;
  }

  body { overflow-x: hidden; }
  .site-main,
  .site-wrap,
  .am-page {
    width: 100% !important;
    max-width: 100vw !important;
  }

  .am-app :focus-visible {
    outline-width: 3px;
    outline-offset: 2px;
  }

  .am-meta,
  .am-plain,
  .am-plain * {
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .am-plain {
    width: 100%;
    max-width: calc(100vw - 32px);
  }

  .am-plain > div {
    min-width: 0;
  }

  .am-btn,
  .am-pill,
  .am-input,
  .am-a11ybar .am-seg button {
    min-height: 44px;
  }

  /* ---- Bottom tab bar ---- */
  .am-mobile-tabbar {
    display: grid;
    /* minmax(0, …) not 1fr: a bare 1fr track will not shrink below its content's
       min-content width, so at large text the five labels pushed the whole bar
       past the viewport instead of dividing it. */
    grid-template-columns: repeat(5, minmax(0, 1fr));
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--bg);
    border-top: 1.5px solid var(--rule);
    padding: 8px 0 calc(8px + env(safe-area-inset-bottom, 0px));
    z-index: 20;
  }
  .am-mobile-tabbar button {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    background: transparent;
    border: 0;
    padding: 6px 4px;
    /* Was a flat 10px that never scaled at all. It scales now, but bounded: five
       fixed tabs are wayfinding, not reading matter, and letting them grow to
       2x pushes the last tab off screen for the very person who enlarged the
       text. The floor and ceiling are rem, so a reader's browser font-size
       still moves both. */
    font-size: clamp(0.75rem, var(--fs-12), 0.875rem);
    font-weight: 700;
    font-family: inherit;
    color: var(--ink-muted);
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1.15;
    text-align: center;
    min-width: 0;
    min-height: 52px;
    justify-content: center;
  }
  .am-mobile-tabbar button[aria-current="page"] { color: var(--ink); }
  .am-mobile-tabbar button[aria-current="page"] .am-icon { color: var(--ink); }

  /* ---- A11yBar collapses to a toggle ---- */
  .am-skiprow {
    padding: 8px 16px;
    gap: 8px;
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
  }
  .am-skiprow .am-skiprow-label { flex: none; }
  .am-skiprow .am-skip {
    flex: none;
    min-height: 32px;
    display: inline-flex;
    align-items: center;
  }

  .am-a11ybar {
    background: var(--ink);
    color: var(--bg);
    border-bottom: 0;
    padding: 10px 16px;
    gap: 10px;
  }
  .am-a11ybar-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 0;
    font-size: var(--fs-13);
    font-weight: 600;
    font-family: inherit;
    color: var(--bg);
    cursor: pointer;
    text-align: left;
  }
  .am-a11ybar-toggle > span:first-of-type { flex: 1; }
  .am-a11ybar-toggle-action {
    background: var(--bg);
    color: var(--ink);
    border-radius: var(--radius-sm);
    padding: 6px 10px;
    font-size: var(--fs-12);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
  }
  .am-a11ybar-controls {
    display: none;
    flex-direction: column;
    gap: var(--space-3);
    width: 100%;
    padding-top: var(--space-3);
  }
  .am-a11ybar-controls--open { display: flex; }
  .am-a11ybar .am-grp {
    width: 100%;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
  }
  .am-a11ybar .am-grp:first-child { display: none; }
  .am-a11ybar .am-grp-label {
    min-width: 88px;
    color: var(--bg);
    opacity: 0.82;
    padding-top: 8px;
  }
  .am-a11ybar .am-seg {
    flex: 1;
    border-color: var(--bg);
  }
  .am-a11ybar .am-seg button {
    flex: 1;
    justify-content: center;
    background: var(--ink);
    color: var(--bg);
    border-right-color: var(--bg);
  }
  .am-a11ybar .am-seg button[aria-pressed="true"] {
    background: var(--bg);
    color: var(--ink);
  }

  /* ---- Section padding ---- */
  .am-hero-section  { padding: 28px 16px 24px !important; }
  .am-browse-section { padding: 32px 16px !important; }
  .am-toprated-section { padding: 32px 16px !important; }
  .am-cta-band { padding: 40px 16px !important; }
  .am-problem-section { padding: 32px 16px !important; }

  /* Generic content page section padding */
  [data-screen="how"]     > section { padding: 32px 16px !important; }
  [data-screen="mission"] > section { padding: 32px 16px !important; }
  [data-screen="resources"] > section { padding: 32px 16px !important; }

  /* ---- Grid overrides ---- */
  .am-category-grid { grid-template-columns: 1fr !important; }
  .am-toprated-grid { grid-template-columns: 1fr !important; }
  .am-resource-card-head {
    grid-template-columns: 1fr !important;
    padding: var(--space-5);
  }
  .am-resource-body { padding: var(--space-5); }

  /* ---- Typography ---- */
  .am-h1 { font-size: var(--fs-32) !important; }
  .am-h2 { font-size: var(--fs-24) !important; }
  .am-h3 { font-size: var(--fs-20) !important; }
  .am-lead { font-size: var(--fs-18) !important; }

  /* ---- Top nav strip ---- */
  .am-topnav {
    padding: 14px 16px;
    grid-template-columns: 1fr auto;
    gap: 10px;
  }
  .am-brand .am-mark {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 8px;
    font-size: 1.25rem;
  }
  .am-brand .am-word { display: none; }
  .am-nav-actions { gap: var(--space-2); }
  .am-nav-actions > .am-btn { display: none; }
  .am-nav-actions .auth-trigger {
    min-height: 44px;
  }

  /* ---- A11yBar ---- */
  .am-a11ybar { padding: var(--space-2) var(--space-4); }

  /* ---- Footer collapses to single column ---- */
  .am-footer .am-footer-row { grid-template-columns: 1fr; }
  .am-footer { padding: var(--space-6) var(--space-4) var(--space-7); }

  /* ---- Pad main content above sticky tab bar ---- */
  .site-main { padding-bottom: calc(78px + env(safe-area-inset-bottom, 0px)); }

  /* ---- Overflow containment ---- */
  .am-page { overflow-x: clip; }

  /* ---- Grid children: allow shrinking below content width ---- */
  .am-hero-grid > *,
  .am-category-grid > *,
  .am-toprated-grid > * { min-width: 0; }

  /* CategoryCard buttons must fill their grid cell */
  .am-category-grid > button { width: 100% !important; }

  /* FeaturedCard footer: stack score + button vertically on narrow screens */
  .am-featured-footer {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 14px !important;
  }
  .am-featured-footer .am-btn { width: 100%; justify-content: center; }

  /* Plain-language section on home screen */
  [data-screen="home"] > section {
    width: 100% !important;
    max-width: 100vw !important;
    overflow-x: hidden;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* ---- Home mobile mockup pattern ---- */
  .am-mobile-home-search {
    display: block;
    margin: 0 0 12px;
  }
  .am-home-title-desktop {
    display: none;
  }
  .am-home-lead-desktop {
    display: none;
  }
  .am-home-title-mobile {
    display: block;
    max-width: calc(100vw - 48px);
    text-wrap: normal;
  }
  .am-home-lead-mobile {
    display: block;
  }
  [data-screen="home"] .am-lead {
    max-width: calc(100vw - 64px);
    overflow-wrap: anywhere;
  }
  .am-mobile-search-field {
    display: flex;
    align-items: center;
    gap: 10px;
    width: calc(100vw - 64px);
    max-width: 100%;
    min-width: 0;
    padding: 14px 16px;
    border: 2px solid var(--rule);
    border-radius: 12px;
    background: var(--surface);
    min-height: 52px;
    margin-bottom: 10px;
  }
  .am-mobile-search-field input {
    flex: 1;
    width: auto;
    min-width: 0;
    border: 0;
    background: transparent;
    color: var(--ink);
    font: inherit;
    font-size: var(--fs-16);
    outline: none;
  }
  .am-mobile-chip-row {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 4px;
    -webkit-overflow-scrolling: touch;
  }
  .am-mobile-chip-row .am-pill {
    flex: none;
    min-height: 36px;
    padding: 8px 12px;
    font-size: var(--fs-13);
  }
  .am-home-hero-actions {
    margin-bottom: 0 !important;
  }
  .am-home-hero-actions .am-btn.am-primary {
    display: none;
  }
  .am-home-hero-actions .am-btn {
    width: 100%;
    justify-content: center;
  }
  .am-featured-card {
    display: none;
  }
  .am-mobile-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    padding: 8px 16px 24px !important;
  }
  .am-mobile-stats .am-card {
    padding: 14px 8px;
    text-align: center;
  }
  .am-mobile-stats .am-card > div {
    font-family: var(--serif);
    font-size: var(--fs-22, 22px);
    font-weight: 700;
    line-height: 1;
  }
  .am-mobile-stats .am-card > span {
    display: block;
    margin-top: 6px;
    font-family: var(--mono);
    font-size: var(--fs-12);
    color: var(--ink-muted);
    text-transform: uppercase;
    font-weight: 700;
  }
  [data-screen="home"] .am-category-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }
  [data-screen="home"] .am-category-grid > button {
    min-height: 112px !important;
    padding: 14px !important;
    gap: 6px !important;
  }
  [data-screen="home"] .am-category-grid > button > div:nth-of-type(1) {
    font-size: var(--fs-18) !important;
  }
  [data-screen="home"] .am-category-grid > button > div:nth-of-type(2) {
    display: none;
  }
  [data-screen="home"] .am-toprated-section {
    background: var(--bg-elev) !important;
  }
  [data-screen="home"] .am-toprated-grid .am-imgslot {
    height: 150px !important;
  }
  [data-screen="home"] .am-cta-band {
    text-align: left !important;
  }
  [data-screen="home"] .am-cta-band .am-btn {
    width: 100%;
    justify-content: center;
  }

  /* ---- Directory mobile mockup pattern ---- */
  .am-directory-search-head {
    padding: 16px 16px 12px !important;
    border-bottom: 0 !important;
  }
  .am-directory-search-title {
    display: block !important;
    margin-bottom: 12px !important;
  }
  .am-directory-search-title .am-h1,
  .am-directory-search-title p,
  .am-directory-search-title .am-btn {
    display: none;
  }
  .am-directory-searchbox {
    display: flex !important;
    flex-direction: column;
    max-width: none !important;
    border-radius: 12px !important;
    overflow: visible !important;
    border: 2px solid var(--rule) !important;
  }
  .am-directory-search-field {
    border-right: 0 !important;
    border-bottom: 1.5px solid var(--rule-soft);
    min-height: 52px;
  }
  .am-directory-search-field + .am-directory-search-field {
    border-bottom: 0;
  }
  .am-directory-searchbox > .am-btn {
    border-radius: 0 0 10px 10px !important;
    min-height: 48px;
    justify-content: center;
  }
  .am-directory-search-head > p {
    margin: 12px 0 0 !important;
    font-size: var(--fs-13) !important;
  }
  .am-directory-results {
    padding: 14px 16px 16px !important;
  }
  .am-directory-results > div:first-child {
    display: none !important;
  }
  .am-sort-view-row {
    margin-bottom: 12px !important;
    padding-bottom: 12px !important;
  }
  .am-sort-view-row > div:first-child .am-pill:not(.is-active) {
    display: none;
  }
  .am-sort-view-row > div:first-child span {
    font-size: var(--fs-13) !important;
  }
  .am-sort-view-row .am-seg {
    display: none !important;
  }
  .am-result-card {
    display: block !important;
  }
  .am-result-card > div:first-child {
    display: block !important;
  }
  .am-result-card > div:first-child .am-imgslot {
    height: 140px !important;
    border-radius: 0 !important;
  }
  .am-result-card .am-minimap {
    display: none !important;
  }
  .am-result-card > div:nth-child(2) {
    padding: 14px !important;
  }
  .am-result-card h3 {
    font-size: var(--fs-20) !important;
  }
  .am-result-card .am-score {
    width: 52px !important;
    height: 52px !important;
    font-size: var(--fs-22, 22px) !important;
    border-radius: 10px !important;
  }
  .am-result-card p {
    display: none;
  }
  .am-result-card > div:nth-child(2) > div:last-child {
    align-items: center !important;
    gap: 10px !important;
  }
  .am-result-card > div:nth-child(2) > div:last-child > span {
    font-size: var(--fs-12) !important;
  }
  .am-result-card > div:nth-child(2) > div:last-child .am-btn:not(.am-primary) {
    display: none;
  }

  /* ---- Detail mobile mockup pattern ---- */
  .am-detail-hero-section {
    padding: 0 !important;
  }
  .am-detail-hero-section > .am-meta {
    display: none;
  }
  .am-detail-hero-grid {
    display: flex !important;
    flex-direction: column-reverse;
    gap: 0 !important;
  }
  .am-detail-photo-grid {
    display: block !important;
    width: 100%;
  }
  .am-detail-photo-grid > .am-imgslot {
    height: 220px !important;
    border-radius: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
  }
  .am-detail-photo-grid > div {
    display: none !important;
  }
  .am-detail-summary {
    padding: 18px 16px 8px;
  }
  .am-detail-summary .am-h1 {
    font-size: var(--fs-32) !important;
  }
  .am-detail-score-row {
    gap: 14px !important;
    margin: 14px 0 16px !important;
  }
  .am-detail-score-row .am-score {
    width: 72px !important;
    height: 72px !important;
    border-radius: 10px !important;
  }
  .am-detail-score-row .am-score > div > div:first-child {
    font-size: var(--fs-28) !important;
  }
  .am-detail-actions {
    flex-direction: column !important;
    gap: 8px !important;
    margin-top: 16px !important;
  }
  .am-detail-actions .am-btn {
    width: 100%;
    justify-content: center;
  }
  .am-detail-actions .am-btn:last-child {
    display: none;
  }
  .am-detail-glance-section {
    padding: 8px 16px 24px !important;
  }
  .am-detail-glance-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
  }
  .am-detail-glance-grid > div {
    background: var(--surface);
    border: 1.5px solid var(--rule-soft);
    border-radius: var(--radius-md);
    padding: 12px;
    gap: 10px !important;
  }
  .am-detail-glance-grid > div > div:first-child {
    width: 40px !important;
    height: 40px !important;
    border-radius: 10px !important;
  }
  .am-detail-glance-grid .am-icon {
    width: 20px;
    height: 20px;
  }
  .am-detail-scorecard-section {
    padding: 24px 16px !important;
  }
  .am-detail-scorecard-section .am-lead {
    font-size: var(--fs-14) !important;
  }
  .am-detail-scorecard-section > div:first-child {
    display: block !important;
    margin-bottom: 14px !important;
  }
  .am-detail-scorecard-section > div:first-child > div:last-child {
    margin-top: 10px;
  }
  .am-scorecard-summary {
    grid-template-columns: 24px 1fr auto !important;
    gap: 12px !important;
    padding: 14px !important;
  }
  .am-scorecard-summary > div:nth-child(2) > div:first-child {
    font-size: var(--fs-16) !important;
  }
  .am-scorecard-summary > div:nth-child(2) > div:nth-child(2) {
    display: none;
  }
  .am-scorecard-summary > div:nth-child(3) {
    min-width: 86px !important;
    gap: 8px !important;
  }
  .am-scorecard-summary > div:nth-child(3) > div:first-child {
    display: none;
  }
  .am-scorecard-summary > div:nth-child(3) > div:last-child {
    min-width: 36px !important;
    font-size: var(--fs-16) !important;
  }
  .am-scorecard-details {
    padding: 0 14px 14px 50px !important;
  }
  .am-scorecard-details table,
  .am-scorecard-details tbody,
  .am-scorecard-details tr,
  .am-scorecard-details td {
    display: block;
    width: 100% !important;
  }
  .am-scorecard-details td {
    padding: 8px 0 !important;
    font-size: var(--fs-14) !important;
  }
  .am-scorecard-details td + td {
    padding-top: 0 !important;
  }
  .am-detail-reviews-section,
  [data-screen="detail"] > section:last-of-type {
    padding: 0 16px 24px !important;
  }
  .am-detail-reviews-section > div:first-child {
    align-items: flex-start !important;
    gap: 12px;
  }
  .am-detail-reviews-section > div:first-child .am-btn {
    min-width: 116px;
  }
  .am-detail-reviews-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .am-detail-reviews-grid .am-card {
    padding: 14px !important;
  }

  /* ---- Review scoring mobile layout ---- */
  [data-screen="review"] > section {
    padding-left: 16px !important;
    padding-right: 16px !important;
    width: 100% !important;
    max-width: 100vw !important;
    overflow-x: hidden;
  }
  [data-screen="review"],
  [data-screen="review"] * {
    min-width: 0;
  }
  [data-screen="review"] .am-h1 {
    font-size: var(--fs-28) !important;
    overflow-wrap: anywhere;
  }
  [data-screen="review"] .am-lead {
    font-size: var(--fs-15) !important;
  }
  [data-screen="review"] > section:first-child > div:first-child {
    display: block !important;
    margin-bottom: 16px !important;
  }
  [data-screen="review"] > section:first-child > div:first-child .am-btn {
    width: 100%;
    justify-content: center;
    margin-top: 12px;
  }
  [data-screen="review"] > section:first-child [role="progressbar"] {
    grid-template-columns: 1fr !important;
    gap: 6px !important;
  }
  [data-screen="review"] > section:first-child [role="progressbar"] > div {
    padding: 8px !important;
    display: block !important;
    text-align: center;
  }
  [data-screen="review"] > section:first-child [role="progressbar"] > div > div:first-child {
    width: 28px !important;
    height: 28px !important;
    margin: 0 auto 6px;
  }
  [data-screen="review"] > section:first-child [role="progressbar"] .am-meta {
    display: none;
  }
  [data-screen="review"] > section:first-child [role="progressbar"] > div > div:last-child > div:last-child {
    font-size: var(--fs-12) !important;
    line-height: 1.2;
  }
  .am-review-score-section {
    display: block !important;
    padding-top: 20px !important;
    padding-bottom: 24px !important;
  }
  .am-review-score-section > div:first-child {
    width: min(100%, 340px);
    max-width: calc(100vw - 32px);
    min-width: 0;
  }
  .am-review-score-section .am-plain {
    width: min(100%, 340px);
    max-width: calc(100vw - 32px);
  }
  .am-review-sidecar {
    position: static !important;
    margin-top: 20px;
  }
  .am-review-dimension {
    width: min(calc(100vw - 32px), 340px) !important;
    max-width: min(calc(100vw - 32px), 340px);
    box-sizing: border-box;
    padding: 14px !important;
    overflow: hidden;
  }
  .am-review-dimension-head {
    display: block !important;
    margin-bottom: 14px !important;
  }
  .am-review-dimension-head > div:first-child {
    gap: 12px !important;
  }
  .am-review-dimension-head legend {
    font-size: var(--fs-20) !important;
    line-height: 1.15;
    overflow-wrap: anywhere;
  }
  .am-review-dimension-head p {
    font-size: var(--fs-13) !important;
    line-height: 1.45;
  }
  .am-review-dimension-head .am-btn {
    display: none;
  }
  .am-review-subfield {
    max-width: 100%;
  }
  .am-review-subscore-grid,
  .am-review-score-grid {
    grid-template-columns: 1fr !important;
    gap: 6px !important;
    width: 100%;
    max-width: 100%;
  }
  .am-review-subscore-grid > button,
  .am-review-score-grid > button[data-rating-cell] {
    min-width: 0;
    width: 100%;
    height: 44px !important;
    padding: 0 !important;
    font-size: var(--fs-16) !important;
  }
  .am-review-score-grid > button:not([data-rating-cell]) {
    grid-column: 1 / -1;
    width: 100%;
    min-width: 0 !important;
    height: 48px !important;
    justify-content: center;
  }
  .am-review-dimension > div:last-child {
    display: block !important;
  }
  .am-review-dimension > div:last-child > span {
    display: block;
    margin-top: 4px;
  }
}

/* ===== Helpers ===== */
.am-row { display: flex; }
.am-col { display: flex; flex-direction: column; }
/* ===== am-link inline button ===== */
.am-link {
  background: transparent;
  border: 0;
  padding: 0;
  color: var(--accent-text);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.am-link:hover { opacity: 0.8; }

/* ===== Add Restaurant screen ===== */
.add-restaurant-screen {
  max-width: 680px;
  margin: 0 auto;
  padding: 48px 24px 80px;
}

.add-restaurant-head {
  margin-bottom: 36px;
}
.add-restaurant-head h1 {
  font-family: var(--serif);
  font-size: var(--fs-32);
  font-weight: 700;
  margin: 16px 0 10px;
}
.add-restaurant-head p {
  font-size: var(--fs-16);
  color: var(--ink-soft);
  margin: 0;
}
.add-restaurant-head .btn {
  margin-bottom: 4px;
}

.add-restaurant-search {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.add-restaurant-search label {
  font-weight: 600;
  font-size: var(--fs-14);
  color: var(--ink-soft);
  margin-top: 8px;
}
.add-restaurant-search input {
  padding: 12px 16px;
  border: 2px solid var(--rule);
  border-radius: var(--radius-md);
  font: inherit;
  font-size: var(--fs-16);
  background: var(--surface);
  color: var(--ink);
  width: 100%;
}
.add-restaurant-search input:focus {
  outline: none;
  border-color: var(--accent);
}
.add-restaurant-search .btn {
  margin-top: 12px;
  align-self: flex-start;
}

.add-restaurant-search-error {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.place-results-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.place-result-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 18px 20px;
  border: 1.5px solid var(--rule-soft);
  border-radius: var(--radius-lg);
  background: var(--surface);
}

.place-result-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.place-result-name {
  font-size: var(--fs-16);
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.place-result-address {
  font-size: var(--fs-13);
  color: var(--ink-soft);
}

.place-result-type {
  font-size: var(--fs-12);
  color: var(--ink-muted);
  text-transform: capitalize;
}

.am-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Directory filters — sidebar (pointer) and bottom sheet (touch)

   Both surfaces render the same FilterGroups, so everything shared lives in
   .am-filtergroup / .am-filtercheck and neither surface restyles it. Which one
   mounts is decided by COMPACT_FILTERS_QUERY in screens/Directory.jsx.
   ═══════════════════════════════════════════════════════════════════════════ */

.am-filters-sidebar {
  padding: var(--space-6);
  border-right: 1.5px solid var(--rule-soft);
  position: sticky;
  top: 0;
}
.am-filters-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}
.am-filters-title {
  margin: 0;
  font-family: var(--serif);
  font-size: var(--fs-24);
  font-weight: 600;
  color: var(--ink);
}

/* ── Group ───────────────────────────────────────────────────────────────── */
.am-filtergroup {
  border-bottom: 1.5px solid var(--rule-soft);
  padding-bottom: var(--space-5);
  margin-bottom: var(--space-5);
}
.am-filtergroup:last-child { border-bottom: 0; margin-bottom: 0; }

.am-filtergroup-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  width: 100%;
  min-height: 48px;
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  font-family: inherit;
  color: var(--ink);
  text-align: left;
}
.am-filtergroup-name {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: var(--fs-16);
}
.am-filtergroup-chev {
  display: inline-flex;
  transition: transform 160ms cubic-bezier(0.16, 1, 0.3, 1);
}
.am-filtergroup-chev[data-open="false"] { transform: rotate(-90deg); }

.am-filtergroup-options {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin-top: var(--space-2);
}

/* ── Threshold checkbox ──────────────────────────────────────────────────────
   The input stays a real, focusable checkbox — it is clipped rather than
   faded, and the focus ring is drawn on the box the user can actually see. */
.am-filtercheck {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 48px;
  padding: var(--space-1) var(--space-2);
  margin-inline: calc(var(--space-2) * -1);
  border-radius: var(--radius-sm);
  font-size: var(--fs-15);
  color: var(--ink);
  cursor: pointer;
}
.am-filtercheck:hover { background: var(--bg-sunken); }

.am-filtercheck input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.am-filtercheck-box {
  width: 24px;
  height: 24px;
  flex: none;
  border: 2px solid var(--rule);
  border-radius: 4px;
  background: var(--surface);
  color: var(--bg);
  display: grid;
  place-items: center;
}
.am-filtercheck input:checked ~ .am-filtercheck-box {
  background: var(--ink);
  border-color: var(--ink);
}
.am-filtercheck input:focus-visible ~ .am-filtercheck-box {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

.am-filtercheck-label { flex: 1; }
.am-filtercheck-count {
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-13);
  font-weight: 600;
}

/* ── Bottom sheet ───────────────────────────────────────────────────────────
   Rises from the bottom edge because that is where the button that opens it
   sits, and because one-handed reach is the governing constraint here. */
.am-sheet-scrim {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(3, 10, 10, 0.62);
  display: flex;
  align-items: flex-end;
  animation: am-sheet-fade 220ms cubic-bezier(0.16, 1, 0.3, 1);
}

.am-sheet {
  width: 100%;
  max-height: 88vh;
  max-height: 88svh;
  background: var(--bg-elev);
  border-top: 1.5px solid var(--rule);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  animation: am-sheet-rise 280ms cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes am-sheet-fade {
  from { opacity: 0; }
}
@keyframes am-sheet-rise {
  from { transform: translateY(18px); }
}

/* Centred variant. Same scrim, same panel, same motion — only the anchoring
   differs. The filter sheet is bottom-anchored because one-handed reach governs
   it; a desktop dialog is not thumb-bound. One dialog surface in the system
   rather than two that drift apart. max-width in rem so it grows with the
   reader's font size instead of squeezing the text. */
.am-sheet-scrim.am-centered {
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
}
.am-sheet-scrim.am-centered .am-sheet {
  max-width: 34rem;
  border: 1.5px solid var(--rule);
  border-radius: var(--radius-lg);
}

.am-sheet-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-5) var(--space-4);
  border-bottom: 1.5px solid var(--rule-soft);
}

/* Image-insert dialog internals */
.am-field + .am-field { margin-top: var(--space-5); }
.am-hint {
  margin: 4px 0 8px;
  font-size: var(--fs-14);
  color: var(--ink-muted);
}
.am-check {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  margin-top: var(--space-4);
  cursor: pointer;
}
.am-check input {
  width: 1.5rem;
  height: 1.5rem;
  margin: 0;
  flex: none;
  accent-color: var(--accent-strong);
}
.am-preview {
  max-height: 9rem;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--edge);
  display: block;
}
.am-formerror {
  margin-top: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-left: 3px solid var(--danger);
  background: var(--danger-soft);
  color: var(--ink);
  font-size: var(--fs-15);
  display: flex;
  gap: var(--space-2);
  align-items: flex-start;
}
.am-sheet-sub {
  margin: 4px 0 0;
  font-size: var(--fs-14);
  color: var(--ink-muted);
}

.am-sheet-body {
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: var(--space-5);
}

.am-sheet-foot {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  padding-bottom: calc(var(--space-4) + env(safe-area-inset-bottom, 0px));
  border-top: 1.5px solid var(--rule);
  background: var(--bg-elev);
}
.am-sheet-foot .am-btn { flex: 1; justify-content: center; }
.am-sheet-foot .am-btn.am-primary { flex: 1.6; }

/* ── Compact filter entry points ─────────────────────────────────────────────
   Mounted only when Directory.jsx says the viewport is compact, so these carry
   no media query of their own. */
.am-directory-mobile-controls { padding: 0 16px 12px; }
.am-directory-mobile-controls > div:first-child {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}

.am-directory-stickybar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: calc(68px + env(safe-area-inset-bottom, 0px));
  z-index: 19;
  display: flex;
  gap: 10px;
  padding: 12px 16px;
  background: var(--bg);
  border-top: 1.5px solid var(--rule);
}
.am-directory-stickybar .am-btn:first-child { flex: 1; justify-content: center; }
.am-directory-stickybar .am-btn:last-child { flex: 2; justify-content: center; }

/* ═══ Status messages ════════════════════════════════════════════════════════
   Colour never carries the meaning on its own — every alert pairs its hue with
   an icon and a word (WCAG 1.4.1). --danger is red rather than amber precisely
   so "this is our accent" and "this went wrong" can no longer look the same.
   ═══════════════════════════════════════════════════════════════════════════ */
.am-alert {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  font-size: var(--fs-15);
  font-weight: 500;
  line-height: 1.5;
}
.am-alert .am-icon { flex: none; margin-top: 2px; }
.am-alert-danger {
  background: var(--danger-soft);
  color: var(--danger);
  border: 1.5px solid var(--danger);
}
.am-alert-success {
  background: var(--success-soft);
  color: var(--success);
  border: 1.5px solid var(--success);
}

/* Positive state, not a selected control. The accommodation badge used to
   reuse .am-pill.is-active, which made a status read exactly like a filter
   the user had switched on. */
.am-badge-success {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  min-height: 28px;
  border-radius: 999px;
  background: var(--success-soft);
  color: var(--success);
  border: 1.5px solid var(--success);
  font-size: var(--fs-12);
  font-weight: 700;
}


/* ═══ Utilities and hardened surfaces ════════════════════════════════════════ */

/* Available to screen readers, invisible on screen. Used for route
   announcements and the map's non-visual description. */
.am-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Google InfoWindow contents. Built with DOM APIs in MapPanel.jsx, styled
   here from tokens so it follows dark mode and high contrast like everything
   else — it used to carry a hardcoded #13ec5b from neither design system. */
.am-mapinfo {
  min-width: 220px;
  font-family: var(--sans);
  color: var(--ink);
  display: grid;
  gap: 6px;
}
.am-mapinfo-name { font-size: var(--fs-15); font-weight: 700; }
.am-mapinfo-address { font-size: var(--fs-13); color: var(--ink-muted); }
.am-mapinfo-score { font-size: var(--fs-14); }
.am-mapinfo-action { margin-top: 6px; justify-self: start; }

.am-review-score-row .am-review-score-grid { min-width: 0; }

@media (max-width: 760px) {
  .am-review-score-row { grid-template-columns: 1fr !important; }
}

/* No-JS fallback. The app is client-rendered, so without this the page is
   blank — and the people most likely to have JS blocked by a locked-down
   device or a corporate policy are not people this product can afford to
   show a white screen to. */
.noscript-fallback {
  max-width: 34rem;
  margin: 0 auto;
  padding: 48px 24px;
  font-family: var(--sans, "Inter", system-ui, sans-serif);
  color: var(--ink, #0a2828);
  line-height: 1.6;
}
.noscript-fallback h1 {
  font-family: var(--serif, Georgia, serif);
  font-size: var(--fs-32, 2rem);
  margin: 0 0 16px;
}
.noscript-fallback a { text-decoration: underline; }


/* The display bar carries seven controls now. Row-gap keeps the wrap
   deliberate instead of accidental. */
.am-a11ybar { row-gap: var(--space-3); column-gap: var(--space-5); }
@media (max-width: 1180px) {
  .am-a11ybar { font-size: var(--fs-12); }
}