@import url('https://fonts.googleapis.com/css2?family=DotGothic16&family=IBM+Plex+Mono:wght@400;500;600;700&family=IBM+Plex+Sans:ital,wght@0,400;0,500;1,400&display=swap');
/* ---------------------------------------------------------------------------
   Repainted to P1 Green.
   
   The legacy palette is remapped onto the P1 tokens rather than the markup
   being rewritten, because these files are token-driven and seventeen pages
   share them. One edit here moves every page.
   
   What this DOES achieve: ground, phosphor, rules, faces and the accent are
   the terminal system everywhere.
   
   What it does NOT: rule 1 says direction must be carried by a glyph, because
   green is already the text colour. Retrofitting ▲/▼ needs markup, so any page
   still signalling gain by hue alone is repainted but not yet compliant.
   --------------------------------------------------------------------------- */
/* ============================================================================
   prior.css: the Prior Protocol design system.

   Implemented from the brand handoff. The rules that are not negotiable and
   that everything else follows from:

     Radius 0 everywhere. Square corners are a brand rule. The only circles in
     the system are the strike dot and status dots.

     No shadows. No gradients, except the scanline field and the Raster sweep.

     Signal green never exceeds about 5% of a surface. It marks the strike, one
     number, or one active state. Red is reserved for shorts and failures.

     All prices, strikes, sizes, hashes, addresses and timestamps are JetBrains
     Mono with tabular figures. Data is never set in Space Grotesk.

   Voice, which the markup has to carry rather than the stylesheet: terse and
   technical, declarative, numbers over adjectives.
   ========================================================================== */


:root {
  --void: #050B07;
  --shelf: #091308;
  --shelf-2: #091308;
  --line: rgba(125,255,166,.24);
  --chalk: #7DFFA6;
  --slate: rgba(125,255,166,.84);
  --slate-dim: rgba(125,255,166,.62);
  --signal: #3DE874;
  --signal-ink: #03170A;
  --azure: rgba(125,255,166,.84);
  --alert: #FF6B47;

  --grotesk: 'IBM Plex Sans', system-ui, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, Menlo, monospace;

  /* 4 · 8 · 12 · 14 · 18 · 24 · 28 · 34 · 44 · 56 · 72 · 96 · 132 */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 14px; --s5: 18px;
  --s6: 24px; --s7: 28px; --s8: 34px; --s9: 44px; --s10: 56px;
  --s11: 72px; --s12: 96px; --s13: 132px;

  --gut: clamp(20px, 5vw, 72px);
  --maxw: 1240px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  border-radius: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--void);
  color: var(--chalk);
  font-family: var(--grotesk);
  font-size: 17px;
  line-height: 1.55;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--chalk);
  text-decoration: none;
  transition: color 140ms ease-out, border-color 140ms ease-out;
}

a:hover {
  color: var(--signal);
}

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

/* ---------------------------------------------------------------- layout */

.wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--gut);
}

section {
  border-top: 1px solid var(--line);
  padding: var(--s12) 0;
}

section.tight {
  padding: var(--s10) 0;
}

section.flush {
  border-top: 0;
}

