/*
   The survey: a dark, focused instrument that belongs to the site it sits in.

   This replaces an earlier light-sheet treatment. A large near-white panel on a dark page
   is a ~470:1 luminance step whichever way it is warmed, and six minutes in front of that
   is glare, not calm. So the survey is dark-native now: the same ground as the rest of
   Aloite, one recessed stage, and gold that finally has a background it can sing against
   (on this ground the real brand #FFC000 clears 11:1, where on ivory it failed at 1.7:1).

   Two modes, one stylesheet:
     - Focus mode, when survey-focus.js runs: one question at a time on the stage.
     - Stacked, when it does not: every question in order, which is what the server
       renders and what a respondent with scripting off gets. Both have to look right.

   Everything is scoped under .svy-page--form and cannot reach the marketing pages.
*/

.svy-page--form {
    /* ---- Palette ------------------------------------------------------ */

    --survey-page-bg: #050506;
    --survey-page-bg-lift: #0A0A0B;

    /* The stage: rgb(40, 40, 40), flat. Flat rather than graded on purpose - a
       gradient would mean most of the panel was not the colour that was asked for. */
    --survey-stage: #282828;
    --survey-stage-border: rgba(255, 255, 255, 0.1);
    --survey-stage-border-lit: rgba(255, 200, 60, 0.16);

    /* Surfaces that sit on the stage: an option, an input, a rank row. Lifted from
       3.5% to 6% white - the same veil that separated a card from a near-black stage
       barely registers against rgb(40, 40, 40). */
    --survey-surface: rgba(255, 255, 255, 0.06);
    --survey-surface-hover: rgba(255, 255, 255, 0.1);
    --survey-surface-border: rgba(255, 255, 255, 0.14);
    --survey-surface-border-hover: rgba(255, 255, 255, 0.26);

    /* Warm off-white rather than pure white. #fff on near-black is its own kind
       of glare; this reads as paper-white and still clears 14:1. */
    --survey-text: #EDEAE3;
    --survey-text-soft: #B9B3A9;
    /* Both relit for rgb(40, 40, 40). At the previous values they measured 4.03:1
       and 3.61:1 on this panel, which is under AA - a lighter ground costs the
       quiet type its contrast, and the quiet type is where that shows first. */
    --survey-text-muted: #A39D93;
    --survey-text-faint: #9C968C;

    /* Real Aloite gold, usable as type here. */
    --survey-accent: #FFC000;
    --survey-accent-soft: #FFD34D;
    --survey-accent-wash: rgba(255, 192, 0, 0.11);
    --survey-accent-edge: rgba(255, 192, 0, 0.45);
    --survey-on-accent: #171512;

    /* Warm coral rather than red: legible on dark at 6:1 and not alarming. */
    --survey-error: #FF8A6B;
    --survey-error-wash: rgba(255, 138, 107, 0.1);
    --survey-error-edge: rgba(255, 138, 107, 0.42);

    --survey-radius: 8px;
    --survey-radius-stage: 14px;

    --survey-measure: 640px;
    --survey-ease: cubic-bezier(0.22, 1, 0.36, 1);

    color: var(--survey-text-soft);

    /* A slow warm aurora, so the ground is not a flat void behind the stage. */
    background:
        radial-gradient(1200px 700px at 70% -10%, rgba(255, 192, 0, 0.055), transparent 60%),
        radial-gradient(900px 600px at 12% 105%, rgba(120, 150, 255, 0.028), transparent 62%),
        linear-gradient(180deg, var(--survey-page-bg-lift) 0%, var(--survey-page-bg) 46%, var(--survey-page-bg) 100%);

    padding: 40px 0 80px;
    min-height: 62vh;
}

/* ---- Layout ---------------------------------------------------------- */

.svy-page--form .svy-hero--form {
    display: grid;
    grid-template-columns: 210px minmax(0, 1fr);
    gap: 48px;
    align-items: start;
    max-width: 1040px;
}

.svy-page--form .svy-hero__lead--sticky {
    position: sticky;
    top: 88px;
}

.svy-page--form .svy-hero__aside {
    min-width: 0;
}

