/* =========================================================
   DAMPING SIMULATION
   style.css
========================================================= */

* {
    box-sizing: border-box;
}

:root {
    --bg: #f4f7fa;
    --card: #ffffff;
    --text: #243746;
    --muted: #6b7c88;
    --border: #dce4e9;

    --blue: #426b82;
    --blue-soft: #eaf1f5;

    --epe: #4f7185;
    --ke: #768a97;
    --mechanical: #53606a;
    --thermal: #b57b45;

    --question-bg: #f7f9fa;
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);

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

    line-height: 1.5;
}

button,
input,
textarea {
    font: inherit;
}


/* =========================================================
   PAGE
========================================================= */

.simulation-page {
    width: min(1500px, 96%);
    margin: 0 auto;

    padding:
        30px
        0
        60px;
}


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

.simulation-header {
    margin-bottom: 20px;
}

.eyebrow,
.section-label {
    margin: 0 0 5px;

    font-size: 0.75rem;
    font-weight: 700;

    letter-spacing: 0.12em;

    color: #6c7f8c;
}

.simulation-header h1 {
    margin: 0;

    font-size: clamp(
        1.8rem,
        3vw,
        2.6rem
    );

    color: #1f3c50;
}

.intro {
    max-width: 850px;

    margin:
        8px
        0
        0;

    color: var(--muted);

    font-size: 1.05rem;
}


/* =========================================================
   MODEL INFORMATION
========================================================= */

.problem-card {
    display: flex;

    align-items: center;

    gap: 30px;

    padding: 16px 20px;

    margin-bottom: 16px;

    background: var(--card);

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

    border-radius: 12px;
}

.problem-title {
    font-weight: 700;

    color: #3d596b;

    white-space: nowrap;
}

.problem-values {
    display: flex;

    flex-wrap: wrap;

    gap: 35px;
}

.problem-values div {
    display: flex;

    flex-direction: column;

    gap: 2px;
}

.problem-values span {
    color: var(--muted);

    font-size: 0.78rem;
}

.problem-values strong {
    font-size: 0.95rem;

    color: #314b5c;
}


/* =========================================================
   CONTROLS
========================================================= */

.controls {
    display: flex;

    flex-wrap: wrap;

    align-items: center;

    gap: 9px;

    margin-bottom: 20px;

    padding: 13px 16px;

    background: var(--card);

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

    border-radius: 12px;
}

.controls button,
.answer-button {
    min-height: 42px;

    padding:
        9px
        16px;

    border:
        1px
        solid
        #c9d4db;

    border-radius: 8px;

    background: white;

    color: #405867;

    cursor: pointer;

    transition:
        background 0.15s ease,
        border-color 0.15s ease;
}

.controls button:hover,
.answer-button:hover {
    background: #eef3f6;
}

#playBtn {
    background: var(--blue);

    color: white;

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

#playBtn:hover {
    background: #365b70;
}

.control-divider {
    width: 1px;

    height: 34px;

    margin:
        0
        8px;

    background: var(--border);
}

.damping-control {
    display: flex;

    align-items: center;

    gap: 10px;

    flex: 1;

    min-width: 280px;
}

.damping-control label {
    font-weight: 700;

    color: #496171;
}

.damping-control input {
    flex: 1;

    max-width: 260px;
}

#dampingValue {
    min-width: 75px;

    color: var(--muted);

    font-size: 0.85rem;
}


/* =========================================================
   MAIN LAYOUT
========================================================= */

.main-grid {
    display: grid;

    grid-template-columns:
        minmax(420px, 0.95fr)
        minmax(500px, 1.25fr);

    gap: 18px;

    align-items: stretch;
}

.graphs-column {
    display: grid;

    grid-template-rows:
        1fr
        1fr;

    gap: 18px;

    min-width: 0;
}


/* =========================================================
   CARDS
========================================================= */

.card {
    background: var(--card);

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

    border-radius: 14px;

    padding: 18px;

    min-width: 0;
}

