/* Explore layout (16 Oct 2026, approved by Lawrence): preferences | full-height map | one results column.
   Picking a place swaps the results for its profile in the same column, so the map never changes size.
   Applied preferences show as removable chips under the header, only while something is set.
   Below 1241px the preferences slide in from "Filters"; on phones the list is a sheet over a full-screen map.
   Loaded after app.css and panels.css and wins over their docked-profile rules. */

:root{--apH:0px}
:root.has-applied{--apH:46px}

/* ---------- applied preferences ---------- */
.applied{height:var(--apH);display:flex;align-items:center;padding:0 max(10px,env(safe-area-inset-right,0px)) 0 max(10px,env(safe-area-inset-left,0px))}
.applied[hidden]{display:none}
.ap-in{display:flex;align-items:center;gap:8px;min-width:0;width:100%;overflow-x:auto;scrollbar-width:none;padding:0 2px 6px}
.ap-in::-webkit-scrollbar{display:none}
.ap-l{font-size:13px;font-weight:600;color:var(--muted);flex:none}
.ap-chip{display:inline-flex;align-items:stretch;flex:none;max-width:340px;border:1px solid color-mix(in srgb,var(--accent) 35%,var(--line));background:var(--accent-soft);border-radius:999px;box-shadow:var(--shadow-sm)}
.ap-go{display:inline-flex;align-items:center;gap:6px;min-width:0;border:0;background:none;color:var(--accent-strong);font:inherit;font-size:13.5px;padding:5px 2px 5px 12px;cursor:pointer;border-radius:999px 0 0 999px}
.ap-n{font-weight:700;white-space:nowrap}
.ap-t{color:var(--fg);opacity:.8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.ap-must{flex:none;font-size:11px;font-weight:700;letter-spacing:.02em;color:var(--navy-ink);background:var(--navy);border-radius:5px;padding:1px 5px}
.ap-x{flex:none;border:0;background:none;color:var(--muted);width:30px;display:grid;place-items:center;cursor:pointer;border-radius:0 999px 999px 0}
.ap-x svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round}
.ap-x:hover,.ap-x:focus-visible{color:var(--fg);background:color-mix(in srgb,var(--accent) 14%,transparent)}
.ap-go:hover .ap-n{text-decoration:underline}
.ap-clear{flex:none;font-size:13.5px;margin-left:2px}

/* ---------- the map: full height, controls float on it ---------- */
.explore{height:calc(100dvh - var(--topH) - var(--apH))}
.mapwrap{position:relative}
.maptools{position:absolute;top:0;left:0;right:0;z-index:6;display:flex;align-items:flex-start;gap:8px;padding:12px;background:none;border:0;pointer-events:none}
.maptools>*{pointer-events:auto}
.maptools .phonebar{display:none}
.lyr-wrap{position:relative;margin-left:auto}
#layers-btn,#choices-btn{display:inline-flex;align-items:center;gap:7px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-sm);font-weight:600;font-size:14px;padding:7px 12px;border-radius:10px;color:var(--fg)}
#layers-btn svg,#choices-btn svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
#layers-btn[aria-expanded="true"]{border-color:var(--accent);color:var(--accent-strong)}
.lyr-pop{position:absolute;right:0;top:calc(100% + 6px);width:260px;max-height:min(70vh,520px);overflow-y:auto;background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);padding:10px;display:grid;gap:8px}
.lyr-pop[hidden]{display:none}
.lyr-pop .layerbar{display:grid;gap:4px;overflow:visible;padding:0;flex-wrap:wrap}
.lyr-h{margin:0 2px 2px;font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--faint)}
.lyr-opt{display:grid;text-align:left;border:1px solid transparent;background:none;border-radius:9px;padding:7px 10px;color:var(--fg);font:inherit;font-size:14px;cursor:pointer}
.lyr-opt small{font-size:12.5px;color:var(--muted)}
.lyr-opt:hover{background:var(--surface-2)}
.lyr-opt[aria-pressed="true"]{background:var(--accent-soft);border-color:color-mix(in srgb,var(--accent) 40%,transparent)}
.lyr-opt[aria-pressed="true"] b{color:var(--accent-strong)}
.lyr-pop .layerbar select{width:100%;max-width:none;border:1px solid var(--line-strong);border-radius:9px;padding:7px 9px;background:var(--surface);color:var(--fg);font-size:14px;box-shadow:none}
.lyr-pop .layerbar select.on{background:var(--accent-soft);border-color:var(--accent);color:var(--accent-strong)}
.lyr-pop .mapopts{display:grid;gap:6px;margin:0;padding:8px 4px 2px;border-top:1px solid var(--line);font-size:14px;font-weight:600;color:var(--fg)}
.lyr-pop .mapopts .check{display:flex;align-items:center;gap:8px}
.legend .lg-follow{font-size:12px;color:var(--muted);margin-top:4px}
.legend .lg-follow .linkbtn{font-size:12px}
.legend.mini .lg-follow{display:none}

