/* ============================================================================ edge-preview.css — the four Edge Lab preview panels on the public landing page, as live markup rather than screenshots. DRIFT CEILING. This file is a *replication* of the Edge Lab "instrument skin" block that lives in static/css/neo-os.css (scoped there to body.edge-lab-app). neo-os.css is 471 KB raw / 95 KB gzipped and is deliberately NOT loaded here — pulling it onto the landing page to style four preview panels would roughly quadruple this page's CSS and cost LCP on the page search cares about most. The price of that decision is that the token values below are copies, and copies drift. To re-check them against the running app: 1. scratchpad/panel_reference.md — the captured DOM, the computed-style tables and the verbatim on-screen data these panels were built from. 2. scripts/edge_lab_capture_frames.js — re-captures the frames. Read the tokens off `body.edge-lab-app`, never off `:root`: every --edge-* token is defined on , and getComputedStyle(documentElement) silently returns the pre-skin palette. Everything is scoped under .edge-preview so nothing can leak into the rest of the landing page. The panels are decorative previews: the root sets pointer-events:none and the markup sets aria-hidden, so they behave exactly like the they replaced — no fake navigation, no focus traps. ========================================================================== */ .edge-preview { /* --- palette, copied from the skin block on body.edge-lab-app --- */ --ep-bg: #081426; --ep-text: #dceaf4; --ep-cell: #c6d5df; --ep-muted: #8397a9; --ep-faint: #7b91a5; --ep-line: rgba(186, 230, 253, .14); --ep-line-strong: rgba(186, 230, 253, .26); --ep-track: rgba(186, 230, 253, .12); --ep-surface-inset: #091625; --ep-accent: #38bdf8; --ep-accent-bg: rgba(56, 189, 248, .08); --ep-accent-faint: rgba(56, 189, 248, .30); --ep-accent-soft: rgba(56, 189, 248, .62); --ep-pos: #6fbf9a; /* sage — the skin's own P&L pair, not :root's */ --ep-neg: #ff8066; /* coral — deliberately not emerald/rose. Do not fix */ --ep-radius: 5px; --ep-radius-sm: 3px; --ep-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace; --ep-sans: 'DM Sans', system-ui, -apple-system, sans-serif; /* --- type ramp and spacing. Only these are re-declared per breakpoint, so the panels scale without a calc() on every rule. Base values are the live measurements taken inside the app's 730px content column. --- */ --ep-fs-label: 11px; /* tile label, chip, pips, badge pill */ --ep-fs-eyebrow: 12px; /* panel eyebrow, table th, tile sub */ --ep-fs-cell: 13px; /* table td, prose */ --ep-fs-title: 15px; /* card title */ --ep-fs-value: 22.5px; /* tile value */ --ep-fs-effect: 32px; /* the big finding effect */ --ep-pad: 14px; --ep-gap: 12px; container-type: inline-size; display: block; padding: var(--ep-pad); background: var(--ep-bg); color: var(--ep-text); font-family: var(--ep-sans); font-size: var(--ep-fs-cell); line-height: 1.45; text-align: left; font-variant-numeric: tabular-nums; /* A preview, not the app. Nothing inside is interactive. */ pointer-events: none; -webkit-user-select: none; user-select: none; } /* The hero plate's 90px bottom fade exists because the 840px-wide capture used to bleed past the frame. Live markup does not bleed, so the fade would just dim the panel's own footer. Guarded on .edge-preview: it cannot affect a .shot-plate that still holds an image. */ .shot-plate:has(.edge-preview)::after { content: none; } @container (max-width: 620px) { .edge-preview { --ep-fs-label: 10px; --ep-fs-eyebrow: 11px; --ep-fs-cell: 12px; --ep-fs-title: 14px; --ep-fs-value: 19px; --ep-fs-effect: 27px; --ep-pad: 12px; --ep-gap: 10px; } } @container (max-width: 440px) { .edge-preview { --ep-fs-label: 8.5px; --ep-fs-eyebrow: 9px; --ep-fs-cell: 10px; --ep-fs-title: 12px; --ep-fs-value: 15px; --ep-fs-effect: 21px; --ep-pad: 9px; --ep-gap: 7px; } } .edge-preview *, .edge-preview *::before, .edge-preview *::after { box-sizing: border-box; } .edge-preview p, .edge-preview h2, .edge-preview h3, .edge-preview dl, .edge-preview dd, .edge-preview dt { margin: 0; } /* ---------------------------------------------------------------- chrome -- One recipe for every panel, tile and table. The inset top highlight is what makes these read as machined metal instead of flat cards; it is the single most missed line when this block is re-copied. */ .ep-panel, .ep-tile, .ep-table-wrap, .ep-card { background-color: rgba(8, 20, 38, .88); background-image: linear-gradient(rgba(255, 255, 255, .02), rgba(255, 255, 255, .02)); border: 1px solid var(--ep-line); border-radius: var(--ep-radius); box-shadow: inset 0 1px 0 0 rgba(220, 234, 244, .05), 0 1px 3px 0 rgba(2, 6, 15, .28); } .ep-eyebrow { font-family: var(--ep-mono); font-size: var(--ep-fs-eyebrow); font-weight: 500; line-height: 1.2; letter-spacing: 1.2px; text-transform: uppercase; color: var(--ep-faint); } /* Sublinks are dotted-underlined in the app and inert here. They are sentence case on their own (the "Cost so far" / "See the N trades" pattern); the uppercase mono treatment belongs to .ep-badge, which wraps one of them. */ .ep-sublink { color: var(--ep-text); text-decoration: underline dotted; text-underline-offset: 3px; } /* ========================================================== 1. dashboard == */ .ep-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: var(--ep-gap); } @container (max-width: 440px) { .ep-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .ep-tile { position: relative; display: flex; flex-direction: column; padding: calc(var(--ep-pad) * .8) var(--ep-pad) calc(var(--ep-pad) * .75); border-color: var(--ep-line-strong); overflow: hidden; } /* The lead tile carries a 2px accent underline at its bottom edge. */ .ep-tile--lead::after { content: ''; position: absolute; inset: auto 0 0 0; height: 2px; background: linear-gradient(90deg, var(--ep-accent), transparent); } /* The drag grip. The app draws it with a Font Awesome glyph; Font Awesome is not loaded on this page and is not worth loading for six decorative marks, so the 2x3 dot grid is drawn in CSS instead. */ .ep-tile__grip { position: absolute; top: calc(var(--ep-pad) * .7); right: calc(var(--ep-pad) * .6); width: 6px; height: 9px; opacity: .5; color: var(--ep-faint); background-image: radial-gradient(circle at 50% 50%, currentColor .9px, transparent 1.1px); background-size: 3px 3px; } .ep-tile__label { display: flex; align-items: center; gap: .5em; padding-right: 1.6em; margin-bottom: 1.6px; font-family: var(--ep-mono); font-size: var(--ep-fs-label); font-weight: 500; line-height: 1.2; letter-spacing: 1.1px; text-transform: uppercase; color: var(--ep-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ep-tile__label i { flex: 0 0 auto; font-size: .95em; } .ep-tile__value { margin-top: .36em; font-family: var(--ep-mono); font-size: var(--ep-fs-value); font-weight: 500; line-height: 1.15; letter-spacing: -.02em; color: var(--ep-text); } .ep-tile__value--pos { color: var(--ep-pos); } .ep-tile__value--neg { color: var(--ep-neg); } .ep-tile__sub { padding-top: .5em; font-family: var(--ep-mono); font-size: var(--ep-fs-eyebrow); font-weight: 500; line-height: 1.4; letter-spacing: .06em; color: var(--ep-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ep-curve { display: flex; flex-direction: column; margin-top: var(--ep-gap); padding: var(--ep-pad) calc(var(--ep-pad) * 1.05); } .ep-curve__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 16px; } .ep-curve__svg { display: block; width: 100%; height: auto; margin-top: .6em; } .ep-curve__grid { stroke: var(--ep-line); stroke-width: 1; } .ep-curve__axis { fill: var(--ep-muted); font-family: var(--ep-mono); font-size: 11px; } .ep-curve__line { fill: none; stroke: var(--ep-accent); stroke-width: 2; stroke-linejoin: round; } .ep-curve__dot { fill: var(--ep-accent); stroke: #0f172a; stroke-width: 2; } .ep-curve__foot { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .5em 1.2em; margin-top: auto; padding-top: .8em; font-size: var(--ep-fs-eyebrow); font-weight: 600; color: var(--ep-accent); } /* ============================================================= 2. trades == */ .ep-filters { display: flex; align-items: center; gap: .5em; margin-bottom: calc(var(--ep-gap) * .8); padding: .3em .2em; font-size: var(--ep-fs-cell); font-weight: 500; color: var(--ep-cell); } .ep-filters svg { width: .6em; height: .6em; display: block; } .ep-count { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: var(--ep-gap); font-size: var(--ep-fs-cell); color: var(--ep-muted); } .ep-btn { display: inline-block; padding: .45em 1em; border: 1px solid var(--ep-line-strong); border-radius: 6px; background: rgba(30, 41, 59, .6); color: var(--ep-cell); font-size: var(--ep-fs-eyebrow); font-weight: 600; white-space: nowrap; } .ep-btn--primary { border-color: var(--ep-accent-faint); background: rgba(56, 189, 248, .2); color: #7dd3fc; } .ep-table-wrap { overflow: hidden; } /* The app scrolls this table horizontally (1008px of content in a 662px box). A preview cannot be scrolled, so the columns are proportioned to fit instead — the ratios are the app's own rendered widths. Fixed layout is what stops the last column being sheared off, which is exactly how the stale screenshot lost the Journal column. */ .ep-table { width: 100%; table-layout: fixed; border-collapse: collapse; font-variant-numeric: tabular-nums; } .ep-table th { padding: .8em 1em; background: rgba(15, 23, 42, .92); border-bottom: 1px solid rgba(148, 190, 220, .1); font-family: var(--ep-mono); font-size: var(--ep-fs-eyebrow); font-weight: 500; line-height: 1.2; letter-spacing: .24px; text-transform: uppercase; color: #7b91a5; text-align: left; vertical-align: top; /* Hungarian header words (SZIMBÓLUM, MEGBÍZÁSOK) are longer than the English ones and have no break opportunity in them. */ overflow-wrap: anywhere; } .ep-table td { padding: .9em 1em; border-bottom: 1px solid rgba(148, 190, 220, .1); font-family: var(--ep-mono); font-size: var(--ep-fs-cell); font-weight: 400; line-height: 1.43; letter-spacing: .26px; color: var(--ep-cell); vertical-align: top; overflow-wrap: anywhere; } .ep-table tr:last-child td { border-bottom: 0; } .ep-table .ep-num { text-align: right; } .ep-table .ep-sym { font-weight: 500; color: var(--ep-text); } .ep-money { font-weight: 500; } .ep-money--pos { color: var(--ep-pos); } .ep-money--neg { color: var(--ep-neg); } .ep-side { display: inline-block; padding: 2px 6px; border: 1px solid; border-radius: 4px; font-family: var(--ep-mono); font-size: var(--ep-fs-eyebrow); line-height: 1.35; letter-spacing: .26px; } .ep-side--buy { border-color: rgba(16, 185, 129, .4); background: rgba(16, 185, 129, .1); color: #6ee7b7; } .ep-side--sell { border-color: rgba(244, 63, 94, .4); background: rgba(244, 63, 94, .1); color: #fda4af; } /* Rows 6-8 exist so the panel keeps its height once the narrow layout drops columns and the remaining rows get shorter. They are real trades from the same account, not filler. */ .ep-table .ep-row-extra { display: none; } /* Below the app's own `lg` breakpoint the trade table drops these columns; the preview does the same rather than inventing a horizontal scrollbar. */ @container (max-width: 620px) { .ep-table .ep-col-lg { display: none; } .ep-table .ep-row-extra { display: table-row; } } @container (max-width: 440px) { .ep-table .ep-col-sm { display: none; } .ep-table th, .ep-table td { padding: .7em .55em; } /* Every cell in this column reads "—" or "Unavailable"; at 360px the space is worth more to the two figures being compared. The footer note that refers to it goes with it. */ .ep-table .ep-col-diff, .ep-figures + .ep-foot, .ep-table .ep-row-recon { display: none; } } /* ===================================================== 3. reconciliation == */ .ep-verdict { padding: var(--ep-pad); border: 1px solid rgba(245, 158, 11, .3); border-radius: 12px; background: rgba(245, 158, 11, .05); } .ep-verdict__head { display: flex; flex-wrap: wrap; align-items: center; gap: .5em 1em; } .ep-verdict__prose { margin-top: .6em; font-size: var(--ep-fs-cell); color: var(--ep-cell); } .ep-state { display: inline-flex; align-items: center; padding: 2px 8px; border: 1px solid rgba(245, 158, 11, .4); border-radius: 4px; background: rgba(245, 158, 11, .1); color: #fcd34d; font-size: var(--ep-fs-eyebrow); font-weight: 500; } .ep-meta { font-size: var(--ep-fs-eyebrow); color: var(--ep-muted); } .ep-meta b { font-weight: 400; color: var(--ep-cell); } .ep-skipped { margin-top: var(--ep-gap); } .ep-skipped h3 { font-size: var(--ep-fs-cell); font-weight: 600; color: #fff; } .ep-pills { display: flex; flex-wrap: wrap; gap: .5em; margin-top: .55em; } .ep-pill { padding: 2px 8px; border: 1px solid #334155; border-radius: 4px; background: rgba(30, 41, 59, .6); color: var(--ep-cell); font-size: var(--ep-fs-label); line-height: 1.6; } .ep-figures { margin-top: var(--ep-gap); } .ep-table td .ep-sub { display: block; margin-top: .35em; font-size: calc(var(--ep-fs-cell) * .92); color: var(--ep-faint); } .ep-table .ep-figure-name { color: var(--ep-text); } .ep-foot { margin-top: .7em; font-size: var(--ep-fs-eyebrow); color: var(--ep-muted); } /* =========================================================== 4. findings == */ .ep-section-head { margin-bottom: var(--ep-gap); } .ep-section-head h2 { font-size: var(--ep-fs-title); font-weight: 600; color: #fff; } .ep-section-head p { margin-top: .3em; font-size: var(--ep-fs-eyebrow); color: #94a3b8; } .ep-card { padding: calc(var(--ep-pad) * 1.1) calc(var(--ep-pad) * 1.2); background-color: rgba(255, 255, 255, .02); background-image: none; /* The left rule encodes evidence strength: strong 4px | moderate 3px --ep-accent-soft | weak 2px --ep-accent-faint | suppressed 2px --ep-line-strong + transparent fill. */ border-left: 3px solid var(--ep-accent-soft); } .ep-card__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5em .75em; margin-bottom: .9em; } .ep-chip { display: inline-flex; align-items: center; gap: .55em; padding: 3.2px 9.6px 3.2px 7.2px; border: 1px solid var(--ep-accent-faint); border-radius: 999px; background: var(--ep-accent-bg); font-family: var(--ep-mono); font-size: var(--ep-fs-label); font-weight: 500; line-height: 1.5; letter-spacing: .88px; text-transform: uppercase; color: #67e8f9; } .ep-chip__icon { display: inline-flex; align-items: center; justify-content: center; width: 1.7em; height: 1.7em; border-radius: 999px; background: var(--ep-accent-bg); color: var(--ep-accent); } .ep-chip__icon svg { width: 1.05em; height: 1.05em; display: block; } .ep-rating { display: inline-flex; align-items: center; gap: .8em; padding: 4px 10.4px; border: 1px solid var(--ep-line); border-radius: 999px; background: var(--ep-track); } .ep-pips { display: inline-flex; align-items: center; gap: .6em; } .ep-pips__dots { display: flex; gap: 3px; } .ep-pips__dot { width: 6px; height: 6px; border-radius: 999px; background: rgba(56, 189, 248, .28); } .ep-pips__dot--on { background: var(--ep-accent); } .ep-pips__label { font-size: var(--ep-fs-label); font-weight: 600; line-height: 1.5; color: #8397a9; } .ep-badge { padding-left: .8em; border-left: 1px solid var(--ep-line-strong); font-family: var(--ep-mono); font-size: var(--ep-fs-eyebrow); font-weight: 500; letter-spacing: 1.2px; text-transform: uppercase; } .ep-card__title { font-size: var(--ep-fs-title); font-weight: 600; letter-spacing: -.015em; color: #edf6fb; } .ep-hero { display: grid; grid-template-columns: 40% 1fr; column-gap: calc(var(--ep-pad) * 1.6); row-gap: 1em; margin-top: .8em; } @container (max-width: 440px) { .ep-hero { grid-template-columns: 1fr; } } .ep-effect { display: block; font-size: var(--ep-fs-effect); font-weight: 700; line-height: 1.05; letter-spacing: -.02em; color: #f8fafc; } .ep-effect__cap { display: block; margin-top: .35em; font-size: var(--ep-fs-cell); line-height: 1.35; color: #8397a9; } .ep-compare { display: flex; flex-direction: column; gap: .7em; padding-top: .5em; } .ep-compare__row { display: grid; grid-template-columns: minmax(0, 40%) minmax(0, 1fr) auto; gap: .9em; align-items: center; } .ep-compare__label { font-size: var(--ep-fs-eyebrow); font-weight: 600; line-height: 1.35; text-align: right; color: var(--ep-text); } .ep-compare__row:not(.is-focus) .ep-compare__label { color: #8397a9; } .ep-compare__track { position: relative; height: 12px; border-radius: 4px; background: var(--ep-track); } .ep-compare__fill { position: absolute; top: 0; bottom: 0; border-radius: 3px; } .ep-compare__fill--neg { background: var(--ep-neg); } .ep-compare__fill--pos { background: var(--ep-pos); } .ep-compare__value { font-size: var(--ep-fs-eyebrow); font-weight: 600; text-align: right; white-space: nowrap; } .ep-evidence { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .7em; margin-top: 1.1em; padding: .7em 1em; border-radius: 10px; background: var(--ep-track); font-size: var(--ep-fs-eyebrow); line-height: 1.5; color: #8397a9; } .ep-hold { display: inline-flex; align-items: center; gap: .7em; } .ep-hold__meter { display: flex; gap: 2px; } .ep-hold__seg { width: 16px; height: 6px; border-radius: 999px; background: rgba(56, 189, 248, .28); } .ep-hold__seg--on { background: var(--ep-accent); } .ep-evidence__range { padding-left: .8em; border-left: 1px solid var(--ep-line-strong); } .ep-cost { margin-top: 1em; font-size: var(--ep-fs-cell); } .ep-cost b { margin-left: .5em; font-family: var(--ep-mono); font-weight: 600; color: var(--ep-text); } .ep-rule { margin-top: 1em; padding-left: 12px; border-left: 2px solid rgba(245, 158, 11, .5); font-size: var(--ep-fs-eyebrow); line-height: 1.6; color: rgba(253, 230, 138, .9); } .ep-actions { display: flex; flex-wrap: wrap; gap: .6em; margin-top: 1em; } .ep-card__link { margin-top: 1em; } .ep-disclosure { display: inline-flex; align-items: center; gap: .6em; margin-top: 1em; font-size: var(--ep-fs-eyebrow); font-weight: 600; color: #8397a9; } .ep-disclosure svg { width: .7em; height: .7em; display: block; } /* ------------------------------------------------------ host overrides ---- Two rules in lab.css were written for the 840px capture these panels replace. Both are guarded on .edge-preview, so a .shot-plate or a .shotdeck-stack still holding an image is untouched. The mobile stack clips to 16/11 and zooms the image to 168%, because a 390px frame rendered an 840px capture at .43 and put every label under 6px. Live markup reflows instead of shrinking, so the crop only truncates it. */ .shotdeck-stack:has(.edge-preview) { overflow: visible; aspect-ratio: auto; } /* Panels differ in natural height, and the stack is one grid cell shared by all four. Centring keeps a shorter panel from hanging off the top of the frame with all the slack underneath it. */ .shotdeck-panel:has(.edge-preview) { display: flex; align-items: center; } .shotdeck-panel > .edge-preview { width: 100%; }