/* Result dashboard: waterfall chart, legend, totals, CTA. */

.result {
    display: flex;
    flex-direction: column;
    gap: var(--sp-5);
}

.result__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--sp-4);
}

.result__actions {
    display: flex;
    gap: var(--sp-3);
    flex-wrap: wrap;
}

.share-url {
    width: 100%;
    font-size: var(--fs-100);
}

.result__eyebrow {
    margin: 0;
    font-size: var(--fs-100);
    font-weight: 600;
    color: var(--c-green-dark);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.result__title {
    margin: 0.2rem 0;
    font-size: clamp(1.5rem, 4vw, 2rem);
}

.result__country {
    margin: 0;
}

/* --- Legend --- */
.fp-legend {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-4);
}

.fp-legend__item {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: var(--fs-200);
    color: var(--color-text-muted);
}

.fp-legend__dot {
    width: 0.85rem;
    height: 0.85rem;
    border-radius: 3px;
}

/* Interactive legend items (result page): real buttons that filter the bars on/off. */
.fp-legend__item--toggle {
    padding: 0.2rem 0.7rem;
    font: inherit;
    font-size: var(--fs-200);
    color: var(--color-text-muted);
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    cursor: pointer;
    transition: border-color 0.15s ease, opacity 0.15s ease;
}

.fp-legend__item--toggle:hover {
    border-color: var(--c-blue);
}

.fp-legend__item.is-off {
    opacity: 0.45;
    text-decoration: line-through;
}

/* --- Treemap (materials sized by footprint) --- */
.fp-treemap-block {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
}

.fp-treemap-title {
    margin: 0;
    font-size: var(--fs-400);
}

.fp-treemap {
    position: relative;
    height: 300px;
    padding: 0;
    overflow: hidden;
}

.treemap__cell {
    position: absolute;
    box-sizing: border-box;
    padding: var(--sp-2);
    display: flex;
    flex-direction: column;
    gap: 2px;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.55);
    overflow: hidden;
    line-height: 1.15;
}

.treemap__label {
    font-size: var(--fs-100);
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

.treemap__value {
    font-size: var(--fs-100);
    opacity: 0.95;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

/* Light tiles: dark label text (the drop shadow only suits white text). */
.treemap__cell--ink {
    color: var(--c-navy);
}

.treemap__cell--ink .treemap__label,
.treemap__cell--ink .treemap__value {
    text-shadow: none;
}

/* --- Chart toolbar (hint / building filter on the left, Year/Day toggle on the right) --- */
.fp-chart-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--sp-3);
}

.fp-hint {
    margin: 0;
    font-size: var(--fs-100);
}

/* Compact Year/Day pill toggle: visually-hidden radios keep native keyboard semantics. */
.fp-unit-toggle {
    display: inline-flex;
    margin-left: auto;
    padding: 2px;
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: 999px;
}

.fp-unit-toggle__opt {
    position: relative; /* anchors the visually-hidden radio */
}

.fp-unit-toggle__opt input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    opacity: 0;
}

