/* ==========================================================================
   Listen: survey styles
   Loaded after site.css, on Listen's pages only. Everything here is built from
   the colour variables and classes in site.css; nothing redefines them.
   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.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Forms: a narrow column of fields with the button under them
   (sign in, change password)
   -------------------------------------------------------------------------- */

.form-stack {
    display: grid;
    gap: var(--space-5);
    max-width: 26rem;
    margin-top: var(--space-7);
}

.form-stack .btn {
    justify-self: start;
}

/* A line of small print under a button */
.form-note {
    margin: var(--space-4) 0 0;
}

/* A group of radio buttons or tick boxes under one label. The browser's own box round
   the group is taken away: the label does the job. */
fieldset.field {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

/* Floated, so that it is laid out like any other part of the field and gets the same gap
   under it. A label that is only there for screen readers is left as it is. */
fieldset.field > legend:not(.visually-hidden) {
    float: left;
    width: 100%;
    padding: 0;
}

/* A little air between a confirmation's heading and the text after it */
.confirmation + .lead,
.confirmation + .rich-text {
    margin-top: var(--space-4);
}

/* --------------------------------------------------------------------------
   Text an editor wrote with simple formatting: paragraphs, lists, sub-headings
   (a statement, a start screen, an ending, a "closed" message)
   -------------------------------------------------------------------------- */

.rich-text ul,
.rich-text ol {
    padding-left: var(--space-5);
}

.rich-text li {
    margin-bottom: var(--space-1-5);
}

.rich-text h2 {
    font-size: var(--text-2xl);
    margin-top: var(--space-6);
}

.rich-text > :last-child {
    margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   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(--ink-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(--gold);
}

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

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

.question__optional {
    font-weight: 400;
    color: var(--ink-soft);
}

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

.key {
    display: inline-block;
    padding: 0.05rem var(--space-1-5);
    border: 1px solid var(--grey-300);
    border-radius: var(--radius);
    background: var(--grey-100);
    font-size: 0.85em;
    font-weight: 700;
}

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

    .choice-list--scale .choice__tick {
        display: none;
    }
}

.choice {
    position: relative;
}

.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(--ink);
    border: 2px solid var(--ink-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(--ink-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(--ink-soft);
    border: 2px solid var(--ink-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(--ink-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(--ink-deep);
    border-color: var(--ink-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(--steel);
    color: var(--ink-deep);
    border-color: var(--ink-deep);
}

.choice__input:checked + .choice__label .choice__key {
    background: var(--ink-deep);
    color: var(--white);
    border-color: var(--ink-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(--ink-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(--ink-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(--gold);
    stroke: var(--gold-deep);
}

.rating__item:has(.rating__input:focus-visible) {
    outline: 3px solid var(--focus);
    outline-offset: 2px;
    box-shadow: 0 0 0 6px var(--ink-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(--ink);
}

/* 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(--ink-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(--ink);
    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(--gold);
    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(--ink-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(--gold-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(--steel);
    color: var(--ink-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;
}

/* The site's arrow icon points right; .icon--down (site.css) turns it down, and this turns it up. */
.icon--up {
    transform: rotate(-90deg);
}

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

.field__input--short {
    max-width: 10rem;
}

.field__input--medium {
    max-width: 22rem;
}

textarea.field__input--compact {
    min-height: 7rem;
}

/* 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(--gold-text);
}

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

.idea-box .page-title,
.idea-box .lead,
.idea-box a:not(.btn) {
    color: var(--white);
}

.idea-box .small {
    color: var(--grey-200);
}

/* The public's forms, and a survey's own pages, in the same dark box (plan 19, step 9.8, kind 2):
   their headings, an ending's tick and a question's kicker light on the dark, and a ghost button white. */
.idea-box .section__title {
    color: var(--white);
}

.idea-box .idea-page__kicker,
.idea-box .confirmation__icon {
    color: var(--yellow);
}

.idea-box .btn--ghost {
    border-color: var(--white);
    color: var(--white);
}

.idea-box .btn--ghost:hover {
    background: var(--white);
    color: var(--ink-deep);
}

/* A notice has a light ground of its own, so it keeps the dark words, and links, it has anywhere else. */
.idea-box .notice,
.idea-box .notice a:not(.btn) {
    color: var(--ink);
}

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

.question {
    view-transition-name: question;
}

@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;
}

/* ==========================================================================
   The pages for signed-in staff: editors, reviewers and administrators.
   They keep the site's full header and footer, with the signed-in strip above.
   ========================================================================== */

/* Something that can do nothing without script, such as a Copy button, is not shown
   until the script is there. site.js puts the "js" class on the page. */
html:not(.js) .needs-js {
    display: none;
}

/* The other way round: a Save button that the script makes unnecessary by saving as the
   editor types. It comes back if a save fails, so there is always a way to try again. */
.js .hide-with-js {
    display: none;
}

/* Modifier: a notice that says something went wrong */
.notice--problem {
    border-left-color: var(--error);
}

/* The footer makes its links white; a button there keeps the button's own colour. */
.site-footer .btn--primary {
    color: var(--ink-deep);
}

/* Listen's footer: the way back to the website is second and needs the room. */
@media (min-width: 760px) {
    .site-footer__grid--listen {
        grid-template-columns: 1.1fr 1.3fr 0.8fr 0.8fr;
    }
}

/* --------------------------------------------------------------------------
   The paper version of a survey: a form to print and fill in by hand. Boxes and
   lines are drawn with borders, which print whatever the browser's settings.
   -------------------------------------------------------------------------- */

.paper {
    padding: var(--space-6) var(--space-7);
    background: var(--white);
    border: 1px solid var(--grey-300);
    border-radius: var(--radius);
}

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

    .paper {
        padding: 0;
        border: 0;
    }

    /* 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). */
    .chip,
    .survey-row__badge,
    .nav-count,
    .chart-panel__number,
    .q-item__number,
    .rank-item__position,
    .choice__box,
    .choice__key,
    .btn--danger,
    .legend__key {
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
    }
}

/* --------------------------------------------------------------------------
   Working pages: a wider page, and a head with the title and its actions
   -------------------------------------------------------------------------- */

/* The way back to the list a page belongs to */
.back-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1-5);
    margin-bottom: var(--space-2);
    font-size: var(--text-sm);
    font-weight: 600;
}

/* --------------------------------------------------------------------------
   Chip: a small label for the state something is in
   -------------------------------------------------------------------------- */

.chip {
    display: inline-block;
    padding: var(--space-0-5) var(--space-2);
    border-radius: var(--radius);
    background: var(--grey-200);
    color: var(--ink);
    font-size: var(--text-2xs);
    font-weight: 700;
    letter-spacing: 0.08em;
    line-height: 1.5;
    text-transform: uppercase;
    vertical-align: middle;
    white-space: nowrap;
}

.chip--scheduled {
    background: var(--steel);
    color: var(--ink-deep);
}

.toolbar__field {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    white-space: nowrap;
}

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

/* A field is never wider than the page: on a narrow screen its box or list gives way. */
.toolbar__field {
    min-width: 0;
    max-width: 100%;
}

.toolbar__field input[type="search"] {
    width: 13rem;
}

/* A list of questions is as wide as it needs to be, but no wider than this */
.toolbar__field select.field__input {
    max-width: 17rem;
}

/* --------------------------------------------------------------------------
   Menu: a button that opens a short list of actions (a <details>, so no script)
   -------------------------------------------------------------------------- */

.menu {
    position: relative;
    display: inline-block;
}

.menu > summary {
    list-style: none;
}

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

.menu__list {
    position: absolute;
    right: 0;
    z-index: 5;
    min-width: 13rem;
    margin: var(--space-1) 0 0;
    padding: var(--space-1-5);
    list-style: none;
    background: var(--white);
    border: 1px solid var(--grey-300);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

/* On a phone a menu opens across the width of the row or toolbar it belongs to, wherever
   in it the button is: hung from the button's right edge, as on a wide screen, it would
   run off the left of the screen. */
@media (max-width: 640px) {
    .menu {
        position: static;
    }

    .survey-row,
    .toolbar {
        position: relative;
    }

    .menu__list,
    .menu > .chooser {
        left: 0;
        right: 0;
        width: auto;
        min-width: 0;
        max-width: none;
    }
}

/* --------------------------------------------------------------------------
   Survey list: one row for each survey (the editor's and reviewer's dashboards)
   -------------------------------------------------------------------------- */

.survey-list {
    list-style: none;
    display: grid;
    gap: var(--space-3);
}

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

.survey-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-3) var(--space-8);
    align-items: center;
    padding: var(--space-4) var(--space-5);
    background: var(--white);
    border: 1px solid var(--grey-300);
    border-left: 6px solid var(--grey-300);
    border-radius: var(--radius);
}

/* Until the window is wide enough for both, the numbers go under the wording instead of
   beside it, so the wording keeps the whole width; they wrap if there are many. */
@media (max-width: 1240px) {
    .survey-row {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* 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(--yellow) 18%, var(--white));
}

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

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

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

.survey-row__title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-1-5) var(--space-3);
    margin: 0 0 var(--space-1);
    font-size: var(--text-xl);
}

.survey-row__meta {
    margin: 0;
    font-size: var(--text-sm);
    color: var(--ink-soft);
}

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

/* A row with a small picture at its left: a survey's featured picture, or an uploaded picture in its list */
.survey-row.survey-row--pictured {
    grid-template-columns: 9rem minmax(0, 1fr);
    align-items: start;
}

.survey-row__image {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--radius);
}

/* The picture runs down the left of the row, and the buttons sit under the words beside it. */
.survey-row--pictured .survey-row__image {
    grid-row: 1 / span 2;
}

.survey-row--pictured .survey-row__actions {
    grid-column: 2;
}

@media (max-width: 560px) {
    .survey-row.survey-row--pictured {
        grid-template-columns: minmax(0, 1fr);
    }

    .survey-row--pictured .survey-row__image {
        grid-row: auto;
        aspect-ratio: 16 / 9;
    }

    .survey-row--pictured .survey-row__actions {
        grid-column: 1;
    }
}

.survey-row__actions {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

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

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

.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(--gold);
    font-size: 3rem;
}

.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(--gold);
    border-top-color: var(--gold);
    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(--ink-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(--yellow) 38%, var(--white));
}

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

