/* Hippo Ops: dense, calm, desk-width. Hippo's navy and Nunito, tabular numbers everywhere. */
:root{
  color-scheme:light;
  --bg:#F6F7F9; --surface:#FFFFFF; --line:#E6E8EC; --fg:#2A3241; --muted:#6B7482; --faint:#B5BBC6;
  --navy:#2A3241; --navy-ink:#FFFFFF; --hero:#1A7FA8; --err:#B3261E; --warn-bg:#FFF4E0; --warn:#8A5300;
  --ok:#1F7A45;
  /* categorical slots (dataviz reference palette, first three validate all-pairs) */
  --s1:#2a78d6; --s2:#eb6834; --s3:#1baf7a; --s4:#eda100; --s5:#6250d6;
  --grid:#EEF0F3;
  --font:"Nunito", ui-rounded, "SF Pro Rounded", system-ui, -apple-system, sans-serif;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --bg:#141518; --surface:#1C1D21; --line:#2E3036; --fg:#ECEDEF; --muted:#A3A8B3; --faint:#5C616B;
    --navy:#ECEDEF; --navy-ink:#141518; --hero:#5BB6DC; --err:#F28B82; --warn-bg:#3A2E14; --warn:#F3C46B; --ok:#6FD49A;
    --s1:#3987e5; --s2:#d95926; --s3:#199e70; --s4:#c98500; --s5:#9085e9;
    --grid:#26282D;
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#141518; --surface:#1C1D21; --line:#2E3036; --fg:#ECEDEF; --muted:#A3A8B3; --faint:#5C616B;
  --navy:#ECEDEF; --navy-ink:#141518; --hero:#5BB6DC; --err:#F28B82; --warn-bg:#3A2E14; --warn:#F3C46B; --ok:#6FD49A;
  --s1:#3987e5; --s2:#d95926; --s3:#199e70; --s4:#c98500; --s5:#9085e9;
  --grid:#26282D;
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg); color:var(--fg); font-family:var(--font); font-size:14px; line-height:1.4; font-weight:600;
  font-variant-numeric:tabular-nums}
button,input{font:inherit; color:inherit}
[hidden]{display:none !important}
h1,h2,h3{margin:0; font-weight:800}
h1{font-size:22px} h2{font-size:15px} h3{font-size:14px}
.muted{color:var(--muted)} .small{font-size:12px; font-weight:600}
.error{color:var(--err); min-height:0; margin:6px 0}
.error:empty{display:none}
:focus-visible{outline:2px solid var(--hero); outline-offset:2px; border-radius:6px}

button{cursor:pointer; border:1px solid var(--line); background:var(--surface); border-radius:8px; padding:6px 10px; font-weight:700}
button:hover{border-color:var(--faint)}
button.primary{background:var(--navy); color:var(--navy-ink); border-color:var(--navy); padding:10px 14px}
button.ghost{background:transparent}
button.small{padding:3px 8px; font-size:12px}
input{width:100%; padding:10px 12px; border:1px solid var(--line); border-radius:8px; background:var(--surface)}

/* sign in */
.signin{min-height:100vh; display:grid; place-items:center; padding:16px}
.signin-card{width:min(380px,100%); display:flex; flex-direction:column; gap:10px; padding:24px}
.signin-card label{font-size:12px; color:var(--muted)}

/* top bar */
.top{position:sticky; top:0; z-index:5; display:flex; flex-wrap:wrap; align-items:center; gap:10px 16px;
  padding:10px 20px; background:var(--surface); border-bottom:1px solid var(--line)}
.brand{font-size:17px} .brand span{color:var(--muted); font-weight:700}
.tabs,.range{display:flex; gap:4px}
.tabs button,.range button{border-color:transparent; background:transparent; color:var(--muted)}
.tabs button[aria-selected="true"],.range button[aria-pressed="true"]{background:var(--bg); color:var(--fg); border-color:var(--line)}
.who{margin-left:auto; display:flex; align-items:center; gap:6px}
main{max-width:1280px; margin:0 auto; padding:12px 20px 48px}
.range-label{margin:2px 0 12px}

