* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: system-ui, sans-serif;
    background: black;
    min-height: 100vh;
    padding: 10px;
}

.container {
    max-width: 1400px;
    margin: 0 auto;
    width: 100%;
}

h1 {
    color: white;
    text-align: center;
    margin-bottom: 30px;
    font-size: 2.5em;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.2);
}

.test-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(440px, 1fr));
    gap: 15px;
    margin-bottom: 15px;
}

/* Safety net so a wide table scrolls inside its card instead of being clipped */
.table-scroll {
    overflow-x: auto;
}

.test-case {
    background: white;
    /* border-radius: 12px; */
    padding: 15px;
}

.test-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 2px solid #e0e0e0;
}

.test-title {
    font-size: 1.3em;
    font-weight: bold;
    color: #333;
}

.status-badges {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.status-badge {
    padding: 5px 15px;
    /* border-radius: 20px; */
    font-size: 0.9em;
    font-weight: bold;
    text-transform: uppercase;
    white-space: nowrap;
}

.status-pass {
    background: #4caf50;
    color: white;
}

.status-fail {
    background: #f44336;
    color: white;
}

.status-warning {
    background: #ff9800;
    color: white;
}

/* Compact fact chips under the title (replaces the old three-row detail block) */
.test-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 4px 0 8px;
}

.chip {
    font-size: 0.78em;
    font-family: 'Nimbus Mono PS', 'Courier New', monospace;
    color: #455a64;
    background: #eceff1;
    padding: 2px 8px;
    white-space: nowrap;
}

/* κ chip lights up only when the condition number is genuinely large */
.chip-warn {
    background: #ffe0b2;
    color: #b26a00;
    font-weight: 600;
}

.test-desc {
    color: #666;
    font-size: 0.9em;
    margin-bottom: 8px;
    line-height: 1.4;
}

.test-chart {
    margin: 4px 0;
    min-height: 188px;
}

.test-chart svg {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Square colour swatch shared by the chart legend and the per-card table rows */
.legend-dot {
    display: inline-block;
    width: 9px;
    height: 9px;
    margin-right: 6px;
    vertical-align: middle;
}

/* One shared legend above the grid: colour → implementation */
.chart-legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 16px;
    background: white;
    padding: 10px 16px;
    margin-bottom: 15px;
    font-size: 0.85em;
    color: #455a64;
}

.chart-legend:empty {
    display: none;
}

.chart-legend .legend-title {
    font-weight: 600;
    color: #333;
    margin-right: 4px;
}

.chart-legend .legend-item {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
}

.comparison-section {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid #ddd;
}

.comparison-title {
    font-weight: bold;
    color: #666;
    margin-bottom: 10px;
}

.coefficients-grid {
    display: grid;
    gap: 5px;
    font-size: 0.85em;
    margin: 10px 0;
    overflow-x: auto;
}

.coef-header {
    font-weight: bold;
    padding: 5px;
    background: #e0e0e0;
    text-align: center;
    font-size: 0.85em;
}

.coef-cell {
    padding: 5px;
    background: #f9f9f9;
    text-align: center;
    font-family: 'Courier New', monospace;
    font-size: 0.85em;
}

.performance-summary {
    background: white;
    /* border-radius: 12px; */
    padding: 25px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    margin-bottom: 30px;
}

.performance-title {
    font-size: 1.5em;
    font-weight: bold;
    color: #333;
    margin-bottom: 20px;
    text-align: center;
}

.performance-chart {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
}

.perf-metric {
    text-align: center;
    padding: 15px;
    background: darkblue;
    /* border-radius: 10px; */
    color: white;
}

.perf-label {
    font-size: 0.9em;
    opacity: 0.9;
    margin-bottom: 5px;
}

.perf-value {
    font-size: 2em;
    font-weight: bold;
}

.perf-unit {
    font-size: 0.8em;
    opacity: 0.8;
}

.error-message {
    background: #ffebee;
    color: #c62828;
    padding: 10px;
    /* border-radius: 5px; */
    margin: 10px 0;
    border-left: 4px solid #f44336;
}

.info-box {
    background: #e3f2fd;
    color: #1565c0;
    padding: 15px;
    /* border-radius: 8px; */
    margin: 20px 0;
    border-left: 10px solid #2196f3;
}

.loading {
    text-align: center;
    color: #90a4ae;
    font-size: 1.2em;
    margin: 50px 0;
}

/* Spinner for in-progress boxes. Uses a transform animation with will-change so it stays on the
   compositor and keeps rotating even while a heavy synchronous fit blocks the main thread — that
   is what keeps a still-computing card from looking frozen/broken. */