/* ---- The rail --------------------------------------------------------- */

.svy-page--form .svy-kicker {
    color: var(--survey-text-faint);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    margin-bottom: 12px;
}

.svy-page--form .svy-title--form {
    color: var(--survey-text);
    font-size: 1.02rem;
    line-height: 1.42;
    font-weight: 600;
    letter-spacing: -0.005em;
    max-width: 19ch;
    margin-bottom: 26px;
}

.svy-page--form .svy-progress {
    display: none;
}

.svy-page--form .svy-steps-track {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 1px;
}

.svy-page--form .svy-steps-track li {
    position: relative;
    padding: 8px 0 8px 24px;
    color: var(--survey-text-faint);
    font-size: 0.81rem;
    line-height: 1.4;
    transition: color 0.25s var(--survey-ease);
}

.svy-page--form .svy-steps-track li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 13px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.22);
    background: transparent;
    transition: background-color 0.25s var(--survey-ease), box-shadow 0.25s var(--survey-ease);
}

.svy-page--form .svy-steps-track li:not(:last-child)::after {
    content: "";
    position: absolute;
    left: 3px;
    top: 22px;
    width: 1px;
    height: calc(100% - 14px);
    background: rgba(255, 255, 255, 0.09);
}

.svy-page--form .svy-steps-track li.is-done {
    color: var(--survey-text-muted);
}

.svy-page--form .svy-steps-track li.is-done::before {
    background: rgba(255, 255, 255, 0.34);
    border-color: transparent;
}

.svy-page--form .svy-steps-track li.is-current {
    color: var(--survey-text);
    font-weight: 600;
}

.svy-page--form .svy-steps-track li.is-current::before {
    background: var(--survey-accent);
    border-color: var(--survey-accent);
    box-shadow: 0 0 0 3px rgba(255, 192, 0, 0.15), 0 0 14px rgba(255, 192, 0, 0.4);
}

.svy-page--form .svy-rail-note {
    margin: 24px 0 0;
    padding-top: 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    color: var(--survey-text-faint);
    font-size: 0.75rem;
    line-height: 1.6;
    max-width: 24ch;
}

/* ---- The stage --------------------------------------------------------
   Recessed rather than raised: a hairline border, a soft inner light at the
   top edge and a deep shadow beneath. It reads as a surface without ever
   becoming a bright rectangle. */

.svy-page--form .svy-panel {
    position: relative;
    /* A plain colour, not a gradient of one colour: it renders the same and it
       reports as rgb(40, 40, 40) to anybody who inspects it. */
    background-color: var(--survey-stage);
    border: 1px solid var(--survey-stage-border);
    border-radius: var(--survey-radius-stage);
    color: var(--survey-text);
    padding: 0 52px 40px;
    max-width: none;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        0 24px 70px -20px rgba(0, 0, 0, 0.9);
    overflow: hidden;
}

/* A gold thread along the top edge, brightest at the centre. */
.svy-page--form .svy-panel::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--survey-stage-border-lit) 30%, var(--survey-stage-border-lit) 70%, transparent);
    pointer-events: none;
}

/* ---- Step progress across the head of the stage ----------------------- */

.svy-page--form .svy-canvas-progress {
    position: relative;
    height: 2px;
    margin: 0 -52px 34px;
    background: rgba(255, 255, 255, 0.12);
}

.svy-page--form .svy-canvas-progress span {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, var(--survey-accent-soft), var(--survey-accent));
    box-shadow: 0 0 12px rgba(255, 192, 0, 0.5);
    transition: width 0.5s var(--survey-ease);
}

/* ---- Sections ---------------------------------------------------------
   Used in stacked mode. In focus mode the section name moves into the stage
   header instead, and these are hidden. */

.svy-page--form .svy-section + .svy-section {
    margin-top: 42px;
    padding-top: 36px;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.svy-page--form .svy-section__title {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--survey-accent);
    font-size: 0.69rem;
    font-weight: 700;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    margin: 0 0 8px;
    padding: 0;
    border: 0;
}

