/* CtrlSpace — the interactive switch-wiring diagrams.
   Used by exactly one page, /guides/what-is-neutral-wiring.html, so it is loaded
   there rather than added to hub.css. Markup is built by assets/wiring.js.

   Colour note: the site palette is gold on near-black and has no blue, so the
   two conductors are gold (live, the site accent) against a muted steel (neutral)
   mixed for this widget. They have to stay clearly distinguishable from each
   other AND legible on --ink-800; do not swap either for another palette token
   without checking both. The lamp glow reuses the same warm value the homepage
   hero uses for its bulbs. */

.nw {
  --nw-live: var(--accent);
  --nw-live-flow: #e2c88f;
  --nw-neutral: #6f8fb5;
  --nw-neutral-flow: #9dbde0;
  --nw-glow: #f2d898;
  --nw-ok: #7fa877;
  --nw-weak: #c9954a;
}

/* ---------- legend ---------- */
.nw-legend {
  display: flex; flex-wrap: wrap; gap: 12px 24px;
  padding: 16px 0 0; margin: 0 0 26px; border-top: 1px solid var(--border-subtle);
}
.nw-legend span {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--text-muted);
}
.nw-sw { width: 24px; height: 4px; border-radius: 3px; display: inline-block; }
.nw-sw--live { background: var(--nw-live); }
.nw-sw--neutral { background: var(--nw-neutral); }
.nw-sw--dot {
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--nw-glow); box-shadow: 0 0 10px 1px var(--nw-glow);
}

/* ---------- card ---------- */
.nw-card {
  background: var(--surface-raised); border: 1px solid var(--border-subtle);
  border-radius: 18px; box-shadow: var(--shadow-sm); overflow: hidden;
  margin: 0 0 18px;
}
/* Index and tag on their own row above the title. Sharing one flex line meant
   the tag's position moved with the title's length, so the three cards never
   lined up with each other. */
