/* The EPR Wizard's own components. Everything shared with the other Kolekt services (header,
 * footer, bottom bar, buttons, fields, cards, tips, toasts) comes from base/layout/components.css
 * unchanged; this file only adds what those services never needed: the sub-header band, the
 * wizard's impact dock and choice cards, and the result views (summary, ranking, pathway).
 *
 * Same house rules: tokens only (no colour is defined here), BEM plus is-* state classes, and a
 * [hidden] twin for every rule that sets display - an author display rule beats the user agent's
 * [hidden], so without the twin a script that hides the element would hide nothing. */

/* --- Page width -----------------------------------------------------------
 * The customer's reference is the prototype on a tablet: one column, never the three-column
 * desktop grid. So every page is the tablet column, centred, at every width. */
.container--page { max-width: var(--container-page); }

/* The sub-header touches the site header, so the main area gives up its top padding. */
.site-main--flush { padding-top: 0; }

/* --- Sub-header -----------------------------------------------------------
 * The band under the site header: what this page is about, what you can do here and, for a
 * scenario, its views. Sticky like the site header on a screen tall and wide enough to afford
 * it; on a phone it scrolls away, because two stuck bands would leave the content a letterbox. */
.sub-header {
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    margin-bottom: var(--sp-5);
}
@media (min-width: 768px) and (min-height: 600px) {
    .sub-header {
        position: sticky;
        top: var(--header-h, 0px);
        z-index: var(--z-sticky-sub);
    }
}
/* The wizard has its own sticky dock (the running totals and the parts); the band scrolls away
   there so the dock is the one thing pinned under the header. */
.site-main--wizard > .sub-header { position: static; }

.sub-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--sp-3);
    padding-block: var(--sp-4);
}
.sub-header__inner[hidden] { display: none; }
.sub-header__heading { min-width: 0; }
.sub-header__context {
    margin: 0 0 var(--sp-1);
    font-size: var(--fs-100);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}
.sub-header__title {
    margin: 0;
    font-size: var(--fs-500);
    overflow-wrap: anywhere;
}
.sub-header__actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.sub-header__actions[hidden] { display: none; }

/* The context line is a trail back (fragments/crumbs.html); a page script may add its last part. */
.crumbs__link { color: inherit; text-decoration: none; }
.crumbs__link:hover, .crumbs__link:focus-visible { color: var(--c-navy); text-decoration: underline; }
.crumbs__sep { margin: 0 var(--sp-1); }
.crumbs__more:not(:empty)::before { content: "\203A"; margin: 0 var(--sp-1); }

/* On a phone the page's actions fold behind one "..." button (components/sub-header.js). The state
   classes mean something only inside the media query, so a wider window restores the row. */
.sub-header__menu { position: relative; display: flex; align-items: center; }
.sub-header__menu[hidden] { display: none; }
.sub-header__more { display: none; }
@media (max-width: 767.98px) {
    .sub-header__inner { flex-wrap: nowrap; align-items: flex-start; }
    .sub-header__heading { flex: 1 1 auto; }
    .sub-header__menu.has-actions .sub-header__more { display: inline-flex; }
    .sub-header__menu.has-actions .sub-header__more[hidden] { display: none; }
    .sub-header__menu.has-actions .sub-header__actions { display: none; }
    .sub-header__menu.has-actions.is-actions-open .sub-header__actions {
        position: absolute;
        top: calc(100% + var(--sp-1));
        right: 0;
        z-index: var(--z-tip);
        display: flex;
        flex-direction: column;
        align-items: stretch;
        min-width: 14rem;
        padding: var(--sp-2);
        background: var(--color-surface);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-sm);
        box-shadow: var(--shadow-sm);
    }
    .sub-header__menu.has-actions.is-actions-open .sub-header__actions[hidden] { display: none; }
}

/* The scenario's views. A strip that scrolls sideways on a phone instead of wrapping into a
   second row of chrome; the current view has a green rule AND aria-current, never colour alone. */
.sub-header__tabs {
    display: flex;
    gap: var(--sp-1);
    overflow-x: auto;
    scrollbar-width: thin;
}
.sub-header__tabs[hidden] { display: none; }
.sub-header__tab {
    flex: 0 0 auto;
    padding: var(--sp-2) var(--sp-3);
    border-bottom: 3px solid transparent;
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    color: var(--c-navy);
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color var(--dur-fast) ease;
}
.sub-header__tab:hover { background: var(--c-yellow); text-decoration: none; }
.sub-header__tab:focus-visible { outline: 3px solid var(--c-blue); outline-offset: -3px; }
.sub-header__tab.is-active { border-bottom-color: var(--action); font-weight: 700; }

/* --- Small shared pieces ----------------------------------------------- */

/* The lead paragraph under a heading. */
.lede { color: var(--color-text-muted); max-width: 46rem; }

/* Badges for the country's statement about an option, and for how far a country's content has
   been checked. Keyed by the value the API sends, like the review states in base.css. */