.svy-page--form .svy-section__title::after {
    content: "";
    flex: 1;
    max-width: 84px;
    height: 1px;
    background: linear-gradient(90deg, var(--survey-accent-edge), transparent);
}

.svy-page--form .svy-section__desc {
    color: var(--survey-text-muted);
    font-size: 0.86rem;
    line-height: 1.6;
    max-width: var(--survey-measure);
    margin: 0;
}

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

.svy-page--form .svy-grid {
    display: block;
    margin-top: 22px;
}

.svy-page--form form.svy-panel {
    counter-reset: svy-question;
}

.svy-page--form .svy-q {
    position: relative;
    max-width: var(--survey-measure);
    padding: 0 0 0 28px;
    background: none;
    border: 0;
}

.svy-page--form .svy-q + .svy-q {
    margin-top: 26px;
}

.svy-page--form .svy-q__label {
    display: block;
    color: var(--survey-text);
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: -0.003em;
    margin-bottom: 5px;
}

.svy-page--form .svy-q__label::before {
    counter-increment: svy-question;
    content: counter(svy-question);
    position: absolute;
    left: 0;
    top: 2px;
    width: 20px;
    color: var(--survey-text-faint);
    font-size: 0.74rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.svy-page--form .svy-q__req {
    color: var(--survey-accent);
    font-weight: 700;
    margin-left: 3px;
}

.svy-page--form .svy-q__help {
    display: block;
    color: var(--survey-text-muted);
    font-size: 0.83rem;
    line-height: 1.55;
    font-weight: 400;
    margin-bottom: 10px;
}

/* ---- Text, number, date, textarea, select ------------------------------ */

.svy-page--form .svy-input,
.svy-page--form .svy-textarea,
.svy-page--form .svy-select,
.svy-page--form .svy-multi__toggle,
.svy-page--form .svy-rank__select {
    background: var(--survey-surface);
    border: 1px solid var(--survey-surface-border);
    border-radius: var(--survey-radius);
    color: var(--survey-text);
    font-size: 0.92rem;
    line-height: 1.5;
    padding: 11px 13px;
    width: 100%;
    max-width: var(--survey-measure);
    box-shadow: none;
    transition: border-color 0.18s var(--survey-ease),
                background-color 0.18s var(--survey-ease),
                box-shadow 0.18s var(--survey-ease);
}

.svy-page--form .svy-input[type="number"],
.svy-page--form .svy-input[type="date"] {
    max-width: 220px;
}

.svy-page--form .svy-textarea {
    min-height: 108px;
    resize: vertical;
}

.svy-page--form .svy-input::placeholder,
.svy-page--form .svy-textarea::placeholder {
    color: var(--survey-text-muted);
}

.svy-page--form .svy-input:hover,
.svy-page--form .svy-textarea:hover,
.svy-page--form .svy-select:hover,
.svy-page--form .svy-multi__toggle:hover,
.svy-page--form .svy-rank__select:hover {
    background: var(--survey-surface-hover);
    border-color: var(--survey-surface-border-hover);
}

/* One focus treatment everywhere: gold edge, gold halo. */
.svy-page--form .svy-input:focus,
.svy-page--form .svy-textarea:focus,
.svy-page--form .svy-select:focus,
.svy-page--form .svy-rank__select:focus {
    outline: none;
    border-color: var(--survey-accent-edge);
    background: var(--survey-surface-hover);
    box-shadow: 0 0 0 3px rgba(255, 192, 0, 0.16);
}

.svy-page--form .svy-input:focus-visible,
.svy-page--form .svy-textarea:focus-visible,
.svy-page--form .svy-select:focus-visible,
.svy-page--form .svy-multi.is-enhanced .svy-multi__toggle:focus-visible,
.svy-page--form .svy-rank__select:focus-visible,
.svy-page--form .svy-submit:focus-visible,
.svy-page--form .svy-focus__btn:focus-visible,
.svy-page--form .svy-option input:focus-visible + span,
.svy-page--form .svy-scale__item input:focus-visible + .svy-scale__box {
    outline: 2px solid var(--survey-accent);
    outline-offset: 2px;
}

.svy-page--form .svy-select,
.svy-page--form .svy-rank__select {
    appearance: none;
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%238B857C' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 13px center;
    background-size: 11px;
    padding-right: 36px;
    cursor: pointer;
}

/* A native menu would otherwise be drawn by the OS in its own colours. */
.svy-page--form .svy-select option,
.svy-page--form .svy-rank__select option {
    background: #2F2F2F;
    color: var(--survey-text);
}

.svy-page--form .svy-input:disabled,
.svy-page--form .svy-textarea:disabled,
.svy-page--form .svy-select:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.svy-page--form .svy-input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(0.7);
    opacity: 0.6;
    cursor: pointer;
}

