/* Brand Intelligence dashboard — ported from the ip-b2b "aha" dashboard
   prototype (js/dashboard-home.js + pages/dashboard.css). The prototype themes
   off shared design tokens; here we bridge those tokens to the app's existing
   oyster / indigo / mint palette (light-mode only — this app has no dark mode)
   and keep the app's surface/background rather than the prototype's banner. */

.bi {
    /* app palette — linen surfaces + brand-blue ramp + design status colors */
    --oyster-50: #fcfbf6;
    --oyster-100: #f9f8f3;
    --oyster-200: #f4f2ea;
    --oyster-300: #e0dbe7;
    --oyster-400: #b7b2c4;
    --oyster-500: #827c90;
    --oyster-600: #5d566a;
    --oyster-700: #413a4d;
    --oyster-900: #1a102c;
    --indigo-500: #25507C;
    --indigo-600: #1E4368;
    --green: #32A966;

    /* token bridge: prototype tokens → app palette */
    --surface: #fff;
    --surface-2: var(--oyster-100);
    /* faint linen tier used to tint the debossed stamp glyphs */
    --surface-3: var(--oyster-200);
    --border: var(--oyster-200);
    --border-strong: var(--oyster-300);
    --text: var(--oyster-900);
    --text-muted: var(--oyster-600);
    --text-subtle: var(--oyster-500);
    --primary: var(--indigo-500);
    --primary-bright: var(--indigo-600);
    --sec-green: var(--green);
    --sec-green-text: #245E3B;
    /* The Non-UPF / GRAS health gauges are a monochromatic BLUE gauge in the
       design (aha.html sets --ter-cyan to the primary blue), not green. */
    --ter-cyan: var(--indigo-500);
    --ter-amber: #FFC434;
    --sec-red: #DC3038;
    --r-lg: 12px;
    --r-md: 10px;
    --r-sm: 8px;
    --radius-pill: 999px;
    --fs-label: 11px;
    --dash-donut-ring-h: calc(252px * 26 / 300);
    --shadow-1: 0 1px 3px 0 rgba(26, 16, 44, .1), 0 1px 2px 0 rgba(26, 16, 44, .06);
    --shadow-2: 0 12px 32px rgba(26, 16, 44, .18);

    /* Type bridge → the aha.html prototype: DM Sans body, Noto Serif headings /
       big numerals / CTAs. Loaded in App.razor; scoped to .bi so the rest of
       the app keeps its Figtree/Poppins stack. */
    --font-sans: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-serif: 'Noto Serif', Georgia, 'Times New Roman', serif;
    font-family: var(--font-sans);

    width: 100%;
    max-width: 1240px;
    min-width: 0;
    margin: 0 auto;
}

/* --- Match the prototype's editorial serif on headings, big numerals, and
   CTAs (everything else stays on the sans body font). --- */
.bi .dash-hero-title,
.bi .dash-section-title,
.bi .dash-pillars-cta-headline {
    font-family: var(--font-serif);
    letter-spacing: -0.01em;
}
.bi .dash-pct,
.bi .dash-score-num .n,
.bi .dash-donut-num,
.bi .dash-wisescore-num .n,
.bi .dash-pillar-score,
.bi .dash-ws-health-num {
    font-family: var(--font-serif);
}
.bi .dash-btn,
.bi .dash-cta-banner-btn,
.bi .dash-pillars-cta-btn {
    font-family: var(--font-serif);
    letter-spacing: 0;
}

.bi-loading { display: flex; align-items: center; justify-content: center; padding: 96px 0; }
.bi-empty { text-align: center; padding: 48px 0; color: var(--text-subtle); }
.bi-empty .material-icons { font-size: 40px; opacity: .3; }

.dash {
    display: flex;
    flex-direction: column;
    gap: 22px;
    container-type: inline-size;
    container-name: dash;
    min-width: 0;
}

/* ---- Card shell ----
   The shell is WciDashCard (the design's Dashboard card, Components/DesignSystem). Its scoped rule is
   0,2,0, so a card this page restyles is named with .bi and .dash-card to outrank it. */
.dash-card { min-width: 0; }
.dash-donut-card {
    container-type: inline-size;
    container-name: donut-card;
}
.bi .dash-card.dash-donut-card { border-radius: 6px; }
/* The title sat in a top bar with no bottom margin; keep the donut where it was under it. */
.dash-donut-card > .dash-card-title + .dash-donut-row { margin-top: 2px; }

