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

    /*
        Guideline 1.1 — the width of the "C" is the minimum clear space around the logo.
        In cu-monogram.svg the C occupies 172.07 of the 180-unit viewBox height.
    */
    --cu-logo-height: 34px;
    --cu-logo-clearspace: calc(var(--cu-logo-height) * 0.956);

    /*
        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,
.navbar-toggler: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;
}

/*
    The date picker's calendar button is an .input-group-addon, and ".fruity_twentythree
    .input-group-addon" (0,2,0) puts white on #ED5046 — which outranked .btn-primary (0,1,0), so
    this one button escaped the mint treatment every other primary action got. Worth noting the old
    colouring was only safe because the button holds an icon: white on #ED5046 is 3.6:1, fine for a
    glyph at 3:1 but a failure for the text prefixes and suffixes that use this same class.
*/
.question-container .input-group-addon,
.date-timepicker-group .input-group-addon {
    background-color: var(--cu-next-generation);
    border: 2px solid var(--cu-functional-black);
    color: var(--cu-functional-black);
}

/*
    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. */
.question-container.card-sort-question .card {
    background-color: var(--cu-next-generation) !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);
    }
}

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

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

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

#survey-nav #main-dropdown {
    min-width: 250px;
    overflow-y: auto;
    max-height: 90vh;
    border: 1px solid var(--cu-neutral-foundation);
    border-radius: var(--cu-radius-control);
    box-shadow: 0 4px 12px rgb(0 0 0 / 8%);
}

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

#survey-nav .dropdown-menu > li > a {
    text-decoration: none;
    font-size: 0.95rem;
    color: var(--cu-functional-black);
}

#survey-nav .dropdown-menu > li > a:hover,
#survey-nav .dropdown-menu > li > a:focus {
    background-color: var(--cu-light-foundation);
    text-decoration: underline;
    text-decoration-color: var(--cu-new-era);
}

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

/*
    Nothing constrains the content column between 768px and 1199px, because Fruity's col-xl-8
    only engages at 1200px. A question stem therefore runs the full 1020px on a laptop — roughly
    130 characters a line, well past the 45-75 that reads comfortably, and German makes it worse.

    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,
.ls-privacy-body {
    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;
}