/* =========================================================================== xresearch.css — the xResearch sub-brand DESIGN_CONTRACT.md §18.1, locked by A7-2026-08-04. SCOPE. This file is loaded by files under mockup/xresearch/ and by NO other page in the package. Nothing in here is a brand.css token, and no brand.css token is redefined here: this is a parallel system, not an override. The fence runs the other way too — §18.1.2 clause 4 — so none of these hex values may appear on a marketing page, in a comment, a , an og: string, an alt attribute or a data-track value. THE TEAL RULING (§18.1.2). --xr-accent #0B6E61 is a dark, desaturated green-teal used as an ink. SENSE §1.3 deprecates the bright cyan-teals (#21DED2, #00B4A8, #00D4C8) on two stated grounds: they fight the royal→violet gradient, and they fail contrast over white. Neither reaches this hue. There is no gradient anywhere under xresearch/ (§18.1.5), and #0B6E61 measures 6.15:1 on #FFFFFF and 5.67:1 on --xr-paper where #21DED2 measures 1.69:1. This is a recorded sub-brand ruling, not drift. A sweep that finds #0B6E61 in this file has found the thing A7 authorised. TWO CORRECTIONS MADE AGAINST THE REFERENCE IMPLEMENTATION (learning_reports/student_*.html), not ported from it: 1. The `cites` edge is #6E7C79, not --xr-faint #8A9995. #8A9995 measures 2.74:1 on paper and fails WCAG 2.1 1.4.11 for a line a reader has to follow. #6E7C79 measures 4.02:1. All four edge colours measure 4.02 / 6.69 / 5.67 / 4.10 on paper; all clear 3:1. 2. --xr-faint IS BANNED AS A TEXT COLOUR, exactly as §7.5 bans the marketing package's mid-grey, at almost exactly the same measured failure. It is a hairline-and-icon token. All metadata text — .xr-meta, .xr-secnum, node type tags — is --xr-muted (5.18:1 on paper). NOTE: §18.1.4's closing paragraph describes the section number as --xr-faint while its own scale table specifies --xr-muted. The table and the ban agree, so --xr-muted is what ships; the discrepancy is reported rather than silently resolved. LIGHT ONLY SHIPS (G-50). The reference implementation carries a dark ramp. It is recorded verbatim at §18.1.3 and is deliberately NOT placed here, pending a contrast matrix against all four edge colours. Do not add a prefers-color-scheme block to this file without that amendment. ZERO EXTERNAL REQUESTS. No CSS import, no font link, no remote url(). Both type stacks are system-resident, which is the point: a campus network that blocks webfonts renders this library pixel-identically. =========================================================================== */ :root{ /* surfaces */ --xr-paper: #F5F6F5; /* page ground — warm off-white, the reading surface */ --xr-surface: #FFFFFF; /* cards, panels, the graph canvas */ --xr-surface-2: #FBFCFB; /* recessed blocks: pull-quotes, source records */ /* ink */ --xr-ink: #17211F; /* body and headings */ --xr-muted: #5B6B67; /* deks, captions, ALL metadata text */ --xr-faint: #8A9995; /* hairlines and icons ONLY — never text */ --xr-line: #E3E7E5; /* hairlines, rules, borders */ /* accent */ --xr-accent: #0B6E61; /* green-teal — eyebrows, links, the `extends` edge */ --xr-accent-soft: #0b6e611a; /* 10% wash — tags, quote grounds */ /* the typed-edge family (§18.5) — CATEGORY colours, never status colours */ --xr-edge-cites: #6E7C79; --xr-edge-measures: #1C5D7A; --xr-edge-extends: #0B6E61; --xr-edge-contradicts:#B4622B; /* reserved, DELIBERATELY UNUSED — declared so nobody reaches for it to style the `contradicts` edge. Rust reads as a category; red reads as a fault. */ /* A8-2026-08-04 §19.7.4 · the FIFTH edge type. Plum. Measured 5.84:1 on --xr-paper, clearing the 3:1 non-text floor and 4.5:1 as well. It is NOT one of the marketing accent tokens under any name: it is a hex minted for this surface, and §18.1.5's ban on those tokens inside xresearch/** is unchanged. (The token names are deliberately NOT written out here — §18.8 row 10 greps this directory for them and a comment must not be the thing that fails it.) It is maximally separable from rust, deep blue, green-teal and grey-green at the strokes this graph draws. A CATEGORY, NOT an alert — the same rule that governs --xr-edge-contradicts. */ --xr-edge-anticipates:#7A4E8C; --xr-caution: #A23B2E; --xr-shadow: 0 1px 2px rgba(20,32,30,.04), 0 8px 24px -12px rgba(20,32,30,.14); /* type — three scoped departures from SENSE, each recorded at §18.1.4 */ --xr-font-display:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif; --xr-font-body: system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; --xr-font-mono: "SFMono-Regular",ui-monospace,"Cascadia Code",Menlo,Consolas,monospace; /* A11-2026-08-04 · the height of the sticky top bar, declared once. Three things depend on it and they must not drift apart: the sticky offset of the section rail, the scroll-margin that keeps a jumped-to heading out from under the bar, and the rail's own max-height. .xr-top-inner is .85rem padding either side of a 44px brand target = 71.2px; 72 rounds it up so a heading never lands a hairline under the rule. */ --xr-top-h: 72px; } /* --- reset and ground ---------------------------------------------------- */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{ margin:0;background:var(--xr-paper);color:var(--xr-ink); font-family:var(--xr-font-body);font-size:1rem;line-height:1.7; -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility; } img{max-width:100%;height:auto} /* Focus, per §5.1 adapted to the sub-brand. Never removed, never invisible. */ a:focus-visible,button:focus-visible,summary:focus-visible,[tabindex]:focus-visible{ outline:2px solid var(--xr-accent);outline-offset:2px;border-radius:3px; } .xr-skip{ position:fixed;left:-9999px;top:0;z-index:60; background:var(--xr-surface);color:var(--xr-ink);border:1px solid var(--xr-line); padding:.75rem 1.1rem;border-radius:0 0 8px 0;font-weight:650;text-decoration:none; } .xr-skip:focus{left:0} .xr-wrap{max-width:1040px;margin:0 auto;padding:0 clamp(16px,4vw,40px)} /* A11-2026-08-04 · ONE WRAP FOR BOTH FORMS. The essays used to sit in a 760px wrap of their own, on the reasoning that an essay is read straight through and a paper is consulted. At 1920 that produced a 600px strip of text stranded in 1,300px of empty page, with the wordmark above it left-aligned to a 1040px bar it no longer shared. Both forms now sit in the same 1040px wrap and the same section-rail grid: the reading MEASURE is unchanged and still set by .xr-article p, and the rail fills the left margin that was empty. .xr-wrap-essay and .xr-prose are deleted with the markup that carried them. */ /* --- chrome: one top bar, one foot (§18.4.6) ----------------------------- */ /* No primary nav, no CTA button, no burger, no banner, no pillar bar. A reader who arrived to check a citation is not to be sold to mid-sentence. */ .xr-top{border-bottom:1px solid var(--xr-line);background:var(--xr-surface)} /* A11-2026-08-04 · THE BAR STICKS ON A READING PAGE. A working paper is 5,000-8,000 words. Once the reader is inside section 4 the way back to the library is 6,000 words above them, and the wordmark that tells them whose research they are reading has scrolled away with it. Scoped to .xr-docpage — the pages this generator writes — so it cannot reach xresearch/index.html, whose two-column results layout does its own viewport arithmetic. */ .xr-docpage .xr-top{position:sticky;top:0;z-index:30} /* Every anchor target on a reading page clears the bar when jumped to. Cheaper and better supported than scroll-padding on the scroll container, and it covers the h3 deep links the delivered Markdown already carries. */ .xr-docpage [id]{scroll-margin-top:calc(var(--xr-top-h) + 1rem)} /* A landscape phone has no vertical budget to give a bar 72px of it. */ @media (max-height:560px){.xr-docpage .xr-top{position:static}} .xr-top-inner{ max-width:1040px;margin:0 auto;padding:.85rem clamp(16px,4vw,40px); display:flex;align-items:center;gap:.85rem;flex-wrap:wrap; } .xr-brand{display:inline-flex;align-items:center;min-height:44px;text-decoration:none} .xr-brand img{height:32px;width:auto;display:block} .xr-brandmark{ font-family:var(--xr-font-mono);font-size:.78rem;font-weight:600;letter-spacing:.08em; color:var(--xr-muted);padding-left:.85rem;border-left:1px solid var(--xr-line); align-self:center; } .xr-top nav{margin-left:auto} .xr-top nav a{ display:inline-flex;align-items:center;min-height:44px;padding:0 .2rem; font-family:var(--xr-font-mono);font-size:.78rem;font-weight:600;letter-spacing:.02em; color:var(--xr-accent);text-decoration:none; } .xr-top nav a:hover{text-decoration:underline;text-underline-offset:3px} .xr-foot{ margin-top:clamp(56px,7vw,88px);border-top:1px solid var(--xr-line); background:var(--xr-surface); } .xr-foot-inner{ max-width:1040px;margin:0 auto;padding:1.4rem clamp(16px,4vw,40px) 2.2rem; display:flex;flex-wrap:wrap;gap:.4rem 1.6rem;align-items:center; font-family:var(--xr-font-mono);font-size:.74rem;color:var(--xr-muted); } .xr-foot-inner a{ color:var(--xr-accent);text-decoration:none; display:inline-flex;align-items:center;min-height:44px; } .xr-foot-inner a:hover{text-decoration:underline;text-underline-offset:3px} /* --- type scale, locked at §18.1.4 --------------------------------------- */ .xr-eyebrow{ font-family:var(--xr-font-mono);font-size:.68rem;font-weight:600;line-height:1; letter-spacing:.16em;text-transform:uppercase;color:var(--xr-accent);margin:0; } h1{ font-family:var(--xr-font-display);font-weight:600; font-size:clamp(1.9rem,4vw,2.7rem);line-height:1.08;letter-spacing:-.01em; margin:.5rem 0 .3rem;text-wrap:balance; } h2{ font-family:var(--xr-font-display);font-weight:600; font-size:clamp(1.45rem,2.6vw,1.9rem);line-height:1.15;letter-spacing:-.01em; margin:0;text-wrap:balance; } h3{ font-family:var(--xr-font-display);font-weight:600;font-size:1.32rem; line-height:1.25;letter-spacing:-.01em;margin:2.1rem 0 .5rem;text-wrap:balance; } h4{ font-family:var(--xr-font-body);font-weight:650;font-size:1rem;line-height:1.35; margin:1.6rem 0 .4rem; } p{margin:0 0 1rem} strong{font-weight:650;color:var(--xr-ink)} a{color:var(--xr-accent);text-underline-offset:3px} a:hover{text-decoration-thickness:2px} .xr-dek{ font-size:1.05rem;line-height:1.55;color:var(--xr-muted);max-width:60ch;margin:.75rem 0 0; } .xr-meta{ font-family:var(--xr-font-mono);font-size:.78rem;font-weight:500;line-height:1.5; letter-spacing:.02em;color:var(--xr-muted);margin:0; } .xr-secnum{ font-family:var(--xr-font-mono);font-size:.8rem;font-weight:600;line-height:1; color:var(--xr-muted); } /* --- document header (uniform across all twelve, §18.4.3) ---------------- */ .xr-dochead{padding:clamp(28px,4vw,52px) 0 0} .xr-docid{ font-family:var(--xr-font-mono);font-size:.82rem;font-weight:600;letter-spacing:.06em; color:var(--xr-muted);margin:.55rem 0 0; } /* --- the document metadata block (A11-2026-08-04) ------------------------ */ /* SUPERSEDES .xr-headmeta + .xr-doclinks, which are deleted with the markup they styled. Both were flex rows, and a flex row is the wrong container for a label/value pair: "Rests on the working paper" and its link were two flex items that each wrapped independently, so the essay header rendered a ragged two-column mini-layout with the label broken over two lines and the title broken over two more. §18.4.3's field list is unchanged and in the same order — date, review type, companion essay, source records. What changes is that each field is now a named row in a real
, so the label column is a column and the value column is a column. */ .xr-docmeta{margin:1.7rem 0 0;padding:0;border-top:1px solid var(--xr-line)} .xr-docmeta > div{ display:grid;grid-template-columns:minmax(0,1fr);gap:.1rem; padding:.6rem 0;border-bottom:1px solid var(--xr-line); } /* .xr-headrule already closes the header. Two hairlines a few pixels apart is not emphasis, it is a mistake. */ .xr-docmeta > div:last-child{border-bottom:0} .xr-docmeta dt{ font-family:var(--xr-font-mono);font-size:.68rem;font-weight:600;line-height:1.5; letter-spacing:.12em;text-transform:uppercase;color:var(--xr-muted);margin:0; } .xr-docmeta dd{margin:0;font-size:.95rem;line-height:1.6;color:var(--xr-ink)} /* §5.1's 44px floor, carried by the link rather than by the row: a row of plain text does not need to be 44px tall, and making it so would give the header the airiness of a settings screen. */ .xr-docmeta dd > a{display:inline-flex;align-items:center;min-height:44px;font-weight:600} .xr-docmeta .xr-reviewtype{margin:.2rem 0 .1rem} @media (min-width:620px){ .xr-docmeta > div{ grid-template-columns:11.5rem minmax(0,1fr);gap:.1rem 1.6rem;align-items:baseline; } .xr-docmeta dt{grid-column:1;padding-top:.15rem} /* A row can carry several values — an essay that rests on three papers is one relationship with three objects, not three relationships. Pinning the values to column 2 keeps the second and third under the first instead of wrapping back under the label. */ .xr-docmeta dd{grid-column:2} } /* The single most important honesty control on this surface. It renders identically in the header of all six paper pages and is not permitted to vary (§18.4.3). It is not a badge and it is not a disclaimer sentence about the drawing — the badge regime is retired (A6). It is a statement of what kind of document the reader is holding. */ .xr-reviewtype{ font-family:var(--xr-font-mono);font-size:.76rem;line-height:1.55;color:var(--xr-ink); background:var(--xr-surface-2);border:1px solid var(--xr-line); border-left:3px solid var(--xr-accent); padding:.7rem .9rem;border-radius:0 8px 8px 0;margin:1.1rem 0 0;max-width:60ch; } .xr-headrule{border:0;border-top:1px solid var(--xr-line);margin:1.6rem 0 0} /* --- paper layout: sticky section nav + prose ---------------------------- */ .xr-doc{display:block} .xr-toc{display:none} @media (min-width:1000px){ .xr-doc{display:grid;grid-template-columns:210px minmax(0,1fr);gap:clamp(28px,4vw,56px);align-items:start} .xr-toc{ display:block;position:sticky;top:calc(var(--xr-top-h) + 1.25rem); /* The offset that aligns "Sections" with the eyebrow beside it is a MARGIN, not padding: margin sits outside the sticky box, so it does its alignment job at the top of the page and then costs nothing once the rail pins under the bar. */ margin-top:clamp(28px,4vw,52px); padding:0 0 1.4rem; max-height:calc(100vh - var(--xr-top-h) - 3rem);overflow-y:auto; } .xr-toclabel{ font-family:var(--xr-font-mono);font-size:.66rem;font-weight:600;letter-spacing:.14em; text-transform:uppercase;color:var(--xr-muted);margin:0 0 .5rem; } .xr-toc ol{list-style:none;margin:0;padding:0} .xr-toc li{margin:0} .xr-toc a{ display:flex;gap:.55rem;align-items:baseline;min-height:44px;padding:.35rem 0; font-size:.86rem;line-height:1.35;color:var(--xr-ink);text-decoration:none; border-bottom:1px solid var(--xr-line); } .xr-toc a:hover{color:var(--xr-accent)} .xr-toc a .n{ font-family:var(--xr-font-mono);font-size:.72rem;font-weight:600;color:var(--xr-muted); flex:0 0 1.2rem; } /* An essay's sections are not numbered in the source, so the rail on an essay carries no number column. A column of identical "·" bullets is not a numbering scheme, it is noise standing where information should be. */ .xr-toc--plain a{gap:0} } /* Below 1000px the nav is an ordinary jump list at the top of the document, not a drawer. It works with JS off because it is anchors and nothing else. */ .xr-toc-inline{ margin:1.6rem 0 0;padding:.9rem 1rem;background:var(--xr-surface); border:1px solid var(--xr-line);border-radius:12px; } .xr-toc-inline summary{ font-family:var(--xr-font-mono);font-size:.72rem;font-weight:600;letter-spacing:.1em; text-transform:uppercase;color:var(--xr-muted);cursor:pointer; min-height:44px;display:flex;align-items:center; } .xr-toc-inline ol{list-style:none;margin:.4rem 0 0;padding:0} .xr-toc-inline a{ display:flex;gap:.6rem;min-height:44px;align-items:center; font-size:.92rem;color:var(--xr-ink);text-decoration:none; border-top:1px solid var(--xr-line); } .xr-toc-inline a .n{font-family:var(--xr-font-mono);font-size:.74rem;color:var(--xr-muted)} @media (min-width:1000px){.xr-toc-inline{display:none}} /* --- section heads: mono number, display serif, baseline rule ------------ */ .xr-sec{margin-top:clamp(38px,5vw,58px);scroll-margin-top:1.5rem} .xr-sec-head{ display:flex;align-items:baseline;gap:.7rem; border-bottom:1px solid var(--xr-line);padding-bottom:.55rem;margin-bottom:1.15rem; } /* --- prose furniture ----------------------------------------------------- */ /* A11-2026-08-04 · THE MEASURE, STATED ONCE AND APPLIED TO BOTH FORMS. The essays already carried 68ch through .xr-prose; the papers did not, so a paper paragraph ran the full 682px column — measured at roughly 94 characters a line against the 60-75 that long-form reading has settled on. The lists in this same file had been capped at 68ch since the first build, which is the tell: the cap was always intended and the paragraphs were the omission. Tables, reference records and the graph opt out below, as they already did — a record is not prose and does not take a prose measure. */ .xr-article p{max-width:68ch} .xr-article blockquote p{max-width:none} .xr-article ul,.xr-article ol{margin:0 0 1.1rem;padding-left:1.35rem;max-width:68ch} .xr-article li{margin:0 0 .5rem} .xr-article blockquote{ margin:1.3rem 0;padding:.85rem 1.1rem;max-width:64ch; background:var(--xr-surface-2);border-left:3px solid var(--xr-accent); border-radius:0 10px 10px 0; } .xr-article blockquote p{margin:0;font-family:var(--xr-font-display);font-size:1.12rem; line-height:1.5;font-style:italic} .xr-quote{font-family:var(--xr-font-display);font-size:1.12rem;line-height:1.5;font-style:italic} code{font-family:var(--xr-font-mono);font-size:.88em;background:var(--xr-accent-soft); padding:.1em .35em;border-radius:4px} sub,sup{line-height:0} /* Tables carry study-level detail and are wide. They scroll inside their own container; the page body never scrolls horizontally. */ .xr-tablewrap{ overflow-x:auto;margin:1.4rem 0;border:1px solid var(--xr-line);border-radius:12px; background:var(--xr-surface); } .xr-tablewrap table{border-collapse:collapse;width:100%;min-width:640px;font-size:.9rem} .xr-tablewrap th,.xr-tablewrap td{ text-align:left;vertical-align:top;padding:.7rem .85rem;border-bottom:1px solid var(--xr-line); line-height:1.5; } .xr-tablewrap th{ font-family:var(--xr-font-body);font-size:.8rem;font-weight:650;color:var(--xr-muted); text-transform:uppercase;letter-spacing:.05em;background:var(--xr-surface-2); } .xr-tablewrap tr:last-child td{border-bottom:0} /* --- figures ------------------------------------------------------------- * A12-2026-08-05. The corpus embeds desktop/mobile SVG pairs as raw /; the converter now passes them through and pairs each one with its caption as a real
. The figure is NOT held to the 68ch prose measure. A four-stage dependency flow or an eleven-by-eleven overlap matrix is a record, like a table, and the same reasoning that widened .xr-reflist widens this. The caption IS held to the measure, because a caption is prose and it is frequently the longest single block on the page -- the display register's caption contract requires it to state the proposition, every visual channel, the source, the boundary, and where the linear text alternative lives. No max-width is imposed on the image: each SVG carries its own, authored with the figure (720px, 540px, 360px), and overriding it here would second-guess a decision the display register already recorded as passing its 320px clipping check. */ .xr-article figure.xr-figure{margin:1.6rem 0;padding:0;max-width:none} .xr-figure picture,.xr-figure img{display:block} .xr-figure img{max-width:100%;height:auto} .xr-figure figcaption{ margin:.85rem 0 0;max-width:68ch;font-size:.86rem;line-height:1.6; color:var(--xr-muted); } .xr-figure figcaption strong{color:var(--xr-ink);font-weight:650} /* A12-2026-08-05 REVIEW. The mobile SVGs are authored on a 360px canvas, and two captions state a testable property: text stays at or above 11 rendered pixels at a 320px display. XRESEARCH_FINAL_CORPUS_QA verified them at "exact 320-pixel mobile content width" -- but .xr-wrap's 16px gutters give a 320px viewport a 273px content box, not 320. Every 360-wide asset was therefore rendering at 0.76 rather than 0.89, and 13px source type measured 9.9px: below the floor the corpus itself publishes. The claim was right; the page was not giving the figure the width the claim assumes. Below the same 640px breakpoint the corpus's own uses, the figure reclaims the gutter and is measured against the full display width. The caption keeps the gutter, because a caption is prose and stays in the measure. Only figures move; the repository UI is untouched. */ @media (max-width:640px){ .xr-article figure.xr-figure{margin-left:-16px;margin-right:-16px} .xr-figure figcaption{padding-left:16px;padding-right:16px} } /* ========================================================================== THE APPARATUS SCALE — A13-2026-08-06, owner review R1 + R2 ========================================================================== R1 asked for notes under images and tables to be "a smaller, visually distinct style from body text". R2 asked the same of disclaimers, and gave the reason: "they visually are different and right now they confuse with where the disclaimer ends and where the essay actually starts." Those are one problem. This library was setting APPARATUS — the writing about the document — in the identical type as the ARGUMENT. On essay-2026-01 the revision note and the essay's first sentence were the same size, the same colour and the same measure, stacked with the same paragraph gap. There was nothing for the eye to catch. So the apparatus is designed once, here, and every member of it inherits the same four moves. A reader learns the signal on the first table note and then recognises a disclaimer on sight: size .82rem against the body's 1rem — one clear step down, still well above the 11px floor the corpus's own figure captions publish colour --xr-muted, the token this file already reserves for "deks, captions, ALL metadata text". Never --xr-faint: line 27 bans it as a text colour and that ban is not relaxed for small type. measure 62ch against the body's 68ch, so an apparatus block is visibly narrower than the column it sits in even before you read it label the leading "Note.", "Source:", "Table 3." run is lifted into the mono face in --xr-ink. Mono is already this file's marker for metadata (.xr-docid, .xr-secnum, .xr-eyebrow); reusing it costs no new vocabulary. The members differ only in how they ATTACH: .xr-note / .xr-caption hang off the object above or below them on a hairline tick, tight to it .xr-notice / .xr-sec-notice / .xr-disclaimer sit in a bounded panel on --xr-surface-2 The panel is what answers R2. A disclaimer no longer ends at a paragraph break the reader has to infer — it ends where its ground ends, and the argument resumes as full-size ink prose on the open page. */ .xr-note,.xr-caption,.xr-disclaimer, .xr-notice-item,.xr-notice-mast,.xr-sec-notice p,.xr-sec-notice li{ font-size:.82rem;line-height:1.6;color:var(--xr-muted); } .xr-article .xr-note,.xr-article .xr-caption,.xr-article .xr-disclaimer, .xr-article .xr-notice-item,.xr-article .xr-sec-notice p{max-width:62ch} .xr-note strong,.xr-caption strong,.xr-disclaimer strong, .xr-notice-item strong,.xr-sec-notice p strong{color:var(--xr-ink);font-weight:650} /* The label run, lifted into mono. .xr-lab is placed by the generator, which is the only place that can tell "*Note.* Authors' synthesis ..." (a short lead, then prose) from "*Table 1. Portfolio evidence map. ...*" (emphasised end to end). A CSS `em:first-child` cannot, and set the whole of the second one in mono. A paragraph with no separable label carries no .xr-lab and keeps its own type. */ .xr-lab{ font-family:var(--xr-font-mono);font-size:.94em;font-style:normal; font-weight:600;letter-spacing:.02em;color:var(--xr-ink); } /* --- notes and captions: hung off their object --------------------------- */ .xr-article .xr-note,.xr-article .xr-caption{ margin:.7rem 0 1.3rem;padding-left:.9rem; border-left:2px solid var(--xr-line); } /* Tight to the table or figure they belong to, in either order. The corpus writes captions above a table and notes below it. */ .xr-article .xr-caption+.xr-tablewrap, .xr-article .xr-caption+figure.xr-figure{margin-top:.45rem} .xr-article .xr-tablewrap+.xr-note, .xr-article figure.xr-figure+.xr-note, .xr-article .xr-note+.xr-note{margin-top:-.5rem} .xr-article .xr-note+.xr-note{padding-top:.45rem} /* --- figure captions join the same scale --------------------------------- */ /* They were already .86rem/--xr-muted, which is where the scale came from. Aligning the remaining three values — size, measure and the hairline tick — is what makes a figure caption and a table note read as ONE kind of object, which is the whole of R1. The measure moves 68ch -> 62ch; the reason the block above gives for holding a caption to a measure at all is unchanged. */ .xr-figure figcaption{ font-size:.82rem;line-height:1.6;max-width:62ch; padding-left:.9rem;border-left:2px solid var(--xr-line); } /* Below the corpus's own 640px breakpoint the figure reclaims the page gutter and the caption keeps it (see the figure block above). The tick has to be added to that gutter, not replace it. */ @media (max-width:640px){ .xr-figure figcaption{padding-left:calc(16px + .9rem);padding-right:16px} } /* --- the notice panel: where apparatus stops and the argument begins ----- */ .xr-article .xr-notice{ margin:1.6rem 0 clamp(30px,4vw,44px); padding:clamp(14px,2vw,18px) clamp(16px,2.2vw,22px) clamp(12px,1.8vw,16px); background:var(--xr-surface-2); border:1px solid var(--xr-line);border-radius:12px; } .xr-notice-label{ font-family:var(--xr-font-mono);font-size:.64rem;font-weight:600;line-height:1; letter-spacing:.14em;text-transform:uppercase;color:var(--xr-muted); margin:0 0 .7rem;padding-bottom:.55rem;border-bottom:1px solid var(--xr-line); } .xr-article .xr-notice-item{margin:0 0 .6rem} .xr-article .xr-notice p:last-child{margin-bottom:0} .xr-notice-head{ font-family:var(--xr-font-mono);font-size:.7rem;font-weight:600; letter-spacing:.08em;text-transform:uppercase;color:var(--xr-ink); margin:.9rem 0 .35rem; } .xr-notice-head:first-of-type{margin-top:0} /* The masthead line the corpus repeats at the top of every document ("HeuriSight xResearch · Working paper · HS-WP-2026-01") is already stated by the eyebrow, the doc id and the top bar. It is published unchanged, in the quietest voice on the page, rather than in body bold above the essay. */ .xr-notice-mast{ font-family:var(--xr-font-mono);font-size:.7rem;font-weight:600; letter-spacing:.04em;color:var(--xr-muted);margin:0 0 .6rem; } .xr-notice-mast strong{font-weight:600;color:var(--xr-muted)} /* A disclaimer that is NOT in the front notice — a loose revision note, an erratum — gets the same ground so it reads as the same kind of object. */ .xr-article .xr-disclaimer{ margin:1.4rem 0;padding:.75rem 1rem;background:var(--xr-surface-2); border:1px solid var(--xr-line);border-radius:10px; } /* An UNNUMBERED disclosure or reuse section is apparatus, and takes the panel. A numbered one is a section of the argument and is untouched. */ .xr-sec-notice{ background:var(--xr-surface-2);border:1px solid var(--xr-line); border-radius:12px;padding:clamp(16px,2.4vw,24px) clamp(16px,2.4vw,26px); margin-top:clamp(30px,4vw,46px); } .xr-sec-notice .xr-sec-head{border-bottom:0;padding-bottom:0;margin-bottom:.5rem} .xr-sec-notice h2{font-size:1.05rem} .xr-sec-notice p:last-child{margin-bottom:0} /* --- inline source links (R5) -------------------------------------------- */ /* A14-2026-08-07 OWNER REVIEW (R5a, R5b). ONE AFFORDANCE, ONE APPEARANCE. The generator resolves a citation against the ledgers; the RAs also wrote source links by hand inside the prose. Both are the same object -- "jump to the source" -- and they were arriving in two different visual languages: the hand-written ones in the library's link colour with a solid underline, the generated ones in body ink on a dotted hairline. The second is not a quieter link; measured against the paper ground it is not a link at all. The dotted rule ran at 2.74:1, and the note/caption/table variant below dropped it to --xr-line at 1.15:1, which is why a reviewer had to zoom to 4x to confirm a citation in a table was clickable. Colour alone would also have been the only distinction from body text (WCAG 1.4.1); there was no colour either. So .xr-cite now carries no override at all: it inherits `a`, which is --xr-accent (5.67:1 on the paper ground, 5.98:1 in a note panel, 6.15:1 in a table) plus the underline, in every context including notes, captions and table cells. The density worry that produced the dotted rule was real and was checked by rendering rather than reasoned about: the papers carry ~35 citations each and read as a paper with citations in it. Reference and source lists are excluded at the generator, not here (see REF_HEAD in build_xresearch_pages.py) -- a bibliography row prints its own DOI as a link, and linking the author name too would put two on one record. */ @media (max-width:520px){ .xr-article .xr-note,.xr-article .xr-caption{padding-left:.7rem} } /* --- reference list ------------------------------------------------------ */ /* Full wrap, not the 68ch prose measure: a reference is a record, not prose. */ .xr-article .xr-reflist{list-style:none;margin:1.2rem 0 0;padding:0;max-width:none} .xr-article .xr-ref{ font-size:.92rem;line-height:1.6;margin:0 0 .85rem; padding-left:1.4em;text-indent:-1.4em; } .xr-ref a{word-break:break-word} /* A19-2026-08-05 REVIEW. The rule above protected the papers' reference lists and nothing else, so a bare DOI printed as its own link text was safe in a
  • and unsafe everywhere else. The essays print their sources as an ordinary
      , and `https://doi.org/10.1177/026553229801500205` is 319px of unbreakable string: at a 320px display it ran past the gutter and took the PAGE BODY with it -- 357px of scrollWidth on `A score is a protocol`, 338px on `A score is not an explanation`. The tables were already given their own scroller for exactly this reason ("the page body never scrolls horizontally"); a URL had simply never been read as the same kind of wide object. `break-word` only acts on a word that would otherwise overflow, so no link that already fits changes at all. */ .xr-article a{overflow-wrap:break-word} /* --- the credibility device (§3 of the build brief) ---------------------- */ /* "Where this evidence runs out" is the reason a reader trusts the rest of the page. It renders with weight, never as a footnote. */ .xr-runsout{ margin-top:clamp(38px,5vw,58px);scroll-margin-top:1.5rem; background:var(--xr-surface);border:1px solid var(--xr-line); border-left:4px solid var(--xr-accent);border-radius:0 14px 14px 0; padding:clamp(20px,3vw,30px) clamp(18px,3vw,32px); box-shadow:var(--xr-shadow); } .xr-runsout .xr-eyebrow{margin-bottom:.4rem} .xr-runsout h2{margin:0 0 .3rem} .xr-runsout p:last-child{margin-bottom:0} .xr-runsout ul,.xr-runsout ol{max-width:64ch} /* --- cross-links, both directions (essay ↔ paper ↔ library) -------------- */ .xr-crosslinks{ margin-top:clamp(38px,5vw,58px);display:grid;gap:.9rem; grid-template-columns:1fr; } @media (min-width:720px){.xr-crosslinks{grid-template-columns:1fr 1fr}} .xr-xl{ display:block;background:var(--xr-surface);border:1px solid var(--xr-line); border-radius:14px;padding:1rem 1.15rem;text-decoration:none;color:var(--xr-ink); min-height:44px; } .xr-xl:hover{border-color:var(--xr-accent)} .xr-xl .k{ font-family:var(--xr-font-mono);font-size:.66rem;font-weight:600;letter-spacing:.1em; text-transform:uppercase;color:var(--xr-muted);display:block; } .xr-xl .t{ font-family:var(--xr-font-display);font-size:1.05rem;font-weight:600;line-height:1.3; display:block;margin-top:.25rem; } .xr-xl .d{font-size:.86rem;color:var(--xr-muted);display:block;margin-top:.25rem} .xr-backlink{ margin-top:1.2rem;font-family:var(--xr-font-mono);font-size:.76rem; } .xr-backlink a{display:inline-flex;align-items:center;min-height:44px;font-weight:600} /* The one permitted button-like affordance on this surface (§18.1.5). */ .xr-json{ display:inline-flex;align-items:center;gap:.5rem;min-height:44px; padding:.5rem .9rem;border:1px solid var(--xr-line);border-radius:10px; background:var(--xr-surface);font-family:var(--xr-font-mono);font-size:.74rem; font-weight:600;color:var(--xr-accent);text-decoration:none; } .xr-json:hover{border-color:var(--xr-accent)} /* =========================================================================== INDEX — masthead, the chain as type, the list =========================================================================== */ .xr-chain{ margin:1.6rem 0 0;padding:1rem 1.15rem;max-width:66ch; background:var(--xr-surface);border:1px solid var(--xr-line);border-radius:14px; color:var(--xr-muted);font-size:.96rem;line-height:1.6; } .xr-chain strong{color:var(--xr-ink)} .xr-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--xr-line)} .xr-row{padding:clamp(18px,2.6vw,26px) 0;border-bottom:1px solid var(--xr-line)} .xr-row-id{ font-family:var(--xr-font-mono);font-size:.78rem;font-weight:600;letter-spacing:.06em; color:var(--xr-muted); } .xr-row h3{margin:.3rem 0 0;font-size:1.32rem} /* 44px minimum on the row's primary target, per §5.1's floor. */ .xr-row h3 a{display:inline-flex;align-items:center;min-height:44px; color:var(--xr-ink);text-decoration:none} .xr-row h3 a:hover{color:var(--xr-accent);text-decoration:underline} .xr-row-essay{margin:.45rem 0 0;display:flex;flex-wrap:wrap;gap:.5rem;align-items:baseline} .xr-tag{ font-family:var(--xr-font-mono);font-size:.62rem;font-weight:600;letter-spacing:.1em; text-transform:uppercase;color:var(--xr-accent);background:var(--xr-accent-soft); padding:.2rem .45rem;border-radius:5px; } .xr-row-essay a{ display:inline-flex;align-items:center;min-height:44px; font-size:.98rem;font-weight:500; } .xr-licenses{ margin:.7rem 0 0;max-width:64ch;font-size:1rem;line-height:1.6; padding-left:.9rem;border-left:2px solid var(--xr-line); } .xr-rowmeta{ margin:.85rem 0 0;display:flex;flex-wrap:wrap;gap:.45rem 1.5rem;align-items:center; font-family:var(--xr-font-mono);font-size:.74rem;color:var(--xr-muted); } .xr-rowmeta .k{color:var(--xr-muted)} .xr-rowmeta .v{color:var(--xr-ink);font-weight:600} .xr-rowmeta a{display:inline-flex;align-items:center;min-height:44px;font-weight:600} .xr-inprogress{ margin:clamp(28px,4vw,44px) 0 0;font-family:var(--xr-font-mono);font-size:.82rem; color:var(--xr-muted); } /* =========================================================================== THE GRAPH (§18.5) — navigation, never decoration ------------------------------------------------------------------------- The nested
        inside
        IS THE SOURCE OF TRUTH. It ships in the HTML. The script builds the SVG from it and closes the
        ; it never removes it. Below 900px the SVG is not built at all and the list stays open. Every rule below is written so the list alone is a complete, readable, keyboard-navigable record with JavaScript off. =========================================================================== */ .xr-graph{ margin:clamp(28px,4vw,44px) 0 0;background:var(--xr-surface); border:1px solid var(--xr-line);border-radius:16px;padding:clamp(16px,2.4vw,24px); } /* The one object on this page allowed out of the 1040px reading measure. A constellation you navigate needs room to be loose, and this is navigation, not prose: the same reason the wide study tables are permitted to scroll out of the measure. Everything else on the page stays inside it. */ @media (min-width:1200px){ .xr-graph{ position:relative;left:50%;transform:translateX(-50%); width:min(1300px,calc(100vw - 56px)); } } .xr-graph-head{display:flex;flex-wrap:wrap;gap:.5rem 1.2rem;align-items:baseline;margin-bottom:.9rem} .xr-graph-head h2{font-size:1.32rem} /* Counts of what is rendered, and nothing else. Never a finding, and no finding may sit beside one (§18.5.8). */ .xr-graph-counts{font-family:var(--xr-font-mono);font-size:.72rem;color:var(--xr-muted)} .xr-legend{ list-style:none;display:flex;flex-wrap:wrap;gap:.5rem 1.4rem;margin:0 0 1rem;padding:0; } .xr-legend li{display:flex;align-items:center;gap:.5rem} .xr-legend .swatch{width:26px;height:0;border-top-style:solid;flex:0 0 26px} .xr-legend .cites{border-top-width:1px;border-top-color:var(--xr-edge-cites)} .xr-legend .measures{border-top-width:1.25px;border-top-color:var(--xr-edge-measures)} .xr-legend .extends{border-top-width:1.25px;border-top-color:var(--xr-edge-extends)} .xr-legend .contradicts{border-top-width:1.75px;border-top-color:var(--xr-edge-contradicts)} .xr-legend .anticipates{border-top-width:1.75px;border-top-color:var(--xr-edge-anticipates)} .xr-edgelabel{ font-family:var(--xr-font-mono);font-size:.66rem;font-weight:600;line-height:1; letter-spacing:.08em;text-transform:lowercase;color:var(--xr-ink); } .xr-legend .gloss{font-size:.78rem;color:var(--xr-muted)} .xr-graph-listwrap{border-top:1px solid var(--xr-line);padding-top:.8rem} .xr-graph-listwrap > summary{ font-family:var(--xr-font-mono);font-size:.72rem;font-weight:600;letter-spacing:.08em; text-transform:uppercase;color:var(--xr-muted);cursor:pointer; min-height:44px;display:flex;align-items:center; } /* A flex loses its default disclosure marker in Chromium, and a control with no affordance is a control a reader does not know is there. Drawn in CSS so it costs nothing and needs no icon file. */ .xr-toc-inline summary::after, .xr-graph-listwrap > summary::after{ content:"";flex:0 0 auto;margin-left:.55rem;width:.42rem;height:.42rem; border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor; transform:rotate(45deg) translate(-2px,-2px); } details[open] > summary::after{transform:rotate(-135deg) translate(-1px,-1px)} .xr-graph-list,.xr-graph-list ul{list-style:none;margin:0;padding:0} .xr-graph-list > li{ padding:.75rem 0;border-bottom:1px solid var(--xr-line); } .xr-graph-list > li:last-child{border-bottom:0} .xr-node{ font-family:var(--xr-font-body);font-size:.82rem;font-weight:600;line-height:1.25; color:var(--xr-ink); } /* Type is stated in text on every node. It is never carried by colour or shape alone — this package already shipped one defect of that class (G-41). */ .xr-nodetype{ font-family:var(--xr-font-mono);font-size:.62rem;font-weight:600;line-height:1; letter-spacing:.1em;text-transform:uppercase;color:var(--xr-muted); border:1px solid var(--xr-line);border-radius:4px;padding:.2rem .35rem; margin-right:.5rem;white-space:nowrap; } .xr-graph-list .head{display:flex;flex-wrap:wrap;align-items:center;gap:.35rem;min-height:44px} /* Each node title is a route out of the graph, so it is a 44px target, not a 17px line of text (§5.1's floor, and §18.5.9 clause 4: an edge that is not a route is an ornament). */ .xr-graph-list .head a{display:inline-flex;align-items:center;min-height:44px} .xr-graph-list ul{margin:.45rem 0 0 .2rem;padding-left:.9rem;border-left:1px solid var(--xr-line)} .xr-graph-list ul li{ font-size:.88rem;line-height:1.5;color:var(--xr-muted);margin:.3rem 0; display:flex;flex-wrap:wrap;gap:.4rem;align-items:baseline; } .xr-graph-list ul li a{font-weight:500} .xr-because{display:block;width:100%;color:var(--xr-ink);font-size:.86rem;margin-top:.1rem} /* A node with an incoming `contradicts` edge is ANNOTATED, not flagged. 3px rust left-rule and one line of text. No exclamation, no colour change to the node body, no warning role, no aria-invalid (§18.5.6 clause 5). */ .xr-graph-list > li.has-contra{ border-left:3px solid var(--xr-edge-contradicts);padding-left:.8rem; } .xr-contra-note{ font-family:var(--xr-font-body);font-size:.84rem;color:var(--xr-ink); margin:.35rem 0 0; } /* The edge label for `contradicts` is the plain lowercase word, at the same weight, size and colour as `cites` and `measures`. Not a badge, not caps, no warning glyph. Capitals would shout, and the finding does not need volume — the 1.75px line already carries equal-or-greater weight than `cites`, which is the honesty statement (§18.5.6 clause 1). */ /* --- the drawn layer ----------------------------------------------------- THE STAGE IS EMPTY IN THE SHIPPED HTML. The script fills it. Node labels are real HTML