/* ─────────────────────────────────────────────────────────────
   survey-admin.css — admin chrome design system
   Reusable across any admin page in the Evaluace platform.
   Pairs with tokens.css.
   ───────────────────────────────────────────────────────────── */

/* ── Frame ─────────────────────────────────────── */
.sa-frame {
  font-family: var(--font-body);
  color: var(--ink-strong);
  background: var(--ground);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01", "cv11";
  box-sizing: border-box;
  min-width: 0;
}
.sa-frame *, .sa-frame *::before, .sa-frame *::after { box-sizing: border-box; }
.sa-frame button { font-family: inherit; cursor: pointer; }
.sa-frame a { color: inherit; text-decoration: none; }

/* ── Tier 1 · Utility bar (brand + platform menu + user) ── */
.sa-utility {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 12px 32px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}
.sa-brand { display: flex; align-items: center; gap: 12px; }
.sa-brand-mark {
  width: 22px; height: 22px; border-radius: 999px;
  background: oklch(0.22 0.04 255);
  color: oklch(0.98 0.003 80);
  font-family: var(--font-display); font-style: italic;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px; line-height: 1;
}
.sa-brand-name {
  font-family: var(--font-display);
  font-size: 16px;
  letter-spacing: -0.01em;
  color: var(--ink-strong);
}
.sa-brand-divider { width: 1px; height: 18px; background: var(--line); }
.sa-brand-product {
  font-family: var(--font-display);
  font-size: 18px;
  letter-spacing: -0.01em;
  color: var(--ink-strong);
}
.sa-platform-menu {
  display: flex;
  align-items: center;
  gap: 2px;
}
.sa-platform-link {
  font-size: 13px;
  padding: 6px 10px;
  color: var(--ink-muted);
  border-bottom: 2px solid transparent;
  cursor: pointer;
}
.sa-platform-link.is-active {
  color: var(--ink-strong);
  font-weight: 600;
  border-bottom-color: var(--accent);
}
.sa-utility-right { display: flex; align-items: center; gap: 20px; }
.sa-search-btn {
  width: 32px; height: 32px;
  border: 1px solid var(--line);
  background: var(--ground);
  color: var(--ink-muted);
  display: inline-flex; align-items: center; justify-content: center;
}
.sa-user { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.sa-avatar {
  width: 28px; height: 28px; border-radius: 999px;
  background: oklch(0.62 0.10 28);
}
.sa-user-name { font-size: 13px; color: var(--ink-body); }

/* ── Tier 2 · Company bar ─────────────────────────── */
.sa-company {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 32px;
  min-height: 48px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
}
.sa-company-name {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 0;
  background: transparent;
  border: none;
  margin-right: 20px;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 500;
  color: var(--ink-strong);
  letter-spacing: -0.005em;
  cursor: pointer;
  white-space: nowrap;
  text-align: left;
}
.sa-divider { width: 1px; height: 18px; background: var(--line); margin-right: 8px; }
.sa-company-tab {
  padding: 0 12px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  font-size: 13px;
  color: var(--ink-muted);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  cursor: pointer;
}
.sa-company-tab.is-active {
  color: var(--ink-strong);
  font-weight: 600;
  border-bottom-color: var(--accent);
}

/* ── Tier 3 · Survey header ──────────────────────── */
.sa-survey {
  padding: 24px 32px 0;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.sa-survey-titles {
  display: flex; align-items: baseline; gap: 14px; margin-bottom: 6px;
  flex-wrap: wrap;
}
.sa-survey-name {
  white-space: nowrap;
}
.sa-survey-name {
  display: inline-flex; align-items: baseline; gap: 10px;
  background: transparent; border: none; padding: 0;
  font-family: var(--font-display);
  font-size: 26px;
  letter-spacing: -0.018em;
  color: var(--ink-strong);
  cursor: pointer;
}
.sa-survey-dash {
  color: var(--ink-subtle);
  font-size: 22px;
  font-weight: 200;
}
.sa-survey-page {
  font-family: var(--font-display);
  font-size: 22px;
  color: var(--ink-body);
  letter-spacing: -0.012em;
}
.sa-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  padding: 3px 8px;
  background: oklch(0.96 0.07 155);
  color: oklch(0.34 0.12 155);
  align-self: center;
}
.sa-status::before {
  content: ""; width: 6px; height: 6px; border-radius: 999px;
  background: oklch(0.55 0.18 155);
}
.sa-survey-meta {
  display: flex; gap: 24px; flex-wrap: wrap;
  font-size: 13px; color: var(--ink-muted);
  margin-bottom: 16px;
}
.sa-survey-meta-right { margin-left: auto; font-family: var(--font-mono); }
.sa-tabs { display: flex; gap: 4px; flex-wrap: wrap; }
.sa-tab {
  padding: 12px 14px;
  font-size: 13px;
  color: var(--ink-muted);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  cursor: pointer;
}
.sa-tab.is-active {
  color: var(--ink-strong);
  font-weight: 600;
  border-bottom-color: var(--accent);
}

/* ── Caret SVG ──────────────────────────────────── */
.sa-caret {
  width: 9px; height: 9px;
  display: inline-block;
}
.sa-caret::before {
  content: "";
  display: block;
  width: 6px; height: 6px;
  border-right: 1.4px solid currentColor;
  border-bottom: 1.4px solid currentColor;
  transform: rotate(45deg);
  margin: 0 auto;
}

/* ── Page body — Questions tab ──────────────────── */
.sa-questions {
  padding: 28px 32px 48px;
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 28px;
}
.sa-questions-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 18px; gap: 12px; flex-wrap: wrap;
}
.sa-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.sa-actions { display: flex; gap: 8px; }
.sa-btn {
  height: 32px;
  padding: 0 12px;
  border: 1px solid var(--line);
  background: var(--surface);
  font-size: 13px;
  color: var(--ink-body);
  cursor: pointer;
}
.sa-btn-primary {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 500;
}
.sa-btn-dashed {
  height: 38px;
  padding: 0 16px;
  border: 1px dashed var(--line-strong);
  background: transparent;
  font-size: 13px;
  color: var(--ink-body);
  cursor: pointer;
}

/* ── Question list card ─────────────────────────── */
.sa-list { background: var(--surface); border: 1px solid var(--line); }
.sa-section-head {
  padding: 14px 20px;
  background: var(--ground-alt);
  border-bottom: 1px solid var(--line);
  border-top: 1px solid var(--line);
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}
.sa-section-head:first-child { border-top: none; }
.sa-section-num {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-muted);
  letter-spacing: 0.08em;
}
.sa-section-title {
  font-family: var(--font-display);
  font-size: 16px;
  color: var(--ink-strong);
  letter-spacing: -0.005em;
}
.sa-section-count { font-size: 11px; color: var(--ink-muted); }

.sa-cond-add {
  margin-left: auto;
  font-size: 11px;
  color: var(--ink-subtle);
  cursor: pointer;
}
.sa-cond-chip {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  padding: 3px 9px;
  background: var(--logic-soft);
  color: var(--logic);
  border: 1px solid color-mix(in oklab, var(--logic) 25%, transparent);
  border-radius: 999px;
}
.sa-cond-chip-inline {
  margin-left: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  padding: 3px 9px;
  background: var(--logic-soft);
  color: var(--logic);
  border: 1px solid color-mix(in oklab, var(--logic) 25%, transparent);
  border-radius: 999px;
  line-height: 1.4;
}
.sa-cond-edit { font-size: 10px; opacity: 0.7; margin-left: 2px; }
.sa-cond-icon {
  width: 11px; height: 11px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M3 1.5v3a2 2 0 0 0 2 2h4M9 4.5l-2-2.5M9 4.5L7 7' stroke='black' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round' fill='none'/></svg>") no-repeat center / contain;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M3 1.5v3a2 2 0 0 0 2 2h4M9 4.5l-2-2.5M9 4.5L7 7' stroke='black' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round' fill='none'/></svg>") no-repeat center / contain;
}

/* ── Question card ──────────────────────────────── */
.sa-q {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 14px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--line);
  border-left: 3px solid transparent;
}
.sa-q.is-selected { background: var(--ground); }
.sa-q-handle {
  color: var(--ink-subtle);
  cursor: grab;
  font-size: 14px;
  padding-top: 2px;
  user-select: none;
}
.sa-q-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.sa-q-id {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-muted);
}
.sa-type-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 2px;
}
.sa-type-chip::before {
  content: "";
  width: 6px; height: 6px;
  background: currentColor;
}
.sa-q-required { font-size: 11px; color: var(--ink-body); }
.sa-q-optional { font-size: 11px; color: var(--ink-subtle); }
.sa-q-lang {
  margin-left: auto;
  font-size: 11px;
  color: var(--ink-muted);
}
.sa-q-label {
  font-size: 15px;
  color: var(--ink-strong);
  font-weight: 500;
  margin-bottom: 4px;
  line-height: 1.4;
}
.sa-q-helper {
  font-size: 13px;
  color: var(--ink-muted);
  margin-bottom: 10px;
  line-height: 1.4;
}
.sa-q-preview {
  margin-top: 10px;
  padding: 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 2px;
}

/* — Question type accent borders on selected — */
.sa-q.is-selected.t-audio       { border-left-color: var(--qt-audio); }
.sa-q.is-selected.t-choice,
.sa-q.is-selected.t-screening   { border-left-color: var(--qt-choice); }
.sa-q.is-selected.t-scale       { border-left-color: var(--qt-scale); }
.sa-q.is-selected.t-longtext    { border-left-color: var(--qt-text); }
.sa-q.is-selected.t-demographic { border-left-color: var(--qt-demographic); }
.sa-q.is-selected.t-consent     { border-left-color: var(--qt-consent); }

/* — Type chip color modifiers — */
.tc-choice      { background: var(--qt-choice-soft);      color: var(--qt-choice); }
.tc-scale       { background: var(--qt-scale-soft);       color: var(--qt-scale); }
.tc-audio       { background: var(--qt-audio-soft);       color: var(--qt-audio); }
.tc-text        { background: var(--qt-text-soft);        color: var(--qt-text); }
.tc-demographic { background: var(--qt-demographic-soft); color: var(--qt-demographic); }
.tc-consent     { background: var(--qt-consent-soft);     color: var(--qt-consent); }

