/* ===== Worksheet Page ===== */

:root {
    --ws-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
    --ws-mono: 'SF Mono', 'Fira Code', 'Consolas', 'Courier New', monospace;
    --ws-accent: #7C3AED;
    --ws-text: #1a1a2e;
    --ws-muted: #6b7280;
    --ws-border: #d1d5db;
    --ws-code-bg: #f3f4f6;
    --ws-section-gap: 28px;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--ws-font);
    color: var(--ws-text);
    background: #f5f5f5;
    font-size: 14px;
    line-height: 1.5;
}

/* ===== Screen controls bar ===== */

.ws-controls {
    background: #1e1b4b;
    color: #fff;
    padding: 12px 24px;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

.ws-controls-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    max-width: 900px;
    margin: 0 auto;
}

.ws-controls-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.ws-controls-right {
    display: flex;
    align-items: center;
    gap: 16px;
}

.ws-back-btn {
    color: rgba(255,255,255,0.7);
    background: none;
    border: none;
    padding: 0;
    font-family: var(--ws-font);
    font-size: 0.85rem;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    transition: color 0.15s;
}
.ws-back-btn:hover { color: #fff; }

.ws-module-badge {
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 20px;
    padding: 4px 14px;
    font-size: 0.82rem;
    font-weight: 600;
    color: #e0e7ff;
}

.ws-check-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.82rem;
    color: rgba(255,255,255,0.8);
    cursor: pointer;
}

.ws-check-label input[type="checkbox"] {
    accent-color: #a78bfa;
    width: 15px;
    height: 15px;
    cursor: pointer;
}

.ws-print-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #7C3AED;
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 8px 18px;
    font-size: 0.88rem;
    font-weight: 600;
    font-family: var(--ws-font);
    cursor: pointer;
    transition: background 0.15s;
}
.ws-print-btn:hover { background: #6d28d9; }

.ws-hint {
    text-align: center;
    font-size: 0.75rem;
    color: rgba(255,255,255,0.5);
    margin-top: 6px;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

/* ===== Loading state ===== */

.ws-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 200px;
    gap: 16px;
    color: #6b7280;
    font-size: 0.9rem;
}

.ws-loading-spinner {
    width: 32px;
    height: 32px;
    border: 3px solid #e5e7eb;
    border-top-color: #7C3AED;
    border-radius: 50%;
    animation: ws-spin 0.7s linear infinite;
}

@keyframes ws-spin {
    to { transform: rotate(360deg); }
}

/* ===== Module picker ===== */

.ws-picker {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 300px;
    padding: 40px 16px;
}

.ws-picker-card {
    background: #fff;
    border-radius: 12px;
    padding: 32px;
    max-width: 460px;
    width: 100%;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
    text-align: center;
}

.ws-picker-card h2 {
    font-size: 1.3rem;
    color: var(--ws-text);
    margin-bottom: 8px;
}

.ws-picker-card p {
    color: var(--ws-muted);
    margin-bottom: 24px;
    font-size: 0.9rem;
}

.ws-picker-row {
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
}

.ws-picker-row label {
    font-size: 0.9rem;
    font-weight: 500;
}

.ws-picker-input {
    width: 80px;
    border: 1px solid var(--ws-border);
    border-radius: 6px;
    padding: 6px 10px;
    font-size: 0.9rem;
    font-family: var(--ws-font);
    text-align: center;
}

/* ===== Worksheet document ===== */

.ws-doc {
    max-width: 860px;
    margin: 24px auto;
    background: #fff;
    padding: 32px 40px;
    box-shadow: 0 4px 24px rgba(0,0,0,0.12);
    border-radius: 4px;
}

/* ===== Page header ===== */

.ws-header {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 20px;
    align-items: start;
    margin-bottom: 4px;
}

.ws-header-logo {
    flex-shrink: 0;
}

.ws-logo {
    height: 36px;
    display: block;
}

.ws-header-title {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ws-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--ws-text);
    line-height: 1.2;
}

.ws-header-fields {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex-shrink: 0;
    text-align: right;
}

.ws-field {
    font-size: 0.8rem;
    color: var(--ws-muted);
    display: flex;
    align-items: baseline;
    gap: 6px;
    justify-content: flex-end;
}

.ws-field-line {
    display: inline-block;
    border-bottom: 1px solid var(--ws-text);
    width: 120px;
}

.ws-field-line--short {
    width: 80px;
}

