/*
 * Printable bracket drawing (includes/print-bracket.php).
 * Screen: scrolls sideways inside .pb-scroll when wider than the page.
 * Print: fits one landscape page. Connector lines are CSS borders, so they
 * print in black on any printer without "background graphics" turned on.
 */

.pb-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
}

.pb {
    --pb-line: 1.25px solid #1f2937;
    --pb-gap: 12px;
    --pb-col: 150px;
    --pb-col-min: var(--pb-col);
    display: grid;
    align-items: stretch;
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: var(--pb-font, 13px);
    color: #111827;
    min-width: min-content;
    font-variant-numeric: tabular-nums;
}
.pb--split .pb-side { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); position: relative; min-width: 0; }
.pb--sided { padding-top: 22px; }
/* Right half mirrors the left: round 1 on the far right */
.pb--split .pb-side--right { direction: rtl; }
.pb--split .pb-side--right > * { direction: ltr; }

.pb-round {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.pb-round-name {
    height: 24px;
    font-size: 11px;
    font-weight: 600;
    color: #475569;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0 4px;
}
.pb-side-name {
    position: absolute;
    top: -20px;
    left: 0;
    right: 0;
    text-align: center;
    font-size: 12px;
    font-weight: 700;
    color: #1e3a5f;
}
.pb-round-body {
    height: var(--pb-body, 480px);
    display: flex;
    flex-direction: column;
    position: relative;
}
.pb-pair {
    flex: 2 1 0;
    display: flex;
    flex-direction: column;
    position: relative;
    min-height: 0;
}
.pb-slot {
    flex: 1 1 0;
    min-height: 0;
    display: flex;
    align-items: center;
    position: relative;
    padding: 0 var(--pb-gap);
}

/* Match box */
.pb-match {
    width: 100%;
    border: var(--pb-line);
    background: #fff;
    border-radius: 3px;
    position: relative;
    z-index: 1;
}
.pb-team {
    display: flex;
    align-items: center;
    gap: 5px;
    height: var(--pb-row, 24px);
    padding: 0 5px;
    line-height: 1;
    white-space: nowrap;
}
.pb-team + .pb-team { border-top: 1px solid #94a3b8; }
.pb-seed {
    flex: 0 0 auto;
    min-width: 1.3em;
    font-size: 0.82em;
    color: #64748b;
    text-align: right;
}
.pb-name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pb-score { font-weight: 700; margin-left: auto; padding-left: 4px; }
.pb-bye {
    margin-left: auto;
    font-size: 0.78em;
    color: #64748b;
    font-style: italic;
}
.pb-mark { margin-left: 4px; font-weight: 700; }
.pb-team.is-winner .pb-name { font-weight: 700; }
.pb-team.is-loser { color: #94a3b8; }
.pb-team.is-loser .pb-name { text-decoration: line-through; text-decoration-color: #cbd5e1; }
.pb-team.pick-correct .pb-mark { color: #047857; }
.pb-team.pick-wrong .pb-name { text-decoration: line-through; color: #9f1239; }
.pb-team.pick-wrong .pb-mark { color: #9f1239; }
.pb-team.pick-pending .pb-name,
.pb-team.pick-correct .pb-name { font-weight: 700; }
.pb-match--bye { border-style: dashed; }

/* Connector lines, left-to-right (left half and the linear layout) */
.pb--linear .pb-slot::after,
.pb-side--left .pb-slot::after {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    width: var(--pb-gap);
    border-top: var(--pb-line);
}
.pb--linear .pb-pair::after,
.pb-side--left .pb-pair::after {
    content: "";
    position: absolute;
    right: 0;
    top: 25%;
    bottom: 25%;
    border-right: var(--pb-line);
}
.pb--linear .pb-round + .pb-round .pb-slot::before,
.pb-side--left .pb-round + .pb-round .pb-slot::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: var(--pb-gap);
    border-top: var(--pb-line);
}
.pb--linear .pb-round--champion .pb-slot::after { display: none; }

/* Mirrored for the right half */
.pb-side--right .pb-slot::after {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: var(--pb-gap);
    border-top: var(--pb-line);
}
.pb-side--right .pb-pair::after {
    content: "";
    position: absolute;
    left: 0;
    top: 25%;
    bottom: 25%;
    border-left: var(--pb-line);
}
.pb-side--right .pb-round + .pb-round .pb-slot::before {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    width: var(--pb-gap);
    border-top: var(--pb-line);
}

/* Center column: final, with the champion line above it */
.pb-center { min-width: 0; }
.pb-center .pb-round-name { color: #1e3a5f; font-weight: 700; }
.pb-center .pb-round-body { justify-content: center; padding: 0 var(--pb-gap); }
.pb-center .pb-round-body::before,
.pb-center .pb-round-body::after {
    content: "";
    position: absolute;
    top: 50%;
    width: var(--pb-gap);
    border-top: var(--pb-line);
}
.pb-center .pb-round-body::before { left: 0; }
.pb-center .pb-round-body::after { right: 0; }
.pb-final { position: relative; }
.pb-final .pb-match { border-width: 2px; }
.pb-final .pb-champion {
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(100% + 14px);
}

.pb-champion {
    width: 100%;
    border: 2px solid #1e3a5f;
    border-radius: 4px;
    padding: 5px 8px 6px;
    background: #fff;
    text-align: center;
}
.pb-champion-label {
    display: block;
    font-size: 0.72em;
    font-weight: 700;
    color: #1e3a5f;
    letter-spacing: 0.02em;
}
.pb-champion-name {
    display: block;
    min-height: 1.35em;
    margin-top: 3px;
    font-weight: 800;
    font-size: 1.1em;
    border-bottom: 1px solid #94a3b8;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Sheet header: title left, QR and address right */
.pb-sheet {
    background: #fff;
    color: #111827;
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
.pb-sheet-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    padding-bottom: 12px;
    margin-bottom: 26px;
    border-bottom: 2px solid #1e3a5f;
}
.pb-sheet-h { font-size: 22px; font-weight: 800; line-height: 1.15; color: #0f172a; }
.pb-sheet-sub { margin-top: 4px; font-size: 13px; color: #475569; }
.pb-sheet-name { margin-top: 10px; font-size: 13px; color: #334155; display: flex; align-items: flex-end; gap: 8px; }
.pb-write-line { display: inline-block; width: 220px; border-bottom: 1px solid #64748b; height: 1em; }
.pb-sheet-qr { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.pb-sheet-qr .qr-code { width: 100px; height: 100px; display: block; }
.pb-sheet-qr-text { max-width: 260px; }
.pb-sheet-qr-cap { font-size: 12px; font-weight: 600; color: #334155; line-height: 1.3; }
.pb-sheet-url { margin-top: 4px; font-size: 13px; font-weight: 700; color: #0f172a; white-space: nowrap; }
.pb-sheet-foot {
    margin-top: 14px;
    font-size: 10px;
    color: #64748b;
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

@media screen and (max-width: 640px) {
    .pb-sheet-head { flex-direction: column; }
    .pb-sheet-qr .qr-code { width: 72px; height: 72px; }
}

/* ---------- Print: one landscape page, nothing but the sheet ---------- */
@page { size: letter landscape; margin: 0.35in; }

@media print {
    html, body { background: #fff !important; margin: 0 !important; }
    .pb-sheet { break-inside: avoid; }
    .pb--sided { padding-top: 0.2in; }
    .no-print, .header, .footer, .skip-link, .toast-region, .ad-container { display: none !important; }
    .print-area { margin: 0 !important; padding: 0 !important; box-shadow: none !important; border: 0 !important; max-width: none !important; }
    .pb-scroll { overflow: visible; }
    .pb {
        --pb-col-min: 0px;
        --pb-line: 1px solid #000;
        --pb-gap: 8px;
        min-width: 0;
        width: 100%;
        font-size: var(--pb-print-font, 9pt);
    }
    .pb-round, .pb-center { min-width: 0; }
    .pb-round-body { height: var(--pb-print-body, 5.7in); }
    .pb-team { height: var(--pb-print-row, 0.24in); padding: 0 3px; gap: 3px; }
    .pb-round-name { height: 0.2in; font-size: 7.5pt; color: #000; }
    .pb-side-name { top: -0.19in; font-size: 8pt; color: #000; }
    .pb-sheet-head { margin-bottom: 0.2in; padding-bottom: 0.08in; border-bottom-color: #000; }
    .pb-sheet-h { font-size: 16pt; }
    .pb-sheet-sub, .pb-sheet-name { font-size: 9pt; }
    .pb-sheet-qr .qr-code { width: 0.95in; height: 0.95in; }
    .pb-sheet-qr-cap { font-size: 8pt; }
    .pb-sheet-url { font-size: 9pt; }
    .pb-sheet-foot { margin-top: 0.08in; font-size: 7pt; }
    .pb-team.is-loser, .pb-seed, .pb-bye { color: #555; }
}

/* Long names (artwork titles, full team names): wrap to two lines instead of
   cutting off. Only used when there's room (32 slots or fewer). */
.pb--long .pb-team { height: auto; min-height: var(--pb-row, 24px); padding-top: 3px; padding-bottom: 3px; }
.pb--long .pb-name {
    white-space: normal;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    line-height: 1.15;
    overflow: hidden;
}
@media print {
    .pb--long { font-size: min(var(--pb-print-font, 9pt), 7.6pt); }
    .pb--long .pb-team { height: auto; min-height: var(--pb-print-row, 0.24in); padding-top: 1.5px; padding-bottom: 1.5px; }
}