.badge--override-already_implemented,
.badge--override-partially_implemented { background: var(--success-bg); color: var(--success-ink); }
.badge--override-requires_primary_law { background: var(--color-warning-bg); color: var(--color-warning); }
.badge--override-determined_by_eu_law { background: var(--info-bg); color: var(--info-ink); }
.badge--override-legally_impossible { background: var(--color-danger-bg); color: var(--color-danger); }
.badge--verification-unverified { background: var(--color-warning-bg); color: var(--color-warning); }
.badge--verification-desk_verified { background: var(--info-bg); color: var(--info-ink); }
.badge--verification-counsel_verified { background: var(--success-bg); color: var(--success-ink); }
.badge--verification-expired { background: var(--color-danger-bg); color: var(--color-danger); }
.badge--access { background: var(--success-bg); color: var(--success-ink); }

/* Recommended / Alternative, as a word in a pill. Same two tints as the choice card. */
.pill {
    display: inline-block;
    padding: 2px var(--sp-2);
    border-radius: 999px;
    font-size: var(--fs-100);
    font-weight: 700;
    white-space: nowrap;
}
.pill--rec { background: var(--rec-bg); color: var(--rec-ink); }
.pill--alt { background: var(--alt-bg); color: var(--alt-ink); }

.is-worse { color: var(--impact-worse); }
.is-better { color: var(--impact-better); }

/* A definition list of short facts, label left and value right. */
.fact-list {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: var(--sp-1) var(--sp-4);
    margin: 0;
    font-size: var(--fs-200);
}
.fact-list[hidden] { display: none; }
.fact-list dt { color: var(--color-text-muted); }
.fact-list dd { margin: 0; font-weight: 600; color: var(--c-navy); }
/* On a phone the label column (max-content) left the value too narrow for one long word, which
   then stood past the card and scrolled the page sideways by 23px. Stacked, both have the width. */
@media (max-width: 480px) {
    .fact-list { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
    .fact-list dd { margin-bottom: var(--sp-2); }
}

/* --- Dialog -------------------------------------------------------------
 * The native <dialog>: focus is trapped and Escape closes it without a line of script. */
.dialog {
    width: min(34rem, calc(100vw - 2 * var(--sp-4)));
    max-height: calc(100vh - 2 * var(--sp-4));
    padding: 0;
    border: 0;
    border-radius: var(--radius);
    background: var(--color-surface);
    color: var(--color-text);
    box-shadow: var(--shadow);
}
.dialog::backdrop { background: rgba(11, 45, 68, 0.45); }
.dialog__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    padding: var(--sp-4) var(--sp-5);
    border-bottom: 1px solid var(--color-border);
}
.dialog__head[hidden] { display: none; }
.dialog__title { margin: 0; font-size: var(--fs-400); }
.dialog__body { padding: var(--sp-5); }
.dialog__foot {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--sp-2);
    padding: var(--sp-4) var(--sp-5);
    border-top: 1px solid var(--color-border);
}
.dialog__foot[hidden] { display: none; }

/* The scenario settings: a drawer from the right on a wide screen, a sheet on a phone. */
@media (min-width: 768px) {
    .dialog--drawer {
        width: min(30rem, 100vw);
        height: 100vh;
        max-height: 100vh;
        margin: 0 0 0 auto;
        border-radius: 0;
    }
}

/* --- Tables ------------------------------------------------------------
 * Real <table>s: the summary and the admin lists are read row by row, and a screen reader
 * announces the column of each cell. Below 600px a .table--stack turns every row into a card,
 * each cell introduced by its column name (data-label), instead of scrolling sideways. */
.table-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    overflow-x: auto;
}
.table-card[hidden] { display: none; }
.table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--fs-200);
}
.table th,
.table td {
    padding: var(--sp-2) var(--sp-3);
    border-bottom: 1px solid var(--color-border);
    text-align: left;
    vertical-align: top;
}
.table th {
    font-size: var(--fs-100);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    background: var(--color-surface-alt);
}
.table tbody tr:last-child td { border-bottom: 0; }
.table__num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.table__no { font-family: var(--font-mono); color: var(--color-text-muted); white-space: nowrap; }
@media (max-width: 600px) {
    .table--stack thead {
        position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden;
        clip: rect(0 0 0 0); white-space: nowrap; border: 0;
    }
    .table--stack tr { display: block; padding: var(--sp-2) 0; border-bottom: 1px solid var(--color-border); }
    .table--stack tr[hidden] { display: none; }
    .table--stack tbody tr:last-child { border-bottom: 0; }
    .table--stack td { display: block; padding: var(--sp-1) var(--sp-3); border: 0; text-align: left; }
    .table--stack td[hidden] { display: none; }
    .table--stack td[data-label]::before {
        content: attr(data-label);
        display: block;
        font-size: var(--fs-100);
        font-weight: 600;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        color: var(--color-text-muted);
    }
}

/* --- Home: the simple wizard ------------------------------------------------
 * What a visitor tries without an account: the country, two figures, popularity behind a flap, and
 * three sections that open (EPR choices, Impact summary, Generate EPR text). The totals reuse the
 * wizard's dock, so they stay in sight while the questions scroll; the cards are the wizard's own. */
