/* Chapter 6: ripple tank, diffraction drawings, black-spot map, sound vs light. */

.tank-water { fill: #0f2a52; stroke: #3b5b8f; stroke-width: 3; }
.tank-fronts { fill: none; stroke: #74c0fc; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.tank-barrier { fill: #ced4da; stroke: #495057; stroke-width: 2; }
.lam-mark path { fill: none; stroke: #ffd166; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.lam-mark text { font: 800 24px system-ui, sans-serif; fill: #ffd166; }
.cons-lines path { fill: none; stroke: #ff8fab; stroke-width: 3; stroke-dasharray: 10 8; }
.cons-lines text { font: 700 19px system-ui, sans-serif; fill: #ff8fab; }
.hl-frame { fill: none; stroke: #ffd166; stroke-width: 5; }

.harb-sand { fill: #e9c46a; stroke: #b08a2e; stroke-width: 2; }
.harb-boat path, .harb-boat line { fill: #f8f9fa; stroke: #343a40; stroke-width: 3; }
.harb-boat .harb-sail { fill: #ffd166; }

.map-sky { fill: #142a52; }
.map-ground { fill: #2f9e44; stroke: #1b5e20; stroke-width: 3; }
.map-mast polyline, .map-mast line { fill: none; stroke: #ced4da; stroke-width: 4; }
.map-glow { fill: rgba(255, 209, 102, .22); stroke: #ffd166; stroke-width: 3; }
.map-letter { font: 800 24px system-ui, sans-serif; fill: #fff; }
.map-radio rect { fill: #495057; stroke: #f1f3f5; stroke-width: 2; }
.map-radio circle { fill: #ced4da; }
.map-radio line { stroke: #f1f3f5; stroke-width: 3; stroke-linecap: round; }
.map-wave { fill: none; }
.map-wave.am { stroke: #ffd166; stroke-width: 5; opacity: .75; }
.map-wave.fm { stroke: #74c0fc; stroke-width: 2.5; opacity: .8; }
.map-wave.mobile { stroke: #b197fc; stroke-width: 1.8; opacity: .85; }
.map-shadow { fill: rgba(5, 8, 20, .6); }
.map-grazing { stroke: #fff; stroke-width: 2; stroke-dasharray: 8 8; opacity: .6; }
.map-bend { fill: none; stroke: #ffd166; stroke-width: 5; stroke-dasharray: 14 10; }
.map-bend-head { fill: #ffd166; }

.map-house { cursor: pointer; outline: none; }
.map-hit { fill: transparent; }
.map-ring { fill: none; stroke: none; }
.map-house:focus-visible .map-hit { stroke: #fff; stroke-width: 3; }
.map-house.predicted .map-ring { stroke: #ff6b6b; stroke-width: 4; stroke-dasharray: 8 6; }
.map-house.signal .map-ring { stroke: #4ade80; stroke-width: 4; }
.map-house.nosignal .map-ring { stroke: #ff6b6b; stroke-width: 4; }
.map-badge { font: 800 26px system-ui, sans-serif; fill: #ffd0d0; }
.map-house.signal .map-badge { fill: #4ade80; }
.map-house.nosignal .map-badge { fill: #ff6b6b; }

.cor-floor { fill: #182b52; stroke: #3b5b8f; stroke-width: 3; }
.cor-floor.room { fill: #1f3563; }
.cor-wall { fill: none; stroke: #ced4da; stroke-width: 16; stroke-linecap: square; }
.cor-body { fill: #495057; }
.cor-head.a { fill: #ffd166; }
.cor-head.b { fill: #74c0fc; }
.cor-sound circle, .cor-sound path { fill: none; stroke: #ffd166; stroke-width: 4; opacity: .85; }
.cor-wedge { fill: rgba(255, 243, 191, .18); }
.cor-rays line { stroke: #fff3bf; stroke-width: 3; }

.tank-stage { align-self: center; }
.tank-gap-mark path { fill: none; stroke: #ffd166; stroke-width: 3; }
.tank-gap-mark text { font: 700 20px system-ui, sans-serif; fill: #ffd166; }
.tank-sliders { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 18px; width: min(100%, 60cqw); align-self: center; }
.tank-slider { display: flex; flex-direction: column; gap: 2px; font-size: .9em; font-weight: 700; color: #cfd9ef; }
.tank-slider b { color: #ffd166; }
.tank-slider input { width: 100%; accent-color: #74c0fc; height: 26px; }
.tank-readout { margin: 0; text-align: center; font-weight: 700; color: #cfd9ef; }
.tank-tasks { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; font-weight: 700; }
.tank-tasks li::before { content: '☐ '; color: #9fb4dd; }
.tank-tasks li.done { color: #c9f7d4; }
.tank-tasks li.done::before { content: '✓ '; color: #4ade80; }
.tank-question { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.tank-question[hidden] { display: none; }
.tank-q { margin: 0; font-weight: 800; text-align: center; }

.pick-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: max(6px, 1.2cqw); width: 100%; }
.pick-btn { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: .4em; text-align: center; font-weight: 800; }
.pick-btn svg { display: block; width: 100%; height: auto; }
.pick-btn .tank-fronts { stroke-width: 3; }

.signal-btn { text-align: center; }
.signal-btn small { display: block; font-size: .78em; font-weight: 500; opacity: .85; }
.map-stage { align-self: center; }

@container (max-width: 620px) {
  .tank-sliders { width: 100%; }
}