/* ==========================================================================
   calculator.css
   Shared structure for every calculator page (form, result panel, steps,
   formula reference). One file, reused by every calculator — add to it
   rather than writing page-specific CSS per calculator.
   ========================================================================== */

.calculator-page {
  padding-block: var(--space-6) var(--space-8);
}

.back-link {
  display: inline-block;
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-5);
}

.calculator-header {
  margin-bottom: var(--space-6);
  max-width: var(--text-max-width);
}

.calculator-header__subtitle {
  color: var(--color-text-secondary);
  margin: 0;
}

/* Form and result panel sit side by side on wide screens, stacked on
   narrow ones. minmax(0, 1fr) rather than 1fr on purpose: a bare 1fr track
   has an automatic (min-content) minimum, so on a narrow screen — a phone, or
   a workspace pane, which is narrower still — the track would refuse to shrink
   below the form's min-content and the unit dropdowns would hang off the right
   edge. Allowing the track to reach 0 lets the row below it shrink properly. */
.calculator-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-5);
  margin-bottom: var(--space-6);
}

/* The grid items are the form and the result panel; without this a grid item
   keeps its min-content width and pushes the track back out. */
.calculator-layout > * {
  min-width: 0;
}

@media (min-width: 800px) {
  .calculator-layout {
    grid-template-columns: minmax(0, 1fr) minmax(0, 20rem);
    align-items: start;
  }
}

/* ---- Form ---- */
.field-group {
  min-width: 0;
  margin-bottom: var(--space-4);
}

.field-group label {
  display: block;
  font-size: var(--text-sm);
  font-weight: 500;
  margin-bottom: var(--space-2);
}

/* Input plus unit dropdown (V, A, Ω …). The row wraps as a last resort: in a
   pane too narrow for the dropdown and a usable input to share a line, the
   dropdown drops onto its own line rather than hanging off the right edge. At
   ordinary widths both stay on one line, so nothing else changes. */
.field-group__row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.field-group__row input {
  flex: 1;
  min-width: 0;
  padding: var(--space-2) var(--space-3);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-sm);
  background-color: var(--color-bg);
  color: var(--color-text);
  font-size: var(--text-base);
}

.field-group__row select {
  max-width: 100%;
  padding: var(--space-2) var(--space-3);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-sm);
  background-color: var(--color-bg);
  color: var(--color-text);
  font-size: var(--text-base);
}

/* A select that is the only control in its field row fills the row, so a
   dropdown-only field (like the dB calculator's mode and direction) lines up
   with the number fields above and below it. */
.field-group__row select:only-child {
  flex: 1;
}

.field-group__row input[aria-invalid="true"] {
  border-color: var(--color-danger);
}

.field-error {
  color: var(--color-danger);
  font-size: var(--text-xs);
  margin: var(--space-1) 0 0 0;
  min-height: 1em;
}

.calculator-actions {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-5);
}

.form-error {
  color: var(--color-danger);
  font-size: var(--text-sm);
  margin-top: var(--space-3);
}

/* ---- Result panel ---- */
.calculator-result {
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  background-color: var(--color-accent-soft);
  padding: var(--space-5);
}

.calculator-result h2 {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text-secondary);
  margin-bottom: var(--space-2);
}

.result-value {
  font-family: var(--font-mono);
  font-size: var(--text-2xl);
  font-weight: 600;
  color: var(--color-accent);
  margin: 0 0 var(--space-3) 0;
  /* A converted binary number can be hundreds of digits long; anywhere (not
     break-word) so the long string also lowers the box's min-content width
     instead of widening the panel. */
  overflow-wrap: anywhere;
}

.result-explanation {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  margin: 0;
}

/* ---- Steps ---- */
.calculator-steps,
.calculator-formula,
.calculator-related {
  border-top: var(--border-width) solid var(--color-border);
  padding-block: var(--space-5);
}

.steps-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.steps-list li {
  font-family: var(--font-mono);
  font-size: var(--text-base);
  overflow-wrap: anywhere;
  padding: var(--space-3) var(--space-4);
  background-color: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-sm);
}

/* ---- Formula reference ---- */
.formula-list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.formula-list li {
  font-family: var(--font-mono);
  font-size: var(--text-lg);
  overflow-wrap: anywhere;
  padding: var(--space-2) var(--space-4);
  background-color: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-sm);
}

.calculator-formula p {
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
  margin: 0;
}

/* ---- Notes on the calculation ----
   Static HTML (not rendered by calculator-engine.js) so the explanation, the
   assumptions, the worked example and the two related links are on the page
   for a reader who does not run JavaScript, and for a crawler. Same banded
   layout as the formula reference, but at body-copy size rather than the
   small print used under the formula list. */
.calculator-notes {
  border-top: var(--border-width) solid var(--color-border);
  padding-block: var(--space-5);
  max-width: var(--text-max-width);
}

.calculator-notes h3 {
  font-size: var(--text-base);
  margin: var(--space-5) 0 var(--space-2) 0;
}

.calculator-notes p {
  color: var(--color-text-secondary);
  margin: 0 0 var(--space-3) 0;
}

.calculator-notes ul {
  list-style: disc;
  padding-left: var(--space-5);
  margin: 0 0 var(--space-4) 0;
}

.calculator-notes li {
  color: var(--color-text-secondary);
  margin-bottom: var(--space-2);
}

.calculator-notes__also {
  font-size: var(--text-sm);
}

/* ---- Embedded in the workspace ----
   A calculator page opened with ?embed=1 (see the inline bootstrap in each
   page's <head>) is shown inside a workspace pane, so the site chrome around
   the tool is dropped. Everything the tool itself needs — form, result,
   step-by-step working, formula reference — stays, and the layout rules above
   keep responding to the pane's width rather than the window's. */
html[data-embed] .site-header,
html[data-embed] .site-footer,
html[data-embed] .back-link,
html[data-embed] .calculator-header,
html[data-embed] .calculator-notes,
html[data-embed] .calculator-related {
  display: none;
}

html[data-embed] .calculator-page {
  padding-block: var(--space-5);
}

html[data-embed] .calculator-layout {
  margin-bottom: 0;
}