/* =========================================================================== record-snapshot.css — page-scoped gaps for /tools/record-snapshot/. Loads AFTER /assets/v4.css and /assets/tool-chassis.css. Everything the chassis already owns (fields, honest blanks, chips, form primitives, focus ring, status line, reduced motion) is used as-is and is NOT restyled here. This file adds only what the chassis has no class for: - the page intro band above the tool - the record card that groups one company's fields - the small dt/dd detail list inside the license field - the reading guide and coverage list below the result region - the JS-only single-record view (all records visible with JS off) No colour literal appears below. Every value resolves through the canon tokens in v4.css / tool-chassis.css. No score, meter, badge, seal or star has a rule here, and none may be added. =========================================================================== */ /* --------------------------------------------------------------------------- 1. THE JS-ONLY SINGLE-RECORD VIEW With JavaScript off, every record stays visible — the page is a complete, readable document without the picker. With JavaScript on, the picker opens one record at a time. The `.js` class is set inline in , before any stylesheet, so records never flash open and then collapse. --------------------------------------------------------------------------- */ html.js .rs-record:not([data-rs-open]) { display: none; } /* --------------------------------------------------------------------------- 2. PAGE INTRO --------------------------------------------------------------------------- */ .rs-intro { padding: clamp(26px, 4vw, 52px) 0 clamp(16px, 2vw, 26px); background: var(--foam-50); border-bottom: 1px solid var(--sky-400); } .rs-crumb { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 14px; font-size: 13px; font-weight: 600; color: var(--pacific-700); } .rs-crumb a { min-height: 44px; display: inline-flex; align-items: center; text-decoration: underline; text-underline-offset: 3px; } .rs-intro h1 { margin: 10px 0 0; max-width: 20ch; font-size: clamp(30px, 4.4vw, 52px); line-height: 1.08; letter-spacing: -.02em; color: var(--pacific-900); } .rs-intro__lede { margin: 16px 0 0; max-width: 66ch; font-size: 17px; color: var(--pacific-700); } .rs-workspace { padding: clamp(22px, 3vw, 44px) 0 clamp(40px, 6vw, 80px); background: var(--foam-100); } /* --------------------------------------------------------------------------- 3. ONE COMPANY'S RECORD CARD A container for chassis fields. It carries no verdict, no summary line and no total — a card is a group of dated facts, nothing more. --------------------------------------------------------------------------- */ .rs-record { display: grid; gap: 14px; padding: clamp(16px, 2.2vw, 22px); background: var(--foam-50); border: 1px solid var(--ocean-600); border-radius: 8px; } .rs-record__head { display: grid; gap: 4px; } .rs-record__name { margin: 0; font-size: clamp(19px, 2.2vw, 24px); font-weight: 700; line-height: 1.2; letter-spacing: -.01em; color: var(--pacific-900); } .rs-record__set { margin: 0; font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--pacific-700); font-variant-numeric: tabular-nums; } .rs-record__fields { display: grid; gap: 12px; } /* --------------------------------------------------------------------------- 4. THE DETAIL LIST INSIDE A FIELD License number, name on the license, classifications, issued, expires. --------------------------------------------------------------------------- */ .rs-detail { display: grid; gap: 6px 22px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); margin: 4px 0 0; } .rs-detail > div { display: grid; gap: 1px; min-width: 0; } .rs-detail dt { font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--pacific-700); } .rs-detail dd { margin: 0; font-size: 15px; font-weight: 600; color: var(--pacific-900); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; } /* --------------------------------------------------------------------------- 5. EVIDENCE DISCLOSURE Reuses the chassis .tc-method look; only the spacing is local. --------------------------------------------------------------------------- */ .rs-evidence { background: var(--white); } .rs-evidence .tc-method__summary { font-size: 14px; } /* --------------------------------------------------------------------------- 6. READING GUIDE + COVERAGE --------------------------------------------------------------------------- */ .rs-guide { display: grid; gap: 12px; padding: clamp(18px, 2.4vw, 26px); background: var(--foam-100); border: 1px solid var(--ocean-600); border-radius: 8px; } .rs-guide__head { margin: 0; font-size: clamp(19px, 2.2vw, 24px); font-weight: 700; line-height: 1.2; color: var(--pacific-900); } .rs-guide__lede { margin: 0; max-width: 70ch; color: var(--pacific-900); } .rs-steps { display: grid; gap: 10px; margin: 4px 0 0; padding-inline-start: 22px; max-width: 74ch; color: var(--pacific-900); } .rs-steps li { padding-inline-start: 4px; } .rs-steps strong { color: var(--pacific-900); } .rs-coverage { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; max-width: 78ch; } .rs-coverage li { padding: 12px 14px; background: var(--foam-50); border-radius: 8px; border-inline-start: 6px solid var(--sand-200); color: var(--pacific-900); } .rs-guide__note, .rs-guide__source { margin: 0; max-width: 76ch; font-size: 14px; color: var(--pacific-900); } .rs-guide__note a, .rs-guide__source a { color: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 2px; } /* --------------------------------------------------------------------------- 7. NARROW VIEWPORTS --------------------------------------------------------------------------- */ @media (max-width: 620px) { .rs-detail { grid-template-columns: 1fr; } } /* --------------------------------------------------------------------------- 8. REDUCED MOTION This file introduces no animation and no transition, so the complete story is identical either way. The block below exists to keep that true if the page ever inherits a transition from a parent stylesheet. --------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .rs-record, .rs-guide, .rs-intro { transition: none !important; animation: none !important; } } /* --------------------------------------------------------------------------- 9. PRINT A homeowner printing this takes the records with them. Every record prints, not just the one on screen, and the picker does not. --------------------------------------------------------------------------- */ @media print { .source-rail, .site-header, .site-footer, .tc-input, .tc-status, .rs-crumb, [data-rs-prompt], [data-rs-empty] { display: none !important; } html.js .rs-record:not([data-rs-open]) { display: grid; } .rs-record, .rs-guide { break-inside: avoid; } }