/*
    Carinthia University of Applied Sciences — survey theme override layer.

    Loaded after css/variations/theme_mango.css (Bootstrap 5 + LimeSurvey question types),
    so this file only carries CU brand decisions. Section numbers refer to the
    CU Brand Design Guidelines.
*/

/*
    Guideline 2.1 permits only Inter28, a licensed variant of Inter. These files are named
    for the upstream Inter release; if they have not yet been replaced with the licensed
    Inter28 webfonts, that swap is still outstanding. A Bold (700) cut is not present, so
    --cu-weight-bold currently resolves to 600 — raise it to 700 once the file exists.
*/
@font-face {
    font-family: Inter28;
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/inter-latin-400.woff2") format("woff2");
}

@font-face {
    font-family: Inter28;
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("../fonts/inter-latin-500.woff2") format("woff2");
}

@font-face {
    font-family: Inter28;
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("../fonts/inter-latin-600.woff2") format("woff2");
}

:root {
    /* Guideline 4.2 — the complete palette, no other values. */
    --cu-new-era: #ff4332;
    --cu-bold-heritage: #e63525;
    --cu-next-generation: #b6ecec;
    --cu-neutral-core: #fff;
    --cu-functional-black: #000;
    --cu-light-foundation: #f2f2f2;
    --cu-neutral-foundation: #ccc;
    --cu-balanced-foundation: #adadad;
    --cu-solid-foundation: #737373;

    /*
        Next Generation darkened for hover only. Guideline 4.2 restricts the accent to
        digital buttons, CTAs and highlights, and gives no interaction states.
    */
    --cu-next-generation-hover: #9fdada;

    --cu-font: Inter28, Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
    --cu-weight-regular: 400;
    --cu-weight-medium: 500;
    --cu-weight-bold: 600;

    /* Guideline 3.4 — the rounded formal language carries into UI components. */
    --cu-radius-card: 16px;
    --cu-radius-control: 8px;
    --cu-radius-pill: 999px;

    /*
        The navbar logo. brandlogofile points at the full lockup, logo.png, so this height is
        what decides its width: the artwork is 1904x421, and 45px puts it at 204px — just past
        the 200px --cu-lockup-width the survey list treats as the floor for three lines of type.
        Below roughly 40px the "ANGEWANDTE WISSENSCHAFTEN" line stops being readable, which is
        the reason this is not simply the 34px the compact monogram used to sit at.

        Guideline 1.1 — the width of the "C" is the minimum clear space around the logo. That is
        13.6% of the lockup width (derived at --cu-lockup-clearspace below), and since the navbar
        sizes by height instead, the same distance is 0.136 x 4.5226 = 0.615 of the height.
    */
    --cu-logo-height: 45px;
    --cu-logo-clearspace: calc(var(--cu-logo-height) * 0.615);

    /* The measure the survey screens share with the navbar and the footer. See "Content width". */
    --cu-content-max: 1140px;

    /*
        Two border tokens, because WCAG 1.4.11 treats them differently. A card outline is
        decoration and needs no ratio; the edge of an input identifies the component and needs
        3:1, which Neutral Foundation misses at 1.61:1 on white. Solid Foundation gives 4.74:1.
    */
    --cu-border-decorative: var(--cu-neutral-foundation);
    --cu-border-interactive: var(--cu-solid-foundation);

    --bs-primary: var(--cu-new-era);
    --bs-primary-rgb: 255, 67, 50;
    --bs-body-font-family: var(--cu-font);
    --bs-border-color: var(--cu-neutral-foundation);
}

/* ── Typography (guideline 2.2–2.3) ── */

html,
body,
.btn,
.form-control,
.form-select,
.form-label,
.dropdown-menu,
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--cu-font) !important;
}

body {
    background-color: var(--cu-light-foundation);
    color: var(--cu-functional-black);
    font-weight: var(--cu-weight-regular);
    /*
        Guideline 2.2 specifies 1.2 for body copy, but 2.3 exempts longer running text so it
        stays readable. Survey questions and intros are running text, and 1.2 would also fail
        WCAG 1.4.12, so the exemption applies throughout.
    */
    line-height: 1.5;
}

/*
    Headline treatment: Medium, kerning reduced 2%, line-height 1 (guideline 2.2–2.3).
    Bold is reserved for cover headlines — here, the welcome screen only.
*/
h1, h2, h3,
.h1, .h2, .h3,
.large-heading,
.completed-heading {
    font-weight: var(--cu-weight-medium);
    letter-spacing: -0.02em;
    line-height: 1;
    color: var(--cu-functional-black);
}

h4, h5, h6,
.h4, .h5, .h6 {
    font-weight: var(--cu-weight-medium);
    letter-spacing: -0.01em;
    line-height: 1.2;
}

.large-heading {
    font-size: clamp(1.75rem, 4vw, 2.25rem);
    margin-bottom: 1rem;
}

/* Guideline 2.3 — subheadline: smaller, Functional Black, Regular or Medium. */
.form-heading {
    font-weight: var(--cu-weight-regular);
    font-size: 1.05rem;
    line-height: 1.55;
    color: var(--cu-functional-black);
    margin-bottom: 1rem;
}

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

/* ── Links ── */

/*
    New Era is 3.44:1 on white and 3.07:1 on Light Foundation, so it fails WCAG 2.1 AA
    (4.5:1) at body size — and guideline 1.4 makes WCAG 2.1 binding. Body-size links are
    therefore set in Functional Black and carry a New Era underline, which only has to clear
    the 3:1 non-text threshold. Red is reserved below for large text and non-text UI.
*/
a:not(.btn) {
    color: var(--cu-functional-black);
    text-decoration: underline;
    text-decoration-color: var(--cu-new-era);
    text-decoration-thickness: 2px;
    text-underline-offset: 0.2em;
}

a:not(.btn):hover,
a:not(.btn):focus-visible {
    color: var(--cu-functional-black);
    text-decoration-color: var(--cu-bold-heritage);
    background-color: rgb(255 67 50 / 12%);
}

a:not(.btn):focus-visible {
    outline: 2px solid var(--cu-new-era);
    outline-offset: 2px;
}

/* ── Buttons ── */

/*
    Guideline 4.2 assigns Next Generation to digital buttons, CTAs and highlights. It also
    solves the contrast problem: white on New Era is only 3.44:1 and white on Bold Heritage
    4.29:1, both short of 4.5:1, while Functional Black on Next Generation is 16.2:1.
*/
.btn {
    border-radius: var(--cu-radius-control);
    font-weight: var(--cu-weight-medium);
}

.btn-primary,
a.btn-primary {
    background-color: var(--cu-next-generation);
    border-color: var(--cu-next-generation);
    color: var(--cu-functional-black);
    font-weight: var(--cu-weight-bold);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary:active:focus,
a.btn-primary:hover,
a.btn-primary:focus {
    background-color: var(--cu-next-generation-hover);
    border-color: var(--cu-next-generation-hover);
    color: var(--cu-functional-black);
}

.btn-primary:disabled,
.btn-primary.disabled {
    background-color: var(--cu-neutral-foundation);
    border-color: var(--cu-neutral-foundation);
    color: var(--cu-solid-foundation);
}

/* Secondary / back action: quiet outline, never competing with the primary CTA. */
.btn-outline-secondary,
.btn-secondary {
    color: var(--cu-functional-black);
    border: 2px solid var(--cu-neutral-foundation);
    background-color: var(--cu-neutral-core);
}

.btn-outline-secondary:hover,
.btn-outline-secondary:focus,
.btn-secondary:hover,
.btn-secondary:focus {
    color: var(--cu-functional-black);
    border-color: var(--cu-functional-black);
    background-color: var(--cu-neutral-core);
}

.btn-outline-secondary:active,
.btn-outline-secondary.active {
    color: var(--cu-functional-black);
    border-color: var(--cu-bold-heritage);
    background-color: var(--cu-light-foundation);
}

/*
    Focus ring in New Era. Non-text UI only needs 3:1, which red clears on both
    Neutral Core and Light Foundation.
*/
.btn:focus-visible,
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    border-color: var(--cu-new-era);
    outline: none;
    box-shadow: 0 0 0 3px rgb(255 67 50 / 35%);
}

/* ── Forms ── */

.form-control,
.form-select,
.form-check-input {
    border-radius: var(--cu-radius-control);
    border-color: var(--cu-border-interactive);
    color: var(--cu-functional-black);
}

.form-check-input {
    border-radius: 4px;
}

.form-check-input[type="radio"] {
    border-radius: var(--cu-radius-pill);
}

.form-check-input:checked {
    background-color: var(--cu-new-era);
    border-color: var(--cu-new-era);
}

/*
    Survey answer radios and checkboxes do NOT use Bootstrap's .form-check-input. LimeSurvey
    hides the real input and draws the control with ::before (the ring) and ::after (the dot or
    tick) on the label, so the rules above never reach them and everything here has to be
    restated against that structure.

    The variation's values are all off-palette: #6E748C rings, #ED5046 dots and, worst,
    #ED5046 on the *selected* option's label text, which is 3.9:1 on white and so fails 4.5:1
    exactly where a respondent needs to read back their own answer. Selection is signalled by
    the ring, the dot and Medium weight instead, so the text can stay Functional Black.

    The body prefix is what wins these: the variation reaches 0,1,2 with
    "body .answer-item label::after", so a bare class rule is not enough.
*/
body .answer-item label::before,
body .radio-item label::before {
    border-color: var(--cu-border-interactive);
}

body .checkbox-item label::before {
    border-color: var(--cu-border-interactive);
}

