*,
*::before,
*::after {
  box-sizing: border-box;
}

:root {
  color-scheme: light;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;

  /* Atlas / field-guide palette. Ink + brass stand in for the old slate/blue
     corporate pair; text grays (#111827/#374151/#4b5563/#6b7280) are untouched
     since their contrast against the new paper/panel tones was re-verified. */
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --color-ink: #1e2a24;
  --color-ink-subtext: #d9d4c5;
  --color-paper: #f7f3e8;
  --color-panel: #fffdf8;
  --color-accent: #92400e;
  /* --color-accent on white/paper measures ~7.1:1 (text/icons); on --color-ink
     it drops to ~2.1:1, well under the 3:1 floor for UI components (WCAG
     1.4.11) — never use it as a focus ring or icon color on the dark header
     or footer. Those keep the white treatment set up below. */
  --color-accent-soft: #fdf3e7;
  --color-border-warm: #e3dcc8;
}

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  overflow-x: hidden;
}

body {
  display: flex;
  flex-direction: column;
  background: var(--color-paper);
}

/* index.html pins html/body to the viewport height so the map (#viewDiv) and
   its sidebar can fill the screen with their own internal scrollbars. Plain
   content pages (FAQ, ratings-explained) have no such fixed-height region,
   so that same 100%-height body traps their overflow below the fold with no
   way to scroll to it. This override lets the body grow with its content and
   scroll normally instead. */
.content-page {
  height: auto;
  min-height: 100%;
}

*:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 2px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--color-ink);
  color: #fff;
  padding: 0.75rem 1rem;
  font-weight: 600;
}

.skip-link:focus {
  left: 0;
}

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

.app-header {
  position: relative;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  padding: 0.5rem 1rem;
  flex: 0 0 auto;
  background: var(--color-ink);
  color: #fff;
  border-bottom: 3px solid var(--color-accent);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  z-index: 10;
}

.header-logo {
  height: 40px;
  width: auto;
  flex: 0 0 auto;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  margin-left: auto;
  flex: 0 0 auto;
}

.header-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: none;
  border: none;
  color: #fff;
  border-radius: 4px;
  cursor: pointer;
  flex: 0 0 auto;
}

.header-action-label {
  display: none;
}

/* display: contents on desktop makes this wrapper invisible to layout, so the
   button/nav inside behave exactly like direct .app-header flex children. At
   the mobile breakpoint below, it switches to a small positioned box so the
   dropdown menu can anchor to the button itself instead of the whole header. */
.mobile-menu {
  display: contents;
}

.hamburger-btn {
  display: none;
}

.header-action svg {
  width: 22px;
  height: 22px;
}

.header-action:hover {
  background: rgba(255, 255, 255, 0.12);
}

/* The default --color-accent focus outline only measures ~2.1:1 against this dark
   background (needs 3:1 per WCAG 1.4.11) since .header-action sits on
   .app-header/.header-actions' --color-ink, both here and in the mobile hamburger
   menu. White clears it easily. */
.header-action:focus-visible {
  outline-color: #fff;
}

/* Google's translate widget is a real, native <select> (select.goog-te-combo,
   injected async — see js/translate-init.js) sitting invisibly on top of a
   .lang-select-visual badge that looks like the other header icons: a circle with
   a 2-letter language code, kept in sync with the select's value. The select
   itself stays fully interactive (and keyboard/screen-reader accessible on its
   own merits as a native form control) — only its default appearance is hidden,
   never its function. Same overlay technique as a custom-styled file input. */
.lang-select-wrap {
  position: relative;
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
}

.lang-select-visual {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  border-radius: 4px;
  /* Lets clicks pass through to the real (invisible) <select> beneath it. */
  pointer-events: none;
}

.lang-select-visual svg {
  width: 22px;
  height: 22px;
}

.lang-select-wrap:hover .lang-select-visual {
  background: rgba(255, 255, 255, 0.12);
}

/* :focus-within (rather than :focus-visible on the select itself) is what lets a
   focus ring drawn on this ancestor react to focus landing several levels down,
   inside Google's own gadget markup between .lang-select and the actual <select>. */
