/* WARDOGS theme, layered on Pico CSS v2 (amber build).
   Load order: pico.amber.min.css → theme.css → page <style>.
   Pico owns typography, forms, tables, buttons and cards. This file sets the brand tokens
   (fonts, square corners, near-black palette) and the handful of components Pico doesn't ship. */

:root{
  --pico-font-family-sans-serif:'Rajdhani',system-ui,sans-serif;
  --pico-font-family-monospace:'JetBrains Mono',ui-monospace,monospace;
  --pico-font-family:var(--pico-font-family-sans-serif);
  --pico-font-weight:500;
  --pico-border-radius:0;
  --pico-form-element-spacing-vertical:.55rem;
  --pico-form-element-spacing-horizontal:.8rem;

  /* brand + status colours (Pico only has primary/secondary/contrast) */
  --amber:#d7a24a; --green:#7bb661; --red:#cf5b43; --blue:#8ab4f8; --faint:#5f5f63;
  --tint:rgba(215,162,74,.08); --tint2:rgba(215,162,74,.15);
  /* short aliases, used by inline styles in page scripts and by dropdown.js */
  --sans:var(--pico-font-family-sans-serif); --mono:var(--pico-font-family-monospace);
  --line:rgba(255,255,255,.08); --line2:rgba(255,255,255,.16);
}
:root[data-theme="dark"]{
  --pico-background-color:#0a0a0b;
  --pico-color:#e6e6e6;
  --pico-muted-color:#9a9a9d;
  --pico-muted-border-color:rgba(255,255,255,.08);
  --pico-card-background-color:#121213;
  --pico-card-sectioning-background-color:#171718;
  --pico-card-box-shadow:none;
  --pico-form-element-background-color:#0e0e0f;
  --pico-form-element-border-color:rgba(255,255,255,.16);
  --pico-table-border-color:rgba(255,255,255,.07);
  --pico-dropdown-background-color:#101013;
  --pico-dropdown-border-color:rgba(255,255,255,.16);
  --pico-dropdown-hover-background-color:rgba(215,162,74,.15);
  --pico-primary:#d7a24a; --pico-primary-background:#d7a24a; --pico-primary-border:#d7a24a;
  --pico-primary-underline:rgba(215,162,74,.5);
  --pico-primary-hover:#e5b566; --pico-primary-hover-background:#e5b566; --pico-primary-hover-border:#e5b566;
  --pico-primary-focus:rgba(215,162,74,.35);
  --pico-primary-inverse:#0a0a0b;
  --fg:var(--pico-color); --dim:var(--pico-muted-color);
}

body{min-height:100vh;background:radial-gradient(1200px 600px at 70% -10%,rgba(215,162,74,.05),transparent 60%) fixed;}
[hidden]{display:none !important;}

/* ---------- header + tab bar ---------- */
.site-head{padding-bottom:0;}
.head-row{display:flex;justify-content:space-between;align-items:center;gap:1rem 2rem;flex-wrap:wrap;}
.brand{display:flex;align-items:center;gap:.9rem;}
.emblem{width:1.5rem;height:1.5rem;margin:.35rem;border:2px solid var(--pico-primary);transform:rotate(45deg);position:relative;flex:none;}
.emblem::after{content:"";position:absolute;inset:.28rem;border:1px solid rgba(215,162,74,.5);}
.brand hgroup{margin:0;}
.brand h1{margin:0;font-size:1.2rem;letter-spacing:.2em;text-transform:uppercase;}
.brand h1 span{color:var(--pico-primary);}
.brand hgroup>.sub,.sub{margin:0;font-family:var(--mono);font-size:.66rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--faint);}

