/*
 * Accessibility baseline for the intake form — WCAG 2.2 AA target.
 * Body type is Atkinson Hyperlegible; self-host the font files under
 * /fonts rather than linking an external font host, so the page works the
 * same regardless of network conditions. TODO: vendor the actual font
 * files and add @font-face rules once they're in place.
 */

:root {
  --text: #1a1a1a;
  --background: #ffffff;
  --focus: #0b5fff;
  --error: #b3261e;
  color-scheme: light;
}

* {
  box-sizing: border-box;
}

body {
  font-family: 'Atkinson Hyperlegible', system-ui, sans-serif;
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--text);
  background: var(--background);
  max-width: 40rem;
  margin: 0 auto;
  padding: 1.5rem;
}

a,
button,
input,
select,
textarea {
  font: inherit;
}

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

.escape-hatch {
  font-size: 1rem;
  border-left: 4px solid var(--focus);
  padding-left: 0.75rem;
}

.error {
  color: var(--error);
  font-weight: bold;
}

.not-sure {
  font-weight: normal;
}

.hint {
  color: #444;
  margin-top: -0.5rem;
}

.field {
  margin-bottom: 1.25rem;
}

.field label {
  display: block;
  font-weight: bold;
  margin-bottom: 0.25rem;
}

input[type='text'],
input:not([type]),
textarea {
  width: 100%;
  padding: 0.5rem;
  border: 1px solid #666;
  border-radius: 4px;
}

fieldset {
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 1rem;
  margin: 0 0 1.25rem;
}

legend {
  font-weight: bold;
  padding: 0 0.5rem;
}

fieldset label {
  display: block;
  font-weight: normal;
  margin: 0.5rem 0;
}

.date-fields {
  display: flex;
  gap: 1rem;
}

.date-fields .field {
  margin-bottom: 0;
}

.date-fields input {
  width: 5rem;
}

button {
  padding: 0.75rem 1.5rem;
  margin-top: 0.5rem;
}

.review-list dt {
  font-weight: bold;
  margin-top: 1rem;
}

.review-list dd {
  margin: 0.25rem 0 0;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
}

button.secondary {
  background: transparent;
  border: 2px solid #666;
}

/*
 * Staff mode. Wider than the participant form because everything is on one
 * page and staff are keying in during a phone call — see CLAUDE.md >
 * Accessibility > Staff mode. Same type, same contrast, same focus rings:
 * WCAG 2.2 AA applies here too.
 */

body.staff {
  max-width: 52rem;
}

.staff-note {
  font-size: 1rem;
  color: #444;
}

.staff-section {
  border-top: 2px solid #ddd;
  margin-top: 2rem;
  padding-top: 0.5rem;
}

.staff-section h3 {
  margin-bottom: 0.75rem;
}

.record-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 0 0.5rem;
  font-size: 1rem;
  margin: 0 0 1rem;
}

.record-summary dt {
  font-weight: bold;
}

.record-summary dt::after {
  content: ':';
}

.record-summary dd {
  margin: 0 1.5rem 0 0;
}

/* role="status" — announced politely, never steals focus mid-typing. */
.save-status {
  font-size: 1rem;
  color: #444;
  min-height: 1.6em;
  margin: 1rem 0 0;
}

.checkbox-label {
  font-weight: normal;
}

/* What a consent item actually covers. Open by default, folded away once
   the box is ticked — reading it is the point, so it never starts hidden.

   Indented and ruled so it reads as belonging to the statement above it
   rather than as the next question. */
.consent-detail {
  margin: 0.5rem 0 1rem 1.75rem;
  padding: 0 0 0 0.75rem;
  border-left: 4px solid #ccc;
}

.consent-detail summary {
  font-weight: bold;
  cursor: pointer;
  /* 24px target — WCAG 2.2 AA 2.5.8. The marker is small, so the row
     itself carries the height. */
  padding: 0.35rem 0;
  min-height: 24px;
}

.consent-detail summary:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

.consent-detail p { margin: 0.5rem 0 }
.consent-detail ul { margin: 0.5rem 0; padding-left: 1.5rem }
.consent-detail li { margin-bottom: 0.25rem }