.hero--lead { padding-bottom: var(--sp-4); }
.hero--close { padding-block: var(--sp-2) 0; }
.preview { margin-bottom: var(--sp-5); }
.preview__start { max-width: 26rem; margin: 0 auto var(--sp-3); text-align: center; }
.preview__country { margin-bottom: var(--sp-2); }
.preview__hint { margin: 0; }
.preview__intro { max-width: 46rem; margin: 0 0 var(--sp-3); color: var(--color-text-muted); }
/* The last line of a section: the panel's own padding is the gap under it. */
.preview__intro:last-child { margin-bottom: 0; }
.preview__facts { margin-bottom: var(--sp-4); }
/* The number and the count take the bar's white: muted grey cannot be read on its blue. */
.theme__no { flex: 0 0 auto; min-width: 1.25em; font-variant-numeric: tabular-nums; }
/* The part's name wraps on a phone; "2 questions" beside it stays one piece. */
.theme__count { flex: 0 0 auto; white-space: nowrap; font-weight: 600; }
.theme__next { justify-content: flex-end; margin-top: var(--sp-2); }
/* A part opened by "Next part" lands under the dock, not behind it. */
.fold--theme,
.fold--main { scroll-margin-top: calc(var(--header-h, 0px) + var(--dock-h, 0px) + var(--sp-3)); }
/* The summary's two ranking cards stand one under the other: side by side inside the section they
   left a label a hundred pixels, and every row ran to four lines. */
.preview .rank-grid { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 600px) {
    /* On a phone the label takes a line of its own, the bar and its figure the next. */
    .preview .rank-grid .card { padding: var(--sp-3); }
    .preview .bar-row,
    .preview .bar-axis { grid-template-columns: minmax(0, 1fr) 3.75rem; }
    .preview .bar-row__label { grid-column: 1 / -1; }
    .preview .bar-axis > span:first-child { display: none; }
}

/* --- Country and scenario cards ------------------------------------------- */
.item-card { display: flex; flex-direction: column; gap: var(--sp-3); }
.item-card[hidden] { display: none; }
.item-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-3); }
.item-card__head[hidden] { display: none; }
.item-card__title { margin: 0; font-size: var(--fs-400); overflow-wrap: anywhere; }
.item-card__title a { color: var(--c-navy); text-decoration: none; }
.item-card__title a:hover { text-decoration: underline; }
.item-card__sub { margin: 0; color: var(--color-text-muted); font-size: var(--fs-200); }
.item-card__badges { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.item-card__badges[hidden] { display: none; }
/* Actions sit at the bottom of the card whatever the card above them holds. */
.item-card__actions { margin-top: auto; }

.stack { display: grid; gap: var(--sp-3); }
.stack[hidden] { display: none; }

/* --- Wizard dock -----------------------------------------------------------
 * The running totals and the parts, stuck under the site header while the choices scroll past.
 * Its background is the page's, so cards scrolling under it disappear cleanly behind it. */
.wizard-dock {
    position: sticky;
    top: var(--header-h, 0px);
    z-index: var(--z-sticky-sub);
    padding-top: var(--sp-2);
    margin-bottom: var(--sp-4);
    background: var(--color-bg);
}

.impact {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--sp-2) var(--sp-4);
    align-items: start;
    padding: var(--sp-3) var(--sp-4);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
}
.impact[hidden] { display: none; }
.impact__stat { min-width: 0; }
.impact__label {
    display: flex;
    align-items: center;
    font-size: var(--fs-100);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}
.impact__label[hidden] { display: none; }
.impact__value {
    font-size: var(--fs-500);
    font-weight: 700;
    line-height: 1.15;
    color: var(--c-navy);
    font-variant-numeric: tabular-nums;
}
.impact__value.is-worse { color: var(--impact-worse); }
.impact__value.is-better { color: var(--impact-better); }
.impact__sub { font-size: var(--fs-100); color: var(--color-text-muted); }
.impact__meter { margin: var(--sp-1) 0 0; height: 6px; }

/* Popularity: open under the totals on a wide screen (the customer asked to see it without a
   click), behind a toggle on anything narrower, where it opens OVER the choices rather than
   pushing the whole dock taller. */
.impact__pop-toggle {
    grid-column: 1 / -1;
    display: none;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: var(--sp-1) var(--sp-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-bg);
    color: var(--color-text-muted);
    font: inherit;
    font-size: var(--fs-100);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
}
.impact__pop-toggle[hidden] { display: none; }
.impact__pop-toggle:focus-visible { outline: 3px solid var(--c-blue); outline-offset: 2px; }
.impact__pop-caret { transition: transform var(--dur-fast) ease; }
.impact.is-pop-open .impact__pop-caret { transform: rotate(180deg); }

.popularity {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--sp-1) var(--sp-5);
    padding-top: var(--sp-2);
    border-top: 1px solid var(--color-border);
}
.popularity[hidden] { display: none; }
.popularity__title { grid-column: 1 / -1; }

.pop-row {
    display: grid;
    grid-template-columns: minmax(0, 7.5rem) minmax(3rem, 1fr) 2.25rem;
    gap: var(--sp-2);
    align-items: center;
    font-size: var(--fs-100);
}
.pop-row[hidden] { display: none; }
.pop-row__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pop-row__value { font-family: var(--font-mono); font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }

/* A bar that grows left of the centre line for a negative score, right of it for a positive one.
   The script hands the geometry in as custom properties (a value, never a display rule). */
