/* ==========================================================================
   Ohms Law Wheel — calculators.css
   Instrument-style calculator panels, inputs, results and diagrams.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Panel shell
   -------------------------------------------------------------------------- */
.calc {
  background: var(--white);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  min-width: 0;
}
.calc-head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: clamp(16px, 1.6vw, 20px) clamp(18px, 2vw, 26px);
  border-bottom: 1px solid var(--line);
  background: var(--bg-light);
}
.calc-head .tool-icon { width: 40px; height: 40px; }
.calc-head h2, .calc-head h3 { margin: 0; font-size: 1.06rem; }
.calc-head p { margin: 3px 0 0; font-size: 0.86rem; color: var(--muted); }
.calc-body { padding: clamp(18px, 2vw, 26px); }
.calc-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding: clamp(16px, 1.6vw, 20px) clamp(18px, 2vw, 26px);
  border-top: 1px solid var(--line);
  background: var(--bg-light);
}
.calc-foot .btn { flex: 1 1 auto; min-width: 140px; }

/* Two-column composition for the homepage flagship wheel */
.wheel-calc-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: clamp(22px, 3vw, 38px);
  align-items: start;
}
.wheel-calc-grid > * { min-width: 0; }
@media (max-width: 899px) { .wheel-calc-grid { grid-template-columns: minmax(0, 1fr); } }

.wheel-panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(20px, 2.2vw, 30px);
  box-shadow: var(--shadow-sm);
  height: 100%;
}
.wheel-panel svg { width: 100%; height: auto; display: block; margin-inline: auto; max-width: 430px; }
.wheel-panel-note {
  font-size: 0.86rem;
  color: var(--muted);
  margin: clamp(14px, 1.6vw, 20px) auto 0;
  max-width: 42ch;
  text-align: center;
}

/* Interactive quadrant focus on the static wheel */
.quad { cursor: pointer; }
.quad .quad-fill { fill: var(--green-pale); transition: fill var(--t-base), stroke var(--t-base); }
.quad:hover .quad-fill { fill: var(--green-light); }
.quad.is-focus .quad-fill { fill: var(--green-deep); }
.quad.is-focus .quad-sym, .quad.is-focus .quad-eq { fill: #fff; }
.quad-sym { font-family: var(--font-display); font-weight: 800; fill: var(--green-ink); }
.quad-eq { font-family: ui-monospace, Menlo, Consolas, monospace; fill: var(--charcoal-2); font-weight: 600; }
.quad.is-focus .quad-ring { stroke: var(--green-ink); stroke-width: 1.6; }

/* No hard focus rectangle when a quadrant is clicked with a pointer.
   Keyboard users still get a visible ring via :focus-visible. */
.quad:focus { outline: none; }
.quad:focus:not(:focus-visible) { outline: none; }
.quad:focus-visible { outline: none; }
.quad:focus-visible .quad-fill {
  stroke: var(--green-ink);
  stroke-width: 3;
  stroke-dasharray: 6 4;
}
[data-ohms-wheel] svg { outline: none; overflow: visible; }

/* Wheel → solver link-up ---------------------------------------------------
   Clicking a quadrant marks the matching input and lists the three formulas
   that solve for that quantity, right next to the fields. */
.field.is-target > label { color: var(--green-ink); }
/* background-color, not the background shorthand — the shorthand would wipe
   the chevron background-image off the unit <select>. */
.field.is-target .input-row input,
.field.is-target .input-row select {
  border-color: var(--green);
  background-color: var(--green-tint);
}
.field.is-target .input-row input { box-shadow: inset 0 0 0 1px rgba(4, 185, 98, 0.28); }

.quad-hint {
  margin-top: 16px;
  border: 1px solid var(--line-green);
  background: var(--green-tint);
  border-radius: var(--r-md);
  padding: 14px 16px;
  animation: panel-in 260ms var(--ease);
}
.quad-hint[hidden] { display: none; }
.quad-hint-head {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-display);
  font-size: 0.84rem;
  font-weight: 750;
  color: var(--green-ink);
  margin-bottom: 10px;
}
.quad-hint-head svg { flex: none; color: var(--green-deep); }
.quad-hint-head .quad-hint-clear {
  margin-left: auto;
  border: 1px solid var(--line-green);
  background: var(--white);
  color: var(--green-ink);
  border-radius: var(--r-pill);
  font-family: var(--font-display);
  font-size: 0.74rem;
  font-weight: 700;
  padding: 4px 11px;
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast);
}
.quad-hint-head .quad-hint-clear:hover { background: var(--green-deep); color: var(--white); border-color: var(--green-deep); }
.quad-hint ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.quad-hint li {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--charcoal-dark);
  background: var(--white);
  border: 1px solid var(--line);
  border-left: 3px solid var(--green);
  border-radius: 7px;
  padding: 8px 11px;
}

