/* ============================================================================
   IN THE TRENCHES — design system
   ----------------------------------------------------------------------------
   Shared tokens + primitives for EVERY tool on the domain. A new tool imports
   this file, uses the tokens, and is automatically part of the family.

   IDENTITY
   The base is warm near-black, not the usual blue-black — trenches are dirt,
   not space. The signal colour is acid lime: loud enough to find in a wall of
   data, and deliberately not the terminal-green every other scanner uses.
   Ember orange is the only secondary accent. Red and amber are reserved
   strictly for severity so they never lose meaning.
   ========================================================================= */
:root{
  /* ── surfaces: warm charcoal, five steps of elevation ── */
  --s0:#0A0907;   /* page */
  --s1:#100E0B;   /* card */
  --s2:#15130F;   /* raised */
  --s3:#1C1913;   /* hover / active */
  --s4:#252118;   /* popover */
  --line:#221E18;
  --line2:#322C22;
  --line3:#443C2E;

  /* ── type ──
     --tx3 carries real text (table headers, scores, context lines), so it has
     to clear 4.5:1. The old value was 3.6:1 and --tx4 below it was ~2:1 — the
     two columns a trader actually reads were the least legible on screen.
     --tx4 is now non-text only: placeholders, dividers, dots. */
  --tx:#F2EFE8;
  --tx2:#A69E8E;
  --tx3:#8C8474;   /* 5.4:1 on --s0 */
  --tx4:#6F685B;   /* 3.5:1 — decoration only */

  /* ── signal ── */
  --acid:#D4FF3F;              /* primary */
  --acid-lo:#A8D420;           /* gradient stop for the primary CTA */
  --on-acid:#0A0907;           /* text on an acid fill */
  --v:#E4F5C8;                 /* the value string itself */
  --acid-dk:#1F2A08;
  --acid-gl:rgba(212,255,63,.16);
  --ember:#FF7A2F;             /* secondary */
  --ember-dk:#2A1409;

  /* ── severity (reserved) ── */
  --crit:#FF3D57;  --crit-dk:#2C0B11;
  --warn:#FFB020;  --warn-dk:#2A1D05;
  --info:#5BC8FF;  --info-dk:#08222E;
  --ok:#7BE38B;

  /* ── type stacks ── */
  --mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --sans:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;

  /* ── shape & depth ── */
  --r1:6px; --r2:10px; --r3:14px;
  --sh1:0 1px 2px rgba(0,0,0,.5);
  --sh2:0 10px 34px rgba(0,0,0,.6);
  --glow:0 0 14px rgba(212,255,63,.35);
}

/* ─────────────────────────────────────────────────────────── base reset */
*{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%}
body{
  background:var(--s0); color:var(--tx);
  font-family:var(--sans); font-size:13.5px; line-height:1.5;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  /* faint dug-in texture: horizontal strata, like a trench wall */
  background-image:
    radial-gradient(1000px 520px at 8% -10%, rgba(212,255,63,.045), transparent 62%),
    radial-gradient(760px 420px at 96% -6%, rgba(255,122,47,.035), transparent 60%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.011) 0 1px, transparent 1px 4px);
  background-attachment:fixed;
}
a{color:var(--acid);text-decoration:none}
a:hover{text-decoration:underline}
code,.mono{font-family:var(--mono);font-variant-ligatures:none}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
input,select,textarea{font:inherit}
::selection{background:rgba(212,255,63,.26);color:var(--on-acid)}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--s4);border-radius:6px}
::-webkit-scrollbar-thumb:hover{background:var(--line3)}

/* ──────────────────────────────────────────────────────────────── logo */
/* The mark is a trench cross-section: two chevrons cutting down, with the
   find sitting at the bottom of the dugout. Works from 18px to poster size. */
.itt-mark{display:block;flex:none}
.itt-mark .wall{stroke:var(--acid);fill:none;stroke-width:2.6;
  stroke-linecap:round;stroke-linejoin:round}
.itt-mark .wall-in{stroke:var(--acid);opacity:.34;stroke-width:2.2}
.itt-mark .find{fill:var(--acid)}
.itt-mark .sweep{stroke:var(--acid);fill:none;stroke-width:1.6;opacity:.5;
  stroke-linecap:round;transform-origin:16px 25px}
