/* ── Index: deliberately list-like, NOT the panel-card grid used for
   paths/courses — narrow column, hairline dividers, reads as a reference index. ── */
.calc-group {
  margin-block-start: 2.75rem;
  margin-inline: auto;
  max-inline-size: 52rem;
}

.calc-group__title {
  border-block-end: 1px solid var(--color-subtle);
  color: var(--color-subtle-dark);
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  margin-block-end: 0.25rem;
  padding: 0 0.75rem var(--block-space-half);
  text-transform: uppercase;
}

.calc-catalog {
  display: flex;
  flex-direction: column;
}

.calc-row {
  align-items: center;
  border-block-end: 1px solid var(--color-subtle);
  color: var(--color-ink);
  display: flex;
  gap: var(--block-space);
  padding: 0.95rem 0.75rem;
}

.calc-row:hover {
  background-color: var(--color-subtle-light);

  .calc-row__arrow {
    color: var(--color-ink);
    transform: translateX(0.2rem);
  }
}

.calc-row__icon {
  color: var(--color-subtle-dark);
  display: inline-flex;
  flex-shrink: 0;

  .icon {
    block-size: 1.4rem;
    inline-size: 1.4rem;
  }
}

.calc-row__text {
  flex: 1;
  min-inline-size: 0;
}

.calc-row__title {
  display: block;
  font-weight: 600;
  line-height: 1.3;
}

.calc-row__desc {
  color: var(--color-subtle-dark);
  display: block;
  font-size: 0.9rem;
  margin-block-start: 0.2rem;
}

.calc-row__arrow {
  color: var(--color-subtle);
  flex-shrink: 0;
  transition: transform 0.15s ease;

  .icon {
    block-size: 1.1rem;
    inline-size: 1.1rem;
  }
}

/* ── Show: title + intro + the calculator panel ────────────────────── */
/* NOT the big uppercase marketing `.page-title` — sentence case and lighter,
   so long SEO-tuned titles stay calm instead of a giant hyphenated caps block. */
.calc-title {
  font-size: clamp(1.55rem, 4vw, 2.1rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.15;
  margin-block: 0;
  text-wrap: balance;
}

.calc-intro {
  color: var(--color-subtle-dark);
  font-size: 1.05rem;
  margin-block: 0.75rem var(--block-space-double);
  max-inline-size: 46rem;
}

.calc {
  --panel-padding: 1.75em;
}

.calc__grid {
  display: grid;
  gap: var(--block-space-double);

  @media (min-width: 640px) {
    grid-template-columns: 1fr 1fr;
  }
}

.calc__stack {
  display: grid;
  gap: var(--block-space-double);
}

.calc__heading {
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  margin-block: 0 1.1rem;
  text-transform: uppercase;
  color: var(--color-subtle-dark);
}

.calc__hint,
.calc__note {
  color: var(--color-subtle-dark);
  font-size: 0.85rem;
}

.calc__hint {
  margin-block: -0.5rem var(--block-space);
}

.calc__note {
  border-block-start: 1px solid var(--color-subtle);
  margin-block-start: 1.25rem;
  padding-block-start: 0.9rem;
}

.calc__row {
  display: grid;
  gap: var(--block-space);
  grid-template-columns: 1fr 1fr;
}

.calc__pair {
  display: grid;
  gap: var(--block-space-double);

  @media (min-width: 640px) {
    grid-template-columns: 1fr 1fr;
  }
}

.calc__pair-side + .calc__pair-side {
  @media (min-width: 640px) {
    border-inline-start: 1px solid var(--color-subtle);
    padding-inline-start: 2rem;
  }
}

/* ── Fields ────────────────────────────────────────────────────────── */
.calc-field {
  margin-block-end: 1.1rem;
}

.calc-field__label {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4em;
}

.calc-field__hint {
  color: var(--color-subtle-dark);
  font-size: 0.8em;
  font-weight: 400;
}

/* Unit sits inside the field's trailing edge; the input reserves room for it.
   Block, not the inline default: an absolutely positioned child needs a real
   box to measure against, or a sibling can drag it out of the field. */
.calc-field__control {
  display: block;
  position: relative;
}

.calc-field__input {
  padding-inline-end: 3.5em;
}

.calc-field__unit {
  color: var(--color-subtle-dark);
  font-size: 0.9em;
  inset-block-start: 50%;
  inset-inline-end: 0.85em;
  pointer-events: none;
  position: absolute;
  transform: translateY(-50%);
}

/* "Typical values" select above its number input — turns "введите удельное
   сопротивление грунта" into "выберите грунт", without taking away the field
   for anyone who measured it. */
.calc-field__presets {
  font-size: 0.9rem;
  margin-block-end: 0.4rem;
}

/* Geolocation ask. The error only exists once the browser has refused. */
.calc-locate {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--block-space-half);
  margin-block-end: 1.1rem;
}