/* A gallery block: two to six pictures side by side, three to a row, or two or four when there
   are two or four, each with its caption under it; one under another on a phone. No pop-up to
   enlarge them (plan 19, step 7.66, sheet 17e). */
.gallery {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-5);
    margin: 0;
    padding: 0;
    list-style: none;
}

.gallery--two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.gallery--four {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.gallery--one {
    grid-template-columns: minmax(0, 34rem);
}

.gallery__item {
    margin: 0;
    break-inside: avoid;
}

.gallery__item img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--radius);
}

.gallery__item figcaption {
    margin-top: var(--space-2);
    color: var(--ink-soft);
    font-size: var(--text-sm);
}

@media (max-width: 54em) {
    .gallery.gallery--four {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 40em) {
    .gallery.gallery--two,
    .gallery.gallery--four,
    .gallery {
        grid-template-columns: minmax(0, 1fr);
    }
}

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

/* Override: a carousel's buttons with no heading beside them sit at the right, where they
   are when there is one (a Surveys block with no heading, plan 19, step 9.17). */
.section__head--row > .carousel__controls:only-child {
    margin-left: auto;
}

/* 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(--ink);
    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(--yellow);
    background: var(--yellow);
}

.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(--ink-deep);
    background: var(--yellow);
}

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

/* A quiet text button: "+ Add an answer" */
.add-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1-5);
    padding: var(--space-1) var(--space-2);
    border: 0;
    border-radius: var(--radius);
    background: none;
    color: var(--ink);
    font: inherit;
    font-size: var(--text-sm);
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
}

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