.lang-select-wrap:focus-within .lang-select-visual {
  outline: 3px solid #fff;
  outline-offset: 2px;
}

.lang-select {
  position: absolute;
  inset: 0;
}

.lang-select .goog-te-gadget,
.lang-select .goog-te-gadget > div {
  height: 100%;
}

/* The "Powered by Google Translate" text is a bare text node next to the hidden
   <a> below, not wrapped in an element display: none can target — font-size: 0
   is the only way to collapse it. The select's own dimensions are set in pixels
   below, so this doesn't affect it. */
.lang-select .goog-te-gadget {
  font-size: 0;
}

.lang-select select.goog-te-combo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: none;
  opacity: 0;
  cursor: pointer;
}

/* Everything else the gadget renders alongside the <select> — its own icon and the
   "Powered by Google Translate" link/logo, nested inside a <span> rather than a
   direct child — is redundant with our badge and hidden. */
.lang-select .goog-te-gadget a,
.lang-select .goog-te-gadget img {
  display: none !important;
}

/* Google shows its own translation banner across the top of the page and pushes
   <body> down with an inline `position: relative; top: 40px` to make room for it.
   We already have our own always-visible language control, so hide that banner —
   and, since hiding it doesn't undo the inline offset, override that too. */
.goog-te-banner-frame.skiptranslate {
  display: none !important;
}

body {
  position: static !important;
  top: 0 !important;
}

.app-header-text {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.app-header h1 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: 0.015em;
  line-height: 1.2;
}

.app-subtitle {
  margin: 0;
  font-size: 0.8rem;
  font-weight: 400;
  color: var(--color-ink-subtext);
  line-height: 1.2;
}

.rating-ribbon {
  position: relative;
  flex: 0 0 auto;
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
  padding: 0.5rem 1rem;
  background: var(--color-panel);
  border-bottom: 1px solid var(--color-border-warm);
}

.see-list-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  gap: 0.4rem;
  min-height: 40px;
  padding: 0.4rem 0.75rem;
  background: var(--color-panel);
  border: 1px solid #6b7280;
  border-radius: 4px;
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #111827;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

.see-list-btn:hover {
  background: var(--color-accent-soft);
}

.dropdown {
  position: relative;
}

.dropdown-panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 30;
  width: 300px;
  max-width: calc(100vw - 2rem);
  max-height: 70vh;
  overflow-y: auto;
  background: var(--color-panel);
  border: 1px solid var(--color-border-warm);
  border-radius: 6px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
  padding: 0.75rem;
}

.header-dropdown-panel {
  left: auto;
  right: 0;
  width: 240px;
  padding: 0.4rem;
}

/* A plain `display: flex` here would win over the browser's [hidden] rule
   (author styles beat user-agent styles on the same property regardless of
   specificity), making the panel visible even while hidden. Scoping it to
   :not([hidden]) keeps the flex layout only once the panel is actually shown. */
.header-dropdown-panel:not([hidden]) {
  display: flex;
  flex-direction: column;
}

.dropdown-link {
  display: block;
  padding: 0.6rem 0.65rem;
  min-height: 44px;
  border-radius: 4px;
  font-size: 0.9rem;
  color: #111827;
  text-decoration: none;
}

.dropdown-link:hover {
  background: var(--color-accent-soft);
}

.accessibility-panel {
  width: 300px;
}

.accessibility-panel h2 {
  margin: 0 0 0.4rem;
  padding: 0 0.15rem;
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 600;
  color: #111827;
}

.accessibility-panel p {
  margin: 0;
  padding: 0 0.15rem;
  font-size: 0.85rem;
  line-height: 1.5;
  color: #374151;
}

.accessibility-panel p a {
  color: var(--color-accent);
  font-weight: 600;
}

.download-csv-btn {
  display: block;
  width: 100%;
  min-height: 40px;
  margin-top: 0.5rem;
  background: var(--color-panel);
  border: 1px solid var(--color-accent);
  border-radius: 4px;
  color: var(--color-accent);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
}

.download-csv-btn:hover {
  background: var(--color-accent-soft);
}

.download-csv-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.app-body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: row;
}

