/*
  Inter, a variable font: one file per alphabet holds every weight from 100 to 900.
  The browser downloads only the alphabets a page actually uses.
  Files: web/static/fonts, from @fontsource-variable/inter 5.3.0 (SIL Open Font License).
*/
@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/static/fonts/inter-cyrillic-wght-normal.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/static/fonts/inter-greek-wght-normal.woff2") format("woff2");
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}

@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/static/fonts/inter-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308,
    U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/*
  All colors of the site are defined here, and only here.
  The rest of the file refers to them as var(--name).
  Transparent tints are mixed from these colors with color-mix(),
  for example color-mix(in srgb, var(--success) 12%, transparent) is the success green at 12%.
*/
:root {
  /* Light parts: page, panels, form */
  --bg: #f5f4f1;
  --surface: #ffffff;
  --surface-soft: #f0efeb;
  --border: #deddd8;
  --border-strong: #cfd0cc; /* input borders */
  --border-hover: #aeb0ab; /* input borders on hover */
  --text: #1b1c1d;
  --text-soft: #555652;
  --muted: #70716f;
  --disabled: #a1a3a0;

  /* Accent */
  --accent: #c7652b;
  --accent-dark: #a94f20; /* for text: readable on white */

  /* Dark parts: result card, footer, logo */
  --dark: #191b1e;
  --dark-raised: #2d3034;
  --dark-border: #363a40;
  --dark-text: #ffffff;
  --dark-muted: #aeb2b8;
  --dark-subtle: #858b93;

  /* Status */
  --success: #3d8b62;
  --success-light: #a8dfba; /* success text on dark */
  --warning: #d69a2d;
  --danger: #c84b4b;
  --danger-light: #ffaaaa; /* danger text on dark */

  --focus-ring: color-mix(in srgb, var(--accent) 35%, transparent);

  /* Corners */
  --radius: 4px; /* panels and cards */
  --radius-control: 6px; /* inputs and small boxes */
}

* {
  box-sizing: border-box;
}

/* Dark behind the page: this colour shows when the browser bounces past
   the top or the bottom, so it matches the dark header and footer.
   The page itself keeps the light background (body). */
html {
  scroll-behavior: smooth;
  background: var(--dark);
}

/* Subscripts (N_ult, γ_c…) would otherwise make their line a few pixels taller */
sub,
sup {
  line-height: 0;
}

/* At least as tall as the window: on a short page the footer sits at the bottom
   and the light page background fills the space above it */
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family:
    Inter,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  line-height: 1.5;
}

/* The page content grows to push the footer down (see body) */
main {
  flex: 1 0 auto;
}

button,
input,
select {
  font: inherit;
}

button,
select,
input {
  outline: none;
}

button:focus-visible,
select:focus-visible,
input:focus-visible,
summary:focus-visible,
a:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}

.container {
  width: min(1180px, calc(100% - 40px));
  margin: 0 auto;
}

/* HEADER */

/* Dark, like the footer and the result card */
.site-header {
  background: var(--dark);
}

.header-inner {
  min-height: 68px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.brand {
  color: var(--dark-text);
  text-decoration: none;
  font-size: 20px;
  font-weight: 750;
  letter-spacing: -0.03em;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.brand-logo {
  width: 40px;
  height: 40px;
  object-fit: contain;
}

.nav {
  display: flex;
  gap: 28px;
}

.nav a {
  padding: 6px 0;
  color: var(--dark-muted);
  text-decoration: none;
  font-size: 14px;
  font-weight: 550;
}

.nav a:hover {
  color: var(--dark-text);
}

/* The section of the current page: set by the script in header.html */
.nav a[aria-current] {
  color: var(--dark-text);
  box-shadow: inset 0 -2px 0 var(--accent);
}

/* Menu button: three lines, shown only on narrow screens */
.nav-toggle {
  display: none;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--dark-border);
  border-radius: var(--radius-control);
  background: transparent;
  cursor: pointer;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.nav-toggle span {
  width: 18px;
  height: 2px;
  background: var(--dark-text);
  border-radius: 1px;
}

/* HERO */

.hero {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

.hero-inner {
  padding: 28px 0 32px;
}

.eyebrow {
  color: var(--accent-dark);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin: 0 0 10px;
}

/* Over a section that repeats the hero layout: written like the breadcrumbs */
.eyebrow-plain {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

.hero h1 {
  max-width: 960px;
  margin: 0;
  font-size: clamp(32px, 3.5vw, 46px);
  line-height: 1.12;
  letter-spacing: -0.035em;
  font-weight: 720;
}

.hero-description {
  max-width: 760px;
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.5;
}

.breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 10px;
  color: var(--muted);
  font-size: 12px;
}

.breadcrumbs a {
  color: var(--accent-dark);
  font-weight: 600;
  text-decoration: none;
}

.breadcrumbs a:hover {
  text-decoration: underline;
}

/* HOME: CALCULATOR CATALOG */

.catalog-section {
  padding: 32px 0 8px;
}

.catalog-section:last-of-type {
  padding-bottom: 48px;
}

.catalog-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 16px;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}

.catalog-heading h2 {
  margin: 0;
  font-size: 24px;
  line-height: 1.2;
  letter-spacing: -0.03em;
}

.catalog-standard {
  color: var(--muted);
  font-size: 13px;
}

.catalog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}

.catalog-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  text-decoration: none;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}