/*
    The data-security consent box is deliberately outlined in red to mark it as required, which
    is worth keeping — it just has to be New Era rather than the variation's #ED5046. As a
    non-text control the 3:1 threshold applies, which red clears.
    ".privacy .checkbox-item label::before" is 0,2,2, hence the body prefix here.
*/
body .privacy .checkbox-item label::before {
    border-color: var(--cu-new-era);
}

body .answer-item label::after,
body .radio-item label::after,
body .radio-item input[type="radio"] + label::after {
    background-color: var(--cu-new-era);
}

body .radio-item input[type="radio"]:checked + label::before,
body .checkbox-item input[type="checkbox"]:checked + label::before {
    border-color: var(--cu-new-era);
}

body .radio-item input[type="radio"]:checked + label::after {
    background-color: var(--cu-new-era);
}

body .checkbox-item input[type="checkbox"]:checked + label::after {
    color: var(--cu-new-era);
}

body input[type="checkbox"]:checked::after,
body .checkbox input[type="checkbox"]:checked::after,
body .checkbox-inline input[type="checkbox"]:checked::after {
    background-color: var(--cu-new-era);
    border-color: var(--cu-new-era);
}

body .radio-item input[type="radio"]:checked + label,
body .checkbox-item input[type="checkbox"]:checked + label {
    color: var(--cu-functional-black);
    font-weight: var(--cu-weight-medium);
}

/*
    The variation's focus ring here is rgba(66, 0, 255, 0.2) — blue, and at 20% alpha far too
    faint to read as a focus indicator. Solid New Era clears the 3:1 that non-text UI needs.
*/
body .radio-item input[type="radio"]:focus-visible + label::before,
body .checkbox-item input[type="checkbox"]:focus-visible + label::before {
    box-shadow: 0 0 0 3px var(--cu-new-era);
}

/*
    Toggle-button answers (the bootstrap_buttons question theme) run through Bootstrap's
    .btn-check pair, which the variation styles off-palette: unchecked is #6E748C on white, and
    the selected state puts white on #ED5046 at 3.9:1 — again failing 4.5:1 on the answer the
    respondent just chose. Selected reuses the Next Generation treatment of the primary CTA.
    ".btn-check + .btn-primary:hover" is 0,3,1, so these have to carry .question-container.
*/
.question-container .btn-check + .btn {
    color: var(--cu-functional-black);
    background-color: var(--cu-neutral-core);
    border: 2px solid var(--cu-border-interactive);
}

.question-container .btn-check + .btn-primary:hover,
.question-container .btn-check:checked + .btn-primary,
.question-container .btn-check + .btn-primary:active,
.question-container .btn-check + .btn-primary.active,
.question-container .btn-check + .btn-primary:active:focus {
    color: var(--cu-functional-black);
    background-color: var(--cu-next-generation);
    border-color: var(--cu-functional-black);
}

.question-container .btn-check:focus-visible + .btn {
    color: var(--cu-functional-black);
    outline: 2px solid var(--cu-new-era);
    outline-offset: 2px;
}

.form-label,
.control-label {
    font-weight: var(--cu-weight-medium);
    color: var(--cu-functional-black);
}

/* ── Array (table) questions ── */

/*
    Array questions were left almost entirely to the defaults: Bootstrap's #212529 for the table
    body and the variation's #6E748C at 1.14rem/600 for both the row stems and the column
    headers, which is heavy for a dense grid. The row stem keeps Medium because it is the
    subquestion being asked; column headers are ordinary body text.

    These target th/td rather than label, which is why the answer-label rules above miss them.
*/
.question-container table.ls-answers,
.question-container table.ls-answers > thead,
.question-container table.ls-answers > tbody,
.question-container table.ls-answers tr,
.question-container table.ls-answers td {
    color: var(--cu-functional-black);
}

.question-container table.ls-answers th {
    color: var(--cu-functional-black);
    font-size: 1rem;
}

.question-container table.ls-answers tbody th {
    font-weight: var(--cu-weight-medium);
}

.question-container table.ls-answers thead th {
    font-weight: var(--cu-weight-regular);
    vertical-align: bottom;
}

/* Striping in Light Foundation rather than the variation's blue-tinted #F9F9FB. */
.question-container .ls-even,
.question-container table.ls-answers tbody tr.ls-even {
    background-color: var(--cu-light-foundation);
}

/*
    Row hover was making the row harder to read instead of easier: .table-hover pushes the stem to
    #6E748C on a blue-tinted #EEEFF7, which measures 4.13:1 and so drops below AA on exactly the
    row the respondent is pointing at. The hover band stays, in Light Foundation, and the text
    stays Functional Black.

    ".table-hover > tbody > tr:hover > td" is 0,2,3, so the child combinators have to be reproduced
    to get past it.
*/
.question-container table.ls-answers.table-hover > tbody > tr:hover > th,
.question-container table.ls-answers.table-hover > tbody > tr:hover > td {
    color: var(--cu-functional-black);
    background-color: var(--cu-light-foundation);
}

/* ── Net-Promoter-Score scale (question theme) ── */

/*
    nps.css loads after cuas.css, so every rule here needs to out-specify it rather than rely on
    order — hence the .question-container prefix throughout.

    Its own palette is off-brand (#F5F5F5 cells, #C1C1C1 rules) and, more importantly, it marks
    the chosen value with #CECECE against the #F5F5F5 of its neighbours. That is roughly 1.35:1,
    nowhere near the 3:1 a non-text state indicator needs, so on this scale the answer a
    respondent picked is almost invisible. Next Generation carries the selection instead, which is
    both on-palette and consistent with every other chosen answer in the theme.

    Mint on white is itself only about 1.24:1, so the fill cannot be the sole state cue. The inset
    ring is the same treatment as the emoji and SVO scales: black against mint is 16:1, and the
    number is already Functional Black at body size. Weight also changes, so 1.4.1 is covered
    twice.

    The red/yellow/green band along the top is deliberately left alone: it encodes detractor
    through promoter, so it is information rather than decoration.
*/
.question-container .nps-wrapper .nps-table > ul > li {
    border-color: var(--cu-neutral-foundation);
}

/*
    Physical border-left on purpose, unlike the rest of this file. nps.css draws this edge with a
    physical "border-left: 1px solid #C1C1C1" and offers no RTL variant for it, so a logical
    property here would paint border-inline-start — border-right under RTL, where there is no
    width — and leave the off-palette grey showing on the left. Matching the third-party rule is
    the only way to actually recolour it.
*/
.question-container .nps-wrapper .nps-table > ul > li:first-child {
    border-left-color: var(--cu-neutral-foundation);
}

.question-container .nps-wrapper .nps-table .control-label {
    background-color: var(--cu-neutral-core);
    color: var(--cu-functional-black);
    font-weight: var(--cu-weight-regular);
    font-size: 1rem;
}

.question-container .nps-wrapper .nps-table .control-label:hover {
    background-color: var(--cu-light-foundation);
}

.question-container .nps-wrapper .nps-table input[type="radio"]:checked + label {
    background-color: var(--cu-next-generation);
    color: var(--cu-functional-black);
    font-weight: var(--cu-weight-bold);
    box-shadow: inset 0 0 0 2px var(--cu-functional-black);
}

/*
    The real input sits at left: -9999em, so it cannot show a focus ring itself and the variation
    offers none — leaving this scale unusable by keyboard. The ring goes on the label instead.
*/
.question-container .nps-wrapper .nps-table input[type="radio"]:focus-visible + label {
    outline: 3px solid var(--cu-new-era);
    outline-offset: -3px;
}

.question-container .nps-wrapper .nps-text {
    color: var(--cu-functional-black);
    font-size: 0.95rem;
}

/* ── Bundled widgets: select-picker, date picker, ranking ── */

/*
    Three question types render through JavaScript widgets rather than plain inputs, so none of the
    form styling above reaches them and each kept its own palette.

    The dropdown was the only real accessibility failure of the three: bootstrap-select paints the
    "Please choose..." placeholder #999 on white, which is 2.85:1 and well under AA for text. The
    other two were palette drift — the ranking list at #6E748C is 4.63:1 and does pass.

    The placeholder goes to Solid Foundation (4.74:1) rather than to black, so that it still reads
    as a prompt rather than as a chosen value; the value itself is black. ".border" is a Bootstrap
    utility and ships !important, which is why the border needs it here too.
*/
.question-container .bootstrap-select > .dropdown-toggle {
    border-color: var(--cu-border-interactive) !important;
    border-radius: var(--cu-radius-control);
    /* the widget inherits 0.9975rem, just under the 16px at which iOS Safari zooms on focus */
    font-size: 1rem;
}

/* Set on the button so the three nested wrappers bootstrap-select inserts all inherit it. */
.question-container .bootstrap-select > .dropdown-toggle,
.question-container .bootstrap-select > .dropdown-toggle .filter-option-inner-inner {
    color: var(--cu-functional-black);
}

.question-container .bootstrap-select > .dropdown-toggle.bs-placeholder,
.question-container .bootstrap-select > .dropdown-toggle.bs-placeholder .filter-option-inner-inner {
    color: var(--cu-solid-foundation);
}

/* Multiple-Choice-Dropdown leaves its selects entirely unstyled, so they fall back to the
   browser's own #767676 chrome. */
.question-container select.mcd-select {
    border: 1px solid var(--cu-border-interactive);
    border-radius: var(--cu-radius-control);
    color: var(--cu-functional-black);
    font-size: 1rem;
}