/* --------------------------------------------------------------------------
   2. Fields
   -------------------------------------------------------------------------- */
.field-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px 18px; }
.field-grid > * { min-width: 0; }

.field { min-width: 0; }
.field > label, .field-label {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-display);
  font-size: 0.84rem;
  font-weight: 650;
  color: var(--charcoal-2);
  margin-bottom: 6px;
}
.field > label svg, .field-label svg { color: var(--green-dark); flex: none; }
.field-hint { font-size: 0.78rem; color: var(--muted); margin: 5px 0 0; }

.input-row { display: flex; min-width: 0; }
.input-row input, .input-row select { min-width: 0; }
.input-row input {
  flex: 1 1 auto;
  border-radius: var(--r-sm) 0 0 var(--r-sm);
  border-right: 0;
}
.input-row select {
  flex: 0 0 88px;
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  background-color: var(--bg-sink);
  font-weight: 600;
}

/* Flat right edge on every text field.
   The generic `input[type=...]` rule below scores the same (0,1,1) as
   `.input-row input` and would win on source order, re-rounding the corners
   that butt against the unit <select>. The attribute selectors here lift both
   cases to (0,2,1) so the square right edge actually sticks.
   `.field >` is direct-child on purpose: it catches the standalone inputs
   without reaching the ones nested inside .input-row. */
.input-row input[type="text"],
.input-row input[type="number"],
.field > input[type="text"],
.field > input[type="number"] {
  border-radius: var(--r-sm) 0 0 var(--r-sm);
}

input[type="text"], input[type="number"], input[type="email"], select, textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: 0.97rem;
  color: var(--charcoal-dark);
  background: var(--white);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  padding: 11px 12px;
  min-height: 46px;
  transition: border-color var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
  -webkit-appearance: none;
  appearance: none;
}
select {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2355585F' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 30px;
}
textarea { min-height: 120px; resize: vertical; line-height: 1.6; }

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(4, 185, 98, 0.16);
}
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: none; }
input::placeholder { color: rgba(85, 88, 95, 0.55); }

input[aria-invalid="true"], select[aria-invalid="true"] { border-color: var(--red); }
input[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px rgba(193, 46, 4, 0.15); }

/* Hide number spinners for a cleaner instrument look */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inline-spin-button { -webkit-appearance: none; margin: 0; }
input[type="number"] { -moz-appearance: textfield; }

.field-error {
  display: none;
  align-items: flex-start;
  gap: 6px;
  font-size: 0.8rem;
  color: var(--red);
  margin-top: 5px;
}
.field-error.is-on { display: flex; }
.field-error svg { flex: none; margin-top: 2px; }

.seg {
  display: inline-flex;
  background: var(--bg-sink);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  padding: 3px;
  gap: 2px;
  flex-wrap: wrap;
}
.seg button {
  border: 0;
  background: transparent;
  border-radius: var(--r-pill);
  padding: 8px 15px;
  min-height: 38px;
  font-family: var(--font-display);
  font-size: 0.86rem;
  font-weight: 650;
  color: var(--charcoal-2);
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast);
}
.seg button:hover { color: var(--green-dark); }
.seg button[aria-pressed="true"] { background: var(--green); color: var(--white); box-shadow: var(--shadow-sm); }