.pop-bar {
    position: relative;
    height: 8px;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-bg);
    overflow: hidden;
}
.pop-bar::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 1px;
    background: var(--c-gray);
}
.pop-bar__fill {
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--pop-left, 50%);
    width: var(--pop-width, 0%);
    background: var(--impact-better);
}
.pop-bar__fill.is-worse { background: var(--impact-worse); }

@media (max-width: 1023px) {
    .impact__pop-toggle { display: flex; }
    .popularity {
        display: none;
        position: absolute;
        top: calc(100% + var(--sp-1));
        left: 0;
        right: 0;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        padding: var(--sp-3) var(--sp-4);
        border: 1px solid var(--color-border);
        border-radius: var(--radius);
        background: var(--color-surface);
        box-shadow: var(--shadow);
    }
    .impact.is-pop-open .popularity { display: grid; }
    /* Companion guard: (0,2,0) above would otherwise beat the global .popularity[hidden]. */
    .impact.is-pop-open .popularity[hidden] { display: none; }
}
@media (max-width: 600px) {
    .impact { padding: var(--sp-2) var(--sp-3); gap: var(--sp-1) var(--sp-3); }
    .impact__value { font-size: var(--fs-400); }
    .popularity { grid-template-columns: minmax(0, 1fr); }
}

/* The home page's totals: two figures (no count of recommended choices), and popularity behind the
   flap at every width - there it starts closed, so a first-time visitor meets two numbers, not
   eight. The same flap rules as the narrow screen above, without the breakpoint. */
.impact--duo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.impact--flap .impact__pop-toggle { display: flex; }
.impact--flap .impact__pop-toggle[hidden] { display: none; }
.impact--flap .impact__pop-toggle:disabled { cursor: not-allowed; opacity: 0.6; }
.impact--flap .popularity {
    display: none;
    position: absolute;
    top: calc(100% + var(--sp-1));
    left: 0;
    right: 0;
    padding: var(--sp-3) var(--sp-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    box-shadow: var(--shadow);
}
.impact--flap.is-pop-open .popularity { display: grid; }
.impact--flap.is-pop-open .popularity[hidden] { display: none; }

/* --- Part strip -------------------------------------------------------------
 * The eleven parts as one sideways-scrolling row (the prototype on a tablet). Arrows appear on a
 * device with a pointer, where a sideways scroll is not a natural gesture. */
.part-nav {
    display: flex;
    align-items: center;
    gap: var(--sp-1);
    padding: var(--sp-2) 0;
}
.part-nav[hidden] { display: none; }
.part-nav__strip {
    display: flex;
    flex: 1 1 auto;
    gap: var(--sp-2);
    min-width: 0;
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: none;
}
.part-nav__strip[hidden] { display: none; }
.part-nav__strip::-webkit-scrollbar { display: none; }
.part-nav__arrow {
    display: none;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-surface);
    color: var(--c-navy);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}
.part-nav__arrow[hidden] { display: none; }
.part-nav__arrow:hover { background: var(--c-yellow); }
.part-nav__arrow:disabled { opacity: 0.35; cursor: default; background: var(--color-surface); }
@media (hover: hover) and (pointer: fine) {
    .part-nav__arrow { display: inline-flex; }
}

.part-tab {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-1) var(--sp-3);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-surface);
    color: var(--c-navy);
    font: inherit;
    font-size: var(--fs-200);
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color var(--dur-fast) ease;
}
.part-tab[hidden] { display: none; }
.part-tab:hover { background: var(--c-yellow); }
.part-tab:focus-visible { outline: 3px solid var(--c-blue); outline-offset: 2px; }
.part-tab[aria-current="true"] {
    background: var(--action);
    border-color: var(--action);
    font-weight: 700;
}
.part-tab__no { font-variant-numeric: tabular-nums; }
.part-tab__count { font-size: var(--fs-100); color: var(--color-text-muted); font-weight: 400; }
.part-tab[aria-current="true"] .part-tab__count { color: var(--c-navy); }
.part-tab__changed {
    padding: 0 var(--sp-2);
    border-radius: 999px;
    background: var(--alt-bg);
    color: var(--alt-ink);
    font-size: var(--fs-100);
    font-weight: 700;
}

/* --- Part heading and filter ------------------------------------------------ */
.part-head { margin-bottom: var(--sp-4); }
.part-head__title { font-size: var(--fs-500); margin-bottom: var(--sp-1); }
.part-head__intro { color: var(--color-text-muted); max-width: 46rem; margin-bottom: var(--sp-3); }

/* --- Choice card -----------------------------------------------------------
 * One question, two options side by side. The option cell is the button (a stretched ::before
 * covers it), so a tap anywhere in the cell chooses; the (i) tip is a SIBLING of that button,
 * lifted above the stretch, so opening an explanation never flips the choice.
 *
 * Which option is chosen is said the same way on both sides: a navy ring, a filled mark and the
 * word "Selected" (--selected-*). The sides used to wear their own colours when chosen - green for
 * the recommendation, gold for the alternative - and the client could not tell which one was. */
