/* Personal Courage: conversion area (waitlist, careers, thank-you pages, privacy and patient notices).
   Builds on the tokens and components in /assets/css/site.css. No new colors: every colour here is a
   role token from site.css (text, muted, heading on surface/page/tint/tint-amber, in both themes;
   see tools/check-contrast.py), plus navy-900 on amber-400 for the step numbers in both themes. */

/* ======================================================================
   1. Form page layout (waitlist + careers)
   ====================================================================== */
.form-layout { display: grid; gap: var(--space-l); align-items: start; }
@media (min-width: 1024px) {
  .form-layout { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: clamp(2rem, 4vw, 3.5rem); }
}
.form-layout__main, .form-layout__aside { display: grid; gap: var(--space-m); min-width: 0; }

.form-crisis { margin: 0; }

.form-card {
  padding: clamp(1.25rem, 0.6rem + 2.8vw, 2.75rem);
  background: var(--color-surface);
  border: 1px solid rgba(var(--edge-rgb), 0.07);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}
.form-card__title { font-size: var(--step-3); margin-bottom: 0.35em; }
.form-card__intro { color: var(--color-muted); max-width: 60ch; }
.form-privacy { margin-bottom: var(--space-l); }

/* Form parts: numbered groups of the required questions */
.form-part { display: grid; gap: 1.35rem; padding-top: var(--space-l); border-top: 1px solid var(--color-border); }
.form-part__title { display: flex; align-items: center; gap: 0.75rem; font-size: var(--step-2); margin: 0; }
.form-part__num {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: var(--amber-400);
  color: var(--navy-900); /* navy on amber in both themes (8.2:1) */
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0;
}
.form-part__note { margin: 0; font-size: var(--step--1); color: var(--color-muted); max-width: 62ch; }

/* The resume drop area (Tim, 2026-09-28). forms.js builds it around the file input from the page's
   <template> (dropzoneTemplate() in components.mjs); without JavaScript the plain file input shows.
   States: empty (dashed), dragging (.is-dragover), ready (.is-ready) and wrong file (.is-wrong).
   Colours are role tokens only; the pairs are in tools/check-contrast.py ("resume drop area"). */