.button-link {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  border: 2px solid var(--focus);
  border-radius: 4px;
  text-decoration: none;
}

/* ---------- provisioning worklist ---------- */

.prov-list { list-style: none; padding: 0; margin: 0 }

.prov-item {
  border: 2px solid #ccc;
  border-radius: 4px;
  padding: 1rem;
  margin-bottom: 1rem;
}

.prov-head { margin-bottom: 0.75rem }

.prov-status {
  display: inline-block;
  font-weight: bold;
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  border: 2px solid var(--error);
  color: var(--error);
  font-size: 1rem;
}

.prov-meta { display: block; font-size: 1rem; color: #444; margin-top: 0.35rem }

.prov-steps { list-style: none; padding: 0; margin: 0 0 0.75rem }

.prov-step {
  border-left: 4px solid #ccc;
  padding: 0.35rem 0 0.35rem 0.75rem;
  margin-bottom: 0.4rem;
  font-size: 1rem;
}

.prov-step-done { border-left-color: #2f6f3e }
.prov-step-failed { border-left-color: var(--error) }
.prov-step-not-run { border-left-color: #8a6d00 }
.prov-step-skipped { border-left-color: #999 }

.prov-step-label { font-weight: bold }
.prov-step-outcome { margin-left: 0.5rem }
.prov-step-detail { display: block; color: #444 }

/* Wraps rather than truncating: the error is the whole reason someone is
   on this page, and a half-shown message means opening the logs. */
.prov-step-error {
  display: block;
  color: var(--error);
  overflow-wrap: anywhere;
}

/* "for participant John Fogerty" beside a caller's name on the worklist.
   Its own line at narrow widths, so a long pair of names never pushes the
   row's date and source off the side. Lighter than the caller's name
   because it is context rather than the row's title. */
.enquiry-for {
  display: block;
  font-size: 0.9rem;
  font-weight: normal;
  color: #444;
}

/* A participant nobody has named yet. Marked so it reads as something to
   chase rather than as ordinary detail — same reason a blank prefill says
   why it is blank. */
.enquiry-for-missing {
  font-style: italic;
  color: #6b4200;
}

/* FO2007's third signature line, filled in by the staff member at the
   screen. Boxed so it reads as their part of the form rather than another
   question about the participant. */
.ascent-signature {
  border: 2px solid #ccc;
  border-radius: 4px;
  padding: 1rem;
  margin: 1.5rem 0;
}

.ascent-signature legend { font-weight: bold; padding: 0 0.5rem }

/* Sending the client a link, below the form for taking it on a call. Ruled
   off so it reads as an alternative rather than more of the same form. */
.send-link {
  border-top: 2px solid #ccc;
  margin-top: 2rem;
  padding-top: 1rem;
}

/* The link itself, to be read aloud or selected and copied. Wraps rather
   than overflowing — a URL that runs off the side cannot be copied by
   hand, which is the fallback when the clipboard is blocked. */
.issued-link {
  display: block;
  padding: 0.5rem;
  background: #fff;
  border: 1px solid #999;
  border-radius: 4px;
  font-size: 0.95rem;
  word-break: break-all;
}

/* A standing statement on a staff page — consent already recorded, or
   outstanding. Distinct from .error, which is something that went wrong:
   this is information the reader has to act on, not a failure. */
.notice {
  border-left: 4px solid var(--focus);
  background: #f4f7ff;
  padding: 0.75rem 1rem;
  margin: 0 0 1.5rem;
}

.notice p { margin: 0 0 0.5rem }
.notice p:last-child { margin-bottom: 0 }

/* The consent statement on /staff/consent. Boxed and always open — the
   entire purpose of the page is that somebody reads it out, so unlike the
   intake's version this never folds away. */
.consent-statement {
  border: 2px solid #ccc;
  border-radius: 4px;
  padding: 1rem;
  margin: 0 0 1.5rem;
}

.consent-statement h3 { margin-top: 0 }
.consent-statement ul { margin: 0.5rem 0; padding-left: 1.5rem }
.consent-statement li { margin-bottom: 0.25rem }

/* The words themselves, set larger than the page around them: this is the
   sentence being read aloud, the same reasoning as the endorsement
   letter's script. */
.consent-words {
  font-size: 1.15rem;
  line-height: 1.5;
}

.notice-line {
  border-left: 4px solid var(--focus);
  padding-left: 0.75rem;
  font-weight: bold;
}

/* ---------- duplicate check ---------- */

.dup-check {
  border: 2px solid #ccc;
  border-left-width: 8px;
  border-radius: 4px;
  padding: 0.75rem 1rem;
  margin: 1rem 0;
  font-size: 1rem;
}

.dup-check p { margin: 0.25rem 0 0 }
.dup-check ul { margin: 0.5rem 0 0; padding-left: 1.1rem }
.dup-check li { margin-bottom: 0.5rem }
.dup-name { font-weight: bold; display: block }
.dup-why { color: #444; display: block }

.dup-loading { color: #444 }

/* Possible matches and "we couldn't check" both warrant a second look, so
   both are marked. Only a genuine clear result is unmarked — an unchecked
   list must never read as a clean one. */
.dup-found { border-color: var(--error) }
.dup-unchecked { border-color: #8a6d00 }
.dup-clear { border-color: #2f6f3e }

/* ---------- document uploads ---------- */

.doc-list { list-style: none; padding: 0; margin: 0 }

.doc {
  border: 2px solid #ccc;
  border-radius: 4px;
  padding: 1rem;
  margin-bottom: 0.75rem;
}

.doc-have { border-color: #2f6f3e }

.doc-head {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  align-items: baseline;
}

.doc-label { font-weight: bold }

/* "Still needed" is a nudge, not an error — nothing here blocks a
   submission, so it must not look like something has gone wrong. */
.doc-expected {
  font-size: 1rem;
  color: #8a6d00;
  font-weight: bold;
}

.doc-status { font-size: 1rem; color: #444 }

/* The native file input is replaced by a styled label, but it stays in
   the DOM and keyboard-reachable rather than being display:none — hiding
   it outright takes it out of the tab order and off screen readers. */
.doc-choose input[type='file'] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.doc-choose input[type='file']:focus-visible + span,
.doc-choose:focus-within .button-link {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

.doc-choose { display: inline-block; cursor: pointer }
.doc-progress { display: block; margin-top: 0.5rem; color: #444 }

/* ---------- signature pad ---------- */

.sigpad-canvas {
  display: block;
  width: 100%;
  max-width: 30rem;
  height: auto;
  /* Solid, high-contrast border: the box has to be obviously a place to
     write, including for someone with low vision holding a tablet. */
  border: 2px solid #666;
  border-radius: 4px;
  background: #fff;
  /* Stops the browser panning or zooming the page when a finger drags
     across the canvas, which would otherwise make signing on a tablet
     scroll the form instead of drawing. */
  touch-action: none;
  cursor: crosshair;
}

.sigpad-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  margin-top: 0.5rem;
}

.sigpad-status {
  font-size: 1rem;
  color: #444;
}

.consent-block {
  border-top: 2px solid #ddd;
  margin-top: 2rem;
  padding-top: 1rem;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- staff navigation ---------- */

.staff-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  border-bottom: 2px solid #ddd;
  padding-bottom: 0.75rem;
  margin-bottom: 1.5rem;
}

.staff-nav a {
  color: var(--focus);
  text-decoration: underline;
  text-underline-offset: 3px;
  padding: 0.35rem 0;
}

/* The section you're in. Marked with aria-current as well as styled, so
   it never relies on colour or weight alone to be identifiable. */
.staff-nav a[aria-current='true'],
.staff-nav a[aria-current='page'] {
  color: var(--text);
  font-weight: bold;
  text-decoration: none;
}

/* ---------- returned for changes ---------- */

.returned-notice {
  border: 2px solid var(--error);
  border-left-width: 8px;
  border-radius: 4px;
  padding: 1rem 1.25rem;
  margin: 0 0 1.5rem;
}

.returned-notice h3 {
  margin: 0 0 0.5rem;
  font-size: 1.1rem;
  color: var(--error);
}

.returned-notice p { margin: 0 0 0.5rem }
.returned-notice p:last-child { margin-bottom: 0 }

/* ---------- enquiry worklist ---------- */

.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin: 0 0 1.5rem;
}

.tab {
  font: inherit;
  cursor: pointer;
  background: transparent;
  border: 2px solid #666;
  border-radius: 999px;
  padding: .4rem 1rem;
  margin: 0;
}

/* Not colour alone — the current tab is also marked aria-current, and
   carries a heavier border so it reads without relying on hue. */
.tab-on {
  background: var(--text);
  color: #fff;
  border-color: var(--text);
}

.enquiry-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.enquiry {
  border: 2px solid #ccc;
  border-radius: 4px;
  margin-bottom: .75rem;
}

.enquiry-open { border-color: var(--focus) }

.enquiry-head {
  display: block;
  width: 100%;
  text-align: left;
  font: inherit;
  background: transparent;
  border: none;
  padding: 1rem;
  margin: 0;
  cursor: pointer;
}

.enquiry-name { display: block; font-weight: bold }
.enquiry-meta { display: block; font-size: 1rem; color: #444 }

.enquiry-flagcount {
  display: inline-block;
  margin-top: .35rem;
  font-size: 1rem;
  font-weight: bold;
  color: var(--error);
}

.enquiry-detail {
  padding: 0 1rem 1rem;
  border-top: 1px solid #ddd;
}

.flags {
  border-left: 4px solid var(--error);
  padding-left: .75rem;
  margin: 1rem 0;
}

.closed-note {
  border-left: 4px solid #666;
  padding-left: .75rem;
  margin: 1rem 0;
}

.closed-note p { margin: .25rem 0 0 }

.flags h3 { font-size: 1rem; margin: 0 0 .35rem }
.flags ul { margin: 0; padding-left: 1.1rem }
.streams { margin: 1rem 0 }
.close-form { margin-top: 1rem }

.review-queue {
  list-style: none;
  padding: 0;
  margin: 0;
}

.review-queue li {
  margin-bottom: 0.75rem;
}

.review-queue .button-link {
  display: block;
}

/* ---------- ShiftCare connection check ---------- */

/* Set apart from the worklist above it: this is a diagnostic you go
   looking for, not part of the day-to-day queue. */
.sc-check {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 2px solid #ccc;
}

.sc-check h3 { margin: 0 0 0.5rem }

.sc-check-result { margin-top: 1rem }

.sc-check-headline { font-weight: bold; margin: 0 0 0.5rem }

/* Never colour alone — each headline says in words what it means, so the
   colour is reinforcement rather than the message (WCAG 1.4.1). */
.sc-check-ok { color: #2f6f3e }
.sc-check-bad { color: var(--error) }

/* Reviewer's choice between creating a new ShiftCare client and attaching
   to an existing one. Bordered and spaced because picking the wrong one
   puts a participant's record on someone else's file — this is not a
   place to make radio buttons compact. */
.dup-choice {
  border: 2px solid #ccc;
  border-radius: 4px;
  margin: 0.75rem 0 0;
  padding: 0.75rem 1rem 1rem;
}

.dup-choice legend { font-weight: bold; padding: 0 0.35rem }

.dup-option {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin-top: 0.6rem;
}

/* 24px minimum target, per WCAG 2.2 AA 2.5.8. */
.dup-option input[type="radio"] {
  width: 24px;
  height: 24px;
  flex: none;
}

.dup-option label { cursor: pointer }

.dup-note { margin: 0.75rem 0 0; color: #444 }

/* ---------- staff enquiry form ---------- */

/* The base input rule covers text and untyped inputs; the staff enquiry
   form also uses tel, email and a select, which would otherwise render
   unstyled and noticeably narrower than the fields above them. */
input[type='tel'],
input[type='email'],
select {
  width: 100%;
  padding: 0.5rem;
  border: 1px solid #666;
  border-radius: 4px;
  background: var(--background);
  color: var(--text);
}

/* One radio or checkbox and its label on a row. 24px targets, per WCAG 2.2
   AA 2.5.8 — staff take these on a phone while holding a handset. */
.option {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin: 0.5rem 0;
}

.option input {
  width: 24px;
  height: 24px;
  flex: none;
}

.option label {
  margin: 0;
  font-weight: normal;
  cursor: pointer;
}

/* Errors listed once at the top and linked to the fields, so a screen
   reader user isn't left hunting for which one needs attention. */
.error-summary {
  border: 2px solid var(--error);
  border-radius: 4px;
  padding: 0.75rem 1rem;
  margin-bottom: 1.5rem;
}

.error-summary h3 { margin: 0 0 0.5rem }
.error-summary ul { margin: 0; padding-left: 1.2rem }
.error-summary a { color: var(--error) }

.field-error input { border-color: var(--error) }

/* ---------- repeating people (plan management access) ---------- */

/* Each person is visibly one group, so a list of three doesn't read as
   twelve loose fields. */
.person-row {
  border-left: 4px solid #ccc;
  padding: 0.5rem 0 0.5rem 0.75rem;
  margin-bottom: 1rem;
}

.person-row .field { margin-bottom: 0.75rem }

/* Labels wrap their inputs here, so the label text needs to sit above the
   box rather than inline with it. */
.person-row label.field {
  display: block;
  font-weight: bold;
}

.person-row label.field input {
  display: block;
  width: 100%;
  margin-top: 0.25rem;
  font-weight: normal;
}

/* A destructive action shouldn't look like the primary one. Underlined
   rather than colour-only, so it reads as an action without relying on
   hue (WCAG 1.4.1). */
.link-button {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: var(--error);
  text-decoration: underline;
  cursor: pointer;
  min-height: 24px;
}

/* ---------- review queue rows ---------- */

/* The participant's name leads the row and the rest is context, so they
   shouldn't compete for attention. */
.queue-name {
  display: block;
  font-weight: bold;
}

.queue-meta {
  display: block;
  font-size: 1rem;
  font-weight: normal;
  color: #444;
  margin-top: 0.15rem;
}

/* ---------- required markers ---------- */

/* The word "(required)", not an asterisk. Readers of this form include
   people with cognitive and literacy impairments and older carers, and a
   "*" means nothing unless you already know the convention — it also
   announces as "star" to a screen reader. Sitting inside the label or
   legend, the word is read as part of the question with no extra ARIA.

   Regular weight against the bold label so it reads as an aside rather
   than part of the question itself, but not lightened to the point of
   failing contrast — it is still #444 on white, comfortably past 4.5:1. */
.required-mark {
  font-weight: normal;
  color: #444;
  white-space: nowrap;
}

/* The section-level rule: one of these fields, not any particular one. */
.required-note {
  border-left: 4px solid var(--focus);
  padding-left: 0.75rem;
  margin: 0 0 1rem;
}

/* ---------- intakes in progress ---------- */

.intake-list { list-style: none; padding: 0; margin: 0 0 1.5rem }

.intake-item { margin-bottom: 0.75rem }

/* The reviewer's reason for sending an intake back. Staff-only by
   construction — this page is behind a gated route, and app.js shows
   participants a plain message and a phone number instead. */
.returned-note {
  border-left: 4px solid #8a6d00;
  padding: 0.5rem 0 0.5rem 0.75rem;
  margin: 0.5rem 0 0;
  font-size: 1rem;
}

.returned-note p { margin: 0.25rem 0 0 }
/* ---------- service agreement ---------- */

/* Core / Capacity Building / Capital, as the agreement groups them. */
.support-group {
  margin: 1.25rem 0 0.5rem;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #444;
}

.support-row {
  border-left: 4px solid #ccc;
  padding: 0.5rem 0 0.5rem 0.75rem;
  margin-bottom: 1rem;
}

.support-label { font-weight: bold; margin: 0 0 0.5rem }

.support-row label.field { display: block; font-weight: bold; margin-bottom: 0.5rem }
.support-row label.field input,
.support-row label.field select { display: block; width: 100%; margin-top: 0.25rem; font-weight: normal }

/* Yes / No / N/A across one row per item. Kept on one line where there's
   room, because nineteen stacked triples is a very long page. */
.assessment-row {
  border: none;
  border-top: 1px solid #ddd;
  padding: 0.5rem 0 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 1rem;
}

.assessment-row legend {
  float: left;
  width: 100%;
  font-weight: normal;
  padding: 0;
}

.assessment-option { display: flex; align-items: baseline; gap: 0.35rem; margin: 0 }

/* 24px targets — WCAG 2.2 AA 2.5.8. */
.assessment-option input { width: 24px; height: 24px; flex: none }

/* A checkbox part inside a person's row reads "[x] Claim Approver" —
   box first, label beside it — where every other part has its label
   above its input. It's a permission rather than a detail. */
.person-row label.field.person-tick {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: normal;
}

/* 24px targets — WCAG 2.2 AA 2.5.8. */
.person-row label.field.person-tick input {
  display: inline-block;
  width: 24px;
  height: 24px;
  margin-top: 0;
  flex: none;
}

/* What a row costs, under the row it's computed from. Not an input:
   these are derived from the quantity, the price and the term, and a
   figure that could be edited away from its own inputs is one nobody
   can check. */
.support-cost {
  margin: 0.25rem 0 0;
  font-weight: bold;
  color: #333;
  min-height: 1.4em;
}

/* And the whole agreement, under the table. Ruled off above so it reads
   as a total rather than as one more row. */
.support-total {
  margin: 1rem 0 0;
  padding-top: 0.75rem;
  border-top: 2px solid #333;
  font-weight: bold;
  font-size: 1.1rem;
}

/* The support item's name, under the code, so a staff member can see they
   picked the right one — the code alone is precise and unreadable. */
.support-item-name {
  margin: -0.25rem 0 0.75rem;
  font-size: 1rem;
  color: #444;
  min-height: 1.4em;
}

/* Second navigation row: what you can do inside the current section.
   Shown rather than hidden behind a menu — a dropdown is a thing that has
   to be operated, and every destination here fits on screen. */
.staff-subnav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  margin: -1rem 0 1.5rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid #ddd;
  font-size: 1rem;
}

.staff-subnav a {
  color: var(--focus);
  text-decoration: underline;
  text-underline-offset: 3px;
  padding: 0.35rem 0;
}

/* The current page. Bold and undecorated as well as darker, so it is
   distinguishable without relying on colour (WCAG 1.4.1). */
.staff-subnav a[aria-current='page'] {
  color: var(--text);
  font-weight: bold;
  text-decoration: none;
}

/* The ShiftCare check sits at the top of the provisioning page, because
   the worklist below it is usually empty and the page therefore looks
   finished before you scroll. It was reported missing twice while present
   and working — a thing nobody can find is not built. */
.sc-check {
  border: 2px solid #ccc;
  border-radius: 4px;
  padding: 1rem 1.25rem;
  margin: 0 0 2rem;
  /* Overrides the separator it had when it lived at the bottom. */
  border-top-width: 2px;
  padding-top: 1rem;
}

.sc-check h3 { margin-top: 0 }

/* Closing an intake, offered on the form itself as well as the worklist —
   the form is where you find out it isn't going ahead. Set apart from the
   submit actions so it reads as a different kind of decision, and not
   styled as a warning: not proceeding is an ordinary outcome. */
.close-intake {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 2px solid #ddd;
}

.close-intake h3 { margin: 0 0 0.5rem }
.close-intake p { margin: 0 0 1rem }

/* The ShiftCare duplicate check on the intake form. Set apart from the
   questions — it is a thing you do, not a thing you answer. */
.dup-inline {
  margin-top: 2rem;
  padding-top: 1.25rem;
  border-top: 2px solid #ddd;
}

.dup-inline h3 { margin: 0 0 0.35rem }
.dup-inline p { margin: 0 0 0.75rem }

.dup-loading { color: #444 }