/* ────────────────────────────────────────────────────────────────────────────
   Portfolio UPF Report — redesign skin
   Matches the "analytics-types" prototype (LIGHT mode) bit-for-bit:
   off-white page, white rounded cards, Noto Serif headings + DM Sans body,
   navy/green/amber/orange/red token palette.

   EVERYTHING here is scoped under `.upf-report` so the GRAS, Insights and UPC
   reports — which share reports.css's classes — are completely unaffected.
   Source of truth: .temp/upf-redesign/DESIGN-SPEC.md (resolved from the live
   prototype's computed styles + dashboard.css).
   ──────────────────────────────────────────────────────────────────────────── */

/* The redesigned UPF report is roomier than the other reports (its product
   table carries 7 columns); widen the wrapper so every column fits without a
   horizontal scroll, matching the spacious prototype. */
.report-wrapper.upf-report {
    min-width: 880px;
    max-width: 1220px;
}

.upf-report {
    /* Prototype light-theme tokens (resolved values) */
    --u-page:          #F9F8F3;
    --u-surface:       #FFFFFF;
    --u-surface-2:     #F4F2EA;
    /* Faint linen used by the stamp-icon disc color-mix. Was referenced but never
       defined, so the mix collapsed and the icons rendered dark — define it. */
    --u-surface-3:     #F4F2EA;
    --u-border:        rgba(17, 24, 39, 0.08);
    --u-border-strong: rgba(17, 24, 39, 0.14);
    --u-text:          #111827;
    --u-muted:         #444B55;
    --u-subtle:        #474E58;
    --u-navy:          #25507C;   /* --primary / --ter-cyan */
    --u-navy-soft:     rgba(37, 80, 124, 0.08);
    --u-navy-light:    #92A7BE;   /* color-mix(navy 50%, #fff) — "UPF" health slice */
    --u-green:         #32A966;
    --u-green-text:    #245E3B;
    --u-green-light:   #7DC470;
    --u-amber:         #FFC434;
    --u-amber-text:    #75360A;
    --u-amber-level:   #A07A10;
    --u-orange:        #D27326;
    --u-orange-level:  #9E4A10;
    --u-red:           #DC3038;
    --u-red-text:      #831F23;
    --u-r-md:          16px;
    --u-shadow-1:      0 1px 2px rgba(17, 24, 39, .04), 0 1px 3px rgba(17, 24, 39, .04);
    --u-serif:         'Noto Serif', 'Noto Serif Fallback', Georgia, 'Times New Roman', serif;
    --u-sans:          'DM Sans', system-ui, -apple-system, sans-serif;
    /* Brand-comparison accents (A vs B) */
    --u-brand-a:       #25507C;   /* navy */
    --u-brand-b:       #0D9488;   /* teal */
    --u-brand-b-text:  #0B6E66;
}

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

/* Padded container that holds the stacked cards. */
.upf-report .upf-page {
    padding: 22px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

/* ── Topbar (white, was navy) ──────────────────────────────────────────────── */
.upf-report .rpt-hdr {
    background: var(--u-surface);
    color: var(--u-text);
    padding: 16px 28px 14px;
    border-radius: 14px 14px 0 0;
    border-bottom: 1px solid var(--u-border);
}
.upf-report .rpt-hdr-logo { filter: none; }                 /* logo shows in its natural dark ink */
.upf-report .rpt-hdr-intelligence { color: var(--u-subtle); }
.upf-report .rpt-hdr-divider { background: var(--u-border-strong); }
.upf-report .rpt-hdr-doctype { color: var(--u-text); }
.upf-report .rpt-hdr-doctype span { color: var(--u-subtle); }
.upf-report .rpt-hdr-meta-item .k { color: var(--u-subtle); }
.upf-report .rpt-hdr-meta-item .v { color: var(--u-text); }
.upf-report .rpt-hdr-stripe { display: none; }             /* drop the blue rule under the bar */

/* ── Brand hero — full-bleed navy banner (matches the prototype's .rpt-hero) ──
   Sits flush beneath the white report topbar and breaks out of the .upf-page
   padding to span the full card width. A flat dark-navy field carries an
   oversized, embossed WISE-bug watermark; the report copy sits on the left and
   a circular brand badge (uploaded logo, else initials monogram) floats right. */
.upf-report .upf-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 196px;
    /* Full-bleed: cancel the .upf-page 22px padding (sides + top) so the banner
       spans edge-to-edge and butts directly against the white topbar above. */
    margin: -22px -22px 0;
    padding: 30px 32px 28px;
    background: color-mix(in srgb, var(--u-navy) 78%, #1A2339);
}
.upf-report .upf-hero-pattern {
    position: absolute;
    inset: 0;
    z-index: -2;
    overflow: hidden;
    pointer-events: none;
}
/* A single oversized WISE bug, tilted and pulled mostly into the banner with
   only a sliver bleeding off the right edge. */
.upf-report .upf-hero-bug {
    position: absolute;
    top: 50%;
    right: 0;
    width: min(1100px, 130%);
    height: auto;
    color: color-mix(in srgb, #0B1426 38%, var(--u-navy));
    filter: drop-shadow(0 1.5px 0 rgba(255, 255, 255, 0.14));
    transform: translate(calc(14% + 110px), calc(-50% + 30px)) rotate(-18deg);
}
.upf-report .upf-hero-body {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 7px;
    /* Leave room for the circular brand badge floated to the right. */
    padding-right: 150px;
}
/* Brand badge — a circular medallion floated right and vertically centered,
   sitting on top of the watermark. Holds an uploaded logo, else an initials
   monogram in our serif face. */
.upf-report .upf-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);
}
.upf-report .upf-hero-logo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.upf-report .upf-hero-logo-monogram {
    font-family: var(--u-serif);
    font-size: 2.3rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    color: var(--u-navy);
}
.upf-report .upf-hero-eyebrow {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #9DC1FF;
}
.upf-report .upf-hero-title {
    margin: 0;
    font-family: var(--u-serif);
    font-size: 2rem;
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: #fff;
}
.upf-report .upf-hero-tagline {
    margin: 1px 0 0;
    font-family: var(--u-serif);
    font-style: italic;
    font-size: 1.02rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.86);
}
.upf-report .upf-hero-meta {
    margin: 5px 0 0;
    font-size: 0.8125rem;
    line-height: 1.5;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.78);
}
.upf-report .upf-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) {
    .upf-report .upf-hero-logo { display: none; }
    .upf-report .upf-hero-body { padding-right: 0; }
}

