/* ==========================================================================
   The site's styles (Mosaic's CMS): the structure of every page, its blocks, header and
   footer. The colours, the font, the corners and the drawings come from the site's theme
   (theme.css, loaded before this), named for their use: --accent, --dark, --highlight,
   --tint and the rest. The type and spacing scales are here.
   No inline styles anywhere: the content security policy blocks them.
   ========================================================================== */

:root {
    --max: 1200px;

    /* The type and spacing scales (plan 19, step 7.6): every font size and space in the three
       stylesheets is one of these steps, but for a few that are not spacing at all: a negative
       margin that cancels a padding or places an arrow, an icon's size, the print and chart sizes
       in pt and px, and the space kept for something of a fixed size. --text-body is the body's. */
    --text-2xs: 0.78rem;
    --text-xs: 0.875rem;
    --text-sm: 0.95rem;
    --text-md: 1rem;
    --text-body: 1.0625rem;
    --text-lg: 1.125rem;
    --text-xl: 1.2rem;
    --text-2xl: 1.4rem;
    --text-3xl: 1.5rem;
    --text-4xl: 1.75rem;
    --text-5xl: 2rem;

    /* --space-n is n x 4px, at 16px to the rem; --space-0-5 2px, --space-1-5 6px, --space-2-5 10px. */
    --space-0-5: 0.125rem;
    --space-1: 0.25rem;
    --space-1-5: 0.375rem;
    --space-2: 0.5rem;
    --space-2-5: 0.625rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-7: 1.75rem;
    --space-8: 2rem;
    --space-9: 2.25rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-14: 3.5rem;
    --space-16: 4rem;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        transition: none !important;
    }
}

