:root {
  --bg: #0e1116;
  --bg-2: #161b22;
  --bg-3: #1c232c;
  --fg: #d8e0e8;
  --muted: #8b96a3;
  --accent: #5aa9ff;
  --accent-2: #7dd3fc;
  --good: #4ade80;
  --warn: #fbbf24;
  --bad: #f87171;
  --border: #2a323d;
  --mono: ui-monospace, "JetBrains Mono", "Fira Code", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--fg);
  font: 14px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  height: 100%;
}

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.9rem 1.4rem;
  background: var(--bg-2);
  border-bottom: 1px solid var(--border);
}
header h1 {
  margin: 0;
  font-size: 1.15rem;
  letter-spacing: 0.02em;
}
header .tag {
  background: var(--accent);
  color: #0b1018;
  padding: 0.05rem 0.45rem;
  border-radius: 0.3rem;
  font-size: 0.75rem;
  vertical-align: middle;
  margin-left: 0.35rem;
}
header .tagline {
  margin: 0.15rem 0 0;
  color: var(--muted);
  font-size: 0.82rem;
}
header nav a {
  color: var(--accent-2);
  text-decoration: none;
  margin-left: 1rem;
  font-size: 0.9rem;
}
header nav a:hover { text-decoration: underline; }

.menubar {
  display: flex;
  align-items: center;
  gap: 0.15rem;
  background: var(--bg-2);
  border-bottom: 1px solid var(--border);
  padding: 0.15rem 0.6rem;
  position: relative;
  z-index: 30;
}
.menubar-filename {
  margin-left: 0.8rem;
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--muted);
}
.menu { position: relative; }
.menu-button {
  background: transparent;
  border: 1px solid transparent;
  border-radius: 0.25rem;
  color: var(--fg);
  padding: 0.25rem 0.7rem;
  font: inherit;
  font-size: 0.82rem;
  cursor: pointer;
  white-space: nowrap;
}
.menu-button:hover,
.menu.open > .menu-button {
  background: var(--bg-3);
  border-color: var(--border);
}
.menu-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 13rem;
  max-height: 65vh;
  overflow-y: auto;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 0.35rem;
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.45);
  padding: 0.3rem 0;
  margin-top: 0.2rem;
}
.menu-dropdown-wide { min-width: 22rem; }
.menu.open > .menu-dropdown { display: block; }
.menu-dropdown button {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  border-radius: 0;
  color: var(--fg);
  font: inherit;
  font-size: 0.8rem;
  padding: 0.32rem 0.8rem;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.menu-dropdown button:hover { background: var(--bg-3); }
.menu-dropdown .menu-section {
  padding: 0.45rem 0.8rem 0.18rem;
  color: var(--muted);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-top: 1px solid var(--border);
  margin-top: 0.25rem;
}
.menu-dropdown .menu-section:first-child {
  border-top: none;
  margin-top: 0;
}
.menu-dropdown .menu-loading {
  margin: 0;
  padding: 0.5rem 0.8rem;
  color: var(--muted);
  font-size: 0.78rem;
}
.menu-dropdown .example-row {
  font-family: var(--mono);
}
.menu-dropdown .example-row .example-tech {
  color: var(--muted);
  margin-left: 0.5rem;
  font-size: 0.7rem;
}

main {
  --output-width: 380px;
  display: grid;
  grid-template-columns: 320px 1fr var(--output-width);
  gap: 0.9rem;
  padding: 0.9rem;
  /* Header + menubar + footer ≈ 135 px combined. */
  height: calc(100vh - 135px);
}

@media (max-width: 1100px) {
  main {
    grid-template-columns: 1fr;
    height: auto;
  }
  .output-resizer { display: none !important; }
}

/* Drag handle for the right-hand output panel. The handle covers the
   ENTIRE grid gap (0.9rem) between the layout panel and the output panel,
   plus a few extra pixels of buffer on each side, so the user can grab it
   anywhere in the visible space between the two panels. App.js wires the
   mousedown handler and writes the new value into ``--output-width``. */
.output { position: relative; }
.output-resizer {
  position: absolute;
  top: 0;
  bottom: 0;
  /* Span the full grid gap. ``main`` has ``column-gap: 0.9rem`` (14.4 px);
     this stretches an extra ~6 px past it on each side for hit tolerance. */
  left: -1.3rem;
  width: 1.7rem;
  cursor: col-resize;
  background: transparent;
  z-index: 5;
}
/* Always-visible centre bar — purely a visual affordance so users can
   see there's something to grab. Lights up + grows on hover / drag. */
.output-resizer::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 3px;
  height: 44px;
  background: var(--border);
  border-radius: 1.5px;
  pointer-events: none;
  transition: background 0.15s ease, width 0.15s ease, height 0.15s ease;
}
.output-resizer:hover::before {
  background: var(--accent);
  width: 4px;
  height: 64px;
}
.output-resizer.dragging::before {
  background: var(--accent-2);
  width: 4px;
  height: 100%;
}
/* Faint coloured strip on hover/drag so the entire hit zone is visible,
   not just the centre bar. */
