/* ==========================================================================
   Listen: survey styles
   Loaded after site.css (and, for someone signed in, the CMS's cms-admin.css), on
   Listen's pages and pages with its blocks. Everything here is built from the colour
   variables and classes in site.css, and its own parts' colours, named below; nothing here
   redefines the site's. The lists, tables, forms
   and menus the CMS's pages share are the CMS's, in site.css (the Mosaic plan, phase 7).
   Shared classes with modifiers, not per-page rules.
   No inline styles anywhere: the content security policy blocks them.

   Small white text never sits on --gold, where it is too faint to read easily
   (3.4:1). It sits on --gold-text, the deeper gold site.css keeps for small
   text (4.7:1). Bars, edges and stars, which are not text, stay --gold.
   ========================================================================== */

/* Have your say's own parts' colours (the themes plan, phase 3), each starting from one of the
   CMS's (base.css), so a theme colours them with its own accent and highlight without naming
   them. Set at no specificity (:where), so a theme's theme.css may give any of them a colour of
   its own, though it loads before this. */
:where(:root) {
    /* How far through a survey someone is: the bar's filled part. */
    --listen-progress: var(--accent);

    /* The parts of a stacked bar and its key, first to last: how many chose each answer. */
    --listen-chart-1: var(--grey-300);
    --listen-chart-2: var(--tint);
    --listen-chart-3: var(--highlight);
    --listen-chart-4: var(--accent);
    --listen-chart-5: var(--dark);

    /* A project's stages: those done, and the one it is at. */
    --listen-stage-done: var(--accent);
    --listen-stage-now: var(--accent-text);
}

/* --------------------------------------------------------------------------
   Progress
   -------------------------------------------------------------------------- */

/* A white track inside a thin dark edge, so that both how long the bar is and how much
   of it is filled can be made out by someone whose sight is poor: the edge against the
   page, and the gold against the white, are each better than 3:1. */
.progress {
    display: block;
    width: 100%;
    height: 10px;
    border: 1px solid var(--dark-soft);
    border-radius: var(--radius);
    background: var(--white);
    overflow: hidden;
    -webkit-appearance: none;
    appearance: none;
}

.progress::-webkit-progress-bar {
    background: var(--white);
}

.progress::-webkit-progress-value {
    background: var(--listen-progress);
}

.progress::-moz-progress-bar {
    background: var(--listen-progress);
}

/* The bar, with the "Go back to" list beside it */
.survey-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3) var(--space-6);
    margin-bottom: var(--space-8);
}

.survey-bar__progress {
    flex: 1 1 14rem;
}

.survey-bar__jump {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
    max-width: 100%;
    font-size: var(--text-sm);
    white-space: nowrap;
}

.survey-bar__jump .field__input {
    flex: 0 1 auto;
    width: auto;
    min-width: 0;
    max-width: 17rem;
    padding: var(--space-1-5) var(--space-2-5);
    font-size: var(--text-sm);
}

/* With the script running, choosing from the list is enough, and the Go button is not
   needed: until the list is changed from the keyboard, when it is the thing to press. */
.js .survey-bar__go {
    display: none;
}

.js .is-keyed .survey-bar__go {
    display: inline-flex;
}

/* --------------------------------------------------------------------------
   Question
   -------------------------------------------------------------------------- */

.question__title {
    font-size: clamp(1.6rem, 3.4vw, 2.3rem);
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: var(--space-2-5);
}

.question__description {
    font-size: var(--text-lg);
    color: var(--dark-soft);
    margin-bottom: 0;
}

.question__answer {
    margin-top: var(--space-7);
}

.question__actions {
    align-items: center;
    margin-top: var(--space-8);
}

.question__hint {
    margin: 0 0 0 var(--space-2);
}

/* Phones have no Enter key to press. */
@media (max-width: 640px) {
    .question__hint {
        display: none;
    }
}

/* In a question's title the word is smaller and stays on one line. */
.question__title .question__optional {
    font-size: var(--text-lg);
    white-space: nowrap;
}

/* The text of a statement */
/* A photograph on a page of its own */
.question__picture,
.paper__picture {
    display: block;
    width: 100%;
    height: auto;
    margin: 0 0 var(--space-5);
    border-radius: var(--radius);
}

.question__text {
    font-size: var(--text-lg);
}

/* --------------------------------------------------------------------------
   Choices: radio buttons and checkboxes drawn as large buttons
   -------------------------------------------------------------------------- */

.choice-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--space-2-5);
}

/* Modifier: side by side, for Yes / No */
.choice-list--inline {
    grid-template-columns: repeat(2, minmax(0, 12rem));
}

/* Modifier: two columns from tablet width up, for long lists of short options */
@media (min-width: 640px) {
    .choice-list--grid {
        grid-template-columns: 1fr 1fr;
    }
}

/* Modifier: an opinion scale. One row of equal boxes from tablet width up. */
@media (min-width: 640px) {
    .choice-list--scale {
        grid-auto-flow: column;
        grid-auto-columns: 1fr;
        gap: var(--space-1-5);
    }

    .choice-list--scale .choice__label {
        flex-direction: column;
        justify-content: center;
        gap: var(--space-1-5);
        height: 100%;
        padding: var(--space-3) var(--space-1-5);
        text-align: center;
        font-size: var(--text-sm);
    }

    /* The tick stays, under the words, so a chosen point is marked by more than a tint: on a scale
       of ten or more, the points past the ninth have no key to turn dark (review 9 Oct, X7). */
    .choice-list--scale .choice__tick {
        margin-left: 0;
    }
}

.choice__input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}

