/* =========================================================================
   funding.css — single stylesheet for the whole site, public and admin.
   Follows CUBE CSS (cube.fyi):
     GLOBAL      design tokens + element defaults
     COMPOSITION flexible, content-agnostic layouts
     UTILITY     one job, done well
     BLOCK       specific components
     EXCEPTION   state variants, via data attributes
   ========================================================================= */

/* -------------------------------------------------------------------------
   GLOBAL — design tokens and sensible element defaults
   ------------------------------------------------------------------------- */
:root {
    /* Colour meanings (semantic families):
         green  = success       (--green-primary, --green-soft)
         blue   = informative   (--blue-primary, --blue-soft)
         red    = error         (--red-primary, --red-soft)
         gold  = warning       (--gold-primary, --gold-soft)
         purple = helpful        (--purple-primary, --purple-soft)
         neutral                (--black, --grey-primary, --grey-soft, --white)

       Every colour is a hue + role primitive (--green-primary / --green-soft),
       used directly — there are no --clr-* alias tokens left. Convention: when a
       -soft fill is used, its text and a thin 1px border take the matching -primary. */

    /* primitives — raw colours, named by hue + role (primary = base, mid = halfway, soft = pale) */
    --green-primary: #146C43;            /* dark green */
    --green-mid: #74AC8E;                /* midpoint of green primary/soft */
    --green-soft: #D4EDDA;            /* pale green */
    --purple-primary: #660099;           /* brand purple */
    --purple-mid: #9D64BD;               /* midpoint of purple primary/soft */
    --purple-soft: #D4C7E1;           /* pale lavender tint */
    --red-primary: #B02A37;              /* deep red */
    --red-mid: #D48088;                  /* midpoint of red primary/soft */
    --red-soft: #F8D7DA;                 /* pale red */
    --blue-primary: #0B5ED7;             /* strong blue */
    --blue-mid: #76A7EB;                 /* midpoint of blue primary/soft */
    --blue-soft: #E0F0FF;                /* pale blue */
    --gold-primary: #8A6D1A;           /* dark mustard / gold */
    --gold-mid: #C4B27C;               /* midpoint of gold primary/soft */
    --gold-soft: #FDF7DF;              /* pale gold */
    --yellow-primary: #FFCC00;           /* golden yellow (hue 48°, matches soft) */
    --yellow-mid: #FFDE58;               /* midpoint of yellow primary/soft */
    --yellow-soft: #FFEFAF;              /* pale yellow */
    --grey-primary: #5A6072;             /* mid grey */
    --grey-mid: #A8ABB6;                 /* midpoint of grey primary/soft */
    --grey-soft: #f7f6f9;                /* pale grey */
    --black: #000000;                /* black (absolute end) */
    --white: #FFFFFF;                /* white (absolute end) */

    /* brand, status and focus colours all use the hue primitives directly:
       brand   = --purple-primary / --purple-soft,  success = --green-primary / --green-soft,
       error   = --red-primary / --red-soft,         warning = --gold-primary / --gold-soft,
       info    = --blue-primary / --blue-soft.       Focus ring uses --gold-primary;
       the closed-state dot uses --red-primary. */

    /* neutrals (used directly): text = --black, muted text = --grey-primary,
       surfaces = --white, borders / alt fills / closed grey = --grey-soft. */

    /* type + space */
    --ff-base: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --fs-300: 0.875rem; /* 14px floor for small UI text (labels, chips, muted) */
    --fs-350: 0.9rem;
    --fs-400: 0.95rem;
    --fs-500: 1.05rem;
    --fs-600: 1.3rem;
    --space-2xs: 0.25rem;
    --space-xs: 0.5rem;
    --space-s: 0.75rem;
    --space-m: 1rem;
    --space-l: 1.5rem;
    --space-xl: 2rem;

    --radius: 12px;
    --radius-s: 8px;
    /* focus ring uses --gold-primary (clears 3:1 on every light surface);
       on the dark purple header the shortlist button overrides to a white ring. */
}

body {
    font-family: var(--ff-base);
    color: var(--black);
    background: var(--grey-soft);
    max-width: 1100px;
    margin: var(--space-xl) auto;
    padding: 0 var(--space-m);
}

h1 {
    color: var(--purple-primary);
}

a {
    color: var(--blue-primary);
}

:is(input, select, textarea, button):focus-visible {
    outline: 3px solid var(--gold-primary);
    outline-offset: 1px;
}

/* -------------------------------------------------------------------------
   COMPOSITION — flexible, content-agnostic layouts
   ------------------------------------------------------------------------- */

/* vertical rhythm between direct children */
.flow > * + * {
    margin-block-start: var(--flow-space, var(--space-m));
}

/* responsive card grid */
.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(520px, 100%), 1fr));
    gap: var(--space-l);
}

/* horizontal group that wraps, e.g. chips */
.cluster {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
    align-items: center;
}

/* two even columns that stack when tight */
.pair {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-xs) var(--space-l);
}

/* Key information facts sit on a fixed 3-column grid so rows line up
   (Study level | Fee status | Number of awards, then Student type |
   Application deadline | —) regardless of how many facts a row has */
.info-card .pair {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 640px) {
    .info-card .pair {
        grid-template-columns: 1fr;
    }
}

/* push children to opposite ends, wrapping gracefully */
.repel {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-s) var(--space-l);
}

/* a field (textarea etc.) beside a small action button */
.row {
    display: flex;
    gap: var(--space-s);
    align-items: flex-start;
}

.row__field {
    flex: 1;
}

/* -------------------------------------------------------------------------
   UTILITY — one job, done well
   ------------------------------------------------------------------------- */

.label {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    font-size: var(--fs-300);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--purple-primary);
}

/* keep the label icons about the size of the letters beside them */
.label .icon {
    width: 1.1em;
    height: 1.1em;
}

.chip {
    display: inline-block;
    padding: 0.4em 1em;
    border-radius: 999px;
    font-size: var(--fs-300);
    background: var(--purple-soft);
    color: var(--purple-primary);
    border: 1px solid currentColor;
}

/* outlined variant (e.g. academic year pills): border only, no fill */
.chip--outline {
    background: transparent;
    border: 1px solid currentColor;
}

/* eligible students: pale blue pills — soft fill, primary text + thin border */
.chip--eligible {
    background: var(--blue-soft);
    color: var(--blue-primary);
    border-color: currentColor;
}

/* Chips carrying an explanatory title behave like .tip — hover for the detail.
   Only on pointer devices: the card's stretched link (.card__header a::after)
   covers the card, so the chip has to sit above it to receive hover, and that
   would stop a tap from opening the scheme on touch screens. Touch users get
   the same copy from the .chip-help toggle instead. */
@media (hover: hover) and (pointer: fine) {
    .chip[title] {
        cursor: help;
        position: relative;
        z-index: 1;
    }
}

/* "What do these mean?" disclosure for the eligible-student pills — the
   touch-friendly twin of the hover tooltip above. Sits beneath the pills with
   the toggle pushed to the right; the list it reveals stays left-aligned. */
.chip-help {
    margin-block-start: 0.5rem;
    font-size: var(--fs-300);
}