.ws-header-rule {
    height: 3px;
    border-radius: 2px;
    margin: 10px 0 24px;
    background: var(--ws-accent);
}

/* ===== Sections ===== */

.ws-section {
    margin-bottom: var(--ws-section-gap);
    page-break-inside: avoid;
}

.ws-section-header {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 12px;
}

.ws-section-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--ws-accent);
    color: #fff;
    font-size: 0.78rem;
    font-weight: 800;
    flex-shrink: 0;
    margin-top: 2px;
}

.ws-section-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--ws-text);
    line-height: 1.3;
}

.ws-section-desc {
    font-size: 0.8rem;
    color: var(--ws-muted);
    margin-top: 2px;
}

/* ===== Duo section ===== */

.ws-duo-grid {
    display: grid;
    gap: 12px;
}

.ws-duo-item {
    border: 1px solid var(--ws-border);
    border-radius: 8px;
    padding: 10px 14px;
    page-break-inside: avoid;
}

.ws-duo-q {
    font-size: 0.88rem;
    font-weight: 600;
    margin-bottom: 8px;
    color: var(--ws-text);
}

.ws-duo-q code {
    font-family: var(--ws-mono);
    background: var(--ws-code-bg);
    padding: 1px 5px;
    border-radius: 3px;
    font-size: 0.85em;
}

.ws-duo-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.ws-duo-option {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
}

.ws-duo-circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border: 1.5px solid var(--ws-text);
    border-radius: 50%;
    font-size: 0.72rem;
    font-weight: 700;
    flex-shrink: 0;
    color: var(--ws-text);
}

.ws-duo-option code {
    font-family: var(--ws-mono);
    background: var(--ws-code-bg);
    padding: 1px 5px;
    border-radius: 3px;
    font-size: 0.82em;
}

/* ===== Memory section ===== */

.ws-memory-wrap {
    border: 1px solid var(--ws-border);
    border-radius: 8px;
    overflow: hidden;
}

.ws-memory-table {
    width: 100%;
    border-collapse: collapse;
}

.ws-memory-table th {
    background: var(--ws-code-bg);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ws-muted);
    padding: 8px 14px;
    text-align: left;
    border-bottom: 1px solid var(--ws-border);
}

.ws-memory-table td {
    padding: 9px 14px;
    font-size: 0.85rem;
    border-bottom: 1px solid #f0f0f0;
    vertical-align: middle;
}

.ws-memory-table tr:last-child td {
    border-bottom: none;
}

.ws-memory-table td.ws-mem-a {
    width: 48%;
    border-right: 2px solid var(--ws-border);
    font-family: var(--ws-mono);
    font-size: 0.82rem;
    background: #fafbff;
}

.ws-memory-table td.ws-mem-b {
    width: 48%;
    color: var(--ws-muted);
}

.ws-memory-table td.ws-mem-mid {
    width: 4%;
    text-align: center;
    color: #d1d5db;
    font-size: 0.75rem;
    padding: 0 4px;
}

.ws-mem-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border: 1.5px solid #9ca3af;
    border-radius: 50%;
}

.ws-mem-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border: 1px solid var(--ws-border);
    border-radius: 50%;
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--ws-muted);
    margin-right: 6px;
    flex-shrink: 0;
}

/* ===== Meanings section ===== */

.ws-meanings-item {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 16px;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid #f0f0f0;
}

.ws-meanings-item:last-child {
    border-bottom: none;
}

.ws-meanings-term {
    font-family: var(--ws-mono);
    font-size: 0.9rem;
    background: var(--ws-code-bg);
    padding: 6px 12px;
    border-radius: 6px;
    white-space: nowrap;
    font-weight: 600;
}

.ws-meanings-blank {
    border-bottom: 1px solid var(--ws-text);
    min-height: 28px;
    margin-bottom: 2px;
}

/* ===== Practice section ===== */

.ws-practice-desc {
    background: var(--ws-code-bg);
    border-left: 3px solid var(--ws-accent);
    padding: 10px 14px;
    border-radius: 0 6px 6px 0;
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--ws-text);
    margin-bottom: 12px;
}

.ws-practice-box {
    border: 1px solid var(--ws-border);
    border-radius: 6px;
    overflow: hidden;
}

.ws-practice-box-label {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ws-muted);
    background: var(--ws-code-bg);
    padding: 5px 12px;
    border-bottom: 1px solid var(--ws-border);
}

