/* Printable Pack Builder (page-specific)
   - Used by /sudoku-printable/
   - Renders printable grids from JSON dataset under /data/sudoku/
*/
:root {
    --pp-border: var(--nb-border, #222);
    --pp-border-w: var(--nb-border-w, 2.5px);
    --pp-bg: var(--nb-card, #fff);
    --pp-muted: rgba(0, 0, 0, 0.65);
}

.ss-printable-pack .game-area {
    display: none;
}

.pp-builder {
    margin: 24px auto;
    width: min(1100px, calc(100% - 32px));
    max-width: 1100px !important;
}

.pp-builder__header p {
    color: var(--pp-muted);
    margin-top: 0.6em;
}

.pp-builder__form {
    margin-top: 16px;
}

.pp-form-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(220px, 1fr));
    gap: 14px;
    align-items: end;
}

@media (max-width: 980px) {
    .pp-form-grid {
        grid-template-columns: repeat(2, minmax(220px, 1fr));
    }
}

@media (max-width: 600px) {
    .pp-form-grid {
        grid-template-columns: 1fr;
    }
}

.pp-field label {
    font-weight: 700;
    margin-bottom: 6px;
}

.pp-field select,
.pp-field input[type="number"] {
    width: 100%;
}

.pp-field label.pp-checkbox {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: nowrap;
    gap: 10px;
    width: auto;
    max-width: 100%;
    padding: 10px 12px;
    border: var(--pp-border-w) solid var(--pp-border);
    border-radius: var(--nb-radius, 12px);
    background: var(--pp-bg);
    box-shadow: var(--nb-shadow-sm, 3px 3px 0 var(--pp-border));
    font-size: 0.95rem;
    white-space: nowrap; /* keep checkbox + label on one line */
    margin-bottom: 0; /* override .pp-field label margin */
}

.pp-field label.pp-checkbox span {
    white-space: nowrap;
    min-width: 0;
}

@media (max-width: 420px) {
    .pp-field label.pp-checkbox {
        font-size: 0.9rem;
        padding: 8px 10px;
        gap: 8px;
    }
}

.pp-field label.pp-checkbox input {
    width: 18px;
    height: 18px;
}

.pp-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 14px;
    align-items: center;
}

.pp-actions .pp-field--inline {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
}

.pp-actions .pp-field--inline label {
    margin: 0;
    font-weight: 700;
    white-space: nowrap;
}

.pp-actions .pp-field--inline select {
    width: auto;
}

.pp-actions .nb-btn {
    text-decoration: none;
}

.pp-status {
    margin-top: 12px;
    padding: 10px 12px;
    border: var(--pp-border-w) solid var(--pp-border);
    border-radius: var(--nb-radius, 12px);
    background: #fffdf0;
    box-shadow: var(--nb-shadow-sm, 3px 3px 0 var(--pp-border));
    font-size: 0.95rem;
}

.pp-status:empty {
    display: none;
}

.pp-preview {
    margin-top: 18px;
}

.pp-preview:empty {
    display: none;
}

/* --- Printable layout --- */
.pp-print-root {
    background: #fff;
    color: #111;
}

.pp-page {
    padding: 0;
    break-after: page;
    page-break-after: always;
    break-inside: avoid;
    page-break-inside: avoid;
}

.pp-page:last-child {
    break-after: auto;
    page-break-after: auto;
}

.pp-page__header,
.pp-page__footer {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: baseline;
    font-size: 12px;
    color: rgba(0, 0, 0, 0.78);
    margin: 0 0 10px;
}

.pp-page__footer {
    margin: 10px 0 0;
}

.pp-page__brand {
    font-weight: 800;
    color: #111;
}

.pp-page__meta {
    color: rgba(0, 0, 0, 0.78);
}

.pp-page__url,
.pp-page__num {
    color: rgba(0, 0, 0, 0.7);
}

