/* =======================================================
   Care Companion Advocates — Forms & Checklists print stylesheet
   US Letter. Screen preview mimics paper.
   ======================================================= */
@import url("../colors_and_type.css");

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: #EEE7F3;
  color: var(--cc-ink);
  font-family: var(--cc-font-sans);
  font-size: 11pt;
  line-height: 1.45;
}

/* Paper */
.page {
  width: 8.5in;
  min-height: 11in;
  background: #fff;
  margin: 24px auto;
  padding: 0.6in 0.7in 0.75in;
  box-shadow: 0 10px 30px rgba(91,45,142,.15), 0 2px 6px rgba(34,34,34,.06);
  position: relative;
  display: flex;
  flex-direction: column;
}
.page + .page { margin-top: 24px; }

/* =======================================================
   Document header — logo + gold-rule title + subtitle
   ======================================================= */
.doc-header {
  display: flex;
  align-items: center;
  gap: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--cc-lavender-border);
  margin-bottom: 18px;
}
.doc-header__logo {
  width: 72px; height: auto; flex: none;
}
.doc-header__text { flex: 1; min-width: 0; }
.doc-header__brand {
  font-size: 9pt;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cc-purple);
  font-weight: 700;
  margin: 0 0 2px;
}
.doc-header__title {
  font-size: 19pt;
  line-height: 1.15;
  color: var(--cc-purple);
  font-weight: 700;
  margin: 0;
  letter-spacing: -0.01em;
}
.doc-header__subtitle {
  margin: 4px 0 0;
  font-size: 10pt;
  color: var(--cc-ink-muted);
  font-style: italic;
}
.doc-header__meta {
  flex: none;
  text-align: right;
  font-size: 8.5pt;
  color: var(--cc-ink-soft);
  line-height: 1.35;
}
.doc-header__meta b { color: var(--cc-purple); font-weight: 700; letter-spacing: .04em; }

/* Gold rule (used for title flanks / decorative separators) */
.gold-rule {
  display: flex; align-items: center; gap: 10px;
  color: var(--cc-gold);
  margin: 10px 0 14px;
}
.gold-rule::before, .gold-rule::after {
  content: ""; flex: 1; height: 1.5px; background: var(--cc-gold);
}
.gold-rule span {
  font-size: 9pt; letter-spacing: .18em; text-transform: uppercase;
  font-weight: 700; color: var(--cc-gold);
}

/* =======================================================
   Sections
   ======================================================= */
.section {
  margin: 0 0 16px;
  break-inside: avoid;
}
.section__head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  background: var(--cc-lavender);
  border-left: 4px solid var(--cc-purple);
  padding: 7px 12px;
  margin-bottom: 10px;
}
.section__head .letter {
  font-weight: 700;
  color: var(--cc-purple);
  font-size: 10pt;
  letter-spacing: .06em;
  min-width: 18px;
}
.section__head h2 {
  margin: 0;
  font-size: 11pt;
  color: var(--cc-purple);
  letter-spacing: .04em;
  text-transform: uppercase;
  font-weight: 700;
  font-family: var(--cc-font-sans);
}

.section p {
  margin: 0 0 8px;
  font-size: 10.5pt;
  color: var(--cc-ink);
}
.section .note {
  font-size: 9.5pt;
  color: var(--cc-ink-muted);
  font-style: italic;
  background: #FDF9EE;
  border-left: 3px solid var(--cc-gold);
  padding: 8px 10px;
  margin: 10px 0;
}
.section .note b { color: var(--cc-purple); font-style: normal; }

/* =======================================================
   Form rows — flat underline fields (print-friendly)
   ======================================================= */
.row {
  display: grid;
  gap: 10px 14px;
  margin-bottom: 10px;
}
.row.cols-2 { grid-template-columns: 1fr 1fr; }
.row.cols-3 { grid-template-columns: 1fr 1fr 1fr; }
.row.cols-4 { grid-template-columns: 1.4fr 1fr 1fr .8fr; }
.row.cols-2-1 { grid-template-columns: 2fr 1fr; }
.row.cols-1-2 { grid-template-columns: 1fr 2fr; }

.field { display: flex; flex-direction: column; gap: 4px; }
.field label {
  font-size: 8.5pt;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--cc-ink-muted);
  font-weight: 600;
}
.field label .req { color: var(--cc-purple); margin-left: 2px; }
.field .fill {
  display: block;
  border-bottom: 1px solid var(--cc-ink-soft);
  height: 22px;
}
.field.tall .fill { height: 44px; }
.field.xtall .fill { height: 80px; }

