/* Liquidation Desk — an instrument console, not a web app.
   The whole interface is set in one monospace family: addresses, health
   factors, gwei and block numbers are the actual vocabulary of this domain,
   and letting them align in columns is the point. Hierarchy comes from
   weight, size and tracking rather than from a second typeface.

   Protocol colors are a validated categorical set (OKLCH L 0.48–0.67, chroma
   >= 0.1, CVD-separated on this surface). Their tritan separation sits in the
   6–8 warn band, so a protocol color never appears without its text label.
   Risk bands use a single-hue rose ramp — ordered magnitude, not identity. */

:root {
  --bg:        #0B0E14;
  --surface:   #121826;
  --surface-2: #18202F;
  --line:      #232C3D;
  --line-soft: #1A2231;

  --ink:      #E6EBF4;
  --ink-dim:  #8494AC;
  --ink-mute: #5A6880;

  /* categorical — protocol identity (validated) */
  --morpho:   #7768E8;
  --aave:     #00959F;
  --moonwell: #BC7D22;

  /* sequential — risk intensity, one hue light→dark */
  --risk-0: #FF4D6A;
  --risk-1: #E05270;
  --risk-2: #BE5673;
  --risk-3: #99586F;
  --risk-4: #7C6479;
  --risk-5: #5F6379;
  --risk-6: #4A5A78;

  --good: #2E9E76;

  --r: 3px;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", "Fira Code", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* faint grid, like graph paper under an instrument */
body::before {
  content: "";
  position: fixed; inset: 0;
  background-image:
    linear-gradient(var(--line-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-soft) 1px, transparent 1px);
  background-size: 64px 64px;
  opacity: .35;
  pointer-events: none;
  z-index: 0;
}

:focus-visible { outline: 2px solid var(--morpho); outline-offset: 2px; }

/* `hidden` must win over the layout display values set below */
[hidden] { display: none !important; }

/* ───────────────────────────────── gate ─────────────────────────────────── */
.gate {
  position: fixed; inset: 0; z-index: 10;
  display: grid; place-items: center;
  background: radial-gradient(120% 80% at 50% 0%, #131B2B 0%, var(--bg) 62%);
  padding: 24px;
}
.gate__form {
  width: min(380px, 100%);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 34px 30px 28px;
  animation: rise .5s cubic-bezier(.2,.8,.2,1) both;
}
.gate__mark { position: relative; height: 30px; margin-bottom: 22px; }
.gate__rail {
  position: absolute; top: 14px; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--line) 12%, var(--line) 88%, transparent);
}
.gate__tick {
  position: absolute; top: 4px; left: 50%; width: 2px; height: 22px;
  background: var(--risk-0);
  box-shadow: 0 0 14px rgba(255,77,106,.6);
  animation: tick 3.4s ease-in-out infinite;
}
.gate__title { margin: 0; font-size: 19px; font-weight: 600; letter-spacing: -.02em; }
.gate__sub { margin: 4px 0 26px; color: var(--ink-mute); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }
.gate__label { display: block; font-size: 11px; color: var(--ink-dim); letter-spacing: .1em; text-transform: uppercase; margin-bottom: 8px; }
.gate__input {
  width: 100%; padding: 11px 12px;
  background: var(--bg); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--r);
  font-family: var(--mono); font-size: 15px; letter-spacing: .18em;
}
.gate__input:focus { border-color: var(--morpho); }
.gate__button {
  width: 100%; margin-top: 16px; padding: 11px;
  background: var(--morpho); color: #0B0E14;
  border: 0; border-radius: var(--r);
  font-family: var(--mono); font-size: 13px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; cursor: pointer;
  transition: filter .15s ease;
}
.gate__button:hover { filter: brightness(1.12); }
.gate__error { min-height: 18px; margin: 12px 0 0; color: var(--risk-0); font-size: 12px; }

/* ─────────────────────────────── console ────────────────────────────────── */
.console { position: relative; z-index: 1; padding: 0 20px 60px; max-width: 1500px; margin: 0 auto; }

.bar {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
  padding: 14px 0;
  background: linear-gradient(var(--bg) 78%, transparent);
  border-bottom: 1px solid var(--line);
  margin-bottom: 22px;
}
.bar__id { display: flex; align-items: center; gap: 10px; }
.bar__dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--good); box-shadow: 0 0 10px var(--good);
  animation: pulse 2.4s ease-in-out infinite;
}
.bar__dot.is-stopped { background: var(--ink-mute); box-shadow: none; animation: none; }
.bar__name { font-weight: 700; letter-spacing: .16em; font-size: 12px; }
.bar__chain { color: var(--ink-mute); font-size: 11px; letter-spacing: .1em; }
.bar__readout { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; margin-left: auto; }
.readout { display: flex; flex-direction: column; line-height: 1.25; }
.readout i { font-style: normal; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-mute); }
.readout b { font-size: 13px; font-weight: 600; color: var(--ink); }
.bar__actions { display: flex; gap: 8px; }

