/* 
 * Handwriting Worksheet System - V3.2 (Premium 2026)
 * Precision-engineered for A4/Letter printing
 * Aligned with worksheet-base.css design system
 */

/* =========================================
   1. PAGE LAYOUT & PAPER SIZES
   ========================================= */
.handwriting-app {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    padding: 20px;
}

.sheet {
    background: #ffffff !important;
    box-shadow: 
        0 4px 6px -1px rgba(0, 0, 0, 0.1),
        0 10px 20px -5px rgba(0, 0, 0, 0.1),
        0 25px 50px -12px rgba(0, 0, 0, 0.15);
    margin-bottom: 40px;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    border-radius: 4px;
    color: #000 !important;
    box-sizing: border-box;
    transition: box-shadow 0.2s ease;
}

.sheet:hover {
    box-shadow: 
        0 8px 12px -2px rgba(0, 0, 0, 0.1),
        0 16px 32px -8px rgba(0, 0, 0, 0.15),
        0 32px 64px -16px rgba(0, 0, 0, 0.2);
}

/* A4 Dimensions: 210mm x 297mm (with 1mm buffer for print safety) */
.sheet.a4 {
    width: 210mm;
    height: 296mm;
    min-height: 296mm;
    max-height: 296mm;
    padding: 10mm;
}

/* Letter Dimensions: 8.5in x 11in (with 1.4mm buffer for print safety) */
.sheet.letter {
    width: 215.9mm;
    height: 278mm;
    min-height: 278mm;
    max-height: 278mm;
    padding: 10mm;
}

/* Header Area */
.sheet-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 2px solid #000;
    margin-bottom: 4mm;
    padding-bottom: 2mm;
    flex-shrink: 0;
}

.header-brand img {
    height: 32px;
    width: auto;
    object-fit: contain;
}

.header-fields {
    display: grid;
    grid-template-columns: auto auto;
    gap: 6px 20px;
    align-items: center;
}

.field {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-family: 'Nunito', -apple-system, sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: #000 !important;
    flex-shrink: 0;
}

.field:first-child {
    grid-column: 1 / -1;
    justify-self: end;
}

.field-label {
    font-size: 14px;
    font-family: 'Nunito', -apple-system, sans-serif;
    color: #000 !important;
    font-weight: 500;
}

.field-line {
    width: 100px;
    min-width: 100px;
    height: 1em;
    border-bottom: 1px solid #000 !important;
    display: inline-block;
    flex-shrink: 0;
}

.field-line.long { 
    width: 300px;
    min-width: 300px;
}

/* Footer Area Removed */

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

.writing-row {
    position: relative;
    width: 100%;
    display: flex;
    align-items: flex-start;
    margin-bottom: 0;
    overflow: hidden;
}

/* Guide Lines */
.guide-lines {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 0;
    pointer-events: none;
}

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

.line.top {
    background-color: #3b82f6; /* Blue */
    top: 0;
}

.line.mid {
    border-top: 1px dashed #94a3b8; /* Gray Dashed */
    background: transparent;
    height: 0;
}

.line.base {
    background-color: #ef4444; /* Red */
    height: 1.5px;
}

.line.bottom {
    background-color: #e2e8f0; /* Light Gray */
}

/* Layout Sizes */
.layout-large { height: 48mm; }
.layout-medium { height: 32mm; }
.layout-small { height: 24mm; }

/* 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; }

/* 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; }

/* 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; }

/* =========================================
   3. 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;
}

/* 
   The Text Line Container
   This positions the baseline of the text relative to the grid.
   We use a single font size for the entire line to ensure consistency.
   
   Calculations for Comic Neue (approximate):
   - Cap Height is ~72% of Font Size
   - Ascent is ~78% of Font Size
   
   Target:
   - Cap Height = Distance(Top, Base)
   - Baseline = Base Line Position
*/

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

/* 
   LARGE LAYOUT (48mm)
   Top: 9mm, Base: 33mm -> Cap Height Target: 24mm
   Font Size: 24 / 0.72  33.5mm
   Ascent: 33.5 * 0.78  26mm
   Top Position: Base(33) - Ascent(26) = 7mm
*/
.layout-large .text-line {
    font-size: 33.5mm;
    top: 7mm;
}

/* 
   MEDIUM LAYOUT (32mm)
   Top: 6mm, Base: 22mm -> Cap Height Target: 16mm
   Font Size: 16 / 0.72  22.2mm
   Ascent: 22.2 * 0.78  17.3mm
   Top Position: Base(22) - Ascent(17.3) = 4.7mm
*/
.layout-medium .text-line {
    font-size: 22.2mm;
    top: 4.7mm;
}

/* 
   SMALL LAYOUT (24mm)
   Top: 4.5mm, Base: 16.5mm -> Cap Height Target: 12mm
   Font Size: 12 / 0.72  16.7mm
   Ascent: 16.7 * 0.78  13mm
   Top Position: Base(16.5) - Ascent(13) = 3.5mm
*/
.layout-small .text-line {
    font-size: 16.7mm;
    top: 3.5mm;
}

