/* ═══════════════════════════════════════════════════════════════
   Wind Tunnel Control Panel — page-specific styles.
   Everything visual comes from tokens.css / base.css / modern.css;
   this block only adds the connection-bar chips, the big airspeed
   readout, the telemetry tile grid, the chart row, the sweep / log /
   calibration / drive-setup rows and the status pills, in the same
   square Hargrave language. Series colours (--chart-s1/-s2) are read
   live by charts.js so the theme toggle recolours the plots.
   ═══════════════════════════════════════════════════════════════ */

/* ---- chart series colours (CVD-validated; read by charts.js) ---- */
:root { --chart-s1: #e86a0c; --chart-s2: #4788cf; }
[data-theme="light"] { --chart-s1: #c65600; --chart-s2: #3b7dd8; }

.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

/* ---- topbar chips + compact single-row connection bar ---- */
.wt-chip {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12px;
    color: var(--muted2);
    letter-spacing: 0.4px;
    white-space: nowrap;
}
.wt-chip b {
    color: var(--muted);
    font-weight: 600;
}

.topbar { padding: 5px 12px; gap: 8px; }
.topbar .status { padding: 3px 8px; font-size: 12.5px; white-space: nowrap; }
.topbar-status { gap: 8px; }
.topbar-conn { gap: 5px; }
.topbar-conn select {
    width: auto;
    min-width: 0;
    height: 24px;
    padding: 2px 4px;
    font-size: 11px;
}
.topbar-conn input[type="number"] {
    width: 52px;
    height: 24px;
    padding: 2px 5px;
    font-size: 11px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.topbar-conn button {
    height: 24px;
    padding: 3px 8px;
    font-size: 11px;
    letter-spacing: 0.6px;
    white-space: nowrap;
}
.strip-sep {
    width: 1px;
    height: 18px;
    background: var(--border2);
    flex-shrink: 0;
}

/* ---- status pills (RUN / REV / FAULT) ---- */
.sig-pill {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 1.2px;
    padding: 2px 7px;
    border: 1px solid var(--border2);
    color: var(--muted2);
    background: rgba(0,0,0,0.15);
    transition: color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.sig-pill.on {
    color: var(--ok);
    border-color: rgba(92,184,92,0.5);
    box-shadow: 0 0 10px rgba(92,184,92,0.15);
}
.sig-pill.warnp.on {
    color: var(--warn);
    border-color: rgba(255,196,0,0.5);
    box-shadow: 0 0 10px rgba(255,196,0,0.16);
}
.sig-pill.bad.on {
    color: var(--err);
    border-color: rgba(217,83,79,0.55);
    box-shadow: 0 0 10px rgba(217,83,79,0.18);
}
[data-theme="light"] .sig-pill { background: #efefef; }

/* ---- main split: telemetry tiles (left) + control (right) ---- */
.wt-split {
    display: grid;
    grid-template-columns: 380px minmax(0, 1fr);
    gap: 10px;
    align-items: stretch;
}
@media (max-width: 940px) {
    .wt-split { grid-template-columns: 1fr; }
}

/* ---- live readout: big airspeed + freq / pills ---- */
.wt-live {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 10px 18px;
    flex-wrap: wrap;
    padding: 6px 2px 10px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 10px;
}
.wt-live-main { display: flex; align-items: baseline; gap: 8px; }
.wt-air {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 52px;
    font-weight: 700;
    line-height: 1;
    color: var(--accent);
    letter-spacing: -1px;
    font-variant-numeric: tabular-nums;
}
.wt-air-unit {
    font-size: 16px;
    color: var(--muted);
    font-weight: 600;
}
.wt-live-side {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 7px;
}
.wt-freq { font-size: 15px; color: var(--muted); font-variant-numeric: tabular-nums; }
.wt-pills { display: flex; gap: 5px; }

/* ---- control body: fields left, run/stop + vertical slider right ----
   The split stretches both cards to equal height; making the card a flex
   column and the body flex:1 lets the direction/hint block reach the true
   card bottom instead of stopping at its natural content height. */
.wt-split > .card {
    display: flex;
    flex-direction: column;
}
.wt-ctl-body {
    display: flex;
    align-items: stretch;
    gap: 16px;
    flex: 1;
}
.wt-ctl-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}
.wt-ctl-side {
    display: flex;
    align-items: stretch;
    gap: 12px;
    padding-left: 14px;
    border-left: 1px solid var(--border);
}
.wt-runstop {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
}
.wt-slider-set {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    margin-top: 4px;
}
.wt-slider-set b {
    font-size: 16px;
    font-weight: 700;
    color: var(--accent);
    font-variant-numeric: tabular-nums;
}
.wt-slider-set span {
    font-size: 9.5px;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--muted2);
}
.wt-slider-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 2px 4px;
}
#setSlider {
    writing-mode: vertical-lr;      /* vertical track, max at the top */
    direction: rtl;
    width: 26px;
    flex: 1;
    min-height: 170px;
    accent-color: var(--accent);
    cursor: pointer;
}
.wt-slider-label {
    font-size: 10.5px;
    color: var(--muted2);
    font-variant-numeric: tabular-nums;
}

/* ---- direction / reset row — pinned (with the hint) to the card bottom ---- */
.wt-run-row {
    display: flex;
    align-items: center;
    gap: 6px 12px;
    flex-wrap: wrap;
    margin: auto 0 6px;
    padding-top: 10px;
}
.view-switch { display: inline-flex; flex-shrink: 0; }
.view-switch .mode-btn {
    padding: 6px 14px;
    font-size: 11px;
    letter-spacing: 0.8px;
}
.view-switch .mode-btn + .mode-btn { border-left: none; }
#btnReset {
    height: 24px;
    padding: 3px 9px;
    font-size: 11px;
}

