/* The Gates report uses the same screen palette and type as the editor. */
.gates-panel { padding: 16px; border-top: 1px solid var(--screen-rule); background: var(--screen-2); color: var(--screen-ink); overflow-wrap: anywhere; }
.gates-panel p { margin: 0 0 12px; font-size: 14px; line-height: 1.5; }
.gates-panel h3 { color: var(--screen-ink); font: 600 16px/1.4 var(--sans); margin: 20px 0 8px; }
.gates-verdict { font-weight: 650; }
.gates-note, .gates-tool { color: var(--screen-muted); }
.gates-tool { font-family: var(--mono); font-size: 12px !important; }
.gates-stale { border-left: 3px solid currentColor; padding: 8px 12px; }
.gates-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 16px 0; border-block: 1px solid var(--screen-rule); }
.gates-stats > div { padding: 12px 8px; }
.gates-stats dt { color: var(--screen-muted); font: 500 12px/1.4 var(--sans); }
.gates-stats dd { margin: 4px 0 0; font: 600 26px/1.2 var(--mono); }
.gates-panel details { border-top: 1px solid var(--screen-rule); padding: 8px 0; }
.gates-panel summary { cursor: pointer; min-height: 32px; align-content: center; font-size: 14px; }
.gates-panel th, .gates-panel td { color: var(--screen-ink); border-color: var(--screen-rule); font: 13px/1.5 var(--mono); }
.gates-panel th { color: var(--screen-muted); }
.gates-log { max-height: 260px; overflow: auto; white-space: pre-wrap; font: 12px/1.6 var(--mono); }
.gates-diagnostics { padding-left: 20px; font: 13px/1.5 var(--mono); }
.gates-diagnostics li { margin: 8px 0; white-space: pre-wrap; }
.gates-diagnostics button { min-height: 32px; color: inherit; }
.gates-controls { display: flex; gap: 8px; margin: 8px 0; }
.gates-button { border: 1px solid var(--screen-muted); border-radius: var(--r-ctl); background: var(--screen); color: var(--screen-ink); min-height: 40px; padding: 6px 12px; font: 500 13px/1.4 var(--sans); cursor: pointer; }
.gates-button:disabled { opacity: .5; cursor: default; }
.gates-button:focus-visible, .gates-drawing:focus-visible { outline: 2px solid var(--screen-ink); outline-offset: 3px; }
.gates-drawing { background: var(--screen); border: 1px solid var(--screen-rule); border-radius: var(--r-ctl); padding: 12px; overflow: auto; max-height: 600px; }
.gate-schematic { display: block; width: 100%; height: auto; max-width: none; color: var(--screen-ink); fill: none; stroke: currentColor; }
.actual-size .gate-schematic { width: auto; }
.gate-schematic text { fill: currentColor; stroke: none; font: 600 11px var(--mono); }
.gate-schematic .nodelabel { text-anchor: middle; }
.gate-schematic .inputPortLabel { text-anchor: end; }
.gate-schematic circle[class^="net_"] { fill: currentColor; }
.gate-schematic .splitjoinBody { fill: currentColor; }
.synth-expected { color: var(--case-ink); font-size: 13px; margin: 12px 0 0; }
@media (max-width: 600px) { .gates-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .gates-panel { padding: 12px; } }

.gates-panel .synthesis-results { border-color: var(--screen-rule); }
.gates-panel .pass { color: var(--ok); }
.gates-panel .fail { color: var(--hot); }