/* src/modules/intake/intake.css — the client-facing intake page.
   Its own stylesheet because its user is not the trainer: no header chrome, no bottom nav, and a
   single column read once on a phone that has never seen this app before. It reuses index.css's form
   controls and buttons rather than restyling them — a client filling this in and a trainer editing a
   record should be typing into the same-looking field. */

.intake-view {
  padding: 20px 16px calc(32px + var(--safe-bottom, 0px)) 16px;
}

.intake-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}

.intake-brand {
  margin: 0;
  font-family: var(--font-header);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text-main);
}

.intake-brand-accent {
  color: var(--primary);
}

.intake-langs {
  display: flex;
  gap: 6px;
}

/* A real target, not just the 13px of text — this is the first control on the page and it decides
   which language everything else, including the consent wording, is read in. */
.intake-lang {
  min-height: 40px;
  padding: 0 12px;
  border: 1px solid var(--border-color);
  border-radius: 999px;
  background: transparent;
  color: var(--text-muted);
  font-family: inherit;
  font-size: 0.85rem;
  cursor: pointer;
}

.intake-lang.is-active {
  border-color: transparent;
  background: var(--primary-light);
  color: var(--primary);
  font-weight: 600;
}

.intake-title {
  margin: 0 0 8px 0;
  font-family: var(--font-header);
  font-size: 1.5rem;
  line-height: 1.2;
  color: var(--text-main);
}

.intake-lede {
  margin: 0 0 22px 0;
  color: var(--text-muted);
  line-height: 1.45;
}

/* Who the link says it came from. Set apart from the page's own words — a bordered block above the
   form — because it is the one thing here that a stranger wrote, and the reader is being asked to
   compare it with what they already know rather than to believe it. */
.intake-sender {
  margin: 0 0 20px 0;
  padding: 12px 14px;
  border: 1px solid var(--border-color, rgba(15, 23, 42, 0.14));
  border-left: 3px solid var(--primary, #6366f1);
  border-radius: var(--border-radius-md);
  background: color-mix(in srgb, var(--primary, #6366f1) 6%, transparent);
}

.intake-sender-for {
  margin: 0 0 6px 0;
  font-weight: 600;
  line-height: 1.35;
  /* A crafted link can hold a very long name: it wraps rather than pushing the page sideways. */
  overflow-wrap: anywhere;
}

.intake-sender .intake-hint {
  margin: 0;
}

/* The trainer's own number and address, as things to tap rather than to copy. Laid out as separate
   rows with real padding, because this is read at arm's length on somebody's own phone and a link
   the width of its text is a link that gets mis-tapped. */
.intake-sender-contact {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  margin: 0 0 8px 0;
}

.intake-sender-link {
  padding: 8px 0;
  font-weight: 600;
  color: var(--primary, #6366f1);
  text-decoration: none;
  overflow-wrap: anywhere;
}

.intake-sender-link:hover,
.intake-sender-link:focus-visible {
  text-decoration: underline;
}

/* "Step 1" / "Step 2": real headings, so the order is read and not guessed from where things stand. */
.intake-step {
  margin: 0 0 8px 0;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.3;
}

.intake-sender-save {
  margin: 0 0 10px 0;
}

.intake-form {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.intake-hint {
  margin: -6px 0 10px 0;
  font-size: 0.82rem;
  line-height: 1.4;
  color: var(--text-muted);
}

.intake-consent {
  margin: 12px 0 4px 0;
  padding: 14px;
  border: 1px solid var(--card-border);
  border-radius: var(--border-radius-md, 12px);
  background: color-mix(in srgb, var(--primary) 6%, transparent);
}

/* The whole row is the label, so the tick target is the sentence and not a 16px box. */
.intake-consent-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  line-height: 1.45;
  cursor: pointer;
}

.intake-consent-row input {
  width: 22px;
  height: 22px;
  margin-top: 2px;
  flex: 0 0 auto;
  accent-color: var(--primary);
}

.intake-consent-links {
  margin: 10px 0 0 0;
  font-size: 0.85rem;
}

.intake-consent-links a {
  color: var(--primary);
  /* Underlined, not colour-only: this is the link to the wording someone is being asked to agree to,
     and it has to read as a link in greyscale and to a colour-blind reader. */
  text-decoration: underline;
}

.intake-status {
  margin: 14px 0 0 0;
  padding: 10px 12px;
  border-radius: var(--border-radius-md, 12px);
  font-size: 0.9rem;
  line-height: 1.4;
  background: var(--border-color);
  color: var(--text-main);
}

.intake-status.is-error {
  background: color-mix(in srgb, var(--danger) 14%, transparent);
  color: var(--danger);
}

/* A share the browser refused, with the file saved instead (ruled 2026-09-17). Neither
   red nor green: nothing is broken and nothing is finished — the client is holding the file and has
   one step left. The bar down the side is what makes it noticeable without shouting, and the text
   keeps the ordinary colour so it stays readable on every theme. */
.intake-status.is-warn {
  background: color-mix(in srgb, var(--warning) 16%, transparent);
  border-inline-start: 4px solid var(--warning);
  color: var(--text-main);
}

.intake-status.is-done {
  background: color-mix(in srgb, var(--success, #10b981) 16%, transparent);
  color: var(--text-main);
}

/* The browser's own refusal message, under the status line. Quiet, and wrapping anywhere: it is
   machine text of unpredictable length, and a long word must not push the form sideways. */
.intake-status-detail {
  margin: 6px 0 0 0;
  padding: 0 12px;
  font-size: 0.78rem;
  line-height: 1.4;
  color: var(--text-muted);
  overflow-wrap: anywhere;
}

.intake-status-detail[hidden] {
  display: none;
}

.intake-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 18px;
}

.intake-btn {
  min-height: 52px;
  font-size: 1rem;
}

.intake-privacy-note {
  margin-top: 14px;
}

/* The saved file, pre-addressed. Hidden until there is a file, so it never sits on screen as an
   email somebody could send with nothing attached. */
.intake-send-to {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 12px;
}

.intake-send-to .intake-hint {
  margin: 0;
}