/* 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-adult-line { margin: 0; font-weight: 700; }
.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;
}

/* A preview of a live practice: a sent preview reaches the practice. */
.dsf-preview-banner.dsf-live-banner {
  background: #fde2e1;
  border-bottom: 2px solid #b3261e;
  color: #6b1a14;
  font-weight: 600;
}

/* The website demo: its Secure Form bar on every page, its tools above each
   step, its note on the first step and its result screen (form.js). The bar
   and the "Next, your own form." panel are Secure Form's navy and coral, kept
   apart from the made-up practice's own look. */
.dsf-preview-banner.dsf-demo-banner {
  --sf-navy: #0a2540;
  --sf-coral: #ff6b5c;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 18px;
  background: var(--sf-navy);
  border-bottom: 3px solid var(--sf-coral);
  color: #fff;
  text-align: left;
  padding: 0.55rem max(1rem, calc((100vw - 72rem) / 2));
}
.dsf-demo-brand { font-weight: 700; white-space: nowrap; }
.dsf-demo-why { flex: 1 1 20rem; }
.dsf-demo-why summary { cursor: pointer; list-style: none; color: #dbe3ee; }
.dsf-demo-why summary::-webkit-details-marker { display: none; }
.dsf-demo-why summary strong { color: #fff; }
.dsf-demo-why-label { color: #fff; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.dsf-demo-why[open] .dsf-demo-why-label { text-decoration: none; }
.dsf-demo-why p { margin: 0.4rem 0 0.2rem; max-width: 46rem; color: #dbe3ee; }
.dsf-demo-why summary:focus-visible, .dsf-demo-home:focus-visible { outline: 3px solid var(--sf-coral); outline-offset: 2px; }
.dsf-demo-home { color: #fff; font-weight: 700; white-space: nowrap; text-underline-offset: 3px; }
.dsf-demo-home:hover { color: #fff; }
.dsf-demo-title { font-size: 1.15rem; font-weight: 700; margin-bottom: 0.4rem; }
.dsf-demo-note { margin-bottom: 1rem; }
.dsf-demo-note p { margin-bottom: 0.3rem; }
.dsf-demo-small { color: var(--dsf-muted); font-size: 0.95rem; }
.dsf-demo-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  padding: 12px 14px;
  margin-bottom: 18px;
  border: 1.5px solid #c9d3e0;
  border-left: 4px solid #0a2540;
  border-radius: var(--dsf-radius);
  background: #f3f6fa;
}
.dsf-demo-bar-line { margin: 0; font-weight: 700; color: #0a2540; }
.dsf-demo-bar-buttons { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.dsf-demo-bar .dsf-btn { min-height: 44px; padding: 8px 16px; font-size: 1rem; }
.dsf-link-btn {
  background: none;
  border: 0;
  padding: 8px 4px;
  min-height: 44px;
  color: var(--dsf-muted);
  text-decoration: underline;
  text-underline-offset: 3px;
  font: inherit;
  font-size: 0.95rem;
}
.dsf-link-btn:hover:not(:disabled) { color: var(--dsf-text); }
.dsf-demo-status { flex-basis: 100%; margin: 0; font-size: 0.95rem; color: #1f2f45; }
.dsf-upload-off .form-control:disabled { cursor: not-allowed; }
.dsf-demo-result { max-width: 72rem; padding-block: 24px 40px; }
.dsf-demo-wait { max-width: 40rem; margin-inline: auto; display: grid; justify-items: center; gap: 12px; text-align: center; padding-block: 48px; }
.dsf-demo-wait p { margin: 0; max-width: 36rem; font-size: 1.1rem; }
.dsf-demo-spinner {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 4px solid var(--dsf-line);
  border-top-color: var(--dsf-primary-strong);
  animation: dsf-spin 0.9s linear infinite;
}
@keyframes dsf-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .dsf-demo-spinner { animation-duration: 3s; } }
/* The PDF on the left, the next step on the right; on a phone the panel sits
   right under the PDF's buttons. */
.dsf-demo-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(16rem, 22rem);
  grid-template-areas: "head next" "pdf next";
  gap: 18px 28px;
  align-items: start;
}
.dsf-demo-grid[hidden] { display: none; }
.dsf-demo-head { grid-area: head; }
.dsf-demo-head h2 { margin-bottom: 4px; }
.dsf-demo-head p { margin: 0 0 4px; max-width: 42rem; }
.dsf-demo-lead { font-size: 1.15rem; font-weight: 700; }
.dsf-demo-pdf { grid-area: pdf; }
.dsf-demo-buttons { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.dsf-demo-wait .dsf-demo-buttons { justify-content: center; }
.dsf-demo-buttons .dsf-btn { text-decoration: none; display: inline-flex; align-items: center; }
.dsf-demo-preview {
  display: block;
  width: 100%;
  height: min(85vh, 1100px);
  border: 1px solid var(--dsf-line);
  border-radius: var(--dsf-radius);
  background: var(--dsf-surface);
}
.dsf-demo-no-viewer { text-align: center; }
.dsf-demo-next {
  grid-area: next;
  position: sticky;
  top: 18px;
  background: #0a2540;
  color: #fff;
  border-radius: 16px;
  padding: 24px 22px;
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
}
.dsf-demo-next-brand {
  margin: 0 0 6px;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #ffb3aa;
}
.dsf-demo-next h2 { color: #fff; font-family: inherit; font-weight: 800; font-size: 1.5rem; margin-bottom: 10px; }
.dsf-demo-next p { color: #dbe3ee; }
.dsf-demo-next .dsf-demo-next-cta {
  display: flex;
  justify-content: center;
  width: 100%;
  min-height: 48px;
  background: #ff6b5c;
  border: 0;
  color: #0a2540;
  font-family: inherit;
  font-weight: 800;
  text-decoration: none;
  border-radius: 999px;
  margin: 4px 0 12px;
}
.dsf-demo-next .dsf-demo-next-cta:hover { background: #ff8577; color: #0a2540; }
.dsf-demo-next .dsf-demo-next-cta:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.dsf-demo-next-small { font-size: 0.9rem; }
.dsf-demo-next-talk { margin: 0; font-weight: 700; color: #fff !important; }
.dsf-demo-next-talk a { color: #fff; white-space: nowrap; text-underline-offset: 3px; }
@media (max-width: 860px) {
  .dsf-demo-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "next" "pdf"; }
  .dsf-demo-next { position: static; }
}
@media (max-width: 575px) {
  .dsf-demo-bar-buttons { width: 100%; }
  .dsf-demo-bar .dsf-btn { flex: 1 1 auto; }
  .dsf-demo-preview { height: 70vh; }
  .dsf-demo-buttons .dsf-btn { flex: 1 1 auto; justify-content: center; }
}

/* --- 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; }

/* Follow-up questions (a group shown by an answer): a tinted panel with an edge in
   the practice's colour, which grows a small point under the answer that opened it
   (form.js sets --dsf-notch from that answer's button). Follow-ups inside the panel
   hang from their own answer on a plain rail (--dsf-rail), never a box inside the
   box. A single follow-up question gets the edge alone. */
.dsf-followup {
  position: relative;
  margin: -0.875rem 0 1.5rem;
  padding: 0.75rem 0.75rem 0.125rem 0.875rem; /* a little bottom padding keeps a last nested group's margin inside */
  border-left: 3px solid var(--dsf-primary);
  border-radius: 0 10px 10px 0;
  background: var(--dsf-tint);
  transition: opacity 0.18s ease, translate 0.18s ease; /* slides in when its answer is chosen */
}
@starting-style { .dsf-followup:not([hidden]) { opacity: 0; translate: 0 -5px; } }
@media (prefers-reduced-motion: reduce) { .dsf-followup { transition: none; } }
.dsf-followup::before {
  content: "";
  position: absolute;
  top: -7px;
  left: var(--dsf-notch, 2rem);
  width: 14px;
  height: 14px;
  border-radius: 2px;
  background: var(--dsf-tint);
  rotate: 45deg;
}
.dsf-followup .dsf-followup { margin: -1rem 0 1.25rem var(--dsf-rail, 0px); padding: 0.875rem 0 0 0.875rem; border-radius: 0; background: none; }
.dsf-followup .dsf-followup::before { content: none; }
.dsf-followup > .row:last-child { margin-bottom: 0.75rem !important; }
.dsf-followup .dsf-followup > .row:last-child { margin-bottom: 0 !important; }
.dsf-followup > .section-header-secondary:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.dsf-followup-field { box-shadow: inset 3px 0 0 var(--dsf-primary); padding-left: calc(var(--bs-gutter-x, 1.5rem) * 0.5 + 0.5rem); }
@media (max-width: 575.98px) {
  .dsf-followup { padding-left: 0.75rem; padding-right: 0.5rem; }
  .dsf-followup .dsf-followup { padding-left: 0.75rem; padding-right: 0; }
}

/* --- A run of questions with the same short answers (library.py grid_runs) ------
   The answers as column headings once, a row of dots per question, zebra lines;
   a row answered anything but "No" is tinted with its question in bold, a row
   answered "No" goes quiet. Two grids side by side on a wide screen. */
.dsf-grid-set { display: grid; gap: 0 28px; }
.dsf-grid-set.dsf-grid-two { grid-template-columns: 1fr 1fr; align-items: start; }
.dsf-grid-all { grid-column: 1 / -1; margin: 0 0 8px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; color: var(--dsf-muted); font-size: 0.95rem; }
.dsf-grid-no {
  font-weight: 700; padding: 8px 14px; border: 1.5px solid var(--dsf-field-line); border-radius: 10px;
  background: var(--dsf-surface); color: var(--dsf-text); cursor: pointer;
}
.dsf-grid-no:hover { border-color: var(--dsf-primary-strong); }
.dsf-grid { min-width: 0; --dsf-grid-cell: 56px; }
.dsf-grid-head, .dsf-grid-row { display: grid; grid-template-columns: minmax(0, 1fr) repeat(var(--dsf-grid-cols, 3), var(--dsf-grid-cell)); align-items: center; }
.dsf-grid-head {
  position: sticky; top: var(--dsf-rail-height, 0px); z-index: 2; background: var(--dsf-surface); padding: 6px 0 4px; border-bottom: 1.5px solid var(--dsf-line);
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--dsf-muted); text-align: center;
}
.dsf-grid-row { position: relative; min-height: 46px; border-radius: 8px; }
.dsf-grid-row:nth-child(odd) { background: color-mix(in srgb, var(--dsf-text) 4%, var(--dsf-surface)); }
.dsf-grid-row:has(.form-check-input:checked:not(.dsf-quiet)) { background: var(--dsf-tint); }
.dsf-grid-row:has(.form-check-input:checked:not(.dsf-quiet)) .dsf-grid-q { font-weight: 700; }
.dsf-grid-row:has(.dsf-quiet:checked) .dsf-grid-q { color: var(--dsf-muted); }
.dsf-grid-q { padding: 6px 8px; min-width: 0; overflow-wrap: anywhere; }
.dsf-grid-cell { position: relative; display: grid; place-items: center; height: 46px; margin: 0; cursor: pointer; }
.dsf-grid-dot { width: 24px; height: 24px; box-sizing: border-box; border: 2px solid var(--dsf-field-line); border-radius: 50%; background: var(--dsf-surface); }
.dsf-grid-cell:hover .dsf-grid-dot { border-color: var(--dsf-primary-strong); }
.dsf-grid-cell .form-check-input:checked + .dsf-grid-dot { border-color: var(--dsf-primary-strong); background: radial-gradient(var(--dsf-primary-strong) 46%, var(--dsf-surface) 50%); }
.dsf-grid-cell .form-check-input:focus-visible + .dsf-grid-dot { box-shadow: var(--dsf-focus); }
.was-validated .dsf-grid-row:has(.form-check-input:invalid) .dsf-grid-dot,
.dsf-grid-row:has(.form-check-input[aria-invalid="true"]) .dsf-grid-dot { border-color: var(--dsf-danger); }
.dsf-grid-row > .dsf-choice-error { grid-column: 1 / -1; padding: 0 8px 6px; }
@media (max-width: 767.98px) {
  /* The two halves stack into one list: one heading that stays in view down the whole list
     (the halves give up their boxes so the heading sticks within the set), stripes carrying on across the join. */
  .dsf-grid-set.dsf-grid-two { grid-template-columns: 1fr; }
  .dsf-grid-two .dsf-grid { display: contents; }
  .dsf-grid-two .dsf-grid + .dsf-grid .dsf-grid-head { display: none; }
  .dsf-grid-shift .dsf-grid-row:nth-child(odd) { background: none; }
  .dsf-grid-shift .dsf-grid-row:nth-child(even) { background: color-mix(in srgb, var(--dsf-text) 4%, var(--dsf-surface)); }
  .dsf-grid-shift .dsf-grid-row:has(.form-check-input:checked:not(.dsf-quiet)) { background: var(--dsf-tint); }
  .dsf-grid { --dsf-grid-cell: 52px; }
}

/* --- 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);
}

/* One house size for every pad: 380x130 on a desktop, the screen's width on a
   phone; initials draw on a 160x80 pad (form_page.html dsfPadHeight). */
.dsf-signature {
  display: block;
  max-width: 380px;
  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; }
/* A required pad left blank (form.js flagSignature): red like any answer that needs fixing. */
.dsf-signature.is-invalid { border-color: var(--dsf-danger); box-shadow: 0 0 0 1px var(--dsf-danger); }
/* The website demo's own pad (form.js): the box's width, drawn on with a finger or mouse. */
.dsf-demo-pad canvas { width: 100%; touch-action: none; cursor: crosshair; }
.dsf-signature canvas.dsf-own-pad { touch-action: none; cursor: crosshair; }
.dsf-signature.dsf-initials { max-width: 160px; }
/* Typed initials: a small box, two to four letters, shown capitalised. */
.dsf-initials-box { max-width: 6.5rem; text-align: center; text-transform: uppercase; letter-spacing: 0.12em; font-weight: 700; }

.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-conditional.dsf-followup-field { box-shadow: none; } /* one edge, the review one */

.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;
}
/* A question's help text: under its label, one line per line typed. */
.dsf-help { white-space: pre-line; margin-top: -.25rem; margin-bottom: .5rem; }

/* Tick boxes with a blank to fill in ("School ____"): the blank sits on the
   tick's own line. In a one-column list (.dsf-pairs) the ticks form one column
   and every blank starts at the same edge, as wide as the longest label; the
   blank rests on the page colour until its box is ticked or it holds text.
   On a phone, or inside a multi-column list, the blank sits under its tick,
   indented, with a short coloured edge tying the two together. form.js moves
   the cursor into the blank when the box is ticked, and ticks the box when
   the blank is used. */
.dsf-pair { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.dsf-pair > .form-check { flex: 0 1 auto; min-width: 0; }
.dsf-pair > .dsf-write-in { flex: 1 1 14rem; min-width: 0; }
.dsf-pair > .dsf-write-in .form-control { min-height: 44px; background-color: var(--dsf-page); }
.dsf-pair:has(.form-check-input:checked) > .dsf-write-in .form-control,
.dsf-pair > .dsf-write-in .form-control:focus,
.dsf-pair > .dsf-write-in .form-control:not(:placeholder-shown) { background-color: var(--dsf-surface); }
/* Under its tick: in a multi-column list, and in a one-column list on a phone. */
.dsf-checklist:not(.dsf-pairs) .dsf-pair > .dsf-write-in {
  flex-basis: 100%; margin: -2px 0 8px 36px; padding-left: 12px; border-left: 3px solid var(--dsf-primary);
}
@media (max-width: 575.98px) {
  .dsf-checklist.dsf-pairs .dsf-pair > .dsf-write-in {
    flex-basis: 100%; margin: -2px 0 8px 36px; padding-left: 12px; border-left: 3px solid var(--dsf-primary);
  }
}
/* Beside its tick, in a column: the ticks' column is as wide as the longest label (up to half the line). */
@media (min-width: 576px) {
  .dsf-checklist.dsf-pairs { display: grid; grid-template-columns: fit-content(50%) minmax(0, 1fr); gap: 0 14px; align-items: center; }
  .dsf-checklist.dsf-pairs > div, .dsf-checklist.dsf-pairs > div:not(.dsf-followup-field) > .dsf-pair { display: contents; }
  .dsf-checklist.dsf-pairs > .dsf-followup-field { display: block; grid-column: 1 / -1; }
  .dsf-checklist.dsf-pairs .form-check { grid-column: 1; }
  .dsf-checklist.dsf-pairs .dsf-write-in { grid-column: 2; margin-bottom: 6px; }
}

/* A unit on the end of a box ("Weeks"), or a choice joined to it (Grams/Pounds),
   is one piece with the box, on a phone too. Two short answers sit beside the
   box; a longer set sits beside it where the box's column is wide ("fits") and
   otherwise, or always ("under"), as a bar fixed under the box. */
.dsf-addon-group { display: flex; flex-wrap: nowrap; align-items: stretch; min-width: 0; position: relative; }
.dsf-addon-group > .form-control { flex: 1 1 4rem; min-width: 0; border-top-right-radius: 0; border-bottom-right-radius: 0; }
.dsf-addon-group > .form-control:focus { position: relative; z-index: 1; }
.dsf-addon {
  display: flex; align-items: center; padding: 0 14px; font-weight: 700; white-space: nowrap;
  color: var(--dsf-text); background: var(--dsf-tint);
  border: 1.5px solid var(--dsf-field-line); border-left: 0; border-radius: 0 10px 10px 0;
}
.dsf-attached-select { flex: 0 1 auto; width: auto; max-width: 60%; border-top-left-radius: 0; border-bottom-left-radius: 0; border-left: 0; }
.dsf-seg { display: flex; flex: 0 0 auto; border: 0; padding: 0; margin: 0; min-width: 0; }
.dsf-choices.dsf-seg .form-check-inline { margin: 0; }
.dsf-choices.dsf-seg .form-check-label {
  display: flex; align-items: center; min-width: 0; height: 100%; padding: 10px 14px; white-space: nowrap;
  background: var(--dsf-tint); border-radius: 0; border-left-width: 0;
}
.dsf-choices.dsf-seg .form-check-inline:last-of-type .form-check-label { border-radius: 0 10px 10px 0; }
.dsf-choices.dsf-seg .form-check-input:checked + .form-check-label { background: var(--dsf-primary); box-shadow: inset 0 0 0 1.5px var(--dsf-primary-strong); }
.dsf-choices.dsf-seg .form-check-input:focus-visible + .form-check-label { box-shadow: var(--dsf-focus); position: relative; z-index: 2; }
/* The "please choose" line sits under the whole piece, without stretching the box. */
.dsf-seg .dsf-choice-error { position: absolute; left: 0; top: 100%; padding-top: 4px; }
.was-validated .dsf-addon-group:has(.dsf-seg .form-check-input:invalid) { margin-bottom: 1.6rem; }
/* The bar under the box. */
.dsf-addon-fits, .dsf-addon-under { flex-wrap: wrap; container-type: inline-size; }
.dsf-addon-under > .form-control, .dsf-addon-under > .dsf-seg { flex: 1 1 100%; }
.dsf-addon-under > .form-control { border-radius: 10px 10px 0 0; }
.dsf-addon-under > .dsf-seg .form-check-inline { flex: 1 1 0; min-width: 0; }
.dsf-addon-under > .dsf-seg .form-check-label {
  justify-content: center; text-align: center; padding: 10px 6px; white-space: normal; line-height: 1.2;
  border-top: 0; border-radius: 0;
}
.dsf-addon-under > .dsf-seg .form-check-inline:first-of-type .form-check-label { border-left-width: 1.5px; border-radius: 0 0 0 10px; }
.dsf-addon-under > .dsf-seg .form-check-inline:last-of-type .form-check-label { border-radius: 0 0 10px 0; }
/* A set that "fits" is a bar under the box on a phone (the media rule, which
   browsers without container queries also understand) and wherever the box's
   column is narrow (the container rule). */
@media (max-width: 575.98px) {
  .dsf-addon-fits > .form-control, .dsf-addon-fits > .dsf-seg { flex: 1 1 100%; }
  .dsf-addon-fits > .form-control { border-radius: 10px 10px 0 0; }
  .dsf-addon-fits > .dsf-seg .form-check-inline { flex: 1 1 0; min-width: 0; }
  .dsf-addon-fits > .dsf-seg .form-check-label {
    justify-content: center; text-align: center; padding: 10px 6px; white-space: normal; line-height: 1.2;
    border-top: 0; border-radius: 0;
  }
  .dsf-addon-fits > .dsf-seg .form-check-inline:first-of-type .form-check-label { border-left-width: 1.5px; border-radius: 0 0 0 10px; }
  .dsf-addon-fits > .dsf-seg .form-check-inline:last-of-type .form-check-label { border-radius: 0 0 10px 0; }
}
@container (max-width: 559.98px) {
  .dsf-addon-fits > .form-control, .dsf-addon-fits > .dsf-seg { flex: 1 1 100%; }
  .dsf-addon-fits > .form-control { border-radius: 10px 10px 0 0; }
  .dsf-addon-fits > .dsf-seg .form-check-inline { flex: 1 1 0; min-width: 0; }
  .dsf-addon-fits > .dsf-seg .form-check-label {
    justify-content: center; text-align: center; padding: 10px 6px; white-space: normal; line-height: 1.2;
    border-top: 0; border-radius: 0;
  }
  .dsf-addon-fits > .dsf-seg .form-check-inline:first-of-type .form-check-label { border-left-width: 1.5px; border-radius: 0 0 0 10px; }
  .dsf-addon-fits > .dsf-seg .form-check-inline:last-of-type .form-check-label { border-radius: 0 0 10px 0; }
}

/* A question whose answers run to a sentence: a plain list, one answer per
   row with a round radio on the left, instead of buttons. */
.dsf-choices .dsf-choice-stacked {
  display: flex; align-items: flex-start; gap: 12px; padding: 10px 12px; margin: 0 0 6px;
  border: 1.5px solid transparent; border-radius: 10px;
}
.dsf-choices .dsf-choice-stacked:has(.form-check-input:checked) {
  background: var(--dsf-tint);
  border-color: color-mix(in srgb, var(--dsf-primary-strong) 50%, var(--dsf-line));
}
.dsf-choices .dsf-choice-stacked .form-check-input {
  position: static; float: none; flex: none; width: 24px; height: 24px; margin: 2px 0 0; opacity: 1;
  border: 2px solid var(--dsf-field-line); border-radius: 50%;
}
.dsf-choices .dsf-choice-stacked .form-check-label {
  min-width: 0; min-height: 0; padding: 1px 0 0; margin: 0; text-align: left; font-weight: 400;
  background: none; border: 0; border-radius: 0;
}
.dsf-choices .dsf-choice-stacked .form-check-input:checked + .form-check-label { background: none; color: var(--dsf-text); box-shadow: none; }
.dsf-choices .dsf-choice-stacked .form-check-input:focus-visible + .form-check-label { box-shadow: none; }
.dsf-choices .dsf-choice-stacked .form-check-input:focus-visible { box-shadow: var(--dsf-focus); }
.was-validated .dsf-choices .dsf-choice-stacked .form-check-input:invalid + .form-check-label { border: 0; }

/* A table: column headings once, rows of boxes under them. Each cell keeps its
   own label for screen readers; it shows on a phone, where rows stack. */
.dsf-table { display: grid; gap: 0; }
.dsf-table-head, .dsf-table-row { display: grid; grid-template-columns: repeat(var(--dsf-cols, 2), minmax(0, 1fr)); gap: 12px; }
.dsf-table-head { font-weight: 700; padding-bottom: 6px; }
.dsf-table-row { padding: 8px 0; border-top: 1px solid var(--dsf-line); }
.dsf-table-cell { min-width: 0; }
.dsf-table-cell .form-label { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.dsf-table-cell .form-check { margin: 0; }
@media (max-width: 575.98px) {
  .dsf-table-head { display: none; }
  .dsf-table-row { grid-template-columns: 1fr; gap: 8px; padding: 12px 0; }
  .dsf-table-cell .form-label { position: static; width: auto; height: auto; margin: 0 0 4px; overflow: visible; clip: auto; white-space: normal; font-size: .9rem; color: var(--dsf-muted); }
}

/* --- Free language help (the Section 1557 notice, practices/language_notice.py) ---
   A slim note at the top of the first step only: HHS's English line, then each
   language by its own name; a name opens HHS's statement in that language.
   The footer of every step carries a link back to it. English is offered only
   while the page is in Spanish, where it takes Spanish's place. */
.dsf-langhelp { margin: 0 0 18px; padding: 10px 0 4px; border-top: 1px solid var(--dsf-line); border-bottom: 1px solid var(--dsf-line); color: var(--dsf-muted); font-size: 0.9rem; line-height: 1.45; }
.dsf-langhelp:focus { outline: none; }
.dsf-langhelp-line { margin: 0; display: flex; gap: 8px; align-items: flex-start; }
.dsf-langhelp-line svg { flex: none; width: 18px; height: 18px; margin-top: 2px; color: var(--dsf-primary-text); }
.dsf-langhelp-langs { list-style: none; margin: 2px 0 0 26px; padding: 0; display: flex; flex-wrap: wrap; align-items: center; }
.dsf-langhelp-langs li { display: flex; align-items: center; }
.dsf-langhelp-langs li + li::before { content: "·" / ""; margin: 0 7px; } /* a separator, nothing to read out */
html:not([lang="es"]) .dsf-langhelp-langs li[lang="en"] + li::before { content: none; } /* English is hidden then, so the next name leads */
.dsf-langhelp-btn { background: none; border: 0; padding: 8px 3px; font: inherit; color: var(--dsf-primary-text); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.dsf-langhelp-btn[aria-expanded="true"] { text-decoration: none; font-weight: 700; }
.dsf-langhelp-text { margin: 4px 0 10px 26px; padding: 10px 14px; background: var(--dsf-tint); border-radius: var(--dsf-radius); color: var(--dsf-text, inherit); font-size: 1rem; }
.dsf-langhelp-text[dir="rtl"] { text-align: right; }
.dsf-nowrap { white-space: nowrap; }
.dsf-langhelp-langs li[lang="en"] { display: none; }
html[lang="es"] .dsf-langhelp-langs li[lang="en"] { display: flex; }
html[lang="es"] .dsf-langhelp-langs li[lang="es"] { display: none; }
.dsf-footer-langhelp { padding: 4px 0; color: inherit; text-decoration: underline; display: inline-flex; align-items: center; gap: 6px; }
.dsf-footer-langhelp svg { width: 16px; height: 16px; }