/* Standard form design. The rules it follows are in docs/DESIGN_GUIDE.md.
   Practice colours arrive as --dsf-* variables built by practices/palette.py,
   which adjusts them so every pairing passes WCAG 2.1 AA. A practice's custom
   CSS loads after this file. */

@font-face {
  font-family: "Atkinson Hyperlegible";
  src: url("../vendor/fonts/atkinson-hyperlegible-latin-400-normal.f1f8a8210104.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible";
  src: url("../vendor/fonts/atkinson-hyperlegible-latin-700-normal.13a58e05dfd2.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "Fredoka";
  src: url("../vendor/fonts/fredoka-latin-600-normal.f56ba4069e24.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}

:root {
  /* Practice colours (fallbacks; the page sets the practice's own). */
  --dsf-primary: #21bbc2;
  --dsf-primary-ink: #1f2328;
  --dsf-primary-strong: #1ca0a6;
  --dsf-primary-text: #178085;
  --dsf-accent: #e24521;
  --dsf-accent-text: #d23d1b;
  --dsf-accent-strong: #e24521;
  --dsf-highlight: #ffdc66;

  /* Neutrals. Kept in step with PAGE, SURFACE, TEXT and MUTED in practices/palette.py. */
  --dsf-page: #fbfaf6;
  --dsf-surface: #ffffff;
  --dsf-text: #1f2328;
  --dsf-muted: #59606a;
  --dsf-line: #d6d3c9;
  --dsf-field-line: #8a8f96; /* 3.3:1 on white: the edge of an input must be visible (WCAG 1.4.11) */
  --dsf-danger: #b42318;

  --dsf-hero: color-mix(in srgb, var(--dsf-highlight) 45%, var(--dsf-page));
  --dsf-tint: color-mix(in srgb, var(--dsf-primary) 12%, var(--dsf-surface));
  --dsf-focus: 0 0 0 3px var(--dsf-surface), 0 0 0 6px var(--dsf-primary-strong);

  --dsf-font-display: "Fredoka", "Trebuchet MS", system-ui, sans-serif;
  --dsf-font-body: "Atkinson Hyperlegible", "Segoe UI", system-ui, -apple-system, sans-serif;
  --dsf-radius: 14px;
  --dsf-bar-height: 76px;
}

html {
  /* Keep a focused field clear of the sticky step bar and the bottom bar. */
  scroll-padding-top: 96px;
  scroll-padding-bottom: calc(var(--dsf-bar-height) + 24px);
}

body {
  background: var(--dsf-page);
  color: var(--dsf-text);
  font-family: var(--dsf-font-body);
  font-size: 1.0625rem; /* 17px: big enough that phones don't zoom on focus */
  line-height: 1.5;
}
/* Room for the bottom bar, on the pages that have one. */
body:has(.dsf-actions) {
  padding-bottom: calc(var(--dsf-bar-height) + env(safe-area-inset-bottom, 0px) + 24px);
}

h1, h2, h3, .dsf-display {
  font-family: var(--dsf-font-display);
  font-weight: 600;
  line-height: 1.2;
  text-wrap: balance;
}

a { color: var(--dsf-primary-text); }

:focus-visible { outline: none; box-shadow: var(--dsf-focus); }

[hidden] { display: none !important; }

.dsf-wrap {
  max-width: 46rem;
  margin: 0 auto;
  padding-inline: 16px;
}

/* --- Header --------------------------------------------------------------- */
.dsf-hero {
  background: var(--dsf-hero);
  border-bottom: 1px solid var(--dsf-line);
}
.dsf-hero .dsf-wrap {
  padding-block: 20px 22px;
  display: grid;
  gap: 6px;
}
.dsf-hero-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.dsf-logo { max-height: 64px; max-width: 220px; width: auto; height: auto; }
/* Logos are trimmed of empty borders on upload (practices/logo_image.py), so
   the cap is the logo's real size. Bigger where the header has room. */
@media (min-width: 768px) {
  .dsf-logo { max-height: 88px; max-width: 300px; }
}
.dsf-practice-name { font-family: var(--dsf-font-display); font-weight: 600; font-size: 1.15rem; }
.dsf-welcome { margin: 8px 0 0; color: var(--dsf-muted); font-size: 1rem; }
.dsf-hero h1 { font-size: clamp(1.75rem, 1.4rem + 1.5vw, 2.25rem); margin: 0; }
.dsf-hero-line { margin: 0; color: var(--dsf-muted); }
.dsf-meta { margin: 4px 0 0; color: var(--dsf-muted); font-size: 0.95rem; display: flex; flex-wrap: wrap; gap: 4px 16px; }

/* Language switch: a real checkbox styled as a pill. */
.dsf-lang {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1.5px solid var(--dsf-field-line);
  border-radius: 999px;
  background: var(--dsf-surface);
  padding: 6px 14px 6px 8px;
  font-weight: 700;
  cursor: pointer;
  min-height: 44px;
}
.dsf-lang input {
  appearance: none;
  width: 36px;
  height: 22px;
  border-radius: 999px;
  background: var(--dsf-field-line);
  position: relative;
  margin: 0;
  cursor: pointer;
  transition: background 0.15s;
}
.dsf-lang input::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  transition: transform 0.15s;
}
.dsf-lang input:checked { background: var(--dsf-primary-strong); }
.dsf-lang input:checked::after { transform: translateX(14px); }
.dsf-lang:has(input:focus-visible) { box-shadow: var(--dsf-focus); }
.dsf-lang input:focus-visible { box-shadow: none; }

.dsf-preview-banner {
  background: #fff3cd;
  border-bottom: 1px solid #e0c56e;
  padding: 0.5rem 1rem;
  text-align: center;
  font-size: 0.95rem;
}

/* --- Step rail ------------------------------------------------------------ */
.dsf-rail {
  position: sticky;
  top: 0;
  z-index: 10;
  background: color-mix(in srgb, var(--dsf-page) 94%, transparent);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--dsf-line);
}
.dsf-rail .dsf-wrap { padding-block: 10px; }
.dsf-progress {
  height: 6px;
  border-radius: 999px;
  background: var(--dsf-line);
  overflow: hidden;
}
.dsf-progress span {
  display: block;
  height: 100%;
  width: 0;
  background: var(--dsf-primary-strong);
  transition: width 0.3s;
}
.dsf-steps {
  list-style: none;
  margin: 8px 0 0;
  padding: 0 0 2px;
  display: flex;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
}
.dsf-steps[data-more="right"] { mask-image: linear-gradient(to right, #000 calc(100% - 48px), transparent); }
.dsf-steps[data-more="left"] { mask-image: linear-gradient(to left, #000 calc(100% - 48px), transparent); }
.dsf-steps[data-more="both"] { mask-image: linear-gradient(to right, transparent, #000 48px, #000 calc(100% - 48px), transparent); }
.dsf-steps button {
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  font: 700 0.875rem var(--dsf-font-body);
  color: var(--dsf-muted);
  background: var(--dsf-surface);
  border: 1.5px solid var(--dsf-line);
  border-radius: 999px;
  padding: 6px 12px;
  min-height: 36px;
  cursor: pointer;
}
.dsf-steps button > span:last-child {
  max-width: 14rem;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dsf-steps .dsf-step-num {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--dsf-line);
  color: var(--dsf-text);
  font-size: 0.75rem;
}
.dsf-steps button[aria-current="step"] {
  color: var(--dsf-text);
  border-color: var(--dsf-primary-strong);
  background: var(--dsf-tint);
}
.dsf-steps button[aria-current="step"] .dsf-step-num { background: var(--dsf-primary); color: var(--dsf-primary-ink); }
.dsf-steps button.is-done .dsf-step-num { background: var(--dsf-primary-strong); color: transparent; position: relative; }
.dsf-steps button.is-done .dsf-step-num::after {
  content: "";
  position: absolute;
  width: 6px;
  height: 10px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) translate(-1px, -1px);
}

/* Laptops and monitors: the steps move into a column beside the form, every
   step name in full, and the header and bottom bar line up with the form. The
   form keeps its reading width; phones and tablets keep the bar across the
   top, which scrolls sideways and fades at an edge with more steps past it. */
@media (min-width: 1024px) {
  :root {
    --dsf-side-gap: 2.5rem;
    /* 11-15rem: whatever the screen leaves beside the form (48px of margins and scrollbar). */
    --dsf-side: clamp(11rem, 100vw - 48px - var(--dsf-side-gap) - 46rem, 15rem);
  }
  .dsf-hero .dsf-wrap,
  .dsf-footer .dsf-wrap,
  .dsf-actions .dsf-wrap {
    max-width: calc(46rem + var(--dsf-side) + var(--dsf-side-gap) + 32px);
    padding-left: calc(16px + var(--dsf-side) + var(--dsf-side-gap));
  }
  .dsf-layout {
    display: grid;
    grid-template-columns: var(--dsf-side) 46rem;
    column-gap: var(--dsf-side-gap);
    justify-content: center;
    align-items: start;
    padding-inline: 16px;
  }
  .dsf-layout > .dsf-form { max-width: none; margin: 0; padding-inline: 0; }
  .dsf-rail {
    top: 0;
    max-height: 100vh;
    overflow-y: auto;
    padding-block: 22px 100px; /* clear of the bottom bar */
    background: none;
    backdrop-filter: none;
    border-bottom: 0;
  }
  .dsf-rail .dsf-wrap { max-width: none; padding: 0; }
  .dsf-steps { flex-direction: column; gap: 4px; margin-top: 14px; overflow: visible; mask-image: none !important; }
  .dsf-steps button {
    width: 100%;
    white-space: normal;
    text-align: left;
    align-items: flex-start;
    border-radius: 12px;
    border-color: transparent;
    background: transparent;
    padding: 8px 10px;
  }
  .dsf-steps button:not([aria-current]):hover { background: var(--dsf-surface); border-color: var(--dsf-line); }
  .dsf-steps button > span:last-child { max-width: none; overflow: visible; }
  .dsf-steps .dsf-step-num { flex: none; margin-top: 1px; }
}

/* --- Steps and cards ------------------------------------------------------ */
.dsf-form { padding-block: 22px 8px; }
.dsf-required-note { color: var(--dsf-muted); font-size: 0.95rem; margin: 0 0 12px; }

/* Steps that aren't showing stay in the form's column at full width, so a
   signature pad in them is drawn at the width it will have when shown
   (dsfFitPad in form_page.html), but take no space and are out of sight and
   out of the tab order. */
.dsf-js .dsf-step:not(.is-current) {
  height: 0;
  margin: 0;
  overflow: hidden;
  visibility: hidden;
}

.dsf-step-title {
  font-size: clamp(1.5rem, 1.3rem + 1vw, 1.875rem);
  margin: 4px 0 14px;
}
.dsf-step-title:focus { box-shadow: none; }

.dsf-card {
  background: var(--dsf-surface);
  border: 1px solid var(--dsf-line);
  border-radius: var(--dsf-radius);
  padding: 20px 18px;
  margin-bottom: 18px;
}
.dsf-card > .row:last-child,
.dsf-card > *:last-child { margin-bottom: 0 !important; }

.section-header-secondary {
  font-size: 1.25rem;
  color: var(--dsf-text);
  margin: 28px 0 14px;
  padding-top: 20px;
  border-top: 1px solid var(--dsf-line);
  display: flex;
  align-items: center;
  gap: 10px;
}
.section-header-secondary::before {
  content: "";
  flex: none;
  width: 6px;
  height: 1.1em;
  border-radius: 3px;
  background: var(--dsf-accent);
}
.dsf-card > .section-header-secondary:first-child { margin-top: 0; padding-top: 0; border-top: 0; }

/* --- Text from the form file ----------------------------------------------- */
.highlight {
  font-weight: 700;
  background: color-mix(in srgb, var(--dsf-highlight) 35%, var(--dsf-surface));
  border-left: 6px solid var(--dsf-accent);
  padding: 12px 14px;
  border-radius: 10px;
}
.form-question { font-size: 1.0625rem; color: var(--dsf-text); }
.text-muted, .small.text-muted { color: var(--dsf-muted) !important; }
.form-text-block { font-size: 1rem; color: var(--dsf-text); }

/* --- Fields ----------------------------------------------------------------- */
label,
legend.form-label {
  font-size: 1rem;
  font-weight: 700;
  color: var(--dsf-text);
  margin-bottom: 6px;
}
fieldset legend.form-label { float: none; width: 100%; padding: 0; }

.required::after {
  content: " *";
  color: var(--dsf-accent-text);
}
/* An answer another answer excuses (required_unless) loses its star meanwhile. */
[data-excused] .required::after { content: none; }

.form-control,
.form-select {
  font: 400 1.0625rem var(--dsf-font-body);
  color: var(--dsf-text);
  background-color: var(--dsf-surface);
  border: 1.5px solid var(--dsf-field-line);
  border-radius: 10px;
  min-height: 48px;
  padding: 10px 12px;
}
.form-select { padding-right: 2.5rem; }
textarea.form-control { min-height: 96px; }
.form-control::placeholder { color: var(--dsf-muted); opacity: 1; }
.form-control:focus,
.form-select:focus {
  border-color: var(--dsf-primary-strong);
  box-shadow: var(--dsf-focus);
}

.invalid-feedback { color: var(--dsf-danger); font-weight: 700; font-size: 0.95rem; }
.was-validated .form-control:invalid,
.was-validated .form-select:invalid,
.form-control[aria-invalid="true"],
.form-select[aria-invalid="true"] { border-color: var(--dsf-danger); background-image: none; padding-right: 12px; }
.was-validated .form-control:valid,
.was-validated .form-select:valid { border-color: var(--dsf-field-line); background-image: none; padding-right: 12px; }
.was-validated .form-select:valid,
.was-validated .form-select:invalid { padding-right: 2.5rem; }

/* Radio questions: each answer is a big button. The real radio sits under its
   label so keyboards and screen readers use it as normal. */
.dsf-choices .form-check-inline {
  position: relative;
  display: inline-block;
  padding: 0;
  margin: 0 8px 8px 0;
}
.dsf-choices .form-check-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.dsf-choices .form-check-label {
  display: block;
  min-width: 88px;
  min-height: 48px;
  padding: 11px 18px;
  margin: 0;
  text-align: center;
  font-weight: 700;
  color: var(--dsf-text);
  background: var(--dsf-surface);
  border: 1.5px solid var(--dsf-field-line);
  border-radius: 12px;
  cursor: pointer;
}
.dsf-choices .form-check-input:hover + .form-check-label { border-color: var(--dsf-primary-strong); }
.dsf-choices .form-check-input:checked + .form-check-label {
  background: var(--dsf-primary);
  color: var(--dsf-primary-ink);
  border-color: var(--dsf-primary-strong);
  box-shadow: inset 0 0 0 1.5px var(--dsf-primary-strong);
}
.dsf-choices .form-check-input:focus-visible + .form-check-label { box-shadow: var(--dsf-focus); }
.was-validated .dsf-choices .form-check-input:invalid + .form-check-label,
.dsf-choices .form-check-input[aria-invalid="true"] + .form-check-label { border-color: var(--dsf-danger); }
.was-validated .dsf-choices .form-check-input:valid + .form-check-label { color: var(--dsf-text); }
.was-validated .dsf-choices .form-check-input:checked:valid + .form-check-label { color: var(--dsf-primary-ink); }
.dsf-choice-error {
  display: none;
  color: var(--dsf-danger);
  font-weight: 700;
  font-size: 0.95rem;
}
.was-validated .dsf-choices:has(.form-check-input:invalid) .dsf-choice-error { display: block; }

/* Checkboxes: a larger box in a tappable row. */
.form-check:not(.form-check-inline) {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 12px;
  margin-bottom: 6px;
  border: 1.5px solid transparent;
  border-radius: 10px;
}
.form-check:not(.form-check-inline):has(.form-check-input:checked) {
  background: var(--dsf-tint);
  border-color: color-mix(in srgb, var(--dsf-primary-strong) 50%, var(--dsf-line));
}
.form-check:not(.form-check-inline) .form-check-input {
  float: none;
  flex: none;
  width: 24px;
  height: 24px;
  margin: 0;
  border: 2px solid var(--dsf-field-line);
  border-radius: 6px;
  cursor: pointer;
}
.form-check-input:checked {
  background-color: var(--dsf-primary-strong);
  border-color: var(--dsf-primary-strong);
}
.form-check-input:focus { box-shadow: var(--dsf-focus); border-color: var(--dsf-primary-strong); }
.form-check:not(.form-check-inline) .form-check-label {
  margin: 0;
  font-weight: 400;
  cursor: pointer;
  padding-top: 1px;
}

.dsf-checklist { margin-bottom: 1rem; }
@media (min-width: 768px) {
  .dsf-checklist.cols-2 { column-count: 2; }
  .dsf-checklist.cols-3 { column-count: 3; }
  .dsf-checklist.cols-4 { column-count: 4; }
}
.dsf-checklist > * { break-inside: avoid; }

/* A tick-box list with a rule of its own (at least one box, or a "None of
   these" box) is a fieldset, with its question as the legend. Its message
   shows under the boxes once the step is checked; the boxes get a red edge,
   and their labels keep their colour. */
.dsf-checklist-set { border: 0; padding: 0; margin: 0 0 1rem; min-width: 0; }
.dsf-checklist-set > .dsf-checklist { margin-bottom: .25rem; }
.was-validated .dsf-checklist-set:has(.form-check-input:invalid) > .dsf-choice-error,
.dsf-checklist-set:has(.form-check-input[aria-invalid="true"]) > .dsf-choice-error { display: block; }
.was-validated .dsf-checklist-set .form-check-input:invalid,
.dsf-checklist-set .form-check-input[aria-invalid="true"] { border-color: var(--dsf-danger); }
.was-validated .dsf-checklist-set .form-check-input:invalid ~ .form-check-label { color: inherit; }

/* Once a step is checked, Bootstrap colours every valid tick box green. A box
   that was fine all along keeps the form's own colours, as text boxes do. */
.was-validated .form-check-input:valid { border-color: var(--dsf-field-line); }
.was-validated .form-check-input:valid:checked {
  background-color: var(--dsf-primary-strong);
  border-color: var(--dsf-primary-strong);
}
.was-validated .form-check-input:valid ~ .form-check-label { color: inherit; }

/* Password managers (LastPass and others) put their icon at the right end of
   a box, and some ignore the "skip this field" hints on date boxes, so the
   browser's calendar icon goes at the left end instead. Clicking anywhere in
   the box opens the calendar too (form.js). */
input[type="date"].form-control { position: relative; padding-left: 44px; }
input[type="date"].form-control::-webkit-calendar-picker-indicator {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  margin: 0;
  cursor: pointer;
}

input[type="file"].form-control {
  padding: 10px;
  border-style: dashed;
  background: var(--dsf-page);
}

/* LuxSci's signature pad is drawn at the width of this box when the page
   loads (dsfFitPad in form_page.html) and resized with it (form.js). The
   max-width only covers the moment before that resize. */
.dsf-signature {
  display: block;
  max-width: 100%;
  overflow: hidden;
  border: 1.5px solid var(--dsf-field-line);
  border-radius: 12px;
  background: #eee;
}
.dsf-signature canvas, .dsf-signature img { display: block; max-width: 100%; height: auto; }
.dsf-signature-error { color: var(--dsf-danger); font-weight: 700; font-size: 0.95rem; margin-top: 6px; }

.btn { font-family: var(--dsf-font-body); font-weight: 700; }
.btn-outline-secondary {
  color: var(--dsf-text);
  border: 1.5px solid var(--dsf-field-line);
  border-radius: 10px;
  background: var(--dsf-surface);
  min-height: 40px;
}
.btn-outline-secondary:hover { background: var(--dsf-tint); color: var(--dsf-text); border-color: var(--dsf-primary-strong); }

/* Step alert: "2 answers still needed". */
.dsf-step-alert {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  margin-bottom: 16px;
  border-radius: 12px;
  border: 1.5px solid var(--dsf-danger);
  background: color-mix(in srgb, var(--dsf-danger) 7%, var(--dsf-surface));
  color: var(--dsf-danger);
  font-weight: 700;
}
.dsf-step-alert button {
  font: inherit;
  color: var(--dsf-text);
  background: none;
  border: 0;
  padding: 4px 0;
  text-decoration: underline;
  cursor: pointer;
}

/* --- Footer: the practice's contact details ------------------------------- */
.dsf-footer { border-top: 1px solid var(--dsf-line); margin-top: 24px; }
.dsf-footer .dsf-wrap {
  padding-block: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 20px;
  color: var(--dsf-muted);
  font-size: 0.95rem;
}
.dsf-footer a { color: inherit; }

/* --- Bottom bar ------------------------------------------------------------- */
.dsf-actions {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  background: color-mix(in srgb, var(--dsf-page) 94%, transparent);
  backdrop-filter: blur(6px);
  border-top: 1px solid var(--dsf-line);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.dsf-actions .dsf-wrap { padding-block: 12px; }
.dsf-actions-row { display: flex; align-items: center; gap: 10px; }
.dsf-where { flex: 1; min-width: 0; text-align: center; color: var(--dsf-muted); font-size: 0.95rem; }
.dsf-btn {
  font: 700 1.0625rem var(--dsf-font-body);
  min-height: 48px;
  padding: 10px 22px;
  border-radius: 12px;
  border: 1.5px solid var(--dsf-field-line);
  background: var(--dsf-surface);
  color: var(--dsf-text);
  cursor: pointer;
}
.dsf-btn-primary {
  background: var(--dsf-primary);
  color: var(--dsf-primary-ink);
  border-color: var(--dsf-primary-strong);
  min-width: 9rem;
}
.dsf-btn-primary:hover { filter: brightness(0.96); }
.dsf-btn:disabled { opacity: 0.6; cursor: progress; }
.dsf-submit-message { max-width: 40rem; margin: 0 auto 10px; border-radius: 10px; }
/* Without the step script every section shows and only Submit is offered. */
html:not(.dsf-js) .dsf-step-nav { display: none; }

/* --- Thank-you and practice pages -------------------------------------------- */
.dsf-done { text-align: center; display: grid; gap: 10px; justify-items: center; padding: 36px 20px; }
.dsf-done-mark {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--dsf-primary);
  position: relative;
}
.dsf-done-mark::after {
  content: "";
  position: absolute;
  left: 23px;
  top: 14px;
  width: 16px;
  height: 28px;
  border: solid var(--dsf-primary-ink);
  border-width: 0 5px 5px 0;
  transform: rotate(45deg);
}
.dsf-done p { margin: 0; }
.dsf-form-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.dsf-form-list a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 18px 20px;
  border: 1.5px solid var(--dsf-line);
  border-radius: var(--dsf-radius);
  background: var(--dsf-surface);
  color: var(--dsf-text);
  font-weight: 700;
  text-decoration: none;
}
.dsf-form-list a:hover { border-color: var(--dsf-primary-strong); background: var(--dsf-tint); }
.dsf-form-list a::after { content: "→"; color: var(--dsf-primary-text); }

/* The spam trap field: off screen rather than display:none, which some bots skip. */
.dsf-trap {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .dsf-progress span, .dsf-lang input, .dsf-lang input::after { transition: none; }
}

@media print {
  .dsf-rail, .dsf-actions, .dsf-lang { display: none !important; }
  .dsf-js .dsf-step:not(.is-current) { height: auto; overflow: visible; visibility: visible; }
}

/* Form builder review preview only (admin site). */
.dsf-review-conditional {
  border-left: 3px solid #8a6d00;
  padding-left: 0.5rem;
}

.dsf-review-note {
  font-size: 0.875rem;
  color: #6b5400;
  margin-bottom: 0.25rem;
}

.dsf-review-flash {
  outline: 3px solid #0a58ca;
  outline-offset: 4px;
  transition: outline-color 0.3s;
}