/* --------------------------------------------------------------------------
   Builder: the list of questions, the question being edited, its settings and logic
   -------------------------------------------------------------------------- */

.builder {
    display: grid;
    gap: var(--space-5);
    align-items: start;
}

/* Each column is a stack of panes */
.builder > div {
    display: grid;
    gap: var(--space-4);
    align-content: start;
    min-width: 0;
}

@media (min-width: 1100px) {
    .builder {
        grid-template-columns: 18.5rem minmax(0, 1fr) 20rem;
    }
}

/* The form for the question being edited */
.editor {
    display: grid;
    gap: var(--space-4);
}

/* A row gives way to a narrow screen instead of pushing the page wider. */
.editor > * {
    min-width: 0;
}

/* A tick box or radio button with its label beside it */
.check {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2-5);
    line-height: 1.4;
}

.check input {
    flex: none;
    width: 1.25rem;
    height: 1.25rem;
    margin: var(--space-0-5) 0 0;
    accent-color: var(--gold);
}

/* The question as a respondent will see it. On a very narrow screen a long word in it
   breaks rather than pushing the page wider. */
.preview {
    padding: var(--space-5) var(--space-6) var(--space-6);
    background: var(--grey-100);
    border-radius: var(--radius);
    overflow-wrap: anywhere;
}