.calc-locate__error {
  color: var(--color-negative);
  display: none;
  font-size: 0.85rem;
}

[data-locating="failed"] .calc-locate__error {
  display: inline;
}

[data-locating="true"] .calc-locate .btn {
  opacity: 0.6;
  pointer-events: none;
}

/* A slider paired with its number input. It duplicates a control that is
   already labelled, so it stays out of the tab order and the a11y tree —
   the number input is the one people (and screen readers) operate. */
.calc-field__range {
  accent-color: var(--color-link);
  block-size: 1.5rem;
  display: block;
  inline-size: 100%;
  margin-block-start: 0.4rem;
}

/* ── Diagrams ──────────────────────────────────────────────────────────
   Inline SVG drawn by the per-calculator controllers: they set data-state
   and a transform, everything else (colour, motion) belongs to CSS. Panels
   sit on --color-subtle-light, so a shape only reads against --color-bg. ── */
.calc-figure {
  margin: 0 0 var(--block-space);

  svg {
    block-size: auto;
    display: block;
    inline-size: 100%;
  }
}

.calc-figure__legend {
  color: var(--color-subtle-dark);
  font-size: 0.8rem;
  margin-block: 0 var(--block-space);
}

/* Ohm's wheel — the sector says who put the number there. */
.ohm-wheel {
  margin-inline: auto;
  max-inline-size: 15rem;
}

.ohm-wheel__wedge {
  fill: var(--color-bg);
  stroke: var(--color-subtle-light);
  stroke-width: 2;
  transition: fill 150ms ease-out;
}

.ohm-wheel__symbol,
.ohm-wheel__value,
.ohm-wheel__unit {
  fill: var(--color-subtle-dark);
  text-anchor: middle;
  transition: fill 150ms ease-out;
}

.ohm-wheel__symbol {
  font-size: 15px;
  font-weight: 700;
}

