/*
  SurveyAxis design system.

  Tokens first, then the base elements, then one section per component family.
  Survey themes override the --sa-survey-* tokens at render time, so a respondent
  page can be recoloured without touching these rules (PRD 6.9).
*/

:root {
    /* Brand. The green is taken from the logo; the darker steps keep white text
       readable on a button (WCAG AA), the vivid step is for accents only. */
    --sa-brand: #3a851b;
    --sa-brand-dark: #2f6d16;
    --sa-brand-vivid: #6cbf1f;
    --sa-brand-soft: #d6efc0;
    --sa-brand-light: #eef8e4;

    /* The single warm accent, reserved for upgrade and upsell moments. */
    --sa-accent: #f2c53d;
    --sa-accent-dark: #d9ab1e;
    --sa-accent-light: #fdf6dc;

    /* Text and lines. */
    --sa-ink: #2b333d;
    --sa-ink-muted: #5b6672;
    /* The quietest text: help, placeholders, table headers, the footer. Held at 4.5 : 1 on
       both surfaces -- it was #7d8793, 3.65 : 1 on white and 3.32 : 1 on sunken, which failed
       WCAG 1.4.3 on every screen that used it. TokenContrastTests keeps it above the line. */
    --sa-ink-subtle: #646e78;
    --sa-ink-inverse: #ffffff;
    --sa-link: #2a6db0;
    --sa-link-hover: #1f5490;
    --sa-line: #e2e6e0;
    --sa-line-strong: #c5ccc2;
    /* The edge of something a person types into or switches. A field's border is how the field
       is found, so it has to reach 3 : 1 against the page (WCAG 1.4.11). --sa-line-strong is
       1.64 : 1 and stays for dividers and cards, which nobody has to find. */
    --sa-line-control: #7d8793;

    /* Surfaces. */
    --sa-surface: #ffffff;
    --sa-surface-sunken: #f3f5f1;
    --sa-surface-raised: #ffffff;
    --sa-surface-dark: #333e48;
    --sa-surface-dark-hover: #3f4b56;

    /* Status. */
    --sa-success: #2e7d32;
    --sa-success-bg: #e8f5e9;
    --sa-success-line: #a5d6a7;
    --sa-warning: #9a6700;
    --sa-warning-bg: #fff8e1;
    --sa-warning-line: #ffe082;
    --sa-danger: #c62828;
    --sa-danger-bg: #ffebee;
    --sa-danger-line: #ef9a9a;
    --sa-info: #1f5490;
    --sa-info-bg: #e8f1fb;
    --sa-info-line: #b3cdea;

    /* Shape. */
    --sa-radius-sm: 6px;
    --sa-radius: 10px;
    --sa-radius-lg: 14px;
    --sa-shadow: 0 1px 2px rgba(31, 41, 30, .06), 0 1px 1px rgba(31, 41, 30, .04);
    --sa-shadow-lg: 0 14px 34px rgba(31, 41, 30, .14);
    --sa-shadow-pop: 0 18px 48px rgba(31, 41, 30, .2), 0 2px 6px rgba(31, 41, 30, .08);
    --sa-focus: 0 0 0 3px rgba(108, 191, 31, .35);

    /* Space. */
    --sa-space-1: .25rem;
    --sa-space-2: .5rem;
    --sa-space-3: .75rem;
    --sa-space-4: 1rem;
    --sa-space-5: 1.25rem;
    --sa-space-6: 1.5rem;
    --sa-space-8: 2rem;
    --sa-space-10: 2.5rem;
    --sa-space-12: 3rem;

    /* Type. */
    --sa-font: 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --sa-control-height: 2.5rem;
    --sa-appbar-height: 3.75rem;
    --sa-page-width: 80rem;

    /* Survey theme defaults; a survey's own theme overrides these inline. */
    --sa-survey-accent: var(--sa-brand);

    /* Lettering on anything filled with the accent. A survey's own theme replaces this
       with whichever of black or white can be read on the colour it chose. */
    --sa-survey-accent-text: #ffffff;
    --sa-survey-background: #ffffff;
    --sa-survey-text: var(--sa-ink);
    --sa-survey-font: var(--sa-font);

    /* The shape of the buttons a respondent presses, and a picture behind the page. Both
       come from a theme somebody made; a survey on a catalogue theme keeps these. */
    --sa-survey-button-radius: var(--sa-radius);
    --sa-survey-background-image: none;
}

/* ---------------------------------------------------------------------------
   Base
--------------------------------------------------------------------------- */

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

html {
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    font-family: var(--sa-font);
    font-size: 15px;
    line-height: 1.5;
    color: var(--sa-ink);
    background: var(--sa-surface-sunken);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
    margin: 0 0 var(--sa-space-3);
    font-weight: 600;
    line-height: 1.25;
    color: var(--sa-ink);
    letter-spacing: -.01em;
}

h1 { font-size: 1.75rem; }
h2 { font-size: 1.2rem; }
h3 { font-size: 1rem; }

h1:focus {
    outline: none;
}

p {
    margin: 0 0 var(--sa-space-3);
}

a {
    color: var(--sa-link);
    text-decoration: none;
}

a:hover {
    color: var(--sa-link-hover);
    text-decoration: underline;
}

/* Links in running text are underlined. Colour was all that told them from the words around
   them, and the link blue is 2.38 : 1 against body text, below the 3 : 1 colour alone would
   need (WCAG 1.4.1). Navigation, buttons and cards are links too, and set their own look. */
p a:not(.sa-btn),
dd a:not(.sa-btn),
td a:not(.sa-btn),
.sa-prose a:not(.sa-btn),
.sa-hint a:not(.sa-btn),
.sa-alert a:not(.sa-btn) {
    text-decoration: underline;
    text-underline-offset: .15em;
}

hr {
    border: 0;
    border-top: 1px solid var(--sa-line);
    margin: var(--sa-space-4) 0;
}

img {
    max-width: 100%;
}

code {
    font-size: .9em;
    background: var(--sa-surface-sunken);
    padding: .1em .35em;
    border-radius: var(--sa-radius-sm);
}

/* Respects a reader who has asked for less movement (FR-RESP-2). */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }
}

/* Keyboard focus must always be visible.

   Except on tabindex="-1", which is not something the keyboard reaches: it is where the page
   sends focus itself -- a page's heading after navigating, the main region a skip link lands
   on, a list of problems after a failed submit. The browser counts that as keyboard focus when
   the last input was not a click, so the heading drew a green box after page loads, and the
   h1:focus rule that meant to prevent it lost on specificity to [tabindex]:focus-visible. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible {
    outline: 2px solid var(--sa-brand);
    outline-offset: 2px;
}

/* Screen-reader-only text, used for icon labels and table captions. */
.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;
}

/* The way past the header (WCAG 2.4.1). Out of the way until it is focused, which is
   the first thing a keyboard reaches on every page; without it the twenty links in the
   application bar are between the reader and the page, on every page. */
.sa-skip-link {
    position: absolute;
    left: var(--sa-space-2);
    top: -4rem;
    z-index: 100;
    padding: var(--sa-space-2) var(--sa-space-3);
    background: var(--sa-surface);
    color: var(--sa-ink);
    border: 2px solid var(--sa-brand);
    border-radius: var(--sa-radius);
    text-decoration: none;
    transition: top 120ms ease-in-out;
}

.sa-skip-link:focus {
    top: var(--sa-space-2);
}

/* The heading of the page it lands on takes focus, and should not draw a ring for a
   click that did not come from the keyboard. */
.sa-main:focus,
.sa-site-main:focus,
.sa-auth-card:focus {
    outline: none;
}

/* ---------------------------------------------------------------------------
   Application bar and shell
--------------------------------------------------------------------------- */

.sa-shell {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* A light bar with the logo in its own colours. The reference product runs a dark green
   band across the top of every page; this one stays out of the way of the survey the
   author is working on, and the page's own colour sits in the workspace instead. */
.sa-appbar {
    background: rgba(255, 255, 255, .94);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    color: var(--sa-ink);
    border-bottom: 1px solid var(--sa-line);
    position: sticky;
    top: 0;
    z-index: 30;
}

.sa-appbar-inner {
    display: flex;
    align-items: center;
    gap: var(--sa-space-2);
    height: var(--sa-appbar-height);
    padding: 0 var(--sa-space-6);
}

.sa-appbar-brand {
    display: flex;
    align-items: center;
    height: 100%;
    padding-right: var(--sa-space-4);
    margin-right: var(--sa-space-2);
}

.sa-appbar-brand img {
    height: 1.75rem;
    width: auto;
}

.sa-appbar-nav {
    display: flex;
    align-items: center;
    height: 100%;
    gap: .15rem;
}

.sa-appbar-nav a {
    display: inline-flex;
    align-items: center;
    gap: var(--sa-space-2);
    padding: .45rem .85rem;
    border-radius: 999px;
    color: var(--sa-ink-muted);
    font-weight: 600;
    font-size: .9rem;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color .12s ease, color .12s ease;
}

.sa-appbar-nav a:hover {
    color: var(--sa-ink);
    background: var(--sa-surface-sunken);
    text-decoration: none;
}

/* The page somebody is on carries a bar, not only a tint: the tint is 1.09 : 1 against the
   bar behind it and only the text colour changed (WCAG 1.4.1, 1.4.11). */
.sa-appbar-nav a.active {
    color: var(--sa-brand-dark);
    background: var(--sa-brand-light);
    box-shadow: inset 0 -3px 0 var(--sa-brand);
}

.sa-appbar-nav a i {
    display: none;
}

.sa-appbar-actions {
    display: flex;
    align-items: center;
    gap: var(--sa-space-2);
    margin-left: auto;
}

.sa-appbar .sa-btn {
    height: 2.25rem;
}

.sa-appbar-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 999px;
    color: var(--sa-ink-muted);
    font-size: 1.05rem;
    text-decoration: none;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.sa-appbar-icon:hover {
    color: var(--sa-ink);
    background: var(--sa-surface-sunken);
    text-decoration: none;
}

.sa-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 999px;
    background: var(--sa-brand);
    color: #fff;
    font-weight: 700;
    font-size: .85rem;
    letter-spacing: .02em;
    text-decoration: none;
    text-transform: uppercase;
}

.sa-avatar:hover {
    text-decoration: none;
    box-shadow: 0 0 0 3px var(--sa-brand-soft);
}

.sa-appbar-signout {
    display: inline;
}

.sa-appbar-signout .sa-btn {
    color: var(--sa-ink-muted);
    border-color: transparent;
    background: transparent;
}

.sa-appbar-signout .sa-btn:hover:not(:disabled) {
    color: var(--sa-ink);
    background: var(--sa-surface-sunken);
}

.sa-main {
    flex: 1;
    width: 100%;
    padding: var(--sa-space-8) var(--sa-space-6) var(--sa-space-12);
}

/* Narrower content, for pages that read better as a column. */
.sa-page-narrow {
    max-width: 64rem;
    margin: 0 auto;
}

/* The workspace bands run the full width of the main area. */
.sa-workspace {
    margin: calc(var(--sa-space-8) * -1) calc(var(--sa-space-6) * -1) 0;
}

/* ---------------------------------------------------------------------------
   Page header
--------------------------------------------------------------------------- */

.sa-page-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--sa-space-4);
    margin-bottom: var(--sa-space-6);
    flex-wrap: wrap;
}

.sa-page-header h1 {
    font-size: 1.85rem;
    font-weight: 600;
    margin: 0;
}

.sa-page-header .sa-hint {
    margin: var(--sa-space-1) 0 0;
    font-size: .95rem;
}

.sa-page-header .sa-toolbar {
    margin-bottom: 0;
}

.sa-section-title {
    font-size: .8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--sa-ink-subtle);
    margin: var(--sa-space-6) 0 var(--sa-space-3);
}

/* ---------------------------------------------------------------------------
   Cards, toolbars, layout helpers
--------------------------------------------------------------------------- */

.sa-card {
    background: var(--sa-surface-raised);
    border: 1px solid var(--sa-line);
    border-radius: var(--sa-radius-lg);
    box-shadow: var(--sa-shadow);
    padding: var(--sa-space-6);
}

.sa-card + .sa-card,
.sa-card + .sa-section {
    margin-top: var(--sa-space-6);
}

.sa-card > h2:first-child,
.sa-card > h3:first-child {
    margin-top: 0;
}

.sa-card h2 {
    font-size: 1.05rem;
    display: flex;
    align-items: center;
    gap: var(--sa-space-2);
}

.sa-card h2 i {
    color: var(--sa-brand);
}

.sa-card-flush {
    padding: 0;
    overflow: hidden;
}

.sa-card-flush > .sa-toolbar {
    padding: var(--sa-space-4) var(--sa-space-6);
    margin: 0;
    border-bottom: 1px solid var(--sa-line);
}

.sa-card-flush > .sa-pagination {
    padding: var(--sa-space-4) var(--sa-space-6);
    margin: 0;
    border-top: 1px solid var(--sa-line);
}

.sa-card-flush > .sa-empty {
    padding: var(--sa-space-12) var(--sa-space-6);
}

.sa-toolbar {
    display: flex;
    gap: var(--sa-space-3);
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: var(--sa-space-4);
}

.sa-toolbar .sa-input,
.sa-toolbar .sa-select {
    width: auto;
}

.sa-grid {
    display: grid;
    gap: var(--sa-space-4);
}

.sa-grid-2 { grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); }
.sa-grid-3 { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.sa-grid-4 { grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }

.sa-stack > * + * {
    margin-top: var(--sa-space-4);
}

/* ---------------------------------------------------------------------------
   Buttons
--------------------------------------------------------------------------- */

.sa-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sa-space-2);
    height: var(--sa-control-height);
    padding: 0 var(--sa-space-4);
    border-radius: var(--sa-radius-sm);
    border: 1px solid var(--sa-line-strong);
    background: var(--sa-surface);
    color: var(--sa-ink);
    font: inherit;
    font-size: .95rem;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    text-decoration: none;
    transition: background-color .12s ease, border-color .12s ease, color .12s ease, box-shadow .12s ease;
}