@media (max-width: 640px) {
    .preview {
        padding: var(--space-4) var(--space-4) var(--space-4);
    }
}

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

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

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

/* Something the editor needs to put right, or should know */
.problem {
    display: flex;
    gap: var(--space-2);
    margin: 0;
    padding: var(--space-2-5) var(--space-3);
    border-left: 4px solid var(--error);
    background: var(--grey-100);
    font-size: var(--text-sm);
}

.problem .icon {
    margin-top: var(--space-0-5);
    color: var(--error);
}

.problem .icon {
    flex: none;
}

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

/* An address or other exact text, shown in a fixed-width face */
.code {
    padding: var(--space-0-5) var(--space-1-5);
    border-radius: var(--radius);
    background: var(--grey-100);
    font-family: Consolas, "Courier New", monospace;
    font-size: 0.9em;
    overflow-wrap: anywhere;
}

/* Modifier: a table with less air, for lists of things to act on */
.table--compact {
    margin: 0;
}

.table--compact th,
.table--compact td {
    padding: var(--space-2) var(--space-4) var(--space-2) 0;
    vertical-align: middle;
}

.qr {
    flex: none;
    border: 1px solid var(--grey-300);
    fill: var(--ink-deep);
}

/* The white behind a QR code's squares. Here, not with the staff styles: the QR code that
   sets up two-step sign-in is shown to someone who is not yet staff (plan 19, step 7.60). */
.qr__paper {
    fill: var(--white);
}

/* One person's own short form, Change your password or two-step sign-in, in a white box on
   the grey (plan 19, step 9.8, sheet 18c). Here, not with the staff styles: someone still on a
   one-time password, or setting up two-step sign-in, is not yet staff. */
.form-box {
    padding: var(--space-8) var(--space-5) var(--space-10);
    border-radius: var(--radius);
    background: var(--white);
    box-shadow: var(--shadow);
}

@media (min-width: 760px) {
    .form-box {
        padding: var(--space-9) var(--space-10) var(--space-10);
    }
}

/* Two-step sign-in (plan 19, step 7.60): the box for a code, its figures spaced to read
   easily, and the recovery codes, shown once, two columns of them. */
.code-input {
    max-width: 12rem;
    font-size: var(--text-2xl);
    letter-spacing: 0.2em;
    font-variant-numeric: tabular-nums;
}

.code-input--recovery {
    max-width: 18rem;
    letter-spacing: 0.08em;
}

.recovery-codes {
    columns: 2;
    margin: var(--space-4) 0 var(--space-6);
    padding: 0;
    list-style: none;
    font-family: Consolas, "Courier New", monospace;
    font-size: var(--text-lg);
    line-height: 2;
}

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

/* What the charts and the table below are limited to */
.filter-bar .small {
    color: var(--ink-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(--steel);
    color: var(--ink-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(--ink-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;
}

.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%;
}

.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. */
.bar,
.stack {
    display: block;
    width: 100%;
    height: 0.9rem;
}

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

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

.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(--grey-300);
    background: var(--grey-300);
}

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

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

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

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

.legend {
    list-style: none;
    margin: 0 0 var(--space-3);
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1) var(--space-5);
    font-size: var(--text-xs);
}

.legend li {
    display: flex;
    align-items: center;
    gap: var(--space-1-5);
}

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

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

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

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

/* The count over each bar */
.series__count {
    fill: var(--ink);
    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);
}

.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 {
    font-size: var(--text-sm);
    line-height: 1.4;
}

.data-table th,
.data-table td {
    vertical-align: top;
}

