/* ═══════════════════════════════════════════════════════════════════════════
   Stocksino — NEON PIT
   One stylesheet for the whole site. Every page links this and defines only
   what is specific to it, so the next re-skin is one file rather than four.

   The rule the palette runs on: THE SIGN IS NEVER THE DATA. Green neon is
   chrome — the wordmark, tubing, rules, the "you are here" mark. Anything that
   says whether a number is good or bad uses the up/down pair below, cyan
   against red, which clears deuteranopia at ΔE 17.8.

   Green carries one risk magenta did not: it already means "up" to every
   trader alive. So it is kept strictly off the data, and reference marks that
   sit on the data — the bar to beat, the NOW needle — use --mark instead.

   Committed to one dark world on purpose: this is a neon sign at 1am, and it
   has no daytime. Every colour is painted explicitly so the page holds
   wherever it is embedded rather than borrowing a ground.
   ═══════════════════════════════════════════════════════════════════════════ */
:root{
  /* surfaces */
  --bg:#08060F; --ground:#08060F;
  --panel:#100C1C; --panel2:#171130;
  --rule:#332852;           /* panel edges — decorative, sits under the ink */
  --rule2:#6E5C9C;          /* control borders — 3.4:1, a real edge you can find */

  /* ink — every step measured against the PANEL, which is the harder of the two
     surfaces. --ink3 carries labels and captions at 9-12px, so it has to clear
     4.5:1 as body text rather than scraping the 3:1 large-text allowance. */
  --ink:#FFFFFF;            /* 19.2:1 on panel */
  --ink2:#C6BCD8;           /* 10.6:1 */
  --ink3:#948AAD;           /*  5.9:1 — was #7A6E93 at 4.1, which failed AA */

  /* sign — chrome only, never a data colour */
  --neon:#00FF9C; --cy:#22E0FF; --gold:#FFD166;
  --vio:#00FF9C; --brand:#00FF9C;
  --pink:#FF2D95;           /* one job left: the live pulse */

  /* annotation — reference lines and position markers that sit ON the data.
     These cannot be the sign colour now that the sign is green: a green tick
     between a cyan bar and a red bar reads as a third state. Gold is warm,
     so it separates from both at a glance and means neither. */
  --mark:#FFD166;

  /* data — validated pair, ΔE 17.8 deuteranopia on this ground */
  --up:#0FA8B8; --down:#EE4033;
  --buy:#0FA8B8; --sell:#EE4033;
  --beat:#0FA8B8; --miss:#EE4033;

  /* type */
  --wordmark:"Bungee",Impact,sans-serif;
  --display:"Oswald",Impact,sans-serif; --disp:"Oswald",Impact,sans-serif;
  --body:"Public Sans",ui-sans-serif,system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --led:"Share Tech Mono","IBM Plex Mono",ui-monospace,monospace;
}
*{box-sizing:border-box}
a{color:inherit}
body{margin:0;background:var(--bg);color:var(--ink2);font-family:var(--body);
  font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
:focus-visible{outline:2px solid var(--cy);outline-offset:3px}

/* ── the tape ──────────────────────────────────────────────────────────────
   Rides the top of every page. The crawl is duplicated once and translated by
   half its width, so the loop has no seam. It stops entirely for anyone who
   asked their system to stop things moving. */
.tape{overflow:hidden;white-space:nowrap;background:#05030A;
  border-bottom:1px solid var(--rule);padding:7px 0;
  font-family:var(--led);font-size:13px;letter-spacing:.04em;color:var(--cy)}
.tape .run{display:inline-flex;min-width:200%}
.tape .run > span{padding:0 20px;display:inline-block}
.tape b{color:var(--ink);font-weight:400}
.tape .u{color:var(--up)} .tape .d{color:var(--down)}
.tape .sig{color:var(--gold)}
@media(prefers-reduced-motion:no-preference){
  .tape .run{animation:tape-crawl 46s linear infinite}
}
@keyframes tape-crawl{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ── masthead ─────────────────────────────────────────────────────────────── */
.sitehead{display:flex;justify-content:space-between;align-items:center;gap:20px;
  flex-wrap:wrap;padding:16px 0 18px;border-bottom:1px solid var(--rule);margin-bottom:36px}
.wordmark{display:flex;align-items:center;gap:12px;text-decoration:none}
.wordmark .nm{font-family:var(--wordmark);font-size:17px;line-height:1.15;color:var(--neon);
  text-shadow:0 0 6px rgba(0,255,156,.8),0 0 22px rgba(0,255,156,.4)}
.wordmark .nm em{display:block;font-family:var(--mono);font-style:normal;font-size:8.5px;
  font-weight:500;letter-spacing:.24em;color:var(--ink3);margin-top:5px;text-shadow:none;
  text-transform:uppercase}
.sitenav{display:flex;gap:20px;font-family:var(--display);font-size:12px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--cy);flex-wrap:wrap}
.sitenav a{text-decoration:none;padding:4px 0;border-bottom:2px solid transparent;
  transition:border-color .15s,color .15s}
.sitenav a:hover{border-bottom-color:var(--cy)}
.sitenav a[aria-current=page]{color:var(--neon);border-bottom-color:var(--neon)}

/* ── shared furniture ─────────────────────────────────────────────────────── */
.eyebrow{max-width:none;font-family:var(--mono);font-weight:600;font-size:10.5px;
  letter-spacing:.24em;text-transform:uppercase;color:var(--gold);margin:0 0 12px}
.home{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:10px;
  font-weight:600;letter-spacing:.17em;text-transform:uppercase;color:var(--ink3);
  text-decoration:none;padding:6px 0;transition:color .15s}
.home:hover,.home:focus-visible{color:var(--cy)}
.sitefoot{margin-top:60px;padding-top:18px;border-top:1px solid var(--rule);
  font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink3);display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap}