.pp-page__content {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Sheets should use the full page width (avoid shrink-wrapped centered grids). */
.pp-page--sheet .pp-page__content {
    display: block;
}

.pp-page--sheet .pp-grid-wrap {
    width: 100%;
}

.pp-sheet {
    width: 100%;
    padding: 14px 0;
    break-after: page;
    page-break-after: always;
}

.pp-sheet:last-child {
    break-after: auto;
    page-break-after: auto;
}

.pp-sheet__title {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: baseline;
    margin: 0 0 10px;
    font-size: 14px;
    color: rgba(0, 0, 0, 0.78);
}

.pp-sheet__title strong {
    color: #111;
}

.pp-grid-wrap {
    display: grid;
    gap: 14px;
}

.pp-layout-1 .pp-grid-wrap {
    grid-template-columns: 1fr;
}

.pp-layout-2 .pp-grid-wrap {
    grid-template-columns: 1fr 1fr;
}

.pp-layout-3 .pp-grid-wrap {
    grid-template-columns: 1fr 1fr 1fr;
}

.pp-layout-4 .pp-grid-wrap {
    grid-template-columns: 1fr 1fr;
}

.pp-layout-6 .pp-grid-wrap {
    grid-template-columns: 1fr 1fr 1fr;
}

.pp-layout-9 .pp-grid-wrap {
    grid-template-columns: 1fr 1fr 1fr;
}

/* Screen preview sizing: make the on-page preview readable.
   Note: sheet HTML may set CSS variables inline; use !important so preview is actually scalable on screen.
   Print sizing is controlled separately in @media print. */
@media screen {
    .pp-page--sheet {
        --pp-grid-width: 100% !important;
    }

    .pp-page--sheet.pp-layout-2,
    .pp-page--sheet.pp-layout-4 {
        --pp-cell-font-size: 16px !important;
    }

    .pp-page--sheet.pp-layout-3 {
        --pp-cell-font-size: 13px !important;
    }

    .pp-page--sheet.pp-layout-6 {
        --pp-cell-font-size: 11.5px !important;
    }

    .pp-page--sheet.pp-layout-9 {
        --pp-cell-font-size: 9.5px !important;
    }
}

.pp-puzzle {
    border: var(--pp-border-w) solid var(--pp-border);
    border-radius: 10px;
    padding: 10px;
}

.pp-puzzle__meta {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: baseline;
    margin: 0 0 8px;
    font-size: 12.5px;
    color: rgba(0, 0, 0, 0.75);
}

.pp-puzzle__meta strong {
    color: #111;
}

.pp-grid {
    display: grid;
    grid-template-columns: repeat(9, 1fr); /* default */
    border: var(--pp-border-w) solid var(--pp-border);
    background: #fff;
    aspect-ratio: 1 / 1;
    width: var(--pp-grid-width, min(520px, 100%));
    margin: 0 auto;
    break-inside: avoid;
    page-break-inside: avoid;
}

.pp-grid--4 {
    grid-template-columns: repeat(4, 1fr);
    width: var(--pp-grid-width, min(420px, 100%));
}

.pp-grid--6 {
    grid-template-columns: repeat(6, 1fr);
    width: var(--pp-grid-width, min(480px, 100%));
}

.pp-grid--9 {
    grid-template-columns: repeat(9, 1fr);
}

.pp-grid--x {
    grid-template-columns: repeat(9, 1fr);
}

.pp-grid--killer {
    grid-template-columns: repeat(9, 1fr);
}

.pp-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    font-weight: 700;
    font-size: var(--pp-cell-font-size, 18px);
    line-height: 1;
    border-right: 1px solid rgba(0, 0, 0, 0.55);
    border-bottom: 1px solid rgba(0, 0, 0, 0.55);
    user-select: none;
}

.pp-cell--empty {
    color: transparent;
}

/* --- 9×9 separators --- */
.pp-grid--9 .pp-cell:nth-child(9n) {
    border-right: none;
}

.pp-grid--9 .pp-cell:nth-child(n+73) {
    border-bottom: none;
}

/* subgrid separators (columns 3 and 6) */
.pp-grid--9 .pp-cell:nth-child(9n+3),
.pp-grid--9 .pp-cell:nth-child(9n+6) {
    border-right-width: var(--pp-border-w);
    border-right-color: var(--pp-border);
}