.choice__label {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    min-height: 3.4rem;
    padding: var(--space-2-5) var(--space-4);
    background: var(--white);
    color: var(--dark);
    border: 2px solid var(--dark-soft);
    border-radius: var(--radius);
    font-weight: 600;
    line-height: 1.3;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.choice__label:hover {
    background: var(--grey-100);
}

/* Modifier: a picture choice's answers, each with its picture above its words (plan 19, step 7.72, sheet 17g). */
.choice-list--pictures .choice__label {
    flex-wrap: wrap;
}

.choice__picture {
    flex: 1 0 100%;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: var(--radius);
}

/* A signature's pad, for a finger, a pen or the mouse (plan 19, step 7.72, sheet 17g). */
.signature__pad {
    display: block;
    width: 100%;
    max-width: 40rem;
    aspect-ratio: 3 / 1;
    border: 2px dashed var(--dark-soft);
    border-radius: var(--radius);
    background: var(--white);
    touch-action: none;
}

/* The letter or number to press: A, B, C */
.choice__key {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.9rem;
    height: 1.9rem;
    background: var(--white);
    color: var(--dark-soft);
    border: 2px solid var(--dark-soft);
    border-radius: var(--radius);
    font-size: var(--text-xs);
    font-weight: 700;
    line-height: 1;
}

/* The tick box of a consent question: an empty square until it is ticked */
.choice__box {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.9rem;
    height: 1.9rem;
    background: var(--white);
    color: var(--white);
    border: 2px solid var(--dark-soft);
    border-radius: var(--radius);
}

.choice__box .icon {
    width: 1.3rem;
    height: 1.3rem;
    visibility: hidden;
}

.choice__input:checked + .choice__label .choice__box {
    /* Dark, not gold: gold on the chosen answer's pale background is under the 3:1 a control
       needs to be seen (plan 19, step 7.49, the review's X13). */
    background: var(--dark-deep);
    border-color: var(--dark-deep);
}

.choice__input:checked + .choice__label .choice__box .icon {
    visibility: visible;
}

.choice__tick {
    margin-left: auto;
    width: 1.4rem;
    height: 1.4rem;
    visibility: hidden;
}

.choice__input:checked + .choice__label {
    background: var(--tint);
    color: var(--dark-deep);
    border-color: var(--dark-deep);
}

.choice__input:checked + .choice__label .choice__key {
    background: var(--dark-deep);
    color: var(--white);
    border-color: var(--dark-deep);
}

.choice__input:checked + .choice__label .choice__tick {
    visibility: visible;
}

.choice__input:focus-visible + .choice__label {
    outline: 3px solid var(--focus);
    outline-offset: 2px;
    box-shadow: 0 0 0 6px var(--dark-deep);
}

/* The text box under "Other" */
.choice__other {
    margin-top: var(--space-2);
}

/* --------------------------------------------------------------------------
   Rating: radio buttons drawn as stars
   -------------------------------------------------------------------------- */

/* As wide as its stars, so the words under them sit at each end. */
.rating-block {
    display: inline-block;
    max-width: 100%;
}

.rating {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
}

.rating__item {
    display: block;
    cursor: pointer;
    border-radius: var(--radius);
}

.rating__input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}

.rating__item .icon {
    display: block;
    width: 3.2rem;
    height: 3.2rem;
    fill: var(--white);
    stroke: var(--dark-soft);
    stroke-width: 1.25;
}

/* A star is lit when it, or any star after it, is the one chosen. */
.rating__item:has(.rating__input:checked) .icon,
.rating__item:has(~ .rating__item .rating__input:checked) .icon {
    fill: var(--accent);
    stroke: var(--accent-deep);
}

.rating__item:has(.rating__input:focus-visible) {
    outline: 3px solid var(--focus);
    outline-offset: 2px;
    box-shadow: 0 0 0 6px var(--dark-deep);
}

/* A slider beside its number box, the box being the answer (plan 19, step 7.72, sheet 17g). */
.slider {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    max-width: 40rem;
}

.slider__range {
    flex: 1;
    min-width: 0;
    accent-color: var(--dark);
}

/* Override: nothing chosen yet, so the slider's place is only where it starts. */
.slider--unset .slider__range {
    opacity: 0.55;
}

.slider .field__input {
    flex: 0 0 6rem;
}

.slider__ends {
    max-width: 40rem;
}

/* Override: with the script, the ends sit under the slider's ends, not under the box. */
.js .slider__ends {
    padding-inline-end: 7rem;
}

.rating__ends {
    display: flex;
    justify-content: space-between;
    gap: var(--space-4);
    margin: var(--space-1-5) 0 0;
    font-size: var(--text-sm);
    color: var(--dark-soft);
}

/* --------------------------------------------------------------------------
   Matrix: several statements answered on one scale
   -------------------------------------------------------------------------- */

.matrix {
    width: 100%;
    border-collapse: collapse;
}

.matrix th,
.matrix td {
    padding: var(--space-3) var(--space-2);
    border-bottom: 1px solid var(--grey-300);
    text-align: center;
    vertical-align: middle;
}

.matrix thead th {
    font-size: var(--text-xs);
    font-weight: 700;
    line-height: 1.25;
    border-bottom: 2px solid var(--dark);
    vertical-align: bottom;
}

.matrix tbody th {
    width: 38%;
    padding-left: 0;
    text-align: left;
    font-weight: 600;
}

.matrix__cell {
    display: block;
    cursor: pointer;
}

.matrix__input {
    width: 1.5rem;
    height: 1.5rem;
    margin: 0;
    accent-color: var(--accent);
    cursor: pointer;
}

/* On a wide screen the column headings name the answers; on a phone (below) each button has its own. */
.matrix__label {
    display: none;
}

/* On a phone each statement becomes a short list of its own. */
@media (max-width: 640px) {
    .matrix,
    .matrix tbody,
    .matrix tr,
    .matrix th,
    .matrix td {
        display: block;
    }

    .matrix thead {
        display: none;
    }

    .matrix tr {
        padding: var(--space-4) 0;
        border-bottom: 1px solid var(--grey-300);
    }

    .matrix tbody th,
    .matrix td {
        width: auto;
        padding: 0;
        border: 0;
        text-align: left;
    }

    .matrix tbody th {
        margin-bottom: var(--space-2);
    }

    .matrix__cell {
        display: flex;
        align-items: center;
        gap: var(--space-3);
        padding: var(--space-1-5) 0;
    }

    .matrix__label {
        display: inline;
    }
}

/* --------------------------------------------------------------------------
   Ranking: put a list in order with the arrow buttons
   -------------------------------------------------------------------------- */

.rank-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--space-2);
}

.rank-item {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    min-height: 3.4rem;
    padding: var(--space-2) var(--space-2-5) var(--space-2) var(--space-4);
    background: var(--white);
    border: 2px solid var(--dark-soft);
    border-radius: var(--radius);
    font-weight: 600;
    line-height: 1.3;
}

.rank-item__position {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.9rem;
    height: 1.9rem;
    background: var(--accent-text);
    color: var(--white);
    border-radius: var(--radius);
    font-size: var(--text-sm);
    font-weight: 700;
    line-height: 1;
}

.rank-item__moves {
    display: flex;
    gap: var(--space-1);
    margin-left: auto;
}

