:root {
  --ink: #16232a;
  --muted: #65727b;
  --line: #d9e0e4;
  --panel: #fbfcfc;
  --academic: #D55E00;
  --community: #0072B2;
  --freestanding: #009E73;
  --shadow: 0 12px 40px rgba(20, 34, 42, .12);
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: var(--ink); background: #eef2f3; }
button, input { font: inherit; }
button:focus-visible, input:focus-visible { outline: 3px solid rgba(23, 105, 170, .25); outline-offset: 2px; }
.app-shell { height: 100vh; height: 100dvh; display: grid; grid-template-columns: 350px 1fr; }
.panel { position: relative; z-index: 5; display: flex; flex-direction: column; gap: 24px; padding: 28px 24px 22px; background: rgba(251,252,252,.98); border-right: 1px solid var(--line); box-shadow: var(--shadow); }
.brand-block { display: flex; align-items: center; gap: 13px; }
.brand-mark { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: var(--ink); color: white; font-size: 28px; line-height: 1; font-weight: 300; }
h1 { margin: 0; font-size: 25px; letter-spacing: -.03em; }
.brand-block p { margin: 2px 0 0; color: var(--muted); font-size: 13px; }
.search-label, .filter-title { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; font-weight: 750; color: #526069; }
.search-wrap { position: relative; }
#search { width: 100%; border: 1px solid #cbd5da; background: white; border-radius: 11px; padding: 13px 14px; outline: none; }
#search:focus { border-color: #8597a1; box-shadow: 0 0 0 3px rgba(23,105,170,.10); }
.search-results { position: absolute; top: calc(100% + 7px); left: 0; right: 0; z-index: 12; max-height: 330px; overflow-y: auto; background: white; border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); }
.search-result { width: 100%; padding: 11px 12px; border: 0; border-bottom: 1px solid #edf0f2; background: white; text-align: left; cursor: pointer; }
.search-result:last-child { border-bottom: 0; }
.search-result:hover, .search-result:focus-visible { background: #f5f8f9; }
.search-result strong { display: block; font-size: 13px; }
.search-result span { display: block; margin-top: 3px; color: var(--muted); font-size: 12px; }
.search-empty { padding: 12px; color: var(--muted); font-size: 13px; }
.filter-block { display: grid; gap: 8px; }
.filter-title { margin-bottom: 2px; }
.filter { display: flex; align-items: center; gap: 10px; width: 100%; border: 1px solid transparent; border-radius: 9px; padding: 9px 10px; background: transparent; color: #34434b; cursor: pointer; text-align: left; }
.filter:hover { background: #f0f4f5; }
.filter.active { background: #eaf0f2; border-color: #dce5e8; font-weight: 650; }
.dot { display: inline-block; flex: 0 0 auto; width: 10px; height: 10px; border-radius: 999px; }
.dot.academic { background: var(--academic); }
.dot.community { background: var(--community); }
.dot.freestanding { background: var(--freestanding); }
.dot.all { background: conic-gradient(var(--academic) 0 33%, var(--community) 33% 66%, var(--freestanding) 66%); }
.panel-footer { margin-top: auto; display: grid; gap: 6px; color: var(--muted); font-size: 11px; line-height: 1.45; }
.panel-footer strong { color: #435159; font-size: 12px; }
.map-wrap { position: relative; min-width: 0; }
#map { position: absolute; inset: 0; }
.map-control { position: absolute; top: 88px; right: 10px; z-index: 3; border: 1px solid rgba(22,35,42,.18); background: rgba(255,255,255,.96); border-radius: 8px; padding: 8px 10px; box-shadow: 0 3px 14px rgba(22,35,42,.12); cursor: pointer; }
.map-control:hover { background: #fff; }
.legend { position: absolute; right: 14px; bottom: 27px; z-index: 3; display: flex; gap: 12px; padding: 8px 10px; background: rgba(255,255,255,.92); border: 1px solid rgba(22,35,42,.13); border-radius: 8px; font-size: 11px; box-shadow: 0 3px 14px rgba(22,35,42,.10); }
.legend span { display: flex; align-items: center; gap: 5px; }
.leaflet-popup-content-wrapper { border-radius: 12px; padding: 14px 16px; box-shadow: var(--shadow); }
.leaflet-popup-content .popup-name { margin: 0 0 5px; padding-right: 12px; font-size: 14px; }
.popup-meta { color: var(--muted); font-size: 12px; line-height: 1.45; }
.popup-type { display: inline-block; margin-top: 8px; padding: 3px 7px; border-radius: 999px; color: white; font-size: 11px; font-weight: 650; }
.popup-academic { background: var(--academic); }
.popup-community { background: var(--community); }
.popup-freestanding { background: var(--freestanding); }
@media (max-width: 760px) {
  .app-shell { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .panel { padding: 12px 14px; gap: 10px; box-shadow: 0 4px 18px rgba(20,34,42,.10); }
  .brand-block { display: none; }
  .filter-block { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; }
  .filter-title { grid-column: 1 / -1; }
  .filter { justify-content: center; padding: 8px 4px; font-size: 11px; }
  .filter:first-of-type { font-size: 0; }
  .filter:first-of-type::after { content: "All"; font-size: 11px; }
  .panel-footer { display: none; }
  .map-wrap { min-height: 0; }
  .legend { display: none; }
  .map-control { top: 88px; }
}

.popup-trauma { margin-top: 10px; padding-top: 9px; border-top: 1px solid var(--line); font-size: 12px; line-height: 1.5; }
.popup-trauma-title { margin-bottom: 2px; color: #435159; font-size: 11px; font-weight: 750; text-transform: uppercase; letter-spacing: .06em; }
.popup-trauma-row strong { color: var(--ink); font-weight: 700; }
.popup-trauma-source { color: var(--muted); }

.popup-cardiac { margin-top: 10px; padding-top: 9px; border-top: 1px solid var(--line); font-size: 12px; line-height: 1.5; }
.popup-cardiac-title { margin-bottom: 2px; color: #435159; font-size: 11px; font-weight: 750; text-transform: uppercase; letter-spacing: .06em; }
.popup-cardiac-row strong { color: var(--ink); font-weight: 700; }
.popup-cardiac-source, .popup-cardiac-credential { color: var(--muted); }

.popup-volume { margin-top: 10px; padding-top: 9px; border-top: 1px solid var(--line); font-size: 12px; line-height: 1.4; }
.popup-volume-title { margin-bottom: 5px; color: #435159; font-size: 11px; font-weight: 750; text-transform: uppercase; letter-spacing: .06em; }
.popup-volume-row { padding: 3px 0; overflow-wrap: anywhere; }
.popup-volume-year { color: #465762; font-variant-numeric: tabular-nums; }
.popup-volume-count { color: var(--ink); font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.popup-volume-row:first-of-type .popup-volume-count { font-weight: 800; }
.popup-volume-basis, .popup-volume-status { color: var(--muted); font-size: 12px; }
.popup-volume-note { margin-top: 6px; color: var(--muted); font-size: 10px; }

.popup-facility{margin-top:10px;padding-top:9px;border-top:1px solid var(--line);font-size:12px;line-height:1.6;overflow-wrap:anywhere}.popup-facility-title{margin-bottom:3px;color:#435159;font-size:11px;font-weight:750;text-transform:uppercase;letter-spacing:.06em}.popup-facility a{color:#00699a;text-decoration:underline}

.panel-footer .footer-detail strong { font-size: inherit; font-weight: 750; color: #435159; }
.panel-footer a { color: #075b83; text-decoration: underline; text-underline-offset: 2px; font-weight: 650; }
.panel-footer .footer-short { display: none; }
.popup-service-warning { color: var(--muted); font-size: 11px; line-height: 1.4; margin-top: 7px; }
@media (max-width: 760px) {
  .panel-footer { display: grid; margin-top: 0; gap: 3px; font-size: 10px; line-height: 1.3; }
  .panel-footer .footer-detail { display: none; }
  .panel-footer .footer-short { display: block; }
}

/* Contact actions belong beside the hospital's name and address, not among service capabilities. */
.popup-contact { margin-top: 8px; display: grid; gap: 3px; font-size: 12px; line-height: 1.45; overflow-wrap: anywhere; }
.popup-contact-label { color: #52636d; font-weight: 600; }
.popup-contact-row a { color: #00699a; text-decoration: underline; text-underline-offset: 2px; }
.popup-contact-row a:focus-visible { outline: 2px solid #00699a; outline-offset: 2px; border-radius: 2px; }

/* ED Atlas contact and facility-specific corrections. */
.panel-footer .site-contact { display: flex; flex-wrap: wrap; gap: 1px 8px; align-items: baseline; margin: 2px 0; }
.panel-footer .site-contact strong { font-size: 11px; }
.panel-footer .site-contact a { overflow-wrap: anywhere; }
.popup-feedback { margin-top: 8px; font-size: 12px; line-height: 1.45; }
.popup-feedback a { color: #00699a; text-decoration: underline; text-underline-offset: 2px; font-weight: 650; }
.popup-feedback a:focus-visible { outline: 2px solid #00699a; outline-offset: 2px; border-radius: 2px; }
