/* Chapter 7: circuit symbols, the metal lattice, flowing electrons, the symbol match and the circuit builder. */

.cw { stroke: #e8eefc; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; fill: none; }
.cw.thin { stroke-width: 4; }
.cw.plate { stroke-width: 5; stroke-linecap: butt; }
.cw.plate.thick { stroke-width: 12; }
.cw.broken { stroke: #ff8a8a; }
.cw-term { fill: #0d1730; stroke: #e8eefc; stroke-width: 3; }
.cw-sign { font: 800 30px system-ui, sans-serif; fill: #ffd166; }
.cw-letter { font: 800 30px system-ui, sans-serif; fill: #fff; }
.cw-broken-text { font: 800 20px system-ui, sans-serif; fill: #ff8a8a; }
.cw-empty { fill: rgba(255, 255, 255, .04); stroke: rgba(255, 255, 255, .45); stroke-width: 3; stroke-dasharray: 9 7; }
.cw-empty-plus { font: 700 30px system-ui, sans-serif; fill: rgba(255, 255, 255, .35); }
.junction { fill: #e8eefc; }
.electron { fill: #4dabf7; stroke: #d0ebff; stroke-width: 1.5; }

.c7-text { font: 600 30px system-ui, sans-serif; fill: #e8eefc; }
.c7-note { font: 600 26px system-ui, sans-serif; fill: #9fb4dd; }
.c7-head { font: 800 32px system-ui, sans-serif; fill: #ffd166; }
.c7-head.ins { fill: #b197fc; }
.c7-big { font: 800 44px system-ui, sans-serif; fill: #fff; }
.c7-text.gold, .c7-note.gold { fill: #ffd166; }
.c7-text.blue, .c7-note.blue { fill: #74c0fc; }
.c7-text.copper { fill: #ffa94d; }

.cable-sheath { fill: rgba(177, 151, 252, .35); stroke: #b197fc; stroke-width: 4; }
.cable-copper { fill: none; stroke: #ffa94d; stroke-width: 9; stroke-linecap: round; }
.tile-cond { fill: rgba(255, 209, 102, .12); stroke: #ffd166; stroke-width: 3; }
.tile-ins { fill: rgba(177, 151, 252, .14); stroke: #b197fc; stroke-width: 3; }

.lat-box { fill: rgba(255, 169, 77, .08); stroke: #ffa94d; stroke-width: 4; }
.cation { fill: #e8590c; stroke: #ffc078; stroke-width: 3; }
.cation-sign { font: 800 34px system-ui, sans-serif; fill: #fff; }
.cation-sign.small { font-size: 22px; }
.term-big { font: 800 64px system-ui, sans-serif; fill: #ffd166; }

.drift-arrow { stroke: #74c0fc; stroke-width: 6; stroke-linecap: round; }
.drift-arrow-head { fill: #74c0fc; }
.conv-arrow { stroke: #ffd166; stroke-width: 6; stroke-linecap: round; }
.conv-arrow-head { fill: #ffd166; }

.wire-tube { fill: rgba(255, 169, 77, .16); stroke: #ffa94d; stroke-width: 4; }
.gate { stroke: #ffd166; stroke-width: 4; stroke-dasharray: 12 8; }
.eq-box { fill: rgba(255, 209, 102, .1); stroke: #ffd166; stroke-width: 3; }
.energy-bar { fill: #ffd166; }
.copper-wire { stroke: #ffa94d; stroke-width: 14; stroke-linecap: round; opacity: .55; }
.resistor-block { fill: #343a40; stroke: #e8eefc; stroke-width: 4; }

/* Series-or-parallel quiz diagrams */
.act-title .quiz-circuit { display: block; width: min(100%, 300px); height: auto; margin: .5em auto 0; }

/* Symbol match */
.sym-layout { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: max(8px, 1.4cqw); width: 100%; align-items: start; }
.sym-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: max(6px, 1cqw); }
.tile.sym-tile { height: auto; padding: .3em .2em; gap: .1em; }
.tile.sym-tile svg { width: 100%; height: auto; }
.sym-cap { font-size: .75em; line-height: 1.1; text-align: center; }
.sym-names { display: flex; flex-direction: column; gap: max(5px, .7cqw); }
.sym-names .chip-btn { padding: .4em .6em; }

/* Circuit builder */
.cb-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: max(10px, 1.6cqw); width: 100%; align-items: start; }
.cb-picture { width: 100%; border-radius: .8em; overflow: hidden; background: #0d1730; }
.cb-picture svg { display: block; width: 100%; height: auto; }
.cb-controls { display: flex; flex-direction: column; gap: 6px; }
.cb-controls .lab-tools { justify-content: flex-start; }
.cb-controls .chip-btn { padding: .35em .7em; font-size: .9em; }
.cb-switch { align-self: flex-start; }
.cb-status { margin: 0; font-weight: 700; font-size: .88em; color: #e8eefc; min-height: 2.6em; line-height: 1.35; }
.cb-status.warn { color: #ffd0d0; }
.cb-hit { fill: rgba(255, 255, 255, 0); pointer-events: all; cursor: pointer; }
.cb-hit:hover { fill: rgba(255, 255, 255, .07); }
.cb-hit:focus { outline: none; }
.cb-hit:focus-visible { fill: rgba(255, 209, 102, .12); stroke: #ffd166; stroke-width: 3; }
.cb-legend { font: 600 20px system-ui, sans-serif; fill: #9fb4dd; }
.cb-legend.gold { fill: #ffd166; }
.lab-task-list { display: flex; flex-direction: column; gap: 6px; }
.lab-task { text-align: left; font-size: .88em; }
.lab-task.correct { border-color: var(--ok); background: #143a28; }

@container (max-width: 620px) {
  .cb-grid, .sym-layout { grid-template-columns: 1fr; }
  .sym-names { flex-direction: row; flex-wrap: wrap; justify-content: center; }
  .tile.sym-tile { height: auto; }
  .tile.sym-tile svg { width: 100%; height: auto; }
}