.chip-help summary {
    position: relative;
    z-index: 1; /* clears the card's stretched link */
    width: fit-content;
    margin-inline-start: auto; /* right-aligned, but only as wide as its text */
    /* WCAG 2.2 target size (minimum) wants 24px — the text alone is 19px */
    display: flex;
    align-items: center;
    min-height: 24px;
    color: var(--purple-primary);
    cursor: pointer;
    /* underlined at rest, so it reads as a link like every other one on the
       site — a <summary> gets no underline from the browser by default */
    text-decoration: underline;
}

/* same keyboard ring the rest of the site uses */
.chip-help summary:focus-visible {
    outline: 3px solid var(--gold-primary);
    outline-offset: 1px;
}

.chip-help dl {
    margin: 0.5rem 0 0;
}

.chip-help dt {
    font-weight: 600;
}

.chip-help dd {
    margin: 0 0 var(--space-2xs);
    color: var(--grey-primary);
}

.chip-help dd:last-child {
    margin-block-end: 0;
}

/* breathing room between a section label and the pills beneath it,
   and between the pills themselves */
.label + .cluster {
    margin-block-start: 0.5rem;
}

.card__section .cluster,
.check-group .cluster {
    gap: 0.5rem;
}

/* pill containers used on the profile page (e.g. academic years, degrees) */
.chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.muted {
    color: var(--grey-primary);
}

.hint {
    font-size: var(--fs-350);
    color: var(--grey-primary);
    font-weight: 400;
}

.tip {
    border-bottom: 1px dotted var(--grey-primary);
    cursor: help;
}

.updated {
    font-size: var(--fs-300);
    color: var(--grey-primary);
    margin-top: var(--space-2xs);
    text-align: right;
}

.text-right {
    text-align: right;
}

.divider {
    border: none;
    border-top: 1px solid var(--grey-soft);
    margin: var(--space-s) 0;
}

.field-label {
    display: block;
    font-weight: 600;
    font-size: var(--fs-400);
    margin-block-end: var(--space-2xs);
}

.input {
    width: 100%;
    padding: 0.6rem 0.75rem;
    font: inherit;
    color: inherit;
    background: var(--white);
    border: 1px solid var(--grey-soft);
    border-radius: var(--radius-s);
    box-sizing: border-box;
}

/* top filter box: field borders use grey-mid */
.search-panel .input {
    border-color: var(--grey-mid);
}

.check {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    font-size: var(--fs-400);
}

.check input {
    flex-shrink: 0;
    width: 1.1rem;
    height: 1.1rem;
    accent-color: var(--purple-primary);
}

/* neat, self-aligning columns of checkboxes that cope with any number of
   options — new choices flow into the grid without breaking the layout */
.check-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: var(--space-s) var(--space-l);
}

.check-grid .check {
    align-items: flex-start;
}

/* clear breathing room above the eligibility group and below its checkboxes.
   Uses .check-group.filter-eligibility so it beats the later `.check-group
   { margin: 0 }` rule, which would otherwise cancel the gap. */
.check-group.filter-eligibility {
    margin-block: var(--space-l);
}

.btn {
    padding: 0.6rem 1.75rem;
    font: inherit;
    font-weight: 600;
    color: #ffffff;
    background: var(--purple-primary);
    border: none;
    border-radius: var(--radius-s);
    cursor: pointer;
    text-decoration: none;
}

/* row of action buttons (admin listing) — a little breathing room */
.btn-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-s);
}

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

.sort-bar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    justify-content: flex-end;
    flex-wrap: wrap;
    margin-block: 1.5rem 1rem;
}

.sort-bar .input {
    width: auto;
}

/* -------------------------------------------------------------------------
   PAGINATION
   ------------------------------------------------------------------------- */

.pagination {
    margin-block-start: var(--space-xl);
}

.pagination__list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: var(--space-xs);
    margin: 0;
    padding: 0;
    list-style: none;
}

/* one style for links, the current page and the disabled steps, so the row
   keeps an even rhythm whatever each item happens to be */
.pagination__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;      /* WCAG 2.5.8 target size */
    min-height: 44px;
    padding-inline: var(--space-s);
    font-size: var(--fs-400);
    font-weight: 600;
    color: var(--black);
    text-decoration: none;
    background: var(--white);
    border: 1px solid var(--grey-mid);
    border-radius: var(--radius-s);
}

a.pagination__link:hover {
    color: var(--purple-primary);
    background: var(--grey-soft);
    border-color: var(--purple-primary);
}

a.pagination__link:focus-visible {
    outline: 3px solid var(--gold-primary);
    outline-offset: 1px;
}

/* the page you're on */
.pagination__link[aria-current="page"] {
    color: var(--white);
    background: var(--purple-primary);
    border-color: var(--purple-primary);
    cursor: default;
}

/* Previous / Next at either end */
.pagination__link--step {
    padding-inline: var(--space-m);
}

.pagination__link[aria-disabled="true"] {
    color: var(--grey-primary);
    background: var(--grey-soft);
    border-color: var(--grey-soft);
    cursor: not-allowed;
}

.pagination__gap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    min-height: 44px;
    color: var(--grey-primary);
}

/* compact phone control — arrows either side of "Page 2 of 10" */
.pagination__compact {
    display: none;
    align-items: center;
    justify-content: center;
    gap: var(--space-s);
}

.pagination__status {
    margin: 0;
    font-size: var(--fs-400);
    color: var(--grey-primary);
}

.pagination__status strong {
    color: var(--black);
}

.pagination__link--arrow {
    padding-inline: var(--space-xs);
}

.pagination__link--arrow .icon {
    width: 20px;
    height: 20px;
}

/* At its widest the numbered strip is 9 items — Previous, seven numbers with
   two ellipses, Next — which needs about 600px. Below that it would wrap onto
   two or three rows, so swap in the compact bar, which is one row at any page
   count. 720px leaves the strip a comfortable margin rather than a hair's. */
@media (max-width: 720px) {
    .pagination__list {
        display: none;
    }

    .pagination__compact {
        display: flex;
    }
}

/* available to screen readers, hidden on screen */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    white-space: nowrap;
    border: 0;
    clip-path: inset(50%);
}

.btn[data-variant="secondary"] {
    color: var(--purple-primary);
    background: transparent;
    border: 1px solid var(--purple-primary);
}

.btn[data-variant="secondary"]:hover {
    color: #ffffff;
    background: var(--purple-primary);
}

