/* Shared early-years (Pre-K) printable activity styles.
   Used by tool-template.html (live preview/print) and documents.html (saved
   worksheet viewer) so the marker graphics render identically in both. */
.ey-block {
    margin: 22px 0;
    padding: 16px 18px 20px;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    page-break-inside: avoid;
    break-inside: avoid;
}
.ey-instruction {
    font-size: 17px;
    font-weight: 700;
    color: #334155;
    margin: 0 0 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.ey-instruction .ey-num {
    flex: 0 0 auto;
    width: 26px; height: 26px;
    border-radius: 50%;
    background: #667eea; color: #fff;
    font-size: 14px; font-weight: 700;
    display: inline-flex; align-items: center; justify-content: center;
}
/* Tracing */
.ey-trace-row {
    position: relative;
    height: 92px;
    margin: 4px 0;
    border-top: 2px solid #94a3b8;
    border-bottom: 2px solid #94a3b8;
    overflow: hidden;
}
.ey-trace-row::before {
    content: '';
    position: absolute; left: 0; right: 0; top: 50%;
    border-top: 2px dashed #cbd5e1;
}
.ey-trace-glyphs {
    position: absolute; left: 14px; top: 0; bottom: 0;
    display: flex; align-items: center;
    font-family: 'Comic Sans MS', 'Comic Neue', 'Segoe Print', 'Trebuchet MS', cursive;
    font-size: 66px;
    font-weight: 700;
    letter-spacing: 0.28em;
    color: #eef2f7;
    -webkit-text-stroke: 1.5px #94a3b8;
    white-space: pre;
}
.ey-trace-practice { color: transparent; -webkit-text-stroke: 0; }
/* Coloring */
.ey-color-box {
    min-height: 240px;
    border: 3px dashed #cbd5e1;
    border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
}
.ey-color-emoji {
    font-size: 150px; line-height: 1;
    filter: grayscale(1);
    opacity: 0.32;
}
/* Counting */
.ey-count-objects {
    display: flex; flex-wrap: wrap; gap: 14px;
    padding: 14px 4px 18px;
    font-size: 52px; line-height: 1;
}
.ey-answer-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.ey-write-box {
    width: 68px; height: 68px;
    border: 2px solid #94a3b8; border-radius: 10px;
    flex: 0 0 auto;
}
.ey-number-line { display: flex; gap: 10px; flex-wrap: wrap; }
.ey-number-line span {
    width: 40px; height: 40px;
    border: 2px solid #cbd5e1; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 20px; font-weight: 700; color: #475569;
}
.ey-hint { font-size: 14px; color: #64748b; font-weight: 600; }
/* Phonics */
.ey-phonics-wrap { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; }
.ey-phonics-pic {
    display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.ey-phonics-pic .emoji { font-size: 84px; line-height: 1; }
.ey-phonics-pic .word { font-size: 18px; font-weight: 700; color: #334155; }
.ey-letters { display: flex; gap: 18px; }
.ey-letters span {
    width: 66px; height: 66px;
    border: 2px solid #cbd5e1; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 34px; font-weight: 700; color: #334155;
}
/* Matching */
.ey-match { display: flex; justify-content: space-between; gap: 40px; }
.ey-match-col { display: flex; flex-direction: column; gap: 22px; flex: 1; }
.ey-match-col.right { align-items: flex-end; }
.ey-match-item { display: flex; align-items: center; gap: 12px; }
.ey-match-col.right .ey-match-item { flex-direction: row-reverse; }
.ey-match-item .emoji { font-size: 52px; line-height: 1; }
.ey-match-item .word { font-size: 22px; font-weight: 700; color: #334155; }
.ey-match-dot {
    width: 16px; height: 16px; border-radius: 50%;
    border: 2px solid #667eea; background: #fff; flex: 0 0 auto;
}
/* Picture pick */
.ey-picture-row { display: flex; gap: 22px; flex-wrap: wrap; }
.ey-picture-card {
    width: 120px; height: 120px;
    border: 2px solid #e2e8f0; border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    font-size: 62px; line-height: 1;
}

@media print {
    /* Early-years printable activities — force exact colors & keep whole */
    .ey-block {
        page-break-inside: avoid;
        break-inside: avoid;
        margin: 16px 0;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
        color-adjust: exact !important;
    }
    .ey-instruction .ey-num { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
    .ey-color-emoji, .ey-count-objects, .ey-phonics-pic .emoji, .ey-picture-card, .ey-match-item .emoji {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
        color-adjust: exact !important;
    }
}