/* lib/signup.css: the email signup block (/lib/signup.js; signup-everywhere, 2026-10-12): under the chart on every
   stock, ETF and coin page, under the card on home, and the sheet after a few pages (/lib/signupsheet.js, at
   the end). Colours are tokens only. Every selector is under .signup so the block looks the same beside /lib/gate.css
   (a metered page) and beside home's own subscribe form, whose class names the shared form markup reuses.

   NOTHING MOVES. The block is static server HTML in the page's flow below the chart, so it is in the first frame. The
   Turnstile box and the status line take no space until the visitor first focuses the block (.is-active, set in that
   same input event), so the widget never moves anything when it renders. Hidden on a page under the ticker meter
   (html.rc-metered, set before first paint by the meter's head script) and on one just unlocked in place: the meter's
   card is the one form there.

   THE LOOK (Ryan, 2026-10-12; the band, 2026-10-13): understated, a research desk's, not a marketing site's. A BAND, not a
   panel: no border or background, a hairline rule (--border) above and below, taking the width of its column (the page's
   content width; home's card column, 600px). ONE style for every page (home, stock, ETF, coin; under the chart, under the card): 24px from the element
   above to the top rule, 20px rule to heading, 24px from the fine print to the bottom rule, 40px from that rule to the next
   element. No accent fill, no icon; the button is the site's primary (home .btn-primary: --bg3, --border2, --text, mono
   capitals), nothing louder. Only the SHEET (below) keeps a bordered panel: it floats over the page and needs its edge. */
.signup { box-sizing: border-box; width: 100%; min-width: 0; margin: 24px 0 40px; padding: 20px 0 24px; background: none; border: 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
html.rc-metered .signup, html[data-meter="unlocked"] .signup { display: none; }
.signup[hidden] { display: none; }   /* a block put away right after a signup on the same page (lib/signup.js afterSubscribe) */
body .signup + * { margin-top: 0; }   /* the 40px below the bottom rule is the block's alone: a page's <main> is a flex column (no margin collapsing), and the next section's own top margin would be added to it */
.signup-title { margin: 0 0 4px; font-family: 'Inter Tight', sans-serif; font-weight: 600; font-size: 15px; line-height: 21px; letter-spacing: 0; color: var(--text); }
.signup-body { margin: 0 0 14px; font-family: 'Inter Tight', sans-serif; font-size: 13.5px; line-height: 20px; color: var(--text2); }
.signup-body strong { color: var(--text); font-weight: 600; }
.signup:not(.signup-sheet) :is(.signup-title, .signup-body, .gate-consent) { max-width: 60ch; }   /* the rules span the column; the text inside is held to a reading measure, left-aligned (a phone's column is already narrower) */
.signup:not(.signup-sheet) .subscribe-row { max-width: 560px; }
.signup .subscribe-row { display: flex; gap: 10px; align-items: stretch; }
.signup .subscribe-row .subscribe-input { flex: 1 1 auto; min-width: 0; box-sizing: border-box; height: 44px; margin: 0; padding: 12px 14px; background: var(--bg); border: 1px solid var(--border2); border-radius: 4px; font-family: 'JetBrains Mono', monospace; font-size: 12px; letter-spacing: 0.02em; color: var(--text); -webkit-appearance: none; appearance: none; }
.signup .subscribe-row .subscribe-input::placeholder { color: var(--text3); letter-spacing: 0.04em; }
.signup .subscribe-row .subscribe-input:focus-visible { outline: 1px solid var(--text3); outline-offset: 2px; border-color: var(--text3); }
.signup .subscribe-row .btn-subscribe { flex: 0 0 auto; box-sizing: border-box; width: auto; height: 44px; min-height: 44px; margin: 0; padding: 0 18px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--border2); border-radius: 4px; background: var(--bg3); color: var(--text); cursor: pointer; font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 500; line-height: 1; letter-spacing: 0.14em; text-transform: uppercase; white-space: nowrap; -webkit-appearance: none; appearance: none; }
.signup .subscribe-row .btn-subscribe:hover { border-color: var(--text3); }   /* the site's primary button (home .btn-primary), nothing louder */
.signup .subscribe-row .btn-subscribe:focus-visible { outline: 1px solid var(--border2); outline-offset: 2px; }
.signup .subscribe-row .subscribe-input:disabled, .signup .subscribe-row .btn-subscribe:disabled { opacity: 0.55; cursor: default; }
.signup .gate-turnstile { margin-top: 0; min-height: 0; width: 100%; }   /* appearance 'interaction-only' (lib/gate.js): nothing is drawn unless Cloudflare needs a challenge, so no space is held for it */
.signup .subscribe-status { display: none; min-height: 15px; margin-top: 10px; font-family: 'JetBrains Mono', monospace; font-size: 11px; line-height: 15px; letter-spacing: 0.04em; color: var(--text3); }
.signup .subscribe-status.is-info { color: var(--text2); }
.signup .subscribe-status.is-success { color: var(--green); }
.signup .subscribe-status.is-error { color: var(--red); }
.signup.is-active .subscribe-status:not(:empty) { display: block; }   /* an empty status line takes no room */
.signup .gate-consent { margin: 10px 0 0; font-family: 'JetBrains Mono', monospace; font-size: 11px; line-height: 16px; letter-spacing: 0; color: var(--text3); }
.signup .gate-consent a, .signup-app a { color: var(--text2); text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }
.signup .gate-consent a:hover, .signup .gate-consent a:focus-visible, .signup-app a:hover, .signup-app a:focus-visible { color: var(--text); }
.signup-app { margin: 8px 0 0; font-family: 'JetBrains Mono', monospace; font-size: 11px; line-height: 16px; color: var(--text3); }
.signup-app:empty { display: none; }   /* the APP_STORE switch off: the slot is empty (site/header.js fills it) */
@media (max-width: 719px) {
  .signup .subscribe-row { flex-direction: column; }   /* the field and the button on their own full-width rows (the sheet too) */
  .signup .subscribe-row .btn-subscribe { width: 100%; }
  .signup .subscribe-row .subscribe-input { font-size: 16px; line-height: normal; text-overflow: clip; } /* 16px, never smaller: iOS Safari does not zoom the page when the box takes focus; the placeholder is never cut */
  .signup.is-active .subscribe-status:not(:empty) { min-height: 30px; }   /* two lines held: the signed-up line wraps on a phone */
}

