/* ===========================================================================
   Referral form + generated packet — /refer/
   The packet is designed to survive a fax machine: black on white, heavy
   labels, no color dependence, no background fills that turn into gray mud.
   =========================================================================== */

/* ---- Form chrome ------------------------------------------------------- */
#referral-form .fieldset + .fieldset,
#referral-form .fieldset + .card { margin-top: var(--sp-5); }
#referral-form .card { margin-top: var(--sp-5); }

.step-num {
  display: inline-grid; place-items: center;
  width: 30px; height: 30px; margin-right: var(--sp-3);
  border-radius: 50%;
  background: var(--c1-teal-700); color: #fff;
  font-family: var(--c1-font-body); font-size: var(--c1-fs-sm); font-weight: 700;
  vertical-align: middle;
}

.choice-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
@media (max-width: 560px) { .choice-row { grid-template-columns: 1fr; } }
.choice {
  display: grid; grid-template-columns: auto 1fr; gap: var(--sp-3);
  align-items: start;
  padding: var(--sp-4);
  border: 1px solid var(--c1-border-strong);
  border-radius: var(--c1-r);
  cursor: pointer;
  transition: border-color var(--c1-dur-2) var(--c1-ease), background var(--c1-dur-2) var(--c1-ease);
}
.choice:hover { border-color: var(--c1-teal-400); }
.choice input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--c1-teal-600); }
.choice b { display: block; font-size: var(--c1-fs-sm); }
.choice small { display: block; color: var(--c1-text-muted); font-size: var(--c1-fs-xs); }
.choice:has(input:checked) {
  border-color: var(--c1-teal-500);
  background: var(--c1-teal-50);
  box-shadow: var(--c1-ring);
}

.npi-row { display: grid; grid-template-columns: 1fr auto; gap: var(--sp-2); }

/* ---- Generated packet -------------------------------------------------- */
.packet { margin-top: var(--sp-6); }

.pk-actions {
  display: flex; flex-wrap: wrap; gap: var(--sp-4);
  align-items: center; justify-content: space-between;
  padding: var(--sp-5);
  background: var(--c1-success-bg);
  border: 1px solid color-mix(in srgb, var(--c1-success) 35%, transparent);
  border-radius: var(--c1-r-md);
  margin-bottom: var(--sp-5);
  font-size: var(--c1-fs-sm);
}

.pk-sheet {
  background: #fff;
  color: #000;
  border: 1px solid var(--c1-border);
  border-radius: var(--c1-r-md);
  padding: var(--sp-7);
  box-shadow: var(--c1-shadow-2);
  font-size: 14px;
  line-height: 1.55;
}
.pk-head {
  display: flex; justify-content: space-between; align-items: flex-start; gap: var(--sp-5);
  padding-bottom: var(--sp-4);
  border-bottom: 2px solid #000;
}
.pk-head img { height: 42px; width: auto; }
.pk-to { text-align: right; font-size: 12px; }
.pk-to b { display: block; text-transform: uppercase; letter-spacing: .06em; font-size: 10px; }

.pk-title {
  font-size: 22px; margin-top: var(--sp-5); color: #000;
  font-family: var(--c1-font-display);
}
.pk-stamp { font-size: 11px; color: #555; margin-top: 2px; }

.pk-alert {
  margin-top: var(--sp-4);
  padding: 10px 14px;
  border: 1.5px solid #000;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
}

.pk-sheet section { margin-top: var(--sp-5); break-inside: avoid; }
.pk-sheet h2 {
  font-size: 12px; text-transform: uppercase; letter-spacing: .08em;
  color: #000; font-family: var(--c1-font-body); font-weight: 700;
  border-bottom: 1px solid #999; padding-bottom: 4px; margin-bottom: 8px;
}
.pk-sheet dl { display: grid; gap: 0; }
.pk-row {
  display: grid; grid-template-columns: 190px 1fr; gap: var(--sp-4);
  padding: 6px 0;
  border-bottom: 1px dotted #ccc;
}
.pk-row dt { font-weight: 700; font-size: 12px; }
.pk-row dd { margin: 0; white-space: pre-wrap; }
@media (max-width: 560px) { .pk-row { grid-template-columns: 1fr; gap: 0; } }

.pk-note { font-size: 11px; color: #444; margin-bottom: var(--sp-5); }
.pk-siglines { display: grid; grid-template-columns: 2fr 1fr; gap: var(--sp-6); margin-top: var(--sp-7); font-size: 11px; }
.pk-siglines span { display: block; border-bottom: 1px solid #000; height: 30px; margin-bottom: 4px; }

/* ---- Print ------------------------------------------------------------- */
@media print {
  .pk-sheet {
    border: 0; box-shadow: none; padding: 0; border-radius: 0;
    font-size: 11pt;
  }
  .packet { margin: 0; }
  .pk-alert { border-width: 2px; }
  .pk-row { break-inside: avoid; }
  @page { margin: 14mm; }
}