.card-heading {
    display: flex;

    justify-content: space-between;

    align-items: flex-start;

    gap: 15px;

    margin-bottom: 12px;
}

.card-heading h2 {
    margin: 0;

    font-size: 1.18rem;

    color: #29485c;
}

.state-badge {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-height: 30px;

    padding:
        5px
        11px;

    border-radius: 20px;

    background: var(--blue-soft);

    color: #466477;

    font-size: 0.75rem;

    font-weight: 700;

    text-align: center;
}


/* =========================================================
   SATELLITE
========================================================= */

.motion-card {
    display: flex;

    flex-direction: column;
}

.satellite-container {
    position: relative;

    width: 100%;

    height: 410px;

    overflow: hidden;

    background:
        linear-gradient(
            180deg,
            #f9fbfc,
            #f2f6f8
        );

    border:
        1px
        solid
        #e0e7eb;

    border-radius: 10px;
}

#satelliteCanvas {
    display: block;

    width: 100%;
    height: 100%;
}


/* =========================================================
   MOTION READOUTS
========================================================= */

.motion-readouts {
    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 9px;

    margin-top: 12px;
}

.readout {
    padding: 11px;

    background: #f3f6f8;

    border-radius: 8px;
}

.readout span {
    display: block;

    margin-bottom: 3px;

    color: var(--muted);

    font-size: 0.76rem;
}

.readout strong {
    color: #2e4e61;

    font-size: 0.98rem;
}


/* =========================================================
   LIVE ENERGY BARS
========================================================= */

.instant-energy {
    margin-top: 17px;

    padding-top: 15px;

    border-top:
        1px
        solid
        var(--border);
}

.instant-energy h3 {
    margin:
        0
        0
        12px;

    color: #435c6c;

    font-size: 0.95rem;
}

.energy-row {
    display: grid;

    grid-template-columns:
        90px
        1fr
        65px;

    align-items: center;

    gap: 10px;

    margin-bottom: 9px;

    font-size: 0.82rem;
}

.energy-row > span {
    color: #586b77;
}

.energy-row > strong {
    text-align: right;

    color: #425865;

    font-size: 0.8rem;
}

.energy-bar {
    width: 100%;

    height: 12px;

    overflow: hidden;

    background: #e7ecef;

    border-radius: 10px;
}

.energy-fill {
    width: 0%;

    height: 100%;

    border-radius: inherit;

    transition: width 0.08s linear;
}

.energy-fill.epe {
    background: var(--epe);
}

.energy-fill.ke {
    background: var(--ke);
}

.energy-fill.thermal {
    background: var(--thermal);
}


/* =========================================================
   GRAPHS
========================================================= */

.graph-card {
    display: flex;

    flex-direction: column;
}

.graph-container {
    width: 100%;

    height: 255px;

    overflow: hidden;

    background: #fcfdfd;

    border:
        1px
        solid
        #e1e7eb;

    border-radius: 9px;
}

.graph-container canvas {
    display: block;

    width: 100%;
    height: 100%;
}

.graph-question {
    margin:
        10px
        0
        0;

    padding:
        9px
        11px;

    background: #f3f6f8;

    border-radius: 7px;

    color: #536874;

    font-size: 0.83rem;
}


/* =========================================================
   ENERGY LEGEND
========================================================= */

.energy-legend {
    display: flex;

    flex-wrap: wrap;

    gap:
        8px
        18px;

    margin:
        -2px
        0
        10px;

    color: #5f707a;

    font-size: 0.76rem;
}

.legend-item {
    display: inline-flex;

    align-items: center;

    gap: 6px;
}

.legend-line {
    display: inline-block;

    width: 20px;

    height: 3px;

    border-radius: 3px;
}

.epe-line {
    background: var(--epe);
}

.ke-line {
    background: var(--ke);
}

.mechanical-line {
    background: var(--mechanical);
}

.thermal-line {
    background: var(--thermal);
}


/* =========================================================
   CONNECT THE IDEAS
========================================================= */

