/* Lesson 04: cable, breaker table, short circuit bar, extension reel. */
.wire-grid, .short-grid, .reel-grid { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 30px; align-items: start; }
.wire-controls input[type=range] { margin-bottom: 14px; }
#cable-svg, #short-svg { width: 100%; height: auto; background: #10202c; border-radius: 14px; }
#cable-svg .box { fill: #203644; stroke: #3b5463; }
#cable-svg .cu { fill: #d38a4f; stroke: #8a4f28; stroke-width: 2; }
#short-svg .fill-ok { fill: var(--ok); } #short-svg .fill-bad { fill: var(--hot); }
.iz-table-wrap { overflow-x: auto; }
.iz-table { width: 100%; border-collapse: separate; border-spacing: 6px; font-size: .84rem; min-width: 560px; }
.iz-table th { font-weight: 600; color: var(--muted); text-align: left; font-size: .76rem; }
.iz-table td { background: #10202c; border-radius: 10px; padding: 10px 12px; border-left: 3px solid transparent; }
.iz-table td b { display: block; font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.iz-table td span { font-size: .72rem; }
.iz-table td.ok { border-left-color: var(--ok); } .iz-table td.ok span { color: var(--ok); }
.iz-table td.bad { border-left-color: var(--hot); } .iz-table td.bad span { color: var(--hot); }
.reel-visual { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 16px; align-items: center; background: #10202c; border-radius: 14px; padding: 14px; }
#reel-svg, #reel-chart { width: 100%; height: auto; }
#reel-svg .drum { fill: #c4372d; stroke: #8b2b25; stroke-width: 4; }
#reel-svg .hub { fill: #1c2024; }
#reel-chart .curve { fill: none; stroke-width: 3; }
#reel-chart .now { stroke: var(--muted); stroke-dasharray: 2 4; }

@media (max-width: 800px) {
  .wire-grid, .short-grid, .reel-grid { grid-template-columns: 1fr; gap: 18px; }
}
@media (max-width: 600px) {
  .reel-visual { grid-template-columns: 1fr; }
  #reel-svg { max-width: 150px; margin: auto; }
}