/* ── Comparison hero — the brand-comparison report reuses the same banner, but
   swaps the single badge for two color-coded monogram medallions (A navy on
   top, B teal behind) and muted "vs" copy in the title. */
.upf-report .upf-hero-body--compare { padding-right: 196px; }
.upf-report .upf-hero-vs {
    font-weight: 400;
    font-style: italic;
    color: rgba(255, 255, 255, 0.62);
}
.upf-report .upf-hero-logos {
    position: absolute;
    top: 50%;
    right: 32px;
    transform: translateY(-50%);
    z-index: 1;
    display: flex;
    align-items: center;
}
/* Reset the single-badge absolute positioning so the two medallions flow inline. */
.upf-report .upf-hero-logos .upf-hero-logo {
    position: relative;
    top: auto;
    right: auto;
    transform: none;
    width: 86px;
    height: 86px;
}
.upf-report .upf-hero-logos .upf-hero-logo-monogram { font-size: 1.8rem; }
.upf-report .upf-hero-logo--a { z-index: 2; }
.upf-report .upf-hero-logo--b { z-index: 1; margin-left: -20px; }
.upf-report .upf-hero-logo--a .upf-hero-logo-monogram { color: var(--u-brand-a); }
.upf-report .upf-hero-logo--b .upf-hero-logo-monogram { color: var(--u-brand-b); }
@media (max-width: 620px) {
    .upf-report .upf-hero-logos { display: none; }
    .upf-report .upf-hero-body--compare { padding-right: 0; }
}

/* ── Shared card shell — every section reads as a white rounded card ──────── */
.upf-report .upf-card {
    background: var(--u-surface);
    border: 1px solid var(--u-border);
    border-radius: var(--u-r-md);
    box-shadow: var(--u-shadow-1);
    padding: 22px 24px;
}
.upf-report .upf-card-head {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 4px;
}
.upf-report .upf-card-title {
    margin: 4px 0 0;
    font-family: var(--u-serif);
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--u-text);
}
.upf-report .upf-card-sub {
    margin: 6px 0 0;
    font-size: 12.5px;
    color: var(--u-muted);
    line-height: 1.45;
}
.upf-report .upf-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 9px;
    border-radius: 9999px;
    background: var(--u-navy-soft);
    color: var(--u-navy);
    font-size: .66rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

/* ── §01 Portfolio Overview — bare claim row (matches .att-overview-claim) ────
   Three big black serif numbers with a sentence-case label and a circular,
   embossed Material-Symbol "stamp" disc per stat, separated by hairline
   dividers. Sits directly on the off-white page — no card chrome. */
.upf-report .upf-claim {
    display: grid;
    grid-template-columns: 1fr 1px 1fr 1px 1fr;
    gap: 28px;
    align-items: stretch;
    padding: 16px 16px 12px;
}
.upf-report .upf-claim-col { display: flex; flex-direction: column; }
.upf-report .upf-claim-divider { background: var(--u-border); align-self: stretch; }
.upf-report .upf-bignum-row {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    margin: 10px 0 0;
}
.upf-report .upf-bignum {
    font-family: var(--u-serif);
    font-size: 4.5rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.03em;
    color: #000;
    display: inline-block;
    min-width: 2ch;
    font-variant-numeric: tabular-nums;
}
.upf-report .upf-bignum-cap { font-size: .8125rem; color: var(--u-muted); line-height: 1.35; }
.upf-report .upf-bignum-cap strong { color: var(--u-text); font-size: 1.0625rem; font-weight: 700; }
/* Circular outlined disc holding the stat's Material Symbol — centered to the
   big number (top:2.25rem), floated to the column's right edge. */
