/**
 * solutions-csrd.css — page styles for /solutions/csrd/ (page-csrd.php · branch solutions-csrd).
 *
 * Scoped to .csrd-* so nothing leaks. Tokens ONLY (raw micro-px for hairlines and icon sizes is
 * house style; every colour/space/radius/shadow is a token). Everything it reuses now lives in
 * components.css — .pv-node/.pv-scope/.pv-name/.pv-val/.pv-link/.pv-emit, .pill, .status-pill and
 * the .vh-lifecycle rail (promoted out of verifier-hub.css in b72e909) — so this page enqueues
 * one page stylesheet on top of the shared ones and nothing else. Product minis are token-built
 * LIGHT app objects (DL §1), never dark.
 *
 * Focus rings on the §7 navy band and the §9 CTA panel come from the global --c-focus-on-dark
 * rule in components.css (ratified §8.6). This file deliberately adds NO page-scoped focus fix.
 *
 * §8.5: FOUR boxed objects, each earned — the hero Scope-3 line card, the §4 model canvas, the
 * §5 Relations panel (elevated distinct LIGHT product objects) and the §3 two-state contrast,
 * whose .vs-col panels are bordered by blocks/compare-old-new itself in components.css. §6 is a
 * borderless beat flow + the reused rail, §7 a slim inline standards strip. No card-grids at all
 * on this page, so the "≥2 consecutive card-grids" rule cannot be reached.
 *
 * §8.6 / motion: this file nests NOTHING on `.reveal` and adds no animation of its own, so the
 * shared `.no-js .reveal` end-state in components.css is the whole story — there is no
 * page-level no-JS end-state to ship here. Reduced-motion is untouched.
 *
 * Data-meaning colour is semantic only (DL §2/§3): green = third-party verified, amber = self
 * attested / draft. The §5 request states deliberately avoid BOTH: "Received" is blue (arrived/actionable) because an
 * arrived attestation is not verified, and "Pending" is a neutral chip because amber is a data
 * state. An earlier draft had "Received" green; that was wrong and the reasoning is kept here.
 * Green on this page: the two hero "Verified on CarbonSig" stamps authored here, plus the four
 * check marks blocks/compare-old-new renders in §3 from components.css — the same shared-block
 * blind spot that made the boxes-audit undercount, so it is written down rather than re-learned.
 *
 * Holds 375→2560 with zero horizontal scroll.
 */

/* In-page anchor targets clear the sticky header. Without this the eyebrow of #model-once (the
   hero's own "See how it works" target) lands at top ~44px, behind the 65px header, at 375 and
   768. Same page-scoped idiom /solutions/cbam/ uses; the shared default is still worth fixing
   centrally (BUILD_NOTES §3), but nothing here has to wait for that. */
#model-once,#how-it-works{scroll-margin-top:calc(var(--sp-16) + var(--sp-4))}

/* ─────────────────────────────────────────────────────────────
   §1 HERO — Scope-3 line card (elevated LIGHT object; boxing earned)
   ───────────────────────────────────────────────────────────── */
.csrd-visual{display:flex;flex-direction:column;gap:var(--sp-3);min-width:0}
.csrd-card{width:100%;max-width:480px;margin-inline:auto;background:var(--s-page);
  border:1px solid var(--c-border);border-radius:var(--r-xl);box-shadow:var(--sh-xl);overflow:hidden}
.csrd-card-head{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);
  flex-wrap:wrap;padding:var(--sp-4);border-bottom:1px solid var(--c-border)}
.csrd-card-head .eyebrow{margin-bottom:0}

.csrd-lines{list-style:none;margin:0;padding:0}
.csrd-line{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);
  flex-wrap:wrap;padding:var(--sp-4)}
.csrd-line + .csrd-line{border-top:1px solid var(--c-border)}
.csrd-line-main{min-width:0}
.csrd-line-name{margin:0;font-size:var(--t-small);font-weight:700;color:var(--c-heading)}
.csrd-line-sub{margin:var(--sp-1) 0 0;font-size:var(--t-caption);color:var(--c-muted)}

