/* BSV Control Room (OPL-2832) — cream workstation chrome.
   The moepwellington grammar: one hero viewport, a dense bezel of small
   instruments, a brutally strict palette, hard 1px bevels, no antialiasing. */

:root {
    --desk: #a89f80;         /* the desk the console sits on */
    --paper: #d9d1b4;        /* panel face */
    --paper-hi: #f0ead3;     /* bevel light */
    --paper-lo: #a29876;     /* bevel shadow */
    --paper-in: #ccc3a4;     /* inset well */
    --ink: #17150e;
    --ink-soft: #4a452f;
    --cobalt: #1e50b4;
    --cobalt-deep: #10306e;
    --signal: #c0281c;
    --gold: #d8a818;
    --screen: #0d0f0a;       /* black inset scope */
}

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

html, body { background: var(--desk); }
body {
    font-family: "Menlo", "Consolas", "DejaVu Sans Mono", monospace;
    color: var(--ink);
    -webkit-font-smoothing: none;
    padding: 8px;
}

#desk { max-width: 1720px; margin: 0 auto; }

/* ============ menu bar ============ */
#bar {
    background: var(--paper);
    border: 1px solid var(--ink);
    box-shadow: inset 1px 1px 0 var(--paper-hi), inset -1px -1px 0 var(--paper-lo),
        2px 2px 0 rgba(23, 21, 14, 0.35);
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 8px;
    margin-bottom: 7px;
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
}
#bar .logo {
    width: 12px; height: 12px;
    background: var(--cobalt);
    border: 1px solid var(--ink);
    box-shadow: inset 2px 2px 0 rgba(240, 234, 211, 0.5);
    flex: 0 0 auto;
}
#bar .title { font-weight: bold; }
#bar .sub { color: var(--ink-soft); font-size: 9px; }
#bar .spacer { flex: 1; }
#bar .clock { font-size: 10px; }
.badge {
    font-size: 8px;
    padding: 1px 5px;
    border: 1px solid var(--ink);
    background: #6ea05e;
    color: var(--ink);
}
.badge.demo { background: var(--gold); }
.badge.off { background: var(--signal); color: var(--paper-hi); }
.badge.wait { background: var(--paper-in); }

#bar button, .ptitle button, .ptitle a.plink {
    font: inherit;
    font-size: 8px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink);
    background: var(--paper);
    border: 1px solid var(--ink);
    box-shadow: inset 1px 1px 0 var(--paper-hi), inset -1px -1px 0 var(--paper-lo);
    padding: 1px 6px;
    cursor: pointer;
    text-decoration: none;
    line-height: 1.4;
}
#bar button:active, .ptitle button:active { box-shadow: inset 1px 1px 0 var(--paper-lo); }
#bar button.active { background: var(--gold); }
#bar a { color: var(--ink); text-decoration: none; }

/* ============ the instrument wall ============ */
#grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: 76px;
    grid-auto-flow: row dense;
    gap: 7px;
}

.panel {
    background: var(--paper);
    border: 1px solid var(--ink);
    box-shadow: inset 1px 1px 0 var(--paper-hi), inset -1px -1px 0 var(--paper-lo),
        2px 2px 0 rgba(23, 21, 14, 0.35);
    display: flex;
    flex-direction: column;
    min-height: 0;
    min-width: 0;
    position: relative;
}
.panel.alarm { outline: 2px solid var(--signal); outline-offset: -1px; }

.ptitle {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 5px;
    height: 17px;
    padding: 0 4px 0 6px;
    font-size: 8px;
    font-weight: bold;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--ink);
    background: linear-gradient(var(--paper-hi), var(--paper));
    white-space: nowrap;
    overflow: hidden;
}
/* the title shrinks (ellipsis) before the instrument's buttons do — on a
   phone the hero's channel row was pushing 🖱 off the panel entirely */
.ptitle > span:first-child { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ptitle .tdots { flex: 1; text-align: right; color: var(--paper-lo); letter-spacing: 2px; overflow: hidden; }
.ptitle a.plink { padding: 0 3px; line-height: 1.2; flex: 0 0 auto; }
.ptitle button.ch { padding: 0 3px; line-height: 1.2; flex: 0 0 auto; }
.ptitle button.ch.on { background: var(--cobalt); color: var(--paper-hi); }

.pbody { flex: 1; position: relative; min-height: 0; overflow: hidden; }
.pbody canvas {
    position: absolute;
    inset: 2px;
    width: calc(100% - 4px);
    height: calc(100% - 4px);
    /* backing store is full-res (console.js sizeCanvases) — no pixelated
       upscale, so canvas text renders as crisply as the DOM panels */
}
/* monitor windows — the hero + any mini station feeds (MON-2 bonsai) */
.panel.monwin .pbody { background: var(--screen); box-shadow: inset 0 0 0 2px var(--paper-lo); }
.panel.monwin iframe {
    position: absolute;
    inset: 3px;
    width: calc(100% - 6px);
    height: calc(100% - 6px);
    border: 0;
    background: #000;
}
.panel.monwin iframe.locked { pointer-events: none; }
.panel.monwin .montag {
    position: absolute;
    left: 6px; bottom: 6px;
    font-size: 8px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    background: var(--gold);
    color: var(--ink);
    border: 1px solid var(--ink);
    padding: 1px 5px;
    z-index: 2;
    pointer-events: none;
}

/* DOM-text widgets (wire / headline / museum) */
.ptext {
    padding: 5px 7px;
    font-size: 10px;
    line-height: 1.45;
    overflow: hidden;
    height: 100%;
}
.ptext .dim { color: var(--ink-soft); font-size: 8px; letter-spacing: 0.06em; text-transform: uppercase; }
.ptext .big { font-size: 12px; font-weight: bold; line-height: 1.25; }
.wline {
    display: flex;
    align-items: baseline;
    gap: 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 9px;
    padding: 1px 0;
}
.wline .wdot { flex: 0 0 6px; width: 6px; height: 6px; border: 1px solid var(--ink); align-self: center; }
.wline .wcat { color: var(--ink-soft); font-size: 8px; text-transform: uppercase; flex: 0 0 auto; }
.wline .wtxt { overflow: hidden; text-overflow: ellipsis; }
.chip {
    display: inline-block;
    font-size: 8px;
    text-transform: uppercase;
    border: 1px solid var(--ink);
    padding: 0 4px;
    background: var(--paper-in);
}
.chip.gift { background: var(--gold); }

/* responsive: the wall reflows dense; spans clamp via JS on phones */
@media (max-width: 1100px) {
    #grid { grid-template-columns: repeat(8, 1fr); }
}
@media (max-width: 700px) {
    /* the row stays 76px — the canvas widgets are AUTHORED against it (a
       1-row instrument gets 26 logical px, a 2-row one 68). The old 64px
       phone row stole 6 of those and every bottom caption printed on top of
       its own readout; simAudit now asserts the height a widget is given. */
    #grid { grid-template-columns: repeat(4, 1fr); }
    #bar { flex-wrap: wrap; overflow: visible; row-gap: 4px; gap: 6px; }
    #bar .sub { display: none; }
    #bar .clock { font-size: 9px; }
    .ptitle { gap: 4px; }
    .ptitle .tdots { display: none; }
}