.upf-report .upf-stamp-icon {
    position: absolute;
    top: 2.25rem;
    right: 4px;
    transform: translateY(-50%);
    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(--u-navy) 14%, var(--u-surface-3));
    color: color-mix(in srgb, var(--u-navy) 26%, var(--u-surface-3));
    background: transparent;
    box-shadow:
        inset 0 1px 1px rgba(17, 24, 39, 0.07),
        inset 0 -1px 0 rgba(255, 255, 255, 0.55),
        0 1px 0 rgba(255, 255, 255, 0.6);
    pointer-events: none;
    user-select: none;
}
.upf-report .upf-stamp-icon .material-symbols-outlined {
    font-size: 26px;
    font-variation-settings: 'FILL' 0, 'wght' 400, 'opsz' 24;
    line-height: 1;
}

/* ── §02 / §02b — donut cards, optionally paired side-by-side ───────────── */
/* Two donut cards sit beside each other when there's room, and stack on
   narrower screens. They stay independent cards; this is just the layout. */
.upf-report .upf-donut-pair {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(440px, 1fr));
    gap: 18px;
    align-items: stretch;
}
.upf-report .upf-donut-pair > .upf-card { min-width: 0; }

.upf-report .upf-donut-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 28px;
    margin: 20px 0 4px;
}
.upf-report .upf-donut {
    position: relative;
    width: 252px;
    height: 252px;
    flex-shrink: 0;
}
.upf-report .upf-donut-svg { width: 100%; height: 100%; display: block; }
/* Segment hover — copied pixel-for-pixel from the prototype (.dash-donut-arc):
   the hovered slice brightens + glows, the others dim to 0.5. Pure CSS, no JS,
   no chart library. Native <title> elements carry the per-segment tooltip. */
.upf-report .upf-donut-arc {
    cursor: default;
    transition: opacity 0.14s ease, filter 0.14s ease;
}
.upf-report .upf-donut-svg:hover .upf-donut-arc:not(:hover) { opacity: 0.5; }
.upf-report .upf-donut-arc:hover {
    filter: brightness(1.07) saturate(1.05) drop-shadow(0 0 5px rgba(0, 0, 0, 0.18));
}

/* Floating donut-segment tooltip (cursor-following), built by reports-upf-anim.js.
   Lives on <body> (escapes the card's overflow), so it's styled by id — matches
   the prototype's #dash-donut-tip pixel-for-pixel. */
#upf-donut-tip {
    position: fixed;
    z-index: 10000;
    min-width: 132px;
    max-width: 220px;
    padding: 9px 12px;
    border-radius: 10px;
    background: #FFFFFF;
    color: #111827;
    border: 1px solid rgba(17, 24, 39, 0.08);
    box-shadow: 0 1px 2px rgba(17, 24, 39, .04), 0 8px 24px rgba(17, 24, 39, .06);
    font-family: 'DM Sans', system-ui, -apple-system, sans-serif;
    pointer-events: none;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.12s ease, transform 0.12s ease;
}
#upf-donut-tip.is-visible { opacity: 1; transform: translateY(0); }
#upf-donut-tip .upf-tip-eyebrow {
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: #474E58;
    margin-bottom: 5px;
}
#upf-donut-tip .upf-tip-row { display: flex; align-items: center; gap: 7px; }
#upf-donut-tip .upf-tip-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
#upf-donut-tip .upf-tip-name { font-size: 0.8125rem; font-weight: 600; color: #111827; }
#upf-donut-tip .upf-tip-stat { display: flex; align-items: baseline; gap: 7px; margin-top: 4px; }
#upf-donut-tip .upf-tip-stat strong { font-size: 1.05rem; font-weight: 800; color: #111827; }
#upf-donut-tip .upf-tip-pct { font-size: 0.72rem; font-weight: 600; color: #474E58; }

/* ── Entrance / replay animations (matches the prototype) ────────────────────
   Charts sit collapsed while their card is "pending" (no .is-anim-ready) and
   animate in when scrolled into view; clicking a donut or a bar replays it.
   The pending state is only active when JS has tagged the report `.upf-anim`
   (interactive view) — the print/PDF render leaves charts at their final state.
   Driven by reports-upf-anim.js (vanilla, no dependency). */
@property --upf-sweep {
    syntax: "<number>";
    inherits: true;
    initial-value: 1;
}
/* Donut: a clock-wipe reveal from 12 o'clock via an animated conic mask. The
   HTML center stat is a sibling overlay, so it stays put while the rings sweep. */
.upf-report.upf-anim .upf-donut {
    cursor: pointer;
    transition: transform 0.16s ease;
}
.upf-report.upf-anim .upf-donut:active { transform: scale(0.985); }
/* The conic mask + sweep are scoped to the interactive view (`.upf-anim`) only.
   The print/PDF render leaves the donut SVG unmasked — headless Chromium's
   printToPDF fails on a conic-gradient mask. */
