/* =========================================================
   MEGA TECH
   INTERACTIVE SYSTEM RESISTANCE CALCULATOR
========================================================= */

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 36px 18px;

    background: #f5f7fa;

    color: #071b3a;

    font-family:
        Inter,
        Arial,
        Helvetica,
        sans-serif;
}


/* =========================================================
   ROOT
========================================================= */

.system-resistance-calculator {

    --blue: #1677ff;
    --blue-soft: #eef6ff;
    --navy: #071b3a;
    --text: #243d59;
    --muted: #687b91;
    --border: #d9e4ef;
    --panel: #f7f9fc;
    --white: #ffffff;
    --red: #e55252;

    width: 100%;
    max-width: 900px;

    margin: 0 auto;

    padding: 30px;

    font-family:
        Inter,
        Arial,
        Helvetica,
        sans-serif;

    background: var(--white);

    border: 1px solid var(--border);
    border-radius: 24px;

    container-type: inline-size;
}


/* =========================================================
   HEADER
========================================================= */

.calc-eyebrow {

    margin-bottom: 8px;

    color: var(--blue);

    font-size: 12px;
    font-weight: 800;

    letter-spacing: .13em;
}


.calc-title {

    margin: 0;

    color: var(--navy);

    font-size: 31px;
    line-height: 1.15;

    letter-spacing: -.025em;
}


.calc-description {

    max-width: 760px;

    margin: 11px 0 0;

    color: var(--muted);

    font-size: 14px;
    line-height: 1.65;
}


.divider {

    height: 1px;

    margin: 22px 0;

    background: #e5ebf2;
}


/* =========================================================
   INPUT SECTION
========================================================= */

.design-panel {

    padding: 20px;

    background: var(--panel);

    border: 1px solid var(--border);
    border-radius: 18px;
}


.design-heading {

    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 20px;

    margin-bottom: 17px;
}


.design-heading h3 {

    margin: 0;

    font-size: 16px;
}


.design-heading p {

    max-width: 410px;

    margin: 0;

    color: var(--muted);

    font-size: 11px;
    line-height: 1.5;

    text-align: right;
}


.input-grid {

    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 16px;
}


.field {

    min-width: 0;
}


.field-top {

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 10px;

    margin-bottom: 7px;
}


.field-label {

    color: var(--text);

    font-size: 12px;
    font-weight: 750;
}


.field-hint {

    color: #8392a5;

    font-size: 10px;
}


.input-wrap {

    position: relative;
}


.number-input {

    display: block;

    width: 100%;
    height: 44px;

    padding:
        0
        58px
        0
        13px;

    color: var(--navy);

    background: var(--white);

    border: 1px solid #cbd7e4;
    border-radius: 11px;

    outline: none;

    font: inherit;
    font-size: 14px;
    font-weight: 750;
}


.number-input:focus {

    border-color: var(--blue);

    box-shadow:
        0 0 0 3px
        rgba(22, 119, 255, .10);
}


.input-unit {

    position: absolute;

    top: 50%;
    right: 12px;

    transform: translateY(-50%);

    color: #76889c;

    font-size: 11px;

    pointer-events: none;
}


/* =========================================================
   FORMULA STRIP
========================================================= */

.formula-strip {

    display: grid;

    grid-template-columns:
        1fr auto 1fr auto 1.1fr;

    align-items: center;

    gap: 12px;

    margin-top: 16px;
}


.formula-item {

    min-width: 0;

    padding: 13px;

    text-align: center;

    background: #ffffff;

    border: 1px solid var(--border);
    border-radius: 13px;
}


.formula-label {

    color: #73859b;

    font-size: 9px;
    font-weight: 800;

    letter-spacing: .07em;
}


.formula-number {

    margin-top: 6px;

    color: var(--navy);

    font-size: 20px;
    font-weight: 850;

    white-space: nowrap;
}


.formula-operator {

    color: #8394a8;

    font-size: 21px;
    font-weight: 800;
}


.k-result {

    background: var(--blue-soft);

    border-color: #bfd9ff;
}


.k-result .formula-number {

    color: var(--blue);
}


/* =========================================================
   INTERACTION AREA
========================================================= */

.interaction-layout {

    display: grid;

    grid-template-columns:
        minmax(0, 1.35fr)
        minmax(220px, .65fr);

    gap: 20px;

    align-items: stretch;

    margin-top: 20px;
}


.chart-panel,
.target-panel {

    min-width: 0;

    border: 1px solid var(--border);
    border-radius: 18px;
}


/* =========================================================
   CHART
========================================================= */

.chart-panel {

    padding: 17px 16px 13px;

    background: #ffffff;
}


.chart-heading {

    display: flex;

    align-items: flex-start;
    justify-content: space-between;

    gap: 15px;

    margin-bottom: 8px;
}


.chart-heading h3 {

    margin: 0;

    font-size: 14px;
}


.chart-heading span {

    color: var(--muted);

    font-size: 10px;

    text-align: right;
}


.canvas-wrap {

    width: 100%;

    min-height: 300px;
}


#systemCurveCanvas {

    display: block;

    width: 100%;
    height: 300px;
}


/* =========================================================
   TARGET PANEL
========================================================= */

.target-panel {

    padding: 18px;

    background: var(--panel);
}


.target-panel h3 {

    margin: 0;

    font-size: 15px;
}


.target-description {

    margin: 7px 0 20px;

    color: var(--muted);

    font-size: 11px;
    line-height: 1.5;
}


.slider-heading {

    display: flex;

    justify-content: space-between;

    gap: 15px;

    margin-bottom: 11px;

    font-size: 12px;
    font-weight: 700;
}


