/* US restroom area pages (/tools/restroom-finder/<area>/): the stats box in
   the sidebar, the build-time restroom list and the local-information
   sections. Loaded alongside restroom-finder.css, which styles the shared
   tool layout, result tags and access lines these pages reuse. */

.area-breadcrumb {
  font-size: 0.9rem;
  opacity: 0.9;
  margin-top: 8px;
}
.area-breadcrumb a { color: inherit; }

.area-stats-section .stat-note {
  font-size: 0.85rem;
  color: #666;
  margin: 0 0 8px;
}
.area-stats { display: flex; flex-direction: column; gap: 6px; }
.area-stat-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
  border-bottom: 1px solid #eee;
  font-size: 0.95rem;
}
.area-stat-row:last-child { border-bottom: none; }
.area-stat-row .stat-label { display: inline-flex; align-items: center; gap: 6px; font-size: 0.95rem; color: #333; }
.area-stat-row .stat-value { font-weight: 700; color: #0066cc; font-size: 1.05rem; }

.area-list-note { font-size: 0.9rem; color: #555; }
.area-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
@media (min-width: 900px) { .area-list { grid-template-columns: 1fr 1fr; } }
.area-row {
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 12px 14px;
  background: #fff;
}
.area-row-head { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; margin-bottom: 6px; }
.area-row-name { font-weight: 600; color: #222; }
.area-row-points { font-weight: 400; color: #777; font-size: 0.85rem; }
.area-row-distance { white-space: nowrap; font-weight: 600; color: #0066cc; font-size: 0.9rem; }
.area-row-walk { font-weight: 400; color: #666; font-size: 0.8rem; }
.area-row .result-facilities { margin-top: 6px; }
.area-row-actions { margin-top: 8px; }
.area-row-map {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 0.8rem; color: #0066cc; text-decoration: none;
}
.area-row-map:hover { text-decoration: underline; }

.area-sources { font-size: 0.85rem; color: #666; }
.area-sources a { color: #0066cc; }
.area-caveat { font-size: 0.9rem; color: #555; border-left: 3px solid #e0a458; padding-left: 10px; }

html[data-theme="dark"] .area-row { background: #1e1e1e; border-color: #333; }
html[data-theme="dark"] .area-row-name { color: #eee; }
html[data-theme="dark"] .area-stat-row { border-color: #333; }
html[data-theme="dark"] .area-stat-row .stat-label { color: #ddd; }
html[data-theme="dark"] .area-stats-section .stat-note,
html[data-theme="dark"] .area-list-note,
html[data-theme="dark"] .area-sources,
html[data-theme="dark"] .area-caveat { color: #aaa; }

/* One-screen map (Dan's review, 2026-10-07). Desktop: the sidebar and map
   share a box about a screen tall; the sidebar scrolls inside it and the map
   fills it. Phone: the stacked sidebar is capped and scrolls inside, so the
   map is reachable without paging through every result card, and the map
   is about a screen tall. */
@media (min-width: 901px) {
  .tool-container { height: calc(100vh - 120px); min-height: 560px; max-height: 900px; }
  .tool-sidebar { overflow-y: auto; min-height: 0; padding-right: 4px; }
  .map-container { min-height: 0; }
  .map-container #map { height: 100%; }
}
@media (max-width: 900px) {
  .tool-sidebar { max-height: 70vh; overflow-y: auto; }
  .map-container #map { height: 75vh; min-height: 420px; }
}