.snapshot {
  --rhs-ink: #17222d;
  --rhs-navy: #17344d;
  --rhs-navy-deep: #10283b;
  --rhs-teal: #2d7d7a;
  --rhs-green: #2c7a61;
  --rhs-gold: #c78a24;
  --rhs-cream: #f3f0e8;
  --rhs-paper: #fbfaf6;
  --rhs-line: #d8d1c4;
  --rhs-muted: #68737c;
  --rhs-shadow: 0 20px 60px rgba(23, 34, 45, 0.10);

  color: var(--rhs-ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  width: min(1400px, calc(100% - 40px));
  margin: 36px auto;
  background: var(--rhs-paper);
  border: 1px solid rgba(23, 34, 45, 0.12);
  box-shadow: var(--rhs-shadow);
  /* Container query context — this page renders both standalone (full
     width) and cloned into the narrower What's New drawer panel. A
     viewport media query can't tell those two cases apart; a container
     query can, since it responds to .snapshot's actual rendered width. */
  container-type: inline-size;
  container-name: snapshot;
}

/* Scoped box-sizing reset — was a bare `* { box-sizing: border-box }`,
   which reset EVERY element on whatever host page this stylesheet is
   loaded on (e.g. the What's New page), not just this component. That's
   the actual root cause of the font/spacing regression this file caused
   when statically linked into EN_whatsNew.html — every rule below is now
   scoped the same way, under .snapshot, for exactly this reason. */
.snapshot, .snapshot *, .snapshot *::before, .snapshot *::after {
  box-sizing: border-box;
}

.snapshot h1, .snapshot h2, .snapshot p { margin-top: 0; }

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

.snapshot .masthead {
  display: grid;
  grid-template-columns: minmax(220px, 320px) 1fr;
  border-bottom: 1px solid var(--rhs-line);
}

.snapshot .brand-block {
  padding: 2.2rem 1.8rem 2rem;
  border-right: 1px solid var(--rhs-line);
  background:
    linear-gradient(160deg, rgba(199,138,36,.12), transparent 60%),
    var(--rhs-paper);
  min-width: 0; /* allow the column to actually shrink instead of forcing overflow */
}

.snapshot .brand {
  font-family: 'Roboto', sans-serif;
  font-weight: 700;
  font-size: 1.1rem;
  margin-bottom: 2.6rem;
}

.snapshot .eyebrow {
  margin: 0 0 0.5rem;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--rhs-muted);
}

/* Sized in rem against the column's own typical width, not the browser
   viewport — the previous vw-based clamp() scaled off full window width,
   so it overflowed badly whenever this block sat somewhere narrower than
   a full page (exactly what happens inside the drawer). */
.snapshot h1 {
  font-family: 'Roboto', sans-serif;
  font-size: 2.25rem;
  line-height: 1.05;
  letter-spacing: -.02em;
  margin-bottom: 1.4rem;
  word-break: break-word;
}

.snapshot .deck {
  font-size: 1rem;
  line-height: 1.5;
  margin-bottom: 1.5rem;
}

.snapshot .headline-outcomes {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: .9rem;
  line-height: 1.7;
}

/* ===== Journey strip ===== */

.snapshot .journey {
  padding: 1.6rem 1.6rem 1rem;
  min-width: 0;
}

.snapshot .journey-steps {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0;
  list-style: none;
  padding: 0;
  margin: 0;
}

.snapshot .journey-steps li {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0.5rem 0.6rem;
  min-width: 0;
}

.snapshot .journey-steps strong {
  display: block;
  margin-top: 0.9rem;
  font-size: .84rem;
  line-height: 1.25;
}

.snapshot .journey-steps small {
  display: block;
  margin-top: 0.45rem;
  color: var(--rhs-muted);
  line-height: 1.4;
  font-size: .7rem;
}