.data-table thead th {
    white-space: nowrap;
    vertical-align: bottom;
}

.data-table tbody th {
    font-weight: 700;
}

.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(--gold-text);
}

.data-table__nowrap {
    white-space: nowrap;
}

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

.data-table__note,
.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: the website's pager (site.css) as the pages of a long list, at its foot on the right. */
.pager.pager--table {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-4);
    margin-top: var(--space-4);
}

/* The pages near the one shown, by number, five at most, the one shown in bold (plan 19, step 9.3). */
.pager__pages {
    display: flex;
    gap: var(--space-1);
    margin: 0;
    padding: 0;
    list-style: none;
}

.pager__page {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.25rem;
    min-height: 2.25rem;
    padding: 0 var(--space-1-5);
    border-radius: var(--radius);
    color: var(--ink);
}

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

.pager__page--now {
    font-weight: 700;
    border: 2px solid var(--ink);
}

.pager__now {
    font-size: var(--text-sm);
    color: var(--ink-soft);
}

/* The column chooser */
.chooser {
    max-width: 22rem;
    padding: var(--space-4) var(--space-5) var(--space-5);
    background: var(--white);
    border: 1px solid var(--grey-300);
    border-top: 6px solid var(--gold);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.chooser .check {
    font-size: var(--text-sm);
}

.chooser .button-row {
    margin-top: var(--space-4);
}

/* It opens under its button, over the table, and scrolls if the survey is long */
.menu > .chooser {
    position: absolute;
    right: 0;
    z-index: 5;
    width: 22rem;
    max-width: calc(100vw - 2rem);
    max-height: 70vh;
    overflow-y: auto;
    margin-top: var(--space-1);
}

/* A one-time password, shown once */
.one-time {
    margin: var(--space-6) 0;
}

.one-time p {
    margin: 0 0 var(--space-2-5);
}

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

.one-time__value {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
}

.one-time__value .code {
    padding: var(--space-1-5) var(--space-3);
    background: var(--white);
    box-shadow: inset 0 0 0 1px var(--grey-300);
    font-size: var(--text-xl);
    font-weight: 700;
    letter-spacing: 0.02em;
}

/* 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 /listen/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(--ink);
    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(--ink-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;
}

/* The priorities an idea or project serves, as the website's numbered boxes, smaller. */
.priorities {
    display: inline-flex;
    flex-wrap: wrap;
    gap: var(--space-1);
    margin: 0;
    padding: 0;
    list-style: none;
}

.priorities .number-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.6rem;
    height: 1.6rem;
    padding: 0 var(--space-1);
    font-size: var(--text-2xs);
    /* Small white numbers need the deeper gold the website keeps for them. */
    background: var(--gold-text);
}

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

/* Tags staff put on ideas. */
.tag {
    display: inline-block;
    padding: 0.05rem var(--space-2);
    border: 1px solid var(--grey-300);
    border-radius: 999px;
    color: var(--ink-soft);
    font-size: var(--text-2xs);
    line-height: 1.5;
    white-space: nowrap;
}

.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(--ink-soft);
    font-size: var(--text-2xs);
}

/* A decision on an idea, in public and on the staff's idea page: a grey box with the gold
   edge the site's notes have, its kind in words beside an icon. */
.decision {
    margin: 0 0 var(--space-6);
    padding: var(--space-4) var(--space-5);
    background: var(--grey-100);
    border-left: 6px solid var(--gold);
}

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

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

.decision__date {
    margin: var(--space-1) 0 var(--space-3);
    color: var(--ink-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(--ink-soft);
    font-size: var(--text-xs);
}

/* The message to paste into the Council's own email, for each person to let know. */
.tell {
    margin: 0 0 var(--space-4);
    padding: 0 0 var(--space-4);
    border-bottom: 1px solid var(--grey-300);
}

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

/* The number on a thank-you page: an idea's, or a response's. */
.reference {
    display: inline-block;
    padding: var(--space-1) var(--space-3);
    border: 2px solid var(--gold);
    border-radius: var(--radius);
    font-size: var(--text-2xl);
    font-weight: 700;
    letter-spacing: 0.02em;
}

/* --------------------------------------------------------------------------
   Pages of blocks, as drawn on a public page (sheets I6 and I7)
   -------------------------------------------------------------------------- */

.block {
    padding: var(--space-7) 0;
}

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

.key-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: var(--space-3) var(--space-6);
    margin: 0;
}

