/* ═══════════════════════════════════════════════════════════════════ SELFYDE — the report document Reference: public/reports/report-20260806-083345.html (approved layout). Design brief this implements: the product is an instrument, the content is a letter about you. So the chrome (labels, numbers, gauges) is monospace and cold, and one warm accent — the archetype and the closing line — is the single human note in a cold panel. Loaded two ways, and that is the whole point of the file existing: • public/scan.html links it, so the buyer sees this on screen; • scripts/reports-to-html.mjs reads this exact file and inlines it into every standalone HTML it generates (those open from Finder with no server, so they cannot link it). One copy of the rules, so the two renderers cannot drift apart. Everything is scoped under .report-doc, which sits on in a generated file and on #full-block inside scan.html, where main.css is also loaded. The scoping is what keeps the two stylesheets out of each other's way: .report-doc .x beats a bare .x from main.css, and nothing here can reach the landing page or the paywall. Where main.css styles a bare element (h1, a) the property is restated here rather than left to inherit, so the live page renders what the generated file renders. ═══════════════════════════════════════════════════════════════════ */ .report-doc { --void: #06080b; --panel: #0b0f15; --line: rgba(236, 239, 244, 0.1); --line-2: rgba(236, 239, 244, 0.2); --ink: #eceff4; --ink-2: #a4adbb; --faint: #5b6472; --glow: #cfe0ff; /* the one warm note in a cold instrument — archetype and closing line only */ --ember: #e0a86a; --mono: "Space Mono", ui-monospace, "SF Mono", Menlo, monospace; /* Shared by the hero, the shell and the footer so their edges line up. Deliberately not main.css's --pad: the report keeps its own measure. */ --rep-pad: clamp(20px, 5vw, 64px); /* Space Mono is wide, so long-form needs a shorter measure and more air than a proportional face would — that is what makes 3700 words readable without leaving the brand. */ color: var(--ink); font-family: var(--mono); font-size: 15px; line-height: 1.95; -webkit-font-smoothing: antialiased; /* On scan.html the fixed blueprint grid (body::before, z-index 0) paints over unpositioned content — the report needs its own layer, like .wrap. */ position: relative; z-index: 1; } .report-doc, .report-doc * { box-sizing: border-box; margin: 0; } .report-doc a { color: inherit; } /* Only true in a generated file, where .report-doc is the page itself. */ body.report-doc { background: var(--void); overflow-x: hidden; } html { scroll-behavior: smooth; } /* site header — the report is part of the product, not a loose document. Generated files only; scan.html has its own nav above the report. */ .report-doc .nav { position: sticky; top: 0; z-index: 10; background: rgba(6, 8, 11, 0.86); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); } .report-doc .nav__in { max-width: 1020px; margin: 0 auto; padding: 14px var(--rep-pad); display: flex; align-items: center; justify-content: space-between; gap: 18px; } .report-doc .nav__logo { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 700; letter-spacing: 0.3em; text-decoration: none; color: var(--ink); } .report-doc .nav__logo:hover, .report-doc .nav__logo:focus-visible { color: var(--glow); } .report-doc .nav__tag { font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--faint); } @media (max-width: 560px) { .report-doc .nav__tag { display: none; } } /* ── hero ─────────────────────────────────────────── */ /* Named .rep-hero, not .hero: main.css already owns .hero for the landing page, where it is a 100vh flex panel with a radial gradient. */ .report-doc .rep-hero { border-bottom: 1px solid var(--line); padding: clamp(26px, 5vw, 56px) var(--rep-pad); } .report-doc .rep-hero__in { max-width: 1020px; margin: 0 auto; display: grid; grid-template-columns: 200px 1fr; gap: clamp(24px, 4vw, 52px); align-items: center; } .report-doc .shot { position: relative; aspect-ratio: 1; background: var(--panel); border: 1px solid var(--line-2); overflow: hidden; } .report-doc .shot img { width: 100%; height: 100%; object-fit: cover; } /* reticle: the instrument looking at a person */ .report-doc .shot::after { content: ""; position: absolute; inset: 9px; pointer-events: none; background: linear-gradient(var(--glow), var(--glow)) 0 0/14px 1px no-repeat, linear-gradient(var(--glow), var(--glow)) 0 0/1px 14px no-repeat, linear-gradient(var(--glow), var(--glow)) 100% 0/14px 1px no-repeat, linear-gradient(var(--glow), var(--glow)) 100% 0/1px 14px no-repeat, linear-gradient(var(--glow), var(--glow)) 0 100%/14px 1px no-repeat, linear-gradient(var(--glow), var(--glow)) 0 100%/1px 14px no-repeat, linear-gradient(var(--glow), var(--glow)) 100% 100%/14px 1px no-repeat, linear-gradient(var(--glow), var(--glow)) 100% 100%/1px 14px no-repeat; opacity: 0.5; } .report-doc .shot--none { display: grid; place-items: center; font-family: var(--mono); font-size: 10px; letter-spacing: 0.2em; color: var(--faint); text-align: center; padding: 16px; } .report-doc .eyebrow { font-family: var(--mono); font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--faint); } /* font-weight and line-height are restated because main.css styles bare h1. */ .report-doc .arch { font-family: var(--mono); font-size: clamp(24px, 4.6vw, 44px); font-weight: 700; line-height: 1.1; letter-spacing: 0.02em; color: var(--ember); margin: 14px 0 12px; text-transform: uppercase; overflow-wrap: break-word; } .report-doc .essence { font-size: clamp(13px, 1.5vw, 15px); line-height: 1.9; color: var(--ink-2); max-width: 52ch; } .report-doc .stats { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--line); font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); display: flex; flex-wrap: wrap; gap: 6px 14px; } .report-doc .stats b { color: var(--glow); font-weight: 400; } /* ── shell ────────────────────────────────────────── */ .report-doc .shell { max-width: 1020px; margin: 0 auto; padding: 0 var(--rep-pad) 90px; display: grid; grid-template-columns: 200px 1fr; gap: clamp(24px, 4vw, 52px); align-items: start; } .report-doc .toc { position: sticky; top: 74px; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.06em; max-height: calc(100vh - 64px); overflow-y: auto; padding-top: 48px; scrollbar-width: none; } .report-doc .toc::-webkit-scrollbar { width: 0; height: 0; } .report-doc .toc ol { list-style: none; padding: 0; } .report-doc .toc a { display: grid; grid-template-columns: 2.4em 1fr; gap: 4px; padding: 5px 0; color: var(--faint); text-decoration: none; text-transform: uppercase; line-height: 1.45; } .report-doc .toc a:hover, .report-doc .toc a:focus-visible { color: var(--glow); } .report-doc main { padding-top: 48px; min-width: 0; } .report-doc main * { min-width: 0; } /* ── sections ─────────────────────────────────────── */ .report-doc .sec { margin-bottom: 52px; scroll-margin-top: 78px; } .report-doc .sec h2 { display: grid; grid-template-columns: 2.6em 1fr; gap: 10px; align-items: baseline; font-family: var(--mono); font-size: 12px; font-weight: 700; /* restated: main.css sets line-height 1.18 on bare h2 */ line-height: 1.95; letter-spacing: 0.2em; text-transform: uppercase; padding-bottom: 12px; margin-bottom: 20px; border-bottom: 1px solid var(--line); } .report-doc .sec__n { color: var(--faint); font-weight: 400; } .report-doc .sec p { max-width: 58ch; margin-bottom: 20px; color: var(--ink-2); } .report-doc .sec p strong { color: var(--ink); font-weight: 600; } .report-doc .sec:first-of-type p { color: var(--ink); font-size: 16px; line-height: 2; } .report-doc .fn { font-family: var(--mono); font-size: 9px; color: var(--glow); text-decoration: none; vertical-align: super; margin-left: 5px; padding: 5px 3px; letter-spacing: 0; } .report-doc .fn:hover { text-decoration: underline; } .report-doc .keyed { margin-bottom: 20px; padding-left: 16px; border-left: 1px solid var(--line); } .report-doc .keyed__k { display: block; font-family: var(--mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--glow); margin-bottom: 6px; } .report-doc .keyed p { margin-bottom: 0; } /* gauges — the instrument panel */ .report-doc .gauge { background: var(--panel); border: 1px solid var(--line); padding: 22px clamp(16px, 2.6vw, 28px) 18px; margin-bottom: 22px; } .report-doc .gauge__row { display: grid; grid-template-columns: 1fr auto; gap: 5px 12px; padding: 11px 0; border-bottom: 1px solid var(--line); } .report-doc .gauge__row:last-of-type { border-bottom: 0; } .report-doc .gauge__label { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-2); align-self: center; } .report-doc .gauge__val { font-family: var(--mono); font-size: 15px; color: var(--ink); align-self: center; font-variant-numeric: tabular-nums; } .report-doc .gauge__track { grid-column: 1/-1; position: relative; height: 5px; background: rgba(236, 239, 244, 0.06); border: 1px solid var(--line); } .report-doc .gauge__track i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, rgba(207, 224, 255, 0.3), var(--glow)); } .report-doc .gauge__track b { position: absolute; top: -3px; bottom: -3px; left: 50%; width: 1px; background: var(--line-2); } .report-doc .gauge__read { grid-column: 1/-1; font-size: 13px; line-height: 1.85; color: var(--ink-2); margin: 4px 0 0; max-width: 56ch; } .report-doc .gauge__foot { font-family: var(--mono); font-size: 10px; line-height: 1.85; letter-spacing: 0.04em; color: var(--faint); margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--line); max-width: none; text-transform: none; } /* numbered rows */ .report-doc .rows, .report-doc .profs { list-style: none; padding: 0; margin-bottom: 20px; } .report-doc .rows li { display: grid; grid-template-columns: 7em 1fr; gap: 14px; padding: 11px 0; border-bottom: 1px solid var(--line); } .report-doc .rows__n { font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--faint); padding-top: 6px; } .report-doc .rows p { margin: 0; max-width: 54ch; font-size: 14px; } .report-doc .profs li { display: grid; grid-template-columns: 2.4em 1fr; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); } .report-doc .profs__n { font-family: var(--mono); font-size: 10px; color: var(--faint); padding-top: 6px; } .report-doc .profs__t { font-family: var(--mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink); align-self: center; } .report-doc .profs__r { grid-column: 2; font-size: 13px; line-height: 1.8; color: var(--ink-2); } /* The closing line gets the warm accent, once — but never inside References. That section is last, and every citation is the last paragraph of its own list item, so the accent landed on all five of them: a bibliography set in ember 16px with a rule above it, shouting for attention it does not want. The reference list stays deliberately quiet. */ .report-doc .sec:last-of-type:not(.refs) p:last-child { color: var(--ember); font-size: 16px; line-height: 1.9; border-top: 1px solid var(--line); padding-top: 22px; margin-top: 26px; } /* references */ .report-doc .refs__intro { font-family: var(--mono); font-size: 11px; line-height: 1.9; letter-spacing: 0.03em; color: var(--faint); max-width: 62ch; margin-bottom: 22px; } .report-doc .reflist { list-style: none; padding: 0; display: grid; gap: 20px; min-width: 0; } .report-doc .reflist li, .report-doc .reflist div { min-width: 0; } .report-doc .reflist p, .report-doc .reflist a { overflow-wrap: anywhere; } .report-doc .reflist li { display: grid; grid-template-columns: 2.4em 1fr; gap: 12px; scroll-margin-top: 78px; } .report-doc .reflist__n { font-family: var(--mono); font-size: 10px; color: var(--glow); padding-top: 6px; } .report-doc .reflist p { font-size: 13px; line-height: 1.85; margin-bottom: 6px; } .report-doc .reflist__c { font-family: var(--mono); font-size: 10.5px; line-height: 1.7; color: var(--faint); letter-spacing: 0.02em; } /* restated: main.css strips the underline from every bare */ .report-doc .reflist a { color: var(--faint); text-decoration: underline; } .report-doc .reflist a:hover { color: var(--glow); } .report-doc .back { display: block; max-width: 1020px; margin: 0 auto 26px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); text-decoration: none; white-space: nowrap; } .report-doc .back:hover, .report-doc .back:focus-visible { color: var(--glow); } .report-doc .foot { max-width: 1020px; margin: 0 auto; padding: 0 var(--rep-pad) 70px; font-family: var(--mono); font-size: 10px; line-height: 2; letter-spacing: 0.05em; color: var(--faint); max-width: 70ch; } .report-doc :focus-visible { outline: 1px solid var(--glow); outline-offset: 3px; } @media (max-width: 900px) { .report-doc { font-size: 14px; } .report-doc .rep-hero__in { grid-template-columns: 120px 1fr; gap: 20px; } .report-doc .shell { grid-template-columns: 1fr; padding-bottom: 60px; } .report-doc .toc { display: none; } .report-doc main { padding-top: 34px; } .report-doc .sec h2 { grid-template-columns: 2.2em 1fr; gap: 8px; font-size: 11px; } .report-doc .rows li { grid-template-columns: 1fr; gap: 2px; } .report-doc .rows__n { padding-top: 0; } } /* A phone has no room for two columns: side by side, the photo squeezes the archetype and essence into a ~55%-wide gutter that wraps every third word. Stack instead, and let the prose have the full measure. */ @media (max-width: 620px) { .report-doc .rep-hero { padding: 20px 20px 24px; } .report-doc .rep-hero__in { grid-template-columns: 1fr; gap: 18px; align-items: start; } .report-doc .shot { width: 132px; aspect-ratio: 1; } .report-doc .arch { font-size: 26px; margin: 10px 0 10px; } .report-doc .essence { line-height: 1.75; max-width: none; } /* Six stats stacked one per line is a wall; run them inline with separators. */ .report-doc .stats { display: block; line-height: 1.9; letter-spacing: 0.1em; font-size: 9.5px; margin-top: 16px; } .report-doc .stats b::after, .report-doc .stats span:not(:last-child)::after { content: "\00b7"; margin: 0 7px; color: var(--faint); } .report-doc .sec { margin-bottom: 38px; } .report-doc .sec:first-of-type p { font-size: 15px; line-height: 1.85; } .report-doc .sec p { line-height: 1.8; } .report-doc .keyed { padding-left: 12px; } .report-doc .gauge { padding: 16px 14px 12px; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }