/* ═══════════════════════════════════════════════════════════════════════════
   Forms & Surveys — member side (forms-member.js)
   Redesigned 2026-10-14 to Paul's signed-off Figma frames (file sLD7GZYZ4YRD05XklhX0Xn, page 455:2, D1–D13 and
   M1–M9). One look for every survey and form.

   Rules this file keeps:
   - Scoped to #tab-forms. The shared oecta-surveyjs-adapter.css (pinned by verify-mobile-forms, mirrored by the OT
     Survey) is NOT edited; this file only refines SurveyJS inside the Forms tab.
   - Tokens only: no raw colours. Dark mode follows because body.dark-mode remaps the tokens.
   - No 1px lines between sections: tone shifts separate them. No card inside a card: inside the survey sheet the
     questions lose SurveyJS's frame.
   - Amber is a fill (the rule over the title, the current part's marker, a dot), never text.
   - Every control is at least 44px tall. Status always carries words next to its dot.
   - Fonts: only the token fonts are named here. A member's Settings → Appearance choice wins anyway, because
     style2.css sets body[data-font] * { font-family: inherit !important }.
   - Phones at 768px.
   - FULL CONTENT CANVAS (DESIGN.md, "Anti-Center-Squeeze"): no page or section is capped and centred. The page uses
     the whole content area; wide screens get more columns (list + rail, parts + sheet, answers in columns), never a
     floating column with empty margins. Only running text keeps a reading measure (.fs-desc, .fs-block__p).
     The first build capped the page at 1120px centred; Paul caught it on 2026-10-15.
   ═══════════════════════════════════════════════════════════════════════════ */

#tab-forms .fs-page {
  margin: 0;
  padding: var(--oecta-space-xl) var(--oecta-space-2xl) var(--oecta-space-3xl);
  color: var(--oecta-on-surface);
  font-family: var(--oecta-font-body);
}

/* ── Shared type ─────────────────────────────────────────────────────────── */
#tab-forms .fs-h1 {
  font-family: var(--oecta-font-display);
  font-size: var(--oecta-text-2xl);
  font-weight: var(--oecta-weight-bold);
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--oecta-on-surface);
}
#tab-forms .fs-h1--xl { font-size: var(--oecta-text-3xl); }
#tab-forms .fs-h2 {
  font-family: var(--oecta-font-display);
  font-size: var(--oecta-text-lg);
  font-weight: var(--oecta-weight-bold);
  margin: 0 0 var(--oecta-space-md);
  color: var(--oecta-on-surface);
}
#tab-forms .fs-eyebrow {
  font-size: var(--oecta-text-xs);
  font-weight: var(--oecta-weight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--oecta-on-surface-variant);
  margin: 0 0 var(--oecta-space-xs);
}
#tab-forms .fs-lede,
#tab-forms .fs-sub {
  font-size: var(--oecta-text-base);
  color: var(--oecta-on-surface-variant);
  margin: 0 0 var(--oecta-space-md);
  line-height: 1.5;
}
#tab-forms .fs-desc {
  font-size: 1rem;
  line-height: 1.55;
  color: var(--oecta-on-surface-variant);
  max-width: 46rem;
  margin: var(--oecta-space-md) 0 0;
}
#tab-forms .fs-meta {
  font-size: var(--oecta-text-sm);
  font-weight: var(--oecta-weight-semibold);
  color: var(--oecta-on-surface-variant);
  margin: var(--oecta-space-md) 0 0;
}
#tab-forms .fs-rule {
  display: block;
  width: 40px;
  height: 4px;
  border-radius: var(--oecta-radius-pill);
  background: var(--oecta-accent);
  margin-bottom: var(--oecta-space-lg);
}
#tab-forms .fs-sr {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* ── Status dots: always beside words ────────────────────────────────────── */
#tab-forms .fs-status {
  display: block;
  font-size: var(--oecta-text-sm);
  font-weight: var(--oecta-weight-semibold);
  color: var(--oecta-on-surface);
  margin: var(--oecta-space-sm) 0 0;
}
#tab-forms .fs-status__more { font-weight: var(--oecta-weight-regular); color: var(--oecta-on-surface-variant); }
#tab-forms .fs-dot {
  display: inline-block;
  vertical-align: middle;
  margin-right: var(--oecta-space-sm);
  width: 8px; height: 8px;
  border-radius: var(--oecta-radius-round);
  background: var(--oecta-outline);
  transform: translateY(-1px);
}
#tab-forms .fs-dot--amber { background: var(--oecta-accent); }
#tab-forms .fs-dot--ok { background: var(--oecta-success); }
#tab-forms .fs-dot--idle { background: var(--oecta-outline); }

/* ── Buttons and links ───────────────────────────────────────────────────── */
#tab-forms .fs-btn {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--oecta-space-sm);
  min-height: 44px;
  padding: 0 var(--oecta-space-lg);
  border: 0;
  border-radius: var(--oecta-radius-md);
  background: var(--oecta-surface-lowest);
  box-shadow: inset 0 0 0 1px var(--oecta-outline-variant);
  color: var(--oecta-on-surface);
  font: inherit;
  font-size: var(--oecta-text-base);
  font-weight: var(--oecta-weight-semibold);
  text-decoration: none;
  cursor: pointer;
  transition: background var(--oecta-duration-fast) var(--oecta-ease);
}
#tab-forms .fs-btn:hover { background: var(--oecta-surface-low); }
#tab-forms .fs-btn .material-icons-outlined { font-size: 18px; }
#tab-forms .fs-btn--primary {
  background: var(--oecta-primary-container);
  color: var(--oecta-on-primary-container);
  box-shadow: none;
}
/* Hover mixes toward the text colour: darker navy in light mode, lighter blue in dark (keeps its label above AA) */
#tab-forms .fs-btn--primary:hover { background: color-mix(in srgb, var(--oecta-primary-container) 88%, var(--oecta-on-surface)); }
#tab-forms .fs-btn--sm { padding: 0 var(--oecta-space-md); font-size: var(--oecta-text-sm); }
#tab-forms .fs-btn[aria-disabled="true"] { opacity: 0.65; cursor: progress; }
#tab-forms .fs-btn[hidden],
#tab-forms .fs-btn [hidden] { display: none; }

#tab-forms .fs-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--oecta-primary-text);
  font: inherit;
  font-size: var(--oecta-text-sm);
  font-weight: var(--oecta-weight-semibold);
  text-decoration: none;
  cursor: pointer;
}
#tab-forms .fs-link:hover { text-decoration: underline; }
#tab-forms .fs-back {
  display: inline-flex;
  align-items: center;
  gap: var(--oecta-space-xs);
  min-height: 44px;
  margin-bottom: var(--oecta-space-lg);
  color: var(--oecta-primary-text);
  font-size: var(--oecta-text-sm);
  font-weight: var(--oecta-weight-semibold);
  text-decoration: none;
}
#tab-forms .fs-back .material-icons-outlined { font-size: 16px; }
#tab-forms .fs-back:hover { text-decoration: underline; }

#tab-forms :is(a, button):focus-visible {
  outline: none;
  box-shadow: var(--oecta-focus-ring);
}
#tab-forms [tabindex="-1"]:focus { outline: none; }

/* ── Notices ─────────────────────────────────────────────────────────────── */
#tab-forms .fs-notice {
  display: flex;
  align-items: baseline;
  gap: var(--oecta-space-md);
  padding: var(--oecta-space-md) var(--oecta-space-lg);
  border-radius: var(--oecta-radius-md);
  background: var(--oecta-surface-low);
  font-size: var(--oecta-text-sm);
  font-weight: var(--oecta-weight-semibold);
  color: var(--oecta-on-surface);
  margin: var(--oecta-space-md) 0 0;
}
/* white-space: inside a question SurveyJS sets nowrap, and the limit notice ran off a phone screen */
#tab-forms .fs-notice { white-space: normal; }
#tab-forms .fs-notice > div { min-width: 0; }
#tab-forms .fs-notice .fs-dot { margin-right: 0; background: var(--oecta-accent); }
#tab-forms .fs-notice--error {
  background: color-mix(in srgb, var(--oecta-error-text) 8%, var(--oecta-surface-lowest));
  color: var(--oecta-error-text);
}
#tab-forms .fs-notice--error .fs-dot { background: var(--oecta-error-text); }
#tab-forms .fs-notice--success .fs-dot { background: var(--oecta-success); }