/* ---- Zero state (reqs 1A + 1B) ----
   An org with no products of its own gets this single upload invitation in place of the whole
   dashboard. Generous and centered: it is the only thing on the page, not a card among cards. */
.bi .dash-card.dash-zero {
    padding: 56px 32px;
    text-align: center;
}
.dash-zero-icon {
    font-size: 48px;
    color: var(--primary);
    opacity: 0.6;
}
.dash-zero-title {
    margin: 16px 0 0;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text);
}
.dash-zero-copy {
    margin: 10px auto 0;
    max-width: 34rem;
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--text-muted, #6b7280);
}
.dash-zero-actions {
    margin-top: 26px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
}

/* Org context row above the hero — mirrors the OrgLabel placement on other pages. */
.bi .bi-context-row {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
}

/* ---- Hero / welcome (full-bleed brand banner) ----
   By default the hero shows the embossed WISE-bug pattern on flat brand-blue (same stamped-bug
   language as the Insights CTA banner at the foot of the page) — no photo placeholder. A custom
   uploaded banner layers on top as a cover image behind a dark legibility scrim and hides the
   pattern; the flat-blue base stays so the surface is never bare. */
.dash-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 220px;
    margin-bottom: 28px;
    padding: 28px 32px;
    border-radius: var(--r-lg);
    background-color: color-mix(in srgb, var(--primary) 78%, #1A2339);
    box-shadow: var(--shadow-1);
}
/* Banner artwork — a cover layer so arbitrary uploads fill the band without distortion. */
.dash-hero-bg {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
/* Embossed WISE-bug pattern that fills the hero whenever no custom banner is set — a single,
   oversized debossed bug tilted to a jaunty angle and bled mostly into the band. */
.dash-hero-pattern {
    position: absolute;
    inset: 0;
    z-index: -2;
    overflow: hidden;
    pointer-events: none;
}
.dash-hero-bug {
    position: absolute;
    top: 50%;
    right: 0;
    width: min(1280px, 130%);
    height: auto;
    color: color-mix(in srgb, #0B1426 38%, var(--primary));
    filter: drop-shadow(0 1.5px 0 rgba(255, 255, 255, 0.14));
    transform: translate(calc(14% + 120px), calc(-50% + 40px)) rotate(-18deg);
}
/* Once a custom banner image is uploaded, the flat pattern steps aside. */
.dash-hero.has-image .dash-hero-pattern { display: none; }
/* Dark scrim keeps the headline + subtext legible over an uploaded image. The flat-blue default
   pattern is dark enough on its own, so the scrim only appears once a custom banner is in place. */
.dash-hero-scrim {
    display: none;
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg, rgba(7, 12, 26, .18) 0%, rgba(7, 12, 26, .46) 52%, rgba(7, 12, 26, .80) 100%);
}
.dash-hero.has-image .dash-hero-scrim { display: block; }
/* Reserve space on the right so the title/desc never run under the logo badge
   (badge width + its right offset). Shrinks then disappears on narrow viewports. */
.dash-hero-content { display: flex; flex-direction: column; min-width: 0; padding-right: 184px; }
.dash-hero-eyebrow {
    display: inline-flex; align-items: center;
    font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
    color: rgba(255, 255, 255, .9);
}
.dash-hero-title { margin: 8px 0 0; font-size: 1.85rem; font-weight: 800; letter-spacing: -.02em; color: #fff; }
.dash-hero-desc { margin: 6px 0 0; max-width: 760px; font-size: .85rem; line-height: 1.5; color: rgba(255, 255, 255, .85); }

/* Brand logo — a circular badge floated to the right, sitting on top of the banner artwork (or the
   default pattern) and vertically centered. It's a link: clicking it navigates to Manage Profile to
   edit the logo (rather than the prototype's inline editor). Sits above the scrim/pattern (z-index). */
.dash-hero-logo {
    position: absolute;
    top: 50%;
    right: 56px;
    transform: translateY(-50%);
    z-index: 2;
    width: 136px;
    height: 136px;
    padding: 0;
    border: 0;
    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);
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
    animation: dash-hero-logo-bounce 0.72s cubic-bezier(0.34, 1.56, 0.64, 1) 0.18s both;
}
@keyframes dash-hero-logo-bounce {
    0%   { transform: translate(28px, -50%) scale(0.42); opacity: 0; }
    52%  { transform: translate(-8px, -50%) scale(1.1); opacity: 1; }
    70%  { transform: translate(4px, -50%) scale(0.96); }
    84%  { transform: translate(-2px, -50%) scale(1.03); }
    100% { transform: translateY(-50%) scale(1); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .dash-hero-logo { animation: none; }
}
.dash-hero-logo:hover,
.dash-hero-logo:focus-visible {
    transform: translateY(-50%) scale(1.04);
    box-shadow: 0 14px 34px rgba(7, 12, 26, 0.42), 0 0 0 5px rgba(255, 255, 255, 0.28);
    outline: none;
}
.dash-hero-logo img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Empty state — no logo set: a soft surface with a centered add icon (still links to edit). */
.dash-hero-logo.is-empty { background: color-mix(in srgb, var(--surface) 88%, #fff); }
.dash-hero-logo-ph {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-size: 42px;
    color: var(--text-subtle);
}
/* "Edit" overlay revealed on hover / focus, anchored to the bottom of the badge. */
.dash-hero-logo-edit {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 38%;
    background: linear-gradient(180deg, rgba(7, 12, 26, 0) 0%, rgba(7, 12, 26, 0.62) 100%);
    color: #fff;
    opacity: 0;
    transition: opacity 0.18s ease;
}
.dash-hero-logo-edit .material-icons { font-size: 18px; margin-bottom: 8px; }
.dash-hero-logo:hover .dash-hero-logo-edit,
.dash-hero-logo:focus-visible .dash-hero-logo-edit { opacity: 1; }
/* Shrink the badge (and its reserved content padding) on tablet, hide it on phones. */
@media (max-width: 767px) {
    .dash-hero-logo { width: 92px; height: 92px; right: 28px; }
    .dash-hero-content { padding-right: 124px; }
}
@media (max-width: 520px) {
    .dash-hero-logo { display: none; }
    .dash-hero-content { padding-right: 0; }
}

/* ---- big number / percent / score figures ---- */
.dash-pct {
    font-size: 0.38em;
    font-weight: 700;
    vertical-align: 1.05em;
    margin-left: -0.04em;
    letter-spacing: 0;
}
.dash-pct-wrap { display: inline-block; line-height: 1; }
.dash-donut-center .dash-pct { font-size: 0.87rem; color: var(--ter-cyan); }

/* The pillar cards' score numeral (the claim band and score cards draw their own). */
.dash-score-num { display: flex; align-items: baseline; gap: 6px; line-height: 1; }
.dash-score-num .n {
    font-size: 3.4rem; font-weight: 800; line-height: 1; letter-spacing: -0.03em; color: var(--text);
    display: inline-block; min-width: 2ch; font-variant-numeric: tabular-nums;
}

/* ---- Claim status row (Products Discovered / Products Claimed / Non-UPF Shield Verification) ----
   The band is WciDashClaim (the design's Dashboard scores). What stays here is the page's own
   content in it, plus the hairline and button row the pillar cards and the Product Portfolio
   summary card lay out themselves. */
.dash-claim-divider { background: var(--border); align-self: stretch; }
.dash-btn-row { display: flex; flex-wrap: wrap; gap: 10px; }

/* In Progress nudge under the Products Claimed number: products the brand has started but not
   finished. Sits between the metric and the CTA row, quiet enough not to compete with the shield. */
.dash-claim-nudge {
    margin: 12px 0 0;
    font-size: 0.8125rem;
    line-height: 1.35;
    color: var(--text-muted);
}

.dash-btn {
    display: inline-flex; align-items: center; gap: 7px;
    max-width: 100%;
    min-width: 0;
    padding: 9px 15px; border-radius: var(--radius-pill);
    font-family: inherit; font-size: 0.78rem; font-weight: 600;
    overflow-wrap: anywhere;
    cursor: pointer; border: 1px solid transparent; text-decoration: none;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.dash-btn .material-icons { font-size: 16px; }

/* ---- Two-up donut cards (UPF / GRAS) ---- */
.dash-two-up { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.dash-two-up > * { min-width: 0; }
/* Same row, one card: what a non-beta viewer sees where beta users get UPF beside GRAS. */
.dash-one-up { display: grid; grid-template-columns: 1fr; gap: 18px; }
.dash-one-up > * { min-width: 0; }

/* ---- Non-UPF Shield Verification (third column of the claim strip) ----
   Styled to match the two metric columns beside it — same right-floated stamp disc and bottom CTA —
   rather than as a nested card, so the three columns read as one strip. It's differentiated not by a
   background but by its content (a headline sentence instead of a big number) and by a filled, colored
   CTA that marks it as the brand's primary action vs the ghost buttons on the other two columns.
   States colour the headline's lead figure + the CTA: new/progress (indigo) · verified (green) ·
   empty (quiet/ghost). Renewal/expiry is out of scope (no "renewal due" state). */
/* Mirror the metric columns' top offset (their .dash-bignum-row has margin-top:10px) so the headline's
   top lines up with the big numbers, and the stamp disc sits on the same line as the other two. */
.dash-shield-block { position: relative; margin-top: 10px; padding-right: 56px; }
/* Centre the shield's stamp disc at 2.25rem from the block top — the same offset the metric discs use
   (.dash-claim .dash-bignum-row > .dash-stamp-icon) — so all three discs align across the strip.
   The padding-right above reserves space so the disc never overlaps the headline. */
.dash-shield-block > .dash-stamp-icon { top: 2.25rem; }
.dash-shield-headline {
    font-family: var(--font-serif);
    font-size: 1.45rem;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.01em;
    color: var(--text);
    /* Drop the headline so its visible top lines up with the big numbers' cap-height. The 4.5rem
       serif numbers carry a tall ascent above their visible glyph, so a top-aligned headline reads
       as sitting higher than them; this nudge brings the two onto the same line. (The stamp disc is
       positioned against the block, not this text, so it stays aligned.) */
    margin-top: 8px;
}
.dash-shield-num { font-weight: 800; }
.dash-shield-block--new .dash-shield-num,
.dash-shield-block--progress .dash-shield-num { color: var(--primary-bright); }
.dash-shield-block--verified .dash-shield-num { color: var(--sec-green-text); }
.dash-shield-sub { margin: 6px 0 0; font-size: 0.8125rem; line-height: 1.4; color: var(--text-muted); }
.dash-shield-meter {
    height: 5px;
    max-width: 220px;
    border-radius: var(--radius-pill);
    background: color-mix(in srgb, var(--primary) 16%, transparent);
    overflow: hidden;
    margin-top: 12px;
}
.dash-shield-meter-fill {
    height: 100%;
    border-radius: var(--radius-pill);
    background: var(--primary);
    transition: width 1.15s cubic-bezier(0.16, 1, 0.3, 1);
}


/* ---- Double-segmented donut ---- */
.dash-donut-row {
    display: grid;
    grid-template-columns: auto auto;
    justify-content: center;
    align-items: center;
    gap: 32px;
    margin: 18px 0 4px;
}
.dash-donut { position: relative; width: 252px; height: 252px; flex-shrink: 0; }
.dash-donut-svg { width: 100%; height: 100%; display: block; overflow: visible; }
.dash-donut-arc { cursor: pointer; transition: opacity 0.14s ease, filter 0.14s ease; }
.dash-donut-arc.is-hover { filter: brightness(1.07) saturate(1.05) drop-shadow(0 0 5px rgba(0, 0, 0, 0.18)); }
.dash-donut-svg:hover .dash-donut-arc:not(.is-hover) { opacity: 0.5; }
.dash-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;
}
.dash-donut-center::before {
    content: ""; position: absolute; width: 130px; height: 130px; border-radius: 50%;
    background: var(--surface); border: 1px solid var(--border);
    box-shadow: 0 10px 22px rgba(8, 15, 26, 0.12), 0 3px 8px rgba(8, 15, 26, 0.08);
    z-index: 0;
}
.dash-donut-center > * { position: relative; z-index: 1; max-width: 120px; }
.dash-donut-num { font-size: 2.3rem; font-weight: 800; line-height: 1; letter-spacing: -0.03em; }
.dash-donut-num.is-teal { color: var(--ter-cyan); }
.dash-donut-label { font-size: 0.8125rem; font-weight: 700; color: var(--text); margin-top: 3px; }
.dash-donut-sub { font-size: 0.68rem; line-height: 1.25; color: var(--text-muted); }

.dash-donut-legends { display: flex; flex-direction: column; gap: 16px; width: 212px; box-sizing: border-box; padding-right: 12px; }
.dash-donut-legend-group { display: flex; flex-direction: column; gap: 7px; }
.dash-donut-legend-title {
    font-size: var(--fs-label); font-weight: 700; letter-spacing: 0.06em;
    text-transform: uppercase; color: var(--text-subtle);
}
.dash-donut-legend-group .dash-legend { flex-direction: column; flex-wrap: nowrap; gap: 6px; margin-top: 0; }
.dash-donut-legend-group .dash-legend-item { justify-content: space-between; gap: 28px; font-size: 0.74rem; }
.dash-donut-legend-group .dash-legend-item strong { flex: none; width: 26px; text-align: center; padding-left: 6px; }

.dash-legend { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 10px; font-size: 0.72rem; color: var(--text-muted); }
.dash-legend-item { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.dash-legend-item strong { color: var(--text); font-weight: 700; }
.dash-legend-l { display: inline-flex; align-items: center; gap: 6px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }

/* Donut-segment hover popover. Built in JS and appended to <body> (so it
   escapes the card's bounds) — it therefore lives outside the `.bi` token
   scope, so these rules use concrete palette values rather than bridge tokens. */
#dash-donut-tip {
    position: fixed; z-index: 10000; min-width: 132px; max-width: 220px;
    padding: 9px 12px; border-radius: 10px;
    background: #fff; color: #1a102c; border: 1px solid #e0dbe7;
    box-shadow: 0 12px 32px rgba(26, 16, 44, .18); font-family: inherit; pointer-events: none;
    opacity: 0; transform: translateY(4px);
    transition: opacity 0.12s ease, transform 0.12s ease;
}
#dash-donut-tip.is-visible { opacity: 1; transform: translateY(0); }
#dash-donut-tip .dash-tip-eyebrow { font-size: 0.62rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: #827c90; margin-bottom: 5px; }
#dash-donut-tip .dash-tip-row { display: flex; align-items: center; gap: 7px; }
#dash-donut-tip .dash-tip-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
#dash-donut-tip .dash-tip-name { font-size: 0.8125rem; font-weight: 600; color: #1a102c; }
#dash-donut-tip .dash-tip-stat { display: flex; align-items: baseline; gap: 7px; margin-top: 4px; }
#dash-donut-tip .dash-tip-stat strong { font-size: 1.05rem; font-weight: 800; color: #1a102c; }
#dash-donut-tip .dash-tip-pct { font-size: 0.72rem; font-weight: 600; color: #827c90; }
#dash-donut-tip .dash-pct { font-size: 0.38em; font-weight: 700; vertical-align: 1.05em; margin-left: -0.04em; letter-spacing: 0; }

/* ---- Callout (shield / warning) ---- */
.dash-callout {
    display: flex; align-items: center; gap: 8px;
    margin-top: 16px; padding-top: 14px; padding-right: 11px;
    border-top: 1px solid var(--border);
}
.dash-callout-icon { flex-shrink: 0; width: 18px; display: grid; place-items: center start; color: var(--text); }
.dash-callout-icon .material-icons { font-size: 16px; }
.dash-callout--green .dash-callout-icon { color: var(--sec-green); }
.dash-callout--amber .dash-callout-icon { color: var(--ter-amber); }
.dash-callout-body { flex: 1; min-width: 0; }
.dash-callout-title { font-size: 0.8125rem; font-weight: 700; color: var(--text); }
.dash-callout-sub { font-size: 0.72rem; color: var(--text-muted); margin-top: 2px; line-height: 1.4; }
.dash-callout-btn {
    flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px;
    padding: 0; background: none; border: none; font-family: inherit;
    font-size: 0.8125rem; font-weight: 600; cursor: pointer; text-decoration: none;
    color: var(--primary); transition: color 0.15s ease;
}
.dash-callout-btn .material-icons { font-size: 16px; }
.dash-callout-btn:hover { color: var(--primary-bright); }

/* ---- Report link ---- */
.dash-report-link {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    margin-top: 16px; padding: 14px 11px 0 0; border-top: 1px solid var(--border);
    font-size: 0.8125rem; font-weight: 600; color: var(--text);
}
.dash-report-link .dash-report-left { display: inline-flex; align-items: center; gap: 8px; }
.dash-report-link .material-icons { font-size: 16px; }
.dash-report-link .dash-report-left .material-icons { width: 18px; display: inline-grid; place-items: center start; }
.dash-report-link .dash-report-soon {
    margin-left: auto; font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
    background: var(--oyster-200); color: var(--text-subtle); border-radius: 99px; padding: 3px 9px; white-space: nowrap;
}
/* Live report link (replaces the old inert "Coming soon" badge). */
a.dash-report-link { text-decoration: none; transition: color 0.15s ease; }
a.dash-report-link:hover { color: var(--primary-bright); }
.dash-report-link .dash-report-arrow { margin-left: auto; color: var(--primary); transition: transform 0.15s ease; }
a.dash-report-link:hover .dash-report-arrow { color: var(--primary-bright); transform: translate(1px, -1px); }

/* ---- Pillars section ---- */
.dash-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-top: 6px; }
.dash-section-title { margin: 0; font-size: 1.25rem; font-weight: 800; letter-spacing: -0.01em; color: var(--text); }

.dash-pillars-section { width: 100%; padding-top: 40px; }
.dash-pillars-section .dash-section-head { margin-bottom: 14px; }
.dash-pillars-intro { max-width: 58%; margin: 0 0 24px; font-size: 0.9rem; line-height: 1.55; color: var(--text-muted); }

/* ---- "Your food intelligence" WISEscore card (overall score + 3-pillar mini-list) ---- */
.dash-wisescore {
    display: grid;
    grid-template-columns: 0.85fr 1px 1.4fr;
    gap: 28px;
    align-items: center;
}
.dash-wisescore-num { display: flex; align-items: baseline; gap: 6px; }
.dash-wisescore-num .n { font-size: 3.6rem; font-weight: 800; line-height: 1; letter-spacing: -0.03em; color: var(--text); }
.dash-wisescore-num .d { font-size: 1.25rem; font-weight: 600; color: var(--text-subtle); }
.dash-wisescore-note { font-size: 0.75rem; color: var(--text-muted); line-height: 1.45; max-width: 230px; }
.dash-wisescore-note strong { color: var(--text); }

.dash-pillars-head {
    display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 14px;
}
.dash-pillars-head .l { font-size: var(--fs-label); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-subtle); }
.dash-pillar-row {
    display: grid; grid-template-columns: 150px 1fr 34px;
    align-items: center; gap: 14px; padding: 9px 0;
}
.dash-pillar-name { display: inline-flex; align-items: center; gap: 8px; font-size: 0.8125rem; font-weight: 600; color: var(--text); }
.dash-pillar-name .material-icons { font-size: 17px; }
.dash-pillar-track {
    height: 8px; border-radius: var(--radius-pill);
    background: color-mix(in srgb, var(--bar-color, var(--text-subtle)) 15%, transparent); overflow: hidden;
}
.dash-pillar-fill { height: 100%; border-radius: var(--radius-pill); }
.dash-pillar-score { font-size: 1rem; font-weight: 800; color: var(--text); text-align: right; }

/* WISEscore health bar — score sits inside the fill at its trailing edge. */
.dash-ws-health-bar { width: 100%; max-width: 480px; margin: 14px auto 20px; }
.dash-ws-health-track {
    position: relative; height: var(--dash-donut-ring-h); border-radius: var(--radius-pill);
    background: color-mix(in srgb, var(--bar-color, var(--text-subtle)) 15%, transparent); overflow: hidden;
}
.dash-ws-health-fill.dash-metric-fill {
    position: absolute; left: 0; top: 0; bottom: 0; height: auto;
    display: flex; align-items: center; justify-content: flex-end;
    padding-right: 10px; min-width: 0; border-radius: var(--radius-pill); overflow: hidden;
}
.dash-ws-health-num {
    flex-shrink: 0; font-size: 0.8125rem; font-weight: 800; letter-spacing: -0.02em;
    color: var(--text); line-height: 1; font-variant-numeric: tabular-nums;
}

/* Centered pillars heading: title + status-term popover, health bar, then intro. */
.dash-pillars-heading {
    display: flex; flex-direction: column; align-items: center; text-align: center;
    min-width: 0; padding: 0 80px; margin-bottom: 32px;
}
.dash-pillars-heading .dash-section-head { width: 100%; margin-bottom: 0; justify-content: center; }
.dash-pillars-heading .dash-section-title { max-width: 720px; }
.dash-pillars-heading .dash-pillars-intro { max-width: 640px; margin: 0 auto; }

.dash-three-up { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.dash-pillars { grid-template-columns: 1fr 1px 1fr 1px 1fr; gap: 28px; align-items: stretch; }
.dash-pillar-card { min-width: 0; }
.dash-pillar-card-head { margin-bottom: 18px; }
.dash-pillar-card-head .dash-score-num { gap: 4px; }
.dash-pillar-card-head .dash-score-num .n { font-size: 5rem; }
.dash-pillar-card-head .dash-score-cap {
    font-size: 0.8125rem; line-height: 1.35; color: var(--text-muted);
    align-self: flex-end; margin-bottom: 10px;
}
.dash-pillar-card-head .dash-score-cap strong { color: var(--text); font-size: 1.0625rem; font-weight: 700; }

/* ---- Floated label stamp icons ----
   A small, faint disc floated to the far right of a score, with an outline
   glyph for its label. Debossed with a light bottom-edge highlight so it reads
   as stamped/engraved rather than drawn (mirrors the embossed hero bug).
   Sits on the claim row's three big numbers and on each pillar card's score. */
.dash-pillar-card-head { position: relative; }
/* The claim band (WciDashClaim) styles its own discs; these are the pillar cards' and the shield
   blocks'. */
.dash-stamp-icon {
    position: absolute; top: 50%; 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(--primary) 14%, var(--surface-3));
    color: color-mix(in srgb, var(--primary) 26%, var(--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;
}
.dash-stamp-icon .material-symbols-outlined {
    font-size: 26px;
    font-variation-settings: 'FILL' 0, 'wght' 400, 'opsz' 24;
    line-height: 1;
}

/* The score gauge + stamp icon are tap targets that replay the entrance
   animation — score replays the chart, icon replays score + chart. */
.dash-pillar-card-head .dash-score-num {
    cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent;
    transition: transform 0.12s ease;
}
.dash-pillar-card-head .dash-score-num:active { transform: scale(0.97); }
.dash-pillar-card-head .dash-stamp-icon {
    pointer-events: auto; cursor: pointer;
    transition: transform 0.12s ease, color 0.15s ease, border-color 0.15s ease;
}
.dash-pillar-card-head .dash-stamp-icon:hover {
    color: color-mix(in srgb, var(--primary) 42%, var(--surface-3));
    border-color: color-mix(in srgb, var(--primary) 26%, var(--surface-3));
}
.dash-pillar-card-head .dash-stamp-icon:active { transform: translateY(-50%) scale(0.92); }

/* Every chart surface replays its entrance animation on tap — surface the
   affordance with a pointer cursor and a small press response. */
.dash-donut,
.dash-ws-health-bar,
.dash-claim .dash-bignum-row,
.dash-claim .dash-progress-pct { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.dash-ws-health-bar { transition: transform 0.12s ease; }
.dash-ws-health-bar:active { transform: scale(0.99); }
.dash-donut { transition: transform 0.16s ease; }
.dash-donut:active { transform: scale(0.985); }

.dash-metric-list { display: flex; flex-direction: column; gap: 14px; }
.dash-metric-item {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    column-gap: 14px; row-gap: 5px; align-items: center;
}
.dash-metric-name { grid-column: 1; grid-row: 1; justify-self: start; font-size: 0.78rem; color: var(--text-muted); min-width: 0; }
.dash-metric-val { grid-column: 2; grid-row: 1; justify-self: end; font-size: 0.8125rem; font-weight: 800; white-space: nowrap; }
/* Benefit-scale rows (Nutrient Quality, Health Outcomes) print the tier label
   in a third column between the name and the score. */
.dash-metric-item--tier { grid-template-columns: 1fr auto auto; }
.dash-metric-item--tier .dash-metric-val { grid-column: 3; }
.dash-metric-item--tier .dash-metric-track { grid-column: 1 / -1; }
.dash-metric-tier {
    grid-column: 2; grid-row: 1; justify-self: end; align-self: center;
    font-size: 0.625rem; font-weight: 700; letter-spacing: 0.06em;
    text-transform: uppercase; color: var(--text-subtle); white-space: nowrap;
}
.dash-metric-track {
    grid-column: 1 / 3; grid-row: 2; height: 4px; border-radius: var(--radius-pill);
    background: color-mix(in srgb, var(--bar-color, var(--text-subtle)) 15%, transparent); overflow: hidden;
}
.dash-metric-fill { display: block; height: 100%; min-width: 0; border-radius: var(--radius-pill); transition: width 1.15s cubic-bezier(0.16, 1, 0.3, 1); }
.dash-charts-pending .dash-metric-fill { width: 0; }
@media (prefers-reduced-motion: reduce) {
    .dash-charts-pending .dash-metric-fill { width: auto; }
    .dash-metric-fill { transition: none; }
}

/* ---- Insights CTA banner (embossed WISE bug) ---- */
.dash-pillars-cta { display: flex; justify-content: center; align-items: center; width: 100%; padding: 64px 0 0; }
.dash-cta-banner {
    position: relative; isolation: isolate; overflow: hidden;
    display: flex; justify-content: center; align-items: center;
    width: 100%; min-height: 220px; padding: 44px 32px;
    border-radius: var(--r-lg);
    background: color-mix(in srgb, var(--primary) 82%, #1A2339);
    box-shadow: 0 10px 30px rgba(26, 35, 57, 0.28);
}
.dash-cta-bug {
    position: absolute; z-index: -2; top: 50%; width: min(760px, 95%); height: auto;
    color: color-mix(in srgb, #0B1426 32%, var(--primary));
    filter: drop-shadow(0 1.5px 0 rgba(255, 255, 255, 0.14)); pointer-events: none;
}
.dash-cta-bug--right { right: 0; transform: translate(48%, -50%); }
.dash-cta-bug--left { left: 0; transform: translate(-48%, -50%) rotate(-28deg); }
.dash-pillars-cta-inner {
    display: flex; flex-direction: column; align-items: center; gap: 10px;
    width: 100%; max-width: min(560px, 100%); text-align: center;
}
.dash-pillars-cta-headline { margin: 0 0 18px; font-size: 1.5rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1.2; color: #fff; text-align: center; }
.dash-pillars-cta-btn { display: inline-flex; align-items: center; gap: 8px; padding: 11px 16px 11px 18px; white-space: nowrap; }
.dash-cta-banner-btn { background: #fff; color: var(--primary); border-color: transparent; box-shadow: none; }
.dash-cta-banner-btn:hover { background: rgba(255, 255, 255, 0.9); transform: translateY(-1px); }
.dash-cta-banner-btn .material-icons { color: var(--primary); }
.dash-pillars-cta-arrow { margin-left: 2px; color: var(--primary); }

/* ---- Responsive (container-keyed to the dashboard column width) ---- */
@media (max-width: 768px) {
    .bi {
        max-width: 100%;
        overflow-x: clip;
    }

    .dash-hero {
        min-height: 0;
        padding: 24px 20px;
    }

    .dash-hero-bug {
        width: min(760px, 165%);
        transform: translate(34%, calc(-50% + 28px)) rotate(-18deg);
    }

    .dash-shield-block {
        padding-right: 54px;
    }

    .dash-btn {
        white-space: normal;
    }
}

@container dash (max-width: 860px) {
    .dash-three-up { grid-template-columns: 1fr; }
    .dash-pillars .dash-claim-divider { display: none; }
    .dash-pillars-heading { padding-left: 48px; padding-right: 48px; }
}
@container dash (max-width: 820px) {
    .dash-two-up { grid-template-columns: 1fr; }
}
@container dash (max-width: 640px) {
    .dash-wisescore { gap: 16px; }
    .dash-pillar-card-head .dash-score-num .n { font-size: 3.4rem; }
    .dash-pillars-heading { padding-left: 32px; padding-right: 32px; margin-bottom: 24px; }
    .dash-pillars-heading .dash-pillars-intro { max-width: 100%; }
}
@container dash (max-width: 480px) {
    .dash-wisescore { grid-template-columns: 1fr; }
    .dash-pillars-cta-btn { white-space: normal; text-align: center; }
    .dash-wisescore .dash-claim-divider { display: none; }
}
@container dash (max-width: 470px) {
    .dash-pillar-row { grid-template-columns: 120px 1fr 30px; }
}
@container donut-card (max-width: 520px) {
    .dash-donut-row { grid-template-columns: 1fr; justify-items: center; gap: 20px; padding-inline: 12px; }
    .dash-donut { width: min(252px, 100%); height: auto; aspect-ratio: 1; }
    .dash-donut-legends { width: max-content; max-width: 100%; padding-inline: 4px; }
    .dash-callout { flex-wrap: wrap; }
    .dash-callout-btn { flex-basis: 100%; margin-top: 8px; margin-left: 26px; }
    .dash-report-link { flex-wrap: wrap; justify-content: flex-start; }
}