/* release-health-snapshot-r2.css — Report 02 content stylesheet.
   14-08-2026, IW-380 (Tech Spec §2). Transformed from the locked
   mockup's embedded <style> block (ClaudeMockup_v4_0.html /
   ClaudeMockup_v4_0_FR.html — identical styles in both languages)
   into a properly scoped, standalone file so this content can be
   safely reused across the standalone page, the tray, and the
   Dashboard without leaking onto any of them or colliding with
   Report 01's own release-health-snapshot3.css.

   Scoping: every selector is compound-scoped under .snapshot.rhs2,
   not just .snapshot. Report 01's stylesheet already owns bare
   ".snapshot <class>" selectors, and several class names here overlap
   with Report 01's own (.panel, .kpi, .eyebrow, .brand, among others)
   — both stylesheets can be linked on the same page at once (e.g. the
   Release Dashboard, which swaps either report's content into the
   same container). Compound-scoping means this file's rules only
   match an element that sits under a wrapper carrying BOTH classes
   (class="snapshot rhs2"), so the two reports' styles can never
   cross-apply to each other's markup.

   Variables: re-declared under an --rhs2- prefix (mockup used bare
   :root custom properties) so nothing here depends on or overwrites
   Report 01's --rhs- variables.

   Renamed: .footer -> .page-footer, matching Report 01's own
   convention — global2.css already defines a real sitewide .footer
   class, so the mockup's bare .footer would otherwise collide with
   it on every host page.

   Dropped: the mockup's unscoped `*{box-sizing:border-box}` reset and
   `body{...}`'s background/margin. Both are page-level chrome, not
   this component's concern — the real pages (Story 10) render this
   content inside the site's own shell and the shared .report-frame
   card (report-frame.css, IW-378), which already supplies the
   surrounding background. Carrying either rule over unscoped would
   leak onto the host page, same failure mode Report 01's original
   unscoped version hit against EN_whatsNew.html.

   14-08-2026 fix: `body`'s `padding: 28px 0 60px` was ALSO the only
   source of vertical breathing room around the report — dropping
   `body` entirely (as above) silently dropped that too, since
   `.snapshot`'s own padding was always horizontal-only (`0 24px`) and
   report-frame.css's `.report-frame`/`.report-frame-content` add none
   either. Content was touching the frame's top/bottom edges directly
   on the Dashboard.

   First fix moved body's original 28px/60px onto `.snapshot.rhs2`
   directly. Revised same day, on request, to `36px 24px` instead —
   matching Report 01's own `.snapshot { margin: 36px auto; }` value
   from release-health-snapshot3.css, so Report 02's gap under the
   frame's chrome-dots bar reads consistently with Report 01's rather
   than visibly thinner. Note this isn't a pixel-identical match:
   Report 01 additionally wraps its content in its own bordered/
   shadowed card (`border: 1px solid ...; box-shadow: ...;`) inside
   the frame, a second visual layer Report 02 deliberately doesn't
   have (Story 9 chose to rely solely on report-frame.css's card
   rather than nesting a second one) — so 36px here reads as slightly
   thinner than Report 01's effective gap even at the same number,
   since Report 01 also has a border to visually anchor it. Close
   enough by design; revisit only if a literal pixel match is wanted.

   Responsive: the mockup's single @media (max-width: 820px) rule was
   converted to an @container query (container-name: rhs2) once this
   content's tray context was confirmed, matching Report 01's own
   fix in release-health-snapshot3.css — see the comment on
   .snapshot.rhs2's container-type/container-name declaration below
   for why a viewport query isn't safe here. */

