@charset "UTF-8";
/* ============================================================================
   RCCG Trinity Sanctuary — printing
   ----------------------------------------------------------------------------
   Registers, weekly reports and the pastoral care list are printed on A4 and
   carried into meetings, so this sheet is written for paper, not for a
   screenshot of a screen: no navigation, no buttons, black on white, the
   church letterhead at the top, and a repeating table header on every page.

   base.twig links this with media="print" (any screen prints sanely).
   print.twig links it with media="all" so the preview already looks like the
   page that will come out of the printer.
   ========================================================================= */

/* --------------------------------------------------------------------------
   Screen preview of a printable page
   -------------------------------------------------------------------------- */
@media screen {
  .sheet {
    width: min(210mm, 100%); margin: clamp(12px, 3vw, 28px) auto; padding: clamp(16px, 4vw, 18mm);
    background: #fff; color: #111a2e;
    box-shadow: 0 10px 40px rgba(17, 26, 46, .16); border-radius: 4px;
  }
  .sheet__toolbar { width: min(210mm, 100%); margin: clamp(12px, 3vw, 20px) auto 0; display: flex; gap: 9px; flex-wrap: wrap; justify-content: flex-end; }
}

/* --------------------------------------------------------------------------
   Letterhead and footer — structure, so they apply on screen too
   -------------------------------------------------------------------------- */
.printhead {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  border-bottom: 2px solid var(--brand); padding-bottom: 11px; margin-bottom: 16px;
}
.printhead__church { font-family: var(--font-display); font-size: 23px; letter-spacing: -.5px; line-height: 1.1; }
.printhead__sub, .printhead__meta { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }
.printhead__meta { text-align: right; align-items: flex-end; }
.printfoot {
  margin-top: 18px; padding-top: 9px; border-top: 1px solid var(--line);
  font-family: var(--font-mono); font-size: 9.5px; color: var(--faint);
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
}
.print-signature { border-bottom: 1px solid var(--line-strong); min-width: 120px; display: inline-block; height: 18px; }
.page-break { break-before: page; page-break-before: always; }

/* --------------------------------------------------------------------------
   Paper
   -------------------------------------------------------------------------- */
@page { size: A4 portrait; margin: 14mm 12mm 16mm; }

@media print {
  /* Force the light palette: a dark-theme print wastes a cartridge and is
     unreadable once photocopied for the family heads. */
  :root, body, body[data-theme="dark"], body[data-theme="light"] {
    color-scheme: light;
    --paper: #fff; --surface: #fff; --surface-2: #fff; --surface-3: #fff;
    --line: #c8c8c8; --line-strong: #999; --hair: #dcdcdc; --hair-2: #e6e6e6;
    --ink: #000; --mut: #333; --faint: #444; --faint-2: #444; --faint-3: #555;
    --brand: #1d2f5c; --brand-ink: #1d2f5c; --brand-soft: #eef1f7; --brand-fg: #fff;
    --gold: #7d5c1f; --gold-text: #7d5c1f; --green: #276549; --clay: #7d2d18;
    --track: #e8e8e8; --dim: #e8e8e8; --dim-2: #d0d0d0;
  }

  html, body { background: #fff !important; color: #000 !important; }
  body { font-size: 10.5pt; line-height: 1.4; }

  /* Chrome that never belongs on paper. */
  .sidebar, .bottomnav, .hdr__actions, .themebtn, .skip-link, .toasts, .toast,
  .submitbar, .search, .toolbar .btn, .btn, .tabs, .switch, .table__foot,
  .no-print, dialog, [data-toast-dismiss] { display: none !important; }

  .sheet { width: auto; margin: 0; padding: 0; box-shadow: none; border-radius: 0; }
  .app, .app__col { display: block; }
  .app__content { padding: 0 !important; }
  .screen { gap: 10pt; animation: none; }

  /* Cards flatten into plain blocks with a hairline rule. */
  .card, .kpi, .listrow, .stattile {
    border: 1px solid var(--line) !important; border-radius: 6pt !important;
    box-shadow: none !important; background: #fff !important;
    break-inside: avoid; page-break-inside: avoid; padding: 8pt 10pt;
  }
  .card--brand, .hero { background: #fff !important; color: #000 !important; border: 1px solid var(--line) !important; }
  .card--brand .hero__value, .card--brand .stat { color: #1d2f5c !important; }
  .card--brand .hero__note, .card--brand .micro { color: #333 !important; }

  /* The letterhead is sized for paper rather than for a screen. */
  .printhead { gap: 12pt; border-bottom: 1.5pt solid #1d2f5c; padding-bottom: 8pt; margin-bottom: 12pt; }
  .printhead__church { font-size: 17pt; letter-spacing: -.4pt; }
  .printhead__sub, .printhead__meta { font-size: 7.5pt; color: #444; }
  .printfoot { margin-top: 12pt; padding-top: 6pt; font-size: 7.5pt; color: #444; gap: 12pt; }

  h1, h2, h3, .card__title, .display { break-after: avoid; page-break-after: avoid; }

  /* Tables: header repeats on every page, rows never split. */
  .table-wrap, .scroll-x { overflow: visible !important; }
  .table { min-width: 0 !important; width: 100% !important; border-collapse: collapse; }
  .table thead { display: table-header-group; }
  .table tfoot { display: table-footer-group; }
  .table tr { break-inside: avoid; page-break-inside: avoid; }
  .table thead th { background: #f2f2f2 !important; color: #000 !important; border-bottom: 1px solid #999; font-size: 7.5pt; padding: 5pt 6pt; }
  .table td { border-bottom: 1px solid #dcdcdc; padding: 5pt 6pt; font-size: 9.5pt; }
  .table tbody tr, .table tbody tr:hover { background: #fff !important; }
  /* Progressive column disclosure is a screen idea; paper shows every column. */
  .col-cell, .col-phone, .col-last, .col-status, .only-wide { display: table-cell !important; }
  .only-narrow { display: none !important; }

  /* Charts and swatches only survive if the browser prints backgrounds, so
     every one of them is paired with a figure or a caption in the markup. */
  .chart, .ring, .spark, .dots, .meter, .heat { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .heat { min-width: 0 !important; }
  .heat td { border: 1px solid #ddd; }
  .avatar { -webkit-print-color-adjust: exact; print-color-adjust: exact; }

  /* A care list is worked with a pen: leave the signing column room. */
  .print-signature { border-bottom: 1px solid #999; min-width: 90pt; height: 14pt; }

  a { color: #000 !important; text-decoration: none; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-family: var(--font-mono); font-size: 7.5pt; color: #555; }
  a[href^="#"]::after, a[href^="/"]::after { content: ""; }

  * { animation: none !important; transition: none !important; }
}