:root{
  --paper:#F4F5F2; --surface:#FFFFFF; --ink:#1D2B2E; --muted:#5E6E70; --line:#D5DAD5;
  --harbor:#0E6B7D; --harbor-dark:#0A5260; --sand:#C9A35B; --good:#2E7D4F; --bad:#B3452B;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.5 "Figtree",system-ui,-apple-system,"Segoe UI",sans-serif}
a{color:var(--harbor)} a:hover{color:var(--harbor-dark)}
:focus-visible{outline:3px solid var(--sand);outline-offset:2px}
h1{font-size:1.75rem;line-height:1.2;margin:0 0 .25rem;font-weight:700;letter-spacing:-.01em}
h2{font-size:1.15rem;margin:2rem 0 .75rem;font-weight:600}
p{margin:.25rem 0 1rem}
code{background:#E8ECE8;padding:.1em .35em;border-radius:3px;font-size:.9em}

.top{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;padding:.75rem 1.5rem;background:var(--ink);color:#fff}
.top a{color:#fff;text-decoration:none}
.top .brand{font-weight:700}
.top nav{display:flex;gap:1.25rem;flex-wrap:wrap}
.top nav a{opacity:.85} .top nav a:hover{opacity:1;text-decoration:underline}

main{max-width:1100px;margin:0 auto;padding:1.5rem 1.5rem 4rem}
.wrap{max-width:1100px;margin:1rem auto 0}
main.narrow{max-width:480px}
main.auth{max-width:400px;margin-top:8vh}

.flash{padding:.7rem 1rem;border-left:4px solid var(--good);background:#E4F0E8;margin:0 0 1rem}
.flash.err{border-color:var(--bad);background:#F6E4DE}

form label{display:block;font-weight:500;margin:0 0 1rem}
input,select,textarea{display:block;width:100%;margin-top:.3rem;padding:.6rem .7rem;font:inherit;color:inherit;background:#fff;border:1px solid #AEB7B1;border-radius:4px}
textarea{min-height:9rem;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.9rem}
.btn{display:inline-block;padding:.6rem 1.1rem;font:inherit;font-weight:600;color:#fff;background:var(--harbor);border:0;border-radius:4px;cursor:pointer;text-decoration:none}
.btn:hover{background:var(--harbor-dark);color:#fff}
.btn.ghost{background:transparent;color:var(--harbor);border:1px solid var(--harbor)}
.btn.small{padding:.3rem .65rem;font-size:.9rem}

.head{display:flex;justify-content:space-between;align-items:flex-end;gap:1rem;flex-wrap:wrap;margin-bottom:1.25rem}
.head .sub{color:var(--muted);margin:0}
.controls{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}
.controls select{width:auto;margin:0;padding:.4rem .6rem}

/* headline numbers: one ruled strip, not a grid of cards */
.strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));background:var(--surface);border-top:3px solid var(--harbor);border-bottom:1px solid var(--line)}
.strip>div{padding:1rem 1.1rem;border-right:1px solid var(--line)}
.strip>div:last-child{border-right:0}
.strip .n{font-size:2rem;font-weight:700;line-height:1.1;font-variant-numeric:tabular-nums}
.strip .l{color:var(--muted);font-size:.9rem}

.chart{background:var(--surface);border:1px solid var(--line);padding:1rem;margin-top:1.5rem}
.chart canvas{max-height:320px}

.tablewrap{overflow-x:auto;background:var(--surface);border:1px solid var(--line)}
table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
th,td{padding:.6rem .8rem;text-align:right;border-bottom:1px solid var(--line);white-space:nowrap}
th:first-child,td:first-child,th.l,td.l{text-align:left}
td.name{white-space:normal;min-width:16rem;text-align:left}
thead th{font-weight:600;font-size:.9rem;color:var(--muted);background:#FAFBF9;position:sticky;top:0}
tbody tr:hover{background:#F7F9F6}
.muted{color:var(--muted)} .empty{padding:2rem;text-align:center;color:var(--muted)}
.tabs{display:flex;gap:1.25rem;border-bottom:1px solid var(--line);margin:1rem 0 1.5rem}
.tabs a{padding:.5rem 0;text-decoration:none;color:var(--muted);border-bottom:3px solid transparent}
.tabs a.on{color:var(--ink);border-color:var(--harbor);font-weight:600}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:2rem}
@media (max-width:760px){.grid2{grid-template-columns:1fr} main{padding:1rem 1rem 3rem} .top{padding:.75rem 1rem}}
.inline{display:inline}
.inline select{display:inline-block;width:auto;margin:0}
@media (prefers-reduced-motion:no-preference){.strip .n{transition:color .2s}}