/* ── Loading ─────────────────────────────────────────────────────────────── */
#tab-forms .fs-skel {
  height: 132px;
  border-radius: var(--oecta-radius-xl);
  background: linear-gradient(90deg, var(--oecta-surface-low) 0%, var(--oecta-surface-container) 50%, var(--oecta-surface-low) 100%);
  background-size: 200% 100%;
  animation: fs-shimmer 1.4s ease-in-out infinite;
  margin-bottom: var(--oecta-space-lg);
}
#tab-forms .fs-skel--sm { height: 72px; border-radius: var(--oecta-radius-lg); }
#tab-forms .fs-skel--title { height: 48px; max-width: 420px; border-radius: var(--oecta-radius-md); }
@keyframes fs-shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }
@media (prefers-reduced-motion: reduce) { #tab-forms .fs-skel { animation: none; } }

/* ═══ The list (D1–D3, M1) ═══════════════════════════════════════════════ */
#tab-forms .fs-listhead { margin-bottom: var(--oecta-space-xl); }
#tab-forms .fs-list .fs-h1 { font-size: var(--oecta-text-xl); margin-bottom: var(--oecta-space-xs); }
#tab-forms .fs-counts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--oecta-space-sm) var(--oecta-space-lg);
  margin: 0;
  font-size: var(--oecta-text-xs);
  font-weight: var(--oecta-weight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--oecta-on-surface-variant);
}
#tab-forms .fs-counts b { color: var(--oecta-on-surface); font-weight: var(--oecta-weight-semibold); margin-right: 2px; }
#tab-forms .fs-list__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: var(--oecta-space-2xl);
  align-items: start;
}
#tab-forms .fs-section { margin-bottom: var(--oecta-space-2xl); }
#tab-forms .fs-card {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) auto;
  gap: var(--oecta-space-xl);
  align-items: center;
  padding: var(--oecta-space-xl);
  border-radius: var(--oecta-radius-xl);
  background: var(--oecta-surface-lowest);
  box-shadow: var(--oecta-shadow-sm);
  margin-bottom: var(--oecta-space-md);
}
#tab-forms .fs-card > .fs-date { align-self: start; }
#tab-forms .fs-card__title {
  font-family: var(--oecta-font-display);
  font-size: var(--oecta-text-xl);
  font-weight: var(--oecta-weight-bold);
  line-height: 1.25;
  margin: 0;
  color: var(--oecta-on-surface);
}
#tab-forms .fs-card__lead {
  font-size: var(--oecta-text-md);
  line-height: 1.5;
  color: var(--oecta-on-surface-variant);
  margin: var(--oecta-space-sm) 0 0;
}
#tab-forms .fs-card__meta { font-size: var(--oecta-text-sm); color: var(--oecta-on-surface-variant); margin: var(--oecta-space-sm) 0 0; }
#tab-forms .fs-date {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 56px;
  min-height: 72px;
  border-radius: var(--oecta-radius-md);
  background: var(--oecta-surface-low);
  color: var(--oecta-on-surface);
  line-height: 1.1;
}
#tab-forms .fs-date__m,
#tab-forms .fs-date__w { font-size: var(--oecta-text-xs); font-weight: var(--oecta-weight-semibold); letter-spacing: 0.06em; color: var(--oecta-on-surface-variant); }
#tab-forms .fs-date__d { font-family: var(--oecta-font-display); font-size: var(--oecta-text-xl); font-weight: var(--oecta-weight-bold); margin: 2px 0; }
#tab-forms .fs-date--icon { min-height: 56px; color: var(--oecta-primary-text); }
#tab-forms .fs-caughtup {
  display: flex; align-items: center; gap: var(--oecta-space-sm);
  padding: var(--oecta-space-lg) var(--oecta-space-xl);
  border-radius: var(--oecta-radius-lg);
  background: var(--oecta-surface-lowest);
  color: var(--oecta-on-surface-variant);
  font-size: var(--oecta-text-base);
  margin: 0;
}
#tab-forms .fs-caughtup .material-icons-outlined { color: var(--oecta-success-text); }
#tab-forms .fs-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--oecta-space-lg);
  padding: var(--oecta-space-md) var(--oecta-space-lg);
  border-radius: var(--oecta-radius-lg);
  background: var(--oecta-surface-container);
  margin-bottom: var(--oecta-space-sm);
}
#tab-forms .fs-row__title,
#tab-forms .fs-sent__title { font-size: var(--oecta-text-base); font-weight: var(--oecta-weight-semibold); margin: 0; color: var(--oecta-on-surface); }
#tab-forms .fs-row .fs-status,
#tab-forms .fs-sent .fs-status { margin-top: 2px; font-weight: var(--oecta-weight-regular); color: var(--oecta-on-surface-variant); }
#tab-forms .fs-list__rail .fs-sub { font-size: var(--oecta-text-sm); }
#tab-forms .fs-sent {
  padding: var(--oecta-space-md) var(--oecta-space-lg) var(--oecta-space-xs);
  border-radius: var(--oecta-radius-lg);
  background: var(--oecta-surface-lowest);
  margin-bottom: var(--oecta-space-md);
}
#tab-forms .fs-sent[hidden] { display: none; }
#tab-forms .fs-empty {
  text-align: center;
  padding: var(--oecta-space-3xl) var(--oecta-space-xl);
  border-radius: var(--oecta-radius-xl);
  background: var(--oecta-surface-lowest);
}
#tab-forms .fs-empty .material-icons-outlined { font-size: 40px; color: var(--oecta-on-surface-variant); }
#tab-forms .fs-empty__h { font-family: var(--oecta-font-display); font-size: var(--oecta-text-lg); margin: var(--oecta-space-md) 0 var(--oecta-space-xs); }
#tab-forms .fs-empty__p { color: var(--oecta-on-surface-variant); margin: 0; font-size: var(--oecta-text-base); }

/* ── Dead ends (D12) ─────────────────────────────────────────────────────── */
#tab-forms .fs-titleblock { margin-bottom: var(--oecta-space-2xl); }
#tab-forms .fs-titleblock--compact { margin-bottom: var(--oecta-space-xl); }
#tab-forms .fs-block {
  padding: var(--oecta-space-2xl);
  border-radius: var(--oecta-radius-xl);
  background: var(--oecta-surface-lowest);
  box-shadow: var(--oecta-shadow-sm);
}
#tab-forms .fs-block__h { font-family: var(--oecta-font-display); font-size: var(--oecta-text-lg); font-weight: var(--oecta-weight-bold); margin: 0 0 var(--oecta-space-sm); }
#tab-forms .fs-block__p { margin: 0; max-width: 46rem; font-size: var(--oecta-text-md); line-height: 1.55; color: var(--oecta-on-surface-variant); }
#tab-forms .fs-block__act { margin-top: var(--oecta-space-xl); }

/* ═══ The survey (D4–D9, M2–M6) ══════════════════════════════════════════ */
#tab-forms .fs-survey--later .fs-titleblock { margin-bottom: var(--oecta-space-xl); }
#tab-forms .fs-survey--later .fs-titleblock :is(.fs-rule, .fs-desc, .fs-meta) { display: none; }
#tab-forms .fs-survey__grid {
  display: grid;
  grid-template-columns: 248px minmax(0, 1fr);
  gap: var(--oecta-space-3xl);
  align-items: start;
}
#tab-forms .fs-survey--single .fs-survey__grid { grid-template-columns: minmax(0, 1fr); }
#tab-forms .fs-survey--single :is(.fs-parts, .fs-strip) { display: none; }

