/* ============================================================
   Utilities Bunker — dBm ↔ Watt Converter (v2.1)
   File: /assets/css/modules/electronics/dbm-watt.v2.1.css
   Purpose:
   - Tool-only layout + formatting (NO edits to ub-toolkit.v2.1.css)
   - Mobile-first, 44x44 targets, clamp typography
   ============================================================ */

/* ============================== Local tokens (tool-scoped) ============================== */
:root{
  --dbm-radius: 16px;
  --dbm-gap: 14px;
}

/* ============================== Mini hero layout ============================== */
/* Two-column panel like Ohm's Law: inputs + reference */
.ub-hero-mini{
  display:grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: var(--dbm-gap);
}

/* Stack on tablet/mobile */
@media (max-width: 980px){
  .ub-hero-mini{
    grid-template-columns: 1fr;
  }
}

/* ============================== Work area formatting ============================== */
.ub-work{
  font-family: var(--ub-mono);
  font-size: 13px;
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* ============================== Slight tool polish ============================== */
.ub-card .ub-table{
  box-shadow: none; /* keep tables crisp inside card */
}

/* Make table more readable on small screens */
@media (max-width: 520px){
  .ub-table th,
  .ub-table td{
    padding: 9px 10px;
    font-size: 12px;
  }
}

/* Ensure rail buttons fill width without relying on toolkit edits */
.ub-btn--block{
  width:100%;
}

/* ============================== Input row tune-up (tool-only) ============================== */
/* Keep input + select aligned cleanly if toolkit changes later */
.ub-field .ub-inputrow{
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
}

/* When wide enough, allow input + select side-by-side for Watt field ONLY */
@media (min-width: 769px){
  #watt{
    min-width: 0;
  }
  #unitW{
    min-width: 0;
  }

  /* Only the watt row gets 2 columns */
  .ub-field:has(#watt) .ub-inputrow{
    grid-template-columns: 1fr auto;
    align-items: center;
  }

  .ub-field:has(#watt) .ub-inputrow > select{
    width: auto;
    min-width: 110px;
  }
}

/* Fallback for browsers without :has() support: keep stacked (safe). */
@supports not selector(:has(*)){
  .ub-field .ub-inputrow{
    display:block;
  }
  .ub-field .ub-inputrow > input,
  .ub-field .ub-inputrow > select{
    display:block;
    width:100%;
  }
  .ub-field .ub-inputrow > select{
    margin-top:6px;
  }
}

/* ============================== Output emphasis ============================== */
#liveOut .ub-v{
  letter-spacing: -0.01em;
}

/* ============================== Better details focus ring ============================== */
.ub-collapsible summary:focus{
  outline:none;
  box-shadow: 0 0 0 4px var(--ub-focus);
  border-radius: 12px;
}

/* ============================== Reduce motion safety (tool only) ============================== */
@media (prefers-reduced-motion: reduce){
  .ub-hero-mini *{
    transition: none !important;
  }
}