studio.css

/* mindX studio — layered over style.css. Tokens on :root; light mode by preference or by the ◐ toggle. */
:root {
  --scope: #52d98a;
  --spec: #d6b25e;
  --sel: rgba(214, 178, 94, .22);
  --canvas: #0a0d0c;
  --grid: rgba(232, 230, 223, .07);
  --wave: #c9b071;
  --cursor: #e8e6df;
  --marker: #e0a53a;
  --start: #52d98a;
  --topbar: rgba(7, 9, 10, .88);
  color-scheme: dark;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg: #f6f4ee; --panel: #ffffff; --panel2: #f1eee5;
    --line: rgba(140, 104, 30, .28); --line2: rgba(20, 24, 22, .12);
    --text: #16191a; --text2: #4a524e; --text3: #737b76;
    --gold: #8a6416; --green: #17834a; --amber: #a86a0a; --red: #b03d2e;
    --scope: #17834a; --spec: #8a6416; --sel: rgba(138, 100, 22, .18);
    --canvas: #fbfaf6; --grid: rgba(20, 24, 22, .08); --wave: #6b5520;
    --cursor: #16191a; --marker: #a86a0a; --start: #17834a; --topbar: rgba(246, 244, 238, .9);
    color-scheme: light;
  }
}
:root[data-theme="light"] {
  --bg: #f6f4ee; --panel: #ffffff; --panel2: #f1eee5;
  --line: rgba(140, 104, 30, .28); --line2: rgba(20, 24, 22, .12);
  --text: #16191a; --text2: #4a524e; --text3: #737b76;
  --gold: #8a6416; --green: #17834a; --amber: #a86a0a; --red: #b03d2e;
  --scope: #17834a; --spec: #8a6416; --sel: rgba(138, 100, 22, .18);
  --canvas: #fbfaf6; --grid: rgba(20, 24, 22, .08); --wave: #6b5520;
  --cursor: #16191a; --marker: #a86a0a; --start: #17834a; --topbar: rgba(246, 244, 238, .9);
  color-scheme: light;
}
:root[data-theme="dark"] { color-scheme: dark; }

[hidden] { display: none !important; }
body.studio-page { background: var(--bg); color: var(--text); overflow-x: hidden; }
.studio-page .topbar { background: var(--topbar); }
.studio-page .btn { background: var(--panel); }
.theme-btn { font: 1rem var(--sans); background: none; border: 0; color: var(--text2); cursor: pointer; padding: 2px 4px; }
.theme-btn:hover { color: var(--gold); }
.privacy { max-width: 760px; border-left: 2px solid var(--green); padding-left: 12px; margin-top: 4px; color: var(--text2); }

.st-section { padding-top: 40px; }
.st-row { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; justify-content: space-between; margin: 8px 0; }
.st-row.small { margin: 4px 0; }
.st-row .chips { display: flex; flex-wrap: wrap; gap: 6px; }
.mono { font-family: var(--mono); }
.card { min-width: 0; }

/* transport */
.transport { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 12px 0 10px; }
.tbtn { font: 500 .84rem var(--sans); color: var(--text); background: var(--panel2); border: 1px solid var(--line2); border-radius: 6px; padding: 7px 12px; cursor: pointer; min-height: 36px; }
.tbtn:hover { border-color: var(--gold); }
.tbtn.primary { background: var(--gold); color: var(--bg); border-color: var(--gold); min-width: 96px; }
.tbtn.stop { color: var(--red); border-color: var(--red); }
.tbtn:disabled, .chip:disabled { opacity: .45; cursor: default; }
.clock { font: .86rem var(--mono); color: var(--text2); margin-left: auto; white-space: nowrap; }
.ov-wrap, .ed-wrap { position: relative; width: 100%; }
canvas.ov, canvas.ed-canvas, canvas.viz-c { display: block; width: 100%; background: var(--canvas); border: 1px solid var(--line2); border-radius: 8px; }
canvas.ov { cursor: pointer; touch-action: pan-y; }
.ov-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.anchor-line { font: italic .92rem/1.5 var(--sans); color: var(--text2); margin: 6px 0 0; border-left: 2px solid var(--start); padding-left: 10px; }
.credit { margin-top: 12px; border-top: 1px solid var(--line2); padding-top: 10px; }
.credit .who { font-weight: 600; color: var(--text); margin: 0 0 4px; font-size: .95rem; }
.credit dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 2px 12px; margin: 6px 0 0; font: .76rem/1.5 var(--mono); }
.credit dt { color: var(--text3); }
.credit dd { margin: 0; color: var(--text2); overflow-wrap: anywhere; }
.st-player audio { display: none; }

/* visuals */
.viz-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.viz { margin: 0; min-width: 0; }
.viz.scope-fig { grid-column: 1 / -1; }
.viz figcaption { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; font: 500 .72rem var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--text3); margin-bottom: 6px; }
.viz figcaption .fine { letter-spacing: 0; text-transform: none; }
canvas.pad { touch-action: none; cursor: crosshair; }
.viz-state { margin-top: 8px; }