.rank-item__move {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.4rem;
    height: 2.4rem;
    padding: 0;
    background: var(--tint);
    color: var(--dark-deep);
    border: 0;
    border-radius: var(--radius);
    cursor: pointer;
}

.rank-item__move:hover {
    background: var(--grey-300);
}

.rank-item__move:disabled {
    background: var(--grey-100);
    color: var(--grey-300);
    cursor: default;
}

/* --------------------------------------------------------------------------
   Field groups (contact details, address) and field sizes
   -------------------------------------------------------------------------- */

.field-grid {
    display: grid;
    gap: var(--space-4);
}

@media (min-width: 640px) {
    .field-grid--2 {
        grid-template-columns: 1fr 1fr;
    }
}

/* An input with its unit beside it: "12 years" */
.field__with-unit {
    display: flex;
    align-items: center;
    gap: var(--space-2-5);
}

/* Day, month and year side by side. With a time as well they are wider than a phone, and the time goes under. */
.date-fields {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
}

.date-fields .field {
    flex: none;
}

.date-fields .field__label {
    font-weight: 400;
    font-size: var(--text-sm);
}

.date-fields .field__input {
    width: 4.2rem;
}

.date-fields .field__input--year {
    width: 6rem;
}

/* Modifier: lists to choose from, which need room for their words and their arrow */
.date-fields--lists .field__input {
    width: 5.2rem;
}

.date-fields--lists .field__input--month {
    width: 9.5rem;
}

.date-fields--lists .field__input--year {
    width: 6.8rem;
}

/* --------------------------------------------------------------------------
   Share row on an ending. The website hides its row of share buttons on a wide
   screen, where its floating Share button takes over; an ending has no floating
   button, so its row stays.
   -------------------------------------------------------------------------- */

@media (min-width: 1081px) {
    .share--shown {
        display: block;
    }
}

/* --------------------------------------------------------------------------
   Start screen: the facts under the introduction
   -------------------------------------------------------------------------- */

.fact-list {
    list-style: none;
    margin: var(--space-6) 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2-5) var(--space-7);
}

.fact-list li {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.fact-list .icon {
    color: var(--accent-text);
}

/* The start screen in the dark box over a photo (.idea-box, from site.css) */
.idea-box .fact-list .icon {
    color: var(--highlight);
}

.idea-box .idea-page__kicker {
    color: var(--highlight);
}

/* --------------------------------------------------------------------------
   Moving between questions. Each question is a page of its own; where the browser
   can, it slides one out and the next in as the page changes, so nothing has to be
   fetched or swapped by script. Only the question moves: the header and footer stay
   put. listen.js says when the move is backwards. A browser that cannot do this
   simply changes page, and so does one set to reduce motion.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
    @view-transition {
        navigation: auto;
    }
}

@keyframes listen-out-left {
    to {
        transform: translateX(-2.5rem);
        opacity: 0;
    }
}

@keyframes listen-in-right {
    from {
        transform: translateX(2.5rem);
        opacity: 0;
    }
}

@keyframes listen-out-right {
    to {
        transform: translateX(2.5rem);
        opacity: 0;
    }
}

@keyframes listen-in-left {
    from {
        transform: translateX(-2.5rem);
        opacity: 0;
    }
}

/* One question is rarely the same height as the next. Left to itself the browser would
   stretch a picture of each to fit the other while they change over; instead the space
   takes its new size at once and each picture stays the size it was taken. */
::view-transition-group(question) {
    animation: none;
}

::view-transition-old(question),
::view-transition-new(question) {
    height: auto;
    object-fit: none;
    object-position: top left;
}

::view-transition-old(question) {
    animation: 0.16s ease-in both listen-out-left;
}

::view-transition-new(question) {
    animation: 0.22s 0.08s ease-out both listen-in-right;
}

html:active-view-transition-type(back)::view-transition-old(question) {
    animation-name: listen-out-right;
}

html:active-view-transition-type(back)::view-transition-new(question) {
    animation-name: listen-in-left;
}

/* --------------------------------------------------------------------------
   The note at the top of a survey's pages while an editor is trying it out
   -------------------------------------------------------------------------- */

.mode-note {
    padding-top: var(--space-5);
}

.mode-note__box,
.mode-note__form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-3);
}

/* The words have a line to themselves, with the buttons under them. */
.mode-note__box p {
    flex: 1 1 100%;
    margin: 0;
}

/* On paper: the form alone, from edge to edge, in black. */
@media print {
    @page {
        margin: 15mm;
    }

    /* Small marks keep their colours on paper, or their white words would go with their
       backgrounds; and the legend's keys are their colours (plan 19, step 7.5). */
    .survey-row__badge,
.chart-panel__number,
.rank-item__position,
.choice__box,
.choice__key,
.legend__key {
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
    }
}

/* Override: the survey the website features, on a pale gold ground: in the staff's list, on /listen and in the survey carousel. */
.survey-row.survey-row--featured {
    background: color-mix(in srgb, var(--highlight) 18%, var(--white));
}

/* Modifiers: the edge takes the colour of the survey's state */
.survey-row--open {
    border-left-color: var(--accent);
}

.survey-row--scheduled {
    border-left-color: var(--tint);
}

.survey-row--closed {
    border-left-color: var(--dark);
}

/* A few lines about the survey, on the list anyone can see */
.survey-row__text {
    margin: var(--space-2) 0 0;
}

.survey-row__text > :first-child {
    margin-top: 0;
}

.survey-row__text > :last-child {
    margin-bottom: 0;
}

/* Override: the surveys on /listen as cards, three to a row on a wide screen: the picture
   across the top, the survey's state as the colour of the top edge in place of the left,
   a few lines about it, and "Take part" at the foot. */
.survey-list.survey-list--cards {
    grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
    gap: var(--space-5);
}

.survey-list--cards .survey-row,
.survey-list--cards .survey-row.survey-row--pictured {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0;
    overflow: hidden;
    border-left: 1px solid var(--grey-300);
    border-top: 5px solid var(--grey-300);
}

/* As weighty as the rule above, which a card with a picture also meets, so its top edge keeps its state's colour too. */
.survey-list--cards .survey-row.survey-row--open {
    border-top-color: var(--accent);
}

.survey-list--cards .survey-row.survey-row--scheduled {
    border-top-color: var(--tint);
}