/* Individual Text Items (Words or Letters) */
.text-item {
    position: relative;
}

/* Styles */
.style-solid {
    color: #0f172a; /* Slate-900 */
}

.style-trace {
    color: #e2e8f0; /* Slate-200 fill */
    -webkit-text-stroke: 1.5px #94a3b8; /* Slate-400 stroke - Thicker for visibility */
}

.style-empty {
    opacity: 0;
}

/* =========================================
   4. PRINT STYLES
   ========================================= */
@media print {
    @page { 
        size: A4 portrait;
        margin: 0;
    }

    * {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
        color-adjust: exact !important;
    }

    /* Hide UI elements */
    html, body {
        margin: 0 !important;
        padding: 0 !important;
        background: white !important;
    }

    body, .handwriting-app {
        background: white !important;
        padding: 0 !important;
        margin: 0 !important;
        display: block !important;
    }

    /* Flatten container hierarchy */
    .handwriting-app {
        display: block !important;
        width: 100% !important;
    }

    /* The Sheet (Paper) - each sheet = exactly one printed page */
    .sheet {
        /* Clean print appearance */
        box-shadow: none !important;
        border: none !important;
        border-radius: 0 !important;
        margin: 0 !important;
        
        /* Match paper size with buffer */
        padding: 10mm !important;
        
        /* Page breaks */
        page-break-after: always !important;
        page-break-inside: avoid !important;
        
        /* Prevent overflow */
        overflow: hidden !important;
    }
    
    .sheet.a4 {
        width: 210mm !important;
        height: 296mm !important;
        min-height: 296mm !important;
        max-height: 296mm !important;
    }
    
    .sheet.letter {
        width: 215.9mm !important;
        height: 278mm !important;
        min-height: 278mm !important;
        max-height: 278mm !important;
    }

    .sheet:last-child {
        page-break-after: avoid !important;
    }

    .grid-container {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        overflow: hidden !important;
        justify-content: space-between !important;
        height: 100% !important;
    }
    
    .writing-row {
        break-inside: avoid !important;
        page-break-inside: avoid !important;
        overflow: hidden !important;
    }

    /* Force guide line colors */
    .line.top { background-color: #3b82f6 !important; height: 0.4mm !important; }
    .line.mid { background-color: #94a3b8 !important; height: 0.3mm !important; }
    .line.base { background-color: #ef4444 !important; height: 0.6mm !important; }
    .line.bottom { background-color: #cbd5e1 !important; height: 0.4mm !important; }

    /* Force line positions */
    .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; }

    .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; }

    .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: 7mm !important;
    }

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

    .layout-small .text-line {
        font-size: 16.7mm !important;
        top: 3.5mm !important;
    }
    
    .style-solid { color: #000 !important; }
    .style-trace { 
        color: #e2e8f0 !important;
        -webkit-text-stroke: 1px #94a3b8 !important;
    }
    
    .sheet-header { border-bottom-color: #000 !important; }
    .sheet-footer { border-top-color: #ccc !important; color: #666 !important; }
}

/* Responsive - Match worksheet-base.css patterns */
@media (max-width: 1024px) {
    .handwriting-app { 
        padding: 10px;
        width: 100%;
    }
    
    /* Scale sheet to fit mobile screen */
    .sheet,
    .sheet.a4,
    .sheet.letter { 
        width: calc(100vw - 32px);
        max-width: 100%;
        min-width: auto;
        height: auto; 
        min-height: auto;
        max-height: none;
        aspect-ratio: 210/297; 
        padding: 4%;
        box-sizing: border-box;
    }
    
    .writing-row { 
        --row-height: clamp(16px, 6vw, 24mm); 
    }
    
    .text-layer {
        left: 4%;
        right: 4%;
    }
    
    .text-line {
        left: 0;
        right: 0;
    }
    
    /* Scale font sizes for mobile */
    .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) {
    .sheet,
    .sheet.a4,
    .sheet.letter { 
        width: calc(100vw - 48px);
        max-width: 500px;
        padding: 5%;
    }
    
    .text-layer {
        left: 5%;
        right: 5%;
    }
}

/* Phone */
@media (max-width: 600px) {
    .sheet,
    .sheet.a4,
    .sheet.letter { 
        width: calc(100vw - 24px);
        max-width: 100%;
        min-width: auto;
        padding: 3%;
    }
    
    .text-layer {
        left: 3%;
        right: 3%;
    }
    
    .sheet-header {
        padding-bottom: 1%;
        margin-bottom: 2%;
    }
    
    .header-brand img {
        height: clamp(12px, 3.5vw, 24px);
    }
    
    .header-fields {
        gap: 2px 8px;
    }
    
    .field {
        font-size: clamp(8px, 2vw, 11px);
    }
    
    .field-line {
        width: clamp(30px, 10vw, 60px);
        min-width: auto;
    }
    
    .field-line.long {
        width: clamp(60px, 20vw, 180px);
        min-width: auto;
    }
    
    /* Scale row heights for mobile */
    .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%; }
}