/* ────────────────────────────────────────────────────────────────────────────
   Shared report "skin" — the analytics-types prototype design system
   (off-white linen page, white rounded cards, navy hero, DM Sans headings and
   DM Sans body) generified for ALL Intelligence Reports.

   Scope: `.rpt-skin` (add to any report wrapper). Class prefix: `rpt-`.
   Tokens: `--rs-*` (resolved prototype LIGHT values — identical to the values
   the UPF report's `--u-*` tokens already use).

   The Portfolio UPF report ships its own copy of this chrome under `.upf-report`
   (wwwroot/css/reports-upf.css). Migrating it onto this shared skin and deleting
   the duplicate is a tracked follow-up; until then both exist side by side.
   ──────────────────────────────────────────────────────────────────────────── */

.rpt-skin {
    --rs-page:          #F9F8F3;
    --rs-surface:       #FFFFFF;
    --rs-surface-2:     #F4F2EA;
    --rs-border:        rgba(17, 24, 39, 0.08);
    --rs-border-strong: rgba(17, 24, 39, 0.14);
    --rs-text:          #111827;
    --rs-muted:         #444B55;
    --rs-subtle:        #474E58;
    --rs-navy:          #25507C;
    --rs-navy-soft:     rgba(37, 80, 124, 0.08);
    --rs-green:         #32A966;
    --rs-green-text:    #245E3B;
    --rs-green-light:   #7DC470;
    --rs-amber:         #FFC434;
    --rs-amber-text:    #75360A;
    --rs-orange:        #D27326;
    --rs-red:           #DC3038;
    --rs-red-text:      #831F23;
    --rs-r:             16px;
    --rs-shadow:        0 1px 2px rgba(17, 24, 39, .04), 0 1px 3px rgba(17, 24, 39, .04);
    --rs-serif:         var(--rs-sans); /* historical name: titles are DM Sans too */
    --rs-sans:          'DM Sans', system-ui, -apple-system, sans-serif;
}

/* Roomy wrapper to match the spacious prototype (wide tables/heatmaps fit). */
.report-wrapper.rpt-skin { min-width: 880px; max-width: 1220px; }

/* The report frame becomes the off-white "page" the cards float on. */
.rpt-skin .report-card {
    background: var(--rs-page);
    border: 1px solid var(--rs-border);
    border-radius: 14px;
    box-shadow: 0 4px 28px rgba(10, 22, 40, .08);
    font-family: var(--rs-sans);
    color: var(--rs-text);
    overflow: hidden;
}