.info-panel {
  flex: 0 0 auto;
  width: 320px;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  background: var(--color-panel);
  border-right: 1px solid var(--color-border-warm);
}

/* The class selector above and the browser's built-in [hidden] rule are the same
   specificity, and this stylesheet loads after the UA one — without this, the
   panel's own display value would win and it would stay visible while "hidden". */
.info-panel[hidden] {
  display: none;
}

.info-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  flex: 0 0 auto;
  padding: 0.5rem 0.5rem 0 1.25rem;
  border-bottom: 1px solid var(--color-border-warm);
}

.info-panel-tabs {
  display: flex;
  gap: 0.25rem;
}

.info-panel-tab {
  padding: 0.6rem 0.1rem;
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 600;
  color: #4b5563;
  cursor: pointer;
  margin-right: 0.9rem;
}

.info-panel-tab[aria-selected="true"] {
  color: var(--color-accent);
  border-bottom-color: var(--color-accent);
}

.info-panel-close-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  background: none;
  border: none;
  border-radius: 4px;
  color: #4b5563;
  cursor: pointer;
  margin-bottom: 0.4rem;
}

.info-panel-close-btn:hover {
  background: var(--color-accent-soft);
}

.info-panel-close-btn svg {
  width: 18px;
  height: 18px;
}

.info-tabpanel {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 1rem 1.25rem;
}

.info-tabpanel[hidden] {
  display: none;
}

.info-tabpanel h2 {
  margin: 1rem 0 0.4rem;
  font-family: var(--font-display);
  font-size: 0.95rem;
  color: #111827;
}

.info-tabpanel h2:first-child {
  margin-top: 0;
}

.info-tabpanel p {
  margin: 0 0 0.75rem;
  font-size: 0.9rem;
  line-height: 1.5;
  color: #374151;
}

.about-panel-tools {
  margin: 0;
  padding-left: 1.1rem;
  font-size: 0.9rem;
  line-height: 1.5;
  color: #374151;
}

.about-panel-tools li {
  margin-bottom: 0.6rem;
}

.about-panel-tools li:last-child {
  margin-bottom: 0;
}

.facility-details-empty {
  font-style: italic;
  color: #6b7280;
}

.facility-back-to-nearby-btn {
  display: inline-flex;
  align-items: center;
  margin: 0 0 0.6rem;
  padding: 0.15rem 0.1rem;
  background: none;
  border: none;
  border-radius: 4px;
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-accent);
  cursor: pointer;
}

.facility-back-to-nearby-btn:hover {
  text-decoration: underline;
}

.facility-feature-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.facility-feature-item {
  padding: 0.5rem 0.65rem;
  background: var(--color-paper);
  border: 1px solid var(--color-border-warm);
  border-radius: 6px;
}

.facility-feature-zoom-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin-top: 0.3rem;
  min-height: 24px;
  padding: 0.15rem 0.1rem;
  background: none;
  border: none;
  border-radius: 4px;
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--color-accent);
  cursor: pointer;
}

.facility-feature-zoom-btn svg {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
}

.facility-feature-zoom-btn:hover {
  text-decoration: underline;
}

.facility-nearby-list {
  margin: 0.5rem 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.facility-nearby-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.15rem;
  width: 100%;
  padding: 0.5rem 0.65rem;
  background: var(--color-paper);
  border: 1px solid var(--color-border-warm);
  border-radius: 6px;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}

.facility-nearby-item:hover {
  background: var(--color-accent-soft);
}

.facility-nearby-name {
  font-size: 0.9rem;
  font-weight: 600;
  color: #1a1a1a;
}

.facility-nearby-meta {
  font-size: 0.78rem;
  color: #4a4a4a;
}

.facility-nearby-no-location {
  font-size: 0.75rem;
  font-style: italic;
  color: var(--color-accent);
}

.facility-missing-location-note {
  margin: 0 0 0.5rem;
  padding: 0.4rem 0.6rem;
  background: var(--color-accent-soft);
  border: 1px solid var(--color-border-warm);
  border-radius: 6px;
  font-size: 0.8rem;
  font-style: italic;
  color: var(--color-accent);
}

