/* TALOS design system — the ORMI house system, applied to a trading desk.

   Same rules, deliberately: black ground, white type, hairline rules, square
   corners, one accent. The accent (--surge) carries live state and nothing
   else — a working order, a focused control, the active rule. It is the same
   value ORMI uses, because these are two products of one house and an accent
   is a house signal, not a product one. If TALOS should later read as its own
   brand, that is one line below.

   One departure, and it is a considered one. A trading surface has to
   distinguish a refusal from a fill, and doing that with the accent alone would
   either overload --surge or smuggle a second brand colour in through the back
   door. So refusals get no colour at all: they are set in --text on --ink-2
   behind a --line-2 rule, and the weight of the rule does the work. Nothing on
   this surface is ever green. A system that colours gains green teaches the eye
   to look for green, and this one is meant to teach the eye to read the rule
   that fired. */

:root {
  --ink: #000000;
  --ink-1: #08080a;
  --ink-2: #0e0f11;
  --ink-3: #16171a;
  --line: rgba(255, 255, 255, 0.11);
  --line-2: rgba(255, 255, 255, 0.2);
  --paper: #ffffff;
  --text: #f4f5f7;
  --text-2: #b6bac1;
  --muted: #7c828c;
  --surge: #ff4a1c;
  --surge-dim: rgba(255, 74, 28, 0.14);

  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", "JetBrains Mono", Menlo, monospace;

  --pad: clamp(20px, 5vw, 64px);
  --max: 1320px;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--text);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--surge); outline-offset: 3px; }
.muted { color: var(--muted); }

h1, h2, h3, h4 { margin: 0; font-weight: 700; letter-spacing: -0.02em; line-height: 1.08; }

.eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 18px;
}
.eyebrow .rule {
  display: inline-block;
  width: 28px; height: 1px;
  background: var(--surge);
  vertical-align: middle;
  margin-right: 12px;
}

/* ── Numbers ──────────────────────────────────────────────────────────
   Every figure on this surface is tabular and monospaced. A column of
   prices in a proportional face is a column you cannot scan, and this
   is a product whose whole argument is that the client can check it. */

.num {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.num--lg { font-size: 28px; letter-spacing: -0.03em; }

/* ── Verdicts ─────────────────────────────────────────────────────────
   Three states, distinguished by rule weight rather than by hue. */

.verdict {
  border-left: 2px solid var(--line);
  padding: 14px 0 14px 18px;
  background: var(--ink-1);
}
.verdict--allow  { border-left-color: var(--line-2); }
.verdict--clamp  { border-left-color: var(--surge); background: var(--ink-2); }
.verdict--reject { border-left-color: var(--paper); background: var(--ink-2); }

.verdict__head {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
}

/* A fired rule. The id is the thing to read, so it gets the weight. */
.breach {
  display: grid;
  grid-template-columns: minmax(140px, auto) 1fr;
  gap: 4px 18px;
  padding: 10px 0;
  border-top: 1px solid var(--line);
  font-size: 14px;
}
.breach__rule { font-family: var(--mono); font-size: 12px; color: var(--text); }
.breach__why  { color: var(--text-2); }

/* ── Halt ─────────────────────────────────────────────────────────────
   The one banner allowed to take the accent as a full ground. It should
   be rare enough that it is never wallpaper. */

.halt {
  border: 1px solid var(--surge);
  background: var(--surge-dim);
  padding: 16px 20px;
  font-size: 14px;
}
.halt__title {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--surge);
  margin-bottom: 6px;
}

/* ── Mandate diff ─────────────────────────────────────────────────────
   Loosenings are marked, tightenings are not. Asymmetric on purpose:
   a widened limit is the one a reviewer must not be able to skim past. */

.diff { border-top: 1px solid var(--line); padding: 12px 0; font-size: 14px; }
.diff__path { font-family: var(--mono); font-size: 12px; color: var(--text-2); }
.diff__move { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.diff--loosen { border-left: 2px solid var(--surge); padding-left: 16px; }
.diff--loosen .diff__tag {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--surge);
}

/* ── Simulated ────────────────────────────────────────────────────────
   Preview and paper surfaces carry this, always. A simulated fill that
   can be mistaken for a real one is a fabricated record — the CSS is the
   last line of that defence, not the first. */

.sim {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--paper);
  padding: 3px 8px;
}

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--pad); }
.rule-h { height: 1px; background: var(--line); border: 0; margin: 0; }