.snapshot.rhs2 {
  --rhs2-cream: #ede9df;
  --rhs2-cream-deep: #e4decf;
  --rhs2-card: #fbfaf6;
  --rhs2-ink: #16232f;
  --rhs2-ink-soft: #4c5a63;
  --rhs2-line: #dad4c3;
  --rhs2-navy: #12283a;
  --rhs2-teal: #a7bbc1;
  --rhs2-teal-soft: #e4f1ec;
  --rhs2-amber: #c87f2b;
  --rhs2-amber-soft: #fbeeda;
  --rhs2-white: #ffffff;

  color: var(--rhs2-ink);
  font-family: "Inter", sans-serif;

  max-width: 1080px;
  margin: 0 auto;
  padding: 36px 24px;

  /* 14-08-2026, IW-380: container query context, matching Report 01's
     .snapshot rule in release-health-snapshot3.css. This content also
     renders inside the What's New tray's fixed-width drawer (~960px,
     drawer.css .role-drawer-panel.is-wide) as well as standalone and
     inside the Dashboard's frame — a viewport media query can't tell
     "narrow browser window" apart from "sitting in the narrower
     drawer," which is exactly the bug Report 01 hit before switching
     to container queries (see release-health-snapshot3.css's own
     comment on this). container-name is "rhs2", not "snapshot" —
     deliberately distinct from Report 01's container name, so an
     @container query here can never accidentally match against the
     wrong report's ancestor if both stylesheets are ever loaded on
     the same page at once (e.g. the Release Dashboard, once Story 12
     adds Report 02 to its listing alongside Report 01). */
  container-type: inline-size;
  container-name: rhs2;
}

/* Scoped box-sizing reset — see file header. Only applies within an
   element carrying both .snapshot and .rhs2. */
.snapshot.rhs2,
.snapshot.rhs2 *,
.snapshot.rhs2 *::before,
.snapshot.rhs2 *::after {
  box-sizing: border-box;
}

/* 14-08-2026, IW-380 fix: force every descendant to explicitly
   inherit font-family, rather than relying on plain CSS inheritance
   from .snapshot.rhs2 above. Inheritance is the WEAKEST thing in the
   entire cascade — it loses to literally any rule that directly
   matches the element, no matter how low that rule's specificity is.
   Several elements in this file (.kpi-value, .eyebrow, etc.) are
   plain tags like <p>, so a bare `p { font-family: ... }` rule
   anywhere in the host page's global2.css or about.css — even with
   almost no specificity of its own — was silently beating the
   inherited "Inter" and replacing it with the site's own serif body
   font (confirmed via DevTools: computed font-family was resolving to
   Georgia on .kpi-value, while font-weight and color, which nothing
   else on the page happens to also target on <p>, resolved correctly).
   This rule has the same specificity as the box-sizing reset above,
   which already protects against this exact class of host-page
   bleed-through — this just extends that same protection to
   font-family. */
.snapshot.rhs2 * {
  font-family: inherit;
}

.snapshot.rhs2 .relwrap { position: relative; }

/* ===== Masthead ===== */

.snapshot.rhs2 .masthead {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  margin-bottom: 22px;
  /* 14-08-2026 fix: without this, CSS Grid's default align-items:
     stretch makes both columns match the height of whichever is
     naturally taller — but it only stretches the wrapper div, not the
     content inside it, so the shorter column's content sits at its
     natural height with empty space below, while the taller column's
     last element sits flush against the row boundary. Which column is
     "taller" flips between EN and FR because their text wraps
     differently (EN: right column ends in "The Value", flush, no gap;
     FR: right column "La Valeur" ends up shorter, with gap, while the
     KPI grid becomes the flush one instead) — same CSS, opposite-
     looking result per language. align-items:start removes the
     stretch entirely so both columns just sit at their own natural
     height regardless of which language's copy happens to wrap more. */
  align-items: start;
  /* 17-08-2026, IW-446 systemic audit: Report 01's .snapshot .masthead
     sets border-bottom (1px, Report 01's own --rhs-line color), not
     declared here — leaks through unopposed. POSSIBLE VISIBLE CHANGE:
     same caveat as .kpi-strip above — worth a visual check. */
  border-bottom: none;
}

/* 17-08-2026, IW-446: both direct children of .masthead are grid
   items of its 1fr 1fr track (the left text column and .relwrap on
   the right) — same fix as .kpi above. Targeted via > div since the
   left column is an unclassed wrapper div with no shared class to
   hook. */
.snapshot.rhs2 .masthead > div {
  min-width: 0;
}

/* 17-08-2026, IW-446 systemic audit: same leak pattern as .kpi (see
   that fix's comment). Report 01's .snapshot .brand sets font-family
   and margin-bottom, neither of which this rule declared, so both
   leaked through (font-family tie broken by file load order — fragile
   even where the IW-380 inherit reset happened to win; margin-bottom
   leaking outright since nothing here competed with it). */
.snapshot.rhs2 .brand {
  font-family: inherit;
  font-weight: 800;
  font-size: 1.5rem;
  letter-spacing: -.02em;
  margin-bottom: 0;
}

