/* ======================================================
   DESIGN TOKENS
====================================================== */

:root{

    /* Primary brand */

    --primary:#0F7A42;
    --primary-hover:#0C6838;
    --primary-soft:#E8F6EE;
    --accent:#D97757;
    --accent-soft:#FBEDE6;

    /* Surfaces */

    --background:#F3F5F4;
    --surface:#FFFFFF;
    --color-surface-elevated:#FFFFFF;
    --surface-soft:#F7FAF8;

    /* Borders */

    --border:#E5ECE8;
    --border-soft:#EDF3EF;

    /* Text */

    --text:#1F2937;
    --text-secondary:#52637A;
    --text-muted:#64748B;
    
    --report-card-bg: var(--surface);
    --report-card-border: var(--border);

    --report-heading: var(--text);
    --report-body: var(--text-secondary);

    --report-chip-bg: var(--surface-soft);
    --report-chip-text: var(--text-secondary);

    --report-mechanism-bg: var(--primary-soft);
    --report-mechanism-text: var(--primary);

    --report-score-bg: var(--primary);
    --report-score-text: var(--surface);

}

/* ======================================================
   THEMES
====================================================== */

/* Each theme's --accent is a second, warm/contrasting hue used only for
   decorative touches (icon backgrounds, small highlights) — never for the
   score/heat encoding, which stays a single hue (--primary) throughout so
   "more color = higher score" keeps meaning everywhere it appears. */

body.theme-green{
    --primary:#0F7A42;
    --primary-hover:#0C6838;
    --primary-soft:#E8F6EE;
    --accent:#D97757;
    --accent-soft:#FBEDE6;
}

body.theme-ocean{
    --primary:#1565C0;
    --primary-hover:#0D47A1;
    --primary-soft:#EAF3FD;
    --accent:#E8874A;
    --accent-soft:#FDF0E6;
}

body.theme-lavender{
    --primary:#6A1B9A;
    --primary-hover:#4A148C;
    --primary-soft:#F4EEFB;
    --accent:#C98A3E;
    --accent-soft:#FBF1E3;
}

body.theme-amber{
    --primary:#B7791F;
    --primary-hover:#975A16;
    --primary-soft:#FEF6E7;
    --accent:#2F6F72;
    --accent-soft:#E7F1F1;
}

body{
    font-family:Arial, Helvetica, sans-serif;
    background: var(--background);
    margin:0;
    padding:40px;
    box-sizing:border-box;
}

.container{
    max-width:760px;
    margin:auto;
    background: var(--surface);
    padding:40px;
    border-radius:12px;
    box-shadow:0 8px 24px rgba(0,0,0,.08);
    box-sizing:border-box;
}

/* Mobile-first base spacing: the desktop values above are the
   exception, applied back in via the min-width query further
   down, not the default. */
@media (max-width:640px){

    body{
        padding:12px;
    }

    .container{
        padding:18px;
        border-radius:14px;
    }
}

h1{
    margin-top:0;
}

.subtitle{
    color:var(--text-muted);
    margin-bottom:30px;
}

.field{
    margin-bottom:18px;
}

/* Excludes .radio/.checkbox: a multi_select/single_select profile field
   (e.g. PF020's dietary preferences) renders each option as
   <label class="radio|checkbox"> directly under the same .field wrapper as
   the field's own top-level <label>, so this selector was also matching
   every individual option label. Its specificity (class + type selector)
   beat .radio/.checkbox's plain class selector regardless of source order,
   silently overriding their display:flex with display:block — collapsing
   the custom circle/square indicator into an unstyled sliver and leaving
   the "hidden" native input as the only visible thing on it, the
   long-standing "vertical bar before every option" bug. */
.field > label:not(.radio):not(.checkbox){
    display:block;
    font-weight:600;
    margin-bottom:6px;
}

input[type=text],
input[type=email],
input[type=tel],
input[type=number]{
    width:100%;
    padding:12px;
    border:1px solid var(--border);
    border-radius:8px;
    box-sizing:border-box;
    font-size:15px;
}

.radio,
.checkbox{
    display:flex;
    align-items:center;
    gap:14px;
    position:relative;
    font-weight:500;
    color:var(--text);
    margin:10px 0;
    padding:14px 16px;
    border:1.5px solid var(--border);
    border-radius:12px;
    background:var(--surface);
    cursor:pointer;
    transition:border-color .15s ease, background .15s ease;
    -webkit-tap-highlight-color:transparent;
}

.radio:hover,
.checkbox:hover{
    border-color:var(--primary);
}

.radio:has(input:checked),
.checkbox:has(input:checked){
    border-color:var(--primary);
    background:var(--primary-soft);
    font-weight:700;
}

.radio:has(input:disabled),
.checkbox:has(input:disabled){
    opacity:.45;
    cursor:not-allowed;
    border-color:var(--border);
    background:var(--surface-soft);
}

/* Native input stays in the DOM (and in the tab order) for
   accessibility and form submission, just visually hidden —
   the ::before/::after pseudo-elements below draw its state.
   appearance:none + border/outline:none belt-and-suspenders this
   against browsers/OS accessibility modes (e.g. Windows forced-colors)
   that redraw native checkbox/radio controls over author styles even
   when opacity/size are suppressed. */
.radio input,
.checkbox input{
    position:absolute;
    opacity:0;
    width:1px;
    height:1px;
    margin:0;
    padding:0;
    border:none;
    outline:none;
    appearance:none;
    -webkit-appearance:none;
}

.radio::before,
.checkbox::before{
    content:"";
    flex-shrink:0;
    width:24px;
    height:24px;
    border:2px solid var(--border);
    background:var(--surface);
    transition:border-color .15s ease, background .15s ease;
    box-sizing:border-box;
}

.radio::before{
    border-radius:50%;
}

.checkbox::before{
    border-radius:7px;
}

.radio:has(input:checked)::before{
    border-color:var(--primary);
    background:var(--primary);
    box-shadow:inset 0 0 0 4px var(--surface);
}

.checkbox:has(input:checked)::before{
    border-color:var(--primary);
    background:var(--primary);
}

.checkbox:has(input:checked)::after{
    content:"";
    position:absolute;
    left:23px;
    top:50%;
    width:6px;
    height:11px;
    border:solid var(--surface);
    border-width:0 2px 2px 0;
    transform:translateY(-60%) rotate(45deg);
}

/* A little extra breathing room between adjacent options specifically on
   touchscreens — user feedback was that options sitting close together
   are easy to mis-tap with a fingertip, more so than with a mouse
   pointer. Desktop's existing 10px gap/24px indicator are untouched. */
@media (max-width:640px){

    .radio,
    .checkbox{
        gap:16px;
        margin:14px 0;
        padding:16px 18px;
    }

    .radio::before,
    .checkbox::before{
        width:28px;
        height:28px;
    }

    .checkbox:has(input:checked)::after{
        left:27px;
        width:7px;
        height:13px;
    }
}

.helper{
    color:var(--text-muted);
    font-size:0.9em;
    margin-top:8px;
}

.error{
    color:#b00020;
    font-size:0.9em;
    margin-top:6px;
}

.next,
button.next,
a.next{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    background:var(--primary);
    color:var(--surface) !important;
    padding:14px 24px;
    min-height:48px;
    border:none;
    border-radius:8px;
    text-decoration:none;
    font-weight:600;
    cursor:pointer;
    margin-top:20px;
    font-size:15px;
    appearance:none;
    box-sizing:border-box;
}

.next:hover,
button.next:hover,
a.next:hover{
    background:var(--primary-hover);
    color:var(--surface) !important;
}

.next:visited,
.next:active{
    color:var(--surface);
}

/* Previous is a secondary action — same touch target, lighter
   visual weight so Continue clearly reads as the primary action */
a.next.previous{
    background:var(--surface);
    color:var(--text) !important;
    border:1.5px solid var(--border);
}

a.next.previous:hover{
    background:var(--surface-soft);
    border-color:var(--text-muted);
    color:var(--text) !important;
}

.nav-buttons{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
}

.nav-buttons .next{
    margin-top:0;
    flex:0 0 auto;
}

@media (max-width:640px){

    .nav-buttons{
        position:sticky;
        bottom:0;
        left:0;
        right:0;
        background:var(--surface);
        padding:12px 0;
        margin:20px -18px -18px;
        padding-left:18px;
        padding-right:18px;
        box-shadow:0 -4px 12px rgba(0,0,0,.06);
        z-index:20;
    }

    .nav-buttons .next{
        flex:1 1 0;
    }
}

.next.disabled,
button.next.disabled,
button.next.disabled:hover{
    background:var(--border);
    color:var(--text-muted) !important;
    cursor:not-allowed;
}

.review-generate-note{
    margin-top:10px;
    color:var(--text-muted);
    font-size:.85rem;
}

input.invalid{
    border:2px solid #d32f2f;
    background:#fff8f8;
}

.field-error{
    color:#d32f2f;
    font-size:0.9rem;
    margin-top:6px;
    font-weight:500;
}

.question{
    margin-bottom:32px;
}

.question h3{
    margin-bottom:14px;
    font-size:1.15rem;
}

.scale{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
}

.scale-option{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:6px;
    cursor:pointer;
    min-width:32px;
}

.scale-option span{
    font-weight:600;
}

.slider-question{
    background:var(--surface-soft);
    border:1px solid var(--border);
    border-radius:18px;
    padding:20px;
    margin-top:14px;
}

.slider-current{
    display:inline-block;
    margin:0 auto 16px;
    padding:8px 18px;
    border-radius:999px;
    background:var(--primary-soft);
    color:var(--primary);
    font-size:18px;
    font-weight:700;
    text-align:center;
}

.slider-current.is-unset{
    background:transparent;
    border:1.5px dashed var(--text-muted);
    color:var(--text-muted);
    font-weight:600;
}

.slider-question{
    text-align:center;
}

.slider-question.has-error{
    border-color:#d32f2f;
    background:#fff8f8;
}

/* Enlarged well past the browser default — user feedback was that the
   native slider is hard to use precisely on mobile with "fat fingers",
   and the stock thumb/track on most phones is tiny (~16-20px). The
   input's own height is set much taller than the visible track (which
   stays slim and centred via the negative thumb margin below) because a
   range input's tap/drag target is its whole element box, not just the
   painted track — so this makes the entire area around the track
   grabbable, not only a thin line. Tapping anywhere along the track still
   jumps straight to the nearest stop (native range behaviour, unchanged),
   so this is purely about making that target easier to hit and drag
   accurately, not changing how values are picked. */
.likert-slider{
    -webkit-appearance:none;
    appearance:none;
    width:100%;
    height:44px;
    margin:6px 0 4px;
    background:transparent;
    accent-color:var(--primary);
    cursor:pointer;
    touch-action:pan-y;
}

.likert-slider::-webkit-slider-runnable-track{
    height:10px;
    border-radius:999px;
    background:var(--border);
}

.likert-slider::-moz-range-track{
    height:10px;
    border-radius:999px;
    background:var(--border);
}

.likert-slider::-webkit-slider-thumb{
    -webkit-appearance:none;
    appearance:none;
    width:36px;
    height:36px;
    margin-top:-13px;
    border-radius:50%;
    background:var(--primary);
    border:4px solid var(--surface);
    box-shadow:0 2px 6px rgba(0,0,0,.25);
    cursor:pointer;
}

.likert-slider::-moz-range-thumb{
    width:36px;
    height:36px;
    border-radius:50%;
    background:var(--primary);
    border:4px solid var(--surface);
    box-shadow:0 2px 6px rgba(0,0,0,.25);
    cursor:pointer;
}

.likert-slider.is-unset{
    accent-color:var(--text-muted);
    opacity:.85;
}

.likert-slider.is-unset::-webkit-slider-thumb{
    background:var(--text-muted);
}

.likert-slider.is-unset::-moz-range-thumb{
    background:var(--text-muted);
}

@media (max-width:640px){

    /* Bigger again on small touchscreens specifically, rather than
       tablets/small laptops that happen to fall under the same 640px
       breakpoint but are typically used with a mouse or trackpad. */
    .likert-slider{
        height:52px;
    }

    .likert-slider::-webkit-slider-thumb{
        width:40px;
        height:40px;
        margin-top:-15px;
    }

    .likert-slider::-moz-range-thumb{
        width:40px;
        height:40px;
    }
}

.question.has-error{
    border:1.5px solid #d32f2f;
    background:#fff8f8;
    border-radius:18px;
    padding:20px;
}

.question.has-error h3{
    color:#d32f2f;
}

.slider-ends{
    display:flex;
    justify-content:space-between;
    margin-top:10px;
    color:var(--text-muted);
    font-size:13px;
}

.conditional{
    display:none;
    margin-top:18px;
    padding:18px;
    padding-left:20px;
background:var(--primary-soft);
border:1px solid var(--border);
border-left:4px solid var(--primary);
    border-radius:12px;
}

.conditional.visible{
    display:block;
    animation:revealQuestion .22s ease-out;
}

.conditional::before{
    content:"Additional information";
    display:block;
    margin-bottom:8px;
    font-size:12px;
    font-weight:700;
    letter-spacing:.03em;
    text-transform:uppercase;
    color:var(--primary);
}