.choice {
    display: grid;
    gap: var(--sp-3);
    margin-bottom: var(--sp-3);
    padding: var(--sp-4);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    scroll-margin-top: calc(var(--header-h, 0px) + var(--dock-h, 0px) + var(--sp-3));
}
.choice[hidden] { display: none; }
.choice.is-changed { border-color: var(--alt-rule); }

.choice__head { display: flex; align-items: baseline; gap: var(--sp-3); }
.choice__head[hidden] { display: none; }
.choice__no {
    flex: 0 0 auto;
    min-width: 2.5em;
    font-family: var(--font-mono);
    font-size: var(--fs-100);
    color: var(--action-ink);
}
.choice__question { margin: 0; font-size: 1.0625rem; line-height: 1.35; }

.choice__options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
}
.choice__options[hidden] { display: none; }
.choice__options[aria-busy="true"] { cursor: progress; }

.choice__option {
    position: relative;
    display: grid;
    align-content: start;
    gap: var(--sp-1);
    min-width: 0;
    padding: var(--sp-3);
    background: var(--color-surface);
}
.choice__option[hidden] { display: none; }
.choice__option:first-child { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.choice__option:last-child { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; border-left: 1px solid var(--color-border); }
.choice__option.is-selected { background: var(--selected-bg); box-shadow: inset 0 0 0 2px var(--selected-rule); }
.choice__option.is-locked { opacity: 0.7; }

/* The mark: an empty ring on the option that is not chosen, filled with a tick on the one that is. */
.choice__mark {
    position: relative;
    display: inline-block;
    width: 1.125rem;
    height: 1.125rem;
    margin-right: var(--sp-2);
    border: 2px solid var(--c-gray);
    border-radius: 50%;
    background: var(--color-surface);
    vertical-align: -0.25em;
}
.choice__option.is-selected .choice__mark { border-color: var(--selected-rule); background: var(--selected-rule); }
.choice__option.is-selected .choice__mark::after {
    content: "";
    position: absolute;
    left: 0.28rem;
    top: 0.06rem;
    width: 0.3rem;
    height: 0.56rem;
    border: solid var(--c-white);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
.choice__picked {
    margin-left: var(--sp-2);
    padding: 1px var(--sp-2);
    border-radius: 999px;
    background: var(--selected-rule);
    color: var(--c-white);
    font-weight: 700;
}
.choice__option--rec .choice__side { color: var(--rec-ink); }

.choice__toggle {
    display: grid;
    gap: 2px;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.choice__toggle[hidden] { display: none; }
.choice__toggle::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
}
.choice__toggle:focus-visible { outline: none; }
.choice__toggle:focus-visible::before { outline: 3px solid var(--c-blue); outline-offset: -3px; }
.choice__toggle:disabled { cursor: not-allowed; }
.choice__options[aria-busy="true"] .choice__toggle { cursor: progress; }
/* Hovering is not choosing: a quiet grey, never the tint of the chosen option. */
@media (hover: hover) {
    .choice__option:not(.is-selected):not(.is-locked):hover { background: var(--color-bg); }
}

.choice__tag {
    font-size: var(--fs-100);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}
/* Room on the right of the tag for the (i) that sits in the alternative's corner. */
.choice__option--alt .choice__tag { padding-right: 1.75rem; }
.choice__impact { font-weight: 500; letter-spacing: 0; text-transform: none; }
.choice__label { font-weight: 500; color: var(--color-text); }
.choice__option.is-selected .choice__label { font-weight: 700; }
.choice__examples { font-size: var(--fs-100); color: var(--color-text-muted); }

/* The tip in the corner of the cell, above the stretched button. */
.choice__option > .info-tip {
    position: absolute;
    top: var(--sp-2);
    right: var(--sp-2);
    z-index: 1;
    margin: 0;
}
.choice__option > .info-tip .info-tip__bubble { left: auto; right: 0; }

/* The country's statement about this option. Above the stretch too, so its note can be read. */
.choice__status { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-2); align-items: center; }
.choice__status[hidden] { display: none; }
.choice__note { font-size: var(--fs-100); color: var(--color-text-muted); }

.pop-chips { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 2px; }
.pop-chips[hidden] { display: none; }
.pop-chip {
    padding: 0 4px;
    border: 1px solid var(--color-border);
    border-radius: 3px;
    background: var(--color-surface);
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    line-height: 1.5;
    color: var(--color-text-muted);
}
.pop-chip.is-better { color: var(--impact-better); }
.pop-chip.is-worse { color: var(--impact-worse); }

.choice__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-2);
    font-size: var(--fs-100);
    color: var(--color-text-muted);
}
.choice__meta[hidden] { display: none; }
.choice__sources { margin: 0; font-size: var(--fs-100); color: var(--color-text-muted); }
.choice__sources a { color: var(--c-blue-dark); }

/* "Details" on a card that starts as its question and two options (the home page's simple wizard). */
.choice__more {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    justify-self: start;
    padding: var(--sp-1) var(--sp-2);
    border: 0;
    border-radius: var(--radius-sm);
    background: none;
    color: var(--action-ink);
    font: inherit;
    font-size: var(--fs-200);
    font-weight: 600;
    cursor: pointer;
}
.choice__more[hidden] { display: none; }
.choice__more:hover { color: var(--c-navy); }
.choice__more:focus-visible { outline: 3px solid var(--c-blue); outline-offset: 2px; }
.choice.is-detailed .choice__more .fold__caret { transform: rotate(90deg); }