.link-btn {
    display: inline-flex;
    align-items: center;
    min-height: 24px; /* WCAG 2.5.8 minimum target size */
    padding: 0.2rem 0.15rem;
    font: inherit;
    font-weight: 600;
    color: var(--blue-primary);
    background: none;
    border: none;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.icon {
    flex-shrink: 0;
    vertical-align: -2px;
}

.dot {
    display: inline-block;
    width: 0.7rem;
    height: 0.7rem;
    border-radius: 50%;
    background: var(--grey-primary);
    border: 1px solid rgba(0, 0, 0, 0.25);
    vertical-align: baseline;
}

.error {
    background: var(--red-soft);
    color: var(--red-primary);
    border: 1px solid var(--red-primary);
    padding: var(--space-s) var(--space-m);
    border-radius: var(--radius-s);
    margin-top: var(--space-m);
    margin-bottom: var(--space-l);
}

.error p {
    margin: 0;
    font-weight: 600;
}

.error ul {
    margin: var(--space-2xs) 0 0;
    padding-inline-start: 1.25rem;
}

/* validation error highlight on a field or group — JS clears it on first edit */
.admin-form [data-error],
.admin-form fieldset[data-error] {
    border-color: var(--red-primary);
    box-shadow: 0 0 0 1px var(--red-primary);
}

.success {
    background: var(--green-soft);
    color: var(--green-primary);
    border: 1px solid var(--green-primary);
    padding: var(--space-s) var(--space-m);
    border-radius: var(--radius-s);
    margin-top: var(--space-m);
}

/* System page: bordered panels for each group of settings */
.system-panel {
    margin-block: var(--space-l);
    padding: var(--space-m) var(--space-l) var(--space-l);
    background: var(--white);
    border: 1px solid var(--grey-soft);
    border-radius: var(--radius-s);
}

.system-panel h2 {
    margin-top: 0;
}

/* -------------------------------------------------------------------------
   BLOCK — admin nav bar
   ------------------------------------------------------------------------- */

.admin-nav {
    display: flex;
    flex-wrap: wrap;   /* six sections plus the user block overflow below ~1000px */
    gap: var(--space-xs) var(--space-m);
    align-items: center;
    padding: var(--space-xs) 0;
    border-bottom: 1px solid var(--grey-soft);
    margin-bottom: var(--space-l);
    font-size: var(--fs-400);
}

.admin-nav__user {
    margin-left: auto;
}

/* -------------------------------------------------------------------------
   BLOCK — search panel
   ------------------------------------------------------------------------- */

.search-panel {
    background: var(--white);
    border: 1px solid var(--grey-mid);
    border-radius: var(--radius);
    padding: var(--space-l);
    margin-block: var(--space-l) var(--space-xl);
}

.search-panel h2 {
    margin: 0;
    font-size: var(--fs-500);
}

.search-panel .repel p {
    margin: 0;
    font-size: var(--fs-300);
}

.check-group {
    border: none;
    margin: 0;
    padding: 0;
    background: none;
}

.check-group legend {
    padding: 0;
    background: none;
    border-radius: 0;
    font-weight: 600;
    color: var(--black);
    font-size: var(--fs-400);
    margin-block-end: var(--space-2xs);
}

.search-panel__foot {
    display: flex;
    justify-content: flex-end;
    border-block-start: 1px solid var(--grey-soft);
    padding-block-start: var(--space-m);
}

/* three even filter groups, separated by thin vertical rules */
.filter-columns {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-l);
}

.filter-columns > * + * {
    border-inline-start: 1px solid var(--grey-soft);
    padding-inline-start: var(--space-l);
}

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

    .filter-columns > * + * {
        border-inline-start: none;
        padding-inline-start: 0;
    }
}

/* -------------------------------------------------------------------------
   BLOCK — the funding card (homepage)
   ------------------------------------------------------------------------- */

.card {
    position: relative; /* anchor for the stretched link */
    background: var(--white);
    border: 1px solid var(--purple-primary);
    border-radius: var(--radius);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}

/* the extra 0 0 0 1px ring visually doubles the border without shifting layout */
.card:hover {
    box-shadow: 0 0 0 1px var(--purple-primary), 0 4px 14px rgba(87, 6, 140, 0.18);
    transform: translateY(-2px);
}

/* keyboard users get an unmissable ring around the whole card */
.card:focus-within {
    outline: 3px solid var(--gold-primary);
    outline-offset: 2px;
}

.card__header {
    background: var(--purple-primary);
    padding: var(--space-m) var(--space-l);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-s);
    color: #ffffff;
}

.card__header h2 {
    margin: 0;
    font-size: var(--fs-600);
    line-height: 1.3;
    /* reserve the height of two lines so single-line titles match
       two-line titles and every purple header is the same size */
    min-height: calc(1.3em * 2);
    display: flex;
    align-items: center;
}

.card__header a {
    color: #ffffff;
    text-decoration: none;
    /* Clamp long titles to two lines with an ellipsis. Default word wrapping
       means the cut always lands after a whole word, never mid-word. */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    overflow-wrap: normal;
    word-break: normal;
}

/* stretch the title link's hit area over the entire card */
.card__header a::after {
    content: "";
    position: absolute;
    inset: 0;
}

/* the ring on the card replaces the anchor's own outline */
.card__header a:focus-visible {
    outline: none;
}