.dropzone {
  position: relative;
  display: grid;
  gap: 0.75rem;
  padding: 0.75rem;
  border: 2px dashed var(--color-border-strong);
  border-radius: var(--radius);
  background: var(--color-surface);
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
/* The native input stays the real control: visually hidden but focusable (never display:none), first in
   the area, so its keyboard focus ring can be drawn on the pill (empty) or on "choose another" (a file). */
.dropzone > input.dropzone__input[type='file'] {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  min-height: 0;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.dropzone__input:focus-visible + .dropzone__empty .dropzone__button { outline: 3px solid var(--focus); outline-offset: 3px; }
.dropzone__input:focus-visible ~ .dropzone__again label { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 4px; }

/* Empty: the whole area opens the file dialog. */
.dropzone__empty { display: grid; justify-items: center; gap: 0.3rem; padding: 1.25rem 0.5rem 1.4rem; text-align: center; cursor: pointer; }
.dropzone__disc { display: inline-grid; place-items: center; width: 56px; height: 56px; margin-bottom: 0.4rem; border-radius: 50%; background: var(--color-tint); color: var(--color-label); }
.dropzone__title { margin: 0; font-size: var(--step-1); font-weight: 650; line-height: 1.3; color: var(--color-heading); }
.dropzone__line { margin: 0; color: var(--color-muted); }
.dropzone__drag { display: none; }
/* A picture of the site's small ghost button (.btn--ghost.btn--sm); the input behind it is the control. */
.dropzone__button {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: 0.7rem;
  padding: 0.55rem 1.1rem;
  border: 2px solid var(--color-heading);
  border-radius: var(--radius-pill);
  color: var(--color-heading);
  font-size: 0.9375rem;
  font-weight: 650;
  line-height: 1.2;
  white-space: nowrap;
  transition: background-color var(--dur) var(--ease);
}
.dropzone__empty:hover .dropzone__button { background: var(--color-tint-strong); }
.dropzone__status:empty { display: none; }

/* A file is chosen (ready, or a wrong file): the card replaces the empty area. */
.dropzone.is-ready, .dropzone.is-wrong { border-style: solid; }
.dropzone.is-ready { border-color: var(--color-success); }
.dropzone.is-wrong, .field.has-error .dropzone:not(.is-dragover) { border-color: var(--color-error); }
.dropzone.is-ready .dropzone__empty, .dropzone.is-wrong .dropzone__empty { display: none; }
.dropzone__again { display: none; margin: 0 0 0.15rem; font-size: var(--step--1); text-align: center; color: var(--color-muted); }
.dropzone.is-ready .dropzone__again, .dropzone.is-wrong .dropzone__again { display: block; }
.dropzone__again label { color: var(--color-link); text-decoration: underline; text-underline-offset: 0.18em; cursor: pointer; }
.dropzone__again label:hover { color: var(--color-heading); text-decoration-thickness: 2px; }
/* The card wraps on a narrow screen: the name keeps at least ~11rem and Remove moves to its own line. */
.dropzone__card { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.85rem; padding: 0.8rem 0.6rem 0.8rem 1rem; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-page); }
.dropzone__file-icon { display: block; flex: none; color: var(--color-label); }
.dropzone__file { flex: 1 1 11rem; min-width: 0; }
.dropzone__name { margin: 0; font-weight: 650; line-height: 1.35; color: var(--color-text); overflow-wrap: anywhere; }
.dropzone__ready, .dropzone__cant { display: flex; align-items: center; gap: 0.3rem; margin: 0.2rem 0 0; font-size: var(--step--1); font-weight: 650; line-height: 1.35; }
.dropzone__ready { color: var(--color-success); }
.dropzone__cant { color: var(--color-error); }
.dropzone__remove {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 0.3rem;
  min-height: 44px;
  margin-left: auto;
  padding: 0 0.7rem;
  border: 0;
  border-radius: var(--radius-pill);
  background: none;
  color: var(--color-link);
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 650;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.dropzone__remove:hover { background: var(--color-tint-strong); color: var(--color-heading); }

/* Dragging a file over the area (last, so it wins over the states above). */
.dropzone.is-dragover { border-style: solid; border-color: var(--color-link); background: var(--color-tint); }
.dropzone.is-dragover .dropzone__disc { background: var(--color-surface); }
.dropzone.is-dragover .dropzone__idle { display: none; }
.dropzone.is-dragover .dropzone__drag { display: inline; }
.dropzone.is-dragover .dropzone__button { visibility: hidden; }
/* The last part (consent) has no heading; it sits right above the send button. */
.form-part--final { gap: 0.75rem; }

/* The optional questions: one closed <details class="more"> (the disclosure itself is styled in
   site.css). Here it only gets the same divider as a form part, and spacing for the fields inside. */
.pc-form .form-optional { margin: 0; padding-top: var(--space-m); border-top: 1px solid var(--color-border); }
.pc-form .form-optional > .more__body { display: grid; gap: 1.35rem; padding-top: 1rem; }

.field-row { display: grid; gap: 1.35rem; align-items: start; }
@media (min-width: 560px) {
  .field-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Long checkbox lists read better in two columns once there is room. */
@media (min-width: 640px) {
  .field--group[data-layout='columns'] .choices { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.5rem; }
}

.field__counter.is-near-limit { color: var(--color-text); font-weight: 650; }

/* Status box added by forms.js (preview notice, send failure). */
.form-notice { flex-direction: column; gap: 0.35rem; }
.form-notice p { margin: 0; }
.form-notice a { font-weight: 650; }

/* Cloudflare Turnstile (2026-10-07): the anti-bot check, drawn by forms.js into [data-turnstile] above the status line.
   Flexible width (Cloudflare's "flexible" size fills its container from 300 px up); empty, and so flat, without JavaScript. */
.turnstile:not(:empty) { margin-top: var(--space-s); }

.pc-form .form-actions { padding-top: var(--space-s); }
@media (max-width: 479.98px) {
  .pc-form .form-actions .btn { width: 100%; }
}

/* Sidebar cards */
.aside-card {
  position: relative;
  padding: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  background: var(--color-surface);
  border: 1px solid rgba(var(--edge-rgb), 0.07);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.aside-card > :last-child { margin-bottom: 0; }
.aside-card--sky { background: var(--color-tint); border-color: var(--color-tint-border); box-shadow: none; }
.aside-card__title { font-size: var(--step-2); margin-bottom: 0.6em; }
.aside-card__talk { margin: 1.25rem 0 0.75rem; }
/* Sooner-care resources (waitlist): renders only when site.sooner.resources has entries. */
.aside-card__sooner { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--color-border); }
.aside-card__subtitle { font-size: var(--step-1); margin: 0 0 0.5rem; }
.sooner-list { display: grid; gap: 0.75rem; margin: 0; padding: 0; list-style: none; }
.sooner-list p { margin: 0; }
.sooner-list__name { font-weight: 700; color: var(--color-heading); }

/* "What happens next" (waitlist side box, thank-you page) uses the shared steps (site.css .steps--stack). */

/* ======================================================================
   2. Thank-you pages
   ====================================================================== */
.thanks-card {
  max-width: 44rem;
  padding: clamp(1.5rem, 1rem + 2.5vw, 3rem);
  background: var(--color-surface);
  border: 1px solid rgba(var(--edge-rgb), 0.07);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}
.thanks-card > :last-child { margin-bottom: 0; }
.thanks-card__title { font-size: var(--step-3); margin-bottom: 1.25rem; }
.thanks-card__talk { margin: 1.75rem 0 0.75rem; }
.thanks-card__notice { margin: 1.5rem 0 0; }
.thanks-card__link { margin: 1.25rem 0 0; }
.thanks-crisis { max-width: 44rem; margin-top: var(--space-m); }
/* The files the receiver confirmed it saved (forms.js fills and shows it; hidden otherwise). */
.receipt { max-width: 44rem; margin: 0 0 var(--space-m); padding: 1.25rem 1.5rem; background: var(--color-success-bg); border: 1px solid var(--color-success-border); border-radius: var(--radius); }
.receipt__title { margin: 0 0 0.5rem; font-weight: 700; color: var(--color-success); }
.receipt__list { margin: 0; padding-left: 1.25rem; overflow-wrap: anywhere; }
.receipt__when { margin: 0.5rem 0 0; font-size: var(--step--1); }
.receipt__when:empty { display: none; }

/* ======================================================================
   3. Careers
   ====================================================================== */
/* "Who we're looking for" (careers): two short lists with the same amber edge as the points, a lead line before each. */
.role-list { display: grid; gap: 0.6rem; margin: 0; padding: 0; list-style: none; max-width: 60rem; }
.role-list li { padding-left: 1rem; border-left: 3px solid var(--amber-400); }
.role-lead { margin: 1.75rem 0 1rem; max-width: 60rem; }
.role-note { margin: 1.25rem 0 0; color: var(--color-muted); }

/* "Why work here": four short points, plain text (no icons, no cards). */
.points { display: grid; gap: 1.5rem 2.5rem; margin: 0; padding: 0; list-style: none; max-width: 60rem; }
@media (min-width: 720px) { .points { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.point { padding-left: 1rem; border-left: 3px solid var(--amber-400); }
.point__title { font-family: var(--font-body); font-size: var(--step-1); font-weight: 700; margin: 0 0 0.3rem; }
.point__text { margin: 0; color: var(--color-muted); max-width: 44ch; }

/* Openings (only when site.careers.openings has current entries). */
.openings { display: grid; gap: 1.25rem; }
.opening {
  padding: clamp(1.25rem, 1rem + 1.5vw, 2rem);
  background: var(--color-surface);
  border: 1px solid rgba(var(--edge-rgb), 0.07);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.opening__title { font-size: var(--step-2); margin-bottom: 0.6rem; }
/* The facts read as one quiet line ("Full-time · Grand Rapids, MI · …"), not a cluster of chips. */
.opening__facts { display: flex; flex-wrap: wrap; gap: 0 0.5rem; margin: 0 0 1rem; padding: 0; list-style: none; color: var(--color-muted); font-size: 0.9375rem; }
.opening__facts li + li::before { content: '·'; content: '·' / ''; margin-right: 0.5rem; }
.opening__body { max-width: var(--measure); }

/* ======================================================================
   4. Legal pages (privacy, patient notices)
   ====================================================================== */
.legal-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-l); align-items: start; }
@media (min-width: 1024px) {
  .legal-layout { grid-template-columns: 250px minmax(0, 1fr); gap: clamp(2rem, 5vw, 4.5rem); }
  .legal-toc { position: sticky; top: calc(var(--header-h) + 1.5rem); max-height: calc(100vh - var(--header-h) - 3rem); overflow-y: auto; }
}

.legal-toc {
  padding: 1.25rem 1.35rem;
  background: var(--color-surface);
  border: 1px solid rgba(var(--edge-rgb), 0.07);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.legal-toc__title {
  margin: 0 0 0.5rem;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-label);
}
.legal-toc__list { margin: 0; padding-left: 1.25rem; font-size: 0.9375rem; line-height: 1.4; }
.legal-toc__list li + li { margin-top: 0; }
/* block, not inline-block (addendum 1, 2026-10-04): an inline-block sits on the line by its last line's baseline, so a
   wrapped entry showed its number beside its last line. A block starts on the first line, fills the box's width and keeps
   the same padding, so the tap target is no smaller than before. */
.legal-toc__list a { display: block; padding-block: 0.35rem; }

.legal-body > h2:first-of-type { margin-top: 1.5em; }

.legal-callout {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  padding: 1rem 1.15rem;
  border-radius: var(--radius-sm);
  background: var(--color-tint-amber);
  border: 1px solid var(--color-tint-amber-border);
  border-left: 5px solid var(--color-callout-edge);
  color: var(--color-text);
  font-weight: 600;
}
.legal-callout .icon { margin-top: 0.1em; color: var(--color-callout-icon); }

.legal-card {
  padding: clamp(1.25rem, 1rem + 1.5vw, 2rem);
  background: var(--color-surface);
  border: 1px solid rgba(var(--edge-rgb), 0.09);
  border-top: 5px solid var(--color-accent-rule);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.legal-card > * + * { margin-top: 0.85em; }
.legal-card .legal-card__title { margin-top: 0; font-size: var(--step-2); }

.legal-crisis { margin-top: 1.75em; }
.legal-hours { max-width: 26rem; }

/* The Notice of Privacy Practices opens with the header federal privacy law requires, before the title (pageHero's
   `before` slot, 2026-10-04). The draft writes it in capitals, so no text-transform: the text is the text. */
.legal-required { max-width: var(--measure); margin: 0 0 1.25rem; font-family: var(--font-body); font-size: var(--step-0); font-weight: 700; line-height: 1.45; color: var(--color-heading); }

/* The official HHS taglines on the Free Language Help sheet (2026-10-06; _shared.mjs languageHelpSheet), as one block
   (Tim, 2026-10-07: "A"; every language stays visible, 45 CFR 92.11 wants them conspicuous): a panel in the notice
   boxes' colours (the tint, its hairline border, its corners), set apart from the English text above it. Inside, a grid
   with one item per language: one column on phones, two from the site's 768px breakpoint (the mobile bar's), flowing
   in document order, so the reading order is CMS's. Each item is the language's English name as a small, quiet label
   (the small step, muted) over its tagline at the body size, real text in its own script (lang, and dir="rtl" for
   Arabic and Syriac); the body font stack leaves each script to the reader's system fonts, except Syriac (below). An
   item may shrink to its column and a long word breaks, so nothing widens the page at 320px. Nothing here is hidden,
   folded or clipped; tests/legal-notices.test.cjs (section 3b) reads these rules. */
.taglines-panel {
  margin: 1.5em 0 0;
  padding: clamp(1rem, 0.8rem + 1vw, 1.4rem) clamp(1rem, 0.8rem + 1vw, 1.5rem);
  background: var(--color-tint);
  border: 1px solid var(--color-notice-border);
  border-radius: var(--radius-sm);
}
.taglines { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.1rem 1.5rem; margin: 0; }
@media (min-width: 768px) {
  .taglines { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.taglines__item { min-width: 0; }
.taglines__language { font-family: var(--font-body); font-size: var(--step--1); font-weight: 600; line-height: 1.4; letter-spacing: 0.01em; color: var(--color-muted); }
.taglines__text { margin: 0.25em 0 0; overflow-wrap: break-word; }
.taglines__text[dir="rtl"] { text-align: right; }
/* The Syriac line alone (addendum 1, 2026-10-06): Google's Syriac web font, which the two sheet pages load (_shared.mjs
   SYRIAC_FONT_HREF), so the line draws on devices without a Syriac font of their own; the body stack is the fallback. */
.taglines__text[lang="syr"] { font-family: "Noto Sans Syriac Eastern", var(--font-body); }

/* Beside the inquiry form (Part 4, item 4.6): links to the Free Language Help sheet and the Good Faith Estimate notice. */
.aside-card__notices { display: grid; gap: 0.6rem; margin: 1.5rem 0 0; padding: 1.25rem 0 0; border-top: 1px solid var(--color-border); list-style: none; }

@media print {
  .legal-toc { display: none !important; }
  .legal-layout { display: block; }
}

/* Careers: practice leadership note (the CEO is not part of the clinical team). */
/* Leadership team (three people, 2026-09-25): a quiet row of photo + name + one line. */
.leaders { margin: 2.5rem 0 0; padding-top: 1.75rem; border-top: 1px solid var(--color-border); }
.leaders__more { margin: 0; }
.leaders__more > .more__body { padding-top: 1.25rem; }
.leader-list { display: grid; gap: 1.5rem 2rem; margin: 0; padding: 0; list-style: none; }
@media (min-width: 960px) { .leader-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.leader-note { display: flex; gap: 1.1rem; align-items: flex-start; max-width: 44rem; margin: 0; }
.leader-note .headshot { width: 88px; max-width: 88px; flex: none; margin: 0.4rem; }
.leader-note__text p { margin: 0; }
.leader-note__name { color: var(--color-heading); margin-bottom: 0.3rem !important; }
.leader-note__bio { color: var(--color-muted); font-size: 0.9375rem; }
@media (max-width: 479.98px) { .leader-note { align-items: flex-start; } .leader-note .headshot { width: 72px; } }