/* ────────────────────────────────────────────────────────────────────────────
   Shared report "skin" — the analytics-types prototype design system
   (off-white linen page, white rounded cards, navy hero, Noto Serif headings +
   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:         'Noto Serif', 'Noto Serif Fallback', Georgia, 'Times New Roman', serif;
    --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;
}
.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; }
.rpt-skin .rpt-phero-img {
    flex-shrink: 0;
    width: 116px; height: 150px;
    border-radius: 14px; overflow: hidden;
    background: #fff;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 10px 28px rgba(7, 12, 26, 0.34), 0 0 0 5px rgba(255, 255, 255, 0.16);
}
.rpt-skin .rpt-phero-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rpt-skin .rpt-phero-img .material-icons { color: #9DB0C9; font-size: 40px; }
.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 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; }
.rpt-skin .rpt-upf-verdict .rpt-card-title { margin-top: 2px; }

/* §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; }

/* ── Shared card shell — every section reads as a white rounded card ───────── */
.rpt-skin .rpt-card {
    background: var(--rs-surface);
    border: 1px solid var(--rs-border);
    border-radius: var(--rs-r);
    box-shadow: var(--rs-shadow);
    padding: 22px 24px;
}
.rpt-skin .rpt-card-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 4px; }
.rpt-skin .rpt-card-title {
    margin: 4px 0 0; font-family: var(--rs-serif); font-size: 17px; font-weight: 700;
    letter-spacing: -.01em; color: var(--rs-text);
}
.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); }

/* "View report ↗" drill link */
.rpt-skin .rpt-link {
    display: inline-flex; align-items: center; gap: 2px;
    padding: 4px; background: none; border: none; cursor: pointer;
    font-family: var(--rs-sans); font-size: .8rem; font-weight: 600; color: var(--rs-navy); white-space: nowrap;
}
.rpt-skin .rpt-link .material-icons { font-size: 16px; transition: transform .15s ease; }
.rpt-skin .rpt-link:hover .material-icons { transform: translate(2px, -2px); }

/* ── 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 ───────────────────────────────────────────
   Matches the prototype's dash-scatter: rating-coloured dots with a darker
   same-hue rim + hover glow, a red-9% priority-fix zone, white quadrant chips,
   DM Sans ticks + serif axis titles, dots scale in on scroll-into-view. */