/* Parts rail — back-navigation only */
#tab-forms .fs-parts { position: sticky; top: var(--oecta-space-xl); }
#tab-forms .fs-parts__list { list-style: none; margin: 0 0 var(--oecta-space-md); padding: 0; }
#tab-forms .fs-part {
  display: flex;
  align-items: center;
  gap: var(--oecta-space-md);
  width: 100%;
  min-height: 44px;
  box-sizing: border-box;
  padding: var(--oecta-space-xs) var(--oecta-space-md);
  margin-bottom: var(--oecta-space-xs);
  border: 0;
  border-radius: var(--oecta-radius-md);
  background: none;
  font: inherit;
  font-size: var(--oecta-text-sm);
  text-align: left;
  color: var(--oecta-on-surface-variant);
}
#tab-forms button.fs-part { cursor: pointer; }
#tab-forms button.fs-part:hover { background: var(--oecta-surface-low); }
#tab-forms .fs-part__n {
  flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px;
  border-radius: var(--oecta-radius-round);
  background: var(--oecta-surface-container);
  font-family: var(--oecta-font-mono);
  font-size: 11px;
  color: var(--oecta-on-surface-variant);
}
#tab-forms .fs-part--done .fs-part__n { background: var(--oecta-primary-container); color: var(--oecta-on-primary-container); }
#tab-forms .fs-part--done .fs-part__n .material-icons-outlined { font-size: 15px; }
#tab-forms .fs-part--current {
  background: var(--oecta-surface-lowest);
  box-shadow: inset 3px 0 0 var(--oecta-accent);
  color: var(--oecta-on-surface);
  font-weight: var(--oecta-weight-semibold);
}
#tab-forms .fs-part--current .fs-part__n { background: var(--oecta-surface-lowest); box-shadow: inset 0 0 0 1.5px var(--oecta-primary-text); color: var(--oecta-primary-text); }
#tab-forms .fs-progress {
  height: 4px;
  border-radius: var(--oecta-radius-pill);
  background: var(--oecta-surface-container);
  overflow: hidden;
}
#tab-forms .fs-progress > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--oecta-primary-container);
  transition: width var(--oecta-duration-base) var(--oecta-ease);
}
#tab-forms .fs-parts__meta { font-size: var(--oecta-text-sm); color: var(--oecta-on-surface-variant); margin: var(--oecta-space-sm) 0 0; }

/* Phone strip — hidden on desktop */
#tab-forms .fs-strip { display: none; }

/* The sheet: the one card on the page */
#tab-forms .fs-sheet {
  padding: var(--oecta-space-2xl) var(--oecta-space-3xl);
  border-radius: var(--oecta-radius-2xl);
  background: var(--oecta-surface-lowest);
  box-shadow: var(--oecta-shadow-sm);
  min-width: 0;
}
#tab-forms .fs-sheet__title {
  font-family: var(--oecta-font-display);
  font-size: var(--oecta-text-xl);
  font-weight: var(--oecta-weight-bold);
  margin: 0 0 var(--oecta-space-xl);
  color: var(--oecta-on-surface);
}
#tab-forms .fs-sheet__notice:empty { display: none; }
#tab-forms .fs-sheet__notice { margin-bottom: var(--oecta-space-lg); }
#tab-forms .fs-dock {
  display: flex;
  align-items: center;
  gap: var(--oecta-space-md);
  margin-top: var(--oecta-space-2xl);
}
#tab-forms .fs-btn--next { margin-left: auto; }
/* Save and finish later (Figma S1): beside Next, pushed right with it; Previous stays on the left */
#tab-forms .fs-btn--save { margin-left: auto; }
#tab-forms .fs-btn--save:not([hidden]) + .fs-btn--next { margin-left: 0; }
#tab-forms .fs-parts__saved { font-size: var(--oecta-text-sm); color: var(--oecta-on-surface-variant); margin: var(--oecta-space-xs) 0 0; }
#tab-forms .fs-parts__saved:empty { display: none; }

/* ── SurveyJS inside the sheet: no frames, no own chrome ─────────────────── */
#tab-forms .fs-sheet .sd-root-modern { background: transparent; }
#tab-forms .fs-sheet .sd-container-modern { margin: 0; }
#tab-forms .fs-sheet .sd-body,
#tab-forms .fs-sheet .sd-body.sd-body--static,
#tab-forms .fs-sheet .sd-body.sd-body--responsive { padding: 0; max-width: none; }
#tab-forms .fs-sheet .sd-page,
#tab-forms .fs-sheet .sd-page__content,
#tab-forms .fs-sheet .sd-question__header-and-content-container { padding: 0; }
#tab-forms .fs-sheet .sd-page__row + .sd-page__row { margin-top: var(--oecta-space-2xl); }
#tab-forms .fs-sheet .sd-element--with-frame {
  padding: 0;
  margin: 0;
  background: transparent;
  box-shadow: none;
  border-radius: 0;
}
#tab-forms .fs-sheet .sd-question__header { padding: 0; margin-bottom: var(--oecta-space-md); }
#tab-forms .fs-sheet .sd-question__title {
  font-family: var(--oecta-font-display);
  font-size: var(--oecta-text-lg);
  font-weight: var(--oecta-weight-bold);
  line-height: 1.35;
  color: var(--oecta-on-surface);
  margin: 0;
}
#tab-forms .fs-sheet .sd-question__description {
  padding: 0;
  font-size: var(--oecta-text-sm);
  color: var(--oecta-on-surface-variant);
  margin-top: 2px;
}
/* The count sits at the right of the description: "2 of 2 chosen", "4 of 11 answered", "2 of 3 picked" */
#tab-forms .fs-sheet [data-fs-q] .sd-question__header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: var(--oecta-space-lg);
  align-items: baseline;
}
#tab-forms .fs-sheet [data-fs-q] .sd-question__header > * { grid-column: 1 / -1; }
#tab-forms .fs-sheet [data-fs-q] .sd-question__header > .sd-question__description { grid-column: 1; }
#tab-forms .fs-sheet [data-fs-q] .sd-question__header > .fs-qcount { grid-column: 2; }
#tab-forms .fs-qcount {
  margin: 0;
  font-family: var(--oecta-font-mono);
  font-size: var(--oecta-text-xs);
  color: var(--oecta-on-surface-variant);
  white-space: nowrap;
  text-align: right;
}
#tab-forms .fs-qcount:empty { display: none; }

