/* ============================================================================ PROJECT MAGNETO — MAGNETO RELAY subscriber radar (LIVE) MV7 design tokens, inherited verbatim from cloud/relay/mockups/subscriber_radar_mockup.html (the approved design) which lifted them from magneto-prod index.html. Deliberately SINGLE-THEME (the product is dark) and every colour is painted explicitly, so the page holds its own ground on any host. What was DROPPED from the mockup, on purpose: · .mock — the "MOCKUP · replay" banner. This page is live. · .divrow — the "end of replay" divider. There is no replay. · .rot/.rot-up/.rot-down — the sector-rotation chips. SUB.PULSE.V1 carries no rotation list, and a style for a state the server cannot send is an invitation to render one. What was ADDED: · the sign-in gate, the account bar, the reconnecting pill, the delay note, the quiet "pulse coming online" state, .dash (the cells with no reading), the SUB.PULSE.V1 live strip (.regime.pstale, .gbr, .sarr, the .flat variants), and :focus-visible rings (the mockup had none; a product page must be keyboard-navigable). · PULSE v2 — the LIFE pass: state colour + a soft glow on the market gauge (NEUTRAL is warm AMBER, never grey — grey is reserved for the one state that genuinely has no data), direction-tinted sector tiles, gradient breadth bars, family-coloured row accents, one notch more saturation on the chips and the LIVE pill, plus the two MECHANICAL columns: .act (the written interest tier — three dots until 2026-08-28, when the operator ordered words) and .dirc (the direction chip). Saturation and glow only — no new animation beyond the existing pulse dot, and the reduced-motion block still kills all of it. · LIFE pass 2 (2026-09-23, operator: "put some more life and colours into the system"): every row's surface takes its family colour as an 8% cast (`--fam-tint` on `background-image`, see the TINT note), and an active family chip wears its family's colour. Still no new keyframe. · .tkwrap/.tk — the alert ticket: the full card behind a row, both languages at once, each block in its own direction. Same modal language as the sign-in gate. · tbody tr.fresh — the 60-second arrival state. A transition, not a keyframe, so the page's animation ceiling is unchanged and reduced motion switches it off. · tbody tr.crit / .crit-live — the CRITICAL OSINT row (operator order 2026-09-24): a light-red surface for its whole life, and inside its 15-minute window the ONE keyframe the operator ordered by name (`critflick`, "flickering"), switched off by the reduced-motion blocks like every other animation here. What was DROPPED: · the macro band (2026-10-16, operator order): the strip is gone from the product and every one of its rules went with it — a style for a node the page never draws is dead vocabulary. ============================================================================ */ :root{ --bg-base:#080C14; --bg-surface:#10182A; --bg-elevated:#161F36; --bg-deeper:#060912; --bg-hover:rgba(107,159,255,.07); --text-primary:#EAEEF7; --text-secondary:#9DA9C2; --text-tertiary:#6A7591; --text-disabled:#424D6A; /* the ONE colour above --text-primary: the tile's price, by operator order 2026-09-10 */ --px-bright:#FFFFFF; --accent:#6B9FFF; --accent-2:#87B5FF; --accent-bg:rgba(107,159,255,.10); --accent-glow:rgba(107,159,255,.35); --up:#3BD4A2; --down:#F36E6E; --warn:#E8B04A; --warn-bg:rgba(232,176,74,.10); /* RISK WARNING tokens (user 2026-09-24 19:1x ET, after seeing the live opinion footer: "way too grey, we need it much more visible") — the user's own red family, declared ONCE here and used only by the opinion page's strip + block. Not --down / --crit-*: those mean a bearish chip and a critical severity row. */ --risk:#EF4444; --risk-bg:rgba(239,68,68,.14); --risk-ring:rgba(239,68,68,.35); --risk-label:#FCA5A5; --risk-body:#F8FAFC; --risk-strip-bg:rgba(239,68,68,.10); --risk-strip-line:rgba(239,68,68,.55); --risk-strip-text:#FECACA; /* the third interest tier only — one hot accent, used in exactly one place */ --hot:#FF8A3D; /* the FOURTH and top interest tier only (CRITICAL INTEREST, 2026-08-28). Its own token rather than --down: --down means "this alert is bearish" on the direction chip, and a shared colour would make the two mechanical columns look like they were agreeing about something. Deliberately hotter and more saturated than --hot, because it sits above it. */ --crit:#FF4D4D; --info:#9B8CFF; --info-bg:rgba(155,140,255,.10); --osint:#4FC3E8; --osint-bg:rgba(79,195,232,.10); --osint-line:rgba(79,195,232,.38); /* two families the mockup never had to draw (its window held none) */ --news:#E0709B; --news-bg:rgba(224,112,155,.10); --news-line:rgba(224,112,155,.38); --market:#8FA3C8; --market-bg:rgba(143,163,200,.10); --market-line:rgba(143,163,200,.34); /* the brief (market_update) is BLUE since 2026-09-23 (operator: "the global market update blueish") — a sky blue set apart from levels' periwinkle --accent, osint's greener cyan and market's desaturated grey-blue. It had been gold. */ --brief:#5EA8F2; --brief-bg:rgba(94,168,242,.10); --brief-line:rgba(94,168,242,.38); /* insider has its OWN token since 2026-09-23 (operator: "make the insider light green") — it had borrowed --warn, so an insider row read as a caveat. A light, yellow-leaning green, one clear step from momentum's teal --up, so the two greens never read as one family. */ --insider:#9FE870; --insider-bg:rgba(159,232,112,.12); --insider-line:rgba(159,232,112,.40); --aurora:linear-gradient(90deg,var(--accent) 0%,var(--info) 55%,var(--up) 100%); --font-sans:'Heebo','Inter',-apple-system,system-ui,sans-serif; --font-mono:'JetBrains Mono','SF Mono',Menlo,monospace; /* ── sub.alert.v3 · THE EXTREME TIER (2026-09-02) ──────────────────────────────── Two lanes, two colours, and they are NEVER the same colour: the union of the two was measured to dilute the chase lane from 37% to 15.8%, and a subscriber scrolling a feed must be able to tell the confirmation lane from the setup lane at a glance. Amber for CHASE and violet for EARLY, per CARD_COPY_SPEC §1. Their OWN tokens, not --warn / --info borrowed: those two already mean other things on this page (a flat regime, a translated card), and a shared colour is how two unrelated states start looking like one state. */ --xchase:#F0A83C; --xchase-bg:rgba(240,168,60,.16); --xchase-line:rgba(240,168,60,.5); --xearly:#A98CFF; --xearly-bg:rgba(169,140,255,.16); --xearly-line:rgba(169,140,255,.5); /* the HARD STOP line. Its own token, deliberately not --down and not --crit: the stop is not a bearish read and it is not an interest tier — it is the line the lane was MEASURED with, and it must not read as either of the two mechanical columns. */ --xstop:#FF6B6B; --xstop-bg:rgba(255,107,107,.10); --xstop-line:rgba(255,107,107,.34); /* ── the CRITICAL OSINT row (operator order 2026-09-24: "light red, but noticeable") ── Its OWN tokens, deliberately not --crit (the interest tier's text colour, declared and used exactly once), not --down (a bearish read) and not --xstop (the printed stop): a severity surface must not read as any of the three. Values are for the page's one theme — it is dark-only (see the header), so there is no light set to provide. --crit-row-bg is the resting surface, --crit-row-bg-strong the flicker's far end and the hover, --crit-row-line the hairline edge. 🔴 OPAQUE and PRE-MIXED since round 2 (2026-09-24). Pass 1 was a translucent red (rgba(255,77,77,.20) / .34) laid UNDER the 8% family cast, and the rendered resting row came out rgb(64,47,63): plum, hue 304°, only dE76 15.2 from a navy OSINT row, because the navy base and the cyan OSINT cast both pulled it toward purple. That is what an expired row wears for the rest of its life, and what a reduced-motion reader sees all the time. An opaque value paints the same pixel over any base, so the hue belongs to the token and not to whatever sits under it: rest #4F1D26 = hue 349.2°, dE76 32.2 from the normal OSINT row; far end #6A2531 = hue 349.6°, dE76 41.0, and 10.5 from the rest (pass 1's cycle was 13.0). The family cast stands down on a critical row (see the CRITICAL block). Primary text holds 11.76 / 9.40:1 on the two, secondary 5.79 / 4.62:1. --crit-row-fg is the interest word's (and, since the class-label order, the event class label's) colour ON this surface: the tier's own --crit (#FF4D4D) falls to 4.18 / 3.34:1 here, below AA for 11.5px text; #FFA8A8 holds 7.43 / 5.94:1. The chip is FILLED, white on #E03131 = 4.51:1 (a white-on-#FF4D4D chip would sit near 3.3:1). Pass 1's note said 5.7:1 for the chip; measured, it is 4.51. */ --crit-row-bg:#4F1D26; --crit-row-bg-strong:#6A2531; --crit-row-line:rgba(255,77,77,.45); --crit-row-fg:#FFA8A8; --crit-chip-bg:#E03131; --crit-chip-fg:#FFFFFF; --line:rgba(107,159,255,.13); } *{box-sizing:border-box;} html,body{margin:0; padding:0;} body{background:var(--bg-base); color:var(--text-primary); font-family:var(--font-sans); overflow-x:hidden; min-height:100vh; -webkit-text-size-adjust:100%;} /* FAIL-CLOSED. ships with .relay-locked, so the radar is hidden from the first byte and is revealed ONLY by a successful ID-token mint. Same doctrine as the MV7 console's html.mv7-locked — the visible gate is not the gate. */ html.relay-locked #relay-root{display:none !important;} :focus-visible{outline:2px solid var(--accent-2); outline-offset:2px; border-radius:4px;} .page{background:var(--bg-base); min-height:100vh; padding:0 0 48px;} .mono{font-family:var(--font-mono); font-variant-numeric:tabular-nums;} .wrap{max-width:1180px; margin:0 auto; padding:0 20px;} .vh{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;} /* ── header (v3 three-zone grid) ───────────────────────────────────────── */ .top{border-bottom:1px solid var(--line); background:linear-gradient(180deg,var(--bg-deeper),var(--bg-base));} /* three zones: minmax(0,1fr) side rails keep the wordmark optically dead-centre on the content column no matter how wide the rail contents get; the end rail wraps inside its own track instead of shoving the centre off-axis. v3 carries NO tagline. */ .top .wrap{display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); align-items:center; column-gap:10px; padding-top:18px; padding-bottom:15px;} .hz{display:flex; align-items:center; gap:8px; min-width:0;} .hz-start{justify-self:start;} .hz-mid{justify-self:center;} .hz-end{justify-self:end; flex-wrap:wrap; justify-content:flex-end; row-gap:6px;} .brand{font-weight:800; letter-spacing:.16em; font-size:19px; direction:ltr; white-space:nowrap;} /* its Inter: the >=721px block in §PHONE */ .brand em{font-style:normal; background:var(--aurora); -webkit-background-clip:text; background-clip:text; color:transparent;} /* ── the BETA mark (2026-09-18, operator order: "the same design of the logo") ── NOT a new visual family: it is the wordmark's OWN paint — the `--aurora` gradient clipped to the glyphs, exactly as `.brand em` above — at badge scale. The header gains a release stage without gaining a style, which is the whole of the order. It rides INSIDE `.brand`, the one element on this page pinned to `direction:ltr`, and that is what keeps the mark on the name's trailing edge in `he` as well as `en` without a single directional rule of its own. Raised with `position:relative`, NOT `vertical-align:super`: a superscript grows the line box, and the mid rail's height is the header's height — the mark must not be able to move the chrome it is printed on. A relative offset paints high and occupies its original line box, so the header measures the same with it as without it. 9px against the wordmark's 19px is what separates a QUALIFIER from a third word: set at the wordmark's own size it would read as "PROJECT MAGNETO BETA", which is a different product name rather than a release stage. */ .brand .beta{font-size:9px; font-weight:800; letter-spacing:.14em; position:relative; top:-6px; margin-inline-start:6px; background:var(--aurora); -webkit-background-clip:text; background-clip:text; color:transparent;} /* v2: one notch more saturation + a soft halo. It is the page's only claim that the feed is alive, so it should read as lit, not as a grey label with a green dot. */ .livep{display:inline-flex; align-items:center; gap:6px; font-size:10px; font-weight:800; letter-spacing:.06em; color:var(--up); background:rgba(59,212,162,.16); border:1px solid rgba(59,212,162,.52); border-radius:999px; padding:5px 10px; white-space:nowrap; box-shadow:0 0 14px rgba(59,212,162,.13);} .livep i{width:7px; height:7px; border-radius:50%; background:var(--up); flex:0 0 7px; box-shadow:0 0 8px rgba(59,212,162,.8); animation:blip 1.7s ease-in-out infinite;} @keyframes blip{0%,100%{opacity:1; transform:scale(1);} 50%{opacity:.28; transform:scale(.65);}} /* stale-feed pill — replaces the live pill while the stream is down */ .livep.stale{color:var(--warn); background:rgba(232,176,74,.14); border-color:rgba(232,176,74,.45); box-shadow:0 0 14px rgba(232,176,74,.10);} .livep.stale i{background:var(--warn); box-shadow:0 0 8px rgba(232,176,74,.7);} /* ── the market-status chip (2026-09-02, operator order) ─────────────────── The start rail's chip, between the language toggle and the wordmark. Same visual family as `.livep`: same pill, same 10px/800 type, same 7px dot — the two answer neighbouring questions ("is the feed alive?" / "is the tape open?") and two header chips that disagree about their own shape read as two unrelated features. What it deliberately does NOT borrow is `.livep i`'s `blip` animation. This page sanctions exactly TWO infinite animations (the live dot and the market panel's live dot) and selftest.js pins that count EXACTLY — but the real reason is that a session state is not a heartbeat. It changes four times a day; a pulsing dot would claim otherwise. Colour is carried ONLY by the four `.ms-*` classes and never by an inline style, so a state cannot be repainted from JS into looking like another one. */ .mstat{display:inline-flex; align-items:center; gap:6px; font-size:10px; font-weight:800; letter-spacing:.06em; border-radius:999px; padding:5px 10px; white-space:nowrap; border:1px solid var(--line); background:var(--bg-surface); color:var(--text-tertiary);} .mstat i{width:7px; height:7px; border-radius:50%; flex:0 0 7px; background:currentColor; box-shadow:0 0 8px currentColor;} .ms-pre{color:var(--warn); background:rgba(232,176,74,.14); border-color:rgba(232,176,74,.45);} .ms-rth{color:var(--up); background:rgba(59,212,162,.16); border-color:rgba(59,212,162,.52);} .ms-after{color:var(--accent-2); background:var(--accent-bg); border-color:var(--accent-glow);} /* the ONE muted state, muted on purpose: a closed tape is the ABSENCE of a session and must not compete with the three lit ones. The dot keeps its shape (so the chip does not visibly re-flow at 20:00 ET) and loses only its halo. */ .ms-shut{color:var(--text-tertiary); background:var(--bg-surface); border-color:var(--line);} .ms-shut i{box-shadow:none; opacity:.68;} .who{font-size:11.5px; color:var(--text-tertiary); direction:ltr; max-width:210px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;} .tier{font-size:10px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; direction:ltr; color:var(--accent-2); background:var(--accent-bg); border:1px solid var(--accent-glow); border-radius:999px; padding:3px 9px;} .lang{display:inline-flex; border:1px solid var(--line); border-radius:999px; overflow:hidden; background:var(--bg-surface);} .lang button{font-family:var(--font-sans); font-size:12px; font-weight:700; color:var(--text-tertiary); background:transparent; border:0; padding:5px 12px; cursor:pointer; transition:all .15s;} .lang button+button{border-inline-start:1px solid var(--line);} .lang button:hover{color:var(--text-primary);} .lang button.on{background:var(--accent-bg); color:var(--accent-2);} .lo{font-family:var(--font-sans); font-size:12px; font-weight:600; color:var(--text-tertiary); background:var(--bg-surface); border:1px solid var(--line); border-radius:999px; padding:5px 12px; cursor:pointer; transition:all .15s;} .lo:hover{color:var(--down); border-color:rgba(243,110,110,.4);} .aur{height:2px; background:var(--aurora); opacity:.75;} /* ── subscriber feedback (2026-09-18 · LIT 2026-09-23) ──────────────────── The header entry point sits in the START rail beside the language toggle and the market chip. It shipped as a QUIET control; the operator's order of 2026-09-23 was the opposite — "shine and be extra visible, keeping a contrast and design that fits the system" — so it is now the AURORA RING: the wordmark's own paint (`--aurora`, already on `.brand em`, `.beta` and the `.aur` line) drawn as a 2px ring around an OPAQUE, dimly aurora-tinted surface, with a two-tone halo. Nothing else in the chrome wears the gradient as a ring, which is what makes it findable at a glance without becoming the solid call-to-action the send button and the sign-in button own. HOW THE RING IS DRAWN: two background layers — the fill clipped to padding-box, the gradient clipped to border-box — under a TRANSPARENT border. It is the one technique that keeps the 999px radius (border-image would square it). Consequence: a state must repaint the LAYERS; `border-color` paints nothing here. THE FILL MUST BE OPAQUE (color-mix on tokens, never an rgba wash): a translucent fill lets the ring's gradient bleed through and the pill turns into a solid rainbow — the first harness shot of this pass did exactly that, and white on the violet band was ~3.5:1. Opaque and dim inside, lit at the edge: the label sits at >8:1. The same ring, the same halo and the same label weight are worn by the filters handle (`.fbtn.fbtn-more`) — the two doors the operator asked to shine speak ONE lit vocabulary, never two. MOTION: hover lifts 1px and brightens the halo through a transition the reduced-motion block kills. No keyframe — the four-keyframe ceiling holds. Every offset is logical, so `he` and `en` need no second rule. */ .fbbtn{display:inline-flex; align-items:center; gap:7px; font-family:var(--font-sans); font-size:12.5px; font-weight:700; letter-spacing:.01em; color:var(--text-primary); border:2px solid transparent; border-radius:999px; padding:5px 14px; padding-inline-start:12px; cursor:pointer; white-space:nowrap; background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 24%,var(--bg-elevated)) 0%,color-mix(in srgb,var(--info) 24%,var(--bg-elevated)) 55%,color-mix(in srgb,var(--up) 22%,var(--bg-elevated)) 100%) padding-box, var(--aurora) border-box; box-shadow:0 0 0 1px rgba(107,159,255,.14), 0 0 18px rgba(107,159,255,.44), 0 4px 20px rgba(155,140,255,.26), inset 0 1px 0 rgba(255,255,255,.08); transition:transform .15s ease, box-shadow .15s ease, filter .15s ease;} .fbbtn:hover{transform:translateY(-1px); filter:brightness(1.08); box-shadow:0 0 0 1px rgba(107,159,255,.22), 0 0 26px rgba(107,159,255,.62), 0 6px 24px rgba(155,140,255,.34), inset 0 1px 0 rgba(255,255,255,.10);} .fbbtn:active{transform:none; filter:brightness(.96);} .fbbtn:focus-visible{outline:2px solid var(--accent); outline-offset:3px;} /* the speech-bubble mark, drawn in CSS — no icon font, no third-party sprite, and nothing that can 404 into a blank square in the header. It takes the accent so the glyph reads lit beside the primary-white label. */ .fbbtn i{width:11px; height:9px; border:1.5px solid currentColor; border-radius:2px; position:relative; flex:0 0 auto; color:var(--accent-2);} .fbbtn i::after{content:""; position:absolute; bottom:-4px; inset-inline-start:2px; border-inline-start:3px solid currentColor; border-top:3px solid transparent; border-bottom:3px solid transparent;} .fbpage{padding:36px 20px 64px; display:flex; justify-content:center;} .fbcard{width:100%; max-width:640px;} .fbback{font-family:var(--font-sans); font-size:12px; font-weight:600; color:var(--text-tertiary); background:none; border:0; padding:0 0 18px; cursor:pointer;} .fbback:hover{color:var(--accent-2);} .fbtitle{font-family:var(--font-sans); font-size:26px; font-weight:800; color:var(--text-primary); margin:0 0 8px; line-height:1.25;} .fbintro{font-family:var(--font-sans); font-size:14px; color:var(--text-secondary); margin:0 0 26px; line-height:1.7;} .fbform{display:flex; flex-direction:column;} .fblabel{font-family:var(--font-sans); font-size:12px; font-weight:700; color:var(--text-secondary); letter-spacing:.02em; margin-bottom:9px;} .fbcats{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:22px;} .fbcats button{font-family:var(--font-sans); font-size:12.5px; font-weight:600; color:var(--text-secondary); background:var(--bg-surface); border:1px solid var(--line); border-radius:999px; padding:7px 15px; cursor:pointer; transition:all .15s;} .fbcats button:hover{color:var(--text-primary); border-color:var(--accent-glow);} .fbcats button.on{color:var(--accent-2); background:var(--accent-bg); border-color:var(--accent-glow);} .fbcats button:focus-visible{outline:2px solid var(--accent); outline-offset:2px;} .fbmsg{font-family:var(--font-sans); font-size:14px; line-height:1.7; color:var(--text-primary); background:var(--bg-surface); border:1px solid var(--line); border-radius:12px; padding:14px 15px; resize:vertical; min-height:150px; width:100%; box-sizing:border-box;} .fbmsg::placeholder{color:var(--text-disabled);} .fbmsg:focus{outline:none; border-color:var(--accent-glow); box-shadow:0 0 0 3px var(--accent-bg);} .fbcount{font-family:var(--font-mono); font-size:11px; color:var(--text-disabled); margin-top:7px; text-align:end;} .fbcontact{display:flex; align-items:center; gap:9px; margin-top:16px; font-family:var(--font-sans); font-size:13px; color:var(--text-secondary); cursor:pointer;} .fbcontact input{width:15px; height:15px; accent-color:var(--accent); cursor:pointer; flex:0 0 auto;} .fberr{font-family:var(--font-sans); font-size:13px; font-weight:600; color:var(--down); background:rgba(243,110,110,.08); border:1px solid rgba(243,110,110,.3); border-radius:10px; padding:11px 14px; margin-top:16px; line-height:1.6;} .fbsend{font-family:var(--font-sans); font-size:14px; font-weight:700; color:var(--bg-base); background:var(--accent); border:0; border-radius:10px; padding:13px 22px; margin-top:22px; cursor:pointer; align-self:flex-start; transition:all .15s;} .fbsend:hover:not(:disabled){background:var(--accent-2);} .fbsend:disabled{opacity:.55; cursor:default;} .fbsend:focus-visible{outline:2px solid var(--accent); outline-offset:3px;} .fbdone{border:1px solid rgba(59,212,162,.32); background:rgba(59,212,162,.07); border-radius:14px; padding:26px;} .fbdone h2{font-family:var(--font-sans); font-size:17px; font-weight:800; color:var(--up); margin:0 0 9px;} .fbdone p{font-family:var(--font-sans); font-size:13.5px; color:var(--text-secondary); margin:0 0 18px; line-height:1.7;} .fbagain{font-family:var(--font-sans); font-size:13px; font-weight:600; color:var(--text-primary); background:var(--bg-surface); border:1px solid var(--line); border-radius:999px; padding:9px 17px; cursor:pointer;} .fbagain:hover{border-color:var(--accent-glow); color:var(--accent-2);} @media (max-width:560px){ .fbpage{padding:24px 14px 48px;} .fbtitle{font-size:21px;} /* the send button goes full width where a thumb has to find it */ .fbsend{align-self:stretch; text-align:center;} } /* ── market + sector pulse strip ──────────────────────────────────────── */ .pulsebar{background:var(--bg-deeper); border-bottom:1px solid var(--line);} /* ONE row, TWO slots: the scrolling gauge+sector track, and the MARKET PULSE card in the trailing space the strip has always left empty. The card is a SIBLING of the track, never a child — that is what keeps the six tiles at exactly 120px AND at their own height, because .pulse inside the track is height:auto and a taller card therefore cannot stretch it. All spacing is logical, so RTL needs no second rule. */ /* one COLUMN: the gauge+sector track on its own full-width line, the MARKET PULSE band on its own full-width line beneath it. Nothing shares a row with the tiles, so nothing can sit over them — the symmetry order, 2026-08-28. */ .pulserow{max-width:1180px; margin:0 auto; display:flex; flex-direction:column; align-items:stretch;} .pulsescroll{flex:1 1 auto; min-width:0; align-self:stretch; overflow-x:auto; overflow-y:hidden; scrollbar-width:thin; -webkit-overflow-scrolling:touch;} .pulse{display:flex; align-items:stretch; gap:10px; padding:12px 20px; width:max-content; min-width:100%;} .regime{display:flex; flex-direction:column; justify-content:center; gap:3px; white-space:nowrap; border-radius:10px; padding:8px 14px; border:1px solid; font-size:12.5px; font-weight:700;} /* the sub-line takes the gauge's own colour at low opacity instead of the grey it used to be — the whole pill reads as ONE lit object, not a label with a note. */ .regime small{font-weight:600; font-size:10px; letter-spacing:.05em; color:currentColor; opacity:.68;} /* ── gauge state colours (the LIFE pass) ────────────────────────────────── Each state is a real reading and is painted like one: saturated fill, a lit border and a soft outward glow. 🔴 NEUTRAL IS WARM AMBER, NEVER GREY. Grey on this page means exactly one thing — "no data yet" (.rg-pending) — and painting a real NEUTRAL reading in the same grey told the subscriber the market gauge was broken when it was working. That is the whole "too grey" order in one rule. */ .rg-down{color:var(--down); background:rgba(243,110,110,.17); border-color:rgba(243,110,110,.48); box-shadow:0 0 20px rgba(243,110,110,.13), inset 0 1px 0 rgba(255,255,255,.03);} .rg-up{color:var(--up); background:rgba(59,212,162,.17); border-color:rgba(59,212,162,.50); box-shadow:0 0 22px rgba(59,212,162,.17), inset 0 1px 0 rgba(255,255,255,.04);} .rg-flat{color:var(--warn); background:rgba(232,176,74,.16); border-color:rgba(232,176,74,.46); box-shadow:0 0 20px rgba(232,176,74,.13), inset 0 1px 0 rgba(255,255,255,.03);} /* the ONE grey: no reading has arrived, and the strip says so in words too */ .rg-pending{color:var(--text-tertiary); background:rgba(157,169,194,.06); border-color:rgba(157,169,194,.20);} /* SUB.PULSE.V1: a reading whose asof is older than PULSE_STALE_MS is DIMMED, never error-coloured. Old is not broken — the gauge's own relative clock already says how old, and painting it red would teach the subscriber to distrust a correct number. */ .regime.pstale{opacity:.6;} /* the gauge's own breadth ratio, same 3px rhythm as a sector tile's bar. `currentColor` is load-bearing, not shorthand: the bar is the SAME reading as the label above it, so it must be the same colour by construction — including when NEUTRAL turns amber. */ .gbr{display:block; height:3px; border-radius:2px; background:rgba(157,169,194,.14); overflow:hidden; margin-top:1px;} .gbr i{display:block; height:100%; border-radius:2px; background:currentColor; opacity:.92;} .pdiv{flex:0 0 1px; width:1px; background:var(--line); margin:4px 5px;} .stile{flex:0 0 120px; width:120px; background:var(--bg-elevated); border:1px solid var(--line); border-radius:10px; padding:8px 10px 9px; transition:border-color .18s ease, box-shadow .18s ease;} /* direction-tinted borders (the LIFE pass). The tint comes from the CONTRACT's `direction`, which is why the class is stamped on the tile in sectorTile() and is never inferred here from the sign of the number inside it. */ .stile.up{border-color:rgba(59,212,162,.32); box-shadow:0 4px 16px rgba(59,212,162,.07);} .stile.down{border-color:rgba(243,110,110,.32); box-shadow:0 4px 16px rgba(243,110,110,.07);} .stile.flat{border-color:rgba(232,176,74,.22);} .sname{font-size:10.5px; font-weight:600; color:var(--text-secondary); line-height:1.32; height:28px; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;} .srow{display:flex; align-items:center; gap:7px; margin-top:6px;} .sval{font-size:13px; font-weight:700; letter-spacing:-.01em;} .sval.up{color:var(--up);} .sval.down{color:var(--down);} /* FLAT is a real reading, not a missing one: it gets the primary text colour, the neutral bar, and NO arrow. The direction always comes from the contract's `direction` field — never from the sign of avg_gain. */ .sval.flat{color:var(--text-primary);} .sarr{font-size:8.5px; margin-inline-end:3px; opacity:.85;} .sbr{flex:1 1 auto; height:3px; border-radius:2px; background:rgba(157,169,194,.14); overflow:hidden;} .sbr i{display:block; height:100%; border-radius:2px;} /* gradient fills: the bar gains depth toward its leading edge instead of reading as a flat block of colour. FLAT keeps a bar of its own — a 50% breadth is a reading. */ .sbr i.up{background:linear-gradient(90deg,rgba(59,212,162,.45),var(--up));} .sbr i.down{background:linear-gradient(90deg,rgba(243,110,110,.45),var(--down));} .sbr i.flat{background:linear-gradient(90deg,rgba(232,176,74,.32),rgba(232,176,74,.62));} /* nowrap + ellipsis: the bottom line must never wrap and stretch the whole 120px tile row — a long sector's breadth line is clipped, and the tile's title carries it whole. */ .sbl{margin-top:5px; font-size:9.5px; letter-spacing:.03em; color:var(--text-tertiary); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;} /* quiet "coming online" state — the design is present, the data is not, and the page says so */ .stile.pending{opacity:.45;} .stile.pending .sname{color:var(--text-disabled);} .stile.pending .sval{color:var(--text-disabled);} .stile.pending .sbr i{background:rgba(157,169,194,.30);} .pnote{display:inline-flex; align-items:center; align-self:center; white-space:nowrap; border-radius:999px; padding:7px 13px; font-size:11.5px; font-weight:700; color:var(--text-tertiary); background:rgba(157,169,194,.07); border:1px dashed rgba(157,169,194,.30);} /* ── MARKET PULSE band (its own full-width line under the sector track) ──── Every segment is a MECHANICAL market-wide aggregate; there is no ticker, no price and no index level in this lane, so nothing here is ever drawn as a quote. The state colour follows the LIFE-pass rule the gauge set: ACCUMULATION deep green · DISTRIBUTION red · BALANCED WARM AMBER, never grey — grey on this page means exactly one thing, "no reading has arrived" (.pending). */ /* a full-width horizontal internals BAND under the sector track: every reading is a segment on one line (wrapping to two on narrow screens), evenly spaced — no card beside the tiles, nothing overlapped, symmetric by construction. */ .mpanel{flex:none; margin-block:0 12px; margin-inline:20px; min-width:0; background:var(--bg-elevated); border:1px solid var(--line); border-radius:10px; padding:8px 14px; display:flex; flex-direction:row; align-items:center; flex-wrap:wrap; gap:6px 18px; justify-content:space-between; line-height:1.3; transition:border-color .18s ease, box-shadow .18s ease;} /* segment sizing on the band: labels/rows stay content-sized, the two kinds of bar flex to absorb the slack evenly from both ends of the line */ .mphd{flex:0 0 auto;} .mpsplit{flex:0 0 auto;} .mpbar{flex:1 1 150px; min-width:110px; max-width:260px;} .mprow{flex:0 0 auto;} .mprow.mpmini{flex:1 1 150px; min-width:130px; max-width:220px;} .mpanel.tp-up{border-color:rgba(59,212,162,.32); box-shadow:0 4px 16px rgba(59,212,162,.07);} .mpanel.tp-down{border-color:rgba(243,110,110,.32); box-shadow:0 4px 16px rgba(243,110,110,.07);} .mpanel.tp-flat{border-color:rgba(232,176,74,.28); box-shadow:0 4px 16px rgba(232,176,74,.07);} /* a reading older than MPANEL_STALE_MS is DIMMED and prints its own age in the header — never hidden, never error-coloured. Old is not broken. */ .mpanel.mpstale{opacity:.6;} .mphd{display:flex; align-items:center; gap:6px; min-width:0;} .mptl{font-size:9.5px; font-weight:800; letter-spacing:.10em; color:var(--text-secondary); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;} .mprel{font-size:9px; font-weight:600; color:var(--text-tertiary); white-space:nowrap;} .mptape{margin-inline-start:auto; font-size:8.5px; font-weight:800; letter-spacing:.06em; white-space:nowrap; border-radius:999px; padding:2px 7px; border:1px solid;} .mptape.tp-up{color:var(--up); background:rgba(59,212,162,.16); border-color:rgba(59,212,162,.46);} .mptape.tp-down{color:var(--down); background:rgba(243,110,110,.16); border-color:rgba(243,110,110,.46);} .mptape.tp-flat{color:var(--warn); background:rgba(232,176,74,.16); border-color:rgba(232,176,74,.44);} /* the BUY / SELL split. space-between mirrors itself in RTL, so there is no second rule for Hebrew; the figures themselves are dir=ltr because numbers do not flip. */ .mpsplit{display:flex; align-items:center; justify-content:space-between; gap:6px; font-size:9.5px; font-weight:700; white-space:nowrap; margin-top:1px;} .mpsl.up{color:var(--up);} .mpsl.down{color:var(--down);} .mparr{font-size:7.5px; opacity:.85; margin-inline-end:2px; margin-inline-start:2px;} /* the net flow is the SAME reading as the tape chip, so it wears the tape's colour */ .mpnet{font-family:var(--font-mono); font-variant-numeric:tabular-nums; font-size:9px; font-weight:700;} .mpnet.tp-up{color:var(--up);} .mpnet.tp-down{color:var(--down);} .mpnet.tp-flat{color:var(--warn);} /* two-tone: the track is the SELL side, the fill is the BUY side. One bar, one split. */ .mpbar{display:block; height:4px; border-radius:2px; overflow:hidden; background:linear-gradient(90deg,rgba(243,110,110,.34),rgba(243,110,110,.60));} .mpbar i{display:block; height:100%; border-radius:2px; background:linear-gradient(90deg,rgba(59,212,162,.45),var(--up));} .mpbar.sm{flex:1 1 auto; height:3px; min-width:22px; background:rgba(157,169,194,.14);} .mpbar.sm i{background:linear-gradient(90deg,rgba(107,159,255,.38),var(--accent));} .mprow{display:flex; align-items:center; gap:5px; min-width:0; font-size:9.5px; white-space:nowrap;} .mpk{color:var(--text-tertiary); letter-spacing:.03em; overflow:hidden; text-overflow:ellipsis;} .mpv{font-weight:700; color:var(--text-primary);} .mpv.up{color:var(--up);} .mpv.down{color:var(--down);} .mpv.flat{color:var(--warn);} .mpmini .mpv{margin-inline-start:auto;} .mptag{font-size:8px; font-weight:800; letter-spacing:.05em; border-radius:999px; padding:1px 6px; border:1px solid; margin-inline-start:auto;} .mptag.up{color:var(--up); background:rgba(59,212,162,.14); border-color:rgba(59,212,162,.40);} .mptag.down{color:var(--down); background:rgba(243,110,110,.14); border-color:rgba(243,110,110,.40);} .mptag.flat{color:var(--warn); background:rgba(232,176,74,.14); border-color:rgba(232,176,74,.38);} /* the quiet "coming online" state — the ONE grey on this card */ .mpanel.pending{opacity:.5;} .mpanel.pending .mpv{color:var(--text-disabled);} .mpanel.pending .mpbar{background:rgba(157,169,194,.16);} .mpnote{font-size:9px; font-weight:700; color:var(--text-tertiary); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;} /* ── stats strip ───────────────────────────────────────────────────────── */ /* one shared row: the stats cluster at inline-start and the search DOOR centred in the row's free space (user 2026-09-28 20:4x ET; its rules sit with the header's Search pill in §APPV2). The premium quartet left this row for the chip band (user 2026-09-28 18:5x ET). align-items:center centres the 12.5px stats text against the 33px chip rhythm; both items are flex-wrap safe in either dir. */ .statsrow{display:flex; align-items:center; gap:14px; flex-wrap:wrap; padding:13px 0 3px; min-height:33px;} .stats{display:flex; align-items:center; gap:18px; flex-wrap:wrap; color:var(--text-tertiary); font-size:12.5px;} .stats b{color:var(--text-primary); font-weight:700; margin-inline-end:5px; transition:color .25s ease;} .stats b.bump{color:var(--up);} .notice{margin-top:12px; display:flex; gap:10px; flex-wrap:wrap;} .note{font-size:12px; font-weight:600; border-radius:8px; padding:7px 12px; border:1px solid; line-height:1.5;} .note-delay{color:var(--warn); background:var(--warn-bg); border-color:rgba(232,176,74,.34);} .note-err{color:var(--down); background:rgba(243,110,110,.10); border-color:rgba(243,110,110,.34);} /* ── filters ──────────────────────────────────────────────────────────── */ .filters{display:flex; gap:8px; flex-wrap:wrap; padding:14px 0 14px; flex:1 1 560px; min-width:0;} /* ── the CHIP BAND (user 2026-09-28 18:5x ET: "allign the market 'proffesor x' 'phoenix' etc with the main line … where all the filers are") — ONE wrapper, the chip row first and the locked premium quartet second. The quartet sits at the band's inline END (the left in `he`), TOP-ALIGNED with the first chip line: its own 14px top padding is the chip row's, so a pill's top is a chip's top. The chips take the room the quartet leaves and wrap under themselves; the quartet never wraps into them. The chip row's 560px basis is where the two stop sharing a line: narrower than that (below ~1150px), the quartet drops under the chips as its own line, still at the inline END; at ≤900px it centres (the tablet rule below). ── */ .filtersrow{display:flex; flex-wrap:wrap; align-items:flex-start; gap:8px 14px;} .premium{display:flex; flex:0 0 auto; gap:7px; flex-wrap:wrap; align-items:center; margin-inline-start:auto; align-self:flex-start; padding-block:14px;} /* the pill — the lit family of the Filters handle and the Analyst Opinion door (a 1px tinted edge, a token fill, a halo, primary text at 700), painted in the LIVE pill's light green so the four read as doors being announced, fully visible — still locked (the padlock + "Premium only"), so the press is a shake and nothing else. No keyframe; the global reduced-motion block kills the lift. */ .pbtn{display:inline-flex; align-items:center; gap:8px; font-family:var(--font-sans); font-size:13px; font-weight:700; letter-spacing:.01em; color:var(--text-primary); cursor:pointer; opacity:1; border:1px solid rgba(59,212,162,.50); border-radius:999px; padding:6px 14px; padding-inline-start:12px; background:color-mix(in srgb,var(--up) 14%,var(--bg-elevated)); box-shadow:0 0 0 1px rgba(59,212,162,.12), 0 0 12px rgba(59,212,162,.22); transition:transform .15s ease, box-shadow .15s ease, filter .15s ease;} .pbtn:hover{transform:translateY(-1px); filter:brightness(1.1); box-shadow:0 0 0 1px rgba(59,212,162,.20), 0 0 18px rgba(59,212,162,.38);} .pbtn:active{transform:none; filter:brightness(.96);} .pbtn:focus-visible{outline:2px solid var(--up); outline-offset:3px;} .pbtn .plock{color:var(--up);} /* CSS padlock — no icon font, no external asset */ .plock{position:relative; display:inline-block; width:9px; height:7px; border-radius:2px; background:currentColor; margin-top:4px; flex:0 0 9px;} .plock::before{content:""; position:absolute; inset-inline-start:50%; bottom:6px; width:7px; height:6px; margin-inline-start:-3.5px; border:1.6px solid currentColor; border-bottom:0; border-radius:4px 4px 0 0;} .pname{color:var(--text-primary); font-weight:700; white-space:nowrap;} @keyframes shake{10%,90%{transform:translateX(-2px);} 20%,80%{transform:translateX(3px);} 30%,50%,70%{transform:translateX(-4px);} 40%,60%{transform:translateX(4px);}} .pbtn.shake{animation:shake .52s cubic-bezier(.36,.07,.19,.97);} .fbtn{font-family:var(--font-sans); font-size:13px; font-weight:600; color:var(--text-secondary); background:var(--bg-surface); border:1px solid var(--line); border-radius:999px; padding:7px 14px; cursor:pointer; transition:all .15s;} .fbtn b{color:var(--text-tertiary); font-weight:600; margin-inline-start:5px;} .fbtn:hover{border-color:var(--accent-glow); color:var(--text-primary);} .fbtn.active{background:var(--accent-bg); border-color:var(--accent); color:var(--accent-2);} .fbtn.active b{color:var(--accent);} .fbtn.active[data-f="osint"]{background:var(--osint-bg); border-color:var(--osint); color:var(--osint);} .fbtn.active[data-f="osint"] b{color:var(--osint);} /* LIFE pass 2 (2026-09-23): an active family chip wears ITS family's colour — the same colour as the row badge, the accent bar and the row tint it switches on, so the chip row and the table agree about what "options" looks like. osint had this since v2; the other seven join it (levels spelt out even though it equals the default, so the set is complete). `all` and `today` are not families and keep the accent. */ .fbtn.active[data-f="momentum"]{background:rgba(59,212,162,.16); border-color:var(--up); color:var(--up);} .fbtn.active[data-f="momentum"] b{color:var(--up);} .fbtn.active[data-f="levels"]{background:var(--accent-bg); border-color:var(--accent); color:var(--accent-2);} .fbtn.active[data-f="levels"] b{color:var(--accent);} .fbtn.active[data-f="options"]{background:var(--info-bg); border-color:var(--info); color:var(--info);} .fbtn.active[data-f="options"] b{color:var(--info);} .fbtn.active[data-f="insider"]{background:var(--insider-bg); border-color:var(--insider); color:var(--insider);} .fbtn.active[data-f="insider"] b{color:var(--insider);} .fbtn.active[data-f="news"]{background:var(--news-bg); border-color:var(--news); color:var(--news);} .fbtn.active[data-f="news"] b{color:var(--news);} .fbtn.active[data-f="market"]{background:var(--market-bg); border-color:var(--market); color:var(--market);} .fbtn.active[data-f="market"] b{color:var(--market);} .fbtn.active[data-f="market_update"]{background:var(--brief-bg); border-color:var(--brief); color:var(--brief);} .fbtn.active[data-f="market_update"] b{color:var(--brief);} /* ── §ATTENTION · the family chip flickers until it is pressed (operator order 2026-09-24: "the OSINT tab flickers until it is pressed … when he comes back to the main page the flickering will be gone") ─────────────────────────────────────────────────────────── Only a chip that is NOT active wears it (app.js: selecting the family is what clears it), so it never fights the active rules above. Each family names its own far colour: OSINT the critical row's strong red and its text (the row it points at is red), Market its family tint. The critical row's 2.4 s cadence. Reduced motion: the still far colour + the edge. */ .fbtn.attn{--attn-bg:var(--accent-bg); --attn-line:var(--accent); border-color:var(--attn-line); animation:chipflick 2.4s ease-in-out infinite alternate;} .fbtn.attn[data-f="osint"]{--attn-bg:var(--crit-row-bg-strong); --attn-line:var(--crit-chip-bg); color:var(--crit-row-fg);} .fbtn.attn[data-f="osint"] b{color:var(--crit-row-fg);} .fbtn.attn[data-f="market"]{--attn-bg:rgba(143,163,200,.30); --attn-line:var(--market); color:var(--market);} .fbtn.attn[data-f="market"] b{color:var(--market);} @keyframes chipflick{from{background-color:var(--bg-surface);} to{background-color:var(--attn-bg);}} @media (prefers-reduced-motion: reduce){ .fbtn.attn{animation:none; background-color:var(--attn-bg);} } /* ── table ────────────────────────────────────────────────────────────── */ .tblbox{border:1px solid var(--line); border-radius:14px; overflow:hidden; background:var(--bg-surface);} .scroll{overflow-x:auto;} table{width:100%; border-collapse:collapse; font-size:13.5px; min-width:860px;} thead th{position:sticky; top:0; background:var(--bg-elevated); color:var(--text-tertiary); font-size:11px; font-weight:700; letter-spacing:.06em; text-align:start; padding:11px 14px; border-bottom:1px solid var(--line); white-space:nowrap;} tbody td{padding:12px 14px; border-bottom:1px solid rgba(107,159,255,.06); vertical-align:top;} tbody tr:last-child td{border-bottom:none;} tbody tr:hover{background-color:var(--bg-hover);} /* -color, never the shorthand: see the TINT note */ /* ── family accent (the LIFE pass) ──────────────────────────────────────── Every row carries a 3px accent on its INLINE-START edge in its family's colour, so a scan down the table reads as families rather than as one grey list. --fam is set on the ROW from data-fam, and drawn by the first cell's ::before: a border on a under border-collapse is unreliable across browsers, while a positioned pseudo-element on the first cell is not, and inset-inline-start puts it on the correct edge in Hebrew without a second rule. ONE MAP, TWO SURFACES (LIFE pass 3, 2026-09-23): every line below names the alert TICKET as well as the row, because the ticket now wears its family too (the band, see `.tkwrap .tk[data-fam]`). One map means a colour can never drift between a row and the card it opens. The row selector stays second and unbroken on purpose — the harness pins it by that exact text. */ tbody tr{--fam:rgba(107,159,255,.22);} /* ── family TINT (LIFE pass 2 — operator order 2026-09-23 16:3x ET: "put some more life and colours into the system… options are painted purple, so the options alert should be purple background as well, but much much lighter") ───────────────────────────── Every row's surface takes its family colour at 8% — a CAST, not a fill: the badge and the accent bar say the family out loud, the surface only agrees with them. It rides `background-image` (a flat two-stop gradient of one colour) and NEVER `background-color`, because that channel is already spoken for: :hover, the 60s fresh tint and the `glowfade` arrival all paint `background-color`, and an image layer sits ABOVE a colour layer, so all three still show through the cast instead of being wiped by it — which is also why those rules now say `background-color`, never the shorthand (`background:` resets the image layer, and the family would vanish under the pointer). `--fam-tint` is computed on the row from the row's OWN --fam, so the eight family rules above need no second line each. The unknown-family default is a translucent blue, which mixes down to ~1.5% — effectively no cast, on purpose. The empty row carries none. */ tbody tr{--fam-tint:color-mix(in srgb,var(--fam) 8%,transparent); background-image:linear-gradient(var(--fam-tint),var(--fam-tint));} tbody tr.emptyrow{background-image:none;} .tkwrap .tk[data-fam="momentum"],tbody tr[data-fam="momentum"]{--fam:var(--up);} .tkwrap .tk[data-fam="levels"],tbody tr[data-fam="levels"]{--fam:var(--accent);} .tkwrap .tk[data-fam="options"],tbody tr[data-fam="options"]{--fam:var(--info);} .tkwrap .tk[data-fam="insider"],tbody tr[data-fam="insider"]{--fam:var(--insider);} .tkwrap .tk[data-fam="news"],tbody tr[data-fam="news"]{--fam:var(--news);} .tkwrap .tk[data-fam="osint"],tbody tr[data-fam="osint"]{--fam:var(--osint);} .tkwrap .tk[data-fam="market"],tbody tr[data-fam="market"]{--fam:var(--market);} .tkwrap .tk[data-fam="market_update"],tbody tr[data-fam="market_update"]{--fam:var(--brief);} /* the floor rose 110 → 176px on 2026-09-10: the tile is a BOX now, and 176 − 28 of cell padding is the 148px box, whose inner width is the name's — see the tile block below */ .c-tk{white-space:nowrap; min-width:176px; position:relative;} .c-tk::before{content:""; position:absolute; inset-block:0; inset-inline-start:0; width:3px; background:var(--fam); opacity:.62; border-radius:2px; transition:opacity .18s ease;} tbody tr:hover .c-tk::before{opacity:1;} .tk{font-weight:700; font-size:14px; color:var(--text-primary); display:inline-block;} /* ── the ticker TILE — ONE BOX holding company, ticker and price ───────────── The box is now DRAWN ON PURPOSE by its own element (`div.tkbox`) instead of being inherited by accident from the ticket modal's bare `.tk` rule (see the note beside `.tkwrap .tk`). Same dark-panel language as the rest of the page, at a size a table cell can carry: 10px radius rather than the modal's 16, and 7px/8px of padding rather than a modal's 22px/24px — which is what those empty bands above and below the ticker have been all along. Now they hold the name and the price, which is what the operator drew on the screenshot. WIDTH — the box is a fixed 148px so the column reads as a stack of identical cards, never a ragged one. 148 = the cell's content box at its 176px floor; inside it, 148 − 2 border − 16 padding leaves exactly the 130px the name may take, so the name's max-content contribution is exactly the floor the cell already declares and no name can widen the column. 130px is a MEASURED number: the worst specimen the operator named, "1-800-FLOWERS.COM, Inc.", carries an 18-character unbreakable token measuring ~118px at 11px in this font stack, so it clears by ~10% — enough that a substituted fallback font cannot force `overflow-wrap` to snap it mid-word. HEIGHT — the box grows for a two-line name and shrinks when there is none. There is no reserved empty band: a card with no resolved name is a box holding ticker + price. CENTRED, WHICH IS ALSO WHAT MAKES IT DIRECTION-BLIND — `text-align:center` reads the same in Hebrew and in English, so the RTL edge rules this block used to need are gone rather than accumulated. The spans keep dir="ltr" purely for BIDI (without it the trailing "." of "…, Inc." jumps to the wrong end of the string); centring is immune to the direction that attribute forces, which flushing never was. THE CLAMP — `display:block` is declared FIRST so an engine that does not know `-webkit-box` keeps a block and still stops at `max-height` (2 × the 14px line): a hard two-line cut rather than an ellipsised one, but never a third line and never a grown row. `title` carries the whole name in either case. */ .tkbox{display:block; max-width:148px; padding:7px 8px; text-align:center; background:var(--bg-surface); border:1px solid var(--line); border-radius:10px;} .tkco{display:block; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; line-clamp:2; max-height:28px; overflow:hidden; max-width:130px; margin:0 auto 2px; font-size:11px; line-height:14px; color:var(--text-secondary); white-space:normal; overflow-wrap:anywhere;} /* the price is the ONE thing on this page deliberately BRIGHTER than --text-primary (#EAEEF7): operator order 2026-09-10, "a bit little whiter then the ticker". */ .px{display:block; color:var(--px-bright); font-size:11.5px; margin-top:2px;} /* §CLASS FACTS (2026-09-28) — the ticket's share-structure facts as ONE muted line in the tile, right after the name: smaller and dimmer than the name, plain text (never a chip). It may WRAP (the cell is nowrap), but only between facts — each fact holds together. */ .tkfx{display:block; max-width:130px; margin:0 auto 3px; font-size:10px; line-height:13px; color:var(--text-tertiary); white-space:normal;} .tkfxi{white-space:nowrap;} .tkfxs{color:var(--text-disabled);} /* THE SOURCE BADGE ("Cerebro") — operator order 2026-09-16: "aligned in the middle, same as the stocks, and 10% bigger". It used to be an inline-block pill hugging the inline-start edge while every symbol-ful row rendered a centred 148px `.tkbox` beside it, so the one column read as two different layouts. It is now the SAME BOX: `display:block` at the same `max-width:148px` with `text-align:center`, so the word sits over exactly the footprint a ticker occupies. Font 11.5px -> 12.65px is the 10% that was asked for, to the decimal. */ .srcb{display:block; max-width:148px; text-align:center; box-sizing:border-box; font-size:12.65px; font-weight:700; color:var(--osint); background:var(--osint-bg); border:1px solid var(--osint-line); border-radius:6px; padding:2px 8px; white-space:nowrap;} .srcb.mkt{color:var(--market); background:var(--market-bg); border-color:var(--market-line);} .c-sig{white-space:nowrap;} /* v2: one notch of saturation on every family chip — .16 fill / .5 border. The families are the page's colour system; at .09 they read as grey pills with tinted text. */ .chip{display:inline-block; font-size:11px; font-weight:700; border-radius:6px; padding:3px 9px; border:1px solid; margin-inline-end:8px;} .chip-momentum{color:var(--up); border-color:rgba(59,212,162,.5); background:rgba(59,212,162,.16);} .chip-levels{color:var(--accent-2); border-color:rgba(107,159,255,.5); background:rgba(107,159,255,.16);} .chip-options{color:var(--info); border-color:rgba(155,140,255,.5); background:rgba(155,140,255,.16);} .chip-insider{color:var(--insider); border-color:rgba(159,232,112,.5); background:rgba(159,232,112,.16);} .chip-osint{color:var(--osint); border-color:rgba(79,195,232,.5); background:rgba(79,195,232,.16);} .chip-news{color:var(--news); border-color:rgba(224,112,155,.5); background:rgba(224,112,155,.16);} .chip-market{color:var(--market); border-color:rgba(143,163,200,.46); background:rgba(143,163,200,.16);} .chip-market_update{color:var(--brief); border-color:rgba(94,168,242,.5); background:rgba(94,168,242,.16);} .kind{color:var(--text-secondary); font-size:12px;} /* §CLASS — the OSINT event class printed in the kind word's place ("Oil Supply Major Alert", operator order 2026-09-24). Descriptive TEXT, not a chip: the same 12px line as the kind word, one step brighter and heavier because it names the EVENT rather than the lane. On a CRITICAL row it takes the red row's text colour (`tbody tr.crit .kcls`, in the CRITICAL block below). Outside every width query, so the mobile card draws it the same. */ .kcls{color:var(--text-primary); font-weight:600;} /* a cell with NO reading. An em dash, never a zero and never a greyed-out illustrative value — an unknown intensity is not a 1, and an unknown direction is not a watch. */ .ill{opacity:.6;} .dash{color:var(--text-disabled); font-size:14px; font-weight:700; letter-spacing:.06em;} th .ast{color:var(--warn);} /* ── the two MECHANICAL columns (PULSE v2) ──────────────────────────────── 🔴 These are NOT the mockup's .dots / .dirpill, which ranked an alert by model conviction and a model long/short call. Both of those quantities are still barred (conviction is anti-calibrated 16/16 days; every MADRL voter was inverted on LONG over n=245,805) and neither class exists in this stylesheet — the selftest holds that line. What renders here is arithmetic on the alert itself: an intensity TIER from traded volume / float turnover / rvol, and the alert KIND stated as a word. Interest is a WRITTEN TIER, never a numeral (operator order, 2026-08-28 — it used to be three dots). A number invites the reader to treat it as a score, which is precisely what it is not; a word can say "how much stock changed hands" without implying a ranking against the next card. The column is TABULAR: table-layout is auto, so the column is already sized by the WIDEST word among the rows currently in the DOM — every cell in it matches. The floor below is what stops the column CHANGING width as rows arrive and leave: it is set for "CRITICAL INTEREST" (17 characters at 11.5px/800 plus the cell's 14px padding on each side), so a table that happens to hold no critical row is still the same width as one that does. */ .c-int{min-width:154px;} .act{display:inline-block; font-size:11.5px; font-weight:700; letter-spacing:.02em; white-space:nowrap;} /* tier 1 is DIM on purpose: "Low interest" is the least interesting thing the column can say, and it should not compete with the alert's own prose for attention. */ .act.a1{color:var(--text-tertiary); font-weight:600;} .act.a2{color:var(--warn);} /* tier 3 is the only place --hot appears — one hot accent per page. */ .act.a3{color:var(--hot);} /* tier 4 — CRITICAL INTEREST, the loudest thing this page says about an alert, and the only all-caps English tier (ordered that way). Red, weight 800, and a SUBTLE glow. The glow is a text-shadow, NOT a keyframe: the page's animation ceiling is unchanged, and the reduced-motion block has nothing here to switch off because nothing moves. */ .act.a4{color:var(--crit); font-weight:800; text-shadow:0 0 9px rgba(255,77,77,.45);} .dirc{display:inline-block; font-size:11px; font-weight:700; letter-spacing:.02em; white-space:nowrap; border-radius:6px; padding:3px 9px; border:1px solid;} .dirc-bullish{color:var(--up); border-color:rgba(59,212,162,.5); background:rgba(59,212,162,.16);} .dirc-bearish{color:var(--down); border-color:rgba(243,110,110,.5); background:rgba(243,110,110,.16);} /* WATCH is an OUTLINE on purpose — it is the ABSENCE of a directional read, and a filled chip would make it look like a third call. */ .dirc-watch{color:var(--warn); border-color:rgba(232,176,74,.5); background:transparent;} /* CRITICAL (2026-09-24) takes the WATCH chip's slot on a CRITICAL OSINT row, and is FILLED on purpose: the operator's words were "is not a watch". It is a SEVERITY, not a fourth direction — its own tokens, and the tooltip says "direction: Watch". */ .dirc-crit{color:var(--crit-chip-fg); border-color:var(--crit-chip-bg); background:var(--crit-chip-bg); font-weight:800; letter-spacing:.06em;} /* ── sub.alert.v2 · the DIRECTION LEVEL, drawn as pips ──────────────────────── THE CHIP WORD DOES NOT CHANGE WITH THE LEVEL, and neither does its colour. A level is not a louder call — it is a count of the independent measurements standing behind the SAME call — so it may not be allowed to read as intensity. The pips inherit `currentColor`, so a level can never recolour a chip into looking like a different direction, and the unlit ones stay visible at .28 so "one of three" reads as one of three rather than as a single dot. They are aria-hidden: the chip's aria-label already says "Bullish · Stated · computed materiality" in words, and a screen reader must hear the basis, never "three dots". A `watch` chip never has them — renderableLevel refuses. */ .dirpips{display:inline-flex; gap:2px; margin-inline-start:6px; vertical-align:middle;} .dirpips i{width:4px; height:4px; border-radius:50%; background:currentColor; opacity:.28;} .dirpips i.lit{opacity:1;} /* ⚠️ the lit-pip class is `lit` and NOT the obvious short word, and that is load-bearing: the interest column's "no dot markup survives" guard bans the retired dot selector in this file outright, and a NEW column must never weaken an OLD column's guard to make room for itself. */ /* ── §5.4.4 · the ×N repeat badge ───────────────────────────────────────────── PRESENTATION ONLY. Nothing was dropped and nothing was withheld — this row stands for N identical cards inside a 30-minute window, and the ticket lists every one of their times. Deliberately the quietest thing in its cell: it is a note about repetition, not a signal about the alert. */ .repb{display:inline-block; margin-inline-start:7px; font-size:9.5px; font-weight:800; letter-spacing:.03em; color:var(--text-tertiary); border:1px solid var(--line); border-radius:999px; padding:1px 6px; vertical-align:middle;} /* the ticket's direction rows: the level+basis in words under the chip, then the card's own measured number. Both are DIMMER than the chip — they explain the claim, they are not a second one. */ .tkdb{display:block; margin-top:4px; font-size:10.5px; color:var(--text-tertiary);} .tkds{display:block; margin-top:2px; font-size:11px; color:var(--text-secondary);} .tkrep{display:block; margin-top:3px; font-size:10.5px; color:var(--text-tertiary);} .c-why{color:var(--text-secondary); line-height:1.5; max-width:440px;} .whyhd{display:block; color:var(--text-primary); font-weight:600; margin-bottom:3px;} .whytx{display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;} .trtag{display:inline-block; margin-top:5px; font-size:9.5px; font-weight:700; letter-spacing:.04em; color:var(--info); background:var(--info-bg); border:1px solid rgba(155,140,255,.34); border-radius:999px; padding:1px 8px;} /* §NEWS SLOT (2026-09-28) — the empty-news-slot line, LAST in the WHY cell: muted and smaller than the headline, plain text — not a chip, no icon. It speaks for the feed, and wraps. */ .newsgap{display:block; margin-top:5px; font-size:11px; line-height:1.4; font-weight:500; color:var(--text-tertiary);} /* §OPTIONS HOLD (2026-09-28, order 11) — "expires 2026-10-30 · 32 DTE" under the kind word of an options row that carries an expiry: muted, smaller than the kind, plain text (not a chip). The date is an ltr figure span, so it reads the same on the Hebrew page. */ .optexp{display:block; margin-top:3px; font-size:10.5px; font-weight:500; color:var(--text-tertiary);} .c-tm{color:var(--text-tertiary); font-size:11.5px; white-space:nowrap; text-align:end;} .rel{display:block; color:var(--text-disabled); font-size:10.5px; margin-top:3px;} .nowb{display:inline-block; margin-inline-start:8px; font-size:9.5px; font-weight:800; letter-spacing:.06em; color:var(--up); background:rgba(59,212,162,.14); border:1px solid rgba(59,212,162,.4); border-radius:999px; padding:1px 7px; vertical-align:middle; transition:opacity .6s ease;} .nowb.off{opacity:0;} /* round 2 — ONE "now": while the green fresh chip is up, the age label beside it (which also reads "now") stands down */ .c-tm .nowb:not(.off) ~ .rel{display:none;} .emptyrow td{text-align:center; color:var(--text-tertiary); font-size:12.5px; padding:34px 14px;} .emptyrow:hover{background:transparent;} /* ── the fresh window (60s) ─────────────────────────────────────────────── A row that arrived in the last minute keeps a quiet LIVE-green tint and a hairline inset edge, and its family accent burns at full strength. Green rather than the family colour on purpose: the tint answers "is this new?", the accent answers "what kind is it?" — one channel per question, or the table starts arguing with itself. Written AFTER :hover so the state survives the pointer. NO keyframes: the fade-out is a transition, which costs the page no new animation and is switched off wholesale by the reduced-motion block below. */ tbody tr.fresh{background-color:rgba(59,212,162,.055); box-shadow:inset 0 0 0 1px rgba(59,212,162,.10); transition:background-color .9s ease, box-shadow .9s ease;} tbody tr.fresh .c-tk::before{opacity:1; box-shadow:0 0 8px var(--fam);} tbody tr.fresh:hover{background-color:rgba(59,212,162,.085);} /* the last 900ms: the tint crossfades to nothing, then the sweeper drops the class */ tbody tr.fresh.out{background-color:transparent; box-shadow:inset 0 0 0 1px rgba(59,212,162,0);} tbody tr.fresh.out .c-tk::before{box-shadow:none;} /* reduced motion: SAME 60 seconds, same tint — it simply blinks out at the end instead of crossfading. The state is information; the crossfade is decoration. */ tbody tr.fresh.nofade{transition:none;} tbody tr.fresh.nofade.out{background-color:transparent; box-shadow:none;} /* arrival motion — inherited verbatim from the approved mockup */ @keyframes slidein{from{opacity:0; transform:translateY(-12px);} to{opacity:1; transform:none;}} @keyframes glowfade{ 0%{background-color:rgba(107,159,255,.17); box-shadow:inset 0 0 0 1px rgba(107,159,255,.42);} 70%{background-color:rgba(107,159,255,.07); box-shadow:inset 0 0 0 1px rgba(107,159,255,.18);} 100%{background-color:rgba(107,159,255,0); box-shadow:inset 0 0 0 1px rgba(107,159,255,0);} } tbody tr.arrive{animation:slidein .42s cubic-bezier(.2,.8,.3,1), glowfade 2.5s ease-out;} /* ── the CRITICAL OSINT row (operator order 2026-09-24) ───────────────────── "should be marked as Critical, flickering for 15 minutes and placed at first until that time ends… the background of such alert should be red. light red, but noticeable". Two classes, both set by the renderer from the alert and a clock: `crit` for the row's WHOLE life, `crit-live` inside its 15-minute window (pinned + flickering). 🔴 THE DECISION (pinned in selftest §Y — REVISED in round 2, 2026-09-24). The red rides `background-color`, OPAQUE, and the 8% family cast STANDS DOWN on a critical row (`background-image:none`, in the same rule). Pass 1 kept the cast on `background-image` ABOVE a translucent red, and on the rendered page the cyan OSINT cast over the navy base turned the red plum (hue 304°) — not the "red. light red" that was ordered. The row does not lose its family: the accent bar (.c-tk::before; on a phone, the card's inline-start border) and the source badge still say it out loud, and the cast only ever agreed with them. Against the other states that paint `background-color`: · fresh / fresh.out / fresh.nofade.out — the red WINS. A critical row is red from its first paint to its last, never green and never faded to nothing; the fresh state keeps its accent burn (a box-shadow on the first cell), which is not a colour. · :hover — COMPOSED, not lost: the hover is the stronger red. · the arrival glow — on a LIVE row the flicker REPLACES it (both are `animation`, and the flicker is the louder, longer arrival). An expired critical row that arrives late (a delayed tier) plays the glow once and settles back to its red. The selectors are COMPOUNDS of .crit, so each outranks the state rule it answers by specificity — no !important anywhere. They sit outside every media query, so the mobile card layout (the row as a block) wears exactly the same surface. The flicker animates `background-color` ONLY — never opacity, never the text colour — so the text holds full opacity through the whole cycle. The interest word takes --crit-row-fg on this surface and drops its glow: the tier's --crit is 3.34:1 on the flicker's far end (below AA at 11.5px), and a red halo on a red row only blurs the glyph edge. The compound outranks `.act.a4` by specificity. The event CLASS label (§CLASS, "Oil Supply Major Alert") takes the same --crit-row-fg at 700 — the critical text colour, at the contrast the red surface allows (7.43 / 5.94:1 on the two ends at 12px, where --crit itself would fall to 3.34:1). */ tbody tr.crit, tbody tr.crit.fresh, tbody tr.crit.fresh.out, tbody tr.crit.fresh.nofade.out{background-color:var(--crit-row-bg); background-image:none; box-shadow:inset 0 0 0 1px var(--crit-row-line);} tbody tr.crit:hover, tbody tr.crit.fresh:hover{background-color:var(--crit-row-bg-strong);} tbody tr.crit .act.a4{color:var(--crit-row-fg); text-shadow:none;} tbody tr.crit .kcls{color:var(--crit-row-fg); font-weight:700;} tbody tr.crit-live{animation:critflick 2.4s ease-in-out infinite alternate;} @keyframes critflick{from{background-color:var(--crit-row-bg);} to{background-color:var(--crit-row-bg-strong);}} /* reduced motion: no flicker at all — the row stays pinned and holds the STATIC light red */ @media (prefers-reduced-motion: reduce){ tbody tr.crit-live{animation:none; background-color:var(--crit-row-bg);} } /* ── §FLIP · the market / sector regime flip flickers for 10 minutes (operator order 2026-09-24: "the Market flip / sector flip will also flicker for 10 minutes") ──────── The `background-color` channel — the one hover / fresh / glowfade already use; the family cast is the image layer above it and shows through — swings to the row's OWN family colour at 26% and back, at the critical row's cadence so the page has ONE rhythm. Not red, not pinned, no chip: a flip is "notice me", not "critical". LIVE-only (a flip has no whole-life state), and reduced motion gets the still tint beside the global kill. */ tbody tr.flip-live{animation:flipflick 2.4s ease-in-out infinite alternate;} @keyframes flipflick{from{background-color:transparent;} to{background-color:color-mix(in srgb,var(--fam) 26%,transparent);}} @media (prefers-reduced-motion: reduce){ tbody tr.flip-live{animation:none; background-color:color-mix(in srgb,var(--fam) 14%,transparent);} } /* ── §13-F HOT · a news ticket whose latest tape raised share volume and the day's gain (user 2026-10-04). Pinned first and flickering while that rise is still the latest print, or until Stop updates. No clock. The frame is the fresh / crit inset shadow. The pulse REUSES flipflick (no new keyframe). Reduced motion: the global kill stops the pulse; the frame and the chip stay. */ tbody tr.lt-hot, tbody tr.lt-hot.fresh, tbody tr.lt-hot.fresh.out, tbody tr.lt-hot.fresh.nofade.out{box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--warn) 72%,transparent);} tbody tr.lt-hot{animation:flipflick 2.4s ease-in-out infinite alternate;} .lthot .ltstop{font:inherit;font-weight:700;margin-inline-start:8px;padding:1px 6px;border-radius:4px; border:1px solid color-mix(in srgb,var(--warn) 70%,transparent);background:transparent;color:var(--warn);cursor:pointer;} /* ruling 10-05 — the QUIET tier ("Updating · Stop updates") and the STOPPED card ("Updates stopped · Resume updates"): a muted pill, no pulse, no frame, no pin */ .ltquiet{display:flex; align-items:baseline; width:max-content; max-width:100%; box-sizing:border-box; margin:0 0 6px; padding:2px 9px; border-radius:999px; font-family:var(--font-sans); font-size:11px; line-height:16px; font-weight:700; white-space:nowrap; color:var(--text-secondary); border:1px solid var(--line);} .ltquiet .ltstop,.ltquiet .ltresume{font:inherit;font-weight:700;margin-inline-start:8px;padding:1px 6px;border-radius:4px; border:1px solid var(--line);background:transparent;color:var(--text-primary);cursor:pointer;} .ltquiet.lthalted .ltresume{color:var(--warn); border-color:color-mix(in srgb,var(--warn) 70%,transparent);} /* the OPEN ticket of a HOT card: a pulse dot in its header + the 10-minute velocity — it REUSES the page's sanctioned live dot (.livep i, blip): no new infinite animation, recoloured amber as .livep.stale is */ .livep.lthotdot{color:var(--warn); background:var(--warn-bg); border-color:color-mix(in srgb,var(--warn) 55%,transparent); font-size:11px; letter-spacing:0; text-transform:none;} .livep.lthotdot i{background:var(--warn); box-shadow:0 0 8px color-mix(in srgb,var(--warn) 70%,transparent);} /* ── the alert ticket (the full card) ───────────────────────────────────── The row truncates — one line of headline, three of prose. This is where the subscriber reads the whole thing, in BOTH languages, with the meta grid of what the contract actually carries. Same dark-institutional panel as the sign-in gate, so the page has one modal language and not two. */ .tkwrap{position:fixed; inset:0; z-index:70; display:none; align-items:center; justify-content:center; padding:24px 20px; background:rgba(4,7,13,.72);} .tkwrap.on{display:flex;} /* 🔴 SCOPED 2026-09-10, AND THIS IS A BUG FIX, NOT TIDYING. This rule was a BARE `.tk`, and `.tk` is ALSO the feed row's ticker span — so every ticker in the table has been wearing this modal's chrome: a --bg-surface fill, a 16px radius, a 1px border, a `0 28px 70px` drop shadow, `width:100%`, `overflow-y:auto`, and `padding:22px 24px 24px`. That padding is the mystery "dark rounded box" with an empty band above and below the ticker that the operator has been annotating — a modal's padding, drawn 25 rows deep in a table. `.tkwrap .tk` keeps the panel and takes the row back. The tile draws its own box on purpose now (see .tkbox), at a size a table cell can carry. */ /* 🔴 WIDENED 2026-09-11, 720 → min(960px, 94vw), BY OPERATOR ORDER, and it is a bug fix rather than a preference. At 720px the sector ticket's category table could not seat its four columns beside a 60-character taxonomy key ("Spacecraft Manufacturing, Components & Enabling Technologies"), so the wrapper's overflow-x took over and the subscriber got a table that scrolled sideways inside a modal and clipped the very names the ticket exists to show. The room is the fix; the column plan below is what spends it. 94vw is the small-screen half of the same rule — a fixed 960 would overhang a phone, and .tkwrap's own 20px side padding is not enough on its own. EVERY ticket family shares this panel, so the alert card's prose simply gets a wider reading column out of the same change. */ .tkwrap .tk{position:relative; width:100%; max-width:min(960px, 94vw); max-height:86vh; overflow-y:auto; background:var(--bg-surface); border:1px solid var(--line); border-radius:16px; padding:22px 24px 24px; box-shadow:0 28px 70px rgba(0,0,0,.6); --fam:rgba(107,159,255,.22);} /* the rows' faint default: an unknown family paints a whisper, never currentColor */ /* the close control sits in the panel's inline-END corner in BOTH directions */ .tkx{position:absolute; top:12px; inset-inline-end:12px; width:30px; height:30px; line-height:1; font-family:var(--font-sans); font-size:19px; font-weight:700; color:var(--text-tertiary); background:var(--bg-elevated); border:1px solid var(--line); border-radius:9px; cursor:pointer; transition:color .15s, border-color .15s;} .tkx:hover{color:var(--text-primary); border-color:var(--accent-glow);} /* ── the FAMILY BAND (LIFE pass 3 — the operator's go, 2026-09-23 17:3x ET) ──────── The ticket carries its family exactly as the row it opened from does: `data-fam` on the panel, painted by the ONE family map above. Three touches, one channel: a 4px band along the top edge (the header's `.aur` idea in the family's colour — a background layer, so it holds still while the panel scrolls and is clipped by the 16px radius), the same 8% cast the row wears, and the prose blocks' side rule + the close button's hover ring in the family colour. The panel's BORDER stays neutral on purpose: a coloured frame reads as a LEVEL, and level and family are two channels that must never blur. The brief keeps its gold frame and simply gains the band. `.tkwrap .tk` itself is untouched (the harness pins that there is exactly one). */ .tkwrap .tk[data-fam]{--fam-tint:color-mix(in srgb,var(--fam) 8%,transparent); background-image:linear-gradient(var(--fam),var(--fam)),linear-gradient(var(--fam-tint),var(--fam-tint)); background-size:100% 4px,auto; background-repeat:no-repeat,repeat; background-position:top,0 0;} .tkwrap .tk[data-fam] .tkl{border-inline-start-color:color-mix(in srgb,var(--fam) 60%,transparent);} .tkwrap .tk[data-fam] .tkx:hover{border-color:var(--fam); color:var(--text-primary);} /* ── the CRITICAL ticket (§CRITICAL review, 2026-09-24) ───────────────────────────── The row a subscriber taps is red; the card it opens must not say otherwise. The panel wears the row's two classes (app.js tkPanelClass) and the row's OWN tokens — no new colour: · `crit` (the card's whole life): the panel surface is the row's opaque --crit-row-bg and the 8% family cast STANDS DOWN — the row's round-2 decision, for the row's reason (a translucent red over the navy base and the cyan cast renders plum). The band stays the 4px top layer and turns the chip's red (--crit-chip-bg, through --crit-band). COMPOSED, never replaced: data-fam stays on the panel, so the prose rule, the close ring and the family chip in the grid still name the family — exactly as the accent bar still does on the red row. The frame stays neutral (a coloured frame reads as a level), and nothing here touches a non-critical card. · `crit-live` (inside the window only): the BAND alone flickers — `critband`, at the row's own cadence (2.4 s ease-in-out, alternate), between the chip's red and the row's hairline red. It animates ONE registered colour (@property --crit-band) that paints only the 4px band layer, so the surface and every glyph hold still. Reduced motion: no animation, the static chip-red band (its own rule, beside the global kill). · the interest word takes --crit-row-fg and drops its glow, as it does on the row: the tier's --crit is 4.18:1 on this surface, below AA at 11.5px. · the Severity slot may WRAP: the printed "Direction: Watch" drops under the chip instead of being cut by the grid cell's ellipsis (measured: the English line was clipped to "Direction: Wat" at 1280px) — a clipped direction is one the reader does not have. */ @property --crit-band{syntax:""; inherits:false; initial-value:transparent;} .tkwrap .tk.crit[data-fam]{--crit-band:var(--crit-chip-bg); background-color:var(--crit-row-bg); background-image:linear-gradient(var(--crit-band),var(--crit-band)); background-size:100% 4px; background-repeat:no-repeat; background-position:top;} .tkwrap .tk.crit .act.a4{color:var(--crit-row-fg); text-shadow:none;} .tkwrap .tk.crit .tkm[data-k="direction"] .tkmv{flex-wrap:wrap; row-gap:2px;} /* ROUND 8 (2026-09-24): a HIGH card's ticket prints "Geopolitical risk N" beside the outline Watch chip — the same wrap, so the labelled number drops under the chip instead of being clipped to "Geopolitical ri" */ .tkwrap .tkm[data-k="direction"] .tkmv:has(.tkrisk){flex-wrap:wrap; row-gap:2px;} /* ROUND 8 (2026-09-24, screenshot finding): the Signal Type fact carries the CLASS label ("Critical-Infrastructure Cyberattack" / "פריצת סייבר לגוף ממשלתי"), which is longer than the 196px cell — the single-line value clipped its FIRST letter in Hebrew and read as a different word. The cell wraps instead; the ellipsis rule stays for every other fact. */ .tkwrap .tkm[data-k="kind"]{align-items:flex-start;} .tkwrap .tkm[data-k="kind"] .tkmv{white-space:normal; overflow:visible; text-overflow:clip; line-height:1.35;} /* ORDER 12c (2026-09-28, the user on the AMC unusual-flow card: "the company name is cut") — the value is an inline-flex span, so no ellipsis ever drew: "AMC ENTERTAINMENT HOLDINGS, INC." was clipped at "AMC ENTERTAINMENT H" by the 196px cell. The company fact wraps exactly as the kind row does; app.js sets the full name as its title. */ .tkwrap .tkm[data-k="company_name"]{align-items:flex-start;} .tkwrap .tkm[data-k="company_name"] .tkmv{white-space:normal; overflow:visible; text-overflow:clip; line-height:1.35;} .tkwrap .tk.crit-live[data-fam]{animation:critband 2.4s ease-in-out infinite alternate;} @keyframes critband{from{--crit-band:var(--crit-chip-bg);} to{--crit-band:var(--crit-row-line);}} @media (prefers-reduced-motion: reduce){ .tkwrap .tk.crit-live[data-fam]{animation:none;} } .tkhd{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; padding-inline-end:38px;} .tksym{font-size:19px; font-weight:800; letter-spacing:.02em; color:var(--text-primary);} .tkcap{font-size:10.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--text-tertiary);} /* the meta grid — only the fields the alert HAS. An absent field is absent, never a row of em dashes: a grid of dashes reads as broken data instead of as N/A. */ .tkmeta{display:grid; grid-template-columns:repeat(auto-fill,minmax(196px,1fr)); gap:9px 18px; margin-top:16px; padding:14px 0 15px; border-top:1px solid var(--line); border-bottom:1px solid var(--line);} .tkmeta:empty{display:none;} .tkm{display:flex; align-items:center; gap:9px; min-width:0;} .tkml{flex:0 0 auto; font-size:10.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--text-tertiary);} .tkmv{display:inline-flex; align-items:center; gap:8px; min-width:0; font-size:13px; color:var(--text-primary); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;} .tkmv .rel{display:inline; margin:0; font-size:10.5px;} /* D1 (10-05): the live PRICE NOW slot ("$0.44 +26%" + "at alert $0.35") wraps; text-overflow never applies to the children of an inline-flex box, so overflow:hidden only CLIPPED it on the desktop grid */ .tkwrap .tkm[data-k="price"] .tkmv{flex-wrap:wrap; row-gap:2px; white-space:normal; overflow:visible; text-overflow:clip;} .tkmv .chip{margin-inline-end:0;} /* one block per language, each with its own direction — a Hebrew card inside an English page still reads right-to-left, and vice versa. */ .tkbody{display:flex; flex-direction:column; gap:16px; margin-top:17px;} .tkl{border-inline-start:2px solid var(--line); padding-inline-start:13px;} .tklname{display:block; font-size:9.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--text-disabled); margin-bottom:6px;} .tklh{font-size:14.5px; font-weight:700; color:var(--text-primary); line-height:1.5; margin-bottom:6px;} /* 🔴 NO line clamp anywhere in here. The ticket exists BECAUSE the row truncates; clamping the prose again would leave the subscriber with no surface that shows the whole text. pre-wrap keeps the producer's own line breaks. */ .tklw{font-size:13px; color:var(--text-secondary); line-height:1.72; white-space:pre-wrap; overflow-wrap:anywhere;} /* the full analysis (`why_full`) arrives paragraphs-long: each blank-line break is a real

with reading room, single newlines still drawn by the inherited pre-wrap. The PANEL (.tk, max-height:86vh, overflow-y:auto) is the scroll surface — a 6,000-character card scrolls; it is never clamped and never clipped. */ .tklw p{margin:0 0 10px;} .tklw p:last-child{margin-bottom:0;} /* market_update — the premium brief ticket (8th family, 2026-09-02): a long-form editorial card gets an accent frame and a wider reading column. The body already renders why_full/he_why_full unclamped (.tklw pre-wrap, panel scrolls) — no clamp overrides needed, only the frame. 🔴 ITS `max-width:820px` IS GONE (2026-09-11). It was written to make this family WIDER than the 720px base; once the base became min(960px, 94vw) the very same declaration started making the premium brief the NARROWEST ticket on the page — an override that had silently inverted its own purpose. The frame stays, the width comes from the shared panel, and the brief keeps the most room, as intended. */ .tk.card--brief{border:1px solid var(--brief, #5EA8F2); border-radius:10px;} .tk.card--brief .tklw{line-height:1.6;} /* ── pulse panels (2026-09-01) — sector / regime / market detail in the SAME modal ── The strip keeps its exact closed look: the affordance is cursor + the page's own global :focus-visible ring, never a layout change. Everything below renders inside .tk (the ticket panel), so the trap/Escape/backdrop chrome is inherited, not forked. */ .stile[role="button"],.regime[role="button"],.mpanel[role="button"]{cursor:pointer;} .stile[role="button"]:hover,.regime[role="button"]:hover{border-color:var(--accent-glow);} .ppup{color:var(--up);} .ppdn{color:var(--down);} .ppfl{color:var(--warn);} .ppb{color:var(--up); font-weight:700;} .pps{color:var(--down); font-weight:700;} .ppsep{color:var(--text-tertiary); margin-inline:3px;} .ppsplit{font-family:var(--font-mono); font-variant-numeric:tabular-nums; font-size:12px;} .pparr{font-size:8px; margin-inline-end:3px; opacity:.85;} .ppbig{font-size:15px; font-weight:800;} .ppcap{margin-top:15px; font-size:9.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--text-tertiary);} .pprule{margin-top:8px; font-size:12px; line-height:1.7; color:var(--text-secondary); border-inline-start:2px solid var(--line); padding-inline-start:13px;} .ppmath{margin-top:4px; font-weight:700;} .ppstale{margin-top:8px; font-size:11px; color:var(--warn);} /* 🔴 THE SIDE-SCROLL IS GONE, AND NOT BY HIDING IT (2026-09-11). `.pptwrap` used to carry `overflow-x:auto`, which is machinery for a table that is too wide — it made the sector ticket's category table scroll sideways inside the modal and clip the taxonomy names. `table-layout:fixed` removes the CAUSE instead: a fixed table is sized by its container and its first row, never by its content, so it is physically incapable of asking for more width than it has been given, at ANY viewport, and nothing needs to scroll. A long name WRAPS (see .ppname) rather than being cut. The wrapper survives only as the margin it always was. */ .pptwrap{margin-top:8px;} .ppt{width:100%; table-layout:fixed; border-collapse:collapse; font-size:12px;} /* headers WRAP too — a nowrap header is exactly how a narrow column forces a wide table, and "BUYERS/SELLERS" is the widest string in this whole panel */ .ppt th{text-align:start; font-size:9.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--text-tertiary); padding:6px 10px; border-bottom:1px solid var(--line); white-space:normal;} .ppt td{padding:7px 10px; border-bottom:1px solid var(--line); vertical-align:middle;} .ppt tr:last-child td{border-bottom:none;} /* a 60-character taxonomy key gets TWO LINES here rather than an ellipsis: the ticket is the surface that exists to show the whole name, so clipping it here would leave the subscriber with nowhere to read it. `overflow-wrap:anywhere` is for the pathological unbreakable token, not for normal prose. */ .ppt td.ppname{color:var(--text-primary); font-weight:600; white-space:normal; overflow-wrap:anywhere; line-height:1.4;} .ppt td.ppnum{white-space:nowrap; font-variant-numeric:tabular-nums;} /* ── the column plans. With table-layout:fixed the FIRST ROW decides the columns, so the percentages ride the headers. At the ticket's 912px of inner width the name column is ~419px — one line for a 60-character key, two on a narrow phone. ── */ .pptcat th:nth-child(1){width:46%;} .pptcat th:nth-child(2){width:20%;} .pptcat th:nth-child(3){width:16%;} .pptcat th:nth-child(4){width:18%;} .pptsec th:nth-child(1){width:46%;} .pptsec th:nth-child(2){width:18%;} .pptsec th:nth-child(3){width:18%;} .pptsec th:nth-child(4){width:18%;} .pptmem th:nth-child(1){width:40%;} .pptmem th:nth-child(2){width:30%;} .pptmem th:nth-child(3){width:30%;} .ppadv{font-size:9px;} /* ── the category drill-down (2026-09-11) — ONE category's constituent names ── A VIEW of the sector ticket, not a second modal: the sector's header stats stay above it, so the reading these prices are as-of never leaves the screen. DIRECTION: every rule here is logical (inline-start/end, text-align:start/end, grid/flex order), so the view mirrors itself in Hebrew with no [dir=rtl] exceptions — the lesson from the ticker tile, where the exceptions were deleted rather than stacked. The one thing deliberately CENTRED is nothing at all: this is a start-aligned reading list, and start-alignment is what flips correctly. */ .ppmhd{margin-top:15px;} /* the back control: TEXT ONLY, no chevron. A back arrow is one of the few glyphs that has to be mirrored by hand between LTR and RTL, and a label that reads correctly in both directions costs nothing and cannot be drawn pointing the wrong way. It is a real