/* =========================================
   MATRIX SYSTEMS EXPLORER
   HOTS-LA-001
   ========================================= */


/* =========================================
   1. ROOT & RESET
   ========================================= */

:root {
    --bg: #f7f8fc;
    --surface: #ffffff;
    --surface-alt: #f0f3f8;

    --text: #1d2433;
    --muted: #667085;

    --primary: #2563eb;
    --primary-dark: #1d4ed8;

    --border: #dde3ec;

    --success: #15803d;
    --warning: #b45309;
    --danger: #dc2626;

    --shadow: 0 10px 30px rgba(15, 23, 42, 0.08);

    --radius: 16px;
    --radius-small: 10px;

    --max-width: 1180px;
}


/* =========================================
   2. GLOBAL
   ========================================= */

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;

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

    background: var(--bg);
    color: var(--text);

    line-height: 1.6;
}

a {
    color: inherit;
    text-decoration: none;
}

button,
input,
select {
    font: inherit;
}

button {
    cursor: pointer;
}


/* =========================================
   3. CONTAINER
   ========================================= */

.container {
    width: min(
        calc(100% - 40px),
        var(--max-width)
    );

    margin: 0 auto;
}

.container.narrow {
    max-width: 800px;
}


/* =========================================
   4. HEADER
   ========================================= */

.site-header {
    background: var(--surface);

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

    position: sticky;
    top: 0;

    z-index: 100;
}

.site-header .container {
    min-height: 70px;

    display: flex;

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

    gap: 30px;
}

.brand {
    font-size: 1.25rem;
    font-weight: 800;

    letter-spacing: -0.5px;
}

.brand span {
    color: var(--primary);
}

.main-nav {
    display: flex;
    align-items: center;
    gap: 24px;
}

.main-nav a {
    color: var(--muted);
    font-size: 0.95rem;
    font-weight: 600;

    transition: color 0.2s ease;
}

.main-nav a:hover {
    color: var(--primary);
}


/* =========================================
   5. HERO
   ========================================= */

