/* /tools/name-card-pdf — your Chinese name in 田字格 with stroke order (content pipeline item 17).
   The card is plain HTML; the print rules at the bottom are what make it a PDF. Grid lines are
   borders, never background images: browsers drop backgrounds from a printout by default. */

.ncd-hero-banner { background: linear-gradient(135deg, #b91c1c 0%, #9a3412 55%, #7c2d12 100%); }

.ncd-input { font-size: 1.5rem; }
.ncd-chips { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.ncd-chip {
    border: 1px solid #fca5a5; background: #fff5f5; color: #991b1b; border-radius: 999px;
    padding: .15rem .8rem; font-size: 1.05rem; transition: transform .15s ease, background .15s ease;
}
.ncd-chip:hover, .ncd-chip:focus-visible { background: #fee2e2; transform: translateY(-2px); }

.ncd-sheet {
    --ncd-box: #d33;
    --ncd-guide: #f1a7b8;
    background: #fff; color: #111; border-radius: .75rem; padding: 1.25rem;
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.ncd-sheet.ncd-gray { --ncd-box: #8f969c; --ncd-guide: #c7cbcf; }
.ncd-kicker { font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; font-weight: 600; color: #6b7280; margin-bottom: .5rem; }

.ncd-sheet-head {
    display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem;
    border-bottom: 2px solid #111; padding-bottom: .5rem; margin-bottom: 1rem;
}
.ncd-name { display: flex; gap: .15rem; line-height: 1; }
.ncd-name-char {
    display: inline-block; width: 4.2rem; height: 4.2rem; font-size: 3.6rem; text-align: center;
    font-family: "KaiTi", "STKaiti", "Kaiti SC", "Kaiti TC", "DFKai-SB", "BiauKai", serif;
}
.ncd-name-char svg { width: 100%; height: 100%; display: block; }
.ncd-roman { font-size: 1.15rem; font-weight: 600; margin-top: .35rem; letter-spacing: .02em; }
.ncd-meta { text-align: right; color: #374151; }
.ncd-line { margin-top: .35rem; }

.ncd-block { margin-bottom: 1rem; break-inside: avoid; page-break-inside: avoid; }
.ncd-block-head { display: flex; align-items: center; gap: .6rem; margin-bottom: .3rem; flex-wrap: wrap; }
.ncd-block-char { font-size: 1.6rem; line-height: 1; font-family: "KaiTi", "STKaiti", "Kaiti SC", serif; }
.ncd-block-info { font-size: .9rem; }
.ncd-badge { font-size: .7rem; text-transform: uppercase; letter-spacing: .04em; background: #fee2e2; color: #991b1b; border-radius: 999px; padding: .05rem .5rem; margin-left: .2rem; }
.ncd-also { font-size: .8rem; color: #6b7280; }

.ncd-grid {
    display: grid; grid-template-columns: repeat(10, minmax(0, 1fr));
    border-top: 1.5px solid var(--ncd-box); border-left: 1.5px solid var(--ncd-box);
    max-width: 44rem;
}
.ncd-grid + .ncd-grid { border-top: 0; }
.ncd-order:empty, .ncd-order.is-empty { border: 0; }
.ncd-blank[hidden] { display: none; }

.ncd-cell {
    position: relative; aspect-ratio: 1 / 1;
    border-right: 1.5px solid var(--ncd-box); border-bottom: 1.5px solid var(--ncd-box);
}
/* The 田 cross, drawn with dashed borders so it prints. */
.ncd-tian .ncd-cell::before, .ncd-mi .ncd-cell::before {
    content: ""; position: absolute; left: 50%; top: 0; bottom: 0; border-left: 1px dashed var(--ncd-guide);
}
.ncd-tian .ncd-cell::after, .ncd-mi .ncd-cell::after {
    content: ""; position: absolute; top: 50%; left: 0; right: 0; border-top: 1px dashed var(--ncd-guide);
}
.ncd-diag { position: absolute; inset: 0; width: 100%; height: 100%; display: none; }
.ncd-diag line { stroke: var(--ncd-guide); stroke-width: 1; stroke-dasharray: 4 4; vector-effect: non-scaling-stroke; }
.ncd-mi .ncd-diag { display: block; }

.ncd-cell > svg.ncd-strokes, .ncd-glyph {
    position: absolute; inset: 6%; width: 88%; height: 88%; z-index: 1;
}
.ncd-glyph {
    display: flex; align-items: center; justify-content: center; line-height: 1;
    font-size: clamp(1.1rem, 3.4vw, 2.4rem); color: #c9ced4;
    font-family: "KaiTi", "STKaiti", "Kaiti SC", "Kaiti TC", "DFKai-SB", "BiauKai", serif;
}
.ncd-glyph.is-model { color: #111; }
.ncd-glyph svg { width: 100%; height: 100%; }

.ncd-num { position: absolute; top: 1px; left: 3px; font-size: .6rem; color: #9ca3af; z-index: 2; line-height: 1; }

/* Stroke paths. */
.ncd-s-done { fill: #1f2937; }
.ncd-s-now { fill: #dc2626; }
.ncd-s-todo { fill: #e5e7eb; }
.ncd-s-trace { fill: #d1d5db; }
.ncd-s-model { fill: #111; }
.ncd-s-start { fill: #dc2626; stroke: #fff; stroke-width: 14; }

/* The header name, written a stroke at a time. */
.ncd-ink { fill: none; stroke: #111; stroke-width: 200; stroke-linecap: round; stroke-linejoin: round; }
.ncd-ink.is-anim { animation: ncd-draw var(--dur, .4s) ease-out var(--delay, 0s) both; }
@keyframes ncd-draw { from { stroke-dashoffset: var(--len); } to { stroke-dashoffset: 0; } }

/* Stroke-order squares arrive one after another. */
.ncd-order .ncd-cell.is-new { animation: ncd-pop .35s ease-out var(--delay, 0s) both; }
@keyframes ncd-pop { from { opacity: 0; transform: scale(.85); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
    .ncd-ink.is-anim, .ncd-order .ncd-cell.is-new, .ncd-chip { animation: none !important; transition: none !important; }
}

@media (max-width: 575.98px) {
    .ncd-sheet { padding: .75rem; }
    .ncd-name-char { width: 3rem; height: 3rem; font-size: 2.6rem; }
    .ncd-sheet-head { flex-direction: column; align-items: flex-start; }
    .ncd-meta { text-align: left; }
    .ncd-num { font-size: .5rem; }
}

@media print {
    header, nav, footer, .footer, .d-print-none, .adsbygoogle, .ad-placeholder, .ad-container { display: none !important; }
    body { background: #fff !important; }
    .ncd-main { flex: 0 0 100% !important; max-width: 100% !important; width: 100% !important; }
    .ncd-sheet { box-shadow: none !important; padding: 0; border-radius: 0; }
    .ncd-grid { max-width: 100%; }
    .ncd-glyph { font-size: 12mm; }
    .ncd-ink.is-anim, .ncd-order .ncd-cell.is-new { animation: none !important; stroke-dashoffset: 0 !important; opacity: 1 !important; transform: none !important; }
    .ncd-block-head a { color: inherit; text-decoration: none; }
    @page { margin: 12mm; }
}