/* ═══════════════════════════════════════════════════════════════════
   Intake form — screen + print.

   This form deliberately has NO action and NO submit-to-server path.
   It is filled in on screen and printed, or printed blank and written by
   hand. Nothing typed into it leaves the visitor's device, which is what
   keeps the privacy notice literally true.
   ═══════════════════════════════════════════════════════════════════ */

.intake { padding-block: clamp(110px, 14vw, 170px) var(--section-y); }
.intake .wrap { max-width: 820px; }

.intake__lede { font-size: var(--t-body-lg); color: var(--text-muted); max-width: 62ch; }

.intake__note {
  margin: var(--s7) 0 var(--s9);
  padding: var(--s5) var(--s6);
  border-left: 2px solid var(--accent);
  background: color-mix(in srgb, var(--accent) 6%, transparent);
  font-size: var(--t-small);
  max-width: 62ch;
}

.intake__actions {
  display: flex; gap: var(--s4); flex-wrap: wrap;
  margin-bottom: var(--s9);
}

/* ── sections ── */

.fs { border: 0; padding: 0; margin: 0 0 var(--s9); min-width: 0; }
.fs > legend {
  font-family: var(--font-display);
  font-size: 1.75rem; line-height: 1.2;
  padding: 0 0 var(--s4);
  margin-bottom: var(--s6);
  border-bottom: 1px solid var(--rule);
  width: 100%;
}
.fs__hint { color: var(--text-muted); font-size: var(--t-small); margin: -12px 0 var(--s6); max-width: 62ch; }

/* ── fields ── */

.q { margin-bottom: var(--s6); break-inside: avoid; }
.q > label, .q__legend {
  display: block;
  font: 500 var(--t-eyebrow)/1.4 var(--font-body);
  text-transform: uppercase; letter-spacing: .18em;
  color: var(--brass);
  margin-bottom: var(--s2);
}
.q input[type="text"], .q input[type="date"], .q textarea, .q select {
  width: 100%;
  background: transparent;
  border: 0; border-bottom: 1px solid var(--rule-strong);
  border-radius: 0;
  padding: 10px 0;
  font: 400 var(--t-body)/1.6 var(--font-body);
  color: var(--text);
}
.q textarea { resize: vertical; min-height: 78px; }
.q input:focus, .q textarea:focus, .q select:focus {
  outline: none; border-bottom: 2px solid var(--accent);
}
.q input:focus-visible, .q textarea:focus-visible, .q select:focus-visible {
  outline: 2px solid var(--focus); outline-offset: 3px;
}
.q__sub { color: var(--text-muted); font-size: var(--t-small); margin-top: 6px; }
.q__sub--gap { margin-top: var(--s5); }

.row { display: grid; gap: var(--s6); }
@media (min-width: 700px) {
  .row--2 { grid-template-columns: 1fr 1fr; }
  /* The date column is narrower because a date is short; giving it an equal
     third would squeeze the two fields that actually need the width. */
  .row--3 { grid-template-columns: 1fr .7fr 1fr; }
}

/* ── choice groups ── */

.opts { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); margin-top: var(--s2); }
.opt { display: flex; align-items: center; gap: 10px; min-height: 44px; }
.opt input { width: 17px; height: 17px; accent-color: var(--accent); flex: none; margin: 0; }
.opt label { font-size: var(--t-body); }

.ack { display: flex; gap: var(--s4); align-items: flex-start; padding-block: var(--s3); break-inside: avoid; }
.ack input { width: 18px; height: 18px; margin-top: 5px; accent-color: var(--accent); flex: none; }
.ack label { font-size: var(--t-body); }

/* ── signature ── */

.sign { display: grid; gap: var(--s7); margin-top: var(--s7); }
@media (min-width: 700px) { .sign { grid-template-columns: 2fr 1fr; } }
.sign__line { border-bottom: 1px solid var(--text); height: 44px; }
.sign__cap {
  font: 400 var(--t-mono)/1 var(--font-mono);
  text-transform: uppercase; letter-spacing: .16em;
  color: var(--text-muted); margin-top: var(--s2);
}

/* One document, two audiences. The web page and the printed form want different
   things said: the privacy note matters to someone filling this in on screen and
   is beside the point on paper, and the paper wants a sign-off identifying itself
   that would be noise online. Neither is a separate file -- just two classes. */
.print-only { display: none; }