nav.tabs{justify-content:flex-start;gap:.15rem;margin-top:1rem;border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none;}
nav.tabs a{flex:none;display:inline-flex;align-items:center;gap:.4rem;margin:0 0 -1px;padding:.75rem 1rem;font:600 .72rem var(--mono);letter-spacing:.14em;text-transform:uppercase;text-decoration:none;color:var(--pico-muted-color);border-bottom:2px solid transparent;}
nav.tabs a:hover{color:var(--pico-color);border-bottom-color:var(--line2);}
nav.tabs a.active,nav.tabs a[aria-current="page"]{color:var(--pico-primary);border-bottom-color:var(--pico-primary);background:var(--tint);}

/* ---------- text helpers ---------- */
.label{font-family:var(--mono);font-size:.66rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--pico-muted-color);}
.mono{font-family:var(--mono);}
.muted{color:var(--pico-muted-color);} .faint{color:var(--faint);}
.o{color:var(--amber);} .c{color:var(--green);} .stale{color:var(--red);}
.sec{display:flex;align-items:center;gap:.6rem;margin:2rem 0 .75rem;font:600 .7rem var(--mono);letter-spacing:.24em;text-transform:uppercase;color:var(--faint);}
.sec::before{content:"";width:.9rem;height:1px;background:var(--pico-primary);}
.sec b{color:var(--pico-primary);}

/* ---------- stat tiles ---------- */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(9.5rem,1fr));gap:.75rem;}
article.tile{margin:0;padding:.8rem 1rem;border-left:2px solid var(--pico-primary);}
.tile b{display:block;font:700 clamp(1.05rem,1.8vw,1.45rem)/1.15 var(--mono);white-space:nowrap;}
.tile .k{display:block;margin-top:.3rem;font:600 .64rem var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--pico-muted-color);}
.tile .m{display:block;margin-top:.2rem;font:400 .66rem var(--mono);color:var(--faint);}
.tile.g{border-left-color:var(--green);} .tile.b{border-left-color:var(--blue);}
.tile.live b{color:var(--green);}
.tile.clickable{cursor:pointer;}
.tile.clickable:hover .k{color:var(--pico-primary);}

/* ---------- cards ---------- */
.site-main article>header{display:flex;justify-content:space-between;align-items:baseline;gap:.4rem 1rem;flex-wrap:wrap;}
.card-t{font:700 .76rem var(--mono);letter-spacing:.14em;text-transform:uppercase;}
.card-d{font-size:.8rem;color:var(--faint);}
article.flush{padding:0;}
article.flush>header,article.flush>footer{margin:0;padding:.8rem 1.1rem;}

/* ---------- filter bars ---------- */
.filters{display:grid;grid-template-columns:repeat(auto-fit,minmax(10rem,1fr));gap:.75rem 1rem;align-items:end;}
.filters label{margin:0;}
.filters .label{display:block;margin-bottom:.3rem;}
.filters input,.filters select{margin:0;}
.site-main input[type=search]{border-radius:0;}

/* ---------- segmented controls + chips ---------- */
.seg{display:inline-flex;margin:0;}
.seg button,.chip{width:auto;margin:0;padding:.4rem .85rem;font:600 .68rem var(--mono);letter-spacing:.1em;text-transform:uppercase;background:transparent;color:var(--pico-muted-color);border:1px solid var(--line2);box-shadow:none;}
.seg button+button{margin-left:-1px;}
.seg button:hover,.chip:hover{background:transparent;color:var(--pico-color);border-color:var(--line2);}
.seg button.on,.chip.on{position:relative;background:var(--tint2);color:var(--pico-primary);border-color:var(--pico-primary);}
/* chips are toggles: "+" when off, "✓ … ✕" when on so it's clear a second click clears them */
.chip::before{content:"+ ";opacity:.6;}
.chip.on::before{content:"✓ ";opacity:1;}
.chip.on::after{content:"  ✕";opacity:.7;}