.rpt-skin .pi-scatter-wrap { margin-top: 16px; }
.rpt-skin .pi-scatter { width: 100%; height: auto; display: block; overflow: visible; }
.rpt-skin .pi-scatter-grid { stroke: var(--rs-border); stroke-width: 1; }
.rpt-skin .pi-scatter-divider { stroke: var(--rs-border-strong); stroke-width: 1.25; stroke-dasharray: 4 4; }
.rpt-skin .pi-scatter-zone { fill: rgba(220, 48, 56, .09); }
.rpt-skin .pi-scatter-tick { fill: var(--rs-subtle); font-size: 12px; font-weight: 600; }
.rpt-skin .pi-scatter-axis { fill: var(--rs-muted); font-size: 13px; font-weight: 600; }
.rpt-skin .pi-scatter-chip-bg { fill: rgba(255, 255, 255, .86); stroke: var(--rs-border); stroke-width: 1; }
.rpt-skin .pi-scatter-chip.is-fix .pi-scatter-chip-bg { fill: color-mix(in srgb, #DC3038 10%, #fff); stroke: color-mix(in srgb, #DC3038 35%, var(--rs-border)); }
.rpt-skin .pi-scatter-chip-t { fill: var(--rs-subtle); font-size: 11px; font-weight: 700; letter-spacing: .02em; }
.rpt-skin .pi-scatter-chip-t.is-fix { fill: #DC3038; }
/* Dot: darker same-hue rim. Resting transform = scale(1); hover enlarges +
   glows; the reveal transitions from scale(0) (transition-based, so the hover
   scale isn't blocked by an animation fill state). */
.rpt-skin .pi-scatter-dot {
    stroke: color-mix(in srgb, var(--dot-color, #fff) 68%, #000);
    stroke-width: 1.5; cursor: pointer;
    transform-box: fill-box; transform-origin: center;
    transition: transform .35s cubic-bezier(.34, 1.56, .64, 1), filter .15s ease;
}
.rpt-skin .pi-scatter-dot:hover {
    transform: scale(1.32);
    filter: brightness(1.1) drop-shadow(0 0 7px currentColor) drop-shadow(0 0 3px currentColor);
}
/* Scroll-triggered scale-in (interactive view only; print renders full). */
.rpt-skin.rpt-anim .pi-scatter:not(.is-anim-ready) .pi-scatter-dot { transform: scale(0); transition: none; }
@media (prefers-reduced-motion: reduce) { .rpt-skin .pi-scatter-dot { transition: none; transform: none; } }

/* Cursor-following hover tooltip — shared by scatter dots + matrix cells (on
   <body>, escapes card overflow). Content classes (rt-*) match the prototype's
   dash-scatter tip + pmx-tip. */
.rpt-hover-tip {
    position: fixed; z-index: 10000; pointer-events: none;
    min-width: 180px; max-width: 290px; padding: 12px 14px; border-radius: 12px;
    background: #fff; border: 1px solid rgba(17, 24, 39, .08);
    box-shadow: 0 1px 2px rgba(17, 24, 39, .04), 0 10px 26px rgba(17, 24, 39, .14);
    font-family: 'DM Sans', system-ui, sans-serif; color: #111827;
    opacity: 0; transform: translateY(4px); transition: opacity .12s ease, transform .12s ease;
}
.rpt-hover-tip.is-visible { opacity: 1; transform: translateY(0); }
/* eyebrow (pillar/category) */
.rpt-hover-tip .rt-eyebrow { font-size: 12px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: #474E58; margin-bottom: 3px; }
/* scatter: coloured dot + metric name + big score */
.rpt-hover-tip .rt-row { display: flex; align-items: center; gap: 7px; }
.rpt-hover-tip .rt-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.rpt-hover-tip .rt-name { font-size: 14px; font-weight: 800; color: #111827; letter-spacing: -.01em; }
.rpt-hover-tip .rt-stat { display: flex; align-items: baseline; gap: 7px; margin-top: 8px; }
.rpt-hover-tip .rt-stat strong { font-size: 1.7rem; font-weight: 800; line-height: 1; color: #111827; }
.rpt-hover-tip .rt-stat-sub { font-size: 12px; font-weight: 600; color: #474E58; }
/* matrix pmx-tip: head + bar + status + foot */
.rpt-hover-tip .rt-head { display: flex; align-items: center; gap: 10px; }
.rpt-hover-tip .rt-sku { font-size: 14px; font-weight: 800; color: #111827; letter-spacing: -.01em; }
.rpt-hover-tip .rt-sku-sub { font-size: 12px; color: #474E58; margin-top: 1px; }
.rpt-hover-tip .rt-sku-sub strong { color: #111827; font-weight: 800; }
.rpt-hover-tip .rt-divider { height: 1px; background: rgba(17, 24, 39, .08); margin: 11px 0; }
.rpt-hover-tip .rt-metric { font-size: 13px; font-weight: 800; color: #111827; }
.rpt-hover-tip .rt-metric-desc { font-size: 12px; line-height: 1.5; color: #474E58; margin-top: 3px; }
.rpt-hover-tip .rt-bar { margin: 13px 0 0; }
.rpt-hover-tip .rt-bar-track { position: relative; height: 10px; border-radius: 999px; overflow: hidden; background: rgba(71, 78, 88, .16); }
.rpt-hover-tip .rt-bar-fill { position: absolute; left: 0; top: 0; bottom: 0; min-width: 6px; border-radius: 999px; }
.rpt-hover-tip .rt-status { font-size: 12px; line-height: 1.5; color: #474E58; margin-top: 9px; }
.rpt-hover-tip .rt-foot { font-size: 12px; line-height: 1.45; color: #444B55; margin-top: 11px; padding-top: 9px; border-top: 1px dashed rgba(17, 24, 39, .08); }

/* ── §07 "Performance Matrix" (pmx) ─────────────────────────────────────────
   Products (rows) × 15 metric cells. Avatar + name + score, then rounded
   rating-coloured cells that scale in on reveal and enlarge/glow on hover. */
.rpt-skin .pmx-scroll { overflow-x: auto; margin-top: 16px; }
.rpt-skin .pmx {
    display: grid;
    grid-template-columns: 40px 1px minmax(132px, 200px) repeat(15, minmax(44px, 1fr));
    gap: 4px; min-width: 920px; align-items: stretch;
}
.rpt-skin .pmx-corner { grid-column: span 3; background: transparent; }
.rpt-skin .pmx-xlabel { display: flex; align-items: flex-start; justify-content: center; padding-top: 6px; text-align: center; }
.rpt-skin .pmx-xlabel span { font-size: 11px; font-weight: 700; line-height: 1.18; color: var(--rs-text); }
.rpt-skin .pmx-rowavatar { display: flex; align-items: center; justify-content: center; padding: 0 2px; }
.rpt-skin .pmx-avatar {
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; border-radius: 7px; overflow: hidden;
    border: 1px solid var(--rs-border); background: var(--rs-navy-soft);
}
.rpt-skin .pmx-avatar img { width: 100%; height: 100%; object-fit: cover; }
.rpt-skin .pmx-avatar-ph { font-family: var(--rs-serif); font-size: 13px; font-weight: 800; color: var(--rs-navy); }
.rpt-skin .pmx-rowdivider { align-self: stretch; width: 1px; margin: 4px 0; background: var(--rs-border); }
.rpt-skin .pmx-rowmeta { display: flex; align-items: center; gap: 10px; padding: 6px 10px 6px 8px; min-width: 0; }
/* Wrap long product names so the full name shows (rows grow taller as needed). */
.rpt-skin .pmx-rowname { font-size: 13px; font-weight: 700; color: var(--rs-text); white-space: normal; line-height: 1.3; min-width: 0; }
.rpt-skin .pmx-rowscore { margin-left: auto; align-self: flex-start; margin-top: 1px; font-size: 11px; font-weight: 800; color: var(--rs-subtle); font-variant-numeric: tabular-nums; flex-shrink: 0; }
/* Cells keep a fixed height + centre so a wrapped (taller) name row doesn't
   stretch them into tall blocks. */
.rpt-skin .pmx-cell {
    border-radius: 5px; height: 30px; align-self: center;
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 11px; font-weight: 800; cursor: default;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12);
    transition: transform .3s cubic-bezier(.22, 1, .36, 1), opacity .3s ease, box-shadow .12s ease, filter .12s ease;
    transform-origin: center;
}
.rpt-skin .pmx-cell span { opacity: 0; transition: opacity .1s; }
.rpt-skin .pmx-cell:hover { transform: scale(1.14); filter: brightness(1.06); box-shadow: 0 12px 32px rgba(17, 24, 39, .18); z-index: 3; }
.rpt-skin .pmx-cell:hover span { opacity: 1; }
.rpt-skin .pmx-cell--empty { background: var(--rs-surface-2) !important; box-shadow: inset 0 0 0 1px var(--rs-border); }
.rpt-skin .pmx-cell--empty:hover { transform: none; filter: none; box-shadow: inset 0 0 0 1px var(--rs-border); }

/* Scroll-triggered scale-in (interactive view; print renders full). */
.rpt-skin.rpt-anim .pmx:not(.is-anim-ready) .pmx-cell { transform: scale(.35); opacity: 0; transition: none; }
@media (prefers-reduced-motion: reduce) { .rpt-skin .pmx-cell { transition: none !important; transform: none !important; opacity: 1 !important; } }
/* 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-showmore {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 6px 14px; border-radius: 9999px;
    background: var(--rs-surface); border: 1px solid var(--rs-border-strong);
    color: var(--rs-navy); font-family: var(--rs-sans); font-size: 13px; font-weight: 700;
    cursor: pointer; transition: background .15s ease, border-color .15s ease;
}
.rpt-skin .pmx-showmore:hover { background: var(--rs-navy-soft); border-color: var(--rs-navy); }
.rpt-skin .pmx-showmore .material-icons { font-size: 18px; }
.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 .rpt-card-head { 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; }
    .rpt-skin .rpt-card-head { 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: 'Noto Serif', Georgia, 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 — strip the card chrome so it reads as
   part of the §01 rpt-card, not a nested box. */
.rpt-skin .upf-card.gras-donut-pane {
    background: transparent; border: none; box-shadow: none;
    padding: 0; 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) {
        .rpt-skin .rpt-hero--product { flex-wrap: wrap; align-items: flex-start; gap: 14px; min-height: 0; padding: 20px 22px; }
        .rpt-skin .rpt-hero--product .rpt-phero-img { width: 84px; height: 110px; }
        /* 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 .rpt-card-head { 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 (pmx) ──────────────────────────────────────────────
       It scrolls inside .pmx-scroll, but with the desktop column widths the name
       column eats the whole viewport so none of the colour cells show before you
       scroll. Shrink the avatar + name columns and the cells so several metrics
       are visible up front (the rest still scroll), and stack the legend so it
       isn't crushed into three columns. */
    @container rptw (max-width: 620px) {
        .rpt-skin .pmx {
            grid-template-columns: 30px 1px minmax(86px, 108px) repeat(15, minmax(26px, 1fr));
            min-width: 560px;
            gap: 3px;
        }
        .rpt-skin .pmx-avatar { width: 28px; height: 28px; }
        .rpt-skin .pmx-rowname { font-size: 11.5px; }
        .rpt-skin .pmx-rowmeta { gap: 6px; padding: 6px 6px 6px 4px; }
        .rpt-skin .pmx-cell { height: 26px; }
        .rpt-skin .pmx-xlabel span { font-size: 10px; }

        .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; }

        /* The matrix lives in a horizontal scroll container, so its scroll-reveal
           animation (is-anim-ready) can fail to fire on mobile — leaving every
           cell at opacity:0 (invisible). Render the cells at rest on mobile. */
        .rpt-skin.rpt-anim .pmx:not(.is-anim-ready) .pmx-cell { opacity: 1; transform: none; }
    }

    /* ── Product UPF §02 "Ingredient Processing Details" ───────────────────────
       The 4-column table (Ingredient · Processing Level · Score · Basis) doesn't
       fit a phone, and horizontal scroll buries the Basis text and leaves tall
       empty rows. Below the card's natural break, reflow each row into a tidy
       card: ingredient name as the title, the level pill + score on one line,
       and the basis text beneath. Scoped to `.upf-itable` so the multi-column
       portfolio product tables (also `.upf-table`) are untouched. */
    /* Selectors use `.upf-table.upf-itable` (and `.upf-table-wrap.upf-itable-wrap`)
       so they out-specify the `.upf-report .upf-table …` rules — this card carries
       both `rpt-skin` and `upf-report` classes, and reports-upf.css loads last. */
    @container rptw (max-width: 560px) {
        .rpt-skin .upf-table-wrap.upf-itable-wrap { overflow-x: visible; }
        .rpt-skin .upf-table.upf-itable { min-width: 0; display: block; }
        .rpt-skin .upf-table.upf-itable thead { display: none; }
        .rpt-skin .upf-table.upf-itable tbody { display: block; }

        .rpt-skin .upf-table.upf-itable tbody tr {
            display: block;
            background: var(--rs-surface);
            border: 1px solid var(--rs-border);
            border-radius: 12px;
            box-shadow: var(--rs-shadow);
            padding: 14px 16px;
            margin-bottom: 12px;
        }
        .rpt-skin .upf-table.upf-itable tbody tr:last-child { margin-bottom: 0; }

        .rpt-skin .upf-table.upf-itable tbody td {
            display: block;
            padding: 0;
            border: none;
            font-size: inherit;
        }
        /* Column-count-agnostic so it fits both the 4-col UPF table (Ingredient ·
           Level · Score · Basis) and the 3-col GRAS table (Ingredient · Status ·
           Explanation): first cell = title, middle cells = inline pills/score,
           last cell = explanation. */

        /* Ingredient name → card title (first cell). */
        .rpt-skin .upf-table.upf-itable tbody td:first-child { margin-bottom: 10px; }
        .rpt-skin .upf-table.upf-itable tbody td:first-child .upf-name { font-size: 15px; font-weight: 700; }

        /* Middle cells (status/level pill, plus the UPF score) share one line. */
        .rpt-skin .upf-table.upf-itable tbody td:not(:first-child):not(:last-child) {
            display: inline-flex;
            align-items: baseline;
            vertical-align: middle;
        }
        /* The UPF score cell (only this table emits `.upf-num`) sits to the right
           of the level pill with a small caption. */
        .rpt-skin .upf-table.upf-itable tbody td.upf-num { text-align: left; margin-left: 14px; }
        .rpt-skin .upf-table.upf-itable tbody td.upf-num::before {
            content: "Score";
            margin-right: 6px;
            font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
            color: var(--rs-subtle);
        }

        /* Explanation / basis → last cell, full width below, no desktop clamp. */
        .rpt-skin .upf-table.upf-itable tbody td:last-child { display: block; margin-top: 10px; }
        .rpt-skin .upf-table.upf-itable tbody td:last-child .upf-basis { max-width: none; font-size: 12.5px; }

        /* Empty-state row (single colspan cell) → plain card. */
        .rpt-skin .upf-table.upf-itable tbody td.upf-itable-empty { display: block; margin: 0; }
    }
}