/* Circuit builder layout. Shares tokens and .fig classes with styles.css. */
[hidden] { display: none !important; }
.builder-shell { padding-bottom: 60px; }
.builder-head { padding: 40px 0 24px; border-bottom: 1px solid var(--line); }
.builder-head h1 { font-size: clamp(36px, 5vw, 58px); }
.builder-grid { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 26px; padding-top: 24px; }
.builder-side { display: grid; align-content: start; gap: 14px; }
.side-card { display: grid; gap: 10px; padding: 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; }
.side-label { margin: 0; color: var(--muted); font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.side-card select, .sel-field input { width: 100%; height: 40px; padding: 0 10px; color: var(--ink); background: white; border: 1px solid var(--line); border-radius: 6px; }
.challenge-info { color: var(--ink); font-size: 14px; line-height: 1.55; }
.challenge-info p { margin: 0 0 8px; }
.challenge-info dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; margin: 0 0 8px; font-size: 13px; }
.challenge-info dt { color: var(--muted); font-weight: 700; }
.challenge-info dd { margin: 0; font-family: ui-monospace, monospace; }
.challenge-meta { color: var(--muted); font-size: 12px; }
.side-actions { display: flex; gap: 8px; }
.side-actions .button { flex: 1; min-height: 40px; padding: 0 10px; }
.button:disabled, .mini-button:disabled { opacity: .45; cursor: default; transform: none; }
.side-hint { margin: 0; color: var(--muted); font-size: 12px; }
.palette { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.pal-item { display: grid; justify-items: center; gap: 2px; padding: 6px 4px; color: var(--navy); background: #f5f3ed; border: 1px solid transparent; border-radius: 6px; font: 800 10px/1.2 ui-monospace, monospace; touch-action: none; user-select: none; }
.pal-item:hover, .pal-item.dragging { border-color: var(--accent); background: white; }
.pal-svg { width: 62px; height: 28px; pointer-events: none; }
.pal-io { display: grid; place-items: center; width: 44px; height: 28px; color: white; background: var(--navy); border-radius: 5px; font-size: 11px; pointer-events: none; }
.pal-item > span:last-child { pointer-events: none; }
.sel-title { margin: 0; font: 800 15px/1.2 ui-monospace, monospace; color: var(--navy); }
.sel-field { display: grid; gap: 6px; color: var(--muted); font-size: 12px; font-weight: 700; }
.stepper { display: flex; gap: 6px; }

.builder-main { min-width: 0; }
.canvas-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 10px; }
.canvas-toolbar select { height: 34px; padding: 0 6px; border: 1px solid var(--line); border-radius: 6px; background: white; }
.toolbar-gap { flex: 0 0 10px; }
.file-button { position: relative; display: inline-flex; align-items: center; overflow: hidden; }
.file-button input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.canvas-wrap { overflow: auto; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; }
.builder-canvas { display: block; width: 100%; min-width: 760px; max-width: none; height: auto; touch-action: none; user-select: none; }
.builder-canvas .canvas-bg { stroke: none; }
.builder-canvas .grid-dot { fill: #d9d2c4; }
.builder-canvas .comp { cursor: grab; }
.builder-canvas .comp-hit { fill: transparent; stroke: none; }
.builder-canvas .comp.sel .comp-hit { stroke: var(--accent); stroke-width: 1.5; stroke-dasharray: 5 4; }
.builder-canvas .bwire { fill: none; stroke: #6f8597; stroke-width: 2.6; stroke-linejoin: round; pointer-events: none; }
.builder-canvas .bwire.on { stroke: var(--accent); stroke-width: 3; }
.builder-canvas .bwire.sel { stroke-dasharray: 7 5; stroke-width: 3.4; }
.builder-canvas .bwire-hit { fill: none; stroke: transparent; stroke-width: 12; cursor: pointer; }
.builder-canvas .temp-wire { fill: none; stroke: var(--accent); stroke-width: 2.4; stroke-dasharray: 6 5; pointer-events: none; }
.builder-canvas .port { fill: white; stroke: var(--navy); stroke-width: 1.8; cursor: crosshair; }
.builder-canvas .port:hover { fill: var(--accent); stroke: var(--accent-dark); }
.builder-canvas .port-out.on { fill: var(--accent); }
.builder-canvas .io-box { fill: var(--surface); stroke: var(--navy); stroke-width: 2; }
.builder-canvas .io-box.on { fill: #fbe1d8; stroke: var(--accent-dark); }
.builder-canvas .io-val { fill: var(--ink); font: 800 15px ui-monospace, monospace; text-anchor: middle; pointer-events: none; }
.builder-canvas .io-label { fill: var(--navy); font: 800 14px ui-monospace, monospace; pointer-events: none; }
.builder-canvas .io-label.tr { text-anchor: end; }
.builder-canvas .lamp { fill: #e6ebee; stroke: var(--navy); stroke-width: 2; }
.builder-canvas .lamp.on { fill: var(--accent); stroke: var(--accent-dark); }
.builder-canvas .lamp-val.on { fill: white; }
.builder-canvas .clk-glyph { fill: none; stroke: var(--navy); stroke-width: 2; pointer-events: none; }
.builder-canvas .gate-name { fill: var(--muted); font: 600 10px ui-monospace, monospace; text-anchor: middle; pointer-events: none; }
.builder-canvas .comp path, .builder-canvas .comp circle:not(.port), .builder-canvas .comp text { pointer-events: none; }
.builder-status { min-height: 22px; margin: 8px 0 0; color: var(--muted); font-size: 13px; }
.builder-status.warn { color: var(--accent-dark); font-weight: 700; }

.panel-tabs { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 14px; border-bottom: 1px solid var(--line); }
.panel-tab { padding: 10px 14px; color: var(--muted); background: none; border: 0; border-bottom: 2px solid transparent; font-weight: 800; font-size: 13px; }
.panel-tab[aria-selected="true"] { color: var(--accent-dark); border-bottom-color: var(--accent); }
.panel { padding: 16px 0; }
.panel-note { margin: 0 0 12px; color: var(--muted); font-size: 14px; line-height: 1.55; }
.check-ok { color: var(--success); font-weight: 800; }
.check-bad { color: var(--accent-dark); font-weight: 800; }
.check-errors { margin: 0; padding-left: 20px; color: var(--accent-dark); font-weight: 700; line-height: 1.7; }
.tt { border-collapse: collapse; font: 600 13px/1.4 ui-monospace, monospace; }
.tt th, .tt td { min-width: 34px; padding: 5px 9px; text-align: center; border: 1px solid var(--line); }
.tt th { color: var(--navy); background: #f1efe9; }
.tt td.one { color: var(--accent-dark); font-weight: 800; }
.tt .sep-col { min-width: 8px; padding: 0; background: #f1efe9; border-top: 0; border-bottom: 0; font-size: 10px; }
.tt th.sep-col { padding: 5px 8px; color: var(--muted); font-size: 10px; }
.tt tr.bad td { background: #fbe1d8; }
.tt tr.current td { background: #edf2f4; }
.wave-scroll { overflow-x: auto; margin-bottom: 10px; }
.wave-svg { max-width: none; margin: 0; }
.builder-help { margin-top: 18px; padding: 14px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; }
.builder-help summary { color: var(--navy); font-weight: 800; cursor: pointer; }
.builder-help ul { margin: 12px 0 0; padding-left: 20px; color: var(--muted); font-size: 14px; line-height: 1.7; }

@media (max-width: 980px) {
  .builder-grid { grid-template-columns: 1fr; }
  .builder-side { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
  .palette { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .builder-head { padding-top: 26px; }
  .palette { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .builder-canvas { min-width: 0; }
}

/* Embedded editor inside written tasks (circuit-editor.js embed). */
.scheme { margin-top: 14px; }
.scheme .input-hint { margin-bottom: 8px; }
.scheme-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.scheme-palette { display: flex; flex-wrap: wrap; gap: 4px; }
.scheme-palette .pal-item { padding: 3px 4px; font-size: 9px; }
.scheme-palette .pal-svg { width: 44px; height: 20px; }
.scheme-palette .pal-io { width: 34px; height: 20px; font-size: 9px; }
.scheme-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.scheme-actions .builder-link { margin-left: 6px; font-size: 13px; }
.scheme-canvas { overflow: hidden; background: var(--surface) radial-gradient(#d9d2c4 1px, transparent 1px) 0 0 / 20px 20px; border: 1px solid var(--line); border-radius: 8px; }
.scheme-canvas .builder-canvas { min-width: 0; }
.scheme-canvas .canvas-bg { fill: transparent; }
.builder-canvas.read-only .comp, .builder-canvas.read-only .port, .builder-canvas.read-only .bwire-hit { cursor: default; }
.scheme-status { min-height: 18px; margin: 6px 0 0; color: var(--muted); font-size: 12px; }
.scheme-status.warn { color: var(--accent-dark); font-weight: 700; }
.scheme-selection { display: flex; flex-wrap: wrap; align-items: end; gap: 10px; margin-top: 8px; padding: 10px 12px; background: #f5f3ed; border-radius: 6px; }
.scheme-selection .sel-field input { width: 120px; height: 34px; padding: 0 8px; border: 1px solid var(--line); border-radius: 5px; }
.scheme-check { margin: 0 0 10px; }
@media print { .scheme-toolbar, .scheme-status, .scheme-selection { display: none; } }
.stim-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 10px; color: var(--muted); font-size: 13px; font-weight: 700; }
.stim-controls select { height: 32px; margin-left: 6px; padding: 0 6px; border: 1px solid var(--line); border-radius: 5px; background: white; }
.stim-canvas { padding: 8px; background: #edf2f4; border: 1px solid #d7e0e5; border-radius: 7px; }
.stim-warn { min-height: 0; margin-top: 8px; color: var(--accent-dark); font-weight: 700; }
.stim-warn:empty { display: none; }
.panel-sub { margin: 18px 0 8px; color: var(--navy); font-size: 14px; }