/*
 * SkySurvey — respondent surface.
 *
 * Structure from SkyStandards, colour from a per-survey theme. Montserrat, the
 * 4px spacing scale, the radius scale, the focus rules and the contrast bar are
 * constant across every survey this platform ever runs. The colour tokens under
 * "Theme: SCAN" are the only part a second project replaces — which is what
 * makes this a survey platform rather than a SkyNav-shaped one.
 *
 * Branding option B, from docs/00-plan.md section 13 (switched from C on
 * 2026-09-28): SCAN-led. The SCAN wordmark and the EU emblem share the
 * masthead over a cyan rule, the page is neutral greys, and the operator is one
 * line of footer text -- no SkyNav mark or colour anywhere. Grant Agreement
 * Article 17.2 requires the emblem to stay "distinct and separate" and to be at
 * least as prominent as other logos, so it has its own element and is the
 * tallest mark on the page.
 */

/*
 * Montserrat, self-hosted.
 *
 * SkyStandards makes Montserrat the application typeface and its licensing table
 * states it may be bundled and self-hosted (SIL OFL; OFL.txt sits beside the
 * files, as the licence requires). Self-hosted rather than pulled from a CDN for
 * two reasons: SkyStandards requires it, and on this surface the invitation
 * token is in the URL, so every third-party origin the page contacts is one more
 * place it could leak from.
 *
 * The files come from @fontsource-variable/montserrat, pinned to the same exact
 * version SkyWeb ships, so every SkyNav surface renders the same build. They are
 * copied into this repo rather than imported, because the respondent surface has
 * no Node build step and should keep working on a fresh checkout without one.
 * surveys/static/fonts/README.md has the command to refresh them.
 *
 * Two files, not ten: Montserrat is distributed only as a variable font now, one
 * per subset spanning the whole 300-700 axis, so the five weights this design
 * uses come from one file each.
 *
 * latin covers Western European accents, latin-ext the Central and Eastern
 * European ones. Between them they cover every respondent name and organisation
 * a European consortium will produce. The browser fetches only the subsets the
 * page actually needs.
 *
 * A browser old enough to support woff2 but not variable fonts renders this at
 * Regular throughout: headings stop being bold, nothing becomes unreadable.
 * That is the same posture as the rest of this stylesheet, which enhances HTML
 * that works without any of it.
 */

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  /* The variable axis, not a single weight. */
  font-weight: 300 700;
  /* swap, not block: the survey stays readable while the font arrives,
     which on a slow corporate link is the difference between a page and
     a blank rectangle. */
  font-display: swap;
  src: url("../fonts/montserrat-latin.311d352d9323.woff2") format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  /* The variable axis, not a single weight. */
  font-weight: 300 700;
  /* swap, not block: the survey stays readable while the font arrives,
     which on a slow corporate link is the difference between a page and
     a blank rectangle. */
  font-display: swap;
  src: url("../fonts/montserrat-latin-ext.d16dfe26bcd7.woff2") format('woff2-variations');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --- Structure: SkyStandards, constant ----------------------------------- */

:root {
  /* Montserrat is self-hosted above. The system stack behind it covers a
     browser without woff2 at all, where the page is plainer but intact. */
  --font-sans: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;

  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 8px;
  --radius-full: 9999px;

  --shadow-low: 0 1px 3px rgba(0, 78, 107, 0.08);
  --shadow-mid: 0 4px 12px rgba(0, 78, 107, 0.12);

  /* The reading column, for prose and questions. */
  --content-width: 46rem;
  /* The chrome -- masthead, funding band, footer -- which has to span at least
     as wide as the widest page or the header appears inset from the content
     beneath it. Section pages are this wide because of the rail. */
  --shell-width: 62rem;
}