@keyframes revealQuestion{
    from{
        opacity:0;
        transform:translateY(-6px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}
.follow-up{
    display:none;
    margin-top:14px;
    padding-top:14px;
    border-top:1px solid #d9e6dd;
}

.follow-up.visible{
    display:block;
}

.follow-up label{
    display:block;
    font-weight:600;
    margin-bottom:8px;
    color:#166534;
}

.follow-up textarea{
    width:100%;
    box-sizing:border-box;
    min-height:90px;
    padding:12px;
    border:1px solid #cfd8d3;
    border-radius:8px;
    resize:vertical;
    font:inherit;
}

/* ======================================================
   REPORT STYLING
====================================================== */
.report-container{
    max-width: 1120px;
    margin: 0 auto;
    padding: 32px 24px 48px;
    box-sizing: border-box;
}

/* Standard compliance disclaimer, shown once at the very bottom of the
   report — the compliance-critical counterpart to .welcome-disclaimer
   on the quiz welcome page. Deliberately more visible than that one
   (centred, a full paragraph, not italic) since this is the report the
   person keeps and may share, not a page they click past in seconds. */
.report-footer-disclaimer{
    margin-top:3rem;
    padding-top:1.75rem;
    border-top:1px solid var(--report-chip-border, #E2E8F0);
    text-align:center;
    color:var(--text-muted);
    font-size:.85rem;
    line-height:1.6;
    max-width:760px;
    margin-left:auto;
    margin-right:auto;
}

/* Closing "how we validate this" note, directly above the disclaimer
   above — see ReportBuilder. Both links inside open in a new tab. */
.pwb-report-evidence-footer{
    margin-top:2rem;
    text-align:center;
    color:var(--text-muted);
    font-size:.85rem;
    line-height:1.6;
    max-width:760px;
    margin-left:auto;
    margin-right:auto;
}

.pwb-report-evidence-footer a{
    font-weight:600;
}

/* Non-diagnostic safety-net callout — see ReportBuilder.php and
   ReportDataBuilder::computeSafetyFlags(). Warm, not alarming: this is
   a nudge alongside the recommendations, not a warning that something
   is wrong, so it's styled distinctly from an error state (amber/cream
   rather than red) while still standing apart from ordinary report copy. */
.report-safety-callout{
    margin:1.5rem 0 2rem;
    padding:1.25rem 1.5rem;
    background:#FFFBEB;
    border:1px solid #FDE68A;
    border-radius:12px;
    color:#78350F;
    font-size:.95rem;
    line-height:1.6;
}
.report-safety-callout-lead{
    font-weight:600;
    margin:0 0 .5rem;
}
.report-safety-callout p{
    margin:0 0 .5rem;
}
.report-safety-callout-note{
    margin:.75rem 0 0 !important;
    font-size:.85rem;
    color:#92600C;
}

/* ======================================================
   MASTHEAD
   A single, tight header — brand kicker, personalised greeting, one
   orientation line — replacing the old stacked "Personal Wellness
   Blueprint" title / "Client: X" line / empty "Summary" heading.
====================================================== */
.report-masthead{
    background:linear-gradient(135deg, var(--primary-soft), var(--surface) 70%);
    border-radius:18px;
    padding:36px 40px;
    margin-bottom:28px;
    border-bottom:3px solid var(--accent);
}

.masthead-kicker{
    font-size:12px;
    font-weight:700;
    letter-spacing:.1em;
    text-transform:uppercase;
    color:var(--primary);
    margin-bottom:10px;
}

.masthead-greeting{
    margin:0 0 8px;
    font-size:34px;
    line-height:1.2;
    color:var(--text);
}

.masthead-subtitle{
    margin:0;
    font-size:15px;
    line-height:1.5;
    color:var(--text-secondary);
}

/* max-width:56ch removed 29 Sep 2026 (Simon's call, reported as "the text
   under Hi Jordan only reaches about 70% of the card") — a leftover from
   when this masthead was a two-column layout (this text beside the
   "Depth Behind Your Results" banner, since moved to the bottom of the
   report — see this file's earlier "side-by-side ... removed" comment,
   and MastheadSection's own docblock). That narrower column made a 56ch
   cap sensible; now that the masthead is single-column and full-width
   (matching .report-theme-picker-row above it), the same cap just leaves
   a large empty gap on wide screens instead of actually improving
   readability, so it's gone rather than just widened — this paragraph
   now wraps at the same width as everything else in the card. */

.masthead-tags{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:8px;
    margin-top:16px;
}

/* .masthead-row/.masthead-main/.masthead-scope (the side-by-side greeting
   + "depth behind your results" layout, plus its compact .scope-banner
   override) removed 29 Sep 2026, Simon's call — ScopeBanner now renders
   full width at the very bottom of the report instead (see ReportBuilder),
   using its own default full-width styling rather than a masthead-scoped
   override, so this masthead is a single column again. */

.masthead-tag{
    display:inline-flex;
    align-items:center;
    font-size:12.5px;
    font-weight:600;
    padding:5px 12px;
    border-radius:999px;
    background:var(--surface);
    color:var(--text);
    border:1px solid var(--border);
}

/* Compact consultant introduction, embedded directly in the masthead —
   see ConsultantCard::renderCompact(). Deliberately small and quiet next
   to the greeting: it's an introduction ("here's who sent you this"),
   not the main event — the fuller card near the end of the report is
   where a prospect actually goes to act on it. */
.masthead-consultant{
    display:flex;
    align-items:center;
    gap:10px;
    margin:10px 0 18px;
    padding:8px 14px 8px 8px;
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:999px;
    width:fit-content;
    max-width:100%;
}

.masthead-consultant-photo{
    flex:0 0 auto;
    width:32px;
    height:32px;
    border-radius:50%;
    object-fit:cover;
    display:block;
}

.masthead-consultant-photo-placeholder{
    background:var(--surface-soft);
}

.masthead-consultant-info{
    min-width:0;
    display:flex;
    align-items:baseline;
    flex-wrap:wrap;
    column-gap:8px;
    row-gap:2px;
}

.masthead-consultant-label{
    font-size:10px;
    font-weight:700;
    letter-spacing:.05em;
    text-transform:uppercase;
    color:var(--primary);
}

.masthead-consultant-name{
    font-size:13.5px;
    font-weight:700;
    color:var(--text);
}

.masthead-consultant-links{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
}

.masthead-consultant-link{
    font-size:12px;
    font-weight:600;
    color:var(--primary);
    text-decoration:none;
    border-bottom:1px solid var(--primary);
    padding-bottom:1px;
}

@media (max-width:640px){
    .masthead-consultant{
        width:100%;
    }
}

/* Allergies aren't just a preference — FoodResolver actively excludes
   matching foods for these, so they're flagged in a distinct, slightly
   more attention-grabbing style rather than blending in with the plain
   dietary-preference tags. */
.masthead-tag-allergy{
    background:#fdecec;
    color:#9c2b2b;
    border-color:#f3c8c8;
}

@media (max-width:640px){
    .report-masthead{
        padding:24px 22px;
    }

    .masthead-greeting{
        font-size:26px;
    }
}

@media (max-width:768px){
    .report-container{
        padding:20px 16px 32px;
    }
}

/* ======================================================
   SECTION HEADER
====================================================== */

.section-header{
    margin:0 0 2rem;
    padding:20px;
background:var(--surface);
border:1px solid var(--border);
    border-radius:20px;
}

.section-meta{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:1rem;
    margin-bottom:1rem;
}

.section-meta-left{
    display:flex;
    align-items:center;
    gap:.75rem;
}

.section-badge{
    display:inline-block;
    padding:.35rem .75rem;
    background:var(--primary-soft);
    color:var(--primary);
    border-radius:999px;
    font-size:.75rem;
    font-weight:600;
}

.section-icon{
    width:56px;
    height:56px;
    flex-shrink:0;
    border-radius:14px;
    background:var(--primary-soft);
    color:var(--primary);
    display:flex;
    align-items:center;
    justify-content:center;
}

.section-icon-svg{
    width:30px;
    height:30px;
    color:inherit;
}

.section-text{
    flex:1;
    color:var(--text);
}

.section-text h1{
    margin:0 0 .35rem;
    font-size:1.6rem;
    color:var(--text);
}

.section-subtitle{
    margin:0;
    color:var(--text-secondary);
    line-height:1.55;
    font-size:.95rem;
}

/* Mobile */

@media (max-width:640px){

    .section-header{
        padding:1.25rem;
    }

    .section-intro{
        align-items:flex-start;
    }

    .section-icon{
        width:60px;
        height:60px;
        border-radius:16px;
    }

    .section-text h1{
        font-size:1.5rem;
    }
}

.welcome-card{
    max-width:760px;
    margin:0 auto;
    text-align:center;
    padding:1rem 1rem 1.75rem;
}

.welcome-icon{
    width:84px;
    height:84px;
    margin:0 auto .5rem;
    border-radius:24px;
    background:var(--primary-soft);
    color:var(--primary);
    display:flex;
    align-items:center;
    justify-content:center;
}

.welcome-icon .section-icon-svg{
    width:44px;
    height:44px;
}

.welcome-card h1{
    margin:0 0 .75rem;
    font-size:2.6rem;
    font-weight:700;
    letter-spacing:-0.03em;
    line-height:1.1;
}

.welcome-card .subtitle{
    max-width:620px;
    margin:0 auto 2rem;
    color:var(--text-secondary);
    font-size:1.15rem;
    line-height:1.7;
    font-weight:400;
}

.welcome-card .next{
    min-width:280px;
    padding:.95rem 2rem;
    font-size:1.05rem;
    font-weight:600;
    border-radius:14px;
    color: var(--surface);
}

.welcome-stats{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:1rem;
    margin:2.5rem 0 2.25rem;
}

.stat{
    padding:1.1rem;
    border-radius:18px;
    background:var(--surface-soft);
    border:1px solid var(--border-soft);
}

.stat strong{
    display:block;
    font-size:2rem;
    line-height:1;
    color:var(--primary);
    margin-bottom:.35rem;
    font-weight:700;
}

.stat span{
    font-size:.9rem;
    color:var(--text-muted);
}

.welcome-note{
    margin-top:1rem;
    color:var(--text-muted);
    font-size:.9rem;
}

/* A reassurance, not boilerplate — deliberately calmer/quieter than
   .scope-banner above it (no card, no gradient) so it reads as a plain
   factual aside rather than a marketing claim, but still its own colour
   (not the muted grey .welcome-disclaimer uses) since this is meant to
   actually be read, not skimmed past like small print. Added 23 Sep 2026
   at Simon's request: wellness-space visitors are often specifically
   wary of their answers being fed to an AI model, and this system
   genuinely never does that — every score comes from this plugin's own
   nutritional pathway/food-science data, computed locally. */
.welcome-privacy-note{
    margin:0 0 1.25rem;
    padding:.75rem 1rem;
    border-radius:12px;
    background:var(--surface-soft);
    border:1px solid var(--border-soft);
    color:var(--text-secondary, var(--text-muted));
    font-size:.85rem;
    line-height:1.5;
    text-align:center;
}

/* Subtle, subordinate to .welcome-note above — this is the compliance
   disclaimer, not a helpful tip, so it's deliberately quieter: smaller,
   lighter and italic rather than matching the report footer's more
   visible treatment (see .report-footer-disclaimer). */
.welcome-disclaimer{
    margin-top:.75rem;
    color:var(--text-muted);
    font-size:.78rem;
    font-style:italic;
    line-height:1.5;
    opacity:.85;
}

/* Standard visually-hidden pattern (WordPress's own admin/theme CSS calls
   this same class .screen-reader-text, which is why the welcome card's
   retake form re-uses the name) — this page loads none of that CSS, only
   pwb.css, since it deliberately bypasses the active theme entirely (see
   PWB_Quiz_Controller's own docblock), so it has to be defined here too. */
.screen-reader-text{
    position:absolute;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
    white-space:nowrap;
    border:0;
}

/* "Retake & compare" prefill choice (28 Sep 2026, Simon's call): shown on
   the welcome card in place of the single "Begin Assessment" button only
   when a resolved code (link or the manual entry below) has a previous
   report with raw answers attached. */
.welcome-prefill-intro{
    max-width:520px;
    margin:0 auto 1rem;
    color:var(--text-secondary, var(--text-muted));
    font-size:.95rem;
    line-height:1.6;
}

.welcome-prefill-choice{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:center;
    gap:12px;
}

.welcome-prefill-choice .next{
    margin-top:0;
}

/* The manual "enter your code" fallback (28 Sep 2026) for someone who
   saved their code but not the retake link itself — a <details> so it
   stays out of the way of the primary Begin Assessment / prefill-choice
   action above it until asked for. */
.welcome-retake{
    margin-top:1.75rem;
    padding-top:1.25rem;
    border-top:1px solid var(--border-soft);
    text-align:center;
}

.welcome-retake summary{
    cursor:pointer;
    color:var(--text-secondary, var(--text-muted));
    font-size:.9rem;
    font-weight:600;
}

.welcome-retake-form{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:center;
    gap:10px;
    margin-top:1rem;
}

.welcome-retake-form input[type="text"]{
    padding:12px 14px;
    border-radius:10px;
    border:1.5px solid var(--border);
    font-size:.95rem;
    min-width:200px;
    box-sizing:border-box;
}

.welcome-retake-form .next{
    margin-top:0;
    min-width:0;
    padding:.8rem 1.5rem;
}

/* "The depth behind your Blueprint" — a second, more celebratory stat
   grid on the welcome page (distinct from .welcome-stats above, which is
   the practical "how long will this take me" row). Every value here is
   computed live from the taxonomy files by PWB\ScopeStats, so it can
   never drift out of date as the catalogue grows. */
.scope-banner{
    margin:1.5rem 0 2.25rem;
    padding:1.5rem 1.5rem 1.75rem;
    border-radius:20px;
    background:linear-gradient(135deg, var(--primary-soft), var(--surface-soft));
    border:1px solid var(--border-soft);
}

.scope-banner-label{
    font-size:.78rem;
    font-weight:700;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:var(--primary);
    text-align:center;
    margin-bottom:1.1rem;
}

.scope-banner-grid{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:.75rem;
}

.scope-stat{
    padding:.9rem .5rem;
    border-radius:14px;
    background:var(--surface);
    border:1px solid var(--border-soft);
    text-align:center;
}

.scope-stat strong{
    display:block;
    font-size:1.5rem;
    line-height:1.1;
    color:var(--text);
    font-weight:700;
    margin-bottom:.2rem;
}

.scope-stat span{
    font-size:.72rem;
    color:var(--text-muted);
    line-height:1.3;
}

.scope-stat-highlight{
    background:var(--primary-soft);
    border-color:transparent;
}

.scope-stat-highlight strong{
    color:var(--primary);
}

.scope-stat-you{
    background:var(--accent);
    border-color:transparent;
}

.scope-stat-you strong,
.scope-stat-you span{
    color:var(--surface);
}

.scope-stat-you strong{
    font-size:1.8rem;
}

@media (max-width:640px){
    .scope-banner-grid{
        grid-template-columns:repeat(2, 1fr);
    }
}

.journey-nav{
    position:relative;
    margin:0 0 24px;
    padding:6px 0 0;
}

.journey-track{
    position:absolute;
    top:28px;
    left:28px;
    right:28px;
    height:3px;
    background:var(--border);
    border-radius:999px;
    z-index:0;
}

.journey-track-fill{
    position:absolute;
    top:28px;
    left:28px;
    height:3px;
    background:var(--primary);
    border-radius:999px;
    z-index:1;
    max-width:calc(100% - 56px);
    transition:width .3s ease;
}

.journey-nodes{
    position:relative;
    z-index:2;
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
}

.journey-node{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:10px;
    text-decoration:none;
    flex:1;
    min-width:0;
}

.journey-node.current{
    gap:14px;
}

.journey-icon-circle{
    position:relative;
    width:56px;
    height:56px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:var(--surface);
    border:2px solid var(--border);
    color:var(--text-muted);
    transition:all .2s ease;
}

.journey-icon-circle .section-icon-svg{
    width:30px;
    height:30px;
}

.journey-node.current .journey-icon-circle{
    background:var(--primary);
    border-color:var(--primary);
    color:var(--surface);
    box-shadow:0 0 0 5px var(--primary-soft);
    transform:scale(1.18);
}

.journey-node.complete .journey-icon-circle{
    background:var(--primary);
    border-color:var(--primary);
    color:var(--surface);
}

.journey-node.upcoming .journey-icon-circle{
    background:var(--surface);
    border-color:var(--border);
    color:var(--text-muted);
}

.journey-node-label{
    font-size:.68rem;
    color:var(--text-muted);
    text-align:center;
    line-height:1.2;
    max-width:72px;
    display:none;
}

.journey-node.current .journey-node-label{
    display:block;
    color:var(--primary);
    font-weight:600;
}

.journey-badge{
    position:absolute;
    top:-6px;
    right:-8px;
    min-width:22px;
    height:22px;
    padding:0 5px;
    border-radius:999px;
    font-size:.75rem;
    font-weight:700;
    display:flex;
    align-items:center;
    justify-content:center;
    line-height:1;
    border:2px solid var(--surface);
    box-shadow:0 1px 3px rgba(0,0,0,.15);
}

.journey-badge-remaining{
    background:#D97706;
    color:#FFFFFF;
}

.journey-badge-complete{
    background:#16A34A;
    color:#FFFFFF;
    font-size:.85rem;
}

@media (max-width:640px){

    .journey-track,
    .journey-track-fill{
        left:16px;
        right:16px;
    }

    .journey-icon-circle{
        width:40px;
        height:40px;
    }

    .journey-icon-circle .section-icon-svg{
        width:22px;
        height:22px;
    }

    .journey-badge{
        min-width:18px;
        height:18px;
        font-size:.65rem;
    }

    .journey-node-label{
        display:none !important;
    }
}

/* Smallest phones: shrink further so all 9 stops (8 sections +
   review) stay visible and tappable without overlapping or
   forcing horizontal scroll */
@media (max-width:400px){

    .journey-track,
    .journey-track-fill{
        left:10px;
        right:10px;
    }

    .journey-nodes{
        gap:2px;
    }

    .journey-icon-circle{
        width:30px;
        height:30px;
        border-width:1.5px;
    }

    .journey-icon-circle .section-icon-svg{
        width:16px;
        height:16px;
    }

    .journey-node.current .journey-icon-circle{
        transform:scale(1.15);
    }

    .journey-badge{
        min-width:15px;
        height:15px;
        font-size:.55rem;
        top:-4px;
        right:-5px;
    }
}

/* ======================================================
   THEME PICKER
====================================================== */

.theme-picker{
    display:flex;
    justify-content:flex-end;
    align-items:center;
    gap:.75rem;
    margin-bottom:1rem;
}

/* Report-only wrapper: the questionnaire places .theme-picker inside its
   own .section-meta flex row, but the report has no equivalent header row
   to sit inside, so this gives it one — full width, sitting above the
   masthead card. Now shared with the "Highlights only / Full detail"
   toggle (see .detail-toggle below), so this switches from a simple
   right-align to space-between: the detail toggle on the left, the theme
   picker keeping its usual place on the right. */
.report-theme-picker-row{
    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-wrap:wrap;
    gap:.75rem;
}

/* "Highlights only" / "Full detail" — sits beside the theme picker (same
   row, same visual weight) since both are report-wide display choices a
   prospect might want to change on their own reading of the report. A
   simple two-button segmented control rather than a single toggle switch,
   so both states are always legible without relying on an on/off colour
   alone. */
.detail-toggle,
.pwb-bodysystem-journey-view-toggle{
    display:flex;
    gap:2px;
    padding:2px;
    background:var(--surface-soft);
    border:1px solid var(--border);
    border-radius:999px;
}

.detail-toggle-option,
.pwb-bodysystem-journey-view-option{
    border:none;
    background:transparent;
    color:var(--text-secondary);
    font-size:.8rem;
    font-weight:600;
    padding:.4rem .9rem;
    border-radius:999px;
    cursor:pointer;
    transition:background .15s ease, color .15s ease;
    white-space:nowrap;
}

.detail-toggle-option:hover,
.pwb-bodysystem-journey-view-option:hover{
    color:var(--text);
}

.detail-toggle-option.is-active,
.pwb-bodysystem-journey-view-option.is-active{
    background:var(--primary);
    color:var(--surface);
}

/* The journey-view toggle sits inline in the overlay header, not full
   width like .detail-toggle at the top of the report — see
   BodySystemJourneyModal::renderModalMarkup(). */
.pwb-bodysystem-journey-view-toggle{
    display:inline-flex;
    margin:10px 0 4px;
}

/* Sections/cards folded away in "Highlights only" mode — see the
   .detail-toggle script in ReportBuilder, which adds/removes this class
   on <body>. Everything else (the heat grid, the wellness ladder, the
   dashboard's single top product/pack pick) stays visible in both modes.
   Also folded away in Super Simple (29 Sep 2026, Simon's call) — this
   class wraps sections that live outside DashboardSection entirely
   (Wellness Priorities/Movement/Nutritional Pathways/Priority Foods in
   one block, Recommended Products and Priority Bioactives each in their
   own — see ReportBuilder), so .pwb-classic-dashboard hiding the dashboard
   itself never touched them: Super Simple was showing all of it until
   this was added. */
body.report-mode-highlights .pwb-detail-only,
body.report-mode-supersimple .pwb-detail-only{
    display:none !important;
}

/* The mirror image of the rule above — content shown ONLY in "Highlights
   only" mode. Nothing currently uses this class (HighlightFoodsSection
   used to, but now renders in both modes — see ReportBuilder); kept
   in case a future Highlights-exclusive section needs it. Hidden by
   default so Full detail mode never sees it. */
.pwb-highlights-only{
    display:none;
}

body.report-mode-highlights .pwb-highlights-only{
    display:block;
}

.theme-label{
    font-size:.85rem;
    color:var(--text-muted);
    font-weight:500;
}

.theme-options{
    display:flex;
    gap:.55rem;
}

.theme-dot{
    width:18px;
    height:18px;
    border-radius:50%;
    display:block;
    border:2px solid var(--surface);
    box-shadow:0 0 0 1px rgba(0,0,0,.08);
    transition:transform .15s ease;
}

.theme-dot:hover{
    transform:scale(1.12);
}

.theme-dot.green{ background:#0F7A42; }
.theme-dot.ocean{ background:#1565C0; }
.theme-dot.lavender{ background:#6A1B9A; }
.theme-dot.amber{ background:#B7791F; }

.review-list{
    display:flex;
    flex-direction:column;
    gap:14px;
    margin-top:24px;
}

.review-card{
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:16px;
    padding:18px;
}

.review-row{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:16px;
}

.review-row h3{
    margin:0 0 4px;
    font-size:1rem;
}

.review-row p{
    margin:0;
    color:var(--text-muted);
    font-size:.9rem;
}

.review-row a{
    color:var(--primary);
    text-decoration:none;
    font-weight:600;
}

/* ==========================================
   REVIEW ACCORDION
========================================== */

.review-header{
    display:flex;
    gap:18px;
    align-items:flex-start;
    margin-bottom:24px;
}

.review-success{
    width:56px;
    height:56px;
    border-radius:16px;
    background:var(--primary-soft);
    color:var(--primary);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:28px;
    font-weight:700;
    flex-shrink:0;
}

.review-success-incomplete{
    background:#FEF3C7;
    color:#92400E;
}

.review-header h2{
    margin:0 0 6px;
}

.review-header p{
    margin:0;
    color:var(--text-muted);
}

.review-tip{
    margin-top:8px;
    font-size:.85rem;
    color:var(--text-muted);
}

.review-list{
    display:flex;
    flex-direction:column;
    gap:14px;
    margin-bottom:28px;
}

.review-section{
    border:1px solid var(--border);
    border-radius:18px;
    overflow:hidden;
    background:var(--surface);
}

.review-summary{
    width:100%;
    background:none;
    border:none;
    padding:14px 18px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    cursor:pointer;
}

.review-left{
    display:flex;
    align-items:center;
    gap:14px;
    text-align:left;
}

.review-icon{
    width:52px;
    height:52px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
}

.review-icon-svg{
    width:40px;
    height:40px;
    color:inherit;
}

.review-left h3{
    margin:0 0 4px;
    font-size:1rem;
}

.review-left p{
    margin:0;
    font-size:.85rem;
    color:var(--text-muted);
}

.review-right{
    display:flex;
    align-items:center;
    gap:6px;
}

.review-count{
    background:#E8F6EE;
    color:#0F7A42;
    padding:4px 10px;
    border-radius:999px;
    font-size:.8rem;
    font-weight:600;
}

.review-chevron{
    transition:transform .25s ease;
    color:var(--text-muted);
}

.review-content{
    display:none;
    border-top:1px solid var(--border);
    padding:18px;
    gap:14px;
    flex-direction:column;
}

.review-section.open .review-content{
    display:flex;
}

.review-section.open .review-chevron{
    transform:rotate(180deg);
}

.review-answer{
    display:flex;
    flex-direction:column;
    gap:4px;
}

.review-answer strong{
    font-size:.9rem;
}

.review-answer span{
    color:var(--text-muted);
}

.review-edit{
    margin-top:8px;
    color:var(--primary);
    text-decoration:none;
    font-weight:600;
}

.review-tip{
    display:flex;
    align-items:center;
    gap:6px;
    margin-top:10px;
    font-size:.85rem;
    color:var(--text-muted);
}

.review-tip i{
    color:var(--text-muted);
    opacity:.7;
}

.review-green  { background:#E8F6EE; color:#0F7A42; }
.review-lime   { background:#EEF7E4; color:#6FA92E; }
.review-gold   { background:#FFF6DB; color:#C69200; }
.review-teal   { background:#E3F5F2; color:#178F82; }
.review-indigo { background:#E8EBFA; color:#4B5FD1; }
.review-violet { background:#F2E8FA; color:#8B3FC7; }
.review-brown  { background:#F2ECE7; color:#8A5A3B; }
.review-rose   { background:#FCE7EF; color:#D63A73; }

.review-question-label{
    display:flex;
    align-items:center;
    gap:8px;
    font-weight:600;
}

.review-optional-badge{
    display:inline-block;
    padding:2px 8px;
    border-radius:999px;
    background:#F1F5F9;
    color:#64748B;
    font-size:12px;
    font-weight:600;
}

.review-answer-label{
    display:flex;
    align-items:center;
    gap:8px;
    margin-bottom:4px;
}

.review-optional{
    font-size:11px;
    font-weight:600;
    color:#64748B;
    background:#F1F5F9;
    border-radius:999px;
    padding:2px 8px;
}

.review-answer em{
    color:#94A3B8;
    font-style:normal;
}

.review-status{
    font-size:12px;
    font-weight:600;
    padding:4px 10px;
    border-radius:999px;
    white-space:nowrap;
}

.review-status-complete{
    background:#DCFCE7;
    color:#166534;
}

.review-status-missing{
    background:#FEF3C7;
    color:#92400E;
}


.recommendation-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 15px;
}

.recommendation-table th {
    background: #E8F3EA;
    color: #2E6F40;
    padding: 10px;
    text-align: left;
}

.recommendation-table td {
    padding: 10px;
    border-bottom: 1px solid #DDDDDD;
}

.score {
    text-align: center;
    font-weight: 600;
}

.section-intro {
    margin-bottom: 14px;
    color: #555;
    line-height: 1.5;
}


.section-intro{
    color:#666;
    line-height:1.6;
    margin-bottom:20px;
}

/* An inline text trigger inside a .section-intro paragraph (e.g. Top
   Priority Foods' "see 'Full detail' for the reasoning behind each one")
   that switches the whole report's detail-level mode — see the
   [data-detail-toggle-target] handler in ReportBuilder's script block.
   Styled to read as a link, not a generic <button>. */
.section-intro-link{
    background:none;
    border:none;
    padding:0;
    margin:0;
    font:inherit;
    font-weight:600;
    color:var(--primary);
    text-decoration:underline;
    cursor:pointer;
}

.section-intro-link:hover,
.section-intro-link:focus-visible{
    color:var(--accent);
}

.recommendation-card{
    border:1px solid var(--report-card-border);
background:var(--report-card-bg);
    border-radius:10px;
    padding:16px 18px;
    margin-bottom:18px;
}

.recommendation-card p{
    margin:8px 0;
}

.recommendation-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.recommendation-header h3{
    margin:0;
    color:var(--report-heading);
    font-size:20px;
}

.score-badge{
    background:var(--report-score-bg);
color:var(--report-score-text);
    font-weight:700;
    padding:6px 12px;
    border-radius:20px;
    min-width:56px;
    text-align:center;
}

.tag-row{
    margin-top:12px;
}

.tag{
    display:inline-block;
    background:var(--report-chip-bg);
color:var(--report-chip-text);
    padding:4px 10px;
    border-radius:12px;
    font-size:12px;
    margin:2px 6px 2px 0;
}

.recommendation-title-group{
    display:flex;
    align-items:center;
    gap:12px;
}

/* Same footprint as .food-group-icon (22x22) so the rank number and the
   food-group icon that sits right beside it (in Priority Foods' card
   header) read as a matched pair rather than two different-sized circles. */
.rank-badge{
    width:22px;
    height:22px;
    border-radius:50%;
    background:var(--primary);
    color:white;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:700;
    font-size:12px;
    flex-shrink:0;
}

.mechanism-row{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin:8px 0 12px;
}

.mechanism-chip{
background:var(--report-mechanism-bg);
color:var(--report-mechanism-text);
    padding:6px 10px;
    border-radius:999px;
    font-size:12px;
    font-weight:600;
}

.body-label{
    margin:14px 0 8px;
    font-size:12px;
    font-weight:700;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:var(--text-muted);
}

/* ========================================
   BODY SYSTEM PRIORITY CARDS
======================================== */

.body-system-card{
    background:var(--report-card-bg);
border:1px solid var(--report-card-border);
    border-radius:14px;
    padding:18px;
    margin-bottom:18px;
}

.body-system-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:14px;
}

.body-system-title{
    display:flex;
    align-items:center;
    gap:12px;
}

.body-system-title h3{
    margin:0;
    color:var(--report-heading);
    font-size:20px;
}

.body-food-row{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
}

.body-food-chip{
    background:var(--report-chip-bg);
color:var(--report-chip-text);
    padding:7px 12px;
    border-radius:999px;
    font-size:13px;
    font-weight:500;
}

.priority-label{
    margin-top:4px;
    color:var(--primary);
    font-size:13px;
    font-weight:600;
}

/* Shared title-row pattern: a card's h3 and its short subtitle/tag sit on
   the same baseline rather than stacking, matching the "icon + title on
   one line" treatment Priority Foods already used. Used by Your Wellness
   Priorities (title + interpretation) and Priority Bioactives (title +
   category/subcategory) so both read the same way. */
.card-title-row{
    display:flex;
    align-items:baseline;
    gap:10px;
    flex-wrap:wrap;
}

.card-title-row h3{
    margin:0;
}

.card-subtitle{
    font-size:12.5px;
    font-weight:600;
    color:var(--text-muted);
    text-transform:uppercase;
    letter-spacing:.03em;
}

.body-summary{
    margin:0 0 16px;
    color:var(--report-body);
    line-height:1.55;
}

.body-section-title{
    margin:14px 0 8px;
    font-size:12px;
    font-weight:700;
    letter-spacing:.04em;
    text-transform:uppercase;
    color:var(--text-muted);
}

.body-system-card{
    transition:transform .18s ease, box-shadow .18s ease;
}

.body-system-card:hover{
    transform:translateY(-2px);
    box-shadow:0 8px 20px rgba(0,0,0,.06);
}

.body-food-chip{
    transition:background .15s ease;
}

.body-food-chip:hover{
    background:var(--primary-soft);
    color:var(--primary);
}

/* Clickable pills (body-system "Foods to emphasise" and bioactive "Best
   food sources") that open the shared food-info popup — see FoodInfoModal
   and BodySystemsSection/BioactiveSection. Real <button>s now rather than
   plain <span>s, reset back to how the chip looked before, plus the small
   "i" in a circle that mirrors MechanismPopover's own info-icon so both
   kinds of pill read the same way. */
.body-food-chip-clickable{
    display:inline-flex;
    align-items:center;
    gap:5px;
    border:none;
    cursor:pointer;
    font-family:inherit;
}

.body-food-chip-clickable .info-icon{
    font-size:12px;
    opacity:.65;
}

.body-food-chip-clickable:hover .info-icon,
.body-food-chip-clickable:focus-visible .info-icon{
    opacity:1;
}

.score-badge{
    display:flex;
    align-items:baseline;
    gap:2px;
}

.score-label{
    font-size:11px;
    opacity:.8;
    font-weight:500;
}

/* ==========================================
   Mechanism popover
========================================== */


.mechanism-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    border-radius: 999px;
    background: var(--report-mechanism-bg);
    color: var(--report-mechanism-text);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    list-style: none;
    user-select: none;
}

.mechanism-chip::-webkit-details-marker {
    display: none;
}

.mechanism-chip .info {
    font-size: 12px;
    opacity: .7;
}

.mechanism-popover {
    position: relative;
    display: inline-block;
    margin: 0 8px 8px 0;
}

.mechanism-card {
    position: absolute;
    left: 0;
    bottom: calc(100% + 12px);
    width: 340px;
    z-index: 1000;
    background: var(--color-surface-elevated);
    opacity: 1;
    border: 1px solid var(--color-border);
    border-radius: 16px;
    padding: 18px;
    box-shadow: 0 16px 40px rgba(15,23,42,.18);
}

.mechanism-card h5 {
    margin: 0 0 4px;
    font-size: 16px;
}

.mechanism-evidence {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 999px;
    background: var(--color-primary-light);
    color: var(--color-primary-dark);
    font-size: 11px;
    font-weight: 700;
    margin-bottom: 10px;
}

.mechanism-summary{
    font-size:18px;
    font-weight:400;
    line-height:1.45;
    color: var(--color-text-secondary);
    margin-top:8px;
    margin-bottom:16px;
}

.mechanism-card p {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    color: var(--color-text-secondary);
}

.mechanism-card::after {
    content: "";
    position: absolute;
    left: 28px;
    top: 100%;

    width: 14px;
    height: 14px;

    background: var(--color-surface-elevated);
    border-right:1px solid var(--color-border);
    border-bottom:1px solid var(--color-border);

    transform: rotate(45deg) translateY(-7px);
}

.mechanism-divider{
    border:0;
    border-top: 1px solid var(--color-border);
    margin:14px 0;
}

.mechanism-label{
    font-size:11px;
    font-weight:700;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:var(--color-primary);
    margin-bottom:8px;
}

/* ==========================================
   Nutritional Pathways (PathwaysSection) — groups the fully-expanded
   pathway cards below by body system. Reuses .body-system-header/
   .body-system-title (the same heading treatment as Your Wellness
   Priorities) and .bioactive-card (the same fully-expanded card
   treatment as Priority Bioactives) rather than introducing new card
   styling, so this section's level of detail reads consistently with
   the two it sits between.
========================================== */

.pathway-system-group{
    margin-bottom:28px;
}

.pathway-system-group .body-system-header{
    margin-bottom:16px;
}

/* ==========================================
   Pathway journey diagram (PathwayJourneyDiagram) — the "See the
   nutritional journey" progressive-disclosure block inside a pathway
   card. Thin-line, chip-labelled SVG per Simon's own visual-weight
   feedback (23 Sep 2026): never a value-proportional "fat ribbon", and
   colour stays theme-aware via color-mix() exactly like LadderSection's
   score bands, rather than a fixed hex baked in at render time.
========================================== */

.pathway-journey-toggle{
    margin-top:16px;
}

.pathway-journey-diagram{
    margin-top:12px;
    padding:20px 18px 16px;
    background:var(--surface-soft);
    border:1px solid var(--border-soft);
    border-radius:14px;
    overflow-x:auto;
}

.pathway-journey-col-labels{
    display:flex;
    justify-content:space-between;
    font-size:10.5px;
    font-weight:700;
    letter-spacing:.05em;
    text-transform:uppercase;
    color:var(--text-muted);
    padding:0 4px;
    margin-bottom:4px;
    min-width:520px;
}

.pathway-journey-svg{
    display:block;
    width:100%;
    min-width:520px;
    height:auto;
    overflow:visible;
}

.pathway-journey-link{
    fill:none;
    stroke-linecap:round;
    opacity:.9;
}

.pathway-journey-chip{
    fill:var(--surface);
    stroke:var(--border);
    stroke-width:1px;
}

.pathway-journey-node-mechanism .pathway-journey-chip,
.pathway-journey-node-system .pathway-journey-chip{
    fill:var(--primary-soft);
    stroke:var(--primary-soft);
}

.pathway-journey-dot{
    fill:var(--text-muted);
}

.pathway-journey-dot-compound{
    fill:var(--accent);
}

.pathway-journey-dot-mechanism,
.pathway-journey-dot-system{
    fill:var(--primary);
}

.pathway-journey-label{
    font-size:11.5px;
    font-weight:600;
    fill:var(--text);
}

.pathway-journey-node-mechanism .pathway-journey-label,
.pathway-journey-node-system .pathway-journey-label{
    fill:var(--primary-hover);
}

.pathway-journey-legend{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:12px;
    margin-top:14px;
    padding-top:12px;
    border-top:1px solid var(--border-soft);
    font-size:11px;
    color:var(--text-muted);
}

.pathway-journey-legend-ramp{
    display:inline-flex;
    align-items:center;
    gap:4px;
}

.pathway-journey-ramp-swatch{
    width:16px;
    height:9px;
    border-radius:2px;
}

.pathway-journey-evidence-tag{
    display:inline-block;
    background:var(--primary-soft);
    color:var(--primary-hover);
    font-weight:700;
    font-size:10.5px;
    padding:3px 9px;
    border-radius:10px;
}

/* ==========================================
   Vitamins & Minerals (VitaminMineralSection, 30 Sep 2026) — reuses
   .bioactive-card and its sibling classes wholesale (same fully-expanded
   card treatment as Priority Bioactives/Nutritional Pathways) for visual
   consistency between the report's "deeper detail" sections. Only these
   two wrapper rules are new: the Vitamins/Minerals subheading and a
   little breathing room between the two card groups.
========================================== */

.vitamin-mineral-subhead{
    margin:0 0 14px;
    color:var(--report-heading);
    font-size:18px;
}

.vitamin-mineral-grid{
    margin-bottom:24px;
}

/* ==========================================
   Bioactive cards
========================================== */

.bioactive-card{
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:20px;
    padding:24px;
    margin-bottom: 18px;
}

.bioactive-header{
    display:grid;
    grid-template-columns:1fr auto;
    align-items:start;
    gap:16px;
    margin-bottom:18px;
}

.bioactive-title{
    flex:1;
    min-width:0;
}

/* SYNERGY EDITION ONLY — unreachable in the generic edition: product card, factsheet link, product strip and "Buy more, save more" styles below (.product-card-*, .factsheet-link*, .product-strip-*, .dashboard-product-strip, .quantity-pricing-*) are used only when a report carries a product or pack. */
/* Recommended Products' variant of the bioactive card header — adds a
   product photo thumbnail (ProductSection only; plain bioactives have no
   product to picture) as a third grid column ahead of the title. */
.product-card-header{
    grid-template-columns:64px 1fr auto;
}

.product-card-thumb{
    display:flex;
    align-items:center;
    justify-content:center;
}

.product-card-thumb-img{
    width:64px;
    height:64px;
    object-fit:contain;
    display:block;
}

.product-card-thumb-placeholder{
    background:var(--surface-soft);
    border-radius:8px;
}

.bioactive-title h3{
    margin:0 0 4px;
    font-size:20px;
    line-height:1.3;
    color:var(--text);
}

.bioactive-subtitle{
    margin-top:4px;
    color:var(--primary);
    font-size:14px;
    font-weight:600;
}

.bioactive-summary{
    margin:0 0 18px;
    color:var(--text-secondary);
    line-height:1.6;
}

.bioactive-category{
    font-size:12.5px;
    font-weight:600;
    color:var(--text-muted);
    text-transform:uppercase;
    letter-spacing:.03em;
}

.bioactive-primary-action{
    font-size:14px;
    font-weight:600;
    color:var(--text);
    background:var(--accent-soft);
    border-left:3px solid var(--accent);
    padding:10px 14px;
    border-radius:8px;
    margin:0 0 14px;
}

.tag-evidence{
    background:var(--primary-soft);
    color:var(--primary);
    font-weight:700;
}

/* Evidence pill made clickable in PathwaysSection when there's a
   guardrail caution or verified citations to show beyond the pill's own
   text (Simon's call, 29 Sep 2026 — see
   PathwaysSection::renderEvidencePill()). The pill's own look is
   untouched (still .tag.tag-evidence) — this just adds the pointer
   cursor and strips the <summary> element's native disclosure marker, the
   same way .mechanism-chip does for the pathway-journey chip above. The
   popup card itself reuses .mechanism-popover/.mechanism-card as-is. */
.tag-evidence-toggle{
    cursor:pointer;
    list-style:none;
    user-select:none;
}

.tag-evidence-toggle::-webkit-details-marker{
    display:none;
}

.tag-evidence-toggle .info-icon{
    font-size:11px;
    opacity:.75;
    margin-left:2px;
}

.bioactive-more{
    margin:4px 0 16px;
}

.bioactive-more summary{
    cursor:pointer;
    font-size:13.5px;
    font-weight:600;
    color:var(--primary);
    list-style:none;
    display:inline-flex;
    align-items:center;
    gap:6px;
}

.bioactive-more summary::-webkit-details-marker{
    display:none;
}

.bioactive-more p{
    margin:10px 0 0;
    color:var(--text-secondary);
    line-height:1.6;
}

/* Factsheet download link, inside a product card's "More about" expander
   (ProductSection) only — bioactives have no equivalent, so this sits
   alongside .bioactive-more rather than as a variant of it. */
.factsheet-link{
    display:inline-flex;
    align-items:center;
    gap:6px;
    margin-top:10px;
    font-size:13.5px;
    font-weight:600;
    color:var(--primary);
    text-decoration:none;
    border-bottom:1px solid var(--primary);
    padding-bottom:1px;
}

.factsheet-link:hover{
    opacity:.8;
}

.factsheet-link-icon{
    width:15px;
    height:15px;
    flex:0 0 auto;
}

/* Wraps "Download factsheet" + "More information" side by side inside a
   product card's "More about" expander (ProductSection) — the shop link
   uses the exact same .product-strip-more-info styling and shopUrl-driven
   behaviour as the single top-pick product strip on the dashboard. */
.product-strip-links{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:8px 20px;
    margin-top:10px;
}

.product-strip-links .factsheet-link,
.product-strip-links .product-strip-more-info{
    margin-top:0;
}

.mechanism-chip-row{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-top:8px;
}

.food-recommendation {
    display: inline-flex;
    align-items: center;
    padding: 10px 18px;
    border-radius: 999px;
    background: #0a8a4b;
    color: #fff;
    font-size: 0.9rem;
    font-weight: 700;
    white-space: nowrap;
}

.food-score-breakdown{
    margin-top:18px;
    border-top:1px solid #E5E7EB;
    padding-top:14px;
}

.food-score-breakdown summary{
    cursor:pointer;
    font-size:14px;
    font-weight:600;
    color:#0F766E;
    list-style:none;
    display:flex;
    align-items:center;
    gap:6px;
}

.food-score-breakdown summary::-webkit-details-marker{
    display:none;
}

.food-score-breakdown summary::after{
    content:'\25B8';
    font-size:12px;
    transition:transform 0.15s ease;
}

.food-score-breakdown[open] summary::after{
    transform:rotate(90deg);
}

.expand-hint{
    font-weight:400;
    color:var(--text-muted);
    font-size:12.5px;
}

/* ======================================================
   EXPLAINER POPOVER ("What does this mean?")
   A plain inline text-link toggle (not the bigger .expand-more pill) that
   reveals a short block of explanatory copy — used wherever a choice the
   person made (an allergy, a dietary preference) visibly changes their
   results, so the reasoning is one click away rather than either hidden
   or forced onto everyone as permanent on-page text.
====================================================== */
.explainer-popover{
    display:inline-block;
}

.explainer-toggle{
    cursor:pointer;
    list-style:none;
    display:inline-flex;
    align-items:center;
    gap:5px;
    font-size:12.5px;
    font-weight:600;
    color:var(--primary);
    text-decoration:underline;
    text-decoration-color:var(--primary-soft);
    text-underline-offset:2px;
}

.explainer-toggle::-webkit-details-marker{
    display:none;
}

.explainer-toggle .expand-chevron{
    display:inline-block;
    font-size:10px;
    transition:transform .15s ease;
}

.explainer-popover[open] .explainer-toggle .expand-chevron{
    transform:rotate(180deg);
}

.explainer-body{
    margin-top:12px;
    padding:16px 18px;
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:12px;
    max-width:60ch;
}

.explainer-body h5{
    margin:0 0 10px;
    font-size:13px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.04em;
    color:var(--text-muted);
}

.explainer-body p{
    margin:0 0 10px;
    font-size:13.5px;
    line-height:1.6;
    color:var(--report-body);
}

.explainer-body p:last-child{
    margin-bottom:0;
}

.explainer-body strong{
    color:var(--text);
}

/* Inside the masthead's tag row specifically, the popover's revealed body
   needs to break out of the flex row rather than sit awkwardly beside the
   pills. */
.masthead-tags .explainer-popover{
    flex-basis:100%;
}

/* "Why are we asking this?" — a small info-icon next to a question's own
   heading (QuestionRenderer::renderQuestion(), driven by questions.json's
   optional 'why_we_ask' field), only present on the handful of questions
   that don't obviously read as nutrition-relevant or feel a little
   personal asked outright. Same <details>/<summary> no-JS mechanism as
   .explainer-popover, styled as a quiet icon trigger rather than an
   underlined text link since it sits right beside a heading, not
   beneath a block of checkboxes. */
.question-title-row{
    display:flex;
    align-items:baseline;
    gap:8px;
    flex-wrap:wrap;
}

.question-title-row h3{
    margin:0;
}

.why-we-ask{
    display:inline-block;
}

.why-we-ask-icon{
    cursor:pointer;
    list-style:none;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:18px;
    height:18px;
    border-radius:50%;
    font-size:13px;
    line-height:1;
    color:var(--primary);
    background:var(--primary-soft);
}

.why-we-ask-icon::-webkit-details-marker{
    display:none;
}

.why-we-ask-icon:hover,
.why-we-ask-icon:focus-visible{
    color:#fff;
    background:var(--primary);
}

.why-we-ask-body{
    margin:8px 0 4px;
    padding:14px 16px;
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:12px;
    max-width:60ch;
    font-size:13.5px;
    line-height:1.6;
    color:var(--report-body);
    flex-basis:100%;
}

/* ======================================================
   EXPAND / COLLAPSE ("top 3, then show more")
   Used by Priority Foods, Priority Bioactives and Your Wellness
   Priorities so a long ranked list doesn't force a wall of scrolling
   before the next report section — the first 3 cards stay visible,
   the rest live behind this toggle.
====================================================== */
.expand-more{
    margin-top:8px;
}

.expand-more > summary{
    list-style:none;
    cursor:pointer;
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:12px 20px;
    border:1.5px solid var(--border);
    border-radius:999px;
    font-weight:600;
    font-size:14px;
    color:var(--primary);
    background:var(--surface);
    transition:border-color .15s ease, background .15s ease;
}

.expand-more > summary:hover{
    border-color:var(--primary);
    background:var(--primary-soft);
}

/* Priority Bioactives is the deliberately deeper, more research-oriented
   layer at the very end of the report (see BioactiveSection) - marked with
   the theme's accent hue rather than primary green throughout, so it reads
   visually as a distinct, optional layer rather than more of the same. */
.bioactive-section-deep{
    border-left:3px solid var(--accent);
    padding-left:20px;
}

.bioactive-section-deep .expand-more > summary{
    color:var(--accent);
}

.bioactive-section-deep .expand-more > summary:hover{
    border-color:var(--accent);
    background:var(--accent-soft);
}

.expand-more > summary::-webkit-details-marker{
    display:none;
}

.expand-more .expand-chevron{
    display:inline-block;
    transition:transform .15s ease;
}

.expand-more[open] .expand-chevron{
    transform:rotate(180deg);
}

.expand-more .expand-label-open{
    display:none;
}

.expand-more[open] .expand-label-closed{
    display:none;
}

.expand-more[open] .expand-label-open{
    display:inline;
}

.expand-more .expand-content{
    margin-top:16px;
}

.score-breakdown-table{
    margin-top:12px;
}

.score-row{
    display:flex;
    justify-content:space-between;
    padding:6px 0;
    font-size:14px;
    border-bottom:1px solid #F3F4F6;
}

.score-row.total{
    margin-top:6px;
    padding-top:10px;
    border-top:2px solid #D1D5DB;
    border-bottom:none;
    font-weight:700;
}

.score-breakdown-intro{
    font-size:13px;
    line-height:1.5;
    color:#64748B;
    margin:8px 0 12px;
}


/* ======================================================
   WELLNESS SNAPSHOT DASHBOARD
   The at-a-glance grid shown at the top of the report, above the
   longer-form sections. One accent hue (--primary) carries every score
   encoding (heat grid, radar, bars) so "more colour = higher score" means
   the same thing everywhere; --accent is used only decoratively (icon
   backgrounds) and never stands in for a score.
====================================================== */

.dashboard-section{
    margin-bottom:8px;
}

.dashboard-grid{
    display:grid;
    grid-template-columns:2fr 1fr 1fr;
    gap:16px;
    margin-top:20px;
}

.dashboard-card{
    background:var(--report-card-bg);
    border:1px solid var(--report-card-border);
    border-radius:14px;
    padding:20px 22px;
}

/* Key Mechanisms / Top Foods / Key Bioactives / Top Nutrients get their own
   nested row so a 4th card doesn't have to fight the outer grid's
   2fr/1fr/1fr template, which was sized for exactly the 3 cards that used
   to live here. Mechanisms keeps the wider column since its bar labels
   ("Activates Endogenous Antioxidant Pathways") are the longest of the four. */
.dashboard-insights-row{
    grid-column:1 / -1;
    display:grid;
    grid-template-columns:2fr 1fr 1fr 1fr;
    gap:16px;
}

.nutrient-type-tag{
    display:inline-block;
    font-size:10px;
    font-weight:700;
    letter-spacing:.03em;
    text-transform:uppercase;
    color:var(--text-muted);
    background:var(--surface-soft);
    border-radius:4px;
    padding:1px 5px;
    margin-left:4px;
    vertical-align:middle;
}

.dashboard-card-label{
    font-size:12px;
    font-weight:700;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:var(--text-muted);
    margin-bottom:6px;
}

.dashboard-card-caption{
    font-size:12px;
    color:var(--text-muted);
    line-height:1.5;
    margin:0 0 14px;
}

/* Row 1 — full-width personalised summary */
.dashboard-summary{
    grid-column:1 / -1;
    background:var(--primary-soft);
    border-color:transparent;
}

.dashboard-summary p{
    margin:0;
    font-size:17px;
    line-height:1.6;
    color:var(--text);
}

/* "Your top takeaways" card grid — replaces the old single paragraph as
   the hero content of the summary card. No max-width restriction here:
   the grid itself fills the card, which is what fixed the "doesn't go
   full width" complaint the old capped paragraph produced. */
.hero-card-grid-wrap{
    padding:26px 28px;
}

.hero-eyebrow{
    font-size:12px;
    font-weight:700;
    letter-spacing:.1em;
    text-transform:uppercase;
    color:var(--primary);
    margin-bottom:8px;
}

.hero-subline{
    font-size:14px;
    color:var(--text-secondary);
    margin:0 0 22px;
}

.hero-card-grid{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:14px;
}

.hero-takeaway-card{
    border-radius:12px;
    padding:18px 18px 20px;
    background:var(--surface);
    border:1px solid var(--border);
    position:relative;
}

/* No `overflow:hidden` on .hero-takeaway-card (removed 30 Sep 2026, Simon-
   reported bug): it was only ever there to keep this stripe's square
   corners from poking past the card's own rounded ones, but it also
   clipped anything that overflows the card's box -- including the Key
   Vitamin/Key Mineral cards' own NutrientPopover (.mechanism-card), which
   opens upward via `position:absolute; bottom:calc(100% + 12px)` and is
   taller than the gap between the card's top edge and its trigger, so most
   of the popover rendered outside the card and got silently clipped away.
   Rounding this pseudo-element's own top corners to match achieves the
   same visual (no square corner poking out) without clipping descendants. */
.hero-takeaway-card::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    right:0;
    height:4px;
    border-radius:12px 12px 0 0;
}

.hero-takeaway-a::before{ background:var(--primary); }
.hero-takeaway-b::before{ background:var(--accent); }
.hero-takeaway-c::before{ background:#D9A62E; }
.hero-takeaway-d::before{ background:#3E8FB0; }
.hero-takeaway-e::before{ background:#B3673F; }

.hero-takeaway-icon{
    width:34px;
    height:34px;
    border-radius:9px;
    background:var(--primary-soft);
    color:var(--primary);
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:12px;
}

.hero-takeaway-b .hero-takeaway-icon{ background:var(--accent-soft); color:var(--accent); }
.hero-takeaway-c .hero-takeaway-icon{ background:#FBF1D9; color:#B9860F; }
.hero-takeaway-d .hero-takeaway-icon{ background:#E1F0F5; color:#2A6B85; }
.hero-takeaway-e .hero-takeaway-icon{ background:#F5E9E0; color:#8C4E2C; }

.hero-takeaway-icon svg{
    width:18px;
    height:18px;
}

.hero-takeaway-tag{
    font-size:11px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.06em;
    color:var(--text-muted);
    margin-bottom:4px;
}

.hero-takeaway-title{
    font-size:17px;
    font-weight:700;
    color:var(--text);
    margin-bottom:6px;
    line-height:1.3;
}

.hero-takeaway-detail{
    font-size:12.5px;
    color:var(--text-secondary);
    line-height:1.5;
}

/* Second row — Key Vitamin / Key Mineral (30 Sep 2026, Simon's call: a
   second row of 2 below the original 3-card row, rather than reworking
   it into a 5-up grid). Same gap/card styling as .hero-card-grid above,
   just a 2-column track since there are always exactly 0-2 cards here. */
.hero-card-grid-secondary{
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    gap:14px;
    margin-top:14px;
}

@media (max-width:820px){
    .hero-card-grid{ grid-template-columns:1fr; }
    .hero-card-grid-secondary{ grid-template-columns:1fr; }
}

/* Row 2 — your goals strip (icons tying the dashboard back to the
   questionnaire's own outcome choices), paired with a dedicated goal-
   alignment card to its right rather than spanning the full width alone —
   up to 3 small chips never needed that much room. */
.dashboard-goals-row{
    grid-column:1 / -1;
    display:grid;
    grid-template-columns:1fr 2fr;
    gap:16px;
}

/* If there's truly nothing to say in the alignment card (no topSystem at
   all — only possible with an empty/edge-case assessment), let the goals
   card take the full row rather than leaving an empty column beside it. */
.dashboard-goals-row > .dashboard-card:only-child{
    grid-column:1 / -1;
}

.dashboard-goal-alignment{
    display:flex;
    align-items:center;
    gap:18px;
}

.goal-alignment-icon{
    width:64px;
    height:64px;
    border-radius:50%;
    background:var(--accent-soft);
    color:var(--accent);
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
}

.goal-alignment-icon .pwb-icon{
    width:36px;
    height:36px;
}

.goal-alignment-text{
    margin:0;
    font-size:15px;
    line-height:1.55;
    color:var(--report-body);
}

.goal-alignment-text strong{
    color:var(--primary);
}

.goal-chip-row{
    display:flex;
    flex-wrap:wrap;
    gap:20px;
    margin-bottom:14px;
}

.goal-chip{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:8px;
    width:84px;
    text-align:center;
}

.goal-chip-icon{
    width:52px;
    height:52px;
    border-radius:50%;
    background:var(--accent-soft);
    color:var(--accent);
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
}

.goal-chip-icon .pwb-icon{
    width:26px;
    height:26px;
}

.goal-chip-name{
    font-size:12px;
    font-weight:600;
    color:var(--text-secondary);
    line-height:1.3;
}

.goal-note{
    margin:0;
    font-size:14px;
    line-height:1.55;
    color:var(--report-body);
    padding-top:14px;
    border-top:1px solid var(--border-soft);
}

.goal-note strong{
    color:var(--primary);
}

/* Row 3 — body system heat grid, full width on its own row (Simon's call,
   23 Sep 2026: the map/radar pair below reads better as a full-width 50/50
   row of its own than squeezed alongside this into the outer grid's
   columns — see .dashboard-systems-charts-row). */
.dashboard-heatmap{
    grid-column:1 / -1;
}

/* Wraps the icon-wheel ("map") and spider ("shape") cards in a dedicated
   full-width row below the heat grid, split 50/50 on desktop. In
   Highlights mode the radar card (pwb-detail-only) disappears, so the row
   collapses to a single column and the wheel takes the full width rather
   than sitting stranded in a half-empty row. */
.dashboard-systems-charts-row{
    grid-column:1 / -1;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:16px;
}

body.report-mode-highlights .dashboard-systems-charts-row{
    grid-template-columns:1fr;
}

.heat-grid{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:10px;
}

.heat-cell{
    position:relative;
    background:var(--surface-soft);
    border:1px solid var(--border-soft);
    border-radius:12px;
    padding:12px;
    display:flex;
    flex-direction:column;
    gap:8px;
}

.heat-cell-top{
    background:var(--primary-soft);
    border-color:transparent;
}

.heat-cell-head{
    display:flex;
    align-items:center;
    gap:8px;
}

.heat-cell-icon{
    width:30px;
    height:30px;
    border-radius:50%;
    background:var(--accent-soft);
    color:var(--accent);
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
}

.heat-cell-icon .pwb-icon{
    width:17px;
    height:17px;
}

.heat-cell-name{
    font-size:12px;
    font-weight:600;
    color:var(--text-secondary);
    line-height:1.3;
}

.heat-cell-score-row{
    display:flex;
    align-items:baseline;
    justify-content:space-between;
}

.heat-cell-score{
    font-size:20px;
    font-weight:700;
    color:var(--text);
}

.heat-cell-tag{
    font-size:10px;
    font-weight:700;
    letter-spacing:.04em;
    text-transform:uppercase;
    color:var(--primary);
    background:var(--surface);
    border-radius:999px;
    padding:2px 7px;
}

.heat-cell-meter{
    background:var(--border-soft);
    border-radius:4px;
    height:6px;
    overflow:hidden;
}

.heat-cell-meter-fill{
    background:var(--primary);
    height:100%;
    border-radius:4px;
}

/* ======================================================
   WELLNESS LADDER (LadderSection)
   Full width at every size — Simon's own call, and rendered by
   DashboardSection directly under its own intro paragraph, ahead of the
   card grid below (see that class's docblock), so this needs its own
   bottom margin to read as a distinct block rather than crowding into
   the grid that follows it.
====================================================== */

.ladder-block{
    margin-bottom:20px;
}

.ladder-card{
    width:100%;
    display:flex;
    gap:20px;
    background:var(--report-card-bg);
    border:1px solid var(--report-card-border);
    border-radius:14px;
    padding:20px;
    box-sizing:border-box;
}

.ladder-legend{
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    flex-shrink:0;
    width:120px;
    padding:4px 0;
}

.ladder-legend-row{
    display:flex;
    align-items:center;
    gap:8px;
}

.ladder-legend-swatch{
    width:14px;
    height:14px;
    border-radius:4px;
    flex-shrink:0;
    border:1px solid var(--border);
}

.ladder-legend-label{
    font-size:.72rem;
    line-height:1.15;
    color:var(--text-secondary);
    font-weight:500;
}

.ladder-columns{
    display:flex;
    flex:1;
    gap:14px;
    overflow-x:auto;
}

.ladder-column{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:8px;
    flex:1;
    min-width:44px;
}

.ladder-track{
    position:relative;
    width:100%;
    max-width:34px;
    height:220px;
    border-radius:8px;
    overflow:hidden;
    display:flex;
    flex-direction:column;
    border:1px solid var(--border);
}

.ladder-track-band{
    flex:1;
}

.ladder-marker{
    position:absolute;
    left:50%;
    transform:translate(-50%, 50%);
    width:26px;
    height:26px;
    border-radius:50%;
    background:var(--surface);
    border:2px solid var(--primary);
    box-shadow:0 1px 4px rgba(0,0,0,.2);
    display:flex;
    align-items:center;
    justify-content:center;
}

.ladder-marker-score{
    font-size:.65rem;
    font-weight:700;
    color:var(--primary);
}

.ladder-column-icon-wrap{
    width:26px;
    height:26px;
    border-radius:50%;
    background:var(--accent-soft);
    color:var(--accent);
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
}

.ladder-column-icon-wrap .pwb-icon{
    width:15px;
    height:15px;
}

.ladder-column-name{
    font-size:.68rem;
    line-height:1.15;
    text-align:center;
    color:var(--text-secondary);
    font-weight:500;
}

.ladder-column-top .ladder-column-name{
    color:var(--text);
    font-weight:700;
}

.dashboard-radar{
    display:flex;
    flex-direction:column;
}

.radar-svg{
    width:100%;
    height:auto;
    margin-top:4px;
}

.radar-grid{
    fill:none;
    stroke:var(--border);
    stroke-width:1;
}

.radar-spoke{
    stroke:var(--border);
    stroke-width:1;
}

.radar-shape{
    fill:color-mix(in srgb, var(--primary) 22%, transparent);
    stroke:var(--primary);
    stroke-width:2;
    stroke-linejoin:round;
}

.radar-point{
    fill:var(--primary);
}

.radar-label{
    font-size:9px;
    fill:var(--text-secondary);
    font-family:Arial, Helvetica, sans-serif;
}

/* ======================================================
   YOUR PROGRESS (retake & compare) — ProgressSection
   ====================================================== */

/* Three even columns rather than the dashboard's own 2fr/1fr/1fr — the
   callout banner spans all three, the chart and the delta list split the
   remaining space evenly (1 column / 2 columns) since neither needs the
   dashboard's usual "wide first card" treatment. */
.progress-section .dashboard-grid{
    grid-template-columns:1fr 1fr 1fr;
}

/* The earlier snapshot's shape — a dashed outline rather than a filled
   colour, so it never competes with the "now" series (which reuses
   .radar-shape/.radar-point completely unchanged): a viewer should read
   "today" first, then notice how it compares to the fainter outline
   behind it. */
.radar-shape-then{
    fill:none;
    stroke:var(--text-muted);
    stroke-width:2;
    stroke-dasharray:4 3;
    stroke-linejoin:round;
}

.radar-point-then{
    fill:var(--surface);
    stroke:var(--text-muted);
    stroke-width:1.5;
}

.progress-legend{
    display:flex;
    gap:16px;
    margin-top:10px;
    font-size:11.5px;
    color:var(--text-muted);
}

.progress-legend-item{
    display:flex;
    align-items:center;
    gap:6px;
}

.legend-swatch{
    width:14px;
    height:14px;
    border-radius:3px;
    display:inline-block;
}

.legend-swatch-then{
    background:var(--surface);
    border:2px dashed var(--text-muted);
}

.legend-swatch-now{
    background:color-mix(in srgb, var(--primary) 22%, transparent);
    border:2px solid var(--primary);
}

.progress-list{
    display:flex;
    flex-direction:column;
}

.progress-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding:10px 0;
    border-bottom:1px solid var(--border-soft);
}

.progress-row:last-child{
    border-bottom:none;
}

.progress-row-name{
    font-size:13.5px;
    font-weight:600;
    color:var(--text);
    flex:1;
}

.progress-row-scores{
    font-size:12.5px;
    color:var(--text-muted);
    white-space:nowrap;
}

/* Arrow + word, never colour alone — a colourblind reader (or anyone
   scanning a black-and-white PDF export) still needs to be able to tell
   "improved" from "worth watching" without relying on green-vs-amber. */
.progress-badge{
    font-size:11.5px;
    font-weight:700;
    padding:3px 9px;
    border-radius:10px;
    white-space:nowrap;
}

.progress-badge-good{
    background:var(--primary-soft);
    color:var(--primary-hover);
}

.progress-badge-watch{
    background:var(--accent-soft);
    color:#9A4A2C;
}

.progress-badge-flat{
    background:var(--surface-soft);
    color:var(--text-muted);
}

.progress-recode{
    margin-top:16px;
    font-size:12.5px;
    color:var(--text-muted);
}

.progress-recode strong{
    color:var(--text);
    letter-spacing:.02em;
}

/* The compact "save your code" callout — shown instead of the full
   comparison on a first-time report, or a retake whose code didn't match
   anything (see ProgressSection::renderCallout()). */
.progress-cta-card{
    grid-column:1 / -1;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    flex-wrap:wrap;
    background:var(--primary-soft);
    border-color:transparent;
}

.progress-cta-text{
    flex:1;
    min-width:240px;
}

.progress-code{
    display:inline-block;
    font-size:18px;
    font-weight:700;
    letter-spacing:.04em;
    color:var(--primary-hover);
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:10px;
    padding:6px 14px;
}

.progress-cta-button{
    display:inline-block;
    white-space:nowrap;
    background:var(--primary);
    color:var(--surface);
    font-size:13.5px;
    font-weight:700;
    text-decoration:none;
    padding:10px 18px;
    border-radius:10px;
}

.progress-cta-button:hover{
    background:var(--primary-hover);
}

@media (max-width:768px){
    .progress-section .dashboard-grid{
        grid-template-columns:1fr;
    }
}

/* Shown instead of the radar chart when too few body systems are flagged
   to plot a meaningful shape — see DashboardSection::renderRadarPlaceholder. */
.dashboard-radar-placeholder{
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    justify-content:center;
    padding-top:8px;
}

.radar-placeholder-icon-wrap{
    width:76px;
    height:76px;
    border-radius:50%;
    background:var(--primary-soft);
    color:var(--primary);
    display:flex;
    align-items:center;
    justify-content:center;
    margin:8px 0 16px;
}

.radar-placeholder-icon{
    width:40px;
    height:40px;
}

.radar-placeholder-message{
    margin:0;
    font-size:13px;
    line-height:1.6;
    color:var(--report-body);
}

/* Icon wheel — replaces the radar chart in Highlights mode, sits alongside
   it in Full Detail. See DashboardSection::renderSystemWheel(). As of 29
   Sep 2026 this card's actual wheel markup comes from the same
   renderInteractiveWheel()/.pwb-ss-* rules Super Simple uses (see that
   section of this file, and renderSystemWheel()'s own docblock) — the
   .dashboard-wheel/.dashboard-wheel-placeholder wrapper classes below are
   all that's left specific to this card now. The older static-wheel rules
   that used to live here (.wheel-figure, .wheel-hub, .wheel-node and
   friends) have been removed as dead code now that both call sites share
   one implementation. */
.dashboard-wheel{
    display:flex;
    flex-direction:column;
}

.dashboard-wheel-placeholder{
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    justify-content:center;
    padding-top:8px;
}

/* Row 4 — mechanisms bar read-out, top foods, quick actions */
.bar-row{
    margin-bottom:12px;
}

.bar-row:last-child{
    margin-bottom:0;
}

.bar-row-label{
    font-size:13px;
    color:var(--text);
    margin-bottom:6px;
}

.bar-track{
    background:var(--surface-soft);
    border-radius:4px;
    height:8px;
    overflow:hidden;
}

.bar-fill{
    background:var(--primary);
    height:100%;
    border-radius:4px;
}

/* Movement & General Health (added 25 Sep 2026) — reuses .bar-row/
   .bar-track/.bar-fill and .progress-badge-good/-watch above as-is;
   these two rules are the only new CSS this section needed. */
.movement-metric-list{
    margin-bottom:18px;
}

.movement-metric-row{
    margin-bottom:16px;
}

.movement-metric-note{
    margin:6px 0 0;
    font-size:12px;
    color:var(--text-muted);
    line-height:1.5;
}

.movement-flag-list{
    margin:0 0 18px;
    padding-left:18px;
    color:var(--text);
    line-height:1.6;
}

.movement-flag-list li{
    margin-bottom:4px;
}

/* Reused wherever a food-group icon sits beside a food name outside the
   dashboard (food cards, body-system pills) so the same icon treatment
   appears consistently across the report. */
.food-group-icon{
    width:22px;
    height:22px;
    border-radius:50%;
    background:var(--accent-soft);
    color:var(--accent);
    display:inline-flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
    vertical-align:middle;
    margin-right:6px;
}

.food-group-icon .pwb-icon{
    width:13px;
    height:13px;
}

/* "This Week" is dropped to its own full-width row below the 3-column
   grid, laid out as a row of steps rather than a cramped bullet list now
   that it has the room. */
.dashboard-actions{
    grid-column:1 / -1;
}

.dash-action-row{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:16px;
}

.dash-action-item{
    display:flex;
    align-items:flex-start;
    gap:10px;
    font-size:14px;
    line-height:1.5;
    color:var(--report-body);
}

.dash-action-check{
    width:22px;
    height:22px;
    border-radius:50%;
    background:var(--primary-soft);
    color:var(--primary);
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
    margin-top:1px;
}

.dash-action-check .pwb-icon{
    width:13px;
    height:13px;
}

/* Product strip — the single top-scoring, allergy/dietary-safe product
   from ProductResolver. Full-width like the summary card above rather than
   living in the insights row, since this is a standalone recommendation
   (with its own compliance-framing intro) rather than another ranked list. */
.dashboard-product-strip{
    grid-column:1 / -1;
}

/* Wraps DashboardSection::renderTopPick()'s product-strip + optional pack
   card now that they render outside dashboard-grid, right after Top
   Priority Foods (see ReportBuilder) rather than inside the Wellness
   Snapshot. Not wrapped in pwb-detail-only — same as before, this stays
   visible in both Highlights and Full detail. */
.dashboard-top-pick{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:16px;
    margin:24px 0;
}

.dashboard-top-pick .dashboard-product-strip:only-child{
    grid-column:1 / -1;
}

@media (max-width:760px){
    .dashboard-top-pick{
        grid-template-columns:1fr;
    }
}

/* The optional pack card reuses the product strip's layout, but takes the
   theme's accent hue rather than primary green throughout, so it reads at
   a glance as "the extra" rather than a second main recommendation. */
.dashboard-pack-card .dashboard-card-label{
    color:var(--accent);
}

.dashboard-pack-card .product-strip-card{
    border-color:var(--accent-soft);
    background:var(--accent-soft);
}

.dashboard-pack-card .product-price-subscription{
    background:var(--accent-soft);
}

.dashboard-pack-card .product-price-saving{
    background:var(--accent-soft);
}

.dashboard-pack-card .product-price-saving .product-price-value{
    color:var(--accent);
}

.dashboard-pack-card .factsheet-link-icon,
.dashboard-pack-card .product-strip-more-info{
    color:var(--accent);
    border-color:var(--accent);
}

.dashboard-pack-card .product-strip-claim-icon{
    background:var(--accent-soft);
    color:var(--accent);
}

.product-strip-intro{
    font-size:13.5px;
    line-height:1.6;
    color:var(--text-secondary);
    margin:0 0 18px;
}

.product-strip-card{
    display:grid;
    grid-template-columns:160px 1fr;
    gap:24px;
    align-items:start;
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:12px;
    padding:20px;
}

.product-strip-image-wrap{
    display:flex;
    align-items:center;
    justify-content:center;
}

.product-strip-image{
    width:100%;
    max-width:160px;
    height:auto;
    display:block;
}

.product-strip-image-placeholder{
    width:100%;
    aspect-ratio:1;
    background:var(--surface-soft);
    border-radius:8px;
}

.product-strip-name{
    font-size:19px;
    font-weight:700;
    color:var(--text);
    margin-bottom:4px;
    line-height:1.3;
}

.product-strip-meta{
    font-size:12.5px;
    color:var(--text-muted);
    margin-bottom:12px;
}

.product-strip-why{
    font-size:14px;
    line-height:1.6;
    color:var(--report-body);
    margin:0 0 14px;
}

.product-strip-claims{
    list-style:none;
    margin:0;
    padding:0;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px 20px;
}

.product-strip-claims li{
    display:flex;
    align-items:flex-start;
    gap:8px;
    font-size:13px;
    line-height:1.5;
    color:var(--report-body);
}

.product-strip-claim-icon{
    width:18px;
    height:18px;
    border-radius:50%;
    background:var(--primary-soft);
    color:var(--primary);
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
    margin-top:1px;
}

.product-strip-claim-icon .pwb-icon{
    width:11px;
    height:11px;
}

/* Pricing row — one-off / subscribe & save / per-day, three equal-weight
   options rather than a single headline price, since subscribe & save is
   meant to read as the better default, not a fine-print upsell. */
.product-strip-pricing{
    display:flex;
    gap:14px;
    margin:16px 0 14px;
    flex-wrap:wrap;
}

.product-price-option{
    background:var(--surface-soft);
    border-radius:10px;
    padding:10px 16px;
    min-width:118px;
}

.product-price-subscription{
    background:var(--primary-soft);
}

.product-price-label{
    font-size:10.5px;
    font-weight:700;
    letter-spacing:.04em;
    text-transform:uppercase;
    color:var(--text-muted);
    margin-bottom:3px;
}

.product-price-value{
    font-size:18px;
    font-weight:700;
    color:var(--text);
}

.product-price-per-day-unit{
    font-size:12px;
    font-weight:600;
    color:var(--text-muted);
    margin-left:2px;
}

.product-price-note{
    font-size:11px;
    color:var(--text-secondary);
    margin-top:3px;
    line-height:1.4;
}

.product-strip-more-info{
    display:inline-block;
    font-size:13.5px;
    font-weight:600;
    color:var(--primary);
    text-decoration:none;
    border-bottom:1px solid var(--primary);
    padding-bottom:1px;
}

.product-strip-more-info:hover{
    opacity:.8;
}

/* Shown in place of pricing/shop links when a recommended product or pack
   can no longer be found in the live catalogue (discontinued) — see
   PWB_Report_Live_Data. Deliberately a plain note, not an error state:
   the recommendation itself is still valid, only the commercial details
   have moved on. */
.product-strip-unavailable-note{
    font-size:13px;
    font-weight:600;
    color:var(--text-secondary);
    background:var(--surface-soft);
    border:1px dashed var(--border);
    border-radius:10px;
    padding:10px 14px;
    margin:0;
}

/* "Buy more, save more" — the per-unit price steps down a real Synergy
   multi-buy SKU (2/3/4-pack etc.) offers, alongside the % saved per unit
   versus buying one at a time. Only rendered when
   PWB_Report_Live_Data::buildQuantityPricing() found a genuine step, so
   most products simply never show this block. See ProductSection::
   renderQuantityPricing() / DashboardSection's copy of the same. */
.quantity-pricing{
    margin:0 0 14px;
    border:1px solid var(--border);
    border-radius:10px;
    overflow:hidden;
}

.quantity-pricing-label{
    font-size:10.5px;
    font-weight:700;
    letter-spacing:.04em;
    text-transform:uppercase;
    color:var(--text-muted);
    background:var(--surface-soft);
    padding:8px 14px;
}

.quantity-pricing-row{
    display:flex;
    align-items:center;
    gap:10px;
    padding:9px 14px;
    border-top:1px solid var(--border);
    flex-wrap:wrap;
}

.quantity-pricing-row-best{
    background:var(--primary-soft);
}

.quantity-pricing-qty{
    font-size:13px;
    font-weight:700;
    color:var(--text);
    min-width:64px;
}

.quantity-pricing-price{
    display:flex;
    align-items:baseline;
    gap:8px;
    flex-wrap:wrap;
    flex:1;
}

.quantity-pricing-oneoff{
    font-size:14px;
    font-weight:700;
    color:var(--text);
}

.quantity-pricing-sub{
    font-size:11.5px;
    font-weight:600;
    color:var(--primary);
}

.quantity-pricing-perunit{
    font-size:11px;
    color:var(--text-muted);
}

.quantity-pricing-badge{
    font-size:11px;
    font-weight:700;
    color:#fff;
    background:var(--primary);
    border-radius:999px;
    padding:3px 10px;
    white-space:nowrap;
}

@media (max-width:900px){

    .dash-action-row{
        grid-template-columns:1fr;
    }

    .dashboard-grid{
        grid-template-columns:1fr;
    }

    .dashboard-insights-row{
        grid-template-columns:1fr 1fr;
    }

    .dashboard-goals-row{
        grid-template-columns:1fr;
    }

    .dashboard-heatmap{
        grid-column:auto;
    }

    .dashboard-systems-charts-row{
        grid-template-columns:1fr;
    }

    .product-strip-card{
        grid-template-columns:1fr;
        justify-items:center;
        text-align:center;
    }

    .product-strip-claims{
        grid-template-columns:1fr;
        text-align:left;
    }

    .product-strip-pricing{
        justify-content:center;
    }

    .heat-grid{
        grid-template-columns:repeat(2, 1fr);
    }
}

/* ==========================================
   Consultant card (WordPress plugin build only)
   The consultant who sent this person their quiz link — shown once, near
   the end of the report, as a "here's who to talk to" close.
========================================== */

.pwb-consultant-card{
    display:flex;
    align-items:center;
    gap:20px;
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:20px;
    padding:24px;
    margin:24px 0;
}

.pwb-consultant-photo-wrap{
    flex:0 0 auto;
}

.pwb-consultant-photo{
    width:72px;
    height:72px;
    border-radius:50%;
    object-fit:cover;
    display:block;
}

.pwb-consultant-photo-placeholder{
    background:var(--surface-soft);
}

.pwb-consultant-label{
    font-size:11px;
    font-weight:700;
    letter-spacing:.04em;
    text-transform:uppercase;
    color:var(--primary);
    margin-bottom:2px;
}

.pwb-consultant-name{
    font-size:18px;
    font-weight:700;
    color:var(--text);
    margin-bottom:8px;
}

.pwb-consultant-contacts,
.pwb-consultant-socials{
    display:flex;
    flex-wrap:wrap;
    gap:14px;
}

.pwb-consultant-contact-link,
.pwb-consultant-social-link{
    font-size:13.5px;
    font-weight:600;
    color:var(--primary);
    text-decoration:none;
    border-bottom:1px solid var(--primary);
    padding-bottom:1px;
}

.pwb-consultant-socials{
    margin-top:6px;
}

@media (max-width: 640px){
    .pwb-consultant-card{
        flex-direction:column;
        text-align:center;
    }

    .pwb-consultant-contacts,
    .pwb-consultant-socials{
        justify-content:center;
    }
}

/* ======================================================
   WEEKLY FOOD HIGHLIGHT OPT-IN (Components\WeeklyOptInCard)
   Sits right after the consultant card above — Pro feature, only ever
   rendered when PWB_Settings::weekly_highlight_enabled() says yes for
   this report's own advisor. See that class's own docblock.
====================================================== */

.pwb-weekly-optin-card{
    display:flex;
    align-items:flex-start;
    gap:16px;
    background:var(--surface-soft);
    border:1px solid var(--border);
    border-radius:20px;
    padding:22px 24px;
    margin:16px 0 24px;
}

.pwb-weekly-optin-icon{
    flex:0 0 auto;
    width:44px;
    height:44px;
    border-radius:50%;
    background:var(--surface);
    display:flex;
    align-items:center;
    justify-content:center;
}

.pwb-weekly-optin-body{
    flex:1 1 auto;
    min-width:0;
}

.pwb-weekly-optin-title{
    font-size:15px;
    font-weight:700;
    color:var(--text);
    margin-bottom:6px;
}

.pwb-weekly-optin-copy{
    font-size:13.5px;
    line-height:1.6;
    color:var(--text-muted);
    margin:0 0 14px;
}

.pwb-weekly-optin-form{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
}

.pwb-weekly-optin-email{
    flex:1 1 220px;
    min-width:0;
    padding:10px 14px;
    border-radius:10px;
    border:1px solid var(--border);
    background:var(--surface);
    color:var(--text);
    font-size:13.5px;
}

.pwb-weekly-optin-submit{
    flex:0 0 auto;
    padding:10px 18px;
    border-radius:10px;
    border:none;
    background:var(--primary);
    color:#fff;
    font-size:13.5px;
    font-weight:600;
    cursor:pointer;
    white-space:nowrap;
}

.pwb-weekly-optin-submit:disabled{
    opacity:.6;
    cursor:default;
}

.pwb-weekly-optin-feedback{
    font-size:13px;
    margin:12px 0 0;
}

.pwb-weekly-optin-feedback-success{
    color:var(--primary);
    font-weight:600;
}

.pwb-weekly-optin-feedback-error{
    color:#b45309;
}

@media (max-width: 640px){
    .pwb-weekly-optin-card{
        flex-direction:column;
        text-align:center;
    }

    .pwb-weekly-optin-icon{
        margin:0 auto;
    }

    .pwb-weekly-optin-form{
        justify-content:center;
    }
}

/* ======================================================
   HIGHLIGHT FOODS STRIP (HighlightFoodsSection)
   Shown unconditionally in both "Highlights only" and "Full detail"
   modes — see ReportBuilder. A full-width wrapping grid of tiles; the
   small dashboard "Top Foods" chip card this used to sit alongside
   (dash-food-list) has been removed, so this is now the report's one
   and only foods summary moment.
====================================================== */

.highlight-foods-grid{
    display:grid;
    /* Tuned so MAX_FOODS (8, see HighlightFoodsSection) sits on one row at
       typical report widths rather than leaving a single leftover tile
       stranded on its own line — auto-fit only wraps once tiles can no
       longer fit at this minimum, so a narrower window still wraps
       gracefully instead of squeezing tiles unreadably small. */
    grid-template-columns:repeat(auto-fit, minmax(95px, 1fr));
    gap:12px;
}

.highlight-food-tile{
    position:relative;
    background:var(--report-card-bg);
    border:1px solid var(--report-card-border);
    border-radius:14px;
    padding:16px 10px;
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    gap:6px;
}

/* The whole tile is a real <button> now (see HighlightFoodsSection) so the
   entire card opens the food-info popup, not just the small text link it
   used to end with. Reset the button defaults back to how the plain-div
   version looked, then layer on a hover/focus treatment so it still reads
   as clickable. */
.highlight-food-tile-clickable{
    width:100%;
    font-family:inherit;
    cursor:pointer;
    transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}

.highlight-food-tile-clickable:hover,
.highlight-food-tile-clickable:focus-visible{
    transform:translateY(-2px);
    border-color:var(--accent);
    box-shadow:0 6px 16px rgba(15, 23, 42, .12);
    outline:none;
}

.highlight-food-rank{
    position:absolute;
    top:10px;
    left:10px;
    width:20px;
    height:20px;
    border-radius:50%;
    background:var(--primary);
    color:var(--surface);
    font-size:.68rem;
    font-weight:700;
    display:flex;
    align-items:center;
    justify-content:center;
}

.highlight-food-icon-wrap{
    width:46px;
    height:46px;
    border-radius:50%;
    background:var(--accent-soft);
    color:var(--accent);
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:4px;
}

.highlight-food-icon-wrap .pwb-icon{
    width:24px;
    height:24px;
}

.highlight-food-name{
    font-size:.9rem;
    font-weight:600;
    color:var(--text);
    line-height:1.25;
}

.highlight-food-score{
    font-size:1.2rem;
    font-weight:700;
    color:var(--primary);
}

.highlight-food-score-max{
    font-size:.7rem;
    font-weight:500;
    color:var(--text-muted);
}

/* Deliberately subtle (Simon's call, 21 Sep 2026: the old "More
   information" pill read as too loud/button-like) — a quiet outlined
   label rather than a solid-fill call to action, since the whole tile is
   already the click target (.highlight-food-tile-clickable); this is just
   a label confirming what tapping the card does, not something that
   needs to compete for attention itself. */
.highlight-food-more-info{
    margin-top:4px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    background:none;
    border:1px solid var(--report-card-border);
    border-radius:999px;
    padding:3px 12px;
    font-size:.68rem;
    font-weight:600;
    letter-spacing:.02em;
    color:var(--text-muted);
    font-family:inherit;
    pointer-events:none;
}

.highlight-food-tile-clickable:hover .highlight-food-more-info,
.highlight-food-tile-clickable:focus-visible .highlight-food-more-info{
    border-color:var(--primary);
    color:var(--primary);
}

@media (max-width:640px){
    .highlight-foods-grid{
        grid-template-columns:repeat(auto-fit, minmax(84px, 1fr));
        gap:8px;
    }
}

/* -----------------------------------------------------------------
   Food info popup (see PWB\Reports\FoodInfoModal) — a single shared
   overlay/dialog, populated client-side from window.PWB_FOOD_DATA
   whenever a "More information" trigger (.highlight-food-more-info)
   is clicked. Uses the same theme variables as the rest of the report
   so it follows whichever theme (green/ocean/lavender/amber) is active.
   ----------------------------------------------------------------- */

.pwb-food-modal-overlay{
    position:fixed;
    inset:0;
    background:rgba(15, 23, 42, .55);
    display:flex;
    align-items:center;
    justify-content:center;
    padding:20px;
    /* Highest of the three overlays: clicking a food chip from within the
       body-system journey (z-index 1000) opens this on top of it without
       needing to hide that overlay first — see BodySystemJourneyModal's
       own docblock for why that's the deliberate design here. */
    z-index:1002;
}

.pwb-food-modal-overlay[hidden]{
    display:none;
}

body.pwb-modal-open{
    overflow:hidden;
}

.pwb-food-modal{
    position:relative;
    background:var(--surface);
    border-radius:16px;
    max-width:520px;
    width:100%;
    max-height:85vh;
    overflow-y:auto;
    padding:28px 24px 24px;
    box-shadow:0 16px 48px rgba(0,0,0,.25);
}

.pwb-food-modal-close{
    position:absolute;
    top:12px;
    right:12px;
    width:32px;
    height:32px;
    border-radius:50%;
    border:none;
    background:var(--surface-soft);
    color:var(--text);
    font-size:1.3rem;
    line-height:1;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
}

.pwb-food-modal-close:hover,
.pwb-food-modal-close:focus{
    background:var(--accent-soft);
    color:var(--accent);
}

.pwb-food-modal-header{
    display:flex;
    align-items:center;
    gap:16px;
    margin-bottom:16px;
}

.pwb-food-modal-avatar-wrap{
    flex:none;
    width:72px;
    height:72px;
    border-radius:50%;
    background:var(--accent-soft);
    color:var(--accent);
    display:flex;
    align-items:center;
    justify-content:center;
}

.pwb-food-modal-avatar-wrap svg{
    width:44px;
    height:44px;
}

.pwb-food-modal-heading h3{
    margin:0 0 2px;
    font-size:1.25rem;
    color:var(--text);
}

.pwb-food-modal-scientific{
    margin:0;
    font-style:italic;
    font-size:.85rem;
    color:var(--text-muted);
}

.pwb-food-modal-group{
    margin:2px 0 0;
    font-size:.78rem;
    font-weight:600;
    color:var(--primary);
}

.pwb-food-modal-evidence{
    margin:4px 0 0;
    font-size:.78rem;
    font-weight:600;
    color:var(--text-muted);
}

.pwb-food-modal-description{
    font-size:.92rem;
    line-height:1.5;
    color:var(--text);
    margin:0 0 16px;
}

.pwb-food-modal-suitability{
    margin-bottom:16px;
}

.pwb-food-modal-suitability-row{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:6px;
    font-size:.82rem;
    margin-bottom:6px;
}

.pwb-food-modal-suitability-label{
    font-weight:600;
    color:var(--text-muted);
}

.pwb-food-modal-suitability-clear{
    font-size:.82rem;
    color:var(--text-muted);
    font-style:italic;
    margin:0 0 16px;
}

.pwb-food-modal-tag{
    display:inline-block;
    padding:2px 9px;
    border-radius:999px;
    font-size:.76rem;
    font-weight:600;
    line-height:1.6;
}

.pwb-food-modal-tag-allergen{
    background:#fdecea;
    color:#a33a2e;
}

.pwb-food-modal-tag-exclusion{
    background:#fdf3e0;
    color:#8a5a10;
}

.pwb-food-modal-compounds{
    margin-bottom:16px;
}

.pwb-food-modal-compounds h4,
.pwb-food-modal-nutrition h4{
    margin:0 0 8px;
    font-size:.85rem;
    text-transform:uppercase;
    letter-spacing:.03em;
    color:var(--text-muted);
}

.pwb-food-modal-compounds ul{
    margin:0;
    padding-left:18px;
    font-size:.88rem;
    color:var(--text);
}

.pwb-food-modal-nutrition-table{
    width:100%;
    border-collapse:collapse;
    font-size:.88rem;
    margin-bottom:12px;
}

.pwb-food-modal-nutrition-table th,
.pwb-food-modal-nutrition-table td{
    padding:6px 4px;
    border-bottom:1px solid var(--report-card-border);
    text-align:left;
}

.pwb-food-modal-nutrition-table th{
    font-weight:500;
    color:var(--text-muted);
}

.pwb-food-modal-nutrition-table td{
    text-align:right;
    font-weight:600;
    color:var(--text);
}

.pwb-food-modal-pathways{
    margin-bottom:16px;
}

.pwb-food-modal-pathways h4{
    margin:0 0 8px;
    font-size:.85rem;
    text-transform:uppercase;
    letter-spacing:.03em;
    color:var(--text-muted);
}

.pwb-food-modal-pathway-list{
    margin:0;
    padding:0;
    list-style:none;
    display:flex;
    flex-direction:column;
    gap:10px;
}

.pwb-food-modal-pathway{
    border:1px solid var(--report-card-border);
    border-radius:8px;
    padding:10px 12px;
    background:var(--report-card-bg-subtle, transparent);
}

.pwb-food-modal-pathway-name{
    font-weight:600;
    font-size:.9rem;
    color:var(--text);
}

.pwb-food-modal-pathway-plain{
    font-size:.85rem;
    color:var(--text);
    margin-top:2px;
}

.pwb-food-modal-pathway-meta{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-top:6px;
    font-size:.78rem;
    color:var(--text-muted);
}

.pwb-food-modal-pathway-evidence{
    font-weight:600;
}

.pwb-food-modal-pathway-compounds{
    margin-top:4px;
    font-size:.78rem;
    color:var(--text-muted);
    font-style:italic;
}

.pwb-food-modal-highlights-heading{
    margin-top:14px;
}

.pwb-food-modal-highlights{
    margin:0;
    padding-left:18px;
    font-size:.85rem;
    color:var(--text);
}

.pwb-food-modal-note{
    font-weight:400;
    text-transform:none;
    letter-spacing:0;
    color:var(--text-muted);
}

.pwb-food-modal-no-data{
    font-size:.85rem;
    color:var(--text-muted);
    font-style:italic;
}

.pwb-food-modal-caveat{
    margin:16px 0 0;
    font-size:.72rem;
    color:var(--text-muted);
    line-height:1.4;
}

.pwb-food-journey-trigger{
    display:block;
    width:100%;
    margin-top:12px;
    padding:9px 14px;
    border:1px solid var(--accent);
    border-radius:8px;
    background:transparent;
    color:var(--accent);
    font-size:.85rem;
    font-weight:600;
    cursor:pointer;
    text-align:center;
}

.pwb-food-journey-trigger:hover,
.pwb-food-journey-trigger:focus{
    background:var(--accent-soft);
}

/* -----------------------------------------------------------------
   Nutrition journey view — the food -> compound -> mechanism -> body
   system "journey of nutrition" (Simon's request, 23 Sep 2026). A
   second, larger overlay opened from the "Explore the full nutrition
   journey" button inside the food card above; closing it with Back
   returns to that card rather than the page underneath.
   ----------------------------------------------------------------- */

.pwb-food-journey-overlay{
    position:fixed;
    inset:0;
    background:rgba(15, 23, 42, .55);
    display:flex;
    align-items:center;
    justify-content:center;
    padding:20px;
    z-index:1001;
}

.pwb-food-journey-overlay[hidden]{
    display:none;
}

.pwb-food-journey-modal{
    position:relative;
    background:var(--surface);
    border-radius:16px;
    max-width:760px;
    width:100%;
    max-height:88vh;
    overflow-y:auto;
    padding:24px;
    box-shadow:0 16px 48px rgba(0,0,0,.25);
}

.pwb-food-journey-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin-bottom:8px;
}

.pwb-food-journey-header h3{
    margin:0;
    font-size:1.1rem;
    color:var(--text);
    text-align:center;
    flex:1;
}

.pwb-food-journey-back{
    border:none;
    background:transparent;
    color:var(--accent);
    font-size:.85rem;
    font-weight:600;
    cursor:pointer;
    padding:4px 0;
    white-space:nowrap;
}

.pwb-food-journey-close{
    width:32px;
    height:32px;
    border-radius:50%;
    border:none;
    background:var(--surface-soft);
    color:var(--text);
    font-size:1.3rem;
    line-height:1;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    flex:none;
}

.pwb-food-journey-close:hover,
.pwb-food-journey-close:focus{
    background:var(--accent-soft);
    color:var(--accent);
}

.pwb-food-journey-intro{
    font-size:.82rem;
    color:var(--text-muted);
    text-align:center;
    margin:0 0 16px;
    line-height:1.4;
}

.pwb-food-journey-reset-row{
    display:flex;
    justify-content:flex-end;
    min-height:26px;
    margin-bottom:4px;
}

.pwb-food-journey-reset{
    border:none;
    background:transparent;
    color:var(--accent);
    font-size:.78rem;
    font-weight:600;
    cursor:pointer;
}

.pwb-food-journey-body{
    display:flex;
    flex-direction:column;
    gap:10px;
}

.pwb-food-journey-row{
    border:1px solid var(--report-card-border);
    border-radius:10px;
    padding:12px 14px;
    background:var(--report-card-bg-subtle, transparent);
    transition:opacity .15s ease, border-color .15s ease;
}

.pwb-food-journey-row.is-highlighted{
    border-color:var(--accent);
}

.pwb-food-journey-row.is-dimmed{
    opacity:.35;
}

.pwb-food-journey-chain{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:6px;
}

.pwb-food-journey-arrow{
    color:var(--text-muted);
    font-weight:700;
}

.pwb-food-journey-chip{
    display:inline-block;
    padding:4px 11px;
    border-radius:999px;
    font-size:.78rem;
    font-weight:600;
    cursor:pointer;
    border:1.5px solid transparent;
    line-height:1.5;
}

.pwb-food-journey-chip-food{
    background:var(--accent-soft);
    color:var(--accent);
    cursor:default;
}

.pwb-food-journey-chip-compound{
    background:#eef4ff;
    color:#2451a3;
}

.pwb-food-journey-chip-mechanism{
    background:#f1ecfb;
    color:#5c3ea8;
}

.pwb-food-journey-chip-bodysystem{
    background:#e9f7ee;
    color:#1f7a45;
}

/* The simplified "By vitamin/mineral" journey's own lead chip (30 Sep
   2026) — a distinct amber/gold tone, its own identity separate from
   the mechanism view's compound (blue) and mechanism (purple) chips. */
.pwb-food-journey-chip-nutrient{
    background:#fdf1db;
    color:#8a6416;
}

.pwb-food-journey-chip:not(.pwb-food-journey-chip-food):hover{
    border-color:currentColor;
}

.pwb-food-journey-chip.is-active{
    border-color:currentColor;
    box-shadow:0 0 0 2px rgba(0,0,0,.06) inset;
}

.pwb-food-journey-meta{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-top:8px;
    font-size:.78rem;
    color:var(--text-muted);
}

.pwb-food-journey-evidence{
    font-weight:600;
}

.pwb-food-journey-plain{
    font-style:italic;
}

@media (max-width:480px){
    .pwb-food-journey-modal{
        padding:18px 14px;
    }

    .pwb-food-journey-header h3{
        font-size:1rem;
    }
}

@media (max-width:480px){
    .pwb-food-modal{
        padding:22px 16px 18px;
    }

    .pwb-food-modal-header{
        gap:12px;
    }

    .pwb-food-modal-avatar-wrap{
        width:56px;
        height:56px;
    }

    .pwb-food-modal-avatar-wrap svg{
        width:34px;
        height:34px;
    }
}

/* ------------------------------------------------------------------ */
/* Food Reference page ([pwr_food_reference]) — see class-food-reference.php */
/* ------------------------------------------------------------------ */

.pwb-food-ref{
    max-width:1100px;
    margin:0 auto;
    font-family:inherit;
    color:var(--text);
}

.pwb-food-ref-empty{
    color:var(--text-muted);
    font-style:italic;
}

.pwb-food-ref-search-row{
    margin-bottom:14px;
}

.pwb-food-ref-search{
    width:100%;
    max-width:420px;
    padding:10px 14px;
    border:1px solid var(--report-card-border);
    border-radius:10px;
    font-size:.95rem;
    font-family:inherit;
    color:var(--text);
    background:var(--report-card-bg);
}

.pwb-food-ref-filters{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-bottom:12px;
}

.pwb-food-ref-filter-chip{
    border:1px solid var(--report-card-border);
    background:var(--report-card-bg);
    color:var(--text);
    border-radius:999px;
    padding:6px 14px;
    font-size:.82rem;
    font-family:inherit;
    cursor:pointer;
    transition:background .12s ease, border-color .12s ease, color .12s ease;
}

.pwb-food-ref-filter-chip.is-active{
    background:var(--accent);
    border-color:var(--accent);
    color:#fff;
}

.pwb-food-ref-count{
    font-size:.82rem;
    color:var(--text-muted);
    margin:0 0 12px;
}

.pwb-food-ref-no-results{
    color:var(--text-muted);
    font-style:italic;
}

.pwb-food-ref-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(120px, 1fr));
    gap:12px;
}

.pwb-food-ref-tile{
    position:relative;
    background:var(--report-card-bg);
    border:1px solid var(--report-card-border);
    border-radius:14px;
    padding:16px 10px;
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    gap:6px;
    width:100%;
    font-family:inherit;
    cursor:pointer;
    transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}

.pwb-food-ref-tile:hover,
.pwb-food-ref-tile:focus-visible{
    transform:translateY(-2px);
    border-color:var(--accent);
    box-shadow:0 6px 16px rgba(15, 23, 42, .12);
    outline:none;
}

.pwb-food-ref-tile-icon{
    width:44px;
    height:44px;
    color:var(--accent);
}

.pwb-food-ref-tile-icon svg{
    width:100%;
    height:100%;
}

.pwb-food-ref-tile-name{
    font-size:.85rem;
    font-weight:600;
    color:var(--text);
}

.pwb-food-ref-tile-group{
    font-size:.72rem;
    color:var(--text-muted);
}

/* "Explore" / "Evidence" cards out from the generated report — see
   ReportBuilder. Two side-by-side cards reusing the same visual language
   as .pwb-evidence-lib-card (see that block further down) so the report
   and the standalone Evidence Library page feel like one design system;
   auto-fit means it also copes gracefully with only one card rendering
   (e.g. an admin has only set up one of the two feature pages). */
.pwb-explore-cards-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
    gap:14px;
    margin:20px 0;
}

.pwb-explore-card{
    background:var(--report-card-bg);
    border:1px solid var(--report-card-border);
    border-radius:16px;
    padding:20px 22px;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:8px;
}

.pwb-explore-card-icon{
    width:48px;
    height:48px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
    margin-bottom:2px;
    background:var(--primary-soft);
    color:var(--primary);
}

.pwb-explore-card--evidence .pwb-explore-card-icon{
    background:var(--accent-soft);
    color:var(--accent);
}

.pwb-explore-card-icon .pwb-icon{
    width:26px;
    height:26px;
}

.pwb-explore-card-title{
    margin:0;
    font-size:.82rem;
    font-weight:700;
    letter-spacing:.06em;
    text-transform:uppercase;
    color:var(--primary);
}

.pwb-explore-card--evidence .pwb-explore-card-title{
    color:var(--accent);
}

.pwb-explore-card-body{
    margin:0;
    font-size:.88rem;
    line-height:1.55;
    color:var(--text-secondary);
}

.pwb-explore-card-link{
    display:inline-block;
    margin-top:4px;
    font-size:.88rem;
    font-weight:600;
    color:var(--primary);
    text-decoration:none;
}

.pwb-explore-card-link:hover{
    color:var(--primary-hover);
    text-decoration:underline;
}

.pwb-explore-card--evidence .pwb-explore-card-link{
    color:var(--accent);
}

.pwb-explore-card--evidence .pwb-explore-card-link:hover{
    color:var(--accent);
    text-decoration:underline;
}

/* ------------------------------------------------------------------ */
/* Food Reference tabs + body-system map (BodySystemJourneyModal) */
/* ------------------------------------------------------------------ */

.pwb-food-ref-tabs{
    display:flex;
    gap:8px;
    margin-bottom:18px;
    border-bottom:1px solid var(--report-card-border);
}

.pwb-food-ref-tab{
    border:none;
    background:transparent;
    color:var(--text-muted);
    font-family:inherit;
    font-size:.9rem;
    font-weight:600;
    padding:10px 4px;
    margin-bottom:-1px;
    border-bottom:2px solid transparent;
    cursor:pointer;
}

.pwb-food-ref-tab.is-active{
    color:var(--accent);
    border-bottom-color:var(--accent);
}

.pwb-bodymap-intro h3{
    margin:0 0 4px;
    font-size:1.05rem;
    color:var(--text);
}

.pwb-bodymap-intro p{
    margin:0 0 18px;
    font-size:.88rem;
    color:var(--text-muted);
    max-width:560px;
}

.pwb-bodymap-layout{
    display:flex;
    flex-wrap:wrap;
    gap:28px;
    align-items:flex-start;
}

/* The map figure: a real infographic image (see BodySystemJourneyModal's
   own docblock) with transparent, absolutely-positioned hotspot buttons
   layered on top of each badge's connector-dot position — position:relative
   here is what lets those hotspots (position:absolute) place themselves
   against the image rather than the page. */
.pwb-bodymap-figure{
    position:relative;
    width:280px;
    flex:none;
}

.pwb-bodymap-figure-img{
    display:block;
    width:100%;
    height:auto;
}

.pwb-bodymap-hotspot{
    position:absolute;
    width:10.5%;
    aspect-ratio:1 / 1;
    transform:translate(-50%, -50%);
    border-radius:50%;
    border:none;
    background:transparent;
    cursor:pointer;
    padding:0;
    outline:none;
}

.pwb-bodymap-hotspot:hover,
.pwb-bodymap-hotspot:focus-visible{
    background:rgba(255, 255, 255, .25);
    box-shadow:0 0 0 3px var(--accent);
}

.pwb-bodymap-legend{
    display:flex;
    flex-direction:column;
    gap:6px;
    flex:1;
    min-width:220px;
}

.pwb-bodymap-legend-item{
    display:flex;
    align-items:center;
    gap:10px;
    border:1px solid var(--report-card-border);
    background:var(--report-card-bg);
    border-radius:10px;
    padding:9px 12px;
    font-family:inherit;
    font-size:.88rem;
    color:var(--text);
    cursor:pointer;
    text-align:left;
    transition:border-color .12s ease, background .12s ease;
}

.pwb-bodymap-legend-item:hover,
.pwb-bodymap-legend-item:focus-visible{
    border-color:var(--accent);
    outline:none;
}

.pwb-bodymap-legend-num{
    display:flex;
    align-items:center;
    justify-content:center;
    width:22px;
    height:22px;
    border-radius:50%;
    background:var(--accent);
    color:#fff;
    font-size:.72rem;
    font-weight:700;
    flex:none;
}

/* The body-system journey overlay reuses the food-journey's chip/row/arrow
   styling (pwb-food-journey-*) so both journeys read as one visual
   language — only its own header/description/reset need their own rules. */

.pwb-bodysystem-journey-overlay{
    position:fixed;
    inset:0;
    background:rgba(15, 23, 42, .55);
    display:flex;
    align-items:center;
    justify-content:center;
    padding:20px;
    z-index:1000;
}

.pwb-bodysystem-journey-overlay[hidden]{
    display:none;
}

/* Vitamin/Mineral Reference page ([pwr_vitamin_mineral_reference]) tile
   popup — see NutrientInfoModal. Reuses .pwb-food-modal/.pwb-food-modal-*
   for all of its inner layout (box, header, heading, description, tag
   groups) as-is, so only the outer overlay needs its own rule here — kept
   below .pwb-food-modal-overlay's z-index (1002) so that a "Best food
   sources" chip inside this modal can open the real FoodInfoModal on top
   of it without the two competing for the same layer. */
.pwb-nutrient-modal-overlay{
    position:fixed;
    inset:0;
    background:rgba(15, 23, 42, .55);
    display:flex;
    align-items:center;
    justify-content:center;
    padding:20px;
    z-index:999;
}

.pwb-nutrient-modal-overlay[hidden]{
    display:none;
}

.pwb-bodysystem-journey-modal{
    position:relative;
    background:var(--surface);
    border-radius:16px;
    max-width:760px;
    width:100%;
    max-height:88vh;
    overflow-y:auto;
    padding:24px;
    box-shadow:0 16px 48px rgba(0,0,0,.25);
}

.pwb-bodysystem-journey-description{
    font-size:.88rem;
    color:var(--text);
    text-align:center;
    margin:0 0 6px;
    line-height:1.4;
}

.pwb-bodysystem-journey-reset{
    border:none;
    background:transparent;
    color:var(--accent);
    font-size:.78rem;
    font-weight:600;
    cursor:pointer;
}

.pwb-bodysystem-journey-body{
    display:flex;
    flex-direction:column;
    gap:10px;
}

.pwb-bodysystem-journey-body .pwb-food-journey-chip-food{
    border:none;
    font-family:inherit;
}

.pwb-bodysystem-journey-body .pwb-food-journey-chip.is-dimmed{
    opacity:.3;
}

@media (max-width:600px){
    .pwb-bodymap-layout{
        flex-direction:column;
        align-items:center;
    }

    .pwb-bodymap-figure{
        width:100%;
        max-width:280px;
    }

    .pwb-bodymap-legend{
        width:100%;
    }
}

/* ------------------------------------------------------------------ */
/* Evidence Library page ([pwr_evidence_library]) — see
   class-evidence-library.php. Deliberately mirrors the Food Reference
   page's own structure/spacing (search row, filter chips, count line,
   grid) rather than inventing a new layout language — see that section's
   own comment above. */
/* ------------------------------------------------------------------ */

.pwb-evidence-lib{
    max-width:1100px;
    margin:0 auto;
    font-family:inherit;
    color:var(--text);
}

.pwb-evidence-lib-empty{
    color:var(--text-muted);
    font-style:italic;
}

/* No max-width here (unlike an earlier version of this rule) — the
   Food Reference page's own intro-equivalent text runs the full width
   of its .pwb-food-ref container, and this was the one piece of text
   on this page narrower than everything else on it (source strip,
   filters, card grid), which read as a layout mistake rather than a
   deliberate choice (Simon's call, 26 Sep 2026). */
.pwb-evidence-lib-intro{
    margin-bottom:20px;
}

.pwb-evidence-lib-intro p{
    font-size:.95rem;
    color:var(--text-secondary);
    line-height:1.6;
    margin:0;
}

/* The "sourced from" trust strip — a quick-scan credibility signal ahead
   of the full searchable list (see class-evidence-library.php's own
   renderSourceStrip() docblock). Read-only display, not a filter control
   itself (the evidence-grade/body-system chips below handle filtering). */
.pwb-evidence-lib-source-strip{
    display:flex;
    flex-wrap:wrap;
    gap:20px;
    padding:18px 20px;
    margin-bottom:22px;
    background:var(--primary-soft);
    border-radius:14px;
}

.pwb-evidence-lib-source-item{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    min-width:100px;
}

.pwb-evidence-lib-source-count{
    font-size:1.4rem;
    font-weight:800;
    color:var(--primary-hover);
    line-height:1.1;
}

.pwb-evidence-lib-source-name{
    font-size:.78rem;
    color:var(--text-secondary);
    font-weight:600;
}

.pwb-evidence-lib-search-row{
    margin-bottom:14px;
}

.pwb-evidence-lib-search{
    width:100%;
    max-width:420px;
    padding:10px 14px;
    border:1px solid var(--report-card-border);
    border-radius:10px;
    font-size:.95rem;
    font-family:inherit;
    color:var(--text);
    background:var(--report-card-bg);
}

.pwb-evidence-lib-filters{
    display:flex;
    flex-direction:column;
    gap:8px;
    margin-bottom:14px;
}

.pwb-evidence-lib-filter-group{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
}

.pwb-evidence-lib-filter-chip{
    border:1px solid var(--report-card-border);
    background:var(--report-card-bg);
    color:var(--text);
    border-radius:999px;
    padding:6px 14px;
    font-size:.82rem;
    font-family:inherit;
    cursor:pointer;
    transition:background .12s ease, border-color .12s ease, color .12s ease;
}

.pwb-evidence-lib-filter-chip.is-active{
    background:var(--accent);
    border-color:var(--accent);
    color:#fff;
}

.pwb-evidence-lib-count{
    font-size:.82rem;
    color:var(--text-muted);
    margin:0 0 12px;
}

.pwb-evidence-lib-no-results{
    color:var(--text-muted);
    font-style:italic;
}

.pwb-evidence-lib-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(320px, 1fr));
    gap:14px;
}

.pwb-evidence-lib-card{
    background:var(--report-card-bg);
    border:1px solid var(--report-card-border);
    border-radius:16px;
    padding:18px 20px;
    display:flex;
    flex-direction:column;
    gap:8px;
}

.pwb-evidence-lib-card-top{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:8px;
}

.pwb-evidence-lib-card-title{
    margin:0;
    font-size:1rem;
    color:var(--text);
}

.pwb-evidence-lib-category{
    margin:0;
    font-size:.74rem;
    font-weight:700;
    letter-spacing:.03em;
    text-transform:uppercase;
    color:var(--text-muted);
}

.pwb-evidence-lib-summary{
    margin:0;
    font-size:.88rem;
    color:var(--text-secondary);
    line-height:1.5;
}

.pwb-evidence-lib-systems{
    display:flex;
    flex-wrap:wrap;
    gap:6px;
}

.pwb-evidence-lib-system-tag{
    font-size:.72rem;
    font-weight:600;
    color:var(--text-secondary);
    background:var(--surface-soft);
    border:1px solid var(--border-soft);
    border-radius:999px;
    padding:3px 10px;
}

.pwb-evidence-lib-guardrail{
    margin:2px 0 0;
    font-size:.78rem;
    font-style:italic;
    color:var(--text-muted);
    border-left:2px solid var(--border);
    padding-left:10px;
}

.pwb-evidence-lib-badges{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:6px;
}

/* Mechanism vs bioactive (see EvidenceLibraryResolver::buildAll()) — a
   quiet, low-contrast pill (unlike the evidence-grade .tag next to it,
   which is the one badge that should draw the eye) just so a visitor can
   tell a pathway apart from a compound at a glance now both share a list. */
.pwb-evidence-lib-type-tag{
    display:inline-block;
    font-size:.68rem;
    font-weight:700;
    letter-spacing:.03em;
    text-transform:uppercase;
    padding:3px 8px;
    border-radius:999px;
    background:var(--surface-soft);
    border:1px solid var(--border-soft);
    color:var(--text-muted);
}

.pwb-evidence-lib-type-tag--bioactive{
    color:var(--accent);
}

/* Specific, individually-verified sources (Simon's call, 26 Sep 2026) —
   separate from, and additional to, the general evidence-grade/source
   badge above, which stays a named body rather than a citation to a
   specific paper (see mechanisms-schema.json/bioactive-schema.json). Only
   rendered once an entry actually has one or more verified citations. */
.pwb-evidence-lib-citations{
    margin-top:2px;
    padding-top:10px;
    border-top:1px solid var(--border-soft);
}

.pwb-evidence-lib-citations-label{
    margin:0 0 4px;
    font-size:.68rem;
    font-weight:700;
    letter-spacing:.04em;
    text-transform:uppercase;
    color:var(--text-muted);
}

.pwb-evidence-lib-citations-list{
    margin:0;
    padding:0;
    list-style:none;
    display:flex;
    flex-direction:column;
    gap:4px;
}

.pwb-evidence-lib-citation{
    font-size:.82rem;
    line-height:1.4;
}

.pwb-evidence-lib-citation a{
    color:var(--primary);
    font-weight:600;
    text-decoration:none;
}

.pwb-evidence-lib-citation a:hover{
    color:var(--primary-hover);
    text-decoration:underline;
}

.pwb-evidence-lib-citation-meta{
    color:var(--text-muted);
}

@media (max-width:600px){
    .pwb-evidence-lib-source-strip{
        gap:14px;
        padding:14px;
    }
}

/* ==========================================================================
   "Super Simple" — the third report detail level (Simon's call, 29 Sep
   2026). See DashboardSection::renderSuperSimple() for the markup this
   styles, and ReportBuilder's own detail-toggle script for how
   body.report-mode-supersimple gets added/removed.

   Mirror-image pair, same pattern as .pwb-detail-only/.pwb-highlights-only
   above: this mode hides the WHOLE classic dashboard (paragraph, ladder,
   heat grid, wheel/radar, insight cards — everything Highlights/Full
   detail share) and shows only the Super Simple block in its place.
   ========================================================================== */

.pwb-super-simple-only{
    display:none;
}

body.report-mode-supersimple .pwb-super-simple-only{
    display:block;
}

body.report-mode-supersimple .pwb-classic-dashboard{
    display:none;
}

.pwb-ss-section{
    margin-top:28px;
    padding-top:24px;
    border-top:1px solid var(--border-soft);
}

.pwb-super-simple > .pwb-ss-section:first-child{
    margin-top:22px;
    padding-top:0;
    border-top:none;
}

.pwb-ss-centered{
    text-align:center;
}

/* ---- The Map of Your Results (full width, every flagged system, each
   node clickable) ---- */

.pwb-ss-wheel-radio{
    position:absolute;
    opacity:0;
    width:1px;
    height:1px;
    pointer-events:none;
}

.pwb-ss-wheel-frame{
    position:relative;
    width:100%;
    max-width:560px;
    aspect-ratio:1/1;
    margin:22px auto 8px;
}

.pwb-ss-wheel-frame-wide{
    max-width:640px;
}

.pwb-ss-wheel-lines{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
}

.pwb-ss-wheel-lines line{
    stroke:var(--border);
    stroke-width:0.5;
}

/* The licensed body-map photo fragment used in every "Map of Your
   Results" wheel's hub (Super Simple and, since 29 Sep 2026,
   Highlights/Full detail too — see DashboardSection::renderInteractiveWheel()).
   A now-removed smaller version of this same rule (.wheel-hub) used to
   serve the old static classic-mode wheel before that method existed. */
.pwb-ss-wheel-head{
    position:absolute;
    top:50%;
    left:50%;
    width:26%;
    height:26%;
    transform:translate(-50%, -50%);
    border-radius:50%;
    background:var(--surface-soft) url('../images/bodymap/wheel-hub-person.png') center / cover no-repeat;
    border:1px solid var(--border-soft);
    box-shadow:0 6px 18px rgba(0,0,0,0.12);
}

.pwb-ss-node{
    position:absolute;
    display:flex;
    flex-direction:column;
    align-items:center;
    width:88px;
    text-align:center;
    transform:translate(-50%, -50%);
    cursor:pointer;
    text-decoration:none;
}

.pwb-ss-node-badge{
    width:56px;
    height:56px;
    border-radius:50%;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    line-height:1;
    border:2px solid var(--surface);
    box-shadow:0 3px 10px rgba(0,0,0,0.12);
    color:var(--text);
    transition:transform .12s;
}

.pwb-ss-node:hover .pwb-ss-node-badge,
.pwb-ss-node:focus-visible .pwb-ss-node-badge{
    transform:scale(1.08);
}

.pwb-ss-node-icon .pwb-ss-node-icon-svg{
    width:16px;
    height:16px;
}

.pwb-ss-node-score{
    font-size:13px;
    font-weight:700;
    margin-top:1px;
}

.pwb-ss-node-label{
    margin-top:6px;
    font-size:11px;
    font-weight:700;
    color:var(--text);
    line-height:1.2;
}

.pwb-ss-wheel-hint{
    text-align:center;
    font-size:12.5px;
    color:var(--text-muted);
    margin-top:6px;
}

/* Zoom card: a single full-size card shown over the wheel when its node's
   radio is checked — pure CSS, no JS. One pair of rules per taxonomy
   system id (BS001-BS010, per body-systems.json) rather than anything
   generated, since that set is fixed. */
.pwb-ss-zoom-card{
    display:none;
    position:absolute;
    inset:2%;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    background:var(--surface);
    border:2px solid var(--primary);
    border-radius:20px;
    box-shadow:0 12px 30px rgba(0,0,0,0.18);
    padding:22px 22px 20px;
    z-index:5;
}

.pwb-ss-zoom-icon{
    width:56px;
    height:56px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--text);
    margin-bottom:10px;
}

.pwb-ss-zoom-icon .pwb-icon{
    width:28px;
    height:28px;
}

.pwb-ss-zoom-name{
    font-size:18px;
    font-weight:700;
    color:var(--text);
}

.pwb-ss-zoom-score{
    font-size:13px;
    color:var(--text-muted);
    margin-top:3px;
}

.pwb-ss-zoom-score strong{
    color:var(--primary);
}

.pwb-ss-zoom-blurb{
    font-size:13.5px;
    line-height:1.5;
    color:var(--text-secondary);
    margin:12px 0 10px;
    max-width:380px;
}

.pwb-ss-zoom-close{
    position:absolute;
    top:10px;
    right:14px;
    font-size:20px;
    line-height:1;
    color:var(--text-muted);
    cursor:pointer;
}

.pwb-ss-zoom-close:hover{
    color:var(--text);
}

/* Every possible system id gets the same pair of rules: show that id's
   zoom card, and hide the wheel's own nodes/head/lines behind it (a label
   near the edge of the ring can otherwise poke out past the card's
   rounded corners). */
#pwb-ss-node-BS001:checked ~ .pwb-ss-wheel-frame #pwb-ss-zoom-BS001,
#pwb-ss-node-BS002:checked ~ .pwb-ss-wheel-frame #pwb-ss-zoom-BS002,
#pwb-ss-node-BS003:checked ~ .pwb-ss-wheel-frame #pwb-ss-zoom-BS003,
#pwb-ss-node-BS004:checked ~ .pwb-ss-wheel-frame #pwb-ss-zoom-BS004,
#pwb-ss-node-BS005:checked ~ .pwb-ss-wheel-frame #pwb-ss-zoom-BS005,
#pwb-ss-node-BS006:checked ~ .pwb-ss-wheel-frame #pwb-ss-zoom-BS006,
#pwb-ss-node-BS007:checked ~ .pwb-ss-wheel-frame #pwb-ss-zoom-BS007,
#pwb-ss-node-BS008:checked ~ .pwb-ss-wheel-frame #pwb-ss-zoom-BS008,
#pwb-ss-node-BS009:checked ~ .pwb-ss-wheel-frame #pwb-ss-zoom-BS009,
#pwb-ss-node-BS010:checked ~ .pwb-ss-wheel-frame #pwb-ss-zoom-BS010{
    display:flex;
}

#pwb-ss-node-BS001:checked ~ .pwb-ss-wheel-frame .pwb-ss-node,
#pwb-ss-node-BS002:checked ~ .pwb-ss-wheel-frame .pwb-ss-node,
#pwb-ss-node-BS003:checked ~ .pwb-ss-wheel-frame .pwb-ss-node,
#pwb-ss-node-BS004:checked ~ .pwb-ss-wheel-frame .pwb-ss-node,
#pwb-ss-node-BS005:checked ~ .pwb-ss-wheel-frame .pwb-ss-node,
#pwb-ss-node-BS006:checked ~ .pwb-ss-wheel-frame .pwb-ss-node,
#pwb-ss-node-BS007:checked ~ .pwb-ss-wheel-frame .pwb-ss-node,
#pwb-ss-node-BS008:checked ~ .pwb-ss-wheel-frame .pwb-ss-node,
#pwb-ss-node-BS009:checked ~ .pwb-ss-wheel-frame .pwb-ss-node,
#pwb-ss-node-BS010:checked ~ .pwb-ss-wheel-frame .pwb-ss-node,
#pwb-ss-node-BS001:checked ~ .pwb-ss-wheel-frame .pwb-ss-wheel-head,
#pwb-ss-node-BS002:checked ~ .pwb-ss-wheel-frame .pwb-ss-wheel-head,
#pwb-ss-node-BS003:checked ~ .pwb-ss-wheel-frame .pwb-ss-wheel-head,
#pwb-ss-node-BS004:checked ~ .pwb-ss-wheel-frame .pwb-ss-wheel-head,
#pwb-ss-node-BS005:checked ~ .pwb-ss-wheel-frame .pwb-ss-wheel-head,
#pwb-ss-node-BS006:checked ~ .pwb-ss-wheel-frame .pwb-ss-wheel-head,
#pwb-ss-node-BS007:checked ~ .pwb-ss-wheel-frame .pwb-ss-wheel-head,
#pwb-ss-node-BS008:checked ~ .pwb-ss-wheel-frame .pwb-ss-wheel-head,
#pwb-ss-node-BS009:checked ~ .pwb-ss-wheel-frame .pwb-ss-wheel-head,
#pwb-ss-node-BS010:checked ~ .pwb-ss-wheel-frame .pwb-ss-wheel-head,
#pwb-ss-node-BS001:checked ~ .pwb-ss-wheel-frame .pwb-ss-wheel-lines,
#pwb-ss-node-BS002:checked ~ .pwb-ss-wheel-frame .pwb-ss-wheel-lines,
#pwb-ss-node-BS003:checked ~ .pwb-ss-wheel-frame .pwb-ss-wheel-lines,
#pwb-ss-node-BS004:checked ~ .pwb-ss-wheel-frame .pwb-ss-wheel-lines,
#pwb-ss-node-BS005:checked ~ .pwb-ss-wheel-frame .pwb-ss-wheel-lines,
#pwb-ss-node-BS006:checked ~ .pwb-ss-wheel-frame .pwb-ss-wheel-lines,
#pwb-ss-node-BS007:checked ~ .pwb-ss-wheel-frame .pwb-ss-wheel-lines,
#pwb-ss-node-BS008:checked ~ .pwb-ss-wheel-frame .pwb-ss-wheel-lines,
#pwb-ss-node-BS009:checked ~ .pwb-ss-wheel-frame .pwb-ss-wheel-lines,
#pwb-ss-node-BS010:checked ~ .pwb-ss-wheel-frame .pwb-ss-wheel-lines{
    visibility:hidden;
}

/* Second copy of the block above, id-prefixed 'pwb-map' instead of
   'pwb-ss' — the Highlights/Full detail "Map of Your Results" card now
   uses this exact same clickable wheel (see
   DashboardSection::renderSystemWheel()/renderInteractiveWheel(), unified
   29 Sep 2026), and its markup shares the SAME document as Super Simple's
   own copy (every detail level's markup is always present at once — see
   ReportBuilder's docblock on the client-side toggle). A radio input's
   [name]/[id] match is document-wide, so reusing 'pwb-ss-*' ids here would
   make the two wheels fight over which node is checked. The visual
   classes (.pwb-ss-wheel-frame, .pwb-ss-node, .pwb-ss-zoom-card, etc.)
   stay shared and unprefixed — only this id-keyed interaction wiring
   needs its own copy. Add a third block the same shape if a third
   independent wheel instance is ever needed. */
#pwb-map-node-BS001:checked ~ .pwb-ss-wheel-frame #pwb-map-zoom-BS001,
#pwb-map-node-BS002:checked ~ .pwb-ss-wheel-frame #pwb-map-zoom-BS002,
#pwb-map-node-BS003:checked ~ .pwb-ss-wheel-frame #pwb-map-zoom-BS003,
#pwb-map-node-BS004:checked ~ .pwb-ss-wheel-frame #pwb-map-zoom-BS004,
#pwb-map-node-BS005:checked ~ .pwb-ss-wheel-frame #pwb-map-zoom-BS005,
#pwb-map-node-BS006:checked ~ .pwb-ss-wheel-frame #pwb-map-zoom-BS006,
#pwb-map-node-BS007:checked ~ .pwb-ss-wheel-frame #pwb-map-zoom-BS007,
#pwb-map-node-BS008:checked ~ .pwb-ss-wheel-frame #pwb-map-zoom-BS008,
#pwb-map-node-BS009:checked ~ .pwb-ss-wheel-frame #pwb-map-zoom-BS009,
#pwb-map-node-BS010:checked ~ .pwb-ss-wheel-frame #pwb-map-zoom-BS010{
    display:flex;
}

#pwb-map-node-BS001:checked ~ .pwb-ss-wheel-frame .pwb-ss-node,
#pwb-map-node-BS002:checked ~ .pwb-ss-wheel-frame .pwb-ss-node,
#pwb-map-node-BS003:checked ~ .pwb-ss-wheel-frame .pwb-ss-node,
#pwb-map-node-BS004:checked ~ .pwb-ss-wheel-frame .pwb-ss-node,
#pwb-map-node-BS005:checked ~ .pwb-ss-wheel-frame .pwb-ss-node,
#pwb-map-node-BS006:checked ~ .pwb-ss-wheel-frame .pwb-ss-node,
#pwb-map-node-BS007:checked ~ .pwb-ss-wheel-frame .pwb-ss-node,
#pwb-map-node-BS008:checked ~ .pwb-ss-wheel-frame .pwb-ss-node,
#pwb-map-node-BS009:checked ~ .pwb-ss-wheel-frame .pwb-ss-node,
#pwb-map-node-BS010:checked ~ .pwb-ss-wheel-frame .pwb-ss-node,
#pwb-map-node-BS001:checked ~ .pwb-ss-wheel-frame .pwb-ss-wheel-head,
#pwb-map-node-BS002:checked ~ .pwb-ss-wheel-frame .pwb-ss-wheel-head,
#pwb-map-node-BS003:checked ~ .pwb-ss-wheel-frame .pwb-ss-wheel-head,
#pwb-map-node-BS004:checked ~ .pwb-ss-wheel-frame .pwb-ss-wheel-head,
#pwb-map-node-BS005:checked ~ .pwb-ss-wheel-frame .pwb-ss-wheel-head,
#pwb-map-node-BS006:checked ~ .pwb-ss-wheel-frame .pwb-ss-wheel-head,
#pwb-map-node-BS007:checked ~ .pwb-ss-wheel-frame .pwb-ss-wheel-head,
#pwb-map-node-BS008:checked ~ .pwb-ss-wheel-frame .pwb-ss-wheel-head,
#pwb-map-node-BS009:checked ~ .pwb-ss-wheel-frame .pwb-ss-wheel-head,
#pwb-map-node-BS010:checked ~ .pwb-ss-wheel-frame .pwb-ss-wheel-head,
#pwb-map-node-BS001:checked ~ .pwb-ss-wheel-frame .pwb-ss-wheel-lines,
#pwb-map-node-BS002:checked ~ .pwb-ss-wheel-frame .pwb-ss-wheel-lines,
#pwb-map-node-BS003:checked ~ .pwb-ss-wheel-frame .pwb-ss-wheel-lines,
#pwb-map-node-BS004:checked ~ .pwb-ss-wheel-frame .pwb-ss-wheel-lines,
#pwb-map-node-BS005:checked ~ .pwb-ss-wheel-frame .pwb-ss-wheel-lines,
#pwb-map-node-BS006:checked ~ .pwb-ss-wheel-frame .pwb-ss-wheel-lines,
#pwb-map-node-BS007:checked ~ .pwb-ss-wheel-frame .pwb-ss-wheel-lines,
#pwb-map-node-BS008:checked ~ .pwb-ss-wheel-frame .pwb-ss-wheel-lines,
#pwb-map-node-BS009:checked ~ .pwb-ss-wheel-frame .pwb-ss-wheel-lines,
#pwb-map-node-BS010:checked ~ .pwb-ss-wheel-frame .pwb-ss-wheel-lines{
    visibility:hidden;
}

/* The wheel now sits inside .dashboard-wheel (Highlights/Full detail)
   rather than only .pwb-ss-section (Super Simple) — .pwb-ss-wheel-radio
   is purely visually-hidden positioning (not scoped to one container), so
   it already works unchanged in both; this just documents that the radio
   inputs' visually-hidden style is intentionally shared. */

/* ---- Key Highlights (2 columns, up to 2 cards each) + "What This Means
   For You" (a single full-width card in the same style) ---- */

.pwb-ss-hl-columns{
    display:flex;
    gap:16px;
    margin-top:14px;
}

.pwb-ss-hl-col{
    flex:1;
    min-width:0;
    display:flex;
    flex-direction:column;
    gap:12px;
}

details.pwb-ss-hl-card{
    background:var(--surface-soft);
    border:1px solid var(--border-soft);
    border-radius:14px;
    padding:14px 16px;
}

details.pwb-ss-hl-card[open]{
    background:var(--surface);
    border-color:var(--primary);
}

.pwb-ss-hl-card summary{
    list-style:none;
    cursor:pointer;
}

.pwb-ss-hl-card summary::-webkit-details-marker{
    display:none;
}

.pwb-ss-hl-top{
    display:flex;
    align-items:center;
    gap:8px;
}

.pwb-ss-hl-icon{
    width:26px;
    height:26px;
    flex-shrink:0;
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--primary);
}

.pwb-ss-hl-icon .pwb-icon,
.pwb-ss-hl-icon .pwb-food-avatar{
    width:20px;
    height:20px;
}

.pwb-ss-hl-tag{
    flex:1;
    font-size:11px;
    font-weight:700;
    color:var(--primary);
    text-transform:uppercase;
    letter-spacing:.05em;
}

.pwb-ss-hl-chevron{
    color:var(--text-muted);
    font-size:12px;
    transition:transform .15s;
}

details.pwb-ss-hl-card[open] .pwb-ss-hl-chevron{
    transform:rotate(180deg);
}

.pwb-ss-hl-title{
    font-size:15px;
    font-weight:700;
    color:var(--text);
    margin-top:8px;
}

.pwb-ss-hl-teaser{
    font-size:12.5px;
    color:var(--text-muted);
    margin-top:2px;
    line-height:1.4;
}

.pwb-ss-hl-detail{
    margin-top:10px;
    padding-top:10px;
    border-top:1px solid var(--border-soft);
}

.pwb-ss-hl-detail p{
    font-size:13px;
    line-height:1.5;
    color:var(--text-secondary);
    margin:0 0 8px;
}

.pwb-ss-card-link{
    display:inline-block;
    font:inherit;
    font-size:12.5px;
    font-weight:700;
    color:var(--primary);
    background:none;
    border:none;
    padding:0;
    margin:0;
    cursor:pointer;
}

.pwb-ss-card-link:hover{
    text-decoration:underline;
}

.pwb-ss-wtmfy-card{
    max-width:none;
}

@media (max-width:820px){
    .pwb-ss-hl-columns{
        flex-direction:column;
    }
}

.pwb-ss-ghost-btn{
    display:block;
    width:100%;
    margin-top:28px;
    padding:13px 20px;
    background:none;
    border:2px solid var(--primary);
    border-radius:30px;
    color:var(--primary);
    font:inherit;
    font-weight:700;
    font-size:14px;
    text-align:center;
    cursor:pointer;
}

.pwb-ss-ghost-btn:hover{
    background:var(--primary-soft);
}