/* =========================================================================
   ICE Torque Curve Calculator
   -------------------------------------------------------------------------
   Loaded only on this tool's page. Two jobs: lay the calculator out, and
   define the printed documents, which share no styling with the screen at all
   — a dark-theme page on paper is a black rectangle.
   ========================================================================= */

.ice-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-5);
    align-items: start;
}

@media (max-width: 1050px) {
    .ice-layout { grid-template-columns: minmax(0, 1fr); }
}

.ice-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
    gap: var(--space-3) var(--space-4);
}

/* ---------- The points table --------------------------------------------- */

.ice-points td { padding-block: var(--space-1); vertical-align: middle; }
.ice-points th:last-child, .ice-points td:last-child { width: 1%; }

.input--sm {
    padding: 0.3rem 0.55rem;
    font-size: var(--text-sm);
    /* Tabular figures so the rpm column does not jitter as digits change. */
    font-variant-numeric: tabular-nums;
}

.select--sm { padding: 0.3rem 1.6rem 0.3rem 0.6rem; font-size: var(--text-sm); }

/* Chrome and Safari put steppers on number inputs that eat a third of a narrow
   cell; the keyboard and the step attribute still work without them. */
.ice-points input[type="number"]::-webkit-outer-spin-button,
.ice-points input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.ice-points input[type="number"] { -moz-appearance: textfield; appearance: textfield; }

/* ---------- Figures ------------------------------------------------------- */

.ice-figures {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
    gap: var(--space-4);
    margin: 0;
}

.ice-figure dt {
    font-size: var(--text-xs);
    font-weight: 650;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-dim);
}

.ice-figure dd {
    margin: var(--space-1) 0 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ice-figure strong { font-size: var(--text-lg); letter-spacing: -0.01em; }

.chart-frame { position: relative; height: 340px; }

/* =========================================================================
   Printed documents
   -------------------------------------------------------------------------
   The sheet is built into the page and hidden, rather than opened in a new
   window: a popup blocker will stop window.open on a button click, and an
   iframe cannot see the theme's custom properties to draw the chart.
   ========================================================================= */

.print-sheet { display: none; }

/* The two unit selects sit beside the panel title, not under it: full-width
   controls in a panel head wrap and push the heading off centre. */
.ice-units {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: nowrap;
}

.ice-units .select {
    width: auto;
    min-width: 5.5rem;
}

@media print {
    /* Everything except the sheet goes, including the site chrome, so the
       first page starts at the document rather than the navigation. */
    body > *:not(#print-root) { display: none !important; }

    .print-sheet {
        display: block;
        font-family: Georgia, "Times New Roman", serif;
        color: #000;
        background: #fff;
    }

    @page { margin: 18mm 16mm; }

    .print-head {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 12mm;
        padding-bottom: 4mm;
        border-bottom: 2px solid #000;
    }

    .print-kicker {
        margin: 0 0 2mm;
        font-family: system-ui, sans-serif;
        font-size: 8pt;
        font-weight: 700;
        letter-spacing: 0.18em;
        text-transform: uppercase;
    }

    .print-head h1 { margin: 0; font-size: 18pt; line-height: 1.2; }
    .print-sub { margin: 1mm 0 0; font-size: 10pt; }

    .print-stamp {
        text-align: right;
        font-family: system-ui, sans-serif;
        font-size: 8.5pt;
        white-space: nowrap;
    }

    .print-stamp p { margin: 0; }
    .print-stamp .dim { color: #555; }

    .print-peaks {
        display: flex;
        gap: 16mm;
        margin: 4mm 0;
        padding: 3mm 0;
        border-bottom: 1px solid #999;
    }

    .print-peak-value { font-size: 26pt; font-weight: 700; line-height: 1; }
    .print-peak-unit { font-size: 12pt; margin-left: 1mm; }

    .print-peak-at {
        display: block;
        margin-top: 1mm;
        font-family: system-ui, sans-serif;
        font-size: 9pt;
        color: #444;
    }

    .print-chart {
        display: block;
        width: 100%;
        max-width: 100%;
        /* Both sheets are meant to be one page. The image is proportioned to
           land at this height on its own; the cap is a backstop for a browser
           that lays the page out differently. */
        max-height: 70mm;
        object-fit: contain;
        object-position: left top;
        margin: 5mm 0;
        border: 1px solid #ccc;
        /* Browsers strip backgrounds when printing unless told otherwise, and
           the chart's white ground is what makes the trace readable. */
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
    }

    .print-note {
        margin: 3mm 0;
        font-family: system-ui, sans-serif;
        font-size: 9pt;
        color: #333;
    }

    .print-table {
        width: 100%;
        border-collapse: collapse;
        margin-top: 4mm;
        font-family: system-ui, sans-serif;
        font-size: 9pt;
    }

    .print-table th, .print-table td {
        padding: 1.6mm 2mm;
        text-align: left;
        border-bottom: 1px solid #ddd;
        font-variant-numeric: tabular-nums;
    }

    .print-table thead th {
        border-bottom: 1.5px solid #000;
        font-size: 8pt;
        letter-spacing: 0.06em;
        text-transform: uppercase;
    }

    /* The specification sheet is a two-column list, not a data table. */
    .print-table--spec th[scope="row"] { width: 42%; font-weight: 600; }
    /* Eighteen rows of specification: a shade smaller than the run table so
       the sheet stays one page even with everything filled in. */
    .print-table--spec { font-size: 8.5pt; }
    .print-table--spec th, .print-table--spec td { padding: 0.9mm 2mm; }

    /* The specification list is long, so its chart gives up a little height —
       scaled down whole and centred rather than letterboxed in a wider box. */
    .print-table--spec + .print-chart {
        height: 56mm;
        width: auto;
        max-width: 100%;
        margin-inline: auto;
    }
    .print-table--spec .print-gap td { border: 0; height: 3mm; }

    /* The run table, split so a long list does not push the sheet onto a
       second page for no reason. */
    .print-columns {
        display: flex;
        gap: 10mm;
        align-items: flex-start;
    }

    .print-columns .print-table { flex: 1 1 0; }

    .print-foot {
        margin-top: 6mm;
        padding-top: 3mm;
        border-top: 1px solid #999;
        font-family: system-ui, sans-serif;
        font-size: 8pt;
        color: #555;
    }

    /* A run table can spill onto a second page; a row split across the break
       is unreadable, and a header stranded at the foot of a page is worse. */
    .print-table tr { break-inside: avoid; }
    .print-head, .print-peaks { break-after: avoid; }
    .print-chart { break-inside: avoid; }
}