/* --- Theme: SCAN ---------------------------------------------------------
 * Replace this block for another project. Nothing else changes.
 *
 * SCAN cyan is the only colour: the wordmark, the rule under the masthead, the
 * progress fill, and (stepped down) every control. Everything else is a cool
 * neutral grey, so the page reads as the project's and not as anyone's product.
 *
 * The SCAN wordmark cyan is #00A0DC, which measures 2.8:1 on white. It cannot
 * carry body text and cannot take white text on top of it, so it is confined to
 * the wordmark, the progress fill and rules. Anything interactive or textual
 * steps down the same ramp to --accent-strong (#00688F, 4.9:1) or darker.
 */

:root {
  /* The SCAN ramp, light to dark. */
  --project-hue: #00a0dc;
  --accent-strong: #00688f;
  --accent-stronger: #004e6b;
  --accent-wash: #eef7fb;

  --bg: #ffffff;
  --surface: #f5f8fa; /* neutral, barely cool */
  --surface-plain: #eef2f5;
  --border: #dde5ea;
  --border-plain: #c6d3db;

  --text: #33424a; /* 10:1 on white */
  --text-muted: #5a6b75; /* 5.2:1 on white */
  --text-faint: #7c8b94;
  --heading: #0b3a4a; /* near-black teal, 12:1 on white */

  --danger: #b0262c;
  --danger-wash: #fdf2f2;
  --success: #4f6600;
}

/* --- Reset and base ------------------------------------------------------ */

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

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.6;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

h1,
h2,
h3 {
  color: var(--heading);
  line-height: 1.25;
  margin: 0;
}

h1 {
  font-size: 1.95rem;
  font-weight: 700;
}
h2 {
  font-size: 1.35rem;
  font-weight: 600;
}
h3 {
  font-size: 1.1rem;
  font-weight: 600;
}

p {
  margin: 0 0 var(--space-4);
}
p:last-child {
  margin-bottom: 0;
}

a {
  color: var(--accent-strong);
}
a:hover {
  color: var(--accent-stronger);
}

/* One focus treatment everywhere. Visible on every interactive element is a
   SkyStandards requirement, and on a public-sector consultation it matters. */
:focus-visible {
  outline: 2px solid var(--accent-strong);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

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

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--accent-stronger);
  color: #fff;
  padding: var(--space-3) var(--space-4);
  z-index: 10;
}
.skip-link:focus {
  left: 0;
}

/* --- Masthead: SCAN and its funders ------------------------------------
 * The project on the left, the EU emblem with its funding statement and the
 * Joint Undertaking's logo on the right, over a 4px SCAN-cyan rule. The emblem
 * is its own element with nothing drawn on it (Article 17.2), and at 48px it
 * is the tallest mark in the masthead -- "at least as prominent" as any other.
 */

.masthead {
  border-bottom: 4px solid var(--project-hue);
  box-shadow: inset 0 -1px 0 var(--border);
}

.masthead__inner {
  max-width: var(--shell-width);
  margin: 0 auto;
  padding: var(--space-5) var(--space-4);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4) var(--space-8);
  flex-wrap: wrap;
}

.masthead__project {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
}

.wordmark {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  text-decoration: none;
}

/* Stand-in for the real SCAN SVG, which is still to come from WP2. See
   docs/00-plan.md section 13.5 — the PNG we hold is 720x236 and too coarse. */
.wordmark__project {
  font-size: 2rem;
  font-weight: 300;
  letter-spacing: 0.06em;
  color: var(--project-hue);
  line-height: 1;
}

.wordmark__divider {
  width: 1px;
  height: 1.7rem;
  background: var(--border-plain);
}

.wordmark__tool {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--heading);
  letter-spacing: 0.02em;
  line-height: 1;
}

.masthead__context {
  margin: 0;
  font-size: 0.75rem;
  color: var(--text-muted);
  letter-spacing: 0.04em;
  line-height: 1.4;
}

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

/* The emblem and the funding statement are one unit: Article 17.2 wants the
   statement displayed with the emblem, not somewhere else on the page. */