.survey-list--cards .survey-row__image,
.survey-list--cards .survey-row--pictured .survey-row__image {
    aspect-ratio: 16 / 9;
    border-radius: 0;
}

/* Override: no picture of its own, so a plain band with a speech bubble in its place. */
.survey-row__image.survey-row__image--none {
    display: grid;
    place-items: center;
    background: var(--grey-100);
    color: var(--accent);
    font-size: 3rem;
}

/* A survey with no picture of its own, in the cards: the grey tile, with the town's skyline
   from the footer in faint grey along its foot and the speech bubble above it (David's
   choice, sheet 21d, (c) with the town; plan 20, step 3.13, the 6 October review's U3). Every
   card keeps the same shape, and no photo is passed off as the survey's own. The skyline is
   the website's own picture, from its root, wherever this file is served from. */
.survey-list--cards .survey-row__image.survey-row__image--none {
    position: relative;
    overflow: hidden;
    place-items: start center;
    padding-top: 6%;
}

.survey-list--cards .survey-row__image.survey-row__image--none::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--grey-300);
    -webkit-mask-image: var(--skyline);
    mask-image: var(--skyline);
    -webkit-mask-repeat: repeat-x;
    mask-repeat: repeat-x;
    -webkit-mask-position: left bottom;
    mask-position: left bottom;
    -webkit-mask-size: auto 62%;
    mask-size: auto 62%;
}

.survey-list--cards .survey-row__image.survey-row__image--none .icon {
    position: relative;
    z-index: 1;
}

.survey-row__body {
    min-width: 0;
}

.survey-list--cards .survey-row__body {
    flex: 1;
    padding: var(--space-4) var(--space-5) 0;
}

.survey-list--cards .survey-row__title {
    font-size: var(--text-lg);
    line-height: 1.3;
}

/* Four lines at most; the survey's own page has the rest. */
.survey-list--cards .survey-row__text {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    overflow: hidden;
    font-size: var(--text-sm);
}

.survey-list--cards .survey-row__actions,
.survey-list--cards .survey-row--pictured .survey-row__actions {
    padding: var(--space-4) var(--space-5) var(--space-5);
}

/* An open survey's whole card leads to it: its name's link reaches over all of it, and the
   card answers the pointer as a project's card does. Links in what is said about it stay
   above, so they still work. */
.survey-list--cards .survey-row {
    position: relative;
    transition: box-shadow 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}

.survey-list--cards .survey-row--open:hover,
.survey-list--cards .survey-row--open:focus-within {
    border-color: var(--accent);
    border-top-color: var(--accent);
    background: var(--grey-100);
    box-shadow: var(--shadow);
}

/* The name reads as a project card's does, underlined when the card is pointed at or reached. */
.survey-list--cards .survey-row__link {
    color: var(--dark-deep);
    text-decoration: none;
}

.survey-list--cards .survey-row--open:hover .survey-row__link,
.survey-list--cards .survey-row--open:focus-within .survey-row__link {
    text-decoration: underline;
}

/* The featured survey's card darkens its own gold under the pointer, rather than turning grey. */
.survey-list--cards .survey-row--open.survey-row--featured:hover,
.survey-list--cards .survey-row--open.survey-row--featured:focus-within {
    background: color-mix(in srgb, var(--highlight) 38%, var(--white));
}

.survey-list--cards .survey-row__text a {
    position: relative;
    z-index: 1;
}

/* Override: a survey a page's Surveys block names (plan 19, step 9.17). Whatever it has got
   to, its whole card leads to its address, so it answers the pointer as an open survey's card
   does, its top edge keeping the colour of where it has got to. */
.survey-list--cards .survey-row--linked:hover,
.survey-list--cards .survey-row--linked:focus-within {
    background: var(--grey-100);
    box-shadow: var(--shadow);
}

.survey-list--cards .survey-row--linked:hover .survey-row__link,
.survey-list--cards .survey-row--linked:focus-within .survey-row__link {
    text-decoration: underline;
}

/* With no "Take part" under its words, the card keeps its room at the foot. */
.survey-list--cards .survey-row--linked .survey-row__body {
    padding-bottom: var(--space-5);
}

/* A What we heard block's link to every survey in What we heard, on Have your say's own page,
   under its surveys (David, 11 Oct 2026). */
.heard-more {
    margin: var(--space-5) 0 0;
    font-weight: 700;
}

.heard-more .icon {
    vertical-align: middle;
}

/* An Other ways to take part block's three ways (David, 11 Oct 2026): print it, ask for one, send
   it back; side by side on a wide screen, one under another on a phone. */
.other-ways {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: var(--space-6);
    margin-top: var(--space-5);
}

.other-ways__title {
    margin: 0 0 var(--space-2);
    font-size: var(--text-lg);
}

.other-ways__way > :last-child {
    margin-bottom: 0;
}

.other-ways .contact-list {
    margin-top: var(--space-3);
}

/* A project's consultation: a badge over its name. */
.survey-row__badge {
    display: inline-block;
    margin-bottom: var(--space-2);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius);
    background: var(--dark);
    color: var(--white);
    font-size: var(--text-2xs);
    font-weight: 700;
    letter-spacing: 0.04em;
}

/* Override: the cards as the website's carousel (on Get Involved), three at a time on a wide
   screen; the track's own column sizes and gap take over from the grid's. */
@media (min-width: 900px) {
    .survey-list--cards.carousel__track {
        grid-template-columns: none;
        gap: var(--space-4);
    }
}

/* Printed, the cards of a carousel, which site.css prints whole, take the grid's columns again,
   as the cards do when they are not a carousel (plan 19, step 9.17). */
@media print {
    .survey-list--cards.carousel__track {
        grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
        gap: var(--space-5);
    }
}

/* Override: the last card of a carousel, which leads on to every current survey, as the
   website's carousels end, in a highlighted block; the whole card is its link. */
.survey-list--cards .survey-row.survey-row--more {
    position: relative;
    justify-content: center;
    border-color: var(--highlight);
    background: var(--highlight);
}

.survey-row--more .survey-row__body {
    flex: 0 1 auto;
    padding: var(--space-6) var(--space-5);
}

.survey-row__link::after {
    content: "";
    position: absolute;
    inset: 0;
}

.survey-list--cards .survey-row.survey-row--more:hover,
.survey-list--cards .survey-row.survey-row--more:focus-within {
    border-color: var(--dark-deep);
    background: var(--highlight);
}

