/*
 * Shared survey runner (LmsSurveyClientComponents) — one global stylesheet with the svr- prefix (design-runner 4.2/4.5).
 * Components use ONLY --svr-* tokens. Each skin maps the tokens to its portal's own tokens (--portal-*, --tenant-*,
 * --staff-*, --color-*) with the identity's defaults as fallbacks, so in a portal the portal/tenant token wins and in
 * the builder preview the identity default shows. Rules are written with low specificity inside .svr so portal pages
 * can fine-tune without ::deep; focus rings are painted on the field shell, never on the bare inner control.
 *
 * Sections: 1 tokens · 2 skins · 3 theme variants · 4 base · 5 utilities · 6 runner chrome · 7 question card ·
 * 8 inputs · 9 review and ending · 10 live · 11 feedback and dialogs · 12 queue, late state, kiosk · 13 responsive ·
 * 14 contrast, forced colours, motion, print.
 */

/* ---------------------------------------------------------------------------------------------------- 1 tokens */
.svr {
    --svr-text: #1d2433;
    --svr-text-muted: #5b6474;
    --svr-text-soft: #7d8697;
    --svr-surface: #ffffff;
    --svr-surface-subtle: #f7f8fa;
    --svr-surface-sunken: #eef1f5;
    --svr-canvas: transparent;
    --svr-border: #e3e7ee;
    --svr-border-strong: #cdd4df;
    --svr-accent: #18314f;
    --svr-on-accent: #ffffff;
    --svr-gold: #b89146;
    --svr-action: #18314f;
    --svr-on-action: #ffffff;
    --svr-action-text: #18314f;
    --svr-focus: #315f86;
    --svr-danger: #b42338;
    --svr-warning: #8a5a08;
    --svr-success: #0f7657;
    --svr-info: #2f5bb7;
    --svr-ink: #172033;
    --svr-font-heading: inherit;
    --svr-radius: 16px;
    --svr-gap: 16px;
    --svr-max-width: 980px;
    --svr-font-scale: 1;
    --svr-text-scale: 1;
    --svr-card-bg: var(--svr-surface);
    --svr-card-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 10px 28px rgba(16, 24, 40, .05);
    --svr-pad: 1.1rem;
    --svr-speed: 160ms;
    --svr-ease: cubic-bezier(.2, .7, .2, 1);

    /* Derived tokens (skins normally leave these alone). */
    --svr-radius-sm: calc(var(--svr-radius) * .66);
    --svr-radius-xs: calc(var(--svr-radius) * .45);
    --svr-accent-soft: color-mix(in srgb, var(--svr-accent) 8%, var(--svr-surface));
    --svr-accent-softer: color-mix(in srgb, var(--svr-accent) 4%, var(--svr-surface));
    --svr-accent-line: color-mix(in srgb, var(--svr-accent) 38%, var(--svr-border));
    --svr-gold-soft: color-mix(in srgb, var(--svr-gold) 15%, var(--svr-surface));
    --svr-danger-soft: color-mix(in srgb, var(--svr-danger) 8%, var(--svr-surface));
    --svr-warning-soft: color-mix(in srgb, var(--svr-warning) 10%, var(--svr-surface));
    --svr-success-soft: color-mix(in srgb, var(--svr-success) 9%, var(--svr-surface));
    --svr-info-soft: color-mix(in srgb, var(--svr-info) 8%, var(--svr-surface));
    --svr-ring: 0 0 0 3px color-mix(in srgb, var(--svr-focus) 34%, transparent);
}

/* ----------------------------------------------------------------------------------------------------- 2 skins */