.funders__eu {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.funders__emblem {
  display: block;
  width: 72px;
  height: 48px;
  flex-shrink: 0;
}

.funders__statement {
  margin: 0;
  max-width: 7.5rem;
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--text);
}

.funders__ju-logo {
  display: block;
  width: auto;
  height: 48px;
  flex-shrink: 0;
}

/* --- Content -------------------------------------------------------------- */

.page {
  flex-grow: 1;
  width: 100%;
  max-width: var(--content-width);
  margin: 0 auto;
  padding: var(--space-8) var(--space-4) var(--space-12);
}

.stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.lead {
  font-size: 1.1rem;
  color: var(--text);
}

.panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
}

.panel--plain {
  background: var(--bg);
}

.prose p {
  margin-bottom: var(--space-4);
}

/* Headings inside long prose need air above them and a little below, or the
   privacy notice reads as one undifferentiated block. h1/h2/h3 reset to margin
   0 globally because most of this interface positions them with flex gaps;
   running text is the exception. */
.prose h2 {
  margin-top: var(--space-8);
  margin-bottom: var(--space-2);
  font-size: 1.2rem;
}

.prose h2:first-child {
  margin-top: 0;
}

.meta {
  font-size: 0.85rem;
  color: var(--text-muted);
}

/* Anti-phishing, and it answers the first question a recipient actually has.
   Someone who cannot tell why a message reached them treats it as spam. */
.provenance {
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--text-muted);
  border-left: 3px solid var(--border-plain);
  padding-left: var(--space-4);
}
.provenance strong {
  color: var(--text);
}

/* --- The section rail -----------------------------------------------------
 * Desktop only: on a phone it would push the questions below the fold, and the
 * progress bar already answers "how far through am I" in one line.
 */

.rail {
  display: none;
}

@media (min-width: 64rem) {
  .page--with-rail {
    max-width: 62rem;
    display: grid;
    grid-template-columns: 14rem minmax(0, 1fr);
    gap: var(--space-10);
    align-items: start;
  }

  .rail {
    display: block;
    /* Sticks below the masthead so it stays with the respondent down a long
       section, without covering the funding band on the way past. */
    position: sticky;
    top: var(--space-6);
  }

  /* Once the rail carries it, the copy under the form is a duplicate. */
  .pass-it-on {
    display: none;
  }
}

.rail__heading {
  margin: 0 0 var(--space-3);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.rail__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.rail__link {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: var(--text-muted);
  font-size: 0.85rem;
  line-height: 1.4;
}

/* On a section page the rail entries are submit buttons (they save the page
   before moving), so they shed the button look and read as the links they are
   everywhere else. */
button.rail__link {
  width: 100%;
  border: 0;
  background: none;
  font: inherit;
  font-size: 0.85rem;
  text-align: left;
  cursor: pointer;
}

a.rail__link:hover,
button.rail__link:hover {
  background: var(--surface);
  color: var(--text);
}

button.rail__link:focus-visible {
  outline: 2px solid var(--accent-strong);
  outline-offset: 1px;
}

/* The marker is the state: a number while a section is outstanding, a tick once
   it is done, filled while the respondent is in it. */
.rail__marker {
  flex-shrink: 0;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: var(--radius-full);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--text-muted);
  background: var(--bg);
}

.rail__marker--done {
  border-color: var(--accent-strong);
  background: var(--accent-strong);
  color: #fff;
}

.rail__item--current .rail__link {
  background: var(--surface);
  color: var(--heading);
  font-weight: 600;
}

.rail__item--current .rail__marker {
  border-color: var(--accent-stronger);
  background: var(--accent-stronger);
  color: #fff;
}

/* After a submit attempt with gaps: which sections still need something. Gold,
   not red -- nothing is wrong, it is just not finished. */
.rail__marker--missing {
  border-color: #917000;
  background: #fdf8e7;
  color: #735900;
}

.rail__needed {
  display: block;
  font-size: 0.7rem;
  font-weight: 600;
  color: #735900;
}