/* ---- Options: the main event ------------------------------------------
   Radios and checkboxes as cards. Big enough to hit, quiet until chosen,
   unmistakable once they are. */

.svy-page--form .svy-options {
    display: grid;
    gap: 7px;
    margin-top: 2px;
    max-width: var(--survey-measure);
}

.svy-page--form .svy-option {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 13px 15px;
    border: 1px solid var(--survey-surface-border);
    border-radius: var(--survey-radius);
    background: var(--survey-surface);
    color: var(--survey-text);
    font-size: 0.93rem;
    line-height: 1.5;
    cursor: pointer;
    overflow: hidden;
    transition: border-color 0.18s var(--survey-ease),
                background-color 0.18s var(--survey-ease),
                transform 0.12s var(--survey-ease);
}

.svy-page--form .svy-option:hover {
    background: var(--survey-surface-hover);
    border-color: var(--survey-surface-border-hover);
}

.svy-page--form .svy-option:active {
    transform: scale(0.995);
}

.svy-page--form .svy-option:has(input:checked) {
    background: var(--survey-accent-wash);
    border-color: var(--survey-accent-edge);
    color: #fff;
}

/* A gold spine on the chosen option, so selection is legible even to somebody
   who cannot separate the wash from the surface. */
.svy-page--form .svy-option:has(input:checked)::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--survey-accent);
}

.svy-page--form .svy-option input {
    accent-color: var(--survey-accent);
    width: 16px;
    height: 16px;
    margin: 2px 0 0;
    flex: 0 0 auto;
}

/* ---- Multi-select ------------------------------------------------------ */

.svy-page--form .svy-multi {
    max-width: var(--survey-measure);
}

.svy-page--form .svy-multi.is-enhanced .svy-multi__toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    text-align: left;
    cursor: pointer;
}

.svy-page--form .svy-multi__value.is-placeholder {
    color: var(--survey-text-muted);
}

.svy-page--form .svy-multi__chev {
    border-color: var(--survey-text-muted);
}

.svy-page--form .svy-multi.is-enhanced .svy-multi__panel {
    background: #2E2E2E;
    border: 1px solid var(--survey-surface-border-hover);
    border-radius: var(--survey-radius);
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.7);
    padding: 6px;
}

.svy-page--form .svy-multi.is-enhanced.is-open .svy-multi__toggle {
    border-color: var(--survey-accent-edge);
    background: var(--survey-surface-hover);
    box-shadow: none;
}

.svy-page--form .svy-multi__panel .svy-option {
    border-color: transparent;
    background: transparent;
}

.svy-page--form .svy-multi__panel .svy-option:hover {
    background: var(--survey-surface-hover);
}

.svy-page--form .svy-multi__panel::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.18);
}

.svy-page--form .svy-multi:not(.is-enhanced) .svy-multi__panel {
    display: grid;
    gap: 7px;
}

/* ---- Rating ------------------------------------------------------------ */

.svy-page--form .svy-rating {
    width: max-content;
    max-width: 100%;
}