/* Headings take the condensed sign face; body text stays a real reading face. */
h1,h2,h3{font-family:var(--display);color:var(--ink);text-wrap:balance}
h1{font-weight:700;font-size:clamp(32px,5.6vw,58px);line-height:1;letter-spacing:-.01em;
  text-transform:uppercase;margin:0 0 16px}
h2{font-weight:600;font-size:26px;letter-spacing:.02em;text-transform:uppercase;margin:0 0 10px}

/* ── brand images ──────────────────────────────────────────────────────────
   Both are optional. The masthead falls back to the drawn glyph and the
   wordmark type, and the backdrop simply does not paint, so a missing file
   costs the page nothing. See static/img/README.md. */
/* The sign is a marquee at roughly 2:1. Shrunk into a masthead it is 76px
   wide and unreadable, so it crowns the homepage instead and the masthead
   keeps the drawn glyph and the type. */
/* The sign is neon on true black with no alpha channel, which makes a JPEG a
   seventh the size of the PNG. Screen blending is what removes the black:
   against this page's near-black ground it leaves the tubing and drops the
   rest, with none of the fringing an alpha cut-out around a glow would give. */
.crown{display:block;width:100%;max-width:560px;height:auto;margin:6px auto 0;
  mix-blend-mode:screen}

/* The backdrop is a photograph of somebody else's neon, so it is held well
   back: dark, low opacity, and masked to fade out before it reaches the text. */
.backdrop{position:relative;isolation:isolate}
.backdrop::before{content:"";position:absolute;inset:-1px;z-index:-1;border-radius:inherit;
  background:var(--backdrop-src) center/cover no-repeat;
  opacity:.30;
  -webkit-mask-image:radial-gradient(115% 130% at 50% 100%,#000 18%,transparent 72%);
  mask-image:radial-gradient(115% 130% at 50% 100%,#000 18%,transparent 72%)}

/* ── the list ──────────────────────────────────────────────────────────────
   Netlify Forms: the markup is real HTML so the deploy can detect it, which
   is also why it works with scripting off. app.js upgrades it to submit in
   place; without that it posts and lands on /thanks.html. */
.join{background:var(--panel);border:1px solid var(--rule);border-left:3px solid var(--neon);
  border-radius:4px;padding:26px 30px;margin-top:34px}
.join h2{margin:0 0 10px}
.join p{font-size:16.5px;color:var(--ink2);max-width:56ch;margin:0 0 8px}
.join p:last-of-type{margin-bottom:18px}
.join b{color:var(--ink);font-weight:600}
.join form{display:flex;gap:10px;flex-wrap:wrap;align-items:stretch}
.join input[type=email]{flex:1 1 260px;min-width:0;background:var(--panel2);color:var(--ink);
  border:1px solid var(--rule2);border-radius:3px;padding:12px 14px;
  font-family:var(--body);font-size:16px}
.join input[type=email]::placeholder{color:var(--ink3)}
.join input[type=email]:focus-visible{outline:2px solid var(--neon);outline-offset:1px;
  border-color:var(--neon)}
.join button{flex:0 0 auto;appearance:none;border:0;cursor:pointer;border-radius:3px;
  background:var(--neon);color:var(--bg);padding:12px 22px;
  font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;transition:filter .14s}
.join button:hover{filter:brightness(1.12)}
.join button[disabled]{opacity:.55;cursor:progress}
.join .fine{font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;color:var(--ink3);
  margin:12px 0 0;max-width:60ch}
/* Reserved rather than inserted, so a result does not shove the page down. */
.join .say{min-height:20px;margin:10px 0 0;font-size:14.5px}
.join .say.ok{color:var(--up)} .join .say.no{color:var(--down)}

/* The same thing, one line, above the footer of a tool page. */
/* Sits directly under the masthead, so it is the first thing after the name
   and needs the masthead's own bottom margin pulled back rather than added to. */
.joinbar{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin:-14px 0 34px;
  background:var(--panel);border:1px solid var(--rule);border-radius:4px;padding:16px 20px}
.joinbar .lead{font-size:15px;color:var(--ink2);flex:1 1 260px}
.joinbar .lead b{color:var(--ink);font-weight:600}
.joinbar form{display:flex;gap:8px;flex-wrap:wrap;flex:1 1 320px}
.joinbar input[type=email]{flex:1 1 180px;min-width:0;background:var(--panel2);color:var(--ink);
  border:1px solid var(--rule2);border-radius:3px;padding:10px 12px;
  font-family:var(--body);font-size:15px}
.joinbar input[type=email]:focus-visible{outline:2px solid var(--neon);outline-offset:1px}
.joinbar button{appearance:none;border:0;cursor:pointer;border-radius:3px;background:var(--neon);
  color:var(--bg);padding:10px 16px;font-family:var(--mono);font-size:11px;font-weight:700;
  letter-spacing:.13em;text-transform:uppercase}
.joinbar .say{flex:1 1 100%;margin:0;font-size:14px}
.joinbar .say.ok{color:var(--up)} .joinbar .say.no{color:var(--down)}

/* A label the screen reader gets and the layout does not. */
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* The Substack handoff. It sits inside the status line after a successful
   save, and it has to read as the next thing to do rather than as a footnote —
   a reader who treats it as decoration never gets the letter. */
.say .handoff{color:var(--bg);background:var(--neon);text-decoration:none;
  font-family:var(--mono);font-size:11.5px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;padding:6px 12px;border-radius:3px;
  display:inline-block;margin-left:4px;transition:filter .14s}
.say .handoff:hover,.say .handoff:focus-visible{filter:brightness(1.12)}