.catalog-card:hover {
  border-color: var(--accent);
  box-shadow: 0 2px 10px color-mix(in srgb, var(--dark) 6%, transparent);
}

.catalog-card-tag {
  align-self: flex-start;
  padding: 3px 8px;
  background: var(--surface-soft);
  border-radius: var(--radius);
  color: var(--muted);
  font-size: 11px;
  font-weight: 650;
}

.catalog-card h3 {
  margin: 0;
  font-size: 18px;
  line-height: 1.25;
  letter-spacing: -0.02em;
}

.catalog-card p {
  flex: 1;
  margin: 0;
  color: var(--muted);
  font-size: 14px;
}

.catalog-card-link {
  color: var(--accent-dark);
  font-size: 13px;
  font-weight: 650;
}

.catalog-empty {
  padding: 20px;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius);
  color: var(--muted);
  font-size: 14px;
}

/* INPUT FORM */

.calculator-section {
  padding: 24px 0 24px;
}

.calculator-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: 16px;
  align-items: start;
}

.calculator-form {
  min-width: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
}

.form-section {
  padding: 0 0 16px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--border);
}

.form-section:last-of-type {
  padding-bottom: 0;
  margin-bottom: 0;
  border-bottom: none;
}

.section-heading {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 16px;
}

.section-number {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: var(--radius-control);
  background: var(--surface-soft);
  color: var(--text-soft);
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 800;
}

.section-heading h2 {
  margin: 0;
  font-size: 18px;
  line-height: 1.2;
  letter-spacing: -0.025em;
}

/* FIELDS */

.field {
  margin-bottom: 16px;
}

.field:last-child {
  margin-bottom: 0;
}

/* Label row: the label and an optional "?" hint button */
/* Plain text flow, so "?" follows the last word even when the label wraps */
.field-heading {
  position: relative;
  margin-bottom: 6px;
}

/* Labels and the values in the fields have the same size;
   labels are told apart by weight (550 against 400) */
.field-heading label {
  font-size: 14px;
  font-weight: 550;
}

.field-info {
  position: relative;
  width: 15px;
  height: 15px;
  margin-left: 3px; /* plus the space after the label: about 7px in total */
  padding: 0;
  background: transparent;
  border: 1px solid var(--border-hover);
  border-radius: 50%;
  display: inline-grid;
  place-items: center;
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  cursor: help;
  flex: 0 0 auto;
}

/* An invisible larger area around "?", so it is easy to tap with a finger */
.field-info::after {
  content: "";
  position: absolute;
  inset: -10px;
}

/* Hint text: opens on click or tap (fields.js), and on mouse hover */
.field-tip {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 10;
  max-width: min(320px, 100%);
  padding: 10px 12px;
  background: var(--dark);
  color: var(--dark-text);
  border-radius: var(--radius-control);
  box-shadow: 0 4px 14px color-mix(in srgb, var(--dark) 20%, transparent);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.45;
}

.field-heading.hint-open .field-tip {
  display: block;
}

@media (hover: hover) {
  .field-info:hover + .field-tip {
    display: block;
  }
}

.field-control {
  width: 100%;
}

/* Error message under a field (added by fields.js) */
.field-warning {
  margin: 6px 0 0;
  color: var(--danger);
  font-size: 12px;
}

/* INPUT CONTROLS */

select,
input[type="number"],
input[type="text"] {
  width: 100%;
  min-height: 38px;
  padding: 0 11px;
  font-size: 14px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-control);
  color: var(--text);
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}