.ws-practice-lines {
    font-family: var(--ws-mono);
    font-size: 0.82rem;
    color: transparent; /* lines only, no text */
    background-image: repeating-linear-gradient(
        to bottom,
        transparent 0px,
        transparent 27px,
        #e5e7eb 27px,
        #e5e7eb 28px
    );
    background-size: 100% 28px;
    line-height: 28px;
    padding: 4px 12px 4px;
    min-height: 196px; /* 7 lines × 28px */
    border: none;
}

/* ===== Gaps section ===== */

.ws-gaps-list {
    display: grid;
    gap: 10px;
}

.ws-gap-item {
    display: grid;
    grid-template-columns: 24px 1fr;
    gap: 10px;
    align-items: start;
}

.ws-gap-num {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--ws-muted);
    padding-top: 5px;
    text-align: right;
}

.ws-gap-code {
    font-family: var(--ws-mono);
    font-size: 0.88rem;
    background: var(--ws-code-bg);
    border: 1px solid var(--ws-border);
    border-radius: 6px;
    padding: 7px 12px;
    line-height: 1.6;
}

.ws-blank {
    display: inline-block;
    border-bottom: 2px solid var(--ws-accent);
    min-width: 24px;
    color: transparent;
    vertical-align: bottom;
    line-height: 1.4;
}

/* ===== Spots section ===== */

.ws-spots-list {
    display: grid;
    gap: 14px;
}

.ws-spot-item {
    page-break-inside: avoid;
}

.ws-spot-header {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--ws-muted);
    margin-bottom: 5px;
}

.ws-spot-lines {
    font-family: var(--ws-mono);
    font-size: 0.85rem;
    background: var(--ws-code-bg);
    border: 1px solid var(--ws-border);
    border-radius: 6px;
    overflow: hidden;
}

.ws-spot-line {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 5px 12px;
    border-bottom: 1px solid #ebebeb;
}

.ws-spot-line:last-child {
    border-bottom: none;
}

.ws-spot-letter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border: 1.5px solid var(--ws-text);
    border-radius: 50%;
    font-size: 0.7rem;
    font-weight: 800;
    flex-shrink: 0;
    color: var(--ws-text);
}

.ws-spot-code {
    flex: 1;
}

/* ===== Answer Key ===== */

.ws-page-break {
    page-break-before: always;
    break-before: page;
    height: 0;
    margin: 0;
}

.ws-answer-key {
    padding-top: 8px;
}

.ws-answer-header {
    margin-bottom: 20px;
    border-bottom: 2px solid var(--ws-accent);
    padding-bottom: 10px;
}

.ws-answer-title {
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--ws-text);
}

.ws-answer-subtitle {
    font-size: 0.82rem;
    color: var(--ws-muted);
    margin-top: 2px;
}

.ws-answer-sections {
    display: grid;
    gap: 20px;
}

.ws-answer-section {
    page-break-inside: avoid;
}

.ws-answer-section-title {
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ws-accent);
    margin-bottom: 8px;
    padding-bottom: 4px;
    border-bottom: 1px solid #e5e7eb;
}

.ws-answer-list {
    display: grid;
    gap: 5px;
}

.ws-answer-item {
    display: grid;
    grid-template-columns: 28px 1fr;
    gap: 8px;
    font-size: 0.84rem;
    line-height: 1.5;
}

.ws-answer-qnum {
    font-weight: 700;
    color: var(--ws-muted);
    font-size: 0.8rem;
}

.ws-answer-val {
    color: var(--ws-text);
}

.ws-answer-val code {
    font-family: var(--ws-mono);
    background: var(--ws-code-bg);
    padding: 1px 5px;
    border-radius: 3px;
    font-size: 0.85em;
}

.ws-answer-val strong {
    color: #059669;
}

/* ===== Crossword ===== */

.cw-grid-wrap {
    overflow-x: auto;
    display: flex;
    justify-content: center;
    margin: 4px 0 18px;
}

.cw-grid {
    --cw-cell: 30px;
    display: grid;
    grid-template-columns: repeat(var(--cw-cols), var(--cw-cell));
    grid-auto-rows: var(--cw-cell);
}

.cw-cell {
    position: relative;
    box-sizing: border-box;
    border: 1.5px solid var(--ws-text);
    margin: 0 -0.75px -0.75px 0;
    background: #fff;
}

.cw-cell--blank {
    border: 0;
    background: transparent;
}

.cw-num {
    position: absolute;
    top: 1px;
    left: 2px;
    font-size: 0.6rem;
    font-weight: 700;
    line-height: 1;
    color: var(--ws-text);
}