/* rack */
.rack-host { width: 100%; min-height: 40px; overflow: hidden; }
.rack-host .sr-wrap { display: flex; flex-wrap: wrap; gap: 12px; }
.rack-host .sr-sec { flex: 1 1 260px; min-width: 0; }
.rack-host .sr-knobs { display: flex; flex-wrap: wrap; gap: 10px 6px; justify-content: space-around; }
.rack-host .sr-cell { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 76px; }
.rack-host .sr-cell.sr-wide { flex: 1 1 100%; align-items: stretch; }
.rack-host .sr-cell.sr-wide .sr-map { align-self: center; }
.rack-host .sr-sec:first-child { flex-basis: 340px; }
.sr-map { font: .66rem var(--mono); color: var(--text3); background: none; border: 1px dashed var(--line2); border-radius: 999px; padding: 1px 8px; cursor: pointer; max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sr-map.on { color: var(--green); border-color: var(--green); border-style: solid; }
.sr-map:hover { border-color: var(--gold); }
.rack-fallback { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px 16px; background: var(--panel); border: 1px solid var(--line2); border-radius: 10px; padding: 14px; }
.rack-fallback label { display: grid; grid-template-columns: 80px minmax(0, 1fr) 64px; gap: 8px; align-items: center; font: .78rem var(--mono); color: var(--text2); }
.rack-fallback input { width: 100%; accent-color: var(--gold); }
.rack-foot { justify-content: flex-start; }
.tog { font-size: .86rem; color: var(--text2); display: inline-flex; gap: 6px; align-items: center; }

/* senses */
.sense-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.sense p { font-size: .86rem; margin-bottom: 10px; }
.sense.live { border-color: var(--green); }
.sense-btns { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.meters { display: grid; gap: 4px; }
.meter { display: grid; grid-template-columns: 78px minmax(0, 1fr) 62px; gap: 8px; align-items: center; font: .7rem var(--mono); color: var(--text3); }
.meter .bar { height: 6px; background: var(--line2); border-radius: 3px; overflow: hidden; }
.meter .bar i { display: block; height: 100%; width: 0; background: var(--gold); }
.meter.on .bar i { background: var(--green); }
.meter .val { text-align: right; color: var(--text2); white-space: nowrap; overflow: hidden; }
.cam-video { width: 128px; height: 96px; object-fit: cover; transform: scaleX(-1); border-radius: 6px; border: 1px solid var(--line2); margin-bottom: 8px; background: #000; }
.last-gesture { margin-top: 8px; }

/* mappings */
.map-table select, .map-table input { font: .78rem var(--mono); background: var(--bg); color: var(--text); border: 1px solid var(--line2); border-radius: 4px; padding: 3px 4px; max-width: 100%; }
.map-table input[type="number"] { width: 64px; }
.map-table td { padding: 6px 10px; white-space: nowrap; }
.map-table tr.flash td { background: var(--sel); }
.map-table .now { font-family: var(--mono); color: var(--text2); min-width: 64px; }
.map-table tr.live .now { color: var(--green); }

/* editor */
.ed-card { padding: 14px; }
.toolbar { display: flex; flex-wrap: wrap; gap: 6px 10px; margin: 6px 0 10px; }
.tgroup { display: inline-flex; flex-wrap: wrap; gap: 3px; padding-right: 8px; border-right: 1px solid var(--line2); }
.tgroup:last-child { border-right: 0; }
.toolbar button { font: .76rem var(--mono); color: var(--text); background: var(--panel2); border: 1px solid var(--line2); border-radius: 5px; padding: 5px 8px; min-height: 32px; cursor: pointer; }
.toolbar button:hover { border-color: var(--gold); }
.toolbar button[aria-pressed="true"] { border-color: var(--green); color: var(--green); }
.gain-in { display: inline-flex; gap: 3px; }
.gain-in input { width: 58px; font: .76rem var(--mono); background: var(--bg); color: var(--text); border: 1px solid var(--line2); border-radius: 5px; padding: 4px; }
canvas.ed-canvas { touch-action: none; cursor: text; }
canvas.ed-canvas:focus { outline: 1px solid var(--gold); outline-offset: 1px; }
.ed-scroll { width: 100%; margin: 6px 0 2px; accent-color: var(--gold); }
.file-btn { position: relative; overflow: hidden; display: inline-flex; align-items: center; }
.file-btn input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.markers { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.markers li { font: .74rem var(--mono); border: 1px solid var(--marker); color: var(--marker); border-radius: 999px; display: inline-flex; align-items: center; }
.markers button { font: inherit; color: inherit; background: none; border: 0; padding: 3px 8px; cursor: pointer; }
.markers button.x { padding-left: 0; color: var(--text3); }

@media (max-width: 640px) {
  .viz-grid { grid-template-columns: 1fr; }
  .clock { margin-left: 0; width: 100%; }
  .meter { grid-template-columns: 70px minmax(0, 1fr) 56px; }
  .tgroup { border-right: 0; padding-right: 0; }
  .studio-page .toplinks a.current { display: inline; }
}

/* your data */
.limit { margin: 0 0 14px; border-left-color: var(--amber); }
.data-actions { justify-content: flex-start; }
.shred-confirm { border-color: var(--red); margin: 10px 0; }
.shred-confirm p { color: var(--text); margin-bottom: 10px; }
.inv-table td { white-space: normal; }
.inv-table td.sz { font-family: var(--mono); white-space: nowrap; color: var(--text); }
.inv-table tr.empty td { color: var(--text3); }
.inv-table tr.info td { font-style: italic; }
.inv-table td:first-child { font: .74rem var(--mono); color: var(--gold); white-space: nowrap; }
.inv-table button { font: .72rem var(--mono); color: var(--text); background: var(--panel2); border: 1px solid var(--line2); border-radius: 5px; padding: 3px 8px; cursor: pointer; }
.inv-table button:hover { border-color: var(--red); }
.receipt { margin-top: 14px; }
.receipt pre { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 420px; overflow-y: auto; }
#receipt-hash { overflow-wrap: anywhere; color: var(--green); }