/* ============================================================================ FNOTrader page explainer — shared engine styles. App-agnostic. Every colour comes from the host app's theme tokens (--panel / --border / --text / --muted / --accent), so this file drops into Options, Trade, Stocks, FP, Algo and MF unchanged and inherits each app's dark / blue / light themes. Only the fallbacks after the comma are ours. Two surfaces: 1. .fnx-panel — the "what this page is" strip, mounted INSIDE #instr-bar (or whatever host the app configures) so the app's existing height publisher keeps every sticky offset and full-height page correct. 2. .fnx-ov/.fnx-spot/.fnx-pop — the step-by-step tour: dim, spotlight cutout, coach-mark bubble. ============================================================================ */ :root { --fnx-accent: var(--accent, #7aa9f0); --fnx-panel: var(--panel, #161b25); --fnx-border: var(--border, #2c3543); --fnx-text: var(--text, #d8dee6); --fnx-muted: var(--muted, #8590a0); --fnx-radius: 10px; } /* ─────────────────────────── topbar button ─────────────────────────── */ .fnx-btn { position: relative; display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; } .fnx-btn[hidden] { display: none !important; } .fnx-btn svg { flex: 0 0 auto; } /* Fallback seat for pages that hide the toolbar the button normally lives in (the Options dashboard hides #instr-bar). Mounted on , so it states its own typography and colours instead of inheriting from . */ .fnx-btn.fnx-float-btn { /* Above the topbar (z 30) but UNDER every app overlay/modal (z >= 100) — it was covering the option-chain overlay's close button (2026-08-19). */ position: fixed; top: 8px; right: 12px; z-index: 40; padding: 5px 11px; border-radius: 999px; cursor: pointer; border: 1px solid var(--fnx-border); background: var(--fnx-panel); color: var(--fnx-muted); font: 600 11.5px/1 Inter, ui-sans-serif, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; box-shadow: 0 3px 12px rgba(0, 0, 0, .3); } .fnx-btn.fnx-float-btn:hover { color: var(--fnx-text); border-color: var(--fnx-accent); } /* When the panel is open the button reads as a toggle, not an invitation. */ .fnx-btn[data-open="1"] { border-color: var(--fnx-accent); color: var(--fnx-accent); } /* Unseen page → a small accent dot on the button, the only nag we make. */ .fnx-btn[data-unseen="1"]::after { content: ""; position: absolute; top: 3px; right: 3px; width: 7px; height: 7px; border-radius: 50%; background: var(--fnx-accent); box-shadow: 0 0 0 2px var(--fnx-panel); } /* ────────────────────────────── panel ─────────────────────────────── */ .fnx-panel { flex: 1 0 100%; /* full row when the host mounts it inside a flex bar */ box-sizing: border-box; margin: 9px 12px 3px; padding: 11px 14px 10px; border: 1px solid var(--fnx-border); border-left: 3px solid var(--fnx-accent); border-radius: var(--fnx-radius); background: color-mix(in srgb, var(--fnx-accent) 6%, var(--fnx-panel)); color: var(--fnx-text); font-size: 13px; line-height: 1.55; animation: fnx-drop .18s ease-out; } @keyframes fnx-drop { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } } /* Fixed presentation, used when the host bar is not rendered on this page. Mounted on (outside the app's body zoom and outside any page that collapses ), so it restates typography and caps its own height. */ .fnx-panel.fnx-float { position: fixed; left: 12px; right: 12px; margin: 0; z-index: 2147482999; max-width: 980px; max-height: min(62vh, 620px); overflow-y: auto; box-shadow: 0 12px 38px rgba(0, 0, 0, .42); font: 400 13px/1.55 Inter, ui-sans-serif, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; } .fnx-panel.fnx-float button { font-family: inherit; } :root[data-theme="light"] .fnx-panel.fnx-float { box-shadow: 0 12px 38px rgba(15, 30, 55, .2); } .fnx-panel-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; } .fnx-kick { font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--fnx-accent); } .fnx-panel-head h3 { margin: 0; font-size: 15px; font-weight: 700; letter-spacing: -.01em; color: var(--fnx-text); } .fnx-panel-x { margin-left: auto; background: none; border: 0; cursor: pointer; color: var(--fnx-muted); font-size: 17px; line-height: 1; padding: 2px 4px; border-radius: 5px; } .fnx-panel-x:hover { color: var(--fnx-text); background: var(--fnx-border); } .fnx-what { margin: 6px 0 0; color: var(--fnx-text); max-width: 105ch; } .fnx-what b { font-weight: 650; } /* "What the numbers mean" tiles — the equivalent of the reference's stage cards. */ .fnx-reads { display: grid; gap: 7px; margin: 9px 0 0; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); } .fnx-read { padding: 7px 10px; border: 1px solid var(--fnx-border); border-radius: 8px; background: var(--fnx-panel); } .fnx-read .k { font-size: 10px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--fnx-accent); margin-bottom: 3px; } .fnx-read .v { font-size: 12.5px; color: var(--fnx-muted); line-height: 1.5; } .fnx-read .v b { color: var(--fnx-text); font-weight: 650; } .fnx-use { margin: 9px 0 0; padding: 7px 10px; border-radius: 8px; background: var(--fnx-panel); border: 1px dashed var(--fnx-border); font-size: 12.5px; color: var(--fnx-muted); } .fnx-use b { color: var(--fnx-text); font-weight: 650; } .fnx-use .lbl { font-size: 10px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--fnx-accent); margin-right: 7px; } .fnx-panel-foot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 9px 0 0; } .fnx-cta { font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; padding: 6px 14px; border-radius: 999px; background: var(--fnx-accent); border: 1px solid var(--fnx-accent); color: #0b1220; } .fnx-cta:hover { filter: brightness(1.08); } .fnx-link { font-size: 12px; font-weight: 600; color: var(--fnx-accent); text-decoration: none; border-bottom: 1px dotted currentColor; } .fnx-link:hover { filter: brightness(1.15); } .fnx-foot-sp { margin-left: auto; } .fnx-mini { font: inherit; font-size: 11.5px; cursor: pointer; background: none; border: 0; color: var(--fnx-muted); padding: 4px 2px; } .fnx-mini:hover { color: var(--fnx-text); text-decoration: underline; } /* ─────────────────────────── tour overlay ─────────────────────────── */ .fnx-ov { /* No blocking/dimming layer (user direction 2026-08-19): the page stays readable and usable while the tour runs; only the ring + card are drawn. */ position: fixed; inset: 0; z-index: 2147483000; background: transparent; cursor: default; pointer-events: none; } .fnx-ov.fnx-nospot { background: transparent; } /* Spotlight = a ring around the target only — no full-screen dim. */ .fnx-spot { position: fixed; z-index: 2147483001; pointer-events: none; border-radius: 8px; box-shadow: 0 0 0 2px var(--fnx-accent), 0 0 0 6px color-mix(in srgb, var(--fnx-accent) 22%, transparent); transition: top .22s ease, left .22s ease, width .22s ease, height .22s ease; } .fnx-spot[hidden] { display: none; } /* The tour layer mounts on , above the app's body zoom (see explainer.js), so it inherits no typography from — state the font here. */ .fnx-pop { position: fixed; z-index: 2147483002; width: min(340px, calc(100vw - 28px)); box-sizing: border-box; padding: 15px 17px 13px; border: 1px solid var(--fnx-border); border-radius: 12px; background: var(--fnx-panel); color: var(--fnx-text); box-shadow: 0 14px 42px rgba(0, 0, 0, .48); font: 400 13px/1.55 Inter, ui-sans-serif, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; } .fnx-pop button { font-family: inherit; } .fnx-pop .fnx-count { font-size: 10px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; color: var(--fnx-muted); } .fnx-pop h4 { margin: 6px 0 6px; font-size: 15px; font-weight: 700; letter-spacing: -.01em; } .fnx-pop p { margin: 0; color: var(--fnx-muted); } .fnx-pop p b { color: var(--fnx-text); font-weight: 650; } .fnx-pop p + p { margin-top: 7px; } .fnx-bar { display: flex; align-items: center; gap: 8px; margin-top: 14px; } .fnx-skip { font: inherit; font-size: 12px; cursor: pointer; background: none; border: 0; color: var(--fnx-muted); padding: 6px 2px; } .fnx-skip:hover { color: var(--fnx-text); text-decoration: underline; } .fnx-nav { margin-left: auto; display: flex; gap: 8px; } .fnx-back, .fnx-next { font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; padding: 6px 15px; border-radius: 999px; } .fnx-back { background: transparent; border: 1px solid var(--fnx-border); color: var(--fnx-muted); } .fnx-back:hover { color: var(--fnx-text); border-color: var(--fnx-accent); } .fnx-next { background: var(--fnx-accent); border: 1px solid var(--fnx-accent); color: #0b1220; } .fnx-next:hover { filter: brightness(1.08); } /* Progress rail under the bubble — cheap orientation for a 6–8 step tour. */ .fnx-rail { display: flex; gap: 3px; margin-top: 11px; } .fnx-rail i { flex: 1; height: 3px; border-radius: 2px; background: var(--fnx-border); } .fnx-rail i.on { background: var(--fnx-accent); } /* Light theme: the accent is dark navy, so button text must flip to white. */ :root[data-theme="light"] .fnx-cta, :root[data-theme="light"] .fnx-next { color: #fff; } :root[data-theme="light"] .fnx-spot { box-shadow: 0 0 0 2px var(--fnx-accent), 0 0 0 6px color-mix(in srgb, var(--fnx-accent) 22%, transparent); } :root[data-theme="light"] .fnx-ov.fnx-nospot { background: transparent; } :root[data-theme="light"] .fnx-pop { box-shadow: 0 14px 42px rgba(15, 30, 55, .22); } @media (max-width: 700px) { .fnx-panel { margin: 6px 8px 2px; padding: 11px 12px; } /* Stacking the tiles would make the panel eat the whole phone screen, so they become one swipeable row instead — the panel stays a glance, and the row scrolls inside itself rather than the page going sideways. */ .fnx-reads { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: -12px; padding: 0 12px 3px; gap: 8px; } .fnx-read { flex: 0 0 78%; scroll-snap-align: start; } .fnx-pop { width: calc(100vw - 24px); } } @media (prefers-reduced-motion: reduce) { .fnx-panel { animation: none; } .fnx-spot { transition: none; } }