/* ---------- results column and the profile that replaces it (wide screens) ---------- */
@media (min-width:861px){
  .explore{grid-template-rows:minmax(0,1fr)}
  .filters,.mapwrap,.places{grid-row:1}
  .places{grid-column:3}
  .explore .drawer,.explore .drawer.open{grid-column:3;grid-row:1;height:auto!important;display:none;flex-direction:column;grid-template:none;position:relative;z-index:4;border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-sm);background:var(--surface);overflow:hidden;min-width:0}
  .explore .drawer.open{display:flex!important}
  .explore .drawer.open.wide{grid-column:2/4;box-shadow:var(--shadow)}
  .explore:has(.drawer.open) .places{visibility:hidden}
  /* hidden places rail: the profile still opens at a readable width */
  :root.hide-p .explore:has(.drawer.open){--pW:380px}
  :root.hide-p .explore:has(.drawer.open) .places{display:none}
  .explore .drawer>.pnl-edge,.explore .drawer>.pnl-tog{display:none!important}
  :root.hide-d .explore .drawer>*:not(.pnl-tog){display:revert!important}
  .drawer .dh{display:flex;flex-wrap:wrap;gap:6px 10px;padding:12px 18px 10px;background:var(--surface)}
  .drawer .d-thumb{display:none}
  .drawer .dh-t{order:1;flex-basis:100%;padding:0}
  .drawer .d-acts{position:static;order:2;flex-basis:100%;justify-content:flex-start;gap:8px}
  .drawer .d-nav{margin-left:auto}
  .drawer #d-close{display:none}
  .drawer .dh h2{font-size:24px}
  .drawer .dtabs{padding:0 12px;background:var(--surface)}
  .drawer .dtabs button{padding:9px 8px;border:0;border-bottom:2px solid transparent;border-radius:0}
  .drawer .db{padding:14px 18px 22px;gap:16px;background:var(--surface)}
  .drawer .facts-g{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .drawer .fact{border:1px solid var(--line);border-radius:12px;padding:10px 12px;background:var(--surface)}
  .drawer .facts-g .fact:first-child,.drawer .facts-g .fact:nth-child(n){border-left:1px solid var(--line);padding-left:12px}
  .drawer .fact .fv{font-size:20px}
  .drawer:not(.wide) .fact.hasic{grid-template-columns:minmax(0,1fr)}
  .drawer:not(.wide) .fact.hasic>*:not(.ic){grid-column:1}
  .drawer:not(.wide) .fact.hasic .ic{display:none}
  .d-bar .d-nav{margin-left:auto}
  .drawer.wide .facts-g{grid-template-columns:repeat(auto-fill,minmax(190px,1fr))}
}
.d-bar{display:none}
@media (min-width:861px){
  .d-bar{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 14px 0 10px;background:var(--surface)}
}
.d-back,.d-wide{white-space:nowrap;display:inline-flex;align-items:center;gap:4px;font-weight:600;font-size:14px;padding:4px 6px;border-radius:8px}
.d-back svg,.d-wide svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.d-wide{color:var(--muted)}
.d-wide:hover{color:var(--accent-strong)}
@media (min-width:861px) and (max-width:1100px){ .d-wide{display:none} }

/* ---------- result cards: no outline picture; the badge is what the list is sorted by ---------- */
.pc{grid-template-columns:22px minmax(0,1fr) auto 14px}
.pc .th{display:none}
.pc .rk{grid-column:1;grid-row:1;align-self:center}
.pc .nm{grid-column:2;grid-row:1}
.pc .score{grid-column:3;grid-row:1/3;align-self:start;margin-top:2px}
.pc .go{grid-column:4;grid-row:1}
.pc .mt{grid-column:2;grid-row:2}
.pc .facts{grid-column:2/5;grid-row:3}
.pc .score.key{height:auto}
.score.key{display:inline-grid;justify-items:center;line-height:1.05;min-width:54px;padding:4px 7px 3px;font-size:15px;background:var(--navy);color:var(--navy-ink);border-color:var(--navy)}
.score.key small{font-family:var(--body);font-size:10.5px;font-weight:600;opacity:.85}
.score.key.na{background:var(--nodata-bg);color:var(--faint);border:1px dashed var(--line-strong)}
.empty.blank{font-size:13.5px}

/* ---------- filters: idle categories are one quiet line, ones in use stand out ---------- */
.fx-cat.idle .fx-sm{display:none}
.fx-cat.idle .fx-head{padding-top:7px;padding-bottom:7px}
.fx-cat.idle .fx-nm{font-weight:600}
.fx-cat.idle .fx-tag{background:none;border:1px dashed var(--line-strong);color:var(--accent-strong)}
.fx-cat.idle.open .fx-sm{display:block}
@media (min-width:861px){ .f-live{display:none} }