body {
    margin: 0;
    font-family: var(--font);
    font-size: var(--text-body);
    line-height: 1.6;
    color: var(--dark);
    background: var(--white);

    /* A page shorter than the window still fills it: the content takes the room there is,
       so the footer sits at the base of the window with no blank space under it. */
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

main {
    flex: 1 0 auto;
}

img {
    max-width: 100%;
    height: auto;
}

/* A photo's WebP copies are offered in a picture around its img (PhotoTagHelper). The picture
   has no box of its own, so the img is laid out as if it stood alone: in a grid or a flex row,
   or stretched over its parent (plan 20, step 2.4). */
picture {
    display: contents;
}

/* Its source, which only says where the WebP copies are, has no box either: with the picture
   giving way to its children, a source the browser drew as an empty block took a place of its
   own in a grid or row, and the photo was pushed onto the next one (the home page's two
   halves, 6 Oct 2026). The browser still reads it to choose the copy. */
picture > source {
    display: none;
}

h1, h2, h3 {
    line-height: 1.15;
    color: var(--dark);
    margin: 0 0 0.5em;
}

/* A long word, or a bare web address, typed into a heading or a block's words breaks onto the
   next line where it does not fit, rather than widening the page on a phone (the 9 October
   review's U16). */
main,
h1, h2, h3, h4, h5, h6 {
    overflow-wrap: break-word;
}

p {
    margin: 0 0 1em;
}

a {
    color: var(--dark);
    text-underline-offset: 0.15em;
}

a:hover {
    text-decoration-thickness: 2px;
}

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

main:focus {
    outline: none;
}

.container {
    width: 100%;
    max-width: var(--max);
    margin: 0 auto;
    padding: 0 var(--space-5);
}

.narrow {
    max-width: 760px;
}

.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* Add to anything whose text should not be selectable: no selection highlight and no text caret. */
.noselect {
    -webkit-user-select: none;
    user-select: none;
    cursor: default;
}

.skip-link {
    position: absolute;
    left: 1rem;
    top: -4rem;
    z-index: 100;
    padding: var(--space-3) var(--space-4);
    background: var(--accent-text); /* white on plain gold is 3.4:1; this is 4.7:1 */
    color: var(--white);
    font-weight: 700;
    border-radius: var(--radius);
}

.skip-link:focus {
    top: 1rem;
}

.icon {
    width: 1.1em;
    height: 1.1em;
    flex: none;
    vertical-align: -0.15em;

    /* How a line icon is drawn. An icon drawn in the page says so itself as well; one drawn from
       the file of them all (IconSprite, on the pages of someone signed in) says only this, which
       its shapes take on through the use (plan 20, step 3.6). */
    fill: none;
    stroke: currentColor;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* The share links' logos: solid shapes, not lines. */
.icon--solid {
    fill: currentColor;
    stroke: none;
}

.icon--flip {
    transform: scaleX(-1);
}

.icon--down {
    transform: rotate(90deg);
}

.icon--up {
    transform: rotate(-90deg);
}

/* The small document at the end of a link that opens a new tab, in a survey's words
   (SimpleMarkup's newTab): a little smaller than the words, close after them, in the link's
   colour, and on a line with the link's last word, never at the start of one alone (David,
   11 Oct 2026). */
.new-tab-end {
    white-space: nowrap;
}

.icon--new-tab {
    width: 0.85em;
    height: 0.85em;
    margin-left: 0.15em;
    vertical-align: -0.08em;
}

.cover {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

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

.kicker {
    text-transform: uppercase;
    letter-spacing: 0.16em;
    font-size: var(--text-xs);
    font-weight: 700;
    color: var(--accent-text);
    margin-bottom: var(--space-2);
}

.notice {
    background: var(--grey-100);
    border-left: 5px solid var(--accent);
    padding: var(--space-3) var(--space-4);
}

.lead {
    font-size: var(--text-lg);
    color: var(--dark-soft);
}

/* Accent words in headings: the brand gold, which clears 3:1 on white at heading sizes. */
.accent {
    color: var(--accent);
}

/* On a light grey background the brand gold drops just under 3:1, so the accent uses the
   darker gold there (4.1:1): a grey section, Key objectives' stripe, and a block's grey band
   (the 9 October review's X12). */
.section--grey .accent,
.block--grey .accent,
.objectives .accent {
    color: var(--accent-text);
}

/* On a dark ground the gold is too dark: a Hero's title on its dark panel or box, and a dark
   panel's heading, have their accent words in the highlight's yellow (X12). */
.page-title--light .accent,
.involved-hero .accent,
.panel:nth-child(even) .accent {
    color: var(--highlight);
}

.brand-stripe {
    height: 7px;
    background: linear-gradient(90deg, var(--accent) 0 34%, var(--dark) 34% 67%, var(--grey-300) 67%);
}

/* The colours a block may have behind it (David, 11 Oct 2026), as its theme offers them (its
   theme.json's "backgrounds"): each one of the site's own, by its name in base.css, and the words on
   it white or the deeper dark, as the theme says they are read. Each colour is kept in --block-bg
   too, for a block that lets a little of what is behind it through, as a Hero's card does. A Stripe
   bar's colour and a Hero's card's; and, in a block's settings, the small square of each. */
.bg-dark { --block-bg: var(--dark); }
.bg-dark-deep { --block-bg: var(--dark-deep); }
.bg-dark-soft { --block-bg: var(--dark-soft); }
.bg-accent-text { --block-bg: var(--accent-text); }
.bg-highlight { --block-bg: var(--highlight); }
.bg-tint { --block-bg: var(--tint); }
.bg-grey-100 { --block-bg: var(--grey-100); }
.bg-grey-200 { --block-bg: var(--grey-200); }
.bg-grey-300 { --block-bg: var(--grey-300); }
.bg-white { --block-bg: var(--white); }

.bg-dark,
.bg-dark-deep,
.bg-dark-soft,
.bg-accent-text,
.bg-highlight,
.bg-tint,
.bg-grey-100,
.bg-grey-200,
.bg-grey-300,
.bg-white {
    background-color: var(--block-bg);
}

.words-light {
    color: var(--white);
}

.words-dark {
    color: var(--dark-deep);
}

/* A Stripe bar block (David, 11 Oct 2026): a narrow band across the page, as a page's preview's bar
   is (cms-admin.css, .preview-bar), its line of words, an icon before them and a link after them,
   in one of the colours its theme offers, with the words the theme says are read on it (bg-…,
   words-…, above). */
.stripe-bar {
    padding: var(--space-2) 0;
}

.stripe-bar__inner {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.stripe-bar p {
    margin: 0;
}

.stripe-bar a {
    color: inherit;
    font-weight: 600;
}

.stripe-bar__icon {
    flex: none;
}

/* --------------------------------------------------------------------------
   Buttons (yellow with ink-deep text; elsewhere gold carries white text)
   -------------------------------------------------------------------------- */

.btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2-5);
    padding: var(--space-3) var(--space-5);
    border: 2px solid transparent;
    border-radius: var(--radius);
    font: inherit;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

/* One look for a button that cannot be pressed just now, whatever its kind (plan 19, step 7.51). */
.btn:disabled,
.btn[aria-disabled="true"] {
    opacity: 0.55;
    cursor: not-allowed;
}

.btn--primary {
    background: var(--highlight);
    color: var(--dark-deep);
}

.btn--primary:hover {
    background: var(--highlight-deep);
}

.btn--dark {
    background: var(--dark);
    color: var(--white);
}

.btn--dark:hover {
    background: var(--dark-deep);
}

.btn--steel {
    background: var(--tint);
    color: var(--dark-deep);
}

.btn--steel:hover {
    background: var(--grey-300);
}

.btn--ghost {
    background: transparent;
    color: var(--dark);
    border-color: var(--dark);
}

.btn--small {
    padding: var(--space-2) var(--space-4);
    font-size: var(--text-sm);
}

.button-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-top: var(--space-6);
}

.text-link {
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: var(--space-1-5);
}

/* --------------------------------------------------------------------------
   Header and navigation
   -------------------------------------------------------------------------- */

.site-top {
    position: relative;
    z-index: 10;
}

.site-header {
    background: var(--white);
}

.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding-top: var(--space-4);
    padding-bottom: var(--space-4);
    flex-wrap: wrap;
}

/* The logo inherits this colour through currentColor. */
.brand {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    text-decoration: none;
    color: var(--dark);
    line-height: 1.1;
}

.brand__logo {
    width: 3.9rem;
    height: 3.9rem;
    flex: none;
    color: inherit;
}

.brand__text {
    display: flex;
    flex-direction: column;
}

.brand__council {
    font-size: var(--text-md);
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.brand__title {
    font-size: var(--text-2xl);
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.brand__tag {
    margin-top: var(--space-0-5);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.06em;
    color: var(--accent-text);
}

.nav-toggle {
    display: none;
    align-items: center;
    gap: var(--space-1-5);
    padding: var(--space-2) var(--space-4);
    font: inherit;
    font-weight: 700;
    color: var(--dark);
    background: var(--grey-100);
    border: 2px solid var(--dark);
    border-radius: var(--radius);
    cursor: pointer;
}

.site-nav {
    display: flex;
    align-items: center;
    gap: var(--space-6);
}

.site-nav ul {
    list-style: none;
    display: flex;
    gap: var(--space-6);
    margin: 0;
    padding: 0;
}

.site-nav ul a {
    display: block;
    padding: var(--space-1-5) 0;
    font-size: var(--text-md);
    color: var(--dark);
    text-decoration: none;
    border-bottom: 3px solid transparent;
}

.site-nav ul a:hover {
    border-bottom-color: var(--grey-300);
}

.site-nav ul a[aria-current="page"] {
    font-weight: 700;
    border-bottom-color: var(--accent);
}

/* Sub-menus under Our Priorities and Get Involved. On desktop they drop down below the
   link's underline on hover or keyboard focus, styled like the Share pop-up; on phones and
   tablets they open in place, from a button beside the link (below). */
.site-nav .site-nav__sub {
    display: none;
}

/* The button that opens a sub-menu on phones and tablets. site.js adds it; it is not shown
   on desktop, where the sub-menus drop down instead. */
.site-nav__expand {
    display: none;
}

@media (min-width: 1081px) {
    /* The menu and its items run the full height of the header, so a sub-menu can be placed
       a known distance below them: the header's bottom padding plus the three-colour stripe. */
    .site-nav,
    .site-nav > ul {
        align-self: stretch;
    }

    .site-nav > ul > li {
        display: flex;
        align-items: center;
    }

    /* The header's bottom padding (site-header__inner's) and the stripe's height: the sub-menu's
       top is the stripe's foot, not 1.6 px inside it (David, 8 Oct 2026). */
    .site-nav__item--has-sub {
        position: relative;
        --sub-offset: calc(var(--space-4) + 7px);
    }

    /* The sub-menu hangs from the underside of the stripe, so it has no top border or top corners. */
    .site-nav .site-nav__sub {
        display: block;
        position: absolute;
        left: -0.75rem;
        top: calc(100% + var(--sub-offset));
        z-index: 30;
        min-width: 14rem;
        padding: var(--space-2);
        border: 1px solid var(--grey-300);
        border-top: 0;
        border-radius: 0 0 0.5rem 0.5rem;
        background: var(--white);
        box-shadow: var(--shadow);
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.15s ease, visibility 0.15s ease;
    }

    /* An invisible bridge over the gap, so the pointer can travel from the link to the sub-menu. */
    .site-nav .site-nav__sub::before {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 100%;
        height: var(--sub-offset);
    }

    .site-nav__item--has-sub:hover > .site-nav__sub,
    .site-nav__item--has-sub:focus-within > .site-nav__sub {
        opacity: 1;
        visibility: visible;
    }

    /* Escape closes an open sub-menu (site.js) until the pointer or focus moves away. */
    .site-nav .site-nav__item--has-sub.is-dismissed > .site-nav__sub {
        opacity: 0;
        visibility: hidden;
    }

    /* Keep the underline on the main link while its sub-menu is in use. */
    .site-nav__item--has-sub:hover > a:not([aria-current="page"]),
    .site-nav__item--has-sub:focus-within > a:not([aria-current="page"]) {
        border-bottom-color: var(--grey-300);
    }

    /* Override: the Have your say button at the end of the menu, with a sub-menu of its own.
       It runs the menu's full height, as the items do, so its sub-menu hangs from the same
       place, and lines up with the button's right-hand edge so it stays on the page. */
    .site-nav__cta {
        align-self: stretch;
        display: flex;
        align-items: center;
    }

    .site-nav .site-nav__cta > .site-nav__sub {
        left: auto;
        right: 0;
    }

    .site-nav__cta:hover > .btn,
    .site-nav__cta:focus-within > .btn {
        border-color: transparent;
    }

    .site-nav .site-nav__sub a {
        padding: var(--space-2) var(--space-2-5);
        border-bottom: 0;
        border-radius: var(--radius);
        font-weight: 400;
        white-space: nowrap;
    }

    /* The priority number box from the priority cards, a little smaller, before each title. */
    .site-nav .site-nav__sub a:has(.number-badge) {
        display: flex;
        align-items: center;
        gap: var(--space-2-5);
    }

    /* Small white numbers need the darker gold behind them (4.7:1). */
    .site-nav__sub .number-badge {
        flex: none;
        background: var(--accent-text);
        font-size: var(--text-sm);
        padding: var(--space-1-5) var(--space-2);
    }

    .site-nav .site-nav__sub a:hover {
        background: var(--grey-100);
        color: var(--dark-deep);
    }
}

/* Below this width the six links, the button and the brand no longer fit on one line. */
@media (max-width: 1080px) {
    .js .nav-toggle:not([hidden]) {
        display: inline-flex;
    }

    /* The dropped-down menu: solid white, padded, edge to edge of the header. Have your say
       is one of its items here, so it follows straight on from the list. */
    .site-nav {
        flex: 0 0 calc(100% + 2.5rem);
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        margin: var(--space-1) -1.25rem 0;
        padding: var(--space-4) var(--space-5) var(--space-6);
        background: var(--white);
        box-shadow: var(--shadow);
    }

    .js .site-nav {
        display: none;
    }

    .js .site-nav.is-open {
        display: flex;
    }

    .site-nav ul {
        flex-direction: column;
        gap: 0;
    }

    .site-nav ul a {
        padding: var(--space-3) 0;
        border-bottom: 1px solid var(--grey-200);
        font-size: var(--text-body);
    }

    .site-nav ul a[aria-current="page"] {
        border-bottom: 1px solid var(--grey-200);
        box-shadow: inset 4px 0 0 var(--accent);
        padding-left: var(--space-3);
    }

    /* Its gold mark is a shadow too, which would take the place of the focus ring's dark edge (plan 19, step 4.1). */
    .site-nav ul a[aria-current="page"]:focus-visible {
        box-shadow: inset 4px 0 0 var(--accent), 0 0 0 6px var(--dark-deep);
    }

    .site-nav .btn {
        align-self: flex-start;
    }

    /* An item with a sub-menu: its link, the button that opens the sub-menu beside it, and
       the sub-menu under both, with the item's line below the lot (plan 19, step 5.1). */
    .site-nav__item--has-sub {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        border-bottom: 1px solid var(--grey-200);
    }

    .site-nav ul .site-nav__item--has-sub > a {
        flex: 1;
        border-bottom: 0;
    }

    .js .site-nav__expand {
        flex: none;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 2.75rem;
        height: 2.75rem;
        padding: 0;
        border: 0;
        border-radius: var(--radius);
        background: none;
        color: var(--dark);
        cursor: pointer;
    }

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

    /* The chevron points down when the sub-menu is closed, and up when it is open. */
    .site-nav__expand .icon {
        width: 1.4rem;
        height: 1.4rem;
        transform: rotate(90deg);
    }

    .site-nav__expand[aria-expanded="true"] .icon {
        transform: rotate(-90deg);
    }

    /* Open, indented under its item. Without script every sub-menu is open. */
    .js .site-nav .site-nav__expand[aria-expanded="true"] + .site-nav__sub,
    html:not(.js) .site-nav .site-nav__sub {
        display: flex;
        flex-basis: 100%;
        margin: 0 0 var(--space-2);
        padding: 0 0 0 var(--space-4);
        border-left: 3px solid var(--grey-200);
    }

    .site-nav ul.site-nav__sub a {
        display: flex;
        align-items: center;
        gap: var(--space-2-5);
        padding: var(--space-2-5) 0;
        border-bottom: 0;
        font-size: var(--text-md);
    }

    .site-nav ul.site-nav__sub a[aria-current="page"] {
        padding-left: var(--space-3);
    }

    /* Small white numbers need the darker gold behind them (4.7:1). */
    .site-nav__sub .number-badge {
        flex: none;
        background: var(--accent-text);
        font-size: var(--text-xs);
        padding: var(--space-1) var(--space-1-5);
    }

    /* Override: Have your say is the gold button on desktop; on phones and tablets it looks like
       the other items in the menu (David, mock-up sheet 16). */
    .site-nav .site-nav__cta > .btn {
        flex: 1;
        align-self: auto;
        display: block;
        padding: var(--space-3) 0;
        border: 0;
        border-radius: 0;
        background: none;
        color: var(--dark);
        font-size: var(--text-body);
        font-weight: 400;
        line-height: inherit;
    }

    .site-nav .site-nav__cta > .btn:hover {
        background: none;
    }

    .site-nav .site-nav__cta > .btn[aria-current="page"] {
        padding-left: var(--space-3);
        font-weight: 700;
        box-shadow: inset 4px 0 0 var(--accent);
    }

    .site-nav .site-nav__cta > .btn[aria-current="page"]:focus-visible {
        box-shadow: inset 4px 0 0 var(--accent), 0 0 0 6px var(--dark-deep);
    }
}

/* --------------------------------------------------------------------------
   Sections
   -------------------------------------------------------------------------- */

.section {
    padding: var(--space-14) 0;
}

.section--tight {
    padding: var(--space-8) 0;
}

/* A block of words "close to the one above" a block of words sits as near it as the next
   paragraph is to the one before, so they read as one passage (David, 8 Oct 2026): neither
   keeps the section's space between them, and what this one starts with is 1em below what is
   above, as a paragraph is, or a heading's own space, which is more, as in any passage (their
   margins meet). Blocks of words are Text, a Quote, a Table, Contents, Contact details and
   Picture credits (BlockView.IsWords). Beside a band of another shade the space stays, so words
   never touch the band's edge; and a band or cards close to the one above keep the section's
   space. */
.block--words:not(.block--grey, .section--grey):has(+ .block--words.section--tight:not(.section--grey)),
.block--words:is(.block--grey, .section--grey):has(+ .block--words.section--tight.section--grey) {
    padding-bottom: 0;
}

.block--words:not(.block--grey, .section--grey) + .block--words.section--tight:not(.section--grey),
.block--words:is(.block--grey, .section--grey) + .block--words.section--tight.section--grey {
    padding-top: 0;
}

/* A block of words' own box (the Contents', a statement's) and words take no space outside the
   block: its section's padding is its space, or, close to words above, the 1em here. */
.block--words > .container > :first-child {
    margin-top: 0;
}

.block--words > .container > :last-child {
    margin-bottom: 0;
}

/* A Table block's table, in the box it scrolls in, which its margins would not leave. */
.block--words > .container > .table-scroll > .table {
    margin-top: 0;
    margin-bottom: 0;
}

.block--words:not(.block--grey, .section--grey) + .block--words.section--tight:not(.section--grey) > .container > :first-child,
.block--words:is(.block--grey, .section--grey) + .block--words.section--tight.section--grey > .container > :first-child {
    margin-top: 1em;
}

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

.section__head {
    margin-bottom: var(--space-7);
}

.section__head--row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    flex-wrap: wrap;
}

.section__head--row .section__title {
    margin-bottom: 0;
}

.section__title {
    font-size: clamp(1.5rem, 2.8vw, 2rem);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 500;
}

.section__title--large {
    font-size: clamp(1.9rem, 3.6vw, 2.6rem);
}

.section__lead {
    font-size: var(--text-lg);
    color: var(--dark-soft);
    max-width: 48rem;
}

.split {
    display: grid;
    gap: var(--space-10);
    align-items: center;
}

@media (min-width: 860px) {
    .split {
        grid-template-columns: 1.1fr 0.9fr;
    }

    .split--reverse > :first-child {
        order: 2;
    }
}

.split__image {
    aspect-ratio: 4 / 3;
    width: 100%;
    object-fit: cover;
}

.page-head {
    padding: var(--space-12) 0 0;
    background: var(--white);
}

.page-head__title {
    font-size: clamp(2rem, 4.5vw, 2.8rem);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 500;
    margin-bottom: var(--space-1);
    /* A 1px white halo lifts the title off the skyline. The stroke is centred on the outline,
       so 2px painted behind the fill leaves exactly 1px visible outside the letters. */
    -webkit-text-stroke: 2px var(--white);
    paint-order: stroke fill;
}

.page-head__lead {
    font-size: var(--text-xl);
    color: var(--dark-soft);
    margin: 0;
}

/* Sentence-case page title, matching the Get Involved heading */
/* The large bold title shared by the Get Involved hero, the plan page and the idea form box. */
.page-title {
    font-size: clamp(2rem, 4.5vw, 3rem);
    font-weight: 700;
    margin-bottom: var(--space-3);
}

/* On a dark grey background */
.page-title--light {
    color: var(--white);
}

/* Skyline background: add .skyline-bg to any container. The skyline fills the container's height,
   repeats across its width and sits behind the content. The drawing is used as a mask over the
   element's `color`, so set `color` on the container to colour it. */
.skyline-bg {
    position: relative;
}

.skyline-bg::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background-color: currentColor;
    -webkit-mask-image: var(--skyline);
    -webkit-mask-repeat: repeat-x;
    -webkit-mask-position: left bottom;
    -webkit-mask-size: auto 100%;
    mask-image: var(--skyline);
    mask-repeat: repeat-x;
    mask-position: left bottom;
    mask-size: auto 100%;
    pointer-events: none;
}

.skyline-bg > * {
    position: relative;
    z-index: 1;
}

/* The strip above the footer */
.skyline-strip {
    height: 10rem;
    max-height: 10rem;
    margin-top: var(--space-8);
    color: var(--dark);
}

/* Override: a page that ends in a full-width grey band carries the grey on down to the footer,
   behind the skyline, with no white gap (plan 19, step 9.16). The band is .section--grey on the
   website's pages or .block--grey in Have your say's pages of blocks, and it ends the page when
   it is the last thing in <main>, or in an <article> that is, leaving out the "Share this page"
   row and button and what is never shown. In a page shorter than the window the band takes the
   room left; on a phone the share row under it sits on the grey too; and the skyline's strip has
   the grey for its ground, with the gap above it inside the strip. A page that ends any other
   way is as it was, and on paper there is no skyline to go behind. */
@media screen {
    main:has(> :nth-last-child(1 of :not(.share, .share-float, script, template, dialog, [hidden])):is(.section--grey, .block--grey),
             > article:nth-last-child(1 of :not(.share, .share-float, script, template, dialog, [hidden])) > :nth-last-child(1 of :not(script, template, dialog, [hidden])):is(.section--grey, .block--grey)),
    main > article:nth-last-child(1 of :not(.share, .share-float, script, template, dialog, [hidden])):has(> :nth-last-child(1 of :not(script, template, dialog, [hidden])):is(.section--grey, .block--grey)) {
        display: flex;
        flex-direction: column;
    }

    main > :nth-last-child(1 of :not(.share, .share-float, script, template, dialog, [hidden])):is(.section--grey, .block--grey),
    main > article:nth-last-child(1 of :not(.share, .share-float, script, template, dialog, [hidden])):has(> :nth-last-child(1 of :not(script, template, dialog, [hidden])):is(.section--grey, .block--grey)),
    main > article > :nth-last-child(1 of :not(script, template, dialog, [hidden])):is(.section--grey, .block--grey) {
        flex-grow: 1;
    }

    main > :nth-last-child(1 of :not(.share, .share-float, script, template, dialog, [hidden])):is(.section--grey, .block--grey) ~ .share,
    main > article:nth-last-child(1 of :not(.share, .share-float, script, template, dialog, [hidden])):has(> :nth-last-child(1 of :not(script, template, dialog, [hidden])):is(.section--grey, .block--grey)) ~ .share {
        background: var(--grey-100);
    }

    main:has(> :nth-last-child(1 of :not(.share, .share-float, script, template, dialog, [hidden])):is(.section--grey, .block--grey),
             > article:nth-last-child(1 of :not(.share, .share-float, script, template, dialog, [hidden])) > :nth-last-child(1 of :not(script, template, dialog, [hidden])):is(.section--grey, .block--grey)) ~ .skyline-strip {
        height: 12rem;
        max-height: 12rem;
        margin-top: 0;
        padding-top: var(--space-8);
        background: var(--grey-100);
    }

    main:has(> :nth-last-child(1 of :not(.share, .share-float, script, template, dialog, [hidden])):is(.section--grey, .block--grey),
             > article:nth-last-child(1 of :not(.share, .share-float, script, template, dialog, [hidden])) > :nth-last-child(1 of :not(script, template, dialog, [hidden])):is(.section--grey, .block--grey)) ~ .skyline-strip::before {
        top: 2rem;
    }
}

/* Override: a page that ends in a full-width photo, such as a survey's start screen or one of
   the public's forms, carries the photo on down behind the footer's wave, with no white gap,
   the box in the middle of it (plan 19, step 9.19, sheet 20b). The photo is cropped, never
   stretched (its object-fit, from the centre). Over it the skyline's buildings are left off and
   its wave alone is drawn (skyline-wave.svg), on every such page, the space to fill or not. A
   page that ends any other way is as it was, and on paper there is no skyline. */
@media screen {
    main:has(> .photo-hero:nth-last-child(1 of :not(.share, .share-float, script, template, dialog, [hidden]))) {
        display: flex;
        flex-direction: column;
    }

    main > .photo-hero:nth-last-child(1 of :not(.share, .share-float, script, template, dialog, [hidden])) {
        flex-grow: 1;
        display: flex;
        align-items: center;
        padding-bottom: 18rem;
    }

    main > .photo-hero:nth-last-child(1 of :not(.share, .share-float, script, template, dialog, [hidden])).photo-hero--compact {
        padding-bottom: calc(clamp(1.5rem, 5vw, 3.5rem) + 12rem);
    }

    main > .photo-hero:nth-last-child(1 of :not(.share, .share-float, script, template, dialog, [hidden])) > .container {
        width: 100%;
    }

    main:has(> .photo-hero:nth-last-child(1 of :not(.share, .share-float, script, template, dialog, [hidden]))) ~ .skyline-strip {
        position: relative;
        z-index: 1;
        height: 12rem;
        max-height: 12rem;
        margin-top: -12rem;
        padding-top: 2rem;
    }

    main:has(> .photo-hero:nth-last-child(1 of :not(.share, .share-float, script, template, dialog, [hidden]))) ~ .skyline-strip::before {
        top: 2rem;
        -webkit-mask-image: var(--skyline-wave);
        mask-image: var(--skyline-wave);
    }
}

/* --------------------------------------------------------------------------
   Home hero: the photo behind the header, with the text block just below it
   -------------------------------------------------------------------------- */

.hero {
    position: relative;
    overflow: hidden;
}

.hero__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.8;
}

