/* California Cardiology Practice Tracker — InVision dark clinical UI.
   Tokens match the InVision Business Tracker and the amyloid CRM; do not
   introduce hues outside the brand set. */
:root{
  --bg:#0a0e14; --bg-2:#0e131c; --surface:#141b26; --surface-2:#1b2431; --surface-3:#222d3d;
  --border:#263143; --border-2:#324157;
  --text:#e6edf6; --text-2:#a9b6c8; --text-3:#6c7d93;
  --primary:#2dc1b3; --primary-2:#14b8a6; --primary-dim:#0f766e; --accent:#38bdf8;
  --warn:#f59e0b; --danger:#f43f5e; --ok:#34d399; --violet:#a78bfa;
  --radius:11px; --shadow-sm:0 1px 2px rgba(0,0,0,.4); --shadow:0 8px 30px rgba(0,0,0,.5);
  --mono:ui-monospace,"SF Mono","JetBrains Mono",Menlo,Consolas,monospace;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{overflow-x:hidden}
body{margin:0;background:radial-gradient(1200px 700px at 82% -10%,#101826 0%,var(--bg) 60%) var(--bg);
  color:var(--text);font-family:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:13px;line-height:1.45;-webkit-font-smoothing:antialiased}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--primary);outline-offset:2px;border-radius:4px}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.num{font-variant-numeric:tabular-nums}

/* ---------- app bar ---------- */
.appbar{display:flex;align-items:center;gap:14px;padding:0 16px;height:54px;
  background:linear-gradient(180deg,#0f1622,#0b111a);border-bottom:1px solid var(--border);
  position:sticky;top:0;z-index:30}
.appbar__brand{display:flex;align-items:center;gap:9px;flex:0 0 auto}
.appbar__logo{display:inline-flex;line-height:0}
.appbar__title{font-size:18px;letter-spacing:.01em;white-space:nowrap}
.brand-in{color:var(--primary);font-weight:350}
.brand-vision{color:var(--primary);font-weight:700}
.appbar__sub{color:var(--text-3);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;
  border-left:1px solid var(--border-2);padding-left:10px;white-space:nowrap}
.appbar__spacer{flex:1}
.appbar__meta{color:var(--text-3);font-size:10.5px;letter-spacing:.04em;white-space:nowrap}

/* ---------- tabs ---------- */
.tabs{display:flex;gap:2px;padding:0 12px;background:var(--bg-2);border-bottom:1px solid var(--border);
  overflow-x:auto;position:sticky;top:54px;z-index:29;scrollbar-width:thin}
.tabs::-webkit-scrollbar{height:3px}
.tabs::-webkit-scrollbar-thumb{background:var(--border-2);border-radius:3px}
.tab{background:none;border:0;border-bottom:2px solid transparent;color:var(--text-2);
  padding:11px 13px 9px;cursor:pointer;font:inherit;font-size:12.5px;font-weight:500;white-space:nowrap}
.tab:hover{color:var(--text)}
.tab.is-active{color:var(--primary);border-bottom-color:var(--primary)}
.tab .badge{display:inline-block;margin-left:6px;background:var(--surface-3);color:var(--text-3);
  font-size:9.5px;font-weight:800;border-radius:999px;padding:1px 6px;vertical-align:1px}
.tab.is-active .badge{background:rgba(45,193,179,.18);color:var(--primary)}

/* ---------- layout ---------- */
.wrap{max-width:1580px;margin:0 auto;padding:0 16px 56px}
.view{padding-top:20px}
.view[hidden]{display:none!important}
.vh{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px;margin:0 0 3px}
.vh h1{margin:0;font-size:21px;font-weight:700;letter-spacing:-.01em}
.vh .vh__note{color:var(--text-3);font-size:11.5px}
.vsub{color:var(--text-2);font-size:12.5px;margin:0 0 18px;max-width:96ch}
.sec{margin:26px 0 0}
.sec__h{font-size:10.5px;font-weight:700;color:var(--primary);text-transform:uppercase;
  letter-spacing:.06em;margin:0 0 3px}
.sec__s{color:var(--text-3);font-size:11.5px;margin:0 0 12px}

/* ---------- grids, cards, KPIs ---------- */
.grid{display:grid;gap:12px}
.g-kpi{grid-template-columns:repeat(auto-fit,minmax(152px,1fr))}
.g-2{grid-template-columns:repeat(auto-fit,minmax(330px,1fr))}
.g-3{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  box-shadow:var(--shadow-sm);overflow:hidden}
.card__pad{padding:14px 16px}
.card__top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;
  padding:11px 16px;border-bottom:1px solid var(--border);background:var(--bg-2)}