/* ── Mini previews inside question cards ───────── */
.sa-mini-radio {
  display: flex; flex-direction: column; gap: 6px;
}
.sa-mini-radio label {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--ink-body);
}
.sa-mini-radio .dot {
  width: 14px; height: 14px; border-radius: 999px;
  border: 1.5px solid var(--line-strong);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface);
}
.sa-mini-radio .dot.is-on::after {
  content: "";
  width: 6px; height: 6px; border-radius: 999px;
  background: var(--qt-choice);
}
.sa-mini-audio {
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: 2px;
  overflow: hidden;
}
.sa-mini-audio .top {
  min-height: 56px;
  padding: 10px 12px;
  color: var(--ink-subtle);
  font-style: italic;
  font-size: 13px;
}
.sa-mini-audio .bot {
  border-top: 1px solid var(--line);
  padding: 8px 12px;
  display: flex; align-items: center; gap: 10px;
  background: var(--qt-audio-soft);
}
.sa-mini-audio .rec {
  width: 22px; height: 22px; border-radius: 999px;
  background: var(--qt-audio);
  color: white;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 10px;
}
.sa-mini-audio .time {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-muted);
  margin-left: auto;
}
.sa-mini-scale {
  display: flex; gap: 4px;
}
.sa-mini-scale .cell {
  flex: 1; height: 32px;
  border: 1px solid var(--line);
  background: var(--surface);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px; color: var(--ink-body);
}
.sa-mini-scale-legend {
  display: flex; justify-content: space-between;
  margin-top: 4px;
  font-size: 11px; color: var(--ink-muted);
}
.sa-mini-demo {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
}
.sa-mini-demo-row {
  font-size: 11px; color: var(--ink-muted); margin-bottom: 3px;
}
.sa-mini-demo-input {
  padding: 6px 9px;
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: 2px;
  font-size: 12px;
  color: var(--ink-subtle);
}
.sa-mini-consent {
  display: flex; flex-direction: column; gap: 6px;
}
.sa-mini-consent label {
  display: flex; align-items: flex-start; gap: 8px;
  font-size: 13px; color: var(--ink-body);
}
.sa-mini-consent .box {
  width: 14px; height: 14px;
  border: 1.5px solid var(--line-strong);
  background: var(--surface);
  flex-shrink: 0; margin-top: 2px;
}
.sa-mini-consent .box.is-on { background: var(--qt-consent); }
.sa-mini-consent .text { line-height: 1.4; }

/* ── Inspector ──────────────────────────────────── */
.sa-inspector {
  display: flex; flex-direction: column;
}
.sa-inspector-card {
  background: var(--surface);
  border: 1px solid var(--line);
}
.sa-inspector-head {
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  display: flex; align-items: center; gap: 10px;
}
.sa-inspector-head-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.sa-inspector-head-id {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-strong);
  margin-left: auto;
}
.sa-block {
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
}
.sa-block:last-child { border-bottom: none; }
.sa-block-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 8px;
}
.sa-type-pick {
  padding: 10px 12px;
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 500;
  border-radius: 2px;
}
.sa-type-pick::before {
  content: "";
  width: 8px; height: 8px;
  background: currentColor;
}
.sa-type-pick .sa-caret { margin-left: auto; }
.sa-type-grid {
  margin-top: 8px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 4px;
}
.sa-type-grid button {
  padding: 6px 4px;
  font-size: 10px;
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink-muted);
  cursor: pointer;
}
.sa-type-grid button.is-active {
  background: var(--qt-audio-soft);
  color: var(--qt-audio);
}
.sa-input-shown {
  padding: 8px 10px;
  border: 1px solid var(--ink-strong);
  background: var(--surface);
  font-size: 14px;
  color: var(--ink-strong);
  border-radius: 2px;
}
.sa-input-faded {
  padding: 8px 10px;
  border: 1px solid var(--line);
  background: var(--surface);
  font-size: 13px;
  color: var(--ink-body);
  min-height: 36px;
  border-radius: 2px;
}
.sa-setting-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 0;
  font-size: 13px;
}
.sa-setting-row > span:first-child { color: var(--ink-body); }
.sa-toggle {
  width: 30px; height: 16px; border-radius: 999px;
  background: var(--line-strong);
  position: relative;
  display: inline-block;
}
.sa-toggle::after {
  content: "";
  position: absolute;
  top: 2px; left: 2px;
  width: 12px; height: 12px;
  border-radius: 999px;
  background: var(--surface);
}
.sa-toggle.is-on { background: var(--accent); }
.sa-toggle.is-on::after { left: 16px; }
.sa-setting-num {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-strong);
}

/* — Collapsible — */
.sa-collapse {
  border-bottom: 1px solid var(--line);
}
.sa-collapse:last-child { border-bottom: none; }
.sa-collapse-head {
  width: 100%;
  padding: 14px 18px;
  background: transparent;
  border: none;
  display: flex; align-items: center; justify-content: space-between;
  text-align: left;
  cursor: pointer;
}
.sa-collapse-left { display: flex; align-items: center; gap: 10px; }
.sa-collapse-toggle {
  font-family: var(--font-mono);
  font-size: 14px;
  line-height: 1;
  width: 14px; text-align: center;
  color: var(--ink-muted);
}
.sa-collapse-title {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.sa-collapse-meta { font-size: 11px; color: var(--ink-subtle); }
.sa-collapse-body { padding: 0 18px 14px; display: none; }
.sa-collapse.is-open .sa-collapse-body { display: block; }

/* logic / cond editor inside collapse */
.sa-cond-edit-card {
  padding: 10px;
  background: var(--logic-soft);
  border: 1px solid color-mix(in oklab, var(--logic) 25%, transparent);
  border-radius: 2px;
  margin-bottom: 8px;
}
.sa-cond-edit-eyebrow {
  font-size: 11px;
  color: var(--logic);
  font-family: var(--font-mono);
  letter-spacing: 0.06em;
  margin-bottom: 6px;
}
.sa-cond-row {
  display: flex; align-items: center; gap: 4px;
  font-size: 13px; color: var(--ink-body); flex-wrap: wrap;
}
.sa-cond-pill-q {
  padding: 2px 6px;
  background: var(--qt-choice-soft);
  color: var(--qt-choice);
  font-family: var(--font-mono);
  font-size: 11px;
  border-radius: 2px;
}
.sa-cond-pill-val {
  padding: 2px 6px;
  background: var(--surface);
  border: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 11px;
  border-radius: 2px;
}
.sa-cond-add-btn {
  width: 100%;
  padding: 8px;
  border: 1px dashed var(--line-strong);
  background: transparent;
  font-size: 12px;
  color: var(--ink-muted);
  cursor: pointer;
}
.sa-tr-row {
  display: flex; justify-content: space-between;
  font-size: 13px;
}
.sa-tr-row > span:first-child { color: var(--ink-body); }
.sa-tr-source { font-size: 11px; color: var(--success); }
.sa-tr-draft  { font-size: 11px; color: var(--warn); }
.sa-tr-add {
  margin-top: 4px;
  padding: 6px;
  border: 1px dashed var(--line-strong);
  background: transparent;
  font-size: 12px;
  color: var(--ink-muted);
  cursor: pointer;
}

/* ── Preview tab — split layout ───────────────── */
.sa-split {
  padding: 28px 32px 48px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
}
.sa-split-card {
  background: var(--surface);
  border: 1px solid var(--line);
  display: flex; flex-direction: column;
  min-width: 0;
}
.sa-split-head {
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  display: flex; align-items: center; gap: 10px;
  background: var(--surface);
}
.sa-split-num {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--ink-muted);
  padding: 3px 8px;
  background: var(--ground);
  border: 1px solid var(--line);
}
.sa-split-title {
  font-family: var(--font-display);
  font-size: 18px;
  color: var(--ink-strong);
  letter-spacing: -0.01em;
}
.sa-split-sub {
  margin-left: auto;
  font-size: 12px; color: var(--ink-muted);
}
.sa-split-body {
  background: var(--ground-alt);
  padding: 24px;
  display: flex; justify-content: center;
  flex: 1;
}

/* Branded mini-form inside the split (uses tokens.css [data-theme]) */
.sa-brand-form {
  width: 100%;
  background: var(--brand-ground);
  color: var(--brand-ink);
  font-family: var(--brand-body-font);
  border: 1px solid var(--brand-line);
  display: flex; flex-direction: column;
  min-height: 540px;
}
.sa-brand-form h1, .sa-brand-form h2, .sa-brand-form h3 {
  font-family: var(--brand-heading-font);
  letter-spacing: -0.018em;
  margin: 0;
  color: var(--brand-ink);
}
.sa-brand-top {
  padding: 18px 24px 14px;
  border-bottom: 1px solid var(--brand-line);
}
.sa-brand-top-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.sa-brand-logo {
  display: flex; align-items: center; gap: 10px;
}
.sa-brand-logo-mark {
  width: 32px; height: 32px;
  background: var(--brand-primary);
  color: var(--brand-primary-ink);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--brand-heading-font);
  font-size: 14px;
  letter-spacing: 0.02em;
}
.sa-brand-logo-text {
  font-family: var(--brand-heading-font);
  font-size: 15px;
  color: var(--brand-ink);
}
.sa-brand-logo-sub {
  font-size: 11px; color: var(--brand-ink-muted);
  font-family: var(--brand-body-font);
}
.sa-brand-step {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand-ink-muted);
}
.sa-brand-rail {
  height: 2px;
  background: var(--brand-line);
  position: relative;
}
.sa-brand-rail > i {
  position: absolute; left: 0; top: 0; bottom: 0;
  background: var(--brand-accent);
  width: 33%;
}
.sa-brand-body {
  padding: 32px 28px;
  flex: 1;
  display: flex; flex-direction: column; gap: 22px;
}
.sa-brand-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand-ink-muted);
}
.sa-brand-h1 {
  font-size: 30px;
  line-height: 1.1;
  font-weight: 400;
}
.sa-brand-prompt {
  font-size: 17px;
  line-height: 1.4;
  font-weight: 500;
  color: var(--brand-ink);
}
.sa-brand-helper {
  font-size: 14px;
  color: var(--brand-ink-muted);
  line-height: 1.5;
}
.sa-brand-audio {
  border: 1px solid var(--brand-line);
  border-radius: var(--brand-corner);
  background: var(--brand-ground-alt);
  overflow: hidden;
}
.sa-brand-audio-body {
  padding: 18px 18px 26px;
  font-size: 14px;
  color: var(--brand-ink-muted);
  font-style: italic;
  min-height: 80px;
}
.sa-brand-audio-bar {
  border-top: 1px solid var(--brand-line);
  padding: 12px 18px;
  display: flex; align-items: center; gap: 14px;
}
.sa-brand-rec {
  width: 32px; height: 32px;
  border-radius: 999px;
  background: var(--brand-accent);
  color: white;
  display: inline-flex; align-items: center; justify-content: center;
}
.sa-brand-rec-text {
  font-size: 13px;
  color: var(--brand-ink);
}
.sa-brand-rec-sub {
  font-size: 11px;
  color: var(--brand-ink-muted);
}
.sa-brand-time {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--brand-ink-muted);
}
.sa-brand-foot {
  border-top: 1px solid var(--brand-line);
  padding: 14px 24px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  background: var(--brand-ground);
}
.sa-brand-back {
  font-size: 13px;
  color: var(--brand-ink-muted);
  background: transparent; border: none; cursor: pointer;
}
.sa-brand-saved {
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--brand-ink-muted);
}
.sa-brand-cta {
  height: 44px;
  padding: 0 22px;
  background: var(--brand-accent);
  color: var(--brand-accent-ink);
  border: none;
  font: 500 14px/1 var(--brand-body-font);
  letter-spacing: 0.005em;
  border-radius: var(--brand-corner);
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 10px;
}
.sa-brand-cta::after {
  content: "→";
  font-size: 14px;
}