/* Where a figure comes from. Mono and small, as in the prototype, so they read as labels. */
.source-tag {
    padding: 1px 7px;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    background: var(--color-bg);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    white-space: nowrap;
}
.source-tag--kolekt { color: var(--action-ink); border-color: var(--action-ink); }
.source-tag--estimate { color: var(--alt-ink); border: 1px dashed var(--alt-rule); }
.source-tag--legal { background: var(--rec-bg); border-color: transparent; color: var(--c-navy); font-weight: 700; }

@media (max-width: 520px) {
    .choice { padding: var(--sp-3); }
    .choice__options { grid-template-columns: minmax(0, 1fr); }
    .choice__option:first-child { border-radius: var(--radius-sm) var(--radius-sm) 0 0; }
    .choice__option:last-child { border-radius: 0 0 var(--radius-sm) var(--radius-sm); border-left: 0; border-top: 1px solid var(--color-border); }
}

.pager {
    display: flex;
    justify-content: space-between;
    gap: var(--sp-2);
    margin: var(--sp-5) 0;
}
.pager[hidden] { display: none; }

/* --- Ranking --------------------------------------------------------------- */
.rank-grid {
    display: grid;
    gap: var(--sp-4);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 28rem), 1fr));
    margin-bottom: var(--sp-4);
}
.rank-grid[hidden] { display: none; }
.rank-card__title { margin-bottom: var(--sp-1); }
.legend {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-1) var(--sp-4);
    margin-bottom: var(--sp-2);
    font-size: var(--fs-100);
    color: var(--color-text-muted);
}
.legend[hidden] { display: none; }
.legend__swatch {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-right: var(--sp-1);
    border-radius: 2px;
    vertical-align: -1px;
}
.legend__swatch.is-worse, .bar__fill.is-worse { background: var(--impact-worse); }
.legend__swatch.is-better, .bar__fill.is-better { background: var(--impact-better); }
.rank-group {
    margin: var(--sp-4) 0 var(--sp-2);
    font-size: var(--fs-100);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.bar-row,
.bar-axis {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(5.5rem, 38%) 3.75rem;
    gap: var(--sp-3);
    align-items: center;
    padding: var(--sp-1) var(--sp-2);
}
.bar-row[hidden], .bar-axis[hidden] { display: none; }
.bar-row { border-radius: var(--radius-sm); }
.bar-row:hover { background: var(--color-bg); }
.bar-row__label { min-width: 0; font-size: var(--fs-100); line-height: 1.3; }
.bar-row__label b { font-weight: 600; }
.bar-row__part { display: block; font-size: 0.75rem; color: var(--color-text-muted); }
.bar-row__selected {
    margin-left: var(--sp-1);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--alt-ink);
}
.bar-row__value { font-family: var(--font-mono); font-size: var(--fs-100); text-align: right; font-variant-numeric: tabular-nums; }
.bar {
    position: relative;
    height: 14px;
    border-left: 1px solid var(--c-gray);
}
.bar__fill {
    position: absolute;
    top: 1px;
    bottom: 1px;
    left: 0;
    width: var(--bar-w, 0%);
    border-radius: 0 4px 4px 0;
}
.bar-axis { padding-block: 0; font-family: var(--font-mono); font-size: 0.6875rem; color: var(--color-text-muted); }
.bar-axis__scale { display: flex; justify-content: space-between; }
.bar-axis__scale[hidden] { display: none; }
.rank-empty { margin: 0; padding: var(--sp-2); font-size: var(--fs-200); color: var(--color-text-muted); }

/* --- Pathway ----------------------------------------------------------------- */
.route-card { border-left: 4px solid var(--c-blue); margin-bottom: var(--sp-4); }
.route-card.is-primary-law { border-left-color: var(--c-yellow); }
.route-card__label { margin-bottom: var(--sp-1); }
.route-card__title { font-size: var(--fs-400); margin-bottom: var(--sp-2); }

.trigger-list { margin: 0; padding-left: var(--sp-5); }
.trigger-list li { margin-bottom: var(--sp-2); }

.gantt { display: grid; gap: var(--sp-2); }
.gantt[hidden] { display: none; }
.gantt__row {
    display: grid;
    grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
    gap: var(--sp-3);
    align-items: center;
}
.gantt__row[hidden] { display: none; }
.gantt__name { font-size: var(--fs-200); font-weight: 600; color: var(--c-navy); }
.gantt__dates { display: block; font-size: var(--fs-100); font-weight: 400; color: var(--color-text-muted); }
.gantt__track {
    position: relative;
    height: 1.75rem;
    border-radius: var(--radius-sm);
    background: var(--color-bg);
}
.gantt__bar {
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--from, 0%);
    width: var(--span, 0%);
    min-width: 2px;
    display: flex;
    align-items: center;
    padding: 0 var(--sp-2);
    border-radius: var(--radius-sm);
    background: var(--c-blue);
    color: var(--c-navy);
    font-size: var(--fs-100);
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
}
.gantt__bar[hidden] { display: none; }
.gantt__bar.is-parallel { background: var(--c-yellow); }
.gantt__axis {
    display: flex;
    justify-content: space-between;
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    color: var(--color-text-muted);
}
.gantt__axis[hidden] { display: none; }
@media (max-width: 600px) {
    .gantt__row { grid-template-columns: minmax(0, 1fr); gap: var(--sp-1); }
}