.spinner {
    display: inline-block;
    width: 1.1em;
    height: 1.1em;
    border: 2px solid #cfd8dc;
    border-top-color: #607d8b;
    border-radius: 50%;
    vertical-align: -0.2em;
    margin-right: 0.5em;
    will-change: transform;
    animation: spin 0.7s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Placeholder card shown until a case's result is computed */
.pending {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 360px;
    color: #90a4ae;
    font-size: 0.95em;
}

/* --- Per-implementation + summary tables --- */
.impl-table,
.summary-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 12px;
    font-size: 0.86em;
}

.impl-table th,
.summary-table th {
    background: #37474f;
    color: white;
    font-weight: 600;
    padding: 6px 8px;
    text-align: right;
    vertical-align: bottom;
    line-height: 1.2;
}

.impl-table th:first-child,
.summary-table th:first-child,
.impl-table td:first-child,
.summary-table td:first-child {
    text-align: left;
}

.impl-table td,
.summary-table td {
    padding: 6px 8px;
    text-align: right;
    border-bottom: 1px solid #eee;
    font-family: 'Nimbus Mono PS', 'Courier New', monospace;
}

/* The per-card table is width-constrained inside a ~3-up grid, so trim its padding and keep
   implementation names on one line — the compact number formats leave room for both. */
.impl-table th,
.impl-table td {
    padding: 5px 6px;
}

.th-sub {
    font-weight: normal;
    opacity: 0.75;
    font-size: 0.82em;
}

.impl-name {
    font-family: system-ui, sans-serif;
    font-weight: 600;
    color: #333;
    white-space: nowrap;
}

/* Fastest correct method on a card: subtle highlight + emphasised 1.00× baseline */
.impl-table .fastest-row {
    background: #f1f8e9;
}

.impl-table .fastest-row .impl-name {
    color: #33691e;
}

.impl-table td.speed-best {
    font-weight: 700;
    color: #33691e;
    white-space: nowrap;
}

.impl-table .ref-row {
    background: #eceff1;
    font-style: italic;
}

.impl-table .ref-row .impl-name {
    font-style: normal;
}

/* Summary table sits on a dark card, so give it a white surface */
.summary-table {
    background: white;
    color: #333;
    border-radius: 4px;
    overflow: hidden;
}

.summary-table .sum-method {
    font-family: system-ui, sans-serif;
    text-align: left;
    color: #555;
    font-size: 0.92em;
}

/* Left-align the Method header to match its left-aligned cell text */
.summary-table th.th-left {
    text-align: left;
}

.summary-note {
    color: #cfd8dc;
    font-size: 0.82em;
    margin-top: 12px;
    line-height: 1.4;
}

/* Colour swatches used in the intro legend */
.swatch {
    display: inline-block;
    width: 0.8em;
    height: 0.8em;
    border: 1px solid rgba(0, 0, 0, 0.2);
    vertical-align: middle;
    margin: 0 2px 0 6px;
}
.swatch-pass { background: #c8e6c9; }
.swatch-warn { background: #ffe0b2; }
.swatch-fail { background: #ffcdd2; }

/* --- Implementation picker --- */
.picker-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px 20px;
    margin: 8px 0 16px;
}

.picker-grid label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    color: #cfd8dc;
    font-size: 0.85em;
    font-weight: 600;
}

.picker-grid label.pk-check {
    flex-direction: row;
    align-items: center;
    gap: 8px;
    align-self: end;
}

.picker-grid input[type="number"],
.picker-grid select {
    padding: 6px 8px;
    border: 1px solid #b0bec5;
    background: white;
    color: #222;
    font-size: 0.95em;
    font-family: inherit;
}

.pk-result {
    background: white;
    color: #222;
    padding: 16px 18px;
    border-radius: 4px;
}

.pk-pick {
    font-size: 1.35em;
    font-weight: bold;
    color: #1b5e20;
    font-family: 'Nimbus Mono PS', 'Courier New', monospace;
}

.pk-pick .th-sub {
    color: #607d8b;
    font-family: system-ui, sans-serif;
    font-weight: normal;
}

.pk-why {
    margin: 10px 0 0 18px;
    color: #37474f;
    font-size: 0.92em;
    line-height: 1.5;
}

.pk-why li { margin: 4px 0; }

.pk-alts {
    margin-top: 12px;
    color: #455a64;
    font-size: 0.9em;
}

.pk-alts .th-sub { color: #90a4ae; }

.pk-excl {
    margin-top: 12px;
    font-size: 0.85em;
    color: #607d8b;
}

.pk-excl summary { cursor: pointer; font-weight: 600; }
.pk-excl ul { margin: 6px 0 0 18px; }
.pk-excl li { margin: 3px 0; }