.card:hover .card__header a {
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* arrow in a white roundel — a clear "go" affordance */
.card__header .icon {
    width: 30px;
    height: 30px;
    padding: 6px;
    box-sizing: border-box;
    background: #ffffff;
    color: var(--purple-primary);
    border-radius: 50%;
    transition: transform 0.15s ease;
    pointer-events: none; /* let hover/clicks fall through to the card link */
}

.card:hover .card__header .icon {
    transform: translateX(4px);
}

@media (prefers-reduced-motion: reduce) {
    .card,
    .card__header .icon {
        transition: none;
    }

    .card:hover {
        transform: none;
    }

    .card:hover .card__header .icon {
        transform: none;
    }
}

.card__section {
    padding: var(--space-s) var(--space-l);
    border-block-start: 1px solid var(--purple-soft);
}

/* fee strip — the scannable headline figure on each card */
.card__fee {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin: 0;
    padding: var(--space-s) var(--space-l);
    background: var(--purple-soft);
    color: var(--purple-primary);
    font-size: var(--fs-600);
    font-weight: 700;
}

/* scale the currency icon to the headline figure, like the fact icons */
.card__fee .icon {
    width: 0.85em;
    height: 0.85em;
}

.card__fee-label {
    font-size: var(--fs-300);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.card__section:first-of-type {
    border-block-start: none;
}

/* sub-headings inside a card section, e.g. the three parts of "Application and
   selection process". The stylesheet has no h3 rules at all, so without this
   they fall back to the browser default and sit oddly against the card type. */
.card__section h3 {
    margin: 0 0 var(--space-2xs);
    font-size: var(--fs-500);
    color: var(--purple-primary);
}

.card__section h3 + .rich-text > :first-child {
    margin-block-start: 0;
}

/* -------------------------------------------------------------------------
   RICH TEXT — markup generated by render_rich_text() from editors' plain text
   ------------------------------------------------------------------------- */

.rich-text > :first-child {
    margin-block-start: 0;
}

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

.rich-text p {
    margin-block: 0 var(--space-s);
}

/* "Personal factors:" and friends. Same size and colour as the body text —
   bold and the space above are what set them apart. */
.rich-text .rt-heading {
    margin-block: var(--space-m) var(--space-2xs);
    font-size: inherit;
    font-weight: 700;
    color: inherit;
}

.rich-text .rt-list {
    margin-block: 0 var(--space-s);
    padding-inline-start: var(--space-l);
}

.rich-text .rt-list li {
    margin-block-end: var(--space-2xs);
    line-height: 1.5;
}

.rich-text a {
    color: var(--purple-primary);
    /* long pasted addresses must not push the card wider than its column */
    overflow-wrap: anywhere;
}

/* "How to format" under each admin textarea — one quiet line until opened */
/* the trigger sits right, under the end of the textarea; the rules it opens
   stay left-aligned so they read normally */
.format-help {
    /* the trailing gap keeps whatever follows — the Active checkbox on the
       eligibility and priority fieldsets — clear of the opened rules */
    margin-block: var(--space-xs) var(--space-l);
    text-align: end;
}

.format-help summary {
    display: inline-block;
    font-weight: 600;
    color: var(--purple-primary);
    cursor: pointer;
}

.format-help summary:hover {
    text-decoration: underline;
}

/* sits on the fieldset's own background — a white panel with a border reads
   as another input, which is the one thing this must not look like */
.format-help ul {
    margin-block: var(--space-xs) 0;
    padding-block: 0;
    padding-inline-start: var(--space-l);
    background: transparent;
    list-style-position: outside;
    text-align: start;
}

.format-help li {
    margin-block-end: var(--space-2xs);
}

.format-help li:last-child {
    margin-block-end: 0;
}

.format-help code {
    padding: 0.05em 0.3em;
    background: var(--grey-soft);
    border: 1px solid var(--grey-mid);
    border-radius: var(--radius-s);
    font-size: 0.95em;
    /* the link example is long — let it wrap rather than widen the fieldset */
    overflow-wrap: anywhere;
}

.card__excerpt {
    margin: 0;
    font-size: var(--fs-400);
    font-weight: 500;
    line-height: 1.55;
}

.fact dt {
    margin: 0;
}

.fact dd {
    margin: var(--space-2xs) 0 0;
    font-size: var(--fs-400);
}

/* highlighted fact row, e.g. award value */
.card__section[data-highlight] {
    background: var(--purple-soft);
}

/* status strip across the card foot — mirrors the header bar */
.card__banner {
    margin-block-start: auto;
    padding: var(--space-m) var(--space-l);
    /* a rule top and bottom only — each state sets its own border colour */
    border-block: 1px solid var(--purple-primary);
    font-size: var(--fs-400);
    font-weight: 600;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--space-xs);
}

/* -------------------------------------------------------------------------
   BLOCK — scheme profile page
   ------------------------------------------------------------------------- */

.profile h1 {
    margin-bottom: var(--space-2xs);
}

.profile .lead {
    font-size: 1.15rem;
    font-weight: 500;
    color: var(--black);
}

/* "still unsure?" nudge — sits above the status banner in the card foot */
.card__unsure {
    text-align: center;
}

.card__unsure p {
    margin: 0;
}

/* apply call-to-action in the scheme summary card foot */
.card__apply {
    text-align: center;
    border-block-start: 1px solid var(--purple-primary);
}

/* shortlist button in the info-card's purple header — white outline so it
   stands out against the same-colour bar */
.card__header .basket-toggle {
    margin: 0;
}

.card__header .btn {
    padding: 0.4rem 1rem;
    font-size: var(--fs-300);
    background: var(--purple-soft);
    color: var(--black); /* dark text — readable on the light lavender fill */
    border: 1px solid #ffffff;
}

.card__header .btn:hover {
    background: var(--purple-primary);
    color: #ffffff; /* flip to white on the dark hover fill */
}

/* compound focus ring: a dark inner ring (box-shadow) clears 3:1 against the pale
   lavender button, and the white outer outline clears the dark purple header —
   so one edge always has contrast whichever surface the ring borders */
.card__header .btn:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 2px;
    box-shadow: 0 0 0 4px var(--purple-primary);
}

.card__apply .apply-btn {
    display: inline-block;
    margin: 0;
    padding: 0.6rem 1.75rem;
    min-width: 13rem;
    box-sizing: border-box;
    text-align: center;
    border-radius: var(--radius-s);
}

/* award-value breakdown in the scheme summary card */
.award-list {
    margin: 0.5rem 0 0;
}

.award-list > div {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 0.75rem;
    margin-block-end: 0.4rem;
}

.award-list dt {
    margin: 0;
    font-weight: 600;
    min-width: 13.5rem; /* fits the longest label so every value lines up */
}

.award-list dd {
    margin: 0;
}

/* scheme-page summary box — reuses the listing card's look for consistency */
.info-card {
    margin: var(--space-l) 0;
    background: var(--white);
    border: 1px solid var(--purple-primary);
    border-radius: var(--radius);
    overflow: hidden;
}

.key-info h2 {
    margin: 0 0 var(--space-m);
    font-size: 1.2rem;
}

.ki-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: var(--space-m) var(--space-l);
    margin: 0;
}

.ki-grid dt {
    font-weight: 700;
    font-size: var(--fs-350);
    margin: 0;
}

.ki-grid dd {
    margin: var(--space-2xs) 0 0;
    font-size: var(--fs-400);
}

.ki-grid dd .icon {
    margin-right: 0.2rem;
}

.apply-box {
    margin: var(--space-xl) 0 var(--space-m);
    padding: var(--space-m) 1.25rem;
    border-radius: var(--radius-s);
    background: var(--grey-soft);
}

.app-facts {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs) var(--space-l);
}

.app-facts li {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    white-space: nowrap;
}

.apply-btn {
    display: inline-block;
    margin-top: var(--space-s);
    padding: var(--space-xs) var(--space-l);
    background: var(--green-primary);
    color: #ffffff;
    text-decoration: none;
    border-radius: 6px;
    font-weight: 600;
}

.apply-btn:hover {
    background: var(--green-primary);
}