/*
    .input-group-addon is two unrelated things wearing one class: the date picker's calendar
    button, and the static prefixes and suffixes that sit beside numeric and text inputs. The
    variation paints both white on #ED5046 from ".fruity_twentythree .input-group-addon" (0,2,0),
    which outranks .btn-primary (0,1,0) — and that colouring was only ever safe for the button,
    since white on #ED5046 is 3.6:1: enough for a glyph at 3:1, a failure for affix text.

    So they are split. Affixes are static labels and get the neutral treatment; only the button
    takes the accent, which is what guideline 4.2 reserves it for. Equal specificity between the
    two rules, so the date one has to stay second to win on the button.
*/
.question-container .input-group-addon {
    background-color: var(--cu-light-foundation);
    border: 1px solid var(--cu-border-interactive);
    color: var(--cu-functional-black);
}

.date-timepicker-group .input-group-addon {
    background-color: var(--cu-next-generation);
    border: 2px solid var(--cu-functional-black);
    color: var(--cu-functional-black);
}

/*
    The calendar itself, which only the button above opens. tempus-dominus declares its palette as
    custom properties on :root and appends the widget to <body>, so the popup is out of reach of any
    .question-container chain and has to be recoloured through those properties. Left alone it
    paints the selected day #0D6EFD and a date range #01419E.

    Mint with black rather than New Era with white, matching the NPS and emoji scales: white on New
    Era is 3.2:1 and the day cell is text. active-border-color is the equivalent of the inset ring
    those scales draw — the widget spends it on border-bottom-color of the active cell — and it is
    what keeps the selection from being mint on white at 1.3:1.
*/
:root {
    --td-active-bg: var(--cu-next-generation);
    --td-active-color: var(--cu-functional-black);
    --td-active-border-color: var(--cu-functional-black);
    --td-range-bg: var(--cu-light-foundation);
    --td-disabled-color: var(--cu-solid-foundation);
}

/*
    Ranking: the choices are answer labels and should read like every other one. The tint marking
    the drop target is kept, being the only thing that distinguishes the two columns, and moves
    from the variation's blue-tinted #F9F9FB to Light Foundation. The red outline that marks an
    item as ranked is likewise kept and only brought into palette.

    The variation keys all of this off ".select-sortable-lists:not(.ranking-advanced-style) …",
    which reaches 0,4,0 on the item colour — a plain ".question-container li.ls-choice" is 0,3,1 and
    loses. The chain is therefore mirrored here with .question-container added on top of it.
*/
.question-container .select-sortable-lists:not(.ranking-advanced-style) .ranking-sorted-items {
    background-color: var(--cu-light-foundation);
}

.question-container .select-sortable-lists:not(.ranking-advanced-style) .ranking-available-items .sortable-item,
.question-container .select-sortable-lists:not(.ranking-advanced-style) .ranking-sorted-items .sortable-item,
.question-container .select-sortable-lists:not(.ranking-advanced-style) .sortable-item .selector__dragHandle {
    color: var(--cu-functional-black);
}

.question-container .select-sortable-lists:not(.ranking-advanced-style) .list-group-item {
    border-color: var(--cu-neutral-foundation);
}

/* The ranked column keeps its red outline as the "this one is placed" cue; only 3:1 applies. */
.question-container .select-sortable-lists:not(.ranking-advanced-style) .ranking-sorted-items .sortable-item {
    border-color: var(--cu-new-era);
}

/*
    Ranking Advanced is a separate question theme (list / buttons / blocks; bubbles exist in the
    markup but are not offered in the visualisation control). Core ranking is handled above and
    explicitly excluded via :not(.ranking-advanced-style). Nothing here was verified on a live
    survey: this instance has 28 core ranking questions and zero ranking_advanced ones.

    Two stylesheets paint it. Mango keys the list/buttons chrome off
    ".ranking-advanced-style .ranking-advanced-available-items …" (0,3,0) and the ranked outline
    off ".ranking-advanced-style .sortable-rank" (0,2,0). The question theme's ranking.css then
    loads after cuas.css and sets grey block tiles and a grey bubble gradient at 0,3,0, plus an
    infinite skew animation on the bubbles. Extra .question-container on the same chain is enough
    to outrank both.

    Mapping follows the core ranking treatment: the pool is Light Foundation, placed items keep a
    New Era outline as the "this one is ranked" cue, text is Functional Black. The bubble motion
    is stopped — it is decorative, infinite, and the theme already declined Fruity's animate.css
    options on guideline 7.3 / WCAG 2.2.2 grounds.
*/
.question-container .ranking-advanced-style .ranking-advanced-available-items {
    background-color: var(--cu-light-foundation);
}

.question-container .ranking-advanced-style .ranking-advanced-available-items .sortable-rank-subtitle,
.question-container .ranking-advanced-style .sortable-rank-subtitle {
    color: var(--cu-functional-black);
}

.question-container .ranking-advanced-style .list-group-item,
.question-container .ranking-advanced-style .ranking-advanced-available-items .sortable-item,
.question-container .ranking-advanced-style .sortable-item {
    color: var(--cu-functional-black);
    border-color: var(--cu-neutral-foundation);
    background-color: var(--cu-neutral-core);
}

.question-container .ranking-advanced-style .ranking-advanced-available-items .selector__dragHandle,
.question-container .ranking-advanced-style .ranking-advanced-available-items .selector__index_row {
    color: var(--cu-functional-black);
}

.question-container .ranking-advanced-style .sortable-rank,
.question-container .ranking-advanced-style .ranking-advanced-sorted-items .sortable-item {
    border-color: var(--cu-new-era);
}

.question-container .ranking-advanced-style .sortable-rank .selector__dragHandle,
.question-container .ranking-advanced-style .sortable-rank .selector__index_row,
.question-container .ranking-advanced-style .ranking-advanced-sorted-items .sortable-item .selector__dragHandle,
.question-container .ranking-advanced-style .ranking-advanced-sorted-items .sortable-item .selector__index_row {
    color: var(--cu-new-era);
}

/* ranking.css uses a physical border-right; mango then hides the divider, but only at 0,2,0. */
.question-container .ranking-advanced-style .icon-divider {
    border-inline-end-color: var(--cu-neutral-foundation);
}

/*
    Blocks. Mango wins the grey from ranking.css by adding a type selector
    (".ranking-advanced-style div.ls-choice.sortable-block"), so that chain is mirrored.
*/
.question-container .ranking-advanced-style .display_block_group .sortable-block,
.question-container .ranking-advanced-style div.ls-choice.sortable-block {
    background-color: var(--cu-light-foundation);
    color: var(--cu-functional-black);
    border-radius: var(--cu-radius-control);
}

.question-container .ranking-advanced-style .sortable-rank .sortable-block,
.question-container .ranking-advanced-style .ranking-advanced-sorted-items .sortable-block {
    background-color: var(--cu-neutral-core);
    border-color: var(--cu-new-era);
}

/*
    Bubbles. ranking.css loads after this file, so the extra class is required. The infinite
    skew is turned off rather than recoloured.
*/
.question-container .ranking-advanced-style .display_bubble_group .display_bubble {
    background: var(--cu-light-foundation);
    color: var(--cu-functional-black);
    animation: none;
}

.question-container .ranking-advanced-style .sortable-rank .display_bubble,
.question-container .ranking-advanced-style .ranking-advanced-sorted-items .display_bubble {
    background: var(--cu-next-generation);
    box-shadow: inset 0 0 0 2px var(--cu-functional-black);
}

/* ── Installed question themes ── */

/*
    These themes ship their own palettes. Their stylesheets load after cuas.css, so every rule
    here needs a .question-container / compound class to win. Layout and init belong in the
    question themes; this layer is CI only: mint for the chosen answer, Functional Black for
    outlines and text, Light/Neutral Foundation for the greys.

    The NPS detractor/passive/promoter band is left alone — that colour carries meaning.
    Focus rings stay here so keyboard users get New Era regardless of each theme's outline:none
    or off-canvas radios.
*/

/*
    5-Point-Emojis and 5-point-smileys. Both are installed and both render as choice-5-pt-radio, so
    a page can contain either; they are near-identical stylesheets and are handled together. The
    emoji scale marks a selection with #BADEB8 green, the smiley scale with #ECF0F1.
*/
.question-container.choice-5-pt-radio .five-point-emoji-list .emoji-item label,
.question-container.choice-5-pt-radio .five-point-emoji-list .emoji-item-5 label,
.question-container.choice-5-pt-radio .five-point-emoji-list .emoji-item.noanswer-item label,
.question-container.choice-5-pt-radio .smiley-list .smiley-item label,
.question-container.choice-5-pt-radio .smiley-list .smiley-item-5 label {
    border-color: var(--cu-neutral-foundation);
}

/* Hover and checked were both #BADEB8 separated only by opacity, so they get distinct values. */
.question-container.choice-5-pt-radio .five-point-emoji-list .emoji-item label:hover {
    background: var(--cu-light-foundation);
    opacity: 1;
}

/*
    The inset ring is what actually makes the chosen face perceivable: mint against the white of its
    neighbours is about 1.3:1, far below the 3:1 a state indicator needs, and background alone would
    also make this colour-only.
*/
.question-container.choice-5-pt-radio .five-point-emoji-list .emoji-item input[type="radio"]:checked + label,
.question-container.choice-5-pt-radio .smiley-list .smiley-item input[type="radio"]:checked + label {
    background: var(--cu-next-generation);
    box-shadow: inset 0 0 0 2px var(--cu-functional-black);
}

