/* =================================================================== whatifnowai — Report v2 shared layer Components common to all four tier reports (SCAN / MAP / BUILD / LAUNCH). Loaded AFTER whatifnowai.css. Tier-specific styles stay in the tier file. =================================================================== */ /* ---- Depth switching ---------------------------------------------- */ /* Depth visibility is defined ONCE, at the very end of this file, as "hide what does not match" — see the closing block. Do not add a default-hidden rule here: it loses to any component rule that sets its own display (that is how full-only evidence cards leaked into Report depth), and forcing display:block back on would flatten flex and grid components. */ .doc-switch button { background: transparent; border: 0; color: var(--ink-3); padding: 6px 14px; font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.16em; font-weight: 500; cursor: pointer; } .doc-switch button.on { background: var(--ink); color: var(--cream); } .doc-switch button:hover:not(.on) { color: var(--ink); } .masthead-meta span { white-space: nowrap; } .masthead-row { flex-wrap: wrap; row-gap: 10px; } /* The verdict ladder carries the same two variables: ticks before the tier name, and the active tier's name in display italic. Its ink plate predates this and stays — in a four-column data row the plate reads as the selected row, not as navigation. */ /* .vl-t is a FLEX row: the depth tick sits beside the tier name. This used to be a separate rule ahead of the typography one below, which re-declared display: block at the same specificity and won — leaving .tb-tick an inline span, so its 18px width did not apply, it computed to 0 and the tick collapsed against the label on every step of every ladder. The two rules are one now. */ .vladder .vl-step.on .vl-t { font-family: var(--display); font-style: italic; font-size: 15px; letter-spacing: normal; text-transform: none; opacity: 1; } .vladder .vl-step .tb-tick { flex: 0 0 18px; } .vladder .vl-step.on .tb-tick { background-image: repeating-linear-gradient(to right, rgba(244,238,230,0.28) 0 3px, transparent 3px 5px); } .vladder .vl-step.on .tb-tick::before { background-image: repeating-linear-gradient(to right, var(--accent-on-ink) 0 3px, transparent 3px 5px); } /* ---- Masthead: back link ---------------------------------------------------------- A delivered report was a leaf node — no route to the founder's other runs. Sits left of the export bar, weighted as navigation rather than an action: quiet until hovered. */ .mast-back { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.13em; text-transform: uppercase; color: var(--ink-3); text-decoration: none; white-space: nowrap; } .mast-back:hover { color: var(--ink); } @media (max-width: 700px) { .mast-back { display: none; } } @media print { .mast-back { display: none; } } /* ---- Escalate band: payments-off variant ----------------------------------------- While payments_live is false the next tier cannot be bought, so "Run MAP → $49" is a dead button at the end of every report. The band stays pixel-identical (it is one of the four shared blocks); only the price cell and the CTA change, plus one line of copy. This is rendered SERVER-SIDE from the same flag the site reads — reports are static artifacts and must not depend on a client fetch to be honest about what you can buy. */ .esc-band .eb-soon { color: var(--cream); margin-top: 6px; } .esc-band .eb-soon .soon-k { display: block; font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent-on-ink); } .esc-band .eb-gate { font-size: 13px; line-height: 1.5; color: var(--cream-deep); margin: 14px 0 0; max-width: 460px; } .esc-band .eb-gate b { color: var(--cream); font-weight: 600; } /* V3 · nowrap, on the terminal tier's only button. A 0.18em-tracked mono pill orphaned its arrow onto a second line inside the radius — the same defect as .btn-cta below, which is the LAUNCH calendar pill the plan flagged (confirmed in launch-report-v2/index.html:905, class `btn-cta`, not the mockup's demo class). Both fixed together because they are one shape in two rules. */ .esc-band a.eb-cta-off { display: inline-block; white-space: nowrap; background: transparent; color: var(--cream); border: 1px solid rgba(244,238,230,0.5); text-decoration: none; padding: 11px 21px; border-radius: 999px; font-family: var(--mono); font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.18em; font-weight: 600; } .esc-band a.eb-cta-off:hover { background: var(--accent); border-color: var(--accent); color: var(--ink); } /* ---- Recommendation provenance (VERD-1) ------------------------------------------ The recommendation is IDEA-level: anchored once, revisable only with a stated reason. Two components carry it, and they are deliberately at different depths: .vladder [data-prov] report depth — WHERE the call was anchored and where it moved .prov full depth — WHY it moved (the reason runs 400+ chars) Showing a verdict without its provenance is what let four tiers drift apart, so the anchor marker is not optional chrome: it is the thing that lets a reader tell a considered revision from drift. */ .vladder .vl-p { display: block; font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.15em; text-transform: uppercase; margin-top: 6px; color: var(--ink-3); } .vl-step[data-prov="anchor"] .vl-p { color: var(--accent-ink); } .vl-step[data-prov="revision"] .vl-p { color: var(--ink); } .vl-step[data-prov="held"] .vl-p { color: var(--ink-3); } /* Drop AL (§0ab): a tier that ran AFTER this report was written. The step carries no value — this document cannot know it — so the track is DASHED rather than filled or flat: dashed is this product's provisional weight (the depth tick, .prov-sup's divider, the stale chip), and it reads apart from an unrun tier's flat empty track at 3px, which a colour change would not. Specificity: (0,3,0) against .vladder .vl-m's (0,2,0) — measured against the computed value, not assumed from the rule existing (§0m). A later step is never .on, so there is no ink variant: the current tier cannot be later than itself. */ .vl-step[data-prov="later"] .vl-p { color: var(--ink-3); } .vl-step[data-prov="later"] .vl-m { background-color: transparent; background-image: repeating-linear-gradient(to right, var(--rule-strong) 0 3px, transparent 3px 5px); } .vl-step.on[data-prov="anchor"] .vl-p { color: var(--accent-on-ink); } .vl-step.on[data-prov="revision"] .vl-p, .vl-step.on[data-prov="held"] .vl-p { color: var(--cream-deep); } .prov { border: 1px solid var(--rule); border-left: 3px solid var(--ink); background: var(--paper); padding: 20px 24px 22px; margin-top: 16px; } .prov .prov-k { font-family: var(--mono); font-size: 10px; letter-spacing: 0.17em; text-transform: uppercase; color: var(--ink-3); } .prov .prov-call { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-top: 9px; } .prov .prov-w { font-family: var(--display); font-size: 30px; line-height: 1; color: var(--ink); } .prov .prov-s { font-family: var(--mono); font-size: 13px; color: var(--ink-2); letter-spacing: 0.04em; } /* .prov .prov-chain and its b are RETIRED (drop AF, review): the chain restated the verdict ladder's own data-prov three sections above it, prov-chain-step.html and prov-chain-note.html are deleted, and a rule no partial can emit is the unreachable-class defect (§0q). */ .prov .prov-why { font-size: 14.5px; line-height: 1.6; color: var(--ink-2); margin: 14px 0 0; max-width: 78ch; text-wrap: pretty; } .prov .prov-why b { color: var(--ink); font-weight: 500; } /* A revision proposed with NO reason — rejected, so the anchor stood. Rare; one line. And the drop-AL neighbour: the call moved at a LATER tier than this report (§0ab). One rule, two emitters — same row, same weight, two different facts, and they can co-occur. */ .prov .prov-sup, .prov .prov-moved { display: flex; gap: 9px; align-items: baseline; margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--rule-strong); font-size: 13px; line-height: 1.5; color: var(--ink-2); } .prov .prov-sup .sup-k, .prov .prov-moved .pm-k { flex: 0 0 auto; font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--accent-ink); } .prov .prov-moved a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--rule-strong); } .prov .prov-moved a:hover { color: var(--accent); border-bottom-color: var(--accent); } /* ---- Escalate band: the ownership ladder on a non-latest report (drop AM, §0ab) ---- ENGINE-48 §3.1. The axis here is OWNERSHIP; the verdict ladder three sections up carries the recommendation. Two four-cell strips in one document, and they must never read as the same claim — so this one is inside the ink band, uses no score bar, and labels every cell in words. The comb comes free: .esc-band .tb-tick is already the ink treatment and [data-rank] already sets --tb-f, so a rung's fill is the tier's position and nothing else. Only the ::before COLOUR varies by state, which is the one thing ownership is allowed to say. */ .esc-band .eb-recap { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid rgba(244,238,230,0.22); margin-top: 16px; } .esc-band .eb-recap .ebr-step { display: block; padding: 10px 12px; border-right: 1px solid rgba(244,238,230,0.22); text-decoration: none; min-width: 0; } .esc-band .eb-recap .ebr-step:last-child { border-right: 0; } .esc-band .eb-recap .tb-tick { display: block; margin-bottom: 8px; } .esc-band .eb-recap .ebr-n { display: block; font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--cream-deep); } .esc-band .eb-recap .ebr-s { display: block; font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.15em; text-transform: uppercase; margin-top: 5px; color: var(--cream-deep); } .esc-band .eb-recap [data-state="yours"] .tb-tick::before { background-image: repeating-linear-gradient(to right, var(--cream) 0 3px, transparent 3px 5px); } .esc-band .eb-recap [data-state="yours"] .ebr-n { color: var(--cream); } /* A WELL, not a lift — ENGINE-42 §4's rule, applied where nobody had searched for it. This rung was rgba(244,238,230,0.09), which composites --ink to #333D79 and takes --accent-on-ink on the 8.5px sub-label to 3.63:1. On the BARE surface the same pair is 4.62:1, which is the ratio the token was chosen for and the ratio its comment claims — so neither the token nor the size is the defect: the GROUND was lifted, and --accent-on-ink's own comment already names a lift toward cream as the one direction that costs contrast. ENGINE-71 §2 measured it in a browser on three delivered tiers. The general form was computed: SIX rgba lifts across the two sheets, four are combs, tracks and markers with no text on them (adjacency has no floor), and both text-bearing ones are on this element — so this is the whole sweep, not the first instalment. Sinking separates the current rung MORE and reads as recessed, which is what `here` is. */ .esc-band .eb-recap [data-state="here"] { background: rgba(0,0,0,0.14); } .esc-band .eb-recap [data-state="here"] .ebr-n { font-family: var(--display); font-style: italic; font-size: 15px; letter-spacing: normal; text-transform: none; color: var(--cream); } .esc-band .eb-recap [data-state="here"] .ebr-s { color: var(--accent-on-ink); } .esc-band .eb-recap [data-state="next"] .tb-tick::before { background-image: none; } .esc-band .eb-recap [data-state="next"] .ebr-s { color: var(--accent-on-ink); } .esc-band .eb-recap [data-state="after"] .tb-tick::before { background-image: none; } /* No blanket opacity on `after`. The first cut dimmed the whole rung, which composited with the sub-label's own alpha to well under the non-text floor — and `after` was the one state no reference drew, so the least legible cell was also the invisible one. Both halves of that are rules of ours: a legibility claim is measured at the size the surface renders, and a state with no document is a state the engine renders blind. Every cream on this ink surface is now a TOKEN at full opacity — the two 8.5px sub-labels were rgba alphas below AA, and --cream-deep is what .vl-p already uses for 8.5px mono on ink. Measured per leaf node in PACK-MANIFEST's invariants.contrast_audit; the quiet states are distinguished by the comb and by the word, not by dimming type past reading. */ /* Same well: hover put the same accent sub-label on the same lifted ground, so the two states that invite the reader were the two below AA. */ .esc-band .eb-recap a.ebr-step:hover { background: rgba(0,0,0,0.14); } @media (max-width: 640px) { .esc-band .eb-recap { grid-template-columns: repeat(2, 1fr); } .esc-band .eb-recap .ebr-step { border-bottom: 1px solid rgba(244,238,230,0.22); } } /* ---- Verdict ladder — the four-tier trajectory --------------------- */ .vladder { display: flex; align-items: stretch; gap: 0; border: 1px solid var(--rule); background: var(--paper); margin-top: 14px; } .vladder .vl-step { flex: 1; display: block; text-decoration: none; padding: 9px 14px; border-right: 1px solid var(--rule); position: relative; min-width: 0; } .vladder .vl-step:last-child { border-right: 0; } .vladder .vl-t { display: flex; align-items: center; gap: 7px; font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-3); } .vladder .vl-row { display: flex; width: 100%; align-items: baseline; gap: 7px; margin-top: 3px; } .vladder .vl-w { font-family: var(--display); font-size: 17px; line-height: 1; color: var(--ink-3); } .vladder .vl-s { font-family: var(--mono); font-size: 10px; color: var(--ink-3); margin-left: auto; } .vladder .vl-m { display: block; height: 3px; background: var(--cream-deep); margin-top: 7px; overflow: hidden; } .vladder .vl-m span { display: block; height: 100%; background: var(--rule-strong); } .vladder .vl-step.on { background: var(--ink); border-right-color: rgba(244,238,230,0.2); } .vladder .vl-step.on .vl-t { color: var(--cream-deep); opacity: 0.75; } .vladder .vl-step.on .vl-w { color: var(--cream); } .vladder .vl-step.on .vl-s { color: var(--cream-deep); } .vladder .vl-step.on .vl-m { background: rgba(244,238,230,0.25); } .vladder .vl-step.on .vl-m span { background: var(--accent); } .vladder a.vl-step:hover .vl-w { color: var(--ink); } .vladder a.vl-step:hover .vl-m span { background: var(--ink-2); } @media (max-width: 760px) { .vladder { flex-wrap: wrap; } .vladder .vl-step { flex: 1 1 50%; border-bottom: 1px solid var(--rule); } } /* Pressed states for the report layer's own controls (drop AP, P3.1). Same two recipes as whatifnowai.css: buttons take a 1px nudge, links and step rows deepen their ink. The ladder and recap steps are anchors, so they deepen; the depth switch is a button, so it moves. */ .doc-switch button:active:not(.on) { transform: translateY(1px); } .mast-back:active, .esc-band a.eb-cta-off:active, .prov .prov-moved a:active, .comp-row .cp-n a:active { color: var(--ink); } .esc-band .eb-recap a.ebr-step:active, .vladder a.vl-step:active .vl-w { color: var(--ink); } .toc-spine a:active .dot { background: var(--accent); } /* ---- Riskiest / wedge pair ----------------------------------------- */ .rtf { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 14px; } .rtf-card { padding: 26px 30px; display: flex; flex-direction: column; gap: 10px; } .rtf-card .rtf-k { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 600; } .rtf-card .rtf-t { font-family: var(--display); font-size: clamp(20px, 2vw, 26px); line-height: 1.3; margin: 0; } .rtf-card .rtf-n { font-size: 13px; line-height: 1.5; margin: 0; } .rtf-risk { background: var(--paper); border: 1px solid var(--rule); border-left: 5px solid var(--ink); } .rtf-risk .rtf-k, .rtf-risk .rtf-n { color: var(--ink-2); } .rtf-tar { background: var(--ink); color: var(--cream); } .rtf-tar .rtf-k { color: var(--cream-deep); opacity: 0.75; } .rtf-tar .rtf-t { color: var(--cream); font-style: italic; } .rtf-tar .rtf-n { color: var(--cream-deep); } @media (max-width: 820px) { .rtf { grid-template-columns: 1fr; } } /* ---- Full-depth extension block ------------------------------------ */ .fk { font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; margin: 14px 0 5px; } .fk:first-child { margin-top: 0; } .why-ul { list-style: none; padding: 0; margin: 4px 0 0; } .why-ul li { font-size: 12.5px; color: var(--ink-2); padding: 5px 0; border-bottom: 1px dotted var(--rule); line-height: 1.5; } .why-ul li:last-child { border-bottom: 0; } .why-ul li b { color: var(--ink); font-weight: 600; } .hyp-xtra { border-top: 1px solid var(--rule); margin-top: 16px; padding-top: 14px; } /* ---- Thin depth ----------------------------------------------------- */ .thin-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 14px; } @media (max-width: 720px) { .thin-stats { grid-template-columns: 1fr 1fr; } } /* ---- Callout note ---------------------------------------------------- */ .som-note { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: start; background: var(--cream-deep); padding: 18px 22px; margin-top: 24px; } .som-note .sg-ic { font-family: var(--display); font-style: italic; font-size: 30px; color: var(--ink-3); line-height: 1; } .som-note .sg-k { font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink); font-weight: 700; margin-bottom: 5px; } .som-note p { font-size: 13px; color: var(--ink-2); line-height: 1.55; margin: 0; } /* ---- Escalate / closing band ---------------------------------------- */ .esc-band { background: var(--ink); color: var(--cream); padding: 44px 48px; display: grid; grid-template-columns: 1.15fr 1fr; gap: 48px; align-items: center; } .esc-band .eb-right { border-left: 1px solid rgba(244,238,230,0.2); padding-left: 48px; } .esc-band ul { list-style: none; padding: 0; margin: 10px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 16px; font-size: 12.5px; color: var(--cream); } .esc-band ul li span { color: var(--accent); margin-right: 6px; } .esc-band .eb-meta { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 20px; padding-top: 18px; border-top: 1px solid rgba(244,238,230,0.2); } /* V4 · The adds list went one-column at 820px, with the band itself. But the band is a 1.15fr/1fr grid until then, so between ~1000 and 820 the list is two columns inside the narrow half at 12.5px, and the deliverable names broke mid-word. The list needs its own earlier step. */ @media (max-width: 1000px) { .esc-band ul { grid-template-columns: 1fr; } } @media (max-width: 820px) { .esc-band { grid-template-columns: 1fr; padding: 30px 26px; gap: 24px; } .esc-band .eb-right { border-left: 0; padding-left: 0; border-top: 1px solid rgba(244,238,230,0.2); padding-top: 24px; } .esc-band ul { grid-template-columns: 1fr; } } /* A2.2 · 2.4.11. The spine rail's click handler scrolls with a hand-written -90 offset (report-v2.js:45-48) and keyboard focus had no equivalent, so tabbing or following an in-report anchor landed the target under the sticky masthead. 90px is the same number as .cs-right's sticky top and the rail's offset; the third copy is in the JS and is named here so the drift is visible rather than discovered. */ section[id], .shell[id] { scroll-margin-top: 90px; } /* A5.4 · The report layer's own motion. whatifnowai.css carries the blanket rule; these two are here because they are report chrome and because the smooth scroll is the one piece CSS cannot reach — report-v2.js passes behavior:'smooth' directly, so it must read the query itself. */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .toc-spine a .lbl { transition: none; } } /* ---- Trust & method strip -------------------------------------------- */ .trust-strip { margin-top: 64px; border-top: 1px solid var(--rule-strong); padding-top: 26px; } .trust-strip .label { margin-bottom: 20px; } .trust-grid { display: grid; grid-template-columns: 240px 1fr 1fr 1fr; gap: 32px; align-items: start; } .trust-grid .tk { font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 8px; } .trust-grid .tv { font-family: var(--display); font-size: 30px; line-height: 1; color: var(--ink); } .trust-grid .tv .of { font-family: var(--mono); font-size: 11px; color: var(--ink-3); } .trust-bar { height: 4px; background: var(--cream-deep); border-radius: 999px; margin-top: 10px; max-width: 190px; overflow: hidden; } .trust-bar span { display: block; height: 100%; background: var(--ink-3); border-radius: 999px; } .trust-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; } .trust-chips .tc { font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; } .trust-chips .tc.h { background: var(--ink); color: var(--cream); } .trust-chips .tc.m { background: var(--cream-deep); color: var(--ink); } .trust-chips .tc.l { border: 1px solid var(--rule-strong); color: var(--ink-2); } .trust-note { font-size: 12px; color: var(--ink-3); line-height: 1.55; margin: 22px 0 0; max-width: 760px; } @media (max-width: 820px) { .trust-grid { grid-template-columns: 1fr 1fr; gap: 24px; } } /* ---- Evidence mosaic --------------------------------------------------- */ .evm { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .evm .card-b { background: var(--paper); border: 1px solid var(--rule); padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; } .evm .top { display: flex; gap: 8px; align-items: baseline; font-family: var(--mono); font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); } .evm .top .cat { color: var(--ink-2); font-weight: 700; } .evm .claim { font-size: 13.5px; font-weight: 500; line-height: 1.45; color: var(--ink); margin: 0; } .evm .q { font-family: var(--display); font-style: italic; font-size: 12.5px; color: var(--ink-2); line-height: 1.45; margin: 0; border-left: 2px solid var(--rule-strong); padding-left: 10px; } .evm .ft { margin-top: auto; padding-top: 8px; border-top: 1px solid var(--rule); font-family: var(--mono); font-size: 9px; letter-spacing: 0.04em; color: var(--ink-3); display: flex; justify-content: space-between; gap: 8px; } .evm .ft a { color: var(--ink-2); } .evm .conf-chip { font-size: 9.5px; } @media (max-width: 760px) { .evm { grid-template-columns: 1fr; } } /* ---- Viability contribution ledger ------------------------------------ */ .vd { border-top: 1px solid var(--rule-strong); } .vd-row { display: grid; grid-template-columns: 185px 150px 78px 1fr; gap: 18px; align-items: center; padding: 10px 0; border-bottom: 1px dotted var(--rule); } .vd-row .vd-name { font-size: 13.5px; font-weight: 600; color: var(--ink); } .vd-row .vd-name small { display: block; font-family: var(--mono); font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); font-weight: 400; margin-top: 2px; } .vd-bar { height: 12px; background: repeating-linear-gradient(135deg, var(--cream-deep) 0 4px, var(--paper) 4px 8px); border: 1px solid var(--rule-strong); border-radius: 3px; overflow: hidden; } .vd-bar span { display: block; height: 100%; background: var(--ink); } .vd-row .vd-pts { font-family: var(--display); font-size: 19px; color: var(--ink); white-space: nowrap; } .vd-row .vd-pts small { font-family: var(--mono); font-size: 9px; color: var(--ink-3); } .vd-row .vd-note { font-size: 12px; color: var(--ink-2); line-height: 1.45; margin: 0; } .vd-total { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; padding-top: 14px; } .vd-total .vt-n { font-size: 13px; color: var(--ink-2); line-height: 1.5; max-width: 760px; margin: 0; } .vd-total .vt-v { font-family: var(--display); font-size: 30px; color: var(--ink); text-align: right; white-space: nowrap; } .vd-total .vt-v .a { color: var(--ink-3); font-size: 20px; } @media (max-width: 900px) { .vd-row { grid-template-columns: 1fr 78px; } .vd-row .vd-bar { display: none; } .vd-row .vd-note { grid-column: 1 / -1; margin-top: -2px; } } /* ---- Dimension row (thin depth) ---------------------------------------- */ .dim-row { display: grid; grid-template-columns: 195px minmax(120px, 0.9fr) 30px 70px 1.3fr; gap: 18px; align-items: center; padding: 13px 0; border-bottom: 1px solid var(--rule); } .dim-row:last-child { border-bottom: 0; } .dim-row .dk { font-size: 14px; font-weight: 500; color: var(--ink); } .dim-row .track { height: 5px; background: var(--cream-deep); border-radius: 999px; overflow: hidden; } .dim-row .track span { display: block; height: 100%; border-radius: 999px; background: var(--ink-3); } .dim-row .dv { font-family: var(--display); font-size: 20px; color: var(--ink); text-align: right; } .dim-row .wt { font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; color: var(--ink-3); text-transform: uppercase; } .dim-row .dn { font-size: 12px; color: var(--ink-2); line-height: 1.45; } @media (max-width: 900px) { .dim-row { grid-template-columns: 1fr 30px 70px; } .dim-row .track { display: none; } .dim-row .dn { grid-column: 1 / -1; margin-top: -4px; } } /* ---- Assumption / critical cards --------------------------------------- */ .ca-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; align-items: stretch; } .ca-card { background: var(--paper); border: 1px solid var(--rule); border-left: 4px solid var(--ink-3); padding: 16px 20px; display: flex; flex-direction: column; } .ca-card.hi { border-left-color: var(--ink); background: var(--cream-deep); } .ca-card .ca-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 8px; } .ca-card .ca-num { font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; color: var(--ink-3); } .ca-card .ca-sev { font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 700; padding: 3px 9px; border-radius: 2px; white-space: nowrap; } .ca-card .ca-sev.hi { background: var(--ink); color: var(--cream); } .ca-card .ca-sev.md { background: transparent; box-shadow: inset 0 0 0 1.5px var(--ink-2); color: var(--ink-2); } .ca-card .ca-stmt { font-size: 14px; line-height: 1.5; margin: 0 0 12px; color: var(--ink); font-weight: 500; } .ca-card dl.ca-rows { margin: auto 0 0; } .ca-card .ca-rows .ca-row { display: grid; grid-template-columns: 88px 1fr; gap: 12px; padding: 6px 0; border-top: 1px dotted var(--rule); font-size: 12.5px; line-height: 1.45; } .ca-card .ca-rows dt { font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); } .ca-card .ca-rows dd { margin: 0; color: var(--ink-2); } @media (max-width: 760px) { .ca-grid { grid-template-columns: 1fr; } } /* ---- Financial honest-state -------------------------------------------- */ .fin-banner { background: var(--ink); color: var(--cream); padding: 26px 30px; display: grid; grid-template-columns: auto 1fr; gap: 20px; align-items: start; margin-bottom: 26px; } .fin-banner .fb-ic { font-family: var(--display); font-style: italic; font-size: 44px; line-height: 1; color: var(--accent); } .fin-banner .fb-t { font-family: var(--display); font-size: clamp(20px, 2.2vw, 28px); line-height: 1.25; margin: 0 0 8px; } .fin-banner p { font-size: 13.5px; line-height: 1.55; color: var(--cream-deep); margin: 0; } .fin-banner .fb-meta { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 12px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(244,238,230,0.65); } .fin-banner .fb-meta b { color: var(--cream); } @media (max-width: 700px) { .fin-banner { grid-template-columns: 1fr; padding: 22px 20px; } } .scen-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; } .scen { background: var(--paper); border: 1px solid var(--rule); border-top: 3px solid var(--rule-strong); padding: 15px 17px; } .scen.base { border-top-color: var(--ink); } .scen .sc-k { font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-2); font-weight: 700; } .scen .sc-rev { font-family: var(--display); font-size: 26px; color: var(--ink); margin: 6px 0 2px; } .scen .sc-sub { font-size: 11.5px; color: var(--ink-2); line-height: 1.45; } .scen .sc-rows { margin-top: 10px; padding-top: 8px; border-top: 1px dotted var(--rule); font-family: var(--mono); font-size: 10px; color: var(--ink-3); line-height: 1.8; letter-spacing: 0.04em; } @media (max-width: 820px) { .scen-grid { grid-template-columns: 1fr 1fr; } } /* ---- Voice of the market ------------------------------------------------ */ .vom-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .vom { background: var(--cream); border: 1px solid var(--rule); border-radius: 10px; padding: 14px 16px; } .vom .vm-k { font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink); font-weight: 700; } .vom .vm-src { font-family: var(--mono); font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); margin-left: 8px; } .vom .vm-q { font-family: var(--display); font-style: italic; font-size: 14.5px; line-height: 1.4; color: var(--ink); margin: 8px 0 0; } .vom .vm-q::before { content: "\201C"; } .vom .vm-q::after { content: "\201D"; } .vom .vm-q2 { font-family: var(--display); font-style: italic; font-size: 13px; line-height: 1.4; color: var(--ink-2); margin: 8px 0 0; } @media (max-width: 760px) { .vom-grid { grid-template-columns: 1fr; } } /* ---- Personas ------------------------------------------------------------ */ .persona-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; } .persona { background: var(--paper); border: 1px solid var(--rule); padding: 20px 22px; display: flex; flex-direction: column; gap: 10px; } .persona .p-name { font-family: var(--display); font-size: 24px; line-height: 1.1; } .persona .p-role { font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); line-height: 1.6; } .persona .p-q { font-family: var(--display); font-style: italic; font-size: 14.5px; line-height: 1.4; color: var(--ink); margin: 0; border-left: 3px solid var(--accent); padding-left: 12px; } .persona .p-jtbd { font-size: 12.5px; line-height: 1.5; color: var(--ink-2); margin: 0; } @media (max-width: 820px) { .persona-grid { grid-template-columns: 1fr; } } /* ---- Workbook-style block ------------------------------------------------ */ /* ---- Readiness rows ------------------------------------------------------- */ .ready-row { display: grid; grid-template-columns: 78px 116px 1fr 28px; gap: 18px; align-items: start; padding: 11px 0; border-bottom: 1px dotted var(--rule); } .ready-row:last-child { border-bottom: 0; } .ready-row .rr-t { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink); font-weight: 700; } .ready-row .rr-b { font-size: 12.5px; color: var(--ink-2); line-height: 1.5; margin: 0; } /* Drop AF: the tier's own call, beside its blockers. Display serif for the verdict word (it is the asserted value), mono for the score (it is metadata) — the type system, unchanged. */ .ready-row .rr-v { display: flex; flex-direction: column; gap: 2px; } .ready-row .rr-v .rv-w { font-family: var(--display); font-size: 17px; line-height: 1; color: var(--ink); } .ready-row .rr-v .rv-s { font-family: var(--mono); font-size: 11px; letter-spacing: 0.04em; color: var(--ink-3); } .ready-row .rr-b em { color: var(--ink-3); font-style: normal; } .ready-row .rr-m { font-family: var(--display); font-size: 18px; text-align: right; line-height: 1; } body .ready-row .rr-m.no { color: var(--accent); } .ready-row .rr-m.yes { color: var(--ink); } /* ---- Bullseye test block --------------------------------------------------- */ .bulls { background: var(--cream-deep); padding: 16px 20px; margin: 16px 0; border-left: 3px solid var(--accent); } .bulls .b-k { font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; margin-bottom: 8px; } .bulls p { font-size: 13px; line-height: 1.55; color: var(--ink-2); margin: 0 0 6px; } .bulls p:last-child { margin-bottom: 0; } .bulls p b { color: var(--ink); font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; margin-right: 6px; } .bulls .kill { color: var(--accent); } /* ---- Mobile corrections to core components --------------------------------- */ @media (max-width: 760px) { .verdict-inner { grid-template-columns: 1fr !important; gap: 22px; padding: 32px 24px 28px; } .verdict .vscore { align-items: flex-start; } /* V2's release: nowrap is a desktop rule. Here the column is left-aligned and the label is free to take two lines — a wrap is correct at this width, an overflow never is. */ .verdict .vscore-of { white-space: normal; } .verdict .vscore-num { font-size: clamp(72px, 22vw, 110px); } .verdict .vword { font-size: clamp(54px, 17vw, 92px); } .verdict .vsub { max-width: none; } /* The conditional keeps the inner grid's left edge at every width, so its padding tracks the override above it rather than being authored once at desktop. */ .verdict .vcond { padding: 18px 24px 20px; font-size: 17px; } .verdict-bullets { grid-template-columns: 1fr; } .verdict-bullets > div { border-right: 0; border-bottom: 1px solid rgba(246, 241, 227, 0.2); } .verdict-bullets > div:last-child { border-bottom: 0; } .masthead-row { gap: 12px; } .masthead-meta { gap: 14px; font-size: 10px; } .section > .section-head { grid-template-columns: 1fr; gap: 4px; } .section > .section-head .nbr { font-size: 48px; } .section { padding-top: 56px; } } /* ---- Print ------------------------------------------------------------------ */ @media print { /* .toc-rail is NOT in this list: no report has ever emitted it (contract §4's retired cleanup line named it, and drop AO deleted the ~29 v1 .toc-rail/.toc-toggle rules). A print rule hiding a class the document cannot contain is §1c.1 in one selector. */ .toc-spine, .doc-switch, .export-bar, .scroll-progress { display: none !important; } /* The calendar is TAB-BASED on screen: only one week is in flow at a time, and hiding the whole component was the old workaround. On paper there are no tabs — drop the tab strip and let all four weeks flow as stacked blocks. Printing §05 as nothing was the bug. */ .launch-cal { display: block !important; } #calTabs, .lc-tabs { display: none !important; } .lc-week, .lc-week[hidden] { display: block !important; break-inside: avoid; margin-bottom: 26px; } /* Keep every label welded to the number or body it labels. A metric tile whose caption sits on page 5 and whose value sits on page 6 is not a tile, it is two orphans. */ .hero-grid, .hero-grid > *, .napkin, .napkin > div, .metric-tile, .verdict, .vladder, .timing, .comp-row, .reg-item, .story-row, .rice-row, .ledger-row, .qa, .chg-row, .ready-row, .lp, .social-post, .screen-spec, .diff-card, .mvp-card, .epic, .jtbd, .brand-row, .segment-row, .market-tier, .tier-badge, .risk-card, .pivot-card, .fin-banner, .closing-band { break-inside: avoid; } /* A section head at the foot of a page is a promise the page does not keep. */ .sec-head, .section > .head, .sub, .ttl { break-after: avoid; } .verdict { break-after: avoid; } /* The hero is one statement — headline, triptych and meta strip travel together, and the tier's opening page ends there. Export 1 broke the triptych mid-column: the "What SCAN answers" label printed on page 1 and its answer on page 2, leaving page 2 holding two orphaned lines. Export 2 then pushed the whole triptych to page 2, leaving page 1 as a bare headline. The hero only fits as a cover if it is SIZED like one — the screen headline is set for a 1400px viewport and simply does not fit a Letter page beside the triptych, so it steps down here. */ section:has(> .hero-grid) { break-after: page; break-inside: avoid; padding-top: 24px !important; } section:has(> .hero-grid) .display-xl { font-size: 46px; line-height: 1.04; } section:has(> .hero-grid) .spacer-md { height: 20px; } section:has(> .hero-grid) .hero-grid { gap: 22px; } .hero, .hero + .meta-strip { break-inside: avoid; } /* On screen the competitor row is a wide 4-column band. At print width the edge column collapses to ~10 characters and sets one sentence as eight ragged lines. Two columns. */ .comp-row { grid-template-columns: 1fr 1fr !important; row-gap: 10px; } .rtf-card, .ca-card, .persona, .scen, .vom, .evm .card-b, .bulls, .som-note, .esc-band, .trust-strip, .flow-block, .sprint-phase, .wk, .chan, .tier-c, .warm, .day-cell, .kpi-tile, .trigger-card, .gate { break-inside: avoid; } .section { padding-top: 40px; } /* ---- CONTENT LOSS, not cosmetics -------------------------------------------- Chrome does not fragment a CSS grid container across pages: grid items that straddle a page boundary are CLIPPED AWAY rather than pushed to the next page. The first SCAN export silently lost 6 of 9 evidence cards, 2 of 3 critical assumptions and 1 of 5 competitors — the page count looked plausible and the content was simply gone. Block flow paginates reliably. Export 2 de-gridded everything and lost NOTHING (9/9 evidence, 5/5 competitors, 3/3 assumptions) at a cost of 6 extra pages. Export 3 tried to win those pages back by keeping grids of ≤ 4 items and forbidding them to fragment — and the loss came straight back: 4 of 6 evidence cards, 1 of 5 competitors, 2 of 3 critical assumptions. `break-inside: avoid` is a HINT. On a container taller than the remaining page it is ignored, the grid fragments anyway, and the overflowing items are clipped. Three tall cards in a row are taller than a page, so the exception was never safe. So: no exceptions. Every multi-item card grid is block flow on paper. Six pages is the honest price of not silently deleting a third of the report, and one column of full-measure text is the better read on paper anyway — no hover, no scroll, no reason for two narrow columns. Only fixed-height peer ROWS keep their columns (below). */ .evm, .ca-grid, .vom-grid, .grid-2, .grid-3, .scen-grid, .mkt-stack, .persona-grid, .ng-grid, .warm-grid, .pillar-grid, .hl-grid, .mc-grid, .wk-grid, .day-grid, .kpi-grid, .tier-grid, .risk-grid{ display: block !important; } .evm > *, .ca-grid > *, .vom-grid > *, .grid-2 > *, .grid-3 > *, .scen-grid > *, .mkt-stack > *, .persona-grid > *, .ng-grid > *, .warm-grid > *, .pillar-grid > *, .hl-grid > *, .mc-grid > *, .wk-grid > *, .day-grid > *, .kpi-grid > *, .tier-grid > *, .risk-grid > *{ break-inside: avoid; margin-bottom: 18px; max-width: 100%; } /* These are SHORT single rows — a strip of metric tiles, a trust row, four napkin cells. They fit inside one page with room to spare, so avoid is honoured and the row moves whole. Nothing here is ever tall enough to be clipped. */ .grid-4, .napkin, .trust-grid, .verdict-bullets, .rtf, .hero-grid, .thin-stats, .dc-gates, .hyp-row, .dim-row, .comp-row, .lc-week-goal { break-inside: avoid; } /* Short peer rows stay side by side — but the CONTAINER gets break-inside: avoid so it jumps whole to the next page rather than fragmenting and shedding cells. This is the other half of the same bug: a grid that fits on a page is safe, a grid that is split is not, so never let one be split. */ .grid-4, .napkin, .trust-grid, .verdict-bullets, .rtf, .hero-grid, .thin-stats, .dc-gates, .hyp-row, .dim-row, .comp-row, .lc-week-goal { break-inside: avoid; } .esc-band, .verdict, .rtf-tar, .fin-banner, .gate, .sec-card[data-prio="critical"] { -webkit-print-color-adjust: exact; print-color-adjust: exact; } /* Two lines of a paragraph alone at the top or foot of a page. */ p, li, dd, blockquote { orphans: 3; widows: 3; } /* The appendix sign-off duplicated the running footer on the last page. Both are now replaced by real @page margin boxes below — CSS owns the running furniture. */ .foot, .print-footer, .report-foot { display: none !important; } /* ---- Running furniture and page numbers ------------------------------------- Chrome 131 shipped @page margin boxes with the `page` and `pages` counters, so the report can number itself in CSS — no polyfill, no fixed-position footer, no relying on the print dialog's "Headers and footers" checkbox (which prints the URL and the system date). Declaring ANY margin box also suppresses that browser default, so the furniture below is the only furniture. The bottom-centre box is intentionally EMPTY here: it carries the tier, run id and filing date, which differ per report, so each tier file overrides just that one box in its own