.contact p {
    margin: var(--space-2xs) 0;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

/* generic profile section: consistent heading, divider, list rhythm */
.section {
    margin-top: var(--space-xl);
    padding-top: var(--space-m);
    border-top: 1px solid var(--grey-soft);
}

.section h2 {
    font-size: 1.2rem;
    margin: 0 0 var(--space-xs);
}

.section ul {
    margin: 0;
    padding-left: 1.25rem;
}

.section li {
    margin-bottom: var(--space-xs);
}

/* -------------------------------------------------------------------------
   BLOCK — admin forms (scheme edit, statements, login, register)
   ------------------------------------------------------------------------- */

.admin-form {
    background: var(--white);
    border: 1px solid var(--grey-soft);
    border-radius: var(--radius);
    padding: var(--space-l) var(--space-xl) var(--space-xl);
}

.admin-form label {
    display: block;
    font-weight: 700;
    margin-top: 2rem;
    color: var(--purple-primary);
}

/* the display:block above beats the browser's [hidden] rule, so restore it —
   lets JS show/hide the application toggles and contact fields */
.admin-form [hidden] {
    display: none !important;
}

.admin-form :is(input[type="text"], input[type="date"], input[type="email"], input[type="url"], input[type="number"], input[type="password"], input[type="search"], select, textarea) {
    width: 100%;
    padding: 0.55rem 0.75rem;
    margin-top: var(--space-2xs);
    box-sizing: border-box;
    font: inherit;
    color: inherit;
    border: 1px solid var(--grey-soft);
    border-radius: var(--radius-s);
    background: var(--white);
}

.admin-form textarea {
    min-height: 8rem;
    overflow: hidden;  /* no scrollbar — the JS grows the box instead */
    resize: vertical;  /* manual drag still works if wanted */
}

.admin-form textarea[data-size="s"] {
    min-height: 4rem;
}

/* statements editor: let every box shrink to fit its own statement */
.admin-form.statements-form textarea {
    min-height: 2.75rem;
}

/* space after the "no application required" checkbox, before the date fields */
.admin-form .app-toggle {
    margin-block-end: var(--space-m);
}

/* internal-only notes box — tinted so it's clearly not public content */
.admin-form fieldset.internal-notes {
    background: var(--purple-soft);
    border-color: var(--gold-primary);
    border: 1px solid var(--grey-soft);
}

.admin-form fieldset.internal-notes legend {
    background: var(--purple-soft);
    color: var(--purple-primary);
    border: 1px solid var(--purple-primary);
}

.admin-form fieldset {
    margin-top: 2rem;
    border: 1px solid var(--grey-soft);
    border-radius: var(--radius-s);
    padding: var(--space-s) var(--space-m) var(--space-m);
}

/* general info boxes: a little darker than the wrapping .bare-fieldset grey */
.admin-form fieldset:not(.bare-fieldset):not(.internal-notes) {
    background: var(--purple-soft);
}

/* .hint's --grey-primary is set for hints on white (6.3:1). Against the
   lavender above it drops to 3.9:1 — under AA — and thin 0.9rem strokes
   antialias toward the background, so it reads washed out. Black on the same
   tint is 13:1. Hints on white pages are left alone. */
.admin-form fieldset:not(.bare-fieldset) .hint {
    color: var(--black);
}

.admin-form legend {
    font-weight: 600;
    color: var(--purple-primary);
    background: var(--purple-soft);
    padding: 0.2rem 0.8rem;
    border-radius: 999px;
    border: 1px solid var(--purple-primary);
    font-size: 0.9rem;
}

.admin-form fieldset label {
    font-weight: 400;
    margin-top: var(--space-2xs);
    color: var(--black);
}

/* field labels inside a fieldset (open/close dates, contact, etc.) get a
   clear gap between questions — checkbox-option labels (no `for`) stay tight */
.admin-form fieldset label[for] {
    margin-top: var(--space-l);
    font-weight: 700;
}

/* top-level fields (scheme, slug, status, excerpt, …) sit directly in the
   .bare-fieldset wrapper, so give them clear spacing between questions */
.admin-form .bare-fieldset > label {
    margin-top: 2rem;
}

/* no gap above the very first field, and keep Description close to Excerpt */
.admin-form .bare-fieldset > label:first-of-type {
    margin-top: 0;
}

.admin-form .bare-fieldset > label.tight-top {
    margin-top: 1rem;
}

.admin-form fieldset label[data-layout="inline"] {
    display: inline-block;
    margin-right: var(--space-m);
}

.admin-form input[type="checkbox"] {
    accent-color: var(--purple-primary);
    width: 1.05rem;
    height: 1.05rem;
}

.admin-form button[type="submit"]:not(.del) {
    margin-top: var(--space-l);
    padding: 0.6rem var(--space-xl);
    font: inherit;
    font-weight: 600;
    color: #ffffff;
    background: var(--purple-primary);
    border: none;
    border-radius: var(--radius-s);
    cursor: pointer;
}

.admin-form button[type="submit"]:not(.del):hover {
    background: var(--purple-primary);
}

.admin-form .cancel {
    margin-left: var(--space-m);
}

/* statements editor: bare clickable trash icon (still a real button for
   keyboard/screen-reader users — just without the button chrome) */
.del {
    margin-top: 0.9rem;
    padding: 0.2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--red-primary);
    background: none;
    border: none;
    border-radius: var(--radius-s);
    cursor: pointer;
}

.del:hover {
    color: var(--red-primary);
    background: var(--red-soft);
}

/* clear gap between statement rows; the timestamp hugs its own field */
.row + .row {
    margin-block-start: var(--space-l);
}

.add {
    margin-top: var(--space-m);
    padding: 0.4rem var(--space-m);
    font: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--purple-primary);
    background: var(--purple-soft);
    border: none;
    border-radius: var(--radius-s);
    cursor: pointer;
}

/* -------------------------------------------------------------------------
   BLOCK — admin data tables (funding list, users)
   ------------------------------------------------------------------------- */

.data-table {
    border-collapse: collapse;
    width: 100%;
    margin-top: var(--space-m);
    font-size: var(--fs-400);
    background: var(--white);
    border: 1px solid var(--grey-soft);
    border-radius: var(--radius);
}

.data-table th,
.data-table td {
    text-align: left;
    padding: var(--space-xs) var(--space-s);
    border-bottom: 1px solid var(--grey-soft);
}

.inline-form {
    display: inline;
}

/* pill badges: scheme statuses and user account states */
.status,
.badge {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    font-size: var(--fs-300);
    background: var(--grey-soft);
}

/* thin border matching the pill's own text colour */
.status {
    border: 1px solid currentColor;
}

/* published schemes read as live — green, not grey */
.status[data-status="published"] {
    background: var(--green-soft);
    color: var(--green-primary);
}

/* holding = gold, archived = red (border follows the text colour) */
.status[data-status="holding"] {
    background: var(--gold-soft);
    color: var(--gold-primary);
}

.status[data-status="archived"] {
    background: var(--red-soft);
    color: var(--red-primary);
}

/* user account status pills: active = green, deactivated = red */
.badge[data-status="active"] {
    background: var(--green-soft);
    color: var(--green-primary);
    border: 1px solid var(--green-primary);
}

.badge[data-status="deactivated"] {
    background: var(--red-soft);
    color: var(--red-primary);
    border: 1px solid var(--red-primary);
}

/* user list filter bar: live search + role/status dropdowns + reset */
.user-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 1rem 1.25rem;
    margin-block: 1.5rem 1rem;
    padding: 0.75rem 1.25rem 1.25rem;
    border: 1px solid var(--grey-soft);
    border-radius: var(--radius-s);
    min-inline-size: 0;
}

.user-filters > legend {
    padding-inline: 0.4rem;
    font-weight: 600;
    color: var(--purple-primary);
}

.user-filters .filter-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
}

.user-filters .filter-label {
    font-weight: 600;
    font-size: var(--fs-400);
}

.user-filters .filter-search {
    flex: 1 1 220px;
}

.user-filters select.input {
    width: auto;
}

/* role pills: admin = purple (authority/power), editor = steel blue.
   thin border matches the pill's own text colour */
.badge[data-role] {
    border: 1px solid currentColor;
}

.badge[data-role="admin"] {
    background: var(--purple-soft);
    color: var(--purple-primary);
}

.badge[data-role="editor"] {
    background: var(--blue-soft);
    color: var(--blue-primary);
    border: 1px solid var(--blue-primary);
}