.question-container.choice-5-pt-radio .five-point-emoji-list .emoji-item input[type="radio"]:focus-visible + label,
.question-container.choice-5-pt-radio .smiley-list .smiley-item input[type="radio"]:focus-visible + label {
    outline: 3px solid var(--cu-new-era);
    outline-offset: -3px;
}

/* Card-Sort */
.question-container.card-sort-question .items-start,
.question-container.card-sort-question .items-end {
    background: var(--cu-light-foundation);
    border-color: var(--cu-neutral-foundation);
}

.question-container.card-sort-question .items-start.target-hover,
.question-container.card-sort-question .items-end.target-hover {
    background: var(--cu-neutral-foundation);
}

/*
    The theme's own card background carries !important, so this has to as well.

    Neutral Core rather than the accent: every card is this colour from the moment the question
    loads, so it is content and not one of the buttons, CTAs or highlights guideline 4.2 reserves
    the accent for. The black border already separates a card from the Light Foundation column it
    sits in, and leaving the cards neutral is what lets the mint Next button stay the one thing on
    the page asking to be pressed.
*/
.question-container.card-sort-question .card {
    background-color: var(--cu-neutral-core) !important;
    border-color: var(--cu-functional-black);
    color: var(--cu-functional-black);
}

/* Social-Value-Orientation. The question wrapper carries no theme-specific class, so these hang
   off .svo-* instead. */
.question-container .svo-item-button-wrapper {
    background: var(--cu-neutral-foundation);
}

.question-container .svo-item:hover label.svo-item-button,
.question-container .svo-item:hover label.svo-item-button > span > span {
    background-color: var(--cu-light-foundation);
    color: var(--cu-functional-black);
}

/*
    Same reasoning as the emoji scale: the selected circle sits on the track, and mint on Neutral
    Foundation is nowhere near 3:1, so the black ring carries the state.
*/
.question-container .svo-item input[type="radio"]:checked + label.svo-item-button,
.question-container .svo-item input[type="radio"]:checked + label.svo-item-button:hover,
.question-container .svo-item input[type="radio"]:checked + label.svo-item-button > span > span,
.question-container .svo-item input[type="radio"]:checked + label.svo-item-button:hover > span > span {
    background-color: var(--cu-next-generation);
    color: var(--cu-functional-black);
    box-shadow: inset 0 0 0 3px var(--cu-functional-black);
}

.question-container label.svo-item-button > span > span {
    border-color: var(--cu-functional-black);
    background: var(--cu-light-foundation);
}

.question-container .svo-item input[type="radio"]:focus-visible + label.svo-item-button {
    outline: 3px solid var(--cu-new-era);
    outline-offset: 2px;
}

/*
    Track caps use the CU control radius. The end cap is the last .svo-item, not nth-last-child,
    because no-answer and the clear div may still follow it until the question theme moves the row.
*/
.question-container .svo-item:first-child .svo-item-button-wrapper {
    border-radius: 0;
    border-start-start-radius: var(--cu-radius-control);
    border-end-start-radius: var(--cu-radius-control);
}

.question-container .svo-item:not(:has(+ .svo-item)) .svo-item-button-wrapper {
    border-radius: 0;
    border-start-end-radius: var(--cu-radius-control);
    border-end-end-radius: var(--cu-radius-control);
}

@media only screen and (max-width: 480px) {
    .question-container .svo-item:first-child .svo-item-button-wrapper {
        border-radius: 0;
        border-start-start-radius: var(--cu-radius-control);
        border-start-end-radius: var(--cu-radius-control);
    }

    .question-container .svo-item:not(:has(+ .svo-item)) .svo-item-button-wrapper {
        border-radius: 0;
        border-end-start-radius: var(--cu-radius-control);
        border-end-end-radius: var(--cu-radius-control);
    }
}

/*
    Image select, both the list-radio and the multiple-choice variant. Only the branch of
    answer_row.twig that has an image reaches this markup; without one the row falls back to an
    ordinary .answer-item .radio-item and the form rules above already cover it.

    The frame is the answer here, and the variation nails both states down with !important —
    #6E748C unselected, #ED5046 when checked — so matching it is the only way through. Border
    colour only, leaving the variation's 2px width, which means the selected image is still told
    apart from its neighbours by hue alone. That is inherited, not introduced: raising the checked
    frame to 4px would fix it but shifts every thumbnail by 2px.

    The input carries .imageselect-checkbox in both variants despite being a radio in one of them.
*/
li.imageselect-listitem .imageselect-container .imageselect-label {
    border-color: var(--cu-border-interactive) !important;
}

li.imageselect-listitem .imageselect-container input.imageselect-checkbox:checked + label {
    border-color: var(--cu-new-era) !important;
}

/* The real input is visually hidden, so the frame has had no focus state at all until now. */
li.imageselect-listitem .imageselect-container input.imageselect-checkbox:focus-visible + label {
    outline: 3px solid var(--cu-new-era);
    outline-offset: 1px;
}

/* ── Sliders ── */

/*
    The slider widget is shared: the core numeric and 5-point slider questions use it, and so does
    Slider-With-Controls, which is the most-used installed question theme here at 113 questions. Its
    own stylesheet sets no colours at all — everything below comes from the variation and from
    bootstrap-slider underneath it.

    The value label was a real failure and not merely off-brand: the variation prints it at #ED5046
    on white, which is 3.6:1, and at 18px/600 it sits just under the 18.66px where large-text 3:1
    would apply. That is the number the respondent has actually chosen, so it goes Functional Black.

    Fill and handle follow the pattern already set elsewhere: New Era for the accent that shows
    magnitude, matching the progress bar, and mint for the thing you grab, matching the +/- buttons
    beside it. The handle's inset ring is what carries the 3:1, since mint on a Light Foundation
    track is nowhere near it.
*/
.question-container .slider-list .slider .tooltip .tooltip-inner {
    color: var(--cu-functional-black);
}

.question-container .slider-list .slider .slider-selection {
    background-color: var(--cu-new-era);
}

.question-container .slider-list .slider .slider-handle {
    background-color: var(--cu-next-generation);
    box-shadow: inset 0 0 0 2px var(--cu-functional-black);
}

/* A custom handle is a glyph on a white disc rather than a filled circle. */
.question-container .slider-list .slider .slider-handle.custom::before {
    color: var(--cu-functional-black);
}

/* Untouched keeps its "nothing chosen yet" reading, just in palette. */
.question-container .slider-list .slider.slider-untouched .slider-handle {
    background-color: var(--cu-solid-foundation);
}

.question-container .slider-list .slider.slider-untouched .slider-handle.custom::before {
    color: var(--cu-solid-foundation);
}

.question-container .slider.slider-horizontal .slider-handle.triangle,
.question-container .slider.slider-horizontal .slider-tick.triangle {
    border-bottom-color: var(--cu-new-era);
}

.question-container .slider.slider-vertical .slider-handle.triangle,
.question-container .slider.slider-vertical .slider-tick.triangle {
    border-left-color: var(--cu-new-era);
    border-right-color: var(--cu-new-era);
}

/* bootstrap-slider's own track is a #F5F5F5-to-#F9F9F9 gradient. */
.question-container .slider .slider-track {
    background-color: var(--cu-light-foundation);
    background-image: none;
}

.question-container .slider .slider-handle:focus-visible {
    outline: 3px solid var(--cu-new-era);
    outline-offset: 2px;
}

/*
    Range-Slider paints the track as a literal traffic light — red, orange and green — and its
    handles Bootstrap 3's #337AB7. Position and the two handles already show which part of the scale
    is selected, so hue is not carrying anything on its own; the segments become neutral with the
    selected span in New Era, matching the single-value slider above, and it drops an implied
    good/bad reading that a neutral range should not have had.

    !important is unavoidable here. The theme's stylesheet is only the fallback: rangeSlider.js
    reads five per-question theme options and writes them as inline styles, and those defaults
    (#FF0000 / #FFA500 / #008000 / #337AB7) are copied into each question's stored attributes when
    it is created. Editing config.xml would therefore only affect newly created questions, and
    nothing short of !important outranks an inline style.

    The consequence worth knowing: those five colour options no longer have any effect. That is the
    intent — they exist to let an author pick arbitrary colours — but it does mean a future author
    cannot recolour this scale without relaxing the rules below.
*/
.question-container .inserted-range-slider-wrapper .slider-track-low,
.question-container .inserted-range-slider-wrapper .slider-track-high {
    background-color: var(--cu-neutral-foundation) !important;
}

.question-container .inserted-range-slider-wrapper .slider-selection {
    background-color: var(--cu-new-era) !important;
}

/*
    The answered handle colour never showed up in a sweep of the page at rest: the theme's own
    "unanswered" rule masks it until the scale is touched, and only then does the #337AB7 appear.
*/
.question-container .inserted-range-slider-wrapper .slider-handle {
    background-color: var(--cu-next-generation) !important;
    box-shadow: inset 0 0 0 2px var(--cu-functional-black);
}

/* 0,3,1 keeps this ahead of the rule above, as the theme's own !important #6C757D requires. */
.question-container.range-slider-question.unanswered .slider-handle {
    background-color: var(--cu-solid-foundation) !important;
}

/* ── select2 (Searchable-Dropdown, Multiple-Choice-Dropdown) ── */

