/* ==========================================================================
 * Pro Dev — professional overlay
 * A clean, modern developer-console look layered on top of ANY JAMSI theme.
 * Uses the theme's CSS variables (--bg, --panel, --panel2, --text, --muted,
 * --border, --accent, --accent-hot) so it looks consistent in both dark and
 * light themes. Only restyles existing elements (all IDs/classes preserved).
 * ========================================================================== */

/* ---- global surfaces ---- */
.console { width: min(98vw, 1600px); padding: 0 20px 30px; }
.masthead { padding: 16px 6px 14px; }
.brand h1 { font: 700 40px/1 "Inter", sans-serif; letter-spacing: -.05em; text-shadow: none; color: var(--text); }
.brand h1 span { color: var(--accent); }
.brand-kicker { font-size: 10px; letter-spacing: .3em; }
.brand p { font-size: 10px; }
.system-badges span { background: var(--panel); border-color: var(--border); color: var(--muted); }

/* ---- monitor: sleeker bezel ---- */
.monitor { padding: 12px; border-radius: 14px; background: var(--panel); box-shadow: 0 18px 40px #0008, inset 0 1px #ffffff0c, 0 0 0 1px var(--border); }
.monitor-bezel { border-radius: 10px; background: var(--panel2); box-shadow: inset 0 0 0 1px var(--border); }
.screen-shell { border-radius: 6px; box-shadow: 0 0 0 1px var(--border), inset 0 0 30px #000; }

/* ---- control deck: clean buttons ---- */
.control-deck { gap: 8px; }
.deck-button, .btn-ctrl, button.btn-ctrl {
  border-radius: 8px; border: 1px solid var(--border);
  background: linear-gradient(var(--panel2), var(--panel)); color: var(--text);
  box-shadow: inset 0 1px #ffffff0a, 0 1px 2px #0006;
  transition: border-color .12s, color .12s, transform .05s;
}
.deck-button:hover, .btn-ctrl:hover { border-color: var(--accent); color: var(--accent-hot); }
.deck-button:active { transform: translateY(1px); }

/* ---- tabs & panels ---- */
.debugger-tabs .tab-btn, .tab-btn {
  background: transparent; border: 1px solid transparent; color: var(--muted);
  padding: 8px 14px; border-radius: 7px 7px 0 0; font-size: 12px; letter-spacing: .04em;
}
.debugger-tabs .tab-btn.active, .tab-btn.active {
  color: var(--accent-hot); background: var(--panel); border-color: var(--border); border-bottom-color: transparent;
}

/* ---- debugger modal (docked) ---- */
.debugger-content { background: var(--panel2); border: 1px solid var(--border); border-radius: 12px; box-shadow: -20px 0 50px #0009; }
.debugger-header { background: linear-gradient(180deg, var(--panel), var(--panel2)); }
.debugger-panel { background: var(--panel); border: 1px solid var(--border); border-radius: 8px; }
.debugger-panel h3, .mem-header { color: var(--muted); letter-spacing: .06em; }

/* ---- registers / values ---- */
.dbg-field, .dbg-textarea { background: var(--panel2) !important; border: 1px solid var(--border) !important; border-radius: 6px; color: var(--text) !important; }
.code-view, .disasm-panel, .mem-panel { font-size: 12px; }

/* ---- dev-mode split (docked right panel) ---- */
body.dev-mode {
  --dev-panel-width: min(52vw, 920px);
}
body.dev-mode .console {
  /* The emulator occupies exactly the space left of the docked panel, so it
   * never slides underneath it and never leaves a gap. */
  width: calc(100vw - var(--dev-panel-width));
  max-width: none;
  margin: 0;
  padding: 12px 24px 24px;
}
body.dev-mode .monitor {
  max-width: 100%;
  width: 100%;
}
body.dev-mode .debugger-modal {
  width: var(--dev-panel-width); background: rgba(8,12,16,.4); border-left: 1px solid var(--border);
}
body.dev-mode .debugger-content { height: 100vh; border-radius: 0; box-shadow: -18px 0 50px #000a; }

/* ---- emulator screen area in dev mode is a clean panel ---- */
body.dev-mode .monitor { border-radius: 0; background: #070b0e; }
/* Let the CRT shell fill the whole monitor width in dev mode so the screen
 * stretches edge to edge instead of leaving a gap to the docked panel. */
body.dev-mode .screen-shell { max-width: none; margin-inline: 0; }

/* ---- scrollbars ---- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--panel2); }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 6px; border: 2px solid var(--panel2); }
::-webkit-scrollbar-thumb:hover { background: var(--muted); }