/* ==========================================================================
   ONLINE FOOTBALL SQUARES - PRINT SHEET (ps6, Sept 28 2026)
   Pairs with includes/print-sheet.php and assets/js/print-sheet.js.
   On screen the sheet stays hidden. When printing, the sheet is the only
   thing on the page: the normal layout, modals, toasts, and anything an
   ad script adds to <body> are all hidden.

   Sizing: one page on Letter or A4 in either orientation (in portrait the
   panel moves under the board). Sizes leave room for older Safari and
   iPhone, which add their own margins.
   ========================================================================== */

.print-sheet[hidden] { display: none; }

/* Print button above the grid: phones use the menu's Print Board
   instead, since that row is already full there */
@media screen and (max-width: 640px) {
    .grid-controls .ps-print-btn { display: none; }
}

/* No page size: the orientation picked in the print dialog decides, and
   the sheet lays itself out for it (landscape, full-page portrait, or the
   iPhone sizes). */
@page {
    margin: 0; /* no browser header/footer text; the sheet pads itself */
}

@media print {
    html, body {
        background: #fff !important;
        height: auto !important;
        min-height: 0 !important;
        overflow: visible !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Everything except the sheet. Only when the sheet is on the page:
       a private game's password screen has no sheet, and should print
       as the normal page rather than a blank one. */
    body:has(> .print-sheet) > *:not(.print-sheet),
    html:has(> body > .print-sheet) > :not(head):not(body) {
        display: none !important;
    }

    .print-sheet {
        display: block !important;
        --ps-cell: 0.52in;   /* square height */
        --ps-num: 0.3in;     /* number row/column */
        --ps-band: 0.28in;   /* team name bands */
        --ps-line: #8a919c;
        --ps-edge: #3f3f46;
        --ps-q1: #16a34a;
        --ps-q2: #2563eb;
        --ps-q3: #ea580c;
        --ps-q4: #9333ea;
        --ps-final: #ca8a04;
        width: 100%;
        /* no bottom padding: on a page with little room to spare it
           would spill onto a blank second page */
        padding: 0.25in 0.25in 0;
        /* lets the rules at the end tell a portrait page from a landscape
           one by the sheet's real width (print media queries can't) */
        container-type: inline-size;
        color: #111;
        font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
        break-inside: avoid;
    }

    .print-sheet *,
    .print-sheet *::before,
    .print-sheet *::after {
        box-sizing: border-box;
    }

    /* ---------- Header ---------- */

    /* Game code (and the host's title) float top right; the brand line
       sits beside them and the matchup gets the full width below */
    .ps-top-block {
        display: flow-root;
        border-bottom: 1.5pt solid #111;
        padding-bottom: 6pt;
        margin-bottom: 0.1in;
    }

    .ps-top-side {
        float: right;
        max-width: 2.6in;
        margin-left: 0.25in;
        padding-top: 2pt;
        text-align: right;
    }

    .ps-brand {
        display: flex;
        align-items: center;
        gap: 6pt;
        font-size: 10.5pt;
        font-weight: 800;
        letter-spacing: -0.01em;
    }

    .ps-logo {
        width: 16pt;
        height: 16pt;
        padding: 2.5pt;
        background: #18181b;
        border-radius: 4pt;
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr 1fr;
        gap: 1pt;
        flex-shrink: 0;
    }

    .ps-logo i {
        display: block;
        background: #6366f1;
        border-radius: 1pt;
    }

    .ps-logo i:nth-child(1) { opacity: 0.4; }
    .ps-logo i:nth-child(2) { opacity: 0.6; }
    .ps-logo i:nth-child(3) { opacity: 0.8; }

    .ps-code {
        font-size: 8pt;
        font-weight: 600;
        color: #52525b;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        white-space: nowrap;
    }

    .ps-game-title {
        margin-top: 5pt;
        font-size: 12pt;
        font-weight: 800;
        line-height: 1.2;
        color: #111;
        overflow-wrap: break-word;
        /* two lines at most */
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .ps-game-title.ps-game-title-long {
        font-size: 9pt;
        -webkit-line-clamp: 3;
    }

    .ps-code strong {
        margin-left: 4pt;
        font-size: 11pt;
        font-weight: 800;
        color: #111;
        letter-spacing: 0.04em;
        text-transform: none;
    }

    .ps-title {
        margin-top: 5pt;
        font-size: 17pt;
        font-weight: 900;
        line-height: 1.2;
        text-transform: uppercase;
        letter-spacing: 0.01em;
        text-wrap: balance;
    }

    .ps-title.ps-title-l { font-size: 14pt; }
    .ps-title.ps-title-xl { font-size: 12pt; }

    /* Each team name stays together; a long matchup breaks at "vs" */
    .ps-t1name,
    .ps-t2name {
        display: inline-block;
        text-decoration: underline;
        text-decoration-thickness: 3pt;
        text-underline-offset: 3.5pt;
        text-decoration-skip-ink: none;
    }

    .ps-t1name { text-decoration-color: var(--ps-t1); }
    .ps-t2name { text-decoration-color: var(--ps-t2); }

    .ps-vs {
        margin: 0 3pt;
        font-size: 11pt;
        font-weight: 600;
        color: #71717a;
        text-transform: lowercase;
    }

    .ps-meta {
        margin-top: 5pt;
        font-size: 9pt;
        font-weight: 500;
        color: #52525b;
    }

    /* ---------- Board + panel ---------- */

    .ps-body {
        display: flex;
        flex-wrap: wrap;             /* portrait: panel drops below the board */
        align-items: flex-start;
        justify-content: center;
        gap: 0.16in 0.3in;
    }

    /* The board takes most of the spare width (squares get wider, rows
       keep their height); the panel keeps about 3in. In portrait the
       panel wraps under the board and each fills the page width. */
    .ps-board {
        flex: 9 1 5.82in;
        min-width: 5.82in;
        display: grid;
        grid-template-columns: var(--ps-band) auto;
        grid-template-rows: var(--ps-band) auto;
        gap: 0.04in;
        break-inside: avoid;
    }

    .ps-band {
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        border-radius: 4pt;
        color: #fff;
        font-size: 9.5pt;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.12em;
        white-space: nowrap;
    }

    .ps-band span {
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .ps-band-top {
        grid-column: 2;
        grid-row: 1;
        margin-left: var(--ps-num);  /* line up over the squares */
        padding: 0 8pt;
        background: var(--ps-t2);
        color: var(--ps-t2-ink, #fff);
    }

    .ps-band-left {
        grid-column: 1;
        grid-row: 2;
        margin-top: var(--ps-num);   /* line up beside the squares */
        padding: 8pt 0;
        background: var(--ps-t1);
        color: var(--ps-t1-ink, #fff);
    }

    .ps-band-left span {
        writing-mode: vertical-rl;
        transform: rotate(180deg);
    }

    .ps-grid {
        grid-column: 2;
        grid-row: 2;
        display: grid;
        grid-template-columns: var(--ps-num) repeat(10, minmax(0, 1fr));
        grid-template-rows: var(--ps-num) repeat(10, var(--ps-cell));
    }

    .ps-num {
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 1.5pt;
        border-radius: 3pt;
        background: #eceef2;
        font-size: 12pt;
        font-weight: 800;
        color: #111;
    }

    /* Numbers not assigned yet: empty write-in boxes */
    .ps-num-empty {
        background: transparent;
        border: 0.75pt dashed #a1a1aa;
    }

    .ps-cell {
        container-type: size;  /* names size to the square's width and height */
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        padding: 1.5pt;
        background: #fff;
        border-right: 0.6pt solid var(--ps-line);
        border-bottom: 0.6pt solid var(--ps-line);
        text-align: center;
    }

    .ps-cell.ps-edge-t { border-top: 1.2pt solid var(--ps-edge); }
    .ps-cell.ps-edge-b { border-bottom: 1.2pt solid var(--ps-edge); }
    .ps-cell.ps-edge-l { border-left: 1.2pt solid var(--ps-edge); }
    .ps-cell.ps-edge-r { border-right: 1.2pt solid var(--ps-edge); }

    .ps-name {
        font-size: 9.5pt;
        font-weight: 700;
        line-height: 1.08;
        overflow-wrap: anywhere;
        hyphens: manual;
    }

    /* Sizes step down by longest word and total length (see $psSize in
       print-sheet.php), measured against the narrowest squares */
    .ps-cell.ps-m .ps-name { font-size: 8.5pt; }
    .ps-cell.ps-s .ps-name { font-size: 7.5pt; }
    .ps-cell.ps-xs .ps-name { font-size: 6.5pt; }
    .ps-cell.ps-xxs .ps-name { font-size: 6pt; }
    .ps-cell.ps-tiny .ps-name { font-size: 5.25pt; }

    /* Once the page script has measured a name (.ps-fit), use its size,
       capped so the longest word fits the square's width (100cqw) and the
       wrapped lines fit its height (100cqh). Small squares (iPhone) wrap
       sooner, so they use the narrow line count. */
    .print-sheet .ps-cell .ps-name.ps-fit {
        --ps-lines: var(--ps-lines-wide);
        font-size: min(var(--ps-size), calc(100cqw / var(--ps-ratio)), calc(100cqh / (var(--ps-lines) * 1.1)));
    }

    @container (max-width: 0.6in) {
        .print-sheet .ps-cell .ps-name.ps-fit {
            --ps-lines: var(--ps-lines-narrow);
        }
    }

    /* Winning squares: same period colors as the live board. A square
       that won more than once shows the latest period's color (later
       rules win) and lists every period in its tag. */
    .ps-cell.ps-win {
        padding-top: 7.5pt;
        color: #fff;
    }

    .ps-cell.ps-win-q1 { background: var(--ps-q1); }
    .ps-cell.ps-win-q2 { background: var(--ps-q2); }
    .ps-cell.ps-win-q3 { background: var(--ps-q3); }
    .ps-cell.ps-win-q4 { background: var(--ps-q4); }
    .ps-cell.ps-win-final { background: var(--ps-final); }

    .ps-tags {
        position: absolute;
        top: 1.5pt;
        left: 0;
        right: 0;
        font-size: 5pt;
        font-weight: 800;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        white-space: nowrap;
        overflow: hidden;
    }

    .ps-panel {
        flex: 1 1 3in;
        min-width: 3in;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(3in, 1fr));
        gap: 0.2in 0.3in;
        align-content: start;
        break-inside: avoid;
    }

    .ps-card {
        border: 1pt solid #d4d4d8;
        border-radius: 6pt;
        padding: 8pt 10pt;
        break-inside: avoid;
    }

    .ps-h {
        margin: 0 0 5pt;
        font-size: 8pt;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        color: #52525b;
    }

    .ps-table {
        width: 100%;
        border-collapse: collapse;
        font-size: 9pt;
    }

    .ps-table th {
        padding: 0 6pt 3pt 0;
        border-bottom: 0.75pt solid #d4d4d8;
        font-size: 7pt;
        font-weight: 700;
        text-align: left;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        color: #71717a;
        white-space: nowrap;
    }

    .ps-table td {
        padding: 3.5pt 6pt 3pt 0;
        border-bottom: 0.5pt solid #e4e4e7;
        vertical-align: bottom;
    }

    .ps-table tr:last-child td { border-bottom: none; }
    .ps-table td:last-child,
    .ps-table th:last-child { padding-right: 0; width: 100%; }

    .ps-period { font-weight: 800; white-space: nowrap; }
    .ps-score { font-weight: 700; white-space: nowrap; }
    .ps-winner { font-weight: 700; }

    .ps-sw {
        display: inline-block;
        width: 7pt;
        height: 7pt;
        margin-right: 4pt;
        border-radius: 2pt;
        vertical-align: -0.5pt;
        background: #a1a1aa;
    }

    .ps-sw-q1 { background: var(--ps-q1); }
    .ps-sw-q2 { background: var(--ps-q2); }
    .ps-sw-q3 { background: var(--ps-q3); }
    .ps-sw-q4 { background: var(--ps-q4); }
    .ps-sw-final { background: var(--ps-final); }

    /* Write-in lines for periods not played yet */
    .ps-blank {
        display: inline-block;
        width: 100%;
        min-width: 0.5in;
        height: 9pt;
        border-bottom: 0.75pt solid #a1a1aa;
    }

    .ps-blank-score { width: 0.55in; }

    .ps-unclaimed {
        font-style: italic;
        font-weight: 500;
        color: #71717a;
    }

    .ps-note {
        margin: 6pt 0 0;
        font-size: 7.5pt;
        line-height: 1.35;
        color: #52525b;
    }

    .ps-live {
        display: grid;
        grid-template-columns: auto 1fr;
        align-items: center;
        gap: 6pt 0.16in;
    }

    .ps-qr {
        width: 1.3in;
        height: 1.3in;
    }

    .ps-qr:empty { display: none; }

    .ps-qr svg {
        display: block;
        width: 100%;
        height: 100%;
    }

    .ps-live-title {
        font-size: 11pt;
        font-weight: 800;
    }

    .ps-live-text p {
        margin: 3pt 0 0;
        font-size: 8pt;
        line-height: 1.35;
        color: #52525b;
    }

    .ps-url {
        grid-column: 1 / -1;
        padding-top: 5pt;
        border-top: 0.75pt solid #e4e4e7;
        font-size: 10pt;
        font-weight: 800;
        color: #111;
        text-align: center;
        overflow-wrap: break-word;
    }

    .ps-url span {
        display: block;
        margin-bottom: 1pt;
        font-size: 7.5pt;
        font-weight: 600;
        color: #71717a;
    }

    .ps-foot {
        grid-column: 1 / -1;
        margin: 0;
        font-size: 7.5pt;
        text-align: center;
        color: #71717a;
    }

    /* ---------- Tight pages ----------
       Chrome and Firefox print with no margins. iPhone Safari ignores
       that: it prints portrait by default (or landscape if picked)
       with its own margins, header and footer, and scales the page, which
       leaves roughly 6.4in x 8.5in (portrait) or 8.8in x 6.1in (landscape)
       for the sheet. Its pages are narrower, so the sheet's printed width
       tells them apart: shorter rows and a tighter panel there. */
    @container (max-width: 10in) {
        .ps-top-block {
            margin-bottom: 0.06in;
        }
        .ps-top-side {
            max-width: 2.4in;
        }
        .ps-game-title,
        .ps-game-title.ps-game-title-long {
            font-size: 9pt;
            -webkit-line-clamp: 2;
        }
        .ps-title.ps-title-l { font-size: 12pt; }
        .ps-title.ps-title-xl { font-size: 11pt; }
        .ps-body {
            --ps-band: 0.24in;
            --ps-num: 0.27in;
            gap: 0.16in 0.2in;
        }
        .ps-board {
            flex-basis: 5.2in;
            min-width: 5.2in;
        }
        .ps-panel {
            flex-basis: 2.8in;
            min-width: 2.8in;
            grid-template-columns: repeat(auto-fit, minmax(2.8in, 1fr));
            gap: 0.16in 0.3in;
        }
        .ps-grid {
            grid-template-rows: var(--ps-num) repeat(10, 0.42in);
        }
        .ps-qr {
            width: 0.95in;
            height: 0.95in;
        }
        .ps-table td {
            padding-top: 2.5pt;
            padding-bottom: 2pt;
        }
    }

    /* Portrait-width pages: plain stacking instead of flexbox, so if the
       page runs short Safari can move the panel to a second page rather
       than pushing the whole board off the first one */
    @container (max-width: 8.4in) {
        .ps-body {
            display: block;
        }
        .ps-panel {
            margin-top: 0.16in;
        }
        .ps-card .ps-note {
            display: none;
        }
        /* host's title on one line, and the matchup starts below it so it
           gets the full width instead of wrapping beside it */
        .ps-game-title,
        .ps-game-title.ps-game-title-long {
            -webkit-line-clamp: 1;
        }
        .ps-title {
            clear: right;
        }
    }

    /* Full-size portrait paper (desktop and Android, which honor the
       no-margin page): there's plenty of height, so taller
       squares, the full QR code and the how-to line come back. iPhone
       portrait is narrower than this range and keeps the rules above. */
    @container (min-width: 7in) and (max-width: 8.4in) {
        .ps-grid {
            grid-template-rows: var(--ps-num) repeat(10, 0.56in);
        }
        .ps-qr {
            width: 1.2in;
            height: 1.2in;
        }
        .ps-card .ps-note {
            display: block;
        }
    }
}