.upf-report.upf-anim .upf-donut-svg {
    --upf-sweep: 1;
    -webkit-mask: conic-gradient(from -90deg, #000 calc(var(--upf-sweep) * 360deg), transparent 0);
            mask: conic-gradient(from -90deg, #000 calc(var(--upf-sweep) * 360deg), transparent 0);
    transition: --upf-sweep 1.1s cubic-bezier(0.16, 1, 0.3, 1);
}
.upf-report.upf-anim .upf-card:not(.is-anim-ready) .upf-donut-svg {
    --upf-sweep: 0;
    transition: none;
}
/* Ingredient bars: fill grows from 0 width. */
.upf-report .upf-ing-track { cursor: pointer; }
.upf-report .upf-ing-fill { transition: width 1.15s cubic-bezier(0.16, 1, 0.3, 1); }
.upf-report.upf-anim .upf-ing-row:not(.is-anim-ready) .upf-ing-fill {
    width: 0 !important;
    min-width: 0 !important;
    padding-right: 0 !important;   /* border-box: zero the padding floor so it fully collapses */
    transition: none;
}
@media (prefers-reduced-motion: reduce) {
    .upf-report .upf-donut-svg,
    .upf-report .upf-ing-fill { transition: none; }
}
.upf-report .upf-donut-center {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    text-align: center;
    pointer-events: none;
}
.upf-report .upf-donut-center::before {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    width: 130px;
    height: 130px;
    border-radius: 50%;
    background: var(--u-surface);
    border: 1px solid var(--u-border);
    box-shadow: 0 10px 22px rgba(8, 15, 26, .12), 0 3px 8px rgba(8, 15, 26, .08);
}
.upf-report .upf-donut-center > * { position: relative; z-index: 1; max-width: 120px; }
.upf-report .upf-donut-num {
    font-family: var(--u-serif);
    font-size: 2.3rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.03em;
    color: var(--u-navy);
}
.upf-report .upf-donut-num .u-pct { font-size: .87rem; vertical-align: super; }
.upf-report .upf-donut-num--green { color: var(--u-green); }
/* Single (levels-only) ring sits at the outer radius, so the center disc grows
   out flush to the ring's inner edge — no surface gap. */
.upf-report .upf-donut--single .upf-donut-center::before { width: 184px; height: 184px; }
.upf-report .upf-donut-label { font-size: .8125rem; font-weight: 700; color: var(--u-text); margin-top: 3px; }
.upf-report .upf-donut-meta  { font-size: .68rem; line-height: 1.25; color: var(--u-muted); }

.upf-report .upf-legends {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 200px;
    padding-right: 12px;
    box-sizing: border-box;
}
.upf-report .upf-legend-group { display: flex; flex-direction: column; gap: 7px; }
.upf-report .upf-legend-title {
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--u-subtle);
}
.upf-report .upf-legend-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    font-size: .74rem;
    color: var(--u-muted);
}
.upf-report .upf-legend-l { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.upf-report .upf-legend-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.upf-report .upf-legend-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.upf-report .upf-legend-val {
    flex: none;
    width: 26px;
    text-align: center;
    padding-left: 6px;
    font-weight: 700;
    color: var(--u-text);
    font-variant-numeric: tabular-nums;
}

/* ── §03 Highest-processing ingredients — ranked fat bars ────────────────── */
.upf-report .upf-ing-list {
    display: flex;
    flex-direction: column;
    gap: 22px;
    margin-top: 18px;
}
.upf-report .upf-ing-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 9px;
}
.upf-report .upf-ing-name {
    display: inline-flex;
    align-items: baseline;
    gap: 9px;
    font-size: .95rem;
    font-weight: 700;
    color: var(--u-text);
    min-width: 0;
}
.upf-report .upf-ing-rank {
    font-size: .78rem;
    font-weight: 600;
    color: var(--u-subtle);
    font-variant-numeric: tabular-nums;
}
.upf-report .upf-ing-track {
    position: relative;
    height: 22px;
    border-radius: 9999px;
    overflow: hidden;
}
.upf-report .upf-ing-fill {
    position: absolute;
    left: 0; top: 0; bottom: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 10px;
    min-width: 2.9rem;
    border-radius: 9999px;
}
.upf-report .upf-ing-pct {
    font-size: .8125rem;
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--u-text);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.upf-report .upf-ing-level {
    flex-shrink: 0;
    padding: 3px 9px;
    border-radius: 9999px;
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .02em;
    white-space: nowrap;
}
/* PL4 = orange, PL3 = amber — track is a 15% tint of the bar colour. */
.upf-report .upf-ing--pl4 .upf-ing-track { background: rgba(210, 115, 38, .15); }
.upf-report .upf-ing--pl4 .upf-ing-fill  { background: var(--u-orange); }
.upf-report .upf-ing--pl4 .upf-ing-level { background: rgba(210, 115, 38, .18); color: var(--u-orange-level); }
.upf-report .upf-ing--pl3 .upf-ing-track { background: rgba(255, 196, 52, .15); }
.upf-report .upf-ing--pl3 .upf-ing-fill  { background: var(--u-amber); }
.upf-report .upf-ing--pl3 .upf-ing-level { background: rgba(255, 196, 52, .20); color: var(--u-amber-level); }
.upf-report .upf-ing-empty {
    margin: 6px 0 2px;
    text-align: center;
    font-size: .8rem;
    font-style: italic;
    color: var(--u-subtle);
}