.hero__content {
    position: relative;
    padding-bottom: var(--space-10);
}

/* The text block: 90% white, fading to nothing along its right edge and bottom. */
.hero__panel {
    position: relative;
    isolation: isolate;
    max-width: 50rem;
    padding: var(--space-7) 9rem 3.7rem var(--space-8);
}

.hero__panel::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: rgb(255 255 255 / 0.9);
    -webkit-mask-image: linear-gradient(90deg, #000 75%, transparent 100%), linear-gradient(180deg, #000 85%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(90deg, #000 75%, transparent 100%), linear-gradient(180deg, #000 85%, transparent 100%);
    mask-composite: intersect;
}

@media (max-width: 760px) {
    .hero__panel {
        padding-right: var(--space-8);
    }
}

.hero__title {
    font-size: clamp(2.2rem, 4.4vw, 3.3rem);
    font-weight: 700;
    color: var(--dark);
}

.hero__text {
    font-size: var(--text-xl);
    margin-bottom: var(--space-6);
    max-width: 34rem;
}

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

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

.action-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    height: 100%;
    padding: var(--space-6);
    text-decoration: none;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    transition: transform 0.15s ease;
}

.action-card:hover {
    transform: translateY(-2px);
}

/* The card's own shadow would take the place of the focus ring's dark edge: both, so the ring
   shows on every colour of card and over the photo behind them (plan 19, step 4.1). */
.action-card:focus-visible {
    box-shadow: 0 0 0 6px var(--dark-deep), var(--shadow);
}

.action-card__icon {
    width: 2.6rem;
    height: 2.6rem;
}

.action-card__title {
    font-size: var(--text-xl);
    font-weight: 700;
    line-height: 1.25;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
}

.action-card__text {
    font-size: var(--text-md);
}

/* A card with nowhere to lead is no link (the 9 October review's X27): its title is not underlined,
   and it does not lift under the pointer. */
div.action-card:hover {
    transform: none;
}

div.action-card .action-card__title {
    text-decoration: none;
}

.action-card--dark {
    background: color-mix(in srgb, var(--dark) 95%, transparent);
    color: var(--white);
}

.action-card--yellow {
    background: color-mix(in srgb, var(--highlight) 95%, transparent);
    color: var(--dark-deep);
}

.action-card--steel {
    background: color-mix(in srgb, var(--tint) 95%, transparent);
    color: var(--dark-deep);
}

/* Every colour the builder offers a Hero's card has its style (the 9 October review's X1): grey
   was dark words on the photo. */
.action-card--grey {
    background: color-mix(in srgb, var(--grey-100) 95%, transparent);
    color: var(--dark-deep);
}

/* Any other of the colours its theme offers (David, 11 Oct 2026; bg-…, words-…), letting a little
   of the photo through as the four above do. */
.action-card--colour {
    background-color: color-mix(in srgb, var(--block-bg) 95%, transparent);
}

/* --------------------------------------------------------------------------
   Priority cards (photo on top, alternating pale and dark bodies as in the plan)
   -------------------------------------------------------------------------- */

.priority-cards {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--space-4);
    grid-template-columns: repeat(auto-fit, minmax(12.5rem, 1fr));
}

/* A List block's cards in the site's carousel (David, 9 Oct 2026): on a wide screen the carousel's
   columns, three at a time, in place of the cards' own grid. */
