/* ==========================================================================
   Evidence Reporting - board-room paper with security-print finishing.
   White page in ALL FOUR concepts, cold hue, guilloché foil placed like
   certificate finishing touches. Per-concept structure (CONCEPTS.md v3):
     sovereign: hero rule + carrier head rule + seal stripe + two pills
     ledger:    guilloché top rule + carrier rule + seal stripe + holo-frame
                slide + hero pill only
     obsidian:  the dark "dollars" beat (steel) is the page's ONE foil
                moment; pills, rules, and the seal stripe gate off on white
     specimen:  sheet frame (top rule + watermark columns + bottom hairline),
                serial strip, steel drop-cap numerals, gives-card seal
                stripe; pills replaced by text twins
   Page CSS only sizes/positions foil boxes - foil styling itself lives in
   assets/holo/holo-fallback.css (frozen); concept gating hooks come from
   concepts/concepts.css. Tokens from brand/elevate-tokens.css.
   ========================================================================== */

/* ---------- page shell (concept convention: white in all concepts) ---------- */
.rep{background:var(--page-bg,var(--canvas));color:var(--page-ink,var(--ink));}
.rep section{padding:var(--space-2xl) 0;}

/* ---------- shared editorial type ---------- */
.rep-h{font-family:var(--font-display);font-weight:var(--w-bold);font-size:clamp(30px,4.2vw,52px);line-height:1.14;letter-spacing:-0.02em;color:var(--page-ink,var(--ink));margin:0 0 var(--space-sm);}
/* monochrome two-tone headline: the emphasised sentence stays ink, the em is the
   muted counterpart (no color accents on paper) */
.rep-h__em{color:var(--slate-500);}
.rep-p{font-size:18px;line-height:1.7;color:var(--page-ink,var(--ink));max-width:56ch;margin:0;}
.rep-p--center{margin:0 auto;}

/* ---------- 1 · hero ---------- */
.rep .rep-hero{isolation:isolate;text-align:center;padding:0;}   /* .deck-full centers */
.rep-hero__in{max-width:960px;margin:0 auto;padding:120px var(--space-sm) var(--space-lg);display:flex;flex-direction:column;align-items:center;}
.rep-hero__h{font-family:var(--font-display);font-weight:var(--w-bold);font-size:clamp(44px,7vw,92px);line-height:1.05;letter-spacing:-0.03em;margin:0;}
.rep-hero__lead{font-size:clamp(19px,2.4vw,27px);line-height:1.6;max-width:34ch;margin:var(--space-sm) 0 0;}
/* the engraved certificate rule beneath the headline block (page sizes the box only) */
.rep-rule-wrap{width:min(680px,80%);margin-top:var(--space-md);}
.rep-rule{width:100%;height:28px;}
.rep-hero__cta{margin-top:var(--space-md);}

/* ---------- 2 · the translation problem ---------- */
.rep-trans__grid{display:grid;grid-template-columns:1.05fr 0.95fr;gap:var(--space-xl);align-items:center;}
@media(max-width:880px){.rep-trans__grid{grid-template-columns:1fr;gap:var(--space-lg);}}

