/*
 * Graph Paper Generator – V2.0 (Premium 2026)
 * Aligned with worksheet-base.css design system
 * Uses sheet-common.css for .sheet sizing and .sheet-header
 */

/* =========================================
   0. COLOR SWATCHES
   ========================================= */
.color-swatch {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 2px;
    border: 1px solid rgba(0, 0, 0, 0.2);
    flex-shrink: 0;
}

/* =========================================
   1. SVG CONTAINER
   ========================================= */
.gp-svg-container {
    flex: 1 1 auto;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.gp-svg-container svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* =========================================
   2. PRINT OVERRIDES
   ========================================= */
@media print {

    /*
     * Sheet sizing + header pinning is in sheet-common.css.
     * Here we only add graph-paper-specific SVG print rules.
     */

    /*
     * SVG container — block box with no flex growth in print.
     * flex:none prevents the container from growing/shrinking
     * beyond its explicit dimensions (injected by JS print()).
     * Fallback without JS uses the SVG's intrinsic mm size.
     */
    .gp-svg-container {
        display: block !important;
        flex: none !important;
        overflow: hidden !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    /*
     * SVG sizing in print — fallback uses the SVG element's intrinsic
     * mm dimensions (set as width/height attributes by JS).
     * The JS print() method injects exact mm values that override
     * this rule, guaranteeing 1 viewBox unit = 1 physical mm.
     */
    .gp-svg-container svg {
        display: block !important;
        width: 100% !important;
        height: auto !important;
    }

    .gp-svg-container svg line,
    .gp-svg-container svg circle,
    .gp-svg-container svg rect,
    .gp-svg-container svg polygon {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}