/* ─────────────────────────────────────────────────────────────
   print.css — the coach's sheet, on screen and on paper.

   TWO RULES SHAPE EVERYTHING HERE

   1. NO CSS BACKGROUND CARRIES MEANING.
      Chrome prints with "Background graphics" OFF by default, and most
      coaches never open that panel. So a filled header band, zebra-striped
      table rows or a tinted notes box would simply vanish on paper for most
      users. Every divider here is a real border, and the pitch is SVG
      content rather than a background image, because SVG content is not
      affected by that setting.

   2. THE SHEET IS SIZED IN MILLIMETRES.
      Not in px, rem or viewport units. The output is a physical page, so
      the layout is authored in the units the page is measured in, and the
      same numbers hold whatever the screen is.

   The sheet is laid out as a column: header, body (pitch + side column),
   notes, footer. The BODY is the flexible one — it absorbs the ~18 mm
   difference between A4 and US Letter, so switching paper resizes the pitch
   and never reflows the notes or pushes the footer onto a second page.
   ───────────────────────────────────────────────────────────── */

/* ── overlay (screen only) ──────────────────────────────────── */

#tbPrintOverlay {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  display: flex;
  flex-direction: column;
  background: #232a33;
}

#tbPrintOverlay.hidden { display: none; }

.tbpBar {
  flex: none;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 12px 18px;
  background: #1a2027;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
  color: #fff;
}

.tbpBarTitle {
  font-weight: 800;
  font-size: 15px;
  letter-spacing: -.01em;
  margin-right: 4px;
}

.tbpBarGroup {
  display: flex;
  align-items: center;
  gap: 6px;
}

.tbpBarLabel {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .5);
  margin-right: 2px;
}

.tbpChip {
  appearance: none;
  border: 1px solid rgba(255, 255, 255, .22);
  background: transparent;
  color: rgba(255, 255, 255, .82);
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  padding: 6px 11px;
  border-radius: 999px;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}

.tbpChip:hover { background: rgba(255, 255, 255, .1); }

.tbpChip[aria-pressed="true"] {
  background: #ffd100;
  border-color: #ffd100;
  color: #1a2027;
}

.tbpChip:focus-visible {
  outline: 2px solid #ffd100;
  outline-offset: 2px;
}

.tbpTitleInput {
  appearance: none;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 8px;
  color: #fff;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: 7px 11px;
  min-width: 170px;
  max-width: 260px;
}

.tbpTitleInput::placeholder { color: rgba(255, 255, 255, .4); font-weight: 500; }

.tbpTitleInput:focus {
  outline: none;
  border-color: #ffd100;
  background: rgba(255, 255, 255, .13);
}

.tbpSpacer { flex: 1; }

.tbpGo,
.tbpBack {
  appearance: none;
  border: 0;
  font: inherit;
  font-weight: 800;
  border-radius: 8px;
  cursor: pointer;
  padding: 10px 16px;
  font-size: 13.5px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
}

