/* Shared design system loaded via shared.css */

:root {
    --bg-base: #09090b;
    --bg-panel: #18181b;
    --bg-card: #27272a;
    
    --text-main: #f4f4f5;
    --text-muted: #a1a1aa;
    
    --node-color: #0ea5e9;       /* Cyan for normal nodes */
    --node-hover: #ec4899;       /* Pink for highlighted path */
    --line-normal: #3f3f46;      /* Dim gray for inactive lines */
    --line-active: #ec4899;      /* Pink for active lines */
    --twiddle-color: #eab308;    /* Yellow for twiddle text */
    
    --border: #3f3f46;
}

body { margin: 0; font-family: system-ui, sans-serif; background: var(--bg-base); color: var(--text-main); overflow-x: hidden; }
.dashboard { padding: 15px; height: 100vh; display: flex; flex-direction: column; box-sizing: border-box; }

header { display: flex; justify-content: space-between; align-items: center; background: var(--bg-panel); padding: 15px 20px; border-radius: 8px; border: 1px solid var(--border); margin-bottom: 15px; }
header h1 { margin: 0; font-size: 1.4rem; color: #fff; }
header p { margin: 4px 0 0 0; color: var(--text-muted); font-size: 0.9rem; }

.select-dropdown { background: var(--bg-card); color: #fff; border: 1px solid var(--border); padding: 8px 12px; border-radius: 4px; font-size: 1rem; cursor: pointer; }

.grid-container { display: flex; gap: 15px; flex: 1; min-height: 0; }
.info-panel { width: 320px; flex-shrink: 0; display: flex; flex-direction: column; }
.visualizer-panel { flex: 1; display: flex; flex-direction: column; }

.panel { background: var(--bg-panel); border-radius: 8px; border: 1px solid var(--border); overflow: hidden; }
.panel-header { padding: 12px 15px; border-bottom: 1px solid var(--border); background: var(--bg-card); display: flex; justify-content: space-between; align-items: center;}
h2 { margin: 0; font-size: 1.1rem; color: #fff; }

.panel-content { padding: 20px; overflow-y: auto; line-height: 1.6; }
.concept-list { padding-left: 20px; color: var(--text-muted); font-size: 0.95rem; }
.concept-list li { margin-bottom: 10px; }
strong { color: var(--text-main); }

.instruction-box { margin-top: 20px; background: rgba(236, 72, 153, 0.1); border-left: 3px solid var(--node-hover); padding: 15px; border-radius: 0 4px 4px 0; font-size: 0.95rem; }

.legend { display: flex; gap: 15px; font-size: 0.85rem; color: var(--text-muted); }
.legend-item { display: flex; align-items: center; gap: 6px; }
.line-sample { display: inline-block; width: 20px; height: 2px; }
.normal-line { background: #fff; }
.mult-line { border-bottom: 2px dashed var(--twiddle-color); }
.sub-line { background: #ef4444; }

.canvas-wrapper { position: relative; flex: 1; width: 100%; background: #000; overflow: hidden; }
canvas { display: block; width: 100%; height: 100%; cursor: crosshair; }

@media (max-width: 900px) { .grid-container { flex-direction: column; } .info-panel { width: 100%; } }




/* Ensure the body is relative so the button positions correctly */


/* ================================================================
   DESIGN SYSTEM OVERRIDE — Applied via shared.css variables
   These overrides unify all pages to the shared dark-lab aesthetic
   ================================================================ */

/* Reset old colors to use CSS variables from shared.css */
body {
  font-family: var(--font-sans) !important;
  background-color: var(--bg) !important;
  color: var(--text-primary) !important;
  padding-top: 72px !important;
}

h1, h2, h3 {
  font-family: var(--font-mono) !important;
}

h1 { color: var(--text-primary) !important; }
h2 { color: var(--cyan) !important; }

/* Panel backgrounds */
.controls-panel, .panel, .dashboard > *, .grid-container > *,
.info-panel, .visualizer-panel, aside, section.panel {
  background: var(--panel) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-panel) !important;
  color: var(--text-primary) !important;
}

.panel-header, header.panel-header {
  background: var(--panel-2) !important;
  border-bottom: 1px solid var(--border) !important;
  padding: 12px 16px !important;
}

/* Inputs */
input[type="text"], input[type="number"], select, textarea {
  background: var(--bg-2) !important;
  border: 1px solid var(--border-2) !important;
  color: var(--text-primary) !important;
  font-family: var(--font-mono) !important;
  border-radius: var(--radius-sm) !important;
}

label {
  color: var(--text-secondary) !important;
  font-family: var(--font-mono) !important;
  font-size: 0.78rem !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
}

/* Buttons */
button {
  font-family: var(--font-mono) !important;
  border-radius: var(--radius-sm) !important;
}

/* Canvas containers */
.canvas-container, .canvas-wrapper {
  background: var(--bg) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-md) !important;
  overflow: hidden;
}

/* Metrics / data boxes */
.metrics-box, .data-box, .explanation-panel,
.instruction-box, .dynamic-explanation {
  background: var(--bg) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-md) !important;
  color: var(--text-secondary) !important;
  font-size: 0.85rem !important;
}

/* Highlights */
.highlight, .highlight-k { color: var(--amber) !important; }
span[style*="color: #89b4fa"], .text-blue { color: var(--cyan) !important; }

/* Subtitles */
.subtitle, .page-subtitle, p.subtitle {
  color: var(--text-secondary) !important;
  font-family: var(--font-mono) !important;
  font-size: 0.82rem !important;
}

/* Fix dashboard flex → still works but adds top padding spacing */
.dashboard {
  padding-top: 8px;
}

/* ── SCROLL & HOME-BTN FIX ── */
body {
  padding-top: 72px !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  height: auto !important;
}
.dashboard {
  height: auto !important;
  min-height: calc(100vh - 72px) !important;
}
.canvas-wrapper {
  min-height: 340px;
  overflow: hidden !important;
}
@media (max-width: 900px) {
  .canvas-wrapper { min-height: 260px; }
  .info-panel { max-height: 50vh; overflow-y: auto; }
}