.svy-page--form .svy-scale {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.svy-page--form .svy-scale__box {
    display: grid;
    place-items: center;
    min-width: 52px;
    height: 50px;
    padding: 0 10px;
    border: 1px solid var(--survey-surface-border);
    border-radius: var(--survey-radius);
    background: var(--survey-surface);
    color: var(--survey-text);
    font-size: 1rem;
    font-variant-numeric: tabular-nums;
    transition: border-color 0.18s var(--survey-ease),
                background-color 0.18s var(--survey-ease),
                transform 0.12s var(--survey-ease);
}

.svy-page--form .svy-scale__item:hover .svy-scale__box {
    background: var(--survey-surface-hover);
    border-color: var(--survey-surface-border-hover);
    transform: translateY(-1px);
}

.svy-page--form .svy-scale__item input:checked + .svy-scale__box {
    background: var(--survey-accent);
    border-color: var(--survey-accent);
    color: var(--survey-on-accent);
    font-weight: 700;
    box-shadow: 0 0 20px rgba(255, 192, 0, 0.32);
}

.svy-page--form .svy-rating__ends {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    max-width: none;
    margin-top: 9px;
}

.svy-page--form .svy-rating__end {
    color: var(--survey-text-faint);
    font-size: 0.76rem;
}

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

.svy-page--form .svy-rank {
    display: grid;
    gap: 7px;
    max-width: var(--survey-measure);
    margin-top: 4px;
}

.svy-page--form .svy-rank__row {
    position: relative;
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 9px 13px;
    border: 1px solid var(--survey-surface-border);
    border-radius: var(--survey-radius);
    background: var(--survey-surface);
    overflow: hidden;
    transition: border-color 0.18s var(--survey-ease), background-color 0.18s var(--survey-ease);
}

.svy-page--form .svy-rank__row:hover {
    background: var(--survey-surface-hover);
    border-color: var(--survey-surface-border-hover);
}

/* Marked by the script and by the server on a re-render. Not
   :has(select:not([value=""])) - a select carries no value attribute, so that
   matched every row and made the whole list look chosen before anything was. */
.svy-page--form .svy-rank__row.is-ranked {
    background: var(--survey-accent-wash);
    border-color: var(--survey-accent-edge);
}

.svy-page--form .svy-rank__row.is-ranked::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--survey-accent);
}

.svy-page--form .svy-rank__select {
    width: 62px;
    min-width: 62px;
    max-width: 62px;
    padding: 7px 8px;
    padding-right: 24px;
    text-align: left;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    background-position: right 7px center;
    background-size: 9px;
}

.svy-page--form .svy-rank__row.is-ranked .svy-rank__select {
    color: var(--survey-accent);
    border-color: var(--survey-accent-edge);
}

.svy-page--form .svy-rank__label {
    color: var(--survey-text);
    font-size: 0.92rem;
    line-height: 1.45;
}

.svy-page--form .svy-rank-instruction {
    display: inline-block;
    color: var(--survey-accent);
    background: var(--survey-accent-wash);
    border: 1px solid var(--survey-accent-edge);
    border-radius: 5px;
    padding: 4px 10px;
    font-size: 0.77rem;
    font-weight: 600;
    margin: 0 0 10px;
}

/* ---- "Other" free text -------------------------------------------------- */

.svy-page--form .svy-other {
    margin-top: 8px;
}

/* ---- Actions ------------------------------------------------------------ */

