/*
 * Number Tracing Worksheets – V2.1 (Premium 2026)
 * Self-contained structural + visual styles for number tracing.
 * Uses sheet-common.css for .sheet sizing and .sheet-header.
 */

/* =========================================
   1. GRID CONTAINER
   ========================================= */
.grid-container {
    display: flex;
    flex-direction: column;
    width: 100%;
    flex: 1 1 auto;
    min-height: 0;
    justify-content: flex-start;
    overflow: hidden;
}

/* =========================================
   2. WRITING ROW
   ========================================= */
.writing-row {
    position: relative;
    width: 100%;
    display: flex;
    align-items: flex-start;
    margin-bottom: 0;
    overflow: hidden;
}

/* ── Size variants ── */
.layout-large {
    height: 48mm;
}

.layout-medium {
    height: 32mm;
}

.layout-small {
    height: 24mm;
}

/* =========================================
   3. GUIDE LINES
   ========================================= */
.guide-lines {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 0;
    pointer-events: none;
}

.guide-lines .line {
    position: absolute;
    left: 0;
    right: 0;
    height: 1px;
}

/* Top line (ascender) — blue */
.guide-lines .line.top {
    background-color: #3b82f6;
}

/* Mid line (x-height) — gray dashed */
.guide-lines .line.mid {
    border-top: 1px dashed #94a3b8;
    background: transparent;
    height: 0;
}

/* Base line (main writing line) — amber for numbers */
.guide-lines .line.base {
    background-color: #f59e0b;
    height: 1.5px;
}

/* Bottom line (descender) — light gray */
.guide-lines .line.bottom {
    background-color: #e2e8f0;
}

/* ── Guide Line Positions: LARGE (48mm) ── */
.layout-large .line.top    { top: 9mm; }
.layout-large .line.mid    { top: 21mm; }
.layout-large .line.base   { top: 33mm; }
.layout-large .line.bottom { top: 45mm; }

/* ── Guide Line Positions: MEDIUM (32mm) ── */
.layout-medium .line.top    { top: 6mm; }
.layout-medium .line.mid    { top: 14mm; }
.layout-medium .line.base   { top: 22mm; }
.layout-medium .line.bottom { top: 30mm; }

/* ── Guide Line Positions: SMALL (24mm) ── */
.layout-small .line.top    { top: 4.5mm; }
.layout-small .line.mid    { top: 10.5mm; }
.layout-small .line.base   { top: 16.5mm; }
.layout-small .line.bottom { top: 22.5mm; }

/* =========================================
   4. TEXT CONTENT
   ========================================= */
.text-layer {
    position: absolute;
    top: 0;
    left: 10mm;
    right: 10mm;
    bottom: 0;
    z-index: 1;
    display: flex;
    align-items: flex-start;
    overflow: hidden;
}

.text-line {
    position: absolute;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: row;
    align-items: baseline;
    justify-content: space-between;
    font-weight: bold;
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
}

.text-item {
    position: relative;
}

/*
 * Number font-size & top offset.
 * Nudged up ~1mm vs handwriting so numbers visually touch the top line.
 */
.layout-large .text-line {
    font-size: 33.5mm;
    top: 5.8mm;
}

.layout-medium .text-line {
    font-size: 22.2mm;
    top: 3.9mm;
}

.layout-small .text-line {
    font-size: 16.7mm;
    top: 2.9mm;
}

/* =========================================
   5. TEXT STYLES (solid / trace / empty)
   ========================================= */
/* Solid style — dark text (the model number) */
.style-solid {
    color: #0f172a;
}

/* Trace style — light fill with visible stroke */
.style-trace {
    color: #e2e8f0;
    -webkit-text-stroke: 1.5px #94a3b8;
}

/* Empty style — invisible placeholder for spacing */
.style-empty {
    opacity: 0;
}

/* Dashed style — number outline shown as dashes for connect/trace */
.style-dots {
    color: transparent;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke: 2.5px #94a3b8;
    /* Diagonal stripe mask creates dashed effect on the stroke */
    -webkit-mask-image: repeating-linear-gradient(
        135deg,
        #000 0px, #000 3px,
        transparent 3px, transparent 6px
    );
    mask-image: repeating-linear-gradient(
        135deg,
        #000 0px, #000 3px,
        transparent 3px, transparent 6px
    );
}

.layout-large .style-dots {
    -webkit-text-stroke: 3.5px #94a3b8;
    -webkit-mask-image: repeating-linear-gradient(
        135deg,
        #000 0px, #000 5px,
        transparent 5px, transparent 10px
    );
    mask-image: repeating-linear-gradient(
        135deg,
        #000 0px, #000 5px,
        transparent 5px, transparent 10px
    );
}

.layout-medium .style-dots {
    -webkit-text-stroke: 3px #94a3b8;
    -webkit-mask-image: repeating-linear-gradient(
        135deg,
        #000 0px, #000 4px,
        transparent 4px, transparent 8px
    );
    mask-image: repeating-linear-gradient(
        135deg,
        #000 0px, #000 4px,
        transparent 4px, transparent 8px
    );
}

/* Row Label — number being practiced, shown at left margin */
.row-label {
    position: absolute;
    left: 2mm;
    z-index: 2;
    font-weight: 900;
    color: #6366f1;
    font-family: 'Comic Neue', cursive;
    background: rgba(255, 255, 255, 0.85);
    padding: 1px 3px;
    border-radius: 4px;
    pointer-events: none;
}