.survey-row--more:focus-within .survey-row__link {
    text-decoration: underline;
}

.preview .question__title {
    font-size: var(--text-3xl);
}

.preview .choice__label,
.preview .rating__item,
.preview .matrix__cell {
    cursor: default;
}

.preview .choice__label:hover {
    background: var(--white);
}

/* A field that only counts with one choice of a set (listen-staff.js): hidden means hidden,
   whatever the field's own layout says. */
[data-only-when][hidden] {
    display: none;
}

/* The photo chosen for a start screen, shown small under the list it was chosen from */
.setting-photo {
    display: block;
    width: 16rem;
    max-width: 100%;
    margin-top: var(--space-1);
    border-radius: var(--radius);
}

/* --------------------------------------------------------------------------
   Reviewing: figures, filters and charts
   -------------------------------------------------------------------------- */

/* A tiny chart of responses each day. Charts are drawn in the dark blue; gold is kept
   for numbers and accents. */
.spark {
    flex: none;
    fill: var(--dark);
}

/* What the charts and the table below are limited to */
.filter-bar .small {
    color: var(--dark-deep);
}

.filter-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2-5) var(--space-6);
    margin-bottom: var(--space-6);
    padding: var(--space-3) var(--space-4);
    background: var(--tint);
    color: var(--dark-deep);
    border-radius: var(--radius);
}

.chart-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-sm);
}

.chart-table th,
.chart-table td {
    padding: var(--space-1-5) var(--space-3) var(--space-1-5) 0;
    border-bottom: 1px solid var(--grey-200);
    text-align: left;
    vertical-align: middle;
}

.chart-table thead th {
    font-size: var(--text-2xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--dark-soft);
}

/* The line under the headings runs unbroken under the column of bars, which has no heading. */
.chart-table thead th,
.chart-table thead td {
    border-bottom-color: var(--grey-300);
}

.chart-table tbody th {
    width: 40%;
    font-weight: 600;
}

/* Modifier: column headings a screen reader alone needs (a matrix's), their words hidden in each:
   the row stays, taking no room and drawing no line (review 9 Oct, X35). */
.chart-table .chart-table__head--unseen th {
    padding: 0;
    border: 0;
}

.chart-table .chart-table__number {
    width: 1%;
    padding-right: 0;
    padding-left: var(--space-3);
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.chart-table__bar {
    width: 40%;
}

/* Modifier: a matrix's most common answer, "48% Neither agree nor disagree". On a phone its words
   wrap, so the table fits a screen of 320 pixels with nothing to scroll sideways (review 9 Oct, X21). */
@media (max-width: 640px) {
    .chart-table .chart-table__number--top {
        white-space: normal;
    }
}

.chart-table__bar--wide {
    width: 55%;
}

/* On a very narrow screen there is no room for the bars beside the numbers, and the
   numbers are the chart: the bars only repeat them for the eye. */
@media (max-width: 400px) {

    .chart-table .chart-table__bar:not(.chart-table__bar--wide),
    .chart-table thead td {
        display: none;
    }
}

/* A bar drawn to a share of its track. Its length is an attribute, not a style. */
.stack {
    display: block;
    width: 100%;
    height: 0.9rem;
}

.bar__track {
    fill: var(--grey-200);
}

.bar__fill {
    fill: var(--dark);
}

.stack {
    height: 1.2rem;
}

/* A thin white line between the parts, so two of close colours are still told apart (plan 19,
   step 7.49, the review's X13). Kept the same width however the bar is stretched. */
.stack__part {
    stroke: var(--white);
    stroke-width: 2px;
    vector-effect: non-scaling-stroke;
}

/* The parts of a stacked bar, and the key that names them */
.stack__part--1,
.legend__key--1 {
    fill: var(--listen-chart-1);
    background: var(--listen-chart-1);
}

.stack__part--2,
.legend__key--2 {
    fill: var(--listen-chart-2);
    background: var(--listen-chart-2);
}

.stack__part--3,
.legend__key--3 {
    fill: var(--listen-chart-3);
    background: var(--listen-chart-3);
}

.stack__part--4,
.legend__key--4 {
    fill: var(--listen-chart-4);
    background: var(--listen-chart-4);
}

.stack__part--5,
.legend__key--5 {
    fill: var(--listen-chart-5);
    background: var(--listen-chart-5);
}

.legend__key {
    width: 0.9rem;
    height: 0.9rem;
    border-radius: 2px;
}

/* Responses each day */
.series {
    display: block;
    width: 100%;
    height: auto;
    fill: var(--dark);
}

.series__base {
    stroke: var(--grey-300);
    stroke-width: 1;
}

.series__ticks {
    fill: var(--dark-soft);
    font-size: 12px;
}

/* The count over each bar */
.series__count {
    fill: var(--dark);
    font-size: 12px;
    font-weight: 600;
}

/* "The numbers": what a chart shows, as plain figures, opened under it by anyone who
   wants them. The bars of a matrix tell its answers apart by colour alone, and a chart
   of days shows a day's count only to a mouse, so neither is the only place they are. */
.chart-numbers {
    margin-top: var(--space-2-5);
}

.chart-numbers > summary {
    width: fit-content;
    margin-left: -0.5rem;
    list-style: none;
}

.chart-numbers > summary::-webkit-details-marker {
    display: none;
}

.chart-numbers__list {
    display: grid;
    gap: var(--space-3);
    margin: var(--space-2) 0 0;
    font-size: var(--text-sm);
}

.chart-numbers__list dt {
    font-weight: 600;
}

.chart-numbers__list dd {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1-5);
    margin: var(--space-0-5) var(--space-5) 0 0;
}

/* A wide table scrolls sideways inside its own box (.table-scroll, in the website's
   site.css, which says why it is placed relative): its one rule, kept there and not here
   as well (plan 19, step 7.6). */

/* Override: a box of fixed height that scrolls down as well, with the table's headings
   kept in view, such as the decisions on /listen/ideas. */
.table-scroll--tall {
    max-height: 30rem;
    overflow-y: auto;
    border: 1px solid var(--grey-300);
    border-radius: var(--radius);

    /* A link reached with the keyboard, Shift+Tab going up included, is scrolled clear of the
       heading row that stays at the top, as the builder's list is (plan 20, step 3.16, the
       6 October review's A7; WCAG 2.4.11). */
    scroll-padding-top: 3rem;
}

.table-scroll--tall .table {
    margin: 0;
}