/*
    Searchable-Dropdown bundles select2 plus a Bootstrap 5 skin for it, so it arrives with the whole
    Bootstrap palette — #0D6EFD highlight, #86B7FE panel edge, #CED4DA control border, #212529 text.
    Multiple-Choice-Dropdown loads select2's plain default skin instead, giving #AAA borders, #E4E4E4
    pills and a #999 remove cross. Between them that is 78 and 3 questions.

    Two things beyond colour:

    Focus is invisible on the Bootstrap-5 variant. It means to draw Bootstrap's focus ring, but the
    shadow resolves to "rgba(0,0,0,0) 0 0 0 0" here because the --bs-focus-ring variables it expects
    are not defined, so a keyboard user gets nothing at all. The standard New Era ring is added.

    Highlighted and selected were both #0D6EFD, so with the list open there was no way to tell the
    option the keyboard is on from the one already chosen. They are split: Light Foundation for the
    cursor, mint for the actual selection, matching the rest of the theme.

    The panel is appended to <body>, not inside .question-container, so the extra specificity these
    rules need over the skin — which loads after cuas.css — has to come from "body" instead.
*/
.question-container .select2-container .select2-selection {
    border-color: var(--cu-border-interactive);
    border-radius: var(--cu-radius-control);
    color: var(--cu-functional-black);
}

/* 0,4,0, because the skin's ".select2-selection--single .select2-selection__rendered" is 0,3,0. */
.question-container .select2-container .select2-selection .select2-selection__rendered,
.question-container .select2-container .select2-search__field {
    color: var(--cu-functional-black);
}

/* The search box lives in the panel on <body>, and the skin's chain for it is 0,4,0. */
body .select2-container .select2-dropdown .select2-search .select2-search__field {
    border-color: var(--cu-border-interactive);
    border-radius: var(--cu-radius-control);
    color: var(--cu-functional-black);
}

/*
    Opening the panel focuses this field immediately, so its focus colour is on screen every time
    the list is used rather than only for keyboard users. The skin's :focus rule is 0,5,0.
*/
body .select2-container .select2-dropdown .select2-search .select2-search__field:focus {
    border-color: var(--cu-functional-black);
    outline: 3px solid var(--cu-new-era);
    outline-offset: 1px;
}

.question-container .select2-container .select2-selection__placeholder {
    color: var(--cu-solid-foundation);
}

.question-container .select2-container--focus .select2-selection,
.question-container .select2-container--open .select2-selection {
    border-color: var(--cu-functional-black);
    outline: 3px solid var(--cu-new-era);
    outline-offset: 1px;
}

/* Multi-select pills. */
.question-container .select2-container .select2-selection__choice {
    background-color: var(--cu-light-foundation);
    border-color: var(--cu-functional-black);
    color: var(--cu-functional-black);
    border-radius: var(--cu-radius-control);
}

.question-container .select2-container .select2-selection__choice__remove {
    color: var(--cu-functional-black);
    border-color: var(--cu-functional-black);
}

body .select2-container .select2-dropdown {
    border-color: var(--cu-functional-black);
    border-radius: var(--cu-radius-control);
    color: var(--cu-functional-black);
}

body .select2-container .select2-results__option {
    color: var(--cu-functional-black);
}

/*
    The keyboard cursor. The long chain mirrors the skin's own
    ".select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option.select2-results__option--highlighted",
    which reaches 0,5,0; the shorter selector covers select2's default skin, which Multiple-Choice-
    Dropdown uses instead and which only reaches 0,3,0.
*/
body .select2-container .select2-dropdown .select2-results__options .select2-results__option.select2-results__option--highlighted,
body .select2-container .select2-results__option--highlighted.select2-results__option--selectable {
    background-color: var(--cu-light-foundation);
    color: var(--cu-functional-black);
}

/*
    The option already chosen. Listed second so it wins when the cursor is on the selected row.

    The third selector looks redundant next to the second but is not: the skin styles the
    not-currently-under-the-cursor case as "…[aria-selected=true]:not(.select2-results__option--
    highlighted)", and the :not() takes it to 0,6,0 — a step above the plain attribute selector.
*/
body .select2-container .select2-dropdown .select2-results__options .select2-results__option.select2-results__option--selected,
body .select2-container .select2-dropdown .select2-results__options .select2-results__option[aria-selected="true"],
body .select2-container .select2-dropdown .select2-results__options .select2-results__option[aria-selected="true"]:not(.select2-results__option--highlighted),
body .select2-container .select2-results__option--selected {
    background-color: var(--cu-next-generation);
    color: var(--cu-functional-black);
    font-weight: var(--cu-weight-bold);
}

/* ── Content width ── */

/*
    Fruity's outer frame is a .container-fluid, which has no cap, so col-xl-8 hands the content
    two thirds of whatever the monitor happens to be: 960px at 1440, 1280px at 1920, about
    1700px at 2560. The footer below it is a centred 900px block, so on a wide screen the
    content overhung the footer by nearly 200px a side. 1140px is Bootstrap's xl container step,
    which is also where the survey list tops out below xxl, and it leaves the six-column arrays
    the room they need — a tighter measure would squeeze them.

    col-xl-8 has to be neutralised as well, or the cap compounds with it and the column lands at
    66.67% of 1140, i.e. 760px. Both overrides are an id plus a class, which clears the bare
    .col-xl-8 in the variation.

    The header bar itself stays full-bleed and only its contents are capped, so the white
    background and bottom border still reach the screen edges. The progress track is positioned
    against #survey-nav rather than the container, so it also stays full width; that is how it
    already behaved and is left alone.
*/
#outerframeContainer.container-fluid {
    max-width: var(--cu-content-max);
}

#outerframeContainer .col-xl-8 {
    width: 100%;
}

/* fixed-top, and carries the same two classes, so it has to match or the logo stops lining up. */
#survey-nav .container-fluid {
    max-width: var(--cu-content-max);
    width: 100%;
}

/* Scoped, because the survey list keeps its own narrower measure. */
body:has(#outerframeContainer) .cuas-footer {
    max-width: var(--cu-content-max);
}

/* ── Navigation bar and logo ── */

#survey-nav.navbar {
    background-color: var(--cu-neutral-core);
    border-bottom: 1px solid var(--cu-neutral-foundation);
}

#survey-nav.navbar:has(.ls-progress-container) {
    padding-bottom: 4px;
}

#survey-nav .logo-container {
    padding: 0;
    flex-shrink: 0;
}

/* Guideline 1.1 — minimum clear space equals the width of the "C". */
#survey-nav .navbar-brand.logo-container {
    margin-inline-end: var(--cu-logo-clearspace);
    padding: calc(var(--cu-logo-clearspace) * 0.4) 0;
}

#survey-nav .navbar-brand .logo,
#survey-nav .logo-container > img {
    height: var(--cu-logo-height);
    max-height: var(--cu-logo-height);
    width: auto;
    padding: 0;
}

/*
    Narrow phones. The lockup at 204px plus its clear space plus the menu toggler overruns a
    320px viewport, and .logo-container above is flex-shrink: 0, so it would push the toggler
    out rather than give way. Only the height is reduced — a max-width would hold the height
    and squash the artwork, since the width here is auto.

    38px is the floor: it still reads, and 172px plus clear space leaves the toggler its room.
    Swapping to cu-monogram.png would be the better answer at this width, but that needs a
    second <img> in the template rather than a value here.
*/
@media (max-width: 400px) {
    #survey-nav {
        --cu-logo-height: 38px;
    }
}

#survey-nav .navbar-toggler {
    border: none;
    padding-inline-end: 0;
    color: var(--cu-functional-black);
}

/*
    The colour has to sit on this selector rather than on the shorter one further down: the
    variation sets it with "#survey-nav .navbar-toggler .ri-more-fill" at 1,2,0, so a rule written
    as "#survey-nav .ri-more-fill" is a step short and loses regardless of load order.
*/
#survey-nav .navbar-toggler .ri-more-fill {
    font-size: 1.75rem;
    color: var(--cu-functional-black);
}

/*
    The variation removes the ring with "#survey-nav .navbar-toggler:focus { box-shadow: none }"
    at 1,2,0, a step above the .navbar-toggler:focus that used to sit in the shared focus rule
    above — so that rule's outline reset applied while its ring did not, and the one control that
    opens this menu had no focus indicator at all. The type selector takes this to 1,2,1, which
    clears the variation without depending on load order.

    focus-visible rather than focus, so clicking the hamburger with a mouse does not leave the
    ring behind. The shared rule keeps :focus, which is what form fields want.
*/
#survey-nav button.navbar-toggler:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgb(255 67 50 / 35%);
}

#survey-nav #main-dropdown {
    min-width: 250px;
    overflow-y: auto;
    max-height: 90vh;
}

/*
    The language changer opens a second .dropdown-menu nested inside this one, so both panels
    need the same chrome — left alone, Bootstrap gives the inner one a 4px radius and an
    rgba(0,0,0,.15) border, and the two visibly disagree.
*/
#survey-nav #main-dropdown,
#survey-nav #main-dropdown .dropdown-menu {
    border: 1px solid var(--cu-neutral-foundation);
    border-radius: var(--cu-radius-control);
    box-shadow: 0 4px 12px rgb(0 0 0 / 8%);
}

/* hr, so 2,1,1 against the variation's 2,1,0 for the same element in #D3D5DA. */
#survey-nav #main-dropdown hr.dropdown-divider {
    border-top-color: var(--cu-neutral-foundation);
}