.app-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.4rem 1rem;
  flex: 0 0 auto;
  background: var(--color-ink);
  color: #fff;
  border-top: 3px solid var(--color-accent);
}

.footer-logo-link {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  /* The 58x22 logo alone is under WCAG 2.2's 24x24 minimum target size (SC 2.5.8);
     this padding grows the clickable/tappable area without resizing the visible logo. */
  padding: 6px 4px;
  text-decoration: none;
}

.footer-logo-link:focus-visible {
  outline-offset: 3px;
  /* Same 1.4.11 contrast issue as .header-action: accent-on-ink is ~2.1:1, below the
     3:1 minimum, on this dark footer background. */
  outline-color: #fff;
}

.footer-logo {
  width: 58px;
  height: 22px;
}

.footer-text {
  font-size: 0.85rem;
  color: var(--color-ink-subtext);
}

/* js/search.js exposes exactly one merged search source (facility name +
   every geocoder), so Esri never renders a source-picker button anyway.
   Kept as a defensive backstop in case a second source is ever added. */
.esri-search__sources-button {
  display: none;
}

#viewDiv {
  flex: 1;
  min-height: 0;
}

.error-state {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 2rem;
  color: #b91c1c;
  font-weight: 600;
  text-align: center;
}

.map-toggle {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
  color: #374151;
  min-height: 44px;
  padding: 0.2rem 0;
}

.map-toggle input[type="checkbox"] {
  width: 1.1rem;
  height: 1.1rem;
  flex: 0 0 auto;
}

.rating-legend {
  border: none;
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
}

.rating-legend legend {
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #374151;
  padding: 0;
  margin: 0;
}

.rating-item {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.9rem;
  color: #111827;
  min-height: 32px;
}

.rating-item input[type="checkbox"] {
  width: 1.1rem;
  height: 1.1rem;
  flex: 0 0 auto;
}

/* Rating badges (images/rating-*.png) already bake in their own border/shadow,
   matching the point symbols the county set up in the AGOL web map's renderer. */
.swatch {
  width: 1.5rem;
  height: 1.5rem;
  display: inline-block;
  flex: 0 0 auto;
}

.list-filter {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.85rem;
  margin-bottom: 0.5rem;
}

.list-filter input[type="search"] {
  padding: 0.5rem;
  min-height: 40px;
  width: 100%;
  border: 1px solid #6b7280;
  border-radius: 4px;
  font-size: 1rem; /* 16px avoids iOS Safari auto-zooming the page on input focus */
}

.list-status {
  font-size: 0.8rem;
  color: #4b5563;
  margin: 0 0 0.35rem;
}

@media (max-width: 720px) {
  .app-body {
    flex-direction: column;
  }

  #viewDiv {
    flex: 1 1 auto;
    min-height: 45vh;
  }

  .info-panel {
    width: auto;
    max-height: 40vh;
    border-right: none;
    border-bottom: 1px solid var(--color-border-warm);
  }

  .mobile-menu {
    display: inline-flex;
    /* No position:relative here on purpose — .header-actions (position:absolute)
       needs to anchor to .app-header instead. .mobile-menu can end up wrapped
       to a small box near the left edge when the header runs out of horizontal
       room (flex-wrap), and anchoring the dropdown to that box pushed it mostly
       off-screen to the left instead of under the header, top-right. */
  }

  .hamburger-btn {
    display: inline-flex;
  }

  .header-actions {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    left: auto;
    z-index: 30;
    flex-direction: column;
    align-items: stretch;
    gap: 0.15rem;
    width: 220px;
    margin-left: 0;
    background: var(--color-ink);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 6px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
    padding: 0.4rem;
  }

  .header-actions.is-open {
    display: flex;
  }

  .header-actions .dropdown {
    width: 100%;
  }

  .header-action {
    width: 100%;
    justify-content: flex-start;
    gap: 0.6rem;
    padding: 0 0.5rem;
  }

  .header-action-label {
    display: inline;
    font-size: 0.9rem;
  }

  .lang-select-wrap {
    width: 100%;
  }

  .lang-select-visual {
    justify-content: flex-start;
    gap: 0.6rem;
    padding: 0 0.5rem;
  }
}

