/* Week 1: interactive foundations. Uses the site's existing theme variables. */
.sf-block { border-left:3px solid var(--rule); padding-left:clamp(.65rem,2vw,1.25rem); }
.sf-block .sf-controls { display:flex; gap:.7rem 1.1rem; align-items:end; flex-wrap:wrap; margin:.65rem 0; }
.sf-block .sf-controls label { display:flex; gap:.2rem; flex-direction:column; min-width:min(100%,165px); flex:1; color:var(--ink); font-family:var(--sans); }
.sf-block select,.sf-block input[type="range"] { width:100%; accent-color:var(--elec); }
.sf-block select { min-height:2.25rem; border-radius:7px; border:1px solid var(--rule); padding:.35rem .5rem; background:var(--panel); color:var(--ink); font:inherit; }
.sf-block output { font-variant-numeric:tabular-nums; font-weight:600; }
.sf-pair { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.8rem; }
.sf-plot { min-height:370px; width:100%; }
.sf-note { font-size:.93rem; color:var(--muted); margin:.65rem 0 1rem; line-height:1.5; }
.sf-explain { margin:1.2rem 0; border:1px solid var(--rule); border-radius:8px; background:var(--panel); padding:1rem 1.1rem; }
.sf-explain h4 { margin:.65rem 0 .2rem; }
.sf-explain p { margin:.25rem 0 .6rem; }
.sf-readout { border:1px solid var(--rule); background:var(--bg); border-radius:6px; padding:.55rem .7rem; margin:.75rem 0; font-family:var(--sans); line-height:1.6; font-variant-numeric:tabular-nums; }
.sf-chip { padding:.08rem .35rem; border-radius:4px; white-space:nowrap; }
.sf-chip-c { background:rgba(43,95,217,.13); color:var(--elec); }
.sf-chip-v { background:rgba(200,53,74,.13); color:var(--hole); }
.sf-chip-f { background:rgba(31,138,91,.13); color:var(--fermi); }
@media(max-width:800px) { .sf-pair { grid-template-columns:1fr; } .sf-plot { min-height:315px; } .sf-block .sf-controls label { min-width:135px; } }