/* Stand-alone inline field: "Name ____________________" */
.inline-field { display: inline-flex; align-items: baseline; gap: 6px; margin-right: 16px; }
.inline-field label { font-size: 9.5pt; color: var(--cc-ink-muted); font-weight: 600; }
.inline-field .fill { display: inline-block; border-bottom: 1px solid var(--cc-ink-soft); min-width: 180px; height: 16px; }

/* Large free-text area */
.freebox {
  border: 1px solid var(--cc-lavender-border);
  border-radius: 4px;
  min-height: 72px;
  padding: 8px 10px;
  background: #fff;
}
.freebox.sm { min-height: 44px; }
.freebox.lg { min-height: 120px; }

/* =======================================================
   Checkboxes + option chips
   ======================================================= */
.checks {
  display: grid;
  gap: 6px 18px;
  grid-template-columns: 1fr 1fr;
  margin: 6px 0;
}
.checks.cols-3 { grid-template-columns: 1fr 1fr 1fr; }
.checks.cols-1 { grid-template-columns: 1fr; }
.check {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 10pt;
  color: var(--cc-ink);
  line-height: 1.4;
  break-inside: avoid;
}
.check::before {
  content: "";
  display: inline-block;
  width: 12px;
  height: 12px;
  border: 1.5px solid var(--cc-purple);
  border-radius: 2px;
  flex: none;
  margin-top: 2px;
  background: #fff;
}

/* Inline choice with short tail fill: "Other ____" */
.check.with-fill {
  display: grid;
  grid-template-columns: auto auto 1fr;
  align-items: baseline;
  gap: 6px;
}
.check.with-fill::before { margin-top: 3px; }
.check.with-fill .fill { border-bottom: 1px solid var(--cc-ink-soft); height: 16px; }

/* Yes / No pair */
.yesno { display: inline-flex; gap: 12px; align-items: center; }
.yesno .opt { display: inline-flex; align-items: center; gap: 6px; font-size: 10pt; }
.yesno .opt::before {
  content: ""; width: 12px; height: 12px; border: 1.5px solid var(--cc-purple);
  border-radius: 2px; background: #fff; display: inline-block;
}

/* =======================================================
   Signature block
   ======================================================= */
.sig-block {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px dashed var(--cc-lavender-border);
  display: grid;
  gap: 10px 16px;
  grid-template-columns: 2fr 1fr;
}
.sig-block .field .fill { height: 30px; }

/* =======================================================
   Tables (medication list, record log, etc.)
   ======================================================= */
table.cc {
  width: 100%;
  border-collapse: collapse;
  font-size: 9.5pt;
  margin: 6px 0 10px;
}
table.cc th {
  background: var(--cc-lavender);
  color: var(--cc-purple);
  font-size: 8.5pt;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 700;
  text-align: left;
  padding: 6px 8px;
  border-bottom: 1.5px solid var(--cc-purple);
}
table.cc td {
  border-bottom: 1px solid var(--cc-lavender-border);
  padding: 10px 8px;
  vertical-align: top;
  height: 28px;
}
table.cc tr:last-child td { border-bottom: 1px solid var(--cc-lavender-border); }

/* =======================================================
   Info callout boxes
   ======================================================= */
.callout {
  background: var(--cc-lavender);
  border-left: 4px solid var(--cc-purple);
  padding: 10px 14px;
  border-radius: 2px;
  margin: 10px 0;
  font-size: 10pt;
}
.callout h3 {
  font-size: 10pt;
  color: var(--cc-purple);
  margin: 0 0 4px;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.callout p { margin: 0; font-size: 10pt; }

.callout--gold {
  background: #FDF6E4;
  border-left-color: var(--cc-gold);
}
.callout--gold h3 { color: var(--cc-gold); }

/* =======================================================
   Footer
   ======================================================= */
.doc-footer {
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid var(--cc-lavender-border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 8pt;
  color: var(--cc-ink-soft);
  letter-spacing: .04em;
}
.doc-footer__brand { color: var(--cc-purple); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }

/* =======================================================
   Print
   ======================================================= */
@page { size: Letter; margin: 0.5in; }
@media print {
  body { background: #fff; }
  .page {
    width: auto;
    min-height: auto;
    margin: 0;
    padding: 0;
    box-shadow: none;
    page-break-after: always;
  }
  .page:last-child { page-break-after: auto; }
  .no-print { display: none !important; }
}

/* Screen-only print button */
.print-btn {
  position: fixed; right: 24px; bottom: 24px; z-index: 50;
  background: var(--cc-purple); color: #fff; border: none;
  font-family: var(--cc-font-sans); font-weight: 600; font-size: 13px;
  padding: 10px 18px; border-radius: 999px; cursor: pointer;
  box-shadow: 0 6px 18px rgba(91,45,142,.3);
}
.print-btn:hover { background: var(--cc-purple-deep); }