/* Every grid is auto-fit. Single breakpoint discipline. */
.cols {
  display: grid;
  gap: var(--s6);
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.cols.wide {
  grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
}

.split {
  display: grid;
  gap: clamp(28px, 4vw, 72px);
  align-items: start;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

/* ------------------------------------------------------------------ type */

h1,
h2,
h3 {
  font-family: var(--grotesk);
  font-weight: 500;
  margin: 0 0 var(--s4);
  color: var(--chalk);
}

.display {
  font-size: clamp(42px, 8vw, 98px);
  line-height: 0.94;
  letter-spacing: -0.04em;
  font-weight: 500;
  max-width: 17ch;
  margin: 0 0 var(--s6);
}

h1 {
  font-size: clamp(34px, 5vw, 56px);
  line-height: 1;
  letter-spacing: -0.03em;
}

h2 {
  font-size: clamp(22px, 2.6vw, 30px);
  line-height: 1.1;
  letter-spacing: -0.02em;
}

h3 {
  font-size: 18px;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

p {
  margin: 0 0 var(--s4);
  color: var(--slate);
  max-width: 62ch;
}

.lead {
  font-size: clamp(16px, 1.6vw, 20px);
  line-height: 1.5;
  color: var(--slate);
  max-width: 58ch;
}

strong {
  color: var(--chalk);
  font-weight: 500;
}

/* Meta labels. Uppercase mono, wide tracking. */
.meta {
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.4;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--slate-dim);
  margin: 0 0 var(--s5);
}

.meta.tight {
  letter-spacing: 0.12em;
}

/* All data. Never Space Grotesk. */
.num,
.mono {
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.4;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

code {
  font-family: var(--mono);
  font-size: 0.87em;
  background: var(--shelf-2);
  border: 1px solid var(--line);
  padding: 1px 5px;
  color: var(--chalk);
}

.sig {
  color: var(--signal);
}

.alert {
  color: var(--alert);
}

.dim {
  color: var(--slate-dim);
}

/* ------------------------------------------------------------------- nav */

.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  height: 64px;
  background: var(--void);
  border-bottom: 1px solid var(--line);
}

.nav-in {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--gut);
  height: 100%;
  display: flex;
  align-items: center;
  gap: var(--s6);
}

.lockup {
  display: flex;
  align-items: center;
  gap: var(--s3);
  color: var(--chalk);
}

.lockup:hover {
  color: var(--chalk);
}

.lockup [data-mark] {
  display: block;
  line-height: 0;
}

.wordmark {
  font-family: var(--grotesk);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: var(--s6);
  margin-left: auto;
  overflow-x: auto;
  scrollbar-width: none;
}

.nav-links::-webkit-scrollbar {
  display: none;
}

.nav-links a {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--slate);
  white-space: nowrap;
}

.nav-links a:hover,
.nav-links a[aria-current='page'] {
  color: var(--chalk);
}

@media (max-width: 760px) {
  .nav-links a:not(.btn) {
    display: none;
  }
}

/* --------------------------------------------------------------- buttons */

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 13px 22px;
  min-height: 44px;
  background: var(--signal);
  color: var(--void);
  border: 1px solid var(--signal);
  cursor: pointer;
  transition: background 140ms ease-out, border-color 140ms ease-out, color 140ms ease-out;
}

.btn:hover {
  background: #74d69d;
  border-color: #74d69d;
  color: var(--void);
}

.btn.ghost {
  background: transparent;
  color: var(--chalk);
  border-color: var(--line);
}

.btn.ghost:hover {
  color: var(--signal);
  border-color: var(--signal);
  background: transparent;
}

.btn.sm {
  font-size: 11px;
  padding: 8px 13px;
  min-height: 0;
}

.btns {
  display: flex;
  gap: var(--s3);
  flex-wrap: wrap;
  margin-top: var(--s7);
}

/* ---------------------------------------------------------------- panels */

.panel {
  background: var(--shelf);
  border: 1px solid var(--line);
  padding: var(--s7);
}

.plate {
  background: var(--shelf-2);
  border: 1px solid var(--line);
}

.step-n {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--signal);
  margin-bottom: var(--s3);
  display: block;
}

/* ------------------------------------------------------------ live strip */

.strip {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: var(--s5) 0;
}

.strip-in {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--gut);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--s5) var(--s6);
}

.strip dt {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--slate-dim);
  margin-bottom: var(--s1);
}

.strip dd {
  margin: 0;
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--chalk);
}

/* ----------------------------------------------------------------- table */

.tw {
  overflow-x: auto;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--mono);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

th {
  text-align: left;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--slate-dim);
  border-bottom: 1px solid var(--line);
  padding: 0 var(--s6) var(--s3) 0;
  white-space: nowrap;
}

td {
  border-top: 1px solid var(--line);
  padding: var(--s4) var(--s6) var(--s4) 0;
  color: var(--slate);
  white-space: nowrap;
}

tbody tr {
  transition: background 120ms ease-out;
}

tbody tr:hover td {
  background: var(--shelf);
}

td.r,
th.r {
  text-align: right;
  padding-right: 0;
}

td.k {
  color: var(--chalk);
}

/* Active row: 2px Signal left edge and a shelf fill. */
tr.active td {
  background: var(--shelf);
}

tr.active td:first-child {
  box-shadow: inset 2px 0 0 var(--signal);
}

.call {
  color: var(--signal);
}

.put {
  color: var(--alert);
}

/* ------------------------------------------------------------ status pill */

.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 6px 11px;
  border: 1px solid currentColor;
}

.pill.open {
  color: var(--signal);
}

.pill.expired {
  color: var(--slate-dim);
}

.pill.liquidated {
  color: var(--alert);
}