.sa-btn:hover:not(:disabled) {
    background: var(--sa-surface-sunken);
    border-color: var(--sa-ink-subtle);
    color: var(--sa-ink);
    text-decoration: none;
}

.sa-btn:active:not(:disabled) {
    transform: translateY(1px);
}

.sa-btn:disabled {
    opacity: .55;
    cursor: not-allowed;
}

.sa-btn i {
    font-size: .95em;
}

.sa-btn-primary {
    background: var(--sa-brand);
    border-color: var(--sa-brand);
    color: #fff;
}

.sa-btn-primary:hover:not(:disabled) {
    background: var(--sa-brand-dark);
    border-color: var(--sa-brand-dark);
    color: #fff;
}

.sa-btn-accent {
    background: var(--sa-accent);
    border-color: var(--sa-accent);
    color: var(--sa-ink);
}

.sa-btn-accent:hover:not(:disabled) {
    background: var(--sa-accent-dark);
    border-color: var(--sa-accent-dark);
    color: var(--sa-ink);
}

.sa-btn-danger {
    background: var(--sa-danger);
    border-color: var(--sa-danger);
    color: #fff;
}

.sa-btn-danger:hover:not(:disabled) {
    background: #a51f1f;
    border-color: #a51f1f;
    color: #fff;
}

.sa-btn-quiet {
    border-color: transparent;
    background: transparent;
    color: var(--sa-ink-muted);
    font-weight: 500;
}

.sa-btn-quiet:hover:not(:disabled) {
    background: var(--sa-surface-sunken);
    border-color: transparent;
    color: var(--sa-ink);
}

.sa-btn-link {
    border-color: transparent;
    background: transparent;
    color: var(--sa-link);
    padding: 0 var(--sa-space-2);
}

.sa-btn-link:hover:not(:disabled) {
    background: transparent;
    border-color: transparent;
    color: var(--sa-link-hover);
    text-decoration: underline;
}

.sa-btn-sm {
    height: 2rem;
    padding: 0 var(--sa-space-3);
    font-size: .85rem;
}

/* The same height as a small button, for a control that sits in a row of them. */
.sa-select-sm {
    height: 2rem;
    padding: 0 var(--sa-space-2);
    font-size: .85rem;
}


/* One workgroup in the team workspace (FR-TEAM-3). Ruled off from the next so a roster of
   tick boxes reads as belonging to the name above it. */
.sa-workgroup {
    padding: var(--sa-space-3) 0;
    border-top: 1px solid var(--sa-line);
}

.sa-workgroup:first-of-type {
    border-top: 0;
}

/* The strip that appears above the survey list when rows are ticked (FR-CREATE-11).
   Set apart from the table so it reads as acting on the selection rather than on the page. */
.sa-bulk-bar {
    margin-bottom: var(--sa-space-3);
    padding: var(--sa-space-3);
    border: 1px solid var(--sa-brand);
    border-radius: var(--sa-radius);
    background: var(--sa-surface-sunken);
    flex-wrap: wrap;
}

.sa-btn-lg {
    height: 3rem;
    padding: 0 var(--sa-space-6);
    font-size: 1.05rem;
}

.sa-btn-block {
    width: 100%;
}

/* A square button holding one icon, as in a table's action column. */
.sa-btn-icon {
    width: var(--sa-control-height);
    padding: 0;
}

.sa-btn-icon.sa-btn-sm {
    width: 2rem;
}

/* Inline actions in a table row are shown on hover, so the table stays quiet. */
.sa-row-actions {
    display: flex;
    gap: var(--sa-space-1);
    justify-content: flex-end;
    opacity: .55;
    transition: opacity .12s ease;
}

tr:hover .sa-row-actions,
tr:focus-within .sa-row-actions {
    opacity: 1;
}

/* ---------------------------------------------------------------------------
   Forms
--------------------------------------------------------------------------- */

.sa-input,
.sa-select,
.sa-textarea {
    width: 100%;
    min-height: var(--sa-control-height);
    padding: .5rem .75rem;
    border: 1px solid var(--sa-line-control);
    border-radius: var(--sa-radius-sm);
    font: inherit;
    color: var(--sa-ink);
    background: var(--sa-surface);
    transition: border-color .12s ease, box-shadow .12s ease;
}

.sa-input::placeholder,
.sa-textarea::placeholder {
    color: var(--sa-ink-subtle);
}

.sa-input:hover,
.sa-select:hover,
.sa-textarea:hover {
    border-color: var(--sa-ink-subtle);
}

.sa-input:focus,
.sa-select:focus,
.sa-textarea:focus {
    /* Transparent rather than none. The halo below is a box-shadow, which Windows High
       Contrast removes, and with the outline switched off nothing was left to show which
       field had focus (WCAG 2.4.7). A transparent outline draws nothing in ordinary colours
       and is painted in the system's own colour when colours are forced. */
    outline: 2px solid transparent;
    outline-offset: 1px;
    border-color: var(--sa-brand);
    box-shadow: var(--sa-focus);
}

.sa-input:disabled,
.sa-select:disabled,
.sa-textarea:disabled {
    background: var(--sa-surface-sunken);
    color: var(--sa-ink-subtle);
    cursor: not-allowed;
}

.sa-select {
    appearance: none;
    padding-right: 2.25rem;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%232b333d' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .8rem center;
}

.sa-textarea {
    resize: vertical;
    line-height: 1.5;
}

.sa-field {
    margin-bottom: var(--sa-space-4);
}

.sa-field label {
    display: block;
    font-weight: 600;
    font-size: .9rem;
    margin-bottom: var(--sa-space-1);
}

.sa-field .sa-hint {
    margin-top: var(--sa-space-1);
}

.sa-field-row {
    display: flex;
    gap: var(--sa-space-4);
    flex-wrap: wrap;
}

.sa-field-row > .sa-field {
    flex: 1 1 12rem;
}

.sa-hint {
    color: var(--sa-ink-subtle);
    font-size: .875rem;
}

.sa-error-text {
    color: var(--sa-danger);
    font-size: .875rem;
    margin-top: var(--sa-space-1);
}

input[type="checkbox"],
input[type="radio"] {
    accent-color: var(--sa-brand);
    width: 1.05rem;
    height: 1.05rem;
    margin: 0;
    flex-shrink: 0;
}

/* A checkbox or radio with its label. */
.sa-choice {
    display: flex;
    align-items: flex-start;
    gap: var(--sa-space-3);
    padding: var(--sa-space-2) var(--sa-space-3);
    border-radius: var(--sa-radius-sm);
    cursor: pointer;
    line-height: 1.4;
}

.sa-choice input {
    margin-top: .2rem;
}

.sa-choice:hover {
    background: rgba(43, 51, 61, .04);
}

/* How the options are laid out (FR-Q-1). The setting existed long before anything read
   it, so every layout rendered as a single column. */
.sa-choices {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sa-space-1);
}

.sa-choices-horizontal {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sa-space-3);
}

.sa-choices-two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.sa-choices-three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Columns collapse on a narrow screen rather than squeezing the labels (FR-RESP-1). */
@media (max-width: 640px) {
    .sa-choices-two,
    .sa-choices-three {
        grid-template-columns: 1fr;
    }
}

/* Where people clicked, counted into a grid (FR-AN-9). The intensity drives the alpha
   rather than the hue, so the map still reads for somebody who cannot separate red from
   green -- and every cell carries its count in a title for anybody hovering. */
.sa-heatmap {
    display: grid;
    gap: 1px;
    max-width: 32rem;
    aspect-ratio: 1;
    background: var(--sa-line);
    border-radius: var(--sa-radius-sm);
    overflow: hidden;
    margin-bottom: var(--sa-space-2);
}

.sa-heat-cell {
    background: transparent;
    min-height: .5rem;
}

/* A rating drawn as shapes rather than numbers (FR-Q-4). */
.sa-scale-shapes {
    display: flex;
    gap: var(--sa-space-2);
}

.sa-shape {
    background: none;
    border: 0;
    padding: var(--sa-space-1);
    font-size: 1.75rem;
    line-height: 1;
    cursor: pointer;

    /* The text colour, so an unchosen outline is as visible as the words (it was the line grey,
       1.26 : 1). Which points are chosen is carried by solid against outline, not by colour. */
    color: inherit;
}

/* The survey's accent, which the theme editor holds to 3 : 1 against the background. The
   product's yellow was 1.64 : 1 on white. */
.sa-shape:hover,
.sa-shape-on {
    color: var(--sa-survey-accent);
}

/* --sa-focus is a box-shadow, so "2px solid" plus it was not a colour and the whole
   declaration was thrown away. The ring somebody sees today comes from the generic
   button rule above; this one has drawn nothing since it was written. */
.sa-shape:focus-visible {
    outline: 2px solid var(--sa-brand);
    outline-offset: 2px;
}

/* The picture on an image choice (FR-Q-15). Sized rather than left at its natural
   dimensions, so one large upload cannot push the rest of the answers off the page. */
.sa-choice-image {
    width: 7rem;
    height: 7rem;
    object-fit: cover;
    border-radius: var(--sa-radius-sm);
    flex: none;
}

.sa-toolbar .sa-choice,
.sa-choice.sa-choice-inline {
    padding-left: 0;
}

.sa-toolbar .sa-choice:hover,
.sa-choice.sa-choice-inline:hover {
    background: transparent;
}

/* A click-map question: the picture with the chosen point marked on it, and the two sliders
   that place the same point without a pointer. The marker lets clicks through to the picture
   beneath it, and its two rings keep it visible on a light picture and a dark one. */
.sa-clickmap-picture {
    position: relative;
    display: inline-block;
    max-width: 100%;
    line-height: 0;
}

.sa-clickmap-marker {
    position: absolute;
    width: 1.1rem;
    height: 1.1rem;
    border: 3px solid var(--sa-surface);
    border-radius: 999px;
    background: var(--sa-ink);
    box-shadow: 0 0 0 2px var(--sa-ink);
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.sa-clickmap-sliders {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sa-space-2);
    max-width: 28rem;
    margin-top: var(--sa-space-3);
}

/* A toggle switch. */
.sa-switch {
    position: relative;
    display: inline-block;
    width: 2.6rem;
    height: 1.5rem;
    flex-shrink: 0;
}

.sa-switch input {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}

.sa-switch span {
    position: absolute;
    inset: 0;
    border-radius: 999px;
    background: var(--sa-line-control);
    transition: background .15s ease;
}

.sa-switch span::after {
    content: "";
    position: absolute;
    top: .15rem;
    left: .15rem;
    width: 1.2rem;
    height: 1.2rem;
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .25);
    transition: transform .15s ease;
}

.sa-switch input:checked + span {
    background: var(--sa-brand);
}

.sa-switch input:checked + span::after {
    transform: translateX(1.1rem);
}

.sa-switch input:focus-visible + span {
    /* The ring is a shadow, which forced colours drop; the transparent outline is what is
       left for them to paint. */
    outline: 2px solid transparent;
    outline-offset: 2px;
    box-shadow: var(--sa-focus);
}

/* ---------------------------------------------------------------------------
   Tables
--------------------------------------------------------------------------- */

.sa-table-wrap {
    overflow-x: auto;
}

.sa-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .95rem;
}

.sa-table th,
.sa-table td {
    text-align: left;
    padding: var(--sa-space-3) var(--sa-space-4);
    border-bottom: 1px solid var(--sa-line);
    vertical-align: middle;
}

.sa-table th {
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--sa-ink-subtle);
    background: var(--sa-surface-sunken);
    border-bottom-color: var(--sa-line);
    white-space: nowrap;
}

.sa-table tbody tr:hover {
    background: #fafbfc;
}

.sa-table tbody tr:last-child td {
    border-bottom: 0;
}

.sa-table td a:not(.sa-btn) {
    color: var(--sa-ink);
    font-weight: 600;
}

.sa-table td a:not(.sa-btn):hover {
    color: var(--sa-link);
}

.sa-table .sa-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.sa-table .sa-hint {
    display: block;
    font-weight: 400;
}

/* ---------------------------------------------------------------------------
   Badges, alerts, empty states, pagination
--------------------------------------------------------------------------- */

.sa-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--sa-space-1);
    padding: .15rem .6rem;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .02em;
    background: var(--sa-surface-sunken);
    color: var(--sa-ink-muted);
    border: 1px solid var(--sa-line);
    white-space: nowrap;
}

/* Two pills in a row. Razor drops the whitespace-only line between a badge and the
   conditional that draws the next one, and a badge is inline-flex with no margin of its
   own, so they sat flush against each other and read as one control -- on the report
   queue, the contact inbox, the response list, the notification centre, the comment
   thread and the integrations directory. */
.sa-badge + .sa-badge { margin-left: .35rem; }

