﻿<style >
/* ========== RESET & BASE STYLES ========== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Use a clean, highly legible font system. 
           Fixed physical units where appropriate to maintain dimensions 
           across print and screen. Avoid fragile viewport-relative units 
           that might collapse in print preview. */
body {
    background: #e2e8f0;
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
    line-height: 1.5;
    padding: 2rem 1rem;
    /* Base background for screen, but print background is preserved via -webkit-print-color-adjust */
}

.column1 {
    display: none !important;
}

.column2 {
    display: none !important;
}

.column3 {
    display: none !important;
}

.column4 {
    width: 45px;
    font-size: small;
}

.column5 {
    width: 120px;
    color: blue;
    font-size: small;
}

.column6 {
    width: 60px;
    font-size: small;
}

.column7 {
    width: 120px;
    color: blue;
    font-size: small;
}
.headerText {
    display: none !important;
}
.panel-overlay {
    visibility: visible;
    position: absolute;
    background: #ffffff;

    left: 0px;
    top: 0px;
    padding: 0px;
    z-index: 9999;
}

#fixedheight {
    table-layout: fixed;
}

    #fixedheight td div {
        height: 30px;
        vertical-align: central;
        overflow: hidden;
    }

table {
    border-collapse: collapse;
}

table, th, td {
    border: 1px solid black;
    padding: 2px;
}

/* Main container uses max-width with fixed margins, avoids percentage squish.
           Using 'width: 100%' with max-width in absolute units ensures consistent reading.
           For print, mm/in units hold actual physical size. */
.print-container {
    max-width: 1200px;
    margin: 0 auto;
    background: white;
    border-radius: 24px;
    box-shadow: 0 20px 35px -12px rgba(0,0,0,0.15);
    overflow: hidden;
    transition: all 0.2s;
}

/* Inner content area: consistent padding in px, which translates reliably to print.
           Also keep borders and spacing intact. */
.content-card {
    padding: 2rem 2rem 2.5rem 2rem;
}

/* Headers with precise sizing */
h1 {
    font-size: 2.2rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    background: linear-gradient(135deg, #1E2B3C, #2c3e66);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    margin-bottom: 0.5rem;
    /* fallback for print: solid color if gradients are trouble but we use print-color-adjust */
}

/* ensure fallback for print: across major browsers, gradients are printed as solid sometimes, 
           but not a sizing issue. We'll keep a clean solid border as well */
.subhead {
    font-size: 1.1rem;
    color: #2c3e50;
    border-left: 4px solid #3b82f6;
    padding-left: 1rem;
    margin: 0.75rem 0 1.5rem 0;
    font-weight: 500;
}

/* GRID layout – using fixed min-width + fraction ensures items do not shrink unexpectedly.
           Print media will respect same dimensions. */
.feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.8rem;
    margin: 2rem 0;
}

.feature-card {
    background: #f8fafc;
    padding: 1.5rem;
    border-radius: 20px;
    border: 1px solid #e2edf2;
    transition: all 0.2s ease;
    /* preserve exact width relationship: grid columns do the heavy lifting, 
               content inside stays stable */
}

    .feature-card h3 {
        font-size: 1.5rem;
        font-weight: 600;
        margin-bottom: 0.75rem;
        color: #0f172a;
    }

    .feature-card p {
        color: #334155;
        font-size: 0.95rem;
    }

.icon-emblem {
    font-size: 2.2rem;
    margin-bottom: 0.75rem;
    display: inline-block;
}

/* Data table – precise border and sizing */
.spec-table {
    width: 100%;
    border-collapse: collapse;
    margin: 2rem 0 1.5rem;
    font-size: 0.95rem;
}

    .spec-table th, .spec-table td {
        border: 1px solid #cbd5e1;
        padding: 0.9rem 1rem;
        text-align: left;
        vertical-align: top;
    }

    .spec-table th {
        background-color: #f1f5f9;
        font-weight: 600;
        color: #0c4a6e;
    }

/* color blocks to demonstrate sizing consistency, but also helpful for print test */
.size-demo {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin: 1.8rem 0;
    justify-content: space-between;
}

.size-box {
    background: #eef2ff;
    border-radius: 16px;
    padding: 0.8rem;
    text-align: center;
    flex: 1;
    min-width: 100px;
    border: 1px solid #b9d0f0;
}

    .size-box .dimension {
        font-weight: 700;
        font-size: 1.1rem;
        font-family: monospace;
        background: white;
        display: inline-block;
        padding: 0.2rem 0.8rem;
        border-radius: 40px;
        margin-top: 0.4rem;
    }