.ohm-wheel__value {
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

.ohm-wheel__unit {
  font-size: 10px;
}

.ohm-wheel__sector[data-state="given"] {
  .ohm-wheel__wedge {
    fill: var(--color-subtle);
  }

  .ohm-wheel__symbol,
  .ohm-wheel__value {
    fill: var(--color-ink);
  }
}

.ohm-wheel__sector[data-state="derived"] {
  .ohm-wheel__symbol,
  .ohm-wheel__value {
    fill: var(--color-link);
  }
}

.ohm-wheel__hub {
  fill: var(--color-subtle-light);
}

/* Voltage drop — cable + a 0…10 % scale with the norm standing at its middle. */
.drop-figure {
  --drop-accent: var(--color-subtle-dark);
  margin-inline: auto;
  max-inline-size: 30rem;
}

.drop-figure[data-state="ok"] {
  --drop-accent: var(--color-positive);
}

.drop-figure[data-state="warn"] {
  --drop-accent: var(--color-negative);
}

.drop-figure__end rect {
  fill: var(--color-bg);
  stroke: var(--color-subtle);
}

.drop-figure__cable {
  stroke: var(--drop-accent);
  stroke-linecap: round;
  stroke-width: 8;
  transition: stroke 200ms ease-out;
}

.drop-figure__caption,
.loop-gauge__caption {
  fill: var(--color-subtle-dark);
  font-size: 12px;
  text-anchor: middle;
}

.drop-figure__caption--start,
.loop-gauge__caption--start {
  text-anchor: start;
}

.drop-figure__caption--end {
  text-anchor: end;
}

.drop-figure__reading {
  fill: var(--color-ink);
  font-size: 16px;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  text-anchor: middle;
}

.drop-figure__loss {
  fill: var(--drop-accent);
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  text-anchor: middle;
  transition: fill 200ms ease-out;
}

.drop-figure__track,
.loop-gauge__track,
.poe-line__track {
  fill: var(--color-bg);
}

/* scaleX, not a width attribute: transforms animate everywhere, SVG geometry
   properties do not. */
.drop-figure__fill,
.loop-gauge__fill,
.poe-line__fill {
  transform: scaleX(0);
  transform-box: fill-box;
  transform-origin: left center;
  transition:
    transform 150ms ease-out,
    fill 200ms ease-out;
}

.drop-figure__fill {
  fill: var(--drop-accent);
}

.drop-figure__limit {
  stroke: var(--color-negative);
  stroke-dasharray: 3 3;
  stroke-width: 1.5;
}

/* 4–20 mA gauge — the marker carries both the signal and the same point in
   engineering units, which is the whole conversion in one glance. */
.loop-gauge {
  --gauge-accent: var(--color-link);
  margin-inline: auto;
  max-inline-size: 30rem;
}

.loop-gauge[data-state="empty"] {
  --gauge-accent: var(--color-subtle-dark);
}

.loop-gauge[data-state="out"] {
  --gauge-accent: var(--color-negative);
}

.loop-gauge__fill {
  fill: var(--gauge-accent);
}

.loop-gauge__tick {
  stroke: var(--color-subtle);
  stroke-width: 1.5;
}

.loop-gauge__bound {
  fill: var(--color-ink);
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  text-anchor: middle;
}

.loop-gauge__marker {
  transition: transform 150ms ease-out;
}

.loop-gauge__value {
  fill: var(--color-ink);
  font-size: 18px;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  text-anchor: middle;
}

.loop-gauge__signal {
  fill: var(--gauge-accent);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  text-anchor: middle;
  transition: fill 200ms ease-out;
}

.loop-gauge__needle {
  stroke: var(--gauge-accent);
  stroke-width: 1.5;
  transition: stroke 200ms ease-out;
}

.loop-gauge__dot {
  fill: var(--gauge-accent);
  stroke: var(--color-subtle-light);
  stroke-width: 2;
  transition: fill 200ms ease-out;
}

/* Cable section — a ladder of the standard sections, each step as tall as the
   current it carries. The answer is the first step to rise above the line. */
.section-ladder {
  margin-inline: auto;
  max-inline-size: 30rem;
}

.section-ladder__bar {
  fill: var(--color-bg);
  stroke: var(--color-subtle);
  transform: scaleY(0);
  transform-box: fill-box;
  transform-origin: bottom;
  transition:
    transform 150ms ease-out,
    fill 200ms ease-out;
}

.section-ladder__section {
  fill: var(--color-subtle-dark);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  text-anchor: middle;
}

.section-ladder__amps {
  fill: var(--color-subtle-dark);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  text-anchor: middle;
}

.section-ladder__step[data-state="pick"] {
  .section-ladder__bar {
    fill: var(--color-link);
    stroke: var(--color-link);
  }

  .section-ladder__section {
    fill: var(--color-link);
  }
}

/* Only if a market ever ships a table shorter than the window. */
.section-ladder__step[data-state="off"] {
  display: none;
}

.section-ladder__current {
  transition: transform 150ms ease-out;

  line {
    stroke: var(--color-ink);
    stroke-dasharray: 4 3;
    stroke-width: 1.5;
  }
}

.section-ladder[data-state="empty"] .section-ladder__current {
  opacity: 0;
}

.section-ladder__current-caption {
  fill: var(--color-subtle-dark);
  font-size: 12px;
  text-anchor: end;
}

.section-ladder__current-value {
  fill: var(--color-ink);
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  text-anchor: end;
}

/* Subnet — the address as its 32 bits; the prefix is the border you can see. */
.bit-ruler {
  margin-inline: auto;
  max-inline-size: 30rem;
}

.bit-ruler__bit {
  fill: var(--color-bg);
  stroke: var(--color-subtle);
  transition: fill 150ms ease-out;
}

.bit-ruler__bit[data-state="net"] {
  fill: var(--color-link);
  stroke: var(--color-link);
}

.bit-ruler__address {
  fill: var(--color-ink);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  text-anchor: middle;
}

.bit-ruler__mask {
  fill: var(--color-subtle-dark);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  text-anchor: middle;
}

/* Measurement error — the class-of-accuracy band with the instrument's own
   reduced error marked on it: fit or not is a position, not a comparison. */
.tol-scale {
  --tol-accent: var(--color-subtle-dark);
  margin-inline: auto;
  max-inline-size: 30rem;
}

.tol-scale[data-state="plain"] {
  --tol-accent: var(--color-ink);
}

.tol-scale[data-state="ok"] {
  --tol-accent: var(--color-positive);
}

.tol-scale[data-state="warn"] {
  --tol-accent: var(--color-negative);
}

.tol-scale__band {
  fill: var(--color-positive);
  fill-opacity: 0.14;
  stroke: var(--color-positive);
  stroke-opacity: 0.45;
  transform: scaleX(0);
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 150ms ease-out;
}

.tol-scale__axis {
  stroke: var(--color-subtle);
  stroke-width: 1.5;
}

.tol-scale__marker {
  transform: translateX(200px);
  transition: transform 150ms ease-out;

  line {
    stroke: var(--tol-accent);
    stroke-width: 2;
    transition: stroke 200ms ease-out;
  }

  circle {
    fill: var(--tol-accent);
    stroke: var(--color-subtle-light);
    stroke-width: 2;
    transition: fill 200ms ease-out;
  }
}

.tol-scale[data-state="empty"] .tol-scale__marker {
  opacity: 0;
}

.tol-scale__value {
  fill: var(--tol-accent);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  text-anchor: middle;
  transition: fill 200ms ease-out;
}

.tol-scale__caption,
.tol-scale__zero {
  fill: var(--color-subtle-dark);
  font-size: 12px;
}

.tol-scale__zero {
  text-anchor: middle;
}

/* Resistance thermometer — the sensor's own curve across its whole range, with
   both directions landing on it: filled dot from °C, ring from Ω. */
.rtd-curve {
  margin-inline: auto;
  max-inline-size: 30rem;
}

.rtd-curve__plot {
  fill: var(--color-bg);
  stroke: var(--color-subtle);
}

.rtd-curve__line {
  fill: none;
  stroke: var(--color-subtle-dark);
  stroke-linecap: round;
  stroke-width: 2;
}

.rtd-curve__point {
  transition: transform 150ms ease-out;
}

.rtd-curve__point[data-state="off"] {
  display: none;
}

.rtd-curve__point--direct circle {
  fill: var(--color-link);
}

.rtd-curve__point--reverse circle {
  fill: none;
  stroke: var(--color-link);
  stroke-width: 2;
}

.rtd-curve__axis {
  fill: var(--color-subtle-dark);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.rtd-curve__axis--end {
  text-anchor: end;
}

/* PoE line — switch to device up top, the 100 m channel down below with the
   powering limit standing where the line stops being able to feed the device. */
.poe-line {
  --poe-accent: var(--color-subtle-dark);
  margin-inline: auto;
  max-inline-size: 30rem;
}

.poe-line[data-state="ok"] {
  --poe-accent: var(--color-positive);
}

.poe-line[data-state="warn"] {
  --poe-accent: var(--color-negative);
}

.poe-line__end rect {
  fill: var(--color-bg);
  stroke: var(--color-subtle);
}

.poe-line__cable {
  stroke: var(--poe-accent);
  stroke-linecap: round;
  stroke-width: 8;
  transition: stroke 200ms ease-out;
}

.poe-line__caption {
  fill: var(--color-subtle-dark);
  font-size: 12px;
  text-anchor: middle;
}

.poe-line__caption--start {
  text-anchor: start;
}

.poe-line__caption--end {
  text-anchor: end;
}

.poe-line__reading {
  fill: var(--color-ink);
  font-size: 16px;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  text-anchor: middle;
}

.poe-line__loss {
  fill: var(--poe-accent);
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  text-anchor: middle;
  transition: fill 200ms ease-out;
}

.poe-line__fill {
  fill: var(--color-subtle-dark);
}

.poe-line__limit {
  transition: transform 150ms ease-out;

  line {
    stroke: var(--color-ink);
    stroke-dasharray: 3 3;
    stroke-width: 1.5;
  }
}

.poe-line[data-state="empty"] .poe-line__limit,
.poe-line__limit[data-state="off"] {
  opacity: 0;
}

/* Grounding — the loop in a cut of soil: solid rods are driven, dashed ones
   are what the norm still asks for. */
.ground-figure {
  margin-inline: auto;
  max-inline-size: 30rem;
}

.ground-figure__soil {
  fill: var(--color-bg);
}

.ground-figure__surface {
  stroke: var(--color-subtle-dark);
  stroke-width: 1.5;
}

.ground-figure__caption {
  fill: var(--color-subtle-dark);
  font-size: 12px;
}

.ground-figure [data-rods] {
  transform-box: fill-box;
  transform-origin: top center;
  transition: transform 150ms ease-out;
}

.ground-figure__rod {
  fill: var(--color-ink);
  stroke: none;
}

.ground-figure__rod[data-state="needed"] {
  fill: none;
  stroke: var(--color-subtle-dark);
  stroke-dasharray: 3 3;
  stroke-width: 1.5;
}

.ground-figure__rod[data-state="off"],
.ground-figure[data-state="empty"] .ground-figure__rod,
.ground-figure__more[data-state="off"] {
  display: none;
}

.ground-figure__more {
  fill: var(--color-subtle-dark);
  font-size: 18px;
  text-anchor: end;
}

/* Hyperfocal — the sharp zone on a distance axis compressed by d/(d + H), so
   the hyperfocal tick never moves and infinity fits on screen. */
.dof-band {
  margin-inline: auto;
  max-inline-size: 30rem;
}

.dof-band__track {
  fill: var(--color-bg);
  stroke: var(--color-subtle);
}

.dof-band__zone {
  fill: var(--color-link);
  transform: scaleX(0);
  transform-box: fill-box;
  transform-origin: left center;
  transition: transform 150ms ease-out;
}

.dof-band__hyper-tick {
  stroke: var(--color-ink);
  stroke-dasharray: 4 3;
  stroke-width: 1.5;
}

.dof-band__marker {
  transition: transform 150ms ease-out;

  line {
    stroke: var(--color-ink);
    stroke-width: 2;
  }

  circle {
    fill: var(--color-ink);
    stroke: var(--color-subtle-light);
    stroke-width: 2;
  }
}

.dof-band[data-state="empty"] .dof-band__hyper,
.dof-band[data-state="empty"] .dof-band__zone,
.dof-band[data-state="empty"] .dof-band__marker,
.dof-band[data-state="nofocus"] .dof-band__zone,
.dof-band[data-state="nofocus"] .dof-band__marker {
  opacity: 0;
}

.dof-band__caption {
  fill: var(--color-subtle-dark);
  font-size: 12px;
  text-anchor: middle;
}

.dof-band__caption--start {
  text-anchor: start;
}

.dof-band__caption--end {
  text-anchor: end;
}

.dof-band__focus,
.dof-band__hyper-value {
  fill: var(--color-ink);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  text-anchor: middle;
}

@media (prefers-reduced-motion: reduce) {
  .drop-figure__fill,
  .loop-gauge__fill,
  .loop-gauge__marker,
  .section-ladder__bar,
  .section-ladder__current,
  .bit-ruler__bit,
  .tol-scale__band,
  .tol-scale__marker,
  .dof-band__zone,
  .dof-band__marker,
  .ground-figure [data-rods],
  .poe-line__fill,
  .poe-line__limit,
  .rtd-curve__point {
    transition-duration: 0s;
  }
}

/* ── The headline answer + the verdict in words ─────────────────────
   The one number the page exists to produce, sized so it reads as the
   answer rather than as row three of five. Colour never carries the
   verdict alone — the sentence below states it. ── */
.calc-answer {
  background-color: var(--color-bg);
  border: 1px solid var(--color-subtle);
  border-radius: 0.7em;
  margin-block-end: var(--block-space);
  padding: 0.9rem 1.1rem;
}

.calc-answer__label {
  color: var(--color-subtle-dark);
  display: block;
  font-size: 0.85rem;
}

.calc-answer__value {
  align-items: baseline;
  display: flex;
  gap: 0.35em;
  margin-block-start: 0.15rem;

  strong {
    color: var(--color-link);
    font-family: var(--font-display);
    font-size: clamp(1.9rem, 7vw, 2.4rem);
    font-variant-numeric: tabular-nums;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.05;
    /* Deliberately not transitioned: the verdict colour is settled on the very
       first paint, and easing into it reads as the page flashing. The digits
       change at the same moment anyway, so a hard switch is the readable one. */
  }

  .calc-copy {
    margin-inline-start: auto;
  }
}

.calc-answer__unit {
  color: var(--color-subtle-dark);
  font-size: 1rem;
}

.calc-answer[data-status="ok"] .calc-answer__value strong {
  color: var(--color-positive);
}

.calc-answer[data-status="warn"] .calc-answer__value strong {
  color: var(--color-negative);
}

.calc-verdict {
  align-items: flex-start;
  color: var(--color-subtle-dark);
  display: flex;
  font-size: 0.95rem;
  gap: 0.5em;
  line-height: 1.4;
  margin-block: calc(var(--block-space) * -0.5) var(--block-space);

  .icon {
    block-size: 1.15rem;
    inline-size: 1.15rem;
    margin-block-start: 0.05em;
  }
}

/* Both marks ship in the markup; the state picks one. Nothing shows until
   there is something to say. */
.calc-verdict__mark {
  display: none;
  flex-shrink: 0;
}

.calc-verdict[data-status="ok"] {
  color: var(--color-positive);

  .calc-verdict__mark--ok {
    display: inline-flex;
  }
}

.calc-verdict[data-status="warn"] {
  color: var(--color-negative);

  .calc-verdict__mark--warn {
    display: inline-flex;
  }
}

/* ── Results ───────────────────────────────────────────────────────── */
.calc-result {
  align-items: baseline;
  border-block-end: 1px solid var(--color-subtle);
  display: flex;
  gap: var(--block-space);
  justify-content: space-between;
  padding-block: 0.7rem;
}

.calc-result__label {
  color: var(--color-subtle-dark);
  font-size: 0.9rem;
}

.calc-result__value {
  align-items: baseline;
  display: inline-flex;
  gap: 0.3em;
  justify-content: flex-end;
  text-align: end;
  white-space: nowrap;

  strong {
    font-size: 1.1rem;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
  }
}

.calc-result__unit {
  color: var(--color-subtle-dark);
  font-size: 0.85rem;
}

/* On a narrow screen the label and the value fight over one line and both end
   up broken — worst on subnet, where every value is a whole address. Below that
   width the row reads top-to-bottom instead. */
@media (max-width: 480px) {
  .calc-result {
    display: block;
  }

  .calc-result__value {
    display: flex;
    justify-content: flex-start;
    margin-block-start: 0.15rem;
    text-align: start;
  }
}

.calc-result--primary .calc-result__value strong {
  color: var(--color-link);
  font-size: 1.5rem;
}

/* Verdict colouring (e.g. voltage drop vs the 5 % norm) — overrides the accent. */
.calc-result[data-status="ok"] .calc-result__value strong {
  color: var(--color-positive);
}

.calc-result[data-status="warn"] .calc-result__value strong {
  color: var(--color-negative);
}

.calc-copy {
  --btn-background: transparent;
  align-items: center;
  align-self: center;
  border: 0;
  color: var(--color-subtle-dark);
  cursor: pointer;
  display: inline-flex;
  padding: 0.2em;

  &:hover {
    color: var(--color-ink);
  }

  .icon {
    block-size: 1rem;
    inline-size: 1rem;
  }
}

.calc-copy__ok {
  display: none;
  color: var(--color-positive);
}

.calc-copy--done {
  color: var(--color-positive);

  .calc-copy__idle {
    display: none;
  }

  .calc-copy__ok {
    display: inline-flex;
  }
}

/* ── "?" term glossary: opens a native popover (top layer, never clips,
   dismissed via backdrop tap or Esc) — zero JS, one element. ──────────── */
.term-info {
  appearance: none;
  background: none;
  border: 1px solid var(--color-subtle);
  border-radius: 999px;
  color: var(--color-subtle-dark);
  cursor: pointer;
  font-size: 0.65rem;
  font-weight: 700;
  line-height: 1;
  margin-inline-start: 0.4em;
  padding: 0;
  text-align: center;
  vertical-align: middle;
  block-size: 1.15rem;
  inline-size: 1.15rem;

  @media (any-hover: hover) {
    &:hover {
      border-color: var(--color-subtle-dark);
      color: var(--color-ink);
    }
  }
}

.term-info__pop {
  background-color: var(--color-subtle-light);
  border: 1px solid var(--color-subtle);
  border-radius: 0.7em;
  box-shadow:
    0 12px 32px -8px oklch(var(--lch-always-black) / 0.5),
    0 4px 8px -4px oklch(var(--lch-always-black) / 0.4);
  color: var(--color-ink);
  font-size: 0.95rem;
  line-height: 1.5;
  margin: auto;
  max-inline-size: min(26rem, calc(100vw - 2rem));
  padding: var(--block-space) 1.1rem;

  &::backdrop {
    background-color: oklch(var(--lch-always-black) / 0.45);
  }
}

/* ── "Как считается": the substance under the tool ──────────────────
   A calculator page is otherwise almost text-free, which is exactly what
   makes it indistinguishable from a calculator farm. This is where the
   difference lives, so it reads as prose, not as a footnote. ── */
.calc-method {
  margin-block: var(--block-space-double);
}

.calc-method__title {
  font-size: 1.15rem;
  font-weight: 700;
  margin-block: 0 var(--block-space);
}

.calc-method__steps {
  color: var(--color-ink);
  display: grid;
  gap: 0.7rem;
  line-height: 1.55;
  margin-block: 0;
  padding-inline-start: 1.4rem;

  li::marker {
    color: var(--color-subtle-dark);
    font-variant-numeric: tabular-nums;
  }
}

.calc-method__example {
  background-color: var(--color-subtle-light);
  border-inline-start: 2px solid var(--color-subtle);
  border-radius: 0 0.5em 0.5em 0;
  line-height: 1.55;
  margin-block: var(--block-space) 0;
  padding: 0.85rem 1.1rem;
}

.calc-method__example-label {
  color: var(--color-subtle-dark);
  font-weight: 700;
  margin-inline-end: 0.4em;
}

/* Normative tables — wide by nature, so they scroll inside themselves and
   never push the page sideways. */
.calc-table {
  margin-block: var(--block-space-double) 0;
  margin-inline: 0;
}

.calc-table__caption {
  color: var(--color-subtle-dark);
  font-size: 0.85rem;
  margin-block-end: var(--block-space-half);
}

.calc-table__scroll {
  overflow-x: auto;

  table {
    border-collapse: collapse;
    font-variant-numeric: tabular-nums;
    inline-size: 100%;
    min-inline-size: 30rem;
  }

  th,
  td {
    border-block-end: 1px solid var(--color-subtle);
    padding: 0.45rem 0.7rem;
    text-align: end;
  }

  thead th {
    color: var(--color-subtle-dark);
    font-size: 0.8rem;
    font-weight: 600;
  }

  tbody th {
    color: var(--color-ink);
    font-weight: 700;
    text-align: start;
  }

  tbody tr:hover {
    background-color: var(--color-subtle-light);
  }
}

/* ── Below the panel: source, disclaimer, lesson link ──────────────── */
.calc-norm {
  align-items: flex-start;
  color: var(--color-subtle-dark);
  display: flex;
  font-size: 0.9rem;
  gap: 0.5em;
  margin-block: 1.25rem;

  .icon {
    block-size: 1.1rem;
    flex-shrink: 0;
    inline-size: 1.1rem;
    margin-block-start: 0.1em;
  }
}

.calc-disclaimer {
  margin-block: 1.5rem;
}

.calc-lesson-link {
  display: block;
  margin-block: 1.5rem;
}

.calc-lesson-link__eyebrow {
  color: var(--color-subtle-dark);
  display: block;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  margin-block-end: 0.4rem;
  text-transform: uppercase;
}

.calc-lesson-link__title {
  align-items: center;
  color: var(--color-ink);
  display: flex;
  font-weight: 600;
  gap: 0.5em;

  .icon {
    block-size: 1rem;
    inline-size: 1rem;
  }
}

.calc-back {
  margin-block-start: var(--block-space-double);

  a {
    align-items: center;
    display: inline-flex;
    gap: 0.4em;
  }

  .icon {
    block-size: 1rem;
    inline-size: 1rem;
  }
}