.sa-badge-open { background: var(--sa-success-bg); color: var(--sa-success); border-color: var(--sa-success-line); }
.sa-badge-draft { background: var(--sa-surface-sunken); color: var(--sa-ink-muted); }
.sa-badge-closed { background: var(--sa-danger-bg); color: var(--sa-danger); border-color: var(--sa-danger-line); }
.sa-badge-archived { background: #ede9fe; color: #6d28d9; border-color: #ddd6fe; }
.sa-badge-accent { background: var(--sa-accent); color: var(--sa-ink); border-color: var(--sa-accent-dark); }
.sa-badge-brand { background: var(--sa-brand-light); color: var(--sa-brand-dark); border-color: var(--sa-brand-soft); }

.sa-empty {
    text-align: center;
    padding: var(--sa-space-10) var(--sa-space-6);
    color: var(--sa-ink-muted);
}

.sa-empty > i {
    font-size: 2.25rem;
    margin-bottom: var(--sa-space-4);
    display: block;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
    color: var(--sa-line-strong);
}

.sa-empty p {
    margin-bottom: var(--sa-space-4);
}

.sa-empty .sa-btn {
    margin-top: var(--sa-space-2);
}

.sa-alert {
    display: flex;
    align-items: flex-start;
    gap: var(--sa-space-3);
    padding: var(--sa-space-3) var(--sa-space-4);
    border-radius: var(--sa-radius);
    border: 1px solid var(--sa-line);
    margin-bottom: var(--sa-space-4);
    background: var(--sa-surface);
}

.sa-alert i {
    margin-top: .15rem;
}

.sa-alert ul {
    margin: var(--sa-space-2) 0 0;
    padding-left: 1.2rem;
}

.sa-alert-error { background: var(--sa-danger-bg); border-color: var(--sa-danger-line); color: var(--sa-danger); }
.sa-alert-success { background: var(--sa-success-bg); border-color: var(--sa-success-line); color: var(--sa-success); }
.sa-alert-info { background: var(--sa-info-bg); border-color: var(--sa-info-line); color: var(--sa-info); }
.sa-alert-warning { background: var(--sa-warning-bg); border-color: var(--sa-warning-line); color: var(--sa-warning); }

.sa-pagination {
    display: flex;
    gap: var(--sa-space-2);
    align-items: center;
    justify-content: flex-end;
    margin-top: var(--sa-space-4);
}

.sa-pagination .sa-hint:first-child {
    margin-right: auto;
}

.sa-loading {
    display: flex;
    align-items: center;
    gap: var(--sa-space-2);
    color: var(--sa-ink-subtle);
    padding: var(--sa-space-6) 0;
}

/* ---------------------------------------------------------------------------
   Tabs
--------------------------------------------------------------------------- */

.sa-tabs {
    display: flex;
    gap: var(--sa-space-2);
    border-bottom: 1px solid var(--sa-line);
    margin: 0 0 var(--sa-space-4);
    overflow-x: auto;
    overflow-y: hidden;
}

.sa-tab {
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    padding: .75rem var(--sa-space-3);
    font: inherit;
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--sa-ink-muted);
    cursor: pointer;
    white-space: nowrap;
}

.sa-tab:hover {
    color: var(--sa-ink);
}

/* The underline in the brand green at 4.61 : 1; the vivid green was 2.31 : 1. */
.sa-tab.active {
    color: var(--sa-brand);
    border-bottom-color: var(--sa-brand);
}

/* ---------------------------------------------------------------------------
   Choice cards: "what do you want to do?" style entry points
--------------------------------------------------------------------------- */

.sa-choice-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: var(--sa-space-4);
    margin-bottom: var(--sa-space-8);
}

.sa-choice-card {
    display: flex;
    flex-direction: column;
    gap: var(--sa-space-3);
    padding: var(--sa-space-6);
    background: var(--sa-surface);
    border: 1px solid var(--sa-line);
    border-radius: var(--sa-radius-lg);
    box-shadow: var(--sa-shadow);
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    text-decoration: none;
    transition: border-color .12s ease, box-shadow .12s ease, transform .12s ease;
}

.sa-choice-card:hover:not(:disabled),
.sa-choice-card:focus-visible {
    border-color: var(--sa-brand-vivid);
    box-shadow: var(--sa-shadow-lg);
    text-decoration: none;
    color: inherit;
    transform: translateY(-1px);
}

.sa-choice-card:disabled {
    opacity: .6;
    cursor: not-allowed;
}

.sa-choice-card i {
    font-size: 1.6rem;
    color: var(--sa-brand);
}

.sa-choice-card strong {
    font-size: 1.05rem;
}

.sa-choice-card span {
    color: var(--sa-ink-muted);
    font-size: .95rem;
}

/* ---------------------------------------------------------------------------
   Stat tiles
--------------------------------------------------------------------------- */

.sa-stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    gap: var(--sa-space-4);
    margin-bottom: var(--sa-space-6);
}

.sa-stat {
    background: var(--sa-surface);
    border: 1px solid var(--sa-line);
    border-radius: var(--sa-radius-lg);
    padding: var(--sa-space-5) var(--sa-space-6);
}

.sa-stat-value {
    display: block;
    font-size: 1.9rem;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
}

.sa-stat-label {
    display: block;
    margin-top: var(--sa-space-2);
    font-size: .8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--sa-ink-subtle);
}

/* ---------------------------------------------------------------------------
   The survey workspace: title band with the stages beside it, and the tool rail
--------------------------------------------------------------------------- */

.sa-workspace-header {
    display: flex;
    align-items: center;
    gap: var(--sa-space-5);
    flex-wrap: wrap;
    background: var(--sa-surface);
    border-bottom: 1px solid var(--sa-line);
    padding: var(--sa-space-3) var(--sa-space-8);
    position: sticky;
    top: var(--sa-appbar-height);
    z-index: 20;
}

.sa-workspace-heading {
    min-width: 0;
    flex: 1 1 16rem;
}

.sa-workspace-title-row {
    display: flex;
    align-items: center;
    gap: var(--sa-space-3);
    flex-wrap: wrap;
}

.sa-workspace-header h1 {
    font-size: 1.3rem;
    font-weight: 650;
    letter-spacing: -.015em;
    margin: 0;
    overflow-wrap: anywhere;
}

.sa-workspace-subtitle {
    margin: .15rem 0 0;
    color: var(--sa-ink-subtle);
    font-size: .85rem;
}

/* The stages are one segmented control rather than a strip of tabs: four steps in a
   pill, with the current one lifted. */
.sa-stages {
    display: inline-flex;
    align-items: center;
    gap: .15rem;
    padding: .25rem;
    background: var(--sa-surface-sunken);
    border: 1px solid var(--sa-line);
    border-radius: 999px;
}

.sa-stage {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .35rem .9rem .35rem .45rem;
    border-radius: 999px;
    color: var(--sa-ink-muted);
    font-weight: 600;
    font-size: .85rem;
    white-space: nowrap;
    text-decoration: none;
    transition: background-color .12s ease, color .12s ease;
}

.sa-stage-step {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.35rem;
    height: 1.35rem;
    border-radius: 999px;
    background: var(--sa-surface);
    border: 1px solid var(--sa-line-strong);
    font-size: .7rem;
    font-weight: 700;
    color: var(--sa-ink-subtle);
}

.sa-stage:hover {
    color: var(--sa-ink);
    background: rgba(43, 51, 61, .05);
    text-decoration: none;
}

.sa-stage.active {
    background: var(--sa-surface);
    color: var(--sa-brand-dark);
    box-shadow: var(--sa-shadow), inset 0 -3px 0 var(--sa-brand);
}

.sa-stage.active .sa-stage-step {
    background: var(--sa-brand);
    border-color: var(--sa-brand);
    color: #fff;
}

.sa-workspace-actions {
    display: flex;
    align-items: center;
    gap: var(--sa-space-2);
    flex-wrap: wrap;
    margin-left: auto;
}

.sa-workspace-body {
    padding: var(--sa-space-6) var(--sa-space-8) 0;
}

.sa-workspace-body.with-rail {
    display: grid;
    grid-template-columns: 13rem minmax(0, 1fr);
    gap: var(--sa-space-8);
    align-items: start;
}

/* The rail carries its labels beside its icons, as a list, and sticks under the band. */
.sa-tool-rail {
    position: sticky;
    top: calc(var(--sa-appbar-height) + 4.75rem);
    display: flex;
    flex-direction: column;
    gap: .15rem;
    padding: var(--sa-space-2);
    background: var(--sa-surface);
    border: 1px solid var(--sa-line);
    border-radius: var(--sa-radius-lg);
    box-shadow: var(--sa-shadow);
}

.sa-tool {
    display: flex;
    align-items: center;
    gap: var(--sa-space-3);
    padding: .6rem .75rem;
    border-radius: var(--sa-radius);
    color: var(--sa-ink-muted);
    font-weight: 600;
    font-size: .9rem;
    text-decoration: none;
    transition: background-color .12s ease, color .12s ease;
}

.sa-tool i {
    width: 1.35rem;
    text-align: center;
    font-size: 1rem;
    color: var(--sa-ink-subtle);
}

.sa-tool:hover {
    background: var(--sa-surface-sunken);
    color: var(--sa-ink);
    text-decoration: none;
}

.sa-tool.active {
    background: var(--sa-brand-light);
    color: var(--sa-brand-dark);
    box-shadow: inset 3px 0 0 var(--sa-brand);
}

.sa-tool.active i {
    color: var(--sa-brand);
}

.sa-workspace-content {
    min-width: 0;
    max-width: var(--sa-page-width);
}

/* ---------------------------------------------------------------------------
   Builder canvas: the title, the pages, the question cards and the outline
--------------------------------------------------------------------------- */

.sa-builder {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 15rem;
    gap: var(--sa-space-8);
    align-items: start;
}

.sa-builder-canvas {
    min-width: 0;
    max-width: 54rem;
}

.sa-builder-title {
    margin-bottom: var(--sa-space-6);
}

.sa-builder-title label {
    display: block;
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--sa-ink-subtle);
    margin-bottom: .2rem;
}

/* The title is written where it is read: a large line with a rule that appears under
   the pointer, rather than a boxed field above the survey. */
.sa-builder-title-input {
    width: 100%;
    font: inherit;
    font-size: 1.5rem;
    font-weight: 650;
    letter-spacing: -.015em;
    color: var(--sa-ink);
    background: transparent;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    padding: .25rem 0;
    transition: border-color .12s ease;
}

.sa-builder-title-input:hover {
    border-bottom-color: var(--sa-line-strong);
}

.sa-builder-title-input:focus {
    /* The underline shows focus in ordinary colours; the transparent outline shows it when
       colours are forced and the underline is repainted in the text colour. */
    outline: 2px solid transparent;
    border-bottom-color: var(--sa-brand);
}

.sa-builder-page {
    margin-bottom: var(--sa-space-6);
    padding: var(--sa-space-4) var(--sa-space-5) var(--sa-space-5);
    background: var(--sa-surface);
    border: 1px solid var(--sa-line);
    border-radius: var(--sa-radius-lg);
    box-shadow: var(--sa-shadow);
}

.sa-builder-page.collapsed {
    padding-bottom: var(--sa-space-4);
}

.sa-builder-page-head {
    display: flex;
    align-items: center;
    gap: var(--sa-space-3);
    margin-bottom: var(--sa-space-4);
}

.sa-builder-page.collapsed .sa-builder-page-head {
    margin-bottom: 0;
}

.sa-builder-page-fold {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border: 0;
    border-radius: var(--sa-radius-sm);
    background: transparent;
    color: var(--sa-ink-subtle);
    font: inherit;
    cursor: pointer;
    flex-shrink: 0;
}

.sa-builder-page-fold:hover {
    background: var(--sa-surface-sunken);
    color: var(--sa-ink);
}

.sa-builder-page-name {
    flex: 1;
    min-width: 0;
}

.sa-builder-page-name h2 {
    display: flex;
    align-items: center;
    gap: var(--sa-space-3);
    flex-wrap: wrap;
    margin: 0;
    font-size: 1rem;
}

.sa-builder-page-name .sa-hint {
    margin: 0;
}

.sa-builder-page-badge {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .2rem .65rem;
    border-radius: 999px;
    background: var(--sa-surface-dark);
    color: #fff;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.sa-builder-page-title {
    font-weight: 600;
    overflow-wrap: anywhere;
}

.sa-builder-page-actions {
    display: flex;
    align-items: center;
    gap: .15rem;
    flex-shrink: 0;
}

.sa-builder-page-actions .sa-btn.active {
    background: var(--sa-brand-light);
    color: var(--sa-brand-dark);
}

/* A quiet button that turns red under the pointer, for the deletes among the icons. */
.sa-btn-danger-quiet:hover:not(:disabled) {
    background: var(--sa-danger-bg);
    color: var(--sa-danger);
}

.sa-builder-page-settings {
    background: var(--sa-surface-sunken);
    border: 1px solid var(--sa-line);
    border-radius: var(--sa-radius);
    padding: var(--sa-space-5);
    margin-bottom: var(--sa-space-4);
}

.sa-builder-page-settings .sa-field {
    margin-bottom: var(--sa-space-3);
}

.sa-builder-page-settings-foot {
    display: flex;
    justify-content: flex-end;
    margin-top: var(--sa-space-3);
}

.sa-builder-page-empty {
    margin: 0 0 var(--sa-space-4);
    padding: var(--sa-space-4);
    text-align: center;
    color: var(--sa-ink-subtle);
    border: 1px dashed var(--sa-line-strong);
    border-radius: var(--sa-radius);
}

/* A switch with its wording beside it, and room for a hint underneath the wording. */
.sa-switch-field {
    display: flex;
    align-items: flex-start;
    gap: var(--sa-space-3);
    cursor: pointer;
    line-height: 1.4;
}

.sa-switch-field > .sa-switch {
    margin-top: .1rem;
}

.sa-switch-field > span:last-child {
    display: block;
}

.sa-switch-field .sa-hint {
    display: block;
    margin-top: .1rem;
}

.sa-question-card {
    position: relative;
    padding: var(--sa-space-4) var(--sa-space-5);
    margin-bottom: var(--sa-space-3);
    background: var(--sa-surface);
    border: 1px solid var(--sa-line);
    border-radius: var(--sa-radius);
    transition: border-color .12s ease, box-shadow .12s ease;
}

.sa-question-card:hover,
.sa-question-card:focus-within {
    border-color: var(--sa-brand-soft);
    box-shadow: 0 0 0 3px var(--sa-brand-light), var(--sa-shadow-lg);
}

.sa-question-card-head {
    display: flex;
    align-items: center;
    gap: var(--sa-space-2);
    flex-wrap: wrap;
    margin-bottom: var(--sa-space-2);
}

.sa-question-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.25rem;
    height: 1.6rem;
    padding: 0 .5rem;
    border-radius: 999px;
    background: var(--sa-ink);
    color: #fff;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .04em;
    flex-shrink: 0;
}

.sa-type-chip {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .2rem .6rem .2rem .5rem;
    border: 1px solid var(--sa-brand-soft);
    border-radius: 999px;
    background: var(--sa-brand-light);
    color: var(--sa-brand-dark);
    font-size: .78rem;
    font-weight: 600;
    white-space: nowrap;
}

.sa-type-chip i {
    color: var(--sa-brand);
}

.sa-question-card-actions {
    display: flex;
    align-items: center;
    gap: .1rem;
    margin-left: auto;
    opacity: .35;
    transition: opacity .12s ease;
}