/* 17-08-2026, IW-446 systemic audit: same leak pattern as .kpi.
   Report 01's .snapshot .eyebrow sets font-weight, not declared here
   — value happened to already match (800), so no visible symptom, but
   still an unintended dependency on Report 01's file. */
.snapshot.rhs2 .eyebrow {
  font-size: .78rem;
  font-weight: 800;
  color: var(--rhs2-ink-soft);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin: 10px 0 4px;
}

.snapshot.rhs2 h1 {
  font-size: 2.05rem;
  line-height: 1.08;
  margin: 6px 0 10px;
  letter-spacing: -.02em;
}

/* 17-08-2026, IW-446 systemic audit: same leak pattern as .kpi.
   Report 01's .snapshot .deck sets line-height, not declared here. */
.snapshot.rhs2 .deck {
  color: var(--rhs2-ink-soft);
  font-size: .95rem;
  line-height: 1.5;
  margin: 0 0 14px;
}

.snapshot.rhs2 .outcomes {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
}
.snapshot.rhs2 .outcomes li {
  font-weight: 700;
  font-size: .85rem;
  padding-left: 16px;
  position: relative;
}
.snapshot.rhs2 .outcomes li::before {
  content: "●";
  color: #157b6f;
  position: absolute;
  left: 0;
  font-size: .6rem;
  top: 5px;
}

/* ===== Delivery diagram ===== */