/* subgrid separators (rows 3 and 6) */
.pp-grid--9 .pp-cell:nth-child(n+19):nth-child(-n+27),
.pp-grid--9 .pp-cell:nth-child(n+46):nth-child(-n+54) {
    border-bottom-width: var(--pp-border-w);
    border-bottom-color: var(--pp-border);
}

/* --- 4×4 separators (2×2 boxes) --- */
.pp-grid--4 .pp-cell:nth-child(4n) {
    border-right: none;
}

.pp-grid--4 .pp-cell:nth-child(n+13) {
    border-bottom: none;
}

/* subgrid separators (column 2) */
.pp-grid--4 .pp-cell:nth-child(4n+2) {
    border-right-width: var(--pp-border-w);
    border-right-color: var(--pp-border);
}

/* subgrid separators (row 2) */
.pp-grid--4 .pp-cell:nth-child(n+5):nth-child(-n+8) {
    border-bottom-width: var(--pp-border-w);
    border-bottom-color: var(--pp-border);
}

/* --- 6×6 separators (2×3 boxes) --- */
.pp-grid--6 .pp-cell:nth-child(6n) {
    border-right: none;
}

.pp-grid--6 .pp-cell:nth-child(n+31) {
    border-bottom: none;
}

/* subgrid separators (column 3) */
.pp-grid--6 .pp-cell:nth-child(6n+3) {
    border-right-width: var(--pp-border-w);
    border-right-color: var(--pp-border);
}

/* subgrid separators (rows 2 and 4) */
.pp-grid--6 .pp-cell:nth-child(n+7):nth-child(-n+12),
.pp-grid--6 .pp-cell:nth-child(n+19):nth-child(-n+24) {
    border-bottom-width: var(--pp-border-w);
    border-bottom-color: var(--pp-border);
}

/* --- X-Sudoku diagonals --- */
.pp-grid--x .pp-cell--diag-major,
.pp-grid--x .pp-cell--diag-minor {
    background: rgba(255, 165, 0, 0.12);
    position: relative;
    box-shadow: inset 0 0 0 2px rgba(255, 165, 0, 0.35);
}

.pp-grid--x .pp-cell--diag-both {
    background: rgba(255, 165, 0, 0.2);
    position: relative;
    box-shadow: inset 0 0 0 2.5px rgba(255, 165, 0, 0.55);
}

