/* CHAIN REACTION: classics group (lighthouse, homophones, recall, striped, patchbay, safedial).
   Built on css/kit.css. Each module root fills the 400x400 .mod box. */
@keyframes cl-blink { 0%, 100% { opacity: 1; } 50% { opacity: .15; } }
.mod .blink { animation: cl-blink .3s 2; }

/* ---------- lighthouse ---------- */
.lh-mod { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; padding-top: 12px; gap: 14px; }
.lh-head { position: relative; width: 300px; height: 132px; display: grid; place-items: center; }
.lh-hood { position: absolute; left: 70px; right: 70px; top: 0; bottom: 0; border-radius: 80px 80px 18px 18px;
  background: var(--grain), linear-gradient(180deg, #2c3035, #15171a); box-shadow: inset 0 2px 0 rgba(255,255,255,.18), inset 0 -4px 8px rgba(0,0,0,.6), 0 4px 10px rgba(0,0,0,.6); }
.lh-hood::before, .lh-hood::after { content: ''; position: absolute; top: 12px; width: 10px; height: 10px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #e3e6ea, #7d848b 55%, #3a3f45); }
.lh-hood::before { left: 14px; } .lh-hood::after { right: 14px; }
.lh-lamp { position: relative; width: 116px; height: 116px; border-radius: 50%; padding: 8px; box-sizing: border-box;
  background: radial-gradient(circle at 35% 30%, #d9dde2, #7d848b 60%, #3a3f45); box-shadow: 0 3px 8px rgba(0,0,0,.7); }
.lh-glass { width: 100%; height: 100%; border-radius: 50%; transition: background 60ms, box-shadow 60ms;
  background: repeating-radial-gradient(circle at 50% 50%, rgba(255,255,255,.07) 0 5px, rgba(0,0,0,.12) 5px 9px), radial-gradient(circle at 40% 35%, #6b5a2c, #3a2f12 60%, #1f1908);
  box-shadow: inset 0 4px 12px rgba(0,0,0,.8); }
.lh-lamp.on .lh-glass { background: repeating-radial-gradient(circle at 50% 50%, rgba(255,255,255,.35) 0 5px, rgba(255,200,80,.15) 5px 9px), radial-gradient(circle at 45% 40%, #ffffff, #fff1b0 35%, #ffc53d 70%, #d98a00);
  box-shadow: 0 0 30px 10px rgba(255,214,90,.75), 0 0 80px 30px rgba(255,190,60,.35), inset 0 0 12px rgba(255,255,255,.8); }
.lh-scale { position: relative; width: 290px; height: 40px; flex: none; }
.lh-scale i { position: absolute; bottom: 6px; width: 2px; height: 9px; margin-left: -1px; background: #8a9198; }
.lh-scale i.maj { height: 17px; background: #d8dde2; }
.lh-scale::before, .lh-scale::after { position: absolute; top: 3px; font: 700 10px var(--mono); color: #9aa3ad; }
.lh-scale::before { content: '3.500'; left: 6px; } .lh-scale::after { content: '3.620'; right: 6px; }
.lh-needle { position: absolute; top: 4px; bottom: 3px; width: 4px; border-radius: 2px; background: #ff3b30; box-shadow: 0 0 8px rgba(255,59,48,.9); transition: left 90ms; }
.lh-row { display: flex; align-items: center; gap: 14px; }
.lh-step { width: 66px; height: 62px; font-size: 26px; padding: 0; }
.lh-freq { width: 170px; height: 62px; box-sizing: border-box; display: flex; align-items: baseline; justify-content: center; gap: 6px; font-size: 34px; letter-spacing: 2px; padding-top: 12px; }
.lh-freq small { font-size: 13px; letter-spacing: 1px; }
.lh-tx { width: 210px; height: 54px; font-size: 26px; letter-spacing: 6px; }

/* ---------- homophones ---------- */
.hp-mod { position: absolute; inset: 0; padding: 18px 18px 0; box-sizing: border-box; display: flex; flex-direction: column; gap: 14px; }
.hp-top { display: flex; gap: 12px; height: 92px; }
.hp-screen { flex: 1; display: grid; place-items: center; font-size: 36px; letter-spacing: 3px; white-space: nowrap; transition: opacity 150ms; }
.hp-side { width: 74px; display: flex; flex-direction: column; justify-content: space-between; align-items: center; padding: 6px 0 0; }
.hp-leds { display: flex; gap: 8px; }
.hp-leds .k-led { width: 14px; height: 14px; }
.hp-mode { width: 62px; box-sizing: border-box; text-align: center; font-size: 22px; padding: 6px 0; letter-spacing: 2px; }
.hp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; padding: 14px 16px 20px; }
.hp-btn { height: 58px; font: 800 20px var(--mono); letter-spacing: 1px; white-space: nowrap; }
.hp-mod.swap .hp-screen, .hp-mod.swap .hp-btn { opacity: .25; }
.hp-btn { transition: opacity 150ms, transform 50ms, box-shadow 50ms; }

/* ---------- recall ---------- */
.rc-mod { position: absolute; inset: 0; padding: 22px 20px 0; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; gap: 20px; }
.rc-top { display: flex; gap: 18px; align-items: stretch; }
.rc-disp { width: 210px; height: 150px; box-sizing: border-box; display: grid; place-items: center; font-size: 110px; letter-spacing: 0; transition: opacity 150ms; }
.rc-side { width: 110px; display: flex; flex-direction: column; align-items: center; gap: 6px; padding-top: 8px; color: #cfd4d9; font: 800 12px var(--mono); letter-spacing: 2px; }
.rc-key { font-size: 28px; width: 84px; box-sizing: border-box; text-align: center; padding: 6px 0; }
.rc-leds { margin-top: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; padding-bottom: 4px; }
.rc-row { display: flex; gap: 14px; padding: 16px 16px 22px; }
.rc-btn { width: 72px; height: 116px; font: 900 46px var(--mono); }
.rc-mod.swap .rc-disp, .rc-mod.swap .rc-btn { opacity: .25; }
.rc-btn { transition: opacity 150ms, transform 50ms, box-shadow 50ms; }

/* ---------- striped wires ---------- */
.sw-mod { position: absolute; inset: 0; }
.sw-svg { position: absolute; inset: 0; overflow: visible; }
.sw-rail { position: absolute; left: 30px; right: 30px; height: 30px; border-radius: 6px; background: var(--grain), linear-gradient(180deg, #2a2e33, #15171a); box-shadow: inset 0 2px 5px rgba(0,0,0,.8), 0 1px 0 rgba(255,255,255,.12); }
.sw-rail.top { top: 80px; } .sw-rail.bot { top: 290px; }
.sw-term { fill: #b9a06a; stroke: #4a3c1c; stroke-width: 1.5; }
.sw-shadow { fill: none; stroke: rgba(0,0,0,.5); stroke-width: 20; stroke-linecap: round; transform: translate(3px, 3px); }
.sw-core { fill: none; stroke-width: 17; stroke-linecap: round; }
.sw-stripe { fill: none; stroke-width: 4.5; stroke-linecap: round; }
.sw-shine { fill: none; stroke: rgba(255,255,255,.4); stroke-width: 2.5; stroke-linecap: round; transform: translateX(-5px); }
.sw-shadow.mid, .sw-core.mid, .sw-stripe.mid, .sw-shine.mid { stroke-linecap: butt; }
.sw-hit { fill: rgba(0,0,0,0); cursor: pointer; pointer-events: all; }
.sw-wire .top, .sw-wire .bot { transition: transform 200ms; }
.sw-wire.cut .mid { display: none; }
.sw-wire.cut .sw-core.top, .sw-wire.cut .sw-stripe.top { transform: translateY(-7px); }
.sw-wire.cut .sw-core.bot, .sw-wire.cut .sw-stripe.bot { transform: translateY(7px); }
.sw-wire.cut .sw-shadow.top { transform: translate(3px, -4px); } .sw-wire.cut .sw-shadow.bot { transform: translate(3px, 10px); }
.sw-wire.cut .sw-shine.top { transform: translate(-5px, -7px); } .sw-wire.cut .sw-shine.bot { transform: translate(-5px, 7px); }
.sw-wire.cut .sw-hit { cursor: default; }
.sw-led { position: absolute; top: 36px; width: 22px; height: 22px; }
.sw-sticker { position: absolute; top: 336px; width: 38px; height: 38px; box-sizing: border-box; border-radius: 4px; border: 2px dashed rgba(255,255,255,.12); display: grid; place-items: center; font-size: 28px; line-height: 1; color: #1b1d20; }
.sw-sticker.star { border: none; background: linear-gradient(160deg, #fffbe8, #e9dfb8); box-shadow: 0 2px 3px rgba(0,0,0,.6); transform: rotate(-4deg); }

/* ---------- patch bay ---------- */
.pb-mod { position: absolute; inset: 0; padding: 26px 16px 0 14px; box-sizing: border-box; display: flex; gap: 14px; }
.pb-panel { width: 280px; height: 320px; flex: none; }
.pb-svg { display: block; transition: transform 300ms, opacity 300ms; }
.pb-svg.slide { transform: translateY(-30px); opacity: 0; }
.pb-jack { fill: #0b0c0e; stroke: #8a9198; stroke-width: 5; }
.pb-lbl { fill: #e8eaec; font: 900 20px var(--mono); text-anchor: middle; }
.pb-shadow { fill: none; stroke: rgba(0,0,0,.55); stroke-width: 14; stroke-linecap: round; transform: translate(2px, 4px); }
.pb-core { fill: none; stroke-width: 10; stroke-linecap: round; }
.pb-shine { fill: none; stroke: rgba(255,255,255,.4); stroke-width: 2; transform: translateY(-2.5px); }
.pb-hitline { fill: none; stroke: rgba(0,0,0,0); stroke-width: 26; pointer-events: stroke; cursor: pointer; }
.pb-plug { stroke: rgba(0,0,0,.55); stroke-width: 2; }
.pb-hit { fill: rgba(0,0,0,0); pointer-events: all; cursor: pointer; }
.pb-wire.cut .pb-core, .pb-wire.cut .pb-shadow, .pb-wire.cut .pb-shine { stroke-dasharray: 100 34 600; }
.pb-wire.cut .pb-hitline, .pb-wire.cut .pb-hit { cursor: default; }
.pb-side { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; padding-top: 34px; color: #cfd4d9; font: 800 12px var(--mono); letter-spacing: 2px; }
.pb-page { font-size: 24px; letter-spacing: 1px; width: 74px; box-sizing: border-box; text-align: center; padding: 8px 0; }
.pb-down { margin-top: 26px; width: 70px; height: 132px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 0; }
.pb-down span { font-size: 34px; line-height: 1; }
.pb-down small { font: 800 12px var(--mono); letter-spacing: 1px; }

/* ---------- safe dial ---------- */
.sd-mod { position: absolute; inset: 0; }
.sd-codebox { position: absolute; left: 10px; top: 12px; display: flex; flex-direction: column; align-items: center; gap: 4px; color: #cfd4d9; font: 800 11px var(--mono); letter-spacing: 2px; }
.sd-code { font-size: 24px; width: 64px; box-sizing: border-box; text-align: center; padding: 6px 0; }
.sd-dialwrap { position: absolute; left: 75px; top: 10px; width: 250px; height: 250px; border-radius: 50%; filter: drop-shadow(0 6px 8px rgba(0,0,0,.6)); }
.sd-dialwrap::before { content: ''; position: absolute; inset: 24px; border-radius: 50%;
  background: conic-gradient(from 20deg, #f2f4f6, #9aa1a8 12%, #e6e9ec 25%, #8a9198 38%, #f2f4f6 50%, #9aa1a8 62%, #e6e9ec 75%, #8a9198 88%, #f2f4f6); }
.sd-svg { position: relative; display: block; cursor: grab; touch-action: none; }
.sd-svg.grab { cursor: grabbing; }
.sd-face { transition: transform 70ms linear; }
.sd-rim { fill: none; stroke: #2b2f34; stroke-width: 24; }
.sd-disc { fill: none; stroke: #1b1d20; stroke-width: 2; }
.sd-tick { stroke: #1b1d20; stroke-width: 1.6; }
.sd-tick.big { stroke-width: 3.2; }
.sd-num { fill: #15171a; font: 900 17px var(--mono); text-anchor: middle; }
.sd-knob { fill: #33373c; stroke: #15171a; stroke-width: 2; }
.sd-grip { stroke: #9aa1a8; stroke-width: 3; }
.sd-cap { fill: #5a6067; stroke: #23262a; stroke-width: 2; }
.sd-pointer { fill: #ff3b30; stroke: #5e120d; stroke-width: 2; }
.sd-trail { position: absolute; right: 12px; top: 44px; display: flex; flex-direction: column; gap: 4px; align-items: center; min-height: 90px; padding: 6px 4px; border-radius: 6px; background: #101215; box-shadow: inset 0 2px 5px #000; width: 34px; box-sizing: border-box; }
.sd-trail span { font: 900 20px var(--sans); line-height: 1; color: #6dfb9a; text-shadow: 0 0 6px rgba(109,251,154,.7); }
.sd-trail span.r-L { color: #ffb347; text-shadow: 0 0 6px rgba(255,179,71,.7); }
.sd-row { position: absolute; left: 14px; right: 14px; bottom: 18px; display: flex; align-items: center; gap: 10px; }
.sd-step { width: 66px; height: 66px; padding: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
.sd-step span { font-size: 30px; line-height: 1; }
.sd-step small { font: 800 10px var(--mono); letter-spacing: 1px; }
.sd-read { width: 64px; height: 56px; box-sizing: border-box; display: grid; place-items: center; font-size: 28px; letter-spacing: 2px; padding: 0; }
.sd-open { flex: 1; height: 72px; border: none; border-radius: 10px; cursor: pointer; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding-bottom: 8px;
  background: var(--grain), linear-gradient(180deg, #4a5057, #2b2f34); box-shadow: inset 0 1px 0 rgba(255,255,255,.2), inset 0 -3px 6px rgba(0,0,0,.5), 0 4px 8px rgba(0,0,0,.6);
  color: #f5c518; font: 900 14px var(--mono); letter-spacing: 4px; }
.sd-open i { position: absolute; left: 16px; right: 16px; top: 12px; height: 20px; border-radius: 10px; transition: transform 120ms;
  background: linear-gradient(180deg, #ffffff, #c9cdd2 40%, #7d848b 75%, #a9aeb4); box-shadow: 0 4px 0 #1b1d20, 0 6px 8px rgba(0,0,0,.6); }
.sd-open i::before, .sd-open i::after { content: ''; position: absolute; top: 4px; width: 10px; height: 26px; border-radius: 3px; background: linear-gradient(90deg, #7d848b, #c9cdd2, #7d848b); z-index: -1; }
.sd-open i::before { left: 6px; } .sd-open i::after { right: 6px; }
.sd-open.pull i { transform: translateY(14px); }

/* ---------- expert pages ---------- */
.cl-tab { border-collapse: separate; border-spacing: 3px; margin: 10px 0 18px; font-size: 20px; }
.cl-tab caption { text-align: left; font: 800 20px var(--sans); color: var(--hazard); padding: 6px 0; }
.cl-tab th { background: #2a2f36; color: var(--hazard); font: 800 16px var(--sans); letter-spacing: 1px; padding: 8px 12px; text-align: left; }
.cl-tab th.rh { color: #e8eaec; font-size: 17px; white-space: nowrap; }
.cl-tab th.rh small { color: var(--dim); font-weight: 700; }
.cl-tab td { background: #1a1d22; padding: 8px 12px; }
.cl-tab td.w { font: 800 22px var(--mono); color: #fff; white-space: nowrap; }
.lh-tab td { font: 700 22px var(--mono); text-align: center; }
.lh-tab td.w { text-align: left; }
.cl-morse { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; max-width: 980px; }
.cl-morse div { background: #1a1d22; border-radius: 6px; padding: 6px 10px; display: flex; align-items: center; gap: 10px; }
.cl-morse b { font: 900 22px var(--mono); color: var(--hazard); }
.cl-morse span { font: 700 18px var(--mono); letter-spacing: 2px; color: #fff; }
.hp-t1 td { font-size: 19px; }
.hp-lists { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; max-width: 1100px; }
.hp-t2 { width: 100%; }
.hp-t2 td { font: 700 17px var(--mono); }
.hp-t2 td.w { font-size: 19px; width: 110px; }
.rc-tab td { font-size: 18px; vertical-align: top; }
.sw-tab td { font-size: 18px; font-weight: 700; text-align: center; }
.sw-tab td.act-C { color: #34d399; } .sw-tab td.act-N { color: #ff6b5e; }
.sw-tab td.act-B, .sw-tab td.act-H, .sw-tab td.act-E { color: #ffd166; }
.pb-tab td { font: 800 20px var(--mono); text-align: center; }
.cl-chip { display: inline-block; width: 16px; height: 16px; border-radius: 3px; vertical-align: -2px; box-shadow: 0 0 0 1px rgba(255,255,255,.3); }
.sd-trail::before { content: 'TURNS'; font: 800 8px var(--mono); letter-spacing: 0; color: #9aa3ad; margin-bottom: 2px; }