.key-facts div {
    padding: var(--space-3) var(--space-4);
    border-left: 4px solid var(--gold);
    background: var(--white);
}

.key-facts dt {
    color: var(--ink-soft);
    font-size: var(--text-xs);
}

.key-facts dd {
    margin: var(--space-0-5) 0 0;
    font-weight: 600;
}

.timeline {
    margin: 0;
    padding: 0;
    list-style: none;
}

.timeline li {
    position: relative;
    margin-left: var(--space-2);
    padding: 0 0 var(--space-4) var(--space-8);
    border-left: 3px solid var(--grey-300);
}

.timeline li:last-child {
    padding-bottom: 0;
    border-left-color: transparent;
}

.timeline li::before {
    content: "";
    position: absolute;
    top: 0.1rem;
    left: -0.6rem;
    width: 0.9rem;
    height: 0.9rem;
    border: 3px solid var(--grey-300);
    border-radius: 50%;
    background: var(--white);
}

.timeline li.is-done::before {
    border-color: var(--gold);
    background: var(--gold);
}

.timeline__when {
    display: block;
    color: var(--ink-deep);
    font-weight: 700;
}

/* A done step's "Done": the chip a project's stage has on its card (.chip--scheduled), after
   the step's words (plan 19, step 9.12). Plain grey words before, which read as part of them. */
.timeline__done {
    margin-left: var(--space-1-5);
}

.qa-list details {
    padding: var(--space-3) 0;
    border-top: 1px solid var(--grey-300);
}

.qa-list details:last-child {
    border-bottom: 1px solid var(--grey-300);
}

.qa-list summary {
    color: var(--ink-deep);
    font-weight: 600;
    cursor: pointer;
}

.qa-list details .rich-text {
    margin-top: var(--space-2-5);
}

.doc-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.doc-list li {
    display: flex;
    gap: var(--space-3);
    align-items: flex-start;
    padding: var(--space-3) 0;
    border-top: 1px solid var(--grey-200);
}

.doc-list li:first-child {
    border-top: 0;
}

.doc-list .icon {
    flex: none;
    width: 1.6rem;
    height: 1.6rem;
    color: var(--gold-text);
}

.doc-list__meta {
    display: block;
    color: var(--ink-soft);
    font-size: var(--text-xs);
}

.doc-list p {
    margin: var(--space-1) 0 0;
}

.block-picture {
    margin: 0;
}

.block-picture img {
    display: block;
    width: 100%;
    border-radius: var(--radius);
}

.block-picture figcaption {
    margin-top: var(--space-1-5);
    color: var(--ink-soft);
    font-size: var(--text-xs);
}

.block-quote {
    margin: 0;
    padding: var(--space-2) 0 var(--space-2) var(--space-6);
    border-left: 6px solid var(--gold);
}

.block-quote blockquote {
    margin: 0;
    color: var(--ink-deep);
    font-size: var(--text-2xl);
    line-height: 1.45;
}

.block-quote blockquote p {
    margin: 0;
}

.block-quote figcaption {
    margin-top: var(--space-2);
    color: var(--ink-soft);
}

/* --------------------------------------------------------------------------
   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(--ink-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(--gold);
    background-color: var(--gold);
}

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

.stages li[aria-current]::after {
    border-color: var(--gold-text);
    background: var(--gold-text);
    box-shadow: 0 0 0 4px rgb(127 117 33 / 0.25);
}

.stages li[aria-current] {
    color: var(--ink-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(--ink-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 (/listen/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(--ink-deep);
    font-size: var(--text-sm);
    font-weight: 600;
}

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

.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(--gold);
    border-radius: 50%;
    background: var(--white);
    color: var(--ink-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(--gold);
    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(--ink-deep);
    text-decoration: none;
}

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

.project-card__text {
    margin: 0;
    color: var(--ink);
    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(--yellow);
    color: var(--ink-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 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(--yellow);
    background: var(--yellow);
}

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

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

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

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

/* 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(--ink);
    background: var(--ink);
    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(--gold);
    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(--ink-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);
}