/* --- Killer cages --- */
/* Match the in-game approach: inset dashed lines that do not fight the grid's own separators. */
.pp-grid--killer .pp-cell {
    position: relative;

    /* Inset cage lines so they don't overlap the board grid lines (match /killer-sudoku/ feel). */
    --pp-killer-line-edge-inset: 3px;

    /* IMPORTANT: printable cells can be much smaller than the in-game board,
       so keep gaps tight or the cage border becomes nearly invisible. */
    --pp-killer-line-side-gap: 3px;
    --pp-killer-line-turn-gap: 2px;

    --pp-killer-line-width: 1.15px;
    --pp-killer-line-color: rgba(34, 34, 34, 0.78);

    /* Dash pattern (used by the repeating-linear-gradients).
       Print/PDF rendering can look heavier, so @media print overrides these. */
    --pp-killer-dash-on: 3px;
    --pp-killer-dash-period: 6px;

    /* line on/off toggles (0px means "not drawn") */
    --pp-killer-top-h: 0px;
    --pp-killer-right-w: 0px;
    --pp-killer-bottom-h: 0px;
    --pp-killer-left-w: 0px;

    /* per-side gaps so turns can meet like the real game overlay */
    --pp-killer-top-start-gap: var(--pp-killer-line-side-gap);
    --pp-killer-top-end-gap: var(--pp-killer-line-side-gap);
    --pp-killer-bottom-start-gap: var(--pp-killer-line-side-gap);
    --pp-killer-bottom-end-gap: var(--pp-killer-line-side-gap);

    --pp-killer-left-start-gap: var(--pp-killer-line-side-gap);   /* top gap */
    --pp-killer-left-end-gap: var(--pp-killer-line-side-gap);     /* bottom gap */
    --pp-killer-right-start-gap: var(--pp-killer-line-side-gap);  /* top gap */
    --pp-killer-right-end-gap: var(--pp-killer-line-side-gap);    /* bottom gap */

    background-repeat: no-repeat;
    background-image:
        repeating-linear-gradient(to right,
            var(--pp-killer-line-color) 0 var(--pp-killer-dash-on),
            transparent var(--pp-killer-dash-on) var(--pp-killer-dash-period)),
        repeating-linear-gradient(to bottom,
            var(--pp-killer-line-color) 0 var(--pp-killer-dash-on),
            transparent var(--pp-killer-dash-on) var(--pp-killer-dash-period)),
        repeating-linear-gradient(to right,
            var(--pp-killer-line-color) 0 var(--pp-killer-dash-on),
            transparent var(--pp-killer-dash-on) var(--pp-killer-dash-period)),
        repeating-linear-gradient(to bottom,
            var(--pp-killer-line-color) 0 var(--pp-killer-dash-on),
            transparent var(--pp-killer-dash-on) var(--pp-killer-dash-period));

    /* top, right, bottom, left */
    background-position:
        left calc(var(--pp-killer-line-edge-inset) + var(--pp-killer-top-start-gap)) top var(--pp-killer-line-edge-inset),
        right var(--pp-killer-line-edge-inset) top calc(var(--pp-killer-line-edge-inset) + var(--pp-killer-right-start-gap)),
        left calc(var(--pp-killer-line-edge-inset) + var(--pp-killer-bottom-start-gap)) bottom var(--pp-killer-line-edge-inset),
        left var(--pp-killer-line-edge-inset) top calc(var(--pp-killer-line-edge-inset) + var(--pp-killer-left-start-gap));

    background-size:
        calc(
            100% - var(--pp-killer-line-edge-inset) - var(--pp-killer-line-edge-inset)
            - var(--pp-killer-top-start-gap) - var(--pp-killer-top-end-gap)
        ) var(--pp-killer-top-h),
        var(--pp-killer-right-w) calc(
            100% - var(--pp-killer-line-edge-inset) - var(--pp-killer-line-edge-inset)
            - var(--pp-killer-right-start-gap) - var(--pp-killer-right-end-gap)
        ),
        calc(
            100% - var(--pp-killer-line-edge-inset) - var(--pp-killer-line-edge-inset)
            - var(--pp-killer-bottom-start-gap) - var(--pp-killer-bottom-end-gap)
        ) var(--pp-killer-bottom-h),
        var(--pp-killer-left-w) calc(
            100% - var(--pp-killer-line-edge-inset) - var(--pp-killer-line-edge-inset)
            - var(--pp-killer-left-start-gap) - var(--pp-killer-left-end-gap)
        );
}

/* Optional: Double cage borders (Killer) are handled by JS by letting each cage draw a closed outline.
   That creates "two dashed lines with a gap" on shared borders (no CSS thickening layer needed). */

.pp-grid--killer .pp-cell[data-sum]::before {
    content: attr(data-sum);
    position: absolute;
    top: 1px;
    left: 2px;
    min-width: 1.1em;
    padding: 0 0.18em;
    border-radius: 0.35em;
    font-size: 0.56em; /* scales with the cell font-size */
    font-weight: 800;
    line-height: 1.05;
    color: rgb(18, 18, 18);
    background-color: rgb(255, 252, 245);
    box-shadow: 0 0 0 1px rgb(215, 206, 188);
    pointer-events: none;
    user-select: none;
}

/* In solutions, digits are larger/heavier; slightly shrink/offset the chip to avoid collisions. */
.pp-grid--solution.pp-grid--killer .pp-cell[data-sum]::before {
    top: 0.5px;
    left: 1px;
    font-size: 0.5em;
    padding: 0 0.14em;
}