/* row of icon actions (manage users) */
.user-actions {
    display: flex;
    align-items: center;
    gap: 0.15rem;
}

.icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.3rem;
    background: none;
    border: none;
    border-radius: var(--radius-s);
    color: var(--purple-primary);
    text-decoration: none;
    cursor: pointer;
}

.icon-btn:hover {
    background: var(--purple-soft);
}

.icon-btn[data-variant="danger"] {
    color: var(--red-primary);
}

.icon-btn[data-variant="danger"]:hover {
    background: var(--red-soft);
}

/* -------------------------------------------------------------------------
   EXCEPTION — state and variant styling, via data attributes
   ------------------------------------------------------------------------- */

/* page width: admin pages run wider, the profile page narrower */
body[data-width="wide"] {
    max-width: 1200px;
}

body[data-width="narrow"] {
    max-width: 720px;
}

/* card banner states */
.card__banner[data-state="open"] {
    background: var(--green-soft);
    color: var(--green-primary);
    border-block-color: var(--green-primary);
}

/* "continuous" = open all year round; same green as an open window */
.card__banner[data-state="continuous"] {
    background: var(--green-soft);
    color: var(--green-primary);
    border-block-color: var(--green-primary);
}

/* "auto" = no application; blue signals it happens automatically */
.card__banner[data-state="auto"] {
    background: var(--blue-soft);
    color: var(--blue-primary);
    border-block-color: var(--blue-primary);
}

.card__banner[data-state="upcoming"] {
    background: var(--gold-soft);
    color: var(--gold-primary);
    border-block-color: var(--gold-primary);
}

.card__banner[data-state="closed"] {
    background: var(--grey-mid);
    color: var(--black);
    border-block-color: var(--grey-primary);
}

/* no dates set at all — quiet grey */
.card__banner[data-state="none"] {
    background: var(--grey-soft);
    color: var(--grey-primary);
    border-block-color: var(--grey-soft);
}

/* application-status dot states */
.dot[data-state="open"],
.dot[data-state="continuous"] { background: var(--green-primary); }
.dot[data-state="upcoming"] { background: var(--gold-primary); }
.dot[data-state="closed"]   { background: var(--red-primary); }
.dot[data-state="none"]     { background: var(--grey-soft); }

/* apply box tint while open */
.apply-box[data-state="open"] {
    background: var(--green-soft);
    border: 1px solid var(--green-primary);
}

/* ---- scheme profile redesign ------------------------------------------- */

/* header: status pill above the title */
.profile-head {
    margin-block-end: var(--space-l);
}

.profile-head h1 {
    margin-block: var(--space-xs) 0;
}

.profile-head .lead {
    font-size: var(--fs-500);
    color: var(--grey-primary);
    margin-block-start: var(--space-s);
}

.status-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.45em;
    padding: 0.35em 1em;
    border-radius: 999px;
    font-size: var(--fs-300);
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.status-pill[data-state="open"] {
    background: var(--green-soft);
    color: var(--green-primary);
    border: 1px solid var(--green-primary);
}

.status-pill[data-state="upcoming"] {
    background: var(--gold-soft);
    color: var(--gold-primary);
    border: 1px solid var(--gold-primary);
}

.status-pill[data-state="closed"],
.status-pill[data-state="none"] {
    background: var(--grey-soft);
    color: var(--grey-primary);
    border: 1px solid var(--grey-soft);
}

/* key info facts sit in white cells on the lavender panel */
.ki-grid > div {
    background: var(--white);
    border: 1px solid rgba(87, 6, 140, 0.15);
    border-radius: 8px;
    padding: var(--space-s) var(--space-m);
}

.ki-grid dd .icon {
    vertical-align: -0.15em;
    color: var(--purple-primary);
}

/* application-status cell tinted to match its pill */
.ki-grid > .ki-status[data-state="open"] {
    background: var(--green-soft);
    border-color: var(--green-primary);
}

.ki-status[data-state="open"] dt {
    color: var(--green-primary);
}

.ki-grid > .ki-status[data-state="upcoming"] {
    background: var(--gold-soft);
    border-color: var(--gold-primary);
}

.ki-status[data-state="upcoming"] dt {
    color: var(--gold-primary);
}

.ki-grid > .ki-status[data-state="closed"],
.ki-grid > .ki-status[data-state="none"] {
    background: var(--grey-soft);
    border-color: var(--grey-soft);
}

.ki-status[data-state="closed"] dt,
.ki-status[data-state="none"] dt {
    color: var(--grey-primary);
}

/* pill sits on a same-coloured cell, so give it a white base to stand out */
.ki-status .status-pill {
    background: var(--white);
}

/* the two numbers a scanning student cares about most */
.ki-fee {
    font-size: var(--fs-600);
    font-weight: 800;
    color: var(--purple-primary);
}

.ki-grid > .ki-highlight {
    background: var(--white);
    border-color: rgba(87, 6, 140, 0.15);
}

.ki-highlight dd {
    font-weight: 700;
}

.ki-highlight dd .icon {
    color: var(--purple-primary);
}

/* key statement callouts */
.callout {
    display: flex;
    gap: var(--space-s);
    align-items: flex-start;
    background: var(--grey-soft);
    border-inline-start: 4px solid var(--purple-primary);
    border-radius: 0 var(--radius) var(--radius) 0;
    padding: var(--space-s) var(--space-m);
    margin-block: var(--space-s);
}

/* student testimonial / quote on the scheme page */
.scheme-quote {
    --quote-gold: #e0a51e;
    position: relative;
    margin: var(--space-l) 0;
    padding: 2.6rem 0;
}

/* big decorative gold quotation marks, top-left and bottom-right */
.scheme-quote::before,
.scheme-quote::after {
    position: absolute;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 4.5rem;
    line-height: 1;
    color: var(--quote-gold);
}

.scheme-quote::before {
    content: "\201C";
    top: 0;
    left: 0;
}

.scheme-quote::after {
    content: "\201D";
    right: 0;
    bottom: -1.6rem; /* the closing glyph sits high within its line box */
}

.scheme-quote p {
    margin: 0;
    font-size: var(--fs-600);
    font-style: italic;
    line-height: 1.6;
    color: var(--black);
}

/* responsive 16:9 YouTube embed on the scheme page */
.video-embed {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: var(--radius);
    overflow: hidden;
}

.video-embed iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.callout .icon {
    flex-shrink: 0;
    margin-block-start: 0.2em;
    color: var(--purple-primary);
}

.callout p {
    margin: 0;
}

/* term heading, bold on its own line above the term text.
   Scoped to .callout so it outweighs the `.callout p { margin: 0 }` above. */
.callout .callout__heading {
    font-weight: 600;
    margin-block-end: var(--space-2xs);
}

/* -------------------------------------------------------------------------
   BLOCK — admin terms and conditions editor
   Each term is one bordered card holding its heading and its text, so a long
   list reads as separate terms rather than a wall of boxes.
   ------------------------------------------------------------------------- */

/* rows are numbered 1, 2, 3… by CSS counter, so rows added or removed in the
   browser renumber themselves without any JavaScript */
.terms-editor {
    counter-reset: term;
}