select:hover,
input[type="number"]:hover,
input[type="text"]:hover {
  border-color: var(--border-hover);
}

select:focus,
input[type="number"]:focus,
input[type="text"]:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 12%, transparent);
}

select[aria-invalid="true"],
input[aria-invalid="true"] {
  border-color: var(--danger);
}

select[aria-invalid="true"]:focus,
input[aria-invalid="true"]:focus {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--danger) 12%, transparent);
}

select:disabled {
  color: var(--disabled);
  background: var(--surface-soft);
}

.input-with-unit {
  position: relative;
}

.input-with-unit select,
.input-with-unit input {
  padding-right: 48px;
}

.unit {
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted);
  font-size: 13px;
  pointer-events: none;
}

/* RESULT */

.result-column {
  position: sticky;
  top: 24px;
}

.result-card {
  background: var(--dark);
  color: var(--dark-text);
  border: 1px solid transparent;
  border-radius: var(--radius);
  padding: clamp(22px, 3vw, 32px);
  transition: border-color 0.2s ease;
}

/* While a slow answer is awaited (over 0.3 s): fade the contents, keep the size */
.result-card .result-summary,
.result-card .checks {
  transition: opacity 0.2s ease;
}

.result-card.is-updating .result-summary,
.result-card.is-updating .checks {
  opacity: 0.5;
}

.result-card.result-error {
  border-color: color-mix(in srgb, var(--danger) 70%, transparent);
}

/* Summary: gauge on the left, verdict and key values on the right */

.result-summary {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  gap: 28px;
  align-items: center;
}

.result-overview {
  min-width: 0;
}

/* Optional scheme picture in the top right corner (ResultSummary.Scheme) */
.result-summary.has-scheme {
  grid-template-columns: 132px minmax(0, 1fr) minmax(0, 220px);
}

.result-scheme {
  display: block;
  width: 100%;
  height: auto;
}

/* Next to a scheme the text column is narrow: the governing check goes
   on its own line under the label and may wrap, instead of being cut off */
.has-scheme .governing {
  white-space: normal;
}

.has-scheme .governing b {
  display: block;
  margin-top: 2px;
}

.verdict {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: var(--radius-control);
  font-size: 14px;
  font-weight: 650;
}

.verdict-pass {
  background: color-mix(in srgb, var(--success) 14%, transparent);
  color: var(--success-light);
}

.verdict-fail {
  background: color-mix(in srgb, var(--danger) 16%, transparent);
  color: var(--danger-light);
}

.verdict-waiting {
  background: var(--dark-raised);
  color: var(--dark-muted);
  font-weight: 500;
}

/* Input and connection errors take the verdict's place */
.verdict-error {
  background: color-mix(in srgb, var(--danger) 16%, transparent);
  color: var(--danger-light);
}

/* Always one line, so a long check name never changes the card's height;
   the full name is in the list of checks below */