/* Errors: words in the error colour on a tint, never colour alone */
#tab-forms .fs-sheet .sd-question__erbox {
  border-radius: var(--oecta-radius-md);
  background: color-mix(in srgb, var(--oecta-error-text) 8%, var(--oecta-surface-lowest));
  color: var(--oecta-error-text);
  font-size: var(--oecta-text-sm);
  font-weight: var(--oecta-weight-semibold);
  padding: var(--oecta-space-sm) var(--oecta-space-md);
  margin: 0 0 var(--oecta-space-md);
}

/* Choices: tonal tiles; the chosen one turns white with a navy outline */
/* As the sheet widens the answers flow into columns; a phone gets one (min(100%, …)). The ladder stays one column. */
#tab-forms .fs-sheet .sd-selectbase { display: grid; gap: var(--oecta-space-sm); grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); }
#tab-forms .fs-sheet [data-fs-ladder] .sd-selectbase { grid-template-columns: minmax(0, 1fr); }
#tab-forms .fs-sheet .sd-selectbase__column { display: contents; }
#tab-forms .fs-sheet .sd-selectbase__item { display: block; margin: 0; padding: 0; min-width: 0; }
#tab-forms .fs-sheet .sd-selectbase__label {
  display: flex;
  align-items: center;
  gap: var(--oecta-space-md);
  min-height: 48px;
  height: 100%;
  box-sizing: border-box;
  padding: var(--oecta-space-sm) var(--oecta-space-lg);
  border-radius: var(--oecta-radius-md);
  background: var(--oecta-surface-low);
  cursor: pointer;
  transition: background var(--oecta-duration-fast) var(--oecta-ease);
}
#tab-forms .fs-sheet .sd-selectbase__label:hover { background: var(--oecta-surface-container); }
#tab-forms .fs-sheet .sd-item--checked .sd-selectbase__label {
  background: var(--oecta-surface-lowest);
  box-shadow: inset 0 0 0 1.5px var(--oecta-primary-text);
}
#tab-forms .fs-sheet .sd-item--disabled .sd-selectbase__label { cursor: not-allowed; opacity: 0.6; }
#tab-forms .fs-sheet .sd-item__control-label { font-size: 1rem; line-height: 1.4; color: var(--oecta-on-surface); }
#tab-forms .fs-sheet .sd-item__decorator { flex: none; }
#tab-forms .fs-sheet [data-fs-cols="2"] .sd-selectbase { grid-template-columns: repeat(2, minmax(0, 1fr)); }
#tab-forms .fs-sheet [data-fs-cols="3"] .sd-selectbase { grid-template-columns: repeat(3, minmax(0, 1fr)); }
#tab-forms .fs-sheet [data-fs-cols="4"] .sd-selectbase { grid-template-columns: repeat(4, minmax(0, 1fr)); }
#tab-forms .fs-limit:empty { display: none; }
#tab-forms .fs-sheet .sd-question__comment-area { margin-top: var(--oecta-space-sm); }

/* The ladder: a numbered step beside each rung; steps up to the chosen one fill navy (D7) */
#tab-forms .fs-sheet [data-fs-ladder] .sd-selectbase__item {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: var(--oecta-space-md);
  align-items: center;
}
#tab-forms .fs-step {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  border-radius: var(--oecta-radius-round);
  background: var(--oecta-surface-container);
  color: var(--oecta-on-surface-variant);
  font-size: var(--oecta-text-sm);
  font-weight: var(--oecta-weight-semibold);
}
#tab-forms [data-fs-fill="1"] .sd-selectbase__item:nth-of-type(-n+1) .fs-step,
#tab-forms [data-fs-fill="2"] .sd-selectbase__item:nth-of-type(-n+2) .fs-step,
#tab-forms [data-fs-fill="3"] .sd-selectbase__item:nth-of-type(-n+3) .fs-step,
#tab-forms [data-fs-fill="4"] .sd-selectbase__item:nth-of-type(-n+4) .fs-step,
#tab-forms [data-fs-fill="5"] .sd-selectbase__item:nth-of-type(-n+5) .fs-step,
#tab-forms [data-fs-fill="6"] .sd-selectbase__item:nth-of-type(-n+6) .fs-step,
#tab-forms [data-fs-fill="7"] .sd-selectbase__item:nth-of-type(-n+7) .fs-step { background: var(--oecta-primary-container); color: var(--oecta-on-primary-container); }

/* Text and comment boxes */
#tab-forms .fs-sheet :is(.sd-input, .sd-comment) { border-radius: var(--oecta-radius-md); font-size: 1rem; }
#tab-forms .fs-sheet .sd-remaining-character-counter {
  font-family: var(--oecta-font-mono);
  font-size: var(--oecta-text-xs);
  color: var(--oecta-on-surface-variant);
}

/* The matrix: zebra rows on desktop (D5) */
#tab-forms .fs-sheet .sd-table { border-collapse: separate; border-spacing: 0; width: 100%; }
/* SurveyJS sets a ~120px minimum per answer column plus a 40px inset for its own sideways scroller, so a 5-answer
   matrix overflowed the sheet. A fixed table shares the sheet's width out instead: the statement gets a third. */
