/* Copyright 2023-2026 by Essam Abadir */

/*
 * experiment-layout.css — Standard layout for EGPT experiment pages.
 *
 * Designed to work both standalone (full browser tab) and embedded in
 * an iframe (inside the egpt_pub showcase index.html).
 *
 * Dark theme to match simulation canvases.
 *
 * Classes:
 *   .experiment-container  — root flex column
 *   .experiment-canvas     — canvas wrapper (fills vertical space)
 *   .experiment-metrics    — metrics panel container
 *   .metric-table          — the metrics table
 *   .metric-current        — current value cell
 *   .metric-expected       — expected value cell
 */

/* ── Reset ───────────────────────────────────────────────────────────── */

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

/* ── Root ────────────────────────────────────────────────────────────── */

html, body {
    height: 100%;
    width: 100%;
    background: #0d0d0d;
    color: #d4d4d4;
    font-family: 'Courier New', Courier, monospace;
    font-size: 13px;
    overflow: hidden;
}

/* ── Layout container ────────────────────────────────────────────────── */

.experiment-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
}

/* ── Canvas wrapper ──────────────────────────────────────────────────── */

.experiment-canvas {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: #111111;
    border-bottom: 1px solid #2a2a2a;
}

.experiment-canvas canvas {
    display: block;
    max-width: 100%;
    max-height: 100%;
    /* LETTERBOX (display-only — NO backing-store/world-size change). p5 stamps
     * an explicit style width/height (e.g. 600px×600px) on the canvas element;
     * the max-width/max-height:100% clamps above then constrain each axis
     * INDEPENDENTLY, so on a wide/short viewport (the GYM iframe) a square
     * physics canvas paints into a non-square CSS box → the circular field
     * looks OVAL. object-fit:contain fits the bitmap into whatever box results
     * while PRESERVING its aspect ratio (shorter axis centered, transparent
     * letterbox bars) — a circle stays circular on any viewport. This never
     * touches the render backing store or the world size (the ONE size
     * authority is runner.canvas_rect → engine universe_rect + prov.init); it
     * is purely how the already-rendered bitmap is scaled for display.
     * Holds in BOTH the GYM (?preset=compare, chrome dropped) and STUDIO. */
    object-fit: contain;
    object-position: center;
}

/* ── Metrics panel ───────────────────────────────────────────────────── */

.experiment-metrics {
    flex: 0 0 auto;
    padding: 8px 12px;
    background: #141414;
    overflow-y: auto;
    max-height: 180px;
    border-top: 1px solid #2a2a2a;
}

/* ── Metrics table ───────────────────────────────────────────────────── */

.metric-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.metric-table thead tr {
    border-bottom: 1px solid #333;
}

.metric-table th {
    text-align: left;
    padding: 3px 6px;
    font-weight: normal;
    color: #888;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.metric-table td {
    padding: 3px 6px;
    border-bottom: 1px solid #1e1e1e;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.metric-table td:first-child {
    color: #aaaaaa;
    width: 45%;
}

/* ── Current value column ────────────────────────────────────────────── */

.metric-current {
    color: #7ec8e3;
    font-weight: bold;
    width: 28%;
}

/* ── Expected value column ───────────────────────────────────────────── */

.metric-expected {
    color: #6aaa6a;
    width: 27%;
}

/* ── Responsive: narrow viewports (e.g. small iframes) ──────────────── */

@media (max-width: 360px) {
    .experiment-metrics {
        max-height: 140px;
        padding: 4px 8px;
    }

    .metric-table th,
    .metric-table td {
        font-size: 11px;
        padding: 2px 4px;
    }
}

/* ── chrome=canvas mode ─────────────────────────────────────────────── */
/*
 * When ?chrome=canvas is present, stack-boot sets data-chrome="canvas" on
 * <html>. These rules collapse all chrome panels so the canvas / histogram
 * row fills the full viewport. Used by gallery tiles and the landing splash.
 *
 * Design (architect-approved, 2026-06-11):
 *   1. Structural selector: hide all DIRECT children of .experiment-container
 *      EXCEPT the canvas-bearing rows (.experiment-canvas, .dse-outer,
 *      .bb-outer). Robust to future chrome additions — no blocklist to maintain.
 *   2. Override the per-page 600px canvas constraint that double-slit
 *      and blackbody inject in their local <style>.
 *      The histogram panel IS the primary readout — keep it, let it fill.
 *   3. Default (no param) is full chrome — these rules are entirely opt-in.
 */

/* Hide all direct children of .experiment-container that are NOT the
   canvas-bearing row. Known row classes: .experiment-canvas (standard pages),
   .dse-outer (double-slit family), .bb-outer (blackbody). Future chrome rows
   are automatically suppressed without needing per-element targeting. */
[data-chrome="canvas"] .experiment-container > *:not(.experiment-canvas):not(.dse-outer):not(.bb-outer) {
    display: none !important;
}

/* Unlock the per-page 600px fixed-width canvas constraint (double-slit /
   blackbody inject flex:0 0 600px in their local <style>
   which has equal specificity to the shared rule below; !important wins). */
[data-chrome="canvas"] .experiment-canvas {
    flex: 1 1 auto !important;
    max-width: none !important;
}

/* Let the dse-outer / bb-outer row fill vertically in canvas mode. */
[data-chrome="canvas"] .dse-outer,
[data-chrome="canvas"] .bb-outer {
    flex: 1 1 auto !important;
}

/* Blackbody (D5, 2026-06-11): .bb-outer is kept because it bears the canvas,
   but its histogram panel leaked metric TEXT through chrome=canvas
   ("INTENSITY FREQUENCY … WARMING UP" on gallery tiles) — both as DOM text
   (label / sub / status) and as text PAINTED into #histogram-canvas (warm-up
   countdown, axis labels). Structural rule: in canvas mode only the
   experiment canvas survives inside .bb-outer. Double-slit's .dse-outer
   histogram strip is PER-DESIGN (recorded decision) and deliberately
   untouched. */
[data-chrome="canvas"] .bb-outer > :not(.experiment-canvas) {
    display: none !important;
}

/* ── Scrollbar styling (WebKit) ──────────────────────────────────────── */

.experiment-metrics::-webkit-scrollbar {
    width: 4px;
}

.experiment-metrics::-webkit-scrollbar-track {
    background: #141414;
}

.experiment-metrics::-webkit-scrollbar-thumb {
    background: #333;
    border-radius: 2px;
}