.svy-page--form .svy-actions {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
    margin-top: 36px;
    padding-top: 26px;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.svy-page--form .svy-submit {
    background: var(--survey-accent);
    border: 1px solid var(--survey-accent);
    border-radius: var(--survey-radius);
    color: var(--survey-on-accent);
    font-size: 0.92rem;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    padding: 12px 22px;
    width: auto;
    box-shadow: 0 2px 18px rgba(255, 192, 0, 0.2);
    transition: background-color 0.18s var(--survey-ease),
                box-shadow 0.18s var(--survey-ease),
                transform 0.12s var(--survey-ease);
}

.svy-page--form .svy-submit:hover {
    background: var(--survey-accent-soft);
    box-shadow: 0 4px 26px rgba(255, 192, 0, 0.36);
    transform: translateY(-1px);
}

.svy-page--form .svy-submit:active {
    transform: translateY(0);
}

.svy-page--form .svy-actions__note {
    color: var(--survey-text-faint);
    font-size: 0.78rem;
    line-height: 1.5;
    margin: 0;
}

/* ---- Errors ------------------------------------------------------------- */

.svy-page--form .svy-q__error {
    display: block;
    color: var(--survey-error);
    font-size: 0.82rem;
    line-height: 1.5;
    margin-bottom: 8px;
}

.svy-page--form .svy-q.has-error {
    background: none;
    border: 0;
    border-left: 2px solid var(--survey-error);
    padding-left: 26px;
    margin-left: -2px;
}

.svy-page--form .svy-q.has-error .svy-q__label::before {
    left: 10px;
    color: var(--survey-error);
}

.svy-page--form .svy-q.has-error .svy-input,
.svy-page--form .svy-q.has-error .svy-textarea,
.svy-page--form .svy-q.has-error .svy-select,
.svy-page--form .svy-q.has-error .svy-multi__toggle {
    border-color: var(--survey-error-edge);
}

.svy-page--form .svy-alert {
    background: var(--survey-error-wash);
    border: 1px solid var(--survey-error-edge);
    border-radius: var(--survey-radius);
    color: var(--survey-error);
    font-size: 0.87rem;
    line-height: 1.55;
    padding: 14px 16px;
    margin-bottom: 28px;
}

.svy-page--form .svy-alert ul {
    margin: 7px 0 0;
    padding-left: 18px;
}

/* ---- The identity step -------------------------------------------------- */

.svy-page--form .svy-consent {
    display: grid;
    gap: 7px;
    max-width: var(--survey-measure);
}

.svy-page--form .svy-consent .svy-option {
    align-items: flex-start;
    padding: 14px 16px;
}

.svy-page--form .svy-consent__what {
    display: block;
    font-weight: 600;
}

.svy-page--form .svy-consent__why {
    display: block;
    color: var(--survey-text-muted);
    font-size: 0.81rem;
    line-height: 1.5;
    margin-top: 3px;
}

.svy-page--form .svy-note {
    color: var(--survey-text-faint);
    font-size: 0.8rem;
    line-height: 1.6;
    max-width: var(--survey-measure);
    margin: 22px 0 0;
}

.svy-page--form .svy-note a {
    color: var(--survey-accent);
}

/* ======================================================================
   FOCUS MODE
   One question on the stage at a time. Everything below only applies once
   survey-focus.js has added .is-focus, so with scripting off none of it
   exists and the stacked form above is what a respondent gets.
   ====================================================================== */

.svy-page--form .svy-panel.is-focus {
    padding-bottom: 0;
}

/* Section headings move into the stage header. */
.is-focus .svy-section__title,
.is-focus .svy-section__desc {
    display: none;
}

.is-focus .svy-section,
.is-focus .svy-section + .svy-section {
    margin: 0;
    padding: 0;
    border: 0;
}

.is-focus .svy-grid {
    margin: 0;
}

/* ---- Stage header: where you are, in two words and a count ------------- */

.svy-focus__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 20px;
    min-height: 22px;
    margin-bottom: 26px;
}

