/* ============================================================ evidence-modal.css — the shared Evidence dialog and card control. WHY THIS FILE EXISTS. These rules lived in styles.css, which ONLY index.html loads. Ask, Entities, Workspace and Lenses all load evidence-modal.js but none of them loaded styles.css, so on those four pages the dialog was appended to with no positioning at all: it rendered as a plain block in normal document flow, below the footer, with no backdrop. That is the production defect this file fixes, and it was never a caching problem — /* is served `no-cache, must-revalidate, max-age=0`, so a stale stylesheet cannot persist. THE RULE THIS ENCODES: the stylesheet travels with the component. Any page that loads evidence-modal.js must load this file, and a guardrail asserts it. ============================================================ */ /* ── Evidence on a signal card ──────────────────────────────────────────────── Spacing only, reusing evidence-clickback.css unmodified — the same compact unit and disclosure the brief claim uses, so the four card surfaces (Ask, entity Signal History, Workspace, Lenses) cannot drift into four designs. A card whose signal has no accessible extract keeps an empty .evc-card-slot and renders exactly as it does today, so these rules cost nothing there. Subordinate by construction: it sits after the card's own summary, source and actions, at a smaller scale than the card's primary text. */ .evc-card-slot:empty { display: none; } .evc-card-host { margin: 8px 0 0; padding-top: 8px; border-top: 1px solid var(--border); font-size: 0.85em; } /* ── The shared Evidence dialog ─────────────────────────────────────────────── ONE dialog for the whole document, over the page rather than inside it, so a card or claim never reflows when evidence opens. ⚠ COLOURS ARE SCOPED AND COMPLETE, and that is the point of this block. The --evc-* tokens in evidence-clickback.css are declared on `.evc-compact, .evc-summary, .evc-page, .evc-panel` — NONE of which the modal uses. Inside .evc-modal every one of them was therefore UNDEFINED, so `background: var(--evc-surface, #fff)` fell through to white while `color: var(--evc-fg, inherit)` fell through to the dark-theme fallback: rgb(220,230,240) text on rgb(255,255,255), about 1.1:1, in BOTH themes. Measured, not guessed. So the dialog declares its OWN complete contract below. It never inherits a substantive text colour from the page behind it, and each theme is stated in full rather than assembled from whatever the host page happens to define. */ .evc-modal-backdrop { /* Dark theme is the product default. */ --evc-m-surface: #101a27; --evc-m-raised: #162233; --evc-m-fg: #eaf1f8; /* primary text ~14:1 on surface */ --evc-m-fg-2: #b9c8d8; /* secondary text ~8:1 */ --evc-m-fg-3: #93a5b8; /* captions, subordinate ~5.5:1 */ --evc-m-line: #24344a; --evc-m-line-hi: #33475f; --evc-m-accent: #6aa8ff; /* action links ~6.5:1 */ --evc-m-focus: #8fc0ff; position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 24px 16px; background: rgba(3, 8, 15, 0.62); } /* Light theme, stated in full — never a light surface with inherited pale text. */ :root[data-se-theme="light"] .evc-modal-backdrop, [data-se-theme="light"] .evc-modal-backdrop { --evc-m-surface: #fdfdfc; --evc-m-raised: #f4f3f0; --evc-m-fg: #1c2025; /* ~14.5:1 */ --evc-m-fg-2: rgba(28, 32, 37, 0.78); /* ~7:1 */ /* 0.66, not 0.62: at 0.62 this clears AA on the modal surface but lands at 4.47:1 on the slightly darker captured-extract block. 0.66 is the same tier theme.css already uses for --text-dim/--muted for exactly this reason. */ --evc-m-fg-3: rgba(28, 32, 37, 0.66); --evc-m-line: rgba(28, 32, 37, 0.14); --evc-m-line-hi: rgba(28, 32, 37, 0.24); --evc-m-accent: #0b5cd6; /* ~5.9:1 */ --evc-m-focus: #0b5cd6; background: rgba(28, 32, 37, 0.45); } .evc-modal-backdrop[hidden] { display: none; } .evc-modal { width: min(660px, 100%); max-height: min(82vh, 760px); display: flex; flex-direction: column; background: var(--evc-m-surface); color: var(--evc-m-fg); border: 1px solid var(--evc-m-line); border-radius: 10px; box-shadow: 0 18px 48px rgba(0, 0, 0, 0.38); } /* Descendants take their colour from the modal's own contract, not from a card or page rule that happens to match. Deliberately NOT including .evc-modal itself — that would override the surface colour set immediately above. The specific rules below come later and win for the elements they name. */ .evc-modal * { color: inherit; } .evc-modal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--evc-m-line); } .evc-modal-title { margin: 0; font-size: .78rem; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--evc-m-fg-3); } .evc-modal-close { border: 0; background: none; cursor: pointer; font-size: 1.5rem; line-height: 1; padding: 2px 8px; border-radius: 6px; color: var(--evc-m-fg-2); } .evc-modal-close:hover { color: var(--evc-m-fg); } .evc-modal :focus-visible { outline: 2px solid var(--evc-m-focus); outline-offset: 2px; } /* The extract area is what scrolls — the page behind stays where it was. */ .evc-modal-body { overflow-y: auto; padding: 2px 18px 10px; } .evc-modal-count { margin: 14px 0 0; font-size: .78rem; color: var(--evc-m-fg-3); } .evc-modal-extract { padding: 16px 0; border-bottom: 1px solid var(--evc-m-line); } .evc-modal-extract:last-child { border-bottom: 0; } /* ── A. What Signal Engine recorded ── */ .evc-modal-source { font-size: .78rem; letter-spacing: .04em; text-transform: uppercase; color: var(--evc-m-fg-3); } .evc-modal-headline { margin-top: 3px; font-size: 1.02rem; font-weight: 600; line-height: 1.35; color: var(--evc-m-fg); } .evc-modal-captured { margin-top: 6px; font-size: .78rem; color: var(--evc-m-fg-3); } /* ── B. What the publisher's page said ── Bounded and captioned so wording INSIDE it — "Published:", "Source:", "Home / Reading" — reads unmistakably as the publisher's, not as a Signal Engine label. The boundary is a border and an inset, not colour alone. */ .evc-modal-captured-block { margin: 12px 0 0; padding: 10px 14px; background: var(--evc-m-raised); border: 1px solid var(--evc-m-line); border-left: 3px solid var(--evc-m-line-hi); border-radius: 0 8px 8px 0; } .evc-modal-captured-heading { font-size: .72rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--evc-m-fg-3); margin-bottom: 6px; } .evc-modal-extract-text { font-family: var(--evc-serif, ui-serif, Georgia, serif); font-size: .93rem; line-height: 1.5; color: var(--evc-m-fg-2); overflow-wrap: anywhere; } /* ── C. What the reader can do — the only prominent links ── */ .evc-modal-actions { margin-top: 12px; } .evc-modal-link, .evc-modal-full { font-size: .84rem; font-weight: 500; color: var(--evc-m-accent); overflow-wrap: anywhere; } .evc-modal-foot { padding: 12px 18px; border-top: 1px solid var(--evc-m-line); background: var(--evc-m-raised); border-radius: 0 0 9px 9px; } @media (max-width: 640px) { .evc-modal-backdrop { padding: 12px; align-items: flex-end; } .evc-modal { width: 100%; max-height: 86vh; border-radius: 12px; } } /* ── Rendered extract structure ─────────────────────────────────────────────── The stored text is Markdown; evidence-clickback.js reduces it to this small, safe subset. Restrained on purpose — an extract is quoted evidence, not a republished article, so headings inside it read as emphasis rather than as document structure. Long URLs and unbroken tokens wrap instead of forcing the dialog to scroll sideways. */ .evc-modal-extract-text > p, .evc-extract-body > p { margin: 0 0 8px; } /* One captured link-label per line, from a publisher "further reading" run. Marked so it reads as a list without inventing bullets for ordinary prose. */ .evc-modal-extract-text .evc-x-item, .evc-extract-body .evc-x-item { margin: 0 0 4px; padding-left: 12px; position: relative; } .evc-modal-extract-text .evc-x-item::before, .evc-extract-body .evc-x-item::before { content: "—"; position: absolute; left: 0; opacity: .55; } .evc-modal-extract-text > p:last-child, .evc-extract-body > p:last-child { margin-bottom: 0; } /* A captured heading is emphasis INSIDE quoted material — it must never compete with the dialog's own title. */ .evc-modal-extract-text .evc-x-h, .evc-extract-body .evc-x-h { font-weight: 600; font-size: .95rem; margin: 10px 0 6px; } /* Split deliberately: inside the dialog the heading takes the modal's own contract; on the standalone page it takes the component token, which IS declared there because that page carries .evc-page. One shared rule with a var() fallback would have made the modal depend on a token it never declares — exactly the defect this stylesheet exists to fix. */ .evc-modal-extract-text .evc-x-h { color: var(--evc-m-fg); } .evc-extract-body .evc-x-h { color: var(--evc-fg); } .evc-modal-extract-text .evc-x-h:first-child, .evc-extract-body .evc-x-h:first-child { margin-top: 0; } .evc-modal-extract-text ul, .evc-extract-body ul { margin: 0 0 8px; padding-left: 1.1em; } .evc-modal-extract-text li, .evc-extract-body li { margin: 2px 0; } /* Alt text stands in for a suppressed image — never a remote request. */ .evc-modal-extract-text .evc-x-imgalt, .evc-extract-body .evc-x-imgalt { font-style: italic; opacity: .75; } .evc-modal-extract-text a, .evc-extract-body a { overflow-wrap: anywhere; }