/* ==========================================================================
   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.
   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, 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);
}

/* In forced colours the bar's own colours go, and with them how much of it is filled: its edge is
   the words' colour, its track the page's and what is filled the highlight's. */
@media (forced-colors: active) {
    .progress {
        forced-color-adjust: none;
        border-color: CanvasText;
        background: Canvas;
    }

    .progress::-webkit-progress-bar {
        background: Canvas;
    }

    .progress::-webkit-progress-value {
        background: Highlight;
    }

    .progress::-moz-progress-bar {
        background: Highlight;
    }
}

/* 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;
}

/* The line at the foot of a form whose list acts as soon as something is chosen from it, which
   listen.js adds: on a line of its own, in the form's own colour. */
.acts-at-once {
    flex-basis: 100%;
    margin: 0;
    font-size: var(--text-sm);
    white-space: normal;
}

.survey-bar__jump:has(.acts-at-once) {
    flex-wrap: wrap;
}

/* --------------------------------------------------------------------------
   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. */
    .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. */
.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. */
.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. */
    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);
}

/* In forced colours a lit star would look as an unlit one does: unlit, it is the page's colour in
   an edge of the words', and lit, filled with the highlight. */
@media (forced-colors: active) {
    .rating__item .icon {
        forced-color-adjust: none;
        fill: Canvas;
        stroke: CanvasText;
    }

    .rating__item:has(.rating__input:checked) .icon,
    .rating__item:has(~ .rating__item .rating__input:checked) .icon {
        fill: Highlight;
    }
}

.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. */
.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: 1440px) {
    .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;
}

/* "As if arriving from" has its list under it when the two do not fit side by side, as on a
   phone 320 pixels wide, where they held the note 35 pixels past the page. */
.mode-note__form .toolbar__field {
    flex-wrap: wrap;
}

/* 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. */
    .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. A column is never wider than the list, so a
   card on a phone 320 pixels wide stays inside it. */
.survey-list.survey-list--cards {
    grid-template-columns: repeat(auto-fill, minmax(min(18rem, 100%), 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. 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. 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. */
.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: 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. */
@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. */
.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; and so do the
   words of a column's heading, such as a ranking's "Usual place", even with its letters and words
   spaced out further. */
@media (max-width: 640px) {
    .chart-table .chart-table__number--top,
    .chart-table thead .chart-table__number {
        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. 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);
}

/* The colours are what tell the answers apart, in the key as in the bars, so forced colours keep
   them, each key edged in the words' colour. */
@media (forced-colors: active) {
    .legend__key,
    .stack {
        forced-color-adjust: none;
    }

    .legend__key {
        border: 1px solid CanvasText;
    }
}

.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. */

/* 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 (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. */
.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.
   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, a little closer than a page's. */
.whatif__buttons {
    margin-top: var(--space-5);
}

/* A Project or a Survey block: 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, 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. */
.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. */
.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: 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: 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: 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. */
.idea-box .follow-copy__status {
    color: var(--grey-200);
}

/* --------------------------------------------------------------------------
   Start an idea (_IdeaStartBlock): "What if…" on the
   dark, the box to start an idea in, white with the highlight round it, the button and how long the
   idea form takes, and the nudges, beside a photo that fades into the dark at its left. On a narrow
   screen the photo is a strip on top, fading into the dark at its foot.
   -------------------------------------------------------------------------- */

.idea-start {
    position: relative;
    overflow: hidden;
    background: var(--dark);
    color: var(--white);
}

.idea-start__photo {
    position: absolute;
    inset: 0 0 0 58%;
}

.idea-start__photo::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(90deg, var(--dark) 0, transparent 22%);
}

.idea-start__photo picture,
.idea-start__photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Its map pins (_PhotoPins) over the fade into the dark, under the words, which come after it. */
.idea-start__photo .photo-pins {
    z-index: 2;
}

.idea-start__body {
    position: relative;
    z-index: 2;
    max-width: 40rem;
    padding: var(--space-12) 0;
}

/* Its title is the page title's size and weight, white on the dark with its last words in the
   highlight's yellow, as a Hero's is (.page-title--light, site.css). */
.idea-start__title {
    margin-top: 0;
}

.idea-start__lead {
    max-width: 34rem;
    margin: 0 0 var(--space-6);
    font-size: 1.2rem;
}

.idea-start__lead a {
    color: var(--white);
}

.idea-start__box {
    padding: var(--space-4) var(--space-5) var(--space-3);
    border: 3px solid var(--highlight);
    border-radius: 6px;
    background: var(--white);
    color: var(--dark-deep);
    box-shadow: 0 10px 30px rgb(0 0 0 / 0.25);
}

.idea-start__label {
    display: block;
    font-size: 1.25rem;
    font-weight: 700;
}

.idea-start__words {
    display: block;
    width: 100%;
    min-height: 4.6rem;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: 1.25rem;
    resize: vertical;
}

.idea-start__words::placeholder {
    color: var(--dark-soft);
    font-style: italic;
    opacity: 1;
}

/* The example drawn with the page, out of sight until listen.js has the box (data-typed) and types it
   in from nothing, so it is not seen whole first. Without the script, or with less movement asked
   for, it is in the box, whole. */
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
    .idea-start__words[data-examples]:not([data-typed])::placeholder {
        color: transparent;
    }
}

/* Under the words: the button that pauses the examples, at the left, and the hint, at the right. */
.idea-start__under {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 var(--space-4);
    margin-top: var(--space-1);
}

.idea-start__hint {
    margin: 0 0 0 auto;
    text-align: right;
    font-size: var(--text-xs);
    color: var(--dark-soft);
}

.idea-start__pause {
    min-height: 24px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--dark-deep);
    font: inherit;
    font-size: var(--text-xs);
    text-decoration: underline;
    text-underline-offset: 0.15em;
    cursor: pointer;
}