/* v2 typographic tweaks: bigger H1, slab-feel via heading font */
.sa-brand-form[data-preset="v2"] .sa-brand-h1 {
  font-size: 38px;
  font-style: italic;
}

/* ─── Responder full-form structure (intro + multi-question) ────
   Used inside the Preview tab. Same HTML for stepper and scroll;
   the preset just changes data-flow on the wrapper. */
.sa-rform {
  width: 100%;
  background: var(--brand-ground);
  color: var(--brand-ink);
  font-family: var(--brand-body-font);
}
.sa-rform-step { display: none; }
.sa-rform[data-flow="stepper"] .sa-rform-step.is-active,
.sa-rform[data-flow="scroll"]  .sa-rform-step { display: block; }
.sa-rform[data-flow="scroll"]  .sa-rform-step + .sa-rform-step {
  border-top: 1px solid var(--brand-line);
}

/* Big-typed responder eyebrow / question label */
.sa-rform-section-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.10em; text-transform: uppercase;
  color: var(--brand-ink-muted);
  margin-bottom: 14px;
}
.sa-rform-q {
  padding: 56px 28px 64px;
  display: flex; flex-direction: column; gap: 22px;
}
.sa-rform-q-num {
  font-family: var(--font-mono);
  font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--brand-ink-muted);
}
.sa-rform-q-label {
  font-family: var(--brand-heading-font);
  font-size: 32px;
  line-height: 1.1;
  letter-spacing: -0.018em;
  color: var(--brand-ink);
  font-weight: 400;
  margin: 0;
}
.sa-rform-q-helper {
  font-size: 15px;
  line-height: 1.5;
  color: var(--brand-ink-muted);
  max-width: 60ch;
}

/* Intro screen */
.sa-rform-intro {
  padding: 80px 28px 64px;
  display: flex; flex-direction: column; gap: 24px;
}
.sa-rform-intro-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.10em; text-transform: uppercase;
  color: var(--brand-ink-muted);
}
.sa-rform-intro-h1 {
  font-family: var(--brand-heading-font);
  font-size: clamp(40px, 5vw, 68px);
  line-height: 1.02;
  letter-spacing: -0.025em;
  color: var(--brand-ink);
  font-weight: 400;
  margin: 0;
  max-width: 16ch;
}
.sa-rform-intro-h1 em {
  font-style: italic;
  color: var(--brand-accent);
  font-weight: 400;
}
.sa-rform-intro-lead {
  font-size: 18px;
  line-height: 1.5;
  color: var(--brand-ink);
  max-width: 60ch;
}
.sa-rform-intro-meta {
  display: flex; gap: 24px; flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--brand-ink-muted);
  padding-top: 12px;
  border-top: 1px solid var(--brand-line);
  max-width: 600px;
}
.sa-rform-intro-meta strong {
  color: var(--brand-ink);
  font-weight: 500;
}
.sa-rform-intro-actions {
  margin-top: 20px;
  display: flex; gap: 18px; align-items: center; flex-wrap: wrap;
}
.sa-rform-intro-cta {
  height: 56px;
  padding: 0 32px;
  background: var(--brand-accent);
  color: var(--brand-accent-ink);
  border: none;
  font: 500 16px/1 var(--brand-body-font);
  letter-spacing: 0.005em;
  border-radius: var(--brand-corner);
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 12px;
  transition: filter 120ms, transform 120ms;
}
.sa-rform-intro-cta::after { content: "→"; font-size: 16px; }
.sa-rform-intro-cta:hover  { filter: brightness(1.05); }
.sa-rform-intro-cta:active { transform: translateY(1px); }
.sa-rform-intro-cta:focus-visible {
  outline: 2px solid var(--brand-ink);
  outline-offset: 3px;
}
.sa-rform-intro-note {
  font-size: 13px;
  color: var(--brand-ink-muted);
}

/* Responder radio (Q1: single choice) */
.sa-rradio { display: flex; flex-direction: column; gap: 10px; }
.sa-rradio label {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 20px;
  border: 1px solid var(--brand-line);
  border-radius: var(--brand-corner);
  cursor: pointer;
  font-size: 17px;
  color: var(--brand-ink);
  transition: border-color 120ms, background 120ms;
}
.sa-rradio label:hover { border-color: var(--brand-accent); }
.sa-rradio input { position: absolute; opacity: 0; pointer-events: none; }
.sa-rradio .dot {
  width: 18px; height: 18px; border-radius: 999px;
  border: 1.5px solid var(--brand-line);
  flex-shrink: 0;
  position: relative;
  transition: border-color 120ms;
}
.sa-rradio label:hover .dot { border-color: var(--brand-accent); }
.sa-rradio input:checked + .dot { border-color: var(--brand-accent); }
.sa-rradio input:checked + .dot::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 999px;
  background: var(--brand-accent);
}
.sa-rradio input:checked ~ * { color: var(--brand-ink); }
.sa-rradio label:has(input:checked) {
  border-color: var(--brand-accent);
  background: color-mix(in oklab, var(--brand-accent) 8%, transparent);
}
.sa-rradio input:focus-visible + .dot {
  outline: 2px solid var(--brand-accent);
  outline-offset: 2px;
}

/* Responder audio + textarea for Q2 */
.sa-rform-audio {
  border: 1px solid var(--brand-line);
  border-radius: var(--brand-corner);
  background: var(--brand-ground-alt);
  overflow: hidden;
}
.sa-rform-audio textarea {
  width: 100%;
  min-height: 140px;
  padding: 18px 20px;
  background: transparent;
  border: none;
  resize: vertical;
  font: 400 15px/1.5 var(--brand-body-font);
  color: var(--brand-ink);
}
.sa-rform-audio textarea::placeholder {
  color: var(--brand-ink-muted);
  font-style: italic;
}
.sa-rform-audio textarea:focus { outline: none; }
.sa-rform-audio-bar {
  border-top: 1px solid var(--brand-line);
  padding: 14px 20px;
  display: flex; align-items: center; gap: 14px;
}
.sa-rform-rec {
  width: 36px; height: 36px;
  border-radius: 999px;
  background: var(--brand-accent);
  color: white;
  display: inline-flex; align-items: center; justify-content: center;
  border: none; cursor: pointer;
  font-size: 12px;
  flex-shrink: 0;
}
.sa-rform-rec::before {
  content: "●";
}
.sa-rform-rec-text {
  font-size: 13px;
  color: var(--brand-ink);
}
.sa-rform-rec-sub {
  font-size: 11px;
  color: var(--brand-ink-muted);
}
.sa-rform-time {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--brand-ink-muted);
}

/* Stepper foot — only renders in stepper mode */
.sa-rform-foot {
  border-top: 1px solid var(--brand-line);
  padding: 18px 28px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  background: var(--brand-ground);
}
.sa-rform[data-flow="scroll"] .sa-rform-foot { display: none; }
.sa-rform-back {
  font-size: 14px;
  color: var(--brand-ink-muted);
  background: transparent; border: none; cursor: pointer;
  padding: 8px 4px;
}
.sa-rform-back:hover { color: var(--brand-ink); }
.sa-rform-back[disabled] { opacity: 0.35; cursor: default; }
.sa-rform-saved {
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--brand-ink-muted);
}
.sa-rform-cta {
  height: 48px;
  padding: 0 28px;
  background: var(--brand-accent);
  color: var(--brand-accent-ink);
  border: none;
  font: 500 15px/1 var(--brand-body-font);
  letter-spacing: 0.005em;
  border-radius: var(--brand-corner);
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 10px;
  transition: filter 120ms, transform 120ms;
}
.sa-rform-cta::after { content: "→"; font-size: 15px; }
.sa-rform-cta:hover  { filter: brightness(1.05); }
.sa-rform-cta:active { transform: translateY(1px); }

/* Stepper progress (top of pane) */
.sa-rform-progress {
  border-bottom: 1px solid var(--brand-line);
  padding: 18px 28px 14px;
  display: flex; align-items: center; gap: 16px;
}
.sa-rform-progress-mark {
  display: flex; align-items: center; gap: 10px;
}
.sa-rform-progress-mark-square {
  width: 28px; height: 28px;
  background: var(--brand-primary);
  color: var(--brand-primary-ink);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--brand-heading-font);
  font-size: 14px;
}
.sa-rform-progress-name {
  font-family: var(--brand-heading-font);
  font-size: 15px;
  color: var(--brand-ink);
}
.sa-rform-progress-step {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--brand-ink-muted);
}
.sa-rform-progress-rail {
  width: 100%;
  height: 2px;
  background: var(--brand-line);
  position: relative;
  margin-top: 10px;
}
.sa-rform-progress-rail > i {
  position: absolute; left: 0; top: 0; bottom: 0;
  background: var(--brand-accent);
  transition: width 200ms;
}
/* Scroll mode hides the rail (shown as static count instead) */
.sa-rform[data-flow="scroll"] .sa-rform-progress-rail-wrap { display: none; }