/* mock board slide (plain CSS + one static inline SVG polyline; no foil) */
.rep-slide{background:var(--fill-1);border-radius:var(--radius-card);overflow:hidden;}
.rep-slide__bar{display:flex;justify-content:space-between;gap:var(--space-xs);padding:14px 28px;background:var(--fill-2);font-size:13px;font-weight:var(--w-medium);color:var(--slate-500);}
.rep-slide__body{padding:var(--space-md) 28px var(--space-sm);}
.rep-slide__label{font-size:14px;font-weight:var(--w-medium);color:var(--slate-500);margin:0 0 8px;}
.rep-slide__fig{font-family:var(--font-display);font-weight:var(--w-bold);font-size:clamp(48px,5.4vw,76px);letter-spacing:-0.02em;line-height:1;color:var(--page-ink,var(--ink));margin:0;}
.rep-slide__delta{font-size:15px;font-weight:var(--w-medium);color:var(--slate-500);margin:12px 0 0;}
.rep-slide__spark{display:block;width:100%;height:auto;margin-top:var(--space-sm);}
.rep-slide__spark polyline{fill:none;stroke:var(--slate-400);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;}
.rep-slide__spark circle{fill:var(--slate-950);stroke:#fff;stroke-width:2;}

/* ---------- 3 · what it gives you: the 01-05 register card ---------- */
/* one card, one guilloché seal edge on the left - the certificate's sealed spine.
   padding-left clears the contract's seal width: clamp(20px,2.5vw,36px). */
.rep-card{position:relative;overflow:hidden;background:var(--fill-1);border-radius:var(--radius-card);margin-top:var(--space-md);padding:var(--space-sm) var(--space-md);padding-left:calc(clamp(20px,2.5vw,36px) + var(--space-md));}
.rep-list{list-style:none;margin:0;padding:0;}
.rep-row{display:flex;gap:var(--space-sm);align-items:flex-start;padding:var(--space-sm) 0;}
.rep-row + .rep-row{border-top:1px solid var(--hairline);}
.rep-row__n{font-family:var(--font-mono);font-size:13px;font-weight:var(--w-medium);color:var(--slate-500);min-width:28px;padding-top:7px;}
.rep-row__b h3{font-family:var(--font-display);font-size:20px;font-weight:var(--w-bold);letter-spacing:-0.01em;color:var(--page-ink,var(--ink));margin:0 0 6px;}
.rep-row__b p{font-size:16px;line-height:1.65;color:var(--page-ink,var(--ink));max-width:64ch;margin:0;}
@media(max-width:600px){.rep-row{gap:16px;}.rep-card{padding-right:var(--space-sm);}}

/* ---------- 4 · the carrier angle: quiet band ---------- */
.rep-carrier{background:var(--fill-1);}
.rep-carrier__in{max-width:860px;text-align:center;}

/* ---------- 5 · clean streak: celebratory stat card ---------- */
/* isolation on the card: the inline foil pill's z-index:-1 fallback must paint
   above the card's own fill (COMPONENTS.md pill rule) */
.rep-streak__card{isolation:isolate;background:var(--fill-1);border-radius:var(--radius-card);max-width:900px;margin:0 auto;padding:var(--space-xl) var(--space-md);text-align:center;}
.rep-streak__badge{display:inline-block;background:var(--slate-200);color:var(--slate-950);font-size:14px;font-weight:var(--w-medium);border-radius:var(--radius-pill);padding:6px 14px;margin:0 0 var(--space-sm);}
.rep-streak__stat{font-family:var(--font-display);font-weight:var(--w-bold);font-size:clamp(34px,5vw,64px);letter-spacing:-0.02em;line-height:1.18;color:var(--page-ink,var(--ink));margin:0;}
.rep-streak__sub{font-size:17px;line-height:1.7;color:var(--page-ink,var(--ink));max-width:46ch;margin:var(--space-sm) auto 0;}

/* ---------- 6 · closer: the page's one dark beat ---------- */
/* .cx-dark-band (concepts.css) keeps this dark in every concept; the ink
   look below is the same surface stated locally so the page stands alone */
.rep-final{background:var(--slate-950);color:var(--on-dark);}
.rep-final__in{max-width:860px;text-align:center;}
.rep-final__h{font-family:var(--font-display);font-weight:var(--w-bold);font-size:clamp(36px,5.6vw,68px);line-height:1.08;letter-spacing:-0.025em;color:var(--on-dark);margin:0;}
.rep-final__p{font-size:18px;line-height:1.7;color:rgba(255,255,255,0.85);max-width:52ch;margin:var(--space-sm) auto var(--space-md);}
/* 2x closer CTA: sizes the foil pill face (same values on every page) */
.btn--holo-xl .hl.hl--btn{font-size:22px;padding:22px 44px;border-radius:var(--radius-pill,9999px);}

/* ---------- concept variants (boxes + twins only; gating in concepts.css) ---------- */
/* plain text twin standing in for a banned foil pill (ledger streak;
   obsidian and specimen both) - same weight as .hl so the emphasis survives
   without the foil */
.rep-plain{font-weight:var(--w-bold);}
/* small engraved rule under the carrier heading (sovereign section heads +
   ledger's in-page rule; page sizes the box only) */
.rep-headrule{width:min(220px,50%);height:8px;margin:0 auto var(--space-sm);}
/* specimen's sheet furniture: serial strip under the hero CTA + steel
   drop-cap numerals on section heads (steel derivatives; type defaults in
   holo-fallback.css - boxes only here). The numeral host sections isolate so
   the foil's z-index:-1 CSS fallback paints above the page background. */
.rep-trans,.rep-gives,.rep-carrier{isolation:isolate;}
.hl.rep-serial,.hl.rep-serial.hl-gl{display:block;margin-top:var(--space-md);}
.hl.rep-num,.hl.rep-num.hl-gl{display:block;font-size:clamp(28px,3.2vw,40px);margin-bottom:12px;}
/* obsidian: the gives-card seal stripe gates off - restore symmetric padding */
[data-concept="obsidian"] .rep-card{padding-left:var(--space-md);}
/* obsidian's dollars beat: full-viewport dark band (.cx-dark-band owns the
   ink + isolation), one glowing steel line + one support line */
.rep-dollars{min-height:100vh;display:flex;align-items:center;}
.rep-dollars__in{display:flex;flex-direction:column;align-items:center;gap:var(--space-sm);text-align:center;}
.rep-dollars__big{font-family:var(--font-display);font-weight:var(--w-bold);font-size:clamp(40px,8.4vw,140px);line-height:1.05;letter-spacing:-0.03em;}
.rep-dollars__sub{font-size:clamp(17px,1.6vw,21px);line-height:1.5;color:rgba(255,255,255,0.72);max-width:46ch;margin:0;}
@media(max-width:640px){.hl.rep-dollars__big{white-space:normal;}}

/* ---------- silky IO reveals (reporting.js) ----------
   Hidden state is gated on html.rv-on, which only reporting.js sets - with no
   JS everything renders visible. Reduced-motion never hides or moves anything. */
html.rv-on .rv{opacity:0;transform:translateY(var(--reveal-rise,20px));transition:opacity var(--dur-reveal,500ms) var(--ease-silk,ease-out),transform var(--dur-reveal,500ms) var(--ease-silk,ease-out);}
html.rv-on .rv.in{opacity:1;transform:none;}
@media(prefers-reduced-motion:reduce){
  html.rv-on .rv{opacity:1;transform:none;transition:none;}
}