.sa-question-card:hover .sa-question-card-actions,
.sa-question-card:focus-within .sa-question-card-actions {
    opacity: 1;
}

.sa-question-card-text {
    display: block;
    width: 100%;
    margin: 0;
    padding: .15rem 0;
    border: 0;
    border-radius: var(--sa-radius-sm);
    background: transparent;
    font: inherit;
    font-size: 1.08rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--sa-ink);
    text-align: left;
    overflow-wrap: anywhere;
    cursor: text;
}

.sa-question-card-text:hover {
    color: var(--sa-brand-dark);
}

.sa-question-card-help {
    margin: .1rem 0 0;
    color: var(--sa-ink-muted);
    font-size: .9rem;
}

.sa-question-card-answer {
    margin-top: var(--sa-space-3);
}

/* ---------------------------------------------------------------------------
   Answer previews: the sketch on each card of how the question is answered
--------------------------------------------------------------------------- */

.sa-answer-preview {
    color: var(--sa-ink-muted);
    font-size: .9rem;
    pointer-events: none;
    user-select: none;
}

.sa-preview-choices {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: .35rem;
}

.sa-preview-choices li {
    display: flex;
    align-items: center;
    gap: .6rem;
    min-width: 0;
}

.sa-preview-choices li > span:last-child {
    overflow-wrap: anywhere;
}

.sa-preview-choices-row {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem 1.25rem;
}

.sa-preview-choices-two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.sa-preview-choices-three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.sa-preview-box {
    display: inline-block;
    width: .95rem;
    height: .95rem;
    flex-shrink: 0;
    border: 1.5px solid var(--sa-line-strong);
    background: var(--sa-surface);
}

.sa-preview-radio {
    border-radius: 999px;
}

.sa-preview-check {
    border-radius: 3px;
}

.sa-preview-select {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sa-space-4);
    min-width: 14rem;
    max-width: 20rem;
    padding: .45rem .75rem;
    border: 1px solid var(--sa-line-strong);
    border-radius: var(--sa-radius-sm);
    background: var(--sa-surface);
    color: var(--sa-ink-subtle);
}

.sa-preview-select-options {
    margin-top: .4rem;
    padding-left: .35rem;
    font-size: .85rem;
}

/* A small filled dot, for the entries listed under a drop-down's closed box. */
.sa-preview-dot {
    width: .4rem;
    height: .4rem;
    margin: 0 .3rem;
    border: 0;
    border-radius: 999px;
    background: var(--sa-line-strong);
}

.sa-preview-line {
    display: flex;
    align-items: center;
    gap: var(--sa-space-3);
    flex-wrap: wrap;
}

.sa-preview-shapes {
    display: flex;
    gap: .35rem;
    font-size: 1.5rem;
    color: var(--sa-line-strong);
}

.sa-preview-shapes i:nth-child(-n+3) {
    color: var(--sa-accent);
}

.sa-preview-slider {
    display: flex;
    align-items: center;
    gap: var(--sa-space-3);
    max-width: 28rem;
}

.sa-preview-slider-end {
    font-size: .8rem;
    color: var(--sa-ink-subtle);
    white-space: nowrap;
}

.sa-preview-slider-track {
    position: relative;
    flex: 1;
    height: .35rem;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--sa-brand) 0 40%, var(--sa-line) 40%);
}

.sa-preview-slider-thumb {
    position: absolute;
    left: 40%;
    top: 50%;
    width: 1.05rem;
    height: 1.05rem;
    transform: translate(-50%, -50%);
    border-radius: 999px;
    border: 2px solid var(--sa-brand);
    background: #fff;
    box-shadow: var(--sa-shadow);
}

.sa-preview-nps {
    display: grid;
    grid-template-columns: repeat(11, minmax(0, 1fr));
    gap: .25rem;
    max-width: 30rem;
}

.sa-preview-nps-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 2rem;
    border: 1px solid var(--sa-line-strong);
    border-radius: var(--sa-radius-sm);
    background: var(--sa-surface);
    font-size: .8rem;
    font-weight: 600;
    color: var(--sa-ink-muted);
}

.sa-preview-ends {
    display: flex;
    justify-content: space-between;
    max-width: 30rem;
    margin-top: .25rem;
    font-size: .78rem;
    color: var(--sa-ink-subtle);
}

.sa-preview-empty {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 0;
    color: var(--sa-ink-subtle);
    font-style: italic;
}

.sa-preview-more {
    margin: .35rem 0 0;
    font-size: .8rem;
    color: var(--sa-ink-subtle);
}

.sa-preview-rank {
    margin: 0;
    padding: 0 0 0 1.4rem;
    display: grid;
    gap: .35rem;
    max-width: 28rem;
}

.sa-preview-rank li {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .3rem .6rem;
    border: 1px solid var(--sa-line);
    border-radius: var(--sa-radius-sm);
    background: var(--sa-surface-sunken);
}

.sa-preview-rank li::marker {
    font-weight: 700;
    color: var(--sa-ink-subtle);
}

.sa-preview-rank i {
    color: var(--sa-line-strong);
}

.sa-preview-bestworst {
    display: grid;
    gap: .3rem;
    max-width: 32rem;
}

.sa-preview-bestworst-head,
.sa-preview-bestworst-row {
    display: grid;
    grid-template-columns: 3.5rem minmax(0, 1fr) 3.5rem;
    align-items: center;
    gap: .5rem;
    text-align: center;
}

.sa-preview-bestworst-head {
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--sa-ink-subtle);
}

.sa-preview-bestworst-row > span:nth-child(2) {
    text-align: left;
    overflow-wrap: anywhere;
}

.sa-preview-bestworst-row .sa-preview-box {
    justify-self: center;
}

.sa-preview-matrix {
    border-collapse: collapse;
    font-size: .8rem;
    max-width: 100%;
}

.sa-preview-matrix th,
.sa-preview-matrix td {
    padding: .3rem .5rem;
    text-align: center;
    border-bottom: 1px solid var(--sa-line);
}

.sa-preview-matrix thead th {
    font-weight: 600;
    font-size: .72rem;
    color: var(--sa-ink-subtle);
}

.sa-preview-matrix tbody th {
    text-align: left;
    font-weight: 500;
    color: var(--sa-ink);
}

.sa-preview-mini-select {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    width: 2.25rem;
    height: 1.3rem;
    padding-right: .25rem;
    border-radius: 3px;
    font-size: .6rem;
    color: var(--sa-ink-subtle);
}

.sa-preview-input {
    display: flex;
    align-items: center;
    gap: .5rem;
    min-height: 2.25rem;
    max-width: 28rem;
    padding: .4rem .75rem;
    border: 1px solid var(--sa-line-strong);
    border-radius: var(--sa-radius-sm);
    background: var(--sa-surface);
    color: var(--sa-ink-subtle);
}

.sa-preview-textarea {
    min-height: 4.5rem;
    align-items: flex-start;
}

.sa-preview-input-short {
    display: inline-flex;
    max-width: 14rem;
}

.sa-preview-fields {
    display: grid;
    gap: .5rem;
    max-width: 28rem;
}

.sa-preview-fields label {
    display: grid;
    grid-template-columns: minmax(6rem, 10rem) minmax(0, 1fr);
    gap: .75rem;
    align-items: center;
    font-size: .85rem;
}

.sa-preview-fields .sa-preview-input {
    min-height: 1.9rem;
}

.sa-preview-dropzone {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    max-width: 28rem;
    padding: var(--sa-space-4);
    border: 1.5px dashed var(--sa-line-strong);
    border-radius: var(--sa-radius);
    background: var(--sa-surface-sunken);
    color: var(--sa-ink-subtle);
}

.sa-preview-signature {
    display: flex;
    align-items: flex-end;
    max-width: 20rem;
    height: 3.5rem;
    padding-bottom: .25rem;
    border-bottom: 2px solid var(--sa-ink-subtle);
    color: var(--sa-ink-subtle);
    font-style: italic;
}

.sa-preview-canvas {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    max-width: 28rem;
    height: 5rem;
    border: 1px solid var(--sa-line);
    border-radius: var(--sa-radius);
    background: repeating-linear-gradient(45deg, var(--sa-surface-sunken) 0 8px, var(--sa-surface) 8px 16px);
    color: var(--sa-ink-subtle);
}

.sa-preview-pill {
    padding: .3rem .8rem;
    border: 1px solid var(--sa-line-strong);
    border-radius: 999px;
    background: var(--sa-surface);
    font-size: .8rem;
    font-weight: 600;
}

/* ---------------------------------------------------------------------------
   The composer: where a question is written and its answer type picked
--------------------------------------------------------------------------- */

.sa-composer {
    margin-top: var(--sa-space-2);
    border: 1px solid var(--sa-brand-soft);
    border-radius: var(--sa-radius);
    background: var(--sa-surface);
    box-shadow: 0 0 0 3px var(--sa-brand-light);
}

.sa-composer-head {
    padding: var(--sa-space-4) var(--sa-space-5) 0;
}

.sa-composer-head h3 {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 0 0 .15rem;
    font-size: 1rem;
}

.sa-composer-head h3 i {
    color: var(--sa-brand);
}

.sa-composer-head .sa-hint {
    margin: 0;
}

.sa-composer-body {
    padding: var(--sa-space-4) var(--sa-space-5) 0;
}

.sa-composer-row {
    display: flex;
    align-items: center;
    gap: var(--sa-space-5);
    flex-wrap: wrap;
}

.sa-composer-desc {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: var(--sa-space-3) 0 0;
    color: var(--sa-ink-muted);
    font-size: .875rem;
}

.sa-composer-desc i {
    color: var(--sa-brand);
}

.sa-composer-foot {
    display: flex;
    justify-content: flex-end;
    gap: var(--sa-space-2);
    margin-top: var(--sa-space-4);
    padding: var(--sa-space-3) var(--sa-space-5);
    border-top: 1px solid var(--sa-line);
    border-radius: 0 0 var(--sa-radius) var(--sa-radius);
    background: var(--sa-surface-sunken);
}

.sa-add-question {
    display: flex;
    justify-content: center;
    margin-top: var(--sa-space-2);
}

/* The dashed full-width button that opens the composer, and adds a page. */
.sa-btn-add {
    width: 100%;
    height: 2.75rem;
    border-style: dashed;
    background: transparent;
    color: var(--sa-brand-dark);
}

.sa-btn-add:hover:not(:disabled) {
    background: var(--sa-brand-light);
    border-color: var(--sa-brand);
    color: var(--sa-brand-dark);
}

.sa-add-page {
    margin: var(--sa-space-2) 0 var(--sa-space-8);
}

/* The outline beside the canvas: one row per page, for moving around a long survey. */
.sa-outline {
    position: sticky;
    top: calc(var(--sa-appbar-height) + 4.75rem);
    padding: var(--sa-space-4);
    background: var(--sa-surface);
    border: 1px solid var(--sa-line);
    border-radius: var(--sa-radius-lg);
    box-shadow: var(--sa-shadow);
}

.sa-outline h2 {
    margin: 0 0 .15rem;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--sa-ink-subtle);
}

.sa-outline > .sa-hint {
    margin: 0 0 var(--sa-space-3);
}

.sa-outline-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: .15rem;
}

.sa-outline-page {
    display: flex;
    align-items: center;
    gap: var(--sa-space-2);
    padding: .4rem .5rem;
    border-radius: var(--sa-radius-sm);
    color: var(--sa-ink);
    text-decoration: none;
}

.sa-outline-page:hover {
    background: var(--sa-surface-sunken);
    color: var(--sa-ink);
    text-decoration: none;
}

.sa-outline-page.adding {
    background: var(--sa-brand-light);
}

.sa-outline-page.adding i {
    color: var(--sa-brand);
}

.sa-outline-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 999px;
    background: var(--sa-surface-dark);
    color: #fff;
    font-size: .7rem;
    font-weight: 700;
    flex-shrink: 0;
}