@media (max-width: 480px) {
  .app-header {
    padding: 0.5rem 0.75rem;
  }

  .app-header h1 {
    font-size: 1rem;
  }

  .app-subtitle {
    font-size: 0.75rem;
  }

  .rating-legend {
    gap: 0.4rem 0.6rem;
  }
}

/* Larger touch targets on devices without a precise pointer (phones/tablets),
   regardless of viewport width (e.g. a tablet in landscape). */
@media (pointer: coarse) {
  .see-list-btn,
  .map-toggle {
    min-height: 48px;
  }

  .rating-item {
    min-height: 40px;
  }
}

/* FAQ / ratings-explained pages */

.back-nav {
  display: flex;
  justify-content: flex-end;
  flex: 0 0 auto;
  padding: 0.4rem 1.25rem;
  background: var(--color-ink);
}

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 36px;
  padding: 0.25rem 0.6rem;
  border-radius: 4px;
  color: #fff;
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
}

.back-link svg {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
}

.back-link:hover {
  background: rgba(255, 255, 255, 0.12);
  text-decoration: underline;
}

/* Same 1.4.11 contrast issue as .header-action: --color-accent on this dark
   ink background measures ~2.1:1, below the 3:1 minimum, so white replaces
   it for the focus ring here too. */
.back-link:focus-visible {
  outline-color: #fff;
}

.faq-main {
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  padding: 2rem 1.25rem 3rem;
  flex: 1;
}

#faqHeading,
#ratingsHeading {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 600;
  color: #111827;
  margin: 0 0 1.25rem;
}

.faq-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.faq-item {
  background: var(--color-panel);
  border: 1px solid var(--color-border-warm);
  border-radius: 6px;
  overflow: hidden;
}

.faq-item > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  min-height: 44px;
  padding: 0.85rem 1rem;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  color: #111827;
  cursor: pointer;
  list-style: none;
}

/* Hide the browser's default disclosure marker so the custom .faq-caret
   can take its place. */
.faq-item > summary::-webkit-details-marker {
  display: none;
}

.faq-item > summary::marker {
  content: "";
}

.faq-item > summary:hover {
  background: var(--color-accent-soft);
}

.faq-item[open] > summary {
  border-bottom: 1px solid var(--color-border-warm);
}

.faq-caret {
  width: 0;
  height: 0;
  flex: 0 0 auto;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid #4b5563;
  transition: transform 0.15s ease;
}

.faq-item[open] > summary .faq-caret {
  transform: rotate(180deg);
}

.faq-answer {
  padding: 0.85rem 1rem 1rem;
  font-size: 0.95rem;
  line-height: 1.6;
  color: #374151;
}

.faq-answer p {
  margin: 0 0 0.75rem;
}

.faq-answer p:last-child {
  margin-bottom: 0;
}

.faq-link {
  color: var(--color-accent);
  font-weight: 600;
}

.faq-table-wrap {
  overflow-x: auto;
  margin: 0 0 0.75rem;
}

.faq-table {
  border-collapse: collapse;
  width: 100%;
  min-width: 420px;
  font-size: 0.9rem;
}

.faq-table caption {
  text-align: left;
  font-weight: 600;
  color: #111827;
  margin-bottom: 0.5rem;
}

.faq-table th,
.faq-table td {
  border: 1px solid var(--color-border-warm);
  padding: 0.55rem 0.75rem;
  text-align: left;
}

.faq-table thead th {
  background: var(--color-accent-soft);
  font-family: var(--font-display);
}

.faq-table-note {
  font-size: 0.85rem;
  color: #4b5563;
  font-style: italic;
}

.faq-freq-dl {
  margin: 0.75rem 0 0;
}

.faq-freq-dl dt {
  font-family: var(--font-display);
  font-weight: 600;
  color: #111827;
  margin-top: 0.6rem;
}

.faq-freq-dl dt:first-child {
  margin-top: 0;
}

.faq-freq-dl dd {
  margin: 0.15rem 0 0;
}

.faq-contact {
  margin-top: 2rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--color-border-warm);
  color: #374151;
  line-height: 1.6;
}

