/* ─────────────────────────────────────────────────────────────────
   print.css — the printable athlete summary (js/print.js, v24).

   On screen it is an ordinary app page and takes its colours from the
   tokens in style.css, so it follows light/dark and the Rose palette.
   In print everything becomes black on white, the app's chrome is hidden,
   and table rows and cards are kept whole across page breaks.
   No colour carries a meaning here, on screen or on paper.
   ───────────────────────────────────────────────────────────────── */

/* ── on screen ── */
.pr-back { margin-bottom: 4px; }
.pr-controls { margin-bottom: 16px; }
.pr-controls .seg { margin: 0 0 12px; }

.pr-sheet { color: var(--ink); }
.pr-head { margin: 0 0 16px; }
.pr-name {
  margin: 0; font-family: var(--display); font-size: 24px; font-weight: 700;
  letter-spacing: -0.02em; color: var(--ink);
}
.pr-period { margin-top: 4px; font-size: var(--fs-secondary); color: var(--ink-2); }
.pr-note { margin: 8px 0 0; font-size: 13px; line-height: 1.5; color: var(--muted); }

.pr-section .card-name { margin-bottom: 6px; }
.pr-line {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  padding: 7px 0; border-top: 1px solid var(--line-soft); font-size: 14px;
}
.pr-section .card-name + .pr-line { border-top: 0; }
.pr-line > span:first-child { color: var(--muted); }
.pr-line > span:last-child { color: var(--ink); text-align: right; font-variant-numeric: tabular-nums; }
.pr-section .hint { margin-top: 6px; }
.pr-text { font-size: 14px; line-height: 1.5; color: var(--ink); margin-top: 4px; }

.pr-table-wrap { margin: 20px 0 12px; }
.pr-table-title { margin: 0 2px 8px; }
/* the table scrolls inside its own box on a phone; the page never does */
.pr-scroll {
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  border: 1px solid var(--line); border-radius: 12px; background: var(--surface);
}
.pr-table { width: 100%; border-collapse: collapse; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.pr-table th, .pr-table td {
  padding: 7px 8px; text-align: right; vertical-align: top;
  border-bottom: 1px solid var(--line-soft); white-space: nowrap;
}
.pr-table th {
  position: sticky; top: 0; background: var(--surface-2);
  color: var(--ink-2); font-weight: 600; font-size: 11.5px; white-space: normal; min-width: 52px;
}
.pr-table th:first-child, .pr-table td:first-child { text-align: left; }
.pr-table td { color: var(--ink); }
.pr-table td.pr-date { white-space: nowrap; }
.pr-table tbody tr:last-child td { border-bottom: 0; }
.pr-late { margin-top: 2px; font-size: 11px; color: var(--muted); white-space: normal; max-width: 150px; }

.pr-foot { margin: 8px 2px 24px; font-size: 12px; line-height: 1.6; color: var(--muted); }
.pr-foot p { margin: 0 0 8px; }

/* ── paper ── */
@media print {
  @page { margin: 14mm 12mm; }

  #tabbar, .app-header, #app > header, #offline-bar, #announcements,
  button, .no-print, .hidden { display: none !important; }

  html, body, main, .view, .pr-sheet, .pr-sheet * {
    background: #fff !important; color: #000 !important;
    box-shadow: none !important; text-shadow: none !important;
  }
  body { font-size: 11pt; }
  main { padding: 0 !important; }

  .card, .pr-scroll { border: 1px solid #999 !important; border-radius: 6px; }
  .card { padding: 10px 12px; margin-bottom: 8px; }
  .pr-line, .pr-table th, .pr-table td { border-color: #bbb !important; }
  .pr-name { font-size: 18pt; }
  .pr-note, .pr-foot, .pr-late, .hint { color: #333 !important; }

  .pr-scroll { overflow: visible !important; }
  .pr-table { font-size: 9pt; }
  .pr-table th, .pr-table td { padding: 3px 5px; }
  .pr-table th { position: static; }
  .pr-table thead { display: table-header-group; }   /* repeat the header on each page */
  .pr-table tr, .card, .pr-section:not(.pr-table-wrap), .pr-head, .pr-foot p {
    break-inside: avoid; page-break-inside: avoid;
  }
  .pr-table-title { break-after: avoid; page-break-after: avoid; }

  /* the Rose palette's gold rule under page headers is screen decoration */
  :root[data-palette="rose"] header::after { display: none !important; }
}