/* 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 { color-scheme: dark; }

/* 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 · C6 Soft steel, green tint. Overrides OTC's dark tokens. ---- */
html[data-theme="dark"] {
  --paper: #0e1519;
  --paper-2: #1f2a2f;
  --card: #1b242a;
  --track: #28353a;
  --ink: #e6eff0;
  --muted: #9aaab1;
  --frame: #3b4b51;
  --line: #2a373c;
  --chrome: #6f8189;
  --well: #232f34;
  --well-2: #2a373c;
  --head: #0bb8c9;
  --head-lit: #6ee9ef;
  --fill: #2bd4dc;
  --fill-lit: #6ee9ef;
  --on-fill: #0f1518;
  --lime: #2bd4dc;
  --phos: #34d399;
  --phos-dim: #3c6558;
  --gold: #f5b544;
  --alert: #f0566a;
  --brand: #f97316;
  --pop: 0 16px 40px #060a0cb0;
  --lift: 0 8px 22px #060a0c99;
  --grain: #ffffff08;
  --rest: 0 0 0 1px #2a373c, 0 1px 2px #060a0c66;
  --scroll: #3b4b51;
  --bar: #0e1519f0;
  --notice: #090e10;
  --on-notice: #e6eff0;
  --panel: #1b242a; /* same as the sidebar (card) */
  --on-panel: #e6eff0;
  --tip: #2bd4dc12;
  --tip-line: #2bd4dc40;
  --on-tip: #6ee9ef;
  --wash: linear-gradient(120deg, #2bd4dc1f 0%, #2bd4dc0a 38%, transparent 72%);
}
.bottom-4 { bottom: calc(var(--spacing) * 4); }
.pr-\[100px\] { padding-right: 100px; }
.pr-\[180px\] { padding-right: 180px; }
.h-12 { height: calc(var(--spacing) * 12); }
.w-40 { width: calc(var(--spacing) * 40); }
.text-ink\/40 { color: color-mix(in oklab, var(--ink) 40%, transparent); }
.gap-x-1\.5 { column-gap: calc(var(--spacing) * 1.5); }
.leading-\[14px\] { line-height: 14px; }

/* Phosphor icons used on the coin cards (masked SVG, from StonkFun) */
.iconify{width:1em;height:1em;-webkit-mask-image:var(--svg);-webkit-mask-image:var(--svg);-webkit-mask-image:var(--svg);-webkit-mask-image:var(--svg);mask-image:var(--svg);background-color:currentColor;display:inline-block;-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
.ph--gift{--svg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' width='256' height='256'%3E%3Cpath fill='black' d='M216 72h-35.08c.39-.33.79-.65 1.17-1A29.53 29.53 0 0 0 192 49.57A32.62 32.62 0 0 0 158.44 16A29.53 29.53 0 0 0 137 25.91a55 55 0 0 0-9 14.48a55 55 0 0 0-9-14.48A29.53 29.53 0 0 0 97.56 16A32.62 32.62 0 0 0 64 49.57A29.53 29.53 0 0 0 73.91 71c.38.33.78.65 1.17 1H40a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16v64a16 16 0 0 0 16 16h144a16 16 0 0 0 16-16v-64a16 16 0 0 0 16-16V88a16 16 0 0 0-16-16m-67-35.49a13.7 13.7 0 0 1 10-4.5h.49A16.62 16.62 0 0 1 176 49.08a13.7 13.7 0 0 1-4.5 10c-9.49 8.4-25.24 11.36-35 12.4c1.2-10.59 4.5-25.98 12.5-34.97m-64.09.36A16.63 16.63 0 0 1 96.59 32h.49a13.7 13.7 0 0 1 10 4.5c8.39 9.48 11.35 25.2 12.39 34.92c-9.72-1-25.44-4-34.92-12.39a13.7 13.7 0 0 1-4.5-10a16.6 16.6 0 0 1 4.82-12.16ZM40 88h80v32H40Zm16 48h64v64H56Zm144 64h-64v-64h64Zm16-80h-80V88h80z'/%3E%3C/svg%3E")}
.ph--arrows-clockwise{--svg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' width='256' height='256'%3E%3Cpath fill='black' d='M224 48v48a8 8 0 0 1-8 8h-48a8 8 0 0 1 0-16h28.69l-14.63-14.63a79.56 79.56 0 0 0-56.13-23.43h-.45a79.52 79.52 0 0 0-55.89 22.77a8 8 0 0 1-11.18-11.44a96 96 0 0 1 135 .79L208 76.69V48a8 8 0 0 1 16 0m-37.59 135.29a80 80 0 0 1-112.47-.66L59.31 168H88a8 8 0 0 0 0-16H40a8 8 0 0 0-8 8v48a8 8 0 0 0 16 0v-28.69l14.63 14.63A95.43 95.43 0 0 0 130 222.06h.53a95.36 95.36 0 0 0 67.07-27.33a8 8 0 0 0-11.18-11.44Z'/%3E%3C/svg%3E")}
.ph--copy{--svg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' width='256' height='256'%3E%3Cpath fill='black' d='M216 32H88a8 8 0 0 0-8 8v40H40a8 8 0 0 0-8 8v128a8 8 0 0 0 8 8h128a8 8 0 0 0 8-8v-40h40a8 8 0 0 0 8-8V40a8 8 0 0 0-8-8m-56 176H48V96h112Zm48-48h-32V88a8 8 0 0 0-8-8H96V48h112Z'/%3E%3C/svg%3E")}
.ph--check-bold{--svg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' width='256' height='256'%3E%3Cpath fill='black' d='m232.49 80.49l-128 128a12 12 0 0 1-17 0l-56-56a12 12 0 1 1 17-17L96 183L215.51 63.51a12 12 0 0 1 17 17Z'/%3E%3C/svg%3E")}
.inline-grid { display: inline-grid; }
.h-3 { height: calc(var(--spacing) * 3); }
.bg-card\/80 { background-color: color-mix(in oklab, var(--card) 80%, transparent); }
.hover\:border-head\/60:hover { border-color: color-mix(in oklab, var(--head) 60%, transparent); }
.focus-visible\:outline-hidden:focus-visible { outline: 2px solid transparent; outline-offset: 2px; }
.focus-visible\:ring-2:focus-visible { box-shadow: 0 0 0 2px var(--head); }
.focus-visible\:ring-head:focus-visible { box-shadow: 0 0 0 2px var(--head); }

/* Pays row: single line; when it overflows, fade the tail and show an ellipsis */
.pays { position: relative; }
.pays[data-overflow]::after {
  content: "…"; position: absolute; right: 0; top: 0; bottom: 0;
  padding-left: 14px; font-weight: 700; color: var(--ink);
  background: linear-gradient(90deg, transparent, var(--card) 45%);
}

/* Hero banner chart + badges */
.bottom-6 { bottom: calc(var(--spacing) * 6); }
.right-6 { right: calc(var(--spacing) * 6); }
.top-5 { top: calc(var(--spacing) * 5); }
.h-24 { height: calc(var(--spacing) * 24); }
.z-\[2\] { z-index: 2; }
.border-on-panel\/20 { border-color: color-mix(in oklab, var(--on-panel) 20%, transparent); }
.hover\:border-on-panel\/50:hover { border-color: color-mix(in oklab, var(--on-panel) 50%, transparent); }
.text-on-panel\/70 { color: color-mix(in oklab, var(--on-panel) 70%, transparent); }
@media (min-width: 40rem) {
  .sm\:right-6 { right: calc(var(--spacing) * 6); }
  .sm\:top-6 { top: calc(var(--spacing) * 6); }
}

/* Brand logo follows the ink colour (the SVG is white; on dark it stays white) */
.logo-ink { filter: none; }
.w-\[26px\] { width: 26px; }
.w-\[32px\] { width: 32px; }

/* ---- Home hero: Cloudflare's "Build without boundaries" banner in our palette. Their layout, type scale,
   tiles, frames and ticker (sizes, eases, timings); the colours are the site's: a plain card the colour of
   the sidebar (--card), ink for the text and the tiles, the site font. No poster, no glow; the buttons are
   the OTC banner's own classes (gloss pill and outlined twin) and need no rules here. ---- */
.hero{position:relative;overflow:hidden;background:var(--card);color:var(--ink);border-radius:6px}
/* The OTC banner's box: min-h-[11rem] p-5 sm:p-6 lg:min-h-[12rem] lg:px-8 lg:py-6, content centred. */
/* 283px: what the OTC banner measures with its content in place (its own min-h is only a floor). */
.hero-inner{position:relative;display:flex;min-height:283px;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:20px}
@media (min-width:40rem){.hero-inner{padding:24px}}
@media (min-width:64rem){.hero-inner{padding:24px 32px}}
.hero-nodes{position:absolute;left:0;right:0;top:0;z-index:0;height:100%;container-type:inline-size}
/* The tiles' resting spots, before any script runs: Cloudflare's offsets, sideways as a share of the banner's width (capped at their pixel values on a wide one), downwards at half. hero.js pins the same numbers. */
.hero-node-anim[data-node="0"]{transform:translate(max(-400px,-29.412cqw),40px) rotate(-12deg)}
.hero-node-anim[data-node="1"]{transform:translate(max(-500px,-36.765cqw),-20px) rotate(12deg)}
.hero-node-anim[data-node="2"]{transform:translate(max(-600px,-44.118cqw),25px) rotate(-6deg)}
.hero-node-anim[data-node="3"]{transform:translate(min(400px,29.412cqw),40px) rotate(6deg)}
.hero-node-anim[data-node="4"]{transform:translate(min(600px,44.118cqw),60px) rotate(-32deg)}
.hero-node-anim[data-node="5"]{transform:translate(min(500px,36.765cqw),-15px) rotate(32deg)}
.hero-stage{position:absolute;bottom:0;left:50%;display:flex;height:100%;width:50%;transform:translateX(-50%);flex-direction:column;align-items:center;justify-content:center}
.hero-node-anim{position:absolute}
.hero-node{display:flex;height:64px;width:64px;align-items:center;justify-content:center;border-radius:50%;border:1px dashed color-mix(in srgb,var(--ink) 70%,transparent);background:color-mix(in srgb,var(--ink) 5%,transparent);color:color-mix(in srgb,var(--ink) 70%,transparent);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}
.hero-node img{display:block;width:48px;height:48px;border-radius:50%;object-fit:cover;background:#fff}
.hero-frame{position:absolute;z-index:0;height:148px;width:150px;border:1px solid color-mix(in srgb,var(--ink) 50%,transparent);background:color-mix(in srgb,var(--ink) 10%,transparent);opacity:0;transform:translate(-500px,0)}
.hero-frame-r{transform:translate(500px,0)}
.hero-corner{position:absolute;z-index:10;width:8px;height:8px;border:1px solid var(--ink);border-radius:1.5px;background:var(--card);pointer-events:none;user-select:none}
.hero-corner-tl{left:-4px;top:-4px}.hero-corner-tr{right:-4px;top:-4px}.hero-corner-bl{left:-4px;bottom:-4px}.hero-corner-br{right:-4px;bottom:-4px}
.hero-copy{position:relative;z-index:1;margin:0 auto;display:flex;max-width:42rem;flex-direction:column;align-items:center;gap:0}
/* The OTC banner's type: h1 mb-2 text-[1.55rem] font-medium leading-[1.05] tracking-[-0.04em] sm:text-[1.9rem] lg:text-[2.1rem]; sub max-w-[34rem] text-[12.5px] leading-[1.45] text-on-panel/60; buttons mt-3.5. */
.hero-title{margin:0 auto 8px;max-width:42rem;font-size:1.55rem;font-weight:500;line-height:1.05;letter-spacing:-.04em;text-wrap:balance;color:var(--ink);text-shadow:-1px -1px 0 var(--card),1px -1px 0 var(--card),-1px 1px 0 var(--card),1px 1px 0 var(--card)}
@media (min-width:40rem){.hero-title{font-size:1.9rem}}
@media (min-width:64rem){.hero-title{font-size:2.1rem}}
.hero-sub{margin:0 auto;max-width:34rem;font-size:12.5px;font-weight:400;line-height:1.45;color:color-mix(in srgb,var(--ink) 60%,transparent);text-shadow:-1px -1px 0 var(--card),1px -1px 0 var(--card),-1px 1px 0 var(--card),1px 1px 0 var(--card)}
.hero-stats{margin:14px 0 0;display:flex;flex-wrap:wrap;justify-content:center;column-gap:20px;row-gap:10px}
.hero-actions{margin-top:14px;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px}

/* Added for the functional site */
/* The empty board card spans the whole grid, whatever its column count. */
.col-span-full { grid-column: 1 / -1; }
/* Launch page. A tile that cannot be picked: the basket is full, or the stock is not pairable yet (a placeholder). */
[data-pick="multi"] > button:disabled { opacity: 0.35; cursor: not-allowed; }
[data-pick="multi"] > button[data-placeholder]:disabled { opacity: 0.5; }
[data-pick="multi"] > button:disabled:hover { border-color: var(--line); }
/* A dev-buy unit that is not offered yet. */
[data-buyunit] > button:disabled { cursor: not-allowed; }
/* The stepper's forward button while the launch is running. */
#step-next:disabled { opacity: 0.35; cursor: not-allowed; }
/* A field the tech does not take yet. */
input[data-placeholder]:disabled { opacity: 0.5; cursor: not-allowed; }
/* The wallet modal is the adapter library's own markup. otc.css already draws it on the design's tokens
   (the panel, its title, the wallet list, the close button); the one thing it leaves to the library is
   the scrim, painted twice at black 50% (on the modal and again on its overlay). The modal goes clear
   and the overlay alone carries the design's own scrim, bg-ink/30, the one the mobile drawer uses. */
.wallet-adapter-modal { background: transparent; }
.wallet-adapter-modal .wallet-adapter-modal-overlay { background: color-mix(in oklab, var(--ink) 30%, transparent); }
/* Explore page. The stock list under the Filter button scrolls past this height. */
.max-h-\[18rem\] { max-height: 18rem; }