/* Verified stamp — own class, not verifiers.css's .vstamp: that stylesheet is page-scoped to
   /verifiers/ and is not enqueued here, so reusing the class would render an unstyled mark. */
.csrd-stamp{display:inline-flex;align-items:center;gap:var(--sp-2);white-space:nowrap;
  font-size:var(--t-caption);font-weight:800;color:var(--c-success);
  background:var(--c-success-tint);border-radius:var(--r-full);padding:var(--sp-1) var(--sp-3)}
.csrd-stamp .cs-icon{width:var(--sp-4);height:var(--sp-4);color:var(--c-success);flex:none;stroke-width:2.25}

.csrd-card-foot{margin:0;padding:var(--sp-3) var(--sp-4);border-top:1px solid var(--c-border);
  background:var(--s-alt);font-size:var(--t-caption);color:var(--c-muted);line-height:var(--lh-body)}
.csrd-card-foot b{color:var(--c-heading);font-weight:700}

/* ─────────────────────────────────────────────────────────────
   §4 / §5 FEATURE ROWS — alternating media ↔ copy. The media COLUMN is plain;
   the panel inside it is the earned box.
   ───────────────────────────────────────────────────────────── */
.csrd-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-12);align-items:center}
.csrd-media{min-width:0;display:flex;justify-content:center}
.csrd-row--rev .csrd-media{order:2}
@media (max-width:900px){
  .csrd-row{grid-template-columns:1fr;gap:var(--sp-8)}
  .csrd-row--rev .csrd-media{order:0}   /* media above copy when stacked */
}

/* Shared chrome for the two app micro-diagrams (LIGHT, elevated). */
.csrd-canvas,
.csrd-rel{width:100%;max-width:480px;background:var(--s-page);border:1px solid var(--c-border);
  border-radius:var(--r-xl);box-shadow:var(--sh-lg);overflow:hidden}

/* §4 — product model canvas. Dotted app grid, node row + the Scope-1 node hanging below it. */
.csrd-canvas{padding:var(--sp-4);
  background:radial-gradient(var(--c-border) 1px,transparent 1.5px) 0 0/var(--sp-6) var(--sp-6);
  background-color:var(--s-page)}
.csrd-flow{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;align-items:center;gap:var(--sp-2)}
.csrd-canvas .pv-node{background:var(--s-page);min-width:0}
/* Row 2 — the direct-emission card hangs below the process it belongs to (DL §2). It spans the
   full row rather than sitting in column 3: a 1fr track's automatic minimum is min-content, so
   pinning the emit to the middle column inflated that track to ~163px and truncated the input and
   output names. Spanning keeps all three tracks equal, and .pv-emit centres the node — which in a
   symmetric grid is exactly the process column's centre. */
.csrd-flow .pv-emit{grid-column:1 / -1;grid-row:2;margin-top:var(--sp-3)}
.csrd-canvas-foot{margin:var(--sp-4) 0 0;padding-top:var(--sp-3);border-top:1px solid var(--c-border);
  font-size:var(--t-caption);color:var(--c-muted);text-align:center}

/* The canvas stacks on ITS OWN width, not the viewport's (DL §8: repeated components adapt
   via container queries). A viewport breakpoint got this wrong: .csrd-row goes two-column at
   901px, so between 901 and ~1020px the canvas column is ~370–450px while a 560px viewport
   rule still had it three-across — and .pv-name (nowrap + ellipsis) truncated every node to
   "Supplier E…" / "Forming li…" / "Coated sh…". Measured at 960, which is a half-screen
   window on a 1920 display.
   min-width:0 is load-bearing: components.css .pv-link carries min-width:16px, which beats
   width:2px and paints the vertical connector as a 16x16 grey SQUARE — on every phone. */
