/* Where Do My Prompts Go? — ops console theme. One stylesheet, no framework.
   Dark is the default; [data-theme=light] switches (toggle in the top bar, saved in localStorage).
   Type scale: 11 / 12 / 13 / 14.5 / 17 / 22 / 32.  Spacing: 4 / 8 / 12 / 16 / 24 / 32 / 48. */
@font-face{font-family:"Plex Mono";src:url(fonts/plex-mono-Regular.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Plex Mono";src:url(fonts/plex-mono-SemiBold.woff2) format("woff2");font-weight:600 700;font-display:swap}
:root{
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:"Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --fs-2xs:11px;--fs-xs:12px;--fs-sm:13px;--fs-base:14.5px;--fs-md:17px;--fs-lg:22px;--fs-xl:clamp(24px,3.4vw,32px);
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;--s7:48px;
  --r:4px;--bar-h:44px;--status-h:30px;--nav-h:calc(var(--bar-h) + var(--status-h));
  color-scheme:dark;
  --bg:#0a0c0f;--panel:#10141a;--panel2:#151a21;--hover:#1a2029;--fg:#d9dee5;--muted:#8d97a5;--line:#232a33;--line2:#323b47;
  --accent:#79b8ff;--focus:#79b8ff;
  --ok:#5fd37a;--ok-fill:#2ea043;--ok-bg:#0f2a17;
  --mid:#e8b84a;--mid-fill:#c99a2e;--mid-bg:#2c220c;
  --bad:#ff8077;--bad-fill:#e5534b;--bad-bg:#33130f;
  --unk:#a9b1bc;--unk-fill:#6b7480;--unk-bg:#1c2128;
  --na:#8d97a5;--na-fill:#2b323c;
  --info:#79b8ff;--chg:#c8a2ff;
  --g-ok:#06120a;--g-mid:#1d1500;--g-bad:#1a0605;--g-unk:#0a0c0f;--g-na:#a9b1bc;
}
[data-theme=light]{
  color-scheme:light;
  --bg:#eef0f3;--panel:#fff;--panel2:#f6f7f9;--hover:#eef2f7;--fg:#161b22;--muted:#56606c;--line:#d6dbe1;--line2:#bfc6cf;
  --accent:#0b57c2;--focus:#0b57c2;
  --ok:#106b2c;--ok-fill:#1f883d;--ok-bg:#e3f4e8;
  --mid:#7a4d00;--mid-fill:#c88f0a;--mid-bg:#fbf0d4;
  --bad:#a3121f;--bad-fill:#cf222e;--bad-bg:#fde7e7;
  --unk:#4b5561;--unk-fill:#8c959f;--unk-bg:#eceff2;
  --na:#56606c;--na-fill:#dfe3e8;
  --info:#0b57c2;--chg:#6f3fc4;
  --g-ok:#fff;--g-mid:#1d1500;--g-bad:#fff;--g-unk:#fff;--g-na:#4b5561;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--nav-h) + 12px);background:var(--bg)}
body{margin:0;font:var(--fs-base)/1.55 var(--sans);color:var(--fg);background:var(--bg);-webkit-font-smoothing:antialiased}
a{color:var(--accent);text-underline-offset:2px;text-decoration-thickness:1px}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.mono,code,kbd,pre,time{font-family:var(--mono);font-variant-ligatures:none}
code{font-size:.9em;background:var(--panel2);border:1px solid var(--line);padding:0 4px;border-radius:3px}
.small{font-size:var(--fs-sm)}.muted{color:var(--muted)}
.wrap{--pad:var(--s4);max-width:1440px;margin:0 auto;padding:0 var(--pad)}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:8px;background:var(--fg);color:var(--bg);padding:8px 12px;z-index:30}
.skip:focus{left:8px}
h1,h2,h3{line-height:1.25;margin:0}
h1{font-size:var(--fs-xl);font-weight:650;letter-spacing:-.01em;text-wrap:balance}
p{margin:0 0 var(--s3)}
.k,.pn-h h2,.eyebrow{font:600 var(--fs-2xs)/1.3 var(--mono);text-transform:uppercase;letter-spacing:.09em;color:var(--muted)}
.eyebrow{margin:0 0 var(--s2)}

/* status LEDs: shape + colour, so colour is never the only signal */
.led{display:inline-block;width:9px;height:9px;flex:none;vertical-align:baseline;position:relative;top:0}
.led.ok{background:var(--ok-fill);border-radius:50%}
.led.mid{background:var(--mid-fill);clip-path:polygon(50% 0,100% 100%,0 100%);width:10px}
.led.bad{background:var(--bad-fill);border-radius:1px}
.led.unk{border:2px solid var(--unk-fill);border-radius:50%;background:transparent}
.led.na{background:var(--unk-fill);height:2px;width:9px;top:-3px}
.led.big{width:14px;height:14px}.led.na.big{height:3px}

/* top bar + status line */
.top{position:sticky;top:0;z-index:20;background:var(--bg);border-bottom:1px solid var(--line)}
.bar{display:flex;align-items:center;gap:var(--s4);height:var(--bar-h)}
.brand{display:flex;align-items:center;gap:10px;color:var(--fg);text-decoration:none;min-width:0}
.brand b{font:600 var(--fs-sm) var(--mono);letter-spacing:.02em}
.brand span{font-size:var(--fs-sm);color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.logo{width:22px;height:22px;flex:none}
.lg-bg{fill:var(--panel2);stroke:var(--line2)}.lg-fg{fill:var(--fg);stroke:var(--fg)}.lg-ok{fill:var(--ok-fill)}.lg-mid{fill:var(--mid-fill)}.lg-bad{fill:var(--bad-fill)}
.nav{display:flex;align-self:stretch;margin-left:var(--s3)}
.nav a{display:flex;align-items:center;padding:0 12px;color:var(--muted);text-decoration:none;font:var(--fs-xs) var(--mono);text-transform:uppercase;letter-spacing:.07em;border-bottom:2px solid transparent}
.nav a:hover{color:var(--fg)}
.nav a[aria-current]{color:var(--fg);border-bottom-color:var(--accent)}
.theme{margin-left:auto;font:var(--fs-2xs) var(--mono);text-transform:uppercase;letter-spacing:.07em;background:var(--panel);color:var(--fg);border:1px solid var(--line2);border-radius:var(--r);padding:5px 9px;cursor:pointer}
.theme:hover{border-color:var(--fg)}
.status{display:flex;align-items:center;gap:var(--s4);height:var(--status-h);border-top:1px solid var(--line);font:var(--fs-2xs) var(--mono);color:var(--muted);white-space:nowrap;overflow-x:auto;scrollbar-width:none}
.status::-webkit-scrollbar{display:none}
.status a{color:var(--muted)}
.status b{color:var(--fg);font-weight:400}
.pill{display:inline-flex;align-items:center;gap:7px;padding:1px 9px;border:1px solid var(--line2);border-radius:999px;color:var(--fg)!important;text-decoration:none;background:var(--panel)}
.pill.mid{border-color:color-mix(in srgb,var(--mid-fill) 60%,var(--line2))}
.pill.bad{border-color:color-mix(in srgb,var(--bad-fill) 60%,var(--line2))}
.status .dl{margin-left:auto;display:flex;gap:var(--s3)}

/* page + panels */
main.wrap{padding-top:var(--s4);padding-bottom:var(--s6)}
.head{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:var(--s2) var(--s5);padding:var(--s2) 0 var(--s4)}
.head > div:first-child{flex:1 1 0;min-width:min(100%,36rem)}
.head h1{max-width:28em}
.head .lede{margin:6px 0 0;color:var(--muted);max-width:60em;font-size:var(--fs-sm)}
.grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--s3);margin-bottom:var(--s3)}
.c3{grid-column:span 3}.c4{grid-column:span 4}.c5{grid-column:span 5}.c6{grid-column:span 6}.c7{grid-column:span 7}.c8{grid-column:span 8}.c12{grid-column:1/-1}
.c2{grid-column:span 2}
.pn{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);min-width:0;display:flex;flex-direction:column}
.pn-h{display:flex;flex-wrap:wrap;align-items:center;gap:4px var(--s3);padding:8px var(--s3);border-bottom:1px solid var(--line);min-height:36px}
.pn-h h2{margin:0}
.pn-tools{margin-left:auto;display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:var(--s2) var(--s3);min-width:0}
.pn-meta{margin-left:auto;font:var(--fs-2xs) var(--mono);color:var(--muted)}
.pn-tools .pn-meta{margin-left:0}
.pn-h .legend{margin:0}
.pn-b{padding:var(--s3);min-width:0}
.pn-b.flush{padding:0}
.pn-f{padding:8px var(--s3);border-top:1px solid var(--line);font-size:var(--fs-xs);color:var(--muted);margin-top:auto}
.pn-f p{margin:0}
.scroll{overflow:auto;max-height:470px}
.scroll-x{overflow-x:auto}