.svy-focus__section {
    color: var(--survey-accent);
    font-size: 0.69rem;
    font-weight: 700;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.svy-focus__count {
    color: var(--survey-text-faint);
    font-size: 0.74rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.06em;
    white-space: nowrap;
}

/* ---- The slide --------------------------------------------------------- */

.is-focus .svy-q {
    display: none;
    max-width: none;
    padding-left: 0;
    min-height: 300px;
}

.is-focus .svy-q.is-active {
    display: block;
    animation: svy-slide-in 0.38s var(--survey-ease) both;
}

.is-focus .svy-q.is-active.is-back {
    animation-name: svy-slide-in-back;
}

@keyframes svy-slide-in {
    from { opacity: 0; transform: translate3d(0, 14px, 0); }
    to   { opacity: 1; transform: none; }
}

@keyframes svy-slide-in-back {
    from { opacity: 0; transform: translate3d(0, -14px, 0); }
    to   { opacity: 1; transform: none; }
}

/* The prompt is the whole screen now, so it can carry real weight. */
.is-focus .svy-q__label {
    font-size: 1.32rem;
    font-weight: 600;
    line-height: 1.36;
    letter-spacing: -0.014em;
    margin-bottom: 8px;
    max-width: var(--survey-measure);
}

/* No gutter numbering in focus mode - the counter in the header does that job. */
.is-focus .svy-q__label::before {
    display: none;
}

.is-focus .svy-q__help {
    font-size: 0.88rem;
    margin-bottom: 18px;
    max-width: 46ch;
}

.is-focus .svy-q.has-error {
    border-left: 0;
    padding-left: 0;
    margin-left: 0;
}

.is-focus .svy-q__error {
    font-size: 0.85rem;
    margin: 0 0 10px;
}

/* Focus moves to the question when the stage changes, so a screen reader reads the
   new prompt. That is an announcement, not a keyboard destination - a ring drawn
   round the whole block would be noise, and nobody navigated there by hand. */
.is-focus .svy-q:focus,
.is-focus .svy-q:focus-visible {
    outline: none;
}

/* Number keys pick an option. */
.is-focus .svy-option {
    padding-left: 46px;
}

/* The identity step sets its own option padding, at equal specificity and earlier
   in the file. Restated here so the badge does not land on top of the label. */
.is-focus .svy-consent .svy-option {
    padding-left: 46px;
}

.is-focus .svy-option::after {
    content: attr(data-key);
    position: absolute;
    left: 14px;
    top: 14px;
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    border: 1px solid var(--survey-surface-border);
    border-radius: 4px;
    color: var(--survey-text-muted);
    font-size: 0.68rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    transition: border-color 0.18s var(--survey-ease), color 0.18s var(--survey-ease);
}

.is-focus .svy-option:has(input:checked)::after {
    border-color: var(--survey-accent-edge);
    color: var(--survey-accent);
}

.is-focus .svy-option input {
    position: absolute;
    left: 16px;
    opacity: 0;
    width: 16px;
    height: 16px;
    pointer-events: none;
}

/* ---- Stage footer: navigation ------------------------------------------ */

.svy-focus__bar {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin: 0 -52px;
    padding: 20px 52px;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    background: rgba(0, 0, 0, 0.22);
}

.svy-focus__btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--survey-surface);
    border: 1px solid var(--survey-surface-border);
    border-radius: var(--survey-radius);
    color: var(--survey-text-soft);
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    padding: 11px 18px;
    cursor: pointer;
    transition: border-color 0.18s var(--survey-ease),
                background-color 0.18s var(--survey-ease),
                color 0.18s var(--survey-ease);
}

.svy-focus__btn:hover {
    background: var(--survey-surface-hover);
    border-color: var(--survey-surface-border-hover);
    color: var(--survey-text);
}

.svy-focus__btn[hidden] {
    display: none;
}

.svy-focus__btn--next {
    background: var(--survey-accent);
    border-color: var(--survey-accent);
    color: var(--survey-on-accent);
    box-shadow: 0 2px 18px rgba(255, 192, 0, 0.2);
}

.svy-focus__btn--next:hover {
    background: var(--survey-accent-soft);
    border-color: var(--survey-accent-soft);
    color: var(--survey-on-accent);
    box-shadow: 0 4px 26px rgba(255, 192, 0, 0.36);
}

.svy-focus__spacer {
    flex: 1;
}

.svy-focus__hint {
    color: var(--survey-text-faint);
    font-size: 0.75rem;
    line-height: 1.5;
}

.svy-focus__hint kbd {
    display: inline-block;
    min-width: 18px;
    padding: 1px 5px;
    border: 1px solid var(--survey-surface-border);
    border-bottom-width: 2px;
    border-radius: 4px;
    background: var(--survey-surface);
    color: var(--survey-text-muted);
    font-family: inherit;
    font-size: 0.7rem;
    font-weight: 600;
    text-align: center;
}

/* In focus mode the real submit lives in the bar and only appears on the last
   question, so the stacked actions row steps aside. */
.is-focus .svy-actions {
    margin: 0;
    padding: 0;
    border: 0;
}

/* On the last question the real submit replaces Next, and the two sit in the same
   bar - so they have to be the same control to look at. Left alone the submit is a
   240px pill with a 40px icon disc and a 30px top margin, which is right at the foot
   of a long stacked form and wrong beside a Back button. */