/* --- Law-making procedure (Legal pathway) -------------------------------------
 * One block per instrument the design needs, its steps as bars on a shared axis of days. Steps before
 * parliament are navy: that is where an election or a recess holds a bill up. */
.procedure__instruments { display: grid; gap: var(--sp-4); margin: var(--sp-4) 0 var(--sp-2); }
.procedure__instruments[hidden] { display: none; }
.procedure-item { padding-top: var(--sp-3); border-top: 1px solid var(--color-border); }
.procedure-item__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--sp-2);
}
.procedure-item__head[hidden] { display: none; }
.procedure-item__title { margin: 0; font-size: var(--fs-300); overflow-wrap: anywhere; }
.procedure-item__local { margin: var(--sp-1) 0 0; font-size: var(--fs-200); overflow-wrap: anywhere; }
.procedure-item__why { margin: var(--sp-2) 0 0; font-size: var(--fs-200); }
.procedure-item__in-force { margin: var(--sp-1) 0 var(--sp-3); font-size: var(--fs-200); font-weight: 600; color: var(--c-navy); }
.gantt__bar.is-parliament { background: var(--c-navy); color: var(--c-white); }
.procedure-item .fold { margin-top: var(--sp-2); }
/* A step's name is a sentence: it runs above its bar rather than in a column beside it. */
.gantt--stacked .gantt__row { grid-template-columns: minmax(0, 1fr); gap: var(--sp-1); }
/* A pause of parliament behind a step before parliament, and a line for an election or a deadline. */
.gantt__window {
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--from, 0%);
    width: var(--span, 0%);
    background: repeating-linear-gradient(135deg, var(--c-yellow) 0 3px, transparent 3px 7px);
    opacity: 0.55;
}
.gantt__mark {
    position: absolute;
    top: -4px;
    bottom: -4px;
    left: var(--at, 0%);
    width: 2px;
    margin-left: -1px;
    background: var(--color-danger);
}
.procedure-swatch--parliament { background: var(--c-navy); }
.procedure-swatch--pause { background: repeating-linear-gradient(135deg, var(--c-yellow) 0 2px, transparent 2px 4px); }
.procedure-swatch--mark { width: 2px; background: var(--color-danger); }
.procedure__legend { margin: 0 0 var(--sp-3); padding: 0; list-style: none; }
.procedure__heading { margin: var(--sp-4) 0 var(--sp-2); font-size: var(--fs-300); }
.procedure__list { margin: 0 0 var(--sp-2); padding-left: var(--sp-5); font-size: var(--fs-200); }
.procedure__list li { margin-bottom: var(--sp-2); overflow-wrap: anywhere; }
.procedure__note { display: block; color: var(--color-text-muted); }

.clash-list {
    margin: var(--sp-3) 0;
    padding: var(--sp-3) var(--sp-4);
    list-style: none;
    border-left: 4px solid var(--color-danger);
    border-radius: var(--radius-sm);
    background: var(--color-bg);
    font-size: var(--fs-200);
}
.clash-list__item + .clash-list__item { margin-top: var(--sp-2); }

.milestone-list { margin: 0; padding: 0; list-style: none; }
.milestone-list__item {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--sp-1) var(--sp-2);
    padding: var(--sp-2) 0;
    border-bottom: 1px solid var(--color-border);
}
.milestone-list__item[hidden] { display: none; }
.milestone-list__date { font-weight: 600; color: var(--c-navy); white-space: nowrap; }
.milestone-list__window { font-size: var(--fs-200); color: var(--color-text-muted); }
.milestone-list__label { flex-basis: 100%; font-size: var(--fs-200); overflow-wrap: anywhere; }

/* --- Copy fallback ---------------------------------------------------------
 * Where the clipboard is refused (an http page, an old browser), the text lands in a box to copy
 * by hand rather than the button failing silently. */
.copy-box {
    width: 100%;
    min-height: 8rem;
    margin-top: var(--sp-3);
    padding: var(--sp-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-bg);
    font-family: var(--font-mono);
    font-size: var(--fs-100);
}

/* A checkbox whose wording runs to two lines (the terms consent): the box stays level with the
   first line instead of centring on the paragraph. */
.check-row {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-2);
    margin-bottom: var(--sp-4);
    font-size: var(--fs-200);
}
.check-row[hidden] { display: none; }
.check-row > input { flex: 0 0 auto; margin-top: 0.3em; }

/* The home page's buttons, centred under the centred hero text. */
.home-cta { justify-content: center; margin-top: var(--sp-5); }
.gantt-swatch--parallel { background: var(--c-yellow); }