/* ---------- laptops (861 to 1240px): the preferences slide in from Filters ---------- */
@media (min-width:861px) and (max-width:1240px){
  :root{--pW:340px}
  .explore{grid-template-columns:minmax(0,1fr) var(--pW)}
  .mapwrap{grid-column:1}
  .places,.explore .drawer,.explore .drawer.open{grid-column:2}
  .explore .drawer.open.wide{grid-column:1/3}
  .filters{position:fixed;top:calc(var(--topH) + var(--apH));left:10px;bottom:10px;width:min(360px,calc(100vw - 20px));z-index:50;transform:translateX(calc(-100% - 20px));transition:transform .2s ease;box-shadow:var(--shadow)}
  .filters.open{transform:none}
  .filters>.pnl-edge,.filters>.pnl-tog{display:none!important}
  .maptools .phonebar{display:flex}
  .maptools .phonebar .phonecount{display:none}
  #side-scrim{z-index:49}
  .filters .only-phone{display:revert!important}
  .filters .f-done{padding:10px 14px;border-top:1px solid var(--line)}
}

/* ---------- phones: full-screen map with the list as a sheet ---------- */
@media (max-width:860px){
  html,body{height:100%;overflow:hidden}
  body{display:flex;flex-direction:column}
  header.top{flex:none}
  .applied{flex:none;height:auto;padding-top:2px}
  .ap-in{padding-bottom:6px}
  .explore{position:relative;flex:1;min-height:0;height:auto;display:block;padding:0}
  .mapwrap{position:absolute;inset:0;height:auto;border:0;border-radius:0;box-shadow:none}
  .mapbox{height:100%}
  .maptools{flex-direction:row;padding:10px 10px}
  .maptools .phonebar{display:flex;align-items:center;gap:10px}
  .maptools .phonecount{display:none}
  /* Mapbox logo and credits sit between Filters and Layers instead of under Filters */
  .mapbox .mapboxgl-ctrl-top-left{left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:4px}
  .legend{bottom:auto;top:58px;left:10px;right:auto;max-width:min(300px,calc(100% - 70px))}
  .zoom{bottom:auto;top:58px}
  .places{position:absolute;left:0;right:0;bottom:0;z-index:8;height:min(44%,360px);border:0;border-radius:18px 18px 0 0;box-shadow:0 -6px 22px rgba(10,16,30,.18);transition:height .22s ease;display:flex;flex-direction:column;background:var(--surface);padding-bottom:env(safe-area-inset-bottom,0px)}
  .explore[data-sheet="full"] .places{height:calc(100% - 8px)}
  .sheet-grab{flex:none;display:grid;place-items:center;height:22px;border:0;background:none;cursor:pointer;width:100%}
  .sheet-grab span{width:42px;height:5px;border-radius:3px;background:var(--line-strong)}
  .places .p-head{padding-top:2px}
  .places .plist{overflow-y:auto;flex:1;min-height:0}
  .sheet-map{display:none}
  .explore[data-sheet="full"] .sheet-map{display:inline-flex;position:absolute;left:50%;bottom:calc(76px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:9;align-items:center;gap:7px;background:var(--navy);color:var(--navy-ink);border:0;border-radius:999px;padding:10px 18px;font-weight:700;box-shadow:var(--shadow)}
  .sheet-map svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;stroke-linejoin:round}
  .drawer{z-index:60}
  #d-pos{display:none}
  .explore:not([data-sheet="full"]) .p-foot{display:none}
  .places .p-head{gap:4px 10px}
  .legend .lg-note,.legend .lg-keys,.legend .ticks,.legend .lg-follow{display:none!important}
  .legend{padding:7px 10px;width:220px}
  .ap-l{display:none}
}
@media (min-width:861px){ .sheet-grab,.sheet-map{display:none!important} }

/* the results column doubles as the profile, so it is a little wider than the old list */
@media (min-width:1241px){ :root{--pW:360px} }
@media (min-width:1481px){ :root{--pW:400px} }
@media (max-width:1480px){ .d-wide span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)} }

/* small key: the layer name keeps its room; the level chip gives way first */
.legend.mini .lt span:first-child{flex:0 1 auto}
.legend.mini .lt .lg-lvl{flex:0 2 auto}

/* hospitals: a hospital's page takes the whole column, like a place's profile; its "All hospitals" link is the way back */
.hx:has(#hx-one:not([hidden])) .hx-head{display:none}
.hx-row2 .sortlab{display:flex;align-items:center;gap:8px;padding:3px 10px;border-radius:8px;min-width:0}
.hx-row2 .sortlab span{font-size:12px;white-space:nowrap}
.hx-row2 .sortlab select{border:0;padding:0;background:none;font-weight:600;font-size:13.5px}