/* Logic gate simulator: tool-specific styles. Theme comes from ../synthwave.css */

/* ---------- App shell: fills the window, the page itself never scrolls ---------- */
html, body.app { height: 100%; }
body.app {
  height: 100vh; height: 100dvh; overflow: hidden;
  display: flex; flex-direction: column; gap: 8px; padding: 8px 12px;
}

.topbar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; flex: none; }
.topbar h1 { margin: 0; font-size: clamp(1.2rem, 2.6vw, 2rem); letter-spacing: .12em; }
.topbar .segmented { justify-self: end; }
.topbar-right { justify-self: end; display: flex; align-items: center; gap: 12px; }
.home-link { color: var(--cyan); text-decoration: none; text-transform: uppercase; letter-spacing: .1em; font-size: .85rem; }
.home-link:hover, .home-link:focus-visible { color: var(--hi); text-shadow: 0 0 8px var(--cyan); }

.stage { position: relative; flex: 1; min-height: 0; display: flex; gap: 8px; overflow: clip; overflow-clip-margin: 12px; }

/* ---------- Centre workspace ---------- */
.workspace { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; padding: 10px; }
.view { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 6px; }
.canvas {
  position: relative; flex: 1; min-height: 0; border: 1px solid rgba(123, 47, 247, .6); border-radius: 8px;
  background-color: var(--canvas-bg);
  background-image:
    linear-gradient(rgba(123, 47, 247, .14) 1px, transparent 1px),
    linear-gradient(90deg, rgba(123, 47, 247, .14) 1px, transparent 1px);
  background-size: 40px 40px;
}
svg.circuit {
  position: absolute; inset: 0; width: 100%; height: 100%;
  touch-action: none; user-select: none; -webkit-user-select: none;
}
svg.circuit text { font-family: var(--font); pointer-events: none; }
.view-hint { margin: 0; font-size: .8rem; flex: none; }
#circuitMessage { margin: 0; min-height: 1.4em; font-size: .9rem; flex: none; }

/* ---------- Drawers ---------- */
.drawer { --drawer-w: clamp(190px, 16vw, 250px); display: flex; flex: none; min-height: 0; }
.drawer--right { --drawer-w: clamp(290px, 26vw, 380px); }
.drawer-body {
  width: var(--drawer-w); overflow: hidden; visibility: visible;
  background: var(--surface); border: 1px solid var(--pink); border-radius: 12px;
  box-shadow: 0 0 18px rgba(255, 42, 109, .4);
  transition: width .2s ease, margin .2s ease, border-width .2s ease, visibility 0s;
}
.drawer--left .drawer-body { border-color: var(--cyan); box-shadow: 0 0 18px rgba(5, 217, 232, .35); }
.drawer-inner { width: var(--drawer-w); height: 100%; overflow-y: auto; padding: 12px; }
.drawer--left .drawer-body { margin-left: 8px; }
.drawer--right .drawer-body { margin-right: 8px; }
.drawer.is-collapsed .drawer-body { width: 0; margin: 0; border-width: 0; visibility: hidden; transition: width .2s ease, margin .2s ease, border-width .2s ease, visibility 0s .2s; }

.drawer-toggle {
  flex: none; width: 36px; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 10px 0;
  font: inherit; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; cursor: pointer;
  color: var(--cyan); background: var(--surface); border: 2px solid var(--cyan); border-radius: 8px;
  box-shadow: 0 0 8px rgba(5, 217, 232, .5);
}
.drawer--right .drawer-toggle { color: var(--pink); border-color: var(--pink); box-shadow: 0 0 8px rgba(255, 42, 109, .5); }
.drawer-toggle:hover { color: var(--hi); box-shadow: 0 0 16px currentColor; }
.drawer-label { writing-mode: vertical-rl; font-size: .85rem; }
.drawer--left .chev::before { content: "\2039"; }
.drawer--left.is-collapsed .chev::before { content: "\203A"; }
.drawer--right .chev::before { content: "\203A"; }
.drawer--right.is-collapsed .chev::before { content: "\2039"; }
.chev { font-size: 1.6rem; line-height: 1; }