.fp-unit-toggle__opt span {
    display: inline-block;
    padding: 0.25rem 0.9rem;
    font-size: var(--fs-100);
    font-weight: 600;
    color: var(--color-text-muted);
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.fp-unit-toggle__opt input:checked + span {
    background: var(--c-navy);
    color: #fff;
}

.fp-unit-toggle__opt input:focus-visible + span {
    outline: 2px solid var(--c-blue);
    outline-offset: 1px;
}

/* Building dropdown (organisation results with 2+ buildings). */
.fp-building-filter {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: var(--fs-200);
    color: var(--color-text-muted);
}

.fp-building-filter__select {
    width: auto;
}

/* display:inline-flex would otherwise defeat the [hidden] attribute (single-building results). */
.fp-building-filter[hidden] {
    display: none;
}

/* "Edit your inputs" link back into the organisation wizard (below the chart). */
.fp-edit-cta {
    margin: 0;
}

/* --- Chart --- */
/* The chart is a grid; each .fp-row uses display:contents so its cells (label | kg | bar | gap |
 * recycling gap) join the shared grid and line up. grid-template-columns is set by
 * footprintChart.render. */
.fp-chart {
    display: grid;
    align-items: center;
    column-gap: var(--sp-3);
    row-gap: var(--sp-3);
}

.fp-row {
    display: contents;
}

/* Column headers: Material | Total | Uncollected (Gap) | Recycling gap. The row itself is
 * display:contents, so styling targets its cells; an empty .fp-row__spacer sits over the bar. */
.fp-row--head > * {
    font-size: var(--fs-100);
    font-weight: 600;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    white-space: nowrap;
}

.fp-row__kg {
    font-size: var(--fs-200);
    white-space: nowrap;
    text-align: right;
}

/* The two gap columns (header cells included) line up on the right. */
.fp-row__gap,
.fp-row__rgap,
.fp-row--head .fp-row__gap,
.fp-row--head .fp-row__rgap {
    font-size: var(--fs-100);
    color: var(--color-text-muted);
    white-space: nowrap;
    text-align: right;
}

/* No Edit column any more: editable charts open the editor from a click anywhere on the row. */
.fp-chart--editable .fp-row:not(.fp-row--head) > * {
    cursor: pointer;
}

.fp-chart--editable .fp-row__track:focus-visible {
    outline: 2px solid var(--c-blue);
    outline-offset: 2px;
}

.fp-row__label {
    font-size: var(--fs-200);
    font-weight: 500;
    white-space: nowrap;
}

.fp-row__track {
    background: #eef2f4;
    border-radius: 999px;
    overflow: hidden;
}

.fp-row__bar {
    display: flex;
    height: 1.5rem;
    min-width: 2px;
    border-radius: 999px;
    overflow: hidden;
}

.fp-seg {
    height: 100%;
}

.fp-row__kg strong {
    color: var(--color-text);
    font-weight: 700;
}

/* --- Totals --- */
.result__totals {
    display: grid;
    gap: var(--sp-4);
    grid-template-columns: repeat(2, 1fr);
}

/* Caption for the totals cards: pulled up out of .result's flex gap so it reads as part of
   the block above rather than as a section of its own. */
.result__source {
    margin: calc(var(--sp-2) - var(--sp-5)) 0 0;
    font-size: var(--fs-100);
    color: var(--color-text-muted);
}

.total-card {
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
    padding: var(--sp-4) var(--sp-5);
    background: #fff;
    border: 1px solid var(--color-border);
    border-left-width: 6px;
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
}

.total-card__label {
    font-size: var(--fs-100);
    font-weight: 700;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.total-card__value {
    font-size: var(--fs-500);
    font-weight: 700;
    color: var(--color-primary);
}

/* Share-of-footprint line on the two gap cards; the Circular card spells out the three R's. */
.total-card__share,
.total-card__sub {
    font-size: var(--fs-100);
    color: var(--color-text-muted);
}

/* Stage cards read in their stage colour: left accent + soft stage tint + a readable
 * (darker-variant) label colour. Values stay navy — no garish fills. */
.total-card.is-footprint { border-left-color: var(--stage-footprint); background: #F0F2F4; }
.total-card.is-recycled { border-left-color: var(--stage-recycled); background: #F7FAE8; }
.total-card.is-collected { border-left-color: var(--stage-collected); background: #E7F8FD; }
.total-card.is-gap { border-left-color: var(--stage-gap); background: #F5F5F5; }
/* Recycling gap: brand-yellow accent, distinct from the grey Uncollected (Gap) card. */
.total-card.is-rgap { border-left-color: var(--c-yellow); background: #FFF8E5; }

.total-card.is-footprint .total-card__label { color: var(--c-navy); }
.total-card.is-recycled .total-card__label { color: var(--c-green-dark); }
.total-card.is-collected .total-card__label { color: var(--c-blue-dark); }
.total-card.is-gap .total-card__label { color: #6B6B6A; } /* darkened --c-gray, readable on tint */
.total-card.is-rgap .total-card__label { color: var(--c-yellow-dark); }

/* Source cards follow the same recipe as the stage cards above: left accent, soft tint, and a
 * darker label colour — brand yellow and lime are unreadable as text on white. */
.total-card.is-scope1 { border-left-color: var(--scope-1); background: #FFF8E5; }
.total-card.is-scope2 { border-left-color: var(--scope-2); background: #E7F8FD; }
.total-card.is-scope3 { border-left-color: var(--scope-3); background: #F7FAE8; }

.total-card.is-scope1 .total-card__label { color: var(--c-yellow-dark); }
.total-card.is-scope2 .total-card__label { color: var(--c-blue-dark); }
.total-card.is-scope3 .total-card__label { color: var(--c-green-dark); }

/* --- Scope (source) breakdown section --- */
.fp-scope {
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
    margin-top: var(--sp-2);
    padding-top: var(--sp-5);
    border-top: 1px solid var(--color-border);
}

/* The display:flex above would otherwise defeat the [hidden] attribute for B2C results. */
.fp-scope[hidden] {
    display: none;
}

.fp-scope__title {
    margin: 0 0 var(--sp-1);
}

.fp-scope__sub {
    margin: 0;
}

/* Four cards: total footprint + the three sources it is made of. */
.result__totals--scope {
    grid-template-columns: 1fr;
}

@media (min-width: 720px) {
    .result__totals--scope {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* --- CTA --- */
.result__cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--sp-4);
}

.result__cta h2 {
    margin: 0 0 var(--sp-2);
}

.result__cta p {
    margin: 0;
}

/* --- Close-gap page ("Close your Waste Footprint GAP") --- */
.close-gap {
    display: flex;
    flex-direction: column;
    gap: var(--sp-5);
}

.close-gap__stats {
    display: grid;
    gap: var(--sp-4);
}

.close-gap__step {
    align-items: flex-start;
}

.close-gap__step .step-card__body {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
}

.close-gap__step .btn {
    align-self: flex-start;
    margin-top: var(--sp-2);
}

/* --- Step 1: "View our proposal" accordion --- */
/* A prominent button reveals the certificate proposal: a filled green CTA when collapsed, flipping
 * to a plain white bar once open — so it never hides behind an easy-to-miss chevron. */
.close-gap__acc {
    display: flex;
    flex-direction: column;
    align-self: stretch;
}

/* Centre the CTA over the step; the revealed body still stretches full width below it. */
.close-gap__proposal {
    align-self: center;
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-4);
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    background: var(--c-green);
    color: var(--c-navy);
    font-weight: 600;
    cursor: pointer;
    list-style: none;
    user-select: none;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.close-gap__proposal::-webkit-details-marker { display: none; }
.close-gap__proposal::marker { content: ""; }

.close-gap__proposal:hover { background: var(--c-green-hover); }

.close-gap__proposal:focus-visible {
    outline: 3px solid var(--c-navy);
    outline-offset: 2px;
}

/* Open: the green CTA becomes a plain white bar that blends into the revealed panel. */
.close-gap__acc[open] > .close-gap__proposal {
    background: #fff;
    color: var(--c-navy);
    border-color: var(--color-border);
}

.close-gap__acc[open] > .close-gap__proposal:hover {
    background: #fff;
}

/* Rotating caret, shared by the proposal button and the nested panels. */
.close-gap__chevron {
    flex: 0 0 auto;
    transition: transform 0.15s ease;
}

.close-gap__acc[open] > .close-gap__proposal .close-gap__chevron {
    transform: rotate(180deg);
}

.close-gap__acc-body {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    padding: var(--sp-4) 0 0;
}

.close-gap__acc-body p {
    margin: 0;
}

.close-gap__subhead {
    margin: 0;
    font-size: var(--fs-300);
    color: var(--color-primary);
}

/* Right-aligned; the extra selector specificity beats the generic ".close-gap__step .btn" rule. */
.close-gap__acc-body .close-gap__reserve {
    align-self: flex-end;
    margin-top: var(--sp-2);
}

/* Inline confirmation / error shown after a reservation attempt. */
.close-gap__reserve-note {
    align-self: flex-end;
    margin: var(--sp-1) 0 0;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--c-green-dark, #007c34);
}

.close-gap__reserve-note.is-error {
    color: #c0392b;
}

.close-gap__notes {
    margin: 0;
    padding-left: var(--sp-5);
    color: var(--color-text-muted);
    font-size: var(--fs-200);
}

.close-gap__notes li {
    margin: var(--sp-1) 0;
}

/* --- Nested detail panels (materials KG, certificate details) --- */
/* No overflow:hidden here: the info-tip tooltips inside the tables pop upward and must not be
 * clipped. The tables sit well below the top of the enclosing .close-gap__acc, which does clip. */
.close-gap__subacc {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
}

.close-gap__subacc-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    background: var(--color-bg);
    color: var(--color-primary);
    font-weight: 600;
    cursor: pointer;
    list-style: none;
    user-select: none;
}

.close-gap__subacc-summary::-webkit-details-marker { display: none; }
.close-gap__subacc-summary::marker { content: ""; }

.close-gap__subacc-summary:focus-visible {
    outline: 3px solid var(--c-navy);
    outline-offset: -3px;
}

.close-gap__subacc-title { min-width: 0; }

.close-gap__subacc[open] > .close-gap__subacc-summary .close-gap__chevron {
    transform: rotate(180deg);
}

.close-gap__subacc-body {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    padding: var(--sp-4);
}

/* Each GAP block reads as "space, heading, table": a heading hugs its own table (gap above),
 * with clear breathing room above the heading to separate it from the block before. */
.close-gap__subacc-body .close-gap__subhead {
    margin-top: var(--sp-4);
}

.close-gap__subacc-body > .close-gap__subhead:first-child {
    margin-top: 0;
}

/* --- Reservation suggestions table (checkbox / label / kg / euro / cost) --- */
.cg-restable {
    display: grid;
    gap: 1px;
    background: var(--color-border);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    overflow: hidden;
    font-size: var(--fs-200);
}

.cg-restable__row {
    display: grid;
    /* check · certificate · kg / year · Price USD/kg · Total USD */
    grid-template-columns: auto minmax(0, 1.6fr) 1fr 1.3fr 1fr;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-3);
    background: #fff;
}

.cg-restable__head {
    background: var(--color-bg);
    font-weight: 600;
    font-size: var(--fs-100);
    text-align: center;
}

.cg-restable__check {
    display: inline-grid;
    place-items: center;
    width: 1.25rem;
}

.cg-res-check { cursor: pointer; }

.cg-restable__label { min-width: 0; font-weight: 600; }
.cg-restable__num { text-align: right; }

.cg-restable__cost {
    text-align: right;
    color: var(--color-text-muted);
    white-space: nowrap;
}

.cg-restable__total {
    background: var(--color-bg);
    font-weight: 700;
}

/* Keep the total row's per-kg figure readable rather than muted. */
.cg-restable__total .cg-restable__cost { color: var(--color-text); }

/* --- Per-material gap tables (material / kgs / cost + info) --- */
/* No overflow:hidden: the (i) tooltip pops above the row and would otherwise be clipped. */
.cg-table {
    display: grid;
    gap: 1px;
    background: var(--color-border);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-size: var(--fs-200);
}

.cg-table__row {
    display: grid;
    /* material · kgs · price USD/kg (+i) · total USD */
    grid-template-columns: minmax(0, 1.5fr) 0.9fr 1.1fr 0.9fr;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-3);
    background: #fff;
}

.cg-table__head {
    background: var(--color-bg);
    font-weight: 600;
    font-size: var(--fs-100);
    text-align: center;
}

.cg-table__head .cg-table__label { text-align: left; }
.cg-table__head .cg-table__num { text-align: center; }
/* Reset the muted cost colour for the header so "Cost of Collection / Processing cost" reads clearly. */
.cg-table__head .cg-table__cost { display: block; text-align: center; color: var(--color-text); }

.cg-table__label { min-width: 0; font-weight: 600; }
.cg-table__num { text-align: right; }

.cg-table__cost {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--sp-2);
    color: var(--color-text-muted);
}

.cg-table__total {
    background: var(--color-bg);
    font-weight: 700;
}

.cg-table__total .cg-table__num { font-weight: 700; }
/* The total's euro figure is a real number, not a muted rate — give it full weight and colour. */
.cg-table__total .cg-table__cost {
    color: var(--color-text);
    font-weight: 700;
}

/* --- Info "i" badge with a hover/focus tooltip (used in the gap tables) --- */
.info-tip {
    position: relative;
    display: inline-grid;
    place-items: center;
    width: 1.15rem;
    height: 1.15rem;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--c-blue);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    font-style: normal;
    line-height: 1;
    cursor: help;
}

.info-tip:focus-visible {
    outline: 3px solid var(--c-navy);
    outline-offset: 2px;
}

.info-tip::after {
    content: attr(data-tip);
    position: absolute;
    bottom: calc(100% + 8px);
    right: 0;
    z-index: 20;
    width: max-content;
    max-width: 16rem;
    padding: var(--sp-2) var(--sp-3);
    border-radius: var(--radius-sm);
    background: var(--c-navy);
    color: #fff;
    font-size: var(--fs-100);
    font-weight: 400;
    line-height: 1.35;
    text-align: left;
    white-space: normal;
    box-shadow: var(--shadow);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.12s ease;
    pointer-events: none;
}

.info-tip::before {
    content: "";
    position: absolute;
    bottom: calc(100% + 2px);
    right: 0.35rem;
    z-index: 21;
    border: 6px solid transparent;
    border-top-color: var(--c-navy);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.12s ease;
    pointer-events: none;
}

.info-tip:hover::after,
.info-tip:focus-visible::after,
.info-tip:hover::before,
.info-tip:focus-visible::before {
    opacity: 1;
    visibility: visible;
}

@media (min-width: 720px) {
    .result__totals {
        grid-template-columns: repeat(3, 1fr);
    }

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

/* Five stage cards (footprint / circular / collected / uncollected gap / circular gap) in one row;
 * the source row carries four (total footprint / staff / buildings / products). */
@media (min-width: 1000px) {
    .result__totals {
        grid-template-columns: repeat(5, 1fr);
    }

    .result__totals--scope {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 560px) {
    /* Per-row mini grid: line 1 = name | kg | gap | recycling gap (tapping the row edits);
       the bar spans full width on line 2. The header row reuses the same cell classes,
       so it mirrors this grid automatically. */
    .fp-chart {
        display: flex;
        flex-direction: column;
        align-items: stretch; /* override the desktop align-items:center so rows fill the width */
        gap: var(--sp-4);
    }

    /* Fixed kg/gap columns + truncated name so every row's columns line up. */
    .fp-row {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 4.5rem 4.5rem 4.5rem;
        align-items: center;
        column-gap: var(--sp-2);
        row-gap: var(--sp-1);
    }

    .fp-row__label {
        order: 1;
        min-width: 0;
        text-align: left;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-weight: 600;
    }

    .fp-row__kg {
        order: 2;
        text-align: center;
    }

    .fp-row__gap {
        order: 3;
        text-align: right;
    }

    .fp-row__rgap {
        order: 4;
        text-align: right;
    }

    /* The fixed columns are narrow: let numbers ("1.5 kg / day") and the header labels
       wrap instead of overflowing. */
    .fp-row__kg,
    .fp-row__gap,
    .fp-row__rgap,
    .fp-row--head > * {
        white-space: normal;
    }

    /* Header spacer cell (bar column) has no mobile column — drop it. */
    .fp-row__spacer {
        display: none;
    }

    .fp-row__track {
        order: 5;
        grid-column: 1 / -1;
    }

    .fp-treemap {
        height: 360px;
    }

    /* Tighten the close-gap panels and tables on narrow screens. */
    .close-gap__subacc-body {
        padding-left: var(--sp-3);
        padding-right: var(--sp-3);
    }

    .cg-restable,
    .cg-table {
        font-size: var(--fs-100);
    }

    .cg-restable__row,
    .cg-table__row {
        padding: var(--sp-2);
        gap: var(--sp-1);
    }

    .cg-restable__cost {
        white-space: normal;
    }
}

/* --- Edit modal --- */
.modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--sp-4);
    background: rgba(11, 45, 68, 0.45);
}

.modal {
    width: 100%;
    max-width: 420px;
    background: #fff;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    overflow: hidden;
}

.modal__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    padding: var(--sp-5) var(--sp-5) var(--sp-3);
}

.modal__head h3 {
    margin: 0;
}

.modal__close {
    border: 0;
    background: transparent;
    font-size: 1.5rem;
    line-height: 1;
    color: var(--color-text-muted);
    cursor: pointer;
}

.modal__body {
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
    padding: var(--sp-3) var(--sp-5);
}

.modal__gap {
    margin: 0;
    padding-top: var(--sp-2);
    border-top: 1px solid var(--color-border);
    color: var(--color-text-muted);
}

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

.modal__actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--sp-3);
    padding: var(--sp-4) var(--sp-5) var(--sp-5);
}