/* ── §04 Product table ────────────────────────────────────────────────────── */
.upf-report .upf-card--table { padding: 22px 24px; }
.upf-report .upf-table-wrap { overflow-x: auto; }
.upf-report .upf-table {
    width: 100%;
    min-width: 640px;
    border-collapse: collapse;
    font-variant-numeric: tabular-nums;
}
.upf-report .upf-table thead th {
    padding: 0 18px 11px 0;
    border-bottom: 1px solid var(--u-border-strong);
    text-align: left;
    vertical-align: bottom;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--u-muted);
    white-space: nowrap;
}
.upf-report .upf-th-sort { display: inline-flex; align-items: center; gap: 5px; }
.upf-report .upf-th-arrow {
    display: inline-flex;
    width: 12px; height: 12px;
    opacity: .28;
}
.upf-report .upf-th-arrow svg { width: 12px; height: 12px; display: block; }
.upf-report .upf-th-arrow.is-active { opacity: 1; color: var(--u-navy); }
.upf-report .upf-th-avatar { width: 1%; padding-left: 6px; padding-right: 14px; }
.upf-report .upf-th-action { width: 1%; white-space: nowrap; text-align: right; }

.upf-report .upf-table tbody td {
    padding: 14px 18px 14px 0;
    border-bottom: 1px solid var(--u-border);
    font-size: 13px;
    color: var(--u-text);
    vertical-align: middle;
}
.upf-report .upf-table tbody tr:last-child td { border-bottom: none; }
.upf-report .upf-table tbody tr.is-clickable { cursor: pointer; transition: background .12s ease; }
.upf-report .upf-table tbody tr.is-clickable:hover { background: rgba(37, 80, 124, .05); }

.upf-report .upf-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px; height: 36px;
    /* Rounded-square product frame (matches the Product Portfolio thumbnails),
       not a circle. */
    border-radius: 7px;
    overflow: hidden;
    border: 1px solid var(--u-border);
    background: var(--u-navy-soft);
    flex: none;
}
.upf-report .upf-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.upf-report .upf-avatar .material-icons { font-size: 18px; color: var(--u-subtle); }

/* Product names can be long ("…Traditional Guacamole With Tortilla Chips");
   let them wrap within a bounded column so the trailing columns always fit. */
.upf-report .upf-name {
    display: inline-block;
    max-width: 280px;
    font-weight: 700;
    color: var(--u-text);
    white-space: normal;
    text-transform: capitalize;
}
.upf-report .upf-upc {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12.5px;
    color: var(--u-subtle);
    letter-spacing: .02em;
    white-space: nowrap;
}
.upf-report .upf-locked-name { color: var(--u-subtle); }

/* Status pills (shared shell for classification / level / shield) */
.upf-report .upf-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;
}
.upf-report .upf-pill--good  { background: rgba(50, 169, 102, .15); color: var(--u-green-text); }
.upf-report .upf-pill--leaf  { background: rgba(125, 196, 112, .20); color: var(--u-green-text); }
.upf-report .upf-pill--navy  { background: var(--u-navy-soft);      color: var(--u-navy); }
.upf-report .upf-pill--warn  { background: rgba(255, 196, 52, .24); color: var(--u-amber-text); }
.upf-report .upf-pill--orange{ background: rgba(210, 115, 38, .18); color: var(--u-orange-level); }
.upf-report .upf-pill--alert { background: rgba(220, 48, 56, .16);  color: var(--u-red-text); }

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

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

/* ── Brand comparison (A vs B) ───────────────────────────────────────────── */
/* §01 paired stats — bare claim row matching the single report's overview row:
   no tile boxes, big serif values color-coded A (navy) / B (teal), a metric
   stamp disc per column and hairline dividers between the three metrics. */
.upf-report .upf-cmp-cell { position: relative; padding-right: 52px; }
.upf-report .upf-cmp-stat-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--u-subtle);
    margin-bottom: 10px;
}
.upf-report .upf-cmp-stat-vals { display: flex; align-items: flex-end; gap: 12px; }
.upf-report .upf-cmp-stat-side { display: flex; flex-direction: column; align-items: flex-start; }
.upf-report .upf-cmp-num {
    font-family: var(--u-serif);
    font-size: 2.7rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
}
.upf-report .upf-cmp-num.is-a { color: var(--u-brand-a); }
.upf-report .upf-cmp-num.is-b { color: var(--u-brand-b); }
.upf-report .upf-cmp-stat-brand { font-size: 11px; font-weight: 600; margin-top: 5px; }
.upf-report .upf-cmp-stat-side.is-a .upf-cmp-stat-brand { color: var(--u-brand-a); }
.upf-report .upf-cmp-stat-side.is-b .upf-cmp-stat-brand { color: var(--u-brand-b-text); }
.upf-report .upf-cmp-vs { font-size: .8rem; color: var(--u-subtle); font-weight: 600; align-self: center; padding-bottom: 9px; }
.upf-report .upf-cmp-chip { display: inline-flex; align-self: flex-start; margin-top: 12px; border-radius: 9999px; padding: 4px 11px; font-size: 10.5px; font-weight: 700; }
.upf-report .upf-cmp-chip.is-good { background: rgba(50, 169, 102, .15); color: var(--u-green-text); }
.upf-report .upf-cmp-chip.is-neutral { background: var(--u-surface-2); color: var(--u-subtle); }
.upf-report .upf-cmp-cell .upf-stamp-icon { top: 3rem; }