/* Dynamic resistor rows */
.res-rows { display: grid; gap: 10px; margin-bottom: 14px; }
.res-row { display: flex; align-items: center; gap: 10px; min-width: 0; }
.res-row .res-tag {
  flex: none;
  width: 42px;
  font-family: var(--font-mono);
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--muted);
}
.res-row .input-row { flex: 1 1 auto; min-width: 0; }
.res-remove {
  flex: none;
  width: 42px; height: 46px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--r-sm);
  border: 1px solid var(--line-strong);
  background: var(--white);
  color: var(--muted);
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.res-remove:hover:not(:disabled) { background: var(--red-soft); color: var(--red); border-color: rgba(193,46,4,0.3); }
.res-remove:disabled { opacity: 0.35; cursor: not-allowed; }
.row-actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* --------------------------------------------------------------------------
   3. Results
   -------------------------------------------------------------------------- */
.result-panel {
  background: var(--bg-light);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: clamp(16px, 1.8vw, 22px);
  margin-top: 20px;
  min-height: 168px;
}
.result-empty { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 0.92rem; }
.result-empty svg { color: var(--green); flex: none; }

.result-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; }
.result-grid > * { min-width: 0; }
.result-tile {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 13px 14px;
  overflow-wrap: anywhere;
}
.result-tile--lead { border-color: rgba(4, 185, 98, 0.4); background: var(--green-pale); }
.result-key {
  display: flex; align-items: center; gap: 6px;
  font-size: 0.78rem;
  font-weight: 650;
  color: var(--muted);
  font-family: var(--font-display);
  margin-bottom: 4px;
}
.result-key svg { color: var(--green-dark); flex: none; }
.result-val {
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 1rem + 0.5vw, 1.35rem);
  font-weight: 750;
  color: var(--green-dark);
  line-height: 1.25;
  letter-spacing: -0.02em;
}
.result-alt { font-size: 0.78rem; color: var(--muted); margin-top: 3px; font-family: var(--font-mono); }

.result-work { margin-top: 16px; display: grid; gap: 10px; }
.work-block {
  background: var(--white);
  border: 1px solid var(--line);
  border-left: 3px solid var(--green);
  border-radius: var(--r-sm);
  padding: 12px 14px;
  overflow-x: auto;
}
.work-block .formula-label { margin-bottom: 4px; }
.work-eq {
  font-family: var(--font-mono);
  font-size: 0.95rem;
  color: var(--charcoal-dark);
  white-space: nowrap;
}

