/* ============================================================
   Tool Styles — AC Power Calculator v2.1
   File: /assets/css/modules/electronics/ac-power.v2.1.css
   Purpose:
   - Tool-only layout + show-work formatting
   - No changes to ub-toolkit.v2.1.css
   - Mobile-first, 44x44 touch targets, clamp typography
   - Uses UB breakpoint ranges
   ============================================================ */

/* ==============================
   Local tokens (tool-scoped)
   ============================== */
:root{
  --acp-radius: 16px;
  --acp-gap: 14px;
  --acp-soft: rgba(0,0,0,.06);
}

/* ==============================
   Tool hero layout
   ============================== */
.ub-ac-hero{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--acp-gap);
  align-items:start;
}

/* Tablets (Portrait) / Small Laptops: <=1024 */
@media (max-width:1024px){
  .ub-ac-hero{
    grid-template-columns: 1fr;
  }
}

/* ==============================
   Tight cards inside hero
   ============================== */
.ub-ac-hero .ub-card{
  margin-bottom: 0;
}

/* Add breathing room after hero grid */
.ub-ac-hero{
  margin-bottom: var(--ub-gap);
}

/* ==============================
   Inputs row handling
   - Toolkit currently stacks input+select always (global).
   - We keep it compatible and add small polish only.
   ============================== */
.ub-field .ub-inputrow select{
  margin-top: 6px;
}

/* Hint + inline error (extra stability) */
.ub-inline-error{
  min-height: 16px;
}

/* ==============================
   Output polish
   ============================== */
#liveOut{
  margin-top: 10px;
}

/* Notes field inside output: allow wrap */
#outNote{
  overflow-wrap:anywhere;
  word-break:break-word;
}

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

/* ==============================
   Preset chips row spacing
   ============================== */
.ub-ac-hero .ub-chip{
  white-space: nowrap;
}

/* Make long chip labels wrap nicely on tiny screens */
@media (max-width:480px){
  .ub-ac-hero .ub-chip{
    white-space: normal;
    text-align: center;
  }
}

/* ==============================
   Touch targets and focus
   ============================== */
.ub-ac-hero button,
.ub-ac-hero select,
.ub-ac-hero input{
  min-height: var(--ub-hit);
}

.ub-ac-hero button:focus-visible,
.ub-ac-hero select:focus-visible,
.ub-ac-hero input:focus-visible{
  outline: 3px solid var(--ub-focus);
  outline-offset: 2px;
  border-radius: 12px;
}

/* ==============================
   Container queries (optional hook)
   - If you add .ub-cq to a wrapper later, this will apply.
   ============================== */
.ub-cq{
  container-type: inline-size;
}

@container (max-width: 520px){
  .ub-out-grid{
    grid-template-columns: 1fr;
  }
}

/* ==============================
   Large screens (4K/ultrawide)
   - Prevent overly wide inner cards if you later add wide content
   ============================== */
@media (min-width:1441px){
  .ub-ac-hero{
    gap: clamp(12px, 1.2vw, 18px);
  }
}