/* ══════════════════════════════════════════════════════════════════
   PRINT - pairing sheet, result slips, standings, team cards.

   Not a PDF library. The browser's own print-to-PDF is better, free,
   and works offline, which matters more in a school hall than any
   amount of server-side rendering would.

   Everything is A4 and sized to be legible at two metres on a wall and
   after a school photocopier has had its way with it. A 12-board
   pairing sheet has to fit on one page.

   Two looks, one stylesheet. The default is black and white, because
   that is what a school photocopier does well and what most halls
   actually have. Adding `pr-colour` to <body> brings in the
   association's own two colours, used sparingly - a green masthead
   rule, a green table band, and little else. Colour should make a
   sheet easier to read across a room, not turn it into a poster.

   The watermark and the footer mark are real img elements, not CSS
   backgrounds: browsers drop background images from a print unless the
   person ticks "Background graphics", and nobody ticks it.
   ══════════════════════════════════════════════════════════════════ */

/* Hidden on screen; the print rules below turn them on. */
.pr-print-head, .pr-print-foot, .pr-watermark { display: none; }

@media print {
  @page { size: A4 portrait; margin: 12mm 12mm 14mm; }

  html, body {
    background: #fff !important; color: #000 !important; font-size: 10.5pt;
    /* A viewport-height rule left anywhere in the cascade prints as a
       trailing blank page. */
    height: auto !important; min-height: 0 !important; overflow: visible !important;
  }

  /* Chrome that has no business on paper. */
  .pr-app-bar, .header, .nav, .footer, .pr-help-btn, .pr-drawer, .pr-toasts,
  .pr-actions, .pr-tabs, .pr-rail, .pr-res, .pr-net, .pr-modal-wrap,
  .no-print, .pr-banner { display: none !important; }

  .pr-page, .main { padding: 0 !important; min-height: 0 !important; }

  /* theme-2026.css draws the brand's red accent bar as an ::after on
     every h1 and h2. On paper that is a red line under the masthead of
     every single sheet, and under every heading in the guide. */
  h1::after, h2::after, h3::after, h4::after,
  .main h1::after, .main h2::after, .page-head h1::after { display: none !important; }
  .container { max-width: none !important; padding: 0 !important; }
  .pr-card { border: 0 !important; box-shadow: none !important; padding: 0 !important; margin: 0 0 8mm !important; }

  /* Anything clipping its own content can push a break onto a page of
     its own, which is where a stray blank sheet comes from. */
  .pr-match, .pr-card, .pr-scroll, .pr-teamcard { overflow: visible !important; }

  /* ── Nothing is ever cut in half ───────────────────────────────
     Two rules, applied to two different kinds of thing.

     Things SMALL enough to fit on a page are indivisible: a board row,
     a table row, a slip, a squad line, a footnote. Every one of them
     says so in both the modern property and the legacy alias, because
     some mobile browsers still only read the legacy one.

     Things that may legitimately be TALLER than a page - a match card
     with twelve boards, a long standings table - must be allowed to
     break, or the browser moves the whole thing to a fresh page and
     then clips whatever still does not fit. They break, but only ever
     between the indivisible units above.

     Prose gets orphans/widows instead: a paragraph is allowed to
     break, just never leaving one lonely line behind. */
  .pr-board-row, .pr-match-head, .pr-slip, .pr-teamcard,
  .pr-table tr, .pr-squad li, .pr-tbkey, .pr-print-head, .pr-print-foot,
  figure, img, h1, h2, h3, h4 {
    break-inside: avoid; page-break-inside: avoid;
  }
  .pr-match, .pr-card, .pr-slips, .pr-table, .pr-scroll, .pr-page, .main {
    break-inside: auto; page-break-inside: auto;
  }
  /* The masthead is deliberately NOT in this list. "Keep with the
     next block" is only honoured by pushing both to a fresh page when
     the next block is too tall to fit - and a browser that will not
     break inside that block then leaves page 1 holding nothing but
     the watermark. The masthead is followed by content on every
     sheet, so it cannot be orphaned; the rule bought nothing. */
  h1, h2, h3, h4, .pr-match-head {
    break-after: avoid; page-break-after: avoid;
  }
  p, li, dd { orphans: 3; widows: 3; }
  /* A fixed height cannot grow to fit its content, and what does not
     fit is simply not drawn. Nothing on a printed page may have one. */
  .pr-slip, .pr-board-row, .pr-match-head, .pr-teamcard { height: auto !important; }
  /* A bottom margin on the LAST block is measured past the last line
     and can spill over the page edge - one more blank sheet. */
  .pr-match:last-child, .pr-card:last-child, .pr-teamcard:last-child,
  .pr-slips > :last-child { margin-bottom: 0 !important; }

  /* ── Watermark ────────────────────────────────────────────────
     position: fixed repeats it on every printed page.

     Centred from the middle out, not with `inset: 0; margin: auto`:
     that only centres while the mark is narrower than the page box,
     and a phone printing to A4 lays the page out at its own screen
     width, which is narrower than 110mm. The over-constrained margins
     then collapse to the left, which is where "the watermark is off
     centre on my phone" came from. A 50%/50% anchor with a transform
     is centred at any width, and the width itself yields to the page
     so the mark never runs off the sheet. */
  .pr-watermark {
    display: block !important; position: fixed;
    top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: min(110mm, 70vw); height: auto; max-height: 60vh; object-fit: contain;
    opacity: .055; z-index: 0;
  }
  /* The three marks are one colour PNG. Black and white is the default
     and the association's colours are opt-in, so the marks are drained
     unless colour was asked for - otherwise the watermark was the one
     thing on a mono sheet still printing in green and red. */
  .pr-watermark, .pr-print-head .mark, .pr-print-foot .made img { filter: grayscale(1); }
  .pr-colour .pr-watermark, .pr-colour .pr-print-head .mark, .pr-colour .pr-print-foot .made img { filter: none; }
  .pr-print-head, .pr-print-foot, .pr-match, .pr-table, .pr-slips,
  .pr-teamcard { position: relative; z-index: 1; }

  /* ── Masthead ─────────────────────────────────────────────────
     Every sheet carries it, so a page picked off a wall still says
     which event and which round it belongs to. */
  .pr-print-head {
    display: flex !important; align-items: flex-start; gap: 4mm;
    border-bottom: 2pt solid #000; padding-bottom: 3mm; margin-bottom: 5mm;
  }
  .pr-print-head .mark { width: 14mm; height: auto; flex: none; }
  .pr-print-head h1 { font-size: 17pt; font-weight: 800; margin: 0 0 1mm; letter-spacing: -.02em; }
  .pr-print-head .sub { font-size: 11pt; font-weight: 700; }
  .pr-print-head .meta { font-size: 9pt; margin-top: 1.5mm; }

  /* ── Pairing sheet ───────────────────────────────────────────── */
  /* A twelve-board match card is taller than a page. Asking the browser
     not to break it means it moves the whole card to a fresh page and
     then clips the overflow - which is where "the page cut off the
     bottom boards" comes from. So the card may break; the individual
     rows may not, and a match never starts with its heading orphaned at
     the foot of a page. */
  .pr-match {
    border: 1pt solid #000 !important; box-shadow: none !important; border-radius: 0 !important;
    margin-bottom: 4mm !important; break-inside: auto;
  }
  .pr-match-head {
    background: #eee !important; border-bottom: 1pt solid #000 !important; padding: 2mm 3mm !important;
    display: flex !important; align-items: center; gap: 4mm;
    break-after: avoid; page-break-after: avoid;
    break-inside: avoid; page-break-inside: avoid;
  }
  .pr-match-head .pr-side { flex: 1 1 0; min-width: 0; }
  .pr-match-head .pr-score { flex: 0 0 26mm; text-align: center; }
  /* The public page's heading carries an empty first grid cell to line
     it up with the board number. Flex would give that cell width. */
  .pr-match.live .pr-match-head::before { display: none !important; }
  .pr-side b { font-size: 12pt !important; }
  .pr-side .sub { font-size: 7pt !important; }
  .pr-score { font-size: 13pt !important; }

  /* Flex, not grid. A row must never be split across a page, and
     Chrome honours `break-inside: avoid` on a flex container far more
     reliably than on a grid one - a sliced board row was the symptom.
     Flex also ignores `grid-area` completely, so the mobile
     stylesheet's area names cannot stack the two players on top of
     each other when printing from a phone. */
  .pr-board-row {
    display: flex !important; align-items: center; gap: 3mm !important;
    padding: 1.8mm 3mm !important; border-bottom: .5pt solid #999 !important;
    break-inside: avoid; page-break-inside: avoid;
  }
  .pr-board-row > .bd { flex: 0 0 7mm; }
  .pr-board-row > .pr-seat { flex: 1 1 0; min-width: 0; }
  .pr-board-row > .pr-seat.right { justify-content: flex-end; text-align: right; }
  .pr-board-row > .pr-mid { flex: 0 0 26mm; }
  .pr-board-row .bd {
    background: none !important; border: .75pt solid #000; width: 7mm !important; height: 7mm !important;
    border-radius: 0 !important; font-size: 10pt !important;
  }
  /* A name is never cut short on paper. The screen ellipsis exists so
     forty boards fit a phone; a sheet on a wall has to say the whole
     of "Bongiwe Van Der Merwe-Botha". */
  .pr-seat b {
    font-size: 11pt !important; white-space: normal !important;
    overflow: visible !important; text-overflow: clip !important;
  }
  /* The footnote star means nothing on a sheet that has no footnote. */
  .pr-flag { display: none !important; }
  /* Paper wants the score, not the rating: the question asked at a
     board is "how many does he have?". */
  .pr-seat .rt { display: none !important; }
  .pr-seat .pts {
    display: inline !important; font-size: 9.5pt; font-weight: 800;
    font-variant-numeric: tabular-nums; color: #000 !important;
  }
  .pr-seat .pts:not(:empty)::before { content: "("; }
  .pr-seat .pts:not(:empty)::after { content: ")"; }

  /* Solid blocks, not tints - a 10% grey and a 15% grey are the same
     square once a photocopier has finished with them. */
  .pr-seat .dot {
    width: 4mm !important; height: 4mm !important; border-radius: 0 !important;
    border: .75pt solid #000 !important;
  }
  .pr-seat .dot.w { background: #fff !important; }
  .pr-seat .dot.b { background: #000 !important; }
  .pr-seat .empty { font-weight: 500; color: #444 !important; }
  .pr-seat .empty.need {
    background: none !important; border: .75pt dashed #000 !important; color: #000 !important;
    border-radius: 0 !important; font-weight: 800; padding: 1mm 2mm;
  }

  /* ── Banding ──────────────────────────────────────────────────
     Every second board carries a light green band, in colour and in
     black and white alike: a school photocopier turns it into a pale
     grey, which is exactly the stripe that stops an eye slipping a
     row while reading across a forty-board sheet. Asked for by name
     by the people who read these on the wall, so it does not wait for
     the "Print in colour" box. Chrome drops backgrounds unless told
     otherwise, and this one is told. */
  .pr-sheet-results .pr-board-row {
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
  .pr-sheet-results .pr-board-row:nth-child(even) { background: #E3F0E6 !important; }
  /* A team card's first child is its heading, so the count is shifted
     by one there to keep the same boards banded on every card. */
  .pr-sheet-results .pr-match-head ~ .pr-board-row:nth-child(even) { background: none !important; }
  .pr-sheet-results .pr-match-head ~ .pr-board-row:nth-child(odd) { background: #E3F0E6 !important; }
  .pr-sheet-results .pr-writein { background: #fff; }
  /* An individual sheet is one card of forty rows. Its outer border
     used to run on past the last row that fitted a page, drawing an
     empty box at the foot of the sheet where the next row had been
     pushed over. So the card has no border of its own there, and each
     row carries its own sides. */
  .pr-sheet-results > .pr-match { border: 0 !important; }
  .pr-sheet-results > .pr-match > .pr-board-row {
    border-left: 1pt solid #000 !important; border-right: 1pt solid #000 !important;
  }
  .pr-sheet-results > .pr-match > .pr-board-row:first-child { border-top: 1pt solid #000 !important; }
  .pr-sheet-results > .pr-match > .pr-board-row:last-child { border-bottom: 1pt solid #000 !important; }

  /* The box the arbiter writes the result into, in the middle of the
     row where the two names meet. */
  .pr-mid {
    display: flex !important; flex-direction: column; align-items: stretch; gap: 1mm;
    break-inside: avoid; page-break-inside: avoid;
  }
  .pr-writein {
    display: flex !important; align-items: center; justify-content: center;
    height: 7mm; border: .75pt solid #000; width: 100%;
    font-size: 11pt; font-weight: 800; font-variant-numeric: tabular-nums;
  }
  .pr-outcome { font-size: 10pt !important; }
  /* On paper this is a caption, not a badge - a rounded pill with a
     tint prints as a smudge. */
  .pr-tag {
    border: 0 !important; background: none !important; color: #000 !important;
    border-radius: 0 !important; padding: 0 !important; margin-top: .8mm !important;
    font-size: 6.5pt !important; letter-spacing: .02em; text-align: center;
  }

  /* ── Tables ──────────────────────────────────────────────────── */
  /* The mobile rule sizes a table to its content so the scroller has
     something to scroll. On paper there is no scroller and the page is
     the width it is. */
  .pr-table {
    width: 100% !important; min-width: 0 !important; max-width: 100% !important;
    border-collapse: collapse; font-size: 10pt; table-layout: auto;
  }
  /* Nothing may hold a column wider than the page. `nowrap` comes from
     the mobile rules, which a phone still matches while printing, and
     `overflow-wrap: anywhere` is the guarantee that even a single long
     word cannot push the table off the sheet. */
  .pr-table th, .pr-table td {
    white-space: normal !important;
    overflow-wrap: anywhere; word-break: normal; min-width: 0 !important;
  }
  /* Numbers are short and must not be split across two lines. */
  .pr-table td.num, .pr-table th.num, .pr-table .rank {
    white-space: nowrap !important; overflow-wrap: normal;
  }
  /* A standings table with three tiebreaks is a lot of columns. Give it
     back some width by tightening rather than letting it overflow. */
  .pr-table th { font-size: 8pt; letter-spacing: .01em; }
  .pr-table th, .pr-table td { padding: 1.6mm 1.6mm !important; }
  /* On screen the header is a green band with white type. On a school
     photocopier that becomes a black block, so mono paper gets a rule. */
  .pr-table th {
    background: none !important; color: #000 !important;
    border-bottom: 1pt solid #000 !important; padding: 2mm 2.5mm !important; font-size: 8.5pt;
  }
  .pr-table td { border-bottom: .5pt solid #999 !important; padding: 2mm 2.5mm !important; color: #000 !important; }
  /* Faint vertical rules so P, W, D, L, MP and GP read as six columns
     rather than a row of loose numbers. */
  .pr-table th + th, .pr-table td + td { border-left: .4pt solid #BBB !important; }
  .pr-table tbody tr { break-inside: avoid; }
  .pr-table thead { display: table-header-group; }
  /* The scroller's edge-shadow gradients are a screen affordance and
     would print as grey smears down both sides of a table. */
  .pr-scroll {
    overflow: visible !important; margin: 0 !important; padding: 0 !important;
    background: none !important;
  }

  /* ── Result slips - one per board, cut along the line ────────── */
  /* Two to a row, and a slip is cut out with scissors - so a slip that
     straddles a page break is useless.

     The sheet is a plain block and each slip an inline-flex box: an
     atomic inline is never split by any engine, and the line boxes
     between rows of slips are where every engine is happy to break.
     A flex-wrap container did the same job in Chrome, and in browsers
     that will not fragment a flex container it was moved whole to
     page 2 - leaving page 1 blank. `font-size: 0` on the sheet eats
     any whitespace between slips, so two always share a row. */
  .pr-slips { display: block !important; font-size: 0; line-height: 0; }
  .pr-slip {
    display: inline-flex !important; vertical-align: top; width: 50%; box-sizing: border-box;
    font-size: 10.5pt; line-height: 1.35;
    border: .5pt dashed #000; padding: 5mm; min-height: 44mm;
    break-inside: avoid; page-break-inside: avoid;
    flex-direction: column; justify-content: space-between; gap: 2mm;
  }
  .pr-slip .hd { font-size: 8pt; text-transform: uppercase; letter-spacing: .08em; font-weight: 800; }
  .pr-slip .nm { font-size: 11pt; font-weight: 700; }
  /* Where the score goes. If the result is already known - a forfeit,
     say - it is printed here rather than leaving a box for somebody to
     copy a number into that the system already has. */
  .pr-slip .box {
    border: .75pt solid #000; height: 9mm; width: 26mm; flex: none;
    display: flex; align-items: center; justify-content: center;
    font-size: 13pt; font-weight: 800;
  }
  .pr-slip .row { display: flex; justify-content: space-between; align-items: center; gap: 4mm; }
  /* The colour is a block, not the word. A player who reads slowly, or
     reads no English, still knows which side of the board they are. */
  .pr-slip .who { display: flex; align-items: center; gap: 3mm; min-width: 0; }
  .pr-slip .cblock { width: 7mm; height: 7mm; border: 1pt solid #000; flex: none; }
  .pr-slip .cblock.w { background: #fff; }
  .pr-slip .cblock.b { background: #000; }
  /* One line. It is signed by one person - the official at the board. */
  .pr-slip .sign {
    display: flex; align-items: flex-end; gap: 2mm; font-size: 8pt; font-weight: 800;
    text-transform: uppercase; letter-spacing: .08em;
  }
  .pr-slip .sign .line { flex: 1; border-bottom: .75pt solid #000; height: 5mm; }

  /* ── Team card - the squad in order, with the boards it fields ── */
  .pr-teamcard { border: 1pt solid #000; padding: 4mm; break-inside: avoid; margin-bottom: 4mm; }
  .pr-squad li { border: 0 !important; border-bottom: .5pt solid #999 !important; border-radius: 0 !important; padding: 1.5mm 0 !important; margin: 0 !important; }
  .pr-squad .ord { background: none !important; border: .75pt solid #000; border-radius: 0 !important; width: 6mm !important; height: 6mm !important; }
  .pr-squad .tm { background: none !important; border: .5pt solid #000; border-radius: 0 !important; color: #000 !important; }

  /* ── Footer ──────────────────────────────────────────────────── */
  .pr-print-foot {
    display: flex !important; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 2mm 4mm;
    margin-top: 6mm; padding-top: 2mm; border-top: .5pt solid #000; font-size: 8pt;
    break-inside: avoid; page-break-inside: avoid; break-before: avoid;
  }
  /* `flex: none` is load-bearing. With the default shrink factor the flex
     algorithm squeezes this box below the width of text it has been told
     never to wrap, and the overflow is simply not drawn - which is how
     "Made by the CHCA pairing system" came out as "Made by the CHCA
     pairing syst". The mark holds its width; the metadata beside it
     wraps, which is what prose is for. */
  .pr-print-foot .made {
    display: flex; align-items: center; gap: 1.5mm; font-weight: 700;
    white-space: nowrap; flex: none; max-width: 100%;
  }
  .pr-print-foot > div:first-child { flex: 1 1 60mm; min-width: 0; }
  .pr-print-foot .made img { width: 5mm; height: auto; flex: none; }

  /* A clickable name is just a name once it is on paper. */
  .pr-linkish { color: #000 !important; text-decoration: none !important; }
  .pr-colour .pr-linkish { color: #14532B !important; }

  a[href]::after { content: none !important; }
  .pr-empty, .pr-spinner { display: none !important; }

  /* ══ Colour ═════════════════════════════════════════════════════
     Opt-in, and deliberately restrained: the association's Board Green
     for structure, its Tournament Red for the one thing that is
     genuinely a warning. Nothing else is tinted, so the sheet still
     photocopies to something readable. */
  body.pr-colour { color: #14181A !important; }
  .pr-colour, .pr-colour * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }

  .pr-colour .pr-print-head { border-bottom-color: #1A7A3C; }
  .pr-colour .pr-print-head h1 { color: #14532B; }
  .pr-colour .pr-print-head .sub { color: #1A7A3C; }

  .pr-colour .pr-table th {
    background: #1A7A3C !important; color: #fff !important; border-bottom: 0 !important;
  }
  .pr-colour .pr-table th + th { border-left-color: rgba(255,255,255,.35) !important; }
  .pr-colour .pr-table tbody tr:nth-child(even) td { background: #F2F7F3 !important; }
  .pr-colour .pr-table td { border-bottom-color: #D3DED6 !important; }
  .pr-colour .pr-table td + td { border-left-color: #D3DED6 !important; }

  .pr-colour .pr-match { border-color: #1A7A3C !important; }
  .pr-colour .pr-sheet-results > .pr-match > .pr-board-row { border-left-color: #1A7A3C !important; border-right-color: #1A7A3C !important; }
  .pr-colour .pr-sheet-results > .pr-match > .pr-board-row:first-child { border-top-color: #1A7A3C !important; }
  .pr-colour .pr-sheet-results > .pr-match > .pr-board-row:last-child { border-bottom-color: #1A7A3C !important; }
  .pr-colour .pr-match-head { background: #EDF5EF !important; border-bottom-color: #1A7A3C !important; }
  .pr-colour .pr-side b { color: #14532B; }
  .pr-colour .pr-board-row { border-bottom-color: #DCE7DF !important; }
  .pr-colour .pr-sheet-results .pr-board-row:nth-child(even),
  .pr-colour .pr-sheet-results .pr-match-head ~ .pr-board-row:nth-child(odd) { background: #E3F0E6 !important; }
  .pr-colour .pr-board-row .bd { border-color: #1A7A3C; color: #14532B; }
  .pr-colour .pr-writein { border-color: #1A7A3C; }
  .pr-colour .pr-tag { color: #B3121A !important; }

  .pr-colour .pr-slip { border-color: #1A7A3C; }
  .pr-colour .pr-slip .hd { color: #1A7A3C; }
  .pr-colour .pr-slip .box, .pr-colour .pr-slip .sign .line { border-color: #1A7A3C; }

  .pr-colour .pr-teamcard { border-color: #1A7A3C; }
  .pr-colour .pr-squad .ord { border-color: #1A7A3C; color: #14532B; }

  .pr-colour .pr-print-foot { border-top-color: #1A7A3C; color: #3A4A3F; }

  /* The two colour chips stay pure black and pure white in every mode.
     They are the one thing on the page that must never be a shade. */
}