.sa-outline-text {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

.sa-outline-title {
    font-size: .875rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sa-outline-count {
    font-size: .75rem;
    color: var(--sa-ink-subtle);
}

.sa-outline-shape {
    margin: var(--sa-space-3) 0 0;
    padding-top: var(--sa-space-3);
    border-top: 1px solid var(--sa-line);
    font-size: .8rem;
    color: var(--sa-ink-subtle);
}

/* ---------------------------------------------------------------------------
   The answer-type picker: a trigger naming the type, and the popup it opens
--------------------------------------------------------------------------- */

.sa-type-picker {
    position: relative;
    display: inline-block;
    max-width: 100%;
}

.sa-type-trigger {
    display: inline-flex;
    align-items: center;
    gap: var(--sa-space-3);
    min-height: 3rem;
    max-width: 100%;
    padding: .35rem .75rem .35rem .5rem;
    border: 1px solid var(--sa-line-strong);
    border-radius: var(--sa-radius);
    background: var(--sa-surface);
    font: inherit;
    color: var(--sa-ink);
    text-align: left;
    cursor: pointer;
    transition: border-color .12s ease, box-shadow .12s ease;
}

.sa-type-trigger:hover:not(:disabled),
.sa-type-trigger.open {
    border-color: var(--sa-brand);
    box-shadow: var(--sa-focus);
}

.sa-type-trigger:disabled {
    opacity: .55;
    cursor: not-allowed;
}

.sa-type-glyph {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: var(--sa-radius-sm);
    background: var(--sa-brand-light);
    color: var(--sa-brand);
    font-size: 1rem;
    flex-shrink: 0;
}

.sa-type-trigger-text {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    min-width: 0;
}

.sa-type-trigger-label {
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--sa-ink-subtle);
}

.sa-type-trigger-name {
    font-weight: 600;
    font-size: .95rem;
    white-space: nowrap;
}

.sa-type-trigger-caret {
    margin-left: .25rem;
    font-size: .8rem;
    color: var(--sa-ink-subtle);
}

/* What a click outside the popup lands on. Under the popup, over everything else. */
.sa-popover-backdrop {
    position: fixed;
    inset: 0;
    z-index: 50;
    background: transparent;
}

.sa-popover {
    position: absolute;
    top: calc(100% + .4rem);
    left: 0;
    z-index: 51;
    background: var(--sa-surface);
    border: 1px solid var(--sa-line);
    border-radius: var(--sa-radius-lg);
    box-shadow: var(--sa-shadow-pop);
    animation: sa-pop .12s ease-out;
}

@keyframes sa-pop {
    from {
        opacity: 0;
        transform: translateY(-.25rem);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

/* The type popup is centred over the page rather than hung under its trigger: the
   trigger sits wherever the question is, and a popup of twenty-five tiles hung under
   one near the foot of the screen ran off the bottom of it. */
.sa-type-popover {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 50%;
    left: 50%;
    width: 40rem;
    max-width: calc(100vw - 2rem);
    max-height: calc(100vh - 4rem);
    transform: translate(-50%, -50%);
    animation: sa-pop-centre .14s ease-out;
}

.sa-type-picker .sa-popover-backdrop {
    background: rgba(31, 41, 30, .28);
}

@keyframes sa-pop-centre {
    from {
        opacity: 0;
        transform: translate(-50%, -48%);
    }

    to {
        opacity: 1;
        transform: translate(-50%, -50%);
    }
}

.sa-popover-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sa-space-3);
    padding: var(--sa-space-4) var(--sa-space-4) 0;
}

.sa-popover-head h3 {
    margin: 0;
    font-size: 1rem;
}

.sa-popover-search {
    display: flex;
    align-items: center;
    gap: var(--sa-space-2);
    margin: var(--sa-space-3) var(--sa-space-4) 0;
    padding: 0 .75rem;
    border: 1px solid var(--sa-line-control);
    border-radius: 999px;
    background: var(--sa-surface-sunken);
    color: var(--sa-ink-subtle);
}

.sa-popover-search:focus-within {
    border-color: var(--sa-brand);
    box-shadow: var(--sa-focus);
    background: var(--sa-surface);
}

.sa-popover-search-input {
    flex: 1;
    min-width: 0;
    height: 2.4rem;
    border: 0;
    background: transparent;
    font: inherit;
    color: var(--sa-ink);
}

.sa-popover-search-input:focus {
    /* The box around it shows focus with a shadow; forced colours drop that, so the input
       keeps an outline for them to paint. */
    outline: 2px solid transparent;
}

.sa-type-groups {
    overflow-y: auto;
    padding: var(--sa-space-3) var(--sa-space-4) var(--sa-space-2);
}

.sa-type-group + .sa-type-group {
    margin-top: var(--sa-space-3);
}

.sa-type-group h4 {
    margin: 0 0 .4rem;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--sa-ink-subtle);
}

.sa-type-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .35rem;
}

.sa-type-tile {
    display: flex;
    align-items: flex-start;
    gap: .65rem;
    padding: .55rem .6rem;
    border: 1px solid transparent;
    border-radius: var(--sa-radius);
    background: transparent;
    font: inherit;
    color: var(--sa-ink);
    text-align: left;
    cursor: pointer;
    transition: background-color .1s ease, border-color .1s ease;
}

.sa-type-tile:hover {
    background: var(--sa-surface-sunken);
    border-color: var(--sa-line);
}

.sa-type-tile.selected {
    background: var(--sa-brand-light);
    border-color: var(--sa-brand-soft);
}

.sa-type-tile-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border: 1px solid var(--sa-line);
    border-radius: var(--sa-radius-sm);
    background: var(--sa-surface-sunken);
    color: var(--sa-ink-muted);
    font-size: .95rem;
    flex-shrink: 0;
}

.sa-type-tile:hover .sa-type-tile-icon,
.sa-type-tile.selected .sa-type-tile-icon {
    background: var(--sa-surface);
    border-color: var(--sa-brand-soft);
    color: var(--sa-brand);
}

.sa-type-tile-text {
    display: flex;
    flex-direction: column;
    gap: .05rem;
    min-width: 0;
}

.sa-type-tile-name {
    display: flex;
    align-items: center;
    gap: .4rem;
    flex-wrap: wrap;
    font-weight: 600;
    font-size: .9rem;
}

.sa-type-tile-desc {
    font-size: .78rem;
    line-height: 1.3;
    color: var(--sa-ink-subtle);
}

.sa-popover-empty {
    margin: var(--sa-space-4) 0;
    text-align: center;
    color: var(--sa-ink-subtle);
}

.sa-popover-foot {
    margin: 0;
    padding: var(--sa-space-2) var(--sa-space-4) var(--sa-space-3);
    border-top: 1px solid var(--sa-line);
    font-size: .75rem;
}

@media (max-width: 720px) {
    .sa-type-grid {
        grid-template-columns: 1fr;
    }
}

/* ---------------------------------------------------------------------------
   Question editor
--------------------------------------------------------------------------- */

.sa-question-editor {
    padding: 0;
    margin-bottom: var(--sa-space-4);
    border: 1px solid var(--sa-brand-soft);
    border-radius: var(--sa-radius-lg);
    box-shadow: 0 0 0 3px var(--sa-brand-light), var(--sa-shadow-lg);
}

.sa-editor-tabs {
    display: flex;
    gap: .25rem;
    padding: var(--sa-space-3) var(--sa-space-5);
    border-bottom: 1px solid var(--sa-line);
    border-radius: var(--sa-radius-lg) var(--sa-radius-lg) 0 0;
    background: var(--sa-surface);
    overflow-x: auto;
}

.sa-editor-tab {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .45rem .85rem;
    border: 1px solid transparent;
    border-radius: 999px;
    background: transparent;
    font: inherit;
    font-size: .85rem;
    font-weight: 600;
    color: var(--sa-ink-muted);
    white-space: nowrap;
    cursor: pointer;
}

.sa-editor-tab i {
    font-size: .8rem;
    color: var(--sa-ink-subtle);
}

.sa-editor-tab:hover {
    background: var(--sa-surface-sunken);
    color: var(--sa-ink);
}

.sa-editor-tab.active {
    background: var(--sa-ink);
    border-color: var(--sa-ink);
    color: #fff;
}

.sa-editor-tab.active i {
    color: rgba(255, 255, 255, .8);
}

.sa-question-editor .sa-alert {
    margin: var(--sa-space-4) var(--sa-space-5) 0;
}

.sa-question-editor .sa-question-row {
    margin: 0;
    padding: var(--sa-space-4) var(--sa-space-5);
    border-bottom: 1px solid var(--sa-line);
    background: var(--sa-surface-sunken);
}

.sa-question-editor .sa-editor-body {
    padding: var(--sa-space-5);
}

.sa-question-editor .sa-error-text {
    padding: 0 var(--sa-space-5);
}

.sa-question-row {
    display: flex;
    gap: var(--sa-space-3);
    align-items: flex-start;
    flex-wrap: wrap;
}

.sa-question-row .sa-question-number {
    margin-top: .7rem;
}

.sa-question-row-text {
    flex: 1 1 18rem;
    min-height: 3rem;
    font-size: 1.05rem;
    font-weight: 500;
    resize: vertical;
}

.sa-answer-genius {
    display: flex;
    gap: var(--sa-space-3);
    align-items: center;
    justify-content: space-between;
    padding: var(--sa-space-3) var(--sa-space-4);
    background: var(--sa-surface);
    border: 1px solid var(--sa-line);
    border-radius: var(--sa-radius);
    margin-bottom: var(--sa-space-4);
    flex-wrap: wrap;
}

.sa-answer-genius > span:first-child {
    margin-right: auto;
}

.sa-answer-genius i {
    color: var(--sa-brand);
}

.sa-answer-genius .sa-select {
    width: auto;
}

.sa-option-row {
    display: flex;
    gap: var(--sa-space-2);
    align-items: center;
}

.sa-option-row .sa-input {
    flex: 1;
}

.sa-option-row .sa-points {
    max-width: 6rem;
    flex: 0 0 auto;
}

.sa-option-row .sa-btn-quiet {
    width: 2.25rem;
    padding: 0;
    color: var(--sa-ink-subtle);
}

.sa-option-grip {
    width: 1rem;
    text-align: center;
    color: var(--sa-line-strong);
    flex-shrink: 0;
}

.sa-option-correct {
    display: flex;
    align-items: center;
    padding: 0 .25rem;
}

.sa-toggles {
    border-top: 1px solid var(--sa-line);
    margin: var(--sa-space-4) calc(var(--sa-space-5) * -1) 0;
}

.sa-toggles .sa-switch-field {
    padding: var(--sa-space-3) var(--sa-space-5);
    border-bottom: 1px solid var(--sa-line);
}

.sa-toggles .sa-switch-field:last-child {
    border-bottom: 0;
}

.sa-editor-footer {
    display: flex;
    gap: var(--sa-space-2);
    align-items: center;
    justify-content: flex-end;
    padding: var(--sa-space-4) var(--sa-space-5);
    border-top: 1px solid var(--sa-line);
    border-radius: 0 0 var(--sa-radius-lg) var(--sa-radius-lg);
    background: var(--sa-surface-sunken);
}

.sa-editor-footer-type {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin-right: auto;
    color: var(--sa-ink-subtle);
    font-size: .85rem;
}

.sa-editor-footer-type i {
    color: var(--sa-brand);
}

/* ---------------------------------------------------------------------------
   Logic editor
--------------------------------------------------------------------------- */

.sa-logic-banner {
    display: flex;
    align-items: center;
    gap: var(--sa-space-3);
    padding: var(--sa-space-3) var(--sa-space-4);
    background: var(--sa-surface-dark);
    color: #fff;
    border-radius: var(--sa-radius);
    margin-bottom: var(--sa-space-4);
}

.sa-logic-banner i {
    color: var(--sa-accent);
}

/* ---------------------------------------------------------------------------
   Theme gallery
--------------------------------------------------------------------------- */

.sa-theme-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
    gap: var(--sa-space-4);
    margin-top: var(--sa-space-4);
}

.sa-theme {
    display: flex;
    flex-direction: column;
    gap: .4rem;
    padding: .6rem;
    border: 2px solid var(--sa-line);
    border-radius: var(--sa-radius);
    background: var(--sa-surface);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color .12s ease, box-shadow .12s ease;
}

.sa-theme:hover:not(:disabled) {
    border-color: var(--sa-line-strong);
    box-shadow: var(--sa-shadow-lg);
}

.sa-theme.active {
    border-color: var(--sa-brand);
}

.sa-theme:disabled {
    opacity: .6;
    cursor: not-allowed;
}

.sa-theme-preview {
    display: block;
    height: 5rem;
    border-radius: var(--sa-radius-sm);
    padding: .6rem;
    background: var(--sa-survey-background);
    border: 1px solid var(--sa-line);
    overflow: hidden;
}

.sa-theme-bar {
    display: block;
    height: 8px;
    width: 55%;
    border-radius: 999px;
    background: var(--sa-survey-accent);
    margin-bottom: .5rem;
}

.sa-theme-line {
    display: block;
    height: 6px;
    border-radius: 999px;
    background: var(--sa-survey-text);
    opacity: .35;
    margin-bottom: .35rem;
}

.sa-theme-line.short {
    width: 60%;
}

.sa-theme-name {
    display: flex;
    align-items: center;
    gap: .35rem;
    font-weight: 600;
    font-size: .9rem;
}

.sa-theme-name i {
    color: var(--sa-brand);
}

/* ---------------------------------------------------------------------------
   Question bank, preview banner, template gallery, collector cards
--------------------------------------------------------------------------- */

.sa-bank-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sa-space-4);
    padding: var(--sa-space-3) 0;
    border-bottom: 1px solid var(--sa-line);
}

.sa-bank-row:last-child {
    border-bottom: 0;
}

.sa-preview-banner {
    display: flex;
    align-items: center;
    gap: var(--sa-space-3);
    padding: var(--sa-space-3) var(--sa-space-6);
    background: var(--sa-warning-bg);
    border-bottom: 1px solid var(--sa-warning-line);
    color: var(--sa-warning);
    font-weight: 600;
}

.sa-preview-banner .sa-btn {
    margin-left: auto;
    color: var(--sa-ink);
    font-weight: 600;
}

.sa-template-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
    gap: var(--sa-space-4);
}

.sa-template-card {
    display: flex;
    flex-direction: column;
    gap: var(--sa-space-2);
    padding: var(--sa-space-5);
    background: var(--sa-surface);
    border: 1px solid var(--sa-line);
    border-radius: var(--sa-radius-lg);
    box-shadow: var(--sa-shadow);
    color: inherit;
    text-decoration: none;
    transition: border-color .12s ease, box-shadow .12s ease;
}

.sa-template-card:hover,
.sa-template-card:focus-visible {
    border-color: var(--sa-brand-vivid);
    box-shadow: var(--sa-shadow-lg);
    color: inherit;
    text-decoration: none;
}

.sa-template-title {
    display: flex;
    align-items: center;
    gap: var(--sa-space-2);
    font-weight: 600;
    font-size: 1.02rem;
}

.sa-template-title i {
    color: var(--sa-brand);
}

/* Ways to collect, laid out as a choice of cards. */
.sa-collector-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    gap: var(--sa-space-4);
}

.sa-collector-card {
    display: flex;
    gap: var(--sa-space-3);
    align-items: flex-start;
    padding: var(--sa-space-4) var(--sa-space-5);
    background: var(--sa-surface);
    border: 1px solid var(--sa-line);
    border-radius: var(--sa-radius-lg);
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color .12s ease, box-shadow .12s ease;
}

.sa-collector-card:hover:not(:disabled) {
    border-color: var(--sa-brand-vivid);
    box-shadow: var(--sa-shadow-lg);
}

.sa-collector-card:disabled {
    opacity: .6;
    cursor: not-allowed;
}

.sa-collector-card i {
    font-size: 1.35rem;
    color: var(--sa-brand);
    margin-top: .1rem;
}

.sa-collector-card strong {
    display: block;
    font-size: 1rem;
}

.sa-collector-card span {
    color: var(--sa-ink-muted);
    font-size: .9rem;
}

