/* Wiring — the wiring map is this page's own diagram: controller → bus → boards → tiers and towers. Wires are solid
   when they answer, dashed amber where the record and the rack differ (data-state="warn"), dashed grey when the
   controller doesn't answer or the wiring is only planned (data-state="stale" / "idle"). */
@layer page {
  .iw-map { display: grid; grid-template-columns: 236px minmax(0, 1fr); border: 1px solid var(--line); border-radius: var(--r4); background: var(--sheet); box-shadow: var(--shadow-1); overflow: hidden; }
  .iw-ctrl { padding: var(--s5); border-right: 1px solid var(--line); background: var(--sheet-2); display: grid; gap: var(--s3); align-content: start; }
  .iw-ctrl__box { border: 1.5px solid var(--ink-400); border-radius: var(--r3); padding: var(--s3); background: var(--sheet); display: grid; gap: 2px; }
  .iw-ctrl__box b { font-size: var(--t-data); }
  .iw-runs { position: relative; padding: var(--s4) var(--s5) var(--s4) var(--s10); display: grid; min-width: 0; }
  .iw-runs::before { content: ''; position: absolute; left: 22px; top: 34px; bottom: 34px; width: 3px; border-radius: 2px; background: var(--ink-500); }
  .iw-runs[data-state="stale"]::before { background: repeating-linear-gradient(180deg, var(--line-2) 0 6px, transparent 6px 10px); }
  .iw-run { position: relative; display: grid; grid-template-columns: 120px 32px minmax(0, 1fr) 150px; gap: var(--s3); align-items: center; min-height: 52px; padding: 6px var(--s2); margin-inline: calc(var(--s2) * -1); border-radius: var(--r2); color: inherit; text-decoration: none; scroll-margin-block: 120px; }
  .iw-run::before { content: ''; position: absolute; left: calc(var(--s10) * -1 + 24px + var(--s2)); width: calc(var(--s10) - 24px - var(--s2)); top: 50%; height: 2px; background: var(--ink-500); }
  .iw-run[data-state="warn"]::before { background: repeating-linear-gradient(90deg, var(--warn-dot) 0 5px, transparent 5px 9px); }
  .iw-runs[data-state="stale"] .iw-run::before { background: repeating-linear-gradient(90deg, var(--line-2) 0 5px, transparent 5px 9px); }
  a.iw-run:hover { background: var(--hover); }
  a.iw-run[aria-current="true"] { background: var(--selected); }
  /* installation.html#board-5: the board the address names is outlined. */
  .iw-run:target, .iw-run:has(.iw-anchor:target) { box-shadow: inset 0 0 0 2px var(--accent); }
  .iw-anchor { position: absolute; inset: 0 auto auto 0; width: 1px; height: 1px; }
  .iw-board { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 var(--s2); border-radius: var(--r2); border: 1px solid var(--line-2); background: var(--sheet); font: 600 12px var(--font-mono); white-space: nowrap; }
  .iw-board[data-tone] { border-color: var(--tone-line); background: var(--tone-surface); color: var(--tone-fg); border-style: dashed; }
  .iw-board[data-kind="tower"] { border-style: dotted; }
  .iw-tier { font: 500 18px var(--font-brand); letter-spacing: -.01em; text-align: center; }
  .iw-strip { min-width: 0; }
  .iw-meta { font-size: var(--t-cap); color: var(--text-3); line-height: 1.35; }
  .iw-meta b { color: var(--text-2); font-weight: 600; }
  .iw-meta[data-tone], .iw-meta[data-tone] b { color: var(--tone-fg); }
  .iw-sides { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); min-width: 0; }
  .iw-sides .iw-runs + .iw-runs { border-left: 1px solid var(--line); }
  .iw-sides .iw-run { grid-template-columns: auto 44px minmax(0, 1fr) auto; }
  .iw-sides .iw-runs::before { top: 64px; }
  .iw-towers { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s8); min-width: 0; }
  .iw-tw { display: inline-flex; align-items: center; gap: var(--s3); font-size: var(--t-small); }
  .iw-tw .iw-meta { display: block; }
  /* The key under the map: this drawing's wires, then the bay cells. */
  .iw-foot { grid-column: 1 / -1; display: flex; gap: var(--s2) var(--s5); flex-wrap: wrap; align-items: center; padding: var(--s3) var(--s5); border-top: 1px solid var(--line); background: var(--sheet-2); }
  .iw-key { display: flex; gap: var(--s5); flex-wrap: wrap; font-size: var(--t-cap); color: var(--text-2); }
  .iw-key li { display: inline-flex; gap: 6px; align-items: center; }
  .iw-sw { width: 18px; height: 2px; background: var(--ink-500); }
  .iw-sw[data-state="warn"] { background: repeating-linear-gradient(90deg, var(--warn-dot) 0 4px, transparent 4px 7px); }
  .iw-sw[data-state="idle"] { background: var(--line-2); }
  .iw-who { max-width: 60ch; }
  @media (max-width: 1180px) { .iw-sides { grid-template-columns: minmax(0, 1fr); } .iw-sides .iw-runs + .iw-runs { border-left: 0; border-top: 1px solid var(--line); } .iw-run { grid-template-columns: 120px 32px minmax(0, 1fr); } .iw-meta { grid-column: 3; } }
  @media (max-width: 760px) {
    .iw-sides .iw-run { grid-template-columns: auto 44px minmax(0, 1fr); }
    .iw-map { grid-template-columns: minmax(0, 1fr); }
    /* On a phone the wiring comes first; the controller's facts follow it. */
    .iw-ctrl { order: 2; border-right: 0; border-top: 1px solid var(--line); grid-template-columns: 1fr 1fr; }
    .iw-runs { padding-left: var(--s8); padding-right: var(--s3); }
    .iw-runs::before { left: 14px; }
    .iw-run { grid-template-columns: auto 28px minmax(0, 1fr); }
    .iw-run::before { left: calc(var(--s8) * -1 + 16px + var(--s2)); width: calc(var(--s8) - 16px - var(--s2)); }
    .iw-run .iw-strip, .iw-meta { grid-column: 1 / -1; }
  }
  @media (max-width: 480px) { .iw-ctrl { grid-template-columns: minmax(0, 1fr); } }
}