/* ═══════════════════════════════════════════════════════════════════
   MUSIC NEBULA — built on the sim template stylesheet.
   Canvas = animation only. All text/stats/panels = HTML divs.
   FONT FLOOR: nothing in the UI below 0.82rem (debug chrome exempt).
   ═══════════════════════════════════════════════════════════════════ */

:root {
    --bg:              #0a0e14;
    --panel-bg:        #111820;
    --canvas-bg:       #020408;
    --border:          #2a3545;

    --text-primary:    #e8edf4;
    --text-secondary:  #8a9bb0;
    --text-dim:        #3d4f62;

    --accent:          #00e5ff;
    --accent-dim:      rgba(0, 229, 255, 0.12);
    --accent-border:   rgba(0, 229, 255, 0.5);

    --color-ok:        #22c55e;
    --color-warn:      #fbbf24;
    --color-danger:    #f43f5e;
    --color-gold:      #ffd700;

    --color-a:         #d97706;
    --color-b:         #2563eb;

    --font-sans:       system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-mono:       'Roboto Mono', 'Cascadia Code', 'Consolas', monospace;

    --canvas-w:        1200px;
    --canvas-h:        700px;
    --panel-left-w:    240px;
    --panel-right-w:   300px;

    --panel-pad:       14px;
    --panel-radius:    10px;
    --border-radius:   6px;
    --stat-bar-h:      8px;
    --btn-h:           30px;
    --gap:             12px;

    --panel-max-h:     calc(100vh - 110px);
}

*, *::before, *::after { box-sizing: border-box; }

html { margin: 0; padding: 0; background: var(--bg); overflow-y: auto; }
body {
    margin: 0; padding: 0;
    background: var(--bg);
    color: var(--text-primary);
    font-family: var(--font-mono);
}

button { cursor: pointer; font-family: inherit; }
h1, h2, h3, p { margin: 0; }
canvas { display: block; }

/* ── Shell ─────────────────────────────────────────────────────── */
.sim-shell {
    display: flex; flex-direction: column; align-items: center;
    padding: 12px; gap: var(--gap); min-height: 100vh;
}

/* ── Top HUD ───────────────────────────────────────────────────── */
.hud-top {
    display: flex; align-items: center; gap: 20px;
    width: 100%;
    max-width: calc(var(--panel-left-w) + var(--canvas-w) + var(--panel-right-w) + 28px);
    padding: 8px 14px;
    background: var(--panel-bg); border: 1px solid var(--border);
    border-radius: var(--panel-radius); flex-wrap: wrap; flex-shrink: 0;
}
.hud-top__title    { display: flex; gap: 10px; align-items: baseline; }
.hud-top__controls { display: flex; gap: 8px; margin-left: auto; }

.hud-title {
    font-size: 1.15rem; font-weight: 700; color: var(--text-primary);
    letter-spacing: 0.06em; text-transform: uppercase;
}
.hud-value { font-size: 1.00rem; color: var(--accent); font-variant-numeric: tabular-nums; }
.hud-badge {
    font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em;
    color: #0a0e14; background: var(--accent);
    padding: 2px 7px; border-radius: 4px; text-transform: uppercase;
}

/* ── Body row ──────────────────────────────────────────────────── */
.sim-body { display: flex; align-items: flex-start; gap: var(--gap); }

/* ── Canvas column ─────────────────────────────────────────────── */
.canvas-column { display: flex; flex-direction: column; gap: 8px; flex: 0 0 auto; }

.canvas-frame {
    width: var(--canvas-w); height: var(--canvas-h);
    background: var(--canvas-bg); border: 1px solid var(--border);
    border-radius: var(--border-radius); overflow: hidden; position: relative;
}
.canvas-frame canvas { width: 100%; height: 100%; cursor: grab; }
.canvas-frame canvas:active { cursor: grabbing; }

/* ── Panels ────────────────────────────────────────────────────── */
.panel {
    padding: var(--panel-pad); background: var(--panel-bg);
    border: 1px solid var(--border); border-radius: var(--panel-radius);
    display: flex; flex-direction: column; gap: 0;
    overflow-y: auto; max-height: var(--panel-max-h);
}
.panel--left  { width: var(--panel-left-w);  flex: 0 0 var(--panel-left-w);  }
.panel--right { width: var(--panel-right-w); flex: 0 0 var(--panel-right-w); }

.panel-section {
    display: flex; flex-direction: column; gap: 7px;
    padding-bottom: 12px; margin-bottom: 12px;
    border-bottom: 1px solid var(--border);
}
.panel-section:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }

.panel-title {
    font-size: 0.82rem; font-weight: 700; color: var(--accent);
    letter-spacing: 0.14em; text-transform: uppercase;
}

