/* ===== THEME: light/dark via [data-theme] on :root ===== */

/* Redefine the surface tokens from styles.css for light mode. Because every
   toolbar button, input, popover, SPICE view, Smith overlay etc. in styles.css
   reads from --surface-*, --line, --text, --muted, --dim, overriding these few
   vars re-themes the whole app instead of needing one override per component. */
:root[data-theme="light"]{
  --bg:#eef1f5;--panel:#f5f7fa;--panel2:#e9edf3;--line:#d3dae4;
  --text:#1e293b;--muted:#54627a;--dim:#7c8aa0;

  --surface-0:#e2e8f0;
  --surface-1:#ffffff;
  --surface-2:#e7ecf3;
  --surface-3:#ffffff;
  --surface-header:#f5f7fa;
  --surface-hover:#e3e9f1;
  --surface-hover-strong:#dbe3ee;
  --border-hot:#94a9c4;
}

:root[data-theme="light"] #stage{
  background:radial-gradient(circle at 50% 45%,#f5f9fc 0,#f0f4f8 62%,#e8ecf0 100%);
  box-shadow:inset 0 0 90px rgba(0,0,0,.05);
}
:root[data-theme="dark"] #stage,#stage{
  background:radial-gradient(circle at 50% 45%,#08101d 0,#02050b 62%,#010207 100%);
  box-shadow:inset 0 0 90px #000;
}

:root[data-theme="light"] .stage-head,:root[data-theme="light"] .stage-help{
  border-color:rgba(0,0,0,.1);background:#f1f5f9;backdrop-filter:none;color:#1e293b;box-shadow:0 2px 10px rgba(0,0,0,.06);
}
:root[data-theme="dark"] .stage-head,:root[data-theme="dark"] .stage-help,.stage-head,.stage-help{
  border-color:rgba(103,232,249,.12);background:#03070dd9;color:#e2e8f0;
  box-shadow:0 10px 30px #0009,inset 0 1px rgba(255,255,255,.035);backdrop-filter:blur(14px);
}