.pp-grid--killer .pp-cell--cage-0 { background-color: rgba(77, 171, 247, 0.09); }
.pp-grid--killer .pp-cell--cage-1 { background-color: rgba(105, 219, 124, 0.09); }
.pp-grid--killer .pp-cell--cage-2 { background-color: rgba(255, 212, 59, 0.11); }
.pp-grid--killer .pp-cell--cage-3 { background-color: rgba(177, 151, 252, 0.10); }
.pp-grid--killer .pp-cell--cage-4 { background-color: rgba(255, 107, 107, 0.09); }
.pp-grid--killer .pp-cell--cage-5 { background-color: rgba(0, 0, 0, 0.04); }
.pp-grid--killer .pp-cell--cage-6 { background-color: rgba(77, 171, 247, 0.06); }
.pp-grid--killer .pp-cell--cage-7 { background-color: rgba(255, 212, 59, 0.07); }

.pp-grid--killer .pp-cell--cage-top { --pp-killer-top-h: var(--pp-killer-line-width); }
.pp-grid--killer .pp-cell--cage-right { --pp-killer-right-w: var(--pp-killer-line-width); }
.pp-grid--killer .pp-cell--cage-bottom { --pp-killer-bottom-h: var(--pp-killer-line-width); }
.pp-grid--killer .pp-cell--cage-left { --pp-killer-left-w: var(--pp-killer-line-width); }

/* Turn gaps (match in-game behavior: lines meet at inset corners) */
.pp-grid--killer .pp-cell--cage-top.pp-cell--cage-left { --pp-killer-top-start-gap: var(--pp-killer-line-turn-gap); }
.pp-grid--killer .pp-cell--cage-top.pp-cell--cage-right { --pp-killer-top-end-gap: var(--pp-killer-line-turn-gap); }
.pp-grid--killer .pp-cell--cage-bottom.pp-cell--cage-left { --pp-killer-bottom-start-gap: var(--pp-killer-line-turn-gap); }
.pp-grid--killer .pp-cell--cage-bottom.pp-cell--cage-right { --pp-killer-bottom-end-gap: var(--pp-killer-line-turn-gap); }

.pp-grid--killer .pp-cell--cage-left.pp-cell--cage-top { --pp-killer-left-start-gap: var(--pp-killer-line-turn-gap); }
.pp-grid--killer .pp-cell--cage-left.pp-cell--cage-bottom { --pp-killer-left-end-gap: var(--pp-killer-line-turn-gap); }
.pp-grid--killer .pp-cell--cage-right.pp-cell--cage-top { --pp-killer-right-start-gap: var(--pp-killer-line-turn-gap); }
.pp-grid--killer .pp-cell--cage-right.pp-cell--cage-bottom { --pp-killer-right-end-gap: var(--pp-killer-line-turn-gap); }

/* Tighter tuning for very small cells (6/9 per page). */
.pp-layout-6 .pp-grid--killer .pp-cell,
.pp-layout-9 .pp-grid--killer .pp-cell {
    --pp-killer-line-edge-inset: 2px;
    --pp-killer-line-side-gap: 2px;
    --pp-killer-line-turn-gap: 2px;
    --pp-killer-line-width: 1px;
}

/* answers: slightly smaller than puzzles (but still layout-aware) */
.pp-grid--solution .pp-cell {
    font-weight: 800;
    font-size: calc(var(--pp-cell-font-size, 18px) - 2px);
}

@media screen and (max-width: 800px) {
    .pp-grid-wrap {
        grid-template-columns: 1fr;
    }
}