/* ---------------------------------------------------------------------------
   Plans
--------------------------------------------------------------------------- */

.sa-plans-intro {
    text-align: center;
    max-width: 44rem;
    margin: 0 auto var(--sa-space-8);
}

.sa-plans-intro h1 {
    font-size: 2.25rem;
    margin-bottom: var(--sa-space-3);
}

.sa-plans-intro p {
    font-size: 1.1rem;
    color: var(--sa-ink-muted);
}

/* The confirmation before a plan is switched (FR-BILL-4). */
.sa-confirm-heading {
    margin: 0 0 .5rem;
    font-weight: 600;
}

.sa-confirm-body {
    margin: 0 0 .5rem;
}

/* The invoice history under the plans (FR-BILL-10). */
.sa-invoices {
    margin-top: var(--sa-space-8);
}

.sa-invoices h2 {
    margin-bottom: var(--sa-space-4);
}

.sa-invoices td .sa-btn {
    margin-right: var(--sa-space-2);
}

.sa-plans {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: var(--sa-space-6);
    align-items: stretch;
}

.sa-plan {
    display: flex;
    flex-direction: column;
    background: var(--sa-surface);
    border: 1px solid var(--sa-line);
    border-radius: var(--sa-radius-lg);
    overflow: hidden;
}

.sa-plan.featured {
    border: 2px solid var(--sa-brand);
}

.sa-plan-ribbon {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--sa-space-2);
    padding: .5rem;
    background: var(--sa-brand);
    color: #fff;
    font-weight: 700;
    font-size: .85rem;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.sa-plan-body {
    display: flex;
    flex-direction: column;
    gap: var(--sa-space-3);
    padding: var(--sa-space-6);
    flex: 1;
}

.sa-plan-body h2 {
    font-size: 1.5rem;
    margin: 0;
}

.sa-plan-tagline {
    color: var(--sa-ink-muted);
    min-height: 2.8em;
}

.sa-plan-price {
    display: flex;
    align-items: baseline;
    gap: var(--sa-space-2);
    margin-top: var(--sa-space-2);
}

.sa-plan-price strong {
    font-size: 2.5rem;
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1;
}

.sa-plan-price span {
    color: var(--sa-ink-muted);
}

.sa-plan-body ul {
    margin: var(--sa-space-2) 0 0;
    padding: 0;
    list-style: none;
    color: var(--sa-ink-muted);
    font-size: .95rem;
}

.sa-plan-body li {
    display: flex;
    gap: var(--sa-space-2);
    align-items: flex-start;
    padding: .3rem 0;
}

.sa-plan-body li::before {
    content: "\2713";
    color: var(--sa-brand);
    font-weight: 700;
    flex-shrink: 0;
}

.sa-plan-cta {
    margin-top: auto;
    padding-top: var(--sa-space-4);
}

.sa-plan-cta .sa-btn {
    width: 100%;
}

.sa-plan-footer {
    padding: var(--sa-space-3) var(--sa-space-6);
    background: var(--sa-surface-sunken);
    border-top: 1px solid var(--sa-line);
    font-weight: 600;
    font-size: .9rem;
}

/* ---------------------------------------------------------------------------
   Marketing shell and landing page
--------------------------------------------------------------------------- */

.sa-site-header {
    background: var(--sa-surface);
    border-bottom: 1px solid var(--sa-line);
    position: sticky;
    top: 0;
    z-index: 30;
}

.sa-site-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sa-space-4);
    height: 4.25rem;
    max-width: var(--sa-page-width);
    margin: 0 auto;
    padding: 0 var(--sa-space-6);
}

.sa-site-header .headerLogo {
    height: 2.25rem;
    width: auto;
    display: block;
}

.sa-site-nav {
    display: flex;
    align-items: center;
    gap: var(--sa-space-2);
}

.sa-site-nav > a:not(.sa-btn) {
    padding: .5rem .75rem;
    color: var(--sa-ink);
    font-weight: 600;
    border-radius: var(--sa-radius-sm);
}

.sa-site-nav > a:not(.sa-btn):hover {
    background: var(--sa-surface-sunken);
    text-decoration: none;
}

/* The public header on a phone.

   It had no narrow rule at all: one flex row holding the logo and six links, on a viewport
   375 pixels wide. "Sign in" was cut down the middle, "Get started" was off the screen
   entirely, and the whole page scrolled sideways -- on the front door of the site, which is
   where somebody following a link arrives. Found by opening it at a phone's width.

   It wraps rather than collapsing behind a button: nothing here is hidden from anybody, and
   a menu that has to be opened is a worse answer for six links than a second row. */
@media (max-width: 720px) {
    .sa-site-header-inner {
        flex-wrap: wrap;
        justify-content: center;
        height: auto;
        gap: var(--sa-space-2);
        padding: var(--sa-space-3) var(--sa-space-4);
    }

    .sa-site-nav {
        flex-wrap: wrap;
        justify-content: center;
        width: 100%;
        gap: var(--sa-space-1);
    }

    .sa-site-nav > a:not(.sa-btn) {
        padding: .4rem .5rem;
    }
}

.sa-site-main {
    background: var(--sa-surface);
}

.sa-site-footer {
    border-top: 1px solid var(--sa-line);
    background: var(--sa-surface-sunken);
}

.sa-site-footer-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--sa-space-4);
    flex-wrap: wrap;
    max-width: var(--sa-page-width);
    margin: 0 auto;
    padding: var(--sa-space-6);
    color: var(--sa-ink-subtle);
    font-size: .875rem;
}

.sa-site-footer-inner nav {
    display: flex;
    gap: var(--sa-space-4);
}

.sa-site-footer-inner a {
    color: var(--sa-ink-muted);
}

.sa-hero {
    max-width: 52rem;
    margin: 0 auto;
    padding: var(--sa-space-12) var(--sa-space-6) var(--sa-space-10);
    text-align: center;
}

.sa-hero h1 {
    font-size: clamp(2rem, 4.5vw, 3rem);
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.1;
    margin-bottom: var(--sa-space-4);
}

.sa-hero p {
    font-size: 1.2rem;
    color: var(--sa-ink-muted);
    margin: 0 auto var(--sa-space-8);
    max-width: 38rem;
}

.sa-hero-actions {
    display: flex;
    gap: var(--sa-space-3);
    justify-content: center;
    flex-wrap: wrap;
}

.sa-hero-actions .sa-hero-note {
    flex-basis: 100%;
    margin-bottom: 0;
}

.sa-hero-note {
    margin-top: var(--sa-space-4);
    font-size: .875rem;
    color: var(--sa-ink-subtle);
}

.sa-features {
    max-width: var(--sa-page-width);
    margin: 0 auto;
    padding: 0 var(--sa-space-6) var(--sa-space-12);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: var(--sa-space-4);
}

.sa-feature {
    padding: var(--sa-space-6);
    border: 1px solid var(--sa-line);
    border-radius: var(--sa-radius-lg);
    background: var(--sa-surface);
}

.sa-feature i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--sa-radius);
    background: var(--sa-brand-light);
    color: var(--sa-brand);
    font-size: 1.1rem;
    margin-bottom: var(--sa-space-3);
}

.sa-feature h2 {
    font-size: 1.05rem;
    margin-bottom: var(--sa-space-2);
}

.sa-feature p {
    color: var(--sa-ink-muted);
    margin: 0;
    font-size: .95rem;
}

.sa-band {
    background: var(--sa-surface-sunken);
    border-top: 1px solid var(--sa-line);
    border-bottom: 1px solid var(--sa-line);
    padding: var(--sa-space-10) var(--sa-space-6);
    text-align: center;
}

.sa-band h2 {
    font-size: 1.5rem;
    margin-bottom: var(--sa-space-2);
}

.sa-band p {
    color: var(--sa-ink-muted);
    max-width: 36rem;
    margin: 0 auto var(--sa-space-5);
}

/* ---------------------------------------------------------------------------
   Account pages: sign in, register and the rest of Identity
--------------------------------------------------------------------------- */

.sa-auth {
    min-height: 100vh;
    padding: var(--sa-space-10) var(--sa-space-4) var(--sa-space-12);
}

.sa-auth-inner {
    max-width: 30rem;
    margin: 0 auto;
}

.sa-auth-inner.wide {
    max-width: 44rem;
}

.sa-auth-logo {
    display: block;
    margin: 0 auto var(--sa-space-8);
    width: fit-content;
}

.sa-auth-logo img {
    height: 2.75rem;
    width: auto;
    display: block;
}

.sa-auth-card {
    background: var(--sa-surface);
    border: 1px solid var(--sa-line);
    border-radius: var(--sa-radius-lg);
    box-shadow: var(--sa-shadow);
    padding: var(--sa-space-8);
}

.sa-auth-card h1 {
    font-size: 2rem;
    font-weight: 400;
    margin-bottom: var(--sa-space-6);
}

.sa-auth-card h2 {
    font-size: 1rem;
    margin: var(--sa-space-6) 0 var(--sa-space-3);
}

.sa-auth-switch {
    text-align: right;
    color: var(--sa-ink-muted);
    margin-bottom: var(--sa-space-4);
}

.sa-auth-footer {
    margin-top: var(--sa-space-6);
    padding-top: var(--sa-space-5);
    border-top: 1px solid var(--sa-line);
    display: flex;
    flex-direction: column;
    gap: var(--sa-space-2);
}

.sa-auth-divider {
    display: flex;
    align-items: center;
    gap: var(--sa-space-3);
    margin: var(--sa-space-5) 0;
    color: var(--sa-ink-subtle);
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.sa-auth-divider::before,
.sa-auth-divider::after {
    content: "";
    flex: 1;
    border-top: 1px solid var(--sa-line);
}

.sa-auth-back {
    display: block;
    text-align: center;
    margin-top: var(--sa-space-6);
    color: var(--sa-ink-muted);
}

.sa-manage {
    display: grid;
    grid-template-columns: 14rem minmax(0, 1fr);
    gap: var(--sa-space-6);
    align-items: start;
}

.sa-side-nav {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.sa-side-nav a {
    display: block;
    padding: .55rem .8rem;
    border-radius: var(--sa-radius-sm);
    color: var(--sa-ink-muted);
    font-weight: 500;
}

.sa-side-nav a:hover {
    background: var(--sa-surface-sunken);
    color: var(--sa-ink);
    text-decoration: none;
}

.sa-side-nav a.active {
    background: var(--sa-brand-light);
    color: var(--sa-brand-dark);
    font-weight: 600;
    box-shadow: inset 3px 0 0 var(--sa-brand);
}

/* ---------------------------------------------------------------------------
   Respondent-facing survey rendering
--------------------------------------------------------------------------- */

.sa-survey {
    background-color: var(--sa-survey-background);

    /* Behind the page rather than behind the questions: it is fixed so a long survey does
       not drag the picture up past the last question. */
    background-image: var(--sa-survey-background-image);
    background-size: cover;
    background-position: center;
    background-attachment: fixed;

    color: var(--sa-survey-text);
    font-family: var(--sa-survey-font);
    max-width: 46rem;
    margin: 0 auto;
    padding: var(--sa-space-10) var(--sa-space-6) var(--sa-space-12);
    min-height: 100vh;
    font-size: 1rem;
}

/* The block everything a respondent reads sits in. On a theme with a picture behind the page
   it is a panel of the theme's own background colour, so the words are read against the colour
   the theme was checked with rather than against whatever part of the picture is under them. */
.sa-survey-content {
    display: block;
}

.sa-survey-over-picture .sa-survey-content {
    padding: var(--sa-space-6);
    border-radius: var(--sa-radius-lg);
    background: color-mix(in srgb, var(--sa-survey-background) 94%, transparent);
}

.sa-survey h1 {
    font-size: 1.9rem;
    font-weight: 600;
    color: inherit;
    margin-bottom: var(--sa-space-6);
    padding-bottom: var(--sa-space-4);
    border-bottom: 3px solid var(--sa-survey-accent);
}

.sa-survey h2 {
    font-size: 1.25rem;
    color: inherit;
}

.sa-survey .sa-question {
    margin-bottom: var(--sa-space-10);
}

.sa-survey .sa-question-text {
    font-size: 1.15rem;
    font-weight: 500;
    margin-bottom: var(--sa-space-4);
    line-height: 1.4;
}

.sa-survey fieldset {
    border: 0;
    padding: 0;
    margin: 0 0 var(--sa-space-10);
    min-width: 0;
}

.sa-survey legend {
    padding: 0;
    display: block;
    width: 100%;
}

/* The number a respondent sees. It keeps the pill the builder draws, but an
   inline-block one cannot centre what is inside it: the digit sat on the text
   baseline, low and left of the circle around it. */
.sa-survey .sa-question-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-width: 1.6rem;
    height: 1.6rem;
    padding: 0 .4rem;
    margin-right: .35em;
    line-height: 1;
    vertical-align: middle;
    font-weight: 500;
    opacity: .75;
}

.sa-survey .sa-question > .sa-hint {
    margin: calc(var(--sa-space-2) * -1) 0 var(--sa-space-3);
}

/* A numeric scale, rating or Net Promoter Score row. */
.sa-scale {
    display: flex;
    gap: .4rem;
    flex-wrap: wrap;
}

.sa-scale .sa-btn {
    min-width: 2.75rem;
    height: 2.75rem;
    padding: 0 .5rem;
    font-variant-numeric: tabular-nums;
}

.sa-scale .sa-btn:not(.sa-btn-primary):hover:not(:disabled) {
    border-color: var(--sa-survey-accent);
    color: var(--sa-survey-accent);
    background: var(--sa-survey-background);
}

/* The survey's own text colour, not the product's red, which on a dark theme was 3.18 : 1.
   The asterisk is hidden from screen readers and the word "required" is said instead, so
   weight is enough to set it apart for the eye. */
.sa-survey .sa-required {
    color: inherit;
    font-weight: 700;
    margin-left: .2rem;
}

.sa-survey .sa-choice {
    padding: .55rem var(--sa-space-3);
    font-size: 1rem;
}

.sa-survey .sa-choice input {
    width: 1.25rem;
    height: 1.25rem;
    margin-top: .1rem;
    accent-color: var(--sa-survey-accent);
}

.sa-survey .sa-input,
.sa-survey .sa-select,
.sa-survey .sa-textarea {
    font-size: 1rem;
}

.sa-survey .sa-input:focus,
.sa-survey .sa-select:focus,
.sa-survey .sa-textarea:focus {
    border-color: var(--sa-survey-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--sa-survey-accent) 30%, transparent);
}