.cw-letter {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 5px;
    font-size: 1rem;
    font-weight: 800;
    color: #059669;
}

.cw-clues {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    align-items: start;
}

.cw-clue-heading {
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ws-accent);
    margin-bottom: 8px;
    padding-bottom: 4px;
    border-bottom: 1px solid #e5e7eb;
}

.cw-clue-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 6px;
}

.cw-clue {
    font-size: 0.86rem;
    line-height: 1.45;
    break-inside: avoid;
}

.cw-clue-num {
    font-weight: 700;
}

.cw-puzzle {
    page-break-inside: auto;
}

@media (max-width: 640px) {
    .cw-clues {
        grid-template-columns: 1fr;
    }
}

/* ===== Word search ===== */

.wsr-grid-wrap {
    overflow-x: auto;
    display: flex;
    justify-content: center;
    margin: 4px 0 18px;
}

.wsr-grid {
    --wsr-cell: min(30px, calc(640px / var(--wsr-cols)));
    display: grid;
    grid-template-columns: repeat(var(--wsr-cols), var(--wsr-cell));
    grid-auto-rows: var(--wsr-cell);
}

.wsr-cell {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: calc(var(--wsr-cell) * 0.55);
    font-weight: 600;
    letter-spacing: 0;
    color: var(--ws-text);
    line-height: 1;
}

.wsr-num {
    position: absolute;
    top: 0;
    left: 1px;
    font-size: calc(var(--wsr-cell) * 0.3);
    font-weight: 800;
    line-height: 1;
}

.wsr-cell--found {
    border-radius: 3px;
    font-weight: 800;
}

.wsr-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 10px;
}

.wsr-group {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 10px;
    padding: 4px 10px 4px 6px;
    border-radius: 999px;
    font-size: 0.86rem;
    font-weight: 600;
    break-inside: avoid;
}

.wsr-group-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--ws-text);
    color: #fff;
    font-size: 0.68rem;
    font-weight: 800;
}

.wsr-puzzle {
    page-break-inside: auto;
}

/* ===== Static printable puzzle pages (scripts/build-corpus.js) ===== */
/* Screen-only intro and info cards around the ws-doc on the public
   /<subject>/crosswords|word-searches/… pages. All .no-print. */

.pz-intro,
.pz-info {
    max-width: 860px;
    margin: 24px auto;
}

.pz-intro {
    margin-bottom: 0;
}

.pz-crumbs {
    font-size: 0.8rem;
    color: var(--ws-muted);
    margin-bottom: 8px;
}

.pz-crumbs a,
.pz-card a {
    color: var(--ws-accent);
}

.pz-lede {
    font-size: 0.95rem;
    line-height: 1.6;
}

.pz-card,
.pz-info .class-unlocks {
    background: #fff;
    border-radius: 4px;
    box-shadow: 0 4px 24px rgba(0,0,0,0.08);
    padding: 20px 28px;
    margin-bottom: 16px;
}

.pz-card h2,
.class-unlocks-title {
    font-size: 1.05rem;
    margin-bottom: 6px;
}

.pz-card p {
    color: var(--ws-muted);
    margin-bottom: 10px;
}

.pz-module-list,
.pz-link-list,
.class-unlocks-list {
    padding-left: 20px;
    line-height: 1.7;
}

.pz-module-list {
    column-width: 220px;
    column-gap: 28px;
}

.pz-card ul + p {
    margin: 10px 0 0;
}

.pz-info .class-unlocks {
    background: #f5f3ff;
    border: 1px solid #ddd6fe;
}

.class-unlocks-lead {
    margin-bottom: 8px;
}

.class-unlocks-list {
    margin-bottom: 16px;
}

.class-unlocks-btn {
    display: inline-block;
    background: var(--ws-accent);
    color: #fff;
    font-weight: 700;
    padding: 10px 18px;
    border-radius: 8px;
    text-decoration: none;
}

.class-unlocks-btn:hover {
    background: #6d28d9;
}

.class-unlocks-footnote {
    color: var(--ws-muted);
    font-size: 0.8rem;
    margin-top: 8px;
}

/* ===== Print styles ===== */

