:root{
  --blue:#4c78a8; --red:#d6452c; --ink:#1f2733; --muted:#6b7785;
  --line:#e4e8ee; --bg:#f7f8fa; --card:#fff;
}
*{box-sizing:border-box}
body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--ink);background:var(--bg);line-height:1.45}
header{padding:1.4rem 1.6rem .6rem}
h1{margin:0;font-size:1.9rem}
.sub{margin:.35rem 0 0;color:var(--muted);max-width:60rem}
.meta{font-size:.8rem}
main{padding:0 1.6rem 2rem;max-width:80rem}
footer{padding:1rem 1.6rem;color:var(--muted);font-size:.8rem;border-top:1px solid var(--line);
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:.5rem}

.tabs{display:flex;gap:.25rem;padding:0 1.6rem;border-bottom:1px solid var(--line)}
.tab{background:none;border:none;padding:.7rem 1rem;font-size:.95rem;cursor:pointer;color:var(--muted);
  border-bottom:3px solid transparent}
.tab:hover{color:var(--ink)}
.tab.active{color:var(--red);border-bottom-color:var(--red);font-weight:600}

.panel{padding-top:1.2rem}
.hidden{display:none!important}
h2{font-size:1.3rem;margin:.4rem 0 .8rem}
h3{font-size:1.05rem;margin:1.4rem 0 .6rem}
.caption{color:var(--muted);font-size:.85rem;margin:.6rem 0}

.controls{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap;margin:.6rem 0}
.controls label{font-size:.9rem}
select,input[type=number],input[type=date]{padding:.3rem .4rem;border:1px solid var(--line);border-radius:6px;font-size:.9rem}
.mini{padding:.25rem .6rem;border:1px solid var(--line);background:var(--card);border-radius:6px;cursor:pointer}
.mini:hover{border-color:var(--blue)}

.chips{display:flex;gap:.4rem;flex-wrap:wrap;align-items:center}
.chip{display:inline-flex;align-items:center;gap:.35rem;padding:.25rem .55rem;border:1px solid var(--line);
  background:var(--card);border-radius:999px;font-size:.85rem;cursor:pointer;user-select:none}
.chip.on{background:#eef3f9;border-color:var(--blue);color:var(--blue)}
.chip .x{color:var(--muted);font-weight:700}
.chip input[type=date]{border:none;padding:0;font-size:.85rem;background:none}

.loading{padding:2rem 0;color:var(--muted)}

/* bar chart */
.barchart{display:flex;align-items:flex-end;gap:2px;height:300px;border-bottom:1px solid var(--line);
  padding-top:.5rem;overflow-x:auto}
.bar{flex:1 0 10px;min-width:6px;background:var(--blue);position:relative;border-radius:2px 2px 0 0;transition:opacity .1s}
.bar.notable{background:var(--red)}
.bar:hover{opacity:.75}
.bar .tip{display:none;position:absolute;bottom:100%;left:50%;transform:translateX(-50%);
  background:var(--ink);color:#fff;padding:.4rem .55rem;border-radius:6px;font-size:.75rem;white-space:nowrap;z-index:5;margin-bottom:4px}
.bar:hover .tip{display:block}
.bar .lbl{position:absolute;top:100%;left:50%;transform:translateX(-50%) rotate(0);font-size:.6rem;color:var(--muted);margin-top:2px}
.barchart.labeled{margin-bottom:1.4rem}

/* tables */
table{border-collapse:collapse;width:100%;font-size:.88rem;background:var(--card);
  border:1px solid var(--line);border-radius:8px;overflow:hidden}
th,td{padding:.5rem .65rem;text-align:left;border-bottom:1px solid var(--line)}
th{background:#fafbfc;font-weight:600;color:var(--muted);position:sticky;top:0}
tr:last-child td{border-bottom:none}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
.tablewrap{max-height:520px;overflow:auto;border-radius:8px}
.tag{font-size:.72rem;padding:.1rem .4rem;border-radius:999px}
.tag.open{background:#e7f3ec;color:#1c7a43}
.tag.hold{background:#fdeee9;color:#b8431f}

.metrics{display:flex;gap:1.2rem;flex-wrap:wrap;margin:.8rem 0}
.metric{background:var(--card);border:1px solid var(--line);border-radius:8px;padding:.6rem .9rem;min-width:9rem}
.metric .k{font-size:.72rem;color:var(--muted);text-transform:uppercase;letter-spacing:.03em}
.metric .v{font-size:1.25rem;font-weight:600}