.nw-card__head { padding: 22px 24px 0; }
.nw-card__meta {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 9px;
}
.nw-card__n {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--accent); flex: none;
}
.nw .nw-card__t {
  font-family: var(--font-display); font-size: clamp(18px, 2.2vw, 22px);
  font-weight: 600; color: var(--text-strong); margin: 0;
}
.nw-tag {
  flex: none; padding: 5px 12px; border-radius: 999px;
  font-family: var(--font-mono); font-size: 9px; letter-spacing: .14em;
  text-transform: uppercase; border: 1px solid var(--border-default);
  color: var(--text-muted);
}
.nw-tag--good { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.nw-tag--warn { border-color: var(--nw-weak); color: var(--nw-weak); }

.nw-card__body { padding: 18px 24px 24px; }
.nw-stage {
  background: var(--ink-800); border: 1px solid var(--border-subtle);
  border-radius: 14px; padding: 10px; position: relative;
  max-width: 640px; margin: 0 auto;
}
.nw-stage svg { display: block; width: 100%; height: auto; }

/* ---------- conductors ---------- */
.wire { fill: none; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.wire.live { stroke: var(--nw-live); }
.wire.neutral { stroke: var(--nw-neutral); }
.wire.add { stroke: var(--nw-neutral); stroke-dasharray: 2 9; opacity: .9; }
.jn { fill: var(--nw-neutral); }

.flow {
  fill: none; stroke-width: 5.5; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 11 15; opacity: 0; transition: opacity .35s ease;
}
.flow.live, .flow.capflow { stroke: var(--nw-live-flow); }
.flow.neutral { stroke: var(--nw-neutral-flow); }

.nw-diagram.on .flow { opacity: 1; }
/* The trickle a no-neutral switch draws to stay alive: same path, thinner and
   slower, so it reads as "a little" rather than "some". */
.nw-diagram.trickle .flow { opacity: .6; stroke-width: 3.4; }
.nw-diagram.keepalive:not(.on) .flow.keep { opacity: .85; }
.nw-diagram.on .flow.capflow { opacity: 0; }

@media (prefers-reduced-motion: no-preference) {
  .nw-diagram.on .flow.live { animation: nwDash .9s linear infinite; }
  .nw-diagram.on .flow.neutral { animation: nwDashRev .9s linear infinite; }
  .nw-diagram.trickle .flow.live,
  .nw-diagram.trickle .flow.capflow { animation: nwDash 2.3s linear infinite; }
  .nw-diagram.trickle .flow.neutral { animation: nwDashRev 2.3s linear infinite; }
  .nw-diagram.keepalive:not(.on) .flow.keep.live { animation: nwDash 1.5s linear infinite; }
  .nw-diagram.keepalive:not(.on) .flow.keep.neutral { animation: nwDashRev 1.5s linear infinite; }
}
@keyframes nwDash { to { stroke-dashoffset: -104; } }
@keyframes nwDashRev { to { stroke-dashoffset: 104; } }

/* ---------- fixtures ---------- */
.box-fill { fill: var(--ink-700); stroke: var(--border-default); stroke-width: 2; }
.box-label {
  fill: var(--text-muted); font-family: var(--font-mono);
  font-size: 15px; font-weight: 700; letter-spacing: .08em;
}
.wire-label {
  fill: var(--text-muted); font-family: var(--font-mono);
  font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
}
.glass, .ray { vector-effect: non-scaling-stroke; }
.glass { stroke: var(--border-default); stroke-width: 3.5; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.ray { stroke: var(--nw-glow); stroke-width: 4; stroke-linecap: round; }

.cap { stroke: var(--text-muted); stroke-width: 3.6; stroke-linecap: round; transition: stroke .3s; }
.nw-diagram.trickle .cap { stroke: var(--nw-live-flow); }
.cap-label {
  fill: var(--text-muted); font-family: var(--font-mono);
  font-size: 11px; font-weight: 600; letter-spacing: .06em;
}

.bulb-glow { opacity: 0; transition: opacity .3s ease; }
.nw-diagram.on .bulb-glow { opacity: 1; }
/* One low-wattage LED on a no-neutral circuit: the trickle is enough to light
   it faintly, which is exactly the failure people report. */
.nw-diagram.trickle.bad .bulb-glow { opacity: .32; }
@media (prefers-reduced-motion: no-preference) {
  .nw-diagram.trickle.bad .bulb-glow { animation: nwFlicker .42s steps(1) infinite; }
}
@keyframes nwFlicker {
  0% { opacity: .34; } 25% { opacity: .03; } 45% { opacity: .42; }
  60% { opacity: .02; } 80% { opacity: .30; } 100% { opacity: .10; }
}

/* ---------- radio strength ---------- */
.wifi { opacity: 0; }
.nw-diagram.wifi-weak .wifi, .nw-diagram.wifi-strong .wifi { opacity: 1; }
.wave { fill: none; stroke-width: 4.5; stroke-linecap: round; }
.nw-diagram.wifi-strong .wave { stroke: var(--nw-ok); }
.nw-diagram.wifi-strong .wave-src { fill: var(--nw-ok); }
.nw-diagram.wifi-weak .wave { stroke: var(--nw-weak); }
.nw-diagram.wifi-weak .wave-src { fill: var(--nw-weak); }
.nw-diagram.wifi-weak .wave-2 { opacity: .25; }
.nw-diagram.wifi-weak .wave-3 { opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .nw-diagram.wifi-strong .wave-1 { animation: nwPing 1.6s ease-out infinite; }
  .nw-diagram.wifi-strong .wave-2 { animation: nwPing 1.6s ease-out infinite .22s; }
  .nw-diagram.wifi-strong .wave-3 { animation: nwPing 1.6s ease-out infinite .44s; }
  .nw-diagram.wifi-weak .wave-1 { animation: nwPing 1.9s ease-out infinite; }
}
@keyframes nwPing { 0% { opacity: .12; } 45% { opacity: 1; } 100% { opacity: .12; } }

/* ---------- the switch itself ---------- */
.switch-hit { cursor: pointer; }
.switch-plate { fill: var(--ink-700); stroke: var(--border-default); stroke-width: 2.5; }
.rocker { fill: var(--ink-600); stroke: var(--border-default); stroke-width: 2; }
.rocker-top {
  fill: var(--text-faint);
  transition: transform .18s var(--ease-out), fill .2s; transform-origin: center;
}
.nw-diagram.on .rocker-top { fill: var(--nw-glow); transform: translateY(26px); }
.switch-hit:focus-visible { outline: none; }
.switch-hit:focus-visible .switch-plate { stroke: var(--accent); stroke-width: 4; }

/* ---------- controls ---------- */
.nw-controls {
  display: flex; gap: 10px; justify-content: center; align-items: center;
  flex-wrap: wrap; margin-top: 18px;
}
.nw-btn {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em;
  text-transform: uppercase; cursor: pointer;
  padding: 11px 20px; border-radius: 999px;
  border: 1px solid var(--border-default); background: transparent;
  color: var(--text-body); transition: all .16s var(--ease-out);
}
.nw-btn:hover { border-color: var(--accent); color: var(--text-strong); }
.nw-btn:focus-visible { border-color: var(--accent); box-shadow: var(--focus-ring); outline: none; }
.nw-btn--on { background: var(--accent); border-color: var(--accent); color: var(--cta-text); }
.nw-btn[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--cta-text); }
.nw-sep { width: 1px; height: 22px; background: var(--border-subtle); }

/* A short line of prose under each diagram that changes with its state. It is
   the part that makes the animation mean something, so it is a live region. */
.nw .nw-state {
  margin: 16px auto 0; max-width: 560px; text-align: center;
  font-family: var(--font-body); font-size: 14px; line-height: 1.6;
  color: var(--text-body); min-height: 44px;
}
.nw-state b { color: var(--accent); font-weight: 600; }
.nw-state--warn b { color: var(--nw-weak); }

/* ---------- the "why this matters" panel between cards 1 and 2 ---------- */
.nw-bridge {
  background: var(--surface-raised); border: 1px solid var(--border-subtle);
  border-left: 3px solid var(--accent); border-radius: 18px;
  box-shadow: var(--shadow-sm); overflow: hidden; margin: 0 0 18px;
}
.nw-bridge__in {
  display: grid; grid-template-columns: 1.1fr .9fr; gap: 28px;
  padding: 26px 24px; align-items: center;
}
.nw .nw-bridge__t {
  font-family: var(--font-display); font-size: clamp(19px, 2.4vw, 24px);
  font-weight: 600; color: var(--text-strong); margin: 12px 0 10px; line-height: 1.2;
}
.nw .nw-bridge__p {
  font-family: var(--font-body); font-size: 15px; line-height: 1.6;
  color: var(--text-body); margin: 0;
}
.nw-bridge__p b { color: var(--text-strong); font-weight: 600; }
.nw-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.nw-tile {
  background: var(--ink-800); border: 1px solid var(--border-subtle);
  border-radius: 14px; padding: 18px 12px; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.nw-tile--hot { border-color: var(--accent); background: var(--accent-soft); }
.nw-tile svg { width: 52px; height: 52px; color: var(--text-muted); }
.nw-tile--hot svg { color: var(--accent); }
.nw-tile__n {
  font-family: var(--font-body); font-size: 13px; font-weight: 600;
  color: var(--text-strong); line-height: 1.35;
}
.nw-chip {
  font-family: var(--font-mono); font-size: 9px; letter-spacing: .12em;
  text-transform: uppercase; padding: 4px 10px; border-radius: 999px;
  border: 1px solid var(--border-default); color: var(--text-muted);
}
.nw-tile--hot .nw-chip { border-color: var(--accent); color: var(--accent); }
.nw-bridge__foot {
  padding: 13px 24px; border-top: 1px solid var(--border-subtle);
  background: var(--ink-800);
  font-family: var(--font-body); font-size: 14px; color: var(--text-muted);
}
.nw-bridge__foot b { color: var(--text-strong); font-weight: 600; }

@media (max-width: 760px) {
  .nw-bridge__in { grid-template-columns: 1fr; }
  .nw-card__body { padding: 16px 16px 20px; }
  .nw-card__head { padding: 18px 16px 0; }
}
@media (max-width: 420px) {
  .nw-tiles { grid-template-columns: 1fr; }
}