/* ============================================================================
   cheatcode design system — PRIMITIVES
   Framework-free CSS classes. The dapp (Tailwind/React) re-implements the same
   markup contract; the landing uses these directly. One system, two render modes.
   Depends on tokens.css.
   ============================================================================ */

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

body.cc {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font-mono);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;            /* global safety: no horizontal scroll on any device */
  text-size-adjust: 100%; -webkit-text-size-adjust: 100%;
}
img, svg { max-width: 100%; }    /* media never forces overflow */

/* ── type registers ───────────────────────────────────────────────────────── */
/* CHROME: uppercase tracked monospace — nav, labels, metadata, panel body copy */
.mono       { font-family: var(--font-mono); }
.label {
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: var(--tracking-mono);
  font-size: 11px;
  color: var(--ink-dim);
}
.label .num { color: var(--ink-faint); margin-right: var(--sp-2); }  /* section number (01) (10) */

/* STATEMENTS: heavy grotesque display — huge, tight, confident. Used sparingly. */
.display {
  font-family: var(--font-display);
  font-weight: 800;            /* Geist 800 (900 loaded too) — monolithic, near the Marathon weight */
  letter-spacing: var(--tracking-tight);
  line-height: .94;
  color: var(--ink);
  margin: 0;
}
.display--hero { font-size: clamp(44px, 9vw, 132px); }
.display--lg   { font-size: clamp(30px, 5vw, 64px); }
.display em { font-style: normal; color: var(--primary); }  /* the lime punch on a word */

/* ── CELL: the drawn grid panel (the design IS the grid) ──────────────────── */
.cell {
  position: relative;
  border: var(--hair) solid var(--line);
  padding: var(--cell-pad);
  background: transparent;
}
.cell + .cell { border-top: 0; }              /* shared rules — no double hairlines */
.cell-row { display: grid; }
.cell-row > .cell + .cell { border-top: var(--hair) solid var(--line); border-left: 0; }
@media (min-width: 720px) {
  .cell-row { grid-auto-flow: column; grid-auto-columns: 1fr; }
  .cell-row > .cell + .cell { border-top: var(--hair) solid var(--line); border-left: 0; }
  .cell-row > .cell + .cell { border-top: 0; border-left: var(--hair) solid var(--line); }
}
.cell__head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: var(--sp-4); }

/* ── BRACKET-LINK: DOCS [↗] — mono link with the bracket affordance ───────── */
.blink {
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: var(--tracking-mono);
  font-size: 12px;
  color: var(--ink);
  text-decoration: none;
  display: inline-flex;
  gap: var(--sp-2);
  align-items: center;
  transition: color .15s;
}
.blink::after { content: "[↗]"; color: var(--ink-faint); transition: color .15s; }
.blink:hover { color: var(--primary); }
.blink:hover::after { color: var(--primary); }

/* ── full-bleed layout: the drawn grid spans the viewport (capped on ultrawide); content padded
   in from the edges and text zones capped for readability (Marathon footer pattern) ──────────── */
.bleed { width: 100%; max-width: var(--bleed-cap); margin-inline: auto; }
.bleed-pad { padding-inline: var(--edge); }      /* generous breathing room from the viewport edge */
.measure { max-width: var(--measure); }          /* cap a text zone inside a full-width cell */
.measure-sm { max-width: var(--measure-sm); }

/* ── READOUT-STRIP: actual READINGS (live / live-soon MEASURED data) ──────────────────────────
   The slots are the SAME ones the dapp dashboard fills via getTierNAV / tierInfo: STATUS · TVL ·
   NAV/SHARE · TIERS ACTIVE · ALLOWLIST SPOTS. Pre-launch they hold placeholders ($0 / 1.0000 /
   "live soon") but they read as instrument READINGS — not a spec sheet. HIERARCHY: the value is the
   foregrounded number; the label is small + dim. Permanent specs belong in .trust-row, NOT here.
   Full-bleed: borders span the grid; first/last cells inset to the content edge (--edge). */
.readout-strip {
  display: grid; grid-auto-flow: row;
  border-top: var(--hair) solid var(--line); border-bottom: var(--hair) solid var(--line);
}
/* stays stacked (one reading per full-width row) until cells are wide enough that the STATUS pill +
   value sit comfortably; only then collapse to the single instrument row. Avoids tablet clipping. */
