/* dossier-claims.css — the Dossier Page on the new claim/bullet architecture. Eames render spec 1f471bd9 as amended by 7aa98428 (T2). THE PALETTE IS MEASURED AGAINST THIS PAGE'S OWN GROUND, WHICH IS THE WHOLE POINT OF AMENDMENT 2. The spec first carried the BOARD's grounding colours, and the board is dark (--b-bg #1c1f22). This page is light (--bg #FAFAF8). Contrast is a property of a PAIR, never of a colour, and the board's own header says so: colour on the board (#1c1f22) here (#FAFAF8) green #3f8f52 4.2:1 3.8:1 amber #e0a33a 7.5:1 2.1:1 <- unreadable as text So the floors are kept verbatim and the VALUES are re-measured, using the equivalents this surface already carries: green #2f7d4f at 4.8:1, amber #A87820 at 3.8:1. Amber is never a text colour here. It carries as a LEFT RULE and a 10% fill with ordinary dark text on top, which is legible at any contrast sensitivity because the meaning does not live in the ink. THE FLOORS, binding (reduced contrast discrimination after a cataract operation): - nothing meaning-bearing fainter than #82857f. Secondary text here is --text-muted #6B6962, which is darker than the floor rather than at it. - nothing under 14px. Secondary markers are quiet by being SMALL-BUT-NOT-SMALLER-THAN-14px and by sitting in calm colour, never by fading toward the background. - claim text is the primary read: 17px. There is no font-size below 14px in this file, and that is worth checking after any edit: the old dossier.css had about twenty rules underneath it, one at 9px. */ .dc-shell { max-width: 860px; margin: 0 auto; padding: 28px 24px 80px; } /* ── the site menu (line 19cb87b6) ────────────────────────────────────────────────────────────── THE SAME MENU AS work.html AND library.html, AND THE VALUES ARE RE-MEASURED RATHER THAN COPIED. That is the whole lesson of this file's header, applied to itself: those pages sit on #faf8f2 and this one on #FAFAF8, so their tokens had to be checked against THIS ground before being reused, not assumed to travel. Measured with tests/lib/contrast.mjs, and asserted in navigator_menu_test: --text-muted #6B6962 on #FAFAF8 5.26:1 the resting link --accent #1B4D4D on #FAFAF8 9.07:1 hover and the current page Both clear the 4.5:1 floor, so the menu needs no colour of its own. The bottom rule is --border at 1.28:1 and carries NO meaning - it separates, and the current page is marked in --accent, above. ALIGNED TO .dc-shell BY REPEATING ITS BOX, not by living inside it: the shell is written by the renderer into #dc-root and the menu must outlive a failed render. 860px and 24px are the two numbers that must agree; they are one line apart so a change to one is in front of whoever changes the other. 14px, LIKE THE OTHER TWO PAGES, and this file's own floor says the same thing for the same reason - a menu is an affordance, and shrinking it to look calm is the move that fading it would be. THE FAMILY DIFFERS ON PURPOSE. work.html and library.html ask for 'Cormorant SC', which no page in this navigator actually loads - it has always resolved to the Georgia fallback. This page loads Cormorant Garamond, so it names the font it has rather than inheriting a request that never landed. */ /* THE NAV ROW MOVED TO ../site-chrome.css - one component on all five pages (Eames 02518e7a). *** THIS PAGE WAS THE THIRD IMPLEMENTATION, NOT THE SECOND: it used Cormorant GARAMOND where the other four use Cormorant SC, so its menu was set in a different typeface entirely. That is the drift the shared file exists to end. Only the geometry stays here - this page is centred at 860px where index is a full-bleed bar. */ /* THE CHROME IS FULL-BLEED ON ONE GUTTER NOW (Eames 90eaf7af), so it no longer follows this page's 860px column - that difference was half of the horizontal jump Reg saw crossing pages. */ .sitenav + #dc-root .dc-shell { padding-top: 18px; } /* ── header ─────────────────────────────────────────────────────────────────────────────────── */ .dc-kicker { font-family: 'Cormorant Garamond', serif; font-size: 15px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 6px; } .dc-title { font-family: 'Cormorant Garamond', serif; font-size: 34px; line-height: 1.15; font-weight: 500; color: var(--text); margin: 0 0 10px; } .dc-title.is-untitled { color: var(--text-muted); font-style: italic; } .dc-meta { font-size: 14px; color: var(--text-muted); display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: baseline; } .dc-meta .dot { opacity: 0.6; } .dc-rule { height: 1px; background: var(--border); margin: 22px 0 26px; } /* ── the honest line where the Ask panel used to be (Eames amendment 5) ───────────────────────── The interrogation stack grounds on claim_on_fact edges and this dossier has none, so the panel would withhold every line on an 85%-grounded dossier. Hidden, and SAID, because a djinn that withholds everything reads as a broken system rather than as a correct refusal. */ .dc-ask-absent { font-size: 14px; line-height: 1.5; color: var(--text-muted); border: 1px solid var(--border-lt); border-left: 3px solid var(--border); background: var(--panel-bg); border-radius: 3px; padding: 12px 14px; margin-bottom: 26px; } /* ── questions: the spine ───────────────────────────────────────────────────────────────────── */ .dc-question { margin-bottom: 40px; } .dc-q-head { display: flex; gap: 12px; align-items: baseline; margin-bottom: 4px; } .dc-q-num { font-family: 'Cormorant Garamond', serif; font-size: 22px; color: var(--text-muted); } .dc-q-text { font-family: 'Cormorant Garamond', serif; font-size: 24px; line-height: 1.25; font-weight: 500; color: var(--text); margin: 0; } .dc-q-count { font-size: 14px; color: var(--text-muted); margin: 0 0 16px 34px; } /* ── a claim ────────────────────────────────────────────────────────────────────────────────── */ .dc-claim { border: 1px solid var(--border-lt); border-left-width: 3px; border-radius: 3px; background: var(--surface); padding: 14px 16px; margin-bottom: 12px; } /* PROVENANCE LIVES IN THE LEFT RULE, not in the claim's own ink. Claim text stays full-strength #1C1C1A in every state, so the primary read never pays for the signal. */ .dc-claim.is-grounded { border-left-color: #2f7d4f; } .dc-claim.is-reasoned { border-left-color: #A87820; background: rgba(168, 120, 32, 0.05); } .dc-claim.is-undeclared { border-left-color: var(--border); } .dc-claim-text { font-size: 17px; line-height: 1.55; color: var(--text); margin: 0 0 10px; } .dc-marks { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; } /* The provenance mark is a WORD as well as a colour. Colour reinforces; it never carries alone. */ .dc-prov { font-size: 14px; font-weight: 500; padding: 2px 8px; border-radius: 2px; } .dc-prov-grounded { color: #2f7d4f; border: 1px solid rgba(47, 125, 79, 0.45); } .dc-prov-reasoned { color: var(--text); background: rgba(168, 120, 32, 0.16); border: 1px solid rgba(168, 120, 32, 0.55); } .dc-prov-undeclared { color: var(--text-muted); border: 1px solid var(--border); } /* CERTAINTY IS A SECOND AXIS AND MUST NOT BORROW THE FIRST ONE'S COLOUR (spec: folding them corrupts the read). An assertion can be perfectly well anchored. So this marker is neutral in every state and differs from its neighbour by WEIGHT and BORDER, never by hue. */ .dc-cert { font-size: 14px; color: var(--text-muted); border: 1px dashed var(--border); padding: 2px 8px; border-radius: 2px; } .dc-cert-assertion { border-style: solid; color: var(--text); } .dc-drill { font-family: inherit; font-size: 14px; color: var(--text-muted); background: none; border: none; border-bottom: 1px solid var(--border); padding: 2px 0; cursor: pointer; } .dc-drill:hover, .dc-drill:focus-visible { color: var(--text); border-bottom-color: var(--text); } .dc-drill[aria-expanded="true"] { color: var(--text); } .dc-claim :focus-visible, .dc-level3 :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* ── level 2: the evidence, or the seam ─────────────────────────────────────────────────────── */ .dc-level2 { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border-lt); } .dc-l2-head { font-size: 14px; color: var(--text-muted); margin-bottom: 10px; } .dc-bullet { padding: 10px 0; border-top: 1px solid var(--border-lt); } .dc-bullet:first-of-type { border-top: none; } .dc-bullet-text { font-size: 15px; line-height: 1.5; color: var(--text); margin: 0 0 8px; } /* The anchor quote is the source's own words and is set as such: serif, on its own surface. A badge asserts; a quote demonstrates. */ .dc-quote { font-family: 'Lora', Georgia, serif; font-size: 15px; line-height: 1.6; color: var(--text); background: var(--panel-bg); border-left: 2px solid var(--border); margin: 0 0 8px; padding: 10px 14px; } .dc-trim { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; font-size: 14px; color: var(--text-muted); } .dc-tier { font-size: 14px; font-weight: 500; color: var(--text); border: 1px solid var(--border); border-radius: 2px; padding: 1px 6px; } /* Fact-grain verification state, secondary and at the level where the fact is actually on screen. It is NOT allowed to contradict the level-1 provenance colour silently: amendment 3 is with Theo, and until he rules this shows the substrate's own word and nothing more. */ .dc-vstate { font-size: 14px; color: var(--text-muted); } .dc-doc { font-size: 14px; color: var(--text-muted); } .dc-doc a { color: var(--accent); } /* Parent claims, for a reasoned claim. The seam is the point: these are themselves grounded. */ .dc-parent { padding: 10px 0; border-top: 1px solid var(--border-lt); } .dc-parent:first-of-type { border-top: none; } .dc-parent-text { font-size: 15px; line-height: 1.5; color: var(--text); margin: 0 0 6px; } /* ── level 3: the source ────────────────────────────────────────────────────────────────────── */ .dc-level3 { margin-top: 10px; border: 1px solid var(--border-lt); border-radius: 3px; background: var(--bg-dim, #F0EDE6); padding: 12px 14px; } .dc-l3-head { font-size: 14px; color: var(--text-muted); margin-bottom: 8px; } .dc-extract { font-family: 'Lora', Georgia, serif; font-size: 15px; line-height: 1.65; max-height: 340px; overflow-y: auto; background: var(--surface); border: 1px solid var(--border-lt); border-radius: 2px; padding: 12px 14px; } .dc-extract .ctx { color: var(--text-muted); } /* The located span, marked NEUTRALLY. Neither green nor amber: both are spoken for by the provenance axis, and a third meaning wearing a first-axis colour is how a reader learns to distrust the whole scheme. */ .dc-extract .hit { color: var(--text); font-weight: 500; background: #EFEBE0; box-shadow: 0 0 0 2px #EFEBE0; border-radius: 1px; } .dc-l3-foot { font-size: 14px; color: var(--text-muted); margin-top: 8px; display: flex; flex-wrap: wrap; gap: 6px 10px; } .dc-l3-note { font-size: 14px; color: var(--text-muted); } /* ── editing, which is superseding ────────────────────────────────────────────────────────────── The label is part of the mechanism, not decoration around it: the control has to say that the current text survives, or a reader reasonably assumes Save overwrites and never looks for the history. */ .dc-editor { margin-top: 12px; padding: 12px; border: 1px solid var(--border); border-radius: 3px; background: var(--panel-bg); } .dc-edit-label { display: block; font-size: 14px; line-height: 1.45; color: var(--text-muted); margin-bottom: 8px; } .dc-edit-text { width: 100%; box-sizing: border-box; font-family: 'Lora', Georgia, serif; font-size: 16px; line-height: 1.5; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: 2px; padding: 10px 12px; resize: vertical; } .dc-edit-text:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; } .dc-edit-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 10px; } .dc-edit-save { font-family: inherit; font-size: 14px; color: var(--btn-text, #FAFAF8); background: var(--btn); border: 1px solid var(--btn); border-radius: 2px; padding: 7px 14px; cursor: pointer; } .dc-edit-save:disabled { opacity: 0.55; cursor: default; } .dc-edit-msg { font-size: 14px; color: var(--text-muted); } /* A REFUSAL IS NOT A FAULT. "The text is unchanged" and "that claim is already superseded" are the mechanism working; they read as information, not as an error the reader must fear. Only genuine breakage gets the red, and it gets it in .dc-error. */ .dc-edit-msg.is-refusal { color: var(--text); } .dc-claim.is-just-edited { box-shadow: 0 0 0 2px rgba(27, 77, 77, 0.35); } /* ── history ────────────────────────────────────────────────────────────────────────────────── */ .dc-history { margin-top: 12px; padding: 10px 12px; border-left: 2px solid var(--border); background: var(--panel-bg); } .dc-hist-item { font-size: 15px; line-height: 1.5; color: var(--text); padding: 6px 0; border-top: 1px solid var(--border-lt); } .dc-hist-item:first-child { border-top: none; } .dc-hist-when { font-size: 14px; color: var(--text-muted); } /* ── states ─────────────────────────────────────────────────────────────────────────────────── */ .dc-status { font-size: 15px; color: var(--text-muted); padding: 40px 0; text-align: center; } .dc-error { font-size: 15px; color: #9b1c1c; border: 1px solid rgba(155, 28, 28, 0.35); background: rgba(155, 28, 28, 0.05); border-radius: 3px; padding: 14px 16px; } .dc-empty { font-size: 15px; color: var(--text-muted); font-style: italic; } @media (max-width: 620px) { .dc-shell { padding: 20px 16px 60px; } .dc-title { font-size: 28px; } .dc-q-text { font-size: 21px; } }