.sa-brand-form[data-preset="v2"] .sa-brand-prompt {
  font-size: 22px;
  font-family: var(--brand-heading-font);
  font-style: italic;
  font-weight: 400;
}

/* ── Responsive ─────────────────────────────────── */
/* ─────────────────────────────────────────────────────────────
   INTERACTION LAYER · hover / focus / active states
   Applied at the end so it overrides earlier defaults consistently.
   ───────────────────────────────────────────────────────────── */

/* Focus ring used everywhere keyboard-focus matters. */
.sa-frame :focus { outline: none; }
.sa-frame :focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Platform menu links */
.sa-platform-link { transition: color 120ms, border-color 120ms, background 120ms; }
.sa-platform-link:hover {
  color: var(--ink-strong);
  background: var(--ground);
}

/* Search button */
.sa-search-btn { cursor: pointer; transition: background 120ms, color 120ms, border-color 120ms; }
.sa-search-btn:hover {
  background: var(--surface);
  color: var(--ink-strong);
  border-color: var(--line-strong);
}
.sa-search-btn:active { background: var(--ground-alt); }

/* User chip */
.sa-user { padding: 4px 8px; margin: -4px -8px; border-radius: 4px; transition: background 120ms; }
.sa-user:hover { background: var(--ground); }

/* Company / Survey combobox triggers */
.sa-company-name, .sa-survey-name { transition: background 120ms, color 120ms; }
.sa-company-name:hover, .sa-survey-name:hover {
  background: var(--ground);
}
.sa-company-name:hover .sa-caret, .sa-survey-name:hover .sa-caret {
  color: var(--ink-strong);
}

/* Tabs (company + survey) */
.sa-company-tab, .sa-tab {
  transition: color 120ms, border-color 120ms, background 120ms;
}
.sa-company-tab:hover:not(.is-active), .sa-tab:hover:not(.is-active) {
  color: var(--ink-strong);
  border-bottom-color: var(--line-strong);
}

/* Buttons */
.sa-btn { transition: background 120ms, border-color 120ms, color 120ms, box-shadow 120ms; }
.sa-btn:hover:not(.sa-btn-primary) {
  background: var(--ground);
  border-color: var(--line-strong);
  color: var(--ink-strong);
}
.sa-btn:active:not(.sa-btn-primary) { background: var(--ground-alt); }
.sa-btn-primary:hover {
  filter: brightness(0.94);
}
.sa-btn-primary:active { filter: brightness(0.88); }

.sa-btn-dashed { transition: background 120ms, border-color 120ms, color 120ms; }
.sa-btn-dashed:hover {
  background: var(--ground);
  border-color: var(--ink-muted);
  color: var(--ink-strong);
}

/* Question card hover */
.sa-q { transition: background 120ms, border-left-color 120ms; cursor: pointer; }
.sa-q:hover:not(.is-selected) {
  background: oklch(0.99 0.003 80);
}

/* Inspector type-grid */
.sa-type-grid button { transition: background 120ms, color 120ms, border-color 120ms; }
.sa-type-grid button:hover:not(.is-active) {
  background: var(--ground);
  color: var(--ink-strong);
  border-color: var(--line-strong);
}

/* Collapse heads */
.sa-collapse-head { transition: background 120ms; }
.sa-collapse-head:hover { background: var(--ground); }

/* Cond chip + add */
.sa-cond-add, .sa-cond-edit { transition: color 120ms; }
.sa-cond-add:hover { color: var(--ink-body); }
.sa-cond-edit:hover { opacity: 1; }

/* Translation add / cond add buttons */
.sa-tr-add, .sa-cond-add-btn {
  transition: background 120ms, border-color 120ms, color 120ms;
}
.sa-tr-add:hover, .sa-cond-add-btn:hover {
  background: var(--ground);
  color: var(--ink-strong);
  border-color: var(--ink-muted);
}

/* ─────────────────────────────────────────────────────────────
   REAL FORM CONTROLS
   ───────────────────────────────────────────────────────────── */

/* Real inputs inside Inspector */
.sa-input {
  width: 100%;
  font: 400 14px/1.4 var(--font-body);
  padding: 8px 10px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink-strong);
  border-radius: 2px;
  transition: border-color 120ms, box-shadow 120ms;
}
.sa-input:hover { border-color: var(--line-strong); }
.sa-input:focus-visible {
  outline: none;
  border-color: var(--ink-strong);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 18%, transparent);
}
.sa-textarea {
  width: 100%;
  font: 400 13px/1.5 var(--font-body);
  padding: 8px 10px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink-body);
  border-radius: 2px;
  resize: vertical;
  min-height: 56px;
  transition: border-color 120ms, box-shadow 120ms;
}
.sa-textarea:hover { border-color: var(--line-strong); }
.sa-textarea:focus-visible {
  outline: none;
  border-color: var(--ink-strong);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 18%, transparent);
}

/* Native select reset + restyle (used in Inspector type picker) */
.sa-select {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  font: 500 13px/1 var(--font-body);
  padding: 10px 32px 10px 14px;
  border: 1px solid color-mix(in oklab, var(--qt-audio) 35%, transparent);
  background: var(--qt-audio-soft) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'><path d='M2 4l3 3 3-3' stroke='%2390614f' stroke-width='1.4' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat right 10px center / 10px 10px;
  color: var(--qt-audio);
  border-radius: 2px;
  cursor: pointer;
  transition: border-color 120ms, box-shadow 120ms;
}
.sa-select:hover {
  border-color: color-mix(in oklab, var(--qt-audio) 55%, transparent);
}
.sa-select:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--qt-audio) 25%, transparent);
}

/* Custom radio */
.sa-radio {
  position: absolute; opacity: 0; pointer-events: none;
}
.sa-mini-radio label {
  cursor: pointer; padding: 2px 0;
  transition: color 120ms;
}
.sa-mini-radio label:hover { color: var(--ink-strong); }
.sa-mini-radio .dot {
  position: relative;
  flex-shrink: 0;
  transition: border-color 120ms, background 120ms;
}
.sa-mini-radio label:hover .dot { border-color: var(--qt-choice); }
.sa-mini-radio .sa-radio:checked + .dot { border-color: var(--qt-choice); }
.sa-mini-radio .sa-radio:checked + .dot::after {
  content: "";
  position: absolute;
  inset: 2px;
  border-radius: 999px;
  background: var(--qt-choice);
}
/* Remove the old static dot mark; use ::after instead */
.sa-mini-radio .dot.is-on::after { display: none; }
.sa-mini-radio .sa-radio:focus-visible + .dot {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Custom checkbox (consent + multi-choice) */
.sa-check {
  position: absolute; opacity: 0; pointer-events: none;
}
.sa-mini-consent label, .sa-mini-multi label {
  cursor: pointer;
  transition: color 120ms;
}
.sa-mini-consent label:hover, .sa-mini-multi label:hover { color: var(--ink-strong); }
.sa-mini-consent .box, .sa-mini-multi .box {
  position: relative;
  transition: border-color 120ms, background 120ms;
}
.sa-mini-consent label:hover .box, .sa-mini-multi label:hover .box {
  border-color: var(--qt-consent);
}
.sa-mini-consent .sa-check:checked + .box {
  background: var(--qt-consent);
  border-color: var(--qt-consent);
}
.sa-mini-consent .sa-check:checked + .box::after {
  content: "";
  position: absolute;
  inset: 2px;
  background: white;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'><path d='M2 5l2 2 4-5' stroke='black' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat center / contain;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'><path d='M2 5l2 2 4-5' stroke='black' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat center / contain;
}
.sa-mini-consent .sa-check:focus-visible + .box,
.sa-mini-multi .sa-check:focus-visible + .box {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
/* override static is-on style now that we use real inputs */
.sa-mini-consent .box.is-on { background: var(--surface); }

/* Real text inputs in demographic mini preview */
.sa-mini-demo .sa-mini-demo-input {
  font-family: inherit;
  width: 100%;
}
.sa-mini-demo .sa-mini-demo-input::placeholder {
  color: var(--ink-subtle);
}
.sa-mini-demo .sa-mini-demo-input:focus-visible {
  outline: none;
  border-color: var(--ink-strong);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 18%, transparent);
}

/* Native scale input as 1–7 segmented (we keep 7 visual cells, with hover) */
.sa-mini-scale .cell {
  cursor: pointer;
  transition: background 120ms, border-color 120ms, color 120ms;
  user-select: none;
}
.sa-mini-scale .cell:hover {
  background: var(--qt-scale-soft);
  border-color: var(--qt-scale);
  color: var(--qt-scale);
}
.sa-mini-scale .cell.is-on {
  background: var(--qt-scale);
  border-color: var(--qt-scale);
  color: white;
  font-weight: 500;
}

/* Real toggle (uses real checkbox) */
.sa-toggle {
  cursor: pointer;
  transition: background 120ms;
}
.sa-toggle input {
  position: absolute; opacity: 0; pointer-events: none;
}
.sa-toggle::after { transition: left 140ms; }
.sa-toggle:hover { background: color-mix(in oklab, var(--line-strong) 80%, var(--accent) 20%); }
.sa-toggle.is-on:hover { filter: brightness(1.05); }
.sa-toggle:focus-within {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Number inputs */
.sa-num-input {
  width: 80px;
  text-align: right;
  font: 500 12px/1 var(--font-mono);
  padding: 6px 8px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink-strong);
  border-radius: 2px;
  transition: border-color 120ms, box-shadow 120ms;
}
.sa-num-input:hover { border-color: var(--line-strong); }
.sa-num-input:focus-visible {
  outline: none;
  border-color: var(--ink-strong);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 18%, transparent);
}

/* ─────────────────────────────────────────────────────────────
   COMBOBOX (used for Company + Survey switcher)
   Uses native <details>/<summary> for keyboard + click-to-open;
   JS adds outside-click dismiss.
   ───────────────────────────────────────────────────────────── */