#survey-nav .dropdown-header {
    font-weight: var(--cu-weight-bold);
    font-size: 0.8rem;
    color: var(--cu-solid-foundation);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/*
    Class-agnostic on purpose. The menu mixes two kinds of item — the survey options are
    .nav-link (save_links.twig, clearall_links.twig) while the languages are .dropdown-item
    (language_changer_top_menu.twig) — and matching on the element is what keeps them looking
    alike. Retargeting this at .dropdown-item would drop half the menu.
*/
#survey-nav .dropdown-menu > li > a {
    text-decoration: none;
    font-size: 0.95rem;
    color: var(--cu-functional-black);

    /*
        Reserved rather than added on hover — recolouring a border that is already there avoids
        the sideways shove the label would take otherwise. The padding gives back exactly what
        the border takes, so the label stays at the 16px .nav-link asks for in every state.

        4px is the width this theme gives an accent bar everywhere else: .question-container
        .has-error and the .alert- rules all mark their left edge at 4px. The question index in
        this same menu uses 8px, but those bars are the parent's and are excluded below anyway.

        Logical properties, because the parent ships an RTL build and this file already uses
        padding-inline-end and margin-inline-end.
    */
    border-inline-start: 4px solid transparent;
    padding-inline-start: 12px;
}

/*
    A fill, with the accent moved to the bar below. Not the underline the Links section gives
    every anchor: that is there to mark a link inside running prose, and in a menu every row is
    a link already, so it disambiguated nothing while — inheriting that section's 2px thickness
    and 0.2em offset — reading as a heavy rule under each item rather than a hint.

    !important, which no amount of specificity substitutes for here. The last block of the
    variation, well after everything else it declares, is

        .dropdown-menu > li > a:hover  { color: #fff; background-color: #ED5046 !important; }
        .dropdown-menu > li > a:focus  { color: #fff; background-color: #ED5046 !important; }

    so hovering a row filled it solid #ED5046 — the loud red this menu had, and the underline
    was only ever the smaller half of it. The white it asks for alongside never landed: the
    colour on the rest-state rule above is 1,1,2 against that block's 0,2,2, which is why the
    text stayed black on red at 5.83:1 instead of white on red at 3.6:1.

    Dropping the fill instead of overriding it would not help either — "a:not(.btn):hover"
    further up paints rgb(255 67 50 / 12%), so the rows would still tint red.

    :active is for the language items. Being .dropdown-item they pick up Bootstrap's
    ".dropdown-item.active, .dropdown-item:active { background-color: #0d6efd }", so pressing a
    language used to flash Bootstrap blue. The colour beside it was already safe: the rule above
    is 1,1,2 and holds the text black through the press.
*/
#survey-nav .dropdown-menu > li > a:hover,
#survey-nav .dropdown-menu > li > a:focus,
#survey-nav .dropdown-menu > li > a:active {
    background-color: var(--cu-light-foundation) !important;
}

/*
    The accent, on the bar reserved above. A bar rather than a fill because as a non-text
    graphical object it only has to clear 3:1, which New Era does at 3.44:1 on white — the
    threshold a red fill behind black text could never satisfy.

    The :not()s are documentation more than mechanism. The index items state their own status
    through these bars, #FFE046 for unanswered and #FF515F for error, and recolouring those on
    hover would read as the status itself having changed. The variation declares them at 2,2,1
    and 2,3,1, so its two ids already outrank the one here and the index is excluded either
    way; spelling it out keeps the intent legible at the point of the exclusion.
*/
#survey-nav .dropdown-menu > li > a:hover:not(.index-warning):not(.index-danger),
#survey-nav .dropdown-menu > li > a:focus:not(.index-warning):not(.index-danger),
#survey-nav .dropdown-menu > li > a:active:not(.index-warning):not(.index-danger) {
    border-inline-start-color: var(--cu-new-era);
}

/*
    Light Foundation on the white panel is about 1.12:1, so the fill above is a soft cue for the
    pointer but cannot be relied on for focus, and it is identical for hover and focus — without
    a ring the keyboard state would be indistinguishable from the mouse. Every other interactive
    element in the theme is ringed the same way.

    The offset is negative because #main-dropdown scrolls (overflow-y), which clips to the
    panel's border-radius; an outward ring on the first or last item would be cut off.
*/
#survey-nav .dropdown-menu > li > a:focus-visible {
    outline: 3px solid var(--cu-new-era);
    outline-offset: -3px;
}

/*
    The variation shrinks every item to "font-size: 0.7em !important" below 768px, roughly 11px,
    and being !important it discarded the 0.95rem above on exactly the devices where the menu is
    the only navigation. Matching !important is unavoidable; ul takes this to 2,0,3 against its
    2,0,2 so the win does not rest on load order.
*/
@media (max-width: 768px) {
    #survey-nav ul#main-dropdown li a {
        font-size: 0.95rem !important;
    }
}

#survey-nav .ls-nav-end {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
}

/*
    Step count, not percent: LimeSurvey's value is completed groups, which jumps when
    relevance hides pages. Solid Foundation on white is 4.74:1.
*/
#survey-nav .ls-progress-label {
    font-size: 0.875rem;
    font-weight: var(--cu-weight-medium);
    line-height: 1;
    color: var(--cu-solid-foundation);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* ── Progress (inside #survey-nav) ── */

/*
    New Era sits mid-luminance, so it contrasts poorly with mid greys: against Neutral
    Foundation the fill would only reach 2.14:1, under the 3:1 that WCAG 1.4.11 asks of a
    graphical object carrying information. The track is Light Foundation on the white
    header, which lifts fill-against-track to 3.07:1.
*/
#survey-nav .ls-progress-container {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 4px;
    padding: 0;
    margin: 0;
    flex: none;
}

#survey-nav .progress {
    height: 4px;
    margin: 0;
    background-color: var(--cu-light-foundation);
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

#survey-nav .progress-bar {
    background-color: var(--cu-new-era);
    min-width: 0;
    border-radius: 0;
    box-shadow: none;
}

/* ── Question containers ── */

.question-container {
    margin-bottom: 1.25rem;
    padding: 1.5rem;
    background-color: var(--cu-neutral-core);
    border: 1px solid var(--cu-neutral-foundation);
    border-radius: var(--cu-radius-card);
    box-shadow: none;
}

.question-container .ls-label-question {
    font-size: 1.15rem;
    font-weight: var(--cu-weight-medium);
    letter-spacing: -0.01em;
    line-height: 1.35;
    color: var(--cu-functional-black);
}

/*
    The content column is a flat --cu-content-max, so a question stem would run the full 1140px
    on any screen that wide — roughly 145 characters a line, well past the 45-75 that reads
    comfortably, and German makes it worse. Narrower viewports are no better: nothing constrains
    the column below the cap either, so a 1024px laptop gives the stem the whole ~1000px.

    The cap sits on the prose rather than on the container so that arrays, the NPS scale and any
    other wide control keep the whole card width. ch ties the measure to the font instead of to a
    pixel guess.

    58ch rather than the ~70 the guidance implies, because ch is the advance of "0", which in
    Inter is a good deal wider than the average lowercase letter: measured against real German
    copy, 58ch lands at about 80 characters a line.
*/
.question-container .ls-label-question,
.question-container .ls-question-message,
.question-container .ls-questionhelp,
.question-container .help-block {
    max-width: 58ch;
}

/*
    The variation paints answer labels #6E748C at 1.14rem/600 through
    ".ls-answers label, .answer-item label, .control-label". That blue-grey is not in the CU
    palette, and semibold on every option flattens the hierarchy against the question title.
    Answer options are body text: Functional Black, Regular (guideline 2.3).

    ".answer-item label" is 0,1,1, so the plain .control-label rule further up loses to it and
    these selectors have to carry the container. The :not() guard is there because some question
    types render the question text itself as a label rather than a div.
*/
.question-container .ls-answers label,
.question-container .answer-item label,
.question-container label.control-label:not(.ls-label-question) {
    color: var(--cu-functional-black);
    font-weight: var(--cu-weight-regular);
    font-size: 1rem;
    line-height: 1.5;
}

/*
    Solid Foundation is 4.74:1 on Neutral Core but only 4.24:1 on Light Foundation, so muted greys
    are confined to the white cards.

    The variation sets these to 600. Supplementary text has no business being semibold (guideline
    2.3), and dropping it to Regular is also what lets the error state below distinguish itself by
    weight rather than by colour alone.
*/
.question-container .ls-question-message,
.question-container .help-block,
.question-container .ls-questionhelp {
    color: var(--cu-solid-foundation);
    font-size: 0.95rem;
    font-weight: var(--cu-weight-regular);
}

/*
    The variation remaps Bootstrap's .text-info to #8146F6, a purple with no place in the CU
    palette. It lands on the validation-tip wrappers, whose inner message already carries the
    muted grey, but neutralise it so it cannot surface where that inner class is absent.
    .text-info is a Bootstrap utility and ships as !important, so matching that is the only way
    to take it.
*/
.question-container .text-info,
.question-container .question-valid-container {
    color: var(--cu-solid-foundation) !important;
}

/* .text-muted is another off-palette utility (#6E748C) that ships with !important. */
.question-container .text-muted {
    color: var(--cu-solid-foundation) !important;
}

/*
    The variation drops "important" fields and selects to 14px. Anything below 16px makes iOS
    Safari zoom the page when the field takes focus, so these go back to body size.
*/
.question-container .form-select,
.question-container .form-control.ls-important-field {
    font-size: 1rem;
}

/* The dropdown toggle inherits the same off-palette #6E748C blue-grey. */
#survey-nav .dropdown-toggle {
    color: var(--cu-functional-black);
}

.question-container .question-number:empty,
.question-container .question-code:empty {
    display: none;
}

.question-container .question-title-container {
    margin-bottom: 0.65rem;
}

.question-container .asterisk,
.question-container .ls-asterisk {
    color: var(--cu-bold-heritage);
}

/* ── Error and validation states ── */