.result-msg {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  border-radius: var(--r-sm);
  padding: 11px 13px;
  font-size: 0.89rem;
  margin-top: 14px;
}
.result-msg svg { flex: none; margin-top: 2px; }
.result-msg--warn { background: var(--red-soft); color: #6d2205; border: 1px solid rgba(193, 46, 4, 0.22); }
.result-msg--warn svg { color: var(--red); }
.result-msg--info { background: var(--green-pale); color: var(--green-dark); border: 1px solid rgba(4, 185, 98, 0.22); }

.result-table { margin-top: 14px; }
.result-table table { min-width: 340px; font-size: 0.9rem; }

/* --------------------------------------------------------------------------
   4. Diagrams
   -------------------------------------------------------------------------- */
.diagram {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 14px;
  margin-top: 18px;
}
.diagram svg { width: 100%; height: auto; display: block; }
.diagram-caption { font-size: 0.82rem; color: var(--muted); text-align: center; margin: 10px 0 0; }

.dg-wire { stroke: var(--charcoal-2); stroke-width: 2; fill: none; stroke-linecap: round; }
.dg-label { font-family: var(--font-display); font-size: 13px; font-weight: 700; fill: var(--charcoal-dark); }
.dg-value { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px; fill: var(--green-dark); font-weight: 600; }
.dg-muted { fill: var(--muted); font-size: 11px; font-family: var(--font-body); }

/* Schematic primitives ---------------------------------------------------- */
.dg-res {                       /* ANSI zig-zag resistor body */
  fill: none;
  stroke: var(--charcoal-2);
  stroke-width: 2.2;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.dg-cell { stroke: var(--charcoal-2); stroke-width: 2.4; stroke-linecap: round; }
.dg-cell--short { stroke-width: 2.4; }
.dg-node { fill: var(--charcoal-2); }                 /* solid junction dot  */
.dg-term { fill: var(--white); stroke: var(--charcoal-2); stroke-width: 2; }  /* open terminal */
.dg-gnd { stroke: var(--charcoal-2); stroke-width: 2; stroke-linecap: round; }
.dg-flow { stroke: var(--green-deep); stroke-width: 2; fill: none; stroke-linecap: round; }
.dg-flow-head { fill: var(--green-deep); }
.dg-sign { font-family: var(--font-display); font-size: 14px; font-weight: 700; fill: var(--muted); }
.dg-dash { stroke: var(--line-strong); stroke-width: 1.4; stroke-dasharray: 4 4; fill: none; }

/* Resistor colour-code visual */
.resistor-vis { display: flex; justify-content: center; padding: 8px 0 4px; }
.resistor-vis svg { max-width: 420px; width: 100%; height: auto; }
.rs-body { fill: #E3C9A0; stroke: #C7A97B; stroke-width: 1.5; }
.band-select-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(122px, 1fr)); gap: 12px; }
.band-select-grid > * { min-width: 0; }
.swatch-row { display: flex; align-items: center; gap: 8px; }
.swatch {
  width: 20px; height: 20px; flex: none;
  border-radius: 5px;
  border: 1px solid rgba(36, 37, 38, 0.28);
}

/* 555 waveform */
.wave-grid { stroke: var(--line-strong); stroke-width: 1; }
.wave-line { stroke: var(--green); stroke-width: 2.4; fill: none; stroke-linejoin: round; stroke-linecap: round; }
.wave-line--trig { stroke: var(--charcoal-2); stroke-width: 2; }
.wave-axis { stroke: var(--muted); stroke-width: 1.4; }
.wave-arrow { fill: var(--muted); stroke: none; }
/* A white halo keeps timing labels readable where they cross the trace. */
.wave-label {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  fill: var(--charcoal-dark);
  paint-order: stroke;
  stroke: var(--white);
  stroke-width: 5px;
  stroke-linejoin: round;
}
.wave-tick {
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 11px;
  fill: var(--muted);
  paint-order: stroke;
  stroke: var(--white);
  stroke-width: 4px;
  stroke-linejoin: round;
}
/* --------------------------------------------------------------------------
   5. Calculator page scaffolding
   -------------------------------------------------------------------------- */

.calc-stage { padding: clamp(28px, 3.4vw, 46px) 0; background: var(--bg-sink); }
.calc-stage .calc { max-width: 860px; margin-inline: auto; }
.calc-stage .calc--wide { max-width: 100%; }

/* Every content section carries the same vertical rhythm, so the gap between
   any two of them is identical whatever their backgrounds are. */
.content-section { padding: clamp(38px, 4vw, 58px) 0; }
.content-section--sink { background: var(--bg-light); }
/* Two plain sections back to back would otherwise double the gap. */
.content-section:not(.content-section--sink) + .content-section:not(.content-section--sink) { padding-top: 0; }

.related-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.related-grid > * { min-width: 0; }
@media (max-width: 1023px) { .related-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px)  { .related-grid { grid-template-columns: minmax(0, 1fr); } }

.toc {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 18px 20px;
}
.toc h2 { font-size: 0.95rem; margin-bottom: 10px; }
.toc ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 7px; }
.toc li { margin: 0; }
.toc a { font-size: 0.9rem; color: var(--charcoal-2); display: inline-flex; align-items: center; gap: 7px; }
.toc a svg { color: var(--green); flex: none; }
.toc a:hover { color: var(--green-dark); }

/* --------------------------------------------------------------
   Reduced motion
   -------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .calc,
  .tool-card,
  .result-tile,
  .res-row,
  .seg button,
  .field input,
  .field select,
  .field textarea,
  .swatch,
  .rs-body,
  .wave-line,
  .dg-value {
    transition: none !important;
    animation: none !important;
  }
  .result-panel,
  .res-rows { scroll-behavior: auto; }
}