/* StonkBlend — layer on top of assets/otc.css (the replicated stylesheet).
   Only fonts, icon marks and the little bits the static build needs. */

:root {
  --font-sans-face: "Geist";
  --font-crt: "VT323";
}

html:not([data-theme]) { color-scheme: light; }

/* Rail: mobile drawer open state */
html[data-nav="open"] .rail { transform: translateX(0); }
html[data-nav="open"] .scrim { opacity: 1; pointer-events: auto; }

/* Notice strip dismissed */
html[data-strip="off"] .strip { display: none; }
html[data-strip="off"] { --strip-h: 0px; }

/* Pixel mark for the brand and the hero, drawn on a 16-cell grid */
.mark { image-rendering: pixelated; shape-rendering: crispEdges; }

/* Coin and stock avatars are letter discs — no external images in the mock */
.disc {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%; border-radius: 9999px;
  font-weight: 700; letter-spacing: -0.02em; line-height: 1;
  color: #fff; user-select: none;
}
.disc-lg { font-size: 34px; }
.disc-md { font-size: 14px; }
.disc-sm { font-size: 8px; }

/* Basket bar track used on the coin page */
.track-bar { height: 6px; border-radius: 9999px; background: var(--well-2); overflow: hidden; }
.track-bar > i { display: block; height: 100%; border-radius: 9999px; background: var(--lime); }

/* Stepper (launch page) */
.step { display: none; }
.step[data-active="true"] { display: block; }

/* Segmented control active state helper */
.seg-on { background: var(--paper-2); color: var(--ink); box-shadow: 0 1px 2px rgb(0 0 0 / 0.08); }

/* Utilities the pages use that OTC's compiled sheet never emitted */
.bg-muted { background-color: var(--muted); }
.max-w-\[58ch\] { max-width: 58ch; }
.min-h-9 { min-height: calc(var(--spacing) * 9); }
.mt-\[3px\] { margin-top: 3px; }
.mt-\[7px\] { margin-top: 7px; }
.w-\[32px\] { width: 32px; }
.w-\[44px\] { width: 44px; }
.w-\[64px\] { width: 64px; }
.w-\[72px\] { width: 72px; }
.w-\[84px\] { width: 84px; }
.w-\[90px\] { width: 90px; }
.w-\[150px\] { width: 150px; }
@media (min-width: 40rem) {
  .sm\:flex-col { flex-direction: column; }
  .sm\:flex-row { flex-direction: row; }
  .sm\:gap-2 { gap: calc(var(--spacing) * 2); }
  .sm\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .sm\:items-center { align-items: center; }
  .sm\:text-center { text-align: center; }
}
@media (min-width: 48rem) {
  .md\:block { display: block; }
}
@media (min-width: 64rem) {
  .lg\:col-span-5 { grid-column: span 5 / span 5; }
  .lg\:col-span-7 { grid-column: span 7 / span 7; }
  .lg\:grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
}

/* ---- StonkBlend Blue · C1 Graphite. Overrides OTC's dark tokens. ---- */
html[data-theme="dark"] {
  --paper: #0b0f15;
  --paper-2: #141a23;
  --card: #11161e;
  --track: #1a222d;
  --ink: #eef2f7;
  --muted: #8e9bad;
  --frame: #2e3949;
  --line: #1e2631;
  --chrome: #5f6c7f;
  --well: #171e28;
  --well-2: #1c2430;
  --head: #22d3ee;
  --head-lit: #a5f3fc;
  --fill: #eef2f7;
  --fill-lit: #ffffff;
  --on-fill: #0b0f15;
  --lime: #67e8f9;
  --phos: #34d399;
  --phos-dim: #3c6558;
  --gold: #f5b544;
  --alert: #f0566a;
  --brand: #f97316;
  --pop: 0 16px 40px #030509b0;
  --lift: 0 8px 22px #03050999;
  --grain: #ffffff08;
  --rest: 0 0 0 1px #1e2631, 0 1px 2px #03050966;
  --scroll: #2e3949;
  --bar: #0b0f15f0;
  --notice: #06090d;
  --on-notice: #eef2f7;
  --panel: #0f141b;
  --on-panel: #eef2f7;
  --tip: #67e8f912;
  --tip-line: #67e8f940;
  --on-tip: #a5f3fc;
  --wash: linear-gradient(120deg, #67e8f91f 0%, #67e8f90a 38%, transparent 72%);
}