/* ============================================================================
   NOTICE: Full documentation, design decisions, and fix history for this file
   live in docs/midman-web.md, section "lab/lab.css"
   ============================================================================ */
.status { font-family: var(--mono); font-size: 0.85rem; color: var(--muted); }

.tabs { display: flex; gap: 0.4rem; flex-wrap: wrap; margin: 0.8rem 0; }
.tabs button[aria-selected="true"] { background: var(--accent); color: #07131c; border-color: var(--accent); font-weight: 600; }

.panel[hidden] { display: none; }

.fields { display: grid; gap: 0.6rem; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.fields label { display: grid; gap: 0.2rem; font-size: 0.85rem; color: var(--muted); }
.fields input, .fields select { width: 100%; }
.fields label.check { grid-auto-flow: column; justify-content: start; align-items: center; gap: 0.5rem; }
.fields label.check input { width: auto; }

.actions { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.8rem; }

.readouts { display: grid; gap: 0.5rem; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); margin: 0.8rem 0; }
.readout { background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px; padding: 0.4rem 0.6rem; }
.readout .label { display: block; font-size: 0.72rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; }
.readout .value { font-family: var(--mono); font-size: 1.1rem; }

canvas { display: block; width: 100%; max-width: 100%; background: var(--bg); border: 1px solid var(--line); border-radius: 8px; }

.charts { display: grid; gap: 0.8rem; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }

.heads { display: grid; gap: 0.6rem; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.heads button { padding: 0; border: 2px solid transparent; background: none; }
.heads button[aria-pressed="true"] { border-color: var(--accent); }
.heads canvas { border: none; }

.task td.wrong { color: var(--bad); font-weight: 700; }
.task td.right { color: var(--good); }
.task { overflow-x: auto; }
.task td.row-name { color: var(--muted); }

.breakdown { display: grid; gap: 0.35rem; margin-top: 0.6rem; }