/* The box has a border, so the outer columns keep away from it. */
.table-scroll--tall th:first-child,
.table-scroll--tall td:first-child {
    padding-left: var(--space-3);
}

.table-scroll--tall th:last-child,
.table-scroll--tall td:last-child {
    padding-right: var(--space-3);
}

.table-scroll--tall thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--white);
    box-shadow: inset 0 -1px 0 var(--grey-300);
}

.data-table__sort {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    color: inherit;
    text-decoration: none;
}

.data-table__sort:hover {
    text-decoration: underline;
}

.data-table__sort .icon {
    width: 1em;
    height: 1em;
    color: var(--accent-text);
}

.data-table__none {
    color: var(--dark-soft);
    font-style: italic;
}

.data-table__text .problem-note,
.data-table__text .chip {
    display: block;
    width: fit-content;
    margin-top: var(--space-1);
    font-size: var(--text-xs);
}

/* Two lines at most, in a table of many rows: the row's own page has the rest (plan 19, step 3.15). */
.data-table__note--clip {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
}

/* Override (.idea-points, from site.css): three to a row on a wide screen, for six points,
   such as the steps a project takes on /projects. */
@media (min-width: 1081px) {
    .idea-points--three {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* How many suggested an idea, under what it is, on a project's page. */
.idea-point .idea-point__people {
    margin-top: var(--space-2-5);
    font-size: var(--text-xs);
    font-weight: 700;
}

/* Override (.idea-point, site.css): a card that leads to its idea's page, as a project's
   ideas do; its name's link reaches over all of it. Every one is white with the gold top
   edge, none of the dark ones that alternate with them elsewhere (plan 19, step 8.5).
   Pointed at, it turns the same light grey as project and survey cards. */
.idea-point.idea-point--link {
    position: relative;
    background: var(--white);
    color: var(--dark);
    transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.idea-point.idea-point--link:hover,
.idea-point.idea-point--link:focus-within {
    background: var(--grey-100);
    color: var(--dark-deep);
    box-shadow: var(--shadow);
}

.idea-point__link {
    color: inherit;
    text-decoration: none;
}

.idea-point__link::after {
    content: "";
    position: absolute;
    inset: 0;
}

.idea-point--link:hover .idea-point__link,
.idea-point__link:focus-visible {
    text-decoration: underline;
}

.priorities--named {
    display: flex;
    flex-direction: column;
    gap: var(--space-1-5);
}

.priorities--named li {
    display: flex;
    align-items: center;
    gap: var(--space-2-5);
}

.note-list {
    margin: 0 0 var(--space-4);
    padding: 0;
    list-style: none;
}

.note-list li {
    padding: var(--space-2-5) 0;
    border-bottom: 1px solid var(--grey-200);
}

.note-list li:first-child {
    padding-top: 0;
}

.note-list__who {
    display: block;
    color: var(--dark-soft);
    font-size: var(--text-2xs);
}

.decision__label {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0;
    font-size: var(--text-xl);
    font-weight: 700;
    color: var(--dark-deep);
}

.decision__icon {
    width: 1.6rem;
    height: 1.6rem;
    flex: none;
    color: var(--accent-text);
}

.decision__date {
    margin: var(--space-1) 0 var(--space-3);
    color: var(--dark-soft);
    font-size: var(--text-xs);
}

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

.decision__link {
    margin: var(--space-3) 0 0;
    font-weight: 700;
}

.decision__projects {
    list-style: none;
    margin: var(--space-3) 0 0;
    padding: 0;
}

.decision__projects li {
    padding: var(--space-2) 0;
    border-top: 1px solid var(--grey-300);
}

.decision__projects a {
    font-weight: 700;
}

.decision__stage {
    display: block;
    color: var(--dark-soft);
    font-size: var(--text-xs);
}

/* One idea in public: what it is above its name, and the way back below. */
.idea-page__kicker {
    margin: 0 0 var(--space-1-5);
    color: var(--accent-text);
    font-weight: 700;
    font-size: var(--text-xs);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.idea-page__back {
    margin: var(--space-8) 0 0;
}

.idea-page__priorities {
    margin-bottom: var(--space-8);
}

.idea-page__ask {
    margin-top: var(--space-8);
}

/* A decision's idea in the public table: its name leads to its page. */
.data-table__title {
    text-decoration: none;
}

.data-table__title:hover strong,
.data-table__title:focus-visible strong {
    text-decoration: underline;
}

/* --------------------------------------------------------------------------
   Projects, as the public see them (sheet I6)
   -------------------------------------------------------------------------- */

/* The stage a project has reached, as steps along a line; down the page on a phone. */
.stages {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    margin: 0 0 var(--space-4);
    padding: 0;
    list-style: none;
}

.stages li {
    position: relative;
    padding: var(--space-8) var(--space-1-5) 0;
    color: var(--dark-soft);
    font-size: var(--text-xs);
    line-height: 1.3;
    text-align: center;
}

.stages li::before {
    content: "";
    position: absolute;
    top: 0.7rem;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--grey-300);
}

.stages li:first-child::before {
    left: 50%;
}

.stages li:last-child::before {
    right: 50%;
}

.stages li::after {
    content: "";
    position: absolute;
    top: 0.2rem;
    left: calc(50% - 0.6rem);
    width: 1.2rem;
    height: 1.2rem;
    border: 3px solid var(--grey-300);
    border-radius: 50%;
    background: var(--white);
}

.stages li.is-done::before,
.stages li.is-done::after {
    border-color: var(--listen-stage-done);
    background-color: var(--listen-stage-done);
}

.stages li.is-done + li::before {
    background: linear-gradient(to right, var(--listen-stage-done) 50%, var(--grey-300) 50%);
}

.stages li[aria-current]::after {
    border-color: var(--listen-stage-now);
    background: var(--listen-stage-now);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--listen-stage-now) 25%, transparent);
}

.stages li[aria-current] {
    color: var(--dark-deep);
    font-weight: 700;
}

@media (max-width: 40em) {
    .stages {
        grid-template-columns: 1fr;
    }

    .stages li {
        padding: 0 0 var(--space-4) var(--space-9);
        text-align: left;
    }

    .stages li::before {
        top: 0;
        bottom: 0;
        left: 0.55rem;
        right: auto;
        width: 3px;
        height: auto;
    }

    .stages li:first-child::before {
        top: 0.6rem;
        left: 0.55rem;
    }

    .stages li:last-child::before {
        right: auto;
        bottom: auto;
        height: 0.6rem;
    }

    .stages li::after {
        top: 0;
        left: 0;
    }
}

.stage-line {
    margin: 0 0 var(--space-1-5);
    font-size: var(--text-body);
}

.stage-now {
    margin: 0;
    color: var(--dark-soft);
}

.where-now {
    padding: var(--space-5) var(--space-6);
    border-radius: var(--radius);
    background: var(--grey-100);
}

/* Override: every step of the way, as a guide (/projects): each step's picture in
   its circle, on a gold line, as none is done or still to come. */
.stages.stages--guide {
    margin-bottom: var(--space-8);
}

.stages--guide li {
    padding-top: 3.6rem;
    color: var(--dark-deep);
    font-size: var(--text-sm);
    font-weight: 600;
}

.stages--guide li::before {
    top: 1.4rem;
    background: var(--accent);
}

.stages--guide li::after {
    display: none;
}

.stages__node {
    position: absolute;
    top: 0;
    left: calc(50% - 1.5rem);
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    border: 3px solid var(--accent);
    border-radius: 50%;
    background: var(--white);
    color: var(--dark-deep);
    font-size: var(--text-lg);
}

@media (max-width: 40em) {
    .stages--guide li {
        display: flex;
        align-items: center;
        min-height: 3rem;
        padding: 0 0 var(--space-4) var(--space-16);
    }

    .stages--guide li:last-child {
        padding-bottom: 0;
    }

    .stages--guide li::before {
        top: 0;
        left: 1.4rem;
    }

    .stages--guide li:first-child::before {
        top: 1.5rem;
        left: 1.4rem;
    }

    .stages--guide li:last-child::before {
        height: 1.5rem;
    }

    .stages__node {
        left: 0;
    }
}

/* A project as a card, in the projects carousel (_ProjectCarousel). */
.project-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
    gap: var(--space-5);
    list-style: none;
}