/* §02 / §02b — two brand donuts side by side with a center delta callout */
.upf-report .upf-cmp-donuts {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 28px;
    margin: 16px 0 4px;
}
.upf-report .upf-cmp-side { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.upf-report .upf-cmp-brand { font-size: 13px; font-weight: 700; }
.upf-report .upf-cmp-brand.is-a { color: var(--u-brand-a); }
.upf-report .upf-cmp-brand.is-b { color: var(--u-brand-b); }
.upf-report .upf-cmp-delta { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 96px; }
.upf-report .upf-cmp-delta-num { font-family: var(--u-serif); font-size: 34px; font-weight: 800; line-height: 1; color: var(--u-navy); }
.upf-report .upf-cmp-delta-label { font-size: 11px; color: var(--u-muted); }
.upf-report .upf-cmp-delta-chip { margin-top: 2px; background: rgba(50, 169, 102, .15); color: var(--u-green-text); border-radius: 9999px; padding: 4px 12px; font-size: 10px; font-weight: 700; }

/* shared horizontal legend under the comparison donuts */
.upf-report .upf-cmp-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 20px; margin-top: 10px; }
.upf-report .upf-cmp-leg-item { display: inline-flex; align-items: center; gap: 6px; font-size: .72rem; color: var(--u-muted); }
.upf-report .upf-cmp-leg-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }

/* §03 two-column ingredient comparison */
.upf-report .upf-cmp-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; margin-top: 16px; align-items: start; }
.upf-report .upf-cmp-col-cap { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 14px; }
.upf-report .upf-cmp-col-cap.is-a { color: var(--u-brand-a); }
.upf-report .upf-cmp-col-cap.is-b { color: var(--u-brand-b); }

/* §04 head-to-head */
.upf-report .upf-verdict-callout {
    display: flex; align-items: center; gap: 10px;
    background: var(--u-navy-soft); border-radius: 12px; padding: 14px 18px; margin-top: 14px;
}
.upf-report .upf-verdict-callout .material-icons { color: var(--u-navy); }
.upf-report .upf-verdict-callout .t { font-size: 13.5px; font-weight: 600; color: var(--u-text); }
.upf-report .upf-verdict-table { width: 100%; border-collapse: collapse; margin-top: 16px; font-variant-numeric: tabular-nums; }
.upf-report .upf-verdict-table thead th { padding: 0 16px 11px 0; border-bottom: 1px solid var(--u-border-strong); text-align: left; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--u-muted); }
.upf-report .upf-verdict-table th.num, .upf-report .upf-verdict-table td.num { text-align: right; }
.upf-report .upf-verdict-table tbody td { padding: 12px 16px 12px 0; border-bottom: 1px solid var(--u-border); font-size: 13px; color: var(--u-text); }
.upf-report .upf-verdict-table tbody tr:last-child td { border-bottom: none; }
.upf-report .upf-verdict-table td.metric { font-weight: 600; }
.upf-report .upf-verdict-table td.num { font-weight: 700; }
.upf-report .upf-verdict-table td.num.is-a { color: var(--u-brand-a); }
.upf-report .upf-verdict-table td.num.is-b { color: var(--u-brand-b); }
.upf-report .upf-verdict-table td.adv { text-align: right; }
.upf-report .upf-pill--teal { background: rgba(13, 148, 136, .14); color: var(--u-brand-b-text); }

/* ── Print / PDF: keep cards intact across page breaks ───────────────────── */
@media print {
    .upf-report .upf-card,
    .upf-report .upf-table tr,
    .upf-report .upf-ing-list > div { break-inside: avoid; page-break-inside: avoid; }
}

/* ── Portfolio GRAS report ─────────────────────────────────────────────────
   GRAS shares the Portfolio UPF skin (hero, claim, donut, table). These add
   the GRAS-only bits: neutral prevalence bars (no PL chip) and the Unsafe /
   Unclear flag counts in the product table. */

/* Prevalence bars carry no PL modifier, so give the track a neutral tint and
   the right-hand chip a neutral (count) style; the fill colour is set inline
   per band (red = Unsafe, orange = Unclear). */
.upf-report .upf-ing--flag .upf-ing-track { background: rgba(17, 24, 39, .06); }
.upf-report .upf-ing-level--flag { background: var(--u-surface-2); color: var(--u-subtle); }