.slider-value {

    color: var(--blue);

    font-weight: 850;
}


input[type="range"] {

    display: block;

    width: 100%;

    margin: 0;

    accent-color: var(--blue);
}


.range-scale {

    display: flex;

    justify-content: space-between;

    margin-top: 5px;

    color: #8392a5;

    font-size: 9px;
}


/* =========================================================
   TARGET RESULT
========================================================= */

.target-result {

    margin-top: 20px;

    padding: 18px 13px;

    text-align: center;

    background: var(--blue);

    border-radius: 16px;
}


.target-result-label {

    color: #dfebff;

    font-size: 9px;
    font-weight: 800;

    letter-spacing: .08em;
}


.target-pressure {

    margin-top: 9px;

    color: #ffffff;

    font-size: 31px;
    line-height: 1;

    font-weight: 900;

    white-space: nowrap;
}


.target-equation {

    margin-top: 11px;

    color: #dceaff;

    font-size: 10px;
    line-height: 1.5;
}


/* =========================================================
   RATIO INSIGHT
========================================================= */

.insight {

    margin-top: 14px;

    padding: 13px;

    background: #ffffff;

    border: 1px solid var(--border);
    border-radius: 12px;
}


.insight-label {

    color: #788a9f;

    font-size: 9px;

    margin-bottom: 5px;
}


.insight-value {

    color: var(--navy);

    font-size: 14px;
    font-weight: 800;
}


.insight-value strong {

    color: var(--blue);
}


/* =========================================================
   TABLE
========================================================= */

.table-section {

    margin-top: 20px;
}


.table-header {

    display: flex;

    align-items: flex-end;
    justify-content: space-between;

    gap: 15px;

    margin-bottom: 10px;
}


.table-header h3 {

    margin: 0;

    font-size: 15px;
}


.table-header span {

    color: var(--muted);

    font-size: 10px;

    text-align: right;
}


.table-wrap {

    overflow-x: auto;

    border: 1px solid var(--border);
    border-radius: 14px;
}


.resistance-table {

    width: 100%;

    border-collapse: collapse;

    background: #ffffff;
}


.resistance-table th,
.resistance-table td {

    padding: 12px 14px;

    text-align: left;

    border-bottom: 1px solid #e8edf3;

    white-space: nowrap;
}


.resistance-table th {

    color: #65788f;

    background: #f7f9fc;

    font-size: 10px;
    font-weight: 800;

    letter-spacing: .04em;
}


.resistance-table td {

    color: var(--text);

    font-size: 12px;
}


.resistance-table tbody tr:last-child td {

    border-bottom: none;
}


.resistance-table .pressure-cell {

    color: var(--blue);

    font-weight: 850;
}


.resistance-table .known-row {

    background: #f8fbff;
}


.resistance-table .target-row {

    background: #eef6ff;
}


.row-badge {

    display: inline-block;

    margin-left: 7px;

    padding: 3px 6px;

    color: var(--blue);

    background: #e7f1ff;

    border-radius: 999px;

    font-size: 8px;
    font-weight: 800;

    vertical-align: middle;
}


/* =========================================================
   TEACHING CALLOUT
========================================================= */

.teaching-callout {

    display: grid;

    grid-template-columns:
        auto 1fr;

    gap: 14px;

    align-items: center;

    margin-top: 20px;

    padding: 17px 18px;

    background: var(--blue-soft);

    border-left: 4px solid var(--blue);
    border-radius: 8px 14px 14px 8px;
}


.teaching-number {

    color: var(--blue);

    font-size: 28px;
    font-weight: 900;
}


.teaching-text {

    color: #4e6680;

    font-size: 11px;
    line-height: 1.55;
}


.teaching-text strong {

    color: var(--navy);
}


/* =========================================================
   NOTE
========================================================= */

.engineering-note {

    margin-top: 18px;

    color: #718297;

    font-size: 10px;
    line-height: 1.6;
}


.engineering-note strong {

    color: #445a73;
}


/* =========================================================
   ERROR
========================================================= */

.error-message {

    display: none;

    margin-top: 12px;

    padding: 10px 12px;

    color: #9b3434;

    background: #fff5f5;

    border: 1px solid #f1cccc;
    border-radius: 9px;

    font-size: 11px;
}


/* =========================================================
   ARTICLE WIDTH RESPONSIVE
========================================================= */

@container (max-width: 700px) {

    .interaction-layout {

        grid-template-columns: 1fr;
    }


    .target-panel {

        display: grid;

        grid-template-columns:
            minmax(0, 1fr)
            minmax(180px, .75fr);

        column-gap: 20px;
    }


    .target-panel h3,
    .target-description {

        grid-column: 1 / -1;
    }


    .target-result {

        margin-top: 0;
    }


    .insight {

        grid-column: 1 / -1;
    }

}


@container (max-width: 560px) {

    .input-grid {

        grid-template-columns: 1fr;
    }


    .formula-strip {

        grid-template-columns: 1fr;
    }


    .formula-operator {

        text-align: center;
    }


    .target-panel {

        display: block;
    }


    .target-result {

        margin-top: 20px;
    }


    .teaching-callout {

        grid-template-columns: 1fr;
    }

}


@container (max-width: 420px) {

    .system-resistance-calculator {

        padding: 20px 15px;
    }


    .calc-title {

        font-size: 25px;
    }


    .design-heading {

        display: block;
    }


    .design-heading p {

        margin-top: 6px;

        text-align: left;
    }


    #systemCurveCanvas {

        height: 260px;
    }

}


/* =========================================================
   NORMAL VIEWPORT FALLBACK
========================================================= */

@media (max-width: 600px) {

    body {

        padding: 12px 8px;
    }

}