/* ===================================================================
   "Panel" theme — alternate visual treatment layered on top of the
   default styles in style.css. Every rule here is scoped under
   html[data-theme="panel"], so it has ZERO effect until that attribute
   is set (see app.js). This file changes appearance only — no rule
   here touches structure, layout logic, or behavior.
   =================================================================== */

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/ibm-plex-mono-400.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/ibm-plex-mono-500.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/ibm-plex-mono-600.woff2') format('woff2');
}

html[data-theme="panel"] {
  /* One family everywhere — redefining these two tokens reflows every
     existing font-family: var(--sans)/var(--mono) rule automatically. */
  --sans: 'IBM Plex Mono', ui-monospace, "SF Mono", "Roboto Mono", "Consolas", monospace;
  --mono: 'IBM Plex Mono', ui-monospace, "SF Mono", "Roboto Mono", "Consolas", monospace;
  font-variant-numeric: tabular-nums lining-nums;

  /* Faceplate palette */
  --panel-bg: #c9c6c0;
  --panel-field: #e2ded6;
  --panel-selected: #dcd6cc;
  --panel-hairline: #a09d95;
  --panel-control-border: #8e8b84;
  --panel-divider: #b5b1a9;
  --panel-text-primary: #14150f;
  --panel-text-body: #1c1d1b;
  --panel-text-secondary: #4f4d45;
  --panel-text-tertiary: #68655d;
  --panel-text-note: #5d5b53;
  --panel-signal: #a84204;
  --panel-signal-hi: #cf5106;
  --panel-destructive: #8a2c10;

  /* Stage palette */
  --stage-bg: #000000;
  --stage-track: #0a0908;
  --stage-track-hairline: #2a100a;
  --stage-endstop: #6d2606;
  --stage-marker: #e2500f;
  --stage-title: #a8410a;
  --stage-note: #9c3f0c;
  --stage-status: #a5410f;
  --stage-control-border: #55220a;
  --stage-exit: #56534f;
  --stage-hint: #454342;
  --stage-upnext: #4c4a49;
}

/* ---------- motion: nothing moves except the marker ---------- */
html[data-theme="panel"] .splash-wordmark { animation: none; }
html[data-theme="panel"] .tune-row,
html[data-theme="panel"] .tune-row-wrap {
  transition: none !important;
}
html[data-theme="panel"] .btn-nav:active { transition: none; }

/* ---------- splash ---------- */
html[data-theme="panel"] #splash-screen { background: var(--stage-bg); }
html[data-theme="panel"] .splash-wordmark { color: var(--stage-marker); font-weight: 600; }
html[data-theme="panel"] .splash-hint { color: var(--stage-exit); }

/* ---------- setlist screen (faceplate) ---------- */
html[data-theme="panel"] #setlist-screen { background: var(--panel-bg); }
html[data-theme="panel"] .setlist-header h1 {
  color: var(--panel-text-primary);
  font-size: 19px;
  font-weight: 600;
  text-wrap: balance;
}
html[data-theme="panel"] .icon-btn {
  background: var(--panel-field);
  color: var(--panel-text-secondary);
  border-radius: 0;
  border: 1px solid var(--panel-control-border);
}
html[data-theme="panel"] .empty-state { color: var(--panel-text-tertiary); }

html[data-theme="panel"] .tune-list { gap: 0; }
html[data-theme="panel"] .tune-row-wrap {
  border-radius: 0;
  border-bottom: 1px solid var(--panel-divider);
}
html[data-theme="panel"] .tune-row-wrap.dragging {
  box-shadow: none;
  background: var(--panel-selected);
}
html[data-theme="panel"] .tune-row { background: var(--panel-bg); border-radius: 0; }
html[data-theme="panel"] .tune-row-title {
  color: var(--panel-text-primary);
  font-size: 18px;
  font-weight: 500;
  text-wrap: balance;
}
html[data-theme="panel"] .tune-row-meta {
  color: var(--panel-signal);
  font-size: 28px;
  font-weight: 500;
}
html[data-theme="panel"] .tune-row-note {
  color: var(--panel-text-note);
  font-size: 14px;
  text-wrap: pretty;
}
html[data-theme="panel"] .tune-row-drag-handle { color: var(--panel-text-tertiary); }
html[data-theme="panel"] .tune-row-delete-bg { background: var(--panel-destructive); }
html[data-theme="panel"] .tune-row-delete-action { color: var(--panel-field); }