.rail__partial {
  display: block;
  font-size: 0.7rem;
  font-weight: 400;
  color: var(--text-faint);
}

.rail__item--review {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border);
}

.rail__aside {
  margin: var(--space-6) 0 0;
  padding-top: var(--space-4);
  border-top: 1px solid var(--border);
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--text-muted);
}

/* Question on one line, the way out on the next and centred under it, so the
   link reads as the action rather than as the tail of a sentence. */
.rail__aside {
  text-align: center;
}
.rail__aside span {
  display: block;
  margin-bottom: 0.3rem;
}
.rail__aside a {
  display: inline-block;
}

/* --- Progress ------------------------------------------------------------
 * The one interface element with a consistently measured effect on completion.
 */

.progress {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.progress__labels {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-4);
}

.progress__section {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--heading);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.progress__count {
  font-size: 0.8rem;
  color: var(--text-muted);
}

.progress__track {
  height: 6px;
  background: var(--border);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.progress__fill {
  height: 6px;
  background: var(--project-hue);
  transition: width 0.25s ease;
}

/* --- Questions ------------------------------------------------------------ */

.question {
  border-top: 1px solid var(--border);
  padding-top: var(--space-6);
}
.question:first-of-type {
  border-top: none;
  padding-top: 0;
}

.question__text {
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--heading);
  line-height: 1.4;
  margin: 0 0 var(--space-2);
}

.question__required {
  color: var(--accent-strong);
  font-weight: 700;
  margin-left: var(--space-1);
}

.question__help {
  font-size: 0.9rem;
  color: var(--text-muted);
  margin: 0 0 var(--space-4);
}

.question__error {
  font-size: 0.9rem;
  color: var(--danger);
  font-weight: 500;
  background: var(--danger-wash);
  border-left: 3px solid var(--danger);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  margin: 0 0 var(--space-4);
}

/* The optional comment under a question: a quiet disclosure, so a page of
   questions does not become a page of empty boxes. */
.question__comment {
  margin-top: var(--space-3);
}

.question__comment summary {
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--accent-strong);
  width: fit-content;
}

.question__comment summary:focus-visible {
  outline: 2px solid var(--accent-strong);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.question__comment-hint {
  font-weight: 400;
  color: var(--text-muted);
}

.question__comment textarea {
  margin-top: var(--space-2);
}

.choices {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  padding: 0;
  border: 0;
}

.choice__other {
  margin-top: var(--space-2);
}

/* "Please specify" appears once Other is ticked. Browsers without :has() keep
   showing it all the time, which is how it worked before -- nothing is lost. */
@supports selector(:has(*)) {
  .choices:not(:has(input[value="other"]:checked)) .choice__other {
    display: none;
  }
}

/* The whole row is the target, so a mis-aimed tap still selects. 44px minimum
   per the SkyStandards touch-target rule. */
.choice {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg);
  cursor: pointer;
  min-height: 44px;
  transition: border-color 0.12s ease, background-color 0.12s ease;
}

.choice:hover {
  border-color: var(--accent-strong);
}

.choice:has(input:checked) {
  border-color: var(--accent-strong);
  background: var(--accent-wash);
}

.choice:has(input:focus-visible) {
  outline: 2px solid var(--accent-strong);
  outline-offset: 2px;
}

.choice input {
  width: 18px;
  height: 18px;
  margin: 0.2rem 0 0;
  accent-color: var(--accent-strong);
  flex-shrink: 0;
}

.choice__label {
  flex-grow: 1;
}

.choice:has(input:checked) .choice__label {
  font-weight: 500;
  color: var(--heading);
}

.choice__help {
  display: block;
  font-size: 0.85rem;
  color: var(--text-muted);
  font-weight: 400;
}

/* --- Scale ---------------------------------------------------------------- */

.scale {
  border: 0;
  margin: 0;
  padding: 0;
}

