/* Electronics Institute – Op-Amp (house style) */

#ei-opamp{
  font: clamp(16px,1.6vw,18px)/1.55 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  max-width:900px; margin:1rem auto; background:#fff;
  border:1px solid #e5e7eb; border-radius:14px; box-shadow:0 6px 20px rgba(0,0,0,.06);
}

/* Header */
#ei-opamp header{padding:18px 20px;border-bottom:1px solid #eee}
#ei-opamp h2{margin:0;font-size:1.05em}
#ei-opamp .sub{color:#6b7280;font-size:.9em;margin-top:4px}

/* Grid / rows */
#ei-opamp .grid{display:grid; gap:12px; align-items:center; padding:16px 20px; grid-template-columns:1fr}
#ei-opamp .grid.outputs{padding-top:0}
#ei-opamp .row{display:contents}
#ei-opamp label{font-weight:600;color:#374151}
#ei-opamp .ctl{display:flex;gap:10px;align-items:center;min-width:0}
#ei-opamp{ --ei-ctl-h: 46px; }

#ei-opamp input[type=number], #ei-opamp input[type=text]{
  flex:1 1 auto; min-width:0; width:100%;
  height:var(--ei-ctl-h); min-height:var(--ei-ctl-h);
  padding:0 1.1rem; border:1px solid #d1d5db; border-radius:10px;
  background:#fff; box-sizing:border-box;
}
#ei-opamp input::placeholder{color:#9ca3af}
#ei-opamp input[readonly]{background:#f9fafb}

#ei-opamp select{
  flex:0 0 120px; min-width:100px;
  height:var(--ei-ctl-h); min-height:var(--ei-ctl-h);
  padding:0 .6rem; line-height:1;
  border:1px solid #d1d5db; border-radius:10px; background:#fafafa;
}

#ei-opamp button{
  height:var(--ei-ctl-h); min-height:var(--ei-ctl-h);
  padding:0 .9rem; border:1px solid #d1d5db; background:#f3f4f6; color:#111827;
  border-radius:10px; cursor:pointer;
}

/* Footer / misc */
#ei-opamp .bar{display:flex;gap:10px;flex-wrap:wrap;justify-content:space-between;padding:12px 20px;border-top:1px solid #eee}
#ei-opamp .note{padding:10px 20px;color:#6b7280;font-size:.9em}
#ei-opamp .err{color:#b91c1c;font-size:.9em;display:none;padding:0 20px 10px; margin-top:6px; margin-bottom:4px;}
#ei-opamp .muted{color:#6b7280;font-weight:500}

/* Cards */
#ei-opamp .card{margin:12px 16px;border:1px solid #e5e7eb;border-radius:12px;background:#fafafa}
#ei-opamp .card-title{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:10px 20px 0; margin:0 0 8px; color:#374151; font-weight:700;
}
#ei-opamp .outputs{padding:10px 0 14px}

/* Inner padding */
#ei-opamp #idealCard .grid.outputs,
#ei-opamp #stdCard   .grid.outputs{ padding:14px 20px 18px; }
@media (max-width:600px){
  #ei-opamp #idealCard .grid.outputs,
  #ei-opamp #stdCard   .grid.outputs{ padding:16px 16px 20px; }
}

/* A11y helper */
#ei-opamp .sr-only{
  position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;
  overflow:hidden!important;clip:rect(0,0,0,0)!important;clip-path:inset(50%)!important;white-space:nowrap!important;border:0!important
}

/* Remove number spinners */
#ei-opamp input[type=number]::-webkit-outer-spin-button,
#ei-opamp input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
#ei-opamp input[type=number]{-moz-appearance:textfield}

/* Long labels / desktop widths */
#ei-opamp .grid > label{ display:block; white-space:normal; overflow-wrap:anywhere; }
@media (min-width:600px){
  #ei-opamp .grid{ grid-template-columns: 280px minmax(0,1fr); gap:16px; }
}
@media (min-width:1024px){
  #ei-opamp .grid{ grid-template-columns: 320px minmax(420px,700px); gap:18px; }
}
@media (min-width:600px){
  #ei-opamp .card .grid.outputs{ grid-template-columns:260px 1fr; gap:18px; }
}
@media (min-width:1024px){
  #ei-opamp .card .grid.outputs{ grid-template-columns:300px minmax(420px,700px); gap:20px; }
}

/* Progressive enhancement guard (keep inputs visible even if JS fails) */
#ei-opamp.js-ready .only-js { display:none; }

/* Subtle polish */
#ei-opamp .card{border-color:#e2e8f0;box-shadow:0 1px 0 rgba(0,0,0,.02)}

/* Make the "Mode" select wide on all calculators listed here */
:is(#ei-vdiv, #ei-atten, #ei-opamp, #ei-lm317, #ei-rc, #ei-led, #ei-react) .row:first-of-type .ctl select {
    min-width: 320px;
    flex: 0 0 320px;
    white-space: nowrap;
}

@media (max-width: 640px) {
    :is(#ei-vdiv, #ei-atten, #ei-opamp, #ei-lm317, #ei-rc, #ei-led, #ei-react) .row:first-of-type .ctl select {
        min-width: 0;
        flex: 1 1 auto;
        width: 100%;
    }
}

/* --- Make the “Op amp type” selector wider on desktop --- */
#ei-opamp #eiMode {
    flex: 0 0 320px;
    min-width: 320px;
}

@media (max-width: 600px) {
    #ei-lm317 #eiMode {
        flex: 1 1 auto;
        min-width: 0;
    }
}

/* --- Make the “What to solve” selector wider on desktop --- */
#ei-opamp #eiSolve {
    flex: 0 0 320px;
    min-width: 320px;
}

@media (max-width: 600px) {
    #ei-opamp #eiSolve {
        flex: 1 1 auto;
        min-width: 0;
    }
}