/* dossier.css — universal Dossier page layout (Eames brief c639a489 + addendum; architecture 3f322400 §8). * Layout only; reuses prime-core.v1.css + theo-display.css tokens (colours, chips, claim/citation grammar). * The page is UNIVERSAL and PII-free: no confidentiality notice, no "prepared for X". Personal scope * (the Assets overlay) renders ONLY behind the permission gate; absent from the universal default. */ .dossier-shell { max-width: 1120px; margin: 0 auto; padding: 28px 28px 96px; } /* ── full-width header band: kicker · subject · descriptor · meta (no person) ── */ .dossier-header { border-bottom: 1px solid var(--border); padding-bottom: 18px; margin-bottom: 26px; } .dossier-kicker { font-family: 'Cormorant Garamond', serif; font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: var(--text-muted); } .dossier-title { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 30px; font-weight: 600; color: var(--text); margin: 2px 0 6px; line-height: 1.15; } .dossier-descriptor { font-family: 'Lora', Georgia, serif; font-size: 15px; color: var(--text); margin-bottom: 8px; } .dossier-meta { font-size: 13px; color: var(--text-muted); } .dossier-meta .dot { opacity: 0.5; margin: 0 7px; } /* ── two-column body: left rail (~35%) + main column (~65%) ── */ .dossier-body { display: grid; grid-template-columns: minmax(240px, 35%) 1fr; gap: 32px; align-items: start; } @media (max-width: 760px) { .dossier-body { grid-template-columns: 1fr; } } /* ── left rail: three stacked panels ── */ .dossier-rail { display: flex; flex-direction: column; gap: 18px; position: sticky; top: 20px; } .rail-panel { border: 1px solid var(--border-lt); border-radius: 5px; background: var(--surface); padding: 14px 16px; } .rail-panel.dormant { opacity: 0.6; } .rail-panel-label { font-family: 'Cormorant Garamond', serif; font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-muted); margin-bottom: 10px; } .rail-empty { font-size: 13px; color: var(--text-light); font-style: italic; } /* Grounded-sources list is a SCROLL region (Eames 4ed7084a) — facts never drop off the bottom unreachable. */ .gf-scroll { max-height: 340px; overflow-y: auto; margin: 0 -4px; padding: 0 4px; } /* Grounded sources as discrete CARDS (Eames 84b3b3a8): each source is a bounded unit — title -> tier line -> screenshot -> links — held together and set apart by WHITESPACE + a hairline border, NOT strong dividers or per-source colour (the evidence layer stays quiet; per-source colour beside the coloured call-outs would read as a patchwork). The tier line is the card's quiet anchor. */ .gf-row { padding: 10px 11px; border: 1px solid var(--border-lt); border-radius: 5px; background: var(--surface-2, rgba(128, 128, 128, 0.035)); margin-bottom: 10px; } .gf-row:last-child { margin-bottom: 0; } .gf-title { font-size: 13.5px; color: var(--text); } .gf-meta { font-size: 11px; color: var(--text-muted); margin-top: 3px; display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; } .gf-tier { font-family: ui-monospace, Menlo, monospace; letter-spacing: 0.04em; } .gf-tier.t1 { color: var(--accent); } .gf-tier.t2 { color: var(--text-muted); } .gf-tier.t3 { color: var(--status-amber); } /* Two-badge verification (design a656ff1d): earned states, not assumed-from-a-URL. */ .gf-anchored { color: var(--accent); } /* numeric: figure found on the rendered page */ .gf-review { color: var(--status-amber); } /* qualitative: screenshot frozen, awaiting human */ .gf-unverified { color: var(--status-red, #b3423a); font-style: italic; } /* not verified — a real weakness */ .gf-count { color: var(--text-muted); font-weight: 400; } .gf-conflict { color: var(--status-red, #b3423a); font-weight: 500; } .gf-stale { color: var(--status-amber); } /* review pill — visible flag that a human (Argos/Reg) still has to confirm the screenshot */ .gf-review-pill { font-family: ui-monospace, Menlo, monospace; font-size: 9.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--status-amber); border: 1px solid var(--status-amber); border-radius: 3px; padding: 0 4px; opacity: 0.85; } /* inline frozen screenshot — the visible proof; click to open the full capture */ .gf-shot { display: block; margin-top: 8px; border: 1px solid var(--border-lt); border-radius: 4px; overflow: hidden; max-height: 140px; } .gf-shot img { display: block; width: 100%; height: auto; } .gf-shot:hover { border-color: var(--accent-border); } /* evidence links row: frozen screenshot · web archive · source */ .gf-links { margin-top: 6px; font-size: 11px; display: flex; flex-wrap: wrap; gap: 3px 4px; align-items: baseline; } .gf-link { color: var(--text-muted); text-decoration: underline; text-underline-offset: 2px; } .gf-link:hover { color: var(--accent); } .gf-link-src { font-style: italic; } .gf-link-sep { color: var(--text-light); opacity: 0.5; } .gf-row-cited_not_verified { opacity: 0.82; } .gf-row-cited_not_verified .gf-title::before { content: "⚠ "; color: var(--status-red, #b3423a); } /* ── main column: the 4-layer descent ── */ .dossier-main { min-width: 0; } .dossier-section { margin-bottom: 26px; } .dossier-section h2 { font-family: 'Cormorant Garamond', serif; font-size: 22px; font-weight: 600; color: var(--text); margin: 0 0 8px; } .dossier-section h3 { font-family: 'Cormorant Garamond', serif; font-size: 18px; font-weight: 600; color: var(--text); margin: 0; } .dossier-prose { color: var(--text); font-size: 15.5px; line-height: 1.75; max-width: 70ch; } .dossier-prose p { margin: 0 0 1em; max-width: 70ch; } .exec-summary { border-left: 3px solid var(--accent-border); padding-left: 16px; } /* L0 — the call-out stack. Each call-out carries the shared "§N · label" identity + the section thesis, and a low-saturation LEFT-EDGE hue matching its section (reinforcement only; structure is the number+label). */ .callout-stack { display: flex; flex-direction: column; gap: 2px; margin-top: 4px; } .callout { display: flex; gap: 12px; align-items: baseline; padding: 10px 10px 10px 12px; text-decoration: none; color: var(--text); border-bottom: 1px solid var(--border-lt); border-left: 3px solid hsla(var(--sec-hue, 0), 45%, 55%, 0.55); transition: color 0.12s, background 0.12s; } .callout:last-child { border-bottom: none; } .callout:hover { color: var(--accent); } .callout:hover .callout-label { text-decoration: underline; text-underline-offset: 3px; } .callout.is-active { background: var(--surface-2, rgba(128, 128, 128, 0.10)); } /* mirrors the active section */ .callout-num { font-family: ui-monospace, Menlo, monospace; font-size: 12px; color: var(--text-muted); min-width: 1.8em; text-align: right; flex: none; } .callout-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .callout-label { font-family: 'Cormorant Garamond', serif; font-size: 15px; font-weight: 600; color: var(--text); } .callout-text { font-family: 'Lora', Georgia, serif; font-size: 14.5px; line-height: 1.5; color: var(--text-muted); } /* layer divider — quiet delineation between L0 and L1 (the "Full synthesis" band) */ .layer-divider { display: flex; align-items: center; gap: 12px; margin: 30px 0 22px; } .layer-divider::before, .layer-divider::after { content: ""; flex: 1; border-top: 1px solid var(--border); } .layer-divider span { font-family: 'Cormorant Garamond', serif; font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: var(--text-muted); } .expand-all { flex: none; font-family: 'Cormorant Garamond', serif; font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--text-muted); background: none; border: 1px solid var(--border); border-radius: 4px; padding: 3px 10px; cursor: pointer; } .expand-all:hover { color: var(--accent); border-color: var(--accent-border); } /* L1 — collapsible sections with a STICKY header and a per-section identity hue as a LEFT-EDGE rule. Default headers-only (collapsed) so the synthesis opens as a scannable stack of §N · label headers. Identity is number + label + sticky header + collapse — the hue is pure reinforcement (survives colour-off). */ .synthesis-section { scroll-margin-top: 8px; margin-bottom: 10px; border-left: 3px solid hsla(var(--sec-hue, 0), 45%, 55%, 0.55); } .synthesis-section.is-active { background: var(--surface-2, rgba(128, 128, 128, 0.06)); } /* active = neutral wash, distinct from the identity hue */ .section-head { display: flex; align-items: baseline; gap: 10px; width: 100%; box-sizing: border-box; position: sticky; top: 0; z-index: 2; background: var(--surface, #fff); border: none; border-bottom: 1px solid var(--border-lt); text-align: left; cursor: pointer; padding: 10px 12px; margin: 0; font: inherit; } .section-head:hover { color: var(--accent); } .section-caret { flex: none; width: 0; height: 0; border-left: 5px solid currentColor; border-top: 4px solid transparent; border-bottom: 4px solid transparent; opacity: 0.55; transition: transform 0.15s; } .synthesis-section:not(.collapsed) .section-caret { transform: rotate(90deg); } .section-id { flex: 1 1 auto; min-width: 0; font-family: 'Cormorant Garamond', serif; font-size: 18px; font-weight: 600; color: var(--text); } .section-body { padding: 6px 12px 10px; } .synthesis-section.collapsed .section-body { display: none; } /* Section-foot links (Eames c639a489): two epistemic zones. Grounded = the solid, verified spine; Supporting = quieter, perishable context. Hierarchy is FIRM — Supporting must always read lighter. */ .section-links { margin-top: 20px; } .sl-head { font-family: 'Cormorant Garamond', serif; font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-muted); margin-bottom: 8px; } /* GROUNDED SOURCES — weighted: tier + verification badges, evidence links, title in full text colour. */ .sl-grounded { border-top: 1px solid var(--border); padding-top: 12px; } .sl-grounded-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; font-size: 13px; padding: 5px 0; } .sl-grounded-row + .sl-grounded-row { border-top: 1px solid var(--border-lt); } .sl-g-title { color: var(--text); } .sl-g-links { font-size: 11px; display: inline-flex; flex-wrap: wrap; gap: 3px 4px; align-items: baseline; } /* SUPPORTING LINKS — the category boundary is a quiet neutral left-rule + faint tint (NOT per-link colour, and in a neutral hue distinct from the section's identity colour). Lighter than Grounded in every way: smaller, muted, no badges. Rhythm (one per line + domain) beats the grey-blob, not colour. */ .sl-supporting { margin-top: 16px; padding: 8px 0 4px 12px; border-left: 2px solid var(--border); background: var(--surface-2, rgba(128, 128, 128, 0.03)); border-radius: 0 4px 4px 0; } .sl-support-head { color: var(--text-light); } .sl-valid { text-transform: none; letter-spacing: 0; font-style: italic; color: var(--text-light); } .sl-support-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding: 4px 8px 4px 0; color: var(--text-muted); font-size: 12.5px; } .sl-support-row + .sl-support-row { border-top: 1px solid var(--border-lt); } .sl-support-link { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; text-decoration: none; color: inherit; } .sl-support-link:hover .sl-support-title { text-decoration: underline; text-underline-offset: 2px; } .sl-support-link:hover .sl-domain { color: var(--accent); } .sl-domain { font-family: ui-monospace, Menlo, monospace; font-size: 11.5px; color: var(--text-muted); flex: none; } .sl-support-title { color: var(--text-light); } .sl-support-note { color: var(--text-light); font-style: italic; font-size: 11.5px; } /* Review affordances (Theo b63ec6d5): quiet inline accept/reject on unreviewed links; accepted shows a small confirmed dot and no buttons. Understated — a curation control on a quiet zone, not a CTA. */ .sl-curate { display: inline-flex; gap: 4px; margin-left: auto; flex: none; align-items: center; } .sl-keep, .sl-rej, .sl-reason { border: 1px solid var(--border); background: transparent; cursor: pointer; font-size: 11px; line-height: 1; padding: 2px 6px; border-radius: 3px; color: var(--text-muted); } .sl-keep:hover { border-color: var(--accent); color: var(--accent); } .sl-rej:hover, .sl-reason:hover { border-color: var(--status-red, #b3423a); color: var(--status-red, #b3423a); } .sl-keep:disabled, .sl-rej:disabled, .sl-reason:disabled { opacity: 0.4; cursor: default; } /* Reason chooser (dead|wrong|irrelevant) — the rejection_class the schema requires. Hidden until Remove is clicked, which sets .reasons-open on the row. */ .sl-reasons { display: none; gap: 4px; } .sl-support-row.reasons-open .sl-reasons { display: inline-flex; } .sl-support-row.reasons-open .sl-rej { border-color: var(--status-red, #b3423a); color: var(--status-red, #b3423a); } .sl-accepted-dot { color: var(--accent); font-size: 9px; flex: none; line-height: 1.4; } /* ── INVERTED STAMP DEFAULT — the section header tab (interrogate surface v2, Eames SP 4985c519) ── A well-grounded section wears NOTHING; the tab appears only where there is something to warn about. Two salience levels: QUIET (small muted text, no fill) for a mild note (pending review / not yet grounded); WARN (a filled tint) reserved for genuine caution (unverified source / tier conflict). */ .sec-tab { font-size: 10.5px; letter-spacing: 0.04em; white-space: nowrap; flex: none; padding: 1px 7px; border-radius: 3px; } .sec-tab-quiet { color: var(--text-light); font-style: italic; } .sec-tab-warn { color: var(--status-red, #b3423a); background: var(--status-red-dim, rgba(179, 66, 58, 0.10)); border: 1px solid var(--status-red, #b3423a); font-weight: 500; } /* ── ANCHOR-QUOTE FIRST-CLASS — the "what anchors this section" zone ────────────────────────────── claim -> the exact source sentence -> mark + tier + document. THE QUOTE IS THE VISUAL CENTRE OF GRAVITY; the stamps are trim. A badge asserts; a quote demonstrates. */ .anchor-zone { margin-top: 20px; border-top: 1px solid var(--border); padding-top: 12px; } .az-head { font-family: 'Cormorant Garamond', serif; font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-muted); margin-bottom: 12px; } .anchor-claim { margin-bottom: 18px; } .anchor-claim:last-child { margin-bottom: 0; } /* The claim is a quiet lead-in — the subject; the quote below it is the weight. */ .ac-claim { font-size: 13px; color: var(--text-muted); line-height: 1.5; margin-bottom: 6px; } /* The anchoring span, rendered visibly as THE SOURCE'S WORDS: serif, quotation marks, a distinct surface, and a left rule tinted by the verification mark (recessive teal for anchored strength; only caution is loud). This is the receipt on the page, not one interaction away. */ .av-edge { margin: 0 0 10px; } .av-edge:last-child { margin-bottom: 0; } .av-quote { position: relative; margin: 0; padding: 10px 14px 10px 16px; font-family: 'Lora', Georgia, serif; font-size: 15px; line-height: 1.6; color: var(--text); background: var(--surface-1, var(--surface-2, rgba(128, 128, 128, 0.05))); border-left: 3px solid var(--border); border-radius: 0 5px 5px 0; } .av-quote::before { content: '\201C'; } .av-quote::after { content: '\201D'; } .av-noquote { font-size: 12.5px; font-style: italic; color: var(--text-light); padding: 4px 0 4px 16px; } /* Recessive-but-present strength (anchored) vs loud caution (unverified). */ .av-edge.av-anchored .av-quote { border-left-color: var(--accent); } .av-edge.av-review .av-quote { border-left-color: var(--status-amber); } .av-edge.av-unverified .av-quote { border-left-color: var(--status-red, #b3423a); background: var(--status-red-dim, rgba(179, 66, 58, 0.07)); } /* The trim line: mark + tier + document. Small and quiet — it supports the quote, never competes with it. */ .av-trim { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-top: 5px; padding-left: 16px; font-size: 11px; color: var(--text-muted); } .av-mark { letter-spacing: 0.03em; } .av-mark.av-anchored { color: var(--accent); } /* recessive: small teal text, no badge */ .av-mark.av-review { color: var(--status-amber); } .av-mark.av-unverified { color: var(--status-red, #b3423a); font-weight: 600; font-style: italic; } /* loud: a real weakness */ .av-doc { color: var(--text-muted); text-decoration: underline; text-underline-offset: 2px; } a.av-doc:hover { color: var(--accent); } /* The worked-example rounding note — quiet reconciliation, anticipating the numerate reader's calculator. */ .av-rounding { margin-top: 10px; font-size: 11.5px; font-style: italic; color: var(--text-light); padding-left: 16px; border-left: 2px dotted var(--border); } /* ── THE ASK SIDE — interrogate this dossier (Eames §4) ──────────────────────────────────────────── */ .ask-panel { border: 1px solid var(--accent-border, var(--border)); border-radius: 6px; background: var(--surface-2, rgba(128, 128, 128, 0.04)); padding: 16px 18px; margin-bottom: 26px; } .ask-head { font-family: 'Cormorant Garamond', serif; font-size: 17px; font-weight: 600; color: var(--text); } .ask-sub { font-family: 'Lora', Georgia, serif; font-size: 13px; color: var(--text-muted); line-height: 1.5; margin: 4px 0 12px; max-width: 66ch; } .ask-form { display: flex; gap: 8px; } .ask-input { flex: 1 1 auto; min-width: 0; font: inherit; font-size: 14px; color: var(--text); background: var(--surface, #fff); border: 1px solid var(--border); border-radius: 5px; padding: 8px 12px; } .ask-input:focus { outline: none; border-color: var(--accent-border, var(--accent)); } .ask-submit { flex: none; font-family: 'Cormorant Garamond', serif; font-size: 13px; letter-spacing: 1px; text-transform: uppercase; color: var(--surface, #fff); background: var(--accent); border: 1px solid var(--accent); border-radius: 5px; padding: 8px 18px; cursor: pointer; } .ask-submit:hover { filter: brightness(1.06); } .ask-submit:disabled { opacity: 0.55; cursor: default; } /* Suggested-question chips (Eames ruling 11b073fb): "This dossier can evidence:" — the questions with a grounded answer, offered one click away. Neutral/quiet register; the label is the verbatim question (full text in the title, truncated visually). The gap line is a quiet finding, never an alarm. */ .ask-chips { margin: 2px 0 12px; } /* Collapsed by default (Eames item 2): the count line is the ; the list expands on click. */ .ask-chips-disclose { margin-bottom: 6px; } .ask-chips-head { list-style: none; cursor: pointer; display: inline-flex; align-items: baseline; gap: 6px; font-family: 'Cormorant Garamond', serif; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); } .ask-chips-head::-webkit-details-marker { display: none; } .ask-chips-head strong { color: var(--text); font-weight: 600; } .ask-chips-head::after { content: '▸'; font-size: 10px; color: var(--text-light); transition: transform 0.15s; } .ask-chips-disclose[open] > .ask-chips-head::after { transform: rotate(90deg); } .ask-chips-row { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 9px; } .ask-chip { max-width: 100%; font: inherit; font-size: 12.5px; color: var(--text); text-align: left; background: var(--surface, #fff); border: 1px solid var(--border); border-radius: 14px; padding: 5px 12px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ask-chip:hover { border-color: var(--accent-border, var(--accent)); color: var(--accent); } .ask-gap { font-family: 'Lora', Georgia, serif; font-size: 12px; font-style: italic; color: var(--text-light); margin-top: 9px; } /* Typed-question matching (Eames item 3): close answerable questions surfaced as the reader types, or a pre-emptive warning when the record has no overlap — saving a 45s wait for a wall of withheld. */ .ask-typeahead { margin-top: 9px; } .ask-ta-head { font-family: 'Cormorant Garamond', serif; font-size: 11.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 6px; } .ask-ta-item { display: block; width: 100%; max-width: 100%; text-align: left; font: inherit; font-size: 13px; color: var(--text); background: var(--surface, #fff); border: 1px solid var(--border); border-radius: 5px; padding: 7px 11px; margin-bottom: 5px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ask-ta-item:hover { border-color: var(--accent-border, var(--accent)); color: var(--accent); } .ask-ta-warn { font-family: 'Lora', Georgia, serif; font-size: 12.5px; font-style: italic; color: var(--text-muted); padding: 7px 11px; border-left: 2px solid var(--border); background: var(--surface-2, rgba(128, 128, 128, 0.04)); border-radius: 0 4px 4px 0; } .ask-answer { margin-top: 14px; } .ans-loading { font-size: 13px; font-style: italic; color: var(--text-muted); } .ans-error { font-size: 13px; color: var(--status-red, #b3423a); } .ans-note { font-size: 13.5px; color: var(--text-muted); } .ans-model { margin-top: 8px; font-size: 13.5px; color: var(--text); line-height: 1.6; white-space: pre-wrap; } /* Live progress (baton 39ea928f, item 1): real stage state during the wait — the record being read, the answer drafted, and the reveal of how many statements were checked and withheld. The wait is the proof. */ .ans-progress { display: flex; align-items: flex-start; gap: 11px; padding: 4px 0; } .ans-progress-spin { flex: 0 0 auto; width: 15px; height: 15px; margin-top: 2px; border-radius: 50%; border: 2px solid var(--border); border-top-color: var(--accent); animation: ans-spin 0.8s linear infinite; } @keyframes ans-spin { to { transform: rotate(360deg); } } .ans-progress-text { display: flex; flex-direction: column; gap: 2px; } .ans-progress-stage { font-size: 13.5px; font-weight: 600; color: var(--text); } .ans-progress-detail { font-size: 12.5px; color: var(--text-muted); line-height: 1.5; } @media (prefers-reduced-motion: reduce) { .ans-progress-spin { animation: none; } } .ans-question { font-family: 'Cormorant Garamond', serif; font-size: 16px; font-weight: 600; color: var(--text); margin-bottom: 10px; } /* Kept vs withheld tallies — the withheld count only lights up when there IS withheld material. */ .ans-summary { display: flex; gap: 14px; font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 10px; } .ans-count-kept { color: var(--accent); } .ans-count-curated { color: var(--text-muted); } /* Withheld is ABSENCE-of-source, not danger (Eames ruling 11b073fb pt5): the tally stays in the quiet header — the prominent withheld BLOCKS below carry the finding. No alarm colour. */ .ans-count-withheld.has-withheld { color: var(--text-muted); font-weight: 600; } /* Kept lines — grounded prose with a quiet tier stamp trailing. */ .ans-kept { margin: 0 0 1.1em; max-width: 72ch; } .ans-kept-text { font-size: 15px; line-height: 1.7; color: var(--text); margin: 0; } /* The receipt: the anchor quote sits just under its claim, a touch smaller and recessive so the claim leads. */ .ans-quote { margin: 6px 0 0; font-size: 14px; border-left-color: var(--accent); } .ans-trim { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-top: 5px; font-size: 11px; } /* ── THREE-STATE PROVENANCE MARKERS (line b8600353) ─────────────────────────────────────────────── *** 14px, IN A ROW WHOSE OTHER ITEMS ARE 11px, AND THAT IS DELIBERATE. *** This file predates the floor and holds about twenty rules under it; matching them would extend a known breach into new work on the one page whose whole subject is what Reg can trust at a glance. The trim around it is a stamp he can skip. This is the thing the line was raised to make readable. MEASURED AGAINST THIS PAGE'S OWN GROUND (#FAFAF8) with tests/lib/contrast.mjs, never carried from another surface: green #2f7d4f 4.82:1, --text #1C1C1A 16.33:1, --text-muted #6B6962 5.26:1. All clear 4.5:1. Amber is ABSENT on purpose - it measures 3.74:1 here and it already means "reasoned" on the claim page; borrowing it would make two surfaces disagree about one colour. *** THE THREE DIFFER BY WEIGHT AND BORDER, NOT BY FADING. *** Attributable is a different KIND from grounded, not a weaker tier of it, so it does not get a dimmer version of the same green - it gets full-strength ink in a neutral frame. Blank is quiet by being muted-but-above-the-floor and dashed, never by receding toward the background, because the strengths-only rule makes it the ordinary case rather than a deficiency. */ .ans-prov { font-size: 14px; line-height: 1.2; padding: 1px 7px; border-radius: 2px; } .ans-prov-grounded { color: #2f7d4f; border: 1px solid rgba(47, 125, 79, 0.45); } .ans-prov-attributable { color: var(--text); border: 1px solid var(--text-muted); } .ans-prov-blank { color: var(--text-muted); border: 1px dashed var(--border); } /* THE TOGGLE HIDES; IT DOES NOT REMOVE. One class on the container, and every marker stays in the DOM at every state - which is what makes flipping back free and what makes "nothing is ever destructively stripped" a property of the mechanism rather than a promise in a comment. */ .ans-pilltoggle { margin-left: auto; font-size: 14px; color: var(--text-muted); background: none; border: 1px solid var(--border); border-radius: 3px; padding: 2px 9px; cursor: pointer; } .ans-pilltoggle:hover, .ans-pilltoggle:focus-visible { color: var(--text); border-color: var(--text-muted); } .ask-answer.pills-hidden .ans-prov { display: none; } /* ── HOW THE SOURCE WAS ADMITTED (Eames, line 285f5a8b) ─────────────────────────────────────────── "A small, quiet label, not a loud badge... never competing visually with the claim text." It sits BELOW the provenance pill in weight on purpose: provenance answers how well the line is supported, which is what a reader is scanning for; admission answers how its source got into the corpus, which matters when you go looking. Same size, no border, muted ink - present when you look at the trim, invisible when you are reading the prose. *** IT INTRODUCES NO NEW COLOUR PAIR. *** var(--text-muted) on the same ground is the exact pair .ans-prov-blank already uses and that the palette pass measured, so there is nothing new to check - which is the point, since the one time a contrast spec erred here it was the spec quoting the warning. A new tint would have needed measuring; reusing a measured one needs nothing. */ .ans-admit { font-size: 14px; line-height: 1.2; padding: 1px 2px; color: var(--text-muted); } .ask-answer.pills-hidden .ans-admit { display: none; } /* ── TAKE THIS TEXT, AND THE EDIT SPACE (line 9127e7a3) ─────────────────────────────────────────── Taking is an ACT and the button says which state it is in, in a word rather than only a colour - "take this text" / "taken", with aria-pressed alongside. A control whose only signal is a tint is one Reg cannot read at a glance, which is the whole reason this page has a measured palette. */ .ans-take { font-size: 14px; color: var(--text-muted); background: none; border: 1px solid var(--border); border-radius: 3px; padding: 1px 8px; cursor: pointer; margin-left: 4px; } .ans-take:hover, .ans-take:focus-visible { color: var(--text); border-color: var(--text-muted); } .ans-take.is-taken { color: #2f7d4f; border-color: rgba(47, 125, 79, 0.45); } .ed-takenbar { display: flex; align-items: center; gap: 12px; margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--border-lt); font-size: 14px; color: var(--text-muted); } .ed-open, .ed-back, .ed-add, .ed-save { font-size: 14px; padding: 5px 14px; border-radius: 3px; cursor: pointer; border: 1px solid var(--text-muted); background: none; color: var(--text); } .ed-save { border-color: #2f7d4f; color: #2f7d4f; } .ed-shell { max-width: 74ch; } .ed-head { display: flex; gap: 10px; align-items: center; margin-bottom: 16px; } .ed-label { flex: 1; font-size: 15px; padding: 6px 9px; border: 1px solid var(--border); border-radius: 3px; color: var(--text); background: var(--surface); } /* THE GUTTER IS WHY THE MARKER SURVIVES EDITING. It sits OUTSIDE the textarea, so no keystroke inside the prose can reach it - the layout is the guarantee, not a promise in a comment. */ .ed-block { display: grid; grid-template-columns: 9em 1fr auto; gap: 10px; align-items: start; margin-bottom: 12px; } .ed-gutter { padding-top: 6px; } .ed-text { width: 100%; font: 15px/1.7 'Lora', Georgia, serif; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: 3px; padding: 8px 10px; resize: vertical; } .ed-drop { font-size: 14px; color: var(--text-muted); background: none; border: none; cursor: pointer; padding: 6px 2px; } .ed-drop:hover, .ed-drop:focus-visible { color: var(--text); text-decoration: underline; } .ed-foot { display: flex; gap: 12px; align-items: baseline; margin-top: 18px; } .ed-note { font-size: 14px; color: var(--text-muted); line-height: 1.5; } /* IT SPEAKS WHETHER IT SUCCEEDED OR FAILED, and a failure says the text is still on screen - the one thing he needs to know at the moment a save does not land. */ .ed-said { margin-top: 10px; font-size: 14px; color: var(--text); min-height: 1.4em; } /* THE SAME CLASS, THE SAME RULE. The toggle carries into the editor because there is one mechanism - the container class - and both views read it. */ .ask-answer.pills-hidden .ed-gutter .ans-prov { display: none; } .ans-attr { color: var(--text-muted); font-style: italic; } .ans-framing { color: var(--text-light); font-style: italic; } .ans-source { color: var(--text-light); font-size: 11px; } .ans-source a { color: var(--text-muted); text-decoration: none; border-bottom: 1px dotted var(--border); } .ans-source a:hover { color: var(--accent); border-bottom-color: var(--accent); } /* CURATED_OPERATOR (baton 53897bcc): an operator-vouched claim — a distinct class from source-grounded. Its authority rests on the curator, so the attribution is load-bearing and always shown. A quiet distinct surface (dotted left rule), never dressed as a sourced receipt. */ .ans-curated { margin: 0 0 1.1em; max-width: 72ch; padding-left: 12px; border-left: 2px dotted var(--text-light); } .ans-cur-basis { font-family: 'Lora', Georgia, serif; font-size: 13px; font-style: italic; color: var(--text-muted); line-height: 1.5; margin-top: 4px; } .ans-cur-mark { font-size: 11px; letter-spacing: 0.03em; color: var(--text-muted); margin-top: 5px; } /* DISPUTED — a grounded line resting on a disputed fact. Unlike withheld (absence), a dispute is a real caution, so it is marked (amber rule), not recessive. */ .ans-disputed { font-size: 12px; color: var(--status-amber, #9a6a00); line-height: 1.5; margin: 5px 0 0; padding-left: 10px; border-left: 2px solid var(--status-amber, #d0972a); } /* WITHHELD — recessive, neutral, AGGREGATED (Eames ruling 0967275d). Withholding is a FINDING, but it is an ABSENCE, not a danger: a correct refusal must not read as system failure. One quiet line below the answer, lighter than the grounded content, a dashed glyph — never red, never a stacked block per item. */ .ans-withheld-agg { margin-top: 16px; padding-top: 12px; border-top: 1px dashed var(--border); font-size: 12.5px; color: var(--text-muted); } .ans-wh-summary { list-style: none; cursor: pointer; display: flex; align-items: baseline; gap: 8px; color: var(--text-muted); } .ans-wh-summary::-webkit-details-marker { display: none; } .ans-wh-glyph { color: var(--text-light); letter-spacing: -1px; flex: none; } .ans-wh-line { flex: 1 1 auto; } .ans-withheld-agg[open] > .ans-wh-summary { margin-bottom: 8px; color: var(--text); } .ans-wh-summary::after { content: '▸'; color: var(--text-light); font-size: 10px; transition: transform 0.15s; } .ans-withheld-agg[open] > .ans-wh-summary::after { transform: rotate(90deg); } .ans-wh-detail { padding-left: 4px; } .ans-wh-note { margin: 0 0 6px; font-size: 12.5px; color: var(--text-muted); line-height: 1.55; } .ans-wh-gaps { margin: 0 0 4px; padding-left: 18px; } .ans-wh-gaps li { font-size: 12.5px; color: var(--text); line-height: 1.5; margin-bottom: 5px; } /* Editor-only accept affordance on a record-gap (baton 53897bcc). Quiet — it is an editorial action, not an alarm; the authorisation is server-side, this is just the surface. */ .ans-accept-btn { margin-left: 8px; font: inherit; font-size: 11px; color: var(--text-muted); background: none; border: 1px solid var(--border); border-radius: 10px; padding: 1px 9px; cursor: pointer; } .ans-accept-btn:hover { color: var(--accent); border-color: var(--accent-border, var(--accent)); } .ans-accept-form { display: inline-flex; gap: 6px; margin-left: 8px; vertical-align: middle; } .ans-accept-basis { font: inherit; font-size: 12px; color: var(--text); background: var(--surface, #fff); border: 1px solid var(--border); border-radius: 4px; padding: 3px 8px; min-width: 220px; } .ans-accept-basis:focus { outline: none; border-color: var(--accent-border, var(--accent)); } .ans-accept-confirm { font: inherit; font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--surface, #fff); background: var(--accent); border: 1px solid var(--accent); border-radius: 4px; padding: 3px 12px; cursor: pointer; } .ans-accept-confirm:disabled { opacity: 0.6; cursor: default; } .ans-accept-ok { font-size: 12px; color: var(--accent); font-style: italic; } .ans-accept-err { font-size: 12px; color: var(--status-red, #b3423a); } /* L3 — the deepest descent: a quiet link to the engine workings, not a default view */ .engine-workings { margin-top: 40px; padding-top: 18px; border-top: 1px solid var(--border); } .engine-workings a { font-size: 13.5px; color: var(--text-muted); text-decoration: none; } .engine-workings a:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; } /* ── Honest evidence ladder (Eames SP 57480e66). Labels name what is TRUE, never only the absence. The load-bearing choice: "evidence on file · review pending" and "sourced · not yet checked" read NEUTRAL (muted), NOT as amber/red weakness — a frozen tiered capture is not thin, and the old red "unverified" actively understated the Dossier. Only a genuine reject wears caution. */ .ev-anchored { color: var(--accent); } /* figure verified in source */ .ev-confirmed { color: var(--status-green, #2f7d4f); font-weight: 500; } /* confirmed by · — the qualitative ceiling */ .ev-review { color: var(--text-muted); } /* evidence on file · review pending (neutral, not alarm) */ .ev-sourced { color: var(--text-muted); } /* sourced · not yet checked */ .ev-rejected { color: var(--status-red, #b3423a); font-style: italic; } /* a reviewer judged it does not support the claim */ /* ── Evidence review surface (Eames 57480e66 / 6d3d1c68): editor-only, claim beside capture, one at a time. */ .review-surface { border: 1px solid var(--accent); border-radius: 8px; padding: 16px 18px; margin-bottom: 26px; background: var(--surface-2, rgba(0,0,0,0.02)); } .rv-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 12px; } .rv-title { font-family: 'Cormorant SC', serif; font-size: 15px; letter-spacing: 1px; color: var(--text); } .rv-progress { font-family: ui-monospace, Menlo, monospace; font-size: 11.5px; color: var(--text-muted); } .rv-body { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } @media (max-width: 720px) { .rv-body { grid-template-columns: 1fr; } } .rv-lab { font-family: ui-monospace, Menlo, monospace; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 6px; display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; } .rv-claim-text { font-size: 14.5px; line-height: 1.5; color: var(--text); } .rv-doc { color: var(--text); } .rv-quote { font-family: Georgia, 'Times New Roman', serif; font-size: 14px; line-height: 1.55; color: var(--text); border-left: 3px solid var(--accent); padding: 4px 0 4px 12px; margin: 0; background: transparent; } .rv-noquote { font-size: 13px; font-style: italic; color: var(--text-muted); } .rv-links { margin-top: 8px; font-size: 12.5px; } .rv-links a { color: var(--accent); text-decoration: none; } .rv-links a:hover { text-decoration: underline; text-underline-offset: 2px; } .rv-q { margin: 16px 0 10px; font-size: 15px; font-weight: 600; color: var(--text); } .rv-actions { display: flex; flex-wrap: wrap; gap: 10px; } .rv-actions button, .rv-reject-do { font-family: 'Cormorant SC', serif; font-size: 12px; letter-spacing: 0.6px; padding: 7px 16px; border-radius: 3px; cursor: pointer; border: 1px solid var(--border); background: var(--surface, #fff); color: var(--text); } .rv-confirm { border-color: var(--status-green, #2f7d4f); color: var(--status-green, #2f7d4f); } .rv-confirm:hover { background: var(--status-green, #2f7d4f); color: #fff; } .rv-reject-open:hover { border-color: var(--status-red, #b3423a); color: var(--status-red, #b3423a); } .rv-actions button:disabled, .rv-reject-do:disabled, .rv-reason:disabled { opacity: 0.5; cursor: default; } .rv-reject { margin-top: 12px; display: flex; gap: 8px; flex-wrap: wrap; } .rv-reason { flex: 1 1 260px; font-size: 13px; padding: 7px 10px; border: 1px solid var(--border); border-radius: 3px; background: var(--surface, #fff); color: var(--text); } .rv-reject-do { border-color: var(--status-red, #b3423a); color: var(--status-red, #b3423a); } .rv-clear { font-size: 14px; color: var(--status-green, #2f7d4f); font-style: italic; } /* Review surface — section grouping + split reject reasons + deep-link (Eames 57480e66 amendment). */ .rv-section { font-family: 'Cormorant SC', serif; font-size: 12px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--text-muted); margin: 4px 0 10px; padding-bottom: 5px; border-bottom: 1px solid var(--border); } .rv-reject-lab { font-family: ui-monospace, Menlo, monospace; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 4px; width: 100%; } .rv-reject { flex-direction: column; align-items: stretch; } .rv-rej-btn { text-align: left; font-family: 'Lora', Georgia, serif; font-size: 13px; padding: 8px 12px; margin-bottom: 6px; border: 1px solid var(--border); border-radius: 3px; background: var(--surface, #fff); color: var(--text); cursor: pointer; } .rv-rej-btn:hover { border-color: var(--status-red, #b3423a); color: var(--status-red, #b3423a); } .rv-rej-btn:disabled { opacity: 0.5; cursor: default; } /* ── Dispatch Monitor (Eames SP d53d6df6) ───────────────────────────────────── A glance panel. ACCESSIBILITY IS THE BINDING CONSTRAINT, not a polish item: Reg reads at reduced contrast, and a status you have to squint at defeats the entire purpose of a panel whose value is reading state at a glance. So every state carries a SOLID FILL and a FIRM BORDER — never a faint tint — and colour is never the only channel: each state is paired with a glyph and a word, so it survives colour-blindness and greyscale printing too. */ .dm-wrap { margin: 0.75rem 0 0; } .dm-toggle { font: inherit; font-size: 0.82rem; letter-spacing: 0.04em; text-transform: uppercase; padding: 0.35rem 0.7rem; border: 1px solid currentColor; border-radius: 3px; background: transparent; cursor: pointer; } .dm-toggle[aria-expanded="true"] { background: #1f2937; color: #fff; border-color: #1f2937; } .dm-panel { margin-top: 0.6rem; border: 1px solid #cbd2d9; border-radius: 4px; overflow-x: auto; } .dm-panel[hidden] { display: none; } .dm-table { width: 100%; border-collapse: collapse; font-size: 0.86rem; } .dm-table th, .dm-table td { padding: 0.4rem 0.6rem; text-align: left; border-bottom: 1px solid #e5e7eb; } .dm-table th { font-weight: 600; background: #f3f4f6; white-space: nowrap; } .dm-table tr:last-child td { border-bottom: 0; } /* Solid fills, firm borders, glyph + word. Never colour alone. */ .dm-state { display: inline-block; padding: 0.1rem 0.5rem; border-radius: 3px; font-weight: 600; white-space: nowrap; border: 1px solid; } .dm-completed { background: #10643a; color: #fff; border-color: #0b4326; } .dm-failed { background: #9b1c1c; color: #fff; border-color: #6d1414; } .dm-partial { background: #b45309; color: #fff; border-color: #7c3a06; } .dm-pending, .dm-in_progress { background: #374151; color: #fff; border-color: #1f2937; } /* NULL source_count is not zero - it means the extractor has not run. Rendering it as 0 would say a completed dispatch found nothing, which is a different and false claim. */ .dm-processing { font-style: italic; opacity: 0.85; } .dm-err { display: block; margin-top: 0.15rem; font-size: 0.78rem; color: #6d1414; word-break: break-word; } .dm-note { padding: 0.45rem 0.6rem; font-size: 0.78rem; background: #fffbeb; border-top: 1px solid #e5e7eb; } .dm-status { padding: 0.45rem 0.6rem; font-size: 0.8rem; color: #4b5563; } /* Resolved model, shown next to the engine label. A divergence is highlighted rather than hidden: every current one has a good documented reason, but invisibility is what cost a morning. */ .dm-model { display: block; font-size: 0.74rem; opacity: 0.8; margin-top: 0.1rem; } .dm-model-diverges { opacity: 1; font-weight: 600; color: #7c3a06; } .dm-model-diverges::before { content: "→ "; } .dm-model-unknown { font-style: italic; opacity: 0.6; }