/**
 * Print rules for ticket receipts.
 *
 * Loaded on every page with media="print", so a retailer can print from any
 * screen in the terminal without the receipt layout being a separate route.
 *
 * Two targets are handled:
 *   .receipt   the 80mm thermal receipt rendered by ticket-print.php
 *   everything else  the app's own print, used for a reprint of a ticket page
 *
 * The page is sized 80mm wide with automatic height, which is what an ESC/POS
 * roll expects. On an A4 browser print the same sheet simply comes out narrow
 * and left-aligned, which is still readable.
 */

@page {
    size: 80mm auto;
    margin: 4mm 3mm;
}

@media print {
    /* The preview mat is a screen affordance only. */
    .ticket-preview {
        min-height: 0;
        padding: 0;
        background: none;
    }

    /* Everything that is not the receipt itself. */
    .app-header,
    .tabbar,
    .toast-stack,
    .install-banner,
    .flash-stack,
    .promo-banner,
    .modal,
    .skip-link,
    .no-print,
    [data-sheet-overlay] {
        display: none !important;
    }

    html,
    body {
        background: #fff !important;
        color: #000 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .shell,
    .shell--print {
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        box-shadow: none !important;
    }

    /* Receipt typography: monospace keeps the number columns aligned on a
       thermal head, where proportional fonts drift. */
    .receipt {
        width: 72mm;
        margin: 0 auto;
        font: 10pt/1.35 ui-monospace, SFMono-Regular, "Courier New", monospace;
        color: #000;
        background: #fff;
    }

    /* ------------------------------------------------------------------
       5. Counter ticket

       Mirrors the NLA 5/90 counter ticket the reference supplied, restyled
       for this app. Monospace throughout, because the paired label/value
       rows only line up on a thermal head with a fixed-pitch font, and
       everything is rules and text rather than images so it survives a
       203dpi print.
       ------------------------------------------------------------------ */
    .ticket {
        width: 72mm;
        margin: 0 auto;
        padding: 4mm 3mm;
        font: 10pt/1.4 ui-monospace, SFMono-Regular, "Courier New", monospace;
        color: #000;
        background: #fff;
        /* The reference uses a torn/dashed edge top and bottom to read as
           thermal paper. Dashes rather than a solid rule, so it matches the
           dashed dividers inside. */
        border-top: 3px dashed #555;
        border-bottom: 3px dashed #555;
    }

    .ticket__header {
        text-align: center;
        margin-bottom: 3mm;
    }

    /* Oval wordmark. A border-radius pair flattens the shape into the
       ellipse the reference uses, rather than a plain rounded box. */
    .ticket__mark {
        display: inline-block;
        position: relative;
        padding: 1.5mm 7mm;
        margin-bottom: 1.5mm;
        border: 2px solid #000;
        border-radius: 50% / 40%;
    }

    .ticket__wordmark {
        font-size: 22pt;
        font-weight: 700;
        letter-spacing: 0.12em;
    }

    .ticket__star {
        position: absolute;
        top: -2mm;
        right: 40%;
        font-size: 10pt;
    }

    .ticket__operator {
        margin: 0;
        font-size: 12pt;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.04em;
    }

    .ticket__slogan {
        margin: 0.5mm 0 2mm;
        font-size: 9pt;
        font-style: italic;
    }

    .ticket__game {
        margin: 0;
        font-size: 14pt;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.04em;
    }

    .ticket__game-sub {
        margin: 0;
        font-size: 11pt;
        font-weight: 700;
    }

    .ticket__divider {
        border-top: 1px dashed #000;
        margin: 2mm 0;
    }

    /* Paired label/value rows. `display: flex` with a gap, rather than a
       borderless table, so a long value wraps under itself instead of
       squeezing the label. */
    .ticket__rows {
        margin: 0;
    }

    .ticket__row {
        display: flex;
        justify-content: space-between;
        gap: 4mm;
        font-size: 10pt;
    }

    .ticket__row dt,
    .ticket__row dd {
        margin: 0;
    }

    /* Draw No / Draw Date is a two-column header row in the reference: the
       values sit on the row below their labels. */
    .ticket__row--head {
        margin-top: 0.5mm;
        font-weight: 700;
    }

    .ticket__bet-type {
        margin: 1mm 0 0;
        font-size: 14pt;
        font-weight: 700;
        text-transform: uppercase;
    }

    /* The numbers are the focal block, so they stay the largest type on the
       ticket, but a Perm now prints its whole selection as one hyphen-joined
       string rather than one combination per row, so the size comes down to
       let a long selection sit on a single line. Still a shade larger than the
       game name above it. */
    .ticket__numbers {
        margin: 1.5mm 0;
        font-size: 15pt;
        font-weight: 700;
        text-align: center;
        letter-spacing: 0.03em;
    }

    /* A multi-selection slip prints one block per selection, each with its own
       game type, numbers and arithmetic, so a customer holding one sheet can see
       every part they paid for. The blocks are separated rather than run
       together, because a Perm 3 of six balls already fills most of a receipt. */
    .ticket__bet {
        padding-bottom: 1.5mm;
        margin-bottom: 1.5mm;
        border-bottom: 0.25mm dashed #999;
    }

    .ticket__bet:last-child {
        padding-bottom: 0;
        margin-bottom: 0;
        border-bottom: 0;
    }

    /* The per-selection arithmetic is deliberately smaller than the numbers: it
       is a supporting figure, and the numbers are what gets read off the paper. */
    .ticket__bet-stake {
        margin: 1mm 0 0;
        font-size: 10pt;
        text-align: center;
        color: #333;
    }

    .ticket__bet-stake strong {
        color: #000;
        font-size: 11pt;
    }

    .ticket__barcode-block {
        margin: 3mm 0;
        text-align: center;
    }

/* Drawn as SVG rather than set in a barcode font, because a browser
       cannot be relied on to have one. The viewBox is in bar units, so
       preserveAspectRatio="none" lets the bars stretch to the paper width
       while each keeps its width ratio, which is what a Code 39 scanner
       needs to read it. */
    .ticket__barcode {
        display: block;
        width: 100%;
        height: 16mm;
    }

    .ticket__barcode-caption {
        margin: 1mm 0 0;
        font-size: 9pt;
        letter-spacing: 0.08em;
    }

    .ticket__barcode-stars {
        display: block;
    }

.ticket__footer {
    text-align: center;
    font-size: 8pt;
    font-weight: 700;
}

    .ticket__footer p {
        margin: 0 0 1mm;
    }

    /* The screen preview centres the receipt on a tinted mat so it reads as a
       slip of paper. The tint sits on the wrapper, not the ticket, so it is
       never printed: thermal paper is white and a dark stock would waste
       toner. */
    .ticket-preview {
        min-height: 100vh;
        display: flex;
        justify-content: center;
        align-items: flex-start;
        padding: 8mm 0;
    }

    .receipt__head {
        text-align: center;
        border-bottom: 1px dashed #000;
        padding-bottom: 2mm;
        margin-bottom: 2mm;
    }

    .receipt__brand {
        margin: 0;
        font-size: 13pt;
        font-weight: 700;
        letter-spacing: 0.06em;
    }

    .receipt__sub {
        margin: 1mm 0 0;
        font-size: 8pt;
    }

    .receipt__meta {
        margin: 0 0 2mm;
        font-size: 9pt;
    }

    .receipt__numbers {
        width: 100%;
        border-collapse: collapse;
        margin-bottom: 2mm;
    }

    .receipt__numbers td {
        padding: 0.6mm 0;
        font-size: 11pt;
        vertical-align: top;
    }

    .receipt__line-no {
        width: 6mm;
        font-size: 8pt;
        color: #333;
    }

    .receipt__balls {
        font-weight: 700;
        letter-spacing: 0.08em;
        word-spacing: 0.25em;
    }

    .receipt__facts {
        margin: 0 0 2mm;
        border-top: 1px dashed #000;
        padding-top: 1.5mm;
    }

    .receipt__facts > div {
        display: flex;
        justify-content: space-between;
        gap: 4mm;
        font-size: 9.5pt;
    }

    .receipt__facts dt,
    .receipt__facts dd {
        margin: 0;
    }

    .receipt__facts dd {
        font-weight: 700;
        text-align: right;
    }

    .receipt__result {
        margin: 0 0 2mm;
        padding: 1.5mm 0;
        border-top: 1px dashed #000;
        border-bottom: 1px dashed #000;
        text-align: center;
        font-size: 10pt;
    }

    .receipt__code {
        margin: 0 0 2mm;
        text-align: center;
        font-size: 13pt;
        font-weight: 700;
        letter-spacing: 0.12em;
    }

    .receipt__foot {
        border-top: 1px dashed #000;
        padding-top: 1.5mm;
        font-size: 7.5pt;
        text-align: center;
    }

    .receipt__foot p {
        margin: 0 0 1mm;
    }

    /* A plain app page printed by accident: strip it to readable text rather
       than emitting dark-mode cards onto a printer. */
    body:not(.is-print) .section,
    body:not(.is-print) .card {
        border: 0 !important;
        background: #fff !important;
        color: #000 !important;
        box-shadow: none !important;
        break-inside: avoid;
    }

    a[href]::after {
        content: "";
    }
}

/* Screen preview.
 *
 * These rules used to sit inside the @media print block above, wrapped in their
 * own @media screen. Nesting the two ANDs the conditions, so "print AND screen"
 * is never true and the preview rendered completely unstyled on screen. They are
 * screen-only, so they live outside. */
@media screen {
    .ticket-preview {
        background: #f0f4f8;
    }

    /* 320px is the paper width. Without border-box the padding would be added
       to it, making the preview 360px wide and visibly wider than what prints. */
    .ticket {
        width: 320px;
        box-sizing: border-box;
        padding: 20px;
        font-size: 13px;
        line-height: 1.4;
        background: #fff;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
    }

    .ticket__wordmark  { font-size: 28px; }
    .ticket__operator  { font-size: 13px; }
    .ticket__slogan    { font-size: 11px; }
    .ticket__game      { font-size: 16px; }
    .ticket__game-sub  { font-size: 15px; }
    .ticket__row       { font-size: 13px; }
    .ticket__bet-type  { font-size: 16px; }
    .ticket__numbers   { font-size: 15px; }
    .ticket__bet-stake { font-size: 11px; }
    .ticket__barcode   { height: 48px; }
    .ticket__footer    { font-size: 11px; }
}