.faq-contact h2 {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 600;
  color: #111827;
  margin: 0 0 0.75rem;
}

.faq-contact p {
  margin: 0 0 0.75rem;
}

.faq-contact ul {
  margin: 0 0 0.75rem 1.25rem;
  padding: 0;
}

.faq-contact li {
  margin-bottom: 0.3rem;
}

/* Ratings-explained page */

.faq-main section {
  margin-bottom: 2rem;
}

.faq-main section:last-child {
  margin-bottom: 0;
}

.faq-main section > h2 {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 600;
  color: #111827;
  margin: 0 0 0.75rem;
}

.faq-main section > p {
  color: #374151;
  line-height: 1.6;
  margin: 0 0 0.75rem;
}


.matrix-scroll-hint {
  display: none;
  font-size: 0.8rem;
  font-style: italic;
  color: #4b5563;
  margin: 0 0 0.35rem;
}

.rating-matrix-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0 0 0.75rem;
}

/* .rating-matrix's 640px min-width stops fitting inside .faq-main's content box
   (max-width 760px minus its padding) somewhere below ~700px viewport width —
   below that, the table scrolls horizontally within .rating-matrix-wrap. Native
   scrollbars are easy to miss (especially on touch devices, where they're hidden
   until mid-scroll), so this hint is the reliable way to tell everyone — not just
   mouse users who might spot a scrollbar — that there are more columns to see. */
@media (max-width: 720px) {
  .matrix-scroll-hint {
    display: block;
  }
}

.rating-matrix {
  border-collapse: collapse;
  min-width: 640px;
  font-size: 0.85rem;
}

.rating-matrix caption {
  text-align: left;
  font-weight: 600;
  font-family: var(--font-display);
  color: #111827;
  margin-bottom: 0.5rem;
}

.rating-matrix th,
.rating-matrix td {
  border: 1px solid var(--color-border-warm);
  padding: 0.4rem 0.5rem;
  text-align: center;
}

.rating-matrix thead th,
.rating-matrix tbody th {
  background: var(--color-accent-soft);
  font-family: var(--font-display);
  font-weight: 600;
  color: #111827;
}

/* Grade fills are light enough that --color-ink text clears 4.5:1 on all
   four (verified against WCAG contrast math, not just eyeballed) so every
   cell can share one text color instead of branching per grade. */
.rating-matrix td {
  font-weight: 700;
  color: var(--color-ink);
}

.grade-a {
  background: #a6d96a;
}

.grade-b {
  background: #d9ef8b;
}

.grade-c {
  background: #fdae61;
}

.grade-d {
  background: #ffe066;
}

.rating-rules {
  margin: 0 0 0 1.25rem;
  padding: 0;
  color: #374151;
  line-height: 1.6;
}

.rating-rules li {
  margin-bottom: 0.3rem;
}

.rating-rules li:last-child {
  margin-bottom: 0;
}

@media (max-width: 480px) {
  .faq-main {
    padding: 1.5rem 1rem 2rem;
  }
}

/* All Facilities page */

.facility-list-main {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 2rem 1.25rem 3rem;
  flex: 1;
}

.facility-list-main > h2 {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 600;
  color: #111827;
  margin: 0 0 0.5rem;
}

.facility-list-intro {
  margin: 0 0 1.25rem;
  color: #374151;
  line-height: 1.5;
  max-width: 65ch;
}

.facility-name-filter {
  max-width: 320px;
  margin-bottom: 0.5rem;
}

.facility-list-main .list-status {
  margin: 0 0 2rem;
  font-size: 0.9rem;
  color: #374151;
}

/* .facility-group (the <details>) is deliberately left in normal block flow —
   making it a flex container directly broke Chromium's internal handling of
   <details>'s content, pushing <summary> tens of thousands of pixels down the
   page (empirically, roughly the height of the ~2200-card content that should
   have been below it). The CSV button instead sits absolutely-positioned in
   the top-right corner: it must stay a *sibling* of <summary>, not nested
   inside it (a button nested in a summary is two interactive controls layered
   on each other — axe's nested-interactive rule flags it, and <summary> must
   stay a direct child of <details> for the browser to treat it as the
   disclosure control at all, which rules out a shared flex-row wrapper too). */