.output-resizer:hover,
.output-resizer.dragging {
  background: rgba(90, 169, 255, 0.06);
}
body.dragging-resizer {
  cursor: col-resize !important;
  user-select: none;
}

.panel {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  padding: 0.9rem;
  overflow: auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.panel h2 {
  margin: 0.2rem 0 0.55rem;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  border-bottom: 1px solid var(--border);
  padding-bottom: 0.3rem;
}

.panel h2:not(:first-child) { margin-top: 0.9rem; }

label {
  display: block;
  margin: 0.45rem 0 0;
  font-size: 0.82rem;
  color: var(--muted);
}

input, select, textarea {
  width: 100%;
  background: var(--bg-3);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: 0.3rem;
  padding: 0.4rem 0.55rem;
  font: inherit;
  margin-top: 0.2rem;
}

input[type="number"] { font-variant-numeric: tabular-nums; }

.grid2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.4rem 0.6rem;
}

button {
  background: var(--bg-3);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: 0.3rem;
  padding: 0.45rem 0.7rem;
  cursor: pointer;
  font: inherit;
  transition: background 0.12s, border-color 0.12s;
}
button:hover:not(:disabled) {
  border-color: var(--accent);
}
button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
button.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #0b1018;
  font-weight: 600;
  width: 100%;
  margin-top: 0.7rem;
}
button.primary:hover:not(:disabled) {
  background: var(--accent-2);
  border-color: var(--accent-2);
}

.actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.4rem;
}
.actions button { width: 100%; }

.sweep-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0.4rem;
  margin-top: 0.5rem;
}

.viewer {
  position: relative;
}
.viewer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.viewer-head h2 { border: none; padding-bottom: 0; margin-bottom: 0; }

#canvas {
  flex: 1;
  width: 100%;
  background: var(--bg-3);
  border: 1px solid var(--border);
  border-radius: 0.4rem;
  margin-top: 0.5rem;
  min-height: 320px;
}

.dims {
  margin: 0.5rem 0 0;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 0.78rem;
}

/* The ASITIC `Create` command line that reproduces the current geometry.
   Tab-friendly: selectable, monospaced, soft accent-blue. Sits between
   the canvas and the dimensions strip. */
.create-cmd {
  margin: 0.5rem 0 0;
  padding: 0.35rem 0.55rem;
  background: var(--bg-3);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: 0.3rem;
  color: var(--accent-2);
  font-family: var(--mono);
  font-size: 0.78rem;
  white-space: pre-wrap;
  word-break: break-all;
  user-select: all;
  cursor: text;
}

.legend {
  display: flex;
  gap: 0.35rem;
  font-size: 0.75rem;
  color: var(--muted);
  flex-wrap: wrap;
}
.legend .swatch {
  display: inline-block;
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 0.15rem;
  margin-right: 0.25rem;
  vertical-align: middle;
}
/* Each layer in the legend is a click target — click to hide the layer
   on the canvas and click again to show it. Visual feedback: faded chip
   with a strike-through when hidden. */
.legend-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  padding: 0.12rem 0.4rem;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 0.25rem;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 0.72rem;
  cursor: pointer;
  transition: background 0.12s, color 0.12s, opacity 0.12s, border-color 0.12s;
  user-select: none;
}
.legend-chip .swatch { margin: 0; }
.legend-chip:hover {
  background: var(--bg-3);
  border-color: var(--border);
  color: var(--fg);
}
.legend-chip.layer-hidden {
  opacity: 0.4;
  text-decoration: line-through;
}
.legend-chip.layer-hidden .swatch { opacity: 0.4; }

.output-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
.output-head h2 { border: none; padding-bottom: 0; margin-bottom: 0; }
.output-clear {
  padding: 0.18rem 0.55rem;
  font-size: 0.72rem;
  color: var(--muted);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 0.25rem;
  cursor: pointer;
  flex: 0 0 auto;
}
.output-clear:hover { color: var(--fg); border-color: var(--accent); }
.output-clear:disabled { opacity: 0.4; cursor: not-allowed; }

.output-tabs {
  display: flex;
  gap: 0.3rem;
  overflow-x: auto;
  scrollbar-width: thin;
  max-width: 100%;
}
.tab {
  padding: 0.3rem 0.6rem;
  font-size: 0.78rem;
  background: transparent;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  white-space: nowrap;
  flex: 0 0 auto;
}
.tab.active {
  background: var(--bg-3);
  border-color: var(--accent);
  color: var(--accent-2);
}
.tab-close {
  display: inline-block;
  width: 1rem;
  height: 1rem;
  line-height: 0.85rem;
  text-align: center;
  border-radius: 0.2rem;
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
}
.tab-close:hover {
  background: var(--bad);
  color: #fff;
}

