/* HSK flashcard PDF exporter (/tools/flashcard-pdf) — T7 / D19.

   The sheets are laid out in millimetres, not percentages, because the same markup has to
   come out of an A4 printer and a US Letter printer with the cards at the SAME size — a deck
   whose cards are 8mm wider on one continent does not stack. Inside a 10mm margin the usable
   area is 190x277mm (A4) and 196x259mm (Letter), so every layout below fits inside the
   smaller of the two in each direction: 190 wide by 259 tall.

       4 per page   2 x 2 at 90 x 120mm  ->  180 x 240mm
       9 per page   3 x 3 at 62 x  82mm  ->  186 x 246mm
      16 per page   4 x 4 at 46 x  62mm  ->  184 x 248mm

   Cards tile edge to edge with no gutter so that one cut separates two cards, and the dashed
   guide is a border rather than a gap for the same reason.

   The preview is deliberately white in dark mode: it is a picture of paper, and showing it
   dark would misrepresent what comes out of the printer. */

.fcp-sheet-wrap {
    /* Sheets are fixed-width in mm; on a phone that is wider than the viewport, so the
       preview scrolls sideways instead of squashing the geometry it is previewing. */
    overflow-x: auto;
    padding-bottom: 0.5rem;
}

.fcp-sheet {
    background: #fff;
    color: #111;
    margin: 0 auto 1.5rem;
    border: 1px solid #d0d0d0;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
    width: max-content;
}

.fcp-sheet-label {
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #6c757d;
    padding: 0.35rem 0.5rem;
    border-bottom: 1px solid #e5e5e5;
}

.fcp-grid {
    display: grid;
}

.fcp-grid.fcp-cols-2 { grid-template-columns: repeat(2, 90mm); grid-auto-rows: 120mm; }
.fcp-grid.fcp-cols-3 { grid-template-columns: repeat(3, 62mm); grid-auto-rows: 82mm; }
.fcp-grid.fcp-cols-4 { grid-template-columns: repeat(4, 46mm); grid-auto-rows: 62mm; }

.fcp-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 3mm;
    overflow: hidden;
    position: relative;
    background: #fff;
    color: #111;
}

.fcp-guides .fcp-card {
    border: 1px dashed #9aa0a6;
    /* Adjacent dashed borders would double up into a 2px line; pulling each card back over
       its neighbour keeps every cut line a single stroke. */
    margin: -0.5px;
}

.fcp-empty {
    background: #fff;
}

.fcp-hanzi {
    line-height: 1.1;
    font-weight: 500;
    word-break: keep-all;
}

.fcp-pinyin {
    font-style: italic;
    color: #1a1a1a;
    line-height: 1.25;
}

.fcp-meaning {
    line-height: 1.3;
    color: #111;
}

.fcp-example {
    margin-top: 2mm;
    padding-top: 1.5mm;
    border-top: 1px solid #dcdcdc;
    color: #333;
    line-height: 1.3;
}

.fcp-example-en {
    color: #555;
}

/* The index and level tag. Small, cornered, and printed on both faces so a pile that gets
   dropped can be put back together without re-reading every meaning. */
.fcp-tag {
    position: absolute;
    top: 1.5mm;
    font-size: 6pt;
    color: #8a8a8a;
    letter-spacing: 0.02em;
}

.fcp-tag-left { left: 2mm; }
.fcp-tag-right { right: 2mm; }

/* Type scale. Set per layout AND per word length: a four-character word at the size that
   suits a single character overflows the card, and a single character at the size that fits
   four is a waste of the paper. */
.fcp-cols-2 .fcp-hanzi { font-size: 88pt; }
.fcp-cols-2 .fcp-hanzi[data-len="2"] { font-size: 68pt; }
.fcp-cols-2 .fcp-hanzi[data-len="3"] { font-size: 50pt; }
.fcp-cols-2 .fcp-hanzi[data-len="long"] { font-size: 38pt; }
.fcp-cols-2 .fcp-pinyin { font-size: 20pt; margin-top: 4mm; }
.fcp-cols-2 .fcp-back .fcp-pinyin { font-size: 26pt; margin-top: 0; }
.fcp-cols-2 .fcp-meaning { font-size: 15pt; margin-top: 4mm; }
.fcp-cols-2 .fcp-example { font-size: 11pt; }

.fcp-cols-3 .fcp-hanzi { font-size: 58pt; }
.fcp-cols-3 .fcp-hanzi[data-len="2"] { font-size: 44pt; }
.fcp-cols-3 .fcp-hanzi[data-len="3"] { font-size: 32pt; }
.fcp-cols-3 .fcp-hanzi[data-len="long"] { font-size: 25pt; }
.fcp-cols-3 .fcp-pinyin { font-size: 13pt; margin-top: 3mm; }
.fcp-cols-3 .fcp-back .fcp-pinyin { font-size: 17pt; margin-top: 0; }
.fcp-cols-3 .fcp-meaning { font-size: 11pt; margin-top: 3mm; }
.fcp-cols-3 .fcp-example { font-size: 8.5pt; }

.fcp-cols-4 .fcp-hanzi { font-size: 38pt; }
.fcp-cols-4 .fcp-hanzi[data-len="2"] { font-size: 29pt; }
.fcp-cols-4 .fcp-hanzi[data-len="3"] { font-size: 21pt; }
.fcp-cols-4 .fcp-hanzi[data-len="long"] { font-size: 16pt; }
.fcp-cols-4 .fcp-pinyin { font-size: 10pt; margin-top: 2mm; }
.fcp-cols-4 .fcp-back .fcp-pinyin { font-size: 13pt; margin-top: 0; }
.fcp-cols-4 .fcp-meaning { font-size: 8.5pt; margin-top: 2mm; }
.fcp-cols-4 .fcp-example { font-size: 7pt; }

@media print {
    /* Everything that is not a sheet goes: nav, footer, ads, the options form, the prose.
       .fcp-noprint marks the page's own screen-only blocks. */
    header, footer, nav, .footer, .no-print, .fcp-noprint,
    .adsbygoogle, ins.adsbygoogle, .ad-container, .ad-placeholder, .ad-slot { display: none !important; }

    main, .container, .container-fluid {
        margin: 0 !important;
        padding: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    .row, [class*="col-"] {
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        flex: none !important;
        display: block !important;
    }

    body { background: #fff !important; }

    .fcp-sheet-wrap { overflow: visible !important; }

    .fcp-sheet {
        border: 0;
        box-shadow: none;
        margin: 0;
        width: auto;
        page-break-after: always;
        break-after: page;
    }

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

    /* A card must never be split across two sheets of paper. */
    .fcp-card {
        page-break-inside: avoid;
        break-inside: avoid;
    }

    @page { margin: 10mm; }
}