.governing {
  margin-top: 12px;
  overflow: hidden;
  color: var(--dark-muted);
  font-size: 13px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.governing b {
  color: var(--dark-text);
  font-weight: 550;
}

.key-values {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 28px;
  margin-top: 16px;
}

.key-label {
  color: var(--dark-subtle);
  font-size: 12px;
}

.key-number {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.key-number small {
  color: var(--dark-muted);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0;
}

/* "Nult =" before the value: same size, lighter, so the number stays the focus */
.key-symbol {
  color: var(--dark-muted);
  font-weight: 500;
}

.key-symbol sub {
  font-size: 0.6em;
}

.result-divider {
  height: 1px;
  background: var(--dark-border);
  margin: 24px 0 18px;
}

/* Gauge: the highest utilization among all checks */

.utilization-gauge {
  position: relative;
  width: 132px;
  aspect-ratio: 1;
}

.gauge-svg {
  display: block;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.gauge-track,
.gauge-progress {
  fill: none;
  stroke-width: 9;
}

.gauge-track {
  stroke: var(--dark-border);
}

.gauge-progress {
  stroke: var(--dark-subtle);
  stroke-linecap: round;
  transition:
    stroke-dashoffset 0.4s ease,
    stroke 0.2s ease;
}

.gauge-progress.gauge-low {
  stroke: var(--dark-subtle);
}

.gauge-progress.gauge-good {
  stroke: var(--success);
}

.gauge-progress.gauge-warning {
  stroke: var(--warning);
}

.gauge-progress.gauge-danger {
  stroke: var(--danger);
}

.gauge-value {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* Sized so that "123,0%" fits inside the ring with some air.
   Longer text is scaled down by --gauge-text-scale (set by the server, see GaugeTextScale). */
.gauge-value strong {
  font-size: calc(23px * var(--gauge-text-scale, 1));
  line-height: 1;
  font-weight: 720;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

/* Checks: one row with a bar per check; bar colours follow the gauge */

.checks-title {
  margin-bottom: 6px;
  color: var(--dark-muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.07em;
}

.check-item {
  padding: 12px 0;
  border-top: 1px solid var(--dark-raised);
}

.check-item:first-child {
  border-top: 0;
}

.check-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
}

.check-name {
  font-size: 14px;
  font-weight: 550;
}

.check-clause {
  margin-left: 6px;
  color: var(--dark-subtle);
  font-size: 12px;
  font-weight: 400;
}

.check-percent {
  flex: 0 0 auto;
  font-size: 14px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}

.check-percent.level-warning {
  color: var(--warning);
}

.check-percent.level-danger {
  color: var(--danger-light);
}

.check-condition {
  margin-top: 3px;
  color: var(--dark-muted);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.check-bar {
  height: 6px;
  margin-top: 8px;
  background: var(--dark-border);
  border-radius: 3px;
  overflow: hidden;
}

.check-fill {
  height: 100%;
  background: var(--dark-subtle);
  border-radius: 3px;
  transition:
    width 0.4s ease,
    background 0.2s ease;
}

.check-fill.level-good {
  background: var(--success);
}

.check-fill.level-warning {
  background: var(--warning);
}

.check-fill.level-danger {
  background: var(--danger);
}

/* FACTORS */

.live-factors {
  margin-top: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

/* A table: the value and unit columns take the width of their widest entry,
   so every row stays aligned whatever the numbers and units are */
.parameters-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.parameters-table td {
  padding: 11px 0;
  border-top: 1px solid var(--border);
  vertical-align: baseline;
}

.parameters-table .parameter-label {
  padding-left: 22px;
  padding-right: 16px;
  color: var(--muted);
}

.parameters-table .parameter-value {
  color: var(--text);
  font-weight: 680;
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

.parameters-table .parameter-unit {
  padding-left: 8px;
  padding-right: 22px;
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
}

/* Collapsible panel heading (Расчетные параметры) */

.live-factors summary {
  min-height: 58px;
  padding: 0 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  list-style: none;
  font-size: 14px;
  font-weight: 680;
}

.live-factors summary::-webkit-details-marker {
  display: none;
}

.details-arrow {
  color: var(--muted);
  font-size: 20px;
  font-weight: 400;
}

.live-factors[open] .details-arrow {
  transform: rotate(45deg);
}

/* STEPS: «Порядок расчета» under the calculator, like a calculation sheet */

/* No bottom padding: the last step's own spacing leads straight into the footer */
.steps-section {
  background: var(--surface);
  border-top: 1px solid var(--border);
  padding: 40px 0 0;
}

.steps-section h2 {
  margin: 0;
  font-size: 30px;
  line-height: 1.15;
  letter-spacing: -0.03em;
}

.steps-intro {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 32px;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--border);
}

.steps-intro p {
  margin: 16px 0 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.6;
}

.steps-intro h3 {
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 650;
}

.steps-intro ul {
  margin: 0;
  padding-left: 18px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
}

.steps {
  margin: 0;
  padding: 0;
  list-style: none;
}

.step {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 16px;
  padding: 24px 0;
  border-bottom: 1px solid var(--border);
}

.step:last-child {
  border-bottom: 0;
}

.step-body {
  min-width: 0;
}

.step-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 12px;
  min-height: 30px;
}

.step-head h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 650;
  letter-spacing: -0.01em;
}

.step-clause {
  padding: 2px 8px;
  background: var(--surface-soft);
  border-radius: var(--radius);
  color: var(--muted);
  font-size: 11px;
  font-weight: 650;
}

/* One line per equation: formula = numbers = result; long lines wrap */
.step-equations {
  display: inline-flex;
  flex-direction: column;
  gap: 8px;
  max-width: 100%;
  margin-top: 12px;
  padding: 12px 16px;
  background: var(--surface-soft);
  border-radius: var(--radius-control);
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}

.step-equation b {
  color: var(--accent-dark);
  font-weight: 700;
}

.step-note {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 13px;
}

/* FOOTER */

.site-footer {
  background: var(--dark);
  color: var(--dark-muted);
  border-top: 1px solid var(--dark-raised);
}

.footer-inner {
  padding: 24px 0 22px;
}

.footer-main {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr 1.3fr;
  gap: 48px;
  padding-bottom: 24px;
}

.footer-brand {
  min-width: 0;
}

.footer-brand p {
  max-width: 260px;
  margin: 12px 0 0;
  color: var(--dark-subtle);
  font-size: 12px;
  line-height: 1.5;
}

.footer-column {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 9px;
}

.footer-column h3 {
  margin: 0 0 5px;
  color: var(--dark-muted);
  font-size: 11px;
  font-weight: 750;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.footer-column a {
  color: var(--dark-subtle);
  font-size: 12px;
  line-height: 1.4;
  text-decoration: none;
  transition: color 0.15s ease;
}

.footer-column a:hover {
  color: var(--dark-text);
}

.footer-column a[href^="mailto:"] {
  color: var(--dark-muted);
}

.footer-column a[href^="mailto:"]:hover {
  color: var(--accent);
}

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 18px;
  border-top: 1px solid var(--dark-raised);
  color: var(--dark-subtle);
  font-size: 11px;
}

/* FEEDBACK: bug button in the bottom-right corner and its form */

.feedback {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
}

/* Same size as the logo tile in the header */
.feedback-button {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  padding: 0;
  background: var(--dark);
  color: var(--dark-text);
  border: 1px solid var(--dark-border);
  border-radius: var(--radius-control);
  box-shadow: 0 4px 14px color-mix(in srgb, var(--dark) 25%, transparent);
  cursor: pointer;
  transition: background 0.15s ease;
}

.feedback-button:hover,
.feedback-button[aria-expanded="true"] {
  background: var(--dark-raised);
}

.feedback-panel {
  width: 340px;
  padding: 18px 20px 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 8px 28px color-mix(in srgb, var(--dark) 18%, transparent);
}

.feedback-panel[hidden] {
  display: none;
}

.feedback-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.feedback-header h2 {
  margin: 0;
  font-size: 16px;
  line-height: 1.3;
  letter-spacing: -0.02em;
}

.feedback-close {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  margin: -4px -6px 0 0;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: var(--radius-control);
  color: var(--muted);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

.feedback-close:hover {
  color: var(--text);
  background: var(--surface-soft);
}

.feedback-form label {
  display: block;
  margin-bottom: 6px;
  color: var(--muted);
  font-size: 13px;
}

.feedback-form textarea {
  display: block;
  width: 100%;
  min-height: 110px;
  padding: 9px 11px;
  resize: vertical;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-control);
  color: var(--text);
  font: inherit;
  font-size: 14px;
  line-height: 1.45;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}

.feedback-form textarea:hover {
  border-color: var(--border-hover);
}

.feedback-form textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 12%, transparent);
}

/* Spam trap: out of sight for people, see internal/feedback/feedback.go */
.feedback-trap {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.feedback-note {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 12px;
}

.feedback-status {
  min-height: 18px;
  margin: 8px 0;
  font-size: 13px;
}

.feedback-status.is-error {
  color: var(--danger);
}

.feedback-status.is-success {
  color: var(--success);
}

.feedback-submit {
  width: 100%;
  min-height: 40px;
  background: var(--accent-dark);
  color: var(--dark-text);
  border: 0;
  border-radius: var(--radius-control);
  font-weight: 650;
  cursor: pointer;
  transition: background 0.15s ease;
}

.feedback-submit:hover {
  background: var(--accent);
}

.feedback-submit:disabled {
  background: var(--disabled);
  cursor: default;
}

/* UNIT CONVERTER (calculators/units/page.html) */

/* Links to the other quantities, under the page heading: an even grid, so a line
   that does not fit never leaves one tab alone on the next (11 tabs: 6 + 5) */
.units-switcher {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
  margin-top: 20px;
}

.units-switcher a {
  padding: 6px 10px;
  text-align: center;
  border: 1px solid var(--border);
  border-radius: var(--radius-control);
  color: var(--text-soft);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: border-color 0.15s ease;
}

.units-switcher a:hover {
  border-color: var(--accent);
}

.units-switcher a[aria-current] {
  background: var(--dark);
  border-color: var(--dark);
  color: var(--dark-text);
}

.units-result {
  max-width: 820px;
  margin: 0 auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.units-table {
  width: 100%;
  border-collapse: collapse;
}

.units-table td {
  padding: 10px 0;
  border-top: 1px solid var(--border);
  vertical-align: middle;
}

.units-table tr:first-child td {
  border-top: 0;
}

.units-number {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* A field for every unit (units.js fills the others while one is typed in) */
.units-table .units-value-cell {
  width: 1%;
  padding-left: 16px;
  padding-right: 12px;
}

.units-table input.units-input {
  width: 260px;
  min-height: 42px;
  font-size: 17px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* = 9,80665·10⁻⁶ under a very small or very large value */
.units-power {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
  text-align: right;
  white-space: nowrap;
}

.units-power:empty {
  display: none;
}

.units-value-cell .field-warning {
  text-align: right;
}

/* Symbols take the width of their widest entry, the name the rest */
.units-table .units-symbol {
  width: 1%;
  padding-right: 20px;
  font-size: 15px;
  font-weight: 650;
  white-space: nowrap;
}

.units-symbol label {
  cursor: pointer;
}

.units-name {
  color: var(--muted);
  font-size: 13px;
}

.units-table .units-copy-cell {
  padding-right: 16px;
  text-align: right;
  white-space: nowrap;
}

.units-paste {
  margin-right: 6px;
}

.units-paste,
.units-copy {
  padding: 4px 8px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-control);
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}

.units-paste:hover,
.units-copy:hover:not(:disabled) {
  border-color: var(--accent);
  color: var(--accent-dark);
}

.units-copy:disabled {
  visibility: hidden;
}

.units-copy.is-done {
  border-color: var(--success);
  color: var(--success);
}

.units-paste.is-empty {
  border-color: var(--danger);
  color: var(--danger);
}

/* The unit the value was entered in */
.units-table tr.is-from td {
  background: color-mix(in srgb, var(--accent) 7%, transparent);
}

.units-table tr.is-from .units-symbol {
  color: var(--accent-dark);
}

.units-reference {
  padding-bottom: 40px;
}

.units-reference .steps-intro {
  padding-bottom: 0;
  border-bottom: 0;
}

.units-relations {
  margin-top: 16px;
  border-collapse: collapse;
  font-size: 15px;
}

.units-relations td {
  padding: 4px 8px 4px 0;
  white-space: nowrap;
}

/* RESPONSIVE */

@media (max-width: 900px) {
  .calculator-layout {
    grid-template-columns: 1fr;
  }

  .result-column {
    position: static;
  }

  .steps-intro {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  /* 11 tabs: 4 + 4 + 3 */
  .units-switcher {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .container {
    width: min(100% - 24px, 1180px);
  }

  .header-inner {
    flex-wrap: wrap;
  }

  /* iPhones zoom into any field with text under 16px when it is tapped,
     so on phones the fields and their labels are 16px */
  .field-heading label,
  select,
  input[type="number"],
  input[type="text"],
  .feedback-form textarea {
    font-size: 16px;
  }

  .feedback {
    right: 12px;
    bottom: 12px;
  }

  /* On a phone the form takes the screen width, 12px from each edge */
  .feedback-panel {
    width: calc(100vw - 24px);
  }

  .nav-toggle {
    display: flex;
  }

  .nav {
    display: none;
    width: 100%;
    flex-direction: column;
    gap: 0;
    padding-bottom: 8px;
  }

  .site-header.nav-open .nav {
    display: flex;
  }

  .nav a {
    padding: 12px 0;
    border-top: 1px solid var(--dark-border);
    font-size: 15px;
  }

  /* In the phone menu the current section is marked on the left */
  .nav a[aria-current] {
    padding-left: 12px;
    box-shadow: inset 2px 0 0 var(--accent);
  }

  .hero h1 {
    font-size: 40px;
  }

  .hero-description {
    font-size: 16px;
  }

  .steps-section {
    padding: 32px 0 0;
  }

  .steps-section h2 {
    font-size: 26px;
  }

  .step {
    gap: 12px;
  }

  .step-equations {
    font-size: 14px;
  }

  /* On a phone the unit names are left out: the symbols are enough */
  .units-name {
    display: none;
  }

  .units-table .units-symbol {
    width: auto;
  }

  /* The quantities scroll sideways instead of taking half the screen */
  .units-switcher {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    margin-right: -12px;
    padding-right: 12px;
    scrollbar-width: none;
  }

  .units-switcher a {
    flex: 0 0 auto;
  }

  .units-table .units-value-cell {
    width: auto;
    padding-left: 12px;
  }

  .units-table input.units-input {
    width: 100%;
    font-size: 16px; /* from 16px phones do not zoom in on the field */
  }

  /* «Вставить» above «Копировать», so the field keeps its width */
  .units-table .units-copy-cell {
    width: 1%;
    padding-right: 12px;
  }

  .units-paste,
  .units-copy {
    display: block;
    width: 100%;
  }

  .units-paste {
    margin: 0 0 4px;
  }

  .units-paste[hidden],
  .units-copy[hidden] {
    display: none;
  }

  .footer-main {
    grid-template-columns: 1fr 1fr;
    gap: 32px 24px;
  }

  .footer-brand {
    grid-column: 1 / -1;
  }

  .result-card {
    padding: 22px 18px;
  }

  /* On a phone: gauge and key values on the first row, then the verdict
     and the governing check across the full width, so badges never wrap
     and the card keeps one size in every state */
  .result-summary {
    grid-template-columns: 112px minmax(0, 1fr);
    grid-template-areas:
      "gauge keys"
      "verdict verdict"
      "governing governing";
    gap: 14px 16px;
  }

  /* The scheme picture goes under everything, across the full width */
  .result-summary.has-scheme {
    grid-template-columns: 112px minmax(0, 1fr);
    grid-template-areas:
      "gauge keys"
      "verdict verdict"
      "governing governing"
      "scheme scheme";
  }

  .result-scheme {
    grid-area: scheme;
    max-width: 300px;
    margin: 4px auto 0;
  }

  .result-overview {
    display: contents;
  }

  .utilization-gauge {
    grid-area: gauge;
    width: 112px;
  }

  #result-verdict {
    grid-area: verdict;
  }

  .governing {
    grid-area: governing;
    margin-top: -6px;
  }

  .key-values {
    grid-area: keys;
    margin-top: 0;
  }

  .gauge-value strong {
    font-size: calc(19px * var(--gauge-text-scale, 1));
  }

  .key-number {
    font-size: 20px;
  }
}

/* ERROR PAGES: 404 and 500 (pages/error.html) */

.error-page {
  padding: 72px 0 96px;
}

.error-page h1 {
  margin: 0;
  font-size: clamp(30px, 3vw, 42px);
  line-height: 1.2;
  letter-spacing: -0.025em;
}

.error-page p {
  max-width: 560px;
  margin: 12px 0 28px;
  color: var(--muted);
  font-size: 16px;
}

.error-home {
  display: inline-block;
  padding: 10px 18px;
  background: var(--accent-dark);
  border-radius: var(--radius-control);
  color: var(--dark-text);
  font-size: 14px;
  font-weight: 650;
  text-decoration: none;
}

.error-home:hover {
  background: var(--accent);
}

/* LEGAL PAGES */

.legal-page {
  padding: 40px 0 72px;
}

.legal-page h1 {
  max-width: 900px;
  margin: 0 0 12px;
  font-size: clamp(30px, 3vw, 42px);
  line-height: 1.2;
  letter-spacing: -0.025em;
}

.legal-updated {
  margin: 0 0 32px;
  color: var(--muted);
  font-size: 14px;
}

.legal-content {
  max-width: 850px;
  line-height: 1.75;
  color: var(--text);
}

.legal-content h2 {
  margin: 32px 0 12px;
  font-size: 22px;
  line-height: 1.35;
}

.legal-content p {
  margin: 0 0 16px;
}

.legal-content ul,
.legal-content ol {
  margin: 0 0 20px;
  padding-left: 24px;
}

.legal-content li {
  margin-bottom: 8px;
}

.legal-content a {
  color: var(--accent-dark);
}

/* ADMIN: feedback messages (/admin/feedback) */

.feedback-list {
  max-width: 850px;
  border-top: 1px solid var(--border);
}

.feedback-item {
  padding: 16px 0;
  border-bottom: 1px solid var(--border);
}

.feedback-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  color: var(--muted);
  font-size: 13px;
}

.feedback-meta a {
  color: var(--accent-dark);
}

.feedback-text {
  margin: 6px 0 0;
  white-space: pre-wrap; /* keep the line breaks the visitor typed */
  overflow-wrap: anywhere;
}