/* Electronics tools (resistor code, Ohm's law, LED, divider, 555, filters, PCB trace, wire gauge, pinouts). */
.ek-wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 1.25rem; align-items: start; }
@media (max-width: 820px) { .ek-wrap { grid-template-columns: 1fr; } }
.ek-out { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: .6rem; margin-top: .75rem; }
.ek-out .radio-stat .v { font-size: 1.25rem; word-break: break-word; }
.ek-out .radio-stat.main { border-color: var(--accent-color); box-shadow: 0 0 0 1px var(--accent-color) inset; }
.ek-out .radio-stat .s { font-size: .8rem; color: var(--text-secondary); margin-top: .15rem; }
.ek-big { font: 700 clamp(1.8rem, 5vw, 2.6rem) ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--text-primary); margin: .25rem 0; }
.ek-err { color: #e57373; min-height: 1.2rem; font-size: .9rem; margin-top: .4rem; }
.ek-err:empty { display: none; }

/* Drawings: schematics, resistor, plots. Colours follow the theme. */
.ek-svg { width: 100%; height: auto; display: block; color: var(--text-primary); }
.ek-svg text { font: 13px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; fill: currentColor; }
.ek-svg .lbl { font: 600 13px system-ui, sans-serif; }
.ek-svg .val { font: 700 13px ui-monospace, Menlo, Consolas, monospace; fill: var(--accent-color); }
.ek-svg .muted { fill: var(--text-secondary); }
.ek-svg .w { stroke: currentColor; stroke-width: 2.2; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.ek-svg .flow { stroke: var(--accent-color); stroke-width: 2.2; fill: none; stroke-dasharray: 6 10; animation: ek-flow 1s linear infinite; opacity: .85; }
@keyframes ek-flow { to { stroke-dashoffset: -16; } }
@media (prefers-reduced-motion: reduce) { .ek-svg .flow, .ek-hero .tr { animation: none !important; } }
.ek-svg .grid { stroke: var(--border-color); stroke-width: 1; }
.ek-svg .axis { stroke: var(--text-secondary); stroke-width: 1.2; }
.ek-svg .curve { fill: none; stroke: var(--accent-color); stroke-width: 2.5; stroke-linejoin: round; }
.ek-svg .curve2 { fill: none; stroke: #ffb300; stroke-width: 2; stroke-dasharray: 5 4; }
.ek-svg .mark { stroke: #e57373; stroke-width: 1.5; stroke-dasharray: 4 3; }
.ek-svg .dot { fill: currentColor; }
.ek-panel-svg { background: var(--bg-secondary, rgba(127,127,127,.06)); border: 1px solid var(--border-color); border-radius: 12px; padding: .75rem; }

/* Resistor colour picker */
.ek-bands { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: .6rem; margin-top: .75rem; }
.ek-band label { display: block; font-size: .8rem; color: var(--text-secondary); margin-bottom: .25rem; }
.ek-swatches { display: flex; flex-wrap: wrap; gap: 3px; }
.ek-swatches button { width: 22px; height: 22px; border-radius: 5px; border: 1px solid rgba(127,127,127,.5); cursor: pointer; padding: 0; }
.ek-swatches button.on { outline: 3px solid var(--accent-color); outline-offset: 1px; }
.ek-swatches button:focus-visible { outline: 3px solid var(--accent-color); }

/* Animated hero for the electronics hub */
.ek-hero { position: relative; border-radius: 16px; overflow: hidden; background: radial-gradient(ellipse at 30% 20%, #10391f 0%, #07160d 55%, #040b07 100%); padding: 2rem 1.5rem; color: #e8f5e9; min-height: 240px; }
.ek-hero svg.bg { position: absolute; inset: 0; width: 100%; height: 100%; }
.ek-hero .tr { fill: none; stroke: #2e7d32; stroke-width: 2; opacity: .55; }
.ek-hero .tr.live { stroke: #b9f6ca; stroke-dasharray: 14 140; animation: ek-flow-hero 3.2s linear infinite; opacity: .9; filter: drop-shadow(0 0 3px #69f0ae); }
@keyframes ek-flow-hero { to { stroke-dashoffset: -154; } }
.ek-hero .pad { fill: #c8a24a; }
.ek-hero .chip { fill: #111; stroke: #555; }
.ek-hero .inner { position: relative; max-width: 560px; }
.ek-hero h1 { color: #fff; text-align: left; margin: 0 0 .5rem; }
.ek-hero p { color: #c8e6c9; margin: 0 0 .75rem; }
.ek-hero .tags { display: flex; flex-wrap: wrap; gap: .4rem; }
.ek-hero .tags a { background: rgba(255,255,255,.08); border: 1px solid rgba(185,246,202,.35); color: #e8f5e9; border-radius: 999px; padding: .25rem .7rem; text-decoration: none; font-size: .85rem; }
.ek-hero .tags a:hover { background: rgba(185,246,202,.2); }

/* Projects panel */
.ek-projects { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: .75rem; }
.ek-project { border: 1px solid var(--border-color); border-radius: 10px; padding: .9rem; }
.ek-project h3 { margin: 0 0 .35rem; font-size: 1.05rem; }
.ek-project p { margin: 0 0 .5rem; font-size: .9rem; color: var(--text-secondary); }

/* Pinout boards */
.ek-board-wrap { overflow-x: auto; }
.ek-board { min-width: 600px; }
.ek-board .pcb { stroke: rgba(0,0,0,.35); stroke-width: 2; }
.ek-board .pin { cursor: pointer; stroke: rgba(0,0,0,.6); stroke-width: 1; transition: transform .12s; }
.ek-board .pin.dim { opacity: .2; }
.ek-board .pin.sel { stroke: #fff; stroke-width: 3; }
.ek-board .plabel { font: 600 12px ui-monospace, Menlo, Consolas, monospace; fill: #f5f5f5; pointer-events: none; }
.ek-board .plabel.dim { opacity: .25; }
.ek-board .silk { font: 700 13px system-ui, sans-serif; fill: rgba(255,255,255,.85); }
.ek-legend { display: flex; flex-wrap: wrap; gap: .35rem; margin: .5rem 0 .75rem; }
.ek-legend button { border: 1px solid var(--border-color); background: none; color: var(--text-primary); border-radius: 999px; padding: .2rem .65rem; cursor: pointer; font-size: .82rem; display: inline-flex; align-items: center; gap: .35rem; }
.ek-legend button i { width: 11px; height: 11px; border-radius: 50%; display: inline-block; }
.ek-legend button.active { border-color: var(--accent-color); box-shadow: 0 0 0 1px var(--accent-color) inset; }
.ek-pininfo { min-height: 4.5rem; }
.ek-pininfo .n { font: 700 1.2rem ui-monospace, Menlo, Consolas, monospace; }
.ek-chips { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .35rem; }
.ek-chips span { font-size: .78rem; border-radius: 4px; padding: .1rem .45rem; color: #fff; }

/* AWG size comparison */
.ek-wires { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .9rem; }
.ek-wires figure { margin: 0; text-align: center; font-size: .78rem; color: var(--text-secondary); }
.ek-wires .cu { border-radius: 50%; background: radial-gradient(circle at 35% 35%, #ffcc80, #d17a22 55%, #8d4a12); margin: 0 auto .25rem; box-shadow: 0 0 0 3px rgba(127,127,127,.25); }
.net-table tr.hl td { background: rgba(76,175,80,.14); }
.ek-known { border-color: var(--accent-color) !important; box-shadow: 0 0 0 1px var(--accent-color) inset; }
.ek-out .radio-stat .s a { color: var(--accent-color); }
.ek-svg.sch text { font-size: 15px; }
.ek-svg.sch .val { font-size: 15px; }
.ek-layout { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 1.25rem; align-items: start; }
.ek-layout .ek-out { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin-top: 0; }
@media (max-width: 820px) { .ek-layout { grid-template-columns: 1fr; } }
.ek-project a, .ek-panel-svg a { color: var(--accent-color); }
.ek-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); gap: 1.25rem; align-items: start; }
@media (max-width: 820px) { .ek-split { grid-template-columns: 1fr; } }
.ek-wide .ek-svg { max-width: 900px; margin: 0 auto; }
.ek-svg.plot text { font-size: 12px; }