/* ============================================================ PULSE // MISSION CONTROL — visual skin (V20.14.47). Loaded LAST on every surface. A single, opinionated identity: deep-space glass panels with HUD brackets, electric signal lines, telemetry, and glow that carries meaning (live = green, selected = signal cyan, alert = amber, critical = red, projection = violet). Everything derives from the tokens in pulse-tokens.css; this sheet re-tunes the palette and layers the effects. Light theme ("Daylight Ops") keeps the same geometry with paper surfaces and ink lines. Reduced motion removes every ambient animation. ============================================================ */ /* ---------- 1. Palette re-tune ---------- */ :root { /* Lifted one step (pass 14): the void was #03060d, close to black, and the page read as a hole rather than a surface. Still navy, still dark. */ --bg-void: #0a1322; --bg-deep: #0e192c; --bg-panel: #132240; --bg-panel-hi: #192d4d; --bg-panel-line: rgba(0, 229, 255, .16); --line: rgba(0, 229, 255, .16); --line-strong: rgba(0, 229, 255, .32); --bg-input: rgba(4, 10, 22, .85); --bg-hover: rgba(0, 229, 255, .07); --bg-selected: rgba(0, 229, 255, .14); --cyan: #00e5ff; --cyan-dim: #0b6b7d; --cyan-soft: rgba(0, 229, 255, .10); --cyan-line: rgba(0, 229, 255, .34); --gold: #ffb020; --gold-soft: rgba(255, 176, 32, .12); --gold-line: rgba(255, 176, 32, .36); --green: #48ffb4; --green-soft: rgba(72, 255, 180, .11); --green-line: rgba(72, 255, 180, .34); --red: #ff4d6d; --red-soft: rgba(255, 77, 109, .12); --red-line: rgba(255, 77, 109, .36); --purple: #9d8bff; --purple-soft: rgba(157, 139, 255, .13); --blue: #5ea3ff; --text-hi: #e8f3ff; --text-mid: #a2b6d2; --text-dim: #8298b8; /* WCAG AA: 4.57 on the dark panel, 4.68 on the lighter panel tone */ --chart-1: #00e5ff; --chart-2: #ffb020; --chart-3: #48ffb4; --chart-4: #9d8bff; --chart-5: #ff8a4d; --chart-6: #5ea3ff; --chart-7: #ff6fb1; --chart-grid: rgba(0, 229, 255, .12); --chart-axis: #7189ab; --chart-label: #a2b6d2; --chart-label-hi: #e8f3ff; --chart-tooltip-bg: #08101f; --chart-positive: #48ffb4; --chart-negative: #ff4d6d; --chart-target: #ffb020; --chart-forecast: #9d8bff; --shadow-md: 0 10px 30px rgba(0, 0, 0, .45); --shadow-lg: 0 24px 60px rgba(0, 0, 0, .6); --glow-cyan: 0 0 18px rgba(0, 229, 255, .28); --glow-cyan-strong: 0 0 28px rgba(0, 229, 255, .45), 0 0 2px rgba(0, 229, 255, .9); --glow-green: 0 0 14px rgba(72, 255, 180, .45); --glow-gold: 0 0 14px rgba(255, 176, 32, .45); --glow-red: 0 0 14px rgba(255, 77, 109, .5); --mc-glass: linear-gradient(160deg, rgba(22, 38, 66, .80), rgba(12, 22, 40, .84)); --mc-glass-hi: linear-gradient(160deg, rgba(30, 50, 84, .88), rgba(16, 28, 50, .9)); --mc-bracket: rgba(0, 229, 255, .55); --mc-scan: rgba(255, 255, 255, .018); --brand-portfolio: #9d8bff; --pulse-bg-void: var(--bg-void); --pulse-bg-deep: var(--bg-deep); --pulse-bg-panel: var(--bg-panel); --pulse-bg-panel-hi: var(--bg-panel-hi); --pulse-line: var(--line); --pulse-cyan: var(--cyan); --pulse-gold: var(--gold); --pulse-green: var(--green); --pulse-red: var(--red); --pulse-text-hi: var(--text-hi); --pulse-text-mid: var(--text-mid); --pulse-text-dim: var(--text-dim); } :root[data-theme="light"] { /* V20.14.353 -- slate: the same glass, glows and brackets as the dark HUD above, in the slate cyan (#007ea8) and gold (#8a6200) on the slate panel (#f5f9fc). The glass is the panel itself, so a light panel is the colour Ramy named, and the brackets are the full accent, as the dark ones are the full dark accent. */ --glow-cyan: 0 0 18px rgba(0, 126, 168, .20); --glow-cyan-strong: 0 0 0 1px rgba(0, 126, 168, .30), 0 0 26px rgba(0, 126, 168, .24); --glow-green: 0 0 15px rgba(15, 118, 110, .20); --glow-gold: 0 0 15px rgba(138, 98, 0, .18); --glow-red: 0 0 15px rgba(194, 56, 58, .18); --mc-glass: linear-gradient(160deg, #f5f9fc, #f5f9fc); --mc-glass-hi: linear-gradient(160deg, #f5f9fc, #eaf1f7); --mc-bracket: #007ea8; --mc-scan: rgba(0, 40, 80, .012); } /* ---------- 2. Deep-space ground: glows, perspective grid, scanlines ---------- */ html.mc-has-telemetry body { padding-top: 34px; } body { background-color: var(--bg-void) !important; background-image: radial-gradient(ellipse 900px 520px at 12% -10%, rgba(0, 229, 255, .10), transparent 60%), radial-gradient(ellipse 700px 480px at 92% 8%, rgba(157, 139, 255, .09), transparent 60%), radial-gradient(ellipse 1200px 500px at 50% 110%, rgba(0, 229, 255, .07), transparent 60%) !important; background-attachment: fixed !important; } /* V20.14.202 -- the light ground used to be painted here as well: a white background-color and a blueprint grid, both !important. Neither ever reached a pixel. pulse-light-revamp.css declares the same two properties with !important on the identical selector and loads after this file on every page that loads either, so it won on order. Removing a rule that never rendered changes nothing on screen and leaves one owner. */ :root[data-theme="light"] body::after { display: none !important; } /* ---------- 3. Telemetry bar ---------- */ .mc-telemetry { position: fixed; top: 0; left: 0; right: 0; height: 34px; z-index: 1500; display: flex; align-items: center; gap: 14px; padding: 0 16px; background: linear-gradient(90deg, rgba(4, 9, 20, .96), rgba(6, 14, 28, .94) 50%, rgba(4, 9, 20, .96)); border-bottom: 1px solid var(--line-strong); box-shadow: 0 1px 0 rgba(0, 229, 255, .12), 0 8px 24px rgba(0, 0, 0, .35); font: 600 11px var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--text-dim); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } /* V20.14.172 -- the gateway rail joins the light theme. It used to stay dark in both, on the argument that it reads as instrument chrome rather than page surface. He reported it: "control panel in the upper right corner is ugly in light theme", and he is right about the effect if not the cause. The rail was the ONE dark band left on a white page, and the cluster inside it draws its glyphs in #9fb6d3 on that band -- pale blue on near-black, immediately under a white header. It read as an artefact rather than as chrome, and the argument for keeping it dark was about how it reads in isolation rather than in the page it sits on. Same rail, same information, same layout; daylight key. The values are the ones the other three headers already use (body > .topbar, .pulse-sticky-header, .cp-sticky-shell), so the four bands of chrome on a light page now agree instead of three agreeing and one not. */ :root[data-theme="light"] .mc-telemetry { background: linear-gradient(180deg, #ffffff 0%, #f6fbff 100%); border-bottom-color: rgba(7, 143, 197, .30); box-shadow: 0 1px 0 rgba(7, 185, 234, .18), 0 6px 20px rgba(20, 50, 90, .07); color: #566d88; } :root[data-theme="light"] .mc-telemetry .mc-tel-brand { color: #0b2039; } :root[data-theme="light"] .mc-telemetry .mc-tel-brand b { color: #0a6d94; } :root[data-theme="light"] .mc-telemetry .mc-tel-item b { color: #143352; } :root[data-theme="light"] .mc-telemetry .mc-tel-item .hud-icon { color: #0d8bb0; } :root[data-theme="light"] .mc-telemetry .mc-tel-page { color: #0a6d94; border-color: rgba(7, 143, 197, .38); background: rgba(7, 185, 234, .10); } :root[data-theme="light"] .mc-telemetry .mc-tel-page small { color: #566d88; } .mc-tel-left, .mc-tel-right { display: flex; align-items: center; gap: 14px; min-width: 0; } .mc-tel-right { margin-left: auto; } .mc-tel-brand { display: inline-flex; align-items: center; gap: 6px; color: var(--text-hi); letter-spacing: .26em; font-weight: 700; white-space: nowrap; } .mc-tel-brand b { color: var(--cyan); font-weight: 700; text-shadow: var(--glow-cyan); } .mc-tel-brand .hud-icon { color: var(--cyan); filter: drop-shadow(0 0 6px rgba(0,229,255,.6)); } .mc-tel-logo { width: 20px; height: 20px; margin-right: 4px; border-radius: 50%; filter: drop-shadow(0 0 6px rgba(0,229,255,.55)); } .mc-tel-page { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border: 1px solid var(--cyan-line); border-radius: 4px; color: var(--cyan); background: var(--cyan-soft); white-space: nowrap; } .mc-tel-page small { color: var(--text-mid); text-transform: none; letter-spacing: .04em; font-weight: 500; } /* Live-signal meter. This was a 1px rail with three glow blobs sliding left to right, and that is precisely the shape of an indeterminate progress bar -- people read it as the page still loading and waited for it to finish. An equaliser has no start and no end: the bars rise and fall in place, which says "a signal is arriving" without ever implying a journey from 0% to 100%. scaleY is composited, so fifteen bars animating continuously cost nothing per frame; animating their height would have laid the row out again each time. */ /* V20.14.92 -- the same cyan equaliser, with more life in it: - it now radiates from a beating core in the middle: bars the same distance from the centre move together, so the wave rolls OUT from the core on both sides (a pulse, which is the product's name) instead of scrolling one way; - every 3.6 s a heartbeat flash runs outwards along the bars from the core; - a faint baseline breathes under the bars; - it quickens under the pointer and while the report is fetching data, so the meter now says something: faster = work in progress. Still transform/opacity for the continuous motion (composited); the flash and the core's ring are brief and cover a few pixels. */ /* V20.14.111 -- see SIGNAL_MARK in pulse-mission.js. The 22-bar equaliser that used to sit here was ~180px of bouncing columns: the widest thing in the bar, for something that only ever meant "the page is awake". The trace is the portal's own signal, drawn on and cleared inside a pair of reticle brackets, in a little over half the width. It still quickens under the pointer and while the report is fetching, so the mark says something. */ .mc-tel-stream { position: relative; flex: 1 1 auto; min-width: 40px; display: flex; align-items: center; justify-content: center; height: 20px; } .mc-tel-sig { width: 100px; height: 20px; flex: none; overflow: visible; } .mc-sig-rail { fill: none; stroke: rgba(0, 229, 255, .20); stroke-width: 1; } .mc-sig-bracket { fill: none; stroke: rgba(0, 229, 255, .55); stroke-width: 1.2; stroke-linecap: round; } .mc-sig-trace { fill: none; stroke: var(--cyan, #00e5ff); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 128; stroke-dashoffset: 128; filter: drop-shadow(0 0 3px rgba(0, 229, 255, .7)); animation: mcSigDraw 3.4s ease-in-out infinite; } .mc-sig-scan { fill: #c8faff; filter: drop-shadow(0 0 5px #00e5ff); animation: mcSigScan 3.4s ease-in-out infinite; } @keyframes mcSigDraw { 0% { stroke-dashoffset: 128; opacity: .22; } 30%, 64% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: -128; opacity: .22; } } @keyframes mcSigScan { 0% { transform: translateX(6px); opacity: 0; } 12% { opacity: .9; } 86% { opacity: .9; } 100% { transform: translateX(90px); opacity: 0; } } /* Faster under the pointer, faster again while the report is fetching data. */ .mc-tel-stream:hover .mc-sig-trace, .mc-tel-stream:hover .mc-sig-scan { animation-duration: 1.7s; } html.pulse-busy .mc-sig-trace, html.pulse-busy .mc-sig-scan { animation-duration: 1.1s; } /* Stops where every other animation stops, resting at drawn rather than blank. */ :root.pulse-motion-off .mc-sig-trace, :root.pulse-motion-off .mc-sig-scan { animation: none !important; } :root.pulse-motion-off .mc-sig-trace { stroke-dashoffset: 0; opacity: 1; } :root.pulse-motion-off .mc-sig-scan { opacity: 0; } @media (prefers-reduced-motion: reduce) { .mc-sig-trace, .mc-sig-scan { animation: none !important; } .mc-sig-trace { stroke-dashoffset: 0; opacity: 1; } .mc-sig-scan { opacity: 0; } } .mc-tel-item { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; } .mc-tel-item .hud-icon { color: var(--cyan); opacity: .9; } .mc-tel-item b { color: var(--text-hi); font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: .06em; } .mc-tel-item b.ok { color: var(--green); } .mc-tel-item b.warn { color: var(--gold); } .mc-tel-item b.bad { color: var(--red); } .mc-tel-live b { color: var(--green); } .mc-led { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: var(--glow-green); animation: mcLed 2.2s ease-in-out infinite; } @keyframes mcLed { 0%, 100% { opacity: 1; } 50% { opacity: .45; } } @media (max-width: 1100px) { .mc-tel-page small { display: none; } } @media (max-width: 760px) { .mc-tel-stream, .mc-tel-page, .mc-tel-item:not(.mc-tel-live):not([title="Riyadh time"]) { display: none; } .mc-telemetry { padding: 0 10px; gap: 8px; } .mc-tel-brand { letter-spacing: .1em; } .mc-tel-right { gap: 10px; } } /* ---------- 4. HUD glass panels ---------- */ .mc-hud, .panel, .kpi-card, .v46-brief, .v46-trustbar, .filterbar, .login-card, .launch-map, .section-tab, .section-workspace, .route-report-node, .qa-drawer, .global-panel, .system-map-panel, .health-banner, .chart-box, .settings-form, .modal-box, .v21-modal, .v38-drawer, .pulse-notice-panel, .profile-dropdown { background: var(--mc-glass) !important; border: 1px solid var(--line) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04), 0 12px 32px rgba(0, 0, 0, .35) !important; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } :root[data-theme="light"] .mc-hud, :root[data-theme="light"] .panel, :root[data-theme="light"] .kpi-card, :root[data-theme="light"] .v46-brief, :root[data-theme="light"] .v46-trustbar, :root[data-theme="light"] .filterbar, :root[data-theme="light"] .login-card, :root[data-theme="light"] .launch-map, :root[data-theme="light"] .section-tab, :root[data-theme="light"] .section-workspace, :root[data-theme="light"] .route-report-node, :root[data-theme="light"] .qa-drawer, :root[data-theme="light"] .global-panel, :root[data-theme="light"] .system-map-panel, :root[data-theme="light"] .health-banner, :root[data-theme="light"] .chart-box, :root[data-theme="light"] .settings-form, :root[data-theme="light"] .modal-box, :root[data-theme="light"] .v21-modal, :root[data-theme="light"] .v38-drawer, :root[data-theme="light"] .pulse-notice-panel, :root[data-theme="light"] .profile-dropdown { box-shadow: inset 0 1px 0 #ffffff, 0 12px 32px rgba(20, 50, 90, .10) !important; } /* Corner brackets drawn as backgrounds so no pseudo-element is consumed. */ .mc-hud, .panel, .kpi-card, .v46-brief, .launch-map, .login-card, .section-workspace, .global-panel, .system-map-panel { background-image: linear-gradient(var(--mc-bracket), var(--mc-bracket)), linear-gradient(var(--mc-bracket), var(--mc-bracket)), linear-gradient(var(--mc-bracket), var(--mc-bracket)), linear-gradient(var(--mc-bracket), var(--mc-bracket)), linear-gradient(var(--mc-bracket), var(--mc-bracket)), linear-gradient(var(--mc-bracket), var(--mc-bracket)), linear-gradient(var(--mc-bracket), var(--mc-bracket)), linear-gradient(var(--mc-bracket), var(--mc-bracket)), var(--mc-glass) !important; background-repeat: no-repeat !important; background-size: 14px 1px, 1px 14px, 14px 1px, 1px 14px, 14px 1px, 1px 14px, 14px 1px, 1px 14px, 100% 100% !important; background-position: 0 0, 0 0, 100% 0, 100% 0, 0 100%, 0 100%, 100% 100%, 100% 100%, 0 0 !important; border-radius: 6px !important; } .panel:hover, .kpi-card:hover, .section-tab:hover, .route-report-node:hover { border-color: var(--cyan-line) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.05), var(--glow-cyan), 0 16px 40px rgba(0,0,0,.4) !important; } .panel::after, .kpi-card::after { background: radial-gradient(180px circle at var(--mx) var(--my), rgba(0, 229, 255, .10), transparent 70%) !important; } /* ---------- 5. Command deck (dashboard header) ---------- */ /* V20.14.193 -- the sticky offset is 0 in all four files that set it. The deck sticks inside #mainShell, whose box already begins below the fixed portal bar, so any offset here is clearance for something already cleared and pushes the deck down onto the content behind it. V20.14.200 -- true of #mainShell's own bar, and not of the telemetry strip, which is `position: fixed; top: 0; z-index: 1500` and therefore outside #mainShell entirely. A sticky element pins relative to the VIEWPORT, so the body padding that clears the strip at rest does nothing once the deck is stuck -- which is where the reasoning above went wrong. Measured: the strip held 0..52 while the stuck deck held 0..160, and the basis and comparison toggles lived inside that overlap, present, covered and unclickable. */ .pulse-sticky-header { top: var(--mc-bar-h, 0px) !important; background: linear-gradient(180deg, rgba(5, 10, 22, .96), rgba(6, 12, 26, .9)) !important; border-bottom: 1px solid var(--line-strong); box-shadow: 0 12px 40px -18px rgba(0, 229, 255, .35), 0 10px 30px rgba(0, 0, 0, .45) !important; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } :root[data-theme="light"] .pulse-sticky-header { background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(244,248,253,.92)) !important; box-shadow: 0 10px 30px rgba(20,50,90,.10) !important; } .pulse-sticky-header::before { display: none !important; } .pulse-sticky-header::after { background: linear-gradient(90deg, transparent, var(--cyan) 30%, var(--purple) 70%, transparent) !important; box-shadow: 0 0 16px rgba(0, 229, 255, .45) !important; height: 1px !important; } .header-scan { display: none; } .brandmark h1 { background: linear-gradient(90deg, var(--text-hi) 20%, var(--cyan) 70%, var(--purple)) !important; -webkit-background-clip: text !important; background-clip: text !important; text-shadow: none; letter-spacing: .16em !important; } .pulse-badge::before { background: conic-gradient(from 0deg, var(--cyan), var(--purple), var(--cyan)) !important; opacity: .45 !important; filter: blur(8px) !important; } .pulse-logo-caption { color: var(--cyan) !important; text-shadow: var(--glow-cyan); } .segmented-control { background: rgba(4, 10, 22, .7) !important; border: 1px solid var(--line-strong) !important; box-shadow: inset 0 0 0 1px rgba(0,229,255,.05); border-radius: 8px !important; } :root[data-theme="light"] .segmented-control { background: #ffffff !important; } .segmented-option { border-radius: 6px !important; font-family: var(--font-mono) !important; letter-spacing: .1em; } .segmented-option.active { background: var(--cyan) !important; color: var(--btn-primary-text) !important; box-shadow: var(--glow-cyan-strong) !important; } .topbar-controls { border: 0 !important; background: transparent !important; box-shadow: none !important; backdrop-filter: none !important; padding: 0 !important; } .pulse-sticky-header .topbar { background: transparent !important; border: 0 !important; box-shadow: none !important; } .icon-btn { background: rgba(4, 10, 22, .6) !important; border: 1px solid var(--line-strong) !important; color: var(--text-mid) !important; border-radius: 8px !important; } :root[data-theme="light"] .icon-btn { background: #ffffff !important; } .icon-btn:hover, .icon-btn:focus-visible { color: var(--cyan) !important; background: var(--cyan-soft) !important; border-color: var(--cyan) !important; box-shadow: var(--glow-cyan) !important; } .clock .live { color: var(--green) !important; text-shadow: var(--glow-green); font-family: var(--font-mono); letter-spacing: .12em; } .live-dot { box-shadow: var(--glow-green) !important; } /* Asset selector (brand switcher) */ /* Brand rail (V20.14.50) The logos carry their own colour, so the chips stay out of the way: no white plate, unselected chips sit back (dimmed and desaturated), and only the selected one comes forward with its own brand glow. PORTFOLIO reads the same way -- it used to be painted purple whether or not it was the current scope, which made it look permanently selected. */ .brand-btn.logo-only { background: transparent !important; border: 1px solid var(--line) !important; border-radius: 8px !important; box-shadow: none !important; opacity: .48; filter: saturate(.45) contrast(.95); transition: opacity .22s ease, filter .22s ease, transform .22s cubic-bezier(.2,.8,.2,1), border-color .22s ease, box-shadow .22s ease; } .brand-btn.logo-only .brand-logo { filter: drop-shadow(0 3px 8px rgba(0, 0, 0, .5)); } :root[data-theme="light"] .brand-btn.logo-only .brand-logo { filter: drop-shadow(0 1px 1px rgba(10, 30, 60, .5)) drop-shadow(0 0 3px rgba(10, 30, 60, .25)); } .brand-btn.logo-only:hover { opacity: .85; filter: none; transform: translateY(-2px); border-color: var(--cyan-line) !important; } .brand-btn.logo-only.active { opacity: 1; filter: none; border-color: var(--brand-accent, var(--cyan)) !important; background: radial-gradient(120% 140% at 50% 120%, rgba(var(--brand-glow, 0, 229, 255), .16), transparent 70%) !important; box-shadow: 0 0 0 1px var(--brand-accent, var(--cyan)), 0 0 22px rgba(var(--brand-glow, 0, 229, 255), .40), 0 8px 20px rgba(0, 0, 0, .3) !important; } .brand-btn.logo-only.active::after { display: none !important; } .brand-btn.portfolio-btn { background: transparent !important; border: 1px solid var(--line) !important; color: var(--text-mid) !important; border-radius: 8px !important; box-shadow: none !important; opacity: .62; transition: opacity .22s ease, color .22s ease, border-color .22s ease, box-shadow .22s ease, background .22s ease; } .brand-btn.portfolio-btn .portfolio-icon { color: var(--text-dim) !important; transition: color .22s ease; } .brand-btn.portfolio-btn:hover { opacity: .9; border-color: var(--purple) !important; color: var(--text-hi) !important; } .brand-btn.portfolio-btn.active { opacity: 1; color: var(--purple) !important; border-color: var(--purple) !important; background: radial-gradient(120% 140% at 50% 120%, rgba(157, 139, 255, .18), transparent 70%) !important; box-shadow: 0 0 0 1px var(--purple), 0 0 22px rgba(157, 139, 255, .45) !important; } .brand-btn.portfolio-btn.active .portfolio-icon { color: var(--purple) !important; } .brand-btn .tag { color: var(--text-dim) !important; } /* Filter deck */ .filterbar { border-radius: 8px !important; backdrop-filter: none !important; gap: 8px !important; } .filterbar .v20-control, .filter-reset { padding: 6px 9px !important; letter-spacing: .04em !important; } #v20SavedViews { max-width: 128px; } /* Two-row filter deck: selects on row one; scope chips + view actions + reset on row two. */ .filterbar .flabel, .filterbar .mc-select, .filterbar select.fselect { order: 1; } .filterbar #v20Scope { order: 4; width: auto !important; flex: 1 1 auto; margin-top: 4px !important; padding-top: 0 !important; border-top: 0 !important; min-width: 0; } .filterbar .v20-control { order: 5; margin-top: 4px; } .filterbar .filter-reset { order: 6; margin-top: 4px; margin-left: 8px !important; } .filterbar .filter-pill { order: 7; } .filterbar::after { content: ""; order: 3; flex-basis: 100%; height: 0; } .filterbar .flabel { display: inline-flex !important; align-items: center; gap: 6px; color: var(--cyan) !important; } .mc-select { position: relative; display: inline-flex; align-items: center; } .mc-select .mc-select-icon { position: absolute; left: 9px; color: var(--cyan); pointer-events: none; opacity: .9; } .mc-select select.fselect { padding-left: 26px !important; padding-right: 22px !important; background-position: right 7px center !important; } select.fselect { background-color: var(--bg-input) !important; border: 1px solid var(--line-strong) !important; border-radius: 6px !important; color: var(--text-hi) !important; font-family: var(--font-mono) !important; font-size: var(--fs-xs) !important; letter-spacing: .02em; } select.fselect:hover, select.fselect:focus { border-color: var(--cyan) !important; box-shadow: var(--glow-cyan) !important; } select.fselect.is-active { border-color: var(--cyan) !important; box-shadow: 0 0 0 1px var(--cyan), var(--glow-cyan) !important; } /* V20.14.157 -- `:not(.v20-icon)`. A LABELLED control needs a plate: the box is what tells you the words are a button. An icon-only control does not -- the glyph is the affordance, and a box around each one turns a row of tools into a row of cells. Reported as "remove boxes around upper right corner icons, make them bigger". The icon cluster's appearance is stated once, further down this file, and this rule now stays out of its way rather than being out-weighted by it. */ .filterbar .v20-control:not(.v20-icon), .filter-reset { background: rgba(4, 10, 22, .6) !important; border: 1px solid var(--line-strong) !important; color: var(--text-mid) !important; border-radius: 6px !important; } :root[data-theme="light"] .filterbar .v20-control:not(.v20-icon), :root[data-theme="light"] .filter-reset { background: #ffffff !important; } .filterbar .v20-save:hover, .filter-reset:hover { color: var(--cyan) !important; border-color: var(--cyan) !important; box-shadow: var(--glow-cyan) !important; } .filter-reset:hover { color: var(--red) !important; border-color: var(--red) !important; box-shadow: var(--glow-red) !important; } .v20-chip { box-shadow: var(--glow-cyan); } .v46-trustbar { border-radius: 6px !important; } .v46-freshness-pill.ok { box-shadow: var(--glow-green); } .v46-freshness-pill.stale { box-shadow: var(--glow-gold); } .v46-freshness-pill.failed { box-shadow: var(--glow-red); } .v38-context-action { background: rgba(4,10,22,.6) !important; border-color: var(--line-strong) !important; border-radius: 6px !important; } :root[data-theme="light"] .v38-context-action { background: #fff !important; } /* ---------- 6. Tab rail with icons ---------- */ .tabnav { display: flex; gap: 6px !important; padding: 6px !important; margin-bottom: 18px !important; border: 1px solid var(--line) !important; border-radius: 8px; background: var(--mc-glass); overflow-x: auto; } #tabNav .tab-btn { display: inline-flex !important; align-items: center; gap: 8px; padding: 9px 14px !important; border: 1px solid transparent !important; border-radius: 6px !important; font: 600 var(--fs-xs) var(--font-mono) !important; letter-spacing: .12em; color: var(--text-mid) !important; transition: all var(--dur-base) var(--ease-standard); } #tabNav .tab-btn .mc-tab-icon { flex: none; opacity: .8; } #tabNav .tab-btn:hover { color: var(--text-hi) !important; background: var(--bg-hover) !important; border-color: var(--line) !important; } #tabNav .tab-btn.active { color: var(--cyan) !important; background: var(--cyan-soft) !important; border-color: var(--cyan-line) !important; box-shadow: var(--glow-cyan) !important; /* V20.14.222 -- underline removed; #tabSlider draws the one line now, and can travel and breathe. The glow stays. Section tabs and Control Panel tabs below keep theirs: they have no travelling mark. */ text-shadow: 0 0 10px rgba(0,229,255,.5); } #tabNav .tab-btn.active .mc-tab-icon { opacity: 1; filter: drop-shadow(0 0 6px rgba(0,229,255,.7)); } #tabNav .tab-btn.active::after { display: none !important; } /* ---------- 7. KPI cards ---------- */ .kpi-card .kvalue { text-shadow: 0 0 18px rgba(0, 229, 255, .18); } .kpi-card.tone-pos .kvalue { text-shadow: 0 0 18px rgba(72, 255, 180, .22); } .kpi-card.tone-neg .kvalue { text-shadow: 0 0 18px rgba(255, 77, 109, .22); } :root[data-theme="light"] .kpi-card .kvalue { text-shadow: none; } .kpi-card::before { height: 1px !important; background: linear-gradient(90deg, var(--brand-accent, var(--cyan)), transparent 70%) !important; box-shadow: 0 0 10px var(--brand-accent, var(--cyan)); opacity: .9 !important; } .kpi-specific-icon { color: var(--cyan) !important; filter: drop-shadow(0 0 6px rgba(0,229,255,.6)); } .kpi-card .klabel { color: var(--text-dim) !important; } /* No glow, no box behind the KPI delta -- it is a coloured figure, nothing else (see 17a). */ .kpi-drill:hover, .kpi-info:hover, .kpi-trace:hover { box-shadow: var(--glow-cyan); } /* ---------- 8. Panels, titles, briefs ---------- */ .panel .ptitle { font-family: var(--font-display) !important; letter-spacing: .02em; } .pcard-icon, .v23-card-icon { color: var(--cyan) !important; filter: drop-shadow(0 0 6px rgba(0,229,255,.55)); } .v20-explain, .v46-chart-btn { background: rgba(4,10,22,.7) !important; border-color: var(--line-strong) !important; color: var(--cyan) !important; } :root[data-theme="light"] .v20-explain, :root[data-theme="light"] .v46-chart-btn { background: #fff !important; } .v20-explain:hover, .v46-chart-btn:hover { box-shadow: var(--glow-cyan) !important; border-color: var(--cyan) !important; } .v46-brief-kicker i { box-shadow: 0 0 0 3px var(--cyan-soft), var(--glow-cyan) !important; } .v46-insight { background: rgba(8, 16, 30, .55) !important; border-color: var(--line) !important; } :root[data-theme="light"] .v46-insight { background: #f6f9fd !important; } .v46-insight::before { box-shadow: 0 0 10px currentColor; } .v46-act { box-shadow: var(--glow-cyan); } .v21-narrative, .insight, .caveat-note { border-radius: 6px !important; } .tab-page-head, .v24-workspace-head { border-radius: 6px !important; } /* ---------- 9. Agent drawer ---------- */ .qa-drawer { border-radius: 0 !important; border-left: 1px solid var(--cyan-line) !important; box-shadow: -20px 0 60px rgba(0, 0, 0, .55), inset 1px 0 0 rgba(0,229,255,.2) !important; } .qa-fab { border: 1px solid var(--cyan-line) !important; background: var(--cyan-soft) !important; box-shadow: var(--glow-cyan) !important; border-radius: 8px !important; } .qa-send { background: var(--cyan) !important; color: var(--btn-primary-text) !important; box-shadow: var(--glow-cyan-strong) !important; border-radius: 6px !important; } .qa-mode-btn.active, .qa-answer-btn.active { background: var(--cyan) !important; color: var(--btn-primary-text) !important; border-color: var(--cyan) !important; box-shadow: var(--glow-cyan) !important; } .qa-drawer { top: 34px !important; height: calc(100vh - 34px) !important; max-height: calc(100vh - 34px) !important; } .qa-backdrop { top: 34px !important; } .qa-brief { border-color: var(--cyan-line) !important; } /* ---------- 10. Hub ---------- */ .hub-title-row { display: flex !important; align-items: center; justify-content: flex-start; gap: 12px; } .hub-title-row::before { content: none !important; } .mc-hub-anim { width: 62px; height: 62px; overflow: visible; } .mc-hub-anim .ring { transform-box: fill-box; transform-origin: center; animation: mcHubSpin 14s linear infinite; } .mc-hub-anim .ring2 { transform-box: fill-box; transform-origin: center; animation: mcHubSpin 9s linear infinite reverse; } .mc-hub-anim rect { transform-box: fill-box; transform-origin: center; opacity: .4; animation: mcHubCell 2.4s ease-in-out infinite; animation-delay: var(--d, 0s); } @keyframes mcHubSpin { to { transform: rotate(360deg); } } @keyframes mcHubCell { 0%, 100% { opacity: .4; transform: scale(.88); } 50% { opacity: 1; transform: scale(1.1); filter: drop-shadow(0 0 4px currentColor); } } @media (prefers-reduced-motion: reduce) { .mc-hub-anim .ring, .mc-hub-anim .ring2, .mc-hub-anim rect { animation: none; opacity: 1; } } /* The animated hub glyph stands on its own. It used to sit inside a 54px tinted, bordered, glowing tile, and that frame competed with the mark it was framing -- at a glance you read the box first and the four pulsing cells second. Frame removed and the artwork enlarged to fill the space the tile used to occupy, so the animation is the thing you see. */ .mc-hub-title-icon { display: grid; place-items: center; width: 62px; height: 62px; border: 0; background: none; box-shadow: none; color: var(--cyan); } .hub-title-icon { display: none !important; } .hub-period-chip { display: inline-flex !important; align-items: center; gap: 7px; border: 1px solid var(--cyan-line) !important; background: var(--cyan-soft) !important; color: var(--cyan) !important; border-radius: 6px !important; box-shadow: var(--glow-cyan); font-family: var(--font-mono) !important; letter-spacing: .1em; } .launch-map { border-radius: 8px !important; } .launch-map-head span, .route-category-head span { color: var(--cyan) !important; text-shadow: var(--glow-cyan); } .section-tab { position: relative; border-radius: 6px !important; } .section-tab .mc-tab-glyph { position: absolute; right: 10px; bottom: 8px; color: var(--text-dim); opacity: .8; } .section-tab .mc-tab-glyph svg { width: 22px; height: 22px; } .section-tab.is-active { border-color: var(--cyan) !important; box-shadow: var(--glow-cyan), inset 0 -2px 0 var(--cyan) !important; background: var(--mc-glass-hi) !important; } .section-tab.is-active .mc-tab-glyph { color: var(--cyan); opacity: 1; filter: drop-shadow(0 0 6px rgba(0,229,255,.7)); } /* Section tiles: larger brand icons with no white plate (dark: bare artwork; light: navy chip so white-lettered artwork stays legible). */ .section-tab { grid-template-columns: 66px minmax(0, 1fr) !important; min-height: 88px !important; gap: 12px !important; } .section-tab-icon { width: 66px !important; height: 66px !important; padding: 3px !important; border-radius: 10px; background: transparent !important; border: 0 !important; box-shadow: none !important; filter: drop-shadow(0 6px 12px rgba(0, 0, 0, .45)); } .application-mark { background: transparent !important; border: 0 !important; box-shadow: none !important; width: 58px !important; height: 58px !important; } .application-mark img { width: 54px !important; height: 54px !important; filter: drop-shadow(0 5px 10px rgba(0, 0, 0, .45)); } :root[data-theme="light"] .application-mark img { filter: drop-shadow(0 1px 1px rgba(10, 30, 60, .55)) drop-shadow(0 0 3px rgba(10, 30, 60, .28)); } .section-tab.is-planned { opacity: .88; filter: saturate(.85); } .section-tab.is-live-tab.is-active .section-tab-icon { filter: drop-shadow(0 0 10px rgba(52, 211, 153, .45)); } /* Light: no plate either -- a thin dark halo keeps white lettering in the artwork readable on the white card. */ :root[data-theme="light"] .section-tab-icon, :root[data-theme="light"] .route-category-head img, :root[data-theme="light"] .application-mark, :root[data-theme="light"] .application-mark img { background: transparent !important; border: 0 !important; box-shadow: none !important; filter: drop-shadow(0 1px 1px rgba(10, 30, 60, .55)) drop-shadow(0 0 3px rgba(10, 30, 60, .28)); } /* Light mode: section tiles read as crisp white cards, not muted grey glass. */ :root[data-theme="light"] .section-tab { color: #153454; background: linear-gradient(150deg, #ffffff, #eef7fd) !important; border: 1px solid rgba(7, 143, 197, .34) !important; box-shadow: 0 8px 20px rgba(20, 50, 90, .09), inset 0 1px #ffffff !important; opacity: 1; filter: none; } :root[data-theme="light"] .section-tab b { color: #10294a; } :root[data-theme="light"] .section-tab small { color: #4a6485; } :root[data-theme="light"] .section-tab .mc-tab-glyph { color: #2b7fb3; opacity: .85; } :root[data-theme="light"] .section-tab.is-planned em { color: #7a4d00; border-color: rgba(255, 170, 0, .5); background: rgba(255, 201, 60, .16); } :root[data-theme="light"] .section-tab:hover { border-color: rgba(7, 143, 197, .7) !important; box-shadow: 0 10px 26px rgba(7, 143, 197, .18), inset 0 1px #ffffff !important; } :root[data-theme="light"] .section-tab.is-active { background: linear-gradient(125deg, #dff6fc, #ffffff) !important; border-color: #078fc5 !important; box-shadow: 0 0 0 1px rgba(7, 143, 197, .18), 0 10px 26px rgba(7, 143, 197, .2), inset 0 -2px 0 #078fc5 !important; } :root[data-theme="light"] .section-tab.is-live-tab.is-active { background: linear-gradient(125deg, #dcfbef, #ffffff) !important; border-color: #17a06a !important; box-shadow: 0 0 0 1px rgba(23, 160, 106, .18), 0 10px 26px rgba(23, 160, 106, .18), inset 0 -2px 0 #27c982 !important; } :root[data-theme="light"] .section-tab.is-live-tab.is-active .section-tab-icon { filter: drop-shadow(0 1px 1px rgba(10, 30, 60, .55)) drop-shadow(0 0 8px rgba(39, 201, 130, .5)); } /* Light: section tiles and application cards carry a slowly travelling light along their border. */ @property --mc-ang { syntax: ''; inherits: false; initial-value: 0deg; } :root[data-theme="light"] .section-tab, :root[data-theme="light"] .route-report-node { position: relative; --mc-b1: #078fc5; --mc-b2: #8fe6ff; } :root[data-theme="light"] .section-tab.is-live-tab.is-active, :root[data-theme="light"] .section-workspace.is-available .route-report-node { --mc-b1: #17a06a; --mc-b2: #9df5cf; } :root[data-theme="light"] .section-tab::after, :root[data-theme="light"] .route-report-node::after { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; pointer-events: none; z-index: 3; background: conic-gradient(from var(--mc-ang), transparent 0deg, transparent 235deg, var(--mc-b1) 292deg, var(--mc-b2) 322deg, transparent 350deg); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; animation: mcBorderSpin 7s linear infinite; } :root[data-theme="light"] .section-tab:nth-child(2)::after { animation-delay: -1.4s; } :root[data-theme="light"] .section-tab:nth-child(3)::after { animation-delay: -2.8s; } :root[data-theme="light"] .section-tab:nth-child(4)::after { animation-delay: -4.2s; } :root[data-theme="light"] .section-tab:nth-child(5)::after { animation-delay: -5.6s; } :root[data-theme="light"] .route-report-node::after { animation-duration: 9s; } @keyframes mcBorderSpin { to { --mc-ang: 360deg; } } @media (prefers-reduced-motion: reduce) { :root[data-theme="light"] .section-tab::after, :root[data-theme="light"] .route-report-node::after { animation: none; } } .section-application.is-flagship { border-color: var(--cyan-line) !important; box-shadow: inset 3px 0 0 var(--cyan), var(--glow-cyan) !important; } .section-application > i { color: var(--cyan) !important; } .launch-map-status { border: 1px solid var(--line-strong) !important; border-radius: 6px !important; background: var(--mc-glass-hi) !important; } .launch-map-status b { color: var(--cyan) !important; text-shadow: var(--glow-cyan); } .header-icon, .hub-profile-button { border: 1px solid var(--line-strong) !important; background: rgba(4,10,22,.6) !important; border-radius: 8px !important; } :root[data-theme="light"] .header-icon, :root[data-theme="light"] .hub-profile-button { background: #fff !important; } .header-icon:hover, .hub-profile-button:hover { border-color: var(--cyan) !important; color: var(--cyan) !important; box-shadow: var(--glow-cyan) !important; } body.hub .topbar, .hub-topbar { background: transparent; } /* Theme switch on the hub: light mode gives these surfaces a continuous edge-signal animation at higher specificity, which swallowed the switch animation when going dark -> light. Re-assert both float animations here (this layer loads last), so the directory box, the five section tiles and the selected-section box rise into place in BOTH directions. Keyframes live with the page that uses them (hub.html). */ :root[data-theme="light"] .theme-switching .launch-map, :root[data-theme="light"] .theme-switching .pulse-command-node, :root[data-theme="light"] .theme-switching .route-category, :root[data-theme="light"] .theme-switching .route-report-node { animation: themeBoxSwitch .55s cubic-bezier(.2, .8, .2, 1) both; } :root[data-theme="light"] .theme-switching .pulse-command-node { animation-delay: .035s; } :root[data-theme="light"] .theme-switching .route-category:nth-child(1) { animation-delay: .07s; } :root[data-theme="light"] .theme-switching .route-category:nth-child(2) { animation-delay: .105s; } :root[data-theme="light"] .theme-switching .route-report-node { animation-delay: .14s; } :root[data-theme="light"] .theme-switching .section-tab, :root[data-theme="light"] .theme-switching .section-workspace { animation: themeTileFloat .48s cubic-bezier(.2, .8, .2, 1) both; } :root[data-theme="light"] .theme-switching .section-tab:nth-child(2) { animation-delay: .06s; } :root[data-theme="light"] .theme-switching .section-tab:nth-child(3) { animation-delay: .12s; } :root[data-theme="light"] .theme-switching .section-tab:nth-child(4) { animation-delay: .18s; } :root[data-theme="light"] .theme-switching .section-tab:nth-child(5) { animation-delay: .24s; } :root[data-theme="light"] .theme-switching .section-workspace { animation-delay: .2s; } @media (prefers-reduced-motion: reduce) { :root[data-theme="light"] .theme-switching .launch-map, :root[data-theme="light"] .theme-switching .pulse-command-node, :root[data-theme="light"] .theme-switching .route-category, :root[data-theme="light"] .theme-switching .route-report-node, :root[data-theme="light"] .theme-switching .section-tab, :root[data-theme="light"] .theme-switching .section-workspace { animation: none; } } /* Light: the page headers are clean white-to-ice, not the warm/cool blended glass (which read as grey). Applies to hub, Pulse and Control Panel headers alike. */ :root[data-theme="light"] body > .topbar, :root[data-theme="light"] .pulse-sticky-header, :root[data-theme="light"] .cp-sticky-shell { background: linear-gradient(180deg, #ffffff 0%, #f6fbff 100%) !important; border-bottom: 1px solid rgba(7, 143, 197, .30) !important; box-shadow: 0 10px 28px rgba(20, 50, 90, .07) !important; animation: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } :root[data-theme="light"] body > .topbar::before, :root[data-theme="light"] .pulse-sticky-header::before, :root[data-theme="light"] .cp-sticky-shell::before { opacity: 0 !important; } :root[data-theme="light"] body > .topbar { position: relative; } :root[data-theme="light"] body > .topbar::after, :root[data-theme="light"] .pulse-sticky-header::after, :root[data-theme="light"] .cp-sticky-shell::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; pointer-events: none; opacity: 1 !important; background: linear-gradient(90deg, transparent 0%, #07b9ea 12%, #38bdf8 40%, #3178df 60%, #07b9ea 88%, transparent 100%) !important; box-shadow: 0 0 10px rgba(7, 185, 234, .85), 0 0 26px rgba(7, 185, 234, .45), 0 2px 18px rgba(49, 120, 223, .3) !important; animation: mcRailShine 11s ease-in-out infinite; } @keyframes mcRailShine { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.35); } } :root[data-theme="light"] .cp-sticky-shell .topbar { background: transparent !important; } /* Light: firmer digital frame. The four corner brackets sit OUTSIDE the box edge (drawn on a ::before that is inset by -9px), the way the original skin had them. */ :root[data-theme="light"] .launch-map, :root[data-theme="light"] .section-workspace, :root[data-theme="light"] .panel, :root[data-theme="light"] .global-panel, :root[data-theme="light"] .system-map-panel { position: relative; border: 1.5px solid var(--line-strong) !important; overflow: visible !important; /* the box clips its own decoration; the brackets sit outside it */ background-image: none !important; /* V20.14.353 -- the slate glass, not a white-to-ice gradient */ background: var(--mc-glass) !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .9), 0 14px 34px rgba(20, 50, 90, .10) !important; } :root[data-theme="light"] .launch-map::before, :root[data-theme="light"] .section-workspace::before, :root[data-theme="light"] .global-panel::before, :root[data-theme="light"] .system-map-panel::before { content: ""; position: absolute; inset: -2.5px; z-index: 0; pointer-events: none; border-radius: 8px; opacity: 1; mask-image: none !important; -webkit-mask-image: none !important; /* the box's own veil mask would clip the corners away */ /* V20.14.353 -- the brackets are the HUD's (--mc-frame, the slate cyan), not a hard-coded blue */ background: linear-gradient(var(--mc-frame), var(--mc-frame)), linear-gradient(var(--mc-frame), var(--mc-frame)), linear-gradient(var(--mc-frame), var(--mc-frame)), linear-gradient(var(--mc-frame), var(--mc-frame)), linear-gradient(var(--mc-frame), var(--mc-frame)), linear-gradient(var(--mc-frame), var(--mc-frame)), linear-gradient(var(--mc-frame), var(--mc-frame)), linear-gradient(var(--mc-frame), var(--mc-frame)); background-repeat: no-repeat; background-size: 30px 2.5px, 2.5px 30px, 30px 2.5px, 2.5px 30px, 30px 2.5px, 2.5px 30px, 30px 2.5px, 2.5px 30px; background-position: 0 0, 0 0, 100% 0, 100% 0, 0 100%, 0 100%, 100% 100%, 100% 100%; filter: drop-shadow(0 0 4px rgba(0, 126, 168, .30)); } :root[data-theme="light"] .section-workspace::before { inset: -2.5px; background-size: 24px 2.5px, 2.5px 24px, 24px 2.5px, 2.5px 24px, 24px 2.5px, 2.5px 24px, 24px 2.5px, 2.5px 24px; } /* ---------- 11. Login gateway ---------- */ .login-card { border-radius: 8px !important; padding: 40px 44px !important; } .login-card::before { background: linear-gradient(90deg, transparent, var(--cyan), var(--purple), transparent) !important; } .login-eyebrow { color: var(--gold) !important; text-shadow: var(--glow-gold); } .login-headline .accent { color: var(--cyan) !important; text-shadow: 0 0 24px rgba(0,229,255,.45); } .login-signal-strip { border-radius: 6px !important; } .login-signal b { color: var(--cyan) !important; } .login-btn { border-radius: 6px !important; } .mc-gateway { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin: 0 0 16px; } .mc-gateway span { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 6px; background: rgba(4, 10, 22, .5); font: 600 var(--fs-2xs) var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--text-dim); text-align: left; } :root[data-theme="light"] .mc-gateway span { background: #f6f9fd; } .mc-gateway span .hud-icon { width: 14px; height: 14px; color: var(--cyan); flex: none; filter: drop-shadow(0 0 5px rgba(0,229,255,.5)); } .mc-gateway span b { margin-left: auto; color: var(--green); text-shadow: var(--glow-green); } .ksa-caption b, .ksa-legend { font-family: var(--font-mono); } .hud-corner { opacity: .9 !important; box-shadow: none; } body > .theme-toggle { top: 46px !important; } /* ---------- 12. Control Panel ---------- */ .cp-sticky-shell { top: 34px !important; } .cp-sticky-shell .topbar { background: linear-gradient(180deg, rgba(5,10,22,.96), rgba(6,12,26,.9)) !important; border-bottom: 1px solid var(--line-strong) !important; backdrop-filter: blur(12px); } :root[data-theme="light"] .cp-sticky-shell .topbar { background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(244,248,253,.92)) !important; } .cp-sticky-shell .tabnav { border-radius: 0 !important; margin-bottom: 0 !important; border-left: 0 !important; border-right: 0 !important; } .mc-cp-tab { display: inline-flex !important; align-items: center; gap: 8px; border: 1px solid transparent !important; border-radius: 6px !important; font-family: var(--font-mono) !important; letter-spacing: .1em; } .mc-cp-tab.active, .cp-sticky-shell .tabnav button.active { color: var(--cyan) !important; background: var(--cyan-soft) !important; border-color: var(--cyan-line) !important; box-shadow: var(--glow-cyan), inset 0 -2px 0 var(--cyan) !important; } .mc-cp-tab .mc-tab-icon { width: 15px; height: 15px; } .health-pill.ok { border-color: var(--green-line) !important; box-shadow: var(--glow-green) !important; } .health-pill .hp-dot { box-shadow: var(--glow-green); } .tb-title { background: linear-gradient(90deg, var(--text-hi) 20%, var(--cyan) 80%) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent; letter-spacing: .14em !important; } .status-chip, .pill { border-radius: 4px !important; font-family: var(--font-mono) !important; } .system-node { border-radius: 6px !important; border: 1px solid var(--line) !important; background: var(--mc-glass-hi) !important; } .system-node-state.online, .system-node .online { text-shadow: var(--glow-green); } .btn.primary, .pui-btn.primary { box-shadow: var(--glow-cyan-strong) !important; } /* ---------- 13. Shared controls ---------- */ .pui-btn { border-radius: 6px; font-family: var(--font-mono); letter-spacing: .1em; } .pui-btn.primary { box-shadow: var(--glow-cyan); } .pui-status.ok, .pui-status.live, .pui-status.success { box-shadow: var(--glow-green); } .pui-status.warn, .pui-status.warning, .pui-status.stale { box-shadow: var(--glow-gold); } .pui-status.error, .pui-status.danger, .pui-status.failed { box-shadow: var(--glow-red); } .pui-modal-card, .v46-chart-card { border-radius: 8px !important; border: 1px solid var(--cyan-line) !important; box-shadow: var(--shadow-lg), var(--glow-cyan) !important; } .pui-toast { border-radius: 6px; } ::selection { background: var(--cyan); color: var(--btn-primary-text); } ::-webkit-scrollbar-thumb { background: rgba(0, 229, 255, .25) !important; border-radius: 6px; } ::-webkit-scrollbar-thumb:hover { background: rgba(0, 229, 255, .45) !important; } ::-webkit-scrollbar-track { background: transparent !important; } /* ---------- 14. Boot sequence ---------- */ html.mc-booting #tabContent .kpi-card, html.mc-booting #tabContent .panel, html.mc-booting .v46-brief, html.mc-booting .launch-map, html.mc-booting .login-card, html.mc-booting #tabBody > * { animation: mcBoot .7s var(--ease-out) both; } html.mc-booting #tabContent .kpi-card:nth-child(2) { animation-delay: .06s; } html.mc-booting #tabContent .kpi-card:nth-child(3) { animation-delay: .12s; } html.mc-booting #tabContent .kpi-card:nth-child(4) { animation-delay: .18s; } html.mc-booting #tabContent .kpi-card:nth-child(5) { animation-delay: .24s; } html.mc-booting #tabContent .kpi-card:nth-child(6) { animation-delay: .3s; } html.mc-booting .v46-brief { animation-delay: .3s; } html.mc-booting #tabContent .panel:nth-of-type(1) { animation-delay: .38s; } html.mc-booting #tabContent .panel:nth-of-type(2) { animation-delay: .46s; } html.mc-booting #tabContent .panel:nth-of-type(3) { animation-delay: .54s; } @keyframes mcBoot { from { opacity: 0; transform: translateY(10px); filter: brightness(1.6) saturate(1.4); } 60% { filter: brightness(1.15); } to { opacity: 1; transform: none; filter: none; } } /* ---------- 15. Motion discipline ---------- */ @media (prefers-reduced-motion: reduce) { .mc-sig-trace, .mc-sig-scan, .mc-led, .pulse-badge::before { animation: none !important; } html.mc-booting * { animation: none !important; } } @media (max-width: 760px) { html.mc-has-telemetry body { padding-top: 32px; } /* V20.14.193 -- 0 here too. This is the third file setting the deck's sticky offset and the one that bites hardest: at 760px and below the deck is tall enough that the offset engages, which is what put 40px of header over the first section heading. See pulse-v151-user-revision.css for why the offset was clearance the scroll container had already provided. */ /* V20.14.200 -- the strip is fixed at every width, so the deck clears it here too, with the same variable the rest of the portal uses. */ .pulse-sticky-header { top: var(--mc-bar-h, 0px) !important; } .mc-gateway { grid-template-columns: 1fr; } } @media (max-width: 480px) { .mc-tel-item[title="Riyadh time"] { display: none; } .mc-tel-brand { font-size: 11px; } } /* ---------- 11. Pulse guide (light theme) ---------- */ /* Both dashboard CTAs keep the dark theme's gold identity in light mode. */ :root[data-theme="light"] .landing-cta { background: linear-gradient(180deg, #ffd75e, #f5b71f) !important; color: #23180a !important; border: 1px solid rgba(180, 128, 8, .45) !important; box-shadow: 0 6px 18px rgba(214, 158, 20, .28) !important; } :root[data-theme="light"] .landing-cta:hover { box-shadow: 0 10px 26px rgba(214, 158, 20, .38) !important; } /* Term-chip tooltips follow the light surface instead of staying deep navy. */ :root[data-theme="light"] .pui-tooltip { background: #ffffff; color: #12314f; border-color: rgba(7, 143, 197, .45); box-shadow: 0 12px 26px rgba(20, 50, 90, .16); } :root[data-theme="light"] .guide-meta-card, :root[data-theme="light"] .landing-card { background: linear-gradient(150deg, #ffffff, #f3f9fe) !important; border-color: rgba(7, 143, 197, .28) !important; } :root[data-theme="light"] .landing-card:hover, :root[data-theme="light"] .guide-meta-card:hover { border-color: rgba(7, 143, 197, .6) !important; box-shadow: 0 12px 26px rgba(20, 50, 90, .12), 0 0 18px rgba(7, 143, 197, .12) !important; } /* ---------- 12. Header chrome states (V20.14.50) ---------- */ /* Exceptions inbox: quiet when clear, red and pulsing when it holds items. */ .icon-btn.has-exceptions, #v38ExceptionsBtn.has-exceptions, .header-icon.has-exceptions { color: #ff6b6b !important; border-color: rgba(255, 107, 107, .65) !important; background: rgba(255, 107, 107, .12) !important; animation: mcAlertPulse 2.4s ease-in-out infinite; } @keyframes mcAlertPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 107, 107, .0), 0 0 10px rgba(255, 107, 107, .25); } 50% { box-shadow: 0 0 0 4px rgba(255, 107, 107, .10), 0 0 20px rgba(255, 107, 107, .55); } } @media (prefers-reduced-motion: reduce) { .icon-btn.has-exceptions, #v38ExceptionsBtn.has-exceptions, .header-icon.has-exceptions { animation: none; } } /* Suggestion (lightbulb): same family as its neighbours, with a slow glow so it invites a click instead of looking like a stray colour. */ .v21-suggest-btn, #v21SuggestBtn, .icon-btn.suggest-btn { position: relative; color: var(--text-mid) !important; } .v21-suggest-btn svg, #v21SuggestBtn svg, .icon-btn.suggest-btn svg { transition: transform .25s cubic-bezier(.2,.8,.2,1), filter .25s ease; } .v21-suggest-btn:hover, #v21SuggestBtn:hover, .icon-btn.suggest-btn:hover { color: var(--gold) !important; border-color: rgba(255, 201, 60, .6) !important; } .v21-suggest-btn:hover svg, #v21SuggestBtn:hover svg, .icon-btn.suggest-btn:hover svg { transform: translateY(-1px) scale(1.08); filter: drop-shadow(0 0 8px rgba(255, 201, 60, .7)); } .v21-suggest-btn::after, #v21SuggestBtn::after, .icon-btn.suggest-btn::after { content: ""; position: absolute; inset: -2px; border-radius: inherit; pointer-events: none; box-shadow: 0 0 12px rgba(255, 201, 60, .0); animation: mcSuggestGlow 4.2s ease-in-out infinite; } @keyframes mcSuggestGlow { 0%, 100% { box-shadow: 0 0 0 rgba(255, 201, 60, 0); } 50% { box-shadow: 0 0 14px rgba(255, 201, 60, .35); } } @media (prefers-reduced-motion: reduce) { .v21-suggest-btn::after, #v21SuggestBtn::after, .icon-btn.suggest-btn::after { animation: none; } } /* WHAT-IF: a travelling light around the button rather than a flat halo. */ .v21-scenario-pulse, .v21-scenario-btn, #v21ScenarioBtn { position: relative; overflow: hidden; animation: none !important; } .v21-scenario-pulse::after, .v21-scenario-btn::after, #v21ScenarioBtn::after { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.4px; pointer-events: none; background: conic-gradient(from var(--mc-ang, 0deg), transparent 0deg, transparent 250deg, rgba(255, 201, 60, .75) 310deg, #fff2c8 336deg, transparent 356deg); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; animation: mcBorderSpin 5.2s linear infinite; } .v21-scenario-pulse:hover, .v21-scenario-btn:hover, #v21ScenarioBtn:hover { color: var(--gold) !important; box-shadow: 0 0 18px rgba(255, 201, 60, .35) !important; } .v21-scenario-pulse:hover::after, .v21-scenario-btn:hover::after, #v21ScenarioBtn:hover::after { animation-duration: 1.6s; } @media (prefers-reduced-motion: reduce) { .v21-scenario-pulse::after, .v21-scenario-btn::after, #v21ScenarioBtn::after { animation: none; } } /* ---------- 13. Agent, brief, KPI deltas (V20.14.50) ---------- */ /* PULSE AGENT sits in the brand rail; at 34 px it read as another small icon. Larger, with a slow orbit ring and a breathing core, so it invites a click. */ .qa-fab { width: 52px !important; min-width: 52px !important; height: 52px !important; padding: 0 !important; position: relative; overflow: visible !important; border: 1px solid var(--cyan-line) !important; border-radius: 10px !important; background: radial-gradient(120% 130% at 50% 120%, rgba(0, 229, 255, .22), var(--cyan-soft) 70%) !important; box-shadow: 0 0 0 1px rgba(0, 229, 255, .18), 0 0 20px rgba(0, 229, 255, .28) !important; transition: transform .22s cubic-bezier(.2,.8,.2,1), box-shadow .22s ease, border-color .22s ease; } .qa-fab::after { content: ""; position: absolute; inset: -5px; border-radius: 13px; pointer-events: none; border: 1px dashed rgba(0, 229, 255, .45); animation: mcAgentOrbit 9s linear infinite; } .qa-fab .qa-fab-orb, .qa-fab svg { width: 34px !important; height: 34px !important; } .qa-fab:hover { transform: translateY(-2px) scale(1.04); border-color: var(--cyan) !important; box-shadow: 0 0 0 1px var(--cyan), 0 0 30px rgba(0, 229, 255, .55) !important; } .qa-fab:hover::after { animation-duration: 3.4s; border-color: rgba(0, 229, 255, .8); } .qa-fab:active { transform: translateY(0) scale(.97); } @keyframes mcAgentOrbit { to { transform: rotate(360deg); } } @keyframes mcAgentBreathe { 0%, 100% { transform: scale(1); filter: drop-shadow(0 0 4px rgba(0, 229, 255, .35)); } 50% { transform: scale(1.07); filter: drop-shadow(0 0 10px rgba(0, 229, 255, .75)); } } @media (prefers-reduced-motion: reduce) { .qa-fab::after, .qa-fab .qa-fab-orb, .qa-fab svg { animation: none !important; } } /* The brief carries the one paragraph that explains the whole screen, and it was losing the competition with everything around it. Give it its own frame. */ .v46-brief { border: 1px solid var(--cyan-line) !important; background: linear-gradient(140deg, rgba(0, 229, 255, .07), var(--mc-glass) 45%) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 0 0 1px rgba(0, 229, 255, .10), 0 14px 34px rgba(0, 0, 0, .32) !important; position: relative; overflow: hidden; } .v46-brief::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: linear-gradient(180deg, var(--cyan), rgba(157, 139, 255, .8) 60%, transparent); box-shadow: 0 0 14px rgba(0, 229, 255, .55); } .v46-brief .v46-brief-head { padding-left: 18px !important; } :root[data-theme="light"] .v46-brief { background: linear-gradient(140deg, #eaf8ff, #ffffff 55%) !important; border-color: rgba(7, 143, 197, .45) !important; box-shadow: 0 0 0 1px rgba(7, 143, 197, .10), 0 12px 28px rgba(20, 50, 90, .12) !important; } /* KPI delta (V20.14.51): a directional figure with a magnitude track under it. The pill shape read as a label; this reads as a measurement -- the arrow says direction, the number says how much, and the bar gives it a size at a glance (|percent| against a 50% ceiling, so a 3% move and a 40% move look different). */ .kpi-foot .kdelta { display: inline-grid; grid-template-columns: auto auto; grid-auto-rows: auto; gap: 0 7px; align-items: center; padding: 0; border: 0; background: none; border-radius: 0; font-variant-numeric: tabular-nums; } .kpi-foot .kdelta i { grid-row: 1; font-style: normal; font-size: 11px; line-height: 1; opacity: .95; } .kpi-foot .kdelta b { grid-row: 1; font: 700 var(--fs-xl) var(--font-display); letter-spacing: -.01em; line-height: 1.05; } .kpi-foot .kdelta .kdelta-track { grid-row: 2; grid-column: 1 / -1; margin-top: 5px; height: 3px; width: 100%; min-width: 74px; border-radius: 3px; background: var(--line); overflow: hidden; } .kpi-foot .kdelta .kdelta-track i { display: block; height: 100%; border-radius: 3px; background: currentColor; box-shadow: 0 0 8px currentColor; font-size: 0; } .kpi-card.tone-pos .kdelta { color: var(--green); } .kpi-card.tone-neg .kdelta { color: #ff7a7a; } .kpi-card.tone-neutral .kdelta { color: var(--text-dim); } .kpi-card.tone-neutral .kdelta .kdelta-track { display: none; } /* Two-point comparison mark (used where no monthly series exists yet). */ .kspark.kcompare .kcompare-base { stroke: var(--line); stroke-width: 1; stroke-dasharray: 2 3; } .kspark.kcompare .kcompare-line { stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; } .kspark.kcompare .kcompare-dot { fill: var(--bg-panel); stroke: currentColor; stroke-width: 1.6; } .kspark.kcompare .kcompare-dot.to { fill: currentColor; } .kspark.kcompare.pos { color: var(--green); } .kspark.kcompare.neg { color: #ff7a7a; } /* ---------- 14. Header icon rail (V20.14.51) ---------- */ /* Every control in the rail shares one box so nothing sits a pixel proud of its neighbours (the profile button and WHAT-IF each used to). */ #headerIconGroup { display: flex; align-items: center; gap: 8px; } #headerIconGroup > * { align-self: center; } #headerIconGroup .icon-btn, #headerIconGroup .v21-icon-btn, #headerIconGroup .profile-menu > .icon-btn { width: 34px !important; height: 34px !important; min-height: 34px; padding: 0 !important; display: inline-flex !important; align-items: center; justify-content: center; box-sizing: border-box; } #headerIconGroup .v21-btn:not(.v21-icon-btn) { height: 34px !important; min-height: 34px; display: inline-flex !important; align-items: center; box-sizing: border-box; } #headerIconGroup .profile-menu { display: inline-flex; align-items: center; } #headerIconGroup .icon-btn svg, #headerIconGroup .v21-icon-btn svg { width: 17px; height: 17px; } #headerIconGroup .profile-avatar { width: 100%; height: 100%; } /* ---------- 15. AI orb (V20.14.51) ---------- */ /* The agent reads as an assistant, not a radar: a soft core inside three gradient rings that drift at different speeds. */ .ai-orb { display: grid; place-items: center; } .ai-orb svg { overflow: visible; } .ai-orb-ring { transform-box: fill-box; transform-origin: center; } .ai-orb-ring.a { animation: aiOrbSpinA 7s linear infinite; } .ai-orb-ring.b { animation: aiOrbSpinB 5.2s linear infinite; } .ai-orb-ring.c { animation: aiOrbSpinA 9.5s linear infinite reverse; } .ai-orb-core { transform-box: fill-box; transform-origin: center; animation: aiOrbCore 2.6s ease-in-out infinite; } .ai-orb-halo { transform-box: fill-box; transform-origin: center; animation: aiOrbHalo 3.4s ease-in-out infinite; } @keyframes aiOrbSpinA { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes aiOrbSpinB { from { transform: rotate(60deg); } to { transform: rotate(420deg); } } @keyframes aiOrbCore { 0%, 100% { transform: scale(.9); opacity: .85; } 50% { transform: scale(1.12); opacity: 1; } } @keyframes aiOrbHalo { 0%, 100% { transform: scale(.94); opacity: .35; } 50% { transform: scale(1.08); opacity: .6; } } .qa-fab:hover .ai-orb-ring.a { animation-duration: 2.6s; } .qa-fab:hover .ai-orb-ring.b { animation-duration: 1.9s; } @media (prefers-reduced-motion: reduce) { .ai-orb-ring, .ai-orb-core, .ai-orb-halo { animation: none !important; } } /* Agent drawer: fewer competing rows before the first question. */ .qa-options { margin: 0 14px 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--mc-glass); } .qa-options > summary { list-style: none; cursor: pointer; padding: 7px 11px; font: 600 var(--fs-2xs) var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--text-dim); } .qa-options > summary::-webkit-details-marker { display: none; } .qa-options > summary::after { content: "▾"; float: right; opacity: .7; } .qa-options[open] > summary::after { content: "▴"; } .qa-options .qa-answer-style, .qa-options .qa-scope { margin: 0 11px 10px; } .qa-welcome { color: var(--text-mid) !important; font-size: var(--fs-sm) !important; } .qa-head-actions .qa-head-btn { font-size: var(--fs-2xs); } /* Ambient spotlight, portal-wide (V20.14.51). The guide had it; every page now carries the same soft wash so the surfaces sit in one lit room. */ /* The wash drifts on a CHILD that the viewport-sized parent clips. Animating the fixed layer itself (translate3d(1.5%, 1%) scale(1.04)) pushed roughly twenty pixels past the right edge, and Chrome counts that toward the document's scrollable width -- so a decorative background quietly gave every page a few pixels of horizontal scroll that came and went with the drift. */ .mc-spotlight { position: fixed; inset: 0; z-index: -2; pointer-events: none; overflow: hidden; } .mc-spotlight::before { content: ""; position: absolute; inset: -6%; background: radial-gradient(760px 520px at 14% 4%, rgba(0, 229, 255, .13), transparent 62%), radial-gradient(680px 480px at 88% 10%, rgba(139, 92, 246, .11), transparent 60%), radial-gradient(900px 560px at 52% 104%, rgba(0, 229, 255, .09), transparent 62%); animation: mcSpotDrift 26s ease-in-out infinite alternate; } :root[data-theme="light"] .mc-spotlight::before { background: radial-gradient(760px 520px at 14% 4%, rgba(7, 143, 197, .10), transparent 62%), radial-gradient(680px 480px at 88% 10%, rgba(92, 182, 246, .07), transparent 60%), radial-gradient(900px 560px at 52% 104%, rgba(7, 143, 197, .07), transparent 62%); } @keyframes mcSpotDrift { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(1.5%, 1%, 0) scale(1.04); } } @media (prefers-reduced-motion: reduce) { .mc-spotlight::before { animation: none; } } /* Selected brand logo keeps its own artwork -- no drop shadow on it. */ .brand-btn.logo-only.active .brand-logo { filter: none !important; } :root[data-theme="light"] .brand-btn.logo-only.active .brand-logo { filter: none !important; } /* Guide digest follows the light theme instead of staying dark, and is framed like the section it is: what moved since last month. */ :root[data-theme="light"] .guide-digest-card { background: linear-gradient(150deg, #ffffff, #f2f9fe) !important; border-color: rgba(7, 143, 197, .32) !important; } :root[data-theme="light"] .guide-digest-value { color: #10294a !important; } :root[data-theme="light"] .guide-digest-body, :root[data-theme="light"] .guide-digest-note { color: #4a6485 !important; } .guide-digest-card { border-left: 3px solid var(--cyan) !important; } :root[data-theme="light"] .guide-digest-card { border-left-color: #078fc5 !important; } /* ============================================================ 16. LIGHT-THEME PARITY PASS (V20.14.51) Light mode had drifted into being a paler copy of dark rather than its own finished surface: the selected tab and the active filter were barely distinguishable from their neighbours, the cards had lost the corner brackets that give every other box its frame, and the brackets that DID survive were drawn at a different size than the same box wears in dark. ============================================================ */ /* --- 16a. Corner brackets: one geometry for both themes --- Dark drew 14px x 1px marks just inside the box edge; light drew 24-30px x 2.5px marks just outside it. Same box, visibly bigger frame in light -- which is exactly what it looked like on Reporting Categories. Both themes now use the same 22px x 2px mark, so switching theme changes the colour of the frame and nothing else. */ .mc-hud, .panel, .kpi-card, .v46-brief, .launch-map, .login-card, .section-workspace, .global-panel, .system-map-panel { background-size: 22px 2px, 2px 22px, 22px 2px, 2px 22px, 22px 2px, 2px 22px, 22px 2px, 2px 22px, 100% 100% !important; } :root[data-theme="light"] .launch-map::before, :root[data-theme="light"] .section-workspace::before, :root[data-theme="light"] .global-panel::before, :root[data-theme="light"] .system-map-panel::before { background-size: 22px 2px, 2px 22px, 22px 2px, 2px 22px, 22px 2px, 2px 22px, 22px 2px, 2px 22px; } /* --- 16b. Cards keep their brackets in light --- The light "firmer digital frame" rule sets background-image:none on .panel so the outside ::before brackets are the only frame -- but .panel is not in the ::before rule, so it ended up with no brackets at all, and .kpi-card / .v46-brief / .filterbar were left with the 1px dark-theme marks that are invisible on white. Drawn here as backgrounds (the same technique dark uses) because ::before and ::after are both already spoken for on these elements: the accent rule and the cursor spotlight. */ :root[data-theme="light"] .panel, :root[data-theme="light"] .kpi-card, :root[data-theme="light"] .v46-brief, :root[data-theme="light"] .filterbar { /* V20.14.353 -- the HUD's brackets and glass in the slate tokens, not a hard-coded blue on white */ background-image: linear-gradient(var(--mc-frame), var(--mc-frame)), linear-gradient(var(--mc-frame), var(--mc-frame)), linear-gradient(var(--mc-frame), var(--mc-frame)), linear-gradient(var(--mc-frame), var(--mc-frame)), linear-gradient(var(--mc-frame), var(--mc-frame)), linear-gradient(var(--mc-frame), var(--mc-frame)), linear-gradient(var(--mc-frame), var(--mc-frame)), linear-gradient(var(--mc-frame), var(--mc-frame)), var(--mc-glass) !important; background-repeat: no-repeat !important; background-size: 22px 2px, 2px 22px, 22px 2px, 2px 22px, 22px 2px, 2px 22px, 22px 2px, 2px 22px, 100% 100% !important; background-position: 0 0, 0 0, 100% 0, 100% 0, 0 100%, 0 100%, 100% 100%, 100% 100%, 0 0 !important; border-color: var(--line-strong) !important; } /* .panel was switched to overflow:visible in light so a set of brackets drawn OUTSIDE the box on a ::before would not be clipped away -- but no such rule was ever written for .panel, so all it did was let a panel grow to its content. On the Stores tab that meant the 1,786px transaction table dragged its panel to 1,846px and gave the whole page a horizontal scrollbar in light mode only. The brackets above are backgrounds drawn inside the border box, so the panel can clip again exactly as it does in dark. */ :root[data-theme="light"] .panel { overflow: hidden !important; } /* --- 16c. The selected tab actually looks selected --- Section 6 paints the active tab with --cyan-soft and a cyan text-shadow. On the dark surface that is a lit panel; on white it is a pale wash barely a shade off its neighbours, and the glow only softens the text further. */ :root[data-theme="light"] #tabNav .tab-btn.active { color: #ffffff !important; background: linear-gradient(135deg, #0b86bb, #0a6f9e) !important; border-color: #076b98 !important; box-shadow: 0 6px 16px rgba(7, 107, 152, .28), inset 0 1px rgba(255, 255, 255, .25) !important; text-shadow: none !important; } :root[data-theme="light"] #tabNav .tab-btn.active .mc-tab-icon { opacity: 1; filter: none; } :root[data-theme="light"] #tabNav .tab-btn:hover:not(.active) { color: #0b4f7b !important; background: #e7f5fd !important; border-color: rgba(7, 143, 197, .35) !important; } /* --- 16d. The active filter reads as set, not merely focused --- .is-active previously differed from an untouched control only by a 2px ring in --cyan-soft, which on white is almost the page colour. A set filter is a statement about what the numbers on screen mean, so it gets a tinted field, a firm border and bolder text. */ :root[data-theme="light"] select.fselect.is-active, :root[data-theme="light"] .mc-select.is-active select.fselect { color: #06405e !important; font-weight: 700 !important; background-color: #e4f5fe !important; border-color: #0b86bb !important; box-shadow: 0 0 0 2px rgba(11, 134, 187, .22), inset 0 1px #ffffff !important; } /* --- 16e. No black flash when a filter list opens --- The native