.csrd-media{container-type:inline-size}
@container (max-width:470px){
  .csrd-flow{display:flex;flex-direction:column;gap:var(--sp-2)}
  .csrd-flow .pv-link{width:2px;min-width:0;height:var(--sp-4);margin-inline:auto}
  /* Stacked, the emission card would otherwise fall under the OUTPUT (last in DOM). Order keeps
     it under its process: input, link, process, EMISSION, link, output. */
  .csrd-flow .pv-emit{order:4;margin-top:0}
  .csrd-flow>.pv-link:nth-of-type(2){order:5}
  .csrd-flow>.pv-node--out{order:6}
}
@supports not (container-type:inline-size){
  @media (max-width:560px),(min-width:901px) and (max-width:1023px){
    .csrd-flow{display:flex;flex-direction:column;gap:var(--sp-2)}
    .csrd-flow .pv-link{width:2px;min-width:0;height:var(--sp-4);margin-inline:auto}
    .csrd-flow .pv-emit{order:4;margin-top:0}
    .csrd-flow>.pv-link:nth-of-type(2){order:5}
    .csrd-flow>.pv-node--out{order:6}
  }
}

/* §5 — Relations panel: requests out, attestations back, then the EAC becomes an input. */
.csrd-rel-head{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);
  flex-wrap:wrap;padding:var(--sp-4);border-bottom:1px solid var(--c-border)}
.csrd-rel-head .eyebrow{margin-bottom:0}
.csrd-rels{list-style:none;margin:0;padding:0}
.csrd-rel-item{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);
  flex-wrap:wrap;padding:var(--sp-4)}
.csrd-rel-item + .csrd-rel-item{border-top:1px solid var(--c-border)}
.csrd-rel-main{min-width:0}
.csrd-rel-name{margin:0;font-size:var(--t-small);font-weight:700;color:var(--c-heading)}
.csrd-rel-sub{margin:var(--sp-1) 0 0;font-size:var(--t-caption);color:var(--c-muted)}
.csrd-rel-flow{display:flex;align-items:center;justify-content:center;gap:var(--sp-2);flex-wrap:wrap;
  margin:0;padding:var(--sp-4);border-top:1px solid var(--c-border);background:var(--s-alt)}
/* Step + its arrow wrap as ONE unit. Shortening the labels was not enough: at 375 the chain
   still broke after the second arrow and left it dangling at the end of the line. */
.csrd-rel-pair{display:inline-flex;align-items:center;gap:var(--sp-2)}
/* Same grammar for the §6 lifecycle rail, whose markup is authored per page: arrow + the state
   it points into, wrapping as one unit. Gap matches .vh-lifecycle's own so nothing shifts. */
.csrd-life-pair{display:inline-flex;align-items:center;gap:var(--sp-2)}
.csrd-rel-step{font-size:var(--t-caption);font-weight:700;color:var(--c-body);background:var(--s-page);
  border:1px solid var(--c-border);border-radius:var(--r-sm);padding:var(--sp-2) var(--sp-3)}
.csrd-rel-step--out{background:var(--s-bluelt);border-color:var(--c-border-accent);color:var(--c-link)}
.csrd-rel-arrow{color:var(--c-muted);flex:none} /* --c-muted, not a border token: at 1.41:1 a hairline-grey arrow reads as a rendering fault even though the panel is aria-hidden */
/* Request states. NEITHER may be green: green is reserved for verified/complete (DL §3), and a
   received attestation may still be self-attested — exactly what the §5 copy says.
   Blue = arrived/actionable, neutral = still waiting. Amber is out too, being a data state. */
.csrd-quiet{background:var(--s-sunken);color:var(--c-muted)}
.csrd-rel .csrd-card-foot{background:var(--s-page)}

/* ─────────────────────────────────────────────────────────────
   §6 VERIFY — borderless numbered beats (rail = reused .vh-lifecycle) + the truth guard
   ───────────────────────────────────────────────────────────── */
.csrd-beats{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-8)}
.csrd-beats>li{gap:var(--sp-2)}
.csrd-beats .h4{margin:var(--sp-1) 0 0}
@media (max-width:760px){ .csrd-beats{grid-template-columns:1fr;gap:var(--sp-6)} }