/* big-number stat panels */
.stat{display:flex;flex-direction:column;gap:6px;padding:var(--s3);color:var(--fg);text-decoration:none;height:100%}
a.stat:hover{background:var(--hover)}
.stat .k{display:flex;align-items:center;gap:7px}
.stat .num{font:600 30px/1.05 var(--mono);letter-spacing:-.03em}
.stat .num small{font-size:.5em;color:var(--muted);font-weight:400;letter-spacing:0;margin-left:2px}
.stat .lbl{font-size:var(--fs-sm);line-height:1.35}
.stat .sub{font:var(--fs-2xs)/1.45 var(--mono);color:var(--muted);margin-top:auto}
.strip{display:flex;gap:1px;height:5px;overflow:hidden;margin:2px 0}
.strip .seg{min-width:2px}
.strip.wide{height:8px}
.seg.ok{background:var(--ok-fill)}.seg.mid{background:var(--mid-fill)}.seg.bad{background:var(--bad-fill)}.seg.unk{background:var(--unk-fill)}.seg.na{background:var(--na-fill)}

/* values with LEDs */
.v{display:inline-flex;align-items:baseline;gap:7px;max-width:100%;font:var(--fs-xs)/1.4 var(--mono)}
.v .led{position:relative;top:0}
.v.ok{color:var(--ok)}.v.mid{color:var(--mid)}.v.bad{color:var(--bad)}.v.unk{color:var(--unk);font-style:italic}.v.na{color:var(--fg)}
.v.big{font-size:var(--fs-sm);font-weight:600}
.legend{list-style:none;display:flex;flex-wrap:wrap;gap:4px 14px;align-items:center;padding:0;margin:0;font:var(--fs-2xs) var(--mono);color:var(--muted)}
.legend li{display:inline-flex;align-items:center;gap:6px}

/* event stream (syslog style) */
.logbar{display:flex;flex-wrap:wrap;gap:4px;padding:6px var(--s3);border-bottom:1px solid var(--line)}
.logbar button{font:var(--fs-2xs) var(--mono);text-transform:uppercase;letter-spacing:.05em;padding:3px 8px;border:1px solid var(--line2);border-radius:var(--r);background:transparent;color:var(--muted);cursor:pointer}
.logbar button[aria-pressed=true]{color:var(--fg);background:var(--panel2);border-color:var(--fg)}
.log{list-style:none;margin:0;padding:4px 0;font:var(--fs-xs)/1.5 var(--mono)}
.ln{display:grid;grid-template-columns:80px 52px minmax(0,118px) minmax(0,118px) minmax(0,1fr);gap:0 10px;padding:2px var(--s3);border-left:2px solid transparent}
.ln:hover{background:var(--hover)}
.ln time{color:var(--muted)}
.ln .tag{font-weight:600}
.ln.INFO .tag{color:var(--info)}.ln.WARN .tag{color:var(--mid)}.ln.ERROR .tag{color:var(--bad)}.ln.CHANGE .tag{color:var(--chg)}
.ln.WARN{border-left-color:var(--mid-fill)}.ln.ERROR{border-left-color:var(--bad-fill)}.ln.CHANGE{border-left-color:var(--chg)}
.ln .who,.ln .fld{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ln .who a{color:var(--fg)}
.ln .fld{color:var(--muted)}
.ln .msg{overflow-wrap:anywhere}
.ln .src{color:var(--muted);margin-left:6px}
.ln[hidden]{display:none}

/* source-check uptime */
.up{list-style:none;margin:0;padding:4px 0;font:var(--fs-xs)/1.4 var(--mono)}
.up li{display:grid;grid-template-columns:minmax(0,1fr) auto 64px 52px;gap:10px;align-items:center;padding:3px var(--s3)}
.up li:hover{background:var(--hover)}
.up .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--fg)}
.up .cells{display:flex;gap:2px}
.cell{width:22px;height:16px;display:grid;place-items:center;font:700 10px/1 var(--sans);border-radius:2px}
.cell.ok{background:var(--ok-fill);color:var(--g-ok)}.cell.mid{background:var(--mid-fill);color:var(--g-mid)}.cell.bad{background:var(--bad-fill);color:var(--g-bad)}.cell.none{background:var(--na-fill);color:var(--g-na)}
.up .ratio,.up .unm{text-align:right;color:var(--muted)}
.up-head{display:grid;grid-template-columns:minmax(0,1fr) auto 64px 52px;gap:10px;padding:6px var(--s3);border-bottom:1px solid var(--line);font:var(--fs-2xs) var(--mono);color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.up-head span:nth-child(n+3){text-align:right}
.note-line{display:flex;gap:8px;align-items:center}

/* compare table: metrics / log table */
.qbar{display:flex;align-items:center;gap:0;border:1px solid var(--line2);border-radius:var(--r);background:var(--bg);margin:0}
.qbar:focus-within{border-color:var(--focus)}
.qbar label{padding:0 10px;font:600 var(--fs-xs) var(--mono);color:var(--accent);white-space:nowrap}
.qbar input{flex:1;min-width:0;font:var(--fs-sm) var(--mono);padding:9px 4px;border:0;background:transparent;color:var(--fg);outline:none}
.qbar kbd{font-size:var(--fs-2xs);border:1px solid var(--line2);border-radius:3px;padding:0 5px;color:var(--muted);margin-right:8px}
.qbar button{align-self:stretch;font:var(--fs-2xs) var(--mono);text-transform:uppercase;letter-spacing:.06em;padding:0 12px;border:0;border-left:1px solid var(--line2);background:var(--panel2);color:var(--fg);cursor:pointer}
.qhelp{margin:6px 0 0;font:var(--fs-2xs)/1.6 var(--mono);color:var(--muted)}
.qhelp code{font-size:inherit;padding:0 3px;cursor:pointer}
.qparsed{font:var(--fs-2xs) var(--mono);color:var(--muted);margin:4px 0 0;min-height:1.5em}
.qparsed.warn{color:var(--mid)}
.facets{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:var(--s2)}
.facets select,.facets .toggle{font:var(--fs-2xs) var(--mono);padding:5px 6px;border:1px solid var(--line2);border-radius:var(--r);background:var(--panel);color:var(--fg);min-height:28px}
.toggle{display:inline-flex;align-items:center;gap:6px;cursor:pointer}
.toggle input{margin:0;accent-color:var(--accent)}
.count{margin-left:auto;font:var(--fs-2xs) var(--mono);color:var(--muted)}
table{border-collapse:separate;border-spacing:0;width:100%}
#t{table-layout:fixed;font-family:var(--mono)}
#t thead th:first-child{width:16%}
th,td{text-align:left;vertical-align:top;padding:7px 8px;border-bottom:1px solid var(--line);font-size:var(--fs-xs)}
tbody tr:last-child>*{border-bottom:0}
#t thead th{position:sticky;top:var(--nav-h);z-index:2;background:var(--panel2);padding:0;border-bottom:1px solid var(--line2);vertical-align:bottom}
#t thead button{all:unset;box-sizing:border-box;display:flex;align-items:flex-end;gap:4px;width:100%;padding:8px;font:600 var(--fs-2xs)/1.3 var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--muted);cursor:pointer}
#t thead button:hover{color:var(--fg)}
#t thead button:focus-visible{outline:2px solid var(--focus);outline-offset:-2px}
#t thead th[aria-sort=ascending] .arr::after{content:"▲";font-size:8px}
#t thead th[aria-sort=descending] .arr::after{content:"▼";font-size:8px}
#t thead th[aria-sort=ascending] button,#t thead th[aria-sort=descending] button{color:var(--fg)}
#t tbody th,#t td{overflow-wrap:anywhere}
#t tbody th a{font-weight:600;color:var(--fg);text-decoration:none}
#t tbody th a:hover{text-decoration:underline}
#t tbody th small{display:block;color:var(--muted);font-size:var(--fs-2xs);font-weight:400;margin:1px 0 4px}
#t tbody th .strip{max-width:110px}
#t tbody tr:nth-child(even)>*{background:color-mix(in srgb,var(--panel2) 55%,transparent)}
#t tbody tr:hover>*{background:var(--hover)}
tr[hidden]{display:none}
.empty{padding:var(--s4);color:var(--muted);margin:0;font-family:var(--mono);font-size:var(--fs-xs)}
.linkish{background:none;border:0;padding:0;font:inherit;color:var(--accent);text-decoration:underline;cursor:pointer}
table.rules th{width:200px;font-weight:600}

/* charts */
.chart{display:block;width:100%;height:auto;font-family:var(--mono)}
.chart text{fill:var(--fg)}
.chart a{text-decoration:none}
.hm-col,.ax-t,.rb-l{font:500 10px var(--mono);fill:var(--muted)!important}
.ax-t{text-anchor:middle}.rb-l{text-anchor:end;fill:var(--fg)!important}
.hm-cat{font:600 9px var(--mono);letter-spacing:.1em;fill:var(--muted)!important}
.hm-rule{stroke:var(--line)}
.hm-name{font-size:11px}
.chart a:hover .hm-name,.chart a:focus .hm-name{text-decoration:underline;fill:var(--accent)}
.hm{stroke:none}.hm-ok{fill:var(--ok-fill)}.hm-mid{fill:var(--mid-fill)}.hm-bad{fill:var(--bad-fill)}.hm-unk{fill:var(--unk-fill)}.hm-na{fill:var(--na-fill)}
.hm-g{font:700 11px var(--sans);text-anchor:middle;pointer-events:none}
.chart .hm-g-ok{fill:var(--g-ok)}.chart .hm-g-bad{fill:var(--g-bad)}.chart .hm-g-mid{fill:var(--g-mid)}.chart .hm-g-na{fill:var(--g-na)}.chart .hm-g-unk{fill:var(--g-unk)}
.chart a:hover .hm{opacity:.8}
.ax{stroke:var(--line2);stroke-dasharray:2 3}
.rb-ok{fill:var(--ok-fill)}.rb-mid{fill:var(--mid-fill)}.rb-bad{fill:var(--bad-fill)}.rb-na,.rb-unk{fill:var(--unk-fill)}
.row-hit{fill:transparent}.chart a:hover .row-hit{fill:var(--hover)}
.mini-o{fill:var(--unk-fill);opacity:.6}
.chart.mini{max-width:520px}
.chart.heatmap{min-width:420px}.chart.retention{min-width:430px}
.fn{margin:var(--s3) 0 0;font-size:var(--fs-xs);color:var(--muted);line-height:1.55}

/* data endpoints / alerts */
.ep{list-style:none;margin:0;padding:0;font:var(--fs-xs) var(--mono)}
.ep li{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:10px;padding:7px var(--s3);border-bottom:1px solid var(--line);align-items:baseline}
.ep li:last-child{border-bottom:0}
.ep .m{color:var(--ok);font-weight:600}
.ep .sz{color:var(--muted)}
.ep small{display:block;color:var(--muted);font-family:var(--sans);font-size:var(--fs-2xs)}
.term{margin:0;padding:var(--s3);background:var(--bg);border-top:1px solid var(--line);font:var(--fs-2xs)/1.6 var(--mono);white-space:pre-wrap;word-break:break-word;max-height:220px;overflow:auto}
.term code{background:none;border:0;padding:0;font-size:inherit}
.t-mut{color:var(--muted)}.t-ok{color:var(--ok)}.t-mid{color:var(--mid)}.t-bad{color:var(--bad)}.t-unk{color:var(--unk)}
/* Home hero: centred headline, two actions, then a tilted picture of the real dashboard. */
.hero{padding:64px 0 0;text-align:center}
.hero-copy{max-width:40em;margin:0 auto}
.hero h1{font-size:clamp(32px,4.4vw,52px);font-weight:650;letter-spacing:-.025em;line-height:1.12;text-wrap:balance}
.hero .lede{margin:16px auto 0;max-width:34em;color:var(--muted);font-size:var(--fs-md);line-height:1.45}
.hero-actions{display:flex;justify-content:center;align-items:center;gap:12px;margin-top:28px}
.hero .btn{padding:12px 18px;font-size:12px}
.hero-quiet{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 18px;margin:16px 0 0}
.hero-quiet a{font:var(--fs-xs) var(--mono);color:var(--muted);text-decoration:none}
.hero-quiet a:hover{color:var(--fg)}
.hero-stage{height:520px;margin:40px calc(var(--pad) * -1) 28px;overflow:hidden;pointer-events:none;perspective:1800px;perspective-origin:50% 0;
  -webkit-mask-image:linear-gradient(#000 0%,#000 92%,transparent 100%);mask-image:linear-gradient(#000 0%,#000 92%,transparent 100%)}
.hero-board{width:min(920px,calc(100% - 120px));margin:76px auto 0;padding:16px;text-align:left;background:var(--panel);border:1px solid var(--line2);border-radius:12px;
  box-shadow:0 40px 80px rgba(0,0,0,.5);transform:rotateX(28deg) rotateZ(-6deg);transform-origin:center top}
.hb-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:12px}
.hb-card{display:flex;flex-direction:column;gap:6px;padding:12px;background:var(--panel2);border:1px solid var(--line);border-radius:var(--r)}
.hb-card .num{font:600 28px/1 var(--mono);letter-spacing:-.03em;color:var(--fg)}
.hb-card .sub{font:11px/1.35 var(--mono);color:var(--muted)}
.hb-heat{height:300px;background:var(--bg);border:1px solid var(--line);border-radius:var(--r);padding:8px 10px 0;overflow:hidden}
.hb-cap{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-bottom:6px}
.hb-cap span:last-child{font:var(--fs-2xs) var(--mono);color:var(--muted)}
.hb-heat .chart.heatmap{min-width:0}
.btn{display:inline-flex;align-items:center;gap:6px;font:600 var(--fs-2xs) var(--mono);text-transform:uppercase;letter-spacing:.06em;padding:8px 12px;border-radius:var(--r);border:1px solid var(--line2);background:var(--panel2);color:var(--fg);text-decoration:none;cursor:pointer;white-space:nowrap}
.btn:hover{border-color:var(--fg)}
.btn.pri{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.btn.pri:hover{background:var(--accent);color:var(--bg);border-color:var(--accent)}
.menu{position:relative}
.menu summary{list-style:none}
.menu summary::-webkit-details-marker{display:none}
.menu summary::after{content:"";width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid currentColor;opacity:.7}
.menu-pop{position:absolute;z-index:6;top:calc(100% + var(--s1));right:0;min-width:220px;max-width:min(280px,calc(100vw - 24px));padding:var(--s1) 0;background:var(--panel);border:1px solid var(--line2);border-radius:var(--r);box-shadow:0 8px 24px rgba(0,0,0,.35)}
.menu-pop a{display:block;padding:8px 12px;color:var(--fg);text-decoration:none;font:var(--fs-xs) var(--mono);text-transform:none;letter-spacing:0}
.menu-pop a:hover{background:var(--hover)}
.menu-pop small{display:block;margin-top:2px;color:var(--muted);font-family:var(--sans);font-size:var(--fs-2xs)}
.rows{list-style:none;margin:0;padding:0}
.rows a{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s3);padding:8px var(--s3);border-bottom:1px solid var(--line);color:var(--fg);text-decoration:none;font:var(--fs-xs) var(--mono)}
.rows a:hover{background:var(--hover)}
.rows small{color:var(--muted)}
.note{margin:0;padding:8px var(--s3);color:var(--muted);font-size:var(--fs-xs)}
.alert{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0;padding:10px var(--s3)}
.pn .alert{border-top:1px solid var(--line)}
.alert-wrap{margin:0 0 var(--s3)}
.alert-wrap .alert{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:12px}
.alert input{flex:1 1 10rem;min-width:0;width:100%;font:var(--fs-xs) var(--mono);color:var(--fg);background:var(--bg);border:1px solid var(--line2);border-radius:var(--r);padding:8px 10px}
.alert input::placeholder{color:var(--muted)}
.alert button{font:600 var(--fs-2xs) var(--mono);text-transform:uppercase;letter-spacing:.06em;padding:8px 12px;border-radius:var(--r);border:1px solid var(--fg);background:var(--fg);color:var(--bg);cursor:pointer;white-space:nowrap}
.alert button:hover{background:var(--accent);border-color:var(--accent);color:var(--bg)}
.alert-note,.alert-by{flex:1 1 100%;margin:0;color:var(--muted);font:var(--fs-2xs)/1.45 var(--mono)}
.alert-by a{color:var(--muted);text-decoration:none}
.alert-by a:hover{color:var(--fg)}
.cta-line{margin:0 0 var(--s4);padding-top:var(--s3);border-top:1px solid var(--line);font:var(--fs-xs)/1.5 var(--mono);color:var(--muted)}
.cta-links{margin:0}
.cta-links a{color:var(--muted);text-decoration:none}
.cta-links a:hover{color:var(--fg)}
.cta-links a+a::before{content:" · ";color:var(--line2)}
.cta-note{margin:var(--s2) 0 0}
.cta-note a{color:var(--fg)}

/* service detail (tool page) */
.crumb{font:var(--fs-xs) var(--mono);color:var(--muted);margin:0 0 var(--s3)}
.crumb a{color:var(--muted)}
.svc{padding:var(--s4)}
.svc-id{display:flex;flex-wrap:wrap;gap:4px 16px;font:var(--fs-2xs) var(--mono);color:var(--muted);margin:0 0 var(--s2)}
.svc-id b{color:var(--fg);font-weight:400}
.svc h1{margin:0 0 var(--s3)}
.answer{display:flex;flex-wrap:wrap;gap:6px var(--s3);align-items:baseline;max-width:62em;margin:0}
.answer span:last-child{color:var(--fg)}
.kv{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--line)}
.kv div{padding:10px var(--s4);border-right:1px solid var(--line)}
.kv div:last-child{border-right:0}
.kv dt{font:600 var(--fs-2xs) var(--mono);text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.kv dd{margin:4px 0 0;font:var(--fs-sm) var(--mono)}
.tally{font:var(--fs-xs) var(--mono);display:inline-flex;align-items:center;gap:5px;margin-right:10px}
.fp{display:flex;flex-direction:column;gap:6px;padding:10px var(--s3);color:var(--fg);text-decoration:none;height:100%}
.fp:hover{background:var(--hover)}
.fp .k{display:flex;align-items:center;gap:7px}
.fp .val{font:600 var(--fs-sm)/1.35 var(--mono)}
.fp.ok .val{color:var(--ok)}.fp.mid .val{color:var(--mid)}.fp.bad .val{color:var(--bad)}.fp.unk .val{color:var(--unk);font-style:italic}
.fp .st{font:var(--fs-2xs) var(--mono);color:var(--muted);margin-top:auto}
.pn.ok{border-top:2px solid var(--ok-fill)}.pn.mid{border-top:2px solid var(--mid-fill)}.pn.bad{border-top:2px solid var(--bad-fill)}.pn.unk{border-top:2px dashed var(--unk-fill)}.pn.na{border-top:2px solid var(--line2)}
.notice{display:flex;gap:var(--s3);align-items:baseline;padding:10px var(--s3);border:1px solid color-mix(in srgb,var(--mid-fill) 55%,var(--line));background:var(--mid-bg);border-radius:var(--r);margin:0 0 var(--s3);font-size:var(--fs-sm)}
.notice strong{font:600 var(--fs-2xs) var(--mono);letter-spacing:.08em;color:var(--mid);white-space:nowrap}
.notice p{margin:0}
.ev{border-bottom:1px solid var(--line);padding:var(--s3) var(--s4)}
.ev:last-child{border-bottom:0}
.ev-line{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;font:var(--fs-xs) var(--mono)}
.ev-line time{color:var(--muted)}
.ev-line .tag{font-weight:600;min-width:52px}
.ev.ok .tag{color:var(--ok)}.ev.mid .tag{color:var(--mid)}.ev.bad .tag{color:var(--bad)}.ev.unk .tag{color:var(--unk)}.ev.na .tag{color:var(--muted)}
.ev h2{font:600 var(--fs-xs) var(--mono);color:var(--fg);text-transform:none;letter-spacing:0}
.ev-line .kv-val{color:var(--fg)}
.ev .detail{margin:8px 0 0;font-size:var(--fs-sm);max-width:62em;color:var(--fg)}
.ev blockquote{margin:8px 0 0;padding:8px var(--s3);border-left:2px solid var(--line2);background:var(--bg);font-size:var(--fs-sm);max-width:62em}
.ev.ok blockquote{border-left-color:var(--ok-fill)}.ev.mid blockquote{border-left-color:var(--mid-fill)}.ev.bad blockquote{border-left-color:var(--bad-fill)}
.ev blockquote p{margin:0}
.ev blockquote p::before{content:"> ";font-family:var(--mono);color:var(--muted)}
.ev-src{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:center;margin:8px 0 0;font:var(--fs-2xs) var(--mono);color:var(--muted)}
.ev-src a{color:var(--fg);word-break:break-all}
.ev-src .path{color:var(--muted)}
.copy{margin-left:auto;font:var(--fs-2xs) var(--mono);text-transform:uppercase;letter-spacing:.05em;padding:3px 8px;border:1px solid var(--line2);border-radius:var(--r);background:var(--panel2);color:var(--fg);cursor:pointer}
.copy:hover{border-color:var(--fg)}
.ev .none{margin:8px 0 0;font:var(--fs-xs) var(--mono);color:var(--muted)}
.mini-wrap{margin-top:var(--s3)}.mini-wrap p{margin:0 0 4px;font-size:var(--fs-xs);color:var(--muted)}
.srcs{list-style:none;margin:0;padding:0;font:var(--fs-2xs)/1.45 var(--mono)}
.srcs li{display:grid;grid-template-columns:70px minmax(0,1fr);gap:8px;padding:6px var(--s3);border-bottom:1px solid var(--line)}
.srcs li:last-child{border-bottom:0}
.srcs a{color:var(--fg);word-break:break-all}
.srcs .s-ok{color:var(--ok)}.srcs .s-bad{color:var(--bad)}.srcs .s-none{color:var(--muted)}
.srcs small{display:block;color:var(--muted)}
.toc{list-style:none;margin:0;padding:4px 0;font:var(--fs-xs) var(--mono)}
.toc a{display:flex;align-items:center;gap:8px;padding:4px var(--s3);color:var(--muted);text-decoration:none}
.toc a:hover{color:var(--fg);background:var(--hover)}
.side{position:sticky;top:calc(var(--nav-h) + 12px);display:flex;flex-direction:column;gap:var(--s3)}
.pager{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3);margin:var(--s3) 0}
.pager a{display:flex;flex-direction:column;gap:2px;padding:10px var(--s3);border:1px solid var(--line);border-radius:var(--r);text-decoration:none;color:var(--fg);font:600 var(--fs-sm) var(--mono);background:var(--panel)}
.pager a span{font:var(--fs-2xs) var(--mono);color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.pager a:last-child{text-align:right}
.pager a:hover{border-color:var(--fg)}
.fix{font-size:var(--fs-xs);color:var(--muted)}

/* prose (method page) */
.prose{max-width:50em;padding:var(--s4) var(--s5)}
.prose h2{margin:var(--s5) 0 var(--s2);font-size:var(--fs-md);font-weight:600}
.prose h2:first-child{margin-top:0}
.prose ul{padding-left:1.2em}.prose li{margin:4px 0}
.prose .pn{margin:var(--s4) 0}
.tablewrap{border:1px solid var(--line);border-radius:var(--r);overflow-x:auto}
.empty-note{padding:var(--s3);color:var(--muted);font:var(--fs-xs)/1.6 var(--mono);margin:0}

/* footer */
.foot{border-top:1px solid var(--line);padding:var(--s4) 0 var(--s6);color:var(--muted);font-size:var(--fs-xs)}
.foot p{max-width:70em;margin:0 0 6px}.foot a{color:var(--muted)}

/* responsive */
@media (max-width:1180px){
  .c7,.c5,.c8,.c4{grid-column:1/-1}
  .c2{grid-column:span 4}.c3{grid-column:span 6}
  .c6{grid-column:1/-1}
  /* compare table becomes cards */
  #t thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  #t,#t tbody{display:block}
  #t tr{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 12px;padding:var(--s3);border-bottom:1px solid var(--line)}
  #t tr[hidden]{display:none}
  #t tbody th{grid-column:1/-1;min-width:0;padding:0 0 6px;border:0}
  #t td{display:flex;flex-direction:column;gap:2px;padding:4px 0;border:0}
  #t td::before{content:attr(data-label);font:600 10px var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
  #t tbody tr>*{background:transparent!important}
  .side{position:static}
}
@media (max-width:820px){
  .c2,.c3{grid-column:span 6}
  .kv{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kv div:nth-child(2n){border-right:0}.kv div:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .brand span{display:none}
  .status .dl{display:none}
  .ln{grid-template-columns:84px 56px minmax(0,1fr);row-gap:0}
  .ln .fld{grid-column:3}.ln .msg{grid-column:1/-1;padding-left:0}
  .ln .who{grid-column:3;grid-row:1}
  .ln .fld{grid-row:2}
}
@media (max-width:640px){
  .hero{padding-top:36px}
  .hero h1{font-size:30px}
  .hero-actions{flex-direction:column;align-items:stretch}
  .hero-actions .menu,.hero-actions .btn{width:100%;justify-content:center}
  .hero-stage{height:400px;margin-top:24px}
  .hero-board{width:calc(100% - 48px);margin:40px auto 0;transform:rotateX(18deg) rotateZ(-4deg)}
  .hb-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hb-heat{height:180px}
  .hb-card .num{font-size:22px}
}
@media (max-width:560px){.status{gap:var(--s3)}.status .sw,.status .ver{display:none}
  .wrap{--pad:10px}
  .bar{gap:var(--s2)}
  .nav{margin-left:0}.nav a{padding:0 7px;letter-spacing:.03em}
  .theme{padding:4px 7px}
  .c3{grid-column:1/-1}
  .stat .num{font-size:24px}
  .brand b{display:none}
  .theme .tw{display:none}
  .stat .lbl,.stat .sub{font-size:11px}
  .pager{grid-template-columns:1fr}.pager a:last-child{text-align:left}
  .qhelp{display:none}
  .up li,.up-head{grid-template-columns:minmax(0,1fr) auto 48px 40px;gap:6px}
  .svc{padding:var(--s3)}
  .ev{padding:var(--s3)}
  .prose{padding:var(--s3)}
}
@media print{.top,.facets,.qbar,.foot,.copy,.theme{display:none}}

.stack{display:flex;flex-direction:column;gap:var(--s3)}.stack>.pn{margin:0}
.stack>.pn:last-child{flex:1}