.terms-editor .row {
    background: var(--white);
    border: 1px solid var(--grey-primary);
    border-radius: var(--radius);
    padding: var(--space-m);
}

.terms-editor .row::before {
    counter-increment: term;
    content: counter(term);
    flex: none;
    min-width: 1.5rem;
    font-weight: 700;
    color: var(--purple-primary);
    line-height: 2.5;
    text-align: right;
}

.terms-editor .row + .row {
    margin-block-start: var(--space-m);
}

/* nothing sits above the first control any more, so it starts flush with the
   top of its card. The default --grey-soft outline is near-white, so the two
   controls are given a visible edge of their own. */
.admin-form .terms-editor :is(input[type="text"], textarea) {
    display: block;
    width: 100%;
    margin-block-start: 0;
    border-color: var(--grey-mid);
}

/* space between the heading field and the term text below it */
.terms-editor input[type="text"] {
    margin-block-end: var(--space-m);
    font-weight: 600;   /* the heading reads as a heading while editing */
}

/* the timestamp brings its own margin, so the textarea needs none */
.terms-editor textarea {
    margin-block-end: 0;
}

/* trash button sits level with the first label rather than floating mid-card */
.terms-editor .del {
    margin-top: 0;
}

.terms-editor .updated {
    margin-block-end: 0;
}

/* ------------------------------------------------------------------ *
 * Basket                                                             *
 * ------------------------------------------------------------------ */

/* "Award Pack" explainer box between the search panel and the results */
.pack-info {
    margin-block: var(--space-l);
    padding: var(--space-m) var(--space-l);
    background: var(--yellow-soft);
    border: 1px solid var(--grey-soft);
    border-left: 4px solid var(--purple-primary);
    border-radius: var(--radius-s);
}

.pack-info h2 {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    margin: 0 0 var(--space-2xs);
    font-size: var(--fs-500);
    color: var(--purple-primary);
}

.pack-info p {
    margin: 0;
    color: var(--purple-primary);
}

/* "Filters" summary box: same shape as the shortlist note, but transparent
   with a thin border so it reads as secondary */
/* halve the gap where the filters box sits directly under the search panel
   (adjacent margins collapse, so both sides need trimming) */
.search-panel:has(+ .pack-info--plain) {
    margin-block-end: var(--space-m);
}

.search-panel + .pack-info--plain {
    margin-block-start: var(--space-m);
}

.pack-info--plain {
    background: transparent;
    /* same frame as the search panel above: even border on all four sides */
    border: 1px solid var(--grey-mid);
    border-radius: var(--radius);
    padding: var(--space-l);
}

/* matching breathing room above and below the pill row */
.filter-pills {
    margin-block-start: var(--space-m);
}

.filter-pills .chip__label {
    font-weight: 600;
}

/* pills that can be dismissed: text, then an X button on the right */
.chip--removable {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    padding-inline-end: 0.45em;
}

.chip__remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 1.4em;
    height: 1.4em;
    border-radius: 50%;
    background: var(--purple-primary);
    color: var(--white);
    text-decoration: none;
    transition: background-color 0.15s ease;
}

.chip__remove .icon {
    width: 0.85em;
    height: 0.85em;
}

.chip__remove:hover,
.chip__remove:focus-visible {
    background: var(--purple-mid);
}

.pack-info p.filter-pills__reset {
    margin-block-start: var(--space-m);
    font-size: var(--fs-350);
}

/* Status pills in the pack list: green when open, grey when not yet open */
.chip[data-state="open"],
.chip[data-state="continuous"] {
    background: var(--green-primary);
    color: #ffffff;
}

.chip[data-state="upcoming"],
.chip[data-state="closed"] {
    background: var(--grey-soft);
    color: var(--grey-primary);
}

/* "My Awards Pack (n)" link shown in page headers */
.basket-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    padding: 0.4rem 0.9rem;
    font-weight: 600;
    color: var(--purple-primary);
    background: var(--purple-soft);
    border-radius: var(--radius-s);
    text-decoration: none;
    white-space: nowrap;
}

.basket-link:hover {
    color: #ffffff;
    background: var(--purple-primary);
}

.basket-link__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.4rem;
    height: 1.4rem;
    padding: 0 0.35rem;
    font-size: var(--fs-300, 0.85rem);
    color: #ffffff;
    background: var(--purple-primary);
    border-radius: 999px;
}

.basket-link:hover .basket-link__count {
    color: var(--purple-primary);
    background: #ffffff;
}

/* Apply + pack buttons sit in a row at the foot of the scheme page */
.apply-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: var(--space-m);
    margin-block-start: var(--space-l);
}

/* Make the two buttons identical in size and keep them on one line */
.apply-actions .apply-btn,
.apply-actions .basket-toggle .btn {
    margin: 0;
    padding: 0.6rem 1.75rem;
    min-width: 13rem;
    box-sizing: border-box;
    font: inherit;
    font-weight: 600;
    text-align: center;
    border-radius: var(--radius-s);
}

.apply-actions .basket-toggle {
    margin: 0;
}

/* Add/remove pack button on the scheme detail page */
.basket-toggle {
    margin: 0;
}

/* Add/remove button pinned to the bottom of a listing card.
   position/z-index lift it above the title's stretched-link overlay
   (.card__header a::after) so it stays clickable. */
.card__basket {
    position: relative;
    z-index: 1;
    padding: var(--space-s) var(--space-l) var(--space-m);
    text-align: center; /* centre the button, which sizes to its label */
}

/* Basket page listing */
.basket-actions {
    margin-block: var(--space-m) var(--space-l);
    align-items: center;
}

.basket-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-m);
    list-style: none;
    margin: 0;
    padding: 0;
}

.basket-item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-s);
    padding: var(--space-m) var(--space-l);
    background: var(--white);
    border: 1px solid var(--grey-soft);
    border-radius: var(--radius-s);
}

.basket-item.is-dragging {
    position: relative;
    z-index: 5;
    border-color: var(--purple-primary);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.2);
    cursor: grabbing;
}

/* Brief green flash on a row once it settles into a new position. */
.basket-item.just-moved {
    animation: basket-flash 1800ms ease;
}

@keyframes basket-flash {
    from { background-color: var(--green-soft); }
    to   { background-color: var(--white); }
}

