/* ===== Калькулятор металла (kalkulyator-metalla.html) =====
   Все правила ограничены префиксом .mc- / .metal-calc, цвета — переменные сайта,
   поэтому страница работает и в светлой, и в тёмной теме. */

.mc-hero {
  padding-top: calc(72px + var(--space-16));
  padding-bottom: var(--space-12);
  background: var(--color-surface-offset);
  border-bottom: 1px solid var(--color-divider);
}
.mc-hero h1 { font-size: var(--text-2xl); max-width: 20ch; }
.mc-hero .lede { margin-top: var(--space-4); max-width: 60ch; }

.mc-crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
  font-size: var(--text-xs);
  color: var(--color-text-faint);
}
.mc-crumbs a { color: var(--color-text-muted); text-decoration: none; }
.mc-crumbs a:hover { color: var(--color-steel); }

.mc-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  align-items: start;
}
@media (min-width: 1000px) {
  .mc-layout { grid-template-columns: minmax(0, 1fr) 360px; }
}

.mc-card {
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-lg);
  padding: clamp(var(--space-5), 3vw, var(--space-8));
  box-shadow: var(--shadow-sm);
}
.mc-card h2 { font-size: var(--text-lg); margin-bottom: var(--space-6); }
.mc-card h3 { font-size: var(--text-base); margin-bottom: var(--space-3); }
.mc-card p { font-size: var(--text-sm); }

.mc-row,
.mc-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4) var(--space-5);
  margin-bottom: var(--space-4);
}
.mc-fields { margin-bottom: var(--space-6); }
.mc-fields:empty { display: none; }
.mc-fields .full { grid-column: 1 / -1; }

.metal-calc label {
  display: block;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text);
}
.metal-calc input,
.metal-calc select {
  display: block;
  width: 100%;
  min-height: 48px;
  margin-top: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-2);
  color: var(--color-text);
  font: inherit;
  font-size: var(--text-base);
  font-weight: 400;
  transition: border-color var(--transition-interactive), box-shadow var(--transition-interactive);
}
.metal-calc input::placeholder { color: var(--color-text-faint); }
.metal-calc input:focus,
.metal-calc select:focus {
  outline: none;
  border-color: var(--color-steel);
  box-shadow: 0 0 0 3px oklch(from var(--color-steel) l c h / 0.16);
}
.metal-calc input[aria-invalid="true"] { border-color: var(--color-error); }

.mc-result {
  margin-top: var(--space-6);
  padding: var(--space-5);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-md);
  background: var(--color-surface-offset);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.mc-result.is-error {
  border-color: oklch(from var(--color-error) l c h / 0.35);
  background: var(--color-error-highlight);
  color: var(--color-error);
}
.mc-result dl {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-3) var(--space-6);
  align-items: baseline;
}
.mc-result dt { color: var(--color-text-muted); }
.mc-result dd {
  margin: 0;
  text-align: right;
  font-weight: 650;
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.mc-result dt.mc-main { color: var(--color-text); font-weight: 600; }
.mc-result dd.mc-main { font-size: var(--text-lg); font-family: var(--font-display); }
.mc-result-note { margin-top: var(--space-4); font-size: var(--text-xs); color: var(--color-text-faint); }

.mc-note { margin-top: var(--space-4); font-size: var(--text-xs) !important; color: var(--color-text-faint); }

.mc-aside { display: flex; flex-direction: column; gap: var(--space-6); }
.mc-formula-name { font-weight: 600; color: var(--color-text); }
.mc-aside .formula { white-space: normal; overflow-wrap: anywhere; line-height: 1.6; padding-inline: var(--space-4); }
.mc-cta-card .btn + .btn { margin-top: var(--space-3); }
.mc-cta-card p { margin-bottom: var(--space-5); }

.mc-seo { border-top: 1px solid var(--color-divider); }
.mc-text { max-width: 820px; }
.mc-text > h2 { font-size: var(--text-xl); }
.mc-text > p { margin-top: var(--space-4); max-width: 76ch; }
.mc-text > h3 { margin-top: var(--space-10); font-size: var(--text-lg); }

.mc-table-wrap { margin-top: var(--space-4); overflow-x: auto; }
.mc-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}
.mc-table-short { max-width: 420px; }
.mc-table th,
.mc-table td {
  padding: var(--space-3) var(--space-4) var(--space-3) 0;
  border-bottom: 1px solid var(--color-divider);
  text-align: left;
  vertical-align: top;
}
.mc-table th { color: var(--color-text); font-weight: 600; }
.mc-table td { color: var(--color-text-muted); }
.mc-table td:first-child { color: var(--color-text); font-weight: 500; white-space: nowrap; }

@media (max-width: 640px) {
  .mc-row,
  .mc-fields { grid-template-columns: 1fr; }
  .mc-table td:first-child { white-space: normal; }
}