@media (min-width: 900px) {
    .priority-cards--carousel {
        grid-template-columns: none;
    }
}

/* A List block's numbered list of links, each at its item's own number. */
.list-links {
    margin: 0;
    padding-left: var(--space-6);
}

.list-links li {
    margin-bottom: var(--space-2);
}

.priority-card__link {
    display: flex;
    flex-direction: column;
    height: 100%;
    border-radius: var(--radius);
    overflow: hidden;
    text-decoration: none;
    color: var(--dark);
    transition: box-shadow 0.15s ease;
}

.priority-card__link:hover {
    box-shadow: var(--shadow);
}

/* A card with nowhere to lead is no link, and has no arrow (X27): it takes no shadow under the pointer. */
div.priority-card__link:hover {
    box-shadow: none;
}

/* Its picture cut to the box, so a tall one keeps the card's shape (David, 9 Oct 2026: a page's own picture in a List block may be). */
.priority-card__media {
    position: relative;
    display: block;
    aspect-ratio: 4 / 3;
    overflow: hidden;
}

.priority-card__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.priority-card__number,
.number-badge {
    display: inline-block;
    background: var(--accent);
    color: var(--white);
    font-weight: 700;
    font-size: var(--text-3xl);
    line-height: 1;
    padding: var(--space-2) var(--space-2-5);
}

.priority-card__number {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

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

.priority-card:nth-child(even) .priority-card__body {
    background: var(--dark);
    color: var(--white);
}

.priority-card:nth-child(even) .priority-card__title {
    color: var(--white);
}

.priority-card__title {
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    line-height: 1.35;
    padding-bottom: var(--space-2);
    border-bottom: 2px solid currentColor; /* white on the dark cards, ink on the pale ones */
}

.priority-card__text {
    font-size: var(--text-sm);
    flex: 1;
}

.priority-card__go {
    display: inline-grid;
    place-items: center;
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 50%;
    background: var(--accent);
    color: var(--white);
    transition: transform 0.15s ease, background-color 0.15s ease;
}

/* Hover and keyboard focus nudge the arrow along and darken it, like the gold buttons. */
.priority-card__link:hover .priority-card__go,
.priority-card__link:focus-visible .priority-card__go {
    transform: translateX(0.35rem);
    background: var(--accent-deep);
}

/* --------------------------------------------------------------------------
   People (David, 11 Oct 2026): a card for each person of a list, their photo or
   their initials, their name, their role over a gold line as a priority card's
   title has one, and how to contact them, with the contact details' icons.
   Three side by side on a wide screen, or two or four; one under another on a phone.
   -------------------------------------------------------------------------- */

.people-cards {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--space-6);
    grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 560px) {
    .people-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

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

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

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

/* White, with a fine line round it, so it reads on the grey band too. */
.person-card {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--grey-200);
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--white);
    color: var(--dark);
}

.person-card__photo {
    display: block;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: var(--tint);
}

/* A portrait cut to the square, keeping the top, where faces are. */
.person-card__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 20%;
    display: block;
}

.person-card__initials {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    font-size: var(--text-5xl);
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--dark);
}

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

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

.person-card__name a {
    color: inherit;
}

.person-card__role {
    margin: 0;
    padding-bottom: var(--space-2);
    border-bottom: 2px solid var(--accent);
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    line-height: 1.35;
    color: var(--dark-soft);
}

.person-card__contacts {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: var(--text-sm);
}

.person-card__contacts li {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    margin-bottom: var(--space-1);
}

/* A long email address breaks onto a second line, in place of widening the card. */
.person-card__contacts a {
    min-width: 0;
    overflow-wrap: anywhere;
}

.person-card__contacts .icon {
    flex: none;
    margin-top: var(--space-1);
    color: var(--accent-text);
}

.person-card__words {
    font-size: var(--text-sm);
}

.person-card__words > :last-child {
    margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   Priority pages
   -------------------------------------------------------------------------- */

.priority-head {
    padding-bottom: var(--space-6);
}

.priority-head__title-row {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
    margin-bottom: var(--space-4);
}

.number-badge {
    font-size: var(--text-5xl);
    padding: var(--space-2) var(--space-3);
}

.priority-head__title {
    font-size: clamp(1.7rem, 3.4vw, 2.4rem);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 500;
    margin: 0;
}

.priority-head__intro p {
    font-size: var(--text-body);
}

.priority-head__intro .lead {
    color: var(--accent-text);
}

.priority-head__media {
    aspect-ratio: 4 / 3;
}

/* Key objectives panel, as in the plan */
.objectives {
    padding: var(--space-8);
    background: var(--grey-100);
}

/* Override: in a grey stripe the width of the page (section--grey), the panel needs no ground or edge of its own (plan 19, step 9.14). */
.objectives--in-stripe {
    padding: 0;
    background: none;
}

/* Two flowing columns (not a grid), so a long objective never stretches the row beside it. */
.objectives__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

@media (min-width: 760px) {
    .objectives__list {
        column-count: 2;
        column-gap: var(--space-10);
    }
}

.objectives__list li {
    position: relative;
    padding-left: var(--space-6);
    margin-bottom: var(--space-3);
    break-inside: avoid;
}

.objectives__list li:last-child {
    margin-bottom: 0;
}

.objectives__list li::before {
    content: ">";
    position: absolute;
    left: 0;
    top: 0;
    font-weight: 700;
    color: var(--accent-text);
}

/* Further text wraps under and to the right of the second photo on wide screens. */
.more {
    display: flow-root;
}

.more__image {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    margin-bottom: var(--space-6);
}

@media (min-width: 860px) {
    .more__image {
        float: left;
        width: 46%;
        margin: var(--space-1) var(--space-9) var(--space-4) 0;
    }

    .more__image--right {
        float: right;
        margin: var(--space-1) 0 var(--space-4) var(--space-9);
    }
}

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

.whatif {
    display: grid;
    overflow: hidden;
    background: var(--tint);
}

@media (min-width: 860px) {
    .whatif {
        grid-template-columns: 1.1fr 0.9fr;
    }
}

.whatif__body {
    padding: var(--space-8);
}

.whatif__kicker {
    display: inline-block;
    padding: var(--space-1) var(--space-2-5);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    background: var(--accent-text);
    color: var(--white);
}

.whatif__title {
    font-size: clamp(1.4rem, 2.8vw, 1.9rem);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 500;
}

.whatif__ask {
    margin: var(--space-5) 0 0;
    padding: var(--space-3) var(--space-4);
    font-size: var(--text-sm);
    background: var(--white);
    border-left: 4px solid var(--accent);
}

.whatif__ask strong {
    display: block;
    font-size: var(--text-body);
    margin-bottom: var(--space-1);
}

.whatif__ask a {
    font-weight: 700;
}

.whatif__image {
    min-height: 16rem;
    height: 100%;
    object-fit: cover;
    display: block;
    width: 100%;
}

.cta-band {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-5);
    padding: var(--space-6);
    background: var(--grey-100);
    border-left: 6px solid var(--accent);
}

.cta-band__icon {
    width: 3rem;
    height: 3rem;
    color: var(--dark);
}

.cta-band__text {
    flex: 1 1 18rem;
}

.cta-band__text p {
    margin: 0;
    color: var(--dark-soft);
}

.cta-band__text p + p {
    margin-top: var(--space-3);
}

/* A band used as a note under a form, with no actions */
.cta-band--note {
    align-items: flex-start;
}

.cta-band__title {
    font-size: var(--text-2xl);
    margin-bottom: var(--space-1);
}

.cta-band__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
}

/* Previous / all / next links at the foot of each priority page: three boxes across the
   page, all as tall as the tallest, light grey at each side and white in the middle. */
.pager {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: var(--space-4);
    align-items: stretch;
}

.pager__link {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--space-1);
    padding: var(--space-4) var(--space-6);
    background: var(--grey-100);
    text-decoration: none;
}

.pager__link:hover .pager__title {
    text-decoration: underline;
}

.pager__link--next {
    text-align: right;
    align-items: flex-end;
}

/* --ink-soft, as gold small text on the grey of the link was short of 4.5:1 (plan 19, step 4.1). */
.pager__label {
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--dark-soft);
}

.pager__title {
    font-weight: 700;
}

.pager__all {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-4) var(--space-6);
    background: var(--white);
    font-weight: 700;
    text-align: center;
}

@media (max-width: 600px) {
    .pager {
        grid-template-columns: 1fr;
    }

    .pager__link--next {
        text-align: left;
        align-items: flex-start;
    }
}

/* --------------------------------------------------------------------------
   Panels and the carousel (vision page)
   -------------------------------------------------------------------------- */

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

/* Panels side by side (a Panels block's grid): as many to a row as fit, each at least 18rem wide. */
.panels--grid {
    grid-template-columns: repeat(auto-fill, minmax(min(18rem, 100%), 1fr));
}

/* Four of them lie two and two, then four in a row, never three and one: the ideas page's "What
   happens to ideas", as the old page's points were (David, 9 Oct 2026). */
