/* =========================================================
   Electronics Institute – LED Series Resistor Calculator
   Complete CSS (responsive + a11y, with long-label fix)
   ========================================================= */

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

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

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

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

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

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

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

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

/* ---------- Responsive layout & long-label fix ---------- */

/* Mobile: stacked (already 1fr), ensure labels sit above inputs */
@media (max-width:700px){
  #ei-led label{ display:block; margin-bottom:6px; white-space:normal; }
}

/* Desktop/tablet: give labels more room and allow wrapping */
#ei-led .grid > label{
  display:block;               /* make label its own grid item */
  white-space:normal;
  overflow-wrap:anywhere;
}
@media (min-width:600px){
  #ei-led .grid{
    grid-template-columns: 280px minmax(0,1fr); /* widen label col */
    gap:16px;
  }
}
@media (min-width:1024px){
  #ei-led .grid{
    grid-template-columns: 320px minmax(420px,700px);
    gap:18px;
  }
}

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

/* Subtle polish */
#ei-led .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) .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) .row:first-of-type .ctl select {
    min-width: 0;
    flex: 1 1 auto;
    width: 100%;
  }
}