/* Status dot. One of only two circles in the system. */
.dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--signal);
  flex: none;
  display: inline-block;
}

.dot.pulse {
  animation: pulse 2.4s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

/* ------------------------------------------------------ scanline + sweep */

.raster-plate {
  position: relative;
  overflow: hidden;
  background: var(--shelf-2);
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  padding: var(--s11) var(--s6);
}

.raster-plate::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    rgba(236, 239, 244, 0.05) 0 1px,
    transparent 1px 5px
  );
  pointer-events: none;
}

.raster-plate::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 24%;
  background: linear-gradient(transparent, rgba(92, 201, 139, 0.13), transparent);
  animation: sweep 6s linear infinite;
  pointer-events: none;
}

@keyframes sweep {
  from { transform: translateY(-100%); }
  to { transform: translateY(400%); }
}

.raster-plate svg {
  position: relative;
  z-index: 1;
}

/* --------------------------------------------------------------- figures */

figure {
  margin: 0;
}

figcaption {
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.5;
  letter-spacing: 0.02em;
  color: var(--slate-dim);
  margin-top: var(--s3);
  max-width: 68ch;
}

figcaption b {
  color: var(--slate);
  font-weight: 400;
}

.chart svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

/* -------------------------------------------------------------- console */

pre.console {
  margin: 0;
  background: var(--shelf-2);
  border: 1px solid var(--line);
  padding: var(--s5);
  overflow-x: auto;
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1.65;
  color: var(--slate);
  white-space: pre;
}

pre.console .c { color: var(--slate-dim); }
pre.console .g { color: var(--signal); }
pre.console .r { color: var(--alert); }
pre.console .b { color: var(--chalk); }

/* --------------------------------------------------------------- inputs */

input[type='text'],
input[type='search'],
select {
  width: 100%;
  background: var(--shelf-2);
  border: 1px solid var(--line);
  color: var(--chalk);
  font-family: var(--mono);
  font-size: 13px;
  padding: 11px 13px;
  transition: border-color 140ms ease-out;
}

input:focus,
select:focus {
  outline: none;
  border-color: var(--signal);
}

input[type='range'] {
  width: 100%;
  accent-color: var(--signal);
}

label.fl {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--slate-dim);
  margin-bottom: var(--s2);
}

/* ------------------------------------------------------------- keyline */

.keyline {
  border-left: 2px solid var(--signal);
  padding-left: var(--s5);
  margin: var(--s6) 0;
}

.keyline.warn {
  border-left-color: var(--alert);
}

.keyline p:last-child {
  margin-bottom: 0;
}

.eqline {
  font-family: var(--mono);
  font-size: 13px;
  background: var(--shelf-2);
  border: 1px solid var(--line);
  padding: var(--s4) var(--s5);
  margin: var(--s5) 0;
  overflow-x: auto;
  color: var(--chalk);
}

ul.plain {
  margin: 0 0 var(--s4);
  padding-left: var(--s5);
  max-width: 62ch;
}

ul.plain li {
  margin-bottom: var(--s2);
  color: var(--slate);
}

/* --------------------------------------------------------------- footer */

footer {
  border-top: 1px solid var(--line);
  padding: var(--s9) 0 var(--s10);
}

.foot-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s5) var(--s6);
  align-items: baseline;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--slate-dim);
}

.foot-row a {
  color: var(--slate-dim);
}

.foot-row a:hover {
  color: var(--signal);
}

.foot-links {
  display: flex;
  gap: var(--s5);
  flex-wrap: wrap;
}

.legal {
  margin-top: var(--s7);
  padding-top: var(--s5);
  border-top: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.6;
  color: var(--slate-dim);
  max-width: 96ch;
  letter-spacing: 0;
  text-transform: none;
}

/* ------------------------------------------------------------ responsive */

@media (max-width: 760px) {
  /* Tables become stacked key/value rows: label left, value right. */
  table.stack thead {
    display: none;
  }
  table.stack tr {
    display: block;
    border-top: 1px solid var(--line);
    padding: var(--s3) 0;
  }
  table.stack td {
    display: flex;
    justify-content: space-between;
    border: 0;
    padding: 3px 0;
  }
  table.stack td::before {
    content: attr(data-label);
    color: var(--slate-dim);
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition-duration: 0.001ms !important;
  }
  /* The static scanline field stays; only the sweep and pulse stop. */
  .raster-plate::after {
    display: none;
  }
}