/* Wiring schematic for /hardware/wiring/ (assets/js/hardware/schematic.js). Stylised, not a wiring guide. */

.hws {
  position: relative;
  min-width: 0;
  max-width: 100%;
  padding: 10px;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 1px 0 rgba(27, 33, 66, .1), 0 10px 30px rgba(27, 33, 66, .06);
  color: var(--ink, #1b2142);
}

/* The sheet keeps a legible size and scrolls sideways inside its own box; the symbols are the only tab stop. */
.hws-scroll {
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  border-radius: 8px;
  background:
    linear-gradient(to right, #fff 30%, rgba(255, 255, 255, 0)) left / 28px 100% no-repeat local,
    linear-gradient(to left, #fff 30%, rgba(255, 255, 255, 0)) right / 28px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgba(27, 33, 66, .18), rgba(27, 33, 66, 0)) left / 12px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgba(27, 33, 66, .18), rgba(27, 33, 66, 0)) right / 12px 100% no-repeat scroll;
}
.hws-svg {
  display: block;
  width: 100%;
  min-width: 640px;
  max-width: none;
  height: auto;
  font-family: var(--ui, system-ui, sans-serif);
  -webkit-user-select: none;
  user-select: none;
}
/* Touch: render at least 1:1 so labels stay readable and every hit area is >= 44 px. */
@media (pointer: coarse) {
  .hws-svg { min-width: var(--hws-w, 776px); }
}

.hws-node { cursor: pointer; outline: none; -webkit-tap-highlight-color: transparent; }
.hws-hit { fill: transparent; stroke: none; }
.hws-shape { fill: #fff; stroke: var(--ink, #1b2142); stroke-width: 1.3; }
.hws-fuse .hws-shape, .hws-breaker .hws-shape { fill: #fbf5ea; }
.hws-battery .hws-shape { fill: #fdf1ec; }
.hws-load .hws-shape { fill: #fbfbfd; }
.hws-assumed > .hws-shape { stroke-dasharray: 5 3; }
.hws-nomodel .hws-shape, .hws-nomodel-swatch { fill: #efeef3; stroke: #9a9db0; }
.hws-nomodel text { fill: #62667d; }
.hws-g { fill: none; stroke: var(--ink, #1b2142); stroke-width: 1.4; stroke-linecap: round; }

.hws-t1 { font-size: 12px; font-weight: 650; fill: var(--ink, #1b2142); }
.hws-small { font-size: 11px; font-weight: 600; }
.hws-t2 { font-size: 10px; font-weight: 500; fill: var(--muted, #585c78); }
.hws-rate { font: 700 12.5px var(--mono, ui-monospace, Menlo, Consolas, monospace); fill: var(--link, #9a3b26); }

.hws-bus .hws-shape { stroke: none; fill: #d0342c; }
.hws-svg[data-circuit="ac"] .hws-bus .hws-shape { fill: #22252f; }
.hws-buslabel { font-size: 9px; font-weight: 700; letter-spacing: .14em; fill: var(--link, #9a3b26); }
.hws-box .hws-frame { fill: rgba(27, 33, 66, .04); stroke: rgba(27, 33, 66, .33); stroke-dasharray: 3 3; pointer-events: none; }
.hws-boxlabel { font-size: 9.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; fill: var(--muted, #585c78); }
.hws-link .hws-shape { fill: var(--ink, #1b2142); stroke: none; }
.hws-linktext { font-size: 11.5px; font-weight: 650; fill: var(--paper, #f8f3ea); }

.hws-wires { pointer-events: none; } /* taps inside a panel reach the panel */
.hws-wire { fill: none; stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; }
.hws-pos { stroke: #d0342c; }
.hws-neg { stroke: var(--ink, #1b2142); }
.hws-ac { stroke: #22252f; stroke-width: 2.6; }
.hws-gnd { stroke: #2e8b57; }
.hws-data { stroke: #8a90a8; stroke-width: 1.4; stroke-dasharray: 1.5 3; }
.hws-ctl { stroke: #7d6bd1; stroke-width: 1.5; stroke-dasharray: 6 3 1.5 3; }
.hws-wire.hws-assumed { stroke-dasharray: 7 5; }
.hws-swatch-assumed { stroke: #8a90a8; stroke-dasharray: 5 4; }
.hws-wirelabel { font: 600 9.5px var(--mono, ui-monospace, Menlo, Consolas, monospace); fill: var(--link, #9a3b26); }

/* "?" = still to confirm (rust, so it never reads as the orange focus/selection colour) */
.hws-q circle { fill: var(--link, #9a3b26); }
.hws-q text { fill: #fff; font-size: 10.5px; font-weight: 800; }

.hws-title rect { fill: var(--paper, #f8f3ea); stroke: rgba(27, 33, 66, .19); }
.hws-tb1 { font-size: 11px; font-weight: 750; letter-spacing: .08em; fill: var(--ink, #1b2142); }

/* Keyboard focus: one solid 3 px orange ring drawn over everything, offset from the symbol. */
.hws-ring {
  fill: none;
  stroke: var(--accent, #d9793f);
  stroke-width: 3px;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
}

@media (hover: hover) {
  .hws-node:hover .hws-shape { stroke: var(--accent, #d9793f); }
  .hws-bus:hover .hws-shape { stroke: none; }
  .hws-box:hover .hws-frame { stroke: var(--accent, #d9793f); }
}

/* Selected: its feed and everything it feeds stay full strength; the rest steps back but keeps readable text. */
.hws-dim .hws-wires .hws-wire:not(.hws-path) { opacity: .16; }
.hws-dim .hws-wirelabel { opacity: .45; }
.hws-dim .hws-node:not(.hws-on):not(.hws-path):not(.hws-link) .hws-shape { stroke: #c9cbd6; }
.hws-dim .hws-node:not(.hws-on):not(.hws-path):not(.hws-link) .hws-frame { stroke: rgba(27, 33, 66, .18); }
.hws-dim .hws-node:not(.hws-on):not(.hws-path):not(.hws-link) .hws-g { stroke: #b4b7c6; }
.hws-dim .hws-node:not(.hws-on):not(.hws-path):not(.hws-link) :is(.hws-t1, .hws-rate) { fill: var(--muted, #585c78); }
.hws-dim .hws-node:not(.hws-on):not(.hws-path):not(.hws-link) .hws-t2 { fill: #6b6f86; }
.hws-dim .hws-node:not(.hws-on):not(.hws-path):not(.hws-link) :is(.hws-q, .hws-buslabel) { opacity: .55; }
.hws-dim .hws-bus:not(.hws-on):not(.hws-path) .hws-shape { opacity: .3; }
.hws-wire.hws-path { stroke-width: 3.6; }
.hws-path > .hws-shape { stroke-width: 2; }
.hws-on > .hws-shape { stroke: var(--accent, #d9793f); stroke-width: 3; }
.hws-on > .hws-frame { stroke: var(--accent, #d9793f); stroke-width: 2; stroke-dasharray: none; }
.hws-path > .hws-frame { stroke: rgba(27, 33, 66, .45); }
.hws-bus.hws-on .hws-shape, .hws-bus.hws-path .hws-shape { stroke: none; }
.hws-bus.hws-on .hws-shape { fill: var(--accent, #d9793f); }

/* Info panel */
.hws-info {
  min-height: 66px;
  margin-top: 10px;
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--paper, #f8f3ea);
  font: 15px/1.5 var(--ui, system-ui, sans-serif);
  color: var(--soft, #3a3f5c);
}
.hws-info p { margin: 4px 0 0; }
.hws-info .hws-k { margin: 0; font: 700 11px/1.3 var(--ui, system-ui, sans-serif); letter-spacing: .16em; text-transform: uppercase; color: var(--link, #9a3b26); }
.hws-info .hws-h { margin: 2px 0 4px; font: 700 18px/1.25 var(--ui, system-ui, sans-serif); color: var(--ink, #1b2142); }
.hws-info .hws-sub { font-weight: 500; color: var(--muted, #585c78); }
.hws-info .hws-chain { font: 13px/1.55 var(--mono, ui-monospace, Menlo, Consolas, monospace); color: var(--ink, #1b2142); overflow-wrap: anywhere; }
.hws-info .hws-chain b { color: var(--link, #9a3b26); font-weight: 700; }
.hws-info .hws-qm { margin-left: 1px; color: var(--link, #9a3b26); font-weight: 700; }
.hws-info .hws-qnote { color: var(--link, #9a3b26); }
.hws-info .hws-idle { margin: 0; font-style: italic; color: var(--muted, #585c78); }
.hws-info .hws-show {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: 10px;
  padding: 0 18px;
  border: 1px solid rgba(27, 33, 66, .25);
  border-radius: 999px;
  background: #fff;
  font: 600 14px/1.2 var(--ui, system-ui, sans-serif);
  color: var(--ink, #1b2142);
  cursor: pointer;
}
.hws-info .hws-show:hover { border-color: var(--accent, #d9793f); }
.hws-info .hws-show:focus-visible { outline: 3px solid var(--accent, #d9793f); outline-offset: 2px; }

.hws-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: no-preference) {
  .hws-shape, .hws-box .hws-frame { transition: stroke .15s, fill .15s; }
  .hws-wire { transition: opacity .15s; }
}

@media (forced-colors: active) {
  .hws-ring { stroke: Highlight; }
  .hws-on > .hws-shape, .hws-on > .hws-frame { stroke: Highlight; }
}