/* ------------------------------------------------------------------------
 * The exchange tape on the landing page: a fixed strip above ALL content,
 * pushing the header UI down to make room. The whole strip is one link to
 * /board/.
 *
 * .tape / .tk styles are TRANSPLANTED VERBATIM from board/index.html (the
 * source of truth for the ticker's look) — if the board's tape changes,
 * mirror it here. Only .site-tape (the wrapper) and the .has-tape push
 * rules are landing-specific.
 * ------------------------------------------------------------------------ */

.site-tape {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 600;               /* logo (501) scrolls UNDER the tape; sidebar nav (900)
                                   covers it — see the stacking-context note below */
    display: block;
    /* Translucent glass — the app's grammar (WFTOddsBox: blur + black scrim).
       Light enough that the hero video visibly moves behind the lamps; the
       blur keeps them readable over bright frames. Solid-black graceful
       fallback where backdrop-filter is missing. */
    background: rgba(0, 0, 0, 0.55);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    /* the notch/status strip: tape chrome continues behind it */
    padding-top: env(safe-area-inset-top, 0px);
    text-decoration: none;
    cursor: pointer;
    transform: translateY(-100%);            /* hidden until markets arrive */
    transition: transform 0.6s ease;
}
body.has-tape .site-tape { transform: translateY(0); }

/* Markets live: the top-of-page UI slides down by the tape's measured height.
 * margin-top, NEVER transform — a transform on .s-header makes it the
 * containing block for its position:fixed children (the sidebar nav and the
 * hamburger), which collapsed the menu to header height. Margins push the
 * same distance at every breakpoint's own top offset without that trap. */
.s-header, .header-menu-toggle { transition: margin-top 0.6s ease; }
body.has-tape .s-header          { margin-top: var(--tape-h, 46px); }
body.has-tape .header-menu-toggle { margin-top: var(--tape-h, 46px); }

/* Dissolve the header's own stacking context (its z-index:500 made the whole
 * subtree one indivisible layer — the tape could not sit above the logo yet
 * below the sidebar). With z auto, each fixed/absolute piece ranks in the
 * root context individually: logo 501 < tape 600 < nav 900 — the tower
 * scrolls UNDER the tape, the open menu still covers it. The hamburger gets
 * its own 550 (under the tape it never overlaps; above all page content). */
.s-header { z-index: auto; }
.header-menu-toggle { z-index: 550; }

/* Mobile's .home-topfade paints the hero's top pure black (the Safari
 * status-strip blend) — exactly the strip the glass looks through. With the
 * tape covering that region, start the fade below it so the video, not the
 * fade, is what shows through the scrim. */
body.has-tape .home-topfade { top: var(--tape-h, 46px); }

/* ---- board tape, verbatim (board/index.html) ----
   Reference: Wikimedia "Digital-financial-led-stock-ticker-tape-photonplay"
   — dot-matrix caps on pure black; SYMBOL in white, price + arrow + change
   lit as one green/red unit, wide dark gaps between entries. */
.site-tape .tape {
    background: #000; border-top: 2px solid #0a0a0b;
    box-shadow: inset 0 6px 14px rgba(0,0,0,.9), inset 0 -6px 14px rgba(0,0,0,.9);
    overflow: hidden; white-space: nowrap; padding: 12px 0;
}
.site-tape .tape-inner { display: inline-block; animation: site-tape-crawl var(--tape-secs, 90s) linear infinite; }
@keyframes site-tape-crawl { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.site-tape .tk {
    display: inline-flex; align-items: baseline; gap: 11px; padding: 0 34px;
    font-family: 'SF Mono', 'Menlo', 'Consolas', monospace; font-size: 17px; font-weight: 700;
    letter-spacing: 2px; text-transform: uppercase;
}
.site-tape .tk .sym { color: #ffffff; text-shadow: 0 0 7px rgba(255,255,255,.45); }
.site-tape .tk .tlogo { height: 22px; width: 22px; object-fit: contain;
                        vertical-align: middle; margin: -3px 7px 0 0; }
/* the line label and the day-change ride the vertical center of the big
   glyphs beside them, not their baseline */
.site-tape .tk .mkt { color: #8f9aa6; font-size: 14px; align-self: center;
                      text-shadow: 0 0 6px rgba(143,154,166,.4); }
.site-tape .tk .chg { align-self: center; display: inline-block; min-width: 40px; }
/* ▲ sits lower in the face than ▼ — lift it to share the ▼'s optical center */
.site-tape .tk .chg .arr { display: inline-block; width: 13px; margin-right: 1px; }
.site-tape .tk.up .chg .arr { transform: translateY(-1.5px); }
.site-tape .tk .px, .site-tape .tk .chg { font-variant-numeric: tabular-nums; }
.site-tape .tk.up   .px, .site-tape .tk.up   .chg { color: #54d738; text-shadow: 0 0 8px rgba(84,215,56,.55); }
.site-tape .tk.down .px, .site-tape .tk.down .chg { color: #ff453a; text-shadow: 0 0 8px rgba(255,69,58,.55); }
.site-tape .tk.flat .px { color: #ffffff; text-shadow: 0 0 7px rgba(255,255,255,.4); }
.site-tape .tk.flat .chg { color: #565b60; }
/* a lamp that just changed fades its new value in fast, over-bright, then
   settles — the classic financial-ticker refresh (an instant swap reads
   as a glitch) */
.site-tape .tk.tick .px, .site-tape .tk.tick .chg { animation: site-lamp-flash .7s ease-out; }
@keyframes site-lamp-flash {
  0% { opacity: .1; filter: brightness(2.2); }
  40% { opacity: 1; filter: brightness(1.8); }
  100% { opacity: 1; filter: brightness(1); } }

/* AFTER the verbatim block: the board's .tape paints its own #000 — clear it
   here so the wrapper's translucent scrim is what actually shows. */
.site-tape .tape { background: transparent; }

/* board's own mobile sizing (its 900px breakpoint), kept identical */
@media (max-width: 900px) {
    .site-tape .tape { padding: 9px 0; }
    .site-tape .tk { font-size: 14px; padding: 0 22px; }
    .site-tape .tk .mkt { font-size: 12px; }
    .site-tape .tk .tlogo { height: 18px; width: 18px; margin-right: 5px; }
}