/* Statements agreed by signing, not by ticking. Numbered markers or checkboxes
   would put us back where we started, so they are set as plain rules with a hair
   of indent -- close to how the terms page sets its lists. */
.ack-lede {
  font: 400 var(--t-mono)/1.4 var(--font-mono);
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--brass);
  margin: 0 0 var(--s4);
}
.ack-list li {
  position: relative;
  padding: var(--s2) 0 var(--s2) var(--s5);
  color: var(--text-muted);
}
/* The site sets list-style: none globally, so the marker has to be drawn. */
.ack-list li::before {
  content: "‚2";
  position: absolute;
  left: 0;
  color: var(--accent);
}

/* Practice name and number, directly under the title. Its real job is on paper:
   a printed form that has travelled home with someone should say whose it is and
   how to reach her without needing the website. */
/* Ephesis, the logotype face. The README's rule is that it is the logotype and
   nothing else -- which this is -- and that it never gets uppercased or tracked
   out, because no script survives that. It was set in mono caps at 12px here,
   which is exactly what that rule exists to prevent. */
/* Scoped through .doc to beat doc.css's `.doc p, .doc li { color: var(--text) }`,
   which is 0,2,0 and silently won against a bare .intake__brand. Bone is the
   right answer regardless -- it is how the wordmark is set in the hero and the
   nav -- so this states it rather than inheriting it by accident. */
.doc .intake__brand {
  font-family: var(--font-script);
  font-size: 2.6rem;
  line-height: 1.1;
  color: var(--text);
  margin: 0 0 var(--s1);
}

.intake__ident {
  font: 400 var(--t-fine)/1.4 var(--font-mono);
  letter-spacing: .1em;
  color: var(--text-muted);
  margin: var(--s2) 0 var(--s6);
}
.intake__paperbrand { font-family: var(--font-script); font-size: 1.35em; }
.intake__ident a { text-decoration: none; }

/* The two ways of returning the form, presented as equals. They genuinely are:
   emailing is more convenient, printing is more private, and the README is clear
   that the paper route must stay a real offer rather than a fallback. */
.intake__routes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s4);
}
.intake__routes-label {
  font: 400 var(--t-mono)/1 var(--font-mono);
  text-transform: uppercase;
  letter-spacing: .16em;
  color: var(--brass);
  margin: 0 0 var(--s4);
}
.intake__actions--send { display: block; margin-top: var(--s8); }

/* A button that has to read as a text link. Buttons inherit neither font nor
   color, so both are restated; without them this falls back to Arial in black
   and looks like a stray browser control in the middle of the page. */
.intake__linkbtn {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  font: inherit;
  color: inherit;
}

/* ═════════════════════════ PRINT ═════════════════════════
   Black on white, no decoration, no interactive chrome. Values typed on
   screen print with the page, and empty fields print as writable rules. */