.sa-combo {
  position: relative;
  display: inline-block;
}
.sa-combo > summary {
  list-style: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.sa-combo > summary::-webkit-details-marker { display: none; }
.sa-combo > summary::marker { content: ""; }
.sa-combo[open] > summary .sa-caret::before {
  transform: rotate(225deg) translate(-1px, -1px);
}
.sa-combo-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  min-width: 280px;
  max-width: 360px;
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-3);
  z-index: 50;
  padding: 6px;
  display: flex; flex-direction: column;
  animation: sa-combo-in 120ms ease-out;
}
@keyframes sa-combo-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.sa-combo-search {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  background: var(--ground);
  margin-bottom: 6px;
}
.sa-combo-search input {
  border: none; background: transparent; outline: none;
  font: 400 13px/1 var(--font-body); flex: 1;
  color: var(--ink-strong);
}
.sa-combo-option {
  padding: 9px 10px;
  display: flex; flex-direction: column; gap: 2px;
  cursor: pointer;
  border-radius: 2px;
  transition: background 120ms;
}
.sa-combo-option:hover { background: var(--ground); }
.sa-combo-option.is-current { background: var(--accent-soft); }
.sa-combo-option.is-current::before {
  content: "✓"; color: var(--accent);
  font-size: 11px; margin-right: 6px;
}
.sa-combo-option-name {
  font-size: 13px; color: var(--ink-strong);
  display: flex; align-items: center;
}
.sa-combo-option-meta {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink-muted);
}
.sa-combo-section {
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-muted);
  padding: 8px 10px 4px;
}
.sa-combo-divider {
  height: 1px; background: var(--line); margin: 6px 0;
}
.sa-combo-foot {
  padding: 8px 10px;
  border-top: 1px solid var(--line);
  margin-top: 6px;
}
.sa-combo-foot a {
  font-size: 12px; color: var(--accent);
  display: inline-flex; align-items: center; gap: 6px;
}
.sa-combo-foot a:hover { text-decoration: underline; }

/* ─────────────────────────────────────────────────────────────
   PREVIEW PAGE · single-pane layout + sub-tabs
   ───────────────────────────────────────────────────────────── */
.sa-preview-shell {
  padding: 24px 32px 48px;
}
.sa-subtabs {
  display: flex; gap: 4px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 0;
}
.sa-subtab {
  padding: 10px 16px;
  font-size: 13px;
  color: var(--ink-muted);
  border: 1px solid transparent;
  border-bottom: none;
  background: transparent;
  cursor: pointer;
  margin-bottom: -1px;
  transition: color 120ms, background 120ms, border-color 120ms;
}
.sa-subtab:hover:not(.is-active) {
  color: var(--ink-strong);
  background: var(--ground);
}
.sa-subtab.is-active {
  color: var(--ink-strong);
  font-weight: 600;
  background: var(--surface);
  border-color: var(--line);
}
.sa-subtab .sa-subtab-meta {
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-muted);
  margin-left: 8px;
}
.sa-subtab.is-active .sa-subtab-meta { color: var(--ink-body); }

.sa-preview-pane {
  background: var(--surface);
  border: 1px solid var(--line);
  border-top: none;
  padding: 0;
  display: block;
  min-height: 720px;
}
.sa-preview-panel { display: none; width: 100%; }
.sa-preview-panel.is-active { display: block; }
.sa-preview-toolbar {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-bottom: none;
  background: var(--ground);
  font-size: 12px; color: var(--ink-muted);
}
.sa-preview-toolbar .url {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-body);
  background: var(--surface);
  border: 1px solid var(--line);
  padding: 4px 10px;
  flex: 1;
  border-radius: 2px;
}
.sa-preview-toolbar .dot {
  width: 10px; height: 10px; border-radius: 999px;
  background: oklch(0.85 0.05 35);
}
.sa-preview-toolbar .dot.g { background: oklch(0.78 0.13 145); }
.sa-preview-toolbar .dot.y { background: oklch(0.85 0.13 90); }

/* ─────────────────────────────────────────────────────────────
   v2 BOLD BLUE landing — full-bleed navy hero
   ───────────────────────────────────────────────────────────── */
.bold-landing {
  width: 100%;
  max-width: 1180px;
  background: var(--brand-primary);
  color: var(--brand-primary-ink);
  font-family: var(--brand-body-font);
  border: 1px solid color-mix(in oklab, var(--brand-primary) 70%, white 30%);
  display: flex; flex-direction: column;
  min-height: 720px;
}
.bold-landing-top {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 48px;
  border-bottom: 1px solid oklch(0.35 0.04 255);
}
.bold-landing-mark {
  display: flex; align-items: center; gap: 10px;
}
.bold-landing-mark-square {
  width: 28px; height: 28px;
  background: var(--brand-primary-ink);
  color: var(--brand-primary);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--brand-heading-font);
  font-size: 14px;
  font-weight: 600;
}
.bold-landing-mark-name {
  font-family: var(--brand-heading-font);
  font-size: 15px;
  letter-spacing: 0.005em;
}
.bold-landing-meta {
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: oklch(0.75 0.03 255);
}
.bold-landing-body {
  padding: 64px 48px 48px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  flex: 1;
}
.bold-landing-eyebrow {
  font-family: var(--font-mono);
  font-size: 12px; letter-spacing: 0.10em; text-transform: uppercase;
  color: oklch(0.75 0.03 255);
  margin-bottom: 24px;
}
.bold-landing-h1 {
  font-family: var(--brand-heading-font);
  font-size: clamp(72px, 8vw, 104px);
  line-height: 0.92;
  letter-spacing: -0.035em;
  font-weight: 400;
  color: var(--brand-primary-ink);
  margin: 0;
}
.bold-landing-h1 em {
  font-style: italic;
  color: var(--brand-accent);
  font-weight: 400;
}
.bold-landing-right {
  display: flex; flex-direction: column; justify-content: flex-end;
  padding-bottom: 8px;
}
.bold-landing-lead {
  font-size: 18px;
  line-height: 1.5;
  color: oklch(0.88 0.02 255);
  margin: 0 0 28px 0;
  max-width: 460px;
}
.bold-landing-actions {
  display: flex; align-items: center; gap: 20px; margin-bottom: 32px; flex-wrap: wrap;
}
.bold-landing-cta {
  background: var(--brand-accent);
  color: var(--brand-accent-ink);
  border: none;
  padding: 18px 28px;
  font-family: var(--brand-body-font);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.01em;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 12px;
  transition: filter 120ms, transform 120ms;
}
.bold-landing-cta::after { content: "→"; }
.bold-landing-cta:hover { filter: brightness(1.05); }
.bold-landing-cta:active { transform: translateY(1px); }
.bold-landing-cta:focus-visible {
  outline: 2px solid var(--brand-primary-ink);
  outline-offset: 3px;
}
.bold-landing-meta-line {
  font-size: 13px;
  color: oklch(0.78 0.02 255);
}
.bold-landing-quote {
  border-top: 1px solid oklch(0.35 0.04 255);
  padding-top: 18px;
  display: flex; gap: 16px; align-items: flex-start;
}
.bold-landing-portrait {
  width: 52px; height: 52px; border-radius: 999px; flex-shrink: 0;
  background:
    repeating-linear-gradient(135deg,
      oklch(0.32 0.04 255) 0 2px,
      oklch(0.36 0.04 255) 2px 14px);
}
.bold-landing-quote-text {
  font-family: var(--brand-heading-font);
  font-style: italic;
  font-size: 17px;
  line-height: 1.35;
  color: oklch(0.92 0.02 255);
  max-width: 420px;
}
.bold-landing-quote-attr {
  font-style: normal;
  color: oklch(0.72 0.02 255);
  font-family: var(--brand-body-font);
  font-size: 13px;
}

@media (max-width: 1100px) {
  .bold-landing-body { grid-template-columns: 1fr; gap: 32px; padding: 48px 32px 40px; }
  .bold-landing-right { justify-content: flex-start; padding-bottom: 0; }
  .bold-landing-h1 { font-size: clamp(56px, 12vw, 88px); }
}
@media (max-width: 720px) {
  .sa-preview-shell { padding: 16px; }
  .sa-preview-pane { padding: 0; border: none; }
  .bold-landing-top { padding: 16px 20px; }
  .bold-landing-body { padding: 32px 20px 28px; }
}