.hero {
    padding: 90px 0 75px;

    background:
        linear-gradient(
            135deg,
            #eff6ff 0%,
            #f7f8fc 50%,
            #eef2ff 100%
        );

    text-align: center;

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

.hots-id,
.section-label {
    margin: 0 0 10px;

    color: var(--primary);

    font-size: 0.78rem;
    font-weight: 800;

    letter-spacing: 0.12em;
}

.hero h1 {
    margin: 0;

    font-size: clamp(
        2.2rem,
        5vw,
        4.5rem
    );

    line-height: 1.1;

    letter-spacing: -0.04em;
}

.hero-description {
    max-width: 700px;

    margin:
        22px auto
        0;

    color: var(--muted);

    font-size: 1.1rem;
}


/* =========================================
   6. CONCEPT FLOW
   ========================================= */

.concept-flow,
.reflection-flow {
    margin-top: 35px;

    display: flex;

    flex-wrap: wrap;

    justify-content: center;
    align-items: center;

    gap: 10px;

    color: var(--primary);
    font-weight: 700;
}

.concept-flow span:not(:nth-child(even)),
.reflection-flow span:not(:nth-child(even)) {
    padding: 8px 14px;

    background: var(--surface);

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

    border-radius: 999px;

    box-shadow:
        0 4px 15px
        rgba(15, 23, 42, 0.05);
}


/* =========================================
   7. GENERAL SECTIONS
   ========================================= */

.section {
    padding: 80px 0;
}

.section h2 {
    margin-top: 0;

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

    letter-spacing: -0.03em;
}

.section-heading {
    margin-bottom: 45px;
}

.centered {
    text-align: center;
}


/* =========================================
   8. MATH DISPLAY
   ========================================= */

.math-display {
    margin: 30px 0;

    padding: 22px;

    display: flex;

    justify-content: center;
    align-items: center;

    gap: 20px;

    background: var(--surface-alt);

    border-radius: var(--radius-small);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 2rem;
    font-weight: 700;
}


/* =========================================
   9. EXPLORER SECTION
   ========================================= */

.explorer-section {
    padding: 80px 0;

    background: var(--surface-alt);
}

.explorer-header {
    margin-bottom: 30px;

    display: flex;

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

    gap: 30px;
}

.explorer-header h2 {
    margin:
        0
        0
        8px;
}

.explorer-header p {
    margin: 0;
    color: var(--muted);
}


/* =========================================
   10. DIMENSION SELECTOR
   ========================================= */

.dimension-selector {
    min-width: 170px;

    display: flex;
    flex-direction: column;

    gap: 8px;
}

.dimension-selector label {
    color: var(--muted);

    font-size: 0.85rem;
    font-weight: 700;
}

.dimension-selector select {
    padding:
        11px
        14px;

    background: var(--surface);

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

    border-radius: var(--radius-small);

    outline: none;
}

.dimension-selector select:focus {
    border-color: var(--primary);

    box-shadow:
        0 0 0 3px
        rgba(37, 99, 235, 0.12);
}


/* =========================================
   11. EXPLORER GRID
   ========================================= */

.explorer-grid {
    display: grid;

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

    gap: 25px;
}


/* =========================================
   12. PANELS
   ========================================= */

.panel {
    padding: 30px;

    background: var(--surface);

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

    border-radius: var(--radius);

    box-shadow: var(--shadow);
}

.panel-heading {
    margin-bottom: 28px;

    display: flex;

    align-items: flex-start;

    gap: 15px;
}

.step-number {
    width: 42px;
    height: 42px;

    flex-shrink: 0;

    display: grid;
    place-items: center;

    background: var(--primary);

    color: white;

    border-radius: 50%;

    font-size: 0.85rem;
    font-weight: 800;
}

.panel-heading h3 {
    margin: 0 0 3px;

    font-size: 1.2rem;
}

.panel-heading p {
    margin: 0;

    color: var(--muted);

    font-size: 0.9rem;
}


/* =========================================
   13. EQUATION INPUTS
   JavaScript generated
   ========================================= */

.equation-row {
    margin-bottom: 14px;

    display: flex;

    align-items: center;

    gap: 8px;

    flex-wrap: wrap;
}

.equation-row input {
    width: 65px;

    padding: 10px;

    text-align: center;

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

    border-radius: 8px;

    outline: none;
}

.equation-row input:focus {
    border-color: var(--primary);

    box-shadow:
        0 0 0 3px
        rgba(37, 99, 235, 0.1);
}

.variable-label,
.equals-label {
    color: var(--muted);
    font-weight: 700;
}


/* =========================================
   14. BUTTONS
   ========================================= */

.input-actions {
    margin-top: 30px;

    display: flex;

    gap: 12px;

    flex-wrap: wrap;
}

.btn {
    padding:
        12px
        18px;

    border: none;

    border-radius: 10px;

    font-weight: 700;

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        background 0.2s ease;
}

.btn:hover {
    transform: translateY(-1px);
}

.btn-primary {
    background: var(--primary);
    color: white;

    box-shadow:
        0 8px 18px
        rgba(37, 99, 235, 0.22);
}

.btn-primary:hover {
    background: var(--primary-dark);
}

.btn-secondary {
    background: var(--surface-alt);

    color: var(--text);

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


/* =========================================
   15. RESULTS PLACEHOLDER
   ========================================= */

.results-placeholder {
    min-height: 420px;

    display: flex;

    flex-direction: column;

    align-items: center;
    justify-content: center;

    text-align: center;

    color: var(--muted);
}

.placeholder-icon {
    width: 80px;
    height: 80px;

    margin-bottom: 15px;

    display: grid;
    place-items: center;

    background: var(--surface-alt);

    border-radius: 50%;

    color: var(--primary);

    font-family:
        Georgia,
        serif;

    font-size: 2.5rem;
}


/* =========================================
   16. RESULTS
   ========================================= */

.hidden {
    display: none !important;
}

.result-block {
    padding:
        20px
        0;

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

.result-block:last-child {
    border-bottom: none;
}

.result-block h4 {
    margin:
        0
        0
        16px;

    font-size: 1rem;
}


/* =========================================
   17. MATRIX EQUATION
   ========================================= */

.matrix-equation {
    display: flex;

    justify-content: center;
    align-items: center;

    gap: 20px;

    flex-wrap: wrap;

    padding: 20px;

    background: var(--surface-alt);

    border-radius: var(--radius-small);
}

.matrix-equation > div {
    text-align: center;
}

.matrix-label {
    display: block;

    margin-bottom: 8px;

    color: var(--muted);

    font-size: 0.75rem;
    font-weight: 800;
}

.equals-sign {
    font-size: 1.7rem;
    font-weight: 700;
}


/* Matrix content generated by JS */

.matrix-display {
    display: inline-grid;

    gap: 6px;

    padding:
        10px
        15px;

    position: relative;

    font-family:
        Georgia,
        "Times New Roman",
        serif;
}

.matrix-display::before,
.matrix-display::after {
    content: "";

    position: absolute;

    top: 3px;
    bottom: 3px;

    width: 7px;
}

.matrix-display::before {
    left: 0;

    border-left:
        2px solid var(--text);

    border-top:
        2px solid var(--text);

    border-bottom:
        2px solid var(--text);
}

.matrix-display::after {
    right: 0;

    border-right:
        2px solid var(--text);

    border-top:
        2px solid var(--text);

    border-bottom:
        2px solid var(--text);
}


/* =========================================
   18. STATISTICS GRID
   ========================================= */

.stats-grid {
    display: grid;

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

    gap: 12px;
}

.stat-card {
    padding: 16px;

    background: var(--surface-alt);

    border-radius: var(--radius-small);
}

.stat-label {
    display: block;

    margin-bottom: 6px;

    color: var(--muted);

    font-size: 0.8rem;
    font-weight: 700;
}

.stat-card strong {
    font-size: 1.3rem;
}


/* =========================================
   19. SYSTEM STATUS
   ========================================= */

.system-status {
    padding: 20px;

    border-radius: var(--radius-small);

    font-weight: 600;
}

.system-status.success {
    background: #ecfdf3;
    color: var(--success);

    border:
        1px solid #bbf7d0;
}

.system-status.warning {
    background: #fffbeb;
    color: var(--warning);

    border:
        1px solid #fde68a;
}

.system-status.error {
    background: #fef2f2;
    color: var(--danger);

    border:
        1px solid #fecaca;
}


/* =========================================
   20. SOLUTION VALUES
   ========================================= */

.solution-values {
    display: flex;

    flex-wrap: wrap;

    gap: 12px;
}

.solution-item {
    padding:
        10px
        14px;

    background: var(--primary);

    color: white;

    border-radius: 8px;

    font-weight: 700;
}


/* =========================================
   21. INSIGHT BLOCK
   ========================================= */

.insight-block {
    padding: 20px;

    background: #eff6ff;

    border:
        1px solid #bfdbfe;

    border-radius: var(--radius-small);

    border-bottom: none;
}

.insight-block h4 {
    color: var(--primary);
}

.insight-block p {
    margin-bottom: 0;
}


/* =========================================
   22. PROCESS FLOW
   ========================================= */

.process-flow {
    display: flex;

    align-items: stretch;
    justify-content: center;

    gap: 15px;
}

.process-card {
    flex: 1;

    min-width: 0;

    padding: 24px;

    background: var(--surface);

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

    border-radius: var(--radius);

    box-shadow:
        0 5px 18px
        rgba(15, 23, 42, 0.04);
}

.process-card span {
    display: inline-block;

    margin-bottom: 15px;

    color: var(--primary);

    font-size: 0.8rem;
    font-weight: 800;
}

.process-card h3 {
    margin: 0 0 8px;

    font-size: 1.05rem;
}

.process-card p {
    margin: 0;

    color: var(--muted);

    font-size: 0.9rem;
}

.process-arrow {
    display: grid;
    place-items: center;

    color: var(--primary);

    font-size: 1.5rem;
    font-weight: 700;
}


/* =========================================
   23. CONCEPT TAGS
   ========================================= */

.concepts-section {
    background: var(--surface-alt);
}

.concept-tags {
    margin:
        30px 0;

    display: flex;

    flex-wrap: wrap;

    gap: 10px;
}

.concept-tags span {
    padding:
        8px
        14px;

    background: var(--surface);

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

    border-radius: 999px;

    color: var(--primary);

    font-size: 0.9rem;
    font-weight: 700;
}

blockquote {
    margin:
        40px 0
        0;

    padding:
        20px
        25px;

    background: var(--surface);

    border-left:
        4px solid var(--primary);

    border-radius:
        0
        var(--radius-small)
        var(--radius-small)
        0;

    font-size: 1.1rem;
}


/* =========================================
   24. REFLECTION
   ========================================= */

.reflection-section {
    text-align: center;
}

.reflection-flow {
    font-size: 0.95rem;
}


/* =========================================
   25. FOOTER
   ========================================= */

.site-footer {
    padding: 45px 0;

    background: #111827;

    color: #e5e7eb;
}

.footer-row {
    display: flex;

    justify-content: center;

    text-align: center;
}

.footer-content strong {
    display: block;

    margin-bottom: 10px;

    color: white;

    font-size: 1.1rem;
}

.footer-content p {
    margin: 7px 0;

    color: #9ca3af;

    font-size: 0.9rem;
}


/* =========================================
   26. RESPONSIVE
   ========================================= */

@media (max-width: 900px) {

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

    .process-flow {
        flex-direction: column;
    }

    .process-arrow {
        transform: rotate(90deg);
        min-height: 30px;
    }

}


@media (max-width: 700px) {

    .site-header .container {
        min-height: auto;

        padding:
            18px 0;

        flex-direction: column;

        gap: 15px;
    }

    .main-nav {
        gap: 16px;

        flex-wrap: wrap;

        justify-content: center;
    }

    .hero {
        padding:
            65px
            0;
    }

    .explorer-header {
        align-items: stretch;

        flex-direction: column;
    }

    .dimension-selector {
        width: 100%;
    }

}


@media (max-width: 500px) {

    .container {
        width:
            min(
                calc(100% - 24px),
                var(--max-width)
            );
    }

    .section,
    .explorer-section {
        padding:
            55px
            0;
    }

    .panel {
        padding: 20px;
    }

    .hero h1 {
        font-size: 2.3rem;
    }

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

    .matrix-equation {
        gap: 12px;
    }

    .equation-row {
        gap: 5px;
    }

    .equation-row input {
        width: 52px;
        padding: 8px 4px;
    }

    .concept-flow,
    .reflection-flow {
        gap: 7px;
    }

}