/* Unsafe / Unclear ingredient counts in the Product-Level GRAS table. */
.upf-report .upf-flag-count {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 22px; padding: 2px 7px; border-radius: 9999px;
    font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.2;
}
.upf-report .upf-flag-count--unsafe  { background: rgba(220, 48, 56, .14);  color: #991B1B; }
.upf-report .upf-flag-count--unclear { background: rgba(210, 115, 38, .16); color: #9A3412; }
.upf-report .upf-flag-zero { color: var(--u-muted); font-weight: 600; }

/* Portfolio GRAS hero — brand banner variant (parallels .rpt-hero--banner on the
   Insights reports): the uploaded banner becomes the full-bleed background under
   a dark scrim so the white copy + badge stay legible. */
.upf-report .upf-hero--banner {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.upf-report .upf-hero .upf-hero-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);
}

/* ════════════════════════════════════════════════════════════════════════════
   WEB RESPONSIVENESS (screen only — never the PDF)
   ────────────────────────────────────────────────────────────────────────────
   Container-query reflow for the Portfolio UPF / GRAS reports. Keys off the
   wrapper container `rptw` (set in reports.css). Under `@media screen`, so the
   Playwright print-media PDF export is unaffected. The existing viewport
   `@media (max-width: 620px)` hero rules above remain as a phone fallback.
   ════════════════════════════════════════════════════════════════════════════ */
@media screen {
    /* Drop the 880px floor so the wrapper shrinks to its parent and the
       container queries below can reflow. Lives here (the last-loaded report
       stylesheet) so it wins over `.report-wrapper.upf-report { min-width:880px }`
       — and over `.report-wrapper.rpt-skin` for cards that carry both classes
       (Product UPF / Product GRAS). */
    .report-wrapper.upf-report { min-width: 0; }

    /* ── Mobile: drop the tan page gutter so cards fill the full width ──────────
       Mirrors the reports-skin rule. The white report-card surface is set here
       (later-loaded) so it wins for cards carrying both `upf-report` and
       `rpt-skin` (Product UPF / GRAS). Portfolio UPF/GRAS also get the upf-page
       padding + upf-hero margin reset. */
    @container rptw (max-width: 560px) {
        .upf-report .report-card { background: transparent; border: none; box-shadow: none; }
        .upf-report .upf-page { padding: 0; }
        .upf-report .upf-hero { margin: 0; }
        /* Tighter card padding on phones gives the content (esp. the comparison
           head-to-head table) the few extra pixels it needs to fit. */
        .upf-report .upf-card { padding: 18px 16px; }
    }

    @container rptw (max-width: 560px) {
        .upf-report .upf-hero { padding: 24px 22px 22px; min-height: 0; }
        .upf-report .upf-hero-title { font-size: 1.6rem; }
        /* Keep the brand badge (logo / initials monogram) on mobile, just smaller.
           `display:flex` also overrides the legacy `@media (max-width:620px)` hide
           above so the badge shows on phones like the other report headers. */
        .upf-report .upf-hero-logo { display: flex; width: 72px; height: 72px; right: 18px; }
        .upf-report .upf-hero-logo-monogram { font-size: 1.7rem; }
        .upf-report .upf-hero-body { padding-right: 90px; }
    }
    @container rptw (max-width: 400px) {
        .upf-report .upf-hero-logo { width: 60px; height: 60px; right: 14px; }
        .upf-report .upf-hero-logo-monogram { font-size: 1.45rem; }
        .upf-report .upf-hero-body { padding-right: 74px; }
    }
    /* Comparison report's two overlapping badges stay hidden on the narrowest
       widths (they'd overflow); the single-badge reports keep theirs. */
    @container rptw (max-width: 440px) {
        .upf-report .upf-hero-logos { display: none; }
        .upf-report .upf-hero-body--compare { padding-right: 0; }
    }

    /* ── §01 Overview claim row: 3 big numbers + hairline dividers → stacked ──── */
    @container rptw (max-width: 620px) {
        .upf-report .upf-claim {
            grid-template-columns: 1fr;
            gap: 18px;
            padding: 12px 8px 8px;
        }
        .upf-report .upf-claim-divider { display: none; }
        .upf-report .upf-bignum { font-size: 3.6rem; }
    }

    /* ── Comparison §01 paired stats: center the stacked A/B metrics on mobile ── */
    @container rptw (max-width: 620px) {
        .upf-report .upf-cmp-cell {
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            padding-right: 0;
        }
        .upf-report .upf-cmp-stat-label { text-align: center; }
        /* A 1fr / auto / 1fr grid puts "vs" dead-center and mirrors the two sides,
           so the differing brand-name widths can't pull the numbers off-center. */
        .upf-report .upf-cmp-stat-vals {
            display: grid;
            grid-template-columns: 1fr auto 1fr;
            align-items: center;
            width: 100%;
            gap: 10px;
        }
        .upf-report .upf-cmp-stat-side { align-items: center; }
        .upf-report .upf-cmp-vs { align-self: center; }
        /* The delta chip pins itself flex-start by default; center it with the rest. */
        .upf-report .upf-cmp-chip { align-self: center; }
        .upf-report .upf-cmp-num { font-size: 2.2rem; }
        /* Bring the metric icon disc (hidden before) back as a centered medallion at
           the top of each stat — keeps the same embossed disc shading as the
           web/PDF, using the extra room the centered layout frees up. */
        .upf-report .upf-cmp-cell .upf-stamp-icon {
            position: static;
            order: -1;
            align-self: center;
            top: auto;
            right: auto;
            transform: none;
            margin: 0 0 8px;
        }

        /* §03 ingredient comparison: the 300px column floor overflows a phone, so
           collapse to a single column. */
        .upf-report .upf-cmp-cols { grid-template-columns: 1fr; gap: 18px; }

        /* §04 Head-to-Head: the 4-column table (Metric · BrandA · BrandB · Advantage)
           can't fit a phone, so restack each metric as a card — metric name on top,
           then brand-labelled values and the advantage, each on its own labelled row. */
        .upf-report .upf-verdict-table,
        .upf-report .upf-verdict-table tbody,
        .upf-report .upf-verdict-table tr,
        .upf-report .upf-verdict-table td { display: block; }
        .upf-report .upf-verdict-table thead { display: none; }
        .upf-report .upf-verdict-table tbody tr {
            background: var(--u-surface-2);
            border: 1px solid var(--u-border);
            border-radius: 12px;
            padding: 12px 14px;
            margin-top: 12px;
        }
        .upf-report .upf-verdict-table tbody td {
            padding: 0;
            border: none;
            text-align: left;
            font-size: 13px;
        }
        .upf-report .upf-verdict-table td.metric {
            font-weight: 700;
            font-size: 14px;
            margin-bottom: 8px;
            padding-bottom: 8px;
            border-bottom: 1px solid var(--u-border);
        }
        /* Labelled value rows: caption (brand / "Advantage") left, value/pill right. */
        .upf-report .upf-verdict-table td.num,
        .upf-report .upf-verdict-table td.adv {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            margin-top: 6px;
        }
        .upf-report .upf-verdict-table td[data-label]::before {
            content: attr(data-label);
            font-size: 11px;
            font-weight: 700;
            letter-spacing: .02em;
            color: var(--u-subtle);
        }
        .upf-report .upf-verdict-callout { padding: 12px 14px; }
        .upf-report .upf-verdict-callout .t { font-size: 12.5px; }
    }

    /* Donut pairs use `minmax(440px, 1fr)`, which forces a 440px floor that a
       skinny card can't hold (it gets clipped by the card's overflow). Drop to a
       single fluid column below the pair's natural break. */
    @container rptw (max-width: 700px) {
        .upf-report .upf-donut-pair { grid-template-columns: 1fr; }
    }
    /* Tighten the donut + legend so they fit a phone-width card. */
    @container rptw (max-width: 480px) {
        .upf-report .upf-donut { width: 220px; height: 220px; }
        .upf-report .upf-legends { width: 100%; padding-right: 0; }
        .upf-report .upf-legend-item { gap: 12px; }
    }

    /* ── §03 ingredient bars: stack the name/level head so the bar keeps width ── */
    @container rptw (max-width: 440px) {
        .upf-report .upf-ing-head { flex-wrap: wrap; gap: 4px 10px; }
    }

    /* ── §04 Product-Level UPF table → cards on mobile ─────────────────────────
       The 7-column table (avatar · Product · UPC · Classification · Level ·
       Shield · Report) doesn't fit a phone and the horizontal scroll buries the
       status pills + drill action. Below the card's break, reflow each row into a
       card: product name (title), UPC beneath, the three status pills on a
       wrapping row, and the drill action. The "View report" button drops to its
       own line (never squeezing the name); the lock pins to the card's top-right
       corner so it doesn't claim a whole row. Scoped to `.upf-ptable` so the GRAS
       product table (count columns) is untouched. */
    @container rptw (max-width: 560px) {
        /* Drop the section's own white card chrome so the per-product row cards
           float directly on the page (no white block behind them). The heading
           stays above them as plain text. */
        .upf-report .upf-card--table {
            background: transparent;
            border: none;
            box-shadow: none;
            padding: 0;
        }
        .upf-report .upf-card--table .upf-card-head { margin-bottom: 2px; }

        .upf-report .upf-ptable-wrap { overflow-x: visible; }
        .upf-report .upf-ptable { min-width: 0; display: block; }
        .upf-report .upf-ptable thead { display: none; }
        .upf-report .upf-ptable tbody { display: block; }

        .upf-report .upf-ptable tbody tr {
            display: block;
            position: relative;
            background: var(--u-surface);
            border: 1px solid var(--u-border);
            border-radius: 12px;
            box-shadow: var(--u-shadow-1);
            padding: 14px 16px;
            margin-bottom: 12px;
        }
        .upf-report .upf-ptable tbody tr:last-child { margin-bottom: 0; }
        .upf-report .upf-ptable tbody td { display: block; padding: 0; border: none; }

        /* Product thumbnail sits at the top-left of the card. */
        .upf-report .upf-ptable td.upf-th-avatar { display: block; width: auto; padding: 0; margin-bottom: 10px; }
        .upf-report .upf-ptable .upf-avatar { width: 56px; height: 56px; border-radius: 10px; }
        /* Product name → card title; UPC beneath. */
        .upf-report .upf-ptable tbody td:nth-child(2) .upf-name { font-size: 15px; font-weight: 700; }
        .upf-report .upf-ptable tbody td:nth-child(3) { margin-top: 4px; }
        /* Classification / Level / Shield each get a small caption (from the cell's
           data-label) so it's clear what the pill represents. Captions sit in a
           fixed-width column so the pills line up. */
        .upf-report .upf-ptable tbody td[data-label] {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-top: 8px;
        }
        .upf-report .upf-ptable tbody td[data-label]::before {
            content: attr(data-label);
            flex: 0 0 92px;
            font-size: 10px;
            font-weight: 800;
            letter-spacing: .04em;
            text-transform: uppercase;
            color: var(--u-subtle);
            line-height: 1.2;
        }

        /* Drill action (the "View report" button OR the lock) is pinned to the
           card's top-right corner — out of the stacked name/pills flow. The
           product name sits below the thumbnail, so the corner control never
           overlaps it. */
        .upf-report .upf-ptable tbody td.upf-th-action {
            position: absolute;
            top: 12px;
            right: 12px;
            margin: 0;
            width: auto;
            text-align: right;
        }
    }
}