/* Electronics Institute – Attenuator (house style) */

#ei-atten{
  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-atten header{padding:18px 20px;border-bottom:1px solid #eee}
#ei-atten h2{margin:0;font-size:1.05em}
#ei-atten .sub{color:#6b7280;font-size:.9em;margin-top:4px}

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

/* Unified control height */
#ei-atten{ --ei-ctl-h: 46px; }

#ei-atten input[type=number], #ei-atten 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-atten input::placeholder{color:#9ca3af}
#ei-atten input[readonly]{background:#f9fafb}

#ei-atten 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-atten 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-atten .bar{display:flex;gap:10px;flex-wrap:wrap;justify-content:space-between;padding:12px 20px;border-top:1px solid #eee}
#ei-atten .note{padding:10px 20px;color:#6b7280;font-size:.9em}
#ei-atten .err{color:#b91c1c;font-size:.9em;display:none;padding:0 20px 10px; margin-top:6px; margin-bottom:4px;}
#ei-atten .muted{color:#6b7280;font-weight:500}

/* Cards */
#ei-atten .card{margin:12px 16px;border:1px solid #e5e7eb;border-radius:12px;background:#fafafa}
#ei-atten .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-atten .outputs{padding:10px 0 14px}

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

/* A11y helper */
#ei-atten .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-atten input[type=number]::-webkit-outer-spin-button,
#ei-atten input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
#ei-atten input[type=number]{-moz-appearance:textfield}

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

/* Wider label column in RESULTS cards */
@media (min-width:600px){
  #ei-atten .card .grid.outputs{ grid-template-columns:260px 1fr; gap:18px; }
}
@media (min-width:1024px){
  #ei-atten .card .grid.outputs{ grid-template-columns:300px minmax(420px,700px); gap:20px; }
}

/* Utility to show/hide mode-specific fields */
/* NEW – hide mode rows only after JS marks the widget as ready */
#ei-atten.js-ready .in-design{ display:none; }
#ei-atten.js-ready .in-analyze{ display:none; }

/* Subtle polish */
#ei-atten .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%;
  }
}