:root[data-theme="light"] header{
  background:#ffffff;border-bottom-color:rgba(0,0,0,.1);box-shadow:0 1px 0 rgba(0,0,0,.06),0 4px 20px rgba(0,0,0,.05);color:#1e293b;
}
:root[data-theme="dark"] header,header{
  background:linear-gradient(180deg,#090e18,#060a11);box-shadow:0 8px 30px #0005;color:#e2e8f0;
}

:root[data-theme="light"] .library,:root[data-theme="light"] .inspector{
  background:#ffffff !important;backdrop-filter:none !important;color:#1e293b;
}
:root[data-theme="dark"] .library,:root[data-theme="dark"] .inspector,.library,.inspector{
  background:rgba(10,16,27,.6);backdrop-filter:blur(12px);color:#e2e8f0;
}

:root[data-theme="light"] .results{background:#ffffff !important;backdrop-filter:none !important;color:#1e293b}
:root[data-theme="dark"] .results,.results{background:rgba(4,7,13,.6);backdrop-filter:blur(8px);color:#e2e8f0}

/* ===== CANVAS LABELS ===== */
#canvas-labels{position:absolute;inset:0;z-index:3;pointer-events:none}
#canvas-labels span{
  position:absolute;min-width:29px;padding:3px 6px;
  border:1px solid color-mix(in srgb,var(--channel),transparent 35%);border-radius:5px;
  color:var(--channel);background:rgba(2,6,12,.92);box-shadow:0 4px 14px #000b;
  font:700 var(--sim-fs-2xs,9px) var(--mono);text-align:center;transform:translate(-50%,-50%);
}

/* ===== PLOTS ===== */
#plots{display:flex;gap:10px;min-width:0;overflow-x:auto;padding:9px 11px;scrollbar-width:thin;scrollbar-color:#26344a transparent}

:root[data-theme="light"] .plot-card{border-color:#d1d5db;background:#ffffff;border-bottom-color:rgba(0,0,0,.1);backdrop-filter:none;box-shadow:0 4px 14px rgba(0,0,0,.08)}
:root[data-theme="dark"] .plot-card,.plot-card{
  flex:0 0 390px;overflow:hidden;border:1px solid rgba(148,163,184,.1);border-top-color:rgba(255,255,255,.06);border-radius:9px;background:rgba(8,12,20,.6);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 6px 20px rgba(0,0,0,.2),inset 0 1px rgba(255,255,255,.03);transition:background .18s ease,box-shadow .18s ease,transform .18s ease;
}
.plot-card.victim{border-color:rgba(251,191,36,.2)}
.plot-head{height:29px;display:flex;align-items:center;justify-content:space-between;padding:0 9px;border-bottom:1px solid #182233}
.plot-head span{color:#64748b;font:600 var(--sim-fs-3xs,8px) var(--mono);letter-spacing:.11em}
.plot-head strong{color:#94a3b8;font:500 var(--sim-fs-3xs,8px) var(--mono)}
.plot-head strong.exceeded{color:#fb7185}
.plot-card{transition:background .18s ease,box-shadow .18s ease,transform .18s ease}.plot-card:hover{background:rgba(12,18,30,.7);box-shadow:0 10px 30px rgba(0,0,0,.25),inset 0 1px rgba(255,255,255,.04);transform:translateY(-1px)}
.plot-card canvas{display:block;width:100%;height:135px}
.plots-empty{display:grid;place-items:center;min-width:100%;color:#536176;font-size:var(--sim-fs-xs,10px)}

.readout{padding:7px 9px;background:rgba(59,130,246,.08);border-radius:6px;margin:0 0 12px;font:500 9px monospace;line-height:1.4;color:inherit}

/* ===== 3D MODE ===== */
:root[data-theme="light"] #field-3d{background:#e2e8f0}
:root[data-theme="dark"] #field-3d,#field-3d{position:absolute;inset:0;width:100%;height:100%;touch-action:none;background:#050911}
.tools-3d{
  position:absolute;z-index:5;left:12px;bottom:12px;display:flex;flex-wrap:wrap;gap:5px;
  max-width:calc(100% - 24px);padding:6px;border:1px solid rgba(148,163,184,.1);border-top-color:rgba(255,255,255,.06);border-radius:9px;background:rgba(20,28,44,.6);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:0 4px 14px rgba(0,0,0,.2);
}
.tools-3d[hidden]{display:none}
.tools-3d button,.tools-3d select{padding:6px 8px;border:1px solid rgba(148,163,184,.12);border-radius:6px;background:rgba(16,22,36,.5);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:var(--muted);font:var(--sim-fs-3xs,8px) var(--mono);transition:background .18s ease,border-color .18s ease,transform .18s ease,box-shadow .18s ease;box-shadow:0 1px 4px rgba(0,0,0,.1)}
.tools-3d button:hover{color:var(--cyan);border-color:var(--border-hot)}
.tools-3d select{color:var(--cyan)}

.readout-3d{
  position:absolute;z-index:5;top:52px;left:12px;width:265px;padding:10px;
  border:1px solid rgba(148,163,184,.1);border-top-color:rgba(255,255,255,.06);border-radius:9px;background:rgba(18,24,40,.65);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);color:var(--muted);
  box-shadow:0 4px 14px rgba(0,0,0,.2);font:var(--sim-fs-3xs,8px)/1.6 var(--mono);pointer-events:none;
}
.readout-3d[hidden]{display:none}
.readout-3d strong{color:var(--cyan)}
.readout-3d .warn{color:var(--red)}
.readout-3d .ok{color:var(--green)}
.readout-3d .wave-hint{color:#bae6fd}

body.mode-3d #app{grid-template-rows:60px minmax(0,1fr) 0}
body.mode-3d main{grid-template-columns:minmax(0,1fr)}
body.mode-3d .library,body.mode-3d .inspector,body.mode-3d .results,body.mode-3d #canvas-labels,body.mode-3d .stage-help{display:none}
body.mode-3d .stage-head{left:auto;right:12px}

/* ===== EXAMPLES POPOVER GRID ===== */
.popover:has(.example-category){
  right:18px;width:min(620px,calc(100vw - 36px));display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;
}
.example-category{min-width:0;padding:6px;border:1px solid rgba(148,163,184,.1);border-top-color:rgba(255,255,255,.06);border-radius:8px;background:rgba(8,12,20,.55);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 2px 8px rgba(0,0,0,.15)}
.example-category h3{
  display:flex;align-items:center;justify-content:space-between;margin:2px 5px 6px;
  color:var(--cyan);font:600 var(--sim-fs-2xs,9px) var(--mono);letter-spacing:.09em;text-transform:uppercase;
}
.example-category h3 span{padding:2px 6px;border-radius:99px;color:var(--dim);background:var(--surface-1)}
.example-category button small{line-height:1.35}
@media(max-width:620px){.popover:has(.example-category){grid-template-columns:1fr}}

.popover{top:64px}
.popover[hidden]{display:none!important}

/* ===== AUX WORKSPACE (embedded single-view mode) ===== */
.aux-workspace #app{grid-template-rows:60px minmax(0,1fr)}
.aux-workspace main{grid-template-columns:minmax(0,1fr)}
.aux-workspace main>.library,.aux-workspace main>.inspector,.aux-workspace #global-controls,
.aux-workspace #object-controls,.aux-workspace .results,.aux-workspace header .engine,
.aux-workspace #example,.aux-workspace #reset,.aux-workspace #clear,.aux-workspace #export,
.aux-workspace #play,.aux-workspace #tools-3d,.aux-workspace #readout-3d,.aux-workspace #field-3d,
.aux-workspace #canvas-labels,.aux-workspace .stage-head,.aux-workspace .stage-help{display:none!important}
.aux-workspace #stage{grid-column:1}