/* ============================
   Technical Converter – Specific CSS
   Integrated with base.css + dark mode
============================ */

/* (Common styles — .field, .result, .message, .reset-btn,
   hr, .calculator, .calc-card, .hint, .footer —
   are now consolidated in base.css) */

/* ============================
   Invert units button
============================ */
.tool-actions.center {
  display: flex;
  justify-content: center;
  margin: var(--space-sm) 0;
}

/* Utility: round button (used in #btnInvert) */
.round {
  border-radius: 50%;
  width: 40px;
  height: 40px;
  padding: 0;
  font-size: 1.1rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.round:active {
  transform: rotate(180deg) scale(0.95);
}

/* Small precision note (used in conversor.js) */
.precision-note {
  display: block;
  color: var(--muted);
  font-weight: 400;
  font-size: 0.85rem;
  margin-top: var(--space-xs);
}

.conversor-page .tool-wrap.small {
  max-width: 900px;
}

.conversor-page {
  --result-card-min-height: 142px;
  --result-value-size: clamp(2.25rem, 5.4vw, 3.8rem);
}

.conversor-page .tool-conversor {
  padding: clamp(1.75rem, 4vw, 2.75rem);
}

.conversor-page .tool-body {
  gap: clamp(1.15rem, 3vw, 1.75rem);
}

.conversor-page .calc-card {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 2.8vw, 1.5rem);
  padding: clamp(1.25rem, 3.5vw, 2rem);
}

.conversor-page .calc-card > hr,
.conversor-page .result,
.conversor-page .tool-actions:not(.center) {
  grid-column: 1 / -1;
}

.conversor-page .tool-actions.center {
  position: relative;
  grid-column: 1 / -1;
  min-height: 34px;
  margin: 0;
}

.conversor-page .tool-actions.center::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 50%;
  border-top: 1px solid color-mix(in srgb, var(--border) 78%, transparent);
}

.conversor-page #btnInvert {
  position: relative;
  z-index: 1;
  width: 50px;
  height: 50px;
  border: var(--surface-result-border);
  background: var(--surface-card-bg);
  box-shadow: var(--surface-shadow-hover);
}

.conversor-page .result {
  align-content: center;
}

.conversor-page #preset {
  min-height: 50px;
}

.conversor-page .field small {
  max-width: 36rem;
}

@media (width <= 720px) {
  .conversor-page .calc-card {
    grid-template-columns: 1fr;
  }
}