/* Padded container holding the stacked cards. */
.rpt-skin .rpt-page {
    padding: 22px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

/* ── Topbar (white, was navy) ──────────────────────────────────────────────── */
.rpt-skin .rpt-hdr {
    background: var(--rs-surface);
    color: var(--rs-text);
    padding: 16px 28px 14px;
    border-radius: 14px 14px 0 0;
    border-bottom: 1px solid var(--rs-border);
}
.rpt-skin .rpt-hdr-logo { filter: none; }
.rpt-skin .rpt-hdr-intelligence { color: var(--rs-subtle); }
.rpt-skin .rpt-hdr-divider { background: var(--rs-border-strong); }
.rpt-skin .rpt-hdr-doctype { color: var(--rs-text); }
.rpt-skin .rpt-hdr-doctype span { color: var(--rs-subtle); }
.rpt-skin .rpt-hdr-meta-item .k { color: var(--rs-subtle); }
.rpt-skin .rpt-hdr-meta-item .v { color: var(--rs-text); }
.rpt-skin .rpt-hdr-stripe { display: none; }

/* ── Brand hero — full-bleed navy banner with WISE-bug watermark + brand badge ─ */
.rpt-skin .rpt-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 196px;
    margin: -22px -22px 0;             /* full-bleed: cancel .rpt-page padding */
    padding: 30px 32px 28px;
    background: color-mix(in srgb, var(--rs-navy) 78%, #1A2339);
}
.rpt-skin .rpt-hero-pattern { position: absolute; inset: 0; z-index: -2; overflow: hidden; pointer-events: none; }
/* Target the inlined WISE-bug <svg> directly (UpfHeroBug renders it with its
   own class) so it inherits the hero watermark sizing/colour here too. */
.rpt-skin .rpt-hero-pattern svg {
    position: absolute; top: 50%; right: 0;
    width: min(1100px, 130%); height: auto;
    color: color-mix(in srgb, #0B1426 38%, var(--rs-navy));
    filter: drop-shadow(0 1.5px 0 rgba(255, 255, 255, 0.14));
    transform: translate(calc(14% + 110px), calc(-50% + 30px)) rotate(-18deg);
}
.rpt-skin .rpt-hero-body {
    position: relative; z-index: 1;
    display: flex; flex-direction: column; align-items: flex-start;
    gap: 7px; padding-right: 150px;
}
.rpt-skin .rpt-hero-logo {
    position: absolute; top: 50%; right: 36px; transform: translateY(-50%); z-index: 1;
    display: flex; align-items: center; justify-content: center;
    width: 112px; height: 112px; border-radius: 50%; overflow: hidden;
    background: #fff;
    box-shadow: 0 10px 28px rgba(7, 12, 26, 0.34), 0 0 0 5px rgba(255, 255, 255, 0.16);
}
.rpt-skin .rpt-hero-logo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.rpt-skin .rpt-hero-logo-monogram {
    font-family: var(--rs-serif); font-size: 2.3rem; font-weight: 800;
    letter-spacing: 0.02em; color: var(--rs-navy);
}
.rpt-skin .rpt-hero-eyebrow {
    font-size: 12px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase;
    color: #9DC1FF;
}
.rpt-skin .rpt-hero-title {
    margin: 0; font-family: var(--rs-serif); font-size: 2rem; font-weight: 800;
    line-height: 1.05; letter-spacing: -0.02em; color: #fff;
}
.rpt-skin .rpt-hero-tagline {
    margin: 1px 0 0; font-family: var(--rs-serif); font-style: italic;
    font-size: 1.02rem; font-weight: 500; color: rgba(255, 255, 255, 0.86);
}
.rpt-skin .rpt-hero-meta {
    margin: 5px 0 0; font-size: 0.8125rem; line-height: 1.5; font-weight: 600;
    color: rgba(255, 255, 255, 0.78);
}
.rpt-skin .rpt-hero-badges { margin-top: 9px; display: flex; flex-wrap: wrap; gap: 8px; }
.rpt-skin .rpt-hero-badges .rpt-hero-badge { margin-top: 0; }
.rpt-skin .rpt-hero-badge {
    margin-top: 9px; display: inline-flex; align-items: center;
    padding: 5px 12px; border-radius: 999px;
    font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
    color: #EAF1FF; background: rgba(99, 132, 255, 0.28); border: 1px solid rgba(157, 193, 255, 0.5);
}
@media (max-width: 620px) {
    .rpt-skin .rpt-hero-logo { display: none; }
    .rpt-skin .rpt-hero-body { padding-right: 0; }
}

/* A brand banner image, when present, becomes the hero background (else the
   flat navy + WISE-bug watermark shows). Used by both the product and brand
   report heroes. */
.rpt-skin .rpt-hero--banner {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
/* Dark scrim over the banner background so the white copy + UPC read. */
.rpt-skin .rpt-hero .rpt-phero-scrim {
    position: absolute; inset: 0; z-index: -1;
    background:
        linear-gradient(105deg, rgba(11, 20, 38, .92) 0%, rgba(11, 20, 38, .72) 52%, rgba(11, 20, 38, .55) 100%),
        rgba(11, 20, 38, .30);
}

/* ── Product-report hero (att-hero): banner background · product thumbnail ·
      brand avatar+name · title · pills · UPC card ──────────────────────────── */
.rpt-skin .rpt-hero--product {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 22px;
    min-height: 216px;
    /* Plate = the band's content box height (216 - 30 top - 28 bottom). Sizing the product
       to the band is the point: a fixed tile token here under-fills the hero, which is the
       same mistake as shrinking the product-details band to a thumbnail. */
    --plate: 158px;
}
.rpt-skin .rpt-hero--product .rpt-hero-title { font-size: 2.1rem; }
/* Brand avatar (logo or initials) sitting left of the brand name. */
.rpt-skin .rpt-phero-brandline { display: flex; align-items: center; gap: 9px; }
.rpt-skin .rpt-phero-brandavatar {
    flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; border-radius: 50%; overflow: hidden;
    background: #fff; color: var(--rs-navy);
    font-family: var(--rs-serif); font-size: 12px; font-weight: 800; letter-spacing: .01em;
    box-shadow: 0 2px 8px rgba(7, 12, 26, .3);
}
.rpt-skin .rpt-phero-brandavatar img { width: 100%; height: 100%; object-fit: cover; }
/* The product image is a shared <FoodImage Size="Fill" Class="fi-on-dark" /> plate. It
   contains the photo instead of cropping it through the old 116×150 portrait window, and
   it is sized to the band (--plate) rather than to a tile token. Explicit width/height
   rather than align-self:stretch, because the hero wraps at narrow widths and a stretched
   item would then size against a line whose height it is itself setting. */
.rpt-skin .rpt-hero--product .rpt-phero-plate {
    flex: 0 0 auto;
    width: var(--plate);
    height: var(--plate);
}
.rpt-skin .rpt-phero-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.rpt-skin .rpt-phero-pills { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 2px; }
/* Default/claimed pill = white translucent; verified = blue translucent
   (matches the prototype's att-hero-pill / --verified). */
.rpt-skin .rpt-phero-pill {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 13px 6px 9px; border-radius: 999px;
    font-size: 12.5px; font-weight: 700; line-height: 1; white-space: nowrap;
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    color: rgba(255, 255, 255, 0.94); background: rgba(255, 255, 255, 0.16); border: 1px solid rgba(255, 255, 255, 0.3);
}
.rpt-skin .rpt-phero-pill .material-icons { font-size: 16px; }
.rpt-skin .rpt-phero-pill sup { font-size: 0.62em; font-weight: 700; }
.rpt-skin .rpt-phero-pill--verified { color: #EAF1FF; background: rgba(99, 132, 255, 0.28); border-color: rgba(157, 193, 255, 0.5); }
.rpt-skin .rpt-phero-pill--verified .material-icons { color: #9DC1FF; }
/* Binary UPF status chips (spec sheet hero): green = Non-UPF, red = UPF.
   Translucent tints keep them legible on the brand banner alongside the
   --claimed / --verified pills. */
.rpt-skin .rpt-phero-pill--nonupf { color: #E6F6EC; background: rgba(50, 169, 102, 0.30); border-color: rgba(125, 196, 112, 0.55); }
.rpt-skin .rpt-phero-pill--upf { color: #FDE7E8; background: rgba(220, 48, 56, 0.30); border-color: rgba(228, 116, 116, 0.55); }
.rpt-skin .rpt-phero-aside { flex-shrink: 0; align-self: center; }
@media (max-width: 720px) {
    .rpt-skin .rpt-hero--product { flex-wrap: wrap; }
    .rpt-skin .rpt-phero-aside { width: 100%; }
}

/* UPC / GTIN card — matches the prototype's att-hero-upc bit-for-bit: white
   card, bold letter-spaced slate label, barcode, then the number below. */
.rpt-skin .rpt-hero .rpt-upc-block {
    background: #fff; border-radius: 10px; padding: 10px 13px 9px; width: 194px;
    box-shadow: 0 8px 22px rgba(7, 12, 26, 0.32);
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    margin: 0;
}
.rpt-skin .rpt-hero .rpt-upc-block .lbl {
    order: 1; margin: 0;
    font-family: var(--rs-sans); font-size: 12px; font-weight: 800;
    color: #64748B; letter-spacing: 1.92px; text-transform: uppercase;
}
.rpt-skin .rpt-hero .rpt-upc-barcode { order: 2; width: 168px; height: auto; display: block; }
.rpt-skin .rpt-hero .rpt-upc-block .val {
    order: 3; margin: 0;
    font-family: var(--rs-sans); font-size: 15px; font-weight: 700; color: #111827;
    letter-spacing: .02em; text-align: center;
}

/* ── Product UPF §01 — processing-level scale (ported from the prototype's
   pscale): the Non-UPF Verified shield + 5 NOVA tiers; this product's tier (and
   its verified status) are emphasized, the rest recede. */
.rpt-skin .rpt-pscale {
    display: grid; grid-template-columns: repeat(6, 1fr);
    border-radius: 16px; overflow: hidden; isolation: isolate; margin-top: 4px;
    border: 1px solid var(--rs-border); box-shadow: var(--rs-shadow);
}
.rpt-skin .rpt-pscale-col {
    position: relative;
    display: flex; flex-direction: column; align-items: center; gap: 7px;
    padding: 24px 14px 26px; min-height: 104px; text-align: center;
    color: #fff; background: var(--c, var(--rs-navy));
    transition: opacity .15s ease;
}
.rpt-skin .rpt-pscale-col + .rpt-pscale-col { box-shadow: inset 1px 0 0 rgba(255, 255, 255, .18); }
/* Tiers that aren't this product recede so the active one reads as "you are here". */
.rpt-skin .rpt-pscale-col:not(.is-active) { opacity: .4; }
.rpt-skin .rpt-pscale-col--current::after {
    content: "This product"; position: absolute; top: 7px; right: 9px;
    font-size: 9px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: rgba(255, 255, 255, .92);
}
.rpt-skin .rpt-pscale-ico {
    display: inline-flex; align-items: center; justify-content: center;
    width: 52px; height: 52px; border-radius: 50%; margin-bottom: 3px;
    border: 1.5px solid rgba(255, 255, 255, .28); background: rgba(255, 255, 255, .12); color: rgba(255, 255, 255, .96);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .1), inset 0 -1px 0 rgba(255, 255, 255, .35);
}
.rpt-skin .rpt-pscale-ico .material-symbols-outlined { font-size: 28px; line-height: 1; font-variation-settings: 'FILL' 0, 'wght' 400, 'opsz' 24; }
.rpt-skin .rpt-pscale-tier { font-family: var(--rs-serif); font-size: 1.0625rem; font-weight: 700; line-height: 1.12; letter-spacing: -.01em; }
.rpt-skin .rpt-pscale-cap { font-size: .6875rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: rgba(255, 255, 255, .82); }
.rpt-skin .rpt-pscale-desc { margin-top: 4px; font-size: .75rem; line-height: 1.42; color: rgba(255, 255, 255, .88); }
@media (max-width: 760px) { .rpt-skin .rpt-pscale { grid-template-columns: repeat(3, 1fr); } }

/* §01 verdict cards — standalone coloured panels (verified shield / WISEcode
   classification / processing level), reusing the pscale-col treatment. Two or
   three across; when the verified card is absent the remaining two center. */
.rpt-skin .upf-vcards { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; margin-top: 4px; }
.rpt-skin .upf-vcard {
    flex: 1 1 0; min-width: 220px; max-width: 380px;
    display: flex; flex-direction: column; align-items: center; gap: 7px;
    padding: 26px 22px 28px; text-align: center;
    color: #fff; background: var(--c, var(--rs-navy));
    border-radius: 16px; box-shadow: var(--rs-shadow);
}
.rpt-skin .upf-vcard-ico {
    display: inline-flex; align-items: center; justify-content: center;
    width: 54px; height: 54px; border-radius: 50%; margin-bottom: 4px;
    border: 1.5px solid rgba(255, 255, 255, .28); background: rgba(255, 255, 255, .12); color: rgba(255, 255, 255, .96);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .1), inset 0 -1px 0 rgba(255, 255, 255, .35);
}
.rpt-skin .upf-vcard-ico .material-symbols-outlined { font-size: 30px; line-height: 1; font-variation-settings: 'FILL' 0, 'wght' 400, 'opsz' 24; }
.rpt-skin .upf-vcard-tier { font-family: var(--rs-serif); font-size: 1.25rem; font-weight: 700; line-height: 1.12; letter-spacing: -.01em; }
.rpt-skin .upf-vcard-cap { font-size: .6875rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: rgba(255, 255, 255, .82); }
.rpt-skin .upf-vcard-desc { margin-top: 5px; font-size: .8125rem; line-height: 1.5; color: rgba(255, 255, 255, .9); max-width: 32ch; }
@media (max-width: 720px) { .rpt-skin .upf-vcard { flex-basis: 100%; max-width: none; } }

/* §01 score tile — third verdict card (navy) carrying the composite WC-UPF total. */
.rpt-skin .upf-vcard--score { justify-content: center; }
.rpt-skin .upf-vcard-score {
    font-family: var(--rs-serif); font-weight: 800; font-size: 2.75rem; line-height: 1;
    letter-spacing: -.02em; font-variant-numeric: tabular-nums;
}
.rpt-skin .upf-vcard-band {
    display: inline-block; margin-left: 6px; padding: 2px 8px; border-radius: 9999px;
    background: rgba(255, 255, 255, .16); color: #fff;
    font-size: .625rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; vertical-align: middle;
}

/* Added Sugar Load card — inputs + Standard §5.4 penalty ladder + summary strip. */
.rpt-skin .upf-sugar-grid {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
    gap: 24px; margin-top: 16px; align-items: start;
}
.rpt-skin .upf-sugar-dl { margin: 0; }
.rpt-skin .upf-sugar-dl > div {
    display: flex; justify-content: space-between; gap: 12px;
    padding: 9px 0; border-bottom: 1px solid var(--rs-border);
}
.rpt-skin .upf-sugar-dl dt { color: var(--rs-subtle); font-size: 13px; }
.rpt-skin .upf-sugar-dl dd { margin: 0; font-weight: 700; color: var(--rs-text); font-variant-numeric: tabular-nums; }
.rpt-skin .upf-sugar-pct { margin: 16px 0 2px; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.rpt-skin .upf-sugar-pct-num { font-family: var(--rs-serif); font-weight: 800; font-size: 2.5rem; line-height: 1; color: #D23B33; }
.rpt-skin .upf-sugar-pct-lbl { font-size: 13px; color: var(--rs-subtle); max-width: 16ch; line-height: 1.35; }
.rpt-skin .upf-sugar-note { margin: 8px 0 0; font-size: 11.5px; color: var(--rs-muted); line-height: 1.4; }
.rpt-skin .upf-sugar-ladder { width: 100%; border-collapse: collapse; font-size: 13px; }
.rpt-skin .upf-sugar-ladder th {
    text-align: left; font-size: .625rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
    color: var(--rs-subtle); padding: 0 10px 8px; border-bottom: 1px solid var(--rs-border);
}
.rpt-skin .upf-sugar-ladder th.upf-th-num, .rpt-skin .upf-sugar-ladder td.upf-num { text-align: right; }
.rpt-skin .upf-sugar-ladder td { padding: 7px 10px; border-bottom: 1px solid var(--rs-border); color: var(--rs-text); }
.rpt-skin .upf-sugar-ladder .upf-num { font-weight: 700; font-variant-numeric: tabular-nums; }
.rpt-skin .upf-sugar-ladder .is-band { background: rgba(210, 59, 51, .07); box-shadow: inset 3px 0 0 #D23B33; }
.rpt-skin .upf-sugar-ladder .is-band td { font-weight: 800; color: #D23B33; }
.rpt-skin .upf-sugar-foot {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
    margin-top: 20px; background: var(--rs-border);
    border: 1px solid var(--rs-border); border-radius: 12px; overflow: hidden;
}
.rpt-skin .upf-sugar-foot > div { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; background: var(--rs-surface); }
.rpt-skin .upf-foot-lbl { font-size: .625rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--rs-subtle); }
.rpt-skin .upf-foot-val { font-family: var(--rs-serif); font-weight: 800; font-size: 1.4rem; color: var(--rs-text); font-variant-numeric: tabular-nums; }
.rpt-skin .upf-foot-pen { color: #D23B33; }
/* High processing level penalty cell: neutral zero state + the flagged-count line beneath the value. */
.rpt-skin .upf-foot-pen--none { color: var(--rs-subtle); }
.rpt-skin .upf-foot-sub { font-size: .71875rem; line-height: 1.35; color: var(--rs-subtle); font-variant-numeric: tabular-nums; }
.rpt-skin .upf-sugar-foot .upf-foot-score { background: var(--rs-navy); }
.rpt-skin .upf-sugar-foot .upf-foot-score .upf-foot-lbl { color: rgba(255, 255, 255, .72); }
.rpt-skin .upf-sugar-foot .upf-foot-score .upf-foot-val { color: #fff; }
@media (max-width: 720px) {
    .rpt-skin .upf-sugar-grid { grid-template-columns: 1fr; }
    .rpt-skin .upf-sugar-foot { grid-template-columns: repeat(2, 1fr); }
}

/* §01 classification header row (verdict + shield pill) above the scale. */
.rpt-skin .rpt-upf-verdict { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }

/* §02 ingredient table extras (table chrome reused from .upf-report .upf-table). */
.rpt-skin .upf-table-wrap { overflow-x: auto; margin-top: 14px; }
.rpt-skin .upf-th-num, .rpt-skin .upf-num { text-align: right; }
.rpt-skin .upf-score { font-weight: 800; font-size: 14px; color: var(--rs-text); font-variant-numeric: tabular-nums; }
.rpt-skin .upf-basis { display: block; max-width: 620px; font-size: 13px; line-height: 1.55; color: var(--rs-subtle); }
.rpt-skin .upf-itable-empty { text-align: center; padding: 18px; color: var(--rs-subtle); font-style: italic; }

/* ── Card shell ──────────────────────────────────────────────────────────────
   Every section is a WciDashCard (the design's Dashboard card, INTEL-391) carrying
   .rpt-card as a hook for the replay animation (reports-radar-anim.js) and the print
   rules below; the shell and title come from its scoped sheet. Its rules are 0,2,0,
   so the report's own adjustments name .rpt-card plus a child to outrank them.
   A sub line stays tucked under its title, as it sat under the old card head. */
.rpt-skin .rpt-card > .dash-card-title:has(+ .rpt-card-sub) { margin-bottom: 4px; }
.rpt-skin .rpt-card > .dash-card-topbar { margin-bottom: 4px; }
.rpt-skin .rpt-card-sub { margin: 6px 0 0; font-size: 12.5px; color: var(--rs-muted); line-height: 1.45; }
.rpt-skin .rpt-eyebrow {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 9px; border-radius: 9999px;
    background: var(--rs-navy-soft); color: var(--rs-navy);
    font-size: .66rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
}

/* Status pills (score-pane pillars, rating chips) */
.rpt-skin .rpt-pill {
    display: inline-flex; align-items: center;
    padding: 4px 11px; border-radius: 9999px;
    font-size: 12px; font-weight: 800; line-height: 1.2; white-space: nowrap; border: none;
}
.rpt-skin .rpt-pill--good  { background: rgba(50, 169, 102, .15);  color: var(--rs-green-text); }
.rpt-skin .rpt-pill--leaf  { background: rgba(125, 196, 112, .20); color: var(--rs-green-text); }
.rpt-skin .rpt-pill--navy  { background: var(--rs-navy-soft);      color: var(--rs-navy); }
.rpt-skin .rpt-pill--warn  { background: rgba(255, 196, 52, .24);  color: var(--rs-amber-text); }
.rpt-skin .rpt-pill--orange{ background: rgba(210, 115, 38, .18);  color: var(--rs-orange); }
.rpt-skin .rpt-pill--alert { background: rgba(220, 48, 56, .16);   color: var(--rs-red-text); }

/* ── Footer (light) ───────────────────────────────────────────────────────── */
.rpt-skin .rpt-footer {
    background: var(--rs-surface);
    border-top: 1px solid var(--rs-border);
    border-radius: 0 0 14px 14px;
    color: var(--rs-muted);
}
.rpt-skin .rpt-footer strong { color: var(--rs-text); }
.rpt-skin .rpt-footer-right a { color: var(--rs-navy); }

/* ── Metric Highlight Card rows (§03/§04/§05) ───────────────────────────────
   Per-metric block: rating badge + icon+title + score + description, Top/Low
   product chips + View-report link, then a rounded segmented distribution bar
   (% labels) with a connector-line legend. Composite metrics carry a
   "N Components" separator + indented component rows. */
.rpt-skin .rpt-mhc-rows { display: flex; flex-direction: column; }
/* Each metric (and the component sub-group) is separated by a hairline divider,
   matching the analytics-types Metric Highlight prototype: a top rule with even
   breathing room above and below rather than a plain gap. */
.rpt-skin .rpt-mhc-rows > * { margin-top: 28px; padding-top: 28px; border-top: 1px solid var(--rs-border); }
.rpt-skin .rpt-mhc-rows > *:first-child { margin-top: 0; padding-top: 0; border-top: none; }
.rpt-skin .rpt-mhc-row { padding-bottom: 14px; }
.rpt-skin .rpt-mhc-group .rpt-mhc-row + .rpt-mhc-row { margin-top: 26px; padding-top: 26px; border-top: 1px solid var(--rs-border); }
.rpt-skin .rpt-mhc-head { display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.rpt-skin .rpt-mhc-badge { align-self: center; flex-shrink: 0; }
.rpt-skin .rpt-mhc-main { flex: 1 1 300px; min-width: 0; }
.rpt-skin .rpt-mhc-titlerow { display: flex; align-items: baseline; gap: 10px; }
.rpt-skin .rpt-mhc-title {
    margin: 0; font-family: var(--rs-serif); font-size: 17px; font-weight: 700; color: var(--rs-text);
    display: inline-flex; align-items: center; gap: 7px; min-width: 0;
}
.rpt-skin .rpt-mhc-icon { font-size: 18px; color: var(--rs-subtle); flex-shrink: 0; }
.rpt-skin .rpt-mhc-icon--composite { color: var(--rs-navy); }
.rpt-skin .rpt-mhc-score { flex-shrink: 0; font-family: var(--rs-serif); white-space: nowrap; }
.rpt-skin .rpt-mhc-score .n { font-size: 17px; font-weight: 800; color: var(--rs-text); font-variant-numeric: tabular-nums; }
.rpt-skin .rpt-mhc-score .d { font-size: 13px; font-weight: 600; color: var(--rs-subtle); margin-left: 2px; }
.rpt-skin .rpt-mhc-note { margin: 3px 0 0; font-size: 13px; line-height: 1.45; color: var(--rs-muted); }
.rpt-skin .rpt-mhc-chips { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-left: auto; }
.rpt-skin .rpt-mhc-chip {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 4px 10px; border-radius: 9999px;
    background: var(--rs-surface-2); border: 1px solid var(--rs-border); font-size: 12px;
}
.rpt-skin .rpt-mhc-chip-tag { font-weight: 800; font-size: 10px; letter-spacing: .04em; text-transform: uppercase; }
/* The Product Insights "vs brand avg" delta is a NUMBER, so it should match the
   12px avg number beside it, not the 10px Top/Low label size. */
.rpt-skin .rpt-mhc-chip-tag--num { font-size: 12px; letter-spacing: 0; text-transform: none; font-variant-numeric: tabular-nums; }
.rpt-skin .rpt-mhc-chip-tag--top { color: var(--rs-green-text); }
.rpt-skin .rpt-mhc-chip-tag--low { color: var(--rs-red-text); }
.rpt-skin .rpt-mhc-chip-name { color: var(--rs-text); font-weight: 600; max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rpt-skin .rpt-mhc-chip-score { color: var(--rs-subtle); font-weight: 700; font-variant-numeric: tabular-nums; }

/* Segmented distribution bar — segments butt together, only the ends round. */
.rpt-skin .rpt-mhc-segrow { margin-top: 14px; }
.rpt-skin .rpt-seg-track {
    display: flex; height: 22px; border-radius: 9999px; overflow: hidden;
    clip-path: inset(0 0 0 0);
    cursor: pointer;   /* click replays the reveal (does NOT navigate) */
}
.rpt-skin .rpt-seg-part { display: flex; align-items: center; justify-content: center; flex-basis: 0; min-width: 0; overflow: hidden; }
.rpt-skin .rpt-seg-part-label { font-size: .72rem; font-weight: 700; color: #fff; white-space: nowrap; padding: 0 8px; }
.rpt-skin .rpt-seg-legend { display: flex; margin-top: 0; }
.rpt-skin .rpt-seg-leg-cell { display: flex; flex-direction: column; align-items: center; flex-basis: 0; min-width: 0; padding: 0 4px; }
.rpt-skin .rpt-seg-leg-line { width: 2px; height: 14px; border-radius: 1px; opacity: .55; margin-top: -1px; }
.rpt-skin .rpt-seg-leg-info { display: inline-flex; align-items: center; gap: 5px; margin-top: 7px; font-size: .82rem; white-space: nowrap; }
.rpt-skin .rpt-seg-leg-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.rpt-skin .rpt-seg-leg-name { font-weight: 600; color: var(--rs-text); }

/* ── Code report §01 "Portfolio Analysis" — matches the prototype's
   dash-seg-section: serif title, a big % stat + note, and the segmented
   distribution bar (reuses .rpt-seg-track / -legend above). */
.rpt-skin .rpt-pa-section { padding: 4px 0 2px; }
.rpt-skin .rpt-pa-title { font-family: var(--rs-serif); font-size: 1.25rem; font-weight: 800; letter-spacing: -.01em; color: var(--rs-text); margin: 0 0 24px; }
.rpt-skin .rpt-pa-row { display: flex; align-items: center; gap: 40px; }
.rpt-skin .rpt-pa-score { flex-shrink: 0; max-width: 240px; }
.rpt-skin .rpt-pa-num { display: flex; align-items: baseline; gap: 4px; font-family: var(--rs-serif); }
.rpt-skin .rpt-pa-num .n { font-size: 3.6rem; font-weight: 800; line-height: 1; letter-spacing: -.03em; color: var(--rs-text); font-variant-numeric: tabular-nums; }
.rpt-skin .rpt-pa-num .d { font-size: 1.25rem; font-weight: 700; color: var(--rs-subtle); }
.rpt-skin .rpt-pa-note { margin: 12px 0 0; font-size: 1.25rem; line-height: 1.4; max-width: 280px; color: var(--rs-muted); }
.rpt-skin .rpt-pa-note strong { color: var(--rs-text); font-weight: 700; }
.rpt-skin .rpt-pa-bars { flex: 1; min-width: 0; }
.rpt-skin .rpt-pa-measure { margin-top: 26px; font-size: 13px; line-height: 1.55; color: var(--rs-muted); }
.rpt-skin .rpt-pa-measure strong { color: var(--rs-text); }
.rpt-skin .rpt-pa-measure em { color: var(--rs-subtle); font-style: italic; }
@media (max-width: 720px) {
    .rpt-skin .rpt-pa-row { flex-direction: column; align-items: flex-start; gap: 18px; }
    .rpt-skin .rpt-pa-bars { width: 100%; }
}

/* ── Code §02 "Top Five Products" — ranked cards (ported from the prototype's
   dash-top5). Products WITH an image render as a navy photo card; without an
   image, the linen "stat" column with a 1px divider between columns. */
/* Equal-width columns on a single row (any product count) — a column grid so
   every card is identical width and never wraps, including on the narrower print
   page. (Was flex-wrap, which let a short wrapped row balloon its cards.) */
.rpt-skin .rpt-top5 { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 26px; align-items: stretch; }
.rpt-skin .rpt-top5-col { min-width: 0; display: flex; flex-direction: column; }
/* no-image columns get the photo card's vertical inset so the top lines and the
   baselined "View report" buttons align across photo and stat columns alike */
.rpt-skin .rpt-top5-col:not(.rpt-top5-col--photo) { padding: 16px 4px; }
.rpt-skin .rpt-top5-divider { flex: 0 0 1px; width: 1px; align-self: stretch; background: var(--rs-border); }
/* top line: rank stamp (left) + score (right), on the same row */
.rpt-skin .rpt-top5-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.rpt-skin .rpt-top5-num { font-family: var(--rs-serif); font-size: 3.4rem; font-weight: 800; line-height: 1; letter-spacing: -.03em; color: var(--rs-text); font-variant-numeric: tabular-nums; }
/* name + button grouped at the bottom so the buttons baseline across cards */
.rpt-skin .rpt-top5-foot { margin-top: auto; padding-top: 12px; }
.rpt-skin .rpt-top5-cap { font-size: .8125rem; color: var(--rs-muted); line-height: 1.35; text-align: right; }
.rpt-skin .rpt-top5-cap strong { display: block; color: var(--rs-text); font-size: 1.0625rem; font-weight: 700; }
.rpt-skin .rpt-top5-col .rpt-btn-row { margin-top: 12px; justify-content: flex-end; }
/* photo column — stamp+score pinned top, name+button pushed to the bottom */
.rpt-skin .rpt-top5-col--photo { position: relative; isolation: isolate; overflow: hidden; min-height: 180px; padding: 16px; border-radius: 16px; background: color-mix(in srgb, var(--rs-navy) 78%, #1A2339); box-shadow: 0 8px 22px rgba(17,24,39,.18), inset 0 0 0 1px rgba(255,255,255,.08); }
.rpt-skin .rpt-top5-photo-bg { position: absolute; inset: 0; z-index: -2; background-repeat: no-repeat; background-position: center; background-size: cover; }
.rpt-skin .rpt-top5-photo-scrim { position: absolute; inset: 0; z-index: -1; background: linear-gradient(rgba(7,12,26,.12) 0%, rgba(7,12,26,.46) 50%, rgba(7,12,26,.82) 100%); }
.rpt-skin .rpt-top5-col--photo .rpt-top5-num { color: #fff; }
.rpt-skin .rpt-top5-col--photo .rpt-top5-cap { color: rgba(255,255,255,.88); text-align: left; }
.rpt-skin .rpt-top5-col--photo .rpt-top5-cap strong { color: #fff; }
.rpt-skin .rpt-top5-col--photo .rpt-btn-row { justify-content: flex-start; }

/* Rank stamp (#N circle). */
.rpt-skin .rpt-stamp { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; border: 1.5px solid color-mix(in srgb, var(--rs-navy) 14%, var(--rs-surface-2)); color: color-mix(in srgb, var(--rs-navy) 40%, var(--rs-subtle)); background: transparent; box-shadow: inset 0 1px 1px rgba(17,24,39,.07), inset 0 -1px 0 rgba(255,255,255,.55), 0 1px 0 rgba(255,255,255,.6); pointer-events: none; user-select: none; }
.rpt-skin .rpt-stamp-num { font-family: var(--rs-serif); font-size: 1.45rem; font-weight: 700; line-height: 1; text-shadow: 0 1px 0 rgba(255,255,255,.6); }
.rpt-skin .rpt-stamp-inner { position: relative; }
.rpt-skin .rpt-stamp-hash { font-size: .58em; font-weight: 700; vertical-align: .5em; margin-right: .04em; }
.rpt-skin .rpt-top5-col--photo .rpt-stamp { border-color: rgba(255,255,255,.85); color: #fff; background: rgba(17,24,39,.28); box-shadow: 0 2px 8px rgba(0,0,0,.28); text-shadow: 0 1px 3px rgba(0,0,0,.6); }

/* Ghost "View report" button. */
.rpt-skin .rpt-btn-row { display: flex; flex-wrap: wrap; gap: 10px; }
.rpt-skin .rpt-dash-btn { display: inline-flex; align-items: center; gap: 7px; padding: 9px 15px; border-radius: 999px; font-family: var(--rs-serif); font-size: .78rem; font-weight: 600; cursor: pointer; border: 1px solid var(--rs-border-strong); background: transparent; color: var(--rs-text); transition: transform .15s, box-shadow .15s, background .15s; text-decoration: none; }
.rpt-skin .rpt-dash-btn .material-icons { font-size: 16px; }
.rpt-skin .rpt-dash-btn:hover { background: var(--rs-surface-2); transform: translateY(-1px); }
.rpt-skin .rpt-top5-col--photo .rpt-dash-btn { background: rgba(255,255,255,.14); color: #fff; border-color: rgba(255,255,255,.55); }
.rpt-skin .rpt-top5-col--photo .rpt-dash-btn:hover { background: rgba(255,255,255,.26); }

/* ── Code §03 "All products" — ranked horizontal score bars (ported from the
   prototype's dash-ing / dash-ws-health-bar). Each row's fill grows from 0 on
   scroll-into-view (interactive only) and the number inside counts up. */
.rpt-skin .rpt-prod-note { margin: 2px 0 24px; font-size: .8rem; color: var(--rs-muted); line-height: 1.45; }
.rpt-skin .rpt-prod-table { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.rpt-skin .rpt-prod-row { min-width: 0; display: flex; align-items: stretch; gap: 18px; }
.rpt-skin .rpt-prod-main { flex: 1 1 auto; min-width: 0; }
.rpt-skin .rpt-prod-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 9px; }
.rpt-skin .rpt-prod-name { display: inline-flex; align-items: baseline; gap: 9px; font-size: .95rem; font-weight: 700; color: var(--rs-text); min-width: 0; }
.rpt-skin .rpt-prod-rank { font-size: .78rem; font-weight: 600; color: var(--rs-subtle); font-variant-numeric: tabular-nums; flex-shrink: 0; }
.rpt-skin .rpt-prod-chip { flex-shrink: 0; font-size: .9rem; font-weight: 800; letter-spacing: -.02em; line-height: 1; font-variant-numeric: tabular-nums; }
.rpt-skin .rpt-prod-bar { width: 100%; margin: 0; cursor: pointer; transition: transform .12s; }
.rpt-skin .rpt-prod-bar:active { transform: scale(.99); }
.rpt-skin .rpt-prod-track { position: relative; height: 22px; border-radius: 999px; background: color-mix(in srgb, var(--bar-color, var(--rs-subtle)) 15%, transparent); overflow: hidden; }
.rpt-skin .rpt-prod-fill { position: absolute; left: 0; top: 0; bottom: 0; height: auto; width: var(--fill); display: flex; align-items: center; justify-content: flex-end; padding-right: 10px; min-width: 2.9rem; border-radius: 999px; overflow: hidden; transition: width 1.15s cubic-bezier(.16,1,.3,1); }
.rpt-skin .rpt-prod-num { flex-shrink: 0; font-size: .8125rem; font-weight: 800; letter-spacing: -.02em; color: #fff; line-height: 1; font-variant-numeric: tabular-nums; text-shadow: 0 1px 1px rgba(0,0,0,.18); }
/* interactive grow: collapse to 0 (instantly — transition:none — so a click
   replay snaps back to empty, then the .is-anim-ready state grows it again). */
.rpt-skin.rpt-anim .rpt-prod-row:not(.is-anim-ready) .rpt-prod-fill { width: 0; transition: none; }
.rpt-skin.rpt-anim .rpt-prod-row.is-anim-ready .rpt-prod-fill { width: var(--fill); }
/* right-side drill / lock column */
.rpt-skin .rpt-prod-aside { flex: 0 0 auto; display: flex; align-items: center; }

/* Code report header band. */
.rpt-skin .rpt-codehead { padding: 26px 0 8px; }
.rpt-skin .rpt-codehead-title { font-family: var(--rs-serif); font-size: 1.7rem; font-weight: 800; letter-spacing: -.01em; color: var(--rs-text); margin: 8px 0 12px; }
.rpt-skin .rpt-codehead-pill { display: inline-flex; align-items: center; gap: 6px; }

/* Per-product fill bar (Product Insights §03/04/05): a thin pill track with a
   rating-coloured fill = score, plus a brand-average tick. The fill grows from
   0 on reveal and replays on click (same .is-anim-ready mechanism as the
   segmented bar). */
.rpt-skin .rpt-mbar { margin-top: 6px; }
.rpt-skin .rpt-mbar-track {
    position: relative; height: 10px; border-radius: 9999px;
    background: var(--rs-surface-2); cursor: pointer;
}
.rpt-skin .rpt-mbar-fill {
    height: 100%; border-radius: 9999px;
    transition: width 1.15s cubic-bezier(0.16, 1, 0.3, 1);
}
.rpt-skin .rpt-mbar-avg {
    position: absolute; top: -3px;
    width: 2px; height: 16px; border-radius: 1px;
    background: rgba(17, 24, 39, .45); transform: translateX(-50%);
}
.rpt-skin.rpt-anim .rpt-mhc-row:not(.is-anim-ready) .rpt-mbar-fill { width: 0 !important; transition: none; }
@media (prefers-reduced-motion: reduce) { .rpt-skin .rpt-mbar-fill { transition: none; } }

/* ── §06 "Where to Focus" scatter: WciChart's Scatter kind (wci-chart.css) draws it; this is its spacing. */
.rpt-skin .pi-scatter-wrap { margin-top: 16px; }

/* ── §07 "Performance Matrix": WciChart's Matrix kind (wci-chart.css) draws the grid, with its hover card;
   this is its spacing and the legend under it. The HTML grid, its avatar column, its reveal and its own
   cursor tooltip (.rpt-hover-tip) went with the move (INTEL-564). */
.rpt-skin .pmx-chart { margin-top: 16px; }
/* Legend bar: centered rating swatches, "Show more" on the left, count on the right. */
.rpt-skin .pmx-legend { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; margin-top: 16px; }
.rpt-skin .pmx-legend-left { justify-self: start; }
.rpt-skin .pmx-legend-items { justify-self: center; display: flex; flex-wrap: wrap; gap: 16px; font-size: 12px; color: var(--rs-muted); }
.rpt-skin .pmx-legend-items > span { display: inline-flex; align-items: center; gap: 6px; }
.rpt-skin .pmx-legend-right { justify-self: end; font-size: 12px; color: var(--rs-subtle); font-weight: 600; white-space: nowrap; }
.rpt-skin .pmx-swatch { width: 12px; height: 12px; border-radius: 3px; }
.rpt-skin .pmx-empty { padding: 24px; text-align: center; color: var(--rs-subtle); font-style: italic; }

/* Component separator + indented component rows (composite metrics). */
.rpt-skin .rpt-mhc-comp-sep { display: flex; align-items: center; gap: 10px; margin: 0 0 16px; }
.rpt-skin .rpt-mhc-comp-badge {
    background: var(--rs-navy-soft); color: var(--rs-navy);
    font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
    padding: 3px 9px; border-radius: 9999px;
}
.rpt-skin .rpt-mhc-comp-title { font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--rs-subtle); }
/* Component sub-group: ONE continuous brand-accent rule down the left gathers the
   composite's components under their subhead (matching the analytics-types
   prototype). The indent comes from the group's padding, so the component rows
   carry no per-row border — the bar reads as a single unbroken line. */
.rpt-skin .rpt-mhc-group { margin-left: 2px; padding-left: 16px; border-left: 2px solid rgba(37, 80, 124, .30); }

/* Segmented-bar reveal — a left-to-right clip-path wipe driven by .is-anim-ready
   (reports-radar-anim.js): collapsed until the row scrolls into view, replayed
   when the bar/row is clicked. Interactive view only (`.rpt-anim`); print/PDF
   has no `.rpt-anim`, so bars render full. */
.rpt-skin .rpt-seg-track { transition: clip-path 1.15s cubic-bezier(0.16, 1, 0.3, 1); }
.rpt-skin.rpt-anim .rpt-mhc-row:not(.is-anim-ready) .rpt-seg-track { clip-path: inset(0 100% 0 0); transition: none; }
/* Code Insights §01 "Portfolio Analysis" standalone distribution bar — same
   left-to-right wipe, driven by .is-anim-ready on its .rpt-pa-row. */
.rpt-skin.rpt-anim .rpt-pa-row:not(.is-anim-ready) .rpt-seg-track { clip-path: inset(0 100% 0 0); transition: none; }
@media (prefers-reduced-motion: reduce) { .rpt-skin .rpt-seg-track { transition: none; clip-path: inset(0 0 0 0); } }

/* §02 WISEscore: the score-pane + radar grid sits inside an .rpt-card, so drop
   its legacy standalone card chrome and edge padding (the card supplies them). */
.rpt-skin .ws-grid { background: transparent; border: none; border-radius: 0; overflow: visible; }
/* Keep the "Composite Intelligence Score" title inside the left (score) column so
   it wraps there instead of running across the polar-area chart. Left column is
   320px; cap the heading just shy of the divider. The chart/grid are untouched.
   (Product Insights §02 — still a full-width card-head above the grid.) */
.rpt-skin .ws-composite > .dash-card-title { max-width: 312px; }

/* Portfolio Insights §02 — the heading lives at the TOP of the left pane (no
   standalone header row), so it sits on the same line as the chart title across
   the divider and the whole card rides up. Both panes share a top inset so the
   two headings align. */
.rpt-skin .ws-composite-inline .ws-score-pane { padding-top: 16px; }
.rpt-skin .ws-composite-inline .ws-radar-pane { padding-top: 16px; }
.rpt-skin .ws-pane-head { margin: 0 0 14px; }
.rpt-skin .ws-score-pane { padding: 4px 24px 4px 0; border-right: 1px solid var(--rs-border); }
.rpt-skin .ws-radar-pane { padding: 4px 0 4px 24px; }

/* Pillar-pill rating badges → skin palette (Excellent green → Poor red). */
.rpt-skin .pill-badge.bE { background: rgba(50, 169, 102, .15);  color: var(--rs-green-text); }
.rpt-skin .pill-badge.bG { background: rgba(125, 196, 112, .22); color: var(--rs-green-text); }
.rpt-skin .pill-badge.bO { background: rgba(255, 196, 52, .24);  color: var(--rs-amber-text); }
.rpt-skin .pill-badge.bF { background: rgba(210, 115, 38, .18);  color: #9E4A10; }
.rpt-skin .pill-badge.bP { background: rgba(220, 48, 56, .16);   color: var(--rs-red-text); }

@media print {
    /* Only keep INDIVIDUAL rows intact across a page break. Do NOT add
       break-inside:avoid to .rpt-card — the Insights §03/§04/§05 metric cards
       are taller than a Letter page, and an unbreakable block taller than the
       page makes headless Chromium drop the overflow (which silently swallowed
       the whole Health Outcomes section). Tall cards must be free to paginate;
       the rows below stop any single metric from splitting mid-row. */
    .rpt-skin .rpt-mhc-row { break-inside: avoid; page-break-inside: avoid; }
    /* The §06 Where to Focus card is short (its heading, one line of intro and the scatter, well under a page)
       and is one reading: kept whole, its heading never ends a page above a chart that starts the next (the
       design's "never orphan a heading at the bottom of a page from its chart"). The chart alone is already
       unbreakable (wci-chart.css); this keeps the heading with it. */
    .rpt-skin .rpt-card:has(> .pi-scatter-wrap) { break-inside: avoid; page-break-inside: avoid; }
    .rpt-skin .rpt-card > .dash-card-title,
    .rpt-skin .rpt-card > .dash-card-topbar { break-after: avoid; page-break-after: avoid; }
    .rpt-skin .rpt-seg-track { clip-path: inset(0 0 0 0); transition: none; }
    /* The PDF export is a static, non-interactive render. Headless Chrome can leave
       an element (e.g. the hero heading) focused while printing and bake its default
       blue focus ring into the page. Suppress focus outlines across every report
       surface so no stray box shows in the exported PDF. */
    .rpt-skin :focus, .rpt-skin :focus-visible,
    .upf-report :focus, .upf-report :focus-visible,
    .spec-sheet-root :focus, .spec-sheet-root :focus-visible { outline: none !important; }
}

/* ── Product GRAS report ───────────────────────────────────────────────────
   GRAS shares the `.rpt-skin` chrome + product hero with the Product UPF /
   Insights reports. These add the GRAS-only bits: a teal "Historical" pill, the
   §01 verdict + donut layout, and the §02 Unsafe / Unclear group headers. */

/* "Historical" GRAS band — teal, distinct from the GRAS green. */
.rpt-skin .rpt-pill--teal { background: rgba(20, 184, 166, .14); color: #0F766E; }

/* §01 layout: verdict (left) + GRAS distribution donut (right). */
.rpt-skin .gras-s1-grid {
    display: grid;
    grid-template-columns: minmax(220px, 280px) 1fr;
    gap: 26px;
    align-items: center;
    margin-top: 16px;
}
.rpt-skin .gras-donut-pane { min-width: 0; }
@media (max-width: 720px) {
    .rpt-skin .gras-s1-grid { grid-template-columns: 1fr; gap: 20px; }
}

/* Overall GRAS verdict card. */
.rpt-skin .gras-verdict {
    display: flex; flex-direction: column; gap: 6px;
    padding: 20px 22px; border-radius: 14px;
    border: 1px solid var(--rs-border); border-left-width: 4px;
    background: var(--rs-surface-2);
}
.rpt-skin .gras-verdict-icon { font-size: 24px; line-height: 1; }
.rpt-skin .gras-verdict-eyebrow {
    font-size: .66rem; font-weight: 800; letter-spacing: .08em;
    text-transform: uppercase; color: var(--rs-subtle);
}
.rpt-skin .gras-verdict-value {
    font-family: 'DM Sans', system-ui, sans-serif;
    font-size: 1.55rem; font-weight: 700; line-height: 1.1;
}
.rpt-skin .gras-verdict-sub { font-size: 12.5px; color: var(--rs-muted); line-height: 1.45; }

.rpt-skin .gras-verdict--good    { border-left-color: var(--rs-green); background: rgba(50, 169, 102, .08); }
.rpt-skin .gras-verdict--good .gras-verdict-icon,
.rpt-skin .gras-verdict--good .gras-verdict-value { color: var(--rs-green-text); }
.rpt-skin .gras-verdict--neutral { border-left-color: var(--rs-amber); background: rgba(255, 196, 52, .12); }
.rpt-skin .gras-verdict--neutral .gras-verdict-icon,
.rpt-skin .gras-verdict--neutral .gras-verdict-value { color: var(--rs-amber-text); }
.rpt-skin .gras-verdict--bad     { border-left-color: var(--rs-red); background: rgba(220, 48, 56, .08); }
.rpt-skin .gras-verdict--bad .gras-verdict-icon,
.rpt-skin .gras-verdict--bad .gras-verdict-value { color: var(--rs-red-text); }

/* §02 Unsafe / Unclear group sub-headers above each ingredient table. */
.rpt-skin .gras-group-label {
    display: flex; align-items: center; gap: 7px;
    margin: 20px 0 8px; font-size: 13px; font-weight: 800; letter-spacing: .02em;
}
.rpt-skin .gras-group-label svg { width: 13px; height: 13px; flex-shrink: 0; }
.rpt-skin .gras-group-label--unsafe  { color: #991B1B; }
.rpt-skin .gras-group-label--unclear { color: #9A3412; }

/* Product GRAS §01 donut pane: it doubles as a bare `.upf-card` purely so the
   shared sweep animation (reports-upf-anim.js observes `.upf-card` holding a
   `.upf-donut`) drives the ring reveal. It is a plain div, not a card, so it
   reads as part of the §01 rpt-card rather than a nested box. */
.rpt-skin .upf-card.gras-donut-pane { min-width: 0; }

/* ── Spec sheet ────────────────────────────────────────────────────────────
   The spec sheet reuses the report topbar + product hero but isn't wrapped in a
   .rpt-page, so cancel the hero's full-bleed breakout margin and square the
   topbar's top corners so the chrome sits flush at the top of the sheet. */
.spec-sheet-root .rpt-skin .rpt-hero { margin: 0; }
.spec-sheet-root .rpt-skin .rpt-hdr { border-radius: 0; }
.spec-sheet-root .ss-rpt-chrome { margin-bottom: 4px; }

/* ════════════════════════════════════════════════════════════════════════════
   WEB RESPONSIVENESS (screen only — never the PDF)
   ────────────────────────────────────────────────────────────────────────────
   Reflow keys off the wrapper's CONTAINER width (`rptw`, set in reports.css),
   so it adapts to the real content width regardless of the sidebar. The whole
   block is under `@media screen`, so the PDF export (Playwright print-media
   render) is unaffected. Breakpoints are well under the ~1024px print width as
   a second line of defence. The older viewport `@media (max-width)` rules above
   stay as a phone-viewport fallback; these container rules are appended last so
   they win where the two overlap.
   ════════════════════════════════════════════════════════════════════════════ */
@media screen {
    /* Drop the 880px floor so the wrapper shrinks to its parent and the
       container queries below can reflow. Lives here (not reports.css) so it
       wins over `.report-wrapper.rpt-skin { min-width: 880px }` on source order
       at equal specificity. */
    .report-wrapper.rpt-skin { min-width: 0; }

    /* ── Mobile: drop the tan page gutter so cards fill the full width ──────────
       The "tan" is the report-card background showing through the .rpt-page
       padding (and the gaps between the white cards). On phones, remove that
       padding so the cards span the full width, zero the hero's full-bleed
       margin (it no longer needs to cancel the padding), and paint the card
       surface white so no tan shows. (.upf-report cards get the white surface
       from reports-upf.css, which loads later.) */
    @container rptw (max-width: 560px) {
        /* Transparent report-card: drop the white "sheet" behind the cards so they
           float on the app background, with the inter-card gaps showing through.
           (The cards themselves keep their own white surface.) */
        .rpt-skin .report-card { background: transparent; border: none; box-shadow: none; }
        .rpt-skin .rpt-page { padding: 0; }
        .rpt-skin .rpt-hero { margin: 0; }
    }

    /* ── Brand hero ────────────────────────────────────────────────────────── */
    @container rptw (max-width: 560px) {
        .rpt-skin .rpt-hero { padding: 24px 22px 22px; min-height: 0; }
        .rpt-skin .rpt-hero-title { font-size: 1.65rem; }
        /* Keep the brand badge (logo / initials monogram) on mobile, just smaller.
           `display:flex` overrides the legacy `@media (max-width:620px)` hide above. */
        .rpt-skin .rpt-hero-logo { display: flex; width: 72px; height: 72px; right: 18px; }
        .rpt-skin .rpt-hero-logo-monogram { font-size: 1.7rem; }
        .rpt-skin .rpt-hero-body { padding-right: 90px; }
    }
    @container rptw (max-width: 400px) {
        .rpt-skin .rpt-hero-logo { width: 60px; height: 60px; right: 14px; }
        .rpt-skin .rpt-hero-logo-monogram { font-size: 1.45rem; }
        .rpt-skin .rpt-hero-body { padding-right: 74px; }
    }

    /* ── Product hero: image · brand · title · pills · UPC card ─────────────────
       Matches the prototype's att-hero behaviour at small widths: the product
       thumbnail and the UPC card sit side-by-side on the top row, and the brand
       line + title + pills drop to a full-width row beneath them (the body gets
       `order: 3`, the aside stays on row 1). DOM order is img, main, aside. */
    @container rptw (max-width: 680px) {
        /* Narrow: the plate steps down so it still sits alongside the 200px UPC card on the
           top row. It used to become a bespoke 84×110 portrait crop. */
        .rpt-skin .rpt-hero--product { flex-wrap: wrap; align-items: flex-start; gap: 14px; min-height: 0; padding: 20px 22px; --plate: 124px; }
        /* UPC card sits at the right edge of the top row beside the thumbnail
           (margin-left:auto pushes it right) and top-aligns with the product image. */
        .rpt-skin .rpt-hero--product .rpt-phero-aside { order: 2; flex: 0 0 auto; width: 200px; max-width: 55%; min-width: 0; margin-left: auto; align-self: flex-start; }
        /* Card hugs its contents (shorter than the product image is fine) and top-
           aligns with it. Tight padding + near-zero gaps pull the barcode close to
           the label and number with no dead space above/below. */
        .rpt-skin .rpt-hero--product .rpt-upc-block { width: 100%; max-width: none; padding: 6px 12px; gap: 1px; }
        .rpt-skin .rpt-hero--product .rpt-upc-block .lbl { font-size: 10.5px; letter-spacing: 1.4px; }
        /* Short barcode; width tracks aspect, capped to the card so it stays readable.
           JsBarcode bakes a ~10px blank margin into the image (all sides); negative
           top/bottom margins crop that dead space so the bars sit tight to the label
           and number. (Mobile-only — the desktop card / PDF keep the baked margin.) */
        .rpt-skin .rpt-hero--product .rpt-upc-barcode { width: auto; max-width: 100%; height: 40px; margin: -5px 0; }
        .rpt-skin .rpt-hero--product .rpt-upc-block .val { font-size: 13.5px; }
        /* Brand line + title + pills drop below, full width. */
        .rpt-skin .rpt-hero--product .rpt-phero-main { order: 3; flex-basis: 100%; min-width: 0; }
        .rpt-skin .rpt-hero--product .rpt-hero-title { font-size: 1.65rem; }
    }
    @container rptw (max-width: 420px) {
        .rpt-skin .rpt-hero--product { padding: 18px; }
        .rpt-skin .rpt-hero--product .rpt-hero-title { font-size: 1.5rem; }
    }

    /* ── Processing-level scale (pscale): 6 → 3 → 2 columns ────────────────────
       The cards stay readable down to quite skinny widths; tiers wrap to rows. */
    @container rptw (max-width: 760px) {
        .rpt-skin .rpt-pscale { grid-template-columns: repeat(3, 1fr); }
    }
    @container rptw (max-width: 480px) {
        .rpt-skin .rpt-pscale { grid-template-columns: repeat(2, 1fr); }
        .rpt-skin .rpt-pscale-col { padding: 18px 8px 20px; }
        .rpt-skin .rpt-pscale-ico { width: 44px; height: 44px; }
        .rpt-skin .rpt-pscale-ico .material-symbols-outlined { font-size: 24px; }
    }

    /* §01 verdict cards stack one-per-row early. */
    @container rptw (max-width: 680px) {
        .rpt-skin .upf-vcard { flex-basis: 100%; max-width: none; }
    }

    /* ── Top Five Products: single row → 2 columns, last (odd) spans full width ─
       Exactly the prototype behaviour the design calls for. */
    @container rptw (max-width: 720px) {
        .rpt-skin .rpt-top5 {
            grid-auto-flow: row;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 16px;
        }
        /* Odd count: the last card spans the full row so it isn't left hanging. */
        .rpt-skin .rpt-top5-col:last-child:nth-child(odd) { grid-column: 1 / -1; }
    }
    /* On a narrow phone the 2-up photo cards get cramped (text overlaps the
       image), so drop to a single full-width column. */
    @container rptw (max-width: 460px) {
        .rpt-skin .rpt-top5 { grid-template-columns: 1fr; gap: 12px; }
        .rpt-skin .rpt-top5-col:last-child:nth-child(odd) { grid-column: auto; }
    }

    /* ── Code §01 Portfolio Analysis: big stat beside the bars → stacked ─────── */
    @container rptw (max-width: 680px) {
        .rpt-skin .rpt-pa-row { flex-direction: column; align-items: flex-start; gap: 18px; }
        .rpt-skin .rpt-pa-bars { width: 100%; }
        .rpt-skin .rpt-pa-score { max-width: none; }
        .rpt-skin .rpt-pa-note { max-width: none; }
    }

    /* ── Code §03 / All products bars: keep the drill control from squeezing the
       name + bar. When the drill control is the "View report" BUTTON, drop it to
       its own line below the bar. The small lock badge stays inline (it barely
       takes any room). */
    @container rptw (max-width: 560px) {
        .rpt-skin .rpt-prod-row { gap: 12px; }
        .rpt-skin .rpt-prod-row:has(.rpt-dash-btn) { flex-wrap: wrap; }
        .rpt-skin .rpt-prod-row:has(.rpt-dash-btn) .rpt-prod-main { flex-basis: 100%; }
        .rpt-skin .rpt-prod-row:has(.rpt-dash-btn) .rpt-prod-aside {
            flex-basis: 100%;
            margin-top: 10px;
            justify-content: flex-start;
        }
        /* Locked rows: pin the small lock to the top so it lines up with the score
           and doesn't force the bar narrower than it needs to be. */
        .rpt-skin .rpt-prod-row:has(.report-lock-badge) .rpt-prod-aside { align-self: flex-start; }
    }

    /* ── §02 WISEscore: score pane + radar → stacked, hairline becomes top rule ─ */
    @container rptw (max-width: 720px) {
        .rpt-skin .ws-grid { grid-template-columns: 1fr; }
        .rpt-skin .ws-composite > .dash-card-title { max-width: none; }
        .rpt-skin .ws-score-pane { border-right: none; border-bottom: 1px solid var(--rs-border); padding: 4px 0 18px; }
        .rpt-skin .ws-radar-pane { padding: 18px 0 4px; }
        .rpt-skin .ws-composite-inline .ws-radar-pane { padding-top: 18px; }
    }
    /* On a phone the ring + headline row crushes the text into a tall sliver.
       Stack the ring above the headline + summary; the ring centers and the copy
       spans full width (left-aligned for readability). */
    @container rptw (max-width: 560px) {
        .rpt-skin .ws-top { flex-direction: column; align-items: stretch; gap: 14px; }
        .rpt-skin .ws-top .ws-ring { align-self: center; }
        .rpt-skin .ws-headline { font-size: 15px; }
    }

    /* ── GRAS §01: verdict + donut → stacked ───────────────────────────────── */
    @container rptw (max-width: 680px) {
        .rpt-skin .gras-s1-grid { grid-template-columns: 1fr; gap: 20px; }
    }

    /* ── Metric Highlight rows: keep the Top/Low chips from overflowing ─────── */
    @container rptw (max-width: 560px) {
        .rpt-skin .rpt-mhc-chips { margin-left: 0; }
        .rpt-skin .rpt-mhc-head { gap: 10px; }
    }
    /* The segmented-distribution legend keeps its cells aligned under the bar
       segments, but the rating labels (nowrap) overflow a phone-width card. Let
       them wrap within their cell and shrink slightly so the row fits. */
    @container rptw (max-width: 460px) {
        .rpt-skin .rpt-seg-leg-info { white-space: normal; font-size: .72rem; gap: 4px; }
        .rpt-skin .rpt-seg-leg-name { text-align: center; line-height: 1.15; }
        .rpt-skin .rpt-seg-leg-cell { padding: 0 2px; }
        .rpt-skin .rpt-seg-part-label { font-size: .66rem; padding: 0 4px; }
    }

    /* ── Performance Matrix legend: stacked so it isn't crushed into three columns. ── */
    @container rptw (max-width: 620px) {
        .rpt-skin .pmx-legend { grid-template-columns: 1fr; gap: 10px; }
        .rpt-skin .pmx-legend-left { justify-self: start; }
        .rpt-skin .pmx-legend-items { justify-self: start; justify-content: flex-start; gap: 8px 14px; }
        .rpt-skin .pmx-legend-right { justify-self: start; text-align: left; }
    }

    /* Product UPF §02 and Product GRAS §02 / §03 ingredient tables on a phone: the tables' card view
       (ReportTableView, INTEL-517 / INTEL-518) replaced the CSS-only reflow that lived here; the
       cards' rules are in reports-upf.css ("Report table cards"). */
}