/* sb-browse-hf (27 Oct 2026) — Browse page in the "HealthFinder" layout Rocky picked:
   compact hero with one search bar + example searches + location/radius/telehealth row,
   category pills, wide cards (photo · details with service chips · action column),
   filters in a right-hand panel (persistent on wide screens, a drawer below 1400px).
   Additive: sits over browse.js v2; nothing in browse.js is changed. */
.hf-on .bx{margin-top:0}
.hf-on .bx-intro{display:none}
.hf-on .bx-query-help,.hf-on .bx-service-entry{display:none}

/* ---------- hero ---------- */
.hf-hero{display:grid;grid-template-columns:minmax(220px,300px) minmax(0,1fr);gap:28px;align-items:center;padding:26px 28px;margin:6px 0 18px;border-radius:24px;
  background:linear-gradient(100deg,#EEF4FF 0%,#F7FAFF 55%,#E6FBF4 100%);border:1px solid #DCE6F5;position:relative;overflow:hidden}
.hf-hero::after{content:"";position:absolute;right:-60px;top:-60px;width:260px;height:260px;border-radius:50%;background:radial-gradient(circle,rgba(37,99,235,.14),transparent 70%);pointer-events:none}
.hf-hero h1{margin:0 0 8px;font:800 clamp(26px,2.6vw,36px)/1.08 var(--display,Fraunces,Georgia,serif);letter-spacing:-.02em;color:#0B1226}
.hf-hero p{margin:0;color:#475569;font-size:15px;line-height:1.5;max-width:30ch}
.hf-on .bx-search{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"types types" "what go" "ex ex" "loc opts";gap:10px;align-items:center;margin:0;position:relative;z-index:1}
.hf-on .bx-search>.compact-location{grid-area:loc;justify-self:start;display:inline-flex;align-items:center;gap:10px;min-height:46px;margin:0!important;padding:0 8px 0 16px;border:1px solid #D7DEEA;border-radius:999px;background:#fff;font:inherit;font-size:14px;color:#1E293B;cursor:pointer}
.hf-on .bx-search>.compact-location .compact-location-copy b{font-weight:800}
.hf-on .bx-search>.compact-location .compact-change-label{display:inline-flex;align-items:center;height:32px;padding:0 12px;border-radius:999px;background:#EEF4FF;color:#1D4ED8;font-weight:700;font-size:13px}
.hf-on .bx-search>.compact-location::before{content:"";width:16px;height:16px;border-radius:50%;border:2px solid #2563EB;box-sizing:border-box;flex:none;box-shadow:inset 0 0 0 3px #fff,inset 0 0 0 8px #2563EB}
.hf-on .bx-what{grid-area:what;min-height:56px;border-radius:999px;padding-left:46px;border-color:#D7DEEA;box-shadow:0 1px 2px rgba(15,23,42,.04)}
.hf-on .bx-what .bx-fl{display:none}.hf-on .bx-what input{font-size:16px}
.hf-on .bx-go{grid-area:go;min-height:56px;padding:0 26px;border-radius:999px;background:#2563EB;color:#fff;font-weight:800;border:0;box-shadow:0 8px 22px rgba(37,99,235,.28)}
.hf-on .bx-go:hover{background:#1D4ED8}
.hf-ex{grid-area:ex;display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:0}
.hf-ex span{font-size:12.5px;color:#64748B;margin-right:2px}
.hf-ex button{appearance:none;border:1px solid #DCE4F0;background:rgba(255,255,255,.85);color:#1E293B;border-radius:999px;padding:7px 12px;font:600 13px/1 inherit;cursor:pointer}
.hf-ex button:hover{border-color:#2563EB;color:#1D4ED8}
.hf-opts{grid-area:opts;display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.hf-opts{justify-self:end}
.hf-r{display:inline-flex;align-items:center;gap:8px;min-height:46px;padding:0 10px 0 16px;border:1px solid #D7DEEA;border-radius:999px;background:#fff;font:600 14px/1 inherit;color:#1E293B}
.hf-r span{color:#64748B;font-weight:500}
.hf-r select{appearance:none;-webkit-appearance:none;border:0;background:transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B1226' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right center/14px no-repeat;padding:0 20px 0 0;font:inherit;font-weight:700;color:inherit;cursor:pointer}
.hf-tele{display:inline-flex;align-items:center;gap:10px;min-height:46px;padding:0 16px 0 8px;border:1px solid #D7DEEA;border-radius:999px;background:#fff;font:600 14px/1 inherit;color:#1E293B;cursor:pointer;user-select:none}
.hf-tele i{width:40px;height:22px;border-radius:999px;background:#CBD5E1;position:relative;transition:background .15s}
.hf-tele i::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff;transition:transform .15s;box-shadow:0 1px 2px rgba(0,0,0,.2)}
.hf-tele[aria-pressed=true] i{background:#16A34A}.hf-tele[aria-pressed=true] i::after{transform:translateX(18px)}
.hf-tele[hidden],.hf-quick[hidden],.hf-quick label[hidden]{display:none!important}

/* ---------- results header / tabs ---------- */
.hf-on .bx-top{align-items:center}
.hf-on .bx-count{font-size:15px}
.hf-on .bx-pill{border-radius:999px;background:var(--bx-card)}
.hf-filters{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 14px;border:1px solid var(--bx-line);border-radius:999px;background:var(--bx-card);color:inherit;font:600 14px/1 inherit;cursor:pointer}
.hf-filters b{min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:#2563EB;color:#fff;font-size:11px;display:inline-grid;place-items:center}
.hf-filters b:empty{display:none}
.hf-on .bx-explore{margin:8px 0 6px}.hf-on .bx-explore>span{display:none}
.hf-on .bx-tabs{background:none;padding:0;gap:8px}
.hf-on .bx-tabs button{border:1px solid var(--bx-line);border-radius:999px;padding:9px 16px;background:var(--bx-card);color:var(--bx-ink);font-weight:650}
.hf-on .bx-tabs button[aria-selected=true]{background:#0B1226;color:#fff;border-color:#0B1226}
html[data-theme=dark] .hf-on .bx-tabs button[aria-selected=true]{background:#2563EB;border-color:#2563EB}

/* ---------- filters: right-hand panel ---------- */
@media (min-width:901px){
  .hf-on .bx-cols{display:block;margin-top:14px}
  .hf-on .bx-side{position:fixed;top:0;right:0;bottom:0;width:min(380px,92vw);max-height:none;z-index:80;padding:0 18px 28px;background:var(--bx-card);border-left:1px solid var(--bx-line);box-shadow:-20px 0 50px rgba(2,6,23,.18);transform:translateX(104%);transition:transform .22s ease;overflow:auto}
  .hf-fo .bx-side{transform:none}
  .hf-on .bx-sheethead{display:flex;position:sticky;top:0;z-index:2;justify-content:space-between;align-items:center;padding:16px 0 10px;margin:0 0 6px;background:var(--bx-card);border-bottom:1px solid var(--bx-line)}
  .hf-on .bx-sheethead b{font:800 22px/1 var(--display,Fraunces,Georgia,serif);letter-spacing:-.02em}
  .hf-on .bx-close{display:inline-grid;place-items:center;width:36px;height:36px;border:1px solid var(--bx-line);border-radius:50%;background:none;color:inherit;cursor:pointer}
  .hf-on .bx-close .bx-i{width:16px;height:16px}
  .hf-on .bx-sidehead{margin-top:4px}.hf-on .bx-sidehead h2{display:none}
  .hf-on .bx-mapcard{display:none}
  .hf-back{position:fixed;inset:0;z-index:79;background:rgba(2,6,23,.35);opacity:0;pointer-events:none;transition:opacity .2s}
  .hf-fo .hf-back{opacity:1;pointer-events:auto}
  .hf-on .bx-fab{display:none!important}
  /* wide screens: the panel is always open beside the results, like the mock */
  @media (min-width:1400px){
    .hf-on .bx-cols{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:28px;align-items:start}
    .hf-on .bx-side{position:sticky;top:12px;right:auto;bottom:auto;width:auto;max-height:calc(100vh - 24px);transform:none;box-shadow:none;border:1px solid var(--bx-line);border-radius:20px;padding:0 16px 20px;order:2}
    .hf-on .bx-main{order:1}
    .hf-on .bx-sheethead{border-radius:20px 20px 0 0}.hf-on .bx-close{display:none}
    .hf-back{display:none}.hf-filters{display:none}
  }
}
.hf-dist{padding:4px 2px 10px}
.hf-dist input[type=range]{width:100%;accent-color:#2563EB}
.hf-dist div{display:flex;justify-content:space-between;font-size:12px;color:var(--bx-mut)}
.hf-dist b{color:#2563EB}
.hf-quick{display:flex;flex-direction:column;gap:2px;padding:6px 0 10px;border-bottom:1px solid var(--bx-line);margin-bottom:8px}
.hf-quick label{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:9px 2px;font-size:14px;cursor:pointer}
.hf-quick label span{display:flex;align-items:center;gap:10px}.hf-quick .bx-i{width:18px;height:18px;color:var(--bx-mut)}
.hf-quick i{width:40px;height:22px;border-radius:999px;background:#CBD5E1;position:relative;transition:background .15s;flex:none}
.hf-quick i::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff;transition:transform .15s;box-shadow:0 1px 2px rgba(0,0,0,.2)}
.hf-quick label[aria-checked=true] i{background:#16A34A}.hf-quick label[aria-checked=true] i::after{transform:translateX(18px)}
.hf-quick label[aria-disabled=true]{opacity:.45;cursor:default}
.hf-on .bx-g h3 button{font-weight:800}

/* ---------- cards ---------- */
.hf-on .bx-list{gap:14px}
.hf-on .bx-card{border-radius:18px;grid-template-columns:240px minmax(0,1fr) 236px;min-height:0;box-shadow:0 1px 2px rgba(15,23,42,.04)}
.hf-on .bx-card:hover{box-shadow:0 10px 30px rgba(15,23,42,.08)}
.hf-on .bx-vis{margin:12px 0 12px 12px;border-radius:14px;overflow:hidden;min-height:216px;align-self:stretch}
.hf-on .bx-badge{left:10px;top:10px;border-radius:999px;background:#16A34A;color:#fff;padding:6px 10px;font-size:12px}
.hf-on .bx-badge .bx-i{display:none}
.hf-on .bx-save{right:10px;top:10px;border-radius:999px;background:rgba(255,255,255,.94);color:#0B1226}
.hf-on .bx-body{padding:18px 20px 16px}
.hf-on .bx-body h3{font:800 22px/1.15 var(--display,Fraunces,Georgia,serif);letter-spacing:-.02em;margin:2px 0 4px}
.hf-on .bx-sub{color:#1D4ED8;font-weight:600;margin:0 0 6px}
.hf-on .bx-loc{display:flex;gap:6px;align-items:center;flex-wrap:wrap;order:2;font-size:13.5px}
.hf-on .bx-dist{order:2;margin:0 0 8px}
.hf-on .bx-body{display:flex;flex-direction:column}
.hf-on .bx-body>h3{order:1}.hf-on .bx-body>.bx-sub{order:1}
.hf-tags{order:3;display:flex;gap:6px;flex-wrap:wrap;margin:4px 0 10px}
.hf-tags span{display:inline-flex;align-items:center;gap:5px;padding:5px 10px;border-radius:999px;background:var(--bx-sunk);color:var(--bx-ink);font-size:12.5px;font-weight:600}
.hf-tags span.ok{background:#DCFCE7;color:#166534}
.hf-tags span.tele{background:#DBEAFE;color:#1E40AF}
.hf-svc{order:4;margin:0 0 8px}
.hf-svc b{display:block;font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--bx-mut);margin:0 0 5px}
.hf-svc div{display:flex;gap:6px;flex-wrap:wrap}
.hf-svc div span,.hf-svc div button{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:999px;border:1px solid var(--bx-line);background:var(--bx-card);font:500 12.5px/1 inherit;color:var(--bx-ink)}
.hf-svc div span::before{content:"";width:6px;height:6px;border-radius:50%;background:#2563EB;flex:none}
.hf-svc div button{cursor:pointer;color:#1D4ED8;font-weight:700;border-style:dashed}
.hf-svc div span.hf-hid{display:none}.hf-svc.open div span.hf-hid{display:inline-flex}.hf-svc.open div button{display:none}
.hf-keep{order:5;list-style:none;margin:2px 0 0;padding:0;display:grid;gap:6px;font-size:13.5px;color:var(--bx-mut)}
.hf-keep li{display:flex;gap:8px;align-items:flex-start}.hf-keep .bx-i{width:16px;height:16px;margin-top:2px;flex:none}
.hf-on .bx-source-note{order:9;margin:10px 0 0;font-size:12.5px}
.hf-on .bx-source-note small{display:none!important}
.hf-on .bx-plus,.hf-on .bx-feats,.hf-on .bx-checked{display:none}
.hf-on .bx-aside{padding:14px 14px 14px 0;justify-content:flex-start;gap:10px}
.hf-next{display:grid;grid-template-columns:1fr auto;align-items:center;gap:2px 10px;padding:12px 14px;border:1px solid var(--bx-line);border-radius:14px;background:var(--bx-sunk);text-decoration:none;color:inherit}
.hf-next span{font-size:12px;color:var(--bx-mut);grid-column:1}
.hf-next b{font-size:14.5px;grid-column:1}
.hf-next i{grid-row:1/3;grid-column:2;font-style:normal;font-weight:800;color:#2563EB}
.hf-next:hover{border-color:#2563EB}
.hf-on .bx-act{display:flex;flex-direction:column;gap:8px}
.hf-on .bx-addr{font-size:12.5px;color:var(--bx-mut);margin:0 0 2px}
.hf-on .bx-primary{border-radius:12px;min-height:46px;background:#0B1226;color:#fff;font-weight:800;justify-content:center}
.hf-on .bx-primary:hover{background:#1E293B}
.hf-on .bx-secondary{border-radius:12px;min-height:44px;justify-content:center;border:1px solid var(--bx-line)}
.hf-telepill{display:flex;align-items:center;justify-content:center;gap:8px;min-height:40px;border-radius:12px;background:#DCFCE7;color:#166534;font-weight:700;font-size:13.5px}
.hf-telepill::before{content:"";width:16px;height:12px;border-radius:3px;border:2px solid currentColor;box-sizing:border-box}
.hf-on .bx-tert{font-size:13px}
.hf-refer{font-size:13px;font-weight:700;color:#1D4ED8;text-decoration:none}.hf-refer:hover{text-decoration:underline}
.hf-on .bx-empty{border-radius:18px}

@media (max-width:1100px){.hf-on .bx-card{grid-template-columns:200px minmax(0,1fr)}.hf-on .bx-aside{grid-column:2;padding:0 20px 16px;flex-direction:row;flex-wrap:wrap;align-items:center}.hf-next{flex:1 1 220px}.hf-on .bx-act{flex-direction:row;flex-wrap:wrap;align-items:center}}
@media (max-width:900px){
  .hf-hero{grid-template-columns:1fr;gap:12px;padding:16px 14px;border-radius:18px}
  .hf-hero h1{font-size:24px;margin:0 0 4px}.hf-hero p{font-size:13.5px;max-width:none}
  .hf-next{flex:none}
  .hf-on .bx-search{grid-template-columns:1fr;grid-template-areas:"types" "what" "go" "ex" "loc" "opts"}
  .hf-on .bx-search>.compact-location{justify-self:stretch}.hf-opts{justify-self:start}
  .hf-on .bx-go{min-height:50px}
  .hf-ex{overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none;margin:0 -16px;padding:0 16px}.hf-ex::-webkit-scrollbar{display:none}.hf-ex button{flex:none}
  .hf-filters{display:none}
  .hf-on .bx-card{grid-template-columns:1fr}
  .hf-on .bx-vis{margin:0;border-radius:18px 18px 0 0;min-height:160px}
  .hf-on .bx-aside{grid-column:auto;padding:0 16px 16px;flex-direction:column;align-items:stretch}
  .hf-on .bx-act{flex-direction:column}
}

/* dark */
html[data-theme=dark] .hf-hero{background:linear-gradient(100deg,#0F172A 0%,#111B33 60%,#0B1F2A 100%);border-color:#1E2A44}
html[data-theme=dark] .hf-hero h1{color:#F1F5F9}html[data-theme=dark] .hf-hero p{color:#94A3B8}
html[data-theme=dark] .hf-ex button,html[data-theme=dark] .hf-tele,html[data-theme=dark] .hf-r,html[data-theme=dark] .hf-on .bx-search>.compact-location,html[data-theme=dark] .hf-on .bx-what{background:#121A2C;border-color:#273149;color:#F1F5F9}
html[data-theme=dark] .hf-on .bx-search>.compact-location .compact-change-label{background:#1E3A8A;color:#BFDBFE}
html[data-theme=dark] .hf-r span{color:#94A3B8}
html[data-theme=dark] .hf-tags span{background:#1E2A44;color:#E2E8F0}
html[data-theme=dark] .hf-tags span.ok{background:#14532D;color:#BBF7D0}html[data-theme=dark] .hf-tags span.tele{background:#1E3A8A;color:#BFDBFE}
html[data-theme=dark] .hf-telepill{background:#14532D;color:#BBF7D0}
html[data-theme=dark] .hf-on .bx-primary{background:#2563EB}
html[data-theme=dark] .hf-on .bx-sub,html[data-theme=dark] .hf-refer,html[data-theme=dark] .hf-svc div button{color:#93C5FD}
@media (prefers-color-scheme:dark){
  html:not([data-theme=light]) .hf-hero{background:linear-gradient(100deg,#0F172A 0%,#111B33 60%,#0B1F2A 100%);border-color:#1E2A44}
  html:not([data-theme=light]) .hf-hero h1{color:#F1F5F9}html:not([data-theme=light]) .hf-hero p{color:#94A3B8}
  html:not([data-theme=light]) .hf-ex button,html:not([data-theme=light]) .hf-tele,html:not([data-theme=light]) .hf-r,html:not([data-theme=light]) .hf-on .bx-search>.compact-location,html:not([data-theme=light]) .hf-on .bx-what{background:#121A2C;border-color:#273149;color:#F1F5F9}
  html:not([data-theme=light]) .hf-tags span{background:#1E2A44;color:#E2E8F0}
  html:not([data-theme=light]) .hf-on .bx-primary{background:#2563EB}
}
/* 27 Oct: tertiary actions were unstyled native buttons */
.hf-on .bx-act button.bx-tert,.hf-on .bx-act a.bx-tert{appearance:none;-webkit-appearance:none;border:0;background:none;color:#1D4ED8;font:600 13px/1.2 inherit;cursor:pointer;padding:6px 4px;text-decoration:none;text-align:center}.hf-on .bx-act button.bx-tert:hover,.hf-on .bx-act a.bx-tert:hover{text-decoration:underline}html[data-theme=dark] .hf-on .bx-act button.bx-tert,html[data-theme=dark] .hf-on .bx-act a.bx-tert{color:#93C5FD}
.hf-types{grid-area:types;display:flex;flex-wrap:wrap;gap:8px;grid-column:1/-1;margin-bottom:12px}.hf-types button{font:inherit;font-weight:600;min-height:44px;padding:10px 16px;border:1px solid #cad7ee;border-radius:12px;background:var(--surface,#fff);color:var(--text,#172b4d);cursor:pointer}.hf-types button[aria-pressed=true]{background:#1d4ed8;color:white;border-color:#1d4ed8}.hf-types button:focus-visible{outline:3px solid #60a5fa;outline-offset:3px}.hf-types button:disabled{opacity:.5;cursor:default}
.bx-record-label{font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#1d4ed8;margin:0 0 8px}[data-theme=dark] .bx-record-label{color:#93c5fd}