.chip {
  padding: 4px 9px; border-radius: 2px; font-size: 11px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  background: rgba(119,104,232,.14); color: var(--morpho);
  border: 1px solid rgba(119,104,232,.4);
}
.chip.is-armed { background: rgba(255,77,106,.14); color: var(--risk-0); border-color: rgba(255,77,106,.45); }

.btn {
  padding: 7px 13px; background: var(--surface-2); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--r);
  font-family: var(--mono); font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; cursor: pointer; transition: border-color .15s, color .15s;
}
.btn:hover { border-color: var(--morpho); color: var(--morpho); }
.btn--ghost { background: transparent; }

.warnings {
  border: 1px solid rgba(255,77,106,.4); background: rgba(255,77,106,.07);
  border-radius: var(--r); padding: 11px 14px; margin-bottom: 20px;
  font-size: 12px; color: #FFB3C0;
}
.warnings p { margin: 3px 0; }

/* ─────────────────────────────── armed strip ────────────────────────────── */
.armed {
  display: flex; align-items: center; gap: 22px; flex-wrap: wrap;
  border: 1px solid rgba(255,77,106,.45); background: rgba(255,77,106,.06);
  border-radius: var(--r); padding: 13px 16px; margin-bottom: 18px;
}
.armed__lead { display: flex; align-items: center; gap: 11px; }
.armed__pip {
  width: 9px; height: 9px; border-radius: 50%; flex: none;
  background: var(--risk-0); box-shadow: 0 0 12px var(--risk-0);
  animation: pulse 1.8s ease-in-out infinite;
}
.armed__lead strong { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--risk-0); }
.armed__lead p { margin: 2px 0 0; font-size: 11px; color: var(--ink-dim); }
.armed__stats { display: flex; gap: 20px; flex-wrap: wrap; margin-left: auto; }
.armed.is-halted { border-color: var(--line); background: var(--surface); }
.armed.is-halted .armed__pip { background: var(--ink-mute); box-shadow: none; animation: none; }
.armed.is-halted .armed__lead strong { color: var(--ink-dim); }
.btn--danger { border-color: rgba(255,77,106,.5); color: var(--risk-0); }
.btn--danger:hover { border-color: var(--risk-0); color: var(--risk-0); }

.kind--fire { color: var(--risk-0); font-weight: 700; }

/* ──────────────────────────── signature: the rail ───────────────────────── */
.rail-panel {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r); padding: 20px 22px 16px; margin-bottom: 18px;
}
.panel__head { margin-bottom: 16px; }
.panel__head h2 { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.panel__head p { margin: 4px 0 0; color: var(--ink-mute); font-size: 12px; }

.rail { position: relative; height: 132px; overflow: hidden; border-radius: 2px; }
.rail__plot { position: absolute; inset: 0 0 24px; }

/* the hard line the whole business turns on */
.rail__threshold {
  position: absolute; top: 0; bottom: 24px; left: 18%;
  border-left: 1px dashed rgba(255,77,106,.65);
}
.rail__threshold span {
  position: absolute; top: 2px; left: 11px; white-space: nowrap;
  font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--risk-0);
}

.rail__axis {
  position: absolute; left: 0; right: 0; bottom: 0; height: 24px;
  border-top: 1px solid var(--line);
  padding-top: 5px; font-size: 10px; color: var(--ink-mute); letter-spacing: .08em;
}

/* ambient: a sweep that runs while the engine scans — the vigil signal */
.rail__sweep {
  position: absolute; top: 0; bottom: 24px; width: 90px;
  background: linear-gradient(90deg, transparent, rgba(119,104,232,.13), transparent);
  transform: translateX(-100px); opacity: 0;
}
.rail__sweep.is-active { opacity: 1; animation: sweep 3.2s linear infinite; }

.dot {
  position: absolute; width: 9px; height: 9px; border-radius: 50%;
  transform: translate(-50%, -50%);
  border: 2px solid var(--bg); /* 2px surface ring so overlapping marks read */
  transition: left .7s cubic-bezier(.2,.8,.2,1), top .7s cubic-bezier(.2,.8,.2,1);
}
.dot--morpho   { background: var(--morpho); }
.dot--aave     { background: var(--aave); }
.dot--moonwell { background: var(--moonwell); }
.dot--critical { animation: flare 1.5s ease-in-out infinite; }

