:root{
  --bg:#0c0e10; --panel:#131619; --panel2:#181c20;
  --line:#242a30; --line2:#2f363d;
  --text:#dfe4e9; --dim:#98a2ad; --mute:#6d7883;
  --amber:#e0a33c; --red:#d2544c; --teal:#3fa79b; --olive:#8a9a4a;
  --orange:#d97b2a; --slate:#7d8894; --rose:#c07c8a;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--text);
  font:13px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--teal)}
code,.mono{font-family:var(--mono);font-size:12px}

/* ---------------------------------------------------------------- topbar */
.topbar{
  position:sticky; top:0; z-index:40;
  display:flex; align-items:center; gap:18px; flex-wrap:wrap;
  padding:10px 16px; background:rgba(12,14,16,.94);
  border-bottom:1px solid var(--line); backdrop-filter:blur(8px);
}
.brand{
  font-family:var(--mono); font-size:12px; letter-spacing:.16em;
  color:var(--amber); display:flex; align-items:center; gap:8px;
}
.brand span{color:var(--mute); letter-spacing:.16em}
.brand::before{content:"";width:7px;height:7px;background:var(--amber);border-radius:50%}

#lookup{display:flex;gap:0}
#lookup input{
  width:260px; padding:7px 11px; background:#0a0c0e; color:var(--text);
  border:1px solid var(--line2); border-right:0; border-radius:3px 0 0 3px;
  font-family:var(--mono); font-size:12px; outline:none;
}
#lookup input:focus{border-color:var(--amber)}
#lookup button{
  padding:7px 15px; background:var(--amber); color:#15181b; border:0;
  border-radius:0 3px 3px 0; font-weight:600; font-size:12px; cursor:pointer;
  letter-spacing:.04em;
}
#lookup button:hover{background:#f0b451}

.presets{display:flex;gap:6px;flex-wrap:wrap}
.presets button{
  background:transparent;color:var(--dim);border:1px solid var(--line2);
  font-family:var(--mono);font-size:11px;padding:4px 8px;border-radius:3px;cursor:pointer;
}
.presets button:hover{border-color:var(--amber);color:var(--amber)}
.presets button.on{border-color:var(--amber);color:var(--amber);background:#1d1a12}

.status{font-family:var(--mono);font-size:11px;color:var(--mute)}

/* Owns the right-hand alignment now that the status line is not the last item. */
.permalink{margin-left:auto;display:flex;align-items:center;gap:9px}
.permalink button{
  background:transparent;color:var(--dim);border:1px solid var(--line2);
  font-family:var(--mono);font-size:11px;padding:5px 9px;border-radius:3px;cursor:pointer;
}
.permalink button:hover{border-color:var(--amber);color:var(--amber)}
.permalink output{font-family:var(--mono);font-size:11px;color:var(--teal);white-space:nowrap}
/* Clipboard refused (plain HTTP, or a browser that will not grant it): show the URL
   selected so it can be copied by hand rather than failing silently. */
.permalink output.fallback{
  color:var(--dim);user-select:all;border-bottom:1px dashed var(--line2);padding-bottom:1px;
}
.status.err{color:var(--red)}

.corpus{
  padding:5px 16px; font-family:var(--mono); font-size:11px; color:var(--mute);
  border-bottom:1px solid var(--line); background:#0a0c0e;
}
.corpus b{color:var(--dim);font-weight:500}

/* ------------------------------------------------------------------ grid */
main{padding:14px; display:flex; flex-direction:column; gap:14px}

.card{
  background:var(--panel); border:1px solid var(--line); border-radius:4px;
  padding:0; overflow:hidden;
}
.card > header{
  display:flex; align-items:baseline; gap:12px;
  padding:9px 13px; border-bottom:1px solid var(--line); background:var(--panel2);
}
.card > header h2{
  margin:0; font-family:var(--mono); font-size:11px; font-weight:600;
  letter-spacing:.14em; color:var(--amber);
}
.card > header p{margin:0; font-size:11.5px; color:var(--mute)}
.card > header .right{margin-left:auto;font-family:var(--mono);font-size:11px;color:var(--dim)}
.card .body{padding:13px}

.split{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start}
.split-3{display:grid;grid-template-columns:1.1fr 1fr 1fr;gap:14px;align-items:start}
@media (max-width:1100px){.split,.split-3{grid-template-columns:1fr}}

/* -------------------------------------------------------------- identity */
.identity .body{padding:0}
.idbar{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(126px,1fr));
  border-bottom:1px solid var(--line);
}
.idbar div{padding:10px 13px;border-right:1px solid var(--line)}
.idbar div:last-child{border-right:0}
.idbar dt{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;color:var(--mute);
  text-transform:uppercase;margin:0 0 4px;
}
.idbar dd{margin:0;font-size:14px;font-family:var(--mono);color:var(--text)}
.idbar dd.sm{font-size:12px}
.idbar dd.warn{color:var(--red)}
.iphead{
  display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;
  padding:13px;border-bottom:1px solid var(--line);
}
.iphead h1{margin:0;font-family:var(--mono);font-size:24px;letter-spacing:.02em}
.iphead .who{color:var(--dim);font-size:13px}
.iphead .pill{
  font-family:var(--mono);font-size:10px;letter-spacing:.1em;padding:3px 8px;
  border:1px solid var(--line2);border-radius:2px;color:var(--dim);
}
.iphead .pill.hot{border-color:var(--red);color:var(--red)}
.iphead .pill.ok{border-color:var(--teal);color:var(--teal)}
.iphead .pill.cool{border-color:var(--amber);color:var(--amber)}