.sa-survey .sa-btn,
.sa-survey .sa-choice,
.sa-survey .sa-input {
    border-radius: var(--sa-survey-button-radius);
}

.sa-survey .sa-btn-primary {
    background: var(--sa-survey-accent);
    border-color: var(--sa-survey-accent);

    /* Whichever of black or white can be read on the accent. An author who picks a pale
       colour would otherwise get white lettering on cream. */
    color: var(--sa-survey-accent-text);
}

.sa-survey .sa-btn-primary:hover:not(:disabled) {
    filter: brightness(.92);
    background: var(--sa-survey-accent);
    border-color: var(--sa-survey-accent);
    color: var(--sa-survey-accent-text);
}

.sa-survey .sa-hint {
    color: inherit;
    opacity: .7;
}

/* Inside a survey, words that report something take the survey's own text colour, and what
   kind of message it is rides on the words and on a bar beside them. The product's red,
   green and link blue were drawn on whatever background a theme chose: on a dark theme an
   error was 3.18 : 1, the introduction 1.40 : 1 and the report link 3.33 : 1 (WCAG 1.4.3).
   The text colour is the one colour a theme is checked against its background for. */
.sa-survey .sa-intro,
.sa-survey .sa-quiz-passed,
.sa-survey .sa-quiz-failed {
    color: inherit;
}

.sa-survey .sa-error-text,
.sa-survey .validation-message {
    color: inherit;
    font-weight: 600;
    padding-left: .6rem;
    border-left: 3px solid var(--sa-danger);
}

/* Underlined, because a link in the text colour is told apart by nothing else. */
.sa-survey a:not(.sa-btn) {
    color: inherit;
    text-decoration: underline;
}

.sa-survey table {
    width: 100%;
    border-collapse: collapse;
}

.sa-survey table th,
.sa-survey table td {
    padding: .6rem .75rem;
    text-align: center;
}

.sa-survey table th:first-child,
.sa-survey table td:first-child {
    text-align: left;
}

.sa-survey table tbody tr:nth-child(odd) {
    background: rgba(0, 0, 0, .04);
}

.sa-survey-nav {
    display: flex;
    justify-content: space-between;
    gap: var(--sa-space-3);
    margin-top: var(--sa-space-8);
    padding-top: var(--sa-space-6);
    border-top: 1px solid rgba(0, 0, 0, .1);
}

.sa-progress {
    height: 6px;
    background: rgba(0, 0, 0, .1);
    border-radius: 999px;
    overflow: hidden;
    margin-bottom: var(--sa-space-6);
}

.sa-progress-bar {
    height: 100%;
    background: var(--sa-survey-accent);
    transition: width .2s ease;
}

/* Told rather than shown: what an author chose when they asked for a page count. */
.sa-progress-count {
    margin: 0 0 var(--sa-space-6);
    font-size: .875rem;
    opacity: .7;
}

/* Signature capture area for a signature question. */
.sa-signature {
    width: 100%;
    height: 180px;
    border: 1px dashed var(--sa-line-strong);
    border-radius: var(--sa-radius);
    background: #fff;
    touch-action: none;
}

/* ---------------------------------------------------------------------------
   Blazor framework chrome
--------------------------------------------------------------------------- */

#blazor-error-ui {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    padding: .8rem 1.5rem;
    background: var(--sa-warning-bg);
    border-top: 1px solid var(--sa-warning-line);
    color: var(--sa-warning);
    box-shadow: 0 -1px 4px rgba(0, 0, 0, .1);
}

/* A button now, so it can be reached and pressed from a keyboard; drawn as the glyph it was. */
#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 1rem;
    top: .7rem;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
}

.blazor-error-boundary {
    padding: var(--sa-space-4);
    background: var(--sa-danger-bg);
    border: 1px solid var(--sa-danger-line);
    border-radius: var(--sa-radius);
    color: var(--sa-danger);
}

.blazor-error-boundary::after {
    content: "Something went wrong on this part of the page.";
}

.validation-message {
    color: var(--sa-danger);
    font-size: .875rem;
    margin-top: var(--sa-space-1);
    display: block;
}

.invalid {
    border-color: var(--sa-danger) !important;
}

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

@media (max-width: 1100px) {
    .sa-builder {
        grid-template-columns: 1fr;
    }

    .sa-outline {
        display: none;
    }

    .sa-manage {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 900px) {
    .sa-appbar-inner {
        flex-wrap: wrap;
        height: auto;
        padding: var(--sa-space-2) var(--sa-space-4);
        row-gap: 0;
    }

    .sa-appbar-brand {
        height: 2.75rem;
    }

    .sa-appbar-actions {
        margin-left: auto;
    }

    .sa-appbar-nav {
        order: 3;
        width: 100%;
        overflow-x: auto;
        height: auto;
    }

    .sa-appbar-nav a {
        padding: .6rem var(--sa-space-3);
    }

    .sa-main {
        padding: var(--sa-space-6) var(--sa-space-4) var(--sa-space-10);
    }

    .sa-workspace {
        margin: calc(var(--sa-space-6) * -1) calc(var(--sa-space-4) * -1) 0;
    }

    .sa-workspace-header,
    .sa-workspace-body {
        padding-left: var(--sa-space-4);
        padding-right: var(--sa-space-4);
    }

    .sa-workspace-header {
        position: static;
    }

    .sa-workspace-actions {
        margin-left: 0;
    }

    .sa-workspace-body.with-rail {
        grid-template-columns: 1fr;
        gap: var(--sa-space-4);
    }

    .sa-tool-rail {
        position: static;
        flex-direction: row;
        flex-wrap: wrap;
    }

    .sa-tool {
        padding: .5rem .7rem;
    }

    /* Laid out in a row here, so the bar goes underneath rather than disappearing. */
    .sa-tool.active {
        box-shadow: inset 0 -3px 0 var(--sa-brand);
    }

    .sa-auth-card {
        padding: var(--sa-space-6);
    }

    .sa-site-header-inner {
        height: auto;
        padding: var(--sa-space-3) var(--sa-space-4);
        flex-wrap: wrap;
    }
}

/* ---------------------------------------------------------------------------
   Components added alongside the later features
--------------------------------------------------------------------------- */
/* The cookie notice. Pinned to the bottom rather than covering the page: it is a
   question, not a gate, and the page behind it stays usable while it is open. */
.sa-cookie-notice {
    position: sticky;
    bottom: 0;
    z-index: 20;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
    margin: 1rem 0;
    padding: 1rem 1.25rem;
    background: var(--sa-surface-raised);
    border: 1px solid var(--sa-line-strong);
    border-radius: 10px;
    box-shadow: 0 -2px 12px rgba(17, 24, 39, .08);
}

/* What somebody wrote, quoted back: a reported survey's complaint, a respondent's note. */
.sa-quote {
    margin: 0.75rem 0;
    padding: 0.5rem 0 0.5rem 0.9rem;
    border-left: 3px solid var(--sa-line-strong);
    color: var(--sa-ink-muted);
    white-space: pre-wrap;
}


/* The trend bars and the word cloud. */
.sa-trend {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 12rem;
    padding-top: var(--sa-space-4);
    overflow-x: auto;
}

.sa-trend-column {
    display: flex;
    flex: 1 0 1.5rem;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    height: 100%;
    gap: var(--sa-space-1);
}

.sa-trend-bar {
    width: 100%;
    min-height: 2px;
    background: var(--sa-accent);
    border-radius: 2px 2px 0 0;
}

.sa-trend-count {
    font-size: .7rem;
    color: var(--sa-ink-subtle);
}

.sa-word-cloud {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--sa-space-2) var(--sa-space-3);
    padding: var(--sa-space-4) 0;
}

.sa-word {
    line-height: 1.2;
    color: var(--sa-ink-subtle);
}

.sa-word-1 { font-size: .8rem; }
.sa-word-2 { font-size: .9rem; }
.sa-word-3 { font-size: 1rem; }
.sa-word-4 { font-size: 1.1rem; }
.sa-word-5 { font-size: 1.25rem; color: var(--sa-ink); }
.sa-word-6 { font-size: 1.4rem; color: var(--sa-ink); }
.sa-word-7 { font-size: 1.6rem; color: var(--sa-ink); font-weight: 600; }
.sa-word-8 { font-size: 1.8rem; color: var(--sa-accent); font-weight: 600; }
.sa-word-9 { font-size: 2.1rem; color: var(--sa-accent); font-weight: 700; }
.sa-word-10 { font-size: 2.4rem; color: var(--sa-accent); font-weight: 700; }

/* A small colour square beside a brand kit. */
.sa-swatch {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    margin-right: var(--sa-space-2);
    border: 1px solid var(--sa-line);
    border-radius: 3px;
    vertical-align: text-bottom;
}

/* The dashboard grid. */
/* The report builder: a grid of panels, each with its kind in the corner, its buttons
   shown under the pointer, and an editor that opens in place (FR-AN-12). */
.sa-dashboard {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: var(--sa-space-5);
}

.sa-panel {
    display: flex;
    flex-direction: column;
    gap: var(--sa-space-3);
    min-width: 0;
    padding: var(--sa-space-4) var(--sa-space-5);
    background: var(--sa-surface);
    border: 1px solid var(--sa-line);
    border-radius: var(--sa-radius-lg);
    box-shadow: var(--sa-shadow);
}

.sa-panel-head {
    display: flex;
    align-items: flex-start;
    gap: var(--sa-space-3);
}

.sa-panel-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--sa-radius-sm);
    background: var(--sa-brand-light);
    color: var(--sa-brand);
    flex-shrink: 0;
}

.sa-panel-heading {
    flex: 1;
    min-width: 0;
}

.sa-panel-heading h2 {
    margin: 0;
    font-size: 1rem;
    overflow-wrap: anywhere;
}

.sa-panel-heading .sa-hint {
    margin: 0;
}

.sa-panel-actions {
    display: flex;
    gap: .1rem;
    opacity: .4;
    transition: opacity .12s ease;
}

.sa-panel:hover .sa-panel-actions,
.sa-panel:focus-within .sa-panel-actions {
    opacity: 1;
}

.sa-panel-edit {
    padding: var(--sa-space-4);
    background: var(--sa-surface-sunken);
    border: 1px solid var(--sa-line);
    border-radius: var(--sa-radius);
}

.sa-panel-edit .sa-field {
    margin-bottom: var(--sa-space-3);
}

.sa-panel-edit-foot {
    display: flex;
    justify-content: flex-end;
    gap: var(--sa-space-2);
}

.sa-panel-body {
    min-width: 0;
}

.sa-panel-note {
    margin: 0;
    white-space: pre-wrap;
    line-height: 1.6;
}

/* Adding a panel: what it shows is chosen from tiles rather than a drop-down, so the
   six kinds can be seen at once and told apart by their glyphs. */
.sa-kind-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
    gap: var(--sa-space-2);
    margin-bottom: var(--sa-space-4);
}

.sa-kind-tile {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .6rem .75rem;
    border: 1px solid var(--sa-line-strong);
    border-radius: var(--sa-radius);
    background: var(--sa-surface);
    font: inherit;
    font-size: .9rem;
    font-weight: 600;
    color: var(--sa-ink);
    text-align: left;
    cursor: pointer;
    transition: border-color .12s ease, background-color .12s ease;
}

.sa-kind-tile i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: var(--sa-radius-sm);
    background: var(--sa-surface-sunken);
    color: var(--sa-ink-muted);
    flex-shrink: 0;
}

.sa-kind-tile:hover {
    border-color: var(--sa-brand);
}

.sa-kind-tile.selected {
    border-color: var(--sa-brand);
    background: var(--sa-brand-light);
    box-shadow: 0 0 0 2px var(--sa-brand-soft);
}

.sa-kind-tile.selected i {
    background: var(--sa-surface);
    color: var(--sa-brand);
}

/* A row of exclusive choices, for the chart shape. */
.sa-segmented {
    display: inline-flex;
    gap: .15rem;
    padding: .2rem;
    border: 1px solid var(--sa-line);
    border-radius: var(--sa-radius);
    background: var(--sa-surface-sunken);
    flex-wrap: wrap;
}

.sa-segment {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .4rem .7rem;
    border: 0;
    border-radius: var(--sa-radius-sm);
    background: transparent;
    font: inherit;
    font-size: .85rem;
    font-weight: 600;
    color: var(--sa-ink-muted);
    cursor: pointer;
}

.sa-segment:hover {
    color: var(--sa-ink);
}

.sa-segment.selected {
    background: var(--sa-surface);
    color: var(--sa-brand-dark);
    box-shadow: var(--sa-shadow), inset 0 -3px 0 var(--sa-brand);
}

.sa-panel-composer {
    margin-bottom: var(--sa-space-6);
}

.sa-panel-composer-foot {
    display: flex;
    justify-content: flex-end;
    gap: var(--sa-space-2);
    margin-top: var(--sa-space-2);
}

@media (max-width: 900px) {
    .sa-panel {
        grid-column: span 12 !important;
    }
}

/* Rendered help-article body. The Markdown comes back as plain tags, so the readable
   measure and rhythm are set here rather than inline on every element. */
.sa-prose {
  line-height: 1.65;
  max-width: 42rem;
}

.sa-prose h2 {
  font-size: 1.15rem;
  margin: 2rem 0 .5rem;
}

.sa-prose h3 {
  font-size: 1rem;
  margin: 1.5rem 0 .5rem;
}

.sa-prose p,
.sa-prose ul,
.sa-prose ol {
  margin: 0 0 1rem;
}

.sa-prose ul,
.sa-prose ol {
  padding-left: 1.25rem;
}

.sa-prose li {
  margin-bottom: .35rem;
}

