/* ══════════════════════════════════════════════════════════════════
   This tool's own token names, mapped onto the dashboard's palette.
   The values live in qe-theme.css, lifted from the dashboard itself, so
   every surface renders identically and a palette change happens once.
   ══════════════════════════════════════════════════════════════════ */
:root {
  --surface:var(--card); --sunken:var(--inner); --overlay:var(--panel);
  --fg:var(--t1); --fg-soft:var(--t2); --fg-mute:var(--t3); --fg-faint:var(--t4);
  --line-soft:var(--border2);
  --accent:var(--green); --accent-fg:#04130d; --accent-soft:color-mix(in srgb, var(--green) 14%, transparent);
  --ok:var(--green); --ok-soft:color-mix(in srgb, var(--green) 12%, transparent);
  --warn:var(--gold); --warn-soft:color-mix(in srgb, var(--gold) 12%, transparent);
  --bad:var(--red); --bad-soft:color-mix(in srgb, var(--red) 12%, transparent);
  --info:var(--blue); --info-soft:color-mix(in srgb, var(--blue) 12%, transparent);
  --radius:var(--r); --radius-sm:var(--r-sm);
  --fs-xs:11.5px; --fs-sm:13px; --fs-base:14.5px; --fs-lg:17px;
  --fs-xl:22px; --fs-2xl:28px; --fs-3xl:40px;
  --gap-lg:24px; --pad:18px; --ctrl-h:var(--ctrl);
}

*,*::before,*::after { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--fg);
       font:400 var(--fs-base)/1.55 var(--font-ui); -webkit-font-smoothing:antialiased; }
h1,h2,h3 { margin:0; font-weight:600; letter-spacing:-.015em; }
h1 { font-size:var(--fs-2xl); } h2 { font-size:var(--fs-xl); } h3 { font-size:var(--fs-lg); }
p { margin:0; }
.num { font-family:var(--font-mono); font-variant-numeric:tabular-nums; }
.hide { display:none !important; }
.mute { color:var(--fg-mute); }

.shell { max-width:900px; margin:0 auto; padding:26px 20px 90px;
         display:flex; flex-direction:column; gap:var(--gap-lg); }
.topbar { display:flex; align-items:center; gap:var(--gap); flex-wrap:wrap;
          padding-bottom:14px; border-bottom:1px solid var(--line); }
.brand { font-weight:700; font-size:var(--fs-lg); letter-spacing:-.02em; }
.brand span { color:var(--accent); }
.grow { flex:1; }
.eyebrow { font:500 var(--fs-xs)/1 var(--font-mono); letter-spacing:.12em;
           text-transform:uppercase; color:var(--fg-mute); }

.card { background:var(--surface); border:1px solid var(--line);
        border-radius:var(--radius); padding:var(--pad); box-shadow:var(--shadow); }
.row { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.stack { display:flex; flex-direction:column; gap:var(--gap); }

input[type=text],input[type=password],input[type=search] {
  height:var(--ctrl-h); padding:0 12px; background:var(--sunken); color:var(--fg);
  border:1px solid var(--line); border-radius:var(--radius-sm);
  font:400 var(--fs-base)/1.4 var(--font-ui); }
button { height:var(--ctrl-h); padding:0 15px; border-radius:var(--radius-sm);
  border:1px solid var(--line); background:var(--surface); color:var(--fg);
  font:600 var(--fs-base)/1 var(--font-ui); cursor:pointer; }
button:hover:not(:disabled) { border-color:var(--accent); }
button.primary { background:var(--accent); color:var(--accent-fg); border-color:var(--accent); }
button.small { height:28px; padding:0 10px; font-size:var(--fs-sm); }
button:disabled { opacity:.45; cursor:not-allowed; }
:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }

/* ── the ranked list ── */
.rank { display:flex; flex-direction:column; border:1px solid var(--line);
        border-radius:var(--radius); overflow:hidden; background:var(--surface); }
.rk { display:grid; grid-template-columns:34px 62px 1fr auto auto;
      gap:12px; align-items:center; padding:11px 14px;
      border-bottom:1px solid var(--line-soft); cursor:pointer; }