.scale__points {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.scale__point {
  flex: 1 1 3.5rem;
  min-width: 3.5rem;
}

.scale__point input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.scale__point span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
}

.scale__point input:checked + span {
  border-color: var(--accent-strong);
  background: var(--accent-strong);
  color: #fff;
}

.scale__point input:focus-visible + span {
  outline: 2px solid var(--accent-strong);
  outline-offset: 2px;
}

.scale__ends {
  display: flex;
  justify-content: space-between;
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-top: var(--space-2);
}

/* --- Ranking -------------------------------------------------------------- */

.rank-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  margin-bottom: 2px;
  min-height: 44px;
}

/* The type selector matters: plain `.rank-row input` ties on specificity with
   the generic `input[type="number"] { width: 100% }` below, which comes later
   and won -- the box spanned the card and shoved the option text out past its
   right edge. */
.rank-row input[type="number"] {
  width: 4rem;
  flex: 0 0 4rem;
  text-align: center;
}

.rank-row__label {
  flex: 1 1 auto;
  min-width: 0;
  cursor: pointer;
}

/* Added by ranking.js; without it the number boxes do the whole job. */
.rank-hint {
  margin: 0 0 var(--space-2);
  font-size: 0.85rem;
  color: var(--text-muted);
}

.rank-grip {
  flex: 0 0 auto;
  width: 2rem;
  min-height: 2.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--text-faint);
  cursor: grab;
  /* Without this a touch drag scrolls the page instead of moving the row. */
  touch-action: none;
}
.rank-grip svg {
  fill: currentColor;
}
.rank-grip:hover,
.rank-grip:focus-visible {
  color: var(--accent-strong);
  background: var(--accent-wash);
}
.rank-grip:focus-visible {
  outline: 2px solid var(--accent-strong);
  outline-offset: 1px;
}

.rank-row--dragging {
  background: var(--accent-wash);
  border-color: var(--accent-strong);
  box-shadow: var(--shadow-mid);
}
.rank-row--dragging .rank-grip {
  cursor: grabbing;
}

/* --- Inputs --------------------------------------------------------------- */

label.field-label {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text);
  margin-bottom: var(--space-2);
}

input[type="text"],
input[type="email"],
input[type="number"],
textarea {
  width: 100%;
  font-family: inherit;
  font-size: 1rem;
  color: var(--text);
  background: var(--bg);
  padding: var(--space-3) var(--space-3);
  border: 1px solid var(--border-plain);
  border-radius: var(--radius-sm);
  min-height: 44px;
}

textarea {
  min-height: 7rem;
  resize: vertical;
  line-height: 1.6;
}

input:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--accent-strong);
  outline-offset: 0;
  border-color: var(--accent-strong);
}

.passcode-input {
  font-size: 1.25rem;
  letter-spacing: 0.12em;
  font-family: var(--font-mono);
  text-transform: uppercase;
}

/* --- Buttons -------------------------------------------------------------- */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1;
  padding: var(--space-3) var(--space-6);
  min-height: 44px;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
}

.button--primary {
  background: var(--accent-strong);
  color: #fff;
}
.button--primary:hover {
  background: var(--accent-stronger);
  color: #fff;
}

.button--ghost {
  background: transparent;
  border-color: var(--accent-strong);
  color: var(--accent-strong);
}
.button--ghost:hover {
  background: var(--accent-wash);
  color: var(--accent-stronger);
}

.button--quiet {
  background: transparent;
  border-color: var(--border-plain);
  color: var(--text-muted);
  font-weight: 500;
}
.button--quiet:hover {
  color: var(--text);
  border-color: var(--text-muted);
}

.button--danger {
  background: transparent;
  border-color: var(--danger);
  color: var(--danger);
}

.actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-top: var(--space-8);
}

.actions__right {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-left: auto;
}

.save-note {
  font-size: 0.85rem;
  color: var(--text-muted);
}