@media (max-width: 1280px) {
  /* Stack the survey title block vertically so the survey name and
     page label can never collide mid-line. */
  .sa-survey-titles {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
  .sa-survey-dash { display: none; }
  .sa-survey-name { font-size: 22px; white-space: normal; }
  .sa-survey-page { font-size: 16px; color: var(--ink-muted); }
  .sa-status { align-self: flex-start; margin-top: 4px; }
}
@media (max-width: 1100px) {
  .sa-questions {
    grid-template-columns: 1fr;
  }
  .sa-split {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 820px) {
  .sa-company-name {
    white-space: normal;
    font-size: 14px;
    line-height: 1.25;
    margin-right: 12px;
  }
}
@media (max-width: 720px) {
  .sa-utility, .sa-company, .sa-survey, .sa-questions, .sa-split {
    padding-left: 16px; padding-right: 16px;
  }
  .sa-platform-menu { display: none; }
  .sa-survey-name { font-size: 20px; }
  .sa-survey-page { font-size: 15px; }
  .sa-tabs { overflow-x: auto; flex-wrap: nowrap; }
  .sa-tab { white-space: nowrap; }
}

/* ── AA radio widget (.aa-widget-rio) → match .sa-rradio look ── */
.sa-rform .aa-widget-rio {
  display: block !important;
  position: static !important;
}
.sa-rform .aa-widget-rio .aa-input { display: block; position: static; }
.sa-rform .aa-widget-rio .aa-input > img[src$="px.gif"] { display: none !important; }

.sa-rform .aa-widget-rio .aa-tab-rio {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.sa-rform .aa-widget-rio .aa-tab-rio label {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0;
  padding: 16px 20px;
  border: 1px solid var(--brand-line);
  border-radius: var(--brand-corner);
  cursor: pointer;
  font-size: 17px;
  line-height: 1.35;
  color: var(--brand-ink);
  transition: border-color 120ms, background 120ms;
}
.sa-rform .aa-widget-rio .aa-tab-rio label:hover { border-color: var(--brand-accent); }
.sa-rform .aa-widget-rio .aa-tab-rio label:has(input:checked) {
  border-color: var(--brand-accent);
  background: color-mix(in oklab, var(--brand-accent) 8%, transparent);
}

.sa-rform .aa-widget-rio .aa-tab-rio input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  border: 1.5px solid var(--brand-line);
  background: transparent;
  flex-shrink: 0;
  cursor: pointer;
  transition: border-color 120ms, background-image 120ms;
}
.sa-rform .aa-widget-rio .aa-tab-rio label:hover input[type="radio"] {
  border-color: var(--brand-accent);
}
.sa-rform .aa-widget-rio .aa-tab-rio input[type="radio"]:checked {
  border-color: var(--brand-accent);
  background-image: radial-gradient(circle, var(--brand-accent) 0 4.5px, transparent 5px);
}
.sa-rform .aa-widget-rio .aa-tab-rio input[type="radio"]:focus-visible {
  outline: 2px solid var(--brand-accent);
  outline-offset: 2px;
}
.sa-rform .aa-widget-rio .aa-tab-rio label > span { flex: 1 1 auto; }

/* ── AA fld widget (.aa-widget-fld) → text input cards ── */
.sa-rform .aa-widget-fld { display: block !important; position: static !important; }
.sa-rform .aa-widget-fld .aa-input { display: block; position: static; }
.sa-rform .aa-widget-fld .aa-one-val { display: block; position: relative; }
.sa-rform .aa-widget-fld img[src$="px.gif"] { display: none !important; }
.sa-rform .aa-widget-fld input[type="text"] {
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 16px 20px;
  border: 1px solid var(--brand-line);
  border-radius: var(--brand-corner);
  background: var(--brand-ground-alt);
  color: var(--brand-ink);
  font: inherit;
  font-size: 17px;
  line-height: 1.35;
  transition: border-color 120ms, background 120ms, box-shadow 120ms;
}
.sa-rform .aa-widget-fld input[type="text"]:hover {
  border-color: var(--brand-accent);
}
.sa-rform .aa-widget-fld input[type="text"]:focus {
  outline: none;
  border-color: var(--brand-accent);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--brand-accent) 18%, transparent);
}
.sa-rform .aa-widget-fld input[type="text"]::placeholder {
  color: var(--brand-ink-muted);
  opacity: 1;
}

/* ── AA sel widget (.aa-widget-sel) → styled select with custom chevron ── */
.sa-rform .aa-widget-sel { display: block !important; position: static !important; }
.sa-rform .aa-widget-sel .aa-input { display: block; position: static; }
.sa-rform .aa-widget-sel img[src$="px.gif"] { display: none !important; }
.sa-rform .aa-widget-sel select {
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 16px 48px 16px 20px;
  border: 1px solid var(--brand-line);
  border-radius: var(--brand-corner);
  background-color: var(--brand-ground-alt);
  color: var(--brand-ink);
  font: inherit;
  font-size: 17px;
  line-height: 1.35;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M3 6l5 5 5-5' stroke='currentColor' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 18px center;
  background-size: 14px 14px;
  transition: border-color 120ms, box-shadow 120ms;
}
.sa-rform .aa-widget-sel select:hover { border-color: var(--brand-accent); }
.sa-rform .aa-widget-sel select:focus {
  outline: none;
  border-color: var(--brand-accent);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--brand-accent) 18%, transparent);
}

/* ── AA chb widget (.aa-widget-chb) → branded checkbox toggle ── */
.sa-rform .aa-widget-chb { display: block !important; position: static !important; }
.sa-rform .aa-widget-chb .aa-input {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  border: 1px solid var(--brand-line);
  border-radius: var(--brand-corner);
  cursor: pointer;
  transition: border-color 120ms, background 120ms;
}
.sa-rform .aa-widget-chb .aa-input:hover { border-color: var(--brand-accent); }
.sa-rform .aa-widget-chb:has(input:checked) .aa-input {
  border-color: var(--brand-accent);
  background: color-mix(in oklab, var(--brand-accent) 8%, transparent);
}
.sa-rform .aa-widget-chb input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  width: 22px;
  height: 22px;
  border: 1.5px solid var(--brand-line);
  border-radius: 4px;
  background: transparent;
  cursor: pointer;
  flex-shrink: 0;
  transition: border-color 120ms, background-color 120ms;
}
.sa-rform .aa-widget-chb input[type="checkbox"]:hover { border-color: var(--brand-accent); }
.sa-rform .aa-widget-chb input[type="checkbox"]:checked {
  border-color: var(--brand-accent);
  background-color: var(--brand-accent);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M3 8l3 3 7-7' stroke='white' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 14px 14px;
}
.sa-rform .aa-widget-chb input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--brand-accent);
  outline-offset: 2px;
}

/* ── AA txt widget (.aa-widget-txt) → textarea card (also used for audio textareas) ── */
.sa-rform .aa-widget-txt { display: block !important; position: static !important; }
.sa-rform .aa-widget-txt .aa-input { display: block; position: static; }
.sa-rform .aa-widget-txt .aa-one-val { display: block; position: relative; }
.sa-rform .aa-widget-txt img[src$="px.gif"] { display: none !important; }
.sa-rform .aa-widget-txt textarea {
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 16px 20px;
  border: 1px solid var(--brand-line);
  border-radius: var(--brand-corner);
  background: var(--brand-ground-alt);
  color: var(--brand-ink);
  font: inherit;
  font-size: 17px;
  line-height: 1.5;
  resize: vertical;
  min-height: 160px;
  transition: border-color 120ms, box-shadow 120ms;
}
.sa-rform .aa-widget-txt textarea:hover { border-color: var(--brand-accent); }
.sa-rform .aa-widget-txt textarea:focus {
  outline: none;
  border-color: var(--brand-accent);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--brand-accent) 18%, transparent);
}
.sa-rform .aa-widget-txt textarea::placeholder {
  color: var(--brand-ink-muted);
  opacity: 1;
}

/* ── Select2 dropdown (replaces native <select> inside .aa-widget-sel) ── */
.sa-rform .aa-widget-sel .select2-container { width: 100% !important; }
.sa-rform .aa-widget-sel .select2-container--default .select2-selection--single {
  height: auto;
  min-height: 0;
  padding: 16px 48px 16px 20px;
  border: 1px solid var(--brand-line);
  border-radius: var(--brand-corner);
  background: var(--brand-ground-alt);
  outline: none;
  transition: border-color 120ms, box-shadow 120ms;
}
.sa-rform .aa-widget-sel .select2-container--default:hover .select2-selection--single {
  border-color: var(--brand-accent);
}
.sa-rform .aa-widget-sel .select2-container--default.select2-container--focus .select2-selection--single,
.sa-rform .aa-widget-sel .select2-container--default.select2-container--open .select2-selection--single {
  border-color: var(--brand-accent);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--brand-accent) 18%, transparent);
}
.sa-rform .aa-widget-sel .select2-container--default .select2-selection--single .select2-selection__rendered {
  padding: 0;
  color: var(--brand-ink);
  font: inherit;
  font-size: 17px;
  line-height: 1.35;
}
.sa-rform .aa-widget-sel .select2-container--default .select2-selection--single .select2-selection__placeholder,
.sa-rform .aa-widget-sel .select2-container--default .select2-selection--single .select2-selection__rendered:empty::before {
  content: "Select…";
  color: var(--brand-ink-muted);
}
/* Hide default arrow, draw our own chevron */
.sa-rform .aa-widget-sel .select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 100%;
  width: 48px;
  top: 0;
  right: 0;
}
.sa-rform .aa-widget-sel .select2-container--default .select2-selection--single .select2-selection__arrow b {
  border: none;
  width: 14px;
  height: 14px;
  left: 50%;
  top: 50%;
  margin: 0;
  transform: translate(-50%, -50%);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M3 6l5 5 5-5' stroke='%23000' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 0.55;
}

/* Select2 dropdown panel (rendered at body level, so global) */
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
  background: oklch(0.55 0.20 28);
  color: white;
}
.select2-dropdown {
  border: 1px solid oklch(0.88 0.008 255);
  border-radius: 0;
}
.select2-results__option {
  padding: 12px 20px;
  font-size: 16px;
  font-family: inherit;
}

/* ── 2026-05-04 follow-ups ────────────────────────────────────────
   1. Compact mode for "About you"-style steps (3+ stacked questions)
   2. Stepper full-viewport layout with sticky bottom buttons
   3. GDPR link strip (works in both flows; injected by survey-admin.js)
   ──────────────────────────────────────────────────────────────── */