@media (min-width: 640px) {
    .panels--grid:has(> .panel:nth-child(4):last-child) {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1081px) {
    .panels--grid:has(> .panel:nth-child(4):last-child) {
        grid-template-columns: repeat(4, 1fr);
    }
}

.panel {
    padding: var(--space-6);
    background: var(--white);
    border-top: 5px solid var(--accent);
}

.panel:nth-child(even) {
    background: var(--dark);
    color: var(--white);
}

.panel:nth-child(even) .panel__title {
    color: var(--white);
}

.panel__title {
    font-size: var(--text-md);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 700;
    margin-bottom: var(--space-3);
}

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

/* Panels that lead somewhere, such as the latest projects and ideas on Get Involved: the
   title is the link, and on a dark panel the links and the kicker read light. */
.panel__title a {
    color: inherit;
}

.panel:nth-child(even) .kicker {
    color: var(--highlight);
}

.panel:nth-child(even) a {
    color: var(--white);
}

/* What a panel's words can hold besides paragraphs (SimpleMarkup's page marks), read on the dark
   panel too (the 9 October review's X11): a sub-heading and a lead white, as its words are; a
   notice keeps its dark words, and dark links, on its pale box. */
.panel:nth-child(even) h2,
.panel:nth-child(even) h3,
.panel:nth-child(even) h4,
.panel:nth-child(even) h5,
.panel:nth-child(even) h6,
.panel:nth-child(even) .lead {
    color: var(--white);
}

.panel:nth-child(even) .notice,
.panel:nth-child(even) .notice a {
    color: var(--dark);
}

.carousel__controls {
    display: none;
    gap: var(--space-2);
}

.carousel__btn {
    display: inline-grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    font-size: var(--text-xl);
    color: var(--white);
    background: var(--dark);
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    transition: transform 0.15s ease, background-color 0.15s ease;
}

.carousel__btn:hover:not([aria-disabled="true"]),
.carousel__btn:focus-visible:not([aria-disabled="true"]) {
    background: var(--dark-deep);
}

/* Each button nudges in the direction it scrolls. */
.carousel__btn--prev:hover:not([aria-disabled="true"]),
.carousel__btn--prev:focus-visible:not([aria-disabled="true"]) {
    transform: translateX(-0.25rem);
}

.carousel__btn--next:hover:not([aria-disabled="true"]),
.carousel__btn--next:focus-visible:not([aria-disabled="true"]) {
    transform: translateX(0.25rem);
}

/* At the end there is no more that way: it says so (aria-disabled, which keeps its place for the keyboard). */
.carousel__btn[aria-disabled="true"] {
    background: var(--grey-300);
    cursor: default;
}

/* Wide screens: three panels visible, scroll or page through the rest. */
@media (min-width: 900px) {
    .carousel__controls {
        display: flex;
    }

    .carousel__track {
        grid-auto-flow: column;
        grid-auto-columns: calc((100% - 2rem) / 3);
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        padding-bottom: var(--space-1);

        /* The track reaches 35px past the gap on each side, so when there is another panel
           to scroll to, its edge shows there, fading out to nothing. The track reaches out
           as far as the space beside the page allows (never past the edge of the window);
           where that is less than the full amount, the panels sit a little inside it. */
        --peek: calc(1rem + 35px);
        --fade-start: 35px;
        --fade-end: 35px;
        margin-inline: calc(-1 * min(var(--peek), max(1.25rem, (100vw - var(--max)) / 2 + 0.625rem)));
        padding-inline: var(--peek);
        scroll-padding-inline: var(--peek);
        -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--fade-start), #000 calc(100% - var(--fade-end)), transparent);
        mask-image: linear-gradient(to right, transparent, #000 var(--fade-start), #000 calc(100% - var(--fade-end)), transparent);
    }

    /* A side fades only while there is more to scroll to on it: site.js marks a track that is
       at its start or its end. Without the script both sides fade, as the track may scroll either way. */
    .carousel__track[data-at-start] {
        --fade-start: 0px;
    }

    .carousel__track[data-at-end] {
        --fade-end: 0px;
    }

    .carousel__track::-webkit-scrollbar {
        display: none;
    }

    /* The fade above is a mask, and a mask hides everything drawn outside the track's box,
       the focus ring included. So while the track has keyboard focus, the ring is drawn round
       the carousel that holds it, which has no mask (plan 20, step 1.5). */
    .carousel__track:focus-visible {
        outline: none;
        box-shadow: none;
    }

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

    .carousel__item {
        scroll-snap-align: start;
    }
}

.vision-quote {
    margin: 0 0 var(--space-6);
    padding: var(--space-5) var(--space-6);
    border-left: 6px solid var(--accent);
    background: var(--grey-100);
    font-size: var(--text-xl);
    font-weight: 600;
    color: var(--dark);
}

.vision-quote p {
    margin: 0;
}

/* --------------------------------------------------------------------------
   Get involved: dark panel and photo run the full height, cards sit over them
   -------------------------------------------------------------------------- */

.involved-hero {
    position: relative;
    display: grid;
    background: var(--dark);
    color: var(--white);
}

/* Wide screens: the outer columns are the page margins, so the text and the cards line up
   with the site container while the photo runs to the right edge of the screen. */
@media (min-width: 900px) {
    .involved-hero {
        grid-template-columns:
            minmax(1.25rem, 1fr)
            minmax(0, calc((var(--max) - 2.5rem) / 2))
            minmax(0, calc((var(--max) - 2.5rem) / 2))
            minmax(1.25rem, 1fr);
        grid-template-rows: auto auto;
    }

    .involved-hero .involved-hero__text {
        grid-column: 2;
        grid-row: 1;
        padding: var(--space-12) var(--space-8) var(--space-8) 0;
    }

    .involved-hero__media {
        grid-column: 3 / 5;
        grid-row: 1 / span 2;
    }

    .involved-hero .involved-hero__cards {
        grid-column: 2 / 4;
        grid-row: 2;
        padding: var(--space-4) 0 var(--space-12);
    }
}

.involved-hero__text {
    padding: var(--space-12) var(--space-5) var(--space-8);
    align-self: center;
}

.involved-hero__text .kicker {
    color: var(--white);
}

/* Its links, "A link under the words" and any typed in its words, white as its words are, their
   arrow with them (the 9 October review's X2): the site's dark links were lost on the dark panel. */
.involved-hero__text a {
    color: var(--white);
}

.involved-hero__media {
    position: relative;
    min-height: 20rem;
}

.involved-hero__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.involved-hero__cards {
    position: relative;
    z-index: 1;
    padding: var(--space-4) var(--space-5) var(--space-12);
}

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

/* Side by side, the two cards butt up against each other. */
@media (min-width: 860px) {
    .choice-cards {
        grid-template-columns: 1fr 1fr;
        gap: 0;
    }
}

.choice-card {
    display: flex;
    gap: var(--space-5);
    padding: var(--space-7);
    color: var(--dark);
    box-shadow: var(--shadow);
    scroll-margin-top: 1rem;
    border-top: 6px solid var(--accent);
}

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

.choice-card--steel {
    background: var(--tint);
}

/* The highlight's yellow (the 9 October review's X1: it had no style, so dark words sat on the
   dark panel). Its button is dark, as the site's yellow one would not show on it. */
.choice-card--yellow {
    background: var(--highlight);
}

.choice-card--yellow .btn--primary {
    background: var(--dark);
    color: var(--white);
}

.choice-card--yellow .btn--primary:hover {
    background: var(--dark-deep);
}

/* A choice card in another of the colours its theme offers (David, 11 Oct 2026; bg-…), with white
   words if the theme says so: its title, icon and smaller link with them. */
.choice-card.words-light,
.choice-card.words-light .choice-card__title,
.choice-card.words-light .choice-card__icon,
.choice-card.words-light .small a {
    color: var(--white);
}

.choice-card__icon {
    width: 3rem;
    height: 3rem;
    color: var(--dark);
}

.choice-card__title {
    font-size: var(--text-xl);
}

/* A link on a line of its own under a card's button: far enough from the button to be
   pressed on its own, at least 24px clear (target size, plan 19, step 4.3). */
.choice-card .btn + .small {
    margin-top: var(--space-3);
}

.steps {
    padding-left: var(--space-5);
}

.steps li {
    margin-bottom: var(--space-2-5);
}

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

.contact-list li {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    margin-bottom: var(--space-2-5);
}

/* A long email address breaks onto a second line on a narrow phone, in place of widening the page. */
.contact-list li > span {
    min-width: 0;
    overflow-wrap: anywhere;
}

.contact-list .icon {
    margin-top: var(--space-1);
    color: var(--accent-text);
}

/* --------------------------------------------------------------------------
   Idea form
   -------------------------------------------------------------------------- */

/* Under the idea form: four boxes saying what happens to an idea. */
.idea-section .section__lead {
    max-width: none;
}

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

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

@media (min-width: 1081px) {
    .idea-points {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* The boxes alternate like the panels in the "Why a Strategic Plan?" carousel: white with a gold
   top edge, then dark grey with white text. They sit on a light grey section. */
.idea-point {
    padding: var(--space-6) var(--space-5);
    background: var(--white);
    border-top: 5px solid var(--accent);
}

.idea-point:nth-child(even) {
    background: var(--dark);
    color: var(--white);
}

.idea-point__icon {
    width: 2.4rem;
    height: 2.4rem;
    margin-bottom: var(--space-2-5);
}

.idea-point__title {
    font-size: var(--text-lg);
    font-weight: 700;
    margin-bottom: var(--space-1-5);
    color: inherit;
}

.idea-point p {
    margin: 0;
}

/* The page heading and the form, in a dark grey box with white text that floats over the hero photo. */
.idea-box {
    position: relative;
    padding: var(--space-7) var(--space-5) var(--space-8);
    border-radius: var(--radius);
    background: color-mix(in srgb, var(--dark) 96%, transparent);
    color: var(--white);
    box-shadow: var(--shadow);
}

/* The error summary sits inside the dark box, so it needs a white background of its own. */
.idea-box .error-summary {
    background: var(--white);
    color: var(--dark);
}

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

.idea-box .section__lead {
    color: var(--white);
}

.idea-box .field__hint,
.idea-box .field__count {
    color: var(--grey-200);
}

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

/* The usual error red is too dark to read on dark grey, so errors here use a pale red. */
.idea-box .field__error,
.idea-box .field__count--over {
    color: var(--error-on-dark);
}

.idea-box .field__input.input-validation-error {
    border-color: var(--error-on-dark);
}

.idea-box :focus-visible {
    box-shadow: none;
}

/* ...except in its error summary, which is white: there the gold ring needs its dark edge
   (plan 20, step 1.6). */
.idea-box .error-summary :focus-visible {
    box-shadow: 0 0 0 6px var(--dark-deep);
}

/* ...and in a notice, on its pale ground, such as an editor's on a survey's start screen
   (review 9 Oct, X18). */
.idea-box .notice :focus-visible {
    box-shadow: 0 0 0 6px var(--dark-deep);
}

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

.field__label {
    font-weight: 700;
}

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

.field__input {
    width: 100%;
    padding: var(--space-3) var(--space-3);
    font: inherit;
    color: var(--dark);
    background: var(--white);
    border: 2px solid var(--dark-soft);
    border-radius: var(--radius);
}

.field__input:focus-visible {
    border-color: var(--dark);
}

.field__input.input-validation-error {
    border-color: var(--error);
}

textarea.field__input {
    resize: vertical;
    min-height: 12rem;
}

.field__error {
    font-weight: 700;
    color: var(--error);
}

.field__error:empty {
    display: none;
}

/* Live count of characters remaining, added under the idea box by site.js */
.field__count {
    margin: 0;
    font-size: var(--text-sm);
    color: var(--dark-soft);
}

.field__count--over {
    font-weight: 700;
    color: var(--error);
}

/* Error summary at the top of the page; site.js moves focus here after a failed submission. */
.error-summary {
    margin-bottom: var(--space-8);
    padding: var(--space-4) var(--space-5);
    border: 4px solid var(--error);
}

.error-summary__title {
    font-size: var(--text-2xl);
    margin-bottom: var(--space-2);
}

.error-summary ul {
    list-style: none;
    margin: 0;
    padding: 0;
    font-weight: 700;
    color: var(--error);
}

.error-summary li + li {
    margin-top: var(--space-1);
}

.error-summary a {
    color: var(--error);
}

/* A table too wide for a narrow screen scrolls sideways inside its own box, and the page does
   not. The box is the reference for anything in the table placed out of sight for screen
   readers (a caption, the name on a button), so that those scroll with the table too: left to
   the page, they would make the page as wide as the table. Have your say's tables use it too. */
.table-scroll {
    position: relative;
    overflow-x: auto;
}

/* Spam trap field: moved off-screen rather than display:none so bots still see it. */
.hp {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.confirmation {
    display: flex;
    align-items: center;
    gap: var(--space-4);
}

.confirmation__icon {
    width: 3rem;
    height: 3rem;
    color: var(--accent-text);
}

.confirmation .section__title {
    margin: 0;
}

/* --------------------------------------------------------------------------
   Draft plan
   -------------------------------------------------------------------------- */

/* A full-width photo with a box floating over it: the plan page and the idea form. */
.photo-hero {
    position: relative;
    padding: 6rem 0;
    overflow: hidden;
}

/* Less space above and below, for a tall box such as the idea form */
.photo-hero--compact {
    padding: clamp(1.5rem, 5vw, 3.5rem) 0;
}

/* Override: the box starts at the very top of the hero, with no gap above it, and so has
   square top corners. */
.photo-hero--flush-top {
    padding-top: 0;
}

.photo-hero--flush-top .idea-box,
.photo-hero--flush-top .plan-card {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.photo-hero__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.plan-card {
    position: relative;
    display: grid;
    gap: var(--space-10);
    padding: var(--space-8);
    background: rgb(255 255 255 / 0.96);
    box-shadow: var(--shadow);
}

@media (min-width: 760px) {
    .plan-card {
        grid-template-columns: 16rem 1fr;
        gap: var(--space-14);
        align-items: center;
    }
}

/* Give the card's text, button and link room to breathe */
.plan-card__body .section__title,
.plan-card__body .page-title {
    margin-bottom: var(--space-4);
}

.plan-card__body p {
    margin-bottom: var(--space-6);
}

.plan-card__body .btn {
    margin-bottom: var(--space-6);
}

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

/* The document's front cover, a picture of its first page (A4, portrait), laid down at a slant */
.plan-cover {
    display: block;
    width: 16rem;
    aspect-ratio: 210 / 297;
    background: var(--white);
    box-shadow: var(--shadow);
    transform: rotate(-3deg);
    overflow: hidden;
}

.plan-cover__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* --------------------------------------------------------------------------
   Long-form text (accessible plan, policies)
   -------------------------------------------------------------------------- */

.prose {
    max-width: 50rem;
}

.prose h2 {
    font-size: var(--text-3xl);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 500;
    margin-top: var(--space-10);
}

.prose h3 {
    font-size: var(--text-lg);
    margin-top: var(--space-6);
}

.prose section {
    scroll-margin-top: 1rem;
}

/* Simple data table (the cookie table on the privacy page) */
.table {
    width: 100%;
    margin: var(--space-6) 0;
    border-collapse: collapse;
    text-align: left;
}

.table th,
.table td {
    padding: var(--space-3) var(--space-4) var(--space-3) 0;
    border-bottom: 1px solid var(--grey-300);
    vertical-align: top;
}

.table thead th {
    border-bottom: 2px solid var(--dark);
}

.table tbody th {
    font-weight: 400;
    white-space: nowrap;
}

.toc {
    margin: var(--space-8) 0;
    padding: var(--space-5) var(--space-6);
    background: var(--grey-100);
}

.toc h2 {
    margin-top: 0;
    font-size: var(--text-lg);
}

.toc ol {
    margin: 0;
    padding-left: var(--space-5);
}

.credits {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--space-4);
    grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
}

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

.credits img {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
}

.credits__text {
    display: block;
    padding: var(--space-2-5) var(--space-3);
    font-size: var(--text-xs);
}

/* --------------------------------------------------------------------------
   Share links (the <vc:share-links /> component at the foot of the main pages)
   -------------------------------------------------------------------------- */

.share {
    padding: var(--space-8) 0 0;
}

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

.share__title {
    margin: 0;
    font-size: var(--text-body);
    font-weight: 700;
}

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

.share__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--dark);
    color: var(--white);
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.share__link:hover {
    background: var(--dark-deep);
}

.share__link .icon {
    width: 1.3rem;
    height: 1.3rem;
}

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

.share__status:empty {
    display: none;
}

/* In the footer: no label, and the colours swapped to a white circle with a dark grey logo. */
.share--footer {
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-3) var(--space-4);
}

.share--footer .share__list li {
    margin: 0;
}

.share--footer .share__link {
    background: var(--white);
    color: var(--dark);
}

.share--footer .share__link:hover {
    background: var(--grey-300);
    color: var(--dark-deep);
}

.share--footer .share__status {
    order: -1;
    color: var(--white);
}

/* The service's name is for screen readers in the row and the footer; the pop-up shows it. */
.share__name {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* Desktop only: a "Share" button floating just off the bottom left corner of the window, which
   opens a pop-up of the share options. site.js tucks it away while the footer's copyright line
   (with its own share buttons) is on screen. Phones and tablets get the row instead. */
.share-float {
    display: none;
}

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

    .share-float {
        display: block;
        position: fixed;
        left: 1rem;
        bottom: 1rem;
        z-index: 20;
        transition: opacity 0.15s ease, visibility 0.15s ease;
    }

    .share-float.is-tucked {
        opacity: 0;
        visibility: hidden;
    }

    .share-float__button {
        display: inline-flex;
        align-items: center;
        gap: var(--space-2);
        padding: var(--space-2-5) var(--space-4);
        border: 2px solid var(--white);
        border-radius: var(--radius);
        background: var(--dark);
        color: var(--white);
        font-weight: 700;
        line-height: 1.2;
        cursor: pointer;
        list-style: none;
        box-shadow: var(--shadow);
        transition: background-color 0.15s ease;
    }

    .share-float__button::-webkit-details-marker {
        display: none;
    }

    .share-float__button:hover,
    .share-float[open] .share-float__button {
        background: var(--dark-deep);
    }

    /* Its own shadow would take the place of the focus ring's dark edge (plan 19, step 4.1). */
    .share-float__button:focus-visible {
        box-shadow: 0 0 0 6px var(--dark-deep), var(--shadow);
    }

    /* The pop-up sits above the button, with a small pointer down to it. */
    .share-float__panel {
        position: absolute;
        left: 0;
        bottom: calc(100% + 0.8rem);
        width: 17rem;
        padding: var(--space-3);
        border: 1px solid var(--grey-300);
        border-radius: 0.5rem;
        background: var(--white);
        box-shadow: var(--shadow);
    }

    .share-float__panel::after {
        content: "";
        position: absolute;
        left: 1.6rem;
        top: 100%;
        width: 0.8rem;
        height: 0.8rem;
        margin-top: -0.4rem;
        border-right: 1px solid var(--grey-300);
        border-bottom: 1px solid var(--grey-300);
        background: var(--white);
        transform: rotate(45deg);
    }

    .share-float__image {
        display: block;
        width: 100%;
        height: auto;
        margin-bottom: var(--space-3);
        border: 1px solid var(--grey-300);
        border-radius: var(--radius);
    }

    .share-float__title {
        margin: 0 var(--space-2) var(--space-2);
        font-weight: 700;
    }

    .share-float .share__list {
        flex-direction: column;
        gap: var(--space-0-5);
    }

    .share-float .share__link {
        justify-content: flex-start;
        gap: var(--space-3);
        width: 100%;
        height: auto;
        padding: var(--space-2);
        border-radius: var(--radius);
        background: none;
        color: var(--dark);
        font: inherit;
        text-align: left;
        text-decoration: none;
    }

    .share-float .share__link:hover {
        background: var(--grey-100);
        color: var(--dark-deep);
    }

    .share-float .share__name {
        position: static;
        width: auto;
        height: auto;
        margin: 0;
        overflow: visible;
        clip: auto;
    }

    .share-float .share__status {
        margin: var(--space-1-5) var(--space-2) 0;
    }
}

/* --------------------------------------------------------------------------
   Tooltips: add data-tooltip="text" to any element (site.js shows it after one second).
   Styled like the Share pop-up, with a speech-bubble pointer unless the element also has
   data-tooltip-callout="false".
   -------------------------------------------------------------------------- */

.tooltip {
    position: fixed;
    z-index: 100;
    top: 0;
    left: 0;
    max-width: min(20rem, calc(100vw - 1rem));
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--grey-300);
    border-radius: 0.5rem;
    background: var(--white);
    color: var(--dark);
    box-shadow: var(--shadow);
    font-size: var(--text-sm);
    line-height: 1.4;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.12s ease, visibility 0.12s ease;
}

.tooltip.is-visible {
    opacity: 1;
    visibility: visible;
}

/* The pointer: a small square turned on its corner, aimed at the element. This is its place
   when the pop-up sits above the element, which only happens when there is no room below. */
.tooltip--callout::after {
    content: "";
    position: absolute;
    left: var(--tooltip-arrow, 50%);
    top: 100%;
    width: 0.7rem;
    height: 0.7rem;
    margin: -0.35rem 0 0 -0.35rem;
    border-right: 1px solid var(--grey-300);
    border-bottom: 1px solid var(--grey-300);
    background: var(--white);
    transform: rotate(45deg);
}

/* The usual case: the pop-up sits below its element, so the pointer is on its top edge. */
.tooltip--below.tooltip--callout::after {
    top: 0;
    transform: rotate(225deg);
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.site-footer {
    background: var(--dark);
    color: var(--white);
    padding: var(--space-12) 0 var(--space-8);
}

.site-footer a {
    color: var(--white);
}

.site-footer__grid {
    display: grid;
    gap: var(--space-8);
}

@media (min-width: 760px) {
    .site-footer__grid {
        grid-template-columns: 1.1fr 0.8fr 0.8fr 1.3fr;
    }
}

/* In one column, on a phone, everything in the grid is centred. The line of copyright
   under it stays as it is. */
@media (max-width: 759.98px) {
    .site-footer__grid {
        text-align: center;
    }

    .site-footer__grid .contact-list li {
        justify-content: center;
    }
}

.site-footer__brand-col {
    text-align: center;
}

/* The logo file is painted with currentColor, so this makes it white. */
.site-footer__logo-link {
    display: block;
    width: 100%;
    max-width: 9rem;
    margin: 0 auto var(--space-4);
    color: var(--white);
}

.site-footer__logo {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1;
}

/* A logo with no link of its own (a footer brand without one: Mosaic's) has the room a linked one has. */
.site-footer__brand-col > .site-footer__logo {
    max-width: 9rem;
    margin: 0 auto var(--space-4);
    color: var(--white);
}

.site-footer__brand {
    margin: 0;
    line-height: 1.4;
}

.site-footer__heading {
    font-size: var(--text-xl);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 700;
    color: var(--white);
    margin-bottom: var(--space-3);
}

.site-footer .contact-list {
    margin: var(--space-2) 0 0;
    font-size: var(--text-md);
}

.site-footer .contact-list .icon {
    color: var(--white);
}

.site-footer ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.site-footer li {
    margin-bottom: var(--space-1-5);
}

/* Copyright line on the left, share buttons on the right */
.site-footer__bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4) var(--space-8);
    margin-top: var(--space-10);
    padding-top: var(--space-5);
    border-top: 1px solid rgb(255 255 255 / 0.2);
}

