@font-face {
  font-family: Nunito; /* set name */
  src: url("fonts/Nunito/Nunito-VariableFont_wght.ttf"); /* url of the font */
}

body {
    font-family: Nunito, system-ui, -apple-system, sans-serif;
    background-color: white;
    color: #1e293b;
    margin: 0;
    display: flex;
    justify-content: center;
    min-height: 100vh;
}
.container {
    width: 100%;
    max-width: 1600px;
    background-color: white;
    padding: 1.25rem;
    box-sizing: border-box;
}

h1 {
    text-align: center;
    font-size: 2.2rem;
    color: #1e293b;
    margin-top: 1rem;
    margin-bottom: 2rem;
}
@media (min-width: 768px) {
    .container { padding: 2.5rem; }
    h1 { font-size: 3.5rem; }
}

/* Forms */
.input-group {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.input-wrapper { flex-grow: 1; }
label {
    font-weight: 600;
    font-size: 0.95rem;
    display: block;
    margin-bottom: 0.5rem;
}
input {
    width: 100%;
    box-sizing: border-box;
    padding: 0.85rem;
    border: 1px solid #d2ebff;
    border-radius: 8px;
    font-size: 1rem;
    font-family: 'Courier New', Courier, monospace;
    background-color: #ebeff3;
    transition: border-color 0.2s;
}
input:focus {
    outline: none;
    border-color: #2c76ff;
    background-color: #fff;
}

/* Expression input with its history dropdown */
.input-with-history { position: relative; }
.input-with-history input { padding-right: 3rem; }

.history-toggle {
    position: absolute;
    top: 50%;
    right: 0.5rem;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.35rem;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: #64748b;
    cursor: pointer;
    transition: color 0.2s, background-color 0.2s;
}
.history-toggle:hover { color: #1e293b; background-color: rgba(148, 163, 184, 0.2); }
.history-toggle svg { transition: transform 0.2s; }
.history-toggle.open svg { transform: rotate(180deg); }

.history-panel {
    display: none;
    position: absolute;
    z-index: 20;
    top: calc(100% + 0.35rem);
    left: 0;
    right: 0;
    max-height: 20rem;
    overflow-y: auto;
    background: #fff;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    box-shadow: 0 10px 25px rgba(15, 23, 42, 0.12);
}
.history-panel.open { display: block; }

.history-item {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    width: 100%;
    padding: 0.7rem 0.9rem;
    border: none;
    border-bottom: 1px solid #f1f5f9;
    background: transparent;
    text-align: left;
    cursor: pointer;
}
.history-item:last-child { border-bottom: none; }
.history-item:hover { background-color: #f8fafc; }
.history-expression {
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.95rem;
    color: #1e293b;
    word-break: break-word;
}
.history-meta { font-size: 0.8rem; color: #64748b; }
.history-empty { padding: 0.9rem; font-size: 0.9rem; color: #64748b; }

/* Buttons */
button.primary-btn {
    padding: 0.85rem 2rem;
    background-color: #ff4a4a;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}
button.primary-btn:hover { background-color: #e03e3e; }

.secondary-btn {
    background: white;
    border: 1px solid #cbd5e1;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
    color: #475569;
    transition: all 0.2s;
}
.secondary-btn:hover {
    background-color: #f8fafc;
    border-color: #94a3b8;
}

@media (min-width: 768px) {
    .input-group {
        flex-direction: row;
        align-items: flex-end;
    }
    button.primary-btn { width: auto; }
}

.key-badge {
    color: #f8e8e8;
    background-color: rgba(255, 255, 255, 0.2);
    padding: 0.1rem 0.4rem;
    border-radius: 4px;
    font-size: 0.85em;
}

/* Variables Section */
.variables-section {
    margin-bottom: 2.5rem;
}
.variables-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}
.variables-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Variable Card matching Mockup styling */
.variable-card {
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #fff;
    overflow: hidden;
}
.variable-card-header {
    background: #f8fafc;
    padding: 0.75rem 1rem;
    font-weight: 600;
    border-bottom: 1px solid #e2e8f0;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    user-select: none;
}
.variable-card-body {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.variable-inputs-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}
@media (min-width: 768px) {
    .variable-inputs-row {
        grid-template-columns: 1fr 1fr;
    }
}
.parsed-info {
    font-size: 0.85rem;
    color: #64748b;
    font-family: monospace;
    margin-top: -0.5rem;
}

/* Layout Grid for Results */
.dashboard-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem;
    margin-bottom: 3rem;
}
@media (min-width: 768px) {
    .dashboard-grid.single-mode {
        grid-template-columns: 1fr 1.5fr;
    }
}
/* Without this, a wide table stretches its grid track and scrolls the whole page
   instead of scrolling inside its own container */
.dashboard-grid > * { min-width: 0; }

/* Result headings and dropdown control rows */
.results-header {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 1rem;
}
@media (min-width: 768px) {
    .results-header {
        flex-direction: row;
        align-items: flex-end;
        justify-content: space-between;
        flex-wrap: wrap;
    }
}
.result-title {
    margin: 0;
    font-size: 1.5rem;
}
.results-header .control-row { margin-bottom: 0; }
.control-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.75rem;
    margin-bottom: 1rem;
}
.control-item {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.control-item label {
    margin-bottom: 0;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #64748b;
}
.control-item select {
    padding: 0.5rem 0.65rem;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    background-color: #fff;
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 600;
    color: #1e293b;
    cursor: pointer;
}
.control-item select:focus {
    outline: none;
    border-color: #2c76ff;
}
.control-item select:disabled { color: #94a3b8; cursor: not-allowed; }

.view-controls { display: none; } /* toggled to flex by script.js in sweep mode */
.slice-controls { margin-bottom: 0; }
/* Variable names are case sensitive, so don't upper-case these labels */
.slice-controls label {
    text-transform: none;
    font-family: monospace;
    font-size: 0.85rem;
}

/* Tables */
.result-section { display: none; }
.table-container {
    background-color: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    overflow-x: auto;
}
table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
}
th, td {
    padding: 1rem;
    border-bottom: 1px solid #e2e8f0;
}
th {
    background-color: #f8fafc;
    color: #64748b;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
tr:last-child td { border-bottom: none; }

/* Comparison against a recorded simulation */
.comparison-area {
    display: none; /* shown by script.js once something is recorded to compare against */
    margin-top: -1.5rem;
    margin-bottom: 3rem;
}
.comparison-panel { display: none; }
.comparison-panel.open { display: block; }

/* The picker stretches like the expression field, the button sits where Simulate does */
.comparison-picker {
    display: none; /* revealed together with the panel */
    flex-grow: 1;
}
.comparison-picker.open { display: flex; }

/* The field itself is an input, so it picks up the expression field's styling as is */
.comparison-picker label {
    margin-bottom: 0.25rem; /* plus the control gap, matching the form label */
    font-size: 0.95rem;
    font-weight: 600;
    text-transform: none;
    letter-spacing: normal;
    color: #1e293b;
}
.picker-input { cursor: pointer; }

.comparison-action {
    display: flex;
    align-items: flex-end;
}
@media (min-width: 768px) {
    /* Keeps the button on the right whether or not the picker is showing */
    .comparison-action { margin-left: auto; }
}
button.compare-btn {
    padding: 0.85rem 2rem;
    min-width: 13rem; /* fits both labels, so the row does not jump when toggled */
    text-align: center;
}

/* Plasma-shaded metric cells (list + matrix); colors are set inline per value */
.heat-cell {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    border-bottom-color: rgba(255, 255, 255, 0.25);
}

/* Two-variable matrix view */
.matrix-table { text-align: center; }
.matrix-table th, .matrix-table td { text-align: center; white-space: nowrap; }
.matrix-table .matrix-corner {
    text-transform: none;
    letter-spacing: normal;
    font-family: monospace;
    font-size: 0.9rem;
    color: #475569;
    text-align: left;
}
.matrix-table .matrix-axis {
    background-color: #f8fafc;
    font-family: monospace;
    font-size: 0.95rem;
    text-transform: none;
    letter-spacing: normal;
    color: #1e293b;
    font-weight: 700;
}
.matrix-table tbody .matrix-axis { border-right: 1px solid #e2e8f0; }
.matrix-table .matrix-cell { font-weight: 600; }

.chart-container {
    position: relative;
    height: 300px;
    width: 100%;
}
/* Chart.js writes an inline pixel width; keep a stale one from widening the page */
.chart-container canvas { max-width: 100%; }
@media (min-width: 768px) {
    .chart-container { height: 380px; }
}

/* Markdown Usage Guide styling */
.usage-guide {
    padding-top: 2rem;
    margin-top: 2.5rem;
    color: #334155;
    line-height: 1.625;
}
.usage-guide h1, .usage-guide h2, .usage-guide h3 {
    color: #1e293b;
    font-weight: 700;
    margin-top: 1.75rem;
    margin-bottom: 0.75rem;
}
.usage-guide h1 { font-size: 2rem; border-bottom: 1px solid #e2e8f0; padding-bottom: 0.3rem; }
.usage-guide h2 { font-size: 1.5rem; }
.usage-guide h3 { font-size: 1.2rem; }

@media (min-width: 768px) {
    .usage-guide h1 { font-size: 3rem; }
    .usage-guide h2 { font-size: 2rem; }
    .usage-guide h3 { font-size: 1.4rem; }
}
.usage-guide ul, .usage-guide ol { padding-left: 1.5rem; margin-bottom: 1.25rem; }
.usage-guide li { margin-bottom: 0.5rem; }
.usage-guide strong { color: #0f172a; font-weight: 600; }
.usage-guide code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 0.9em;
    background-color: #f1f5f9;
    border: 1px solid #e2e8f0;
    padding: 0.15rem 0.35rem;
    border-radius: 4px;
    color: #1554a7;
}
.usage-guide pre {
    background-color: #0f172a;
    color: #f8fafc;
    padding: 1rem 1.25rem;
    border-radius: 8px;
    overflow-x: auto;
    margin: 1rem 0;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}
.usage-guide pre code { background: none; border: none; padding: 0; color: inherit; }

.error {
    color: #ef4444;
    background-color: #fef2f2;
    padding: 1rem;
    border-radius: 8px;
    border: 1px solid #fecaca;
    font-weight: 500;
    display: none;
    margin-bottom: 2rem;
}