/* repons — shared design tokens, type and primitives.
   Loaded by every page before its own stylesheet. */

/* Pixelify Sans, self-hosted so the app has no runtime network dependency
   beyond the chain RPC. One variable file covers 400-700. */
@font-face{
  font-family:'Pixelify Sans';font-style:normal;font-weight:400 700;font-display:block;
  src:url(/fonts/pixelify-sans-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Pixelify Sans';font-style:normal;font-weight:400 700;font-display:block;
  src:url(/fonts/pixelify-sans-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+2020,U+20A0-20AB,U+2113,U+A720-A7FF;
}

:root{
  /* Pure black, and greys with no blue in them. The old palette was a cool
     near-black (#07080a) which reads as navy next to a saturated accent. */
  --bg:#000000;
  --bg-2:#0a0a0a;
  --bg-3:#151515;
  --line:#1c1c1c;
  --line-2:#2b2b2b;

  --ink:#f4f4f4;
  --dim:#8b8b8b;
  --faint:#585858;

  /* Robinhood-ish: the brand colour IS the up colour. One saturated green, one
     red, and greys — nothing else gets a hue. */
  --up:#ccff00;
  --up-soft:#3d4d00;
  --down:#ff453a;
  --down-soft:#4d1512;
  --accent:#ccff00;
  --accent-ink:#0a0f00;
  --basis:#7d7d7d;          /* cost basis: deliberately neutral, never a hue */
  --accent-rgb:204,255,0;   /* so tints never hard-code the accent again */
  --up-rgb:204,255,0;
  --down-rgb:255,69,58;
  --ink-rgb:244,244,244;

  /* Bloom. A result is an event on this app, and events glow; facts do not.
     Three strengths so every layer picks from the same ladder instead of
     mixing its own alpha. */
  --glow-up:0 0 18px rgba(var(--up-rgb),.45),0 0 48px rgba(var(--up-rgb),.18);
  --glow-down:0 0 18px rgba(var(--down-rgb),.45),0 0 48px rgba(var(--down-rgb),.18);
  --glow-ink:0 0 14px rgba(var(--ink-rgb),.22);

  --font-display:'Pixelify Sans',ui-monospace,Menlo,Consolas,monospace;
  --font-mono:ui-monospace,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;

  /* ---- the surface ----
     Everything in this app is on one monitor. The result card drew that
     first: a pixel grid under the black, scanlines over it, and lime
     viewfinder corners marking the frame. Both pages sit on the same surface
     now, so the console you type into, the plot you watch and the card you
     share read as one object at three moments. The grid is a texture, never
     a ruler: it is held far below the chart's own rules. */
  --grid-a:.045;
  --grid-px:24px;
  --grid-bg:
    linear-gradient(rgba(var(--ink-rgb),var(--grid-a)) 1px,transparent 1px),
    linear-gradient(90deg,rgba(var(--ink-rgb),var(--grid-a)) 1px,transparent 1px);
  --scan-bg:repeating-linear-gradient(180deg,transparent 0 2px,rgba(0,0,0,.10) 2px 3px);
  /* Four L-brackets, eight strips on one box, so any positioned pseudo-element
     can carry them with background:var(--vf-bg);background-repeat:no-repeat. */
  --vf-len:22px;
  --vf-th:3px;
  --vf-c:var(--accent);
  --vf-bg:
    linear-gradient(var(--vf-c),var(--vf-c)) left top/var(--vf-len) var(--vf-th),
    linear-gradient(var(--vf-c),var(--vf-c)) left top/var(--vf-th) var(--vf-len),
    linear-gradient(var(--vf-c),var(--vf-c)) right top/var(--vf-len) var(--vf-th),
    linear-gradient(var(--vf-c),var(--vf-c)) right top/var(--vf-th) var(--vf-len),
    linear-gradient(var(--vf-c),var(--vf-c)) left bottom/var(--vf-len) var(--vf-th),
    linear-gradient(var(--vf-c),var(--vf-c)) left bottom/var(--vf-th) var(--vf-len),
    linear-gradient(var(--vf-c),var(--vf-c)) right bottom/var(--vf-len) var(--vf-th),
    linear-gradient(var(--vf-c),var(--vf-c)) right bottom/var(--vf-th) var(--vf-len);

  --r:8px;
  --r-sm:6px;
  --ease:cubic-bezier(.2,.7,.3,1);
  --snap:cubic-bezier(.16,1,.3,1);      /* overshoot-free slam: fast in, long settle */
  --slam:cubic-bezier(.34,1.56,.64,1);  /* a stamp landing: slight overshoot */
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--font-mono);font-size:13px;line-height:1.45;
  -webkit-font-smoothing:antialiased;
}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
a{color:inherit}

/* Pixel type must land on whole pixels or the grid smears. */
.px{font-family:var(--font-display);-webkit-font-smoothing:none;font-smooth:never}

/* ---- primitives ---- */
.field{
  width:100%;background:var(--bg);border:1px solid var(--line-2);color:var(--ink);
  border-radius:var(--r-sm);padding:11px 12px;font:inherit;outline:none;
  transition:border-color .15s var(--ease),box-shadow .15s var(--ease);
}
.field::placeholder{color:var(--faint)}
.field:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(204,255,0,.10)}
.field.bad{border-color:var(--down)}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 18px;border-radius:var(--r-sm);border:1px solid var(--line-2);
  font-family:var(--font-display);font-size:15px;letter-spacing:.06em;
  transition:background .15s var(--ease),border-color .15s var(--ease),color .15s var(--ease),transform .08s var(--ease);
}
.btn:hover{background:var(--bg-3);border-color:var(--line-2)}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn-primary:hover{background:#daff4d;border-color:#daff4d}
.btn:disabled{opacity:.35;cursor:default;transform:none}
.btn:disabled:hover{background:var(--accent);border-color:var(--accent)}
.btn.ghost:disabled:hover{background:none}

.lbl{
  font-family:var(--font-mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--faint);font-weight:500;
}
.num{font-variant-numeric:tabular-nums}
/* The monitor's ground: black with the pixel grid on it. */
.surface{background-color:var(--bg);background-image:var(--grid-bg);background-size:var(--grid-px) var(--grid-px)}
.pos{color:var(--up)}
.neg{color:var(--down)}

/* one scrollbar treatment everywhere */
*::-webkit-scrollbar{width:7px;height:7px}
*::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:4px}
*::-webkit-scrollbar-thumb:hover{background:#3a3a3a}
*::-webkit-scrollbar-track{background:transparent}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
}