/* ---- run / stop (stacked beside the slider) ---- */
#btnRun, #btnStop {
    width: 76px;
    height: 40px;
    padding: 6px 10px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.4px;
}

/* ---- shared hint line ---- */
.wt-hint {
    margin-top: 6px;
    font-size: 11px;
    color: var(--muted2);
    line-height: 1.5;
}
.wt-hint b { color: var(--muted); font-weight: 600; }

/* ---- telemetry tile grid ---- */
.wt-tiles {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5px;
}
.wt-tile {
    display: flex;
    flex-direction: column;
    gap: 3px;
    border: 1px solid var(--border);
    background: rgba(0,0,0,0.12);
    padding: 6px 9px;
    min-width: 0;
}
[data-theme="light"] .wt-tile { background: #ececec; }
.wt-tile-wide { grid-column: 1 / -1; }
.wt-tile-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.9px;
    color: var(--muted2);
}
.wt-tile-val {
    font-size: 12px;
    color: var(--muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-variant-numeric: tabular-nums;
}
.wt-tile-val b {
    font-size: 17px;
    font-weight: 700;
    color: var(--text);
}
.wt-tile-small { font-size: 12px; color: var(--text); }
#telFault.fault-on { color: var(--err); font-weight: 700; }

/* ---- charts row ---- */
.wt-charts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}
@media (max-width: 940px) {
    .wt-charts { grid-template-columns: 1fr; }
}
.chart-box { position: relative; }
.chart-box canvas { display: block; width: 100%; }

/* ---- calibration: collapsible card ---- */
.wt-collapse-head {
    cursor: pointer;
    user-select: none;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 0;
}
.wt-collapse-head:hover { color: var(--accent); }
.wt-caret {
    display: inline-block;
    font-size: 12px;
    color: var(--muted2);
    transition: transform 0.15s ease;
}
.wt-collapse-head.open .wt-caret { transform: rotate(90deg); }
#calWrap { margin-top: 10px; }

.wt-btn-row {
    display: flex;
    align-items: center;
    gap: 6px 14px;
    flex-wrap: wrap;
}
.wt-btn-row button { height: 26px; padding: 3px 12px; font-size: 12px; }

/* ---- calibration table ---- */
.wt-cal-wrap {
    max-width: 520px;
    max-height: 300px;
    overflow-y: auto;
    border: 1px solid var(--border);
    background: rgba(0,0,0,0.12);
    margin-bottom: 8px;
}
.wt-btn-row { margin-bottom: 4px; }
[data-theme="light"] .wt-cal-wrap { background: #ececec; }
.wt-cal {
    width: 100%;
    border-collapse: collapse;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12px;
}
.wt-cal thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    text-align: left;
    padding: 5px 10px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--muted);
    background: linear-gradient(rgba(255,134,41,0.05), rgba(255,134,41,0.05)), #1e1e1e;
    border-bottom: 1px solid var(--border2);
    white-space: nowrap;
}
[data-theme="light"] .wt-cal thead th {
    background: linear-gradient(rgba(198,86,0,0.05), rgba(198,86,0,0.05)), #e4e4e4;
}
.wt-cal td {
    padding: 2px 6px;
    border-bottom: 1px solid #2a2a2a;
}
[data-theme="light"] .wt-cal td { border-bottom-color: #d6d6d6; }
.wt-cal td input[type="number"] {
    width: 100%;
    min-width: 70px;
    height: 24px;
    padding: 2px 6px;
    font-family: inherit;
    font-size: 12px;
    border: 1px solid transparent;
    background: transparent;
}
.wt-cal td input[type="number"]:focus { border-color: var(--accent); background: var(--card); }
.wt-cal td:last-child { width: 34px; text-align: center; }
.cal-del {
    height: 22px;
    width: 24px;
    padding: 0;
    font-size: 14px;
    line-height: 1;
}

/* ---- narrow screens ---- */
@media (max-width: 700px) {
    .wt-air { font-size: 40px; }
    .wt-tiles { grid-template-columns: 1fr 1fr; }
}