.rail__legend {
  display: flex; gap: 18px; align-items: center; margin-top: 12px;
  font-size: 11px; color: var(--ink-dim);
}
.lg { display: inline-flex; align-items: center; gap: 6px; }
.lg--right { margin-left: auto; color: var(--ink-mute); }
.sw { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.sw--morpho { background: var(--morpho); }
.sw--aave { background: var(--aave); }
.sw--moonwell { background: var(--moonwell); }

/* ───────────────────────────────── tiles ────────────────────────────────── */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin-bottom: 18px; }
.tile {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r); padding: 15px 17px;
}
.tile h3 { margin: 0; font-size: 10px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-mute); }
.tile__num { margin: 9px 0 3px; font-size: 30px; font-weight: 700; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.tile__sub { margin: 0; font-size: 11px; color: var(--ink-mute); }
.tile--alert.is-hot { border-color: rgba(255,77,106,.55); background: rgba(255,77,106,.06); }
.tile--alert.is-hot .tile__num { color: var(--risk-0); }

/* ───────────────────────────────── grid ─────────────────────────────────── */
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); gap: 12px; }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 18px 20px; }
.panel--feed { grid-column: 1 / -1; }

.bands { display: flex; flex-direction: column; gap: 7px; }
.band { display: grid; grid-template-columns: 78px 1fr 92px; gap: 11px; align-items: center; font-size: 11px; }
.band__label { color: var(--ink-dim); letter-spacing: .04em; }
/* both are spans, so they must be blocks for width/height to apply at all */
.band__track { display: block; height: 15px; background: var(--surface-2); border-radius: 2px; overflow: hidden; }
.band__fill { display: block; height: 100%; border-radius: 0 2px 2px 0; transition: width .6s cubic-bezier(.2,.8,.2,1); }
.band__val { text-align: right; color: var(--ink-mute); font-variant-numeric: tabular-nums; }

.table-wrap { overflow-x: auto; }
.tbl { width: 100%; border-collapse: collapse; font-size: 12px; }
.tbl th {
  text-align: left; font-size: 10px; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-mute);
  padding: 0 10px 8px 0; border-bottom: 1px solid var(--line); white-space: nowrap;
}
.tbl td { padding: 8px 10px 8px 0; border-bottom: 1px solid var(--line-soft); font-variant-numeric: tabular-nums; }
.tbl .num { text-align: right; }
.tbl tbody tr:hover { background: var(--surface-2); }
.tag { display: inline-flex; align-items: center; gap: 5px; }
.tag i { width: 7px; height: 7px; border-radius: 50%; display: inline-block; flex: none; }
.hf--crit { color: var(--risk-0); font-weight: 700; }
.hf--warn { color: #D9944A; }
.addr { color: var(--ink-dim); }
.tier { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; }
.tier--fast { color: var(--risk-0); }
.tier--slow { color: var(--ink-dim); }
.empty { color: var(--ink-mute); font-size: 12px; padding: 14px 0; }

.feed { list-style: none; margin: 0; padding: 0; max-height: 330px; overflow-y: auto; }
.feed li {
  display: grid; grid-template-columns: 62px 92px 1fr; gap: 12px; align-items: baseline;
  padding: 7px 0; border-bottom: 1px solid var(--line-soft); font-size: 12px;
  animation: slide .35s ease both;
}
.feed time { color: var(--ink-mute); font-size: 11px; font-variant-numeric: tabular-nums; }
.feed .kind { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; }
.kind--opportunity { color: var(--morpho); }
.kind--competitor { color: var(--moonwell); }
.kind--log { color: var(--ink-mute); }
.kind--error { color: var(--risk-0); }
.feed .msg { color: var(--ink-dim); }
.feed .msg b { color: var(--ink); font-weight: 600; }

/* ─────────────────────────────── motion ─────────────────────────────────── */
@keyframes rise  { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes slide { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: none; } }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes flare {
  0%,100% { box-shadow: 0 0 0 0 rgba(255,77,106,.55); }
  50%     { box-shadow: 0 0 0 7px rgba(255,77,106,0); }
}
@keyframes tick  { 0%,100% { opacity: .25; } 50% { opacity: 1; } }
@keyframes sweep { from { transform: translateX(-100px); } to { transform: translateX(1500px); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

@media (max-width: 720px) {
  .bar__readout { width: 100%; margin-left: 0; gap: 14px; }
  .tile__num { font-size: 25px; }
  .band { grid-template-columns: 66px 1fr 70px; }
}