html[data-theme="panel"] .btn { border-radius: 0; }
html[data-theme="panel"] .btn-primary { background: var(--panel-signal-hi); color: var(--panel-field); }
html[data-theme="panel"] .btn-secondary {
  background: var(--panel-field);
  color: var(--panel-text-body);
  border-color: var(--panel-control-border);
}
html[data-theme="panel"] .btn-danger {
  color: var(--panel-destructive);
  border-color: var(--panel-destructive);
}
html[data-theme="panel"] .btn-perform { background: var(--panel-signal-hi); color: var(--panel-field); }
html[data-theme="panel"] .btn-perform:disabled {
  background: var(--panel-field);
  color: var(--panel-text-tertiary);
}

/* ---------- modals (faceplate) ---------- */
html[data-theme="panel"] .modal-panel { background: var(--panel-bg); border-radius: 0; }
html[data-theme="panel"] .modal-panel h2 {
  color: var(--panel-text-primary);
  text-wrap: balance;
}
html[data-theme="panel"] .field-label { color: var(--panel-text-secondary); font-size: 15px; }
html[data-theme="panel"] .text-input {
  background: var(--panel-field);
  color: var(--panel-text-body);
  border-color: var(--panel-control-border);
  border-radius: 0;
}
html[data-theme="panel"] .text-input:focus { border-color: var(--panel-signal-hi); }
html[data-theme="panel"] .btn-nudge {
  background: var(--panel-field);
  color: var(--panel-signal);
  border-radius: 0;
  border: 1px solid var(--panel-control-border);
}
html[data-theme="panel"] .bpm-value { color: var(--panel-text-primary); font-size: 44px; }
html[data-theme="panel"] #brightness-slider { accent-color: var(--panel-signal-hi); }

html[data-theme="panel"] .option-row,
html[data-theme="panel"] .jump-row-btn {
  background: var(--panel-field);
  color: var(--panel-text-body);
  border: 1px solid var(--panel-control-border);
  border-radius: 0;
  box-shadow: none;
}
html[data-theme="panel"] .option-row-title { color: var(--panel-text-primary); }
html[data-theme="panel"] .option-row-desc,
html[data-theme="panel"] .jump-row-bpm { color: var(--panel-text-tertiary); }
html[data-theme="panel"] .jump-row-btn { color: var(--panel-text-primary); }
html[data-theme="panel"] .option-row.selected,
html[data-theme="panel"] .jump-row-btn.current {
  background: var(--panel-selected);
  border-color: var(--panel-control-border);
  box-shadow: inset 5px 0 0 var(--panel-signal-hi);
}

html[data-theme="panel"] .settings-summary-row {
  background: var(--panel-field);
  color: var(--panel-text-primary);
  border: 1px solid var(--panel-control-border);
  border-radius: 0;
}
html[data-theme="panel"] .settings-summary-chevron { color: var(--panel-text-tertiary); }

html[data-theme="panel"] .segmented-option {
  background: var(--panel-field);
  color: var(--panel-text-body);
  border: 1px solid var(--panel-control-border);
  border-radius: 0;
}
html[data-theme="panel"] .segmented-option.selected {
  background: var(--panel-signal-hi);
  color: var(--panel-field);
  border-color: var(--panel-signal-hi);
}
html[data-theme="panel"] .settings-hint { color: var(--panel-text-tertiary); }

/* ---------- performance screen (stage) ---------- */
html[data-theme="panel"] #performance-screen {
  background: var(--stage-bg);
  filter: none;
  opacity: calc(0.22 + 0.78 * var(--perf-brightness));
}
html[data-theme="panel"] .exit-btn { color: var(--stage-exit); font-size: 13px; }
html[data-theme="panel"] .perf-title {
  color: var(--stage-title);
  font-size: 30px;
  font-weight: 500;
  text-wrap: balance;
}
html[data-theme="panel"] .perf-note {
  color: var(--stage-note);
  font-size: 24px;
  text-wrap: pretty;
}
html[data-theme="panel"] .perf-bpm {
  color: var(--stage-marker);
  font-size: 132px;
  font-weight: 600;
  line-height: 0.9;
  letter-spacing: -0.02em;
}
html[data-theme="panel"] .pulse-area {
  background: var(--stage-track);
  border: 1px solid var(--stage-track-hairline);
}
html[data-theme="panel"] .stop { background: var(--stage-endstop); border-radius: 0; }
html[data-theme="panel"] .marker {
  background: var(--stage-marker);
  border-radius: 0;
  box-shadow: none;
}
html[data-theme="panel"] .beat-counter { color: var(--stage-status); font-size: 19px; }
html[data-theme="panel"] .pulse-hint { color: var(--stage-hint); font-size: 14px; }
html[data-theme="panel"] .btn-nav {
  background: transparent;
  color: var(--stage-marker);
  border: 1px solid var(--stage-control-border);
  border-radius: 0;
}
html[data-theme="panel"] .btn-nav:active { background: var(--stage-track); }
html[data-theme="panel"] .up-next { color: var(--stage-upnext); font-size: 15px; }