@media print {
  @page { margin: 11mm 12mm; }

  /* styles.css sets `color-scheme: dark` on :root, and that is what was drawing
     the thick black frame around every printed page. In paged media Chrome
     paints the page canvas -- the strip outside the @page margin box -- from
     the colour the scheme implies (#121212), while html's white background only
     ever covers the content box. So the sheet came out as a near-black page
     with a white panel floating in the middle of it.

     Forcing the scheme back to light for print makes the canvas white. It must
     stay here rather than in styles.css: dark is deliberate on screen. */
  :root { color-scheme: light; }

  html, body {
    background: #fff !important;
    color: #000 !important;
    font-size: 9.5pt;
    overflow: visible !important;
  }

  /* Nothing that isn't the form itself. .screen-only covers instructions that
     are nonsense on paper -- "type your full name to sign" being the obvious
     one, since a printed form is signed with a pen. */
  .grain, .nav, .site-footer, .foot, .intake__actions,
  .doc__back, .field, .skip-link, .theme, .screen-only { display: none !important; }
  .print-only { display: block !important; }
  .intake__paperfoot {
    margin-top: 10pt; padding-top: 4pt;
    border-top: 0.5pt solid #000;
    font-size: 8pt; color: #000 !important;
    break-inside: avoid;
  }

  .intake { padding: 0 !important; }
  .intake .wrap { max-width: none; padding: 0; }

  /* On paper the wordmark is doing letterhead duty, so it leads at a size that
     reads as one. Ephesis embeds in the PDF as real TrueType, unlike the
     variable faces -- see tools/make-pdf.mjs. */
  .intake__brand {
    /* line-height 1 clipped the tops of the N and the T: Ephesis' ascenders and
       flourishes reach well above its cap height, and anything painted outside
       the page content box is cut in print rather than merely overflowing. */
    font-size: 25pt; line-height: 1.22;
    color: #000 !important;
    margin: 0 0 1pt;
  }
  .intake h1 { font-size: 15pt; margin-bottom: 2pt; }
  .intake__ident { font-size: 8pt; color: #000 !important; margin: 0 0 8pt; letter-spacing: .08em; }
  .intake__paperbrand { font-size: 1.5em; }
  .intake__lede { font-size: 9pt; color: #000 !important; margin-bottom: 5pt; }
  .intake__note {
    border-left: 1pt solid #000; background: none !important;
    font-size: 8pt; margin: 0 0 8pt; padding: 3pt 6pt;
    break-inside: avoid;
  }

  /* Deliberately NOT break-inside: avoid. With five fieldsets, any section that
     did not fit the space left on a page jumped whole to the next one, and the
     abandoned gaps were what pushed this onto a third sheet. Sections may now
     split across the fold; individual questions still may not. */
  .fs { margin-bottom: 9pt; }
  .q, .row { break-inside: avoid; }
  .fs > legend {
    font-size: 11pt; border-bottom: 0.5pt solid #000;
    padding-bottom: 2pt; margin-bottom: 5pt;
  }
  .fs__hint { font-size: 8.5pt; color: #000 !important; margin: -4pt 0 8pt; }

  .q { margin-bottom: 5pt; }
  .q > label, .q__legend {
    font-size: 7.5pt; letter-spacing: .12em; color: #000 !important; margin-bottom: 1pt;
  }
  /* input[type="date"] is deliberately not used on this form. Chrome paints
     mm/dd/yyyy inside an empty one, and that placeholder prints -- on a form
     run off in bulk and filled in by hand, every date line would arrive with
     someone else's format already on it. A text input prints genuinely blank. */
  .q input[type="text"], .q textarea, .q select {
    border-bottom: 0.5pt solid #000 !important;
    color: #000 !important; padding: 2pt 0; font-size: 10pt;
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
  /* Empty textareas still need lines to write on */
  /* Two lines of handwriting. Nine textareas at 30pt each was over a third of a
     page of white space and pushed the form onto a third sheet. */
  .q textarea { min-height: 21pt; }
  .q__sub { font-size: 8pt; color: #000 !important; }

  .row--2 { grid-template-columns: 1fr 1fr; gap: 10pt; }
  .row--3 { grid-template-columns: 1fr .7fr 1fr; gap: 10pt; }

  .opt, .ack { min-height: 0; padding-block: 1pt; }
  /* Chrome prints a native radio as a SOLID dark dot, so a blank form came off
     the printer with every option looking already chosen. appearance: none drops
     the native control and we draw the circle ourselves: hollow by default,
     filled only when it really is checked (which matters for anyone who fills
     this in on screen and then prints it). */
  .opt input, .ack input {
    -webkit-appearance: none; appearance: none;
    width: 9pt; height: 9pt; margin-top: 2pt;
    border: 0.75pt solid #000;
    border-radius: 50%;
    background: #fff;
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
  .ack input[type="checkbox"] { border-radius: 1pt; }
  .opt input:checked, .ack input:checked { background: #000; }
  .opt label, .ack label { font-size: 9pt; }
  .ack-lede { font-size: 8pt; color: #000 !important; margin: 0 0 3pt; }
  .ack-list li {
    position: relative;
    font-size: 8.5pt; color: #000 !important;
    padding: 1.5pt 0 1.5pt 9pt;
    break-inside: avoid;
  }
  .ack-list li::before { color: #000 !important; }
  /* Six acknowledgements stacked full-width wasted the right half of the page. */
  .ack { break-inside: avoid; }
  fieldset .ack { display: inline-flex; width: 48%; vertical-align: top; }
  .opts { gap: 1pt 12pt; }

  .sign { margin-top: 14pt; gap: 18pt; break-inside: avoid; }
  .sign__line { border-bottom: 0.5pt solid #000; height: 26pt; }
  .sign__cap { font-size: 7.5pt; color: #000 !important; }

  a { text-decoration: none; color: #000 !important; }
  a[href^="http"]::after { content: ""; }   /* don't print URLs */
}