.drawer-inner h2 { margin: 0 0 8px; }
.drawer-inner h2:not(:first-child) { margin-top: 14px; }
.tile-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.tile {
  display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 4px; cursor: pointer;
  font: inherit; font-size: .85rem; font-weight: 700; letter-spacing: .08em; color: var(--text);
  background: var(--surface); border: 2px solid var(--cyan); border-radius: 8px;
  transition: box-shadow .15s, background .15s;
}
.tile svg { width: 52px; height: 34px; overflow: visible; pointer-events: none; }
.tile:hover { box-shadow: 0 0 14px var(--cyan); }
.tile[aria-pressed="true"] { background: rgba(5, 217, 232, .22); box-shadow: 0 0 14px var(--cyan); }
.stack { display: grid; gap: 10px; }
.stack-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.stack-row .btn { padding: 8px 4px; text-align: center; }
.stack-label { display: grid; gap: 4px; color: var(--muted); text-transform: uppercase; letter-spacing: .1em; font-size: .8rem; }
.stack-label select { width: 100%; text-transform: none; letter-spacing: 0; font-size: .9rem; }

/* Narrow screens: drawers float over the workspace instead of squeezing it */
@media (max-width: 900px) {
  .topbar { grid-template-columns: auto 1fr; }
  .topbar h1 { display: none; }
  .workspace { margin: 0 44px; }
  .drawer { position: absolute; top: 0; bottom: 0; z-index: 5; --drawer-w: min(300px, 70vw); }
  .drawer--left { left: 0; }
  .drawer--right { right: 0; --drawer-w: min(360px, 80vw); }
}

/* Nodes */
.node { cursor: grab; }
.node:active { cursor: grabbing; }
.readonly .node-gate, .readonly .node-output { cursor: default; }
.node-input { cursor: pointer; }
.selection { display: none; fill: none; stroke: var(--pink); stroke-width: 2; stroke-dasharray: 6 4; }
.node.selected .selection { display: block; }
.node:focus { outline: none; }
.node:focus-visible .node-body { stroke: var(--hi); stroke-dasharray: 4 3; }

.node-body { fill: var(--surface-solid); stroke: var(--cyan); stroke-width: 2; }
.node-label { fill: var(--text); font-size: 18px; font-weight: 700; }
.node-hit { fill: transparent; }