/* --- Share dialog ---------------------------------------------------------- */
.share-list { display: grid; gap: var(--sp-2); margin: 0; padding: 0; list-style: none; }
.share-list[hidden] { display: none; }
.share-list__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
}
.share-list__row[hidden] { display: none; }
.share-list__who { flex: 1 1 12rem; min-width: 0; overflow-wrap: anywhere; }
.share-form__email { flex: 1 1 14rem; }
.share-form__error { flex: 1 1 100%; }
/* Level with the fields beside it, which carry the field's bottom margin. */
.share-form__submit { margin-bottom: var(--sp-4); }
/* The country badge in the band's context line: back to normal case beside the uppercase country. */
.sub-header__badge { margin-left: var(--sp-1); letter-spacing: 0; text-transform: none; vertical-align: 1px; }

/* The wizard's part heading lands just under the dock when a part is opened. */
.part-head { scroll-margin-top: calc(var(--header-h, 0px) + var(--dock-h, 0px) + var(--sp-3)); }

/* The legend in "About these figures". */
.legend-list { margin: 0 0 var(--sp-3); padding-left: var(--sp-5); }
.legend-list li { margin-bottom: var(--sp-2); }

/* --- Admin ------------------------------------------------------------------ */
.admin-search { flex: 1 1 20rem; }
.admin-dates { display: block; font-size: var(--fs-100); }
.admin-grant { margin-top: var(--sp-2); gap: var(--sp-2); }
.admin-chip { display: inline-flex; align-items: center; gap: var(--sp-1); padding-right: var(--sp-1); }
.admin-chip[hidden] { display: none; }
.admin-chip__remove { width: 1.25rem; height: 1.25rem; font-size: var(--fs-200); }
.select--sm { width: auto; padding: var(--sp-1) var(--sp-2); font-size: var(--fs-200); }
.request-message { white-space: pre-line; overflow-wrap: anywhere; }
/* A band tab that filters the page instead of navigating: a <button> dressed as the link tabs. */
.tab-button {
    border: 0;
    border-bottom: 3px solid transparent;
    background: none;
    font: inherit;
    font-weight: 500;
    cursor: pointer;
}
.tab-button:hover { background: var(--c-yellow); }
.tab-button.is-active { border-bottom-color: var(--action); font-weight: 700; }
/* On a phone the dock keeps only what changes as you choose; the reference figure is in the
   "About these figures" note. */
@media (max-width: 600px) {
    .impact__extra { display: none; }
    .impact__label { font-size: 0.6875rem; letter-spacing: 0.04em; }
}

/* Scenario and country cards keep a card's width when there are only one or two of them:
   auto-FILL keeps the empty tracks, where auto-fit would stretch a lone card across the page. */
.card-grid--fill { grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); }

/* --- Documents -------------------------------------------------------------
 * The package list and the preview. The document itself is styled by css/document.css inside the
 * sandboxed frame; nothing here reaches into it. */
/* The page is one stack: its cards keep no margins of their own, so every gap is the same. */
.doc-page { gap: var(--sp-4); }
.doc-page > * { margin-top: 0; margin-bottom: 0; }
.doc-triggers { margin-top: var(--sp-2); }
.doc-card__languages { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.doc-card__languages[hidden] { display: none; }
.doc-card__label { font-size: var(--fs-200); }
.doc-card__switch { display: flex; flex-wrap: wrap; gap: var(--sp-1); }
.doc-card__switch[hidden] { display: none; }
.doc-card__language { padding: var(--sp-1) var(--sp-3); font-size: var(--fs-200); color: var(--c-navy); }
.doc-card__language:focus-visible { outline: 3px solid var(--c-blue); outline-offset: 2px; }
.badge--generic { background: var(--info-bg); color: var(--info-ink); }
.badge--country { background: var(--success-bg); color: var(--success-ink); }
.badge--doc-locked { background: var(--color-danger-bg); color: var(--color-danger); }
.badge--doc-ready { background: var(--success-bg); color: var(--success-ink); }
.badge--release-draft,
.badge--release-in_review { background: var(--color-warning-bg); color: var(--color-warning); }
.badge--release-approved { background: var(--success-bg); color: var(--success-ink); }
.badge--release-retired,
.badge--release-discarded { background: var(--color-surface-alt); color: var(--color-text-muted); }
.badge--doc-in_preparation { background: var(--color-warning-bg); color: var(--color-warning); }
/* The package on the Legal pathway tab: one line per document, its badges wrapping under a long title. */
.doc-list { margin: 0 0 var(--sp-3); padding: 0; list-style: none; }
.doc-list__item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-1) var(--sp-3);
    padding: var(--sp-2) 0;
    border-bottom: 1px solid var(--color-border);
}
.doc-list__item[hidden] { display: none; }
.doc-list__title { font-weight: 600; overflow-wrap: anywhere; }
.doc-list__badges { display: flex; flex-wrap: wrap; gap: var(--sp-1); }
.doc-list__badges[hidden] { display: none; }
.doc-preview__head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--sp-2) var(--sp-4);
    margin-bottom: var(--sp-3);
}
.doc-preview__head[hidden] { display: none; }
.doc-preview__title { margin: 0; font-size: var(--fs-400); overflow-wrap: anywhere; }
.doc-preview__hint { margin: 0; font-size: var(--fs-200); }
.doc-preview__frame {
    display: block;
    width: 100%;
    height: 75vh;
    min-height: 24rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--c-white);
}
.doc-preview__frame[hidden] { display: none; }