/* Paper.
   Two jobs. First: the coupon page has to come out of a home printer as a
   thing a clerk can scan and read across a counter. Second: the eight legal
   documents have to come out as documents somebody can file and annotate.

   Nothing here is decoration. Every rule removes something the paper does not
   need, or fixes a size that only means something in millimetres.

   This sheet carries no @layer on purpose. Unlayered author rules beat every
   layered one, so a print rule never has to fight the screen cascade it is
   correcting. */

@media print {
  /* ====================================================================
     1. Ink model
     ==================================================================== */

  /* The screen palette may be the night palette when the reader hits Print,
     and near-white type on white paper is a blank page. theme.js writes the
     palette onto :root as an inline style, which outranks any ordinary rule,
     so these carry !important. Every value is mixed from black and white:
     no brand colour is restated here. */
  :root {
    --c-paper: white !important;
    --c-paper-alt: white !important;
    --c-white: white !important;
    --c-surface: white !important;
    --c-ink: black !important;
    --c-ink-inverse: white !important;
    --c-ink-muted: color-mix(in oklab, black 66%, white) !important;
    --c-rule: color-mix(in oklab, black 34%, white) !important;
    --c-primary: black !important;
    --c-primary-ink: black !important;
    --c-secondary: black !important;
    --c-danger: black !important;
    --c-warning: black !important;
    --c-positive: black !important;
    --c-focus: black !important;
    --c-tint-primary: white !important;
    --c-tint-danger: white !important;
    --c-tint-positive: white !important;
    --c-tint-warning: white !important;
  }

  /* ====================================================================
     2. Page box and base type
     ==================================================================== */

  @page {
    size: auto;
    margin: 14mm 16mm;
  }

  html {
    font-size: 11pt;
  }

  body {
    margin: 0;
    padding: 0 !important;
    background: white !important;
    background-image: none !important;
    color: black;
    font-size: 11pt;
    line-height: 1.45;
  }

  h1 {
    font-size: 19pt;
  }
  h2 {
    font-size: 14pt;
  }
  h3 {
    font-size: 12pt;
  }
  h1,
  h2,
  h3,
  h4 {
    break-after: avoid;
    page-break-after: avoid;
  }

  p,
  li,
  dd {
    orphans: 3;
    widows: 3;
  }

  /* ====================================================================
     3. What paper does not need
     ==================================================================== */

  [data-chrome],
  .skip-link,
  .site-header,
  .site-nav,
  .nav-toggle,
  .rg-strip,
  .site-footer,
  nav,
  .legal-toc,
  .account-nav,
  .filter-bar,
  .btn,
  .selection-row__remove,
  .coupon-stage__actions,
  dialog,
  .age-gate,
  .screen-only,
  video,
  audio,
  iframe {
    display: none !important;
  }

  /* A pick is a control on screen and a number in a column on paper. It keeps
     its odds, because a printed board with an empty odds column is worse than
     no printed board. */
  .board__pick {
    display: block;
    min-block-size: 0;
    padding: 0;
    border: 0;
    background: none !important;
    color: black !important;
    text-align: start;
  }
  .board__pick[aria-pressed="true"] .board__pick-odds {
    text-decoration: underline;
    text-underline-offset: 0.15em;
  }

  /* Held back on screen, released here. */
  .print-only {
    display: block !important;
  }
  .print-only--inline {
    display: inline !important;
  }

  /* Sticky and scrolling are screen ideas. */
  .coupon-panel,
  .coupon-panel__sticky,
  .legal-toc,
  .board__table thead th,
  .results-table thead th {
    position: static !important;
    max-block-size: none !important;
    overflow: visible !important;
    box-shadow: none !important;
  }
  .table-scroll {
    overflow: visible !important;
  }

  /* Long tables repeat their heads and do not split a row across pages. */
  thead {
    display: table-header-group;
  }
  tr,
  .selection-row {
    break-inside: avoid;
    page-break-inside: avoid;
  }
  .board__table thead th,
  .results-table thead th {
    border-block-end: 1pt solid black;
  }

  /* ====================================================================
     4. The coupon
     ==================================================================== */

  /* Top-left of the sheet, nothing above it, nothing beside it, no control of
     any kind on it. */
  body[data-page="coupon"] button,
  body[data-page="coupon"] input,
  body[data-page="coupon"] select,
  body[data-page="coupon"] main > :not(.coupon-stage) {
    display: none !important;
  }
  body[data-page="coupon"] .coupon-stage {
    display: block;
    justify-items: start;
    gap: 0;
    padding: 0;
    margin: 0;
  }
  body[data-page="coupon"] .coupon-stage > :not(.ticket):not(.print-only):not(.print-imprint) {
    display: none !important;
  }

  .ticket {
    inline-size: 92mm;
    max-inline-size: 92mm;
    margin: 0 !important;
    padding: 5mm 6mm 4mm;
    border: 0.35mm solid black;
    border-radius: 0;
    background: white;
    color: black;
    box-shadow: none;
    font-size: 9.5pt;
    line-height: 1.4;
    break-inside: avoid;
    page-break-inside: avoid;
  }
  /* The perforation is a screen affordance. Background images are dropped by
     the printer anyway; this makes that deliberate rather than accidental. */
  .ticket::before,
  .ticket::after {
    display: none !important;
  }
  .ticket--printing {
    animation: none !important;
    clip-path: none !important;
  }
  .ticket__head {
    border-block-end: 0.35mm dashed black;
  }
  .ticket__brand {
    font-size: 15pt;
  }
  .ticket__org {
    font-size: 7pt;
    color: black;
  }
  .ticket__row {
    border-block-end: 0.2mm dotted black;
    padding-block: 0.8mm;
  }
  .ticket__row dt {
    color: black;
  }
  .ticket__total {
    border-block-start: 0.5mm solid black;
  }
  .ticket__total strong {
    font-size: 14pt;
  }

  /* The code is read out loud at a counter and typed into a terminal. */
  .ticket__code {
    font-size: 19pt;
    font-weight: 600;
    letter-spacing: 0.14em;
    line-height: 1.25;
    padding-block: 3mm;
    word-break: break-all;
  }

  /* The scanner needs real modules and real contrast, so this one surface
     keeps its colours and its size is fixed in millimetres, not in pixels. */
  .ticket__qr {
    display: block;
    border-block-end: 0.2mm dotted black;
    padding-block: 3mm;
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }
  .ticket__qr canvas,
  .ticket__qr svg,
  .ticket__qr img {
    display: block;
    inline-size: 34mm !important;
    block-size: 34mm !important;
    min-inline-size: 30mm;
    min-block-size: 30mm;
    max-inline-size: none;
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }
  .ticket__qr canvas,
  .ticket__qr img {
    image-rendering: pixelated;
  }
  .ticket__qr svg {
    shape-rendering: crispEdges;
  }
  .ticket__qr-note {
    font-size: 7pt;
    color: black;
  }

  /* The lines a regulator reads: age, jurisdiction, no online payment,
     where the coupon can and cannot be used. They come out of data.json in
     the markup; this only sets how they sit on the page. */
  .ticket__compliance {
    border-block-start: 0.2mm solid black;
    padding-block-start: 2.5mm;
    margin-block-start: 2.5mm;
    font-size: 7pt;
    line-height: 1.35;
    color: black;
  }
  .ticket__compliance p {
    margin-block-end: 1.5mm;
  }

  /* Organisation identification under the stub. Also markup-driven. */
  .print-imprint {
    display: block !important;
    inline-size: 92mm;
    max-inline-size: 92mm;
    margin-block-start: 5mm;
    font-family: var(--f-body);
    font-size: 7.5pt;
    line-height: 1.35;
    color: black;
    break-inside: avoid;
    page-break-inside: avoid;
  }
  .print-imprint__org {
    font-family: var(--f-display);
    font-size: 8.5pt;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 0 0 1mm;
  }
  .print-imprint__address,
  .print-imprint__line {
    margin: 0 0 1mm;
  }
  .print-imprint__line:last-child {
    margin-block-end: 0;
  }

  /* ====================================================================
     5. Legal documents and other running prose
     ==================================================================== */

  .legal-layout {
    display: block;
  }

  .prose,
  article.prose {
    max-inline-size: none;
    padding-inline-start: 0;
    font-size: 10.5pt;
    line-height: 1.5;
  }
  article.prose > h2 {
    border-block-start: 0.5mm solid black;
    padding-block-start: 3mm;
    margin-block-start: 6mm;
  }
  .prose .clause-no {
    color: black;
  }
  .prose dd {
    border-inline-start: 0.2mm solid black;
  }

  .legal-version {
    display: block;
    border-block-start: 0.6mm solid black;
    border-block-end: 0.2mm solid black;
    padding-block: 2mm;
    margin-block-end: 6mm;
    font-size: 8pt;
    color: black;
  }
  .legal-version__item {
    display: inline;
    margin-inline-end: 6mm;
  }

  /* A printed link is useless without its address, but only in running prose.
     The ticket stays clean: nothing on it points anywhere. */
  .prose a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-family: var(--f-mono);
    font-size: 8pt;
    word-break: break-all;
  }
  .prose a {
    color: black;
    text-decoration: underline;
  }
  .ext::after {
    display: none;
  }

  /* Notices keep their weight without a fill the printer has to lay down. */
  .notice,
  .card,
  .side-panel,
  .coupon-panel,
  .payout-box,
  .empty {
    background: white !important;
    border: 0.2mm solid black;
    box-shadow: none;
  }
  .notice {
    border-inline-start-width: 0.8mm;
    padding: 3mm;
  }

  /* Open questions print open; a closed one prints as a heading with nothing
     under it, which reads as an error on paper. */
  .faq details > :not(summary) {
    display: block;
  }
  .faq summary::after {
    display: none;
  }

  /* The hero photograph is atmosphere. On paper it is a page of toner. */
  .hero__media {
    display: none !important;
  }
  .hero,
  .hero__grid {
    display: block;
    overflow: visible;
  }
  img {
    max-inline-size: 100%;
    break-inside: avoid;
    page-break-inside: avoid;
  }

  /* An explicit opt-out any page can use. The coupon page marks its page head,
     its action buttons and its redemption guide with it, so the sheet that
     comes out of the printer is the ticket and nothing else. */
  .no-print {
    display: none !important;
  }
}