/* Voltage drop calculator (/voltage-drop-calculator/), 2026-10-13.
   Every selector is scoped to .wm-vd (the widget) so it cannot leak into
   other tools. Built on the shared classes in wm-tools.css. */

.wm-vd .wm-tabs { margin-bottom: 16px; }
.wm-vd .wm-tabs button { min-height: 40px; }
.wm-vd-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.wm-vd fieldset { border: 1px solid var(--wm-line); border-radius: 12px; background: var(--wm-soft); margin: 0; padding: 12px 14px 14px; min-width: 0; }
.wm-vd legend { font: 700 .82rem/1 'Segoe UI', system-ui, sans-serif; color: var(--wm-green); padding: 0 6px; margin-left: -6px; }
.wm-vd-f { display: flex; flex-direction: column; gap: 5px; margin-top: 10px; min-width: 0; }
.wm-vd fieldset > .wm-vd-f:first-of-type { margin-top: 4px; }
.wm-vd-l { font-size: .86rem; font-weight: 600; color: var(--wm-text); }
.wm-vd-h { font-weight: 400; color: var(--wm-mute); font-size: .78rem; margin-left: 4px; }
.wm-vd-in { display: flex; align-items: stretch; gap: 6px; min-width: 0; }
.wm-vd-in .wm-field { flex: 1 1 auto; }
.wm-vd .wm-field { min-height: 42px; font-size: 1rem; padding: 8px 10px; background: #fff; }
.wm-vd select.wm-field { cursor: pointer; }
.wm-vd-u { display: inline-flex; align-items: center; padding: 0 2px; color: var(--wm-mute); font-size: .9rem; min-width: 22px; }
.wm-vd .wm-seg { flex: none; }
.wm-vd .wm-seg button { min-height: 42px; min-width: 44px; font-size: .84rem; letter-spacing: 0; }
.wm-vd-f > .wm-seg { align-self: flex-start; }
.wm-vd .wm-field:focus-visible { outline: 2px solid var(--wm-green-2); outline-offset: 1px; }

/* more options */
.wm-vd-more { margin-top: 12px; border: 1px dashed var(--wm-line); border-radius: 12px; padding: 10px 14px; }
.wm-vd-more > summary { font-size: .9rem; min-height: 28px; display: list-item; }
.wm-vd-grid2 { margin-top: 4px; }
.wm-vd-check { display: flex; align-items: center; gap: 8px; font-size: .86rem; font-weight: 600; color: var(--wm-text); min-height: 42px; cursor: pointer; }
.wm-vd-check input { width: 20px; height: 20px; accent-color: var(--wm-green-2); margin: 0; }
.wm-vd-x .wm-vd-f { margin-top: 4px; }

/* results */
.wm-vd .wm-out { transition: opacity var(--wm-mid) var(--wm-ease); }
.wm-vd .wm-out.wm-vd-stale { opacity: .45; }
.wm-vd .wm-result b { font-size: 1.6rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.wm-vd-pct { color: var(--wm-text); font-size: 1.15rem; }
.wm-vd-verdict { margin: 10px 0 0; padding: 9px 12px 9px 36px; border-radius: 10px; font-size: .93rem; line-height: 1.5; position: relative; border: 1px solid; }
.wm-vd-verdict::before { position: absolute; left: 12px; top: 9px; font-weight: 800; }
.wm-vd-verdict.pass { background: #f0fdf4; border-color: #bbf7d0; color: #14532d; }
.wm-vd-verdict.pass::before { content: '✓'; color: #15803d; }
.wm-vd-verdict.near { background: #fffbeb; border-color: #fde68a; color: #713f12; }
.wm-vd-verdict.near::before { content: '!'; color: #b45309; left: 15px; }
.wm-vd-verdict.fail, .wm-vd-verdict.over { background: #fef2f2; border-color: #fecaca; color: #7f1d1d; }
.wm-vd-verdict.fail::before, .wm-vd-verdict.over::before { content: '✕'; color: #b91c1c; }
.wm-vd .wm-stat-cards { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.wm-vd .wm-stat-cards em { display: block; font-style: normal; font-size: .74rem; color: var(--wm-mute); margin-top: 2px; }
.wm-vd-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 12px; }
.wm-vd-actions .wm-btn { min-height: 40px; }
.wm-vd-done { font-size: .84rem; color: var(--wm-green); }
.wm-vd-work, .wm-vd-all { margin-top: 14px; }
.wm-vd-work > summary, .wm-vd-all > summary { min-height: 32px; display: list-item; }
.wm-vd .wm-steps .m { font-size: .95rem; white-space: normal; overflow-wrap: anywhere; }
.wm-vd .table-wrap { margin: 10px 0 0; }
.wm-vd table { font-size: .86rem; }
.wm-vd th { text-transform: none; letter-spacing: 0; font-size: .8rem; }
.wm-vd td, .wm-vd th { padding: 7px 10px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.wm-vd tr.cur td { background: #ecfdf5; font-weight: 700; }
.wm-vd td.ok { color: #15803d; }
.wm-vd td.no { color: #b91c1c; }

/* live result pill: phones only, hidden once the full result is on screen */
.wm-vd-peek { display: none; }
@media (max-width: 860px) {
  .wm-vd-peek { display: block; position: sticky; bottom: 12px; z-index: 5; margin: 12px auto 0; width: fit-content; max-width: 100%;
    min-height: 42px; padding: 9px 16px; border-radius: 999px; border: 1px solid; font: 700 .95rem/1.3 'Segoe UI', system-ui, sans-serif;
    box-shadow: 0 6px 18px rgba(15,23,42,.18); cursor: pointer; transition: opacity var(--wm-mid) var(--wm-ease); font-variant-numeric: tabular-nums; }
  .wm-vd-peek.pass { background: #f0fdf4; border-color: #86efac; color: #14532d; }
  .wm-vd-peek.near { background: #fffbeb; border-color: #fcd34d; color: #713f12; }
  .wm-vd-peek.fail, .wm-vd-peek.over { background: #fef2f2; border-color: #fca5a5; color: #7f1d1d; }
  .wm-vd-peek.gone { opacity: 0; pointer-events: none; }
}
@media (max-width: 980px) {
  .wm-vd-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .wm-vd-grid { grid-template-columns: 1fr; gap: 10px; }
  .wm-vd fieldset { padding: 10px 12px 12px; }
  .wm-vd .wm-result b { font-size: 1.4rem; }
}

/* the article below this tool: units in table headers stay as written (mm², Ω/km) */
body:has(.wm-vd) .content th { text-transform: none; letter-spacing: 0; }
/* the long example link in the article must wrap on a 360 px phone */
body:has(.wm-vd) .content code { overflow-wrap: anywhere; }

@media print {
  body:has(.wm-vd) .nav, body:has(.wm-vd) .breadcrumb, body:has(.wm-vd) .wm-examples, body:has(.wm-vd) footer,
  body:has(.wm-vd) .related, body:has(.wm-vd) .author-box, body:has(.wm-vd) ins.adsbygoogle, .wm-vd .wm-vd-actions, .wm-vd .wm-tabs, .wm-vd .wm-vd-peek { display: none !important; }
  .wm-vd .wm-card { box-shadow: none; border: 0; padding: 0; }
}