/* ─── 1. Compact step (any step holding ≥3 .sa-rform-q items) ─── */
.sa-rform-step:has(.sa-rform-q + .sa-rform-q + .sa-rform-q) {
  padding: 4px 0 8px;
}
.sa-rform-step:has(.sa-rform-q + .sa-rform-q + .sa-rform-q) > .sa-rform-section-eyebrow {
  padding: 14px 28px 4px;
  margin-bottom: 0;
}
.sa-rform-step:has(.sa-rform-q + .sa-rform-q + .sa-rform-q) .sa-rform-intro-h1 {
  font-size: clamp(22px, 2.6vw, 30px);
  line-height: 1.1;
  max-width: none;
  margin: 0 0 4px;
}
.sa-rform-step:has(.sa-rform-q + .sa-rform-q + .sa-rform-q) .sa-rform-intro-lead {
  font-size: 12.5px;
  line-height: 1.4;
  max-width: none;
  margin: 0;
}
.sa-rform-step:has(.sa-rform-q + .sa-rform-q + .sa-rform-q) .sa-rform-intro-lead em {
  font-style: normal;
}
.sa-rform-step:has(.sa-rform-q + .sa-rform-q + .sa-rform-q) .sa-rform-q {
  padding: 6px 28px;
  gap: 4px;
}
.sa-rform-step:has(.sa-rform-q + .sa-rform-q + .sa-rform-q) .sa-rform-q-num {
  display: none;
}
.sa-rform-step:has(.sa-rform-q + .sa-rform-q + .sa-rform-q) .sa-rform-q-label {
  font-size: 14px;
  font-family: var(--brand-body-font);
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.25;
  margin: 0;
}
.sa-rform-step:has(.sa-rform-q + .sa-rform-q + .sa-rform-q) .sa-rform-q-helper {
  font-size: 12px;
  line-height: 1.35;
  margin: 0;
}
.sa-rform-step:has(.sa-rform-q + .sa-rform-q + .sa-rform-q) .sa-rform-q-helper:empty {
  display: none;
}
.sa-rform-step:has(.sa-rform-q + .sa-rform-q + .sa-rform-q) .aa-widget-fld input[type="text"] {
  height: 36px; font-size: 13px; padding: 6px 12px;
}
.sa-rform-step:has(.sa-rform-q + .sa-rform-q + .sa-rform-q) .aa-widget-sel select {
  height: 36px; padding: 6px 32px 6px 12px;
}
.sa-rform-step:has(.sa-rform-q + .sa-rform-q + .sa-rform-q) .aa-widget-sel .select2-container--default .select2-selection--single {
  height: 36px;
}
.sa-rform-step:has(.sa-rform-q + .sa-rform-q + .sa-rform-q) .aa-widget-sel .select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 24px; font-size: 13px; padding-top: 6px; padding-bottom: 6px;
}
.sa-rform-step:has(.sa-rform-q + .sa-rform-q + .sa-rform-q) .aa-widget-sel .select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 34px;
}
.sa-rform-step:has(.sa-rform-q + .sa-rform-q + .sa-rform-q) .aa-widget-chb .aa-input {
  padding: 8px 12px; font-size: 13px; line-height: 1.3;
}
@media (min-width: 760px) {
  .sa-rform[data-flow="stepper"] .sa-rform-step.is-active:has(.sa-rform-q + .sa-rform-q + .sa-rform-q),
  .sa-rform[data-flow="scroll"]  .sa-rform-step:has(.sa-rform-q + .sa-rform-q + .sa-rform-q) {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: min-content;
    column-gap: 24px;
    row-gap: 12px;
    align-items: start;
    align-content: start;
  }
  .sa-rform-step:has(.sa-rform-q + .sa-rform-q + .sa-rform-q) > .sa-rform-section-eyebrow,
  .sa-rform-step:has(.sa-rform-q + .sa-rform-q + .sa-rform-q) > .sa-rform-q:has(.aa-widget-chb),
  .sa-rform-step:has(.sa-rform-q + .sa-rform-q + .sa-rform-q) > .sa-rform-q:has(.aa-widget-sel) {
    grid-column: 1 / -1;
  }
}

/* ─── 2. Stepper variant — fill viewport, pin footer to bottom ── */
.sa-frame {
  min-height: 100vh; min-height: 100dvh;
  display: flex; flex-direction: column;
  background: var(--brand-ground);
}
.sa-frame > .sa-rform { flex: 1 0 auto; display: flex; flex-direction: column; }
.sa-rform[data-flow="stepper"] .sa-rform-step.is-active { flex: 1 1 auto; }
.sa-rform[data-flow="stepper"] .sa-rform-foot {
  position: sticky; bottom: 0; z-index: 5; background: var(--brand-ground);
}

/* ─── 3. GDPR strip (always visible at page bottom) ─────────────── */
.sa-rform-gdpr {
  flex: 0 0 auto;
  padding: 10px 28px 14px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--brand-ink-muted);
  background: var(--brand-ground);
  border-top: 1px solid var(--brand-line);
}
.sa-rform-gdpr a {
  color: var(--brand-ink-muted);
  text-decoration: underline; text-underline-offset: 3px;
}
.sa-rform-gdpr a:hover { color: var(--brand-accent); }

/* ── 2026-05-04 polish (intro h1 + lead, Aspen editorial feel) ───
   .sa-rform-section-eyebrow is the section-header CONTAINER (not a kicker).
   Add padding, restore reasonable typography for h1 + lead. */
.sa-rform-section-eyebrow {
  font-family: var(--brand-body-font);
  font-size: 14px; font-weight: 400; letter-spacing: 0; text-transform: none;
  color: var(--brand-ink); margin: 0; padding: 56px 28px 20px;
}
.sa-rform-intro-h1 {
  font-family: var(--brand-heading-font);
  font-size: clamp(32px, 4.2vw, 54px);
  line-height: 1.06; letter-spacing: -0.018em;
  font-weight: 400; font-style: normal; text-transform: none;
  color: var(--brand-ink); margin: 0 0 14px; max-width: 22ch;
}
.sa-rform-intro-h1 em { font-style: italic; color: var(--brand-accent); font-weight: 400; }
.sa-rform-intro-lead {
  font-family: var(--brand-heading-font);
  font-size: 18px; line-height: 1.5; letter-spacing: 0; text-transform: none;
  font-style: italic; font-weight: 400;
  color: var(--brand-ink); opacity: 0.9;
  margin: 0; max-width: 60ch;
}
.sa-rform-intro-lead em { font-style: normal; }
.sa-rform-intro-lead p:first-child { margin-top: 0; }
.sa-rform-intro-lead p:last-child  { margin-bottom: 0; }
.sa-rform-section-eyebrow + .sa-rform-q { padding-top: 24px; }
.sa-rform-step:has(.sa-rform-q + .sa-rform-q + .sa-rform-q) > .sa-rform-section-eyebrow {
  padding: 32px 28px 12px;
}
.sa-rform-step:has(.sa-rform-q + .sa-rform-q + .sa-rform-q) .sa-rform-intro-h1 {
  font-size: clamp(22px, 2.6vw, 30px); line-height: 1.1; margin: 0 0 6px; max-width: none;
}
.sa-rform-step:has(.sa-rform-q + .sa-rform-q + .sa-rform-q) .sa-rform-intro-lead {
  font-size: 13.5px; line-height: 1.45; font-style: italic; max-width: none; opacity: 0.85;
}
@media (max-width: 600px) {
  .sa-rform-section-eyebrow { padding: 36px 22px 18px; }
  .sa-rform-q { padding: 28px 22px 36px; }
  .sa-rform-section-eyebrow + .sa-rform-q { padding-top: 18px; }
}

/* ── 2026-05-04 logo in header ─────────────────────────────────── */
.sa-rform-progress-logo {
  height: 40px;
  width: auto;
  display: block;
  flex-shrink: 0;
}
.sa-rform-progress {
  /* taller header so the logo has breathing room */
  padding-top: 14px;
  padding-bottom: 14px;
  align-items: center;
}
@media (max-width: 600px) {
  .sa-rform-progress-logo { height: 30px; }
  .sa-rform-progress { padding-top: 10px; padding-bottom: 10px; }
  /* On narrow screens, hide the long survey name (logo + step label is enough) */
  .sa-rform-progress-name { display: none; }
}

/* ── 2026-05-04 thanks block + footer 'your link' ────────────── */
.sa-rform-thanks {
  margin: 24px 28px 8px;
  padding: 28px 28px 24px;
  background: var(--brand-ground-alt);
  border: 1px solid var(--brand-line);
  border-radius: var(--brand-corner);
}
.sa-rform-thanks-title {
  font-family: var(--brand-heading-font);
  font-size: 20px; line-height: 1.25;
  letter-spacing: -0.012em;
  font-weight: 400;
  color: var(--brand-ink);
  margin: 0 0 10px;
  max-width: 50ch;
}
.sa-rform-thanks-text {
  font-family: var(--brand-heading-font);
  font-size: 15px; line-height: 1.5;
  font-style: italic;
  color: var(--brand-ink); opacity: 0.85;
  margin: 0 0 22px;
  max-width: 56ch;
}
.sa-rform-thanks-link {
  display: flex; flex-direction: column; gap: 6px;
  padding-top: 18px;
  border-top: 1px solid var(--brand-line);
}
.sa-rform-thanks-link-label {
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.10em; text-transform: uppercase;
  color: var(--brand-ink-muted);
}
.sa-rform-thanks-link-url {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--brand-ink);
  text-decoration: none;
  word-break: break-all;
  border-bottom: 1px dashed color-mix(in oklab, var(--brand-ink-muted) 60%, transparent);
  align-self: flex-start;
  padding-bottom: 1px;
}
.sa-rform-thanks-link-url:hover {
  color: var(--brand-accent);
  border-bottom-color: var(--brand-accent);
  border-bottom-style: solid;
}
/* In compact-mode grid, span full width */
.sa-rform-step:has(.sa-rform-q + .sa-rform-q + .sa-rform-q) > .sa-rform-thanks {
  grid-column: 1 / -1;
}
@media (max-width: 600px) {
  .sa-rform-thanks { margin: 18px 22px 6px; padding: 22px 20px; }
  .sa-rform-thanks-title { font-size: 17px; }
  .sa-rform-thanks-text { font-size: 14px; margin-bottom: 18px; }
}

/* ── Footer 'your link' affordance (replaces empty saved span) ── */
.sa-rform-foot-link {
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--brand-ink-muted);
  text-decoration: none;
  border-bottom: 1px dashed color-mix(in oklab, var(--brand-ink-muted) 50%, transparent);
  padding: 4px 0;
  transition: color 120ms, border-color 120ms;
}
.sa-rform-foot-link:hover {
  color: var(--brand-accent);
  border-bottom-color: var(--brand-accent);
}
@media (max-width: 600px) {
  .sa-rform-foot-link { font-size: 10px; }
}