/* --------------------------------------------------------------- generic */
.row{display:flex;align-items:center;gap:8px}
.muted{color:var(--mute)}
.dim{color:var(--dim)}
.note{font-size:11.5px;color:var(--mute);margin:8px 0 0}
.note.warn{color:var(--amber)}
.note.bad{color:var(--red)}
h3.sub{
  margin:14px 0 7px; font-family:var(--mono); font-size:10px; letter-spacing:.13em;
  color:var(--mute); text-transform:uppercase;
}
h3.sub:first-child{margin-top:0}

svg{display:block;overflow:visible}
.tip{
  position:fixed;pointer-events:none;z-index:90;background:#05070a;
  border:1px solid var(--line2);border-radius:3px;padding:6px 9px;
  font-family:var(--mono);font-size:11px;color:var(--text);
  max-width:420px;white-space:pre-wrap;
}

/* ---------------------------------------------------------------- meters */
.meter{height:7px;background:#0a0c0e;border:1px solid var(--line);border-radius:2px;overflow:hidden}
.meter i{display:block;height:100%}
.legend{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:9px;font-size:11.5px;color:var(--dim)}
.legend span{display:flex;align-items:center;gap:6px}
.sw{width:9px;height:9px;border-radius:2px;display:inline-block}

/* -------------------------------------------------------------- evidence */
.rank{display:flex;flex-direction:column;gap:3px}
.rank .r{display:grid;grid-template-columns:1fr 54px;gap:8px;align-items:center}
.rank .k{
  font-family:var(--mono);font-size:11.5px;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;
}
.rank .b{height:3px;background:#0a0c0e;grid-column:1/3;border-radius:2px;overflow:hidden}
.rank .b i{display:block;height:100%;background:var(--slate);min-width:1.2%}
.rank .n{font-family:var(--mono);font-size:11px;color:var(--dim);text-align:right}

table{width:100%;border-collapse:collapse;font-size:11.5px}
th{
  text-align:left;font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;
  color:var(--mute);text-transform:uppercase;padding:0 8px 6px 0;font-weight:500;
  border-bottom:1px solid var(--line);
}
td{
  padding:4px 8px 4px 0;border-bottom:1px solid #1b2025;
  font-family:var(--mono);font-size:11.5px;
}
td.num{text-align:right}
td.k{max-width:340px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
tr:hover td{background:#171b1f}

.empty{padding:60px 16px;text-align:center;color:var(--mute);font-family:var(--mono);font-size:12px}
footer{padding:10px 16px 26px;font-family:var(--mono);font-size:10.5px;color:var(--mute)}

.spin{display:inline-block;width:9px;height:9px;border:1.5px solid var(--amber);
  border-top-color:transparent;border-radius:50%;animation:s .7s linear infinite}
@keyframes s{to{transform:rotate(360deg)}}

/* axis text lives in HTML, never in a stretched SVG viewBox */
.ticks{position:relative;font-family:var(--mono);font-size:9.5px;color:var(--mute)}
.ticks i{position:absolute;font-style:normal;white-space:nowrap}
.ticks.h i{top:1px}
.ticks.v i{right:6px;text-align:right}