/* ── THE SHEET (/lib/signupsheet.js): the block, built in the browser after the trigger, never in server HTML ──
   The one bordered panel: it floats over the page. A DESKTOP card, compact (460px at most), bottom right with a 24px
   margin; on a PHONE (under 720px) a bar flush to the bottom of the window, full width, a hairline top border and no more
   than 20% of the window's height. One close control (a word, no icon). No overlay and no scroll lock: the page stays
   usable behind it. It slides up once (.is-open, set two frames after it is added; no motion under prefers-reduced-motion)
   and a fixed element moves nothing in the page (CLS 0). It never shows beside a signup block: the script waits for a clear
   window and removes the sheet for the visit the first time a block comes into it. Its shadow is the page's own --bg. Above the page and its sticky header's layer, below the search sheet and menu. */
.signup.signup-sheet { position: fixed; z-index: 30; right: 24px; bottom: calc(24px + env(safe-area-inset-bottom)); width: calc(100% - 48px); max-width: 460px; margin: 0; padding: 14px 18px 12px; background: var(--bg2); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 0 0 1px var(--bg), 0 12px 40px 8px var(--bg); visibility: hidden; transform: translateY(calc(100% + 48px)); transition: transform 240ms ease-out, visibility 0s linear 240ms; }
.signup.signup-sheet.is-open { visibility: visible; transform: translateY(0); transition: transform 240ms ease-out, visibility 0s; }
.signup-sheet .signup-title { padding-right: 72px; }
.signup-sheet .signup-body { margin-bottom: 12px; }
.signup-close { position: absolute; top: 8px; right: 6px; height: 32px; padding: 0 10px; border: 0; border-radius: 4px; background: none; color: var(--text3); cursor: pointer; font-family: 'JetBrains Mono', monospace; font-size: 11px; line-height: 1; letter-spacing: 0.06em; -webkit-appearance: none; appearance: none; }
.signup-close:hover { color: var(--text); }
.signup-close:focus-visible { outline: 1px solid var(--border2); outline-offset: -2px; color: var(--text); }
@media (max-width: 719px) {
  .signup.signup-sheet { left: 0; right: 0; bottom: 0; width: 100%; max-width: none; max-height: 20vh; overflow: hidden; padding: 8px 14px calc(8px + env(safe-area-inset-bottom)); border: 0; border-top: 1px solid var(--border); border-radius: 0; box-shadow: none; transform: translateY(100%); }
  .signup.signup-sheet.is-open { transform: translateY(0); }
    .signup-sheet .signup-title { margin: 0 0 2px; font-size: 14px; line-height: 18px; padding-right: 64px; }
  .signup-sheet .signup-body { margin: 0 0 6px; font-size: 12px; line-height: 15px; }
  .signup-sheet .subscribe-row { gap: 6px; }
  .signup-sheet .subscribe-row .subscribe-input, .signup-sheet .subscribe-row .btn-subscribe { height: 36px; min-height: 36px; }
  .signup-sheet .gate-consent { margin-top: 4px; font-size: 10px; line-height: 13px; }
  .signup-close { height: 44px; top: 0; }
}
@media (prefers-reduced-motion: reduce) { .signup.signup-sheet, .signup.signup-sheet.is-open }