#tab-forms .fs-sheet .sd-question--table .sd-question__content { padding-left: 0; padding-right: 0; overflow-x: visible; }
#tab-forms .fs-sheet .sd-table-wrapper { margin-left: 0; margin-right: 0; min-width: 0; width: 100%; }   /* SurveyJS: min-width calc(100% + 80px) */
#tab-forms .fs-sheet .sd-table-wrapper::before,
#tab-forms .fs-sheet .sd-table-wrapper::after { display: none; }
#tab-forms .fs-sheet .sd-matrix__table { table-layout: fixed; }
#tab-forms .fs-sheet .sd-matrix__table :is(th, td) { min-width: 0; width: auto; }   /* SurveyJS: th { width: 10000px } */
#tab-forms .fs-sheet .sd-matrix__table thead :is(th, td):first-child { width: 34%; }
#tab-forms .fs-sheet .sd-table__row:nth-child(odd) > td { background: var(--oecta-surface-low); }
#tab-forms .fs-sheet .sd-table__row > td:first-child { border-radius: var(--oecta-radius-md) 0 0 var(--oecta-radius-md); }
#tab-forms .fs-sheet .sd-table__row > td:last-child { border-radius: 0 var(--oecta-radius-md) var(--oecta-radius-md) 0; }
#tab-forms .fs-sheet .sd-table__cell--row-text { font-size: var(--oecta-text-base); color: var(--oecta-on-surface); }
#tab-forms .fs-sheet .sd-table__cell--header { font-size: var(--oecta-text-sm); font-weight: var(--oecta-weight-semibold); color: var(--oecta-on-surface-variant); }
#tab-forms .fs-sheet .sd-matrix__label { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }

/* The ranking: SurveyJS's drag list is replaced by the keyboard-and-tap control (D6) */
#tab-forms [data-fs-rank] .sv-ranking { display: none; }
#tab-forms .fs-rank .fs-eyebrow { margin-top: var(--oecta-space-lg); margin-bottom: var(--oecta-space-sm); }
#tab-forms .fs-rank__list,
#tab-forms .fs-rank__choices { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--oecta-space-sm); }
/* The portal keeps button text on one line; a long choice must wrap or it pushes the list sideways on a phone */
#tab-forms .fs-rank :is(.fs-rank__add, .fs-rank__t) { white-space: normal; overflow-wrap: anywhere; }
#tab-forms .fs-rank__item,
#tab-forms .fs-rank__slot {
  display: flex;
  align-items: center;
  gap: var(--oecta-space-md);
  min-height: 56px;
  padding: var(--oecta-space-xs) var(--oecta-space-sm) var(--oecta-space-xs) var(--oecta-space-md);
  border-radius: var(--oecta-radius-md);
  box-sizing: border-box;
}
#tab-forms .fs-rank__item { background: var(--oecta-surface-lowest); box-shadow: inset 0 0 0 1.5px var(--oecta-primary-text); }
#tab-forms .fs-rank__slot { background: var(--oecta-surface-low); color: var(--oecta-on-surface-variant); font-size: var(--oecta-text-sm); }
#tab-forms .fs-rank__n {
  flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  border-radius: var(--oecta-radius-round);
  background: var(--oecta-primary-container);
  color: var(--oecta-on-primary-container);
  font-size: var(--oecta-text-sm);
  font-weight: var(--oecta-weight-semibold);
}
#tab-forms .fs-rank__slot .fs-rank__n { background: var(--oecta-surface-lowest); color: var(--oecta-on-surface-variant); }
#tab-forms .fs-rank__t { flex: 1; min-width: 0; font-size: 1rem; color: var(--oecta-on-surface); }
#tab-forms .fs-rank__acts { display: flex; gap: var(--oecta-space-xs); }
#tab-forms .fs-icbtn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  border: 0;
  border-radius: var(--oecta-radius-md);
  background: none;
  color: var(--oecta-on-surface);
  cursor: pointer;
}
#tab-forms .fs-icbtn:hover { background: var(--oecta-surface-low); }
#tab-forms .fs-icbtn[aria-disabled="true"] { color: var(--oecta-text-subtle); cursor: default; background: none; }
#tab-forms .fs-icbtn .material-icons-outlined { font-size: 20px; }
#tab-forms .fs-rank__add {
  display: flex;
  align-items: center;
  gap: var(--oecta-space-md);
  width: 100%;
  min-height: 56px;
  padding: var(--oecta-space-sm) var(--oecta-space-lg);
  border: 0;
  border-radius: var(--oecta-radius-md);
  background: var(--oecta-surface-low);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
#tab-forms .fs-rank__add:hover { background: var(--oecta-surface-container); }
#tab-forms .fs-rank__add > .material-icons-outlined {
  flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  border-radius: var(--oecta-radius-round);
  background: var(--oecta-surface-lowest);
  color: var(--oecta-primary-text);
  font-size: 18px;
}
#tab-forms .fs-rank__addword { font-size: var(--oecta-text-sm); font-weight: var(--oecta-weight-semibold); color: var(--oecta-primary-text); }
#tab-forms .fs-rank__add[aria-disabled="true"] { cursor: not-allowed; opacity: 0.55; }
#tab-forms .fs-rank__add[aria-disabled="true"]:hover { background: var(--oecta-surface-low); }