/* ── Stat bars ─────────────────────────────────────────────────── */
.stat-row { display: flex; flex-direction: column; gap: 4px; }
.stat-row__labels { display: flex; justify-content: space-between; font-size: 0.90rem; }
.stat-label { color: var(--text-secondary); }
.stat-value { color: var(--text-primary); font-variant-numeric: tabular-nums; }
.stat-bar {
    width: 100%; height: var(--stat-bar-h);
    background: rgba(0,0,0,0.5); border: 1px solid rgba(255,255,255,0.07);
    border-radius: 4px; overflow: hidden;
}
.stat-bar__fill { height: 100%; width: 100%; transition: width 200ms ease; border-radius: 4px; }
.stat-bar__fill--a      { background: linear-gradient(90deg, #163a22, var(--color-ok)); }
.stat-bar__fill--b      { background: linear-gradient(90deg, #0a2a34, var(--accent)); }
.stat-bar__fill--warn   { background: linear-gradient(90deg, #4a2800, var(--color-warn)); }
.stat-bar__fill--danger { background: linear-gradient(90deg, #3a0010, var(--color-danger)); }

/* ── Buttons ───────────────────────────────────────────────────── */
.btn {
    min-height: var(--btn-h); padding: 5px 10px;
    border: 1px solid var(--border); border-radius: var(--border-radius);
    background: rgba(0,0,0,0.3); color: var(--text-secondary);
    font-family: var(--font-mono); font-size: 0.90rem; letter-spacing: 0.04em;
    text-align: center; transition: border-color 80ms, color 80ms, background 80ms;
    white-space: nowrap;
}
.btn:hover { border-color: var(--accent-border); color: var(--text-primary); }
.btn.is-active { border-color: var(--accent); color: var(--text-primary); background: var(--accent-dim); }
.btn--full   { width: 100%; text-align: left; }
.btn--accent { border-color: var(--accent-border); color: var(--accent); }

/* ── Telemetry bar ─────────────────────────────────────────────── */
.telem-bar {
    display: flex; flex-wrap: wrap; gap: 8px 20px;
    width: var(--canvas-w); padding: 9px 14px;
    background: rgba(0,0,0,0.32); border: 1px solid var(--border);
    border-radius: var(--border-radius);
}
.telem-group { display: flex; flex-direction: column; gap: 3px; }
.telem-label {
    font-size: 0.82rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.12em; color: var(--text-secondary);
}
.telem-value {
    font-size: 0.92rem; color: var(--text-primary);
    font-variant-numeric: tabular-nums; white-space: nowrap; min-height: 1.1em;
}

/* ── Scrollbars ────────────────────────────────────────────────── */
::-webkit-scrollbar              { width: 6px; height: 6px; }
::-webkit-scrollbar-track        { background: transparent; }
::-webkit-scrollbar-thumb        { background: #2a3a4e; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover  { background: #3a5068; }
::-webkit-scrollbar-corner       { background: transparent; }

/* ── Debug consoles ────────────────────────────────────────────── */
.dbg-wrap {
    display: none; width: var(--canvas-w); background: #07090d;
    border: 1px solid var(--border); border-radius: var(--border-radius);
    overflow: hidden; flex-shrink: 0;
}
.dbg-wrap.is-visible { display: flex; flex-direction: column; }
.dbg-titlebar {
    padding: 3px 8px; background: rgba(0,0,0,0.45);
    border-bottom: 1px solid var(--border);
    font-size: 0.75rem; font-weight: 700; letter-spacing: 0.10em;
    text-transform: uppercase; color: var(--text-dim); flex-shrink: 0;
}
.dbg-titlebar span { color: var(--accent); }
.dbg-row { display: flex; gap: 1px; height: calc(1.45em * 9 + 10px); background: var(--border); }
.dbg-pane { flex: 1 1 0; background: #07090d; padding: 5px 8px; overflow: hidden; }
.dbg-pane pre {
    margin: 0; font-family: 'Cascadia Code', 'Consolas', monospace;
    font-size: 0.80rem; line-height: 1.45; white-space: pre-wrap; word-break: break-word;
}
.dbg-pane--monitor { display: flex; gap: 1px; overflow: hidden; padding: 0; }
.dbg-pane--monitor .dbg-col { flex: 1 1 0; overflow-y: auto; padding: 5px 8px; }
.dbg-pane--monitor pre { color: #6fd060; min-height: calc(1.45em * 9); }
.dbg-pane--log { overflow-y: auto; }
.dbg-pane--log pre { color: #c8a060; min-height: calc(1.45em * 9); }

/* ═══════════════════════════════════════════════════════════════
   NEBULA-SPECIFIC COMPONENTS
   ═══════════════════════════════════════════════════════════════ */

/* ── Search ────────────────────────────────────────────────────── */
.search-input {
    width: 100%; padding: 6px 9px;
    background: rgba(0,0,0,0.4); border: 1px solid var(--border);
    border-radius: var(--border-radius); color: var(--text-primary);
    font-family: var(--font-mono); font-size: 0.90rem; outline: none;
}
.search-input:focus { border-color: var(--accent-border); }
.search-results { display: flex; flex-direction: column; gap: 2px; }
.search-hit {
    display: flex; align-items: center; gap: 7px;
    padding: 4px 6px; font-size: 0.88rem; color: var(--text-secondary);
    border-radius: 4px; cursor: pointer;
}
.search-hit:hover { background: rgba(255,255,255,0.05); color: var(--text-primary); }
.search-empty { font-size: 0.85rem; color: var(--text-dim); padding: 4px 6px; }

/* ── Filter buttons ────────────────────────────────────────────── */
.filter-buttons { display: flex; flex-direction: column; gap: 5px; }

/* ── Legend ────────────────────────────────────────────────────── */
.legend { display: flex; flex-direction: column; gap: 5px; }
.legend-row { display: flex; align-items: center; gap: 8px; }
.legend-dot {
    width: 11px; height: 11px; border-radius: 50%; flex-shrink: 0;
    box-shadow: 0 0 6px currentColor;
}
.legend-text { font-size: 0.84rem; color: var(--text-secondary); }

/* ── Rec queue ─────────────────────────────────────────────────── */
.rec-items { display: flex; flex-direction: column; gap: 4px; }
.rec-item {
    display: flex; gap: 9px; align-items: baseline;
    padding: 6px 7px; border-radius: 5px; cursor: pointer;
    border: 1px solid transparent;
}
.rec-item:hover { background: rgba(255,255,255,0.04); border-color: var(--border); }
.rec-num { font-size: 0.78rem; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.rec-text { font-size: 0.88rem; color: var(--text-primary); line-height: 1.3; }
.rec-entry { font-size: 0.80rem; color: var(--text-secondary); }

/* ── Detail panel ──────────────────────────────────────────────── */
.detail-tier { font-size: 0.80rem; font-weight: 700; letter-spacing: 0.18em; }
.detail-name { font-size: 1.45rem; font-weight: 700; line-height: 1.1; letter-spacing: 0.01em; }
.detail-play { display: flex; gap: 6px; }
.detail-play .btn { flex: 1; }

.detail-tags { display: flex; flex-wrap: wrap; gap: 5px; }
.ptag {
    font-size: 0.78rem; letter-spacing: 0.04em;
    padding: 2px 7px; border: 1px solid; border-radius: 3px;
}

.detail-why {
    font-size: 0.92rem; color: var(--text-secondary); line-height: 1.55;
    border-left: 2px solid var(--border); padding-left: 11px; font-style: italic;
}

.detail-entries { display: flex; flex-direction: column; gap: 4px; }
.entry-link {
    font-size: 0.88rem; color: var(--text-primary); text-decoration: none;
    padding: 4px 8px; border: 1px solid var(--border); border-radius: 5px;
    transition: border-color 80ms, background 80ms;
}
.entry-link:hover { border-color: var(--accent-border); background: var(--accent-dim); color: var(--accent); }

.detail-similar { display: flex; flex-wrap: wrap; gap: 6px; }
.sim-btn {
    font-size: 0.82rem; background: rgba(255,255,255,0.04);
    border: 1px solid var(--border); color: var(--text-secondary);
    padding: 4px 9px; border-radius: 5px; font-family: var(--font-mono);
    transition: border-color 80ms, color 80ms, background 80ms;
}
.sim-btn:hover { border-color: var(--accent-border); color: var(--text-primary); background: rgba(255,255,255,0.08); }

.detail-paths { display: flex; flex-direction: column; gap: 7px; }
.path-pill {
    font-size: 0.80rem; color: var(--text-secondary); line-height: 1.6;
    padding: 6px 9px; border: 1px solid var(--border); border-radius: 5px;
}
.path-pill strong {
    display: block; color: var(--text-primary);
    letter-spacing: 0.06em; margin-bottom: 3px; font-size: 0.82rem;
}
.muted { color: var(--text-dim); font-size: 0.84rem; }

/* ── Responsive: stack panels under canvas on narrow screens ───── */
@media (max-width: 1320px) {
    .sim-body { flex-direction: column; align-items: center; }
    .panel--left, .panel--right { width: var(--canvas-w); flex: none; max-height: none; }
    .canvas-frame, .telem-bar, .dbg-wrap { max-width: 100%; }
}
@media (max-width: 1240px) {
    :root { --canvas-w: 96vw; --canvas-h: 60vh; }
}