.snapshot.rhs2 .journey-card {
  background: var(--rhs2-card);
  border: 1px solid var(--rhs2-line);
  border-radius: 14px;
  padding: 18px;
}
.snapshot.rhs2 .journey-title {
  font-weight: 700;
  font-size: .85rem;
  /*color: var(--rhs2-teal);*/
  color: #157b6f;
  text-transform: uppercase;
  letter-spacing: .05em;
  margin: 0 0 10px;
}
.snapshot.rhs2 .row-flow {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.snapshot.rhs2 .node {
  border: 1.5px solid var(--rhs2-line);
  border-radius: 8px;
  padding: 8px 12px;
  font-weight: 700;
  font-size: .78rem;
  background: var(--rhs2-white);
  text-align: center;
  min-width: 52px;
}
.snapshot.rhs2 .node.active { border-color: var(--rhs2-teal); color: var(--rhs2-teal); }
.snapshot.rhs2 .node.dash { border-style: dashed; color: var(--rhs2-ink-soft); font-weight: 600; }
.snapshot.rhs2 .node.priority { border-color: var(--rhs2-amber); position: relative; overflow: hidden; }
.snapshot.rhs2 .node.priority::after {
  content: "";
  position: absolute;
  top: -1px;
  right: -1px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 16px 16px 0;
  border-color: transparent var(--rhs2-amber) transparent transparent;
}
.snapshot.rhs2 .arrow { color: var(--rhs2-ink-soft); font-size: .9rem; }
.snapshot.rhs2 .flag { font-size: .72rem; color: var(--rhs2-amber); font-weight: 700; margin: 2px 0 10px; }
.snapshot.rhs2 .legend-row {
  display: flex;
  gap: 16px;
  font-size: .7rem;
  color: var(--rhs2-ink-soft);
  margin-top: 8px;
  flex-wrap: wrap;
}
.snapshot.rhs2 .legend-row span { display: inline-flex; align-items: center; gap: 5px; }
.snapshot.rhs2 .dot { width: 9px; height: 9px; border-radius: 2px; display: inline-block; }

/* ===== Value box ===== */

.snapshot.rhs2 .value-box {
  background: var(--rhs2-navy);
  color: #fff;
  border-radius: 14px;
  padding: 20px;
  margin-top: 14px;
}
.snapshot.rhs2 .value-box h3 { margin: 0 0 10px; font-size: .95rem; letter-spacing: .03em; }
.snapshot.rhs2 .value-box ul { margin: 0; padding-left: 16px; font-size: .82rem; line-height: 1.6; color: #dce4e8; }
.snapshot.rhs2 .value-box .closing { margin-top: 12px; font-weight: 700; font-size: .95rem; color: #fff; }

/* ===== KPI strip / grid ===== */

/* 17-08-2026, IW-446 systemic audit: Report 01's .snapshot .kpi-strip
   sets border-bottom (1px, Report 01's own --rhs-line color), not
   declared here — leaks through unopposed. POSSIBLE VISIBLE CHANGE:
   if a thin divider line was already visible below the KPI strip,
   this removes it; Report 02's card-based design doesn't otherwise
   use dividers, so none is intended, but worth a visual check. */
.snapshot.rhs2 .kpi-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin: 22px 0;
  border-bottom: none;
}
.snapshot.rhs2 .kpi-grid-2x2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 22px;
}
/* 17-08-2026, IW-446 fix: .kpi is a grid item of both .kpi-strip and
   .kpi-grid-2x2 (repeat/1fr tracks above). Its default min-width:auto
   stopped it shrinking below its content's min-content width, which
   Firefox and Chrome measure differently for the .kpi-label/.kpi-note
   strings here (e.g. "Reusable Postman collection, UAT & PROD") —
   Chrome's measurement still fit inside the 1fr share at tray width,
   Firefox's didn't, so the label/note text overflowed the box's
   right/bottom edge in Firefox only, all four boxes, both locales.
   Same fix already exists on Report 01's .kpi
   (release-health-snapshot3.css line 222) — never carried over when
   this file was built. min-width:0 lets the grid item shrink to the
   track's actual available width instead of its content's min-content
   width, so text wraps inside the box instead of overflowing it. */
/* 17-08-2026, IW-446 root cause found via live DevTools inspection:
   .kpi was computing to display:flex in the browser (Chrome DOM
   inspector showed a [flex] badge), which explains everything we'd
   been chasing across both engines. Not a specificity fight — CSS
   cascades per property. Report 01's .snapshot .kpi
   (release-health-snapshot3.css) sets display:flex, gap:1.1rem,
   align-items:center, border-right:1px solid var(--rhs-line); this
   rule's .snapshot .kpi never got overridden on THOSE properties
   because this file's own .kpi rule never declared display/gap/
   align-items/border-right at all — there was nothing to win the
   cascade with. Compound scoping (.snapshot.rhs2 .kpi) only protects
   in one direction: Report 02's wrapper still carries the bare
   .snapshot class Report 01 targets, so Report 01's unscoped rule
   matches straight through regardless of Report 02's higher-
   specificity selector, for any property that selector leaves unset.
   Fix: declare every property Report 01's .kpi sets, so nothing is
   left unopposed for it to fill in. */
.snapshot.rhs2 .kpi {
  display: block;
  gap: normal;
  align-items: normal;
  border-right: none;
  background: var(--rhs2-card);
  border: 1px solid var(--rhs2-line);
  border-radius: 12px;
  padding: 16px;
  position: relative;
  min-width: 0;
}
/* 17-08-2026, IW-446 follow-up attempted and reverted same day: forcing
   display:block/width:100%/overflow-wrap on .kpi-value/.kpi-label/
   .kpi-note contained Firefox's overflow but widened Chrome's
   previously-correct spacing between the value and its label/note —
   a regression in the browser that was already working. Reverted to
   this pre-follow-up state. The underlying Firefox-vs-Chrome layout
   difference is not yet root-caused from static CSS alone (nothing in
   this file or any other stylesheet checked sets display/float on
   these elements that would explain it) — carried forward to UAT/
   IW-447 for investigation with live DevTools rather than continued
   blind CSS changes in DEV. */
/* 17-08-2026, IW-446 systemic audit: Report 01's .snapshot .kpi-value
   sets font-family:Georgia and line-height:1, neither declared here.
   font-family is the exact IW-380 failure mode (line 117 comment)
   recurring — the universal `.snapshot.rhs2 * { font-family:inherit }`
   reset is same specificity as Report 01's rule here, a tie broken
   only by file load order, which is fragile. Giving this element its
   own explicit override ends that ambiguity outright rather than
   depending on which file happens to load second. */
.snapshot.rhs2 .kpi-value {
  font-family: inherit;
  font-size: 1.7rem;
  font-weight: 800;
  line-height: 1.1;
  margin: 0;
}
.snapshot.rhs2 .kpi-label { font-weight: 700; font-size: .8rem; margin: 2px 0 2px; }
.snapshot.rhs2 .kpi-note { font-size: .74rem; color: var(--rhs2-ink-soft); margin: 0; }
.snapshot.rhs2 .kpi-pending {
  display: inline-block;
  margin-top: 6px;
  font-size: .65rem;
  font-weight: 700;
  color: var(--rhs2-amber);
  background: var(--rhs2-amber-soft);
  border-radius: 10px;
  padding: 2px 8px;
}

/* ===== Panels ===== */

.snapshot.rhs2 .grid2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}
/* 17-08-2026, IW-446: .panel is a grid item of both .grid2 and
   .lessons-row (1fr tracks) — same default min-width:auto gap as
   .kpi above (see that fix's comment for the full mechanism). */