.tbpGo { background: #ffd100; color: #1a2027; }
.tbpGo:hover { filter: brightness(1.06); }
.tbpGo[disabled] { opacity: .5; cursor: not-allowed; filter: none; }

.tbpBack {
  background: rgba(255, 255, 255, .14);
  color: #fff;
}
.tbpBack:hover { background: rgba(255, 255, 255, .24); }

.tbpGo:focus-visible,
.tbpBack:focus-visible {
  outline: 2px solid #ffd100;
  outline-offset: 2px;
}

/* Quota / overflow messages. Both are warnings, not errors — the difference
   is only in tone, so they share a shell. */
.tbpNotice {
  flex: none;
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 10px 18px;
  font-size: 13px;
  line-height: 1.45;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
  background: #33291a;
  color: #ffdc85;
}

.tbpNotice.hidden { display: none; }
.tbpNotice b { color: #fff; }
.tbpNotice svg { flex: none; margin-top: 1px; }

.tbpScroll {
  flex: 1;
  overflow: auto;
  padding: 26px 16px 46px;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

/* ── the sheet ──────────────────────────────────────────────── */

.tbpSheet {
  width: 210mm;
  height: 297mm;
  flex: none;
  background: #fff;
  color: #111;
  padding: 13mm;
  display: flex;
  flex-direction: column;
  box-shadow: 0 8px 34px rgba(0, 0, 0, .4);
  font-family: "Sora", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  /* A sheet is a fixed physical object; nothing inside it should be
     re-flowed by a user's browser font-size preference. */
  font-size: 10pt;
  line-height: 1.4;
}

.tbpSheet--letter {
  width: 215.9mm;
  height: 279.4mm;
}

/* Header — a rule, never a filled band (see rule 1 at the top). */
.tbpHead {
  flex: none;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8mm;
  border-bottom: .7mm solid #111;
  padding-bottom: 2.6mm;
}

.tbpTitleWrap { min-width: 0; }

.tbpTitle {
  font-size: 19pt;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -.01em;
  /* A coach who names a tactic in a paragraph gets two lines and an ellipsis
     rather than a header that eats the pitch. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
}

.tbpMeta {
  font-size: 8.5pt;
  color: #4a5460;
  margin-top: 1.4mm;
  font-weight: 500;
}

.tbpHeadRight { text-align: right; flex: none; }

.tbpForm {
  display: inline-block;
  border: .45mm solid #111;
  border-radius: 2mm;
  padding: 1mm 2.6mm;
  font-size: 11.5pt;
  font-weight: 800;
  letter-spacing: .02em;
  white-space: nowrap;
}

.tbpBrand {
  font-size: 8pt;
  color: #4a5460;
  margin-top: 1.6mm;
  font-weight: 600;
  letter-spacing: .02em;
}

/* Body — the flexible row. This is what absorbs A4 vs Letter. */
.tbpBody {
  flex: 1;
  min-height: 0;
  display: flex;
  gap: 4mm;
  margin-top: 4mm;
}

.tbpPitch {
  width: 104mm;
  flex: none;
  min-height: 0;
}

.tbpPitch svg {
  display: block;
  width: 100%;
  height: 100%;
}

.tbpSide {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3.2mm;
  overflow: hidden;
}

.tbpSecTitle {
  font-size: 7.5pt;
  font-weight: 800;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: #111;
  padding-bottom: 1mm;
  border-bottom: .35mm solid #111;
  margin-bottom: 1.6mm;
}

/* Line-up — rules only, no fills. */
.tbpRoster {
  width: 100%;
  border-collapse: collapse;
  font-size: 8.6pt;
  table-layout: fixed;
}

.tbpRoster th {
  text-align: left;
  font-size: 6.8pt;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: #5a6472;
  padding: 0 0 .9mm;
}

.tbpRoster td {
  padding: .95mm 0;
  border-bottom: .18mm solid #c9d0d8;
  vertical-align: middle;
}

.tbpRoster tr:last-child td { border-bottom: none; }

.tbpNum {
  width: 6.4mm;
  height: 6.4mm;
  font-weight: 800;
  font-size: 8pt;
  text-align: center;
  border: .3mm solid #111;
  border-radius: 50%;
  display: inline-block;
  line-height: 5.8mm;
}

.tbpName { font-weight: 600; }

.tbpNameText {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* An unnamed player gets a line to write on rather than an empty cell — the
   gap becomes a blank team sheet instead of looking like a bug. */
.tbpWriteIn {
  display: block;
  border-bottom: .25mm solid #8d97a2;
  height: 3.6mm;
  margin-right: 2mm;
}

/* Key */
.tbpLegend {
  display: flex;
  flex-direction: column;
  gap: 1.3mm;
  font-size: 7.8pt;
}

.tbpLegRow { display: flex; align-items: center; gap: 2.2mm; }
.tbpLegRow svg { flex: none; }
.tbpLegRow span { color: #2a323c; font-weight: 500; }

/* Analysis — numbers only. */
.tbpAnaGrid { display: flex; gap: 2mm; }

.tbpAnaCell {
  flex: 1;
  border: .3mm solid #aab3bd;
  border-radius: 1.6mm;
  padding: 1.6mm 1mm;
  text-align: center;
  min-width: 0;
}

.tbpAnaVal { font-size: 13pt; font-weight: 800; line-height: 1; }

.tbpAnaKey {
  font-size: 6.2pt;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #5a6472;
  margin-top: 1mm;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Notes */
.tbpNotes {
  flex: none;
  height: 62mm;
  display: flex;
  gap: 4mm;
  margin-top: 4mm;
}

/* With no notes to print, the ruled lines take the whole width instead of
   leaving half the block conspicuously blank. */
.tbpNotes--ruledOnly .tbpNotesCol { display: none; }
.tbpNotes--ruledOnly .tbpRuledCol { flex: 1; }

.tbpNotesCol {
  width: 112mm;
  flex: none;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.tbpNotesBody {
  font-size: 9pt;
  line-height: 1.5;
  color: #161b21;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  overflow-wrap: anywhere;
}

.tbpNotesBody p { margin: 0 0 1.6mm; }
.tbpNotesBody ul,
.tbpNotesBody ol { margin: 0 0 1.4mm 4.4mm; padding: 0; }
.tbpNotesBody li { margin-bottom: 1.1mm; }
.tbpNotesBody strong, .tbpNotesBody b { font-weight: 700; }
.tbpNotesBody h1, .tbpNotesBody h2, .tbpNotesBody h3 {
  font-size: 9.6pt;
  font-weight: 800;
  margin: 0 0 1.2mm;
}
.tbpNotesBody img { display: none; }  /* never paginates usefully */

/* Shown only when the notes were too long to fit. The coach has already been
   warned in the preview; this is so whoever is holding the paper knows there
   was more. */
.tbpNotesCut {
  flex: none;
  font-size: 7.2pt;
  font-style: italic;
  color: #5a6472;
  border-top: .18mm dashed #aab3bd;
  padding-top: 1.2mm;
  margin-top: 1.2mm;
}

.tbpRuledCol {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.tbpRuleLines { flex: 1; display: flex; flex-direction: column; }
.tbpRuleLine { height: 6.4mm; border-bottom: .18mm solid #b9c1ca; }

/* Footer */
.tbpFoot {
  flex: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6mm;
  border-top: .3mm solid #aab3bd;
  padding-top: 1.8mm;
  margin-top: 3mm;
  font-size: 7.2pt;
  color: #5a6472;
  font-weight: 500;
}

.tbpFoot b { color: #111; font-weight: 800; letter-spacing: .01em; }

/* ── print ──────────────────────────────────────────────────── */

@media print {
  /* Hide the app, keep the sheet. Done by hiding siblings rather than by
     restyling the app, so nothing in the board's own CSS has to know that
     printing exists. */
  body.tbPrinting > *:not(#tbPrintOverlay) { display: none !important; }

  body.tbPrinting {
    background: #fff !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  body.tbPrinting #tbPrintOverlay {
    position: static;
    display: block;
    background: none;
  }

  .tbpBar,
  .tbpNotice { display: none !important; }

  .tbpScroll {
    display: block;
    overflow: visible;
    padding: 0;
  }

  .tbpSheet {
    box-shadow: none;
    /* The @page box already provides the physical page; a sheet that also
       insisted on an exact mm height would round up and emit a blank second
       page on printers whose imageable area is a hair short. */
    width: 100%;
    height: auto;
    min-height: 0;
    padding: 0;
  }

  /* The pitch has no intrinsic height once the sheet stops being a fixed
     box, so give the body back a definite one. */
  .tbpBody { height: 168mm; flex: none; }
  .tbpSheet--letter .tbpBody { height: 150mm; }

  /* Nothing on a one-page sheet should ever break across pages. */
  .tbpSheet,
  .tbpBody,
  .tbpNotes,
  .tbpFoot { break-inside: avoid; page-break-inside: avoid; }
}