/* Shared frontend and backend charts. Keep brand colours configurable. */
:root {
    --survey-blue: #0079b5;
    --survey-blue-light: #eaf6fc;
    --survey-blue-selected: #005b88;
    --survey-ink: #142c3d;
    --survey-muted: #536674;
    --survey-line: #dce5eb;
    --survey-blue-muted: #65859c;
}
.survey, .survey-charts { color: var(--survey-ink); font: inherit; line-height: 1.5; max-width: 52rem; margin: 2rem auto; }
.survey *, .survey-charts * { box-sizing: border-box; }
.survey h2 { color: var(--survey-ink); font: inherit; font-size: clamp(2rem, 4vw, 3.25rem); font-weight: 600; line-height: 1.08; letter-spacing: -.035em; margin: 0 0 1.25rem; text-transform: none; }
.survey p { line-height: 1.55; }
.survey .survey-eyebrow, .survey-charts .survey-eyebrow { margin: 0; color: var(--survey-blue-selected); font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.survey-results { background: #fff; }
.survey-results-header { padding: 2.5rem 2.75rem; background: var(--survey-blue-light); border-top: 4px solid var(--survey-blue); }
.survey-results-header .survey-eyebrow { margin-bottom: 1.25rem; }
.survey-results-header h2 { max-width: 14em; }
.survey .survey-saved { display: flex; align-items: baseline; gap: .55rem; font-size: .95rem; margin: 0 0 1.25rem; }
.survey-check { display: inline-flex; align-self: center; align-items: center; justify-content: center; flex: 0 0 1.3rem; height: 1.3rem; border: 1px solid currentColor; border-radius: 50%; color: var(--survey-blue-selected); font-size: .85rem; }
.survey .survey-results-intro { margin: 0; font-size: 1.125rem; }
.survey .survey-legend { display: flex; align-items: center; gap: .6rem; margin: .6rem 0 0; color: var(--survey-muted); font-size: .875rem; }
.survey-legend > span { width: 1.5rem; height: .4rem; border-radius: 1rem; background: var(--survey-blue); flex-shrink: 0; }
.survey-results > .survey-hint { padding: 0 2.75rem; }
.survey-results > .survey-charts { margin: 0; padding: 0 2.75rem; }
.survey-chart { padding: 2.25rem 0; border-bottom: 1px solid var(--survey-line); }
.survey-chart:last-child { border-bottom: 0; }
.survey-question-meta { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: .35rem 1rem; margin-bottom: .65rem; color: var(--survey-muted); font-size: .8rem; }
.survey-charts .survey-chart h3 { color: var(--survey-ink); font: inherit; font-size: 1.5rem; font-weight: 600; line-height: 1.25; letter-spacing: -.015em; margin: 0 0 1.6rem; text-transform: none; }
.survey-charts .survey-bars { list-style: none; padding: 0; margin: 0; }
.survey-charts .survey-bar { position: relative; list-style: none; padding: 0; margin: 0 0 1.35rem; background: transparent; border: 0; }
.survey-charts .survey-bar::before { content: none; }
.survey-charts .survey-bar:last-child { margin-bottom: 0; }
.survey-bar-label { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: .75rem; margin-bottom: .5rem; }
.survey-answer { display: flex; align-items: baseline; flex-wrap: wrap; gap: .2rem .65rem; font-size: 1.0625rem; line-height: 1.35; overflow-wrap: anywhere; }
.survey-own { display: inline-flex; align-items: baseline; gap: .25rem; color: var(--survey-blue-selected); font-size: .75rem; font-weight: 600; white-space: nowrap; }
.survey-own > span { font-size: .9rem; }
.survey-value { display: flex; flex-direction: column; align-items: flex-end; min-width: 5rem; font-variant-numeric: tabular-nums; line-height: 1.2; }
.survey-value > strong { font-size: 1.375rem; font-weight: 600; color: var(--survey-ink); }
.survey-percent { font-size: .875rem; font-weight: 400; }
.survey-count { font-size: .75rem; color: var(--survey-muted); margin-top: .2rem; }
.survey-track { width: 100%; height: .75rem; overflow: hidden; border-radius: 1rem; background: #eef2f5; }
.survey-track > span { display: block; height: 100%; border-radius: inherit; background: var(--survey-blue-muted); }
.survey-bar[data-selected="1"] .survey-track > span { background: var(--survey-blue); }
.survey-bar[data-selected="1"] .survey-value > strong { color: var(--survey-blue-selected); }
.survey .survey-chart-note, .survey-charts .survey-chart-note { color: var(--survey-muted); font-size: .8rem; line-height: 1.5; margin: 1.5rem 0 0; max-width: 44rem; }
.survey-waiting { display: flex; align-items: center; gap: 1rem; padding: 1.25rem; background: #f5f8fa; color: var(--survey-muted); font-size: .95rem; margin: 0; }
.survey-waiting-mark { display: flex; flex: 0 0 2rem; height: 2rem; align-items: center; justify-content: center; border: 1px solid var(--survey-line); border-radius: 50%; font-size: 1.25rem; font-weight: 700; }
.survey-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
/* Form controls stay native for keyboard navigation and required validation. */
.survey fieldset { border: 0; border-bottom: 1px solid var(--survey-line); border-radius: 0; padding: 0 0 2rem; margin: 2.5rem 0 2rem; min-width: 0; }
.survey legend { color: inherit; font: inherit; font-size: 1.5rem; font-weight: 600; line-height: 1.3; padding: 0; margin-bottom: .35rem; width: 100%; }
.survey-prose { white-space: pre-line; }
.survey-option { display: flex; align-items: center; gap: .85rem; padding: 1rem 1.25rem; margin: .65rem 0; border: 1px solid #b4c5d1; border-radius: .5rem; cursor: pointer; color: inherit; background: #fff; line-height: 1.4; }
.survey-option input { flex: 0 0 auto; width: 1.2rem; height: 1.2rem; margin: 0; appearance: auto; accent-color: var(--survey-blue-selected); position: static; opacity: 1; }
.survey-option:hover { border-color: var(--survey-blue); background: #f4faff; }
.survey-option:has(input:checked) { border-color: var(--survey-blue); background: var(--survey-blue-light); box-shadow: inset 3px 0 var(--survey-blue); }
.survey :focus-visible { outline: 3px solid var(--survey-blue-selected); outline-offset: 4px; }
.survey-hint, .survey-required { color: var(--survey-muted); font-size: .875rem; font-weight: 400; }
.survey-required { display: inline-block; }
.survey-error { border-left: .25rem solid #9b1c18; padding: 1rem; background: #fff1ef; color: #761515; }
.survey-button { display: inline-flex; justify-content: center; align-items: center; gap: 1.5rem; border: 1px solid var(--survey-blue-selected); border-radius: 2rem; padding: .9rem 1.5rem; color: #fff !important; background: var(--survey-blue-selected); font: inherit; font-weight: 600; text-decoration: none; line-height: 1.4; cursor: pointer; }
.survey-button::after { content: '→'; font-size: 1.25em; line-height: 1; }
.survey-button:hover { background: var(--survey-ink); border-color: var(--survey-ink); text-decoration: none; }
.survey-button:disabled { opacity: .7; cursor: wait; }
.survey-popup { width: min(90vw, 38rem); max-height: 85vh; overflow: auto; padding: 2rem; border: 0; border-top: 4px solid var(--survey-blue); border-radius: .5rem; background: #fff; margin: auto; }
.survey-popup::backdrop { background: rgb(0 30 50 / 55%); }
.survey-popup-close { display: block; margin: 0 0 1.5rem auto; border: 0; border-bottom: 1px solid currentColor; background: transparent; color: var(--survey-muted); padding: .5rem 0; font: inherit; font-size: .875rem; cursor: pointer; }
.survey-image { display: block; max-width: 100%; height: auto; margin-bottom: 1.5rem; }
@media (max-width: 600px) {
    .survey { margin: 1rem auto; }
    .survey-results-header { padding: 1.75rem 1.25rem; }
    .survey-results > .survey-charts { padding: 0 1.25rem; }
    .survey-results > .survey-hint { padding: 0 1.25rem; }
    .survey-chart { padding: 1.75rem 0; }
    .survey-charts .survey-chart h3, .survey legend { font-size: 1.25rem; }
    .survey-question-meta { display: block; }
    .survey-question-meta > span { display: block; }
    .survey-question-meta > span + span { margin-top: .25rem; }
    .survey-answer { font-size: 1rem; }
    .survey-bar-label { gap: .5rem; }
    .survey-value { min-width: 4.5rem; }
    .survey-value > strong { font-size: 1.25rem; }
    .survey-own { font-size: .7rem; }
    .survey-button { width: 100%; }
    .survey-popup { padding: 1.25rem; }
}
@media (forced-colors: active) {
    .survey-track { border: 1px solid CanvasText; }
    .survey-track > span { background: CanvasText; forced-color-adjust: none; }
    .survey-bar[data-selected="1"] .survey-track > span { background: Highlight; }
    .survey-option:has(input:checked) { outline: 2px solid Highlight; }
}
@media print {
    .survey-popup, .survey-button { display: none !important; }
    .survey-chart { break-inside: avoid; }
    .survey-track { border: 1px solid #999; }
    .survey-track > span { print-color-adjust: exact; }
    .survey-own { color: #000; }
}
/* Step controls are revealed by JavaScript; all questions work without it. */
.survey [hidden] { display: none !important; }
.survey-progress { margin: 2rem 0; }
.survey .survey-step-count { font-size: .875rem; color: var(--survey-muted); margin: 0 0 .5rem; }
.survey-step-track { height: 4px; background: var(--survey-line); }
.survey-step-track > span { display: block; height: 100%; background: var(--survey-blue); }
.survey-navigation { display: flex; align-items: center; justify-content: flex-end; gap: 1rem; flex-wrap: wrap; }
.survey-navigation .survey-back { margin-right: auto; }
.survey-navigation .survey-button { width: auto; }
.survey-form-stepped fieldset { margin-top: 0; }
.survey[id] { scroll-margin-top: 14rem; }