/* ============================================================
   Tool Styles — Ohm's Law v2.1
   File: /assets/css/tools/ohms-law.v2.1.css
   Purpose:
   - Tool-only layout + circuit lab visuals + work formatting
   - No changes to ub-toolkit.v2.1.css required
   - Mobile-first, 44x44 touch targets, clamp typography
   ============================================================ */

/* Local tokens (tool-scoped) */
:root{
--ohm-radius: 16px;
--ohm-gap: 14px;
--ohm-soft: rgba(0,0,0,.06);
}

/* Tool hero layout */
.ub-hero{display:grid;grid-template-columns: 1.15fr 0.85fr;gap: var(--ohm-gap);}

/* Stack on tablet/mobile */
@media (max-width: 980px){
  .ub-hero{ grid-template-columns: 1fr; }
}

/* Circuit Lab panel */
.ub-lab{background: var(--ub-surface-2);border: 1px solid var(--ub-border);border-radius: var(--ohm-radius);padding: 12px;}
.ub-lab-top{display:flex;justify-content:space-between;align-items:flex-start;gap: 10px;flex-wrap:wrap;margin-bottom: 8px;}
.ub-lab-title{font-size: clamp(13px, 1.2vw, 14px);font-weight: 950;letter-spacing: .01em;}
.ub-lab-sub{font-size: 12px;color: var(--ub-muted);margin-top: 2px;}

/* KPI tiles */
.ub-kpis{display:flex;flex-wrap:wrap;gap: 8px;justify-content:flex-end;}
.ub-kpi{min-width: 112px;padding: 8px 10px;border-radius: 14px;border: 1px solid var(--ub-border);background: var(--ub-card-bg);}
.ub-kpi .k{font-size: 11px;font-weight: 900;text-transform: uppercase;letter-spacing: .04em;color: var(--ub-muted);}
.ub-kpi .v{font-family: var(--ub-mono);font-weight: 950;font-size: 14px;margin-top: 2px;}

/* Risk pill */
.ub-risk{display:inline-flex;align-items:center;gap: 8px;padding: 8px 10px;border-radius: 999px;border: 1px solid var(--ub-border);background: var(--ub-card-bg);font-size: 12px;font-weight: 950;min-height: 44px;}
.ub-dot{width: 10px;height: 10px;border-radius: 50%;background: var(--ub-muted);}

/* Solve wheel chips (tool) */
.ub-wheel{display:grid;grid-template-columns: repeat(2, minmax(0,1fr));gap: 10px;margin-top: 10px;}
.ub-wheel .ub-chip{min-height: 44px;padding: 10px 12px;border-radius: 999px;border: 1px solid var(--ub-border);background: var(--ub-chip-bg);color: var(--ub-chip-text);font-weight: 900;cursor: pointer;user-select:none;}
.ub-wheel .ub-chip:hover{background: var(--ub-chip-hover);}
.ub-wheel .ub-chip[aria-pressed="true"]{border-color: rgba(249,58,19,.55);box-shadow: 0 0 0 4px rgba(249,58,19,.12);}

/* Circuit SVG */
.ub-circuit{width: 100%;height: auto;margin-top: 10px;display:block;border-radius: 14px;}
@keyframes ub-flow{
from{ stroke-dashoffset: 60; }
to{ stroke-dashoffset: 0; }
}
.ub-flow{stroke-dasharray: 6 8;animation: ub-flow 900ms linear infinite;}

/* Heat overlay set by JS opacity; slightly higher in dark */
.ub-heat{ opacity: .06; }
html.ub-theme-dark .ub-heat{ opacity: .10; }

/* SVG interactive elements */
.ub-svg-btn{cursor: grab;user-select:none;}
.ub-svg-btn:active{cursor: grabbing;}

/* Accessible focus ring for SVG "buttons" and chips */
.ub-svg-btn:focus,
.ub-wheel .ub-chip:focus{outline: none;box-shadow: 0 0 0 4px var(--ub-focus);border-radius: 10px;}

/* Presets row */
.ub-preset-row{display:flex;flex-wrap:wrap;gap: 10px;margin-top: 10px;}
.ub-preset-row .ub-chip{min-height: 44px;padding: 10px 12px;}

/* Help hint + inline error */
.hint{margin-top: 6px;font-size: 12px;color: var(--ub-muted);}

.ub-inline-error{margin-top: 6px;font-size: 12px;color: var(--ub-danger);font-weight: 800;min-height: 16px;}

/* Range sliders (tool) */
.ub-range{width: min(420px, 100%);height: 44px;accent-color: var(--ub-btn-grad-b);}

/* Slider row utility (safe even if toolkit doesn't define it) */
.ub-slider-row{display:flex;gap: 10px;align-items:center;flex-wrap:wrap;}

/* Outputs / work area (tool) */
.ub-work{font-family: var(--ub-mono);font-size: 13px;line-height: 1.55;white-space: pre-wrap;overflow-wrap:anywhere;}

/* Details styling (tool enhancement) */
.ub-collapsible summary{cursor:pointer;font-weight: 950;min-height: 44px;display:flex;align-items:center;}
.ub-collapsible summary:focus{outline: none;box-shadow: 0 0 0 4px var(--ub-focus);border-radius: 12px;}

/* Rail button block helper (tool-only: adds width without touching toolkit) */
.ub-btn--block{width: 100%;}

/* Small screens polish */
@media (max-width: 520px){
.ub-kpi{ min-width: 98px; }
}