.site-footer__legal {
    flex: 1 1 20rem;
    margin: 0;
    font-size: var(--text-xs);
}

.site-footer :focus-visible {
    box-shadow: none;
}

/* --------------------------------------------------------------------------
   Focused pages: the header is the logo alone and the footer is one slim row.
   A page asks for this with ViewData["Header"] = "focused" (Listen's survey pages do).
   -------------------------------------------------------------------------- */

.site-footer--slim {
    padding: 0 0 var(--space-5);
}

.site-footer--slim .site-footer__bottom {
    margin-top: 0;
    border-top: 0;
}

.site-footer__links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1-5) var(--space-6);
    font-size: var(--text-xs);
}

.site-footer__links li {
    margin: 0;
}

/* --------------------------------------------------------------------------
   Signed-in strip: above the banner on every page, but only for someone signed
   in to Listen. The markup is Listen's (Pages/Shared/_SignedInStrip.cshtml).
   -------------------------------------------------------------------------- */

.staff-bar {
    background: var(--dark-deep);
    color: var(--white);
    font-size: var(--text-sm);
}

/* No room above or under the tabs: they run from the top of the strip to its bottom edge. */
.staff-bar__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: space-between;
    gap: 0 var(--space-6);
}

.staff-bar__who {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0;
}

.staff-bar__links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-1) var(--space-5);
}