/* "All parts" sheet (phone) */
#tab-forms .fs-partsheet { position: fixed; inset: 0; z-index: var(--oecta-z-sheet); }
#tab-forms .fs-partsheet__scrim { position: absolute; inset: 0; background: color-mix(in srgb, var(--oecta-primary) 50%, transparent); }
#tab-forms .fs-partsheet__panel {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  max-height: 80vh;
  overflow: auto;
  padding: var(--oecta-space-lg) var(--oecta-space-lg) calc(var(--oecta-space-xl) + env(safe-area-inset-bottom, 0px));
  border-radius: var(--oecta-radius-2xl) var(--oecta-radius-2xl) 0 0;
  background: var(--oecta-surface-lowest);
  box-shadow: var(--oecta-shadow-xl);
}
#tab-forms .fs-partsheet__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--oecta-space-sm); }
#tab-forms .fs-partsheet__head .fs-h2 { margin: 0; }

/* ═══ Thank-you (D10, D11, M7, M8) ══════════════════════════════════════ */
#tab-forms .fs-thanks__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 500px);
  gap: var(--oecta-space-3xl);
  align-items: start;
  margin-top: var(--oecta-space-xl);
}
#tab-forms .fs-thanks__grid--solo { grid-template-columns: minmax(0, 1fr); }
#tab-forms .fs-thanks .fs-h1 { margin-top: var(--oecta-space-sm); }
#tab-forms .fs-actions { display: flex; flex-wrap: wrap; gap: var(--oecta-space-md); margin-top: var(--oecta-space-xl); }
#tab-forms .fs-smscard {
  padding: var(--oecta-space-2xl);
  border-radius: var(--oecta-radius-xl);
  background: var(--oecta-surface-lowest);
  box-shadow: var(--oecta-shadow-sm);
}

/* ═══ Read-only: what you sent / what was asked (D13) ═══════════════════ */
/* The parts sit side by side as the screen widens (one column on a phone) */
#tab-forms .fs-ro__sheet {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr));
  gap: var(--oecta-space-2xl) var(--oecta-space-3xl);
  align-items: start;
  padding: var(--oecta-space-2xl) var(--oecta-space-3xl);
}
#tab-forms .fs-ro__part > .fs-eyebrow { margin-bottom: var(--oecta-space-md); }
#tab-forms .fs-ro__q + .fs-ro__q { margin-top: var(--oecta-space-lg); }
#tab-forms .fs-ro__label { font-size: var(--oecta-text-sm); font-weight: var(--oecta-weight-semibold); color: var(--oecta-on-surface-variant); margin: 0 0 var(--oecta-space-xs); }
#tab-forms .fs-ro__sublabel { font-size: var(--oecta-text-sm); font-weight: var(--oecta-weight-semibold); color: var(--oecta-on-surface); margin: var(--oecta-space-sm) 0 2px; }
#tab-forms .fs-ro__a,
#tab-forms .fs-ro__list { font-size: 1rem; line-height: 1.5; color: var(--oecta-on-surface); margin: 0; }
#tab-forms .fs-ro__list { padding: 0; }
#tab-forms ul.fs-ro__list { list-style: none; }
#tab-forms ol.fs-ro__list { list-style: decimal inside; }
#tab-forms .fs-ro__none { font-size: 1rem; color: var(--oecta-text-subtle); margin: 0; }
#tab-forms .fs-ro .fs-sub { font-size: var(--oecta-text-sm); }
#tab-forms .fs-ro__foot { margin-top: var(--oecta-space-xl); }

/* ═══ Middle widths ══════════════════════════════════════════════════════ */
@media (max-width: 1100px) {
  #tab-forms .fs-list__grid { grid-template-columns: minmax(0, 1fr); }
  #tab-forms .fs-survey__grid { grid-template-columns: 200px minmax(0, 1fr); gap: var(--oecta-space-xl); }
  #tab-forms .fs-sheet { padding: var(--oecta-space-xl) var(--oecta-space-2xl); }
  #tab-forms .fs-thanks__grid { grid-template-columns: minmax(0, 1fr); }
}

