/* evntrace document kit: one look for every report prepared through evntrace. Tokens follow Digital Forensics/BRAND.md §2–3. Coral is a fill and a marker only: it fails WCAG as text. Every text colour below was measured (see kit/README.md): nothing here is under 4.5:1 on its own ground. */ :root:has(> body.kit-doc),.kit-doc{ color-scheme:light; --c-paper:#F8F7F4;--c-white:#FFFFFF;--c-stone:#EDEBE7; --c-ink:#0E0E10;--c-ink-raised:#18181B;--c-ink-2:#1F1F22;--c-paper-ink:#F2F1ED; --c-muted:#6B6B70;--c-fog:#A1A1A6; --c-coral:#FF6B4A;--c-coral-deep:#E5553A;--c-coral-sheen:#FD8A6F; --c-verdant:#4A9D7C;--c-flare:#D94343;--c-steel:#5B78B5;--c-gold:#C8A96E; --bg:var(--c-paper);--surface:var(--c-white);--surface-2:var(--c-stone); --text:var(--c-ink);--text-dim:var(--c-muted); --line:rgba(14,14,16,.09);--line-strong:var(--c-muted); --focus-ring:var(--c-ink); /* status text: the darkened brand colours, because the bright ones fail as text on paper */ --ok-text:#2F7057;--bad-text:#A82F2F;--warn-text:#8A6B2A;--info-text:#3E5A94; --font-display:'Archivo Narrow','Arial Narrow','Helvetica Neue',Arial,sans-serif; --font-body:'Geist',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; --font-mono:'Geist Mono',ui-monospace,'SF Mono',Menlo,monospace; --fs-body:clamp(1.0625rem,.9375rem + .6vw,1.125rem);--fs-sm:.9375rem;--fs-label:.75rem; --tracking-label:.14em; --space-2:8px;--space-3:16px;--space-4:24px;--space-5:40px;--space-6:64px; --pad:clamp(16px,5vw,80px);--maxw:980px; --radius:10px;--radius-lg:16px;--radius-pill:9999px; --shadow-sm:0 1px 2px rgba(14,14,16,.04); } @media (prefers-color-scheme:dark){:root:not([data-theme="light"]):has(> body.kit-doc),:root:not([data-theme="light"]) .kit-doc{ color-scheme:dark;--bg:var(--c-ink);--surface:var(--c-ink-raised);--surface-2:var(--c-ink-2); --text:var(--c-paper-ink);--text-dim:var(--c-fog);--line:rgba(255,255,255,.10);--line-strong:var(--c-fog); --focus-ring:var(--c-coral);--shadow-sm:none; --ok-text:#4A9D7C;--bad-text:#EF7B72;--warn-text:#C8A96E;--info-text:#8FA8DA}} :root[data-theme="dark"]:has(> body.kit-doc),:root[data-theme="dark"] .kit-doc{ color-scheme:dark;--bg:var(--c-ink);--surface:var(--c-ink-raised);--surface-2:var(--c-ink-2); --text:var(--c-paper-ink);--text-dim:var(--c-fog);--line:rgba(255,255,255,.10);--line-strong:var(--c-fog); --focus-ring:var(--c-coral);--shadow-sm:none; --ok-text:#4A9D7C;--bad-text:#EF7B72;--warn-text:#C8A96E;--info-text:#8FA8DA} *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%} /* The rules below that also exist in css/evntrace.css (body/h1-h4/p/li/a/.lead/.meta) are scoped under .kit-doc: unscoped, they silently overrode the site's own versions wherever both stylesheets are loaded on one page — measured on _dev/components.html (fix round, 2026-09-27; see DESIGN-SYSTEM.md's kit note and kit/README.md "How a page uses it"). Give the report page's (or a wrapping element around the report content) class="kit-doc". Selectors with no site-side equivalent (.wrap, .hero-top, .clock, .tl, the disclosure/search/print-dialog components, etc.) can't collide and are unscoped, same as before. */ body.kit-doc{margin:0;background:var(--bg);color:var(--text);font:400 var(--fs-body)/1.6 var(--font-body); word-spacing:.08em;-webkit-font-smoothing:antialiased} .kit-doc h1,.kit-doc h2{font-family:var(--font-display);font-weight:700;text-transform:uppercase;letter-spacing:-.01em; margin:0;text-wrap:balance;word-spacing:.04em} .kit-doc h1{font-size:clamp(2.5rem,7vw,4.5rem);line-height:.95} .kit-doc h2{font-size:clamp(1.375rem,2.6vw,1.875rem);line-height:1.08} .kit-doc main h2{margin-bottom:var(--space-4)} .kit-doc main h2+p{color:var(--text-dim)} .kit-doc h3,.kit-doc h4{font-size:1rem;margin:var(--space-4) 0 var(--space-2)} .kit-doc p,.kit-doc li{max-width:66ch} .kit-doc p{margin:0 0 var(--space-3)} .kit-doc a{color:var(--text);text-underline-offset:3px} :where(a,button,summary,audio,textarea):focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px} q{font-style:italic} .wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)} .meta,.src,.tm,.cid{word-spacing:normal} .kit-doc .meta{font-family:var(--font-mono);font-size:var(--fs-label);text-transform:uppercase; letter-spacing:var(--tracking-label);color:var(--text-dim);margin:0 0 var(--space-3)} .src{font:400 .78rem/1.45 var(--font-mono);color:var(--text-dim);overflow-wrap:anywhere} .note{font-size:var(--fs-sm);color:var(--text-dim)} /* hero */ header.hero{padding-block:var(--space-5);border-bottom:1px solid var(--line)} .hero-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-3);margin-bottom:var(--space-5)} .brand{display:inline-flex;align-items:center;gap:14px;color:var(--text);text-decoration:none;min-height:44px} .brand svg{flex:none;width:56px;height:56px} .brand-text{display:flex;flex-direction:column;gap:3px} .brand-text small{font:400 .6875rem/1 var(--font-mono);text-transform:uppercase;letter-spacing:var(--tracking-label);color:var(--text-dim);word-spacing:normal} .brand-text b{font:700 1.5rem/1 var(--font-display);text-transform:uppercase;letter-spacing:.03em} .brand:hover b,.brand:focus-visible b{text-decoration:underline;text-underline-offset:4px} header.hero h1{margin-bottom:var(--space-3)} .kit-doc .lead{font-size:1.1875rem;line-height:1.45;max-width:46ch;color:var(--text-dim)} .clocks{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:var(--space-5)} @media (min-width:900px){.clocks{grid-template-columns:repeat(4,1fr)}} .clock{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:clamp(14px,2.4vw,24px); box-shadow:var(--shadow-sm);border-top:4px solid var(--line-strong)} .clock[data-k=gold]{border-top-color:var(--c-gold)}.clock[data-k=steel]{border-top-color:var(--c-steel)} .clock[data-k=coral]{border-top-color:var(--c-coral)}.clock[data-k=verdant]{border-top-color:var(--c-verdant)} .clock b{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:clamp(1.6rem,3.6vw,2.4rem); font-weight:700;line-height:1.05;display:block;word-spacing:-.12em;white-space:nowrap;margin-bottom:6px} .clock span{display:block;font-family:var(--font-mono);font-size:var(--fs-label);line-height:1.45;color:var(--text-dim);text-transform:uppercase;letter-spacing:.1em;word-spacing:normal} .strip{margin:var(--space-3) 0 0;padding:var(--space-3) var(--space-4);max-width:none;background:var(--surface-2); border-radius:var(--radius-lg);font-family:var(--font-mono);font-size:var(--fs-label);text-transform:uppercase; letter-spacing:var(--tracking-label);color:var(--text);line-height:1.8;word-spacing:normal} .call{background:var(--surface-2);border-radius:var(--radius-lg);padding:var(--space-3) var(--space-4); border-left:4px solid var(--c-coral);margin:var(--space-4) 0 0;font-size:var(--fs-sm);color:var(--text)} .call p{max-width:none}.call p:last-child{margin:0} .call--warn{border-left-color:var(--c-gold)} .call .src,.call .note{color:var(--text)} .howto{font-size:var(--fs-sm);color:var(--text-dim);margin:var(--space-3) 0 0;max-width:75ch} nav.sections{display:flex;flex-wrap:wrap;gap:8px;margin-top:var(--space-4)} nav.sections a{font-size:.82rem;padding:6px 12px;border:1px solid var(--line);border-radius:var(--radius-pill); text-decoration:none;color:var(--text);background:var(--surface);min-height:36px;display:inline-flex;align-items:center} nav.sections a:hover{border-color:var(--line-strong)} /* theme button: one round toggle, the ◑ pattern from the Listen page */ .theme-btn{flex:none;width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;padding:0; border:1px solid var(--line-strong);border-radius:var(--radius-pill);background:var(--surface);color:var(--text);font-size:1.15rem;line-height:1;cursor:pointer} .theme-btn:hover{background:var(--surface-2)} .theme-float{position:fixed;right:16px;bottom:16px;z-index:21} /* sections */ main>section{padding-block:var(--space-5);border-top:1px solid var(--line)} main>section:first-child{border-top:0} .sh{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin-bottom:var(--space-3)} .kit-doc ul,.kit-doc ol{padding-left:1.25em}.kit-doc li{margin:8px 0}.kit-doc ul.big li{margin:12px 0} .kit-doc main ul,.kit-doc main ol{margin-left:var(--space-2);padding-left:var(--space-4)} .cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));gap:var(--space-4)}.cols>*{min-width:0} /* status pills: word + glyph, never colour alone */ .chip{display:inline-flex;align-items:center;gap:5px;font:400 .6875rem/1.5 var(--font-mono);text-transform:uppercase; letter-spacing:var(--tracking-label);padding:2px 9px;border-radius:var(--radius-pill);border:1px solid var(--line-strong); white-space:nowrap;word-spacing:normal;background:transparent} .chip.good{border-color:var(--c-verdant);color:var(--ok-text)} .chip.bad{border-color:var(--c-flare);color:var(--bad-text)} .chip.warn{border-color:var(--c-gold);color:var(--warn-text)} .chip.info{border-color:var(--c-steel);color:var(--info-text)} /* tables */ .tw{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%} table{border-collapse:collapse;width:100%;font-size:var(--fs-sm)} th,td{text-align:left;vertical-align:top;padding:10px var(--space-3) 10px 0;border-bottom:1px solid var(--line)} th{font:400 var(--fs-label)/1.4 var(--font-mono);text-transform:uppercase;letter-spacing:var(--tracking-label);color:var(--text-dim);white-space:nowrap} /* bar graph */ .bars{display:grid;gap:12px;margin:var(--space-4) 0 0} .brow{display:grid;grid-template-columns:minmax(120px,240px) 1fr auto;gap:var(--space-3);align-items:center} .brow i{font:400 var(--fs-label)/1.35 var(--font-mono);font-style:normal;text-transform:uppercase;letter-spacing:.08em;color:var(--text-dim);word-spacing:normal} .brow u{display:block;height:12px;border-radius:6px;background:var(--surface-2);overflow:hidden;text-decoration:none} .brow u>s{display:block;height:100%;border-radius:6px;text-decoration:none} .brow b{font:500 var(--fs-sm)/1.2 var(--font-mono);font-variant-numeric:tabular-nums;white-space:nowrap;word-spacing:normal} @media (max-width:560px){.brow{grid-template-columns:1fr auto}.brow i{grid-column:1/-1}} /* timeline */ .tl{list-style:none;margin:var(--space-3) 0 var(--space-5);padding:0;position:relative} .tl::before{content:"";position:absolute;left:6px;top:8px;bottom:8px;width:2px;background:var(--line)} .tl li{position:relative;padding:0 0 var(--space-3) var(--space-5);font-size:var(--fs-sm);margin:0} .tl li::before{content:"";position:absolute;left:0;top:6px;width:14px;height:14px;border-radius:50%;background:var(--bg);border:2px solid var(--line-strong)} .tl li[data-hi]::before{background:var(--c-coral);border-color:transparent} .tl em{font:400 var(--fs-label)/1.5 var(--font-mono);font-style:normal;text-transform:uppercase;letter-spacing:var(--tracking-label);color:var(--text-dim);display:block;word-spacing:normal} /* connection / evidence map (Stage B, 2026-09-28) — promoted from sample-report.html's page-local