/* cards & grids */
.card{background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:14px 16px; margin-bottom:16px; min-width:0}
.card-head{display:flex; align-items:baseline; justify-content:space-between; gap:8px; margin-bottom:10px}
.grid2{display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:16px}
.grid3{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px}
.section-title{margin:8px 0 10px}
@media (max-width:980px){ .grid2,.grid3{grid-template-columns:minmax(0,1fr)} .who{margin-left:0} }

/* KPIs */
.kpis{display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:12px; margin-bottom:16px}
@media (max-width:1100px){ .kpis{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (max-width:560px){ .kpis{grid-template-columns:repeat(2,minmax(0,1fr))} }
.kpi{background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:12px 14px}
.kpi .label{font-size:12px; color:var(--muted)}
.kpi .value{font-size:24px; font-weight:800; margin:2px 0}
.kpi .sub{font-size:12px; color:var(--muted)}

/* tables */
.tbl{width:100%; border-collapse:collapse}
.tbl th,.tbl td{padding:7px 6px; border-bottom:1px solid var(--line); text-align:left; white-space:nowrap}
.tbl th{font-size:12px; color:var(--muted); font-weight:700}
.tbl td.n,.tbl th.n{text-align:right}
.tbl tr:last-child td{border-bottom:0}
.tbl tfoot td{font-weight:800; border-top:2px solid var(--line)}
.tbl.users tbody tr{cursor:pointer}
.tbl.users tbody tr:hover,.tbl.users tbody tr:focus-visible{background:var(--bg)}
.tbl th button.sort{border:0; background:none; padding:0; color:inherit; font-weight:700}
.scroll{overflow-x:auto}
.swatch{display:inline-block; width:10px; height:10px; border-radius:3px; margin-right:6px; vertical-align:-1px}
.tag{display:inline-block; font-size:11px; padding:1px 6px; border-radius:6px; background:var(--bg); color:var(--muted); border:1px solid var(--line)}
.tag.warn{background:var(--warn-bg); color:var(--warn); border-color:transparent}
.delta.over{color:var(--err)} .delta.under{color:var(--ok)}
details.parts{margin-top:10px} details.parts summary{cursor:pointer; color:var(--muted); font-size:12px}

/* charts */
.chart{position:relative; width:100%}
.chart svg{display:block; width:100%; height:auto; overflow:visible}
.chart .axis text{fill:var(--muted); font-size:11px}
.chart .gridline{stroke:var(--grid)}
.chart .baseline{stroke:var(--line)}
.legend{display:flex; flex-wrap:wrap; gap:12px; font-size:12px; color:var(--muted); margin-top:6px}
.tip{position:fixed; z-index:20; pointer-events:none; background:var(--surface); border:1px solid var(--line); border-radius:8px;
  padding:8px 10px; font-size:12px; box-shadow:0 6px 20px rgba(0,0,0,.12); min-width:150px}
.tip b{display:block; margin-bottom:4px}
.tip .row{display:flex; justify-content:space-between; gap:12px}

/* providers */
.prov .big{font-size:22px; font-weight:800}
.prov dl{display:grid; grid-template-columns:auto 1fr; gap:4px 12px; margin:8px 0 0}
.prov dt{color:var(--muted)} .prov dd{margin:0; text-align:right}
.meter{height:8px; border-radius:6px; background:var(--bg); border:1px solid var(--line); overflow:hidden; margin:8px 0 4px}
.meter > i{display:block; height:100%; background:var(--s2); border-radius:6px 0 0 6px}
.prov .note{font-size:12px; color:var(--muted); margin-top:8px}
.prov.off{border-style:dashed}
code{font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:12px; background:var(--bg); padding:1px 5px; border-radius:5px}

/* user detail */
.back{margin-bottom:10px}
.detail-head{display:flex; flex-wrap:wrap; gap:8px 24px; align-items:baseline}
.facts{display:flex; flex-wrap:wrap; gap:6px 20px; margin-top:6px; color:var(--muted); font-size:13px}
.facts b{color:var(--fg)}
.log td.k{font-weight:800}
.loadmore{margin-top:10px}
.empty{color:var(--muted); padding:12px 0}