/* --- Notices -------------------------------------------------------------- */

.notice {
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-md);
  border-left: 3px solid var(--accent-strong);
  background: var(--accent-wash);
  font-size: 0.95rem;
}

/* A flash message sits in <main> ahead of the content. Where <main> is the
   rail grid it would otherwise take a grid cell of its own and push the rail
   and the page into the wrong columns. */
.page--with-rail > .notice {
  grid-column: 1 / -1;
}

.notice--warning {
  border-left-color: #917000;
  background: #fdf8e7;
}

.notice--danger {
  border-left-color: var(--danger);
  background: var(--danger-wash);
}

/* --- Review --------------------------------------------------------------- */

.review-section {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.review-section__head {
  background: var(--surface);
  padding: var(--space-4) var(--space-5);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-4);
  border-bottom: 1px solid var(--border);
}

.review-entry {
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--border);
}
.review-entry:last-child {
  border-bottom: none;
}

.review-entry__question {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--heading);
  margin: 0 0 var(--space-2);
}

.review-entry__values {
  margin: 0;
  padding-left: var(--space-5);
  color: var(--text);
}

.review-entry__empty {
  color: var(--text-muted);
  font-style: italic;
}

/* --- Footer --------------------------------------------------------------
 * A quiet grey band: the Joint Undertaking's statement, the links, and the
 * Article 17.3 disclaimer with the operator named once in plain text. No logo
 * and no colour but the link accent.
 */

.site-footer {
  margin-top: var(--space-8);
  background: var(--surface);
  border-top: 1px solid var(--border);
}

.site-footer__inner {
  max-width: var(--shell-width);
  margin: 0 auto;
  padding: var(--space-6) var(--space-4) var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.site-footer__ju {
  margin: 0;
  font-size: 0.875rem;
  color: var(--text);
}

.site-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-6);
}

.site-footer__links a {
  font-size: 0.875rem;
  color: var(--accent-strong);
}
.site-footer__links a:hover {
  color: var(--accent-stronger);
}

/* Article 17.3 disclaimer. Small, but it must be present and verbatim. */
.site-footer__disclaimer {
  margin: 0;
  padding-top: var(--space-4);
  border-top: 1px solid var(--border);
  font-size: 0.72rem;
  line-height: 1.6;
  color: var(--text-muted);
}

.site-footer__disclaimer a {
  color: var(--accent-strong);
}

/* --- Small screens -------------------------------------------------------- */

@media (max-width: 40rem) {
  .page {
    padding: var(--space-6) var(--space-4) var(--space-10);
  }
  .panel {
    padding: var(--space-5);
  }
  h1 {
    font-size: 1.6rem;
  }
  /* Primary action first. On a phone the thumb starts at the bottom, but the
     eye starts at the top, and Continue is what almost everyone wants next --
     Back is the exception. The save note stays with Continue because it is
     reassurance about the action just taken. */
  .actions {
    flex-direction: column-reverse;
    align-items: stretch;
  }
  .actions__right {
    margin-left: 0;
    flex-direction: column-reverse;
    align-items: stretch;
  }
  .actions .button {
    width: 100%;
  }

  /* The funders drop to their own row under the wordmark, emblem first. */
  .masthead__inner {
    align-items: flex-start;
  }
  .funders {
    gap: var(--space-4);
  }
  .funders__emblem {
    width: 60px;
    height: 40px;
  }
  .funders__ju-logo {
    height: 40px;
  }
}

/* --- Print ----------------------------------------------------------------
 * Someone will print a section to discuss it in a meeting, and someone will
 * print the review page as their own record. Both should be readable.
 */

@media print {
  .masthead,
  .site-footer {
    background: #fff !important;
    color: #000;
  }
  .actions,
  .skip-link,
  .progress {
    display: none;
  }
  body {
    font-size: 11pt;
  }
  .panel,
  .review-section {
    border: 1px solid #999;
    break-inside: avoid;
  }
}