/* =========================
   Electronics Institute – Voltage Divider
   Complete CSS (v2.3)
   ========================= */

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

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

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

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

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

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

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

/* Responsive columns for INPUT grid */
@media (min-width:600px){
  #ei-vdiv .grid{grid-template-columns:220px 1fr; gap:16px}
  #ei-vdiv label{white-space:nowrap}
}
@media (min-width:1024px){
  #ei-vdiv .grid{grid-template-columns:240px minmax(420px,700px); gap:18px}
}

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

/* Optional tiny polish */
@media (max-width:560px){
  #ei-vdiv .card-title{align-items:flex-start}
}
#ei-vdiv .card{border-color:#e2e8f0;box-shadow:0 1px 0 rgba(0,0,0,.02)}

/* Give the content inside the cards some left/right breathing room */
#ei-vdiv .card .grid.outputs{
  padding: 10px 20px 14px;   /* top | left/right | bottom */
}
/* If you only want to change the IDEAL card: */
/* #ei-vdiv #idealCard .grid.outputs{ padding:10px 20px 14px; } */

/* More inner padding inside the cards (Ideal + Nearest standard) */
#ei-vdiv #idealCard .grid.outputs,
#ei-vdiv #stdCard   .grid.outputs{
  padding: 14px 20px 18px;   /* top | left/right | bottom */
}

/* If you want a touch more breathing room on small screens */
@media (max-width:600px){
  #ei-vdiv #idealCard .grid.outputs,
  #ei-vdiv #stdCard   .grid.outputs{
    padding: 16px 16px 20px;
  }
}

/* Voltage Divider — make the Mode dropdown wider */
#ei-vdiv #eiMode,
#ei-vdiv #eiSolve,
#ei-vdiv .row:first-of-type .ctl select {
  min-width: 320px;
  flex: 0 0 320px;   /* keep it from shrinking on desktop */
}

/* On small screens, let it expand to full width */
@media (max-width: 640px) {
  #ei-vdiv #eiMode,
  #ei-vdiv #eiSolve,
  #ei-vdiv .row:first-of-type .ctl select {
    min-width: 0;
    flex: 1 1 auto;
    width: 100%;
  }
}