.staff-bar a,
.staff-bar__sign-out {
    color: inherit;
    font: inherit;
    font-weight: 600;
}

.staff-bar__sign-out {
    padding: 0;
    background: none;
    border: 0;
    text-decoration: underline;
    text-underline-offset: 0.15em;
    cursor: pointer;
}

.staff-bar :focus-visible {
    box-shadow: none;
}

/* The two halves of the site, as tabs: the one the page is in is white and runs into the
   white header under the strip; the other is the steel colour. */
.staff-bar__tabs {
    display: flex;
    gap: var(--space-1);
    margin: 0;
    padding: 0;
    list-style: none;
}

.staff-bar__tabs a {
    display: block;
    padding: var(--space-2-5) var(--space-4);
    background: var(--tint);
    color: var(--dark-deep);
    font-size: var(--text-2xs);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-decoration: none;
    text-transform: uppercase;
}

.staff-bar__tabs a:hover {
    background: var(--grey-300);
}

.staff-bar__tabs a[aria-current] {
    background: var(--white);
}

/* Who is signed in, which opens a small menu: changing a password, and signing out. As tall as
   the strip, so the menu opens from its foot, lined up with it (David, 8 Oct 2026). */
.staff-bar__account {
    position: relative;
    align-self: stretch;
}

.staff-bar__account > summary {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    height: 100%;
    padding: var(--space-1) 0;
    list-style: none;
    cursor: pointer;
}

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

/* A small arrow that turns over when the menu is open */
.staff-bar__account > summary::after {
    content: "";
    width: 0.45rem;
    height: 0.45rem;
    margin-left: var(--space-0-5);
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-0.12rem) rotate(45deg);
}

.staff-bar__account[open] > summary::after {
    transform: translateY(0.12rem) rotate(225deg);
}

.staff-bar__menu {
    position: absolute;
    right: 0;
    top: 100%;
    z-index: 40;
    min-width: 13rem;
    margin: 0;
    padding: var(--space-2);
    list-style: none;
    border: 1px solid var(--grey-300);
    border-top: 0;
    border-radius: 0 0 0.5rem 0.5rem;
    background: var(--white);
    color: var(--dark);
    box-shadow: var(--shadow);
}

/* Each link with its icon before its words, on one line (David, 9 Oct 2026). */
.staff-bar__menu a,
.staff-bar__menu .staff-bar__sign-out {
    display: flex;
    align-items: center;
    gap: var(--space-2-5);
    width: 100%;
    white-space: nowrap;
    padding: var(--space-2) var(--space-2-5);
    border-radius: var(--radius);
    text-align: left;
    text-decoration: none;
}

.staff-bar__menu a:hover,
.staff-bar__menu .staff-bar__sign-out:hover {
    background: var(--grey-100);
}

/* The menu is white, unlike the strip, so the focus ring keeps its dark edge here (plan 20, step 1.6). */
.staff-bar__menu :focus-visible {
    box-shadow: 0 0 0 6px var(--dark-deep);
}

/* A line above the first link of each part of a staff menu after the first, the user bar's and
   the header's on the admin pages (David, 9 Oct 2026); never the website's own. Only a line, so a
   screen reader reads the list as one, as before. Room either side of it for a focus ring. */
.menu-break {
    margin-top: var(--space-2);
    padding-top: var(--space-2);
    border-top: 1px solid var(--grey-200);
}

/* For the last half hour of a sign-in, a line under the strip says when it ends, with a way
   to sign in again and come back (plan 19, step 3.9). Yellow, with the strip's dark text; its
   focus ring is dark too, as the usual one does not show on yellow. */
.staff-bar__warning {
    background: var(--highlight);
    color: var(--dark-deep);
}

.staff-bar__warning p {
    margin: 0;
    padding: var(--space-2) 0;
}

.staff-bar__warning form {
    display: inline;
}

.staff-bar__warning :focus-visible {
    outline-color: var(--dark-deep);
}

/* --------------------------------------------------------------------------
   Pages of blocks (the CMS's: the page builder's blocks, as drawn on a page; moved from Have
   your say's stylesheet, the Mosaic plan, phase 8)
   -------------------------------------------------------------------------- */

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

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

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

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

/* A Button block: the site's row of buttons, on the left or the right */
.block-buttons {
    margin-top: 0;
}

.block-buttons--right {
    justify-content: flex-end;
}

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

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

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

/* Big numbers (David, 11 Oct 2026: "Big numbers: add, with styles from number, bar, pie, ring,
   etc, and label styles"): one to six figures, large, each with its label and a note, two to four
   across on a wide screen (five and six three across) and one under another on a phone; as
   numbers alone, with a short rule, or with a bar, a pie or a ring of the figure's share. A chart
   is SVG with its shapes in attributes and its colours here. The figures are the accent's gold,
   which clears 3:1 at their size on white, and the darker gold on a grey band, as accent words
   are; a chart's share is the darker gold, 3.8:1 on its grey track and more on white. */
.big-numbers {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-8) var(--space-6);
    margin: 0;
    padding: 0;
    list-style: none;
}