.sa-prose code {
  background: var(--sa-surface-sunken);
  border-radius: 4px;
  padding: .1rem .3rem;
  font-size: .9em;
}

.sa-prose pre {
  background: var(--sa-surface-sunken);
  border: 1px solid var(--sa-line);
  border-radius: 6px;
  padding: .75rem 1rem;
  overflow-x: auto;
}

.sa-prose pre code {
  background: none;
  padding: 0;
}

/* The stage a device-width preview sits on, so a narrowed survey reads as a narrow
   window rather than a broken layout (FR-DESIGN-8). */
.sa-preview-stage {
  background: var(--sa-surface-sunken);
  padding: 1.5rem 1rem;
  min-height: 60vh;
}

/* A blank survey laid out for paper (FR-RESP-7). */
.sa-print-toolbar {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  padding: .75rem 1.5rem;
  border-bottom: 1px solid var(--sa-line);
  background: var(--sa-surface);
}

.sa-print {
  max-width: 46rem;
  margin: 0 auto;
  padding: 2rem 1.5rem;
  line-height: 1.5;
}

.sa-print-page {
  margin-bottom: 2rem;
}

.sa-print-question {
  margin-bottom: 1.75rem;
  break-inside: avoid;
}

.sa-print-question-text {
  font-weight: 600;
  margin: 0 0 .5rem;
}

.sa-print-choices {
  list-style: none;
  padding: 0;
  margin: 0;
}

.sa-print-choices li {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin-bottom: .4rem;
}

/* An empty square to tick, drawn rather than a form control: a printed checkbox that a
   browser renders as a widget comes out grey and unusable. */
.sa-print-box {
  display: inline-block;
  width: .85rem;
  height: .85rem;
  border: 1px solid #333;
  flex: none;
}

.sa-print-lines {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  margin-top: .75rem;
}

.sa-print-line {
  display: block;
  border-bottom: 1px solid #bbb;
  height: 0;
}

@media print {
  /* Anything that only makes sense on screen goes: a printed page cannot be clicked. */
  .sa-print-toolbar,
  .sa-preview-banner,
  .sa-sidebar,
  .sa-page-actions,
  #blazor-error-ui {
    display: none !important;
  }

  .sa-print {
    max-width: none;
    padding: 0;
  }

  /* A question split across a page break is hard to answer, so each is kept whole. */
  .sa-print-question {
    page-break-inside: avoid;
  }

  .sa-print-page {
    page-break-after: always;
  }

  .sa-print-page:last-child {
    page-break-after: auto;
  }
}

/* A poll tally (FR-QPF-2). Bars rather than numbers alone: the shape of a result is read
   faster than the figures, and the figures are there beside them for anybody who wants them. */
.sa-poll {
  list-style: none;
  padding: 0;
  margin: 1.5rem 0 0;
}

.sa-poll-row {
  margin-bottom: 1rem;
}

.sa-poll-label {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: .35rem;
}

.sa-poll-track {
  background: var(--sa-surface-sunken);
  border-radius: 999px;
  height: .6rem;
  overflow: hidden;
}

.sa-poll-fill {
  background: var(--sa-survey-accent, var(--sa-brand));
  height: 100%;
  border-radius: 999px;
  transition: width .3s ease;
}

/* Operator banners (FR-ADM-7). Full width and above everything else on the page, because
   an announcement that has to be scrolled to is one nobody reads. */
/* One card in the theme gallery: the theme itself, and the way to start your own from it. */
.sa-theme-card {
  display: flex;
  flex-direction: column;
  gap: .35rem;
}

.sa-theme-card .sa-theme {
  flex: 1;
}

.sa-theme-start {
  align-self: stretch;
}

/* The themes an account made for itself, on the style screen. */
.sa-theme-list {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  margin-top: 1rem;
}

.sa-theme-row {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .5rem .75rem;
  border: 1px solid var(--sa-line);
  border-radius: var(--sa-radius);
}

.sa-theme-current {
  border-color: var(--sa-brand);
  box-shadow: inset 3px 0 0 var(--sa-brand);
}

.sa-theme-swatch {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 999px;
  border: 1px solid rgba(0, 0, 0, .15);
  flex: none;
}

/* How a respondent did on a quiz, once they have finished it. */
.sa-quiz-result {
  margin: 1.5rem 0;
  padding: 1rem 1.25rem;
  border: 1px solid var(--sa-line);
  border-radius: var(--sa-radius);
  text-align: center;
}

.sa-quiz-score {
  font-size: 1.25rem;
  font-weight: 600;
  margin: 0 0 .25rem;
}

.sa-quiz-passed {
  color: var(--sa-success);
  font-weight: 600;
}

.sa-quiz-failed {
  color: var(--sa-danger);
  font-weight: 600;
}

/* The line an author writes about one option, under it in the question editor. */
.sa-option-feedback {
  margin: -.25rem 0 .5rem 1.75rem;
  width: calc(100% - 1.75rem);
  font-size: .9rem;
}

/* What the author wrote about the answers somebody gave, under their quiz score. */
.sa-quiz-notes {
  margin: 1.5rem 0;
  text-align: left;
}

.sa-quiz-notes dt {
  display: flex;
  gap: .5rem;
  justify-content: space-between;
  font-weight: 600;
  margin-top: 1rem;
}

.sa-quiz-notes dd {
  margin: .25rem 0 0;
}

.sa-quiz-notes dd p {
  margin: .15rem 0 0;
}

/* Who is really here, while an operator is acting as somebody else. Loud on purpose and
   with no way to dismiss it: the danger is forgetting. */
.sa-impersonation {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .75rem 1.5rem;
  background: #7c2d12;
  color: #fff;
  font-size: .95rem;
}

.sa-impersonation form {
  margin-left: auto;
}

.sa-announcement {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  padding: .75rem 1.5rem;
  border-bottom: 1px solid var(--sa-line);
  font-size: .95rem;
}

.sa-announcement-info {
  background: #eff6ff;
  color: #1e3a8a;
}

.sa-announcement-warning {
  background: #fffbeb;
  color: #78350f;
}

.sa-announcement-critical {
  background: #fee2e2;
  color: #7f1d1d;
}

/* ---------------------------------------------------------------------------
   Application bar: overflow menu and the notification bell
--------------------------------------------------------------------------- */

.sa-appbar-more {
    position: relative;
    display: flex;
    align-items: center;
}

.sa-appbar-more summary {
    display: inline-flex;
    align-items: center;
    gap: var(--sa-space-2);
    padding: .45rem .85rem;
    border-radius: 999px;
    color: var(--sa-ink-muted);
    font-weight: 600;
    font-size: .9rem;
    list-style: none;
    cursor: pointer;
    user-select: none;
}

.sa-appbar-more summary::-webkit-details-marker {
    display: none;
}

.sa-appbar-more summary i {
    font-size: .7rem;
}

.sa-appbar-more summary:hover,
.sa-appbar-more[open] summary {
    color: var(--sa-ink);
    background: var(--sa-surface-sunken);
}

.sa-appbar-menu {
    position: absolute;
    top: calc(100% + .35rem);
    left: 0;
    min-width: 13rem;
    padding: var(--sa-space-2);
    background: var(--sa-surface);
    border: 1px solid var(--sa-line);
    border-radius: var(--sa-radius);
    box-shadow: var(--sa-shadow-pop);
    display: flex;
    flex-direction: column;
    gap: .15rem;
    z-index: 40;
}

.sa-appbar-nav .sa-appbar-menu a {
    color: var(--sa-ink);
    padding: .5rem .75rem;
    border: 0;
    border-radius: var(--sa-radius-sm);
    font-weight: 500;
}

.sa-appbar-nav .sa-appbar-menu a i {
    display: inline-block;
    width: 1.1rem;
    color: var(--sa-ink-subtle);
}

.sa-appbar-nav .sa-appbar-menu a:hover {
    background: var(--sa-surface-sunken);
    color: var(--sa-ink);
}

.sa-appbar-nav .sa-appbar-menu a.active {
    background: var(--sa-brand-light);
    color: var(--sa-brand-dark);
}

.sa-appbar-bell a {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 999px;
    color: var(--sa-ink-muted);
    font-size: 1.05rem;
    text-decoration: none;
}

.sa-appbar-bell a:hover,
.sa-appbar-bell a.active {
    color: var(--sa-ink);
    background: var(--sa-surface-sunken);
}

.sa-appbar-bell a > span:not(.sa-badge) {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

.sa-appbar-bell .sa-badge {
    position: absolute;
    top: -.15rem;
    right: -.25rem;
    padding: 0 .35rem;
    font-size: .65rem;
    line-height: 1.1rem;
    background: var(--sa-accent);
    color: var(--sa-ink);
    border-color: var(--sa-surface);
}

@media (max-width: 900px) {
    .sa-appbar-more summary {
        padding: .6rem var(--sa-space-3);
    }
}

/* A question's answers drawn as SVG (FR-AN-1, FR-AN-11). Server-rendered rather than drawn
   by a library: it needs no client script, it prints, and it is the same markup somebody can
   save to a file. The table beside it is what a screen reader reads. */
.sa-chart {
  display: block;
  max-width: 32rem;
  margin: 0 0 1rem;
}

/* A slider question (FR-Q-6). The number is beside the handle rather than left to it:
   a slider with no figure cannot be read precisely by anybody. */
.sa-slider {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.sa-range {
  flex: 1;
  max-width: 28rem;
}

.sa-range-value {
  min-width: 3rem;
  font-weight: 600;
  text-align: right;
}

/*
  Eight class names the markup asked for and this file never answered. A class with no
  rule is not an error anywhere -- the page renders, the build passes, and the element
  simply has no styling, which is only visible to somebody looking at that screen. Two
  of them are on the page respondents see. StyleReachTests fails the build if a ninth
  appears.
*/

/* A checkbox and its wording on one line, on the analysis screens. Its cousin
   .sa-choice is the respondent's version, which is padded for a touch target;
   this one sits in a toolbar and should not be. */
.sa-check {
    display: inline-flex;
    align-items: center;
    gap: var(--sa-space-2);
    cursor: pointer;
    line-height: 1.4;
}

/* A stack of authored options in the question editor. */
.sa-options {
    display: flex;
    flex-direction: column;
    gap: var(--sa-space-2);
}

/* An input in a table cell or beside a control, where the full-width default would
   push everything beside it off the row. */
.sa-input-sm {
    width: auto;
    padding: .3rem .5rem;
    font-size: .875rem;
}

/* A label standing on its own rather than wrapping its field. */
.sa-label {
    display: block;
    font-weight: 600;
    font-size: .85rem;
    color: var(--sa-ink-muted);
    margin-bottom: .25rem;
}

/* A line of buttons in running text, rather than a toolbar above a table. */
.sa-actions {
    display: flex;
    gap: var(--sa-space-3);
    flex-wrap: wrap;
    align-items: center;
}

/* The single sign-on form under the password form on the sign-in page. */
.sa-auth-sso {
    margin-top: var(--sa-space-4);
    padding-top: var(--sa-space-4);
    border-top: 1px solid var(--sa-line);
}

/* What a respondent reads before the first question (FR-OPT-5). The element carries
   white-space:pre-wrap inline because the text is authored with its own line breaks;
   what was missing was everything else about how it sits on the page. */
.sa-intro {
    margin-bottom: var(--sa-space-6);
    color: var(--sa-ink);
    line-height: 1.6;
}

/* The author's logo above their survey (FR-STYLE-2). Alignment comes from the survey's
   own setting, written inline; the spacing around it belongs here. */
.sa-survey-logo {
    margin-bottom: var(--sa-space-4);
}

/* What a document turned into, before anybody agrees to keep it. Numbered, because the
   order questions arrive in is part of what somebody is checking. */
.sa-import-preview {
    margin: 0;
    padding-left: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: var(--sa-space-4);
}

.sa-import-preview ul {
    margin: .25rem 0 0;
    padding-left: 1.25rem;
    color: var(--sa-ink-muted);
}

/* ---------------------------------------------------------------------------
   Forced colours: Windows High Contrast and anything like it (WCAG 1.4.11, 2.4.7)

   The browser replaces every colour an author set with the reader's own palette and drops
   box-shadows and most backgrounds. Anything drawn only with a background or a shadow --
   the switch and its focus ring, a chosen star, a progress bar, the page somebody is on in
   a navigation -- was left with nothing to see. These give each a system colour, which is
   the only kind this mode keeps.
--------------------------------------------------------------------------- */
@media (forced-colors: active) {
    .sa-switch span {
        border: 1px solid ButtonText;
        background: Canvas;
    }

    .sa-switch span::after {
        background: ButtonText;
        box-shadow: none;
    }

    .sa-switch input:checked + span {
        border-color: Highlight;
        background: Highlight;
    }

    .sa-switch input:checked + span::after {
        background: HighlightText;
    }

    .sa-switch input:focus-visible + span {
        outline: 2px solid Highlight;
        outline-offset: 2px;
    }

    /* The arrow is a picture drawn in the product's ink and disappears on a dark palette,
       so the select goes back to the browser's own. */
    .sa-select {
        appearance: auto;
        background-image: none;
        padding-right: .75rem;
    }

    /* A chosen star and an unchosen one differed only in colour, and this mode makes every
       glyph one colour. Keeping two system colours apart keeps the answer visible. */
    .sa-shape {
        forced-color-adjust: none;
        color: CanvasText;
    }

    .sa-shape:hover,
    .sa-shape-on {
        color: Highlight;
    }

    .sa-progress-bar,
    .sa-poll-fill,
    .sa-trend-bar {
        forced-color-adjust: none;
        background: Highlight;
    }

    /* The heat map's shading is the data, written inline per cell. */
    .sa-heat-cell {
        forced-color-adjust: none;
    }

    /* The page somebody is on, and the chosen item in a set, were shown by a tint. */
    .sa-appbar-nav a.active,
    .sa-side-nav a.active,
    .sa-tool.active,
    .sa-stage.active,
    .sa-segment.selected {
        outline: 2px solid Highlight;
        outline-offset: -2px;
    }

    .sa-tab.active {
        border-bottom-color: Highlight;
    }
}