/* Circuit Repair Shop: the workbench (left) keeps its colours in dark mode (it is a picture of a real workshop); the
 * right-hand panel follows the site tokens. The circuit board's own CSS (.pcir-*) comes from circuit-board.js. */
.crs { position: absolute; inset: 0; display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 10px; padding: 6px 10px 8px; box-sizing: border-box; }
.crs-bench { min-width: 0; min-height: 0; display: flex; }
.crs-bench > .pcir { flex: 1 1 auto; min-height: 0; }
.crs-bench .pcir-svg { background: #7d4b22; }
.crs-side { display: flex; flex-direction: column; gap: 8px; min-height: 0; overflow-y: auto; padding: 2px 2px 6px; }
.crs-panel { display: flex; flex-direction: column; gap: 8px; min-height: 0; }
.crs-h { margin: 0; font-size: 17px; font-weight: 800; }
.crs-help { margin: 0; font-size: 16px; line-height: 1.35; color: var(--tlg-text-muted); }

/* the customer's device */
.crs-device { border-radius: 14px; border: 2px solid var(--tlg-border); background: var(--tlg-surface); padding: 6px 8px 8px; }
.crs-device-h { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 8px; font-size: 16px; font-weight: 800; margin: 0 0 4px; }
.crs-status { font-weight: 800; color: #fff; background: #475569; border-radius: 999px; padding: 0 10px; }
.crs-status.is-on { background: #15803d; }
.crs-device-art svg { display: block; width: 100%; height: auto; max-height: 128px; }
.crs--calc .crs-device-art svg, .crs--fault .crs-device-art svg { max-height: 96px; }

/* build: the work order */
.crs-specs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.crs-spec { display: flex; gap: 8px; align-items: flex-start; font-size: 16px; font-weight: 700; padding: 6px 10px; border-radius: 10px; border: 2px solid var(--tlg-border); background: var(--tlg-surface); }
.crs-spec-box { font-size: 20px; line-height: 1; width: 20px; flex: none; }
.crs-spec.is-ok { border-color: #15803d; }
.crs-spec.is-ok .crs-spec-box { color: #15803d; }
.crs-spec.is-bad { border-color: #b91c1c; border-style: dashed; }
.crs-spec.is-bad .crs-spec-box { color: #b91c1c; }
.crs-btn { min-height: 44px; padding: 4px 12px; border-radius: 10px; border: 2px solid var(--tlg-border-strong); background: var(--tlg-surface); color: var(--tlg-text); font: inherit; font-size: 16px; font-weight: 700; cursor: pointer; text-align: left; }
.crs-btn:disabled { opacity: .5; cursor: not-allowed; }

/* fault: suspect + choices */
.crs-suspect { margin: 0; font-size: 16px; padding: 6px 10px; border-radius: 10px; background: var(--tlg-surface-2); }
.crs-faults { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.ps-chip.crs-fchip { min-height: 52px; padding: 4px 8px; font-size: 16px; line-height: 1.2; white-space: normal; text-align: center; }
.crs-meter .pcir-meter { grid-template-columns: 1fr; }
.crs-meter .pcir-meter-btns { justify-content: flex-start; }

/* predict: answer choices */
.crs-opts { display: flex; flex-direction: column; gap: 8px; }
.ps-chip.crs-opt { min-height: 50px; padding: 6px 12px; font-size: 17px; line-height: 1.25; white-space: normal; text-align: left; justify-content: flex-start; }
.ps-chip.crs-opt[aria-checked="true"], .ps-chip.crs-fchip[aria-checked="true"] { background: var(--ps-accent); border-color: var(--ps-accent); color: var(--ps-accent-ink); }
.ps-chip.is-right { border-color: #15803d !important; box-shadow: 0 0 0 3px rgba(21, 128, 61, .35); }
.ps-chip.is-wrong { border-color: #b91c1c !important; border-style: dashed !important; }

/* calculate */
.crs--calc .pn-key { min-height: 44px; }
.crs--calc .pn-input { font-size: 26px; }
.crs--calc .pn.is-ok .pn-display { border-color: #15803d; box-shadow: 0 0 0 3px rgba(21, 128, 61, .3); }
.crs--calc .pn.is-bad .pn-display { border-color: #b91c1c; border-style: dashed; }

/* Briefing example */
.crs-ex { width: 100%; }
.crs-ex .pcir-svg { background: #14523a; max-height: 380px; }
.ps-brief--drawer .crs-ex .pcir-svg { max-height: 300px; }

/* The assignment card moves to the foot of the customer column, so the right panel keeps its bottom corner. */
@media (min-width: 901px) {
  html.ps-locked:has(.crs) .lga-card { right: auto; left: 12px; }
  html.ps-locked:has(.crs):has(.lga-card) .ps-side { padding-bottom: 84px; }
}
@media (max-width: 900px) {
  .crs { position: static; grid-template-columns: 1fr; }
  .crs-bench { min-height: 420px; }
}