@media (min-width: 640px) {
    .big-numbers--two,
    .big-numbers--four {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .big-numbers--three {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (min-width: 1081px) {
    .big-numbers--four {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.big-number {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    text-align: center;
    break-inside: avoid;
}

.big-number p {
    margin: 0;
}

.big-number__shown {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    width: 100%;
}

.big-number__figure {
    font-size: clamp(2.25rem, 5vw, 3.25rem);
    font-weight: 700;
    line-height: 1.1;
    color: var(--accent);
    font-variant-numeric: tabular-nums;
}

.section--grey .big-number__figure,
.block--grey .big-number__figure {
    color: var(--accent-text);
}

.big-number__label {
    font-weight: 600;
    line-height: 1.35;
    color: var(--dark);
}

/* In small capitals, as the cards' titles are, unless its labels are as typed. */
.big-numbers--capitals .big-number__label {
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.big-number__note {
    font-size: var(--text-xs);
    color: var(--dark-soft);
}

/* With a rule: a short line in the accent between each figure and its label, under the figure, over
   it when the label is above, and down the label's side when it is beside. */
.big-numbers--rule .big-number__shown::after {
    content: "";
    display: block;
    width: 3rem;
    border-top: 4px solid var(--accent);
}

.big-numbers--rule.big-numbers--above .big-number__shown {
    flex-direction: column-reverse;
}

.big-numbers--rule.big-numbers--beside .big-number__shown::after {
    content: none;
}

.big-numbers--rule.big-numbers--beside .big-number__words {
    padding-left: var(--space-3);
    border-left: 4px solid var(--accent);
}

/* The charts: a bar under the figure, a pie over it, and a ring with the figure in its middle. */
.big-number__chart {
    display: block;
}

.big-number__chart--bar {
    width: 100%;
    max-width: 16rem;
    height: 0.75rem;
}

.big-number__chart--pie {
    width: 7rem;
    height: 7rem;
}

.big-number__ring {
    display: grid;
    place-items: center;
    width: 11rem;
    max-width: 100%;
}

.big-number__ring > * {
    grid-area: 1 / 1;
}

.big-number__chart--ring {
    width: 100%;
    height: auto;
}

.big-number__ring .big-number__figure {
    padding: 0 var(--space-6);
    font-size: clamp(1.5rem, 2.6vw, 1.9rem);
}

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

.big-number__fill {
    fill: var(--accent-text);
}

.big-number__chart--ring .big-number__track {
    fill: none;
    stroke: var(--grey-200);
}

.big-number__chart--ring .big-number__fill {
    fill: none;
    stroke: var(--accent-text);
}

.section--grey .big-number__track,
.block--grey .big-number__track {
    fill: var(--white);
}

.section--grey .big-number__chart--ring .big-number__track,
.block--grey .big-number__chart--ring .big-number__track {
    fill: none;
    stroke: var(--white);
}

/* Its label beside it: the figure and its chart on the left, the label and note on the right. */
.big-numbers--beside .big-number {
    flex-direction: row;
    align-items: center;
    gap: var(--space-4);
    text-align: left;
}

.big-numbers--beside .big-number__shown {
    flex: none;
    width: auto;
}

.big-numbers--beside .big-number__chart--bar {
    width: 7rem;
}

.big-numbers--beside .big-number__chart--pie {
    width: 5rem;
    height: 5rem;
}

.big-numbers--beside .big-number__ring {
    width: 8rem;
}

.big-number__words {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

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

.timeline__when {
    display: block;
    color: var(--dark-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(--dark-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(--accent-text);
}

.doc-list__meta {
    display: block;
    color: var(--dark-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(--dark-soft);
    font-size: var(--text-xs);
}

/* A Video block (David, 11 Oct 2026): a 16:9 box, its picture filling it, or the darkest
   blue-grey with the video's title, and its play button over the whole of it, a dark pill in the
   middle with a triangle and "Play the video". Once it is pressed, the player's frame takes the
   picture's place (site.js). Without the script the same box is a link to the video on YouTube
   or Vimeo. Under it, its caption as a Picture's, the link to watch it there, and its transcript,
   closed, as a question and answer is. */
.video {
    margin: 0;
}

.video__box {
    position: relative;
    aspect-ratio: 16 / 9;
    border-radius: var(--radius);
    background: var(--dark-deep);
}

.video__poster,
.video__frame {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: var(--radius);
}

.video__poster {
    object-fit: cover;
}

.video__start {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    width: 100%;
    padding: var(--space-4);
    border: 0;
    border-radius: var(--radius);
    background: none;
    color: var(--white);
    font: inherit;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    overflow: hidden;
}

.video__start[hidden] {
    display: none;
}

.video__title {
    max-width: 32rem;
    font-size: var(--text-lg);
    font-weight: 600;
    line-height: 1.3;
}

@media (min-width: 640px) {
    .video__title {
        font-size: var(--text-xl);
    }
}

/* Its border is the colour of nothing, until a high-contrast screen, which draws no background, draws it. */
.video__pill {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2-5) var(--space-5) var(--space-2-5) var(--space-4);
    border: 2px solid transparent;
    border-radius: 999px;
    background: var(--dark-deep);
    box-shadow: var(--shadow);
    font-weight: 600;
    transition: background-color 0.15s ease;
}

.video__icon {
    width: 1.5em;
    height: 1.5em;
}

.video__start:hover .video__pill {
    background: var(--accent-text);
}

/* On the dark box of a video with no picture, the pill is the site's yellow, as its main button is. */
.video__box--plain .video__pill {
    background: var(--highlight);
    color: var(--dark-deep);
}

.video__box--plain .video__start:hover .video__pill {
    background: var(--highlight-deep);
}

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

.video__elsewhere {
    margin: var(--space-2) 0 0;
    font-size: var(--text-xs);
}

.video__transcript {
    margin-top: var(--space-4);
    padding: var(--space-3) 0;
    border-top: 1px solid var(--grey-300);
    border-bottom: 1px solid var(--grey-300);
}

.video__transcript summary {
    color: var(--dark-deep);
    font-weight: 600;
    cursor: pointer;
}

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

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

.block-quote blockquote {
    margin: 0;
    color: var(--dark-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(--dark-soft);
}

/* --------------------------------------------------------------------------
   Print (mainly for the accessible version of the plan)
   -------------------------------------------------------------------------- */

@media print {
    /* Navigation and decoration are no use on paper. */
    .skip-link,
    .staff-bar,
    .nav-toggle,
    .site-nav,
    .skyline-strip,
    .share,
    .share-float,
    .tooltip,
    .site-footer nav,
    .carousel__controls {
        display: none !important;
    }

    body {
        font-size: 11pt;
    }

    /* The tag a list is filtered by is filled in on screen (David, 9 Oct 2026); on paper, with no
       background, its words dark in its outline. */
    a.tag--link[aria-current] {
        background: none;
        color: var(--dark-deep);
    }

    /* Browsers leave out backgrounds when printing, so the footer's white text needs to turn dark. */
    .site-footer,
    .site-footer a,
    .site-footer__heading,
    .site-footer__logo-link,
    .site-footer__brand-col > .site-footer__logo,
    .site-footer .contact-list .icon {
        background: none;
        color: var(--dark-deep);
    }

    .site-footer {
        padding: var(--space-6) 0 0;
        border-top: 1px solid var(--grey-300);
    }

    .site-footer__grid {
        grid-template-columns: 1fr 2fr;
    }

    .site-footer__logo-link,
    .site-footer__brand-col > .site-footer__logo {
        max-width: 5rem;
    }

    .site-footer__bottom {
        border-top-color: var(--grey-300);
    }

    /* A Stripe bar (David, 11 Oct 2026): its words dark on paper, between two fine lines, as browsers leave its colour out. */
    .stripe-bar {
        background: none;
        color: var(--dark-deep);
        border-top: 1px solid var(--grey-300);
        border-bottom: 1px solid var(--grey-300);
    }

    /* A Video (David, 11 Oct 2026): its picture on paper, without the play button over it, and the
       link to watch it under it; one without a picture, a box of a colour browsers leave out, goes. */
    .video__start,
    .video__box--plain {
        display: none;
    }

    /* Big numbers (David, 11 Oct 2026): dark on white, their rules and charts kept, the charts' shares dark on a grey track. */
    .big-number__figure,
    .section--grey .big-number__figure,
    .block--grey .big-number__figure {
        color: var(--dark-deep);
    }

    .big-numbers--rule .big-number__shown::after,
    .big-numbers--rule.big-numbers--beside .big-number__words {
        border-color: var(--dark-deep);
    }

    .big-number__chart {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .big-number__fill {
        fill: var(--dark-deep);
    }

    .big-number__track,
    .section--grey .big-number__track,
    .block--grey .big-number__track {
        fill: var(--grey-200);
    }

    .big-number__chart--ring .big-number__fill {
        stroke: var(--dark-deep);
    }

    .big-number__chart--ring .big-number__track,
    .section--grey .big-number__chart--ring .big-number__track,
    .block--grey .big-number__chart--ring .big-number__track {
        fill: none;
        stroke: var(--grey-200);
    }

    .section,
    .page-head {
        padding-top: var(--space-4);
        padding-bottom: var(--space-4);
    }

    .prose {
        max-width: none;
    }

    h1,
    h2,
    h3 {
        break-after: avoid;
    }

    p,
    li {
        orphans: 3;
        widows: 3;
    }

    img,
    table,
    .toc {
        break-inside: avoid;
    }

    /* Paper does not scroll: a wide table's box shows all of it (plan 19, step 7.7). */
    .table-scroll {
        overflow: visible;
    }

    /* Nor does a carousel: it prints whole, its items one after another down the page, not a
       row running past the paper's edge, which on paper wide enough for three at a time (A4
       the long way) lost all but the first three (plan 19, step 9.17). */
    .carousel__track {
        grid-auto-flow: row;
        grid-auto-columns: auto;
        overflow: visible;
        margin-inline: 0;
        padding-inline: 0;
        -webkit-mask-image: none;
        mask-image: none;
    }

    /* The dark panels lose their backgrounds too, so their white headings and words would
       vanish: on paper they are dark on white, with a line round them (plan 19, step 7.5). */
    .page-title--light,
    .involved-hero,
    .involved-hero *,
    .idea-box,
    .idea-box *,
    .action-card--dark,
    .action-card--dark *,
    .action-card--colour.words-light,
    .action-card--colour.words-light *,
    .choice-card.words-light,
    .choice-card.words-light *,
    .panel:nth-child(even),
    .panel:nth-child(even) *,
    .priority-card:nth-child(even) .priority-card__body,
    .priority-card:nth-child(even) .priority-card__body *,
    .idea-point:nth-child(even),
    .idea-point:nth-child(even) * {
        background: none !important;
        color: var(--dark-deep) !important;
    }

    .involved-hero,
    .idea-box,
    .plan-cover,
    .action-card--dark,
    .action-card--colour.words-light,
    .panel:nth-child(even),
    .priority-card:nth-child(even) .priority-card__body,
    .idea-point:nth-child(even) {
        border: 1px solid var(--grey-300);
    }

    /* Small marks keep their colours: a drop of ink, and their white words stay readable. */
    .btn--dark,
    .choice-card--yellow .btn--primary,
    .number-badge,
    .priority-card__number,
    .priority-card__go,
    .whatif__kicker {
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
    }
}

/* ==========================================================================
   The lists, tables, forms, menus and panels the CMS's admin pages share with every library's
   pages, public ones included (the Mosaic plan, phase 7: they were Have your say's until the
   CMS's pages needed them without it).
   ========================================================================== */

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

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

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

.choice {
    position: relative;
}

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

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

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

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

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

/* Any other heading in the box, such as those on a survey's page about cookies or one typed into
   a start screen or an ending: light too, not the site's heading colour, which is the box's own
   (review 9 Oct, X3). Those on the white error summary and a notice's light ground keep the dark. */
.idea-box h2,
.idea-box h3,
.idea-box h4 {
    color: var(--white);
}

.idea-box .error-summary h2,
.idea-box .error-summary h3,
.idea-box .notice h2,
.idea-box .notice h3,
.idea-box .notice h4 {
    color: var(--dark);
}

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

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

.idea-box .btn--ghost:hover {
    background: var(--white);
    color: var(--dark-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(--dark);
}

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

/* ==========================================================================
   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(--dark-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 {

    .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,
.nav-count,
.q-item__number,
.btn--danger {
        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(--dark);
    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(--tint);
    color: var(--dark-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);
    }
}

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

/* 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: 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 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(--dark);
    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(--accent);
}

/* 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 .btn {
    cursor: default;
}

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

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

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

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

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

/* A table of one line a cell beside a row's buttons, such as the ideas' tags (David, 9 Oct 2026):
   each cell in the middle of the row's height. Tables of longer words keep theirs at the top. */
.data-table--middle tbody th,
.data-table--middle tbody td {
    vertical-align: middle;
}

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

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

.data-table__note {
    display: block;
    width: fit-content;
    margin-top: var(--space-1);
    font-size: var(--text-xs);
}

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

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

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

.pager__now {
    font-size: var(--text-sm);
    color: var(--dark-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(--accent);
    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;
}

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

/* 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(--dark-soft);
    font-size: var(--text-2xs);
    line-height: 1.5;
    white-space: nowrap;
}

/* A tag that filters a list by it, such as each in the list of ideas (David, 9 Oct 2026): as a
   tag, underlined and darker under the pointer; the one the list is filtered by filled in. */
a.tag--link {
    text-decoration: none;
}

a.tag--link:hover {
    border-color: var(--dark-soft);
    color: var(--dark);
    text-decoration: underline;
}

a.tag--link[aria-current] {
    border-color: var(--dark);
    background: var(--dark);
    color: var(--white);
}

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

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

/* 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(--accent);
    border-radius: var(--radius);
    font-size: var(--text-2xl);
    font-weight: 700;
    letter-spacing: 0.02em;
}

/* Words that only make sense online, a "Read about the project" link and a consultation's
   "Nothing has been decided yet" (SimpleMarkup.IsOnlineOnly): left out when a survey's page is
   printed (David, sheet 21a; plan 20, step 1.4). The paper version leaves them out altogether. */
@media print {
    .online-only {
        display: none;
    }
}

/* The signed-in strip's link from a page written for the public to where staff change it,
   after its tabs (StripEdit; David's choice, sheet 21b; plan 20, step 3.10). The strip's own
   styles are the website's (site.css); this link is only ever on Listen's pages. */
/* The strip's links for the page it is on, side by side after the tabs: Edit this ..., and from an edit
   page View this ... and Preview this ... (David, 12 Oct 2026). */
.staff-bar__page {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 var(--space-5);
    margin-right: auto;
}

.staff-bar__edit,
.staff-bar__view {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1-5);
    align-self: center;
    padding: var(--space-1) 0;
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

.staff-bar__edit:hover,
.staff-bar__view:hover {
    color: inherit;
    text-decoration-thickness: 2px;
}