.wd-shell { width: min(1220px, calc(100% - 40px)); }
.wd-hero { grid-template-columns: 1.08fr .92fr; }
.wd-workspace { grid-template-columns: 282px minmax(0, 1fr); }
.wd-stage { padding-bottom: 24px; }

.circuit-status { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 0 0 14px; padding: 11px 13px; border: 1px solid var(--line); color: #c9d8d5; font-size: 12px; }
.circuit-status strong { color: var(--orange); font: 500 12px "DM Mono", monospace; }
.circuit-status.strong { border-color: rgba(101, 230, 209, .55); background: rgba(101, 230, 209, .06); }
.circuit-status.moderate { border-color: rgba(241, 211, 106, .5); background: rgba(241, 211, 106, .05); }
.circuit-status #ruleStatus { color: var(--muted); }

.circuit-board { overflow: hidden; border: 1px solid var(--line-soft); background: var(--panel-deep); }
.wd-scene { display: block; width: 100%; height: auto; min-height: 400px; }

.front-incident { stroke: rgba(101, 230, 209, .8); stroke-width: 1.8; }
.front-flat { stroke: rgba(101, 230, 209, .85); stroke-width: 1.8; fill: none; }
.front-bend { stroke: var(--cyan); stroke-width: 1.6; fill: none; }
.regime-strong .front-bend { opacity: .85; }
.regime-moderate .front-bend { opacity: .42; }
.regime-straight .front-bend { opacity: .16; }

.barrier { fill: #24444c; stroke: #4a707a; stroke-width: 1.4; }
.slit-edge { fill: var(--panel-deep); stroke: var(--cyan); stroke-width: 1.8; }
.huygens-dot { fill: var(--cyan); opacity: .85; }
.shadow-line { stroke: #4a6169; stroke-width: 1.2; stroke-dasharray: 5 6; }
.dim-arrow { stroke: var(--orange); stroke-width: 1.7; fill: none; }
.dim-label { fill: var(--orange); font: 500 12px "DM Mono", monospace; paint-order: stroke; stroke: var(--panel-deep); stroke-width: 5px; }
.region-label { fill: #71918f; font: 11px "DM Mono", monospace; paint-order: stroke; stroke: var(--panel-deep); stroke-width: 4px; }

.legend .dashed { display: inline-block; width: 18px; height: 0; margin-right: 6px; border-top: 2px dashed #4a6169; vertical-align: middle; background: none; }
.legend .arc-key { display: inline-block; width: 14px; height: 14px; margin-right: 6px; border: 2px solid rgba(101, 230, 209, .5); border-radius: 50%; border-left-color: transparent; border-bottom-color: transparent; transform: rotate(45deg); vertical-align: middle; background: none; }
.legend .dot-key { display: inline-block; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; vertical-align: middle; background: var(--cyan); }

.wd-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.wd-metrics .metric:nth-child(n+4) { margin-top: 13px; padding-top: 17px; border-top: 1px solid var(--line); }
.wd-metrics .metric:nth-child(4) { padding-left: 0; border-left: 0; }
.wd-metrics .metric-value { font-size: 19px; }
.wd-metrics .metric-value-compact { font-size: 16px; line-height: 1.45; }

@media (max-width: 900px) { .wd-workspace { grid-template-columns: 260px minmax(0, 1fr); } }

@media (max-width: 820px) {
  .wd-shell { width: min(calc(100% - 24px), 650px); }
  .wd-hero { grid-template-columns: 1fr; }
  .wd-workspace { grid-template-columns: 1fr; }
}

@media (max-width: 520px) {
  .circuit-status { display: block; }
  .circuit-status span { display: block; margin-top: 5px; }
  .wd-scene { min-height: 300px; }
  .wd-scene .dim-label { font-size: 17px; }
  .wd-scene .region-label { font-size: 15px; }
  .wd-scene .front-incident, .wd-scene .front-flat { stroke-width: 2.4; }
  .wd-scene .front-bend { stroke-width: 2.2; }
  .wd-scene .huygens-dot { r: 4; }
  .wd-metrics { grid-template-columns: 1fr; }
  .wd-metrics .metric, .wd-metrics .metric:nth-child(n) { margin-top: 0; padding: 13px 0; border-right: 0; border-bottom: 1px solid var(--line); border-left: 0; }
  .wd-metrics .metric:last-child { border-bottom: 0; }
}