/* image container – force absolute dimensions to preserve aspect and size in print */
.image-demo {
    margin: 1.5rem 0;
    text-align: center;
}

    .image-demo img {
        max-width: 100%;
        height: auto;
        border-radius: 20px;
        box-shadow: 0 8px 20px rgba(0,0,0,0.05);
        /* specifying explicit width gives print control */
        width: 100%;
        max-width: 380px;
        border: 1px solid #ddd;
    }

/* Buttons – interactive for screen, but print won’t trigger, but size remains */
.action-buttons {
    display: flex;
    gap: 1rem;
    margin: 2rem 0 1rem;
    flex-wrap: wrap;
}

.btn {
    display: inline-block;
    background: #1e293b;
    color: white;
    padding: 0.7rem 1.4rem;
    border-radius: 60px;
    font-weight: 500;
    text-decoration: none;
    font-size: 0.9rem;
    border: none;
    cursor: pointer;
    transition: 0.2s;
}

.btn-print {
    background: #2563eb;
}

    .btn-print:hover {
        background: #1d4ed8;
    }

.btn-outline {
    background: transparent;
    border: 1px solid #1e293b;
    color: #1e293b;
}

footer {
    margin-top: 2rem;
    text-align: center;
    font-size: 0.8rem;
    border-top: 1px solid #e2e8f0;
    padding-top: 1.5rem;
    color: #475569;
}

/* ========== PRINT STYLESHEET CRITICAL FOR SIZING PRESERVATION ========== */
/* This ensures that when printing (or using Chrome "Save as PDF" / Print Preview), 
           all sizes, widths, margins, paddings remain exactly as designed.
           Avoid any scaling transformations, disable orphan resets that would alter dimensions. */
@media print {
    /* Reset background colors and enforce printing of background graphics 
               to preserve gradient looks and box backgrounds */
    * {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
        color-adjust: exact !important;
    }

    body {
        background: white;
        padding: 0;
        margin: 0;
    }

    /* Ensure container does not get extra margins or shrink */
    .print-container {
        max-width: 100%;
        margin: 0;
        border-radius: 0;
        box-shadow: none;
        background: white;
    }

    .content-card {
        padding: 0.8cm 0.6cm; /* using physical units to maintain exact positioning on paper */
    }

    /* Preserve font sizes and line-heights identically to screen styles */
    h1 {
        font-size: 24pt;
        margin-bottom: 0.2cm;
        color: #0f172a !important;
        background: none !important;
        -webkit-background-clip: unset !important;
        background-clip: unset !important;
    }

    .subhead {
        font-size: 12pt;
        margin: 0.2cm 0 0.4cm;
        border-left-width: 2pt;
    }

    .feature-grid {
        gap: 0.4cm;
        margin: 0.5cm 0;
        grid-template-columns: repeat(auto-fit, minmax(220pt, 1fr));
    }

    .feature-card {
        break-inside: avoid;
        page-break-inside: avoid;
        border: 1px solid #aaa;
        padding: 0.3cm;
        background: #f9f9f9;
    }

    .spec-table th, .spec-table td {
        padding: 0.2cm 0.25cm;
        border: 1px solid #000;
    }

    .size-box {
        break-inside: avoid;
        padding: 0.2cm;
        min-width: 80pt;
    }

    .btn, .action-buttons .btn {
        display: none; /* hide interactive buttons on print */
    }

    /* Ensure image retains original dimensions and no unexpected scaling */
    .image-demo img {
        max-width: 4in;
        width: auto;
        height: auto;
        box-shadow: none;
    }

    /* avoid any margin collapse that changes actual layout size */
    .size-demo {
        gap: 0.3cm;
    }

    footer {
        font-size: 8pt;
        margin-top: 0.3cm;
    }

    /* force table layout to use exact dimensions */
    .spec-table {
        width: 100%;
    }

    /* Ensure absolute units like px are rendered correctly on print, 
               no extra scaling by browser */
    html, body {
        width: 100%;
        height: auto;
    }
}

/* For additional robustness: any screen sizing retains integrity, 
           and print media above uses physical units for padding/margins to mimic original sizing 
           while also enforcing that widths and heights do not shift. */
@media screen and (max-width: 640px) {
    .content-card {
        padding: 1.5rem;
    }

    h1 {
        font-size: 1.8rem;
    }
    /* responsive for narrow screens is fine; but print layout remains independent 
               and uses physical units, so print sizing remains consistent across devices */
}

/* For high dpi screens, preserve sharpness */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    body {
        -webkit-font-smoothing: antialiased;
    }
}

</style >