/* ═══════════════════════════════════════
   THE MEDICATION REVIEW CHECKLIST  /checklist/
   A sheet to fill in and take to a doctor. On screen it is a page; in
   print it is the sheet alone, A4, nothing else.
   ═══════════════════════════════════════ */

.cl { padding: 0 var(--pad-x); }
.cl-inner { max-width: var(--max-w); margin: 0 auto; padding: clamp(40px, 6vw, 80px) 0 var(--section); }
.cl-head { display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--s-7); align-items: end; margin-bottom: var(--s-7); }
.cl-label { font-family: var(--font-mono); font-size: var(--fs-label); font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); margin-bottom: var(--s-5); }
.cl-head h1 { font-size: var(--fs-h1); letter-spacing: -0.035em; line-height: 1.05; max-width: 16ch; }
.cl-head h1 em { font-style: normal; color: var(--ink-3); }
.cl-lead { font-size: var(--fs-lead); line-height: 1.45; color: var(--ink-2); max-width: 40ch; margin-top: var(--s-5); }
.cl-actions { display: flex; flex-wrap: wrap; gap: var(--s-4); justify-self: end; }
.cl-link { font-family: var(--font-mono); font-size: var(--fs-mono); color: var(--ink-3); text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: 4px; align-self: center; }
.cl-link:hover { color: var(--ink); text-decoration-color: var(--ink); }

/* the sheet */
.sheet { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); padding: clamp(20px, 3.5vw, 40px); }
.sheet-top { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-5); border-bottom: var(--line-weight) solid var(--ink); padding-bottom: var(--s-4); margin-bottom: var(--s-5); }
.sheet-top h2 { font-size: var(--fs-h2); letter-spacing: -0.03em; }
.sheet-top .mono { font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); white-space: nowrap; }
.sheet-fields { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4) var(--s-6); margin-bottom: var(--s-6); }
.field { font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); border-bottom: 1px solid var(--ink); padding: 0 0 6px; }

.qs { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-4); margin-bottom: var(--s-6); }
.qs li { border-top: 1px solid var(--rule); padding-top: var(--s-3); }
.qs .n { display: block; font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: 0.1em; color: var(--ink-3); margin-bottom: 6px; }
.qs h3 { font-size: 16px; letter-spacing: -0.01em; line-height: 1.3; margin-bottom: 4px; }
.qs p { font-size: 13.5px; line-height: 1.45; color: var(--ink-2); }

.meds { width: 100%; border-collapse: collapse; table-layout: fixed; }
.meds th { font-family: var(--font-mono); font-size: 10px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); text-align: left; padding: 0 8px 8px 0; border-bottom: var(--line-weight) solid var(--ink); vertical-align: bottom; }
.meds th:first-child { width: 22%; }
.meds td { height: 64px; border-bottom: 1px solid var(--rule); padding: 6px 8px 6px 0; vertical-align: top; }
.meds td:not(:first-child) { border-left: 1px solid var(--hair); padding-left: 8px; }
.meds .num { font-family: var(--font-mono); font-size: 10px; color: var(--ink-4); }

.sheet-foot { display: grid; grid-template-columns: 1fr auto; gap: var(--s-5); align-items: end; margin-top: var(--s-6); padding-top: var(--s-4); border-top: 1px solid var(--rule); }
.sheet-foot p { font-size: 12.5px; line-height: 1.5; color: var(--ink-2); max-width: 70ch; }
.sheet-foot .mark { font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); text-align: right; line-height: 1.7; }
.sheet-foot .mark strong { display: block; font-family: var(--font-display); font-size: 16px; letter-spacing: -0.02em; text-transform: none; color: var(--ink); }

/* under the sheet: how to use it, and the offer, briefly */
.cl-after { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-7); margin-top: var(--section); padding-top: var(--s-7); border-top: var(--line-weight) solid var(--ink); }
.cl-after h2 { margin-bottom: var(--s-4); max-width: 20ch; }
.cl-after p { color: var(--ink-2); line-height: 1.65; margin-bottom: var(--s-4); max-width: 52ch; }
.cl-after .btn-primary { margin-top: var(--s-2); }

@media (max-width: 900px) {
  .cl-head, .cl-after { grid-template-columns: 1fr; }
  .cl-actions { justify-self: start; }
  .qs { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .qs { grid-template-columns: 1fr; }
  .meds { display: block; overflow-x: auto; }
  .meds th:first-child { width: auto; }
  .sheet-fields { grid-template-columns: 1fr; }
  .sheet-foot { grid-template-columns: 1fr; }
  .sheet-foot .mark { text-align: left; }
}

/* ── PRINT: the sheet alone ── */
@media print {
  @page { size: A4; margin: 14mm 12mm; }
  body { background: #fff; }
  header, nav, footer, .site-header, .site-footer, .mobile-menu, .cl-head, .cl-after, .cl-actions { display: none !important; }
  .cl, .cl-inner { padding: 0; max-width: none; }
  .sheet { border: none; border-radius: 0; padding: 0; background: #fff; }
  .meds td { height: 56px; }
  .qs { margin-bottom: 18px; }
  .qs { grid-template-columns: repeat(4, 1fr); }
  a { text-decoration: none; color: inherit; }
}