.idea-start__pause:hover {
    text-decoration-thickness: 2px;
}

.idea-start__go {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3) var(--space-5);
    margin: var(--space-5) 0 0;
}

.idea-start__facts {
    margin: 0;
    font-size: var(--text-sm);
    color: var(--grey-200);
}

.idea-start .fact-list .icon {
    color: var(--highlight);
}

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

.idea-start__nudge-words {
    margin: 0 0 var(--space-2);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--grey-200);
}

.idea-start__nudge-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.idea-start__nudge {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    padding: 0.35em 0.85em;
    border: 1px solid rgb(255 255 255 / 0.45);
    border-radius: 999px;
    background: rgb(255 255 255 / 0.06);
    font-size: var(--text-sm);
}

.idea-start__nudge .icon {
    color: var(--highlight);
}

@media (max-width: 760px) {
    .idea-start__photo {
        position: relative;
        inset: auto;
        height: 11rem;
    }

    .idea-start__photo::before {
        background: linear-gradient(0deg, var(--dark) 0, transparent 40%);
    }

    .idea-start__body {
        padding: var(--space-2) 0 var(--space-10);
    }
}

/* On paper the dark goes: its words dark on white, and no photo. */
@media print {
    .idea-start,
    .idea-start * {
        background: none !important;
        color: var(--dark-deep) !important;
    }

    .idea-start__photo {
        display: none;
    }
}

/* --------------------------------------------------------------------------
   The decisions on ideas (_IdeasBlock): each decision's label, its name and icon
   in its own colours, so colour is never the only sign; three at random as cards; and, on the page of
   decisions, how many as three figures, the box to find one and the links to show one kind, the
   table, a list of cards on a phone, and what each kind means.
   -------------------------------------------------------------------------- */

.decision-label {
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
    padding: 0.15em 0.6em;
    border: 1px solid transparent;
    border-radius: 999px;
    color: var(--dark-deep);
    font-size: 0.82rem;
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
}

.decision-label .icon {
    width: 1em;
    height: 1em;
}

.decision-label--taken-forward {
    background: var(--highlight);
}

.decision-label--added-to-consultation {
    background: var(--tint);
}

.decision-label--already-happening {
    background: var(--grey-200);
}

.decision-label--other-organisation {
    border-color: var(--grey-300);
    background: var(--white);
    color: var(--dark);
}

.decision-label--not-taken-forward {
    border: 1px dashed var(--grey-300);
    background: var(--white);
    color: var(--dark-soft);
}

.idea-cards {
    list-style: none;
    margin: 0 0 var(--space-6);
    padding: 0;
    display: grid;
    gap: var(--space-4);
}

@media (min-width: 760px) {
    .idea-cards {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.idea-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
    padding: var(--space-5) var(--space-6) var(--space-6);
    border-top: 4px solid var(--accent);
    border-radius: var(--radius);
    background: var(--white);
    box-shadow: var(--shadow);
}

.idea-card p {
    margin: 0;
}

.idea-card__title {
    margin: 0;
    font-size: 1.2rem;
}

.idea-card__title a {
    color: var(--dark);
}

/* A card, or a row of every decision, leads to its idea from anywhere on it, its title's link
   reaching over all of it, and answers the pointer, or the keyboard on its link, as a project's
   or a survey's card does: the pale grey, the accent's edge and a shadow, its title underlined. */
.idea-card {
    position: relative;
    border: 1px solid var(--grey-300);
    border-top: 4px solid var(--accent);
    box-shadow: none;
    transition: box-shadow 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}

.idea-card__link {
    text-decoration: none;
}

.idea-card__link::after,
.decision-table__link::after {
    content: "";
    position: absolute;
    inset: 0;
}

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

.idea-card:hover .idea-card__link,
.idea-card:focus-within .idea-card__link {
    text-decoration: underline;
}

.decision-table tbody tr {
    position: relative;
}

.decision-table tbody tr:hover > *,
.decision-table tbody tr:focus-within > * {
    background: var(--grey-100);
}

.decision-table tbody tr:hover .data-table__title strong,
.decision-table tbody tr:focus-within .data-table__title strong {
    text-decoration: underline;
}

.idea-card__summary {
    color: var(--dark-soft);
}

.idea-card__reason {
    font-size: var(--text-sm);
}

.idea-cards__all {
    margin: 0;
}

.decision-figures {
    list-style: none;
    margin: 0 0 var(--space-6);
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-4);
}