/*
    Errors were effectively invisible before this. The muted greys set above are the same ones the
    variation uses for error text and the selectors tie at 0,2,0, so ".has-error .help-block" lost
    to ".question-container .help-block" on load order alone. The one thing that did still change
    was .text-danger, and at #FF515F that is 3.18:1 on white — short of 4.5:1 for text and short of
    even 3:1 once it sits on Light Foundation. Question types with no .form-control (radio lists,
    arrays, the NPS scale) had no affordance whatsoever, the variation only ever marking the input.

    No red in the palette reaches 4.5:1 (New Era 3.44:1, Bold Heritage 4.29:1), so this borrows the
    arrangement already used for links: the words go Functional Black and the red is carried by
    things that only need 3:1 — the card edge, the field outline and the warning glyph. Three
    separate signals, none of them hue-dependent on its own, which satisfies WCAG 1.4.1.

    The classes involved, for reference, since they come from four different places:
      .input-error            question wrapper, from qanda_helper's input_error_class
      .has-error              a sub-question row, from the answer row twigs
      .ls-question-mandatory  the server-rendered "This question is mandatory" (mandatory_tip.twig)
      .ls-em-error            a validation tip that has just failed, added live by theme.js
*/
.question-container.input-error,
.question-container.has-error {
    border-inline-start: 4px solid var(--cu-bold-heritage);
}

/*
    Only the message that actually failed is emphasised. Scoping this to "any message inside an
    errored card" would also catch the .ls-em-success tips sitting in the same card — the neutral
    "Please choose one of the following" — and drown out the real error.

    .ls-question-mandatory and .ls-em-error both ship .text-danger, so their colour comes from the
    !important rule further down; the weight is set here.
*/
.ls-question-mandatory,
.question-container .ls-em-error,
.question-container.has-error > .help-block,
.question-container .has-error > .control-label,
.question-container .has-error > .help-block {
    color: var(--cu-functional-black);
    font-weight: var(--cu-weight-bold);
}

/*
    mandatory_tip.twig already includes a warning glyph, which is the cue that survives both
    greyscale and a stylesheet-blind reading of the text. It inherits the black from its parent, so
    the red is put back here — as a non-text graphic it needs 3:1, and Bold Heritage gives 3.83:1
    against Light Foundation.
*/
.ls-question-mandatory .ri-error-warning-fill,
.ls-question-mandatory .fa-exclamation-circle {
    color: var(--cu-bold-heritage);
}

/*
    The variation marks an errored field with "box-shadow: 4px 4px 0 #FF515F". The offset block is
    a good non-text affordance, so it is kept and only recoloured; the border carries it for the
    3:1 as well, since a shadow alone can fall on any background.
*/
.question-container.input-error .form-control,
.question-container.has-error .form-control,
.has-error .form-control,
.input-error .form-control,
.has-error .form-control:focus,
.input-error .form-control:focus {
    border-color: var(--cu-bold-heritage);
    box-shadow: 4px 4px 0 var(--cu-bold-heritage);
}

/*
    .text-danger is a Bootstrap utility carrying !important, and it resolves to --bs-danger
    (#FF515F). Body-size red cannot clear 4.5:1 in this palette, so the emphasis is carried by
    weight instead and the colour drops to Functional Black.
*/
.question-container .text-danger {
    color: var(--cu-functional-black) !important;
    font-weight: var(--cu-weight-bold);
}

/* ── Navigator ── */

#navigator-container {
    padding: 1.25rem 0 1.5rem;
    margin-top: 0.5rem;
}

#navigator-container > hr {
    margin-top: 0;
    margin-bottom: 1rem;
    border-color: var(--cu-neutral-foundation);
    opacity: 1;
}

#navigator-container .btn-lg {
    min-height: 2.75rem;
    padding: 0.6rem 1.5rem;
    border-radius: var(--cu-radius-control);
    font-weight: var(--cu-weight-bold);
}

/* ── Completed screen ── */

.completed-wrapper {
    background-color: var(--cu-neutral-core);
    border: 1px solid var(--cu-neutral-foundation);
    border-radius: var(--cu-radius-card);
    padding: 2rem 1.5rem;
    position: relative;
    overflow: hidden;
}

/*
    Guideline 3.5 — a graphic element cropped so at least one fusion point stays visible.
    Decorative only, so it is hidden from assistive tech by being a background.
*/
.completed-wrapper::before {
    content: "";
    position: absolute;
    top: -40px;
    inset-inline-end: -60px;
    width: 220px;
    height: 220px;
    background: url("../files/cu-shapes.svg") right top / contain no-repeat;
    pointer-events: none;
}

.completed-wrapper > * {
    position: relative;
}

/* ≥28px, so New Era clears the 3:1 large-text threshold on Neutral Core. */
.completed-wrapper .completed-heading {
    font-size: clamp(1.75rem, 4vw, 2.25rem);
    color: var(--cu-new-era);
    margin: 0 0 0.75rem;
}

.completed-wrapper .completed-Content {
    font-size: 1.05rem;
    line-height: 1.55;
    color: var(--cu-functional-black);
    margin: 0 0 0.75rem;
}

/* ── Alerts ── */

/*
    The variation floods alerts with saturated non-CU colour: #FF515F for danger, #8146F6 purple
    for info, #4DD753 green for success, #FFE046 yellow for warning. Each one does clear 4.5:1
    against its #1E1E1E text, so this is a palette problem rather than a contrast one — but purple
    and green have no place in the CI, and these surfaces genuinely reach respondents through save
    confirmations, validation summaries and the no-JavaScript warning.

    They move onto a Light Foundation surface with Functional Black text (18.1:1) and let a 4px
    edge carry the meaning, the same division of labour used for buttons, links and the error state
    above. The palette only offers red, mint and greys for this, so danger and warning share the
    red edge and are told apart by their wording rather than by hue.
*/
/*
    Functional Black for the outline rather than a light grey, because the Light Foundation surface
    is also the page background: on a #CCC hairline (1.4:1) an alert placed outside a white card
    would have had no visible boundary at all. Black reads on both surfaces, and echoes the 2px
    outlines the buttons already carry.
*/
.alert {
    border-radius: var(--cu-radius-control);
    border: 1px solid var(--cu-functional-black);
    background-color: var(--cu-light-foundation);
    color: var(--cu-functional-black);
}

.alert-danger,
.alert-warning {
    border-inline-start: 4px solid var(--cu-bold-heritage);
}

/*
    Success takes Next Generation as a surface rather than as an edge. As a 4px marker the mint is
    1.24:1 against Light Foundation and effectively invisible, whereas as a background it carries
    16.3:1 against Functional Black — the same reason the primary button is mint-on-black.
*/
.alert-success {
    background-color: var(--cu-next-generation);
}

.alert-info,
.alert-primary,
.alert-secondary {
    border-inline-start: 4px solid var(--cu-solid-foundation);
}

/* .alert-link keeps the variation's #8146F6 otherwise. */
.alert .alert-link {
    color: var(--cu-functional-black);
}

@media (max-width: 767px) {
    .question-container {
        padding: 1rem;
    }

    #navigator-container .btn-lg {
        min-height: 2.5rem;
        padding: 0.5rem 1rem;
        font-size: 0.95rem;
    }
}

/* ── Public survey list ── */

html:has(#surveys-list-container),
body:has(#surveys-list-container) {
    height: 100%;
    margin: 0;
    padding-top: 0 !important;
    background-color: var(--cu-light-foundation);
}

#surveys-list-container {
    margin-top: 0;
}

.cuas-list-card {
    /*
        Guideline 1.1 — the width of the "C" is the minimum clear space around the logo. Measured
        from the supplied artwork: in logo.png the CU monogram spans 430px of the 1904px lockup,
        and the C is 60.2% of the monogram (172.07 of 286 units in cu-monogram.svg), so
        1 C = 430 × 0.602 / 1904 = 13.6% of the displayed lockup width.

        The card padding therefore has to be at least --cu-lockup-clearspace. Both values are
        set together at each breakpoint so that constraint stays visible: 200 × 0.136 = 27px
        against 28px of padding here, 340 × 0.136 = 46px against 48px below.
    */
    --cu-lockup-width: 200px;
    --cu-lockup-clearspace: calc(var(--cu-lockup-width) * 0.136);

    position: relative;
    overflow: hidden;
    background: var(--cu-neutral-core);
    border: 1px solid var(--cu-border-decorative);
    border-radius: var(--cu-radius-card);
    margin: 2.5rem auto 1.5rem;
    padding: 1.75rem 1.75rem 2.5rem;
    box-shadow: none;
    max-width: 900px;
}

/* Guideline 3.4 — graphic element as a subtle brand accent, cropped at the corner. */
.cuas-list-card::before {
    content: "";
    position: absolute;
    top: -70px;
    inset-inline-end: -70px;
    width: 260px;
    height: 260px;
    background: url("../files/cu-shapes.svg") right top / contain no-repeat;
    pointer-events: none;
}

.cuas-list-card > * {
    position: relative;
}

@media (min-width: 768px) {
    .cuas-list-card {
        --cu-lockup-width: 340px;

        padding: 2.5rem 3rem 3rem;
        margin: 3rem auto 2rem;
    }
}

.cuas-lockup {
    display: block;
    width: var(--cu-lockup-width);
    max-width: 100%;
    height: auto;
    margin: 0 auto;
}

.cuas-list-header-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    /* Keeps the logo clear space below the lockup, not just to its sides. */
    margin-bottom: var(--cu-lockup-clearspace);
}

.cuas-list-header {
    text-align: center;
    margin-bottom: 0;
}