/* Print: show only the generated pack */
@media print {
    /* encourage browsers to preserve colors in print output */
    .pp-print-root {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    /* X-Sudoku: make diagonals visible even when background graphics are disabled */
    .pp-grid--x .pp-cell--diag-major,
    .pp-grid--x .pp-cell--diag-minor {
        box-shadow: inset 0 0 0 2px rgba(255, 165, 0, 0.75);
    }

    .pp-grid--x .pp-cell--diag-both {
        box-shadow: inset 0 0 0 3px rgba(255, 165, 0, 0.9);
    }

    /* hide site chrome */
    .skip-link,
    .site-header,
    .site-footer,
    .ad-slot,
    #page-intro,
    #printable-guide,
    #printable-tips,
    /* hide floating stats UI (bottom-right button / drawer / toasts) */
    .ss-stats-toggle,
    .ss-stats-drawer,
    .ss-stats-overlay,
    .ss-achievement-toast,
    .ss-stats-toast,
    .ss-stats-toast__inner {
        display: none !important;
    }

    /* hide embedded playable game regardless of page class */
    .game-area {
        display: none !important;
    }

    /* hide builder copy + controls in print; only keep the generated pages */
    .pp-builder__header,
    .pp-builder__form,
    .pp-actions,
    .pp-status {
        display: none !important;
    }

    .pp-builder {
        margin: 0 !important;
        max-width: none !important;
    }

    .pp-builder.nb-card,
    .pp-builder .nb-card {
        border: none !important;
        box-shadow: none !important;
        padding: 0 !important;
        max-width: none !important;
    }

    .pp-preview {
        margin-top: 0 !important;
        max-width: none !important;
    }

    /* ensure each printed page is one A4 page (no splitting) */
    .pp-page {
        display: grid;
        grid-template-rows: auto 1fr auto;
        min-height: 273mm; /* A4 content height: 297mm - (12mm top+bottom margins) */
        break-after: page;
        page-break-after: always;
        break-inside: avoid;
        page-break-inside: avoid;
        padding: 0 !important;
    }

    .pp-page--sheet .pp-page__content {
        align-items: flex-start;
    }

    /* A4-safe sizing (layout classes are applied on the printed .pp-page sections) */
    .pp-layout-1 {
        --pp-grid-width: 170mm;
        --pp-cell-font-size: 18px;
    }

    /* portrait-safe base sizing (landscape overrides are applied via .pp-page--landscape) */
    .pp-layout-2 {
        --pp-grid-width: 88mm;
        --pp-cell-font-size: 14px;
    }

    .pp-layout-3 {
        --pp-grid-width: 58mm;
        --pp-cell-font-size: 10.5px;
    }

    /* 4-up was too small; fill the page better */
    .pp-layout-4 {
        --pp-grid-width: 84mm;
        --pp-cell-font-size: 12.5px;
    }

    .pp-layout-6 {
        --pp-grid-width: 62mm;
        --pp-cell-font-size: 11px;
    }

    .pp-layout-9 {
        --pp-grid-width: 50mm;
        --pp-cell-font-size: 9px;
    }

    /* landscape: larger boards + correct A4 height (210mm - 24mm margins) */
    .pp-page--landscape {
        min-height: 186mm;
    }

    .pp-page--landscape.pp-layout-2 {
        --pp-grid-width: 125mm;
        --pp-cell-font-size: 16px;
    }

    .pp-page--landscape.pp-layout-3 {
        --pp-grid-width: 78mm;
        --pp-cell-font-size: 12px;
    }

    .pp-page--sheet .pp-grid-wrap {
        gap: 8mm;
        justify-items: center;
    }

    .pp-layout-2 .pp-grid-wrap,
    .pp-layout-3 .pp-grid-wrap {
        gap: 6mm;
    }

    .pp-page--sheet .pp-puzzle {
        padding: 6px;
    }

    .pp-layout-3 .pp-puzzle {
        padding: 4px;
    }

    .pp-page--sheet .pp-puzzle__meta {
        margin-bottom: 6px;
        font-size: 11.5px;
    }

    .pp-layout-3 .pp-puzzle__meta {
        margin-bottom: 4px;
        font-size: 10.5px;
    }

    .pp-layout-9 .pp-grid-wrap {
        gap: 3mm;
    }

    .pp-layout-9 .pp-puzzle {
        padding: 3px;
    }

    .pp-layout-9 .pp-puzzle__meta {
        margin-bottom: 3px;
        font-size: 9px;
    }

    .pp-page__header,
    .pp-page__footer {
        width: 100% !important;
        break-inside: avoid;
        page-break-inside: avoid;
    }

    .pp-grid {
        break-inside: avoid;
        page-break-inside: avoid;
    }

    /* Page orientation is injected by printable-pack.js right before printing. */
    @page {
        margin: 12mm;
    }
}