/* ==========================================================================
   Bracketworks: paper.

   This is the PDF export. Every browser can save a page as PDF from the print
   dialog, and it does it by rendering this stylesheet: vector, selectable text,
   real fonts, the bracket exactly as it is drawn on screen. No PDF library
   reads CSS, so any of them would have meant drawing the wall chart a second
   time in coordinates, by hand, and watching the two drift apart.

   Paper is white and ink is black, whatever theme the screen is in. The pool
   blue survives only where it carries meaning: a team's colour, and the rule
   under a heading.
   ========================================================================== */

@media print {

  /* Landscape throughout. A bracket of sixteen needs the width, and the tables
     are no worse for it. */
  @page { size: A4 landscape; margin: 12mm; }

  :root, :root[data-theme="dark"] {
    --color-bg:             #FFFFFF;
    --color-surface:        #FFFFFF;
    --color-surface-sunken: #FFFFFF;
    --color-text:           #000000;
    --color-text-muted:     #333333;
    --color-text-faint:     #666666;
    --color-border:         #B7B7B7;
    --color-border-strong:  #767676;
    --color-accent:         #0A6E92;
    --color-accent-ink:     #063E54;
    --color-accent-quiet:   #FFFFFF;
    --shadow-sm: none;
    --shadow-md: none;
  }

  html, body { background: #FFFFFF !important; color: #000000 !important; }
  body { font-size: 9.5pt; }

  /* Team colours are the one thing that must not be dropped to save toner:
     without them a chip is an unlabelled grey square. */
  * { print-color-adjust: exact; -webkit-print-color-adjust: exact; }

  /* Screen chrome never prints. */
  .appbar, .appfoot, #toast, .viewhead .toolbar, .toolbar,
  dialog, .legend, .icon-btn, .btn, .hint-wrap, .tabstate { display: none !important; }

  /* The printed document is hidden on screen and shown here, and the app it was
     built from steps aside. Keyed on the document simply EXISTING rather than on
     a flag the button sets, so pressing the browser's own print command on the
     export page gives the same paper as the button does. */
  #printout { display: block !important; }
  /* The document is a sibling of the export UI inside <main>, so it is the rest
     of main that steps aside, not main itself. Hiding main would take the
     document with it. */
  main:has(> #printout) > *:not(#printout) { display: none !important; }

  .wrap { max-width: none; padding: 0; }
  main { padding: 0; }

  /* ---- the document ----------------------------------------------------- */

  .p-head {
    display: flex; align-items: center; gap: 10mm;
    padding-bottom: 4mm; margin-bottom: 6mm;
    border-bottom: 2pt solid var(--color-accent);
  }
  .p-head img { width: 16mm; height: 16mm; }
  .p-head h1 {
    font-family: var(--font-display); font-size: 20pt; line-height: 1.1;
    margin: 0 0 1mm; letter-spacing: -0.01em;
  }
  .p-head p { margin: 0; font-size: 9pt; color: var(--color-text-muted); }

  .p-sec { break-inside: auto; margin-bottom: 8mm; }
  .p-sec > h2 {
    font-family: var(--font-display); font-size: 13pt; margin: 0 0 3mm;
    padding-bottom: 1.5mm; border-bottom: 0.5pt solid var(--color-border-strong);
    break-after: avoid;
  }
  /* Each section starts its own page. A schedule that ends three rows into the
     standings is a schedule nobody can hand to a referee. */
  .p-sec + .p-sec { break-before: page; }

  /* ---- panels flatten: on paper a border is enough, elevation is not ----
     They are allowed to break across pages. `break-inside: avoid` on something
     taller than a sheet does not keep it together, it just pushes it forward and
     leaves the page it came from empty. */
  .panel {
    border: 0; border-radius: 0; background: none;
    margin: 0 0 5mm !important; break-inside: auto;
  }
  .panel > header {
    padding: 0 0 1.5mm; border-bottom: 0.5pt solid var(--color-border);
    margin-bottom: 2mm;
  }
  .panel > header h2 { font-size: 11pt; }
  .panel > .body { padding: 0; }
  .panel > header .pill, .panel > header .chip { display: none; }
  .notice { display: none; }

  /* ---- tables ----------------------------------------------------------- */
  .table { font-size: 8.5pt; width: 100%; }
  .table th, .table td { padding: 1.2mm 2mm; }
  .table thead th {
    position: static; background: none;
    border-bottom: 0.75pt solid var(--color-border-strong);
    font-size: 7.5pt; letter-spacing: 0.05em;
  }
  .table tbody tr + tr td { border-top: 0.25pt solid var(--color-border); }
  .table tbody tr:hover td { background: none; }
  thead { display: table-header-group; }      /* repeat headers across pages */
  tr { break-inside: avoid; }
  .scroll-x { overflow: visible !important; }

  /* ---- the bracket ------------------------------------------------------
     A score box is a form control on screen and a ruled box on paper. Leaving
     it ruled rather than removing it is the point: the schedule is printed
     BEFORE anything is played, and somebody writes the scores into it by hand. */
  /* The chart itself may run onto a second sheet; a single box may not be cut in
     half. Tighter metrics than the screen, so a bracket of sixteen fits across
     one landscape page rather than being squeezed into a scroll that paper
     cannot scroll. */
  .bracket { break-inside: auto; gap: 6mm; }
  .bcol { min-width: 0; }
  .bcol > h3 { font-size: 7pt; margin-bottom: 2mm; }
  .bcol-body { gap: 2mm; }
  .bx { padding: 1mm 2mm; }
  .bx-slot { font-size: 6.5pt; margin-bottom: 0; }
  .bx .side { min-height: 0; padding: 0.4mm 0; }
  .who { font-size: 8pt; }
  .bslot { padding: 0.5mm 0; }
  .feeds .bslot::before { width: 3mm; }
  .feeds .bslot::after { left: calc(100% + 3mm); width: 3mm; }

  input.score {
    border: 0.5pt solid var(--color-border-strong) !important;
    border-radius: 0; background: none !important;
    width: 7mm; height: 4.2mm; padding: 0;
    font-size: 8pt; text-align: center;
    appearance: none; -webkit-appearance: none;
  }
  input.score[disabled] { border-style: dotted !important; }

  .bx { break-inside: avoid; box-shadow: none; }
  .bx.done .who.won { font-weight: 700; }

  /* ---- the schedule ----------------------------------------------------- */
  .slot { break-inside: avoid; }
  .slot-time {
    background: none; border-left: 2pt solid var(--color-accent);
    font-weight: 700;
  }

  /* Caps must survive the printer: a referee reading the sheet at the poolside
     needs to know which team is in white. */
  .cap { width: 3mm; height: 3mm; box-shadow: inset 0 0 0 0.3mm rgba(0,0,0,.4), 0 0 0 0.2mm #555; }

  /* A match the bracket never needed is greyed rather than dropped, so the
     printed chart still shows the shape of it. */
  .dead, .dead * { color: #8A8A8A !important; }

  a { color: inherit; text-decoration: none; }
  a[href^="#"]::after { content: none; }
}