/* No spacing of its own, at no weight: a carousel's (site.css) reaches past the page's edges,
   so the next card shows there, fading out. */
:where(.project-cards) {
    margin: 0;
    padding: 0;
}

.project-card {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--grey-300);
    border-radius: var(--radius);
    background: var(--white);
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

/* The whole card leads to the project: its name's link reaches over all of it. */
.project-card__link::after {
    content: "";
    position: absolute;
    inset: 0;
}

.project-card:hover,
.project-card:focus-within {
    border-color: var(--accent);
    background: var(--grey-100);
    box-shadow: var(--shadow);
}

.project-card:focus-within .project-card__link {
    text-decoration: underline;
}

/* The priorities it serves, in a strip above its picture. */
.project-card__priorities {
    padding: var(--space-2) var(--space-3);
    border-bottom: 1px solid var(--grey-200);
}

.project-card__image {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.project-card__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-4) var(--space-4) var(--space-4);
}

.project-card__title {
    margin: 0;
    font-size: var(--text-lg);
    line-height: 1.3;
}

.project-card__title a {
    color: var(--dark-deep);
    text-decoration: none;
}

.project-card__title a:hover {
    text-decoration: underline;
}

.project-card__text {
    margin: 0;
    color: var(--dark);
    font-size: var(--text-sm);
}

.project-card__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    margin-top: auto;
    padding-top: var(--space-1-5);
}

.project-card__say {
    margin: 0;
    padding: var(--space-2) var(--space-2-5);
    border-radius: var(--radius);
    background: var(--highlight);
    color: var(--dark-deep);
    font-size: var(--text-xs);
    font-weight: 600;
}

/* Override: the cards as the website's carousel (_ProjectCarousel), three at a time on a
   wide screen, with its buttons; the track's own column sizes and gap take over from the
   grid's, so the third card ends where the page does and only a card still to come fades. */
@media (min-width: 900px) {
    .project-cards.carousel__track {
        grid-template-columns: none;
        gap: var(--space-4);
    }

    /* Compact (on /listen): four at a time. */
    .project-cards--compact.carousel__track {
        grid-auto-columns: calc((100% - 3rem) / 4);
    }
}

/* Override: one at a time, as the What if? examples on a priority page. */
@media (min-width: 900px) {
    .carousel__track.carousel__track--single {
        grid-auto-columns: 100%;
    }
}

/* The What if? carousel's buttons, on the right above it. */
.whatif-bar {
    display: flex;
    justify-content: flex-end;
    margin-bottom: var(--space-4);
}

/* The What if? examples, stacked on a narrow screen. */
.whatif-list {
    display: grid;
    gap: var(--space-4);
    list-style: none;
}

/* No spacing of its own, at no weight: the carousel's (site.css) reaches past the page's edges. */
:where(.whatif-list) {
    margin: 0;
    padding: 0;
}

/* A "What if?"'s buttons, under its ask (David, 11 Oct 2026), a little closer than a page's. */
.whatif__buttons {
    margin-top: var(--space-5);
}

/* A Project or a Survey block (David, 11 Oct 2026): one "What if?"; its badges over its name, when its
   consultation closes, and with no picture, its words across the card. */
.whatif__items {
    margin: 0 0 var(--space-3);
}

.whatif__closes {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-weight: 700;
}

@media (min-width: 860px) {
    .whatif--no-picture {
        grid-template-columns: 1fr;
    }
}

/* A Project block's picture on the left (David, 12 Oct 2026), on a wide screen only: on a phone it is
   under the words either way. */
@media (min-width: 860px) {
    .whatif--left {
        grid-template-columns: 0.9fr 1.1fr;
    }

    .whatif--left .whatif__picture {
        order: -1;
    }
}

/* A Project block with no background, on the page itself, laid out as a Picture and text block is
   (site.css's split and split__image); its picture's link a block, its ask on the pale grey. */
.feature-plain__picture {
    display: block;
}

.feature-plain .whatif__ask {
    background: var(--grey-100);
}

@media (min-width: 860px) {
    .feature-plain--no-picture {
        grid-template-columns: 1fr;
    }
}

.feature-block__all {
    justify-content: flex-end;
}

/* A What if?'s picture as a link to its project, filling its half of the card as the picture
   alone did (site.css's whatif__image). */
.whatif__picture {
    display: block;
}

/* Compact: smaller cards, two or more to a row on a narrow screen, without the summaries. */
.project-cards--compact {
    grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
}

.project-cards--compact .project-card__title {
    font-size: var(--text-body);
}

