/* ==========================================================================
   The sheets that leave the screen.

   A start list is carried to the Ground Jury's desk and a result card is
   handed to a federation, so both are documents rather than screenshots: the
   application comes off, the letterhead goes on, and what is left is the
   table. But it stays the federation's document — the logo, the teal band and
   the numbers keep the colours they have on screen, because a sheet that
   arrives in grey looks like a draft of something rather than the thing.

   **`print-color-adjust: exact` is what makes that true.** Browsers drop
   background colours when they print unless the reader ticks "Background
   graphics", and nobody ticks it. This asks for them regardless, so the sheet
   comes out of the printer looking like the sheet on the screen.

   The one thing this cannot touch is the browser's own header and footer — the
   date, the page title, the URL and the page number down the edges. Those come
   from the print dialog's "Headers and footers", and only the person printing
   can turn them off.
   ========================================================================== */
@media print {

  /* Print what is there, not a grey approximation of it. */
  *, *::before, *::after {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    box-shadow: none !important;
  }

  /* A4, explicitly — the ITPF is international and this must not silently
     become Letter because a browser's regional default said so. */
  @page { size: A4; margin: 12mm 10mm 14mm; }

  html, body {
    background: #fff !important;
    color: #15181B;
    font-size: 10pt;
    line-height: 1.35;
  }

  /* --- the application, which is not the document --------------------- */
  /* `.sidebar` is the dark column; `.nav` is only the list of links inside
     it. Hiding the list left the column standing — two hundred and forty
     six points of black down the edge of every sheet. Looked at, not
     assumed: the measurement said `.nav` was hidden and it was, and the
     page was still wrong. */
  .sidebar, .nav, .side, .topbar, .tabs, .btn, button, form button, .pick,
  .note, .foot, .who, header .lang, .sr-only, .screen-only, .kit, .brand,
  /* The public site (`public/_shell.php`) is a different shell with its
     own chrome — the dark hero band with the sign-in/create-account nav
     and its own teal glow, and the link footer underneath the sheet. Same
     reasoning as `.sidebar` above, just a second shell nobody had printed
     from yet: application, not document. */
  .pub-head, .pub-foot {
    display: none !important;
  }

  /* The shell lays the sidebar and the page out side by side. With the
     sidebar gone there is nothing to lay out, and a flex row would hold
     the sheet in a column the width of whatever is left. */
  .shell, .page, .content { display: block !important; }
  .print-only { display: block !important; }

  .wrap, .main, section, .card {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    max-width: none !important;
    width: auto !important;
    background: #fff !important;
  }
  .card-b { padding: 0 !important; }

  /* --- the printed page, and how the header repeats on every one -------
     Every printable page wraps its letterhead and its own title together in
     one <table class="print-page">, letterhead+title in the <thead> and
     everything else in the <tbody> — restored to real table display only
     here, where a browser's pagination engine will actually repeat a
     <thead> on every physical page a table spans. Nothing else does that
     reliably across Chrome, Firefox and Safari; a floating div, however it
     is positioned, prints once. */
  .print-page { display: table !important; width: 100% !important; border-collapse: collapse; }
  .print-page thead { display: table-header-group !important; }
  .print-page tbody { display: table-row-group !important; }
  .print-page tr { display: table-row !important; }
  .print-page td { display: table-cell !important; padding: 0 !important; border: 0 !important; }

  /* --- the letterhead -------------------------------------------------- */
  .print-head {
    display: flex !important;
    align-items: center;
    gap: 5mm;
    padding-block-end: 3mm;
    margin-block-end: 4mm;
    border-block-end: 1.6pt solid #00718F;
  }
  .print-head img {
    height: 16mm;
    width: auto;
  }
  .print-head .ph-who {
    font-size: 8.5pt;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #8E744A;
  }
  .print-head .ph-event {
    font-size: 12pt;
    font-weight: 700;
    color: #06465A;
    line-height: 1.2;
  }
  .print-head .ph-when {
    font-size: 9pt;
    color: #4B4F53;
  }

  /* The competition's own title, under the letterhead. */
  .card-h {
    border: 0 !important;
    padding: 0 0 3mm 0 !important;
    display: flex !important;
    align-items: baseline;
    gap: 3mm;
  }
  .card-h h2 {
    font-size: 14pt;
    font-weight: 700;
    color: #15181B;
    margin: 0;
  }
  .card-h .rule {
    font-size: 8.5pt;
    color: #00718F;
    border: 0 !important;
    background: none !important;
    padding: 0 !important;
  }
  .card-h .sp { flex: 1 1 auto; }

  h3 {
    font-size: 10.5pt;
    color: #06465A;
    margin: 5mm 0 2mm;
  }

  /* --- one competition to a page --------------------------------------- */
  .sheet { break-after: page; page-break-after: always; }
  .sheet:last-of-type { break-after: auto; page-break-after: auto; }

  /* --- the table, in the federation's colours -------------------------- */
  .tbl-wrap { overflow: visible !important; }

  table.t {
    width: 100%;
    border-collapse: collapse;
    font-size: 9.5pt;
  }
  thead { display: table-header-group; }
  tfoot { display: table-footer-group; }
  tr, td, th { break-inside: avoid; page-break-inside: avoid; }

  table.t thead th {
    background: #00718F !important;
    color: #fff !important;
    font-weight: 700;
    text-align: start;
    padding: 2mm 2.5mm !important;
    border: .5pt solid #005672 !important;
  }
  table.t td {
    padding: 1.8mm 2.5mm !important;
    border: .5pt solid #D2D2D2 !important;
    vertical-align: top;
  }
  /* A wide sheet is read across, and a tint every other row is what keeps
     the eye on one line of it. */
  table.t tbody tr:nth-child(even) td { background: rgba(0,113,143,.05) !important; }

  table.t b { color: #15181B; }

  /* --- the small print inside a cell ----------------------------------- */
  .sub {
    display: block;
    font-size: 8pt;
    color: #4B4F53 !important;
  }
  .zero { color: #ADADAD !important; font-style: italic; }

  .pill {
    display: inline-block;
    border-radius: 30px;
    padding: .4mm 2mm !important;
    font-size: 8pt;
    font-weight: 700;
    background: #F1F4F6 !important;
    color: #06465A !important;
    border: .4pt solid #D2D2D2 !important;
  }
  .pill.ok   { background: rgba(30,122,90,.12) !important;  color: #1E7A5A !important; }
  .pill.warn { background: rgba(240,192,41,.22) !important; color: #7A5C00 !important; }
  .pill.stop { background: rgba(179,38,30,.10) !important;  color: #B3261E !important; }
  .pill.mute { background: #F1F4F6 !important;              color: #4B4F53 !important; }

  /* A flag is worth printing now that the ink is in colour. */
  .flag {
    display: inline-block !important;
    height: 3.2mm;
    width: auto;
    vertical-align: -.4mm;
    border: .3pt solid #D2D2D2;
  }

  .tnum { font-variant-numeric: tabular-nums; }

  a, a[href]::after { text-decoration: none; content: ""; }

  /* -------------------------------------------------------------------------
     Form controls, on paper.

     The score sheet is the one page in this system that is filled in while a
     competition is happening, and it goes to the desk twice: blank before the
     run and filled in after it. Printing the widgets themselves — a grey
     dropdown with an arrow, a box with a border — gives a sheet nobody signs
     under Article 142.2 and nobody can write on either.

     So a control prints as its value on a ruled line: readable when it has
     been filled in, and a line to write on when it has not. Checkboxes keep
     their box, because a box is exactly the right thing to tick by hand.
     ------------------------------------------------------------------------- */
  select,
  input[type="number"],
  input[type="text"],
  input[type="email"] {
    -webkit-appearance: none !important;
    appearance: none !important;
    border: 0 !important;
    border-block-end: .5pt solid #9AA0A6 !important;
    border-radius: 0 !important;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    padding: 0 1mm .3mm 1mm !important;
    margin: 0 !important;
    color: #111 !important;
    font: inherit !important;
    font-size: 8.5pt !important;
    min-width: 14mm;
    max-width: 100%;
    text-overflow: ellipsis;
  }

  /* The disqualification column is a whole sentence when one is chosen and
     empty the rest of the time, which is almost always. A blank rule the width
     of the column is more use on paper than a wrapped article title. */
  select[name^="dq"] { max-width: 34mm; }

  input[type="checkbox"] {
    -webkit-appearance: checkbox !important;
    appearance: checkbox !important;
    width: 2.8mm !important;
    height: 2.8mm !important;
    vertical-align: -.3mm;
  }

  /* Nothing on paper is disabled — it is just paper. */
  select[disabled], input[disabled] { opacity: 1 !important; }

  /* Article 142.2 — where a member of the Ground Jury signs. Wide enough
     for a name, because this is the reason the card is printed at all. */
  .sig-line {
    display: inline-block;
    /* !important because the screen sets a narrower width inline, and an
       inline style out-specifies a stylesheet however late it is loaded. */
    min-width: 46mm !important;
    border-block-end: .6pt solid #4B4F53 !important;
  }
}