.snapshot.rhs2 .panel {
  background: var(--rhs2-card);
  border: 1px solid var(--rhs2-line);
  border-radius: 14px;
  padding: 18px;
  position: relative;
  min-width: 0;
}
.snapshot.rhs2 .panel-head { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 12px; }
.snapshot.rhs2 .num { font-size: 1.3rem; font-weight: 800; color: var(--rhs2-line); width: 34px; }
.snapshot.rhs2 .panel h2 { font-size: 1.02rem; margin: 2px 0 0; }
.snapshot.rhs2 .panel .eyebrow { margin: 0; }

.snapshot.rhs2 table.compare { width: 100%; border-collapse: collapse; font-size: .78rem; }
.snapshot.rhs2 table.compare th {
  text-align: left;
  padding: 6px 8px;
  background: var(--rhs2-navy);
  color: #fff;
  font-size: .7rem;
  letter-spacing: .03em;
}
.snapshot.rhs2 table.compare td { padding: 7px 8px; border-bottom: 1px solid var(--rhs2-line); }

/* 17-08-2026 — post-PROD hotfix, IW-362: table.compare overflow on
   narrow mobile (iPhone, ~393px). Root cause: .panel is a grid item
   inside .grid2 with implicit min-width:auto, and table.compare's
   default table-layout:auto computes intrinsic min-width from
   unbreakable header/cell text, blowing out past the panel's rounded
   border. Not caught by the existing @container breakpoint, which
   only stacks .grid2 to one column — it doesn't address the table's
   own overflow. Two-part fix: let the grid item shrink, and let the
   table wrap instead of expanding. */