/* Override: the last card of a carousel, which leads on to every project, as the
   website's carousels end, in a highlighted block. */
.project-card.project-card--more {
    justify-content: center;
    border-color: var(--highlight);
    background: var(--highlight);
}

.project-card--more .project-card__body {
    justify-content: center;
    padding: var(--space-6) var(--space-5);
}

.project-card--more .project-card__text {
    color: var(--dark-deep);
}

.project-card.project-card--more:hover,
.project-card.project-card--more:focus-within {
    border-color: var(--dark-deep);
    background: var(--highlight);
}

/* A carousel's filters on one line on a computer, with Apply beside them (plan 19, step 9.6). */
.filter-bar--carousel {
    column-gap: var(--space-4);
}

/* As the bar grows narrow listen.js sets these, one at a time, rather than let it wrap: the
   switch's icon alone, then the filters folded behind Filter (David, 8 Oct 2026). */
.filter-bar__fold > summary {
    display: none;
}

.filter-bar__fields {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2-5) var(--space-4);
}

/* Folded, the filters open across the whole bar, under Filter and the switch. */
.filter-bar.is-folded {
    position: relative;
}

.is-folded .filter-bar__fold {
    flex: 1 1 100%;
}

.is-folded .filter-bar__end {
    position: absolute;
    top: var(--space-3);
    right: var(--space-4);
}

.is-folded .filter-bar__fold > summary {
    display: inline-flex;
    list-style: none;
}

.is-folded .filter-bar__fold > summary::-webkit-details-marker {
    display: none;
}

.is-folded .filter-bar__fold > summary::after {
    content: "";
    width: 0.45rem;
    height: 0.45rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-0.12rem) rotate(45deg);
}

.is-folded .filter-bar__fold[open] > summary::after {
    transform: translateY(0.12rem) rotate(225deg);
}

.is-folded .filter-bar__fields {
    flex-direction: column;
    align-items: stretch;
    margin-top: var(--space-3);
}

.is-folded .toolbar__field {
    justify-content: space-between;
    white-space: normal;
}

.is-folded .toolbar__field .field__input {
    width: 65%;
    max-width: 65%;
}

.is-folded .filter-bar__fields > .btn {
    align-self: flex-start;
}

/* The carousel's switch, at the far end of its toolbar; pressed while the grid shows. */
.filter-bar__end {
    margin-left: auto;
}

.filter-bar [data-view-toggle][aria-pressed="true"] {
    border-color: var(--dark);
    background: var(--dark);
    color: var(--white);
}

/* A card carousel (the projects', the surveys'): a card past the most the carousel shows
   is for the grid only. */
.card-carousel:not(.card-carousel--grid) .card-carousel__extra {
    display: none;
}

/* Override: the carousel as a grid of every card that matches, in rows, with no buttons,
   no last card and no fades. */
.card-carousel--grid .carousel__controls,
.card-carousel--grid .card-carousel__more {
    display: none;
}

@media (min-width: 900px) {
    .card-carousel.card-carousel--grid .carousel__track {
        grid-auto-flow: row;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        grid-auto-columns: auto;
        gap: var(--space-5);
        overflow: visible;
        margin-inline: 0;
        padding-inline: 0;
        scroll-snap-type: none;
        -webkit-mask-image: none;
        mask-image: none;
    }

    .card-carousel.card-carousel--grid .project-cards--compact.carousel__track {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* The top of a project's page, in Get Involved's dark panel beside its picture (site.css's
   involved-hero): what it is, the priorities it serves and when it was last updated, in light
   type; the priorities' links white on the dark. */
.project-hero__summary {
    font-size: var(--text-lg);
}

.project-hero .priorities--named {
    margin: var(--space-4) 0;
}

.project-hero .priorities--named a {
    color: var(--white);
}

.project-hero__updated {
    margin: 0;
    color: var(--grey-300);
    font-size: var(--text-xs);
}

/* A page to read, as wide as the website's pages (plan 19, step 9.8, sheet 18c): its words
   kept to the width that is easy to read, with a side column beside them on a computer for
   what goes with them, such as the project. On a phone the column comes after the words. */
.read-wide {
    display: grid;
    gap: var(--space-8) var(--space-12);
    align-items: start;
}

@media (min-width: 900px) {
    .read-wide {
        grid-template-columns: minmax(0, 1fr) 20rem;
    }
}

.read-wide__main {
    min-width: 0;
    max-width: 760px;
}

.measure {
    max-width: 760px;
}

.read-aside {
    display: grid;
    gap: var(--space-5);
}

.aside-box {
    padding: var(--space-5) var(--space-5) var(--space-6);
    border-top: 5px solid var(--accent);
    background: var(--grey-100);
}

.aside-box__title {
    margin: 0 0 var(--space-3);
    font-size: var(--text-sm);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.aside-box img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    margin-bottom: var(--space-3);
    object-fit: cover;
}

.aside-box p {
    margin: 0 0 var(--space-2);
}

/* Updates, newest first. */
.update-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.update-list > li {
    padding: var(--space-5) 0;
    border-top: 1px solid var(--grey-200);
}

.update-list > li:first-child {
    padding-top: 0;
    border-top: 0;
}

.update-list__date {
    margin: 0 0 var(--space-1);
    color: var(--dark-soft);
    font-size: var(--text-xs);
}

.update-list__title {
    margin: 0 0 var(--space-2);
    font-size: var(--text-lg);
}

.update-list__stage {
    display: inline-block;
    margin-bottom: var(--space-2);
}

/* A Questions answered block (David, 11 Oct 2026): under each answer, the idea or the project it
   is about, a link to its page; and, under them all, the way to all of one project's. */
.qa-list__about {
    margin: var(--space-2-5) 0 0;
    font-size: var(--text-sm);
}

.qa-list__more {
    margin: var(--space-4) 0 0;
}

/* The Copy button under the private link to follow an idea, on the thank-you page (plan 20,
   step 3.8): a list, as the share links' own copy button is, which site.js works. */
.follow-copy {
    list-style: none;
    margin: 0 0 var(--space-2);
    padding: 0;
}

.follow-copy__status {
    margin: 0;
    font-size: var(--text-sm);
    color: var(--dark-soft);
}

/* Override: over a photo, in the dark box, "Link copied" is light, as the box's small print is (review 9 Oct, X4). */
.idea-box .follow-copy__status {
    color: var(--grey-200);
}