/* View: circuits — simple residential-wiring simulator */

/* Full-height layout: the board fills the viewport and reclaims empty space. */
.circ-page {
  max-width: 1600px;
  margin: 0 auto;
  padding: 8px 12px 10px;
  font-family: 'Roboto Mono', monospace;
  display: flex;
  flex-direction: column;
  height: calc(100dvh - 84px);
  min-height: 420px;
}

.circ-header {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 6px;
}
.circ-title {
  font-size: var(--font-size-xl, 1.4rem);
  color: var(--color-cyberpunk-pink);
  letter-spacing: 5px;
  margin: 0;
}
.circ-info-btn {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid rgba(51, 255, 51, 0.5);
  background: transparent;
  color: var(--color-terminal-green);
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, box-shadow 0.15s;
}
.circ-info-btn:hover { background: rgba(51, 255, 51, 0.12); box-shadow: var(--glow-green); }

/* ── Toolbar ── */
.circ-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm) var(--space-lg);
  align-items: center;
  justify-content: center;
  padding: 8px var(--space-md);
  margin: 0 0 8px;
  flex: 0 0 auto;
  border: 1px solid rgba(51, 255, 51, 0.25);
  border-radius: var(--border-radius-sm);
  background: rgba(255, 255, 255, 0.02);
}
.circ-tool-group { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.circ-tool-label { font-size: var(--font-size-xs); text-transform: uppercase; letter-spacing: 1px; color: var(--color-text-muted); margin-right: 2px; }

.circ-btn {
  font-family: 'Roboto Mono', monospace;
  font-size: var(--font-size-xs);
  letter-spacing: 0.5px;
  padding: 7px 12px;
  border: 1px solid rgba(51, 255, 51, 0.45);
  border-radius: 6px;
  background: transparent;
  color: var(--color-terminal-green);
  cursor: pointer;
  transition: background 0.12s, box-shadow 0.12s;
}
.circ-btn:hover { background: rgba(51, 255, 51, 0.12); box-shadow: var(--glow-green); }
.circ-btn--preset { border-color: var(--color-cyberpunk-pink); color: var(--color-pink-light); }
.circ-btn--preset:hover { background: rgba(230, 34, 197, 0.14); box-shadow: none; }
.circ-btn--danger { border-color: #ff5a5a; color: #ff8a8a; }
.circ-btn--danger:hover { background: rgba(255, 90, 90, 0.14); box-shadow: none; }
.circ-btn--return { border-color: var(--color-cyberpunk-pink); color: #fff; background: rgba(230, 34, 197, 0.22); font-weight: bold; }
.circ-btn--return:hover { background: rgba(230, 34, 197, 0.34); box-shadow: none; }

/* ── Main layout: fills remaining viewport height ── */
.circ-main {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: 1fr 290px;
  gap: var(--space-md);
  align-items: stretch;
}

.circ-canvas-wrap {
  min-width: 0;
  height: 100%;
  border: 1px solid rgba(51, 255, 51, 0.3);
  border-radius: var(--border-radius-sm);
  background:
    linear-gradient(rgba(51, 255, 51, 0.04) 1px, transparent 1px) 0 0 / 100% 28px,
    linear-gradient(90deg, rgba(51, 255, 51, 0.04) 1px, transparent 1px) 0 0 / 28px 100%,
    #070b12;
  overflow: hidden;
}
#circCanvas {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
  cursor: default;
}
.circ-term { cursor: crosshair; }
.circ-wire { cursor: grab; }
[data-comp] { cursor: grab; }

/* ── Side panel ── */
.circ-side { display: flex; flex-direction: column; gap: var(--space-md); min-height: 0; overflow-y: auto; }
.circ-panel {
  border: 1px solid rgba(51, 255, 51, 0.25);
  border-radius: var(--border-radius-sm);
  background: var(--color-bg-dark);
  padding: var(--space-md);
}
.circ-panel h3 {
  margin: 0 0 var(--space-sm);
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--color-cyberpunk-pink);
}

.circ-legend-row { display: flex; align-items: center; gap: 8px; font-size: var(--font-size-xs); color: var(--color-text-secondary); margin: 4px 0; }
.circ-legend-note { display: block; margin: 8px 0 0; font-size: var(--font-size-xs); line-height: 1.5; color: var(--color-text-muted); }
.circ-legend-note em { color: var(--color-text-secondary); font-style: italic; }
.circ-dot { width: 12px; height: 12px; border-radius: 50%; flex: 0 0 auto; border: 1px solid #0d1420; }

#circStatus { font-size: var(--font-size-sm); color: var(--color-text-secondary); }
.circ-status-row { margin-bottom: 8px; line-height: 1.6; }
.circ-ok { color: var(--color-terminal-green); font-weight: bold; }
.circ-bad { color: #ff5a5a; font-weight: bold; }
.circ-warn { color: var(--color-accent-yellow, #ffcf5a); font-weight: bold; }
.circ-muted { color: var(--color-text-muted); }

.circ-faults { margin-top: 8px; display: flex; flex-direction: column; gap: 6px; }
.circ-fault { font-size: var(--font-size-xs); line-height: 1.4; padding: 6px 8px; border-radius: 4px; }
.circ-fault--error { color: #ffd0d0; background: rgba(255, 90, 90, 0.14); border: 1px solid rgba(255, 90, 90, 0.5); }
.circ-fault--warn { color: #ffe9b0; background: rgba(255, 207, 90, 0.1); border: 1px solid rgba(255, 207, 90, 0.4); }
.circ-fault--ok { color: var(--color-terminal-green); background: rgba(51, 255, 51, 0.08); border: 1px solid rgba(51, 255, 51, 0.35); }
.circ-fault--info { color: #aee9f5; background: rgba(102, 217, 239, 0.1); border: 1px solid rgba(102, 217, 239, 0.45); }

.circ-help { font-size: var(--font-size-xs); color: var(--color-text-muted); line-height: 1.6; }
.circ-help li { margin: 3px 0; }
.circ-help kbd { padding: 0 5px; border: 1px solid rgba(51,255,51,0.4); border-radius: 3px; color: var(--color-terminal-green); }

@media (max-width: 820px) {
  /* stack on narrow screens; let the page grow/scroll instead of hard-filling */
  .circ-page { height: auto; min-height: calc(100dvh - 62px); }
  .circ-main { grid-template-columns: 1fr; }
  .circ-canvas-wrap { height: auto; aspect-ratio: 3 / 2; }
  #circCanvas { height: 100%; }
  .circ-side { order: 2; overflow: visible; }
}

/* ── How-to modal ── */
.circ-modal { position: fixed; inset: 0; z-index: 4000; display: none; }
.circ-modal.open { display: block; }
.circ-modal-backdrop { position: absolute; inset: 0; background: rgba(4, 8, 14, 0.72); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.circ-modal-panel {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(560px, 92vw);
  max-height: 84vh;
  overflow-y: auto;
  padding: var(--space-lg) var(--space-xl) var(--space-lg);
  background: var(--color-bg-dark);
  border: 1px solid var(--color-terminal-green);
  border-radius: var(--border-radius-md, 8px);
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.6), var(--glow-green);
  font-family: 'Roboto Mono', monospace;
}
.circ-modal-panel h2 {
  margin: 0 0 var(--space-sm);
  font-size: var(--font-size-lg);
  letter-spacing: 2px;
  color: var(--color-cyberpunk-pink);
  text-transform: uppercase;
}
.circ-modal-lead { color: var(--color-text-secondary); font-size: var(--font-size-sm); line-height: 1.55; margin: 0 0 var(--space-md); }
.circ-modal-panel .circ-help { font-size: var(--font-size-sm); color: var(--color-text-secondary); line-height: 1.65; padding-left: 1.1rem; }
.circ-modal-panel .circ-help li { margin: 6px 0; }
.circ-modal-close {
  position: absolute;
  top: 12px;
  right: 14px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 2px solid var(--color-cyberpunk-pink);
  background: transparent;
  color: var(--color-cyberpunk-pink);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
}
.circ-modal-close:hover { background: rgba(230, 34, 197, 0.18); }