.svy-page--form .svy-panel.is-focus .svy-actions .svy-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 0;
    margin: 0;
    padding: 11px 18px;
    border-radius: var(--survey-radius);
    font-size: 0.9rem;
    font-weight: 600;
    backdrop-filter: none;
}

/* The disc becomes a plain arrow: a filled circle on a filled button is a button
   drawn twice. */
.svy-page--form .svy-panel.is-focus .svy-actions .svy-submit__icon {
    width: auto;
    height: auto;
    background: none;
    border-radius: 0;
    color: inherit;
    transform: none;
}

.svy-page--form .svy-panel.is-focus .svy-actions .svy-submit__icon svg {
    width: 15px;
    height: 15px;
}

.svy-page--form .svy-panel.is-focus .svy-actions .svy-submit:hover .svy-submit__icon {
    transform: translateX(2px);
}

.is-focus .svy-actions__note {
    display: none;
}

/* ---- Responsive --------------------------------------------------------- */

@media (max-width: 1100px) {
    .svy-page--form .svy-hero--form {
        grid-template-columns: minmax(0, 1fr);
        gap: 22px;
    }

    .svy-page--form .svy-hero__lead--sticky {
        position: static;
    }

    .svy-page--form .svy-title--form {
        max-width: none;
        margin-bottom: 14px;
    }

    .svy-page--form .svy-progress {
        display: flex;
        gap: 4px;
        margin-bottom: 9px;
    }

    .svy-page--form .svy-steps-track {
        display: flex;
        gap: 0;
    }

    .svy-page--form .svy-steps-track li {
        padding: 0;
        font-size: 0.78rem;
    }

    .svy-page--form .svy-steps-track li::before,
    .svy-page--form .svy-steps-track li:not(:last-child)::after {
        display: none;
    }

    .svy-page--form .svy-steps-track li:not(.is-current) {
        display: none;
    }

    .svy-page--form .svy-rail-note {
        margin-top: 12px;
        padding-top: 12px;
        max-width: none;
    }
}

@media (max-width: 767.98px) {
    .svy-page--form {
        padding: 18px 0 44px;
    }

    .svy-page--form .svy-container {
        padding: 0 12px;
    }

    .svy-page--form .svy-panel {
        padding: 0 18px 30px;
        border-radius: 12px;
    }

    .svy-page--form .svy-canvas-progress {
        margin: 0 -18px 24px;
    }

    .svy-page--form .svy-panel.is-focus {
        padding-bottom: 0;
    }

    .svy-focus__bar {
        margin: 0 -18px;
        padding: 16px 18px;
    }

    .svy-focus__hint {
        display: none;
    }

    .svy-focus__btn {
        flex: 1;
        justify-content: center;
    }

    .is-focus .svy-q {
        min-height: 230px;
    }

    .is-focus .svy-q__label {
        font-size: 1.12rem;
        max-width: none;
    }

    .svy-page--form .svy-section + .svy-section {
        margin-top: 32px;
        padding-top: 26px;
    }

    .svy-page--form .svy-q {
        padding-left: 24px;
    }

    .svy-page--form .svy-input,
    .svy-page--form .svy-textarea,
    .svy-page--form .svy-select,
    .svy-page--form .svy-multi,
    .svy-page--form .svy-multi__toggle {
        max-width: none;
        font-size: 16px;
    }

    .svy-page--form .svy-option {
        min-height: 46px;
    }

    .svy-page--form .svy-scale__box {
        min-width: 46px;
        height: 46px;
    }

    .svy-page--form .svy-submit {
        width: 100%;
        justify-content: center;
    }
}

@media (min-width: 1400px) {
    .svy-page--form .svy-hero--form {
        grid-template-columns: 224px minmax(0, 1fr);
        gap: 60px;
        max-width: 1100px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .svy-page--form *,
    .svy-page--form *::before,
    .svy-page--form *::after {
        animation-duration: 0.001ms !important;
        transition-duration: 0.001ms !important;
    }
}