@media (min-width: 980px) { .readout-strip { grid-auto-flow: column; grid-auto-columns: 1fr; } }
.readout {
  padding: 16px 24px; border-top: var(--hair) solid var(--line);
  display: flex; flex-direction: column; gap: 10px; justify-content: center; min-width: 0;
}
@media (min-width: 980px) { .readout { border-top: 0; border-left: var(--hair) solid var(--line); } }
.readout:first-child { border-top: 0; }   /* strip already carries the top rule */
@media (min-width: 980px) {
  .readout:first-child { border-left: 0; padding-left: var(--edge); }
  .readout:last-child  { padding-right: var(--edge); }
}
.readout__label {
  font-family: var(--font-mono); text-transform: uppercase;
  letter-spacing: var(--tracking-mono); font-size: 10px; color: var(--ink-dim);
}
.readout__value {                       /* the foregrounded reading — precise, alive */
  font-family: var(--font-mono); font-size: 25px; font-weight: 500;
  letter-spacing: -.02em; color: var(--ink); line-height: 1;
}
.readout__value small { font-size: 12px; color: var(--ink-dim); font-weight: 400; letter-spacing: 0; }
.readout__value--venue { color: var(--venue); }
.readout__value--up    { color: var(--up); }
.readout__value--down  { color: var(--down); }
/* a tiny live tick next to a reading that updates */
.readout__live { width: 6px; height: 6px; border-radius: 50%; background: var(--venue);
  box-shadow: 0 0 7px var(--venue-glow); display: inline-block; vertical-align: middle; margin-left: 7px; }

/* ── TRUST-ROW: permanent SPECS / brand markers (NOT measurements) — thin + dim, low weight ──── */
.trust-row { display: flex; flex-wrap: wrap; border-bottom: var(--hair) solid var(--line); }
.trust-chip {
  font-family: var(--font-mono); text-transform: uppercase; letter-spacing: var(--tracking-mono);
  font-size: 10px; color: var(--ink-dim); padding: 9px clamp(14px, 2vw, 20px);
  border-left: var(--hair) solid var(--line); display: flex; align-items: center; gap: 7px;
}
.trust-chip:first-child { border-left: 0; padding-left: var(--edge); }
.trust-chip .mk { color: var(--ink-faint); }    /* + / · marker */

/* ── STATUS PILL ──────────────────────────────────────────────────────────── */
.pill {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-family: var(--font-mono); text-transform: uppercase;
  letter-spacing: var(--tracking-mono); font-size: 10px;
  padding: 3px 9px; border: var(--hair) solid var(--line-up); color: var(--ink-dim);
  width: max-content;
}
.pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pill--live     { color: var(--venue); border-color: color-mix(in srgb, var(--venue) 35%, transparent); }
.pill--settling { color: var(--primary); border-color: color-mix(in srgb, var(--primary) 35%, transparent); }
.pill--paused   { color: var(--down); border-color: color-mix(in srgb, var(--down) 35%, transparent); }

/* ── CTA: the lime punch (active/hover/CTA only — never a big fill) ────────── */
.cta {
  font-family: var(--font-mono); text-transform: uppercase; letter-spacing: var(--tracking-mono);
  font-size: 13px; padding: 12px 20px; background: var(--primary); color: var(--on-accent);
  border: 0; cursor: pointer; display: inline-flex; gap: var(--sp-3); align-items: center;
  transition: box-shadow .2s, transform .2s;
}
.cta:hover { box-shadow: 0 0 28px var(--primary-glow); transform: translateY(-1px); }
.cta--ghost { background: transparent; color: var(--ink); border: var(--hair) solid var(--line-up); }
.cta--ghost:hover { color: var(--primary); border-color: var(--primary); box-shadow: none; }

/* ── HAZARD BLOCK: diagonal lime/black stripes (industrial detailing) ─────── */
.hazard {
  height: 14px;
  background: repeating-linear-gradient(-45deg,
    var(--primary) 0 10px, var(--ground) 10px 20px);
  opacity: .9;
}

/* ── REGISTRATION TICKS: corner crop-brackets framing a panel ─────────────── */
.reg { position: relative; }
.reg::before, .reg::after,
.reg > .reg__br::before, .reg > .reg__br::after {
  content: ""; position: absolute; width: var(--tick); height: var(--tick);
  border-color: var(--ink-faint); border-style: solid; border-width: 0;
}
.reg::before { top: -1px; left: -1px; border-top-width: 1px; border-left-width: 1px; }
.reg::after  { top: -1px; right: -1px; border-top-width: 1px; border-right-width: 1px; }
.reg > .reg__br::before { bottom: -1px; left: -1px; border-bottom-width: 1px; border-left-width: 1px; }
.reg > .reg__br::after  { bottom: -1px; right: -1px; border-bottom-width: 1px; border-right-width: 1px; }

/* + registration marks (decorative-but-systematic) */
.plus { color: var(--ink-faint); font-family: var(--font-mono); user-select: none; }