.rk:last-of-type { border-bottom:0; }
.rk:hover { background:var(--sunken); }
.rk .pos { font:500 var(--fs-sm)/1 var(--font-mono); color:var(--fg-faint);
           text-align:right; }
.rk .sym { font:700 var(--fs-base)/1.2 var(--font-mono); letter-spacing:-.02em; }
.rk .nm { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
          color:var(--fg-soft); font-size:var(--fs-sm); }
.rk .sc { font:700 var(--fs-xl)/1 var(--font-mono); font-variant-numeric:tabular-nums; }
.rk .vd { font:500 var(--fs-xs)/1 var(--font-mono); letter-spacing:.06em;
          text-transform:uppercase; padding:4px 8px; border-radius:3px; white-space:nowrap; }
.v-exceptional { background:var(--ok-soft); color:var(--ok); }
.v-strong { background:var(--accent-soft); color:var(--accent); }
.v-watch { background:var(--info-soft); color:var(--info); }
.v-marginal { background:var(--warn-soft); color:var(--warn); }
.v-pass { background:var(--bad-soft); color:var(--bad); }

/* ── the expanded breakdown ── */
.detail { padding:4px 14px 18px; border-bottom:1px solid var(--line-soft);
          background:var(--sunken); display:flex; flex-direction:column; gap:12px; }
.sect { display:flex; flex-direction:column; gap:6px; }
.sect-head { display:flex; align-items:baseline; gap:10px; }
.sect-head .lbl { font-weight:600; font-size:var(--fs-sm); }
.sect-head .pts { font:600 var(--fs-sm)/1 var(--font-mono); margin-left:auto; }
.bar { height:5px; border-radius:99px; background:var(--line); overflow:hidden; }
.bar > i { display:block; height:100%; background:var(--accent); }
.comp { display:grid; grid-template-columns:1fr auto; gap:4px 12px;
        padding:5px 0 5px 12px; border-left:2px solid var(--line);
        font-size:var(--fs-sm); color:var(--fg-soft); }
.comp .cl { font-weight:500; color:var(--fg); }
.comp .cp { font-family:var(--font-mono); font-variant-numeric:tabular-nums;
            white-space:nowrap; }
.comp .cd { grid-column:1/-1; color:var(--fg-mute); font-size:var(--fs-xs); }
.comp.na { opacity:.6; }
.comp .ins { grid-column:1/-1; margin-top:3px; padding:7px 9px;
             background:var(--overlay); border:1px dashed var(--line);
             border-radius:var(--radius-sm);
             font:400 var(--fs-xs)/1.5 var(--font-mono); color:var(--fg-soft);
             white-space:pre-wrap; word-break:break-word; }

.msg { display:flex; gap:10px; padding:10px 13px; border-radius:var(--radius-sm);
       font-size:var(--fs-sm); line-height:1.5; border:1px solid; }
.msg .tag { font:500 var(--fs-xs)/1.5 var(--font-mono); letter-spacing:.08em;
            text-transform:uppercase; flex:none; }
.msg.ok { background:var(--ok-soft); border-color:var(--ok); color:var(--ok); }
.msg.warn { background:var(--warn-soft); border-color:var(--warn); color:var(--warn); }
.msg.bad { background:var(--bad-soft); border-color:var(--bad); color:var(--bad); }
.msg.info-m { background:var(--info-soft); border-color:var(--info); color:var(--info); }

.tiles { display:grid; grid-template-columns:repeat(auto-fit,minmax(110px,1fr));
         gap:1px; background:var(--line); border:1px solid var(--line);
         border-radius:var(--radius); overflow:hidden; }
.tile { background:var(--surface); padding:11px 13px; display:flex;
        flex-direction:column; gap:3px; }
.tile .k { font:500 var(--fs-xs)/1 var(--font-mono); letter-spacing:.09em;
           text-transform:uppercase; color:var(--fg-mute); }
.tile .v { font:600 var(--fs-lg)/1.1 var(--font-mono); font-variant-numeric:tabular-nums; }

@media (max-width:620px) {
  .shell { padding:18px 13px 60px; }
  .rk { grid-template-columns:28px 54px 1fr auto; }
  .rk .vd { display:none; }
}