.layout-large .row-label {
    font-size: 14px;
    top: 8mm;
}

.layout-medium .row-label {
    font-size: 11px;
    top: 5mm;
}

.layout-small .row-label {
    font-size: 9px;
    top: 4mm;
}

/* Start Arrow — shows writing direction */
.start-arrow {
    position: absolute;
    top: -0.8em;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.35em;
    color: #ef4444;
    font-weight: 900;
    pointer-events: none;
    line-height: 1;
}

/* Instruction text */
.instruction-text {
    font-size: 13px;
    font-weight: 600;
    color: #555;
    text-align: center;
    padding: 6px 16px;
    border-bottom: 1px dashed #ccc;
    font-style: italic;
}

/* =========================================
   PRINT STYLES
   ========================================= */
@media print {
    * {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
        color-adjust: exact !important;
    }

    .grid-container {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        overflow: hidden !important;
        justify-content: flex-start !important;
    }

    .writing-row {
        break-inside: avoid !important;
        page-break-inside: avoid !important;
        overflow: hidden !important;
    }

    /* Force guide line colors and widths */
    .guide-lines .line.top {
        background-color: #3b82f6 !important;
        height: 0.4mm !important;
    }

    .guide-lines .line.mid {
        border-top: none !important;
        background-color: #94a3b8 !important;
        height: 0.3mm !important;
    }

    .guide-lines .line.base {
        background-color: #f59e0b !important;
        height: 0.6mm !important;
    }

    .guide-lines .line.bottom {
        background-color: #cbd5e1 !important;
        height: 0.4mm !important;
    }

    /* Force guide line positions — LARGE */
    .layout-large .line.top    { top: 9mm !important; }
    .layout-large .line.mid    { top: 21mm !important; }
    .layout-large .line.base   { top: 33mm !important; }
    .layout-large .line.bottom { top: 45mm !important; }

    /* Force guide line positions — MEDIUM */
    .layout-medium .line.top    { top: 6mm !important; }
    .layout-medium .line.mid    { top: 14mm !important; }
    .layout-medium .line.base   { top: 22mm !important; }
    .layout-medium .line.bottom { top: 30mm !important; }

    /* Force guide line positions — SMALL */
    .layout-small .line.top    { top: 4.5mm !important; }
    .layout-small .line.mid    { top: 10.5mm !important; }
    .layout-small .line.base   { top: 16.5mm !important; }
    .layout-small .line.bottom { top: 22.5mm !important; }

    /* Force text positioning */
    .text-layer {
        overflow: hidden !important;
    }

    .text-line {
        position: absolute !important;
        left: 0 !important;
        right: 0 !important;
        display: flex !important;
        align-items: baseline !important;
        overflow: hidden !important;
    }

    .layout-large .text-line {
        font-size: 33.5mm !important;
        top: 5.8mm !important;
    }

    .layout-medium .text-line {
        font-size: 22.2mm !important;
        top: 3.9mm !important;
    }

    .layout-small .text-line {
        font-size: 16.7mm !important;
        top: 2.9mm !important;
    }

    /* Force text styles */
    .style-solid {
        color: #000 !important;
    }

    .style-trace {
        color: #e2e8f0 !important;
        -webkit-text-stroke: 1px #94a3b8 !important;
    }

    .row-label {
        color: #6366f1 !important;
    }

    .start-arrow {
        color: #ef4444 !important;
    }

    .instruction-text {
        color: #333 !important;
        border-bottom-color: #999 !important;
    }

    .style-dots {
        -webkit-text-stroke-color: #94a3b8 !important;
    }
}

/* =========================================
   RESPONSIVE — Match worksheet-base.css patterns
   ========================================= */
@media (max-width: 1024px) {
    .text-layer {
        left: 4%;
        right: 4%;
    }

    .layout-large .text-line {
        font-size: clamp(8mm, 8vw, 33.5mm);
    }

    .layout-medium .text-line {
        font-size: clamp(6mm, 6vw, 22.2mm);
    }

    .layout-small .text-line {
        font-size: clamp(4mm, 4.5vw, 16.7mm);
    }
}

/* Tablet */
@media (max-width: 900px) and (min-width: 601px) {
    .text-layer {
        left: 5%;
        right: 5%;
    }
}

/* Phone */
@media (max-width: 600px) {
    .text-layer {
        left: 3%;
        right: 3%;
    }

    /* Scale row heights */
    .layout-large {
        height: clamp(30px, 12vw, 48mm);
    }

    .layout-medium {
        height: clamp(22px, 9vw, 32mm);
    }

    .layout-small {
        height: clamp(16px, 7vw, 24mm);
    }

    /* Scale line positions proportionally */
    .layout-large .line.top    { top: 18%; }
    .layout-large .line.mid    { top: 44%; }
    .layout-large .line.base   { top: 69%; }
    .layout-large .line.bottom { top: 94%; }

    .layout-medium .line.top    { top: 19%; }
    .layout-medium .line.mid    { top: 44%; }
    .layout-medium .line.base   { top: 69%; }
    .layout-medium .line.bottom { top: 94%; }

    .layout-small .line.top    { top: 19%; }
    .layout-small .line.mid    { top: 44%; }
    .layout-small .line.base   { top: 69%; }
    .layout-small .line.bottom { top: 94%; }

    .layout-large .text-line  { top: 15%; }
    .layout-medium .text-line { top: 15%; }
    .layout-small .text-line  { top: 15%; }
}