/* ============================================================
   form-print.css — New Patient Intake Forms, print stylesheet
   Target: new-patient-forms.html (and the Spanish twin)
   Purpose: the printed page IS the medical record. Every word
   must survive to paper, and the paper must look like the form
   the patient saw. The page's own <style> block (navy / gold,
   Cormorant Garamond / Jost, chips and pills) stays in force;
   this sheet only overrides what print needs.
   Created 2026-09-22. Reworked 2026-09-22 (owner rulings 1–3):
   page look kept, one size variable, no question split across pages.
   ============================================================ */

@page {
  size: Letter;
  margin: 0.5in;
}

@media print {

  /* ── 0. ONE SIZE VARIABLE ───────────────────────────────── */
  /* --print-base drives question text, answers, input values and
     consent text. Labels and eyebrows print at --print-small
     (base − 1pt). Nothing prints smaller than --print-small.
     Headings scale from the page's own ratios: on screen the
     question text is 13px, so one "page px" = base / 13.       */

  :root {
    --print-base: 12pt;
    --print-small: calc(var(--print-base) - 1pt);
  }

  /* ── 1. BASE ────────────────────────────────────────────── */

  html, body {
    background: #fff !important;   /* page body is --cream */
    margin: 0 !important;
    padding: 0 !important;
    width: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    -webkit-text-size-adjust: 100%;
  }
  body { font-size: var(--print-base); }

  *, *::before, *::after {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    animation: none !important;
    transition: none !important;
    text-shadow: none !important;
  }

  a[href^="tel:"]::after,
  a[href^="http"]::after { content: ""; }   /* no URL noise in the record */

  .form-container {
    max-width: none !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* ── 2. HIDDEN IN PRINT ─────────────────────────────────── */

  .form-header,                 /* page header / brand bar        */
  .header-brand,
  .header-phone,
  .skip-link,
  #main + div,                  /* EN language strip (inline-styled) */
  .lang-bar,                    /* ES language strip              */
  .progress-wrap,               /* step progress bar wrapper      */
  .progress-steps,
  .step-dot,
  .step-line,
  .form-nav,                    /* Back / Next / Submit row       */
  .btn-prev,
  .btn-next,
  .btn-submit,
  .sig-clear,
  .sig-actions,
  .error-msg,
  .success-screen,
  #successScreen,
  .hp-field,                    /* honeypot wrapper               */
  input[name="bot-field"],
  .rfc-callbar,                 /* sticky call bar (js/call-bar.js) */
  header, nav, footer,
  .no-print,
  [hidden],
  dialog,
  .modal, .overlay, .toast, .backdrop, .lightbox, .cookie-banner {
    display: none !important;
  }

  /* Submission summary — a screen-only recap, not part of the record. */
  #summaryBox,
  .form-section:has(#summaryBox) {
    display: none !important;
  }

  /* ── 3. ALL FIVE STEPS PRINT, EACH ON A NEW PAGE ────────── */

  .step-panel,
  .step-panel.active,
  form, #intakeForm {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
  }

  .step-panel {
    page-break-before: always;
    break-before: page;
  }
  .step-panel:first-of-type,
  #step-1 {
    page-break-before: auto;
    break-before: auto;
  }

  /* ── 3b. ACCIDENT SUPPLEMENT (steps 6-7) ────────── */
  /* Section 3 prints EVERY .step-panel. Steps 6-7 are the accident
     supplement and belong on paper ONLY for an accident intake, so the
     record a standard patient signs carries no accident questions at all.
     form-snapshot.js clones <body>, so data-accident travels into the
     snapshot and the server renders the same sheet the browser would.
     Specificity, not order, decides this: .step-panel is 0-1-0,
     #step-6 is 1-0-0, body[data-accident="1"] #step-6 is 1-1-1. */

  #step-6,
  #step-7 {
    display: none !important;
  }
  body[data-accident="1"] #step-6,
  body[data-accident="1"] #step-7 {
    display: block !important;
  }

  /* ── 4. CONDITIONAL SECTIONS ────────────────────────────── */
  /* Print ONLY when form-snapshot.js has set data-shown="1". */

  #womenSection,
  #menSection,
  #minorSection,
  #guardianSigSection,
  .minor-section {
    display: none !important;
  }

  #minorSection[data-shown="1"] {
    display: block !important;
  }
  /* Conditional .form-sections print as CSS tables like every other
     section (see 10e). */
  #womenSection[data-shown="1"],
  #menSection[data-shown="1"],
  #guardianSigSection[data-shown="1"] {
    display: table !important;
  }

  /* ── 5. NOTHING CLIPPED ─────────────────────────────────── */

  .consent-text,
  .philosophy-box,
  .form-section,
  .field-group,
  .field-row,
  .agree-block,
  .yn-table,
  .systems-grid,
  .family-table,
  .sig-field,
  .dr-notes {
    max-height: none !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  /* ── 6. TYPE SCALE (page look, print sizes) ─────────────── */

  /* Labels, eyebrows, small caps text: base − 1pt. */
  label,
  .section-eyebrow,
  .form-section-title,
  .family-table th,
  .yn-btn,
  .mf-btn {
    font-size: var(--print-small) !important;
  }

  /* Headings: page ratios against 13px question text. */
  .section-title h2      { font-size: calc(var(--print-base) * 28 / 13) !important; }
  .philosophy-box h3     { font-size: calc(var(--print-base) * 20 / 13) !important; }
  .consent-text h4       { font-size: calc(var(--print-base) * 16 / 13) !important; }

  /* Question text, answers, consent text: base. */
  .section-title p,
  .yn-table td.q,
  .radio-opt,
  .check-opt,
  .system-item span,
  .family-table td,
  .philosophy-box ul li,
  .consent-text p,
  .consent-text ol li,
  .agree-block p {
    font-size: var(--print-base) !important;
  }

  /* Inline-styled text in the markup (notes, the X-Ray and case-study
     boxes, the pregnancy attestation). Map each screen size to the scale. */
  .step-panel [style*="font-size:10px"],
  .step-panel [style*="font-size:11px"],
  .step-panel [style*="font-size:12px"] { font-size: var(--print-small) !important; }
  .step-panel [style*="font-size:13px"],
  .step-panel [style*="font-size:16px"] { font-size: var(--print-base) !important; }
  .step-panel [style*="font-size:14px"] { font-size: calc(var(--print-base) * 14 / 13) !important; }

  /* Vertical rhythm. On screen a .field-group inside a .field-row adds
     its own 20px under the row's 20px (grid items do not collapse
     margins), so rows sit 40px apart. On paper that doubled gap pushes
     short sections past one page. One gap per row. */
  .field-row .field-group { margin-bottom: 0 !important; }
  .field-row { margin-bottom: 14px !important; }
  .form-section { padding: 18px 20px !important; margin-bottom: 16px !important; }
  .section-title { margin-bottom: 18px !important; padding-bottom: 12px !important; }
  .form-section-title { margin-bottom: 14px !important; }
  /* Option chips: same shape and border, tighter padding at print size. */
  .radio-opt, .check-opt { padding: 6px 12px !important; }
  .radio-group, .check-group { gap: 8px !important; }
  /* M/F chips: the native radio returns in print (§9); keep it on the
     chip's own line so a chip never stacks "o" over "M" (row height ×2). */
  .family-mf { flex-wrap: nowrap !important; }
  .mf-btn { display: inline-flex !important; align-items: center; white-space: nowrap; padding: 4px 8px !important; }
  .system-item { padding: 5px 8px !important; }
  /* Activity comfort: the three chips of a row must stay on ONE line at 12pt.
     Wrapped, every row doubles in height and the table runs to a third page.
     The chips are uppercase with wide tracking on screen; on paper the
     tracking and padding come in so "Uncomfortable" always fits the cell. */
  .act-opts { flex-wrap: nowrap !important; }
  .act-opts .mf-btn {
    padding: 4px 6px !important;
    letter-spacing: 0.06em !important;
  }
  .systems-grid { gap: 6px !important; }
  /* Consent text: screen line-height 1.7 at 12pt pushes HIPAA and the
     Informed Consent past one page. 1.5 keeps each on one sheet. */
  .consent-text { padding: 14px 20px !important; }
  .consent-text p,
  .consent-text ol li { line-height: 1.5 !important; }
  .consent-text p { margin-bottom: 8px !important; }
  .consent-text p:last-child { margin-bottom: 0 !important; }
  .consent-text ol { gap: 6px !important; }
  .philosophy-box ul li { line-height: 1.5 !important; }

  /* ── 7. DARK CONTAINERS → WHITE, DARK TEXT ──────────────── */
  /* .philosophy-box and the inline navy boxes (X-Ray authorization,
     Educational & Case Study Use) are cream-on-navy on screen. On
     paper: white box, the page's own border, the page's own text. */

  .philosophy-box,
  .step-panel [style*="background:var(--navy)"] {
    background: #fff !important;
    border: 1px solid #E8DFC8 !important;
  }
  .philosophy-box h3,
  .step-panel [style*="background:var(--navy)"] > p {
    color: var(--navy) !important;
  }
  .philosophy-box ul li,
  .step-panel [style*="background:var(--navy)"] li {
    color: var(--text) !important;
  }
  .philosophy-box ul li::before,
  .step-panel [style*="background:var(--navy)"] li > span {
    color: var(--gold-ink) !important;
  }

  /* ── 8. INPUTS PRINT AS READABLE TEXT ───────────────────── */
  /* Page border colour and white field kept; glow and shadow removed. */

  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="date"],
  input[type="number"],
  input:not([type]),
  select,
  textarea {
    font-family: var(--sans) !important;
    font-size: var(--print-base) !important;
    color: var(--text) !important;
    background: #fff !important;
    border: 1px solid #D4C9A8 !important;
    box-shadow: none !important;
    outline: none !important;
    padding: 6px 10px !important;
    min-height: 0;
  }

  /* Single-line answers print as a wrapping copy (form-snapshot.js adds
     .print-val after each text box and select). Same box look; a long
     answer grows downward instead of being clipped. */
  input.has-print-val,
  select.has-print-val {
    display: none !important;
  }
  .print-val {
    display: block !important;
    font-family: var(--sans) !important;
    font-size: var(--print-base) !important;
    line-height: 1.35 !important;
    color: var(--text) !important;
    background: #fff !important;
    border: 1px solid #D4C9A8 !important;
    border-radius: var(--radius, 2px);
    padding: 6px 10px !important;
    min-height: calc(var(--print-base) * 1.35 + 14px);
    white-space: pre-wrap !important;
    /* break-word, NOT anywhere: "anywhere" also shrinks a table column to one
       letter, so "Deceased" printed as "Decease / d" (2026-09-23). break-word
       wraps between words and splits a word only when it cannot fit at all. */
    overflow-wrap: break-word !important;
    word-break: normal !important;
    box-sizing: border-box;
    width: 100%;
  }

  /* A textarea grows to its text; nothing is clipped at rows="3". */
  textarea {
    field-sizing: content;
    height: auto !important;
    min-height: 3em !important;
    overflow: visible !important;
    white-space: pre-wrap !important;
    resize: none !important;
  }

  /* Placeholders must never read as answers. */
  ::placeholder { color: transparent !important; opacity: 0 !important; }
  ::-webkit-input-placeholder { color: transparent !important; opacity: 0 !important; }

  input[type="date"]::-webkit-calendar-picker-indicator,
  input[type="time"]::-webkit-calendar-picker-indicator,
  input::-webkit-inner-spin-button,
  input::-webkit-outer-spin-button,
  input::-webkit-search-cancel-button {
    display: none !important;
    -webkit-appearance: none !important;
  }

  /* ── 9. CHECKBOXES & RADIOS — CHECKED STATE WITHOUT COLOUR ─ */
  /* On screen the real input is visually hidden and a gold .indicator
     carries the checked state — colour-only. In print the native 12px
     box returns beside the page's styled chip, so a checked answer
     reads as a ticked box and a filled radio, not only as a tint. The
     page's own :has(input:checked) chip styling still applies; the
     checked chip is also set in heavier weight. */

  input[type="checkbox"],
  input[type="radio"],
  .radio-opt input,
  .check-opt input,
  .yn-btn input,
  .system-item input,
  .agree-block input,
  .mf-btn input {
    position: static !important;
    opacity: 1 !important;
    width: 12px !important;
    height: 12px !important;
    min-width: 12px !important;
    margin: 0 4px 0 0 !important;
    padding: 0 !important;
    display: inline-block !important;
    vertical-align: middle !important;
    flex-shrink: 0 !important;
    appearance: auto !important;
    accent-color: var(--navy);
  }
  input[type="checkbox"] { -webkit-appearance: checkbox !important; }
  input[type="radio"]    { -webkit-appearance: radio !important; }

  /* Decorative stand-ins: the native control replaces them. */
  .radio-opt .indicator,
  .check-opt .indicator,
  .agree-box,
  .sys-check {
    display: none !important;
  }

  .radio-opt:has(input:checked),
  .check-opt:has(input:checked),
  .yn-btn:has(input:checked),
  .mf-btn:has(input:checked),
  .system-item:has(input:checked) span {
    font-weight: 600 !important;
  }

  /* No focus rings in the record. */
  .radio-opt:has(input:focus) .indicator,
  .check-opt:has(input:focus) .indicator,
  .yn-btn:has(input:focus),
  .system-item:has(input:focus),
  .agree-block:has(input:focus),
  .mf-btn:has(input:focus) {
    box-shadow: none !important;
  }

  /* ── 10. PAGE-BREAK CONTROL ─────────────────────────────── */
  /* Rule: no question group splits across pages. A group is a
     question plus its follow-up fields. Where the markup wraps a
     group, the wrapper gets break-inside:avoid. Where a group is a
     run of sibling elements, the lead gets break-after:avoid and the
     follower break-before:avoid (Chromium LayoutNG honours both). */

  /* 10a. Wrapped groups — never split inside. */
  .field-row,
  .field-group,
  .radio-group,
  .check-group,
  .systems-grid,
  .act-opts,
  .yn-table tr,
  .family-table tr,
  .family-table thead,
  .agree-block,
  .sig-field,
  .dr-notes,
  .philosophy-box,
  .section-title,
  #minorSection,
  #pregnancyAttestation,
  .step-panel [style*="background:var(--navy)"] {
    page-break-inside: avoid;
    break-inside: avoid;
  }

  /* 10b. Yes/No tables whose rows are one question and its follow-ups. */
  .yn-table:has(#q-dieting),          /* dieting → physician diet     */
  .yn-table:has(#q-alcohol),          /* alcohol → concern … driving  */
  .yn-table:has(#q-tobacco),
  .yn-table:has(#q-streetDrugs),      /* drugs, needle, sexual health */
  .yn-table:has(#q-hivDiscussion),
  .yn-table:has(#q-abuseDiscussion),
  .yn-table:has(#q-mediaRelease),
  .yn-table:has(#q-nocturia),         /* men: nocturia → # per night  */
  .yn-table:has(#q-pregnant) {        /* women: pregnant → # births   */
    page-break-inside: avoid;
    break-inside: avoid;
  }

  /* 10c. Sibling groups — keep the lead with its follow-up. */
  /* A yes/no table and the detail row after it ("If yes …", "list …",
     # per night, # of pregnancies). */
  .yn-table + .field-row      { page-break-before: avoid; break-before: avoid; }

  /* Tobacco: question → type and amount → # of years / year quit. */
  .field-row:has(#f-tobaccoType)        { page-break-after: avoid; break-after: avoid; }
  .field-row:has(#f-tobaccoType) + .field-row { page-break-before: avoid; break-before: avoid; }

  /* An intro paragraph stays with the question it introduces
     (HIV, abuse, Review of Systems, "Recent changes"). */
  .form-section > p { page-break-after: avoid; break-after: avoid; }

  /* Consent or explanation box → its agreement checkbox / Yes-No row. */
  .consent-text,
  .step-panel [style*="background:var(--navy)"] {
    page-break-after: avoid;
    break-after: avoid;
  }
  /* Signature pad → printed name and date. */
  .sig-field { page-break-after: avoid; break-after: avoid; }
  .sig-field ~ .field-row { page-break-before: avoid; break-before: avoid; }

  /* Headings never sit alone at the foot of a page. */
  .section-title,
  .form-section-title,
  h1, h2, h3, h4 {
    page-break-after: avoid;
    break-after: avoid;
  }

  /* 10d. Sections. A section that fits on one page prints whole. The
     long consent texts may break between paragraphs (never clipped).
     Sections taller than one page at 12pt may break — but only
     between the groups above. They are NOT break-inside:avoid: on a
     block taller than a page, avoid only pushes the whole block to
     the next page and leaves the rest of the previous page blank —
     that was the half-page gap under "Do you use tobacco?". */
  .form-section {
    page-break-inside: avoid;
    break-inside: avoid;
  }

  /* 10e. EVERY SECTION IS A CSS TABLE. The title is its header group,
     so when a section runs past a page foot Chromium repeats the title
     at the top of each continuation page. The other children sit in one
     anonymous cell and keep their own block / grid layout (checked:
     .field-row grids, yes/no tables, family tables, chips).
     box-decoration-break:clone gives each page fragment its own full
     border, padding and background — no torn box. */
  .form-section {
    display: table !important;
    width: 100%;
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 0;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
  }
  /* The last child's bottom margin sits inside the cell; at a page foot
     it would push the section's closing edge onto an empty page. */
  .form-section > :last-child { margin-bottom: 0 !important; }

  /* The title as a repeating header. Row groups take no margin, padding
     or border, so the page's title look (gold bar, rule, spacing) is
     rebuilt with the title's own pseudo-elements. */
  .form-section > .form-section-title {
    display: table-header-group !important;
    page-break-inside: avoid;
    break-inside: avoid;
  }
  .form-section > .form-section-title::before {
    display: inline-block;
    vertical-align: middle;
    margin: 0 10px 0 0;
  }
  .form-section > .form-section-title::after {
    content: "";
    display: block;
    height: 0;
    margin: 10px 0 14px 0;
    border-bottom: 1px solid var(--cream2);
  }

  /* 10f. LONG SECTIONS start on a new page. Every section taller than
     ~60% of a page at 12pt, so none begins as a title stranded at a
     page foot. None of them is the first section of its step (the
     step already starts a page). They may break inside, between the
     groups of 10a–10c; the repeated title (10e) heads each page.
       Past Health History ........ #q-prevChiro     (~1.9 pages)
       Health Habits & Safety ..... #q-tobacco       (~2.1 pages)
       Mental Health .............. #q-stress
       Women's Health ............. #womenSection    (conditional)
       Review of Systems .......... #f-systemsNotes  (~1.1 pages)
       Family Health History ...... .family-mf
       Terms of Acceptance ........ #agreePhilosophy (step 3)
       Informed Consent ........... #agreeConsent    (step 4)
     Short sections keep break-inside:avoid (above). */
  .form-section:is(:has(#q-prevChiro), :has(#q-tobacco), :has(#q-stress),
                   #womenSection, :has(#f-systemsNotes), :has(.family-mf),
                   :has(#agreePhilosophy), :has(#agreeConsent)) {
    page-break-before: always;
    break-before: page;
    page-break-inside: auto;
    break-inside: auto;
  }

  /* Accident supplement (steps 6-7, accident mode only). Same rule, same
     reason: each of these is taller than ~60% of a page at 12pt, so it
     starts its own page rather than stranding its title at a page foot.
     They may break inside, between the groups of 10a–10c; the repeated
     title (10e) heads every continuation page.
       Accident Circumstances ..... #q-auto_police_came
       Your Vehicle & Travel ...... #f-auto_your_vehicle
       Current Symptoms ........... #f-sym_headache
       Activity Comfort ........... .act-table
       Recovery & Work Capacity ... #f-recovery_work_hours
     Short ones (Accident Details, The Other Vehicle, In Your Own Words,
     Since the Accident, Attorney, Auto / Additional Insurance — measured
     at 56% of a page) keep break-inside:avoid and flow.
     "Immediately After the Accident" is long too, but it is the FIRST
     section of step 7 and the step already starts a page: a break-before
     there left the step title alone on a page of its own. */
  .form-section:is(:has(#q-auto_police_came), :has(#f-auto_your_vehicle),
                   :has(#f-sym_headache),
                   :has(.act-table), :has(#f-recovery_work_hours)) {
    page-break-before: always;
    break-before: page;
    page-break-inside: auto;
    break-inside: auto;
  }
  /* 10g. COMPACT SECTIONS (owner ruling 2026-09-22). Tighter spacing,
     same 12pt type, in four sections only:
       Family Members, Occupation & Emergency Contact, Insurance &
       Referral  -> print together on step 1's second page;
       Past Health History -> exactly two pages.
     Spacing alone made both fit; no font change was needed. Selectors
     use input ids present in both the EN and ES pages. */
  .form-section:has(#f-family1Name) {
    page-break-before: always;     /* the three start page 2 together */
    break-before: page;
  }
  .form-section:is(:has(#f-family1Name), :has(#f-occupation),
                   :has(#f-insurance), :has(#q-prevChiro)) {
    padding: 10px 16px !important;
    margin-bottom: 8px !important;
  }
  .form-section:is(:has(#f-family1Name), :has(#f-occupation),
                   :has(#f-insurance), :has(#q-prevChiro)) > .form-section-title::after {
    margin: 5px 0 8px 0;
  }
  .form-section:is(:has(#f-family1Name), :has(#f-occupation),
                   :has(#f-insurance), :has(#q-prevChiro)) .field-row {
    margin-top: 0 !important;      /* overrides inline margin-top:14px */
    margin-bottom: 8px !important;
    gap: 10px !important;
  }
  .form-section:is(:has(#f-family1Name), :has(#f-occupation),
                   :has(#f-insurance), :has(#q-prevChiro)) label {
    margin-bottom: 3px !important;
  }
  .form-section:is(:has(#f-family1Name), :has(#f-occupation),
                   :has(#f-insurance), :has(#q-prevChiro))
    :is(input[type="text"], input[type="email"], input[type="tel"],
        input[type="date"], input[type="number"], input:not([type]), select) {
    padding: 3px 8px !important;   /* box ≈ 1.6 × the 12pt text */
  }
  .form-section:is(:has(#f-family1Name), :has(#f-occupation),
                   :has(#f-insurance), :has(#q-prevChiro)) textarea {
    padding: 3px 8px !important;
    min-height: 2.2em !important;  /* still grows to its text */
  }
  .form-section:is(:has(#f-family1Name), :has(#f-occupation),
                   :has(#f-insurance), :has(#q-prevChiro)) .family-table :is(td, th) {
    padding-top: 2px !important;
    padding-bottom: 2px !important;
  }
  .form-section:is(:has(#f-family1Name), :has(#f-occupation),
                   :has(#f-insurance), :has(#q-prevChiro)) .yn-table td {
    padding-top: 3px !important;
    padding-bottom: 3px !important;
  }
  .form-section:is(:has(#f-family1Name), :has(#f-occupation),
                   :has(#f-insurance), :has(#q-prevChiro)) .system-item {
    padding: 3px 8px !important;
  }
  .form-section:is(:has(#f-family1Name), :has(#f-occupation),
                   :has(#f-insurance), :has(#q-prevChiro)) .systems-grid {
    gap: 4px !important;
  }

  .consent-text { page-break-inside: auto; break-inside: auto; }
  .consent-text p,
  .consent-text li {
    page-break-inside: avoid;
    break-inside: avoid;
    orphans: 3;
    widows: 3;
  }

  /* ── 11. SIGNATURES ─────────────────────────────────────── */

  .sig-field canvas {
    display: none !important;
  }

  /* form-snapshot.js rasterises each canvas into <img class="sig-print">. */
  .sig-field img.sig-print {
    display: block !important;
    max-height: 110px;
    max-width: 100%;
    border-bottom: 1px dashed #D4C9A8;
  }

  /* ── 12. PRINT-ONLY TITLE BLOCK ─────────────────────────── */
  /* Inserted by form-snapshot.js at the top of #step-1. */

  .print-title {
    display: block !important;
    font-size: calc(var(--print-base) + 2pt) !important;
    font-weight: 700 !important;
    color: #000 !important;
    text-align: center;
    margin: 0 0 10pt 0;
    padding-bottom: 6pt;
    border-bottom: 1.5px solid #000;
    page-break-after: avoid;
    break-after: avoid;
  }
  .print-title .practice-name,
  .print-title .print-subtitle,
  .print-title .print-title-sub {
    display: block;
    font-size: var(--print-small) !important;
    font-weight: 400 !important;
    margin-top: 3pt;
  }

  /* ── 13. PHYSICIAN NOTES ────────────────────────────────── */

  .dr-notes {
    display: block !important;
    border: 1px solid #000 !important;
    background: #fff !important;
    padding: 6pt 8pt !important;
    margin-top: 8pt;
    font-size: var(--print-base) !important;
    page-break-inside: avoid;
    break-inside: avoid;
  }
}

/* Screen: the print-only title block stays out of the way. */
.print-title { display: none; }

/* Unanswered selects and date inputs (flagged data-empty by form-snapshot.js)
   must not print their prompt text as if it were an answer. */
@media print {
  select[data-empty="1"], input[type="date"][data-empty="1"] { color: transparent !important; }
}

/* The wrapping answer copies exist only in print snapshots. */
.print-val { display: none; }
@media print { .print-val { display: block; } }