/* The load-bearing guard (verification ≠ CSRD assurance) — prose on a hairline, not a callout
   box: §8.5 does not box explanatory prose, and boxing it would read as a disclaimer to skip. */
.csrd-guard{max-width:var(--measure);margin-inline:auto;
  padding-top:var(--sp-6);border-top:1px solid var(--c-border)}
.csrd-guard p + p{margin-top:var(--sp-3)}
.csrd-guard b{color:var(--c-heading)}

/* In-content links get a ≥44px hit area (DoD touch rule) without becoming buttons. */
.csrd-links{display:flex;align-items:center;flex-wrap:wrap;gap:0 var(--sp-1)}
.csrd-links a{display:inline-flex;align-items:center;min-height:var(--tap-min)}
.csrd-sep{margin-inline:var(--sp-2);color:var(--c-muted)}

/* ─────────────────────────────────────────────────────────────
   §7 OUTCOME (navy) — slim inline standards strip (names, not cards — §8.5)
   ───────────────────────────────────────────────────────────── */
.csrd-strip{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--sp-6)} /* --sp-6, not --sp-3: these are 44px pill CONTROLS in their own strip, so the DoD's >=24px separation applies with no inline-link exception to lean on */
.csrd-chip{display:inline-flex;align-items:center;gap:var(--sp-2);min-height:var(--tap-min);
  font-size:var(--t-small);font-weight:700;color:var(--c-eyebrow-dark);
  background:var(--c-overlay-light);border:1px solid var(--c-border-on-dark);
  border-radius:var(--r-full);padding:var(--sp-2) var(--sp-6)}
/* Two of the three chips are links to sibling solution pages; the hover state is the only
   thing that separates them visually from the ESRS E1 chip, which is this page. */
a.csrd-chip{text-decoration:none;transition:background var(--dur-2) var(--ease)}
a.csrd-chip:hover{background:var(--c-border-on-dark)}
/* Hover was the only thing marking these two as links — i.e. nothing at all on touch. The
   trailing arrow is the visible affordance; the wording ("Also do …") carries the rest. */
.csrd-chip-go{margin-inline-start:var(--sp-1)}
.csrd-chip .cs-icon{width:var(--sp-4);height:var(--sp-4);color:var(--c-eyebrow-dark);flex:none}

.csrd-outcome-note{max-width:var(--measure);margin-inline:auto;font-weight:600}
.section--navy .csrd-outcome-note{color:var(--c-on-dark)} /* AA: full white for the closing line */
/* The two links were inline in that sentence, 12.9px apart, expanded to 44px by the rule below —
   i.e. controls, not inline text, so the DoD's ">=24px apart" applies with no SC 2.5.8 exception
   to lean on. They are now their own row at --sp-6, and the "·" that separated them is gone with
   the inline framing. Third time this rule caught this page; see BUILD_NOTES §3. */
.csrd-outcome-links{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
  gap:var(--sp-6);margin-top:var(--sp-3)}
.csrd-outcome-links a{display:inline-flex;align-items:center;min-height:var(--tap-min);font-weight:600}

/* ─────────────────────────────────────────────────────────────
   §8 FAQ + §9 closing link
   ───────────────────────────────────────────────────────────── */
.csrd-faq{display:flex;flex-direction:column;gap:var(--sp-8);max-width:var(--measure);
  margin-inline:auto;width:100%}
.csrd-standards-link{margin-top:var(--sp-6)} /* --sp-6, not --sp-2: this <p> has one child and no
  surrounding prose, so it is a CONTROL under the button row (DoD >=24px), not an inline link. The
  same idiom ships tighter on /solutions/epd/ and /solutions/cbam/ — routed, see BUILD_NOTES §3. */
.cta-panel .csrd-standards-link a{color:var(--c-eyebrow-dark);font-weight:700;
  display:inline-flex;align-items:center;min-height:var(--tap-min)}