.snapshot .connector {
  position: absolute;
  top: 1.6rem;
  left: calc(50% + 1.7rem);
  width: calc(100% - 3.4rem);
  height: 1px;
  background: var(--rhs-line);
}

.snapshot .connector::after {
  content: "";
  position: absolute;
  right: -1px;
  top: -3px;
  width: 7px;
  height: 7px;
  border-top: 1px solid var(--rhs-muted);
  border-right: 1px solid var(--rhs-muted);
  transform: rotate(45deg);
}

/* ===== Icons — real SVG, sized/colored via currentColor + wrapper bg ===== */

.snapshot .icon-badge {
  width: 3.4rem;
  height: 3.4rem;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  color: #ffffff;
  background: var(--rhs-navy);
  box-shadow: 0 8px 20px rgba(23,52,77,.18);
}
.snapshot .icon-badge svg { width: 1.5rem; height: 1.5rem; display: block; }

.snapshot .journey-steps li:nth-child(2) .icon-badge { background: var(--rhs-gold); }
.snapshot .journey-steps li:nth-child(3) .icon-badge { background: var(--rhs-green); }
.snapshot .journey-steps li:nth-child(4) .icon-badge { background: var(--rhs-teal); }
.snapshot .journey-steps li:nth-child(5) .icon-badge { background: var(--rhs-navy-deep); }
.snapshot .journey-steps li:nth-child(6) .icon-badge { background: #5d6267; }

/* Outlined variant for the KPI strip (lighter weight than the solid
   journey badges, matching the mockup's thinner KPI icon treatment) */
.snapshot .icon-badge.is-outline {
  background: transparent;
  border: 1.5px solid currentColor;
  color: var(--rhs-navy);
  box-shadow: none;
}
.snapshot .kpi:nth-child(2) .icon-badge.is-outline { color: var(--rhs-green); }
.snapshot .kpi:nth-child(3) .icon-badge.is-outline { color: var(--rhs-gold); }
.snapshot .kpi:nth-child(4) .icon-badge.is-outline { color: var(--rhs-teal); }

/* Small check badge for the reliability evidence list */
.snapshot .icon-badge.is-check {
  width: 2.1rem;
  height: 2.1rem;
  background: rgba(44, 122, 97, 0.08);
  border: 1px solid var(--rhs-green);
  color: var(--rhs-green);
}
.snapshot .icon-badge.is-check svg { width: 1.1rem; height: 1.1rem; }

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

.snapshot .kpi-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-bottom: 1px solid var(--rhs-line);
}

.snapshot .kpi {
  display: flex;
  gap: 1.1rem;
  align-items: center;
  padding: 1.5rem 1.6rem;
  border-right: 1px solid var(--rhs-line);
  min-width: 0;
}
.snapshot .kpi:last-child { border-right: 0; }

.snapshot .kpi-text { min-width: 0; }

.snapshot .kpi-value {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.9rem;
  line-height: 1;
  margin-bottom: 0.3rem;
}
.snapshot .kpi-label { font-weight: 800; font-size: .78rem; margin-bottom: 0.25rem; }
.snapshot .kpi-note { color: var(--rhs-muted); font-size: .7rem; margin-bottom: 0; }

/* ===== Evidence grid (3 panels) ===== */

.snapshot .evidence-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.snapshot .panel {
  min-width: 0;
  padding: 1.9rem 1.9rem 2.1rem;
  border-right: 1px solid var(--rhs-line);
}
.snapshot .panel:last-child { border-right: 0; }