.snapshot.rhs2 .panel {
  min-width: 0;
}
.snapshot.rhs2 table.compare {
  table-layout: fixed;
}
.snapshot.rhs2 table.compare th,
.snapshot.rhs2 table.compare td {
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.snapshot.rhs2 .path-pair {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 10px;
  align-items: stretch;
}
/* 17-08-2026, IW-446: .path-col is a grid item of .path-pair
   (1fr auto 1fr) — same fix as .kpi above. */
.snapshot.rhs2 .path-col { border-radius: 10px; padding: 12px; font-size: .78rem; min-width: 0; overflow-wrap: break-word; }
.snapshot.rhs2 .path-col.seq { background: var(--rhs2-teal-soft); border: 1px solid #bfe0d6; }
.snapshot.rhs2 .path-col.pri { background: var(--rhs2-amber-soft); border: 1px solid #e9cfa3; }
.snapshot.rhs2 .path-col h4 { margin: 0 0 8px; font-size: .82rem; }
.snapshot.rhs2 .path-col ul { margin: 0; padding-left: 16px; }
.snapshot.rhs2 .path-mid {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--rhs2-ink-soft);
  font-size: 1.2rem;
}
.snapshot.rhs2 .decision-bar {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--rhs2-line);
  text-align: center;
  font-weight: 700;
  font-size: .85rem;
  color: var(--rhs2-ink);
}

.snapshot.rhs2 .wheel-row { display: grid; grid-template-columns: 1fr 1.2fr; gap: 14px; align-items: center; }
/* 17-08-2026, IW-446: both direct children of .wheel-row (the icon
   block, unclassed, and .stat-list) are grid items of its 1fr 1.2fr
   track — same fix as .kpi above. */
.snapshot.rhs2 .wheel-row > div { min-width: 0; }
.snapshot.rhs2 .stat-list { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
/* 17-08-2026, IW-446: .stat-item is a grid item of .stat-list
   (1fr 1fr) — same fix as .kpi above. */
.snapshot.rhs2 .stat-item { font-size: .75rem; min-width: 0; overflow-wrap: break-word; }
.snapshot.rhs2 .stat-item b { display: block; font-size: 1.1rem; }
.snapshot.rhs2 .sev-chart { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--rhs2-line); }
.snapshot.rhs2 .sev-title {
  font-size: .72rem;
  font-weight: 700;
  color: var(--rhs2-ink-soft);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin: 0 0 6px;
}
.snapshot.rhs2 .sev-row {
  display: grid;
  grid-template-columns: 56px 1fr 20px;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  font-size: .72rem;
}
.snapshot.rhs2 .sev-track { background: #efebe0; border-radius: 6px; height: 9px; overflow: hidden; }
.snapshot.rhs2 .sev-bar { display: block; height: 100%; border-radius: 6px; }
.snapshot.rhs2 .sev-count { font-weight: 700; text-align: right; }

.snapshot.rhs2 .flow3 {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  gap: 8px;
  align-items: stretch;
  margin-bottom: 10px;
}
/* 17-08-2026, IW-446: .flow-box is a grid item of .flow3
   (1fr auto 1fr auto 1fr). NOT the same fix as .kpi: "S14→S15→S16→
   S17→S18" has no spaces, so it's a single unbreakable min-content
   token with nowhere to wrap. min-width:0 alone would let the box
   shrink below that token's width with nothing able to wrap, making
   it overflow instead of fixing it. overflow-wrap:break-word lets the
   browser force-break the token itself if the track ever ends up
   narrower than it, so min-width:0 is safe to add alongside it. */
.snapshot.rhs2 .flow-box { background: var(--rhs2-white); border: 1px solid var(--rhs2-line); border-radius: 10px; padding: 10px; font-size: .75rem; min-width: 0; overflow-wrap: break-word; }
.snapshot.rhs2 .flow-box.decision { background: var(--rhs2-amber-soft); border-color: #e9cfa3; }
.snapshot.rhs2 .flow-box.outcome { background: var(--rhs2-teal-soft); border-color: #bfe0d6; }
.snapshot.rhs2 .flow-arrow { display: flex; align-items: center; color: var(--rhs2-ink-soft); }
.snapshot.rhs2 .artifact-trail {
  font-size: .72rem;
  color: var(--rhs2-ink-soft);
  border-top: 1px dashed var(--rhs2-line);
  margin-top: 10px;
  padding-top: 8px;
}
.snapshot.rhs2 .artifact-trail b { color: var(--rhs2-ink); }

/* ===== Known limitations ===== */

.snapshot.rhs2 .open-callout {
  background: var(--rhs2-card);
  border: 1px solid var(--rhs2-line);
  border-radius: 14px;
  padding: 18px;
  margin-bottom: 16px;
}
.snapshot.rhs2 .open-callout h3 { margin: 0 0 10px; font-size: .95rem; color: var(--rhs2-ink); }
.snapshot.rhs2 .open-callout ul { margin: 0; padding-left: 18px; font-size: .8rem; color: var(--rhs2-ink); }
.snapshot.rhs2 .open-callout li { margin-bottom: 6px; }
.snapshot.rhs2 .open-callout li em { color: var(--rhs2-ink-soft); font-style: normal; font-size: .74rem; }

/* ===== Lessons / What's next ===== */

.snapshot.rhs2 .lessons-row { display: grid; grid-template-columns: 2fr 1.4fr; gap: 16px; }
.snapshot.rhs2 .lessons-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
/* 17-08-2026, IW-446: .lesson is a grid item of .lessons-cards
   (repeat(3, 1fr)) — same fix as .kpi above (wrappable text, spaces
   present, so min-width:0 alone is correct here). */
.snapshot.rhs2 .lesson { background: var(--rhs2-card); border: 1px solid var(--rhs2-line); border-radius: 12px; padding: 14px; font-size: .75rem; min-width: 0; overflow-wrap: break-word; }
.snapshot.rhs2 .lesson strong { display: block; margin-bottom: 4px; font-size: .8rem; }
.snapshot.rhs2 .whatsnext h4 { margin: 0 0 8px; font-size: .82rem; }

/* ===== Footer =====
   Renamed from .footer — see file header. */

/* 17-08-2026, IW-446 systemic audit: Report 01's .snapshot .page-footer
   sets a full padding shorthand (1.1rem top/bottom, 1.9rem left/right)
   and gap:1.2rem. This rule only set padding-top as a longhand, so
   Report 01's padding-right/bottom/left and gap leaked through
   unopposed. POSSIBLE VISIBLE CHANGE: if the footer already had extra
   side padding or item spacing from this leak, it tightens now —
   worth a visual check against the mockup. */
.snapshot.rhs2 .page-footer {
  display: flex;
  justify-content: space-between;
  gap: 0;
  font-size: .78rem;
  color: var(--rhs2-ink-soft);
  border-top: 1px solid var(--rhs2-line);
  padding: 14px 0 0;
  margin-top: 20px;
}

/* ===== Responsive =====
   14-08-2026, IW-380: converted from the mockup's viewport media
   query (@media (max-width: 820px)) to a container query, reacting
   to .snapshot.rhs2's own rendered width rather than the browser
   viewport — see the container-type/container-name comment above for
   why. Breakpoint value (820px) and every declaration inside are
   otherwise unchanged from the locked mockup. */

/* 17-08-2026, IW-447: .path-pair, .wheel-row, .stat-list, and
   .lessons-cards were never added to this breakpoint when it was
   written — every other grid in this file (masthead, grid2,
   lessons-row, kpi-strip, flow3) collapses here, these four didn't,
   so they stayed locked at full column count at any width, no matter
   how narrow the container got. That's what produced the Panel
   02/03/04/06 overflow at narrow viewports (Dashboard, ≤~430px
   confirmed) — not a new mechanism, just these four grids never
   getting the same treatment as their siblings. */
@container rhs2 (max-width: 820px) {
  .snapshot.rhs2 .masthead,
  .snapshot.rhs2 .grid2,
  .snapshot.rhs2 .lessons-row,
  .snapshot.rhs2 .path-pair,
  .snapshot.rhs2 .wheel-row,
  .snapshot.rhs2 .stat-list,
  .snapshot.rhs2 .lessons-cards {
    grid-template-columns: 1fr;
  }
  .snapshot.rhs2 .kpi-strip { grid-template-columns: 1fr 1fr; }
  .snapshot.rhs2 .flow3 { grid-template-columns: 1fr; }
}

/* ===== Print =====
   14-08-2026, IW-380 addendum (folded in ahead of Story 10, since it's
   this file's job, not each standalone page's). Not part of the
   original mockup — added proactively based on Report 01's own,
   already-confirmed print bugs on structurally identical patterns:

   - RD-18/19 (Firefox): container queries are not reliably
     re-evaluated at print width — a query-driven column count can
     stay at its on-screen value instead of adapting, which overlapped
     text in Report 01's journey-steps. Report 02 depends on the SAME
     mechanism (@container rhs2 above) for masthead / grid2 /
     lessons-row / kpi-strip / flow3, so it's exposed to the identical
     failure mode.
   - RD-20/21 (Safari): break-inside:avoid is not reliably honored on
     CSS Grid item children, only flex/block ones.
   - See release-health-snapshot3.css's matching 08-08-2026 comment for
     Report 01's version of both fixes — this block applies the same
     two fixes to Report 02's own components.

   No @page or html/body rules here — those can't be scoped to a
   subtree and would leak onto the entire host page. That chrome stays
   in each standalone page's own <head> (Story 10). */
@media print {
  .snapshot.rhs2 {
    width: 100%;
    margin: 0;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* Stop depending on the @container switch for print — force every
     query-driven grid to the same safe single/reduced-column shape
     regardless of computed print width, sidestepping the Firefox
     re-evaluation bug rather than chasing it. */
  .snapshot.rhs2 .masthead,
  .snapshot.rhs2 .grid2,
  .snapshot.rhs2 .lessons-row,
  .snapshot.rhs2 .kpi-strip,
  .snapshot.rhs2 .kpi-grid-2x2,
  .snapshot.rhs2 .flow3 {
    grid-template-columns: 1fr;
  }

  /* Explicit break-inside:avoid on every atomic card/row, since Safari
     won't infer it on grid children the way it does on flex/block. */
  .snapshot.rhs2 .kpi,
  .snapshot.rhs2 .panel,
  .snapshot.rhs2 .journey-card,
  .snapshot.rhs2 .value-box,
  .snapshot.rhs2 .open-callout,
  .snapshot.rhs2 .lesson,
  .snapshot.rhs2 .flow-box,
  .snapshot.rhs2 .path-col,
  .snapshot.rhs2 .page-footer {
    break-inside: avoid;
    page-break-inside: avoid;
  }
}