.switch-track { fill: var(--bg); stroke: var(--purple); stroke-width: 2; transition: fill .15s, stroke .15s; }
.switch-track.on { fill: var(--lit); stroke: var(--yellow); filter: drop-shadow(0 0 6px var(--yellow)); }
.switch-knob { fill: #fff; transition: cx .12s; }

.lamp-body { fill: var(--bg); stroke: var(--purple); stroke-width: 2; }
.lamp-body.sig-1 { fill: var(--lit); stroke: var(--yellow); filter: drop-shadow(0 0 10px var(--yellow)); }
.lamp-body.sig-x { stroke: var(--muted); stroke-dasharray: 4 3; }
.lamp-text { fill: var(--muted); font-size: 15px; font-weight: 700; text-anchor: middle; }
.lamp-text.lit { fill: var(--bg); }

.gate-body { fill: var(--surface-solid); stroke: var(--cyan); stroke-width: 3; stroke-linejoin: round; }
.gate-line { fill: none; stroke: var(--cyan); stroke-width: 3; stroke-linecap: round; }
.gate-caption { fill: var(--muted); font-size: 13px; letter-spacing: .1em; }
.node-gate.sig-1 .gate-body, .node-gate.sig-1 .gate-line { stroke: var(--yellow); }
.node-gate.sig-1 .gate-shape { filter: drop-shadow(0 0 6px var(--yellow)); }
.node-gate.sig-0 .gate-body, .node-gate.sig-0 .gate-line { stroke: var(--purple); }
.node-gate.sig-x .gate-body, .node-gate.sig-x .gate-line { stroke: var(--muted); }
.node-gate.sig-x path.gate-body { stroke-dasharray: 5 4; }

/* Ports */
.port { cursor: crosshair; }
.readonly .port { pointer-events: none; }
.port-hit { fill: transparent; }
.port-dot { fill: var(--bg); stroke: var(--cyan); stroke-width: 2; transition: r .1s; }
.port:hover .port-dot { r: 7; fill: var(--cyan); }
.port-dot.pending { fill: var(--pink); stroke: var(--pink); r: 7; }
.port-dot.compatible { stroke: var(--green); fill: var(--green); r: 7; }

/* Wires */
.wire { fill: none; stroke-width: 3; stroke-linecap: round; pointer-events: none; transition: stroke .15s; }
.wire.sig-1 { stroke: var(--yellow); filter: drop-shadow(0 0 4px var(--yellow)); }
.wire.sig-0 { stroke: var(--purple); }
.wire.sig-x { stroke: var(--muted); stroke-dasharray: 6 6; }
.wire.selected { stroke-width: 6; stroke: var(--pink); filter: drop-shadow(0 0 6px var(--pink)); }
.wire.rubber { stroke: var(--green); stroke-dasharray: 6 4; }
.wire-hit { fill: none; stroke: transparent; stroke-width: 16; cursor: pointer; }
.readonly .wire-hit { pointer-events: none; }

/* ---------- Truth table ---------- */
.truth-panel .controls { justify-content: flex-start; gap: 8px; margin-bottom: 8px; }
.truth-panel .btn { padding: 6px 10px; font-size: .8rem; }
.truth-panel .chip { font-size: .85rem; }
.tt-hint { min-height: 1.4em; margin: 0 0 8px; font-size: .85rem; }
.table-wrap { overflow-x: auto; }
.truth-table { border-collapse: collapse; margin: 0 auto; font-size: 1.2rem; }
.truth-table th, .truth-table td {
  border: 1px solid rgba(5, 217, 232, .35); padding: 8px 16px; min-width: 3.4em; text-align: center;
}
.truth-table th { color: var(--cyan); background: rgba(5, 217, 232, .08); text-shadow: 0 0 6px var(--cyan); }
.truth-table th.out, .truth-table td.out { border-left-color: var(--pink); }
.truth-table th.out { color: var(--pink); background: rgba(255, 42, 109, .1); text-shadow: 0 0 6px var(--pink); }
.truth-table td.out.sig-1 { color: var(--yellow); text-shadow: 0 0 8px var(--yellow); font-weight: 700; }
.truth-table td.out.sig-0 { color: var(--muted); }
.truth-table td.empty { color: var(--muted); font-size: 1rem; }
.truth-table th:last-child, .truth-table td:last-child { border: 0; background: none; min-width: 0; padding: 0 0 0 8px; }

.answer { width: 2.6em; text-align: center; font-size: 1.2rem; padding: 4px; }
.answer.ok { border-color: var(--green); color: var(--green); box-shadow: 0 0 8px var(--green); }
.answer.bad { border-color: var(--pink); color: var(--pink); box-shadow: 0 0 8px var(--pink); }
.row-remove {
  font: inherit; font-size: 1.2rem; line-height: 1; width: 1.8em; height: 1.8em; cursor: pointer;
  color: var(--muted); background: transparent; border: 1px solid transparent; border-radius: 50%;
}
.row-remove:hover { color: var(--hi); border-color: var(--pink); box-shadow: 0 0 8px var(--pink); }

@media (prefers-reduced-motion: no-preference) {
  tr.flash td { animation: row-flash .8s ease-out; }
  @keyframes row-flash { from { background: rgba(249, 200, 14, .35); } to { background: transparent; } }
}

/* Chill theme tweaks */
:root[data-theme="chill"] .switch-knob { fill: var(--purple); }
:root[data-theme="chill"] .lamp-text.lit { fill: var(--hi); }
:root[data-theme="chill"] .drawer-body { box-shadow: 0 6px 24px rgba(204, 63, 120, .18); }
:root[data-theme="chill"] .drawer--left .drawer-body { box-shadow: 0 6px 24px rgba(12, 133, 153, .18); }
:root[data-theme="chill"] .drawer-toggle { box-shadow: 0 2px 10px rgba(12, 133, 153, .2); }
:root[data-theme="chill"] .drawer--right .drawer-toggle { box-shadow: 0 2px 10px rgba(204, 63, 120, .22); }
:root[data-theme="chill"] .tile:hover,
:root[data-theme="chill"] .tile[aria-pressed="true"] { box-shadow: 0 3px 12px rgba(12, 133, 153, .3); }
:root[data-theme="chill"] .wire.sig-1,
:root[data-theme="chill"] .switch-track.on,
:root[data-theme="chill"] .lamp-body.sig-1,
:root[data-theme="chill"] .node-gate.sig-1 .gate-shape { filter: none; }