.card__h{font-size:10.5px;font-weight:700;color:var(--primary);text-transform:uppercase;letter-spacing:.05em}
.card__s{font-size:11px;color:var(--text-3)}
.kpi{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  padding:13px 15px;box-shadow:var(--shadow-sm)}
.kpi>b{display:block;font-size:22px;font-weight:700;color:var(--primary);letter-spacing:-.015em;
  font-variant-numeric:tabular-nums;line-height:1.15}
.kpi>b.is-warn{color:var(--warn)} .kpi>b.is-danger{color:var(--danger)} .kpi>b.is-ok{color:var(--ok)}
.kpi>b.is-mute{color:var(--text-2)}
.kpi>span{display:block;font-size:10px;color:var(--text-3);text-transform:uppercase;
  letter-spacing:.05em;margin-top:6px}
.kpi>em{display:block;font-style:normal;font-size:11px;color:var(--text-2);margin-top:5px}

/* ---------- chips ---------- */
.chip{display:inline-flex;align-items:center;gap:4px;font-size:9.5px;font-weight:700;
  border-radius:999px;padding:2px 8px;white-space:nowrap;letter-spacing:.03em}
.chip--ok{background:rgba(52,211,153,.14);color:#6ee7b7}
.chip--warn{background:rgba(245,158,11,.15);color:#fbbf24}
.chip--danger{background:rgba(244,63,94,.15);color:#fb7185}
.chip--info{background:rgba(45,193,179,.14);color:var(--primary)}
.chip--accent{background:rgba(56,189,248,.14);color:#7dd3fc}
.chip--violet{background:rgba(167,139,250,.16);color:#c4b5fd}
.chip--mute{background:rgba(108,125,147,.16);color:var(--text-3)}
.chip--out{background:transparent;border:1px dashed var(--border-2);color:var(--text-3);font-weight:600}
.tag{display:inline-block;font-size:9px;font-weight:700;border-radius:5px;padding:1px 6px;
  margin:1px 3px 1px 0;white-space:nowrap;background:var(--surface-3);color:var(--text-2)}
.tag--gen{background:rgba(45,193,179,.14);color:var(--primary)}
.tag--int{background:rgba(244,63,94,.14);color:#fb7185}
.tag--ep{background:rgba(167,139,250,.16);color:#c4b5fd}
.tag--hf{background:rgba(245,158,11,.16);color:#fbbf24}
.tag--peds{background:rgba(56,189,248,.14);color:#7dd3fc}
.tag--nuc{background:rgba(52,211,153,.14);color:#6ee7b7}
.tag--achd{background:rgba(148,163,184,.16);color:#cbd5e1}

/* ---------- confidence markers ----------
   Every researched field carries one. They are the difference between a fact
   and a guess, so they are never decorative. */
.cf{display:inline-block;font-size:9px;font-weight:800;border-radius:4px;padding:0 5px;
  margin-left:5px;vertical-align:1px;letter-spacing:.04em;white-space:nowrap;cursor:help}
.cf--verified{background:rgba(52,211,153,.16);color:#6ee7b7}
.cf--detected{background:rgba(45,193,179,.16);color:var(--primary)}
.cf--reported{background:rgba(56,189,248,.14);color:#7dd3fc}
.cf--inferred{background:rgba(245,158,11,.18);color:#fbbf24;border:1px dashed rgba(245,158,11,.55)}
.cf--unknown{background:transparent;color:var(--text-3);border:1px dashed var(--border-2)}

/* ---------- controls ---------- */
.controls{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 12px}
.controls input[type=search]{flex:1;min-width:190px;background:var(--surface-2);
  border:1px solid var(--border-2);color:var(--text);border-radius:8px;padding:8px 12px;
  font:inherit;font-size:12.5px}
.controls select{background:var(--surface-2);border:1px solid var(--border-2);color:var(--text-2);
  border-radius:8px;padding:8px 10px;font:inherit;font-size:12px;cursor:pointer}
.seg{display:inline-flex;background:var(--surface-2);border:1px solid var(--border-2);
  border-radius:8px;overflow:hidden;flex-wrap:wrap}
.seg button{background:none;border:0;color:var(--text-3);font:inherit;font-size:11.5px;
  font-weight:600;padding:7px 11px;cursor:pointer;white-space:nowrap}
.seg button:hover{color:var(--text)}
.seg button.is-on{background:var(--primary-dim);color:#eafffb}
.count{color:var(--text-3);font-size:11.5px;margin-left:auto;white-space:nowrap}

/* ---------- tables ---------- */
.scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.scroll--tall{max-height:76vh;overflow-y:auto}
table{border-collapse:collapse;width:100%;font-size:12.5px}
thead th{position:sticky;top:0;z-index:2;background:var(--surface-2);font-size:9.5px;
  letter-spacing:.05em;text-transform:uppercase;color:var(--text-3);font-weight:700;
  text-align:left;padding:8px 12px;border-bottom:1px solid var(--border);white-space:nowrap}
thead th[data-sort]{cursor:pointer;user-select:none}
thead th[data-sort]:hover{color:var(--text)}
.sortar{color:var(--primary);font-size:9px;vertical-align:1px}
th.r,td.r{text-align:right}
td{padding:8px 12px;border-top:1px solid var(--border);vertical-align:top}
tbody tr{cursor:pointer}
tbody tr:hover{background:var(--surface-2)}
td .t1{font-weight:600;color:var(--text)}
td .t2{color:var(--text-2);font-size:11.5px}
td .t3{color:var(--text-3);font-size:10.5px}
td.wrap-cell{white-space:normal;overflow-wrap:anywhere}
.nm{font-weight:600;color:var(--text)}
.addr{color:var(--text-2);font-size:11.5px;line-height:1.35;min-width:150px}
.web{color:var(--accent);font-size:11.5px;word-break:break-all;max-width:190px}
.mailto{color:var(--accent);font-size:11.5px;word-break:break-all;max-width:190px}
.dash{color:var(--text-3)}

/* ---------- size bar ---------- */
.sz{display:flex;align-items:center;gap:7px;min-width:74px}
.sz b{font-size:13px;font-weight:700;color:var(--text);font-variant-numeric:tabular-nums;min-width:18px;text-align:right}
.szbar{flex:1;height:5px;background:var(--surface-3);border-radius:3px;overflow:hidden;min-width:26px}
.szbar i{display:block;height:100%;background:linear-gradient(90deg,var(--primary-dim),var(--primary));border-radius:3px}

/* ---------- drawer ---------- */
.scrim{position:fixed;inset:0;background:rgba(3,7,12,.62);backdrop-filter:blur(2px);z-index:40}
.drawer{position:fixed;top:0;right:0;height:100%;width:min(560px,100%);background:var(--bg-2);
  border-left:1px solid var(--border);box-shadow:var(--shadow);z-index:41;display:flex;flex-direction:column}
.drawer__top{display:flex;align-items:flex-start;gap:10px;padding:16px 18px;border-bottom:1px solid var(--border)}
.drawer__top h2{margin:0;font-size:16px;font-weight:650;line-height:1.3}
.drawer__top .t3{margin-top:3px}
.drawer__body{padding:16px 18px 28px;overflow-y:auto;flex:1}
.drawer__x{margin-left:auto;background:none;border:0;color:var(--text-3);font-size:22px;
  line-height:1;cursor:pointer;padding:0 2px}
.drawer__x:hover{color:var(--text)}
.dsec{font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:var(--primary);
  font-weight:700;margin:20px 0 8px;border-top:1px solid var(--border);padding-top:13px}
.dsec:first-child{border-top:0;margin-top:0;padding-top:0}
.kv{display:grid;grid-template-columns:124px 1fr;gap:5px 12px;font-size:12.5px}
.kv dt{color:var(--text-3);font-size:10.5px;text-transform:uppercase;letter-spacing:.04em;padding-top:2px}
.kv dd{margin:0;color:var(--text);overflow-wrap:anywhere}
.roster{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:0}
.roster li{padding:8px 0;border-top:1px solid var(--border);display:flex;flex-wrap:wrap;
  gap:4px 8px;align-items:baseline}
.roster li:first-child{border-top:0}
.roster .rn{font-weight:600;color:var(--text);font-size:12.5px}
.roster .rc{color:var(--text-3);font-size:10.5px}
.roster .rnpi{color:var(--text-3);font-family:var(--mono);font-size:10px;margin-left:auto}

/* ---------- callouts & misc ---------- */
.callout{display:flex;gap:11px;align-items:flex-start;border-radius:0 8px 8px 0;padding:11px 14px;
  background:rgba(217,138,43,.10);border:1px solid rgba(217,138,43,.32);border-left:4px solid #d98a2b}
.callout b{color:#f0c48a}
.callout__body{color:var(--text-2);font-size:12px}
.callout--info{background:rgba(45,193,179,.08);border-color:rgba(45,193,179,.28);border-left-color:var(--primary)}
.callout--info b{color:var(--primary)}
.empty{color:var(--text-3);font-size:12px;padding:16px}
.foot{margin-top:34px;border-top:1px solid var(--border);padding:16px 0 0;
  color:var(--text-3);font-size:10.5px;line-height:1.6}
.foot b{color:var(--text-2)}
.brand-splash{display:flex;flex-direction:column;align-items:center;gap:10px;padding:60px 20px;text-align:center}
.brand-splash__t{font-weight:650;color:var(--text-2)}
@keyframes brandpulse{0%,100%{opacity:.55}50%{opacity:1}}
.brand-splash--load .appbar__logo{animation:brandpulse 1.6s ease-in-out infinite}

/* ---------- bars (distribution charts, no library) ---------- */
.bars{display:flex;flex-direction:column;gap:7px}
.bar{display:grid;grid-template-columns:minmax(96px,168px) 1fr 46px;gap:10px;align-items:center;font-size:11.5px}
.bar__l{color:var(--text-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bar__t{height:16px;background:var(--surface-3);border-radius:4px;overflow:hidden}
.bar__f{height:100%;background:var(--primary-dim);border-radius:4px}
.bar__f.is-accent{background:#1f6f92}
.bar__f.is-warn{background:#8a5a12}
.bar__f.is-mute{background:var(--border-2)}
.bar__n{color:var(--text-2);font-variant-numeric:tabular-nums;text-align:right;font-weight:600}

@media(max-width:860px){
  .kv{grid-template-columns:1fr;gap:1px 0}
  .kv dt{padding-top:8px}
}
@media(max-width:720px){
  .appbar__sub,.appbar__meta{display:none}
  .wrap{padding:0 12px 44px}
  .vh h1{font-size:18px}
  .g-2,.g-3{grid-template-columns:1fr}
  .count{margin-left:0;width:100%}
  .drawer{width:100%}
  .bar{grid-template-columns:minmax(74px,1fr) 1.4fr 38px}
}