.connection-section {
    margin-top: 20px;

    padding: 22px;

    background: var(--card);

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

    border-radius: 14px;
}

.connection-section h2 {
    margin:
        0
        0
        18px;

    color: #29485c;
}

.connection-flow {
    display: grid;

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

    align-items: stretch;

    gap: 9px;
}

.connection-box {
    display: flex;

    flex-direction: column;

    justify-content: center;

    min-height: 90px;

    padding: 13px;

    background: #f4f7f8;

    border-radius: 9px;

    text-align: center;
}

.connection-box strong {
    color: #36566a;
}

.connection-box span {
    margin-top: 5px;

    color: var(--muted);

    font-size: 0.78rem;
}

.flow-arrow {
    display: flex;

    align-items: center;

    justify-content: center;

    color: #8b9aa3;

    font-size: 1.4rem;
}

.final-box {
    background: #e9f0f4;
}

.final-box strong {
    letter-spacing: 0.08em;

    color: #294f66;
}


/* =========================================================
   QUESTIONS
========================================================= */

.questions-section {
    margin-top: 20px;

    padding: 22px;

    background: var(--card);

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

    border-radius: 14px;
}

.questions-heading {
    margin-bottom: 18px;
}

.questions-heading h2 {
    margin: 0;

    color: #29485c;
}

.questions-heading > p:last-child {
    margin:
        7px
        0
        0;

    color: var(--muted);
}

.question-card {
    display: grid;

    grid-template-columns:
        42px
        1fr;

    gap: 14px;

    margin-bottom: 13px;

    padding: 16px;

    background: var(--question-bg);

    border:
        1px
        solid
        #e2e8eb;

    border-radius: 10px;
}

.question-number {
    display: flex;

    align-items: center;

    justify-content: center;

    width: 34px;
    height: 34px;

    border-radius: 50%;

    background: #506f81;

    color: white;

    font-weight: 700;
}

.question-card p {
    margin:
        4px
        0
        10px;
}

.question-card textarea {
    display: block;

    width: 100%;

    min-height: 72px;

    padding: 11px;

    resize: vertical;

    background: white;

    border:
        1px
        solid
        #ccd7dd;

    border-radius: 7px;

    color: #263d4b;
}

.question-card textarea:focus {
    outline:
        2px
        solid
        #9db5c3;

    outline-offset: 1px;
}

.final-question {
    margin-bottom: 0;

    background: #f1f5f7;
}

.large-answer {
    min-height: 125px !important;
}

.answer-button {
    margin-top: 11px;

    background: #496b7e;

    color: white;

    border-color: #496b7e;
}

.answer-button:hover {
    background: #3c5c6e;
}

.model-answer {
    margin-top: 14px;

    padding: 15px;

    background: white;

    border-left:
        4px
        solid
        #55788b;

    border-radius: 7px;
}

.model-answer strong {
    color: #34566a;
}

.model-answer p {
    margin:
        7px
        0
        0;

    color: #526570;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1050px) {

    .main-grid {
        grid-template-columns: 1fr;
    }

    .satellite-container {
        height: 380px;
    }

    .connection-flow {
        grid-template-columns: 1fr;
    }

    .flow-arrow {
        transform: rotate(90deg);

        min-height: 25px;
    }
}


@media (max-width: 700px) {

    .simulation-page {
        width: 94%;

        padding-top: 18px;
    }

    .problem-card {
        align-items: flex-start;

        flex-direction: column;

        gap: 12px;
    }

    .problem-values {
        gap: 18px;
    }

    .control-divider {
        display: none;
    }

    .damping-control {
        width: 100%;

        min-width: 0;

        margin-top: 5px;
    }

    .motion-readouts {
        grid-template-columns: 1fr;
    }

    .satellite-container {
        height: 320px;
    }

    .graph-container {
        height: 230px;
    }

    .energy-row {
        grid-template-columns:
            75px
            1fr
            55px;
    }

    .question-card {
        grid-template-columns: 1fr;
    }
}