.cuas-list-title {
    font-family: var(--cu-font) !important;
    font-size: 0.88rem;
    font-weight: var(--cu-weight-medium);
    color: var(--cu-solid-foundation);
    text-align: center;
    margin-bottom: 1.1rem;
    letter-spacing: 0.01em;
}

.cuas-list-language {
    width: 100%;
    max-width: 420px;
    margin: 0;
    padding: 0;
    text-align: end;
}

.cuas-list-language .form-group,
.cuas-list-language .form-change-lang {
    margin-bottom: 0;
    justify-content: flex-end;
    align-items: center;
    row-gap: 0.35rem;
    column-gap: 0.65rem;
}

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

.cuas-list-language .col-auto {
    width: 100%;
}

.cuas-list-language #lang-select {
    width: 100%;
}

/*
    The variation styles this control as a borderless, link-coloured select through
    .form-change-lang #language-changer-select. That is an ID selector, so a class-only rule
    here loses regardless of order, and the colour it sets (#ED5046) is the variation's own red,
    not New Era — it renders at 18.24px/600, which is under the 18.66px that would let a bold
    face qualify as large text, so it also misses 4.5:1. Matching the specificity is enough,
    since cuas.css loads after the variation.

    The field frame goes on the #lang-select wrapper, which is what the variation gives the
    white background and the chevron pseudo-element, and the select inside carries only text.
*/
/*
    Left in normal flow on purpose. theme.js sizes the select to its selected option's text and
    the chevron is a ::after on this wrapper pulled back over that edge, so making the wrapper a
    flex container turns the chevron into a flex item and shrinks the select until the language
    name is clipped.
*/
.cuas-list-language .form-change-lang #lang-select {
    position: relative;
    border: 1px solid var(--cu-border-interactive);
    border-radius: var(--cu-radius-control);
    background-color: var(--cu-neutral-core);
}

/*
    The variation leaves the chevron inline and nudges it back over the select's right edge with
    "right: 16px". That only holds while the select is shrink-wrapped to its text; once it fills
    the field the chevron has nowhere to sit and wraps onto a second line, doubling the field
    height. Anchoring it to the field instead keeps it put at any width.

    It is a non-text icon, so New Era only has to clear 3:1.
*/
.cuas-list-language .form-change-lang #lang-select::after {
    position: absolute;
    inset-inline-end: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--cu-new-era);
    pointer-events: none;
}

/*
    !important is the only way to beat theme.js, which measures the selected option's text in a
    throwaway span carrying the .h2 class and then writes that pixel width inline on the select.
    Measured against a heading font and applied to a 1rem field, the result is too narrow and the
    language name gets cut ("Deutsch - De"). Filling the field instead makes it independent of
    that measurement.
*/
.cuas-list-language .form-change-lang #language-changer-select {
    width: 100% !important;
    border: none;
    min-height: 2.5rem;
    font-family: var(--cu-font);
    font-size: 1rem;
    font-weight: var(--cu-weight-regular);
    line-height: 1.4;
    background-color: transparent;
    color: var(--cu-functional-black);
    /* Right padding keeps the value clear of the absolutely placed chevron. */
    padding: 0.5rem 2.25rem 0.5rem 0.8rem;
}

.cuas-list-language .form-change-lang #language-changer-select:focus-visible {
    outline: 2px solid var(--cu-new-era);
    outline-offset: 2px;
}

.cuas-list-language .ls-language-changer-item {
    margin-top: 0.35rem;
    width: 100%;
    border-radius: var(--cu-radius-control);
}

.js .cuas-list-language .ls-language-changer-item {
    display: none !important;
}

/*
    Side by side only from 992px. Below that the card simply is not wide enough: at a 851px
    viewport the card content box measures 598px, while the lockup at its intended 340px plus
    the gap plus the language field needs about 694px — the lockup was being squeezed to 244px.
    At 992px the content box reaches roughly 680px and 300 + 24 + 260 fits with room to spare.
*/
@media (min-width: 992px) {
    .cuas-list-card {
        --cu-lockup-width: 300px;
    }

    .cuas-list-header-row {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 1.5rem;
    }

    .cuas-list-header {
        text-align: start;
        /* Must not shrink, or the lockup loses its intended size again. */
        flex: 0 0 auto;
    }

    .cuas-lockup {
        margin: 0;
    }

    .cuas-list-title {
        text-align: start;
    }

    .cuas-list-language {
        flex: 0 1 260px;
        max-width: 260px;
        margin-inline-start: auto;
    }

}

.surveys-list {
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.surveys-list > li {
    margin-bottom: 0;
    flex: 1 1 100%;
}

@media (min-width: 768px) {
    .surveys-list > li {
        flex: 1 1 calc(50% - 0.25rem);
        max-width: calc(50% - 0.25rem);
    }
}

/*
    Outline resting state keeps the list quiet (guideline 4.3: neutral background when
    information is the purpose). Label is Functional Black rather than New Era so it clears
    4.5:1; the red border carries the brand and only needs 3:1.
*/
.surveys-list a.surveytitle.btn-primary {
    background-color: var(--cu-neutral-core);
    border: 2px solid var(--cu-new-era);
    color: var(--cu-functional-black);
    font-weight: var(--cu-weight-medium);
    box-shadow: none;
    padding: 0.75rem 1.1rem;
    border-radius: var(--cu-radius-control);
    display: flex;
    align-items: flex-start;
    height: auto;
    min-height: 3.1rem;
    white-space: normal;
    word-break: break-word;
    text-align: start;
    text-decoration: none;
    /* Guideline 7.3 — no opacity animation. */
    transition: background-color 0.12s, border-color 0.12s;
}

.surveys-list a.surveytitle.btn-primary:hover,
.surveys-list a.surveytitle.btn-primary:focus-visible {
    background-color: var(--cu-next-generation);
    border-color: var(--cu-functional-black);
    color: var(--cu-functional-black);
}

.surveys-list a.surveytitle.btn-primary:active {
    background-color: var(--cu-next-generation-hover);
    border-color: var(--cu-functional-black);
    color: var(--cu-functional-black);
}

/* Guideline 5.2 — the icon is proportionally 10% larger than the text height. */
.surveys-list a.surveytitle.btn-primary .cuas-list-icon {
    flex: 0 0 auto;
    margin-inline-end: 0.6rem;
    font-size: 1.1em;
    line-height: 1.1;
    color: var(--cu-new-era);
    margin-top: 0.05rem;
}

.surveys-list a.surveytitle.btn-primary:hover .cuas-list-icon,
.surveys-list a.surveytitle.btn-primary:focus-visible .cuas-list-icon {
    color: var(--cu-functional-black);
}

/*
    The one thing logical properties cannot fix: they move the arrow to the correct side under RTL
    but leave it pointing away from the text. Scoped to the arrow so the stop glyph that marks an
    inactive survey is left alone.
*/
[dir="rtl"] .surveys-list a.surveytitle.btn-primary .ri-arrow-right-line {
    transform: scaleX(-1);
}

/*
    Deliberately not clamped. A survey name is how a respondent picks the right survey, and
    LimeSurvey puts "Start survey" in the title attribute rather than the full name, so
    truncating here would leave the rest of the name unreachable.
*/
.surveys-list a.surveytitle.btn-primary .cuas-list-text {
    min-width: 0;
}

.cuas-list-contact {
    text-align: center;
    color: var(--cu-solid-foundation);
    font-size: 0.85rem;
    margin-top: 2rem;
    margin-bottom: 0;
    padding-top: 1.25rem;
    border-top: 1px solid var(--cu-neutral-foundation);
    line-height: 1.5;
}

body:has(#surveys-list-container) #activate_editor,
body:has(#surveys-list-container) .modal-backdrop {
    display: none !important;
}

/* ── Footer ── */

.cuas-footer {
    max-width: 900px;
    margin: 0 auto;
    padding: 1.5rem 1.5rem 2rem;
    color: var(--cu-functional-black);
    font-size: 0.8rem;
    line-height: 1.55;
}

.cuas-footer-inner {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 2rem;
    align-items: baseline;
    justify-content: space-between;
    padding-top: 1.25rem;
    border-top: 1px solid var(--cu-neutral-foundation);
}

.cuas-footer-org {
    font-weight: var(--cu-weight-medium);
}

.cuas-footer-meta {
    margin: 0;
}

.cuas-footer a {
    color: var(--cu-functional-black);
}

@media (max-width: 767px) {
    .cuas-footer-inner {
        flex-direction: column;
    }
}

/* ── Print ── */

@media print {
    body {
        background: var(--cu-neutral-core);
        color: var(--cu-functional-black);
        font-family: var(--cu-font) !important;
    }

    /* Decorative graphic elements carry no information, so they are dropped. */
    .cuas-list-card::before,
    .completed-wrapper::before {
        display: none;
    }

    .question-container,
    .cuas-list-card,
    .completed-wrapper {
        border: 1px solid var(--cu-neutral-foundation);
        box-shadow: none;
        break-inside: avoid;
    }

    #survey-nav,
    #navigator-container,
    #survey-nav .ls-progress-container {
        display: none !important;
    }

    /* Reinstate the lockup at the top of the printed page. */
    .cuas-print-lockup {
        display: block !important;
        height: 42px;
        margin-bottom: 1.5rem;
    }

    a:not(.btn) {
        color: var(--cu-functional-black);
        text-decoration: underline;
    }

    .cuas-footer {
        border-top: 1px solid var(--cu-neutral-foundation);
        font-size: 8pt;
    }
}

.cuas-print-lockup {
    display: none;
}