.facility-group {
  position: relative;
  margin-bottom: 2.5rem;
}

.facility-group:last-child {
  margin-bottom: 0;
}

.facility-group > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  min-height: 44px;
  /* Reserves room so the heading/caret never run under the absolutely
     positioned CSV button in the same corner. */
  padding-right: 140px;
  margin: 0 0 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--color-border-warm);
  cursor: pointer;
  list-style: none;
}

/* Hide the browser's default disclosure marker so .facility-group-caret
   (matching .faq-caret elsewhere on the site) can take its place. */
.facility-group > summary::-webkit-details-marker {
  display: none;
}

.facility-group > summary::marker {
  content: "";
}

.facility-group > summary h3 {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  min-width: 0;
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 600;
  color: #111827;
  margin: 0;
}

.facility-group-caret {
  width: 0;
  height: 0;
  flex: 0 0 auto;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid #4b5563;
  transition: transform 0.15s ease;
}

.facility-group[open] > summary .facility-group-caret {
  transform: rotate(180deg);
}

.facility-group-csv-btn {
  position: absolute;
  top: 0;
  right: 0;
  width: auto;
  min-height: 36px;
  margin-top: 0;
  padding: 0 0.85rem;
  font-size: 0.8rem;
}

.facility-group-count {
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  font-size: 0.9rem;
  font-weight: 400;
  /* #6b7280 (used elsewhere on the lighter --color-panel) only measures ~4.36:1
     here against --color-paper, just under the 4.5:1 floor — this sits directly
     on the page background, not a card, so it needs the darker gray instead. */
  color: #4b5563;
}

.facility-cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 0.85rem;
}

.load-more-status {
  margin: 0.75rem 0 0;
}

/* :not([hidden]) matters here — a plain `display: block` beats the browser's
   [hidden] rule (author styles win over user-agent styles on the same property
   regardless of specificity), so toggling .hidden via JS wouldn't visually hide
   this button without it. Same fix as .header-dropdown-panel and .facility-card-item. */
.load-all-btn:not([hidden]) {
  display: block;
  width: 100%;
  min-height: 40px;
  margin-top: 0.5rem;
  background: var(--color-panel);
  border: 1px solid var(--color-accent);
  border-radius: 4px;
  color: var(--color-accent);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
}

.load-all-btn:hover {
  background: var(--color-accent-soft);
}

/* :not([hidden]) matters here — a plain `display: flex` beats the browser's
   [hidden] rule (author styles win over user-agent styles on the same property
   regardless of specificity), so toggling .hidden via JS wouldn't visually hide
   filtered-out cards without this scoping. Same fix as .header-dropdown-panel. */
.facility-card-item:not([hidden]) {
  display: flex;
}

.facility-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  background: var(--color-panel);
  border: 1px solid var(--color-border-warm);
  border-radius: 8px;
  padding: 0.9rem 1rem;
}

.facility-card-name {
  margin: 0 0 0.25rem;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  color: #111827;
  line-height: 1.3;
}

.facility-card-address {
  margin: 0 0 0.6rem;
  font-size: 0.85rem;
  color: #4b5563;
}

.facility-card-meta {
  margin: 0 0 0.6rem;
  font-size: 0.85rem;
}

.facility-card-meta dt {
  float: left;
  clear: left;
  width: 45%;
  color: #6b7280;
  font-weight: 600;
}

.facility-card-meta dd {
  margin: 0 0 0.3rem 45%;
  color: #374151;
}

.facility-card-meta::after {
  content: "";
  display: block;
  clear: both;
}

.facility-card-rating {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-weight: 700;
  color: #111827;
}

.facility-card-rating img {
  flex: 0 0 auto;
}

.facility-card-link {
  margin-top: auto;
  align-self: flex-start;
  padding-top: 0.5rem;
  color: var(--color-accent);
  font-weight: 600;
  font-size: 0.85rem;
}

@media (max-width: 480px) {
  .facility-list-main {
    padding: 1.5rem 1rem 2rem;
  }

  .facility-cards {
    grid-template-columns: 1fr;
  }
}