/* ═══ Phones (768px) ═════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* The portal's tab container already gives phones a 16px gutter */
  #tab-forms .fs-page { padding: var(--oecta-space-lg) 0 var(--oecta-space-3xl); }
  #tab-forms .fs-h1 { font-size: var(--oecta-text-xl); }
  #tab-forms .fs-survey .fs-titleblock .fs-h1,
  #tab-forms .fs-thanks .fs-h1 { font-size: var(--oecta-text-2xl); }
  #tab-forms .fs-survey--later .fs-titleblock .fs-h1 { font-size: var(--oecta-text-xl); }
  #tab-forms .fs-titleblock { margin-bottom: var(--oecta-space-lg); }

  /* List */
  #tab-forms .fs-card {
    grid-template-columns: 48px minmax(0, 1fr);
    gap: var(--oecta-space-md) var(--oecta-space-lg);
    padding: var(--oecta-space-lg);
  }
  #tab-forms .fs-date { width: 48px; min-height: 64px; }
  #tab-forms .fs-card__title { font-size: var(--oecta-text-lg); }
  #tab-forms .fs-card__act { grid-column: 1 / -1; }
  #tab-forms .fs-card__act .fs-btn { width: 100%; }
  #tab-forms .fs-row { flex-direction: column; align-items: flex-start; gap: 0; }

  /* Survey: the strip replaces the rail; the sheet goes edge to edge */
  #tab-forms .fs-survey__grid { display: block; }
  #tab-forms .fs-parts { display: none; }
  #tab-forms .fs-strip {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--oecta-space-sm) var(--oecta-space-md);
    margin: 0 calc(-1 * var(--oecta-space-lg));
    padding: var(--oecta-space-md) var(--oecta-space-lg);
    background: var(--oecta-surface-lowest);
  }
  #tab-forms .fs-survey--single .fs-strip { display: none; }
  #tab-forms .fs-strip .fs-eyebrow { margin: 0; }
  #tab-forms .fs-strip__title { margin: 2px 0 0; font-size: var(--oecta-text-base); font-weight: var(--oecta-weight-semibold); color: var(--oecta-on-surface); }
  #tab-forms .fs-strip .fs-progress { grid-column: 1 / -1; }
  #tab-forms .fs-sheet {
    margin: 0 calc(-1 * var(--oecta-space-lg));
    padding: var(--oecta-space-lg);
    border-radius: 0;
    box-shadow: none;
  }
  /* The strip already names the part */
  #tab-forms .fs-survey:not(.fs-survey--single) .fs-sheet > :is(.fs-eyebrow, .fs-sheet__title) { display: none; }
  #tab-forms .fs-sheet [data-fs-cols] .sd-selectbase { grid-template-columns: minmax(0, 1fr); }

  /* Matrix on a phone: the row's words across the top, then the answers in a row of columns (M3) */
  #tab-forms .fs-sheet .sd-question--mobile .sd-table,
  #tab-forms .fs-sheet .sd-question--mobile .sd-table tbody { display: block; }
  #tab-forms .fs-sheet .sd-question--mobile .sd-table thead { display: none; }
  #tab-forms .fs-sheet .sd-question--mobile .sd-table__row {
    display: flex;
    flex-direction: row;   /* SurveyJS stacks a phone matrix row as a column */
    flex-wrap: wrap;
    padding: var(--oecta-space-md) var(--oecta-space-sm);
    border-radius: var(--oecta-radius-md);
  }
  #tab-forms .fs-sheet .sd-question--mobile .sd-table__row:nth-child(odd) { background: var(--oecta-surface-low); }
  /* SurveyJS gives each answer cell a 120px minimum: five of them would overlap on a phone */
  #tab-forms .fs-sheet .sd-question--mobile .sd-table__row > td { min-width: 0; width: auto; margin: 0; background: none; border-radius: 0; padding: 0; }
  #tab-forms .fs-sheet .sd-question--mobile .sd-table__row > td:not(.sd-table__cell--row-text) { flex: 1 1 1px; }   /* 1px, not 0: they must not fit beside the row text */
  #tab-forms .fs-sheet .sd-question--mobile .sd-table__row > .sd-table__cell--row-text {
    flex: 1 0 100%;
    margin-bottom: var(--oecta-space-sm);
    font-weight: var(--oecta-weight-semibold);
    font-size: var(--oecta-text-sm);
  }
  #tab-forms .fs-sheet .sd-question--mobile .sd-matrix__label {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--oecta-space-xs);
    width: 100%;
    min-height: 56px;
    box-sizing: border-box;
    padding: var(--oecta-space-xs) 0 !important;   /* the adapter pads each phone answer 14px a side */
    border-radius: var(--oecta-radius-md);
  }
  #tab-forms .fs-sheet .sd-question--mobile .sd-matrix__responsive-title {
    display: block;
    margin: 0 !important;   /* the adapter pushes it 12px right with !important */
    font-size: var(--oecta-text-xs);
    color: var(--oecta-on-surface-variant);
    text-align: center;
  }

  /* The chosen answer reads in the main text colour (the adapter tints its tile; grey on that tint fails AA in dark) */
  #tab-forms .fs-sheet .sd-question--mobile .sd-item--checked .sd-matrix__responsive-title { color: var(--oecta-on-surface); font-weight: var(--oecta-weight-semibold); }

  /* The dock: Previous shrinks to an arrow; Next fills the width (M2, M3) */
  #tab-forms .fs-dock {
    position: sticky;
    bottom: calc(var(--oecta-bottom-nav-height) + env(safe-area-inset-bottom, 0px));
    z-index: 2;
    margin: var(--oecta-space-xl) calc(-1 * var(--oecta-space-lg)) 0;
    padding: var(--oecta-space-md) var(--oecta-space-lg);
    background: var(--oecta-glass-bg);
    -webkit-backdrop-filter: blur(var(--oecta-glass-blur));
    backdrop-filter: blur(var(--oecta-glass-blur));
  }
  #tab-forms .fs-btn--prev { flex: none; width: 44px; padding: 0; }
  #tab-forms .fs-btn--prev .fs-btn__txt {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
  #tab-forms .fs-btn--next { flex: 1; margin-left: 0; min-width: 0; }
  /* M10: on a phone "Save and finish later" is its own full-width line above Previous / Next */
  #tab-forms .fs-dock { flex-wrap: wrap; }
  #tab-forms .fs-btn--save { order: -1; flex: 1 0 100%; margin-left: 0; min-height: 44px; }
  #tab-forms .fs-btn--next .fs-btn__txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  /* Ranking rows wrap their actions under long words */
  #tab-forms .fs-rank__item { flex-wrap: wrap; padding-top: var(--oecta-space-sm); padding-bottom: var(--oecta-space-sm); }
  #tab-forms .fs-rank__acts { margin-left: auto; }
  #tab-forms .fs-rank__addword { display: none; }

  /* Read-only + thank-you */
  #tab-forms .fs-ro__sheet { margin: 0 calc(-1 * var(--oecta-space-lg)); padding: var(--oecta-space-xl) var(--oecta-space-lg); border-radius: 0; box-shadow: none; }
  #tab-forms .fs-actions .fs-btn { flex: 1 1 100%; }
  #tab-forms .fs-smscard { padding: var(--oecta-space-xl) var(--oecta-space-lg); }
  #tab-forms .fs-block { padding: var(--oecta-space-xl); }
}