/* Per-tab header inside a dynamic analysis pane. */
.analysis-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.4rem;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.analysis-head .analysis-title {
  font-family: var(--mono);
  font-size: 0.82rem;
  color: var(--accent-2);
}
.analysis-head .live-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  color: var(--muted);
  font-size: 0.75rem;
  margin: 0;
  cursor: pointer;
}
.analysis-head .live-toggle input {
  width: auto;
  margin: 0;
}
.analysis-head .live-rerun {
  padding: 0.2rem 0.55rem;
  font-size: 0.72rem;
}
.analysis-head .live-stale {
  color: var(--warn);
  font-size: 0.72rem;
}
.analysis-out {
  flex: 1;
  background: var(--bg-3);
  border: 1px solid var(--border);
  border-radius: 0.4rem;
  padding: 0.7rem;
  overflow: auto;
  font-family: var(--mono);
  font-size: 0.82rem;
  white-space: pre-wrap;
  word-break: break-word;
  margin: 0;
  min-height: 150px;
}
.analysis-out.error { border-left: 3px solid var(--bad); color: #fecaca; }

/* Sweep tab — table of |Sij| values + SVG plot of |S11| / |S21|. */
.sweep-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  gap: 0.6rem;
}
.sweep-table-wrap {
  flex: 0 0 auto;
  max-height: 220px;
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: 0.4rem;
}
.sweep-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--mono);
  font-size: 0.78rem;
}
.sweep-table th,
.sweep-table td {
  padding: 0.22rem 0.6rem;
  border-bottom: 1px solid var(--border);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.sweep-table tbody tr:last-child td { border-bottom: none; }
/* Rows where the swept frequency sits above the self-resonance
   frequency — the geometry-only model no longer describes the
   inductor, so we flag the numbers as unreliable. */
.sweep-table tbody tr.above-srf td {
  background: rgba(248, 113, 113, 0.18);
  color: #fecaca;
}
.sweep-table tbody tr.above-srf:hover td {
  background: rgba(248, 113, 113, 0.28);
}
.sweep-table thead th {
  color: var(--muted);
  background: var(--bg-2);
  position: sticky;
  top: 0;
  font-weight: 500;
  z-index: 1;
}
.sweep-table th:first-child,
.sweep-table td:first-child { text-align: left; }
.sweep-resonance {
  color: var(--warn);
  font-size: 0.78rem;
  font-family: var(--mono);
}
.sweep-plot {
  width: 100%;
  height: 220px;
  flex: 0 0 auto;
  background: var(--bg-3);
  border: 1px solid var(--border);
  border-radius: 0.4rem;
}
.sweep-plot.lrq-sweep-plot {
  /* Three stacked mini-panels need more vertical room. */
  height: 360px;
}
.sweep-plot text {
  font-family: var(--mono);
  font-size: 9px;
}

.tab-pane {
  display: none;
  flex: 1;
  flex-direction: column;
  margin-top: 0.5rem;
  min-height: 0;
}
.tab-pane.active { display: flex; }

#results, #repl-out {
  flex: 1;
  background: var(--bg-3);
  border: 1px solid var(--border);
  border-radius: 0.4rem;
  padding: 0.7rem;
  overflow: auto;
  font-family: var(--mono);
  font-size: 0.82rem;
  white-space: pre-wrap;
  word-break: break-word;
  margin: 0;
  min-height: 200px;
}
#results.success { border-left: 3px solid var(--good); }
#results.error   { border-left: 3px solid var(--bad); color: #fecaca; }

#code {
  flex: 1;
  font-family: var(--mono);
  font-size: 0.82rem;
  resize: vertical;
  min-height: 140px;
  background: var(--bg-3);
}

.hint {
  font-size: 0.75rem;
  color: var(--muted);
  margin: 0 0 0.4rem;
}
.hint code {
  background: var(--bg-3);
  padding: 0.05rem 0.3rem;
  border-radius: 0.2rem;
}
kbd {
  background: var(--bg-3);
  border: 1px solid var(--border);
  border-bottom-width: 2px;
  border-radius: 0.25rem;
  padding: 0 0.3rem;
  font-family: var(--mono);
  font-size: 0.75rem;
}

.repl-row {
  display: flex;
  gap: 0.4rem;
  margin-top: 0.4rem;
}

footer {
  display: flex;
  justify-content: space-between;
  padding: 0.45rem 1.4rem;
  background: var(--bg-2);
  border-top: 1px solid var(--border);
  color: var(--muted);
  font-size: 0.8rem;
  font-family: var(--mono);
}

/* ``fill`` is set inline per-port in draw.js so the marker matches the
   tech-file colour of the layer it sits on. The dark stroke + paint-
   order outline below keep the marker visible on top of any metal. */
.shape-port { stroke: #000; stroke-width: 0.6; }
.shape-port-label {
  font-family: var(--mono);
  font-weight: 700;
  paint-order: stroke;
  stroke: #0e1116;
  stroke-width: 0.6;
  stroke-linejoin: round;
  pointer-events: none;
}
.shape-bbox { stroke: var(--muted); stroke-dasharray: 3 3; fill: none; opacity: 0.4; }
.axis      { stroke: var(--border); stroke-width: 0.5; }
.axis-label { fill: var(--muted); font-size: 8px; font-family: var(--mono); }