@media print {

    .wsr-grid {
        --wsr-cell: min(8mm, calc(160mm / var(--wsr-cols)));
    }

    .wsr-cell,
    .wsr-group,
    .wsr-group-num {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .ws-section.wsr-puzzle {
        page-break-inside: auto;
    }

    .cw-grid {
        --cw-cell: 8mm;
    }

    .cw-cell,
    .cw-letter {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .cw-clues {
        grid-template-columns: 1fr 1fr;
    }

    .ws-section.cw-puzzle {
        page-break-inside: auto;
    }

    @page {
        size: A4;
        margin: 16mm 16mm 22mm;
        @bottom-center {
            content: "Cloodit  ·  cloodit.com  ·  Page " counter(page) " of " counter(pages);
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
            font-size: 8pt;
            color: #9ca3af;
        }
    }

    body {
        background: #fff;
        font-size: 10pt;
    }

    .no-print {
        display: none !important;
    }

    .ws-doc {
        max-width: none;
        margin: 0;
        padding: 0;
        box-shadow: none;
        border-radius: 0;
    }

    .ws-section {
        page-break-inside: avoid;
    }

    .ws-spot-item {
        page-break-inside: avoid;
    }

    .ws-duo-item {
        page-break-inside: avoid;
    }

    .ws-header {
        margin-bottom: 2px;
    }

    .ws-header-rule {
        margin: 6px 0 16px;
        height: 3px;
    }

    .ws-logo {
        height: 30px;
    }

    .ws-title {
        font-size: 14pt;
    }

    .ws-answer-key {
        padding-top: 0;
        page-break-before: always;
        break-before: page;
    }

    /* The answer key breaks onto its own page by itself (above). Letting the
       separate .ws-page-break div force a break too printed a blank page
       between the questions and the key. !important: the pages' scripts set
       its inline display when toggling the answer key. */
    .ws-page-break {
        display: none !important;
    }

    /* The grids are sized to fit A4 in print, so no scroll container —
       overflow:auto printed a scrollbar beside the crossword. */
    .cw-grid-wrap,
    .wsr-grid-wrap {
        overflow: visible;
    }

    /* Hide answer key if checkbox unchecked — handled by JS adding a class */
    body.ws-no-answers .ws-answer-key,
    body.ws-no-answers .ws-page-break {
        display: none !important;
    }

    /* Code blocks print-friendly */
    .ws-gap-code,
    .ws-spot-lines,
    .ws-practice-box,
    .ws-practice-lines {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .ws-section-label {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .ws-header-rule {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}

/* ===== Responsive (screen) ===== */

@media (max-width: 640px) {
    .ws-doc {
        padding: 20px 16px;
        margin: 12px;
    }

    .pz-intro,
    .pz-info {
        margin: 16px 12px;
    }

    .pz-card,
    .pz-info .class-unlocks {
        padding: 18px 16px;
    }

    .ws-header {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .ws-header-fields {
        text-align: left;
    }

    .ws-field {
        justify-content: flex-start;
    }

    .ws-controls-inner {
        flex-direction: column;
        gap: 10px;
        align-items: flex-start;
    }

    .ws-duo-options {
        grid-template-columns: 1fr;
    }
}

/* ===== Post-print offer (build-corpus.js renderPostPrintOffer,
   content/post-print-offer.js) — revealed after the print dialog closes.
   Paper colours from the site's postcards (levels-trail.css); system font,
   since these pages load no web fonts. ===== */
.pp-offer[hidden] { display: none; }
.pp-offer {
    position: relative;
    max-width: 760px;
    margin: 18px auto 0;
    padding: 18px 22px 16px;
    border-radius: 8px;
    background: #FBF6EA;
    color: #2B1C50;
    box-shadow: 0 10px 28px rgba(11,16,32,.18);
    text-align: center;
}
.pp-offer-kicker { font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #B7791F; }
.pp-offer-text { margin: 4px 0 12px; font-size: 16px; font-weight: 700; }
.pp-offer-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.pp-offer-btn {
    display: inline-block;
    padding: 10px 18px;
    border-radius: 12px;
    background: #fff;
    color: #2B1C50;
    box-shadow: inset 0 0 0 2px #D8CDB2, 0 3px 0 #D8CDB2;
    font-weight: 800;
    font-size: 14px;
    text-decoration: none;
}
.pp-offer-btn.is-primary { background: #7C2BF5; color: #fff; box-shadow: 0 3px 0 rgba(0,0,0,.2); }
.pp-offer-btn:hover { transform: translateY(-1px); }
.pp-offer-close {
    position: absolute; top: 8px; right: 10px;
    border: none; background: none; cursor: pointer;
    font-size: 16px; color: #8A7A5A;
}
@media print { .pp-offer { display: none !important; } }