/* Drag handle */
.basket-item__handle {
    flex: none;
    align-self: stretch;
    display: flex;
    align-items: center;
    padding: 0 var(--space-2xs);
    margin: calc(var(--space-m) * -1) 0;
    background: none;
    border: 0;
    color: var(--grey, #888);
    font-size: 1.4rem;
    line-height: 1;
    cursor: grab;
    touch-action: none;
}

.basket-item__handle:active {
    cursor: grabbing;
}

.basket-item__handle:focus-visible {
    outline: 2px solid var(--purple-primary);
    outline-offset: 2px;
    border-radius: var(--radius-s);
}

/* Position number */
.basket-item__num {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.75rem;
    height: 1.75rem;
    padding: 0 0.35rem;
    border-radius: 999px;
    background: var(--purple-primary);
    color: var(--white);
    font-size: var(--fs-300, 0.9rem);
    font-weight: 600;
}

.basket-item__body {
    flex: 1;
    min-width: 0;
}

.basket-item__body h2 {
    margin-block: 0 var(--space-2xs);
    font-size: var(--fs-500, 1.2rem);
}

.basket-item__body p {
    margin-block: 0 var(--space-s);
}

/* Per-award notes (session only — never saved to the database) */
.basket-item__notes {
    margin-block-start: var(--space-s);
}

.basket-item__notes label {
    display: block;
    font-size: var(--fs-300, 0.9rem);
    font-weight: 600;
    color: var(--grey, #6e6e6e);
}

.basket-item__notes textarea {
    width: 100%;
    min-height: 3.5rem;
    padding: 0.55rem 0.75rem;
    margin-top: var(--space-2xs);
    box-sizing: border-box;
    font: inherit;
    color: inherit;
    background: var(--white);
    border: 1px solid var(--grey-mid);
    border-radius: var(--radius-s);
    resize: vertical;
}

.basket-item__notes textarea:hover {
    border-color: var(--grey-primary);
}

/* Holds the save status (and, without JS, the Save button). The min-height
   reserves the line so the row below doesn't jump when "Saved" appears. */
.basket-item__notes-actions {
    display: flex;
    align-items: center;
    gap: var(--space-s);
    min-height: 1.4rem;
    margin-top: var(--space-2xs);
}

.basket-item__notes-status {
    font-size: var(--fs-300, 0.9rem);
    color: var(--grey-primary);
}

/* Right-hand controls: up/down + remove */
.basket-item__controls {
    flex: none;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--space-xs);
}

.basket-item__move {
    display: flex;
    gap: var(--space-3xs, 0.25rem);
}

.move-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    background: var(--white);
    border: 1px solid var(--purple-soft);
    border-radius: var(--radius-s);
    color: var(--purple-primary);
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
}

.move-btn:hover:not(:disabled) {
    border-color: var(--purple-primary);
    background: var(--purple-tint, #f4f0fb);
}

.move-btn:disabled {
    color: var(--grey-soft);
    cursor: default;
}

/* Stack controls under the body on narrow screens */
@media (max-width: 600px) {
    .basket-item {
        flex-wrap: wrap;
    }

    .basket-item__controls {
        flex-basis: 100%;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        padding-left: calc(1.4rem + 1.75rem + var(--space-s) * 2);
    }
}

/* -------------------------------------------------------------------------
   BLOCK — funding-criteria admin (manage lookup values)
   ------------------------------------------------------------------------- */

/* hub: cards linking to each value set */
.criteria-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: var(--space-l);
    margin-block: var(--space-l);
}

.criteria-card {
    display: block;
    padding: var(--space-l);
    background: var(--white);
    border: 1px solid var(--grey-soft);
    border-radius: var(--radius);
    text-decoration: none;
    color: inherit;
}

.criteria-card:hover {
    border-color: var(--purple-primary);
}

.criteria-card h2 {
    margin: 0 0 0.35rem;
    font-size: var(--fs-500);
    color: var(--purple-primary);
}

.criteria-card p {
    margin: 0 0 var(--space-s);
    font-size: var(--fs-300);
    color: var(--black);
}

.criteria-card .count {
    font-weight: 600;
    font-size: var(--fs-300);
    color: var(--black);
}

/* edit-lock: listing note + editor banner */
.lock-note {
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
    color: var(--gold-primary);
    font-style: italic;
}

.lock-banner {
    display: flex;
    align-items: center;
    gap: 0.5em;
    margin-block-end: var(--space-m);
    padding: var(--space-s) var(--space-m);
    background: var(--gold-soft);
    border: 1px solid var(--gold-primary);
    color: var(--gold-primary);
    border-radius: var(--radius-s);
}

.last-edited {
    margin-block: 0 var(--space-m);
    text-align: right;
}

/* status filter on the admin listing */
.status-filter {
    display: flex;
    align-items: center;
    gap: var(--space-s);
    margin-block: var(--space-m);
}

.status-filter .input {
    width: auto;
}

/* sortable table headers (admin listing) */
.sort-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
    color: inherit;
    text-decoration: none;
}

.sort-link:hover {
    color: var(--purple-primary);
}

.sort-arrow[data-inactive] {
    opacity: 0.35;
}

/* wrapper used to disable the whole edit form when a scheme is locked */
.bare-fieldset {
    border: 0;
    margin: 0;
    padding: 0;
    min-inline-size: 0;
    background: var(--grey-soft);
}

/* edit form + delete button sit together in the Value cell */
.criteria-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-m);
}

/* criteria table: Name/Description inputs fill their columns; the Used-by
   and Actions columns shrink to their content so the fields take the space */
.criteria-table td .input {
    width: 100%;
    box-sizing: border-box;
}

/* fields wrap and grow to show all their text — no inner scrolling */
.criteria-table textarea.input {
    resize: vertical;
    overflow: hidden;
    min-height: 2.4rem;
    line-height: 1.35;
    font: inherit;
}

/* with a description column, keep the name compact so description fills the
   rest; with no description, the name column fills the row instead */
.criteria-table.has-desc .cell-name {
    width: 14rem;
}

.criteria-table .cell-used {
    width: 1%;
    white-space: nowrap;
}

.criteria-save {
    margin-block: var(--space-m);
}

/* inline add/edit rows */
.criteria-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-s);
    margin: 0;
}

.criteria-form .input {
    width: auto;
}

.criteria-form input[type="text"] {
    flex: 1 1 12rem;
    min-width: 8rem;
}

/* drag-to-reorder handle */
.criteria-table .drag-cell {
    width: 1%;
    white-space: nowrap;
    text-align: left;
    vertical-align: middle;
}

.drag-handle {
    display: inline-block;
    cursor: grab;
    opacity: 0.45;
    font-size: 1rem;
    line-height: 1;
    letter-spacing: -0.15em;
    user-select: none;
    color: var(--black);
}

.drag-handle:hover {
    opacity: 1;
}

.criteria-table tr.dragging {
    opacity: 0.4;
}

/* the standalone "Add a new value" form gets a little breathing room */
h2 + .criteria-form {
    margin-block-start: var(--space-s);
}

/* where-used modal */
.usage-dialog {
    max-width: 32rem;
    width: calc(100% - 2rem);
    padding: var(--space-l);
    border: 1px solid var(--grey-soft);
    border-radius: var(--radius);
    color: var(--black);
}

.usage-dialog::backdrop {
    background: rgba(0, 0, 0, 0.45);
}

.usage-dialog h2 {
    margin-block: 0 var(--space-s);
    font-size: var(--fs-500);
}

.usage-dialog ul {
    margin-block: 0 var(--space-m);
    padding-inline-start: 1.2rem;
}

.usage-dialog li {
    margin-block-end: 0.35rem;
}

/* -------------------------------------------------------------------------
   BLOCK — site footer (public pages)
   ------------------------------------------------------------------------- */

.site-footer {
    margin-top: var(--space-l);
    padding-top: var(--space-s);
    border-top: 1px solid var(--grey-soft);
    font-size: var(--fs-350);
}

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