/* ── 2026-05-04 welcome letter as its own card via section eyebrow ── */
.sa-rform-step:first-of-type .sa-rform-section-eyebrow {
  margin: 24px 28px 8px;
  padding: 28px 28px 24px;
  background: var(--brand-ground-alt);
  border: 1px solid var(--brand-line);
  border-radius: var(--brand-corner);
}
.sa-rform-step:first-of-type .sa-rform-section-eyebrow .sa-rform-intro-h1:empty { display: none; }
.sa-rform-step:first-of-type .sa-rform-section-eyebrow .sa-rform-intro-lead {
  font-family: var(--brand-heading-font);
  font-size: 16px;
  line-height: 1.6;
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--brand-ink);
  opacity: 0.92;
  margin: 0;
  max-width: 60ch;
}
.sa-rform-step:first-of-type .sa-rform-section-eyebrow .sa-rform-intro-lead a {
  color: var(--brand-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.sa-rform-step:first-of-type .sa-rform-section-eyebrow .sa-rform-consent-note {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid color-mix(in oklab, var(--brand-line) 70%, transparent);
  display: block;
  font-family: var(--brand-body-font);
  font-size: 12px;
  line-height: 1.5;
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--brand-ink-muted);
  max-width: 65ch;
}
.sa-rform-step:first-of-type .sa-rform-section-eyebrow .sa-rform-consent-note a {
  color: var(--brand-ink-muted);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.sa-rform-step:first-of-type .sa-rform-section-eyebrow .sa-rform-consent-note a:hover { color: var(--brand-accent); }
/* Question label (screening question) below the welcome card sits as a normal h2 */
.sa-rform-step:first-of-type .sa-rform-q { padding-top: 12px; }
@media (max-width: 600px) {
  .sa-rform-step:first-of-type .sa-rform-section-eyebrow {
    margin: 18px 22px 6px;
    padding: 22px 20px;
  }
  .sa-rform-step:first-of-type .sa-rform-section-eyebrow .sa-rform-intro-lead { font-size: 14.5px; }
}

/* Consent note (small footer-like block, used in welcome page helper) */
.sa-rform-consent-note {
  display: block;
  margin-top: 12px;
  padding-top: 14px;
  border-top: 1px solid color-mix(in oklab, var(--brand-line) 70%, transparent);
  font-family: var(--brand-body-font);
  font-size: 12px;
  line-height: 1.5;
  font-weight: 400;
  font-style: normal;
  letter-spacing: 0;
  text-transform: none;
  color: var(--brand-ink-muted);
  max-width: 65ch;
}
.sa-rform-consent-note a {
  color: var(--brand-ink-muted);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.sa-rform-consent-note a:hover { color: var(--brand-accent); }

/* Hide Continue button on the thanks step (last page, no further input) */
.sa-rform[data-flow="stepper"] .sa-rform-step.is-active:has(.sa-rform-thanks) ~ .sa-rform-foot .sa-rform-cta {
  visibility: hidden;
}

/* Conditional question visibility — hides steps whose data-hide-if rule matches a current answer */
.sa-rform-step.is-hidden { display: none !important; }

/* ── 'Add another story' chb rendered as a button ──────────────── */
/* Hide the question chrome on the chb step — the button text says it all */
.sa-rform-q:has(.aa-widget-chb) .sa-rform-q-num,
.sa-rform-q:has(.aa-widget-chb) .sa-rform-q-label,
.sa-rform-q:has(.aa-widget-chb) .sa-rform-q-helper {
  display: none;
}
.sa-rform-q:has(.aa-widget-chb) {
  padding-top: 32px;
  align-items: center;
}
/* Hide the actual checkbox (kept in DOM so AA still saves the value) */
.sa-rform-q:has(.aa-widget-chb) .aa-widget-chb input[type="checkbox"] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
/* The .aa-input becomes the styled button */
.sa-rform-q:has(.aa-widget-chb) .aa-widget-chb {
  display: block;
  position: static;
}
.sa-rform-q:has(.aa-widget-chb) .aa-widget-chb .aa-input {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 28px;
  border: 1.5px dashed var(--brand-line);
  border-radius: var(--brand-corner);
  background: transparent;
  color: var(--brand-ink);
  cursor: pointer;
  font: 500 16px/1.2 var(--brand-body-font);
  letter-spacing: 0.005em;
  transition: border-color 120ms, background 120ms, color 120ms, transform 80ms;
  user-select: none;
}
.sa-rform-q:has(.aa-widget-chb) .aa-widget-chb .aa-input::before {
  content: "+ Add another story";
}
.sa-rform-q:has(.aa-widget-chb) .aa-widget-chb .aa-input:hover {
  border-color: var(--brand-accent);
  color: var(--brand-accent);
}
.sa-rform-q:has(.aa-widget-chb) .aa-widget-chb .aa-input:active {
  transform: translateY(1px);
}
/* Active state — chb checked */
.sa-rform-q:has(.aa-widget-chb input:checked) .aa-widget-chb .aa-input {
  border-style: solid;
  border-color: var(--brand-accent);
  background: var(--brand-accent);
  color: var(--brand-accent-ink);
}
.sa-rform-q:has(.aa-widget-chb input:checked) .aa-widget-chb .aa-input::before {
  content: "✓ Adding a second story — click to remove";
}
/* Hide the AA save indicator (px.gif) and any other inline noise on this widget */
.sa-rform-q:has(.aa-widget-chb) .aa-widget-chb img[src$="px.gif"] { display: none !important; }

/* ── Footer COPY button + LINK anchor (split affordance) ─────── */
.sa-rform-foot-actions {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand-ink-muted);
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
}
.sa-rform-foot-copy {
  font-family: inherit;
  font-size: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: var(--brand-ink-muted);
  background: transparent;
  border: 0;
  border-bottom: 1px dashed color-mix(in oklab, var(--brand-ink-muted) 50%, transparent);
  padding: 4px 0;
  cursor: pointer;
  transition: color 120ms, border-color 120ms;
}
.sa-rform-foot-copy:hover {
  color: var(--brand-accent);
  border-bottom-color: var(--brand-accent);
}
.sa-rform-foot-copy.is-copied {
  color: var(--brand-accent);
  border-bottom-color: transparent;
  cursor: default;
}
@media (max-width: 600px) {
  .sa-rform-foot-actions { font-size: 10px; gap: 4px; }
}

/* ── Multi-select (mse) widget rendered as chip-style cards ─────── */
.sa-rform .aa-widget-mse { display: block !important; position: static !important; }
.sa-rform .aa-widget-mse .aa-input { display: block; position: static; }
.sa-rform .aa-widget-mse img[src$="px.gif"] { display: none !important; }
.sa-rform .aa-widget-mse .aa-mch-list {
  max-height: none !important;
  overflow: visible !important;
}
.sa-rform .aa-widget-mse .aa-tab-mch {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.sa-rform .aa-widget-mse .aa-tab-mch label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border: 1px solid var(--brand-line);
  border-radius: var(--brand-corner);
  cursor: pointer;
  font-size: 13px;
  color: var(--brand-ink);
  transition: border-color 120ms, background 120ms, color 120ms;
  user-select: none;
}
.sa-rform .aa-widget-mse .aa-tab-mch label:hover {
  border-color: var(--brand-accent);
}
.sa-rform .aa-widget-mse .aa-tab-mch label:has(input:checked) {
  border-color: var(--brand-accent);
  background: color-mix(in oklab, var(--brand-accent) 12%, transparent);
}
.sa-rform .aa-widget-mse .aa-tab-mch input[type="checkbox"] {
  appearance: none;
  width: 14px; height: 14px;
  border: 1.5px solid var(--brand-line);
  border-radius: 3px;
  display: inline-block;
  position: relative;
  flex-shrink: 0;
  cursor: pointer;
  transition: border-color 120ms, background 120ms;
}
.sa-rform .aa-widget-mse .aa-tab-mch input[type="checkbox"]:checked {
  background: var(--brand-accent);
  border-color: var(--brand-accent);
}
.sa-rform .aa-widget-mse .aa-tab-mch input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  inset: 2px 3px 3px 3px;
  border-right: 2px solid var(--brand-accent-ink);
  border-bottom: 2px solid var(--brand-accent-ink);
  transform: rotate(45deg) translate(-1px, -1px);
  width: 4px; height: 8px;
}
.sa-rform .aa-widget-mse .aa-tab-mch label > span { line-height: 1.3; }

/* Compact mode (About-you grid) — mse spans full width */
.sa-rform-step:has(.sa-rform-q + .sa-rform-q + .sa-rform-q) > .sa-rform-q:has(.aa-widget-mse) {
  grid-column: 1 / -1;
}

/* ── Hide AA's 'Selected:' tag header above mse chips (shown after page reload) */
.sa-rform .aa-widget-mse .aa-mch-selected { display: none; }

/* Tighten native Sector select to match other compact-mode inputs */
.sa-rform-step:has(.sa-rform-q + .sa-rform-q + .sa-rform-q) .aa-widget-sel select {
  font-size: 13px;
  line-height: 1.3;
}

/* ── Rio 'Other (please specify)' inline text input ─────────────── */
/* AA's other_option puts a <span class="aa-rio-other-txt"><input...></span>
   inside the .aa-rio-other-option <label>, hidden until the Other radio is chosen. */
.sa-rform .aa-widget-rio .aa-tab-rio label.aa-rio-other-option {
  flex-wrap: wrap;
}
.sa-rform .aa-widget-rio .aa-rio-other-txt {
  display: block;
  width: 100%;
  margin-top: 10px;
}
.sa-rform .aa-widget-rio .aa-rio-other-txt input {
  width: 100%;
  padding: 12px 16px;
  height: auto;
  background: var(--brand-ground);
  border: 1px solid var(--brand-line);
  border-radius: var(--brand-corner);
  font: 400 15px/1.4 var(--brand-body-font);
  color: var(--brand-ink);
  letter-spacing: 0;
  transition: border-color 120ms;
  box-sizing: border-box;
}
.sa-rform .aa-widget-rio .aa-rio-other-txt input:focus {
  outline: none;
  border-color: var(--brand-accent);
}
.sa-rform .aa-widget-rio .aa-rio-other-txt input::placeholder {
  color: var(--brand-ink-muted);
  opacity: 0.7;
  font-style: italic;
}

/* ── 'Finished' chb is invisible — submit-time flag, not user-facing ── */
.sa-rform-q:has(.aa-widget-chb input[name*="text__________26"]) {
  display: none !important;
}

/* Scope the 'Add another story' button styling to source 18 only,
   so other chb questions (like the new finished flag) aren't styled as buttons */
/* (Existing rules use .sa-rform-q:has(.aa-widget-chb) — re-narrow them) */
.sa-rform-q:has(.aa-widget-chb input[name*="text__________26"]) .aa-widget-chb .aa-input,
.sa-rform-q:has(.aa-widget-chb input[name*="text__________26"]) .aa-widget-chb {
  /* defensive: in case display:none fails for any reason, kill button styling here too */
  all: unset;
}

/* Mobile: drop the connecting words so footer reads '↗ COPY LINK' instead of
   '↗ COPY THIS LINK TO CONTINUE LATER' (which crowded the Continue button on small screens) */
@media (max-width: 600px) {
  .sa-rform-foot-fluff { display: none; }
}