/* ---------- notices ---------- */
.notice{display:flex;align-items:center;gap:.8rem;margin:1rem 0 0;padding:.7rem 1rem;line-height:1.5;background:var(--tint);border:1px solid rgba(215,162,74,.3);border-left:2px solid var(--pico-primary);}
.notice b{color:var(--pico-primary);}
.notice .nx{flex:none;width:auto;margin:0 0 0 auto;padding:.1rem .45rem;background:none;border:none;color:var(--pico-muted-color);}
.notice .nx:hover{background:none;color:var(--pico-primary);}

/* ---------- tables ---------- */
/* element rules are scoped to .site-main (our own <main>), not bare <main>: Scalar on /api renders <main> elements of its own */
.site-main table{margin:0;}
.site-main :is(th,td){background-color:transparent;}
.site-main th{font:600 .64rem var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--pico-muted-color);white-space:nowrap;}
th[data-k]{cursor:pointer;user-select:none;}
th[data-k]:hover{color:var(--pico-primary);}
th .arw{color:var(--pico-primary);}
th.num,td.num{text-align:right;font-family:var(--mono);white-space:nowrap;}
tr.clickrow{cursor:pointer;}
tr.clickrow:hover>td,tr.clickrow.open>td{background-color:var(--tint);}
tr.clickrow.open>td:first-child{box-shadow:inset 2px 0 0 var(--pico-primary);}
tr.detail>td{padding:0;background-color:var(--pico-card-sectioning-background-color);}
.empty{padding:2.5rem 1rem;text-align:center;color:var(--faint);font:500 .78rem var(--mono);letter-spacing:.06em;line-height:1.7;}

/* ---------- small status bits ---------- */
.dot{display:inline-block;padding:0;width:.45rem;height:.45rem;border-radius:50%;vertical-align:middle;background:var(--green);box-shadow:0 0 6px var(--green);}
.dot.full{background:var(--red);box-shadow:0 0 6px var(--red);}
.dot.empty{background:var(--faint);box-shadow:none;}
progress.mini{width:4.5rem;height:.3rem;margin:0;}
.site-main .badge{display:inline-block;padding:.05rem .4rem;font:700 .6rem var(--mono);letter-spacing:.12em;text-transform:uppercase;vertical-align:middle;color:var(--pico-primary);border:1px solid var(--pico-primary);}
.tag{display:inline-block;margin:.1rem .25rem .1rem 0;padding:.05rem .35rem;font:500 .6rem var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--pico-muted-color);border:1px solid var(--line2);}
button.copy{width:auto;margin:0 0 0 .4rem;padding:.12rem .5rem;font:600 .62rem var(--mono);letter-spacing:.1em;text-transform:uppercase;background:transparent;color:var(--pico-muted-color);border:1px solid var(--line2);box-shadow:none;}
button.copy:hover{background:transparent;color:var(--pico-primary);border-color:var(--pico-primary);}

/* ---------- charts ---------- */
.legend{display:flex;gap:.9rem;flex-wrap:wrap;margin-top:.6rem;font:500 .75rem var(--mono);color:var(--pico-muted-color);}
.legend b{color:var(--pico-color);}
.lg{display:inline-block;width:.55rem;height:.55rem;margin-right:.35rem;vertical-align:middle;}
.tip{position:fixed;z-index:100;pointer-events:none;padding:.55rem .75rem;white-space:nowrap;font-size:.85rem;background:#101013;border:1px solid var(--line2);border-left:2px solid var(--pico-primary);box-shadow:0 10px 28px rgba(0,0,0,.7);}
.tip .tt{margin-bottom:.4rem;font:600 .62rem var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#d9b988;}
.tip .row{display:flex;align-items:center;gap:.5rem;}
.tip .row+.row{margin-top:.2rem;}
.tip .row b{margin-left:auto;padding-left:1.1rem;font-family:var(--mono);color:#fff;}

/* ---------- footer ---------- */
.foot{margin-top:1.5rem;padding-top:1rem;border-top:1px solid var(--line);font:500 .72rem var(--mono);color:var(--faint);line-height:1.8;}
.foot a{color:var(--pico-muted-color);}