.itt-mark.live .find{animation:itt-pulse 2.4s ease-in-out infinite}
.itt-mark.live .sweep{animation:itt-sweep 3.4s ease-in-out infinite}
@keyframes itt-pulse{0%,100%{opacity:1}50%{opacity:.35}}
@keyframes itt-sweep{0%,100%{opacity:.18}50%{opacity:.62}}

.itt-brand{display:flex;align-items:center;gap:10px;min-width:0}
.itt-brand .txt{display:flex;flex-direction:column;line-height:1.06;min-width:0}
.itt-brand .l1{font-size:9px;letter-spacing:.24em;color:var(--tx3);
  font-weight:700;white-space:nowrap;text-transform:uppercase}
.itt-brand .l2{font-size:14.5px;letter-spacing:.02em;font-weight:800;
  color:var(--tx);white-space:nowrap}
.itt-brand .l2 em{font-style:normal;color:var(--acid)}

/* ────────────────────────────────────────────────────────── primitives */
.btn{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;
  border:1px solid var(--line2);border-radius:99px;color:var(--tx2);
  font-size:11.5px;transition:.14s;white-space:nowrap}
.btn:hover{color:var(--tx);border-color:var(--line3);background:var(--s2)}
.btn.on{color:var(--acid);border-color:rgba(212,255,63,.32);background:var(--acid-dk)}
.btn.solid{background:var(--acid);color:var(--on-acid);border-color:transparent;font-weight:700}
.btn.solid:hover{filter:brightness(1.08);background:var(--acid)}

.tag{display:inline-flex;align-items:center;gap:4px;padding:1px 7px;
  border-radius:99px;font-size:10px;font-weight:600;letter-spacing:.02em;
  border:1px solid var(--line2);color:var(--tx3);white-space:nowrap}
.tag.acid{color:var(--acid);border-color:rgba(212,255,63,.3);background:var(--acid-dk)}
.tag.ember{color:var(--ember);border-color:rgba(255,122,47,.3);background:var(--ember-dk)}
.tag.crit{color:var(--crit);border-color:rgba(255,61,87,.3);background:var(--crit-dk)}
.tag.warn{color:var(--warn);border-color:rgba(255,176,32,.28);background:var(--warn-dk)}
.tag.info{color:var(--info);border-color:rgba(91,200,255,.28);background:var(--info-dk)}
.tag.file{font-family:var(--mono);font-weight:400;color:var(--tx4)}

.card{background:var(--s1);border:1px solid var(--line);border-radius:var(--r2);
  overflow:hidden}
.card > .hd{display:flex;align-items:center;gap:9px;padding:11px 15px;
  border-bottom:1px solid var(--line);font-size:10.5px;text-transform:uppercase;
  letter-spacing:.1em;color:var(--tx3);font-weight:700;background:var(--s2)}
.card > .hd .n{font-family:var(--mono);color:var(--tx4);letter-spacing:0;
  text-transform:none;font-weight:500}
.card > .hd .r{margin-left:auto;display:flex;gap:6px}
.card > .bd{padding:6px}
.card > .bd.flush{padding:0}

.kicker{display:inline-flex;align-items:center;gap:7px;padding:3px 11px;
  border-radius:99px;border:1px solid var(--line2);background:var(--s1);
  font-size:10px;letter-spacing:.14em;color:var(--tx3);text-transform:uppercase;
  font-weight:700}
.kicker .d{width:5px;height:5px;border-radius:50%;background:var(--acid);
  box-shadow:0 0 8px var(--acid)}

.empty{padding:56px 24px;text-align:center;border:1px dashed var(--line2);
  border-radius:var(--r3);background:var(--s1)}
.empty .ic{font-size:26px;opacity:.3;margin-bottom:12px}
.empty b{display:block;color:var(--tx);margin-bottom:7px;font-size:15px;font-weight:600}
.empty p{color:var(--tx3);margin:0 auto;max-width:440px;font-size:13px;line-height:1.6}

.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);
  background:var(--s4);border:1px solid var(--line3);color:var(--tx);
  padding:9px 18px;border-radius:99px;font-size:12.5px;z-index:300;
  box-shadow:var(--sh2);animation:itt-rise .22s cubic-bezier(.2,.8,.3,1)}
@keyframes itt-rise{from{opacity:0;transform:translate(-50%,12px)}}

.hidden{display:none !important}