/* Student and Lecturer: MudBlazor portals, tenant navy/forest + gold identity. */
.svr[data-svr-skin="student"],
.svr[data-svr-skin="lecturer"] {
    --svr-text: var(--portal-text, var(--color-text-primary, #1d2025));
    --svr-text-muted: var(--portal-muted, var(--color-text-secondary, #5d6673));
    --svr-text-soft: var(--color-text-muted, #6b7382);
    --svr-surface: var(--color-surface, #ffffff);
    --svr-surface-subtle: var(--color-surface-subtle, #fafafb);
    --svr-surface-sunken: color-mix(in srgb, var(--svr-text) 7%, var(--svr-surface));
    --svr-border: var(--portal-border, var(--color-border, #e5e7eb));
    --svr-border-strong: var(--portal-border-strong, var(--color-border-strong, #d8dce2));
    --svr-accent: var(--tenant-primary, var(--portal-primary, #18251f));
    --svr-on-accent: var(--tenant-on-primary, #ffffff);
    --svr-gold: var(--tenant-accent, var(--portal-gold, #d8b462));
    --svr-action: var(--tenant-action, var(--portal-primary, #18251f));
    --svr-on-action: var(--tenant-on-action, #ffffff);
    --svr-action-text: var(--tenant-action-text, var(--portal-primary, #18251f));
    --svr-focus: var(--tenant-focus-ring, #315f86);
    --svr-danger: var(--color-danger, #c43d4b);
    --svr-warning: var(--color-warning, #8a5a08);
    --svr-success: var(--color-success, #0f7657);
    --svr-info: var(--color-info, #3e63c7);
    --svr-ink: var(--tenant-primary, #18251f);
}

/* Staff: its own identity — deep blue + warm gold, Manrope body, Fraunces display, generous radius. */
.svr[data-svr-skin="staff"] {
    font-family: "Manrope", "Noto Sans Georgian", "Segoe UI Variable Display", "Segoe UI", sans-serif;
    --svr-font-heading: "Fraunces", "Noto Serif Georgian", Georgia, serif;
    --svr-text: var(--portal-text, #122a44);
    --svr-text-muted: var(--portal-muted, #5f6877);
    --svr-text-soft: #7a8496;
    --svr-surface: var(--portal-surface-strong, #ffffff);
    --svr-surface-subtle: #f6f8fc;
    --svr-surface-sunken: var(--portal-bg, #edf2f8);
    --svr-border: var(--portal-border, rgba(18, 42, 68, .09));
    --svr-border-strong: rgba(18, 42, 68, .18);
    --svr-accent: var(--tenant-action, var(--staff-action, #1756c1));
    --svr-on-accent: var(--tenant-on-action, #ffffff);
    --svr-gold: var(--tenant-accent, var(--portal-gold, #b88636));
    --svr-action: var(--tenant-action, var(--staff-action, #124596));
    --svr-on-action: var(--tenant-on-action, var(--staff-on-action, #ffffff));
    --svr-action-text: var(--tenant-action-text, var(--staff-action-text, #1756c1));
    --svr-focus: var(--tenant-focus-ring, var(--staff-focus-ring, #1756c1));
    --svr-danger: var(--portal-danger, #b3374f);
    --svr-warning: var(--portal-warning, #8a5a08);
    --svr-success: var(--portal-success, #0f7657);
    --svr-card-bg: linear-gradient(180deg, var(--svr-surface) 0%, color-mix(in srgb, var(--svr-surface-subtle) 70%, var(--svr-surface)) 100%);
    --svr-card-shadow: 0 1px 2px rgba(13, 36, 72, .04), 0 14px 32px rgba(13, 36, 72, .075);
    --svr-ink: #122a44;
}

/* Public collector: standalone anonymous page, navy hero. */
.svr[data-svr-skin="public"] {
    --svr-text: #172033;
    --svr-text-muted: #5d6677;
    --svr-surface: #ffffff;
    --svr-surface-subtle: #f7f9fc;
    --svr-surface-sunken: #eef2f7;
    --svr-border: #e2e7ef;
    --svr-border-strong: #cbd3df;
    --svr-accent: var(--tenant-primary, var(--survey-accent, #18314f));
    --svr-on-accent: var(--tenant-on-primary, #ffffff);
    --svr-gold: var(--tenant-accent, #b89146);
    --svr-action: var(--tenant-action, #18314f);
    --svr-on-action: var(--tenant-on-action, #ffffff);
    --svr-action-text: var(--tenant-action-text, #18314f);
    --svr-focus: var(--tenant-focus-ring, #315f86);
    --svr-card-shadow: 0 1px 2px rgba(15, 30, 60, .05), 0 18px 40px rgba(15, 30, 60, .07);
}

/* Admin (builder preview): Radzen blue/navy identity, glass surfaces, Manrope. */
.svr[data-svr-skin="admin"] {
    font-family: "Manrope", "Noto Sans Georgian", "Segoe UI", sans-serif;
    --svr-text: #18314f;
    --svr-text-muted: #5a6b82;
    --svr-surface: #ffffff;
    --svr-surface-subtle: #f4f6fb;
    --svr-surface-sunken: #eaf0f8;
    --svr-border: rgba(24, 49, 79, .1);
    --svr-border-strong: rgba(24, 49, 79, .2);
    --svr-accent: #1f6fd6;
    --svr-on-accent: #ffffff;
    --svr-gold: #b89146;
    --svr-action: #1f6fd6;
    --svr-on-action: #ffffff;
    --svr-action-text: #1a5fb8;
    --svr-focus: #1f6fd6;
    --svr-card-bg: rgba(255, 255, 255, .92);
    --svr-card-shadow: 0 1px 2px rgba(24, 49, 79, .05), 0 12px 30px rgba(24, 49, 79, .08);
}

/* ------------------------------------------------------------------------------------------- 3 theme variants */
.svr[data-svr-density="compact"] { --svr-pad: 1.05rem; }
.svr[data-svr-density="comfortable"] { --svr-pad: 1.35rem; }
.svr[data-svr-density="spacious"] { --svr-pad: 1.7rem; }

.svr[data-svr-surface="solid"] { --svr-card-bg: var(--svr-surface); }
.svr[data-svr-surface="glass"] {
    --svr-card-bg: color-mix(in srgb, var(--svr-surface) 78%, transparent);
}
.svr[data-svr-surface="glass"] .svr-card { backdrop-filter: blur(14px) saturate(1.15); }

.svr[data-svr-elevation="0"] { --svr-card-shadow: none; }
.svr[data-svr-elevation="2"] { --svr-card-shadow: 0 2px 4px rgba(16, 24, 40, .05), 0 16px 36px rgba(16, 24, 40, .08); }
.svr[data-svr-elevation="3"] { --svr-card-shadow: 0 4px 8px rgba(16, 24, 40, .06), 0 24px 48px rgba(16, 24, 40, .11); }

.svr[data-svr-motion="expressive"] { --svr-speed: 220ms; }
.svr[data-svr-motion="none"],
.svr[data-svr-motion="reduced"] { --svr-speed: 0ms; }

/* ------------------------------------------------------------------------------------------------------ 4 base */
.svr {
    color: var(--svr-text);
    font-size: calc(0.9375rem * var(--svr-font-scale) * var(--svr-text-scale));
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

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

.svr :where(h1, h2, h3, h4, p, ol, ul, figure, fieldset, legend) {
    margin: 0;
    padding: 0;
}

.svr :where(ol, ul) { list-style: none; }

.svr :where(button, input, select, textarea) {
    font: inherit;
    color: inherit;
    letter-spacing: inherit;
}

.svr :where(button) { cursor: pointer; }
.svr :where(button:disabled) { cursor: default; }

.svr-icon {
    flex: none;
    width: 1.15em;
    height: 1.15em;
    vertical-align: -0.2em;
}

/* Authored rich text inside captions and options. */
.svr-rich { overflow-wrap: anywhere; }
.svr-rich :where(p, div) { margin: 0; }
.svr-rich :where(p + p) { margin-top: .35em; }
.svr-rich :where(h1, h2, h3, h4, h5, h6) { font-size: 1em; font-weight: 700; margin: 0; }
.svr-rich :where(ul, ol) { list-style: revert; padding-left: 1.25em; margin: .25em 0; }
.svr-rich a { color: var(--svr-action-text); text-decoration: underline; text-underline-offset: 2px; }
.svr-rich table { border-collapse: collapse; margin: .35em 0; }
.svr-rich :where(td, th) { border: 1px solid var(--svr-border); padding: .2em .45em; }

/* ------------------------------------------------------------------------------------------------- 5 utilities */
.svr-visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* A native control that stays in the tab order and the accessibility tree; its tile / label draws it. */
.svr .svr-hidden-control {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    margin: 0;
    pointer-events: none;
}

.svr-spinner {
    display: inline-block;
    width: 1em;
    height: 1em;
    flex: none;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: svr-spin .8s linear infinite;
}

@keyframes svr-spin {
    to { transform: rotate(360deg); }
}

.svr-skeleton {
    display: grid;
    gap: .7rem;
    padding: var(--svr-pad);
    border: 1px solid var(--svr-border);
    border-radius: var(--svr-radius);
    background: var(--svr-surface);
}

.svr-skeleton__line,
.svr-skeleton__block {
    display: block;
    height: .8rem;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--svr-surface-sunken), var(--svr-surface-subtle), var(--svr-surface-sunken));
    background-size: 200% 100%;
    animation: svr-shimmer 1.4s ease-in-out infinite;
}

.svr-skeleton__line--short { width: 35%; }
.svr-skeleton__block { height: 3.2rem; border-radius: var(--svr-radius-sm); }

@keyframes svr-shimmer {
    from { background-position: 100% 0; }
    to { background-position: -100% 0; }
}

/* ------------------------------------------------------------------------------------------ 6 runner chrome */
.svr-runner {
    display: flex;
    flex-direction: column;
    gap: var(--svr-gap);
    width: 100%;
    max-width: var(--svr-max-width);
    margin-inline: auto;
    background: var(--svr-canvas);
}

.svr-flow {
    display: flex;
    flex-direction: column;
    gap: var(--svr-gap);
}

/* Header */
.svr-head {
    display: flex;
    flex-direction: column;
    gap: .95rem;
    padding: calc(var(--svr-pad) + .15rem) calc(var(--svr-pad) + .25rem);
    border: 1px solid var(--svr-border);
    border-radius: calc(var(--svr-radius) + 2px);
    background:
        radial-gradient(120% 140% at 100% 0%, color-mix(in srgb, var(--svr-gold) 9%, transparent) 0%, transparent 55%),
        linear-gradient(180deg, var(--svr-surface) 0%, var(--svr-surface-subtle) 100%);
    box-shadow: var(--svr-card-shadow);
}

.svr-head__top {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: .8rem 1.2rem;
}

.svr-head__titles {
    display: grid;
    gap: .2rem;
    min-width: 0;
    flex: 1 1 18rem;
}

.svr-head__eyebrow {
    color: var(--svr-action-text);
    font-size: .72em;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.svr-head__title {
    font-family: var(--svr-font-heading);
    font-size: 1.32em;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -.01em;
    overflow-wrap: anywhere;
}

.svr-head__subtitle {
    color: var(--svr-text-muted);
    font-size: .9em;
    max-width: 62ch;
}

.svr-head__tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
}

/* Progress */
.svr-progress {
    display: grid;
    gap: .45rem;
}

.svr-progress__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .35rem 1rem;
    color: var(--svr-text-muted);
    font-size: .82em;
    font-weight: 600;
}

.svr-progress__count { color: var(--svr-text); font-variant-numeric: tabular-nums; }

.svr-progress__time {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
}

.svr-progress__track {
    position: relative;
    display: flex;
    gap: 3px;
    height: .45rem;
    overflow: hidden;
    border-radius: 999px;
    background: color-mix(in srgb, var(--svr-accent) 12%, var(--svr-surface-sunken));
}

.svr-progress__fill {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--svr-accent), color-mix(in srgb, var(--svr-accent) 55%, var(--svr-gold)));
    transition: width calc(var(--svr-speed) * 2) var(--svr-ease);
}

.svr-progress--steps .svr-progress__track { background: transparent; }

.svr-progress__step {
    flex: 1 1 0;
    border-radius: 999px;
    background: var(--svr-surface-sunken);
    transition: background-color var(--svr-speed) var(--svr-ease);
}

.svr-progress__step.is-done { background: var(--svr-accent); }

/* Segmented control and toggles */
.svr-segmented {
    display: inline-flex;
    gap: 2px;
    padding: 3px;
    border: 1px solid var(--svr-border);
    border-radius: 999px;
    background: var(--svr-surface-subtle);
}

.svr .svr-segmented__button {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    min-height: 2.25rem;
    padding: 0 .85rem;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--svr-text-muted);
    font-size: .82em;
    font-weight: 700;
    white-space: nowrap;
    transition: background-color var(--svr-speed) var(--svr-ease), color var(--svr-speed) var(--svr-ease), box-shadow var(--svr-speed) var(--svr-ease);
}

.svr .svr-segmented__button:hover:not(:disabled) { color: var(--svr-text); }

.svr .svr-segmented__button.is-active {
    background: var(--svr-surface);
    color: var(--svr-action-text);
    box-shadow: 0 1px 2px rgba(16, 24, 40, .08), 0 0 0 1px var(--svr-border);
}

.svr .svr-segmented__button:disabled { opacity: .45; }
.svr-segmented--compact .svr-segmented__button { min-height: 2rem; padding: 0 .7rem; font-variant-numeric: tabular-nums; }

.svr .svr-toggle {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    min-height: 2.35rem;
    padding: 0 .9rem;
    border: 1px solid var(--svr-border);
    border-radius: 999px;
    background: var(--svr-surface);
    color: var(--svr-text-muted);
    font-size: .82em;
    font-weight: 700;
    transition: border-color var(--svr-speed) var(--svr-ease), background-color var(--svr-speed) var(--svr-ease), color var(--svr-speed) var(--svr-ease);
}

.svr .svr-toggle:hover:not(:disabled) { border-color: var(--svr-accent-line); color: var(--svr-text); }
.svr .svr-toggle.is-on { border-color: var(--svr-accent-line); background: var(--svr-accent-soft); color: var(--svr-action-text); }
.svr .svr-toggle:disabled { opacity: .5; }
.svr .svr-toggle--quiet { background: transparent; }

/* Accessibility panel */
.svr-a11y {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem 1rem;
    padding: .8rem 1rem;
    border: 1px solid var(--svr-border);
    border-radius: var(--svr-radius);
    background: var(--svr-surface);
}

.svr-a11y__head {
    display: flex;
    align-items: center;
    gap: .7rem;
    min-width: 0;
}

.svr-a11y__head strong { display: block; font-size: .88em; }
.svr-a11y__head small { display: block; color: var(--svr-text-muted); font-size: .76em; }

.svr-a11y__icon {
    display: grid;
    place-items: center;
    width: 2.2rem;
    height: 2.2rem;
    flex: none;
    border-radius: 50%;
    background: var(--svr-accent);
    color: var(--svr-on-accent);
}

.svr-a11y__controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .45rem;
}

/* Notices */
.svr-notice {
    display: flex;
    gap: .8rem;
    align-items: flex-start;
    padding: .85rem 1rem;
    border: 1px solid var(--svr-accent-line);
    border-radius: var(--svr-radius);
    background: var(--svr-accent-softer);
    color: var(--svr-text);
}

.svr-notice__icon {
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    flex: none;
    border-radius: 50%;
    background: var(--svr-accent-soft);
    color: var(--svr-action-text);
}

.svr-notice__body { display: grid; gap: .2rem; min-width: 0; }
.svr-notice__title { font-size: .8em; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--svr-action-text); }
.svr-notice__text { font-size: .88em; line-height: 1.55; }
.svr-notice__actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .45rem; }

.svr-notice--warning { border-color: color-mix(in srgb, var(--svr-warning) 32%, var(--svr-border)); background: var(--svr-warning-soft); }
.svr-notice--warning .svr-notice__icon { background: color-mix(in srgb, var(--svr-warning) 16%, var(--svr-surface)); color: var(--svr-warning); }
.svr-notice--info { border-color: color-mix(in srgb, var(--svr-info) 26%, var(--svr-border)); background: var(--svr-info-soft); }
.svr-notice--info .svr-notice__icon { background: color-mix(in srgb, var(--svr-info) 14%, var(--svr-surface)); color: var(--svr-info); }

/* Validation summary */
.svr-summary {
    display: flex;
    gap: .8rem;
    padding: .95rem 1.05rem;
    border: 1px solid color-mix(in srgb, var(--svr-danger) 34%, var(--svr-border));
    border-left-width: 4px;
    border-radius: var(--svr-radius);
    background: var(--svr-danger-soft);
    color: var(--svr-text);
    scroll-margin-top: 5rem;
}

.svr-summary:focus-visible { outline: 3px solid var(--svr-focus); outline-offset: 2px; }
.svr-summary__icon { color: var(--svr-danger); font-size: 1.2em; line-height: 1; padding-top: .1rem; }
.svr-summary__body { display: grid; gap: .45rem; min-width: 0; }
.svr-summary__title { font-size: .92em; }
.svr-summary__list { display: grid; gap: .25rem; }

.svr .svr-summary__link {
    display: inline-flex;
    align-items: baseline;
    gap: .55rem;
    padding: .2rem 0;
    border: 0;
    background: none;
    color: var(--svr-danger);
    font-size: .86em;
    font-weight: 600;
    text-align: left;
    text-decoration: underline;
    text-decoration-color: color-mix(in srgb, var(--svr-danger) 35%, transparent);
    text-underline-offset: 3px;
}

.svr .svr-summary__link:hover { text-decoration-color: currentColor; }
.svr .svr-summary__link:focus-visible { outline: 2px solid var(--svr-focus); outline-offset: 2px; border-radius: 4px; }
.svr-summary__number { font-variant-numeric: tabular-nums; font-weight: 800; }
.svr-summary__text { font-size: .86em; color: var(--svr-danger); font-weight: 600; }

/* Section marker */
.svr-section {
    display: flex;
    align-items: center;
    gap: .7rem;
    margin-top: .35rem;
    padding: .15rem .1rem;
}

.svr-section::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background: linear-gradient(90deg, var(--svr-border-strong), transparent);
}

.svr-section__chip {
    padding: .22rem .6rem;
    border-radius: 999px;
    background: var(--svr-gold-soft);
    color: color-mix(in srgb, var(--svr-gold) 55%, var(--svr-text));
    font-size: .72em;
    font-weight: 800;
    letter-spacing: .04em;
    white-space: nowrap;
}

.svr-section__title {
    font-family: var(--svr-font-heading);
    font-size: 1.02em;
    font-weight: 700;
}

/* Focus-mode pager */
.svr-pager {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: .8rem;
    padding: .7rem;
    border: 1px solid var(--svr-border);
    border-radius: var(--svr-radius);
    background: var(--svr-surface);
    box-shadow: var(--svr-card-shadow);
}

.svr-pager__position {
    display: grid;
    gap: .35rem;
    justify-items: center;
    color: var(--svr-text-muted);
    font-size: .82em;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.svr-pager__track {
    display: block;
    width: min(14rem, 100%);
    height: .3rem;
    border-radius: 999px;
    background: var(--svr-surface-sunken);
    overflow: hidden;
}

.svr-pager__track span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--svr-accent);
    transition: width var(--svr-speed) var(--svr-ease);
}

/* Submit bar */
.svr-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem 1rem;
    padding: .8rem .9rem .8rem 1.05rem;
    border: 1px solid var(--svr-border);
    border-radius: calc(var(--svr-radius) + 2px);
    background: color-mix(in srgb, var(--svr-surface) 96%, transparent);
    box-shadow: var(--svr-card-shadow);
}

.svr-actions__meta {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    color: var(--svr-text-muted);
    font-size: .8em;
    font-weight: 600;
    min-width: 0;
}

.svr-actions__buttons {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-left: auto;
}

/* Buttons */
.svr .svr-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    min-height: 2.6rem;
    padding: 0 1.1rem;
    border: 1px solid transparent;
    border-radius: calc(var(--svr-radius-sm) + 1px);
    background: transparent;
    font-size: .88em;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color var(--svr-speed) var(--svr-ease), border-color var(--svr-speed) var(--svr-ease),
        color var(--svr-speed) var(--svr-ease), box-shadow var(--svr-speed) var(--svr-ease), transform var(--svr-speed) var(--svr-ease);
}

.svr .svr-btn:disabled { opacity: .5; cursor: default; }
.svr .svr-btn:focus-visible,
.svr .svr-toggle:focus-visible,
.svr .svr-segmented__button:focus-visible,
.svr .svr-link-button:focus-visible,
.svr .svr-icon-button:focus-visible,
.svr .svr-suggested:focus-visible {
    outline: none;
    box-shadow: var(--svr-ring);
}

.svr .svr-btn--primary {
    background: var(--svr-action);
    color: var(--svr-on-action);
    box-shadow: 0 8px 20px color-mix(in srgb, var(--svr-action) 24%, transparent);
}

.svr .svr-btn--primary:hover:not(:disabled) {
    background: color-mix(in srgb, var(--svr-action) 88%, #000);
    transform: translateY(-1px);
}

.svr .svr-btn--primary:focus-visible { box-shadow: var(--svr-ring), 0 8px 20px color-mix(in srgb, var(--svr-action) 24%, transparent); }

.svr .svr-btn--secondary {
    border-color: var(--svr-accent-line);
    background: var(--svr-surface);
    color: var(--svr-action-text);
}

.svr .svr-btn--secondary:hover:not(:disabled) { background: var(--svr-accent-soft); }

.svr .svr-btn--primary-soft {
    background: var(--svr-accent-soft);
    color: var(--svr-action-text);
    border-color: var(--svr-accent-line);
}

.svr .svr-btn--primary-soft:hover:not(:disabled) { background: color-mix(in srgb, var(--svr-accent) 14%, var(--svr-surface)); }

.svr .svr-btn--ghost {
    background: transparent;
    color: var(--svr-text-muted);
}

.svr .svr-btn--ghost:hover:not(:disabled) { background: var(--svr-surface-subtle); color: var(--svr-text); }

.svr .svr-btn--danger {
    background: var(--svr-danger);
    color: #ffffff;
}

.svr .svr-btn--small { min-height: 2.15rem; padding: 0 .8rem; font-size: .8em; }

.svr .svr-link-button {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .25rem .45rem;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--svr-text-muted);
    font-size: .8em;
    font-weight: 700;
    transition: color var(--svr-speed) var(--svr-ease), background-color var(--svr-speed) var(--svr-ease);
}

.svr .svr-link-button:hover:not(:disabled) { color: var(--svr-action-text); background: var(--svr-accent-softer); }

.svr .svr-icon-button {
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    flex: none;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--svr-text-muted);
}

.svr .svr-icon-button:hover:not(:disabled) { background: var(--svr-surface-sunken); color: var(--svr-text); }

/* Chips */
.svr-chip {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .2rem .55rem;
    border-radius: 999px;
    background: var(--svr-surface-sunken);
    color: var(--svr-text-muted);
    font-size: .72em;
    font-weight: 700;
    white-space: nowrap;
}

.svr-chip--required { background: var(--svr-gold-soft); color: color-mix(in srgb, var(--svr-gold) 50%, var(--svr-text)); }
.svr-chip--accent { background: var(--svr-accent-soft); color: var(--svr-action-text); }
.svr-chip--quiet { background: transparent; border: 1px solid var(--svr-border); }

/* Hints */
.svr-hint { color: var(--svr-text-muted); font-size: .8em; line-height: 1.5; }
.svr-hint--warning { color: var(--svr-warning); font-weight: 600; }

.svr-busy {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    color: var(--svr-action-text);
    font-size: .84em;
    font-weight: 600;
}

/* ------------------------------------------------------------------------------------------- 7 question card */
.svr-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: .85rem;
    padding: var(--svr-pad) calc(var(--svr-pad) + .15rem);
    border: 1px solid var(--svr-border);
    border-radius: var(--svr-radius);
    background: var(--svr-card-bg);
    box-shadow: var(--svr-card-shadow);
    scroll-margin-top: 5.5rem;
    scroll-margin-bottom: 2rem;
    transition: border-color var(--svr-speed) var(--svr-ease), box-shadow var(--svr-speed) var(--svr-ease);
}

/* Long compact forms (more than 40 visible questions): the browser skips layout and paint of cards far off screen
   (web-runner-05); a card's last rendered size is remembered, so scrolling back does not jump. */
.svr-runner--long .svr-card {
    content-visibility: auto;
    contain-intrinsic-size: auto 16rem;
}

.svr-card:focus { outline: none; }
.svr-card:focus-visible { box-shadow: var(--svr-card-shadow), 0 0 0 3px color-mix(in srgb, var(--svr-focus) 40%, transparent); }

.svr-card::before {
    content: "";
    position: absolute;
    inset: 12px auto 12px 0;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: transparent;
    transition: background-color var(--svr-speed) var(--svr-ease);
}

.svr-card.is-answered::before { background: color-mix(in srgb, var(--svr-accent) 55%, transparent); }

.svr-card.is-invalid {
    border-color: color-mix(in srgb, var(--svr-danger) 45%, var(--svr-border));
    box-shadow: var(--svr-card-shadow), 0 0 0 1px color-mix(in srgb, var(--svr-danger) 22%, transparent);
}

.svr-card.is-invalid::before { background: var(--svr-danger); }

.svr-card--focused {
    padding: calc(var(--svr-pad) + .45rem) calc(var(--svr-pad) + .6rem);
    content-visibility: visible;
}

.svr-card__head {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: start;
    gap: .75rem;
}

.svr-card__number {
    display: grid;
    place-items: center;
    min-width: 2.2rem;
    height: 2.2rem;
    padding: 0 .35rem;
    border-radius: calc(var(--svr-radius-xs) + 2px);
    background: var(--svr-accent-soft);
    color: var(--svr-action-text);
    font-size: .78em;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    letter-spacing: .02em;
}

.svr-card.is-answered .svr-card__number {
    background: var(--svr-accent);
    color: var(--svr-on-accent);
}

.svr-card__heading {
    display: grid;
    gap: .2rem;
    min-width: 0;
}

.svr-card__kind {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    color: var(--svr-text-soft);
    font-size: .7em;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.svr-card__caption {
    color: var(--svr-text);
    font-size: 1.04em;
    font-weight: 650;
    line-height: 1.45;
}

.svr-card--focused .svr-card__caption { font-size: 1.16em; }

.svr-card__chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: .3rem;
    max-width: 16rem;
}

.svr-card__description {
    margin-left: 2.95rem;
    color: var(--svr-text-muted);
    font-size: .88em;
}

.svr-card__error {
    display: flex;
    align-items: flex-start;
    gap: .45rem;
    margin-left: 2.95rem;
    padding: .5rem .7rem;
    border-radius: var(--svr-radius-xs);
    background: var(--svr-danger-soft);
    color: var(--svr-danger);
    font-size: .85em;
    font-weight: 650;
}

.svr-card__body { min-width: 0; }

.svr-card__foot {
    display: flex;
    justify-content: flex-end;
    margin-top: -.25rem;
}

/* ------------------------------------------------------------------------------------------------- 8 inputs */

/* Option rows (radio / checkbox): the whole row is the target and carries the focus ring. */
.svr-options {
    display: grid;
    gap: .45rem;
}

.svr-option-slot { display: grid; gap: .45rem; }

.svr .svr-option {
    position: relative;
    display: flex;
    align-items: center;
    gap: .75rem;
    min-height: 2.9rem;
    padding: .6rem .9rem;
    border: 1px solid var(--svr-border);
    border-radius: var(--svr-radius-sm);
    background: var(--svr-surface);
    cursor: pointer;
    transition: border-color var(--svr-speed) var(--svr-ease), background-color var(--svr-speed) var(--svr-ease), box-shadow var(--svr-speed) var(--svr-ease);
}

.svr .svr-option:hover:not(.is-disabled) { border-color: var(--svr-accent-line); background: var(--svr-accent-softer); }

.svr .svr-option.is-selected {
    border-color: var(--svr-accent);
    background: var(--svr-accent-soft);
    box-shadow: inset 0 0 0 1px var(--svr-accent);
}

.svr .svr-option.is-disabled { cursor: default; opacity: .55; }
.svr .svr-option:has(:focus-visible) { box-shadow: var(--svr-ring); border-color: var(--svr-accent); }
.svr .svr-option.is-selected:has(:focus-visible) { box-shadow: inset 0 0 0 1px var(--svr-accent), var(--svr-ring); }

.svr .svr-option__control {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    margin: 0;
    pointer-events: none;
}

.svr-option__mark {
    display: grid;
    place-items: center;
    width: 1.2rem;
    height: 1.2rem;
    flex: none;
    border: 2px solid var(--svr-border-strong);
    border-radius: 50%;
    background: var(--svr-surface);
    color: var(--svr-on-accent);
    transition: border-color var(--svr-speed) var(--svr-ease), background-color var(--svr-speed) var(--svr-ease), box-shadow var(--svr-speed) var(--svr-ease);
}

.svr-option.is-selected .svr-option__mark {
    border-color: var(--svr-accent);
    background: var(--svr-surface);
    box-shadow: inset 0 0 0 3px var(--svr-surface), inset 0 0 0 10px var(--svr-accent);
}

.svr-option--check .svr-option__mark { border-radius: 5px; }
.svr-option--check .svr-option__mark .svr-icon { width: .8rem; height: .8rem; opacity: 0; }

.svr-option--check.is-selected .svr-option__mark {
    background: var(--svr-accent);
    box-shadow: none;
}

.svr-option--check.is-selected .svr-option__mark .svr-icon { opacity: 1; }

.svr-option__text {
    min-width: 0;
    font-size: .93em;
    line-height: 1.45;
}

.svr-option.is-selected .svr-option__text { font-weight: 600; }

/* Scale tiles (Likert, NPS, yes/no, 5-11 option single choice) */
.svr-scale {
    display: grid;
    grid-template-columns: repeat(var(--svr-scale-count, 5), minmax(0, 1fr));
    gap: .45rem;
}

.svr-scale--nps { gap: .35rem; }
.svr-scale--yes-no { grid-template-columns: repeat(var(--svr-scale-count, 2), minmax(0, 12rem)); }

.svr .svr-scale__tile {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 3.1rem;
    padding: .55rem .45rem;
    border: 1px solid var(--svr-border);
    border-radius: var(--svr-radius-sm);
    background: var(--svr-surface);
    color: var(--svr-text);
    font-size: .84em;
    font-weight: 650;
    line-height: 1.3;
    text-align: center;
    cursor: pointer;
    transition: border-color var(--svr-speed) var(--svr-ease), background-color var(--svr-speed) var(--svr-ease),
        color var(--svr-speed) var(--svr-ease), transform var(--svr-speed) var(--svr-ease), box-shadow var(--svr-speed) var(--svr-ease);
}

.svr-scale--nps .svr-scale__tile { min-height: 2.9rem; font-size: .92em; font-weight: 750; font-variant-numeric: tabular-nums; }
.svr .svr-scale__tile:hover:not(.is-disabled) { border-color: var(--svr-accent-line); background: var(--svr-accent-softer); transform: translateY(-1px); }

.svr .svr-scale__tile.is-selected {
    border-color: var(--svr-accent);
    background: var(--svr-accent);
    color: var(--svr-on-accent);
    box-shadow: 0 8px 18px color-mix(in srgb, var(--svr-accent) 26%, transparent);
}

.svr .svr-scale__tile.is-disabled { cursor: default; opacity: .55; }
.svr .svr-scale__tile:has(:focus-visible) { box-shadow: var(--svr-ring); border-color: var(--svr-accent); }
.svr-scale__caption { overflow-wrap: anywhere; }

/* Stars */
.svr-stars {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
}

.svr .svr-star {
    position: relative;
    display: grid;
    justify-items: center;
    gap: .15rem;
    min-width: 3.4rem;
    padding: .45rem .35rem .4rem;
    border: 1px solid transparent;
    border-radius: var(--svr-radius-sm);
    color: var(--svr-border-strong);
    cursor: pointer;
    transition: color var(--svr-speed) var(--svr-ease), background-color var(--svr-speed) var(--svr-ease), transform var(--svr-speed) var(--svr-ease);
}

.svr .svr-star:hover:not(.is-disabled) { background: var(--svr-accent-softer); transform: translateY(-1px); }
.svr .svr-star.is-filled { color: var(--svr-gold); }
.svr .svr-star.is-selected { background: var(--svr-gold-soft); border-color: color-mix(in srgb, var(--svr-gold) 40%, transparent); }
.svr .svr-star:has(:focus-visible) { box-shadow: var(--svr-ring); }
.svr .svr-star.is-disabled { cursor: default; opacity: .6; }
.svr-star__glyph { width: 1.9rem; height: 1.9rem; }
.svr-star__caption { color: var(--svr-text-muted); font-size: .74em; font-weight: 700; }

/* Select shells */
.svr .svr-select {
    position: relative;
    display: flex;
    align-items: center;
    max-width: 36rem;
    border: 1px solid var(--svr-border-strong);
    border-radius: var(--svr-radius-sm);
    background: var(--svr-surface);
    transition: border-color var(--svr-speed) var(--svr-ease), box-shadow var(--svr-speed) var(--svr-ease);
}

.svr .svr-select:hover:not(.is-disabled) { border-color: var(--svr-accent-line); }
.svr .svr-select:focus-within { border-color: var(--svr-accent); box-shadow: var(--svr-ring); }
.svr .svr-select.is-invalid { border-color: var(--svr-danger); }
.svr .svr-select.is-disabled { opacity: .6; }

.svr .svr-select__control {
    appearance: none;
    width: 100%;
    min-height: 2.9rem;
    padding: 0 2.6rem 0 .95rem;
    border: 0;
    border-radius: inherit;
    background: transparent;
    font-size: .92em;
    outline: none;
    box-shadow: none;
    cursor: pointer;
}

.svr .svr-select__chevron {
    position: absolute;
    right: .85rem;
    color: var(--svr-text-muted);
    pointer-events: none;
}

.svr .svr-select--compact { max-width: 11rem; flex: none; }
.svr .svr-select--compact .svr-select__control { min-height: 2.4rem; }

/* Ranking */
.svr-ranking {
    display: grid;
    gap: .45rem;
}

.svr-ranking__row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: .75rem;
    padding: .45rem .5rem .45rem .6rem;
    border: 1px solid var(--svr-border);
    border-radius: var(--svr-radius-sm);
    background: var(--svr-surface);
}

.svr-ranking__row.is-ranked { border-color: var(--svr-accent-line); background: var(--svr-accent-softer); }

.svr-ranking__badge {
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: var(--svr-surface-sunken);
    color: var(--svr-text-muted);
    font-size: .85em;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.svr-ranking__row.is-ranked .svr-ranking__badge { background: var(--svr-accent); color: var(--svr-on-accent); }
.svr-ranking__caption { font-size: .92em; cursor: pointer; }

/* Field shells (text areas and single-line inputs) — the shell draws the field and the ring. */
.svr .svr-field {
    position: relative;
    display: flex;
    align-items: center;
    border: 1px solid var(--svr-border-strong);
    border-radius: var(--svr-radius-sm);
    background: var(--svr-surface);
    transition: border-color var(--svr-speed) var(--svr-ease), box-shadow var(--svr-speed) var(--svr-ease);
}

.svr .svr-field:hover:not(.is-disabled) { border-color: var(--svr-accent-line); }
.svr .svr-field:focus-within { border-color: var(--svr-accent); box-shadow: var(--svr-ring); }
.svr .svr-field.is-invalid { border-color: var(--svr-danger); }
.svr .svr-field.is-invalid:focus-within { box-shadow: 0 0 0 3px color-mix(in srgb, var(--svr-danger) 22%, transparent); }
.svr .svr-field.is-disabled { background: var(--svr-surface-subtle); }

.svr .svr-field__control {
    width: 100%;
    min-width: 0;
    min-height: 2.8rem;
    padding: .65rem .9rem;
    border: 0;
    border-radius: inherit;
    background: transparent;
    font-size: .93em;
    line-height: 1.5;
    outline: none;
    box-shadow: none;
}

.svr textarea.svr-field__control { resize: vertical; min-height: 5.5rem; }
.svr .svr-field__control::placeholder { color: var(--svr-text-soft); opacity: 1; }
.svr .svr-field__icon { margin-left: .8rem; color: var(--svr-text-soft); }
.svr .svr-field__icon + .svr-field__control { padding-left: .55rem; }
.svr .svr-field--inline { max-width: 24rem; flex: 1 1 14rem; }
.svr .svr-field--grow { max-width: none; }

.svr-text-list,
.svr-value-list {
    display: grid;
    gap: .85rem;
}

.svr-text-row,
.svr-value-row {
    display: grid;
    gap: .45rem;
}

.svr-text-row__prompt {
    color: var(--svr-text-muted);
    font-size: .86em;
    font-weight: 650;
}

.svr-value-row__line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
}

.svr-value-row__actions:empty { display: none; }

/* Other text */
.svr-other {
    display: grid;
    gap: .35rem;
    margin-left: 2.1rem;
}

.svr-other__label {
    color: var(--svr-text-muted);
    font-size: .8em;
    font-weight: 700;
}

.svr-other textarea.svr-field__control { min-height: 3.6rem; }

/* Character counter under a typed field (text limits, contract-submit §5): quiet until the text is over the limit. */
.svr-counter {
    justify-self: end;
    margin-top: -.15rem;
    color: var(--svr-text-muted);
    font-size: .74em;
    font-variant-numeric: tabular-nums;
    line-height: 1.3;
}

.svr-counter.is-over { color: var(--svr-danger); font-weight: 700; }

/* Suggested value (web-runner-22) */
.svr .svr-suggested {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    max-width: 100%;
    padding: .38rem .8rem;
    border: 1px dashed var(--svr-accent-line);
    border-radius: 999px;
    background: var(--svr-accent-softer);
    color: var(--svr-action-text);
    font-size: .8em;
    font-weight: 700;
    text-align: left;
    transition: background-color var(--svr-speed) var(--svr-ease), border-color var(--svr-speed) var(--svr-ease);
}

.svr .svr-suggested:hover:not(:disabled) { border-style: solid; background: var(--svr-accent-soft); }

.svr-suggested__value {
    padding: .05rem .5rem;
    border-radius: 999px;
    background: var(--svr-surface);
    font-variant-numeric: tabular-nums;
}

/* Slider */
.svr .svr-slider {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    align-items: center;
    gap: .75rem;
    padding: .7rem .9rem;
    border: 1px solid var(--svr-border);
    border-radius: var(--svr-radius-sm);
    background: var(--svr-surface);
}

.svr .svr-slider:focus-within { border-color: var(--svr-accent); box-shadow: var(--svr-ring); }
.svr .svr-slider.is-invalid { border-color: var(--svr-danger); }

.svr .svr-slider__control {
    width: 100%;
    margin: 0;
    accent-color: var(--svr-accent);
    outline: none;
    cursor: pointer;
}

.svr .svr-slider:not(.is-answered) .svr-slider__control { opacity: .45; filter: grayscale(.7); }

.svr-slider__bound {
    color: var(--svr-text-soft);
    font-size: .76em;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.svr-slider__value {
    display: grid;
    place-items: center;
    min-width: 3rem;
    height: 2.1rem;
    padding: 0 .6rem;
    border-radius: 999px;
    background: var(--svr-surface-sunken);
    color: var(--svr-text-muted);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.svr-slider.is-answered .svr-slider__value { background: var(--svr-accent); color: var(--svr-on-accent); }

/* Special inputs (upload, voice, signature, barcode, location) */
.svr-special {
    display: grid;
    gap: .6rem;
}

.svr-special__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
}

.svr .svr-file-picker { position: relative; display: inline-flex; }

.svr .svr-file-picker__input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    pointer-events: none;
}

.svr .svr-file-picker label.svr-btn { cursor: pointer; }
.svr .svr-file-picker.is-disabled label.svr-btn { opacity: .5; cursor: default; }
.svr .svr-file-picker__input:focus-visible + label.svr-btn { box-shadow: var(--svr-ring); border-color: var(--svr-accent); }

.svr-result {
    display: flex;
    align-items: center;
    gap: .7rem;
    max-width: 36rem;
    padding: .55rem .55rem .55rem .7rem;
    border: 1px solid var(--svr-border);
    border-radius: var(--svr-radius-sm);
    background: var(--svr-surface-subtle);
}

.svr-result--done { border-color: color-mix(in srgb, var(--svr-success) 30%, var(--svr-border)); background: var(--svr-success-soft); }

.svr-result__icon {
    display: grid;
    place-items: center;
    width: 2.2rem;
    height: 2.2rem;
    flex: none;
    border-radius: calc(var(--svr-radius-xs) + 2px);
    background: var(--svr-surface);
    color: var(--svr-success);
}

.svr-result__body { display: grid; min-width: 0; flex: 1 1 auto; }
.svr-result__title { font-size: .88em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.svr-result__detail { color: var(--svr-text-muted); font-size: .76em; }

/* Typed signature and plain checkboxes */
.svr-typed {
    display: grid;
    gap: .55rem;
    padding: .85rem;
    border: 1px solid var(--svr-accent-line);
    border-radius: var(--svr-radius-sm);
    background: var(--svr-accent-softer);
}

.svr-typed__label { font-size: .82em; font-weight: 700; color: var(--svr-text-muted); }
.svr .svr-typed__name { font-family: "Segoe Script", "Brush Script MT", "Noto Serif Georgian", cursive; font-size: 1.05em; }

.svr .svr-check {
    position: relative;
    display: inline-flex;
    align-items: flex-start;
    gap: .6rem;
    font-size: .86em;
    cursor: pointer;
}

.svr .svr-check__control { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }

.svr .svr-check__mark {
    display: grid;
    place-items: center;
    width: 1.2rem;
    height: 1.2rem;
    flex: none;
    margin-top: .1rem;
    border: 2px solid var(--svr-border-strong);
    border-radius: 5px;
    background: var(--svr-surface);
    color: var(--svr-on-accent);
}

.svr .svr-check__mark .svr-icon { width: .8rem; height: .8rem; opacity: 0; }
.svr .svr-check:has(:checked) .svr-check__mark { border-color: var(--svr-accent); background: var(--svr-accent); }
.svr .svr-check:has(:checked) .svr-check__mark .svr-icon { opacity: 1; }
.svr .svr-check:has(:focus-visible) .svr-check__mark { box-shadow: var(--svr-ring); }

/* Matrix */
.svr-matrix {
    display: grid;
    gap: .5rem;
}

/* Header and rows share one column template: statement | the options (an inner grid with equal columns). */
.svr-matrix__header,
.svr-matrix__row {
    display: grid;
    grid-template-columns: minmax(10rem, 1.1fr) minmax(0, 1.9fr);
    align-items: center;
    gap: .75rem;
    border: 1px solid transparent;
}

.svr-matrix__header {
    padding: 0 .75rem;
    color: var(--svr-text-soft);
    font-size: .72em;
    font-weight: 800;
    letter-spacing: .03em;
    line-height: 1.25;
    text-align: center;
}

.svr-matrix__head-cells {
    display: grid;
    grid-template-columns: repeat(var(--svr-matrix-cols, 5), minmax(0, 1fr));
    gap: .35rem;
    align-items: end;
}

.svr-matrix__row {
    min-width: 0;
    margin: 0;
    padding: .65rem .75rem;
    border: 1px solid var(--svr-border);
    border-radius: var(--svr-radius-sm);
    background: var(--svr-surface);
    transition: border-color var(--svr-speed) var(--svr-ease), background-color var(--svr-speed) var(--svr-ease);
}

.svr-matrix__row.is-answered { border-color: var(--svr-accent-line); background: var(--svr-accent-softer); }

.svr-matrix__statement {
    font-size: .9em;
    font-weight: 600;
    line-height: 1.4;
}

.svr-matrix__choices {
    display: grid;
    grid-template-columns: repeat(var(--svr-matrix-cols, 5), minmax(0, 1fr));
    gap: .35rem;
}

.svr .svr-matrix__choice {
    position: relative;
    display: grid;
    justify-items: center;
    gap: .25rem;
    min-height: 2.6rem;
    padding: .4rem .25rem;
    border: 1px solid transparent;
    border-radius: var(--svr-radius-xs);
    cursor: pointer;
    text-align: center;
    transition: background-color var(--svr-speed) var(--svr-ease), border-color var(--svr-speed) var(--svr-ease);
}

.svr .svr-matrix__choice:hover:not(.is-disabled) { background: var(--svr-accent-soft); }
.svr .svr-matrix__choice.is-selected { border-color: var(--svr-accent-line); background: var(--svr-accent-soft); }
.svr .svr-matrix__choice:has(:focus-visible) { box-shadow: var(--svr-ring); }
.svr .svr-matrix__choice.is-disabled { cursor: default; opacity: .55; }

.svr-matrix__dot {
    width: 1.15rem;
    height: 1.15rem;
    border: 2px solid var(--svr-border-strong);
    border-radius: 50%;
    background: var(--svr-surface);
    transition: box-shadow var(--svr-speed) var(--svr-ease), border-color var(--svr-speed) var(--svr-ease);
}

.svr-matrix__choice.is-selected .svr-matrix__dot {
    border-color: var(--svr-accent);
    box-shadow: inset 0 0 0 3px var(--svr-surface), inset 0 0 0 10px var(--svr-accent);
}

.svr-matrix__choice-text {
    color: var(--svr-text-muted);
    font-size: .74em;
    font-weight: 650;
    line-height: 1.25;
}

/* With a column header on wide screens the per-option captions are redundant visually (kept for assistive tech). */
.svr-matrix:has(.svr-matrix__header) .svr-matrix__choice-text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.svr-matrix__comment {
    grid-column: 1 / -1;
    display: grid;
    gap: .35rem;
}

.svr .svr-matrix__clear {
    grid-column: 1 / -1;
    justify-self: end;
    margin-top: -.2rem;
}

/* AI follow-up */
.svr-adaptive {
    display: grid;
    gap: .55rem;
    padding: .85rem .95rem;
    border: 1px solid color-mix(in srgb, var(--svr-gold) 30%, var(--svr-border));
    border-radius: var(--svr-radius-sm);
    background:
        radial-gradient(90% 120% at 0% 0%, color-mix(in srgb, var(--svr-gold) 10%, transparent), transparent 60%),
        var(--svr-surface);
}

.svr-adaptive__head {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .82em;
}

.svr-adaptive__spark {
    display: grid;
    place-items: center;
    width: 1.8rem;
    height: 1.8rem;
    border-radius: 50%;
    background: var(--svr-gold-soft);
    color: color-mix(in srgb, var(--svr-gold) 60%, var(--svr-text));
}

.svr-adaptive__counter { margin-left: auto; color: var(--svr-text-muted); font-variant-numeric: tabular-nums; }
.svr-adaptive__question { font-weight: 650; font-size: .92em; }
.svr-adaptive__actions { display: flex; flex-wrap: wrap; gap: .45rem; }
.svr-adaptive__hint { color: var(--svr-text-muted); font-size: .78em; }
.svr-adaptive__hint--disclosure { display: flex; gap: .35rem; }
.svr-adaptive__error { color: var(--svr-danger); font-size: .82em; font-weight: 650; }

/* ------------------------------------------------------------------------------------- 9 review and ending */
.svr-review {
    display: grid;
    gap: 1rem;
    padding: calc(var(--svr-pad) + .2rem);
    border: 1px solid var(--svr-border);
    border-radius: calc(var(--svr-radius) + 2px);
    background: var(--svr-card-bg);
    box-shadow: var(--svr-card-shadow);
    scroll-margin-top: 5rem;
}

.svr-review:focus { outline: none; }

.svr-review__head {
    display: flex;
    gap: .85rem;
}

.svr-review__icon {
    display: grid;
    place-items: center;
    width: 2.6rem;
    height: 2.6rem;
    flex: none;
    border-radius: 50%;
    background: var(--svr-accent-soft);
    color: var(--svr-action-text);
    font-size: 1.15em;
}

.svr-review__title { font-family: var(--svr-font-heading); font-size: 1.18em; font-weight: 700; }
.svr-review__intro { color: var(--svr-text-muted); font-size: .88em; }
.svr-review__warning { margin-top: .3rem; color: var(--svr-warning); font-size: .84em; font-weight: 700; }

.svr-review__list {
    display: grid;
    border: 1px solid var(--svr-border);
    border-radius: var(--svr-radius-sm);
    overflow: hidden;
}

.svr-review__entry {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: .8rem;
    padding: .7rem .8rem;
    background: var(--svr-surface);
}

.svr-review__entry + .svr-review__entry { border-top: 1px solid var(--svr-border); }
.svr-review__entry.is-empty { background: var(--svr-surface-subtle); }

.svr-review__number {
    color: var(--svr-text-soft);
    font-size: .78em;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.svr-review__body { display: grid; gap: .1rem; min-width: 0; }
.svr-review__caption { font-size: .86em; font-weight: 650; }
.svr-review__answer { color: var(--svr-action-text); font-size: .86em; overflow-wrap: anywhere; }
.svr-review__entry.is-empty .svr-review__answer { color: var(--svr-text-soft); font-style: italic; }

.svr-review__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: .6rem;
}

.svr-ending {
    display: grid;
    justify-items: center;
    gap: .7rem;
    padding: calc(var(--svr-pad) * 2.2) calc(var(--svr-pad) * 1.6);
    border: 1px solid var(--svr-border);
    border-radius: calc(var(--svr-radius) + 4px);
    background:
        radial-gradient(80% 90% at 50% 0%, color-mix(in srgb, var(--svr-accent) 7%, transparent), transparent 70%),
        var(--svr-card-bg);
    box-shadow: var(--svr-card-shadow);
    text-align: center;
}

.svr-ending:focus { outline: none; }

.svr-ending__icon {
    display: grid;
    place-items: center;
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    background: var(--svr-success-soft);
    color: var(--svr-success);
    font-size: 1.9em;
    box-shadow: 0 0 0 8px color-mix(in srgb, var(--svr-success) 6%, transparent);
}

.svr-ending--pending .svr-ending__icon { background: var(--svr-accent-soft); color: var(--svr-action-text); box-shadow: 0 0 0 8px var(--svr-accent-softer); }
.svr-ending--warning .svr-ending__icon { background: var(--svr-warning-soft); color: var(--svr-warning); box-shadow: 0 0 0 8px color-mix(in srgb, var(--svr-warning) 6%, transparent); }
.svr-ending--info .svr-ending__icon { background: var(--svr-info-soft); color: var(--svr-info); box-shadow: 0 0 0 8px color-mix(in srgb, var(--svr-info) 6%, transparent); }

.svr-ending__title { font-family: var(--svr-font-heading); font-size: 1.45em; font-weight: 700; }
.svr-ending__message { max-width: 52ch; color: var(--svr-text-muted); }
.svr-ending__note { color: var(--svr-text-soft); font-size: .84em; }
.svr-ending__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; margin-top: .4rem; }

/* --------------------------------------------------------------------------------------------------- 10 live */
.svr-live {
    display: grid;
    gap: .85rem;
    padding: var(--svr-pad);
    border: 1px solid var(--svr-accent-line);
    border-radius: calc(var(--svr-radius) + 2px);
    background:
        radial-gradient(100% 120% at 100% 0%, color-mix(in srgb, var(--svr-accent) 9%, transparent), transparent 60%),
        var(--svr-surface);
    box-shadow: var(--svr-card-shadow);
}

.svr-live__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .6rem .9rem;
}

.svr-live__pulse {
    width: .7rem;
    height: .7rem;
    border-radius: 50%;
    background: var(--svr-danger);
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--svr-danger) 45%, transparent);
    animation: svr-pulse 1.8s ease-out infinite;
}

@keyframes svr-pulse {
    to { box-shadow: 0 0 0 10px transparent; }
}

.svr-live__identity { display: grid; min-width: 0; flex: 1 1 12rem; }
.svr-live__identity small { color: var(--svr-text-muted); font-size: .72em; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.svr-live__badges { display: flex; flex-wrap: wrap; gap: .35rem; }
.svr-live__guidance { color: var(--svr-text-muted); font-size: .86em; }
.svr-live__workspace { display: grid; gap: .7rem; }
.svr-live__prompt { display: grid; gap: .1rem; }
.svr-live__prompt small { color: var(--svr-text-soft); font-size: .74em; font-weight: 700; }
.svr-live__prompt strong { font-size: 1.05em; }

.svr-live__choices {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    gap: .45rem;
}

.svr .svr-live__choice {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    min-height: 2.9rem;
    padding: .5rem .85rem;
    border: 1px solid var(--svr-border);
    border-radius: var(--svr-radius-sm);
    background: var(--svr-surface);
    font-weight: 650;
    text-align: left;
}

.svr .svr-live__choice:hover:not(:disabled) { border-color: var(--svr-accent-line); background: var(--svr-accent-softer); }
.svr .svr-live__choice.is-selected { border-color: var(--svr-accent); background: var(--svr-accent); color: var(--svr-on-accent); }
.svr .svr-live__choice:focus-visible { outline: none; box-shadow: var(--svr-ring); }
.svr .svr-live__choice:disabled { opacity: .55; }

.svr-live__composer { display: grid; gap: .45rem; justify-items: start; }
.svr-live__composer > label { font-size: .82em; font-weight: 700; color: var(--svr-text-muted); }
.svr-live__composer .svr-field { width: 100%; }
.svr-live__anonymous { display: inline-flex; align-items: center; gap: .35rem; color: var(--svr-text-muted); font-size: .78em; }

.svr-live__results,
.svr-live__questions {
    display: grid;
    gap: .55rem;
    padding: .8rem;
    border-radius: var(--svr-radius-sm);
    background: var(--svr-surface-subtle);
}

.svr-live__results header,
.svr-live__questions header {
    display: flex;
    justify-content: space-between;
    gap: .6rem;
    font-size: .84em;
}

.svr-live__bar { display: grid; gap: .25rem; }
.svr-live__bar-label { display: flex; justify-content: space-between; gap: .6rem; font-size: .82em; }
.svr-live__bar-label small { color: var(--svr-text-muted); font-variant-numeric: tabular-nums; }
.svr-live__bar-track { display: block; height: .5rem; border-radius: 999px; background: var(--svr-surface-sunken); overflow: hidden; }
.svr-live__bar-track span { display: block; height: 100%; border-radius: inherit; background: var(--svr-accent); }

.svr-live__cloud {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem .6rem;
    align-items: baseline;
}

.svr-live__cloud span {
    color: color-mix(in srgb, var(--svr-accent) calc(40% + var(--svr-word-weight, .5) * 60%), var(--svr-text-soft));
    font-size: calc(.8em + var(--svr-word-weight, .5) * .9em);
    font-weight: 700;
}

.svr-live__question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .6rem;
    padding: .55rem .6rem .55rem .75rem;
    border: 1px solid var(--svr-border);
    border-radius: var(--svr-radius-xs);
    background: var(--svr-surface);
    font-size: .86em;
}

.svr-live__question.is-pinned { border-color: color-mix(in srgb, var(--svr-gold) 45%, var(--svr-border)); background: var(--svr-gold-soft); }

.svr .svr-live__upvote {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .25rem .55rem;
    border: 1px solid var(--svr-border);
    border-radius: 999px;
    background: var(--svr-surface);
    color: var(--svr-text-muted);
    font-size: .8em;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.svr .svr-live__upvote.is-active { border-color: var(--svr-accent-line); background: var(--svr-accent-soft); color: var(--svr-action-text); }
.svr .svr-live__upvote:focus-visible { outline: none; box-shadow: var(--svr-ring); }

/* ------------------------------------------------------------------------------ 11 feedback and dialogs */
.svr-toast-dock {
    position: fixed;
    right: 1.25rem;
    bottom: 1.25rem;
    z-index: 2147482000;
    display: grid;
    gap: .5rem;
    width: min(26rem, calc(100vw - 2rem));
    pointer-events: none;
}

.svr-toasts {
    display: grid;
    gap: .5rem;
}

.svr-toasts:empty { display: none; }

.svr-toast {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    padding: .75rem .6rem .75rem .9rem;
    border: 1px solid var(--svr-border);
    border-radius: var(--svr-radius-sm);
    background: var(--svr-surface);
    color: var(--svr-text);
    box-shadow: 0 18px 40px rgba(16, 24, 40, .16);
    font-size: .86em;
    font-weight: 600;
    pointer-events: auto;
    animation: svr-toast-in calc(var(--svr-speed) * 1.5) var(--svr-ease);
}

.svr-toast > span { flex: 1 1 auto; padding-top: .1rem; }
.svr-toast > .svr-icon { margin-top: .15rem; }
.svr-toast--success > .svr-icon { color: var(--svr-success); }
.svr-toast--info > .svr-icon { color: var(--svr-info); }
.svr-toast--warning { border-color: color-mix(in srgb, var(--svr-warning) 35%, var(--svr-border)); }
.svr-toast--warning > .svr-icon { color: var(--svr-warning); }
.svr-toast--error { border-color: color-mix(in srgb, var(--svr-danger) 40%, var(--svr-border)); }
.svr-toast--error > .svr-icon { color: var(--svr-danger); }

@keyframes svr-toast-in {
    from { opacity: 0; transform: translateY(6px); }
}

.svr-dialog-backdrop {
    position: fixed;
    inset: 0;
    z-index: 2147482500;
    background: rgba(10, 16, 30, .5);
    backdrop-filter: blur(6px);
}

.svr-dialog {
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 2147482600;
    display: grid;
    gap: .8rem;
    width: min(30rem, calc(100vw - 2rem));
    padding: 1.35rem 1.4rem 1.2rem;
    border: 1px solid var(--svr-border);
    border-radius: calc(var(--svr-radius) + 4px);
    background: var(--svr-surface);
    color: var(--svr-text);
    box-shadow: 0 30px 80px rgba(8, 14, 30, .3);
    transform: translate(-50%, -50%);
}

.svr-dialog__title { font-family: var(--svr-font-heading); font-size: 1.12em; font-weight: 700; }
.svr-dialog__message { color: var(--svr-text-muted); font-size: .9em; }
.svr-dialog__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .5rem; margin-top: .3rem; }

/* Capture dialogs (js/survey-special-inputs.js), placed inside the runner so they carry its skin. */
.svr-capture {
    position: fixed;
    inset: 0;
    z-index: 2147483000;
    display: grid;
    place-items: center;
    padding: 1.1rem;
    background: rgba(8, 12, 24, .6);
    backdrop-filter: blur(12px);
}

.svr-capture__dialog {
    display: grid;
    width: min(32rem, 100%);
    max-height: min(46rem, calc(100vh - 2.2rem));
    overflow: auto;
    border: 1px solid var(--svr-border);
    border-radius: calc(var(--svr-radius) + 6px);
    background: var(--svr-surface);
    color: var(--svr-text);
    box-shadow: 0 28px 90px rgba(4, 10, 28, .34);
}

.svr-capture__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .8rem;
    padding: 1rem 1.1rem .8rem;
    border-bottom: 1px solid var(--svr-border);
}

.svr-capture__title { font-size: 1.02em; font-weight: 700; }

.svr .svr-capture__close {
    display: grid;
    place-items: center;
    width: 2.1rem;
    height: 2.1rem;
    border: 0;
    border-radius: 50%;
    background: var(--svr-surface-sunken);
    font-size: 1.1em;
}

.svr .svr-capture__close:focus-visible { outline: none; box-shadow: var(--svr-ring); }
.svr-capture__body { display: grid; gap: .7rem; padding: 1rem 1.1rem; }
.svr-capture__copy { color: var(--svr-text-muted); font-size: .86em; }
.svr-capture__copy.is-warning { color: var(--svr-warning); font-weight: 650; }
.svr-capture__video { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--svr-radius-sm); background: #090d18; }
.svr-capture__label { font-size: .8em; font-weight: 700; color: var(--svr-text-muted); }

.svr .svr-capture__field {
    width: 100%;
    min-height: 2.8rem;
    padding: 0 .85rem;
    border: 1px solid var(--svr-border-strong);
    border-radius: var(--svr-radius-sm);
    background: var(--svr-surface);
    outline: none;
}

.svr .svr-capture__field:focus { border-color: var(--svr-accent); box-shadow: var(--svr-ring); }

.svr-capture__status {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .8rem;
    min-height: 3rem;
    padding: .7rem .9rem;
    border-radius: var(--svr-radius-sm);
    background: var(--svr-accent-soft);
    color: var(--svr-action-text);
    font-weight: 700;
}

.svr-capture__status.is-recording { background: var(--svr-danger-soft); color: var(--svr-danger); }
.svr-capture__meter { font-variant-numeric: tabular-nums; }

.svr-capture__pad {
    display: block;
    width: 100%;
    height: 15rem;
    border: 1px solid var(--svr-border-strong);
    border-radius: var(--svr-radius-sm);
    background: #ffffff;
    cursor: crosshair;
    touch-action: none;
}

.svr-capture__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .5rem; padding: 0 1.1rem 1.1rem; }

/* ----------------------------------------------------------------------- 12 queue, late state, kiosk */
.svr-outbox {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .65rem .85rem;
    border: 1px solid var(--svr-accent-line);
    border-radius: var(--svr-radius-sm);
    background: var(--svr-accent-softer);
    font-size: .86em;
}

.svr-outbox--signinrequired,
.svr-outbox--paused { border-color: color-mix(in srgb, var(--svr-warning) 32%, var(--svr-border)); background: var(--svr-warning-soft); }
.svr-outbox__icon { color: var(--svr-action-text); display: inline-flex; }
.svr-outbox__text { flex: 1 1 auto; }

.svr-undelivered {
    display: grid;
    gap: .8rem;
    padding: 1rem;
    border: 1px solid color-mix(in srgb, var(--svr-warning) 30%, var(--svr-border));
    border-radius: var(--svr-radius);
    background: var(--svr-warning-soft);
}

.svr-undelivered__head { display: flex; gap: .75rem; }
.svr-undelivered__icon { color: var(--svr-warning); font-size: 1.2em; }
.svr-undelivered__title { font-size: 1em; font-weight: 700; }
.svr-undelivered__message { color: var(--svr-text-muted); font-size: .86em; }
.svr-undelivered__list { display: grid; gap: .45rem; }

.svr-undelivered__entry {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .6rem;
    padding: .6rem .75rem;
    border-radius: var(--svr-radius-sm);
    background: var(--svr-surface);
}

.svr-undelivered__body { display: grid; }
.svr-undelivered__body small { color: var(--svr-text-muted); font-size: .78em; }
.svr-undelivered__actions { display: flex; gap: .4rem; }

.svr-kiosk {
    display: flex;
    align-items: center;
    gap: 1.4rem;
    padding: calc(var(--svr-pad) * 2);
    border: 1px solid var(--svr-border);
    border-radius: calc(var(--svr-radius) + 6px);
    background: var(--svr-surface);
    box-shadow: var(--svr-card-shadow);
}

.svr-kiosk__icon {
    display: grid;
    place-items: center;
    width: 4.2rem;
    height: 4.2rem;
    flex: none;
    border-radius: 50%;
    background: var(--svr-success-soft);
    color: var(--svr-success);
    font-size: 2em;
}

.svr-kiosk--pending .svr-kiosk__icon { background: var(--svr-accent-soft); color: var(--svr-action-text); }
.svr-kiosk--unavailable .svr-kiosk__icon { background: var(--svr-warning-soft); color: var(--svr-warning); }
.svr-kiosk__copy { display: grid; gap: .4rem; }
.svr-kiosk__eyebrow { color: var(--svr-text-muted); font-size: .74em; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.svr-kiosk__title { font-family: var(--svr-font-heading); font-size: 1.4em; font-weight: 700; }
.svr-kiosk__message { color: var(--svr-text-muted); }
.svr-kiosk__note { display: inline-flex; align-items: center; gap: .4rem; color: var(--svr-action-text); font-size: .86em; font-weight: 650; }
.svr-kiosk__actions { display: flex; gap: .5rem; margin-top: .4rem; }

/* Public skin: the header is the hero of the standalone page. */
.svr[data-svr-skin="public"] .svr-head {
    gap: 1.2rem;
    padding: calc(var(--svr-pad) * 1.8) calc(var(--svr-pad) * 1.9);
    border: 0;
    border-radius: calc(var(--svr-radius) + 8px);
    background:
        radial-gradient(90% 120% at 100% 0%, color-mix(in srgb, var(--svr-gold) 26%, transparent), transparent 55%),
        linear-gradient(135deg, var(--svr-accent) 0%, color-mix(in srgb, var(--svr-accent) 72%, #04070f) 100%);
    color: var(--svr-on-accent);
    box-shadow: 0 24px 60px color-mix(in srgb, var(--svr-accent) 28%, transparent);
}

.svr[data-svr-skin="public"] .svr-head__eyebrow { color: color-mix(in srgb, var(--svr-on-accent) 78%, transparent); }
.svr[data-svr-skin="public"] .svr-head__title { font-size: 1.75em; letter-spacing: -.02em; }
.svr[data-svr-skin="public"] .svr-head__subtitle { color: color-mix(in srgb, var(--svr-on-accent) 82%, transparent); }
.svr[data-svr-skin="public"] .svr-head .svr-progress__meta,
.svr[data-svr-skin="public"] .svr-head .svr-progress__count { color: var(--svr-on-accent); }
.svr[data-svr-skin="public"] .svr-head .svr-progress__track { background: rgba(255, 255, 255, .18); }
.svr[data-svr-skin="public"] .svr-head .svr-progress__fill { background: linear-gradient(90deg, #ffffff, color-mix(in srgb, var(--svr-gold) 70%, #fff)); }
.svr[data-svr-skin="public"] .svr-head .svr-segmented { border-color: rgba(255, 255, 255, .22); background: rgba(255, 255, 255, .1); }
.svr[data-svr-skin="public"] .svr-head .svr-segmented__button { color: rgba(255, 255, 255, .82); }
.svr[data-svr-skin="public"] .svr-head .svr-segmented__button.is-active { background: #ffffff; color: var(--svr-accent); box-shadow: none; }
.svr[data-svr-skin="public"] .svr-head .svr-toggle { border-color: rgba(255, 255, 255, .26); background: rgba(255, 255, 255, .08); color: #ffffff; }
.svr[data-svr-skin="public"] .svr-head .svr-toggle.is-on { background: #ffffff; color: var(--svr-accent); }
.svr[data-svr-skin="public"] .svr-head :is(.svr-segmented__button, .svr-toggle):focus-visible { box-shadow: 0 0 0 3px rgba(255, 255, 255, .8); }
.svr[data-svr-skin="public"] .svr-card__number { background: var(--svr-accent); color: var(--svr-on-accent); }

/* Staff: display font for the runner title, section titles and the ending. */
.svr[data-svr-skin="staff"] .svr-card__number { border-radius: 10px; }
.svr[data-svr-skin="staff"] .svr-head { border-radius: calc(var(--svr-radius) + 4px); }

/* Admin preview: glass header. */
.svr[data-svr-skin="admin"] .svr-head {
    background:
        radial-gradient(120% 140% at 100% 0%, rgba(31, 111, 214, .1), transparent 55%),
        rgba(255, 255, 255, .86);
    backdrop-filter: blur(12px);
}
/* Admin chips stay in the blue family (Radzen identity); gold is kept for the star rating only. */
.svr[data-svr-skin="admin"] :is(.svr-section__chip, .svr-chip--required) {
    background: color-mix(in srgb, var(--svr-accent) 10%, var(--svr-surface));
    color: #1a4f94;
}

/* ------------------------------------------------------------------------------------------ 13 responsive */
@media (max-width: 720px) {
    .svr { font-size: calc(0.9375rem * var(--svr-font-scale) * var(--svr-text-scale)); }

    .svr-runner { gap: calc(var(--svr-gap) * .8); }

    .svr-head { padding: 1rem; }
    .svr[data-svr-skin="public"] .svr-head { padding: 1.35rem 1.2rem; }
    .svr[data-svr-skin="public"] .svr-head__title { font-size: 1.4em; }
    .svr-head__tools { width: 100%; }
    .svr-head__tools .svr-segmented { flex: 1 1 auto; }
    .svr-head__tools .svr-segmented__button { flex: 1 1 0; justify-content: center; }

    .svr-card { padding: .95rem .9rem; }
    .svr-card--focused { padding: 1.05rem .95rem; }
    .svr-card__head { grid-template-columns: auto minmax(0, 1fr); }
    .svr-card__chips { grid-column: 2; justify-content: flex-start; max-width: none; }
    .svr-card__description,
    .svr-card__error { margin-left: 0; }

    .svr-scale { grid-template-columns: repeat(auto-fit, minmax(4.6rem, 1fr)); }
    .svr-scale--likert { grid-template-columns: 1fr; }
    .svr-scale--likert .svr-scale__tile { justify-items: start; text-align: left; padding: .6rem .85rem; min-height: 2.8rem; }
    .svr-scale--nps { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .svr-scale--yes-no { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .svr-stars { justify-content: space-between; }
    .svr .svr-star { min-width: 0; flex: 1 1 0; }
    .svr-star__glyph { width: 1.7rem; height: 1.7rem; }

    .svr-ranking__row { grid-template-columns: auto minmax(0, 1fr); }
    .svr-ranking__row .svr-select { grid-column: 1 / -1; max-width: none; }

    .svr-matrix__header { display: none; }
    .svr-matrix__row { grid-template-columns: 1fr; gap: .55rem; }
    .svr-matrix__choices { grid-template-columns: repeat(auto-fit, minmax(4.4rem, 1fr)); }
    .svr-matrix:has(.svr-matrix__header) .svr-matrix__choice-text { position: static; width: auto; height: auto; clip: auto; white-space: normal; }

    .svr-other { margin-left: 0; }
    .svr .svr-slider { grid-template-columns: minmax(0, 1fr) auto; }
    .svr-slider__bound { display: none; }

    .svr-pager { grid-template-columns: 1fr 1fr; }
    .svr-pager__position { grid-column: 1 / -1; grid-row: 1; }

    .svr-actions { padding: .75rem; }
    .svr-actions__buttons { width: 100%; }
    .svr-actions__buttons .svr-btn { flex: 1 1 auto; }

    .svr-review__entry { grid-template-columns: auto minmax(0, 1fr); }
    .svr-review__entry .svr-link-button { grid-column: 2; justify-self: start; }
    .svr-review__actions .svr-btn { flex: 1 1 auto; }

    .svr-kiosk { flex-direction: column; text-align: center; padding: 1.6rem 1.2rem; }
    .svr-kiosk__actions { justify-content: center; }

    .svr-toast-dock { right: 1rem; left: 1rem; bottom: 1rem; width: auto; }
}

/* The same phone layout for a runner rendered in a narrow box on a wide screen (the builder's preview column, a
 phone frame): the host declares `container: svr-host / inline-size` on its wrapper and the rules above apply by the
 box's width. Not on .svr itself: layout containment there would pin the runner's fixed toasts to the runner in every
 portal. Keep in step with the @media block above. */
@container svr-host (max-width: 720px) {
    .svr { font-size: calc(0.9375rem * var(--svr-font-scale) * var(--svr-text-scale)); }

    .svr-runner { gap: calc(var(--svr-gap) * .8); }

    .svr-head { padding: 1rem; }
    .svr[data-svr-skin="public"] .svr-head { padding: 1.35rem 1.2rem; }
    .svr[data-svr-skin="public"] .svr-head__title { font-size: 1.4em; }
    .svr-head__tools { width: 100%; }
    .svr-head__tools .svr-segmented { flex: 1 1 auto; }
    .svr-head__tools .svr-segmented__button { flex: 1 1 0; justify-content: center; }

    .svr-card { padding: .95rem .9rem; }
    .svr-card--focused { padding: 1.05rem .95rem; }
    .svr-card__head { grid-template-columns: auto minmax(0, 1fr); }
    .svr-card__chips { grid-column: 2; justify-content: flex-start; max-width: none; }
    .svr-card__description,
    .svr-card__error { margin-left: 0; }

    .svr-scale { grid-template-columns: repeat(auto-fit, minmax(4.6rem, 1fr)); }
    .svr-scale--likert { grid-template-columns: 1fr; }
    .svr-scale--likert .svr-scale__tile { justify-items: start; text-align: left; padding: .6rem .85rem; min-height: 2.8rem; }
    .svr-scale--nps { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .svr-scale--yes-no { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .svr-stars { justify-content: space-between; }
    .svr .svr-star { min-width: 0; flex: 1 1 0; }
    .svr-star__glyph { width: 1.7rem; height: 1.7rem; }

    .svr-ranking__row { grid-template-columns: auto minmax(0, 1fr); }
    .svr-ranking__row .svr-select { grid-column: 1 / -1; max-width: none; }

    .svr-matrix__header { display: none; }
    .svr-matrix__row { grid-template-columns: 1fr; gap: .55rem; }
    .svr-matrix__choices { grid-template-columns: repeat(auto-fit, minmax(4.4rem, 1fr)); }
    .svr-matrix:has(.svr-matrix__header) .svr-matrix__choice-text { position: static; width: auto; height: auto; clip: auto; white-space: normal; }

    .svr-other { margin-left: 0; }
    .svr .svr-slider { grid-template-columns: minmax(0, 1fr) auto; }
    .svr-slider__bound { display: none; }

    .svr-pager { grid-template-columns: 1fr 1fr; }
    .svr-pager__position { grid-column: 1 / -1; grid-row: 1; }

    .svr-actions { padding: .75rem; }
    .svr-actions__buttons { width: 100%; }
    .svr-actions__buttons .svr-btn { flex: 1 1 auto; }

    .svr-review__entry { grid-template-columns: auto minmax(0, 1fr); }
    .svr-review__entry .svr-link-button { grid-column: 2; justify-self: start; }
    .svr-review__actions .svr-btn { flex: 1 1 auto; }

    .svr-kiosk { flex-direction: column; text-align: center; padding: 1.6rem 1.2rem; }
    .svr-kiosk__actions { justify-content: center; }

    .svr-toast-dock { right: 1rem; left: 1rem; bottom: 1rem; width: auto; }
}

/* ------------------------------------------------------------ 14 contrast, forced colours, motion, print */
.svr[data-svr-contrast="high"] {
    --svr-text-muted: var(--svr-text);
    --svr-text-soft: var(--svr-text);
    --svr-border: var(--svr-text);
    --svr-border-strong: var(--svr-text);
    --svr-accent-line: var(--svr-text);
    --svr-card-shadow: none;
    --svr-card-bg: var(--svr-surface);
}

.svr[data-svr-contrast="high"] .svr-card,
.svr[data-svr-contrast="high"] .svr-option,
.svr[data-svr-contrast="high"] .svr-scale__tile,
.svr[data-svr-contrast="high"] .svr-matrix__row,
.svr[data-svr-contrast="high"] .svr-field { border-width: 2px; }

.svr[data-svr-contrast="high"] :is(.svr-option, .svr-scale__tile, .svr-star, .svr-matrix__choice, .svr-field, .svr-select, .svr-btn, .svr-toggle):has(:focus-visible),
.svr[data-svr-contrast="high"] :is(.svr-btn, .svr-toggle, .svr-segmented__button, .svr-link-button):focus-visible {
    outline: 3px solid var(--svr-text);
    outline-offset: 2px;
}

.svr[data-svr-motion="reduced"] *,
.svr[data-svr-motion="none"] * {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
}

@media (prefers-reduced-motion: reduce) {
    .svr *,
    .svr-capture * {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
}

@media (forced-colors: active) {
    .svr .svr-option,
    .svr .svr-scale__tile,
    .svr .svr-matrix__choice,
    .svr .svr-star,
    .svr .svr-field,
    .svr .svr-select { border: 1px solid CanvasText; }

    .svr .svr-option.is-selected,
    .svr .svr-scale__tile.is-selected,
    .svr .svr-matrix__choice.is-selected { outline: 3px solid Highlight; }

    .svr :is(.svr-option, .svr-scale__tile, .svr-star, .svr-matrix__choice, .svr-field, .svr-select):has(:focus-visible),
    .svr :is(.svr-btn, .svr-toggle, .svr-segmented__button, .svr-link-button, .svr-icon-button):focus-visible {
        outline: 3px solid Highlight;
        outline-offset: 2px;
    }

    .svr .svr-hidden-control,
    .svr .svr-option__control { forced-color-adjust: auto; }
}

@media print {
    .svr-head__tools,
    .svr-pager,
    .svr-actions,
    .svr-toast-dock,
    .svr-a11y { display: none !important; }

    .svr-card { break-inside: avoid; box-shadow: none; content-visibility: visible; }
}