.snapshot .panel-heading {
  display: flex;
  gap: 0.9rem;
  align-items: flex-start;
  padding-bottom: 1.1rem;
  margin-bottom: 1.4rem;
  border-bottom: 1px solid var(--rhs-line);
}
.snapshot .section-number {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1rem;
  color: var(--rhs-gold);
  margin: 0.1rem 0 0;
}
.snapshot .panel-heading h2 {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.35rem;
  line-height: 1.15;
}
.snapshot .panel-copy { font-size: .84rem; line-height: 1.6; color: #3f4a52; }

/* Cost chart */
.snapshot .cost-chart { display: grid; gap: 1.1rem; }
.snapshot .cost-row { display: grid; grid-template-columns: 6.2rem 1fr 4.5rem; gap: 0.7rem; align-items: center; font-size: .77rem; }
.snapshot .cost-name { color: #4c5660; }
.snapshot .bar-track { height: 1.35rem; background: #ece7dd; overflow: hidden; }
.snapshot .bar { display: block; height: 100%; width: var(--bar); }
.snapshot .bar-before { background: linear-gradient(90deg, #ead7ad, #d4b268); }
.snapshot .bar-after { background: linear-gradient(90deg, #9bc6bd, #4d9086); }
.snapshot .saving-callout { display: grid; grid-template-columns: 1fr auto auto; gap: 0.9rem; align-items: baseline; margin-top: 1.4rem; padding-top: 1.1rem; border-top: 1px solid var(--rhs-line); }
.snapshot .saving-callout span { font-size: .8rem; font-weight: 700; }
.snapshot .saving-callout strong { color: var(--rhs-green); font-family: Georgia, "Times New Roman", serif; font-size: 1.3rem; }
.snapshot .saving-callout em { color: var(--rhs-green); font-style: normal; font-weight: 800; }

/* API perf line chart */
.snapshot .chart-wrap { margin: 1.2rem 0 0; }
.snapshot .line-chart { display: block; width: 100%; height: auto; }
.snapshot .grid-lines line { stroke: #ddd7cc; stroke-width: 1; }
.snapshot .plot-area { fill: rgba(45,125,122,.10); stroke: none; }
.snapshot .plot-line { fill: none; stroke: var(--rhs-teal); stroke-width: 3; }
.snapshot .points circle { fill: var(--rhs-paper); stroke: var(--rhs-teal); stroke-width: 3; }
.snapshot .axis-labels text { fill: var(--rhs-muted); font-size: 12px; }

/* Reliability evidence list */
.snapshot .evidence-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 1.1rem; }
.snapshot .evidence-list li { display: grid; grid-template-columns: 2.1rem 1fr; gap: 0.75rem; align-items: start; }
.snapshot .evidence-list p { margin: 0; font-size: .78rem; line-height: 1.55; color: #3f4a52; }

.snapshot .page-footer {
  display: flex;
  justify-content: space-between;
  gap: 1.2rem;
  padding: 1.1rem 1.9rem;
  border-top: 1px solid var(--rhs-line);
  font-size: .72rem;
  color: var(--rhs-muted);
}

.snapshot .sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* ===== Responsive — container queries, react to .snapshot's own
   rendered width, not the browser viewport ===== */

@container snapshot (max-width: 900px) {
  .snapshot .masthead { grid-template-columns: 1fr; }
  .snapshot .brand-block { border-right: 0; border-bottom: 1px solid var(--rhs-line); }
  .snapshot .brand { margin-bottom: 1.4rem; }
  .snapshot h1 { font-size: 2rem; }
  .snapshot .journey-steps { grid-template-columns: repeat(3, 1fr); row-gap: 1.6rem; }
  .journey-steps li:nth-child(3) .connector,
  .snapshot .journey-steps li:nth-child(6) .connector { display: none; }
  .snapshot .kpi-strip { grid-template-columns: repeat(2, 1fr); }
  .snapshot .kpi:nth-child(2) { border-right: 0; }
  .snapshot .kpi:nth-child(-n+2) { border-bottom: 1px solid var(--rhs-line); }
  .snapshot .evidence-grid { grid-template-columns: 1fr; }
  .snapshot .panel { border-right: 0; border-bottom: 1px solid var(--rhs-line); }
  .snapshot .panel:last-child { border-bottom: 0; }
}

@container snapshot (max-width: 560px) {
  .snapshot .brand-block, .snapshot .journey, .snapshot .panel { padding-left: 1.1rem; padding-right: 1.1rem; }
  .snapshot .journey-steps { grid-template-columns: 1fr; }
  .snapshot .connector { display: none; }
  .snapshot .journey-steps li { padding-bottom: 1rem; border-bottom: 1px solid var(--rhs-line); }
  .snapshot .journey-steps li:last-child { border-bottom: 0; }
  .snapshot .kpi-strip { grid-template-columns: 1fr; }
  .snapshot .kpi { border-right: 0; border-bottom: 1px solid var(--rhs-line); }
  .snapshot .kpi:last-child { border-bottom: 0; }
  .snapshot .cost-row { grid-template-columns: 5rem 1fr; }
  .snapshot .cost-row strong { grid-column: 2; }
  .snapshot .page-footer { flex-direction: column; }
}


/* Print handling scoped to .snapshot only — no @page or html/body rules
   here, since those can't be scoped to a subtree and would affect
   printing the ENTIRE host page (e.g. What's New), not just this
   content. Standalone-page-only print chrome (@page size, background)
   lives in EN_relHSnap.html's own <head> instead, never loaded here. */
@media print {
  .snapshot {
    width: 100%;
    margin: 0;
    box-shadow: none;
    border: 0;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* 06-08-2026 [START] IW-235 bug: macOS Safari print — content split
     mid-element across a page boundary (KPI value rendering on one
     page, its label/context rendering on the next). Root cause: Safari's
     print engine is less forgiving than Chrome/Firefox about implicit
     page-break avoidance — it will happily slice a grid/flex item in
     half at a page boundary unless explicitly told not to. Chrome and
     Firefox were already avoiding this by default; Safari was not.
     Fix: mark every atomic content block below as a single unit that
     must move to the next page whole, never split. break-inside is the
     modern property; page-break-inside is kept alongside it as a
     compatibility fallback for print engines that only honor the older
     name. This does not change on-screen rendering at all — every rule
     here is scoped inside @media print. */
  .snapshot .kpi,
  .snapshot .journey-steps li,
  .snapshot .panel,
  .snapshot .evidence-list li,
  .snapshot .cost-row,
  .snapshot .saving-callout,
  .snapshot .page-footer {
    break-inside: avoid;
    page-break-inside: avoid;
  }
  /* 06-08-2026 [END] IW-235 bug fix */

  /* 08-08-2026 [START] IW-235 bug: RD-18/19 (Firefox) + RD-20/21 (Safari)
     print distortion on the Release Dashboard page. journey-steps relies
     on CSS Grid plus a container query to drop from 6 columns to 3 or 1
     as .snapshot's rendered width shrinks — unreliable for print in both
     engines. Firefox does not consistently re-evaluate the container
     query against the actual print width (stayed at 6 columns in a
     ~660px-wide print context, so adjacent steps' text overlapped).
     Safari does not reliably honor break-inside:avoid on CSS Grid item
     children the way it does flex/block children — row 2 of a 3-column
     layout still got sliced across a page boundary despite that rule
     already being applied to .journey-steps li above.
     Fix: for print only, stop depending on the grid/container-query
     switch altogether. Force journey-steps into a single-column list of
     flex rows (icon beside its text) — a shape neither engine has
     trouble sizing or paginating. On-screen rendering is untouched. */
  .snapshot .journey-steps {
    display: block;
  }
  .snapshot .journey-steps li {
    display: flex;
    flex-direction: row;
    align-items: center;
    text-align: left;
    gap: 1rem;
    padding: 0.6rem 0;
  }
  .snapshot .journey-steps strong,
  .snapshot .journey-steps small {
    margin-top: 0;
  }
  .snapshot .connector {
    display: none;
  }
  /* 08-08-2026 [END] IW-235 bug fix */
}