/* SCRIP — W1 identity sheet. Tokens + signature components.
   Ground is carbon-brown, one gradient only (copper -> periwinkle),
   accent stays under 2% of the surface: it lives in the flip cell,
   the drift bar and the one CTA, nowhere else. */

:root {
  --ground:     #161311;   /* page ground, carbon-brown */
  --surface:    #201A17;   /* the board housing */
  --hairline:   #2E2621;   /* 1px rules, filled chip ground */
  --bone:       #EDE6DE;   /* text, marks, the one white CTA */
  --muted:      #8B8179;   /* labels, secondary numbers */
  --copper:     #C2703B;   /* THE SHARE SIDE: price in shares, quote asset */
  --periwinkle: #9AA8FF;   /* THE DOLLAR SIDE: translation, block */
  --chain:      #2775CA;   /* USDC blue — the CA chain badge only */

  --radius:     14px;      /* thick filled slabs, one radius */
  --radius-sm:  8px;       /* elements under 32px tall */
  --rail:       76px;      /* top rail height */

  --font-display: "Anton", "Public Sans", sans-serif;
  --font-body:    "Manrope", system-ui, sans-serif;
  --font-mono:    "Fragment Mono", ui-monospace, monospace;

  --flip: 5.6s;            /* the board re-posts on this loop */
}

html { background: var(--ground); }
body {
  background: var(--ground);
  color: var(--bone);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* Display sets tight and uppercase; mono owns every label, number,
   contract and block; body font only ever carries prose. */
.font-display, h1, h2, h3 {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: -0.015em;
  line-height: 0.94;
}
.font-mono { font-family: var(--font-mono); }
.font-mono, [class*="text-xs"] { font-size: max(12px, 0.75rem); }

/* ---------- SIGNATURE COMPONENT 1 — flipRow / split-flap cell ----------
   A board row whose status cell is a split flap. Filled slab, a hinge
   seam across the middle, no outline and no glow. */
.split-cell {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  height: 28px;
  min-width: 52px;
  padding: 0 8px;
  background-color: var(--hairline);
  border-radius: var(--radius-sm);
  overflow: hidden;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 28px;
  user-select: none;
  transform-origin: 50% 50%;
  animation: flap var(--flip) var(--d, 0s) infinite ease-in-out;
}
.split-cell::after {           /* the hinge seam */
  content: "";
  position: absolute;
  left: 0; right: 0; top: 50%;
  height: 1px;
  background-color: rgba(22, 19, 17, 0.5);
  z-index: 2;
}
.split-hinge-left, .split-hinge-right {
  position: absolute;
  top: calc(50% - 2px);
  width: 3px; height: 4px;
  background-color: var(--ground);
  z-index: 3;
}
.split-hinge-left  { left: 0; }
.split-hinge-right { right: 0; }

/* The two price cells carry the whole colour law of the site. */
.cell-share { color: var(--copper);     animation: repost var(--flip) var(--d, 0s) infinite ease-in-out; }
.cell-usd   { color: var(--periwinkle); animation: repost var(--flip) var(--d, 0s) infinite ease-in-out; }

@keyframes flap {
  0%, 84%, 100% { transform: scaleY(1); }
  88%           { transform: scaleY(0.06); }
  92%           { transform: scaleY(1); }
}
@keyframes repost {
  0%, 86%, 100% { opacity: 1; }
  89%           { opacity: 0.12; }
  93%           { opacity: 1; }
}

/* ---------- SIGNATURE COMPONENT 2 — scripSlip ----------
   The torn certificate that prints one listing, the contract set
   along the tear line. */
.scrip-slip {
  background: var(--surface);
  border-radius: var(--radius);
  padding: 28px;
}
.scrip-slip .tear {
  border-top: 2px dashed var(--hairline);
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 0.06em;
}

/* ---------- SIGNATURE COMPONENT 3 — driftBar ----------
   A day bar: the filled copper length is how far the quote asset moved,
   the periwinkle tick is the coin repriced with zero swaps. */
.drift-bar {
  height: 4px;
  border-radius: 2px;
  background: var(--hairline);
  overflow: hidden;
}
.drift-bar > .move { background: var(--copper); height: 100%; }
.drift-bar > .tick { background: var(--periwinkle); height: 100%; width: 12px; }

/* ---------- chips and rails: filled slabs, never thin outlines ---------- */
.chip-stock, .chip-rail {
  background: var(--hairline);
  border: 0;
  border-radius: var(--radius-sm);
  display: inline-flex;
  align-items: center;
}
.chip-ca-chain { color: var(--chain); }

/* the single white CTA */
.cta-slab {
  background: var(--bone);
  color: var(--ground);
  border-radius: var(--radius);
  font-family: var(--font-mono);
  letter-spacing: 0.08em;
}

@media (prefers-reduced-motion: reduce) {
  .split-cell, .cell-share, .cell-usd { animation: none; }
}

/* panels and cards: a filled slab on the ground colour, one radius,
   no thin outline anywhere */
.panel-slab {
  background: var(--ground);
  border: 0;
  border-radius: var(--radius);
}
.split-cell.panel-slab, .chip-stock.panel-slab, .chip-rail.panel-slab {
  background: var(--hairline);
  border-radius: var(--radius-sm);
}

/* THE one gradient of the project: copper -> periwinkle, left to right,
   the share side handing over to the dollar side. Two places only:
   the active tab underline and the drift bar. */
.nav-active {
  position: relative;
}
.nav-active::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--copper), var(--periwinkle));
}