.decision-figures li {
    display: flex;
    flex-direction: column;
    padding-left: var(--space-4);
    border-left: 4px solid var(--accent);
}

.decision-figures__number {
    font-size: clamp(2rem, 5vw, 2.8rem);
    font-weight: 700;
    line-height: 1.1;
    color: var(--accent-text);
}

/* One column that can be narrower than the form's natural width, so that on a phone the form
   fits the page rather than holding the grey box 40 pixels past its edge at 320 (WCAG 1.4.10). */
.decision-finder {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-4);
    margin-bottom: var(--space-4);
    padding: var(--space-5) var(--space-6);
    border-radius: var(--radius);
    background: var(--grey-100);
}

.decision-finder .filter-bar {
    margin: 0;
    padding: 0;
    background: none;
}

/* Find a decision's box goes under its name when the two do not fit side by side, as on a phone. */
.decision-finder .toolbar__field {
    flex-wrap: wrap;
}

.decision-finder__show {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-3);
}

.decision-finder__word {
    font-weight: 600;
}

.decision-shows {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.decision-show {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    padding: 0.3em 0.8em;
    border: 1px solid var(--grey-300);
    border-radius: 999px;
    background: var(--white);
    color: var(--dark);
    font-size: var(--text-sm);
    font-weight: 600;
    text-decoration: none;
}

.decision-show:hover {
    border-color: var(--dark);
}

.decision-show__count {
    color: var(--dark-soft);
}

.decision-show[aria-current="true"] {
    border-color: var(--dark);
    background: var(--dark);
    color: var(--white);
}

.decision-show[aria-current="true"] .decision-show__count {
    color: var(--highlight);
}

/* The arrow of the order the decisions are in, the size of its words and in their colour. */
.decision-show .icon {
    width: 1em;
    height: 1em;
}

/* The orders as links, for a phone, where the table's headings are not shown (below). */
.decision-finder__sort {
    display: none;
}

/* In forced colours the dark fill goes, and with it which is shown: that one in the highlight's
   colours. */
@media (forced-colors: active) {
    .decision-show[aria-current="true"],
    .decision-show[aria-current="true"] .decision-show__count {
        forced-color-adjust: none;
        border-color: Highlight;
        background: Highlight;
        color: HighlightText;
    }
}

/* An idea's title is its row's heading, its words as long as they need, not in bold: its title is,
   its summary under it is not. There is no number in the first column. */
.decision-table tbody th {
    font-weight: 400;
    white-space: normal;
}

/* "Decided" before its date, said only where the table's headings are not seen. */
.decision-table__decided {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.decision-table .decision-label + .data-table__note {
    margin-top: var(--space-1);
}

@media (max-width: 760px) {
    .table-scroll:has(> .decision-table) {
        max-height: none;
        overflow: visible;
        border: 0;
    }

    /* The headings, and the links in them that sort the table, give way to the same links above it,
       so none is reached by the keyboard without being seen, and the line under the count says
       nothing of headings. */
    .decision-table thead,
    .decision-table__hint {
        display: none;
    }

    .decision-finder__sort {
        display: flex;
    }

    /* A card's words whole, as there is room for them: two lines at most only in the table. */
    .decision-table .data-table__note--clip {
        display: block;
        -webkit-line-clamp: none;
        line-clamp: none;
        overflow: visible;
    }

    .decision-table,
    .decision-table tbody,
    .decision-table tr,
    .decision-table th,
    .decision-table td {
        display: block;
    }

    .decision-table tr {
        margin-bottom: var(--space-3);
        padding: var(--space-4);
        border: 1px solid var(--grey-200);
        border-radius: var(--radius);
        background: var(--white);
        transition: box-shadow 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
    }

    /* A card on a phone answers the pointer as a project's card does. */
    .decision-table tbody tr:hover,
    .decision-table tbody tr:focus-within {
        border-color: var(--accent);
        background: var(--grey-100);
        box-shadow: var(--shadow);
    }

    /* Each line of a card in line with the next, the tall box's padding at the row's ends left off. */
    .decision-table th,
    .decision-table td,
    .table-scroll--tall .decision-table th:first-child,
    .table-scroll--tall .decision-table td:last-child {
        padding: 0 0 var(--space-2);
        border: 0;
    }

    .decision-table__decided {
        position: static;
        width: auto;
        height: auto;
        overflow: visible;
        clip: auto;
    }
}

.decision-key {
    display: grid;
    gap: var(--space-5) var(--space-8);
    margin: 0;
}

@media (min-width: 760px) {
    .decision-key {
        grid-template-columns: 1fr 1fr;
    }
}

.decision-key__item dt {
    margin-bottom: var(--space-2);
}

.decision-key__item dd {
    margin: 0;
}