/* WebTester+ — "Instrument": an editorial lab-report console.
   Two materials only: warm paper for reading, graphite for chrome and data.
   Hairline rules instead of drop shadows. Every number is set in mono. */
:root{
  /* paper */
  --paper:#F4F1EA; --panel:#FFFDF9; --panel2:#FAF8F3;
  --rule:#DFD8CA; --rule2:#ECE6DA; --rule3:#F2EDE4;
  /* ink */
  --text:#15181F; --ink2:#2C323F; --muted:#6C7183; --faint:#9A9FB0;
  /* graphite chrome */
  --graphite:#14171D; --graphite2:#1D212A; --graphite3:#2A2F3A;
  --onGraphite:#E6E3DB; --onGraphiteDim:#9AA0B0;
  /* signal */
  --signal:#CF4420; --signalDark:#A83415; --link:#1D4E96;
  --accent:var(--link); --accent2:#1C7A6B; --ink:var(--link); --navy:var(--graphite); --navy2:var(--ink2);
  /* severity + status */
  --crit:#B92B2B; --high:#C4671A; --med:#A88519; --low:#4A6DA3; --ok:#1C7345; --bad:#B92B2B; --warn:#C4671A;
  --bg:var(--paper); --line:var(--rule2);
  --r:4px; --shadow:none;
  --font:'Archivo','Helvetica Neue',Helvetica,sans-serif;
  --serif:'Newsreader',Georgia,serif;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;font:14px/1.55 var(--font);color:var(--text);background:var(--paper);
  -webkit-font-smoothing:antialiased;
  /* drafting grid: barely there, gives the paper a surface */
  background-image:linear-gradient(var(--rule3) 1px,transparent 1px),linear-gradient(90deg,var(--rule3) 1px,transparent 1px);
  background-size:26px 26px;
}
button{font:inherit;cursor:pointer;color:inherit}
a{color:var(--link);text-underline-offset:2px}
a:hover{color:var(--signal)}
.hidden{display:none!important}
.muted{color:var(--muted)} .small{font-size:12px} .grow{flex:1} .wrap{flex-wrap:wrap}
.row{display:flex;align-items:center} .gap{gap:10px}
.req{color:var(--signal);font-weight:700}
::selection{background:#FBE3C8;color:var(--text)}
:focus-visible{outline:2px solid var(--signal);outline-offset:2px}

/* ============================================================ app bar == */
.appbar{
  position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:8px 26px;
  padding:0 20px;min-height:54px;background:var(--graphite);color:var(--onGraphite);flex-wrap:wrap;
  border-bottom:1px solid #000;
}
.brandmark{display:flex;gap:11px;align-items:center;padding:8px 26px 8px 0;border-right:1px solid var(--graphite3)}
.brandmark div{white-space:nowrap}
.mark{
  width:30px;height:30px;border-radius:3px;background:var(--signal);color:#fff;
  display:grid;place-items:center;font:700 12px/1 var(--mono);letter-spacing:-.03em;
}
.brandmark strong{display:block;font-size:14.5px;font-weight:700;letter-spacing:-.015em;line-height:1.15}
.brandmark span{font:500 9.5px/1 var(--mono);color:var(--onGraphiteDim);letter-spacing:.14em;text-transform:uppercase}
.tabs{display:flex;gap:2px;align-self:stretch}
.tabs button{
  background:none;border:0;color:var(--onGraphiteDim);padding:0 14px;align-self:stretch;
  font-weight:600;font-size:13px;white-space:nowrap;position:relative;letter-spacing:-.01em;
}
.tabs button::after{content:"";position:absolute;left:14px;right:14px;bottom:0;height:2px;background:var(--signal);transform:scaleX(0);transition:transform .18s ease}
.tabs button:hover{color:var(--onGraphite)}
.tabs button.on{color:#fff}
.tabs button.on::after{transform:scaleX(1)}
.pills{margin-left:auto;display:flex;gap:6px;flex-wrap:wrap;padding:8px 0}
.pill{
  font:500 10.5px/1 var(--mono);letter-spacing:.02em;padding:5px 9px;border-radius:2px;
  background:var(--graphite2);border:1px solid var(--graphite3);color:var(--onGraphiteDim);
  display:inline-flex;gap:6px;align-items:center;white-space:nowrap;text-transform:uppercase;
}
.pill i{width:6px;height:6px;border-radius:50%;background:var(--warn);display:inline-block;box-shadow:0 0 0 2px rgba(196,103,26,.2)}
.pill.on{color:var(--onGraphite)}
.pill.on i{background:#3FCF8E;box-shadow:0 0 0 2px rgba(63,207,142,.18)}
@media(max-width:1150px){
  .brandmark span{display:none}.brandmark{border-right:0;padding-right:0}
  .pills{order:3;width:100%;margin-left:0;padding-top:0;padding-bottom:8px}
}
/* Below ~700px the five tabs no longer fit; give them their own scrollable
   row rather than clipping Settings off the right edge. */
@media(max-width:700px){
  .appbar{padding:0 14px;gap:0}
  .brandmark{width:100%;padding:9px 0 0}
  .tabs{order:2;width:100%;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .tabs::-webkit-scrollbar{display:none}
  .tabs button{padding:10px 12px}
  .tabs button::after{left:12px;right:12px}
  main{padding:20px 16px 70px}
  .card-body{padding:16px 16px}
}

/* =============================================================== shell == */
main{max-width:1280px;margin:0 auto;padding:26px 22px 90px}
.view{display:none}
.view.on{display:block;animation:rise .3s ease both}
@keyframes rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* hero — editorial masthead, not a marketing banner */
.hero{border-bottom:2px solid var(--text);padding-bottom:16px;margin-bottom:22px}
.hero h1{
  margin:0 0 10px;font-size:clamp(28px,3.6vw,42px);font-weight:800;letter-spacing:-.035em;line-height:1.02;
  max-width:16ch;
}
.hero p{margin:0;color:var(--ink2);max-width:74ch;font-size:13.5px;line-height:1.65;columns:2;column-gap:34px;column-rule:1px solid var(--rule2)}
@media(max-width:860px){.hero p{columns:1}}

/* ================================================================ card == */
.card{background:var(--panel);border:1px solid var(--rule);border-radius:var(--r);box-shadow:none;margin-bottom:16px}
.card-body{padding:20px 24px}
h2.sec{
  font:700 10.5px/1 var(--mono);margin:26px 0 14px;text-transform:uppercase;letter-spacing:.16em;color:var(--text);
  display:flex;align-items:center;gap:12px;
}
h2.sec::after{content:"";flex:1;height:1px;background:var(--rule)}
h2.sec:first-child{margin-top:0}
h3{font-size:14px;font-weight:700;letter-spacing:-.01em}

/* =============================================================== forms == */
label{display:block;font-weight:600;font-size:11.5px;color:var(--ink2);margin-bottom:12px;letter-spacing:.01em}
label.inline{display:flex;align-items:center;gap:9px;margin:0}
.lbl{font-weight:600;font-size:11.5px;color:var(--ink2);margin:4px 0 7px}
input,select,textarea{
  display:block;width:100%;margin-top:6px;padding:9px 11px;
  border:1px solid var(--rule);border-radius:3px;font:inherit;font-size:13.5px;
  background:var(--panel2);color:var(--text);transition:border-color .15s,background .15s;
}
input::placeholder,textarea::placeholder{color:var(--faint)}
label.inline select{width:auto;min-width:230px;margin:0}
input:hover,select:hover,textarea:hover{border-color:#C9C1B0}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--signal);background:#fff;box-shadow:0 0 0 3px rgba(207,68,32,.1)}
input[type=number]{font-family:var(--mono);font-size:13px}
textarea{resize:vertical;font-size:13px}
input[type=file]{padding:7px 9px;font-size:12px;background:var(--panel2)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px 16px}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
@media(max-width:860px){.grid2,.grid3,.grid4{grid-template-columns:1fr}}

/* area checkboxes — tick-boxes on a form, not pill cards */
.checks{display:grid;grid-template-columns:repeat(auto-fill,minmax(258px,1fr));gap:1px;background:var(--rule2);border:1px solid var(--rule);border-radius:3px;overflow:hidden}
.check{
  display:flex;gap:11px;align-items:flex-start;padding:11px 13px;border:0;border-radius:0;
  background:var(--panel);cursor:pointer;font-weight:500;margin:0;transition:background .14s;
}
.check:hover{background:#FFF8EE}
.check input{width:auto;margin:2px 0 0;accent-color:var(--signal)}
.check b{display:block;font-size:12.5px;font-weight:650;letter-spacing:-.01em}
.check span{font-size:11px;color:var(--muted);font-weight:400;line-height:1.45}
/* "all 17 on" is the default, so the selected state must stay quiet at scale —
   a left rule reads as ticked without turning the whole grid orange. */
.check.on{background:var(--panel);box-shadow:inset 2px 0 0 var(--signal)}
.check:not(.on){background:var(--panel2)}
.check:not(.on) b{color:var(--muted)}

/* ============================================================= buttons == */
.chip{
  border:1px solid var(--rule);background:var(--panel);border-radius:2px;padding:5px 11px;
  font:600 11px/1.4 var(--mono);text-transform:uppercase;letter-spacing:.08em;color:var(--ink2);transition:.14s;
}
.chip:hover{border-color:var(--signal);color:var(--signal);background:#FFF6EF}
.link{background:none;border:0;color:var(--link);padding:0;font-weight:600;font-size:12.5px;text-decoration:underline;text-underline-offset:3px}
.link:hover{color:var(--signal)}
.actions{display:flex;gap:16px;align-items:center;margin-top:20px;flex-wrap:wrap}
.primary{
  background:var(--signal);color:#fff;border:0;border-radius:3px;padding:12px 24px;
  font-weight:700;font-size:13.5px;letter-spacing:.01em;transition:.15s;
}
.primary:hover{background:var(--signalDark)}
.primary:active{transform:translateY(1px)}
.primary:disabled{opacity:.45;cursor:default;transform:none}
.btn{
  border:1px solid var(--rule);background:var(--panel);border-radius:2px;padding:6px 11px;
  font:600 11px/1.4 var(--mono);text-transform:uppercase;letter-spacing:.07em;color:var(--ink2);transition:.14s;
}
.btn:hover{border-color:var(--signal);color:var(--signal)}
.btn.danger:hover{border-color:var(--crit);color:var(--crit);background:#FDF2F2}
.btn.go{background:var(--graphite);color:#fff;border-color:var(--graphite)}
.btn.go:hover{background:var(--signal);border-color:var(--signal);color:#fff}

details.adv{margin-top:22px;border-top:1px solid var(--rule);padding-top:16px}
details.adv summary{cursor:pointer;font:700 10.5px/1 var(--mono);text-transform:uppercase;letter-spacing:.14em;color:var(--text);margin-bottom:16px;list-style:none;display:flex;align-items:center;gap:9px}
details.adv summary::-webkit-details-marker{display:none}
details.adv summary::before{content:"+";font-size:14px;color:var(--signal);width:12px}
details.adv[open] summary::before{content:"\2212"}
.toggle{display:flex;align-items:center;gap:9px;margin-top:10px;font-weight:500}
.toggle input{width:auto;margin:0;accent-color:var(--signal)}
.warnbox{background:#FFF6E6;border:1px solid #E8CF9E;border-left:3px solid var(--warn);border-radius:3px;padding:11px 13px;font-weight:500}
.warnbox input{width:auto;display:inline;margin:0 7px 0 0;accent-color:var(--signal)}
.note{background:#F0F4FB;border:1px solid #D3DEF0;border-left:3px solid var(--link);border-radius:3px;padding:11px 13px;margin-bottom:14px;font-size:13px}
.empty{text-align:center;padding:70px 20px;color:var(--muted);border:1px dashed var(--rule);border-radius:4px;background:var(--panel2)}

/* =========================================================== dashboard == */
.dashbar{background:var(--graphite);border-color:var(--graphite)}
.dashbar .card-body{padding:12px 18px}
.dashbar label.inline{color:var(--onGraphiteDim);font:600 10px/1 var(--mono);text-transform:uppercase;letter-spacing:.12em}
.dashbar select{background:var(--graphite2);border-color:var(--graphite3);color:var(--onGraphite)}
.dashbar select:hover{border-color:#414755}
.dashbar select:focus{border-color:var(--signal);background:var(--graphite2);box-shadow:none}
.dashbar .btn{background:var(--graphite2);border-color:var(--graphite3);color:var(--onGraphiteDim)}
.dashbar .btn:hover{border-color:var(--signal);color:#fff}
.dashbar .btn.go{background:var(--signal);border-color:var(--signal);color:#fff}

.head{display:grid;grid-template-columns:auto 1fr auto;gap:26px;align-items:center}
.ring{
  --v:0;width:104px;height:104px;border-radius:50%;
  background:conic-gradient(var(--c,var(--signal)) calc(var(--v)*1%),var(--rule2) 0);
  display:grid;place-items:center;position:relative;
}
.ring::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:1px solid var(--rule)}
.ring div{width:80px;height:80px;border-radius:50%;background:var(--panel);display:grid;place-items:center;font:800 28px/1 var(--mono);letter-spacing:-.04em}
.ring small{display:block;font:600 8.5px/1 var(--mono);color:var(--muted);margin-top:-20px;text-transform:uppercase;letter-spacing:.14em}
.head h1{margin:0;font-size:24px;font-weight:800;letter-spacing:-.03em}
.head .sub{color:var(--muted);font-size:12px;font-family:var(--mono)}
@media(max-width:900px){
  .head{grid-template-columns:auto 1fr}
  .head>div:last-child{grid-column:1/-1;text-align:left!important}
  details.agent>summary{grid-template-columns:30px 1fr auto;gap:10px}
  details.agent>summary>.small{display:none}
}
.sev{display:inline-block;border-radius:2px;padding:2px 7px;font:700 9.5px/1.4 var(--mono);text-transform:uppercase;letter-spacing:.08em;color:#fff}
.sev.critical{background:var(--crit)}.sev.high{background:var(--high)}.sev.medium{background:var(--med)}.sev.low{background:var(--low)}
.counts{display:flex;gap:5px;flex-wrap:wrap;margin-top:8px}
.status{font:700 9.5px/1.4 var(--mono);padding:3px 8px;border-radius:2px;text-transform:uppercase;letter-spacing:.09em}
.st-done{background:#E1F2E8;color:#14603A}
.st-error{background:#FBE5E5;color:#96222A}
.st-running,.st-probing,.st-analysing{background:#FFEAD9;color:var(--signalDark)}
.st-pending,.st-queued{background:var(--rule3);color:var(--muted)}
.st-stopped,.st-skipped{background:#FBF0D9;color:#87640B}

.strip{display:grid;grid-template-columns:repeat(auto-fill,minmax(178px,1fr));gap:1px;margin-top:18px;background:var(--rule2);border:1px solid var(--rule)}
.strip .a{border:0;border-radius:0;padding:7px 10px;font:500 11px/1.4 var(--mono);background:var(--panel);display:flex;justify-content:space-between;gap:6px;align-items:center}
.strip .a b{font-weight:600;letter-spacing:-.01em}
.strip .a.running{background:#FFF1E4;box-shadow:inset 2px 0 0 var(--signal)}
.strip .a.error{background:#FDF1F1;box-shadow:inset 2px 0 0 var(--crit)}
.strip .a.done{color:var(--muted)}

.log{background:var(--graphite);color:#C9CEDC;font:11.5px/1.6 var(--mono);border-radius:3px;padding:12px 14px;max-height:270px;overflow:auto;margin-top:16px;border:1px solid var(--graphite3)}
.log .phase{color:#6FE0B4;font-weight:700}
.log .warn{color:#FFC978}
.log .error{color:#FF9B9B}
.log time{color:#5D6480;margin-right:10px}

/* agent accordions — numbered report sections */
details.agent{background:var(--panel);border:1px solid var(--rule);border-radius:3px;margin-bottom:8px;box-shadow:none;transition:border-color .15s}
details.agent:hover{border-color:#CDC5B4}
details.agent>summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:34px 1fr auto auto;gap:16px;align-items:center;padding:13px 16px}
details.agent>summary::-webkit-details-marker{display:none}
details.agent[open]{border-color:var(--ink2)}
details.agent[open]>summary{border-bottom:1px solid var(--rule)}
.num{width:30px;height:30px;border-radius:2px;background:var(--graphite);color:#fff;display:grid;place-items:center;font:700 12px/1 var(--mono)}
details.agent[open] .num{background:var(--signal)}
.sumt{min-width:0}
.sumt b{display:block;font-size:14px;font-weight:700;letter-spacing:-.015em}
.sumt span{color:var(--muted);font-size:12.5px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.score{min-width:54px;text-align:center;font:800 18px/1 var(--mono);letter-spacing:-.04em;border-radius:2px;padding:6px 8px;color:#fff;background:var(--faint)}
.score.s0{background:var(--crit)}.score.s1{background:var(--high)}.score.s2{background:var(--med)}.score.s3{background:var(--ok)}
.abody{padding:18px 20px 22px}
.atabs{display:flex;gap:0;border-bottom:1px solid var(--rule);margin:-4px 0 18px;flex-wrap:wrap}
.atabs button{background:none;border:0;border-bottom:2px solid transparent;padding:8px 13px;font:600 10.5px/1.4 var(--mono);text-transform:uppercase;letter-spacing:.09em;color:var(--muted);margin-bottom:-1px}
.atabs button:hover{color:var(--text)}
.atabs button.on{color:var(--signal);border-bottom-color:var(--signal)}
.apane{display:none}.apane.on{display:block;animation:rise .22s ease both}

/* the analytical voice — the one place a serif earns its keep */
.headline{
  font:400 19px/1.45 var(--serif);font-style:italic;border-left:0;padding:0 0 16px;margin:0 0 18px;
  background:none;border-bottom:1px solid var(--rule);color:var(--text);letter-spacing:-.005em;
}
.views{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:14px 0}
.views div{background:var(--panel2);border:1px solid var(--rule2);border-radius:3px;padding:12px 14px}
.views h4{margin:0 0 6px;font:700 9.5px/1 var(--mono);text-transform:uppercase;letter-spacing:.13em;color:var(--muted)}

.finding{border:1px solid var(--rule2);border-left:3px solid var(--rule);border-radius:3px;padding:12px 14px;margin-bottom:8px;background:var(--panel)}
.finding:hover{border-left-color:var(--signal)}
.finding .t{display:flex;gap:9px;align-items:center;flex-wrap:wrap}
.finding .t b{font-size:13.5px;font-weight:700;letter-spacing:-.015em}
.finding .m{color:var(--muted);font:11.5px/1.5 var(--mono);margin-top:4px;word-break:break-word}
.finding p{margin:8px 0}
.finding .fix{background:#EFF8F2;border:1px solid #C7E5D3;border-radius:3px;padding:9px 11px;font-size:13px}
.finding .ga{display:grid;grid-template-columns:1fr 1fr;gap:12px;font-size:12px;color:var(--ink2);margin-top:8px}
.filters{display:flex;gap:5px;margin-bottom:12px;flex-wrap:wrap}

/* data tables — hairlines and lining numerals */
.tbl{overflow:auto;max-height:520px;border:1px solid var(--rule);border-radius:3px}
table{border-collapse:collapse;width:100%;font-size:12px;font-variant-numeric:tabular-nums}
th{position:sticky;top:0;background:var(--graphite);color:var(--onGraphite);text-align:left;font:600 10px/1.4 var(--mono);text-transform:uppercase;letter-spacing:.09em;padding:8px;white-space:nowrap;z-index:2}
td{border-top:1px solid var(--rule2);padding:6px 8px;vertical-align:top;max-width:420px;word-break:break-word}
tr:nth-child(even) td{background:var(--panel2)}
tr:hover td{background:#FFF7EC}

.act{display:grid;grid-template-columns:28px 1fr auto;gap:12px;padding:11px 0;border-bottom:1px solid var(--rule2);align-items:start}
.act .pr{width:24px;height:24px;border-radius:2px;background:var(--graphite);color:#fff;display:grid;place-items:center;font:700 11px/1 var(--mono)}
.mermaidbox{background:var(--panel);border:1px solid var(--rule);border-radius:3px;padding:12px;overflow:auto}
.diag{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:900px){.diag,.views{grid-template-columns:1fr}}
.shots{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
.shots figure{margin:0;border:1px solid var(--rule);border-radius:3px;overflow:hidden;background:var(--panel);transition:border-color .15s}
.shots figure:hover{border-color:var(--signal)}
.shots img{width:100%;display:block}
.shots figcaption{font:500 10.5px/1.4 var(--mono);padding:7px 9px;color:var(--muted);border-top:1px solid var(--rule2);text-transform:uppercase;letter-spacing:.06em}
.facts{font:11.5px/1.6 var(--mono);max-height:420px;overflow:auto;background:var(--panel2);border:1px solid var(--rule2);border-radius:3px;padding:10px 12px}
.facts div{padding:3px 0;border-bottom:1px dotted var(--rule)}
.facts b{color:var(--signalDark)}
.agentbar{display:flex;gap:5px;flex-wrap:wrap;margin-top:18px;padding-top:14px;border-top:1px solid var(--rule)}
.comp{display:inline-block;background:var(--panel2);border:1px solid var(--rule2);color:var(--ink2);border-radius:2px;padding:3px 9px;font:500 11px/1.4 var(--mono);margin:2px 4px 0 0}

/* ============================================================== models == */
.mgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(350px,1fr));gap:1px;background:var(--rule2);border:1px solid var(--rule)}
.mcard{border:0;border-radius:0;padding:14px 16px;background:var(--panel)}
.mcard h4{margin:0;font-size:13.5px;font-weight:700;letter-spacing:-.015em}
.mcard .p{font:600 9.5px/1 var(--mono);color:var(--muted);text-transform:uppercase;letter-spacing:.13em;margin-top:3px}
.mcard ol{margin:10px 0 0;padding-left:20px;font:12px/1.6 var(--mono)}
.mcard li{padding:2px 0;color:var(--muted)}
.mcard li.sel{font-weight:700;color:var(--signalDark)}
.mcard li .x{color:var(--faint);font-size:11px}

/* ============================================================= builder == */
.change{border:1px solid var(--rule);border-radius:3px;margin:12px 0;overflow:hidden}
.change .ch{background:var(--panel2);padding:10px 13px;display:flex;gap:10px;align-items:center;flex-wrap:wrap;border-bottom:1px solid var(--rule);font-family:var(--mono);font-size:12px}
.change .cb{padding:12px 13px}
.badge{font:700 9.5px/1.4 var(--mono);border-radius:2px;padding:3px 7px;white-space:nowrap;text-transform:uppercase;letter-spacing:.07em}
.badge.ok{background:#E1F2E8;color:#14603A}
.badge.no,.badge.bad{background:#FBE5E5;color:#96222A}
.badge.na{background:var(--rule3);color:var(--muted)}
.badge:empty{display:none}
.kerr{color:var(--crit);font-weight:600}.kerr:empty{display:none}
pre.code{position:relative;background:var(--graphite);color:#DDE2F0;font:12px/1.6 var(--mono);padding:14px 16px;border-radius:3px;overflow:auto;max-height:460px;margin:8px 0 12px;white-space:pre;border:1px solid var(--graphite3)}
pre.code .copy{position:absolute;top:7px;right:7px;background:var(--graphite3);color:var(--onGraphite);border:0;border-radius:2px;font:600 10px/1 var(--mono);padding:5px 9px;text-transform:uppercase;letter-spacing:.08em}
pre.code .copy:hover{background:var(--signal);color:#fff}
.steps li{margin:5px 0}
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:var(--graphite);color:#fff;padding:12px 20px;border-radius:3px;box-shadow:0 10px 30px rgba(20,23,29,.28);z-index:60;max-width:80vw;font-size:13px;border-left:3px solid var(--signal)}
.toast.err{background:#7E1C24;border-left-color:#FF9B9B}

/* ====================================================== load analytics == */
.loadpage{border:1px solid var(--rule);border-radius:3px;padding:12px 14px;margin-bottom:12px}
.loadpage h4{margin:0 0 10px;font:600 12px/1.4 var(--mono);word-break:break-all;color:var(--ink2)}
.loadgrid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:900px){.loadgrid{grid-template-columns:1fr}}
.loadcard{background:var(--panel2);border:1px solid var(--rule2);border-radius:3px;padding:12px}
.gauge{width:44px;height:44px;border-radius:50%;border:3px solid var(--c);display:inline-flex;flex-direction:column;align-items:center;justify-content:center;font:800 13px/1 var(--mono);letter-spacing:-.04em}
.gauge small{font:600 7px/1 var(--mono);color:var(--muted);text-transform:uppercase;letter-spacing:.08em;margin-top:2px}
.metrics{display:grid;grid-template-columns:repeat(7,1fr);gap:1px;margin-top:10px;background:var(--rule2);border:1px solid var(--rule2)}
.metrics div{background:var(--panel);border:0;border-radius:0;padding:6px 7px}
.metrics small{display:block;font:600 8.5px/1.3 var(--mono);color:var(--muted);text-transform:uppercase;letter-spacing:.07em}
.metrics b{font:700 13px/1.3 var(--mono);letter-spacing:-.03em}
@media(max-width:860px){.metrics{grid-template-columns:repeat(3,1fr)}}
.bar{display:grid;grid-template-columns:120px 1fr 70px;gap:8px;align-items:center;font:11.5px/1.5 var(--mono);margin:3px 0}
.bar i{display:block;height:8px;border-radius:1px;background:var(--signal)}
.bar em{font-style:normal;color:var(--muted);text-align:right}
ul.opp{margin:3px 0;padding-left:18px}

/* ======================================================= device matrix == */
.devwrap{overflow:auto;max-height:720px;border:1px solid var(--rule);border-radius:3px}
.devtbl{border-collapse:separate;border-spacing:0}
.devtbl th{position:sticky;top:0;z-index:2;font-size:10px;white-space:nowrap}
.devtbl th small{display:block;opacity:.65;font-weight:400;letter-spacing:.04em}
.devtbl td{vertical-align:top;min-width:110px;padding:7px}
.devtbl td.pg{position:sticky;left:0;background:var(--panel);font:11px/1.4 var(--mono);min-width:142px;max-width:180px;word-break:break-all;z-index:1;border-right:1px solid var(--rule)}
.devtbl img{width:100px;max-height:190px;object-fit:cover;object-position:top;border-radius:2px;border:2px solid #C7E5D3;display:block}
.devtbl img.bad{border-color:var(--crit)}
.devtbl .iss{font:10px/1.4 var(--mono);color:#96222A;max-width:110px;margin-top:4px}

/* print — the report is meant to be read on paper too */
@media print{
  body{background:#fff;background-image:none}
  .appbar,.dashbar,.agentbar,.filters,.atabs{display:none!important}
  .card,details.agent{border-color:#ccc;break-inside:avoid}
  .apane{display:block!important}
}