/* ============================================================
   Utilities Bunker — Total Harmonic Distortion (THD) v2.1
   File: /assets/css/modules/electronics/thd.v2.1.css
   Purpose:
   - Tool-only layout for THD inputs + harmonics table + work formatting
   - Mobile-first, 44×44 touch targets, clamp() typography
   - NO edits to ub-toolkit.v2.1.css
   ============================================================ */

/* ============================== Local tokens (tool-scoped) ============================== */
:root{
  --thd-radius: 16px;
  --thd-gap: 14px;
  --thd-soft: rgba(0,0,0,.06);
  --thd-soft2: rgba(0,0,0,.10);
}
html.ub-theme-dark:root{
  --thd-soft: rgba(255,255,255,.06);
  --thd-soft2: rgba(255,255,255,.10);
}

/* ============================== Tool polish ============================== */
.ub-form{
  margin: 0;
}

/* Make sure the output reads cleanly */
#liveOut .ub-v{
  letter-spacing: -0.01em;
}

/* ============================== Harmonics Table ============================== */
.ub-thd-table{
  border: 1px solid var(--ub-border);
  border-radius: var(--thd-radius);
  background: var(--ub-card-bg);
  overflow: hidden;
}

/* Header */
.ub-thd-tablehead{
  display: grid;
  grid-template-columns: 120px minmax(0,1fr) minmax(0,1.1fr);
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--ub-border);
  background: var(--ub-surface-2);
  font-weight: 950;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ub-muted);
}
.ub-thd-tablehead .t1,
.ub-thd-tablehead .t2,
.ub-thd-tablehead .t3{
  min-height: var(--ub-hit);
  display: flex;
  align-items: center;
}

/* Rows */
.ub-thd-row{
  display: grid;
  grid-template-columns: 120px minmax(0,1fr) minmax(0,1.1fr);
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--thd-soft);
  align-items: center;
}
.ub-thd-row:last-child{
  border-bottom: 0;
}

.ub-thd-row .h{
  font-family: var(--ub-mono);
  font-weight: 950;
  font-size: 13px;
  color: var(--ub-text);
}
.ub-thd-row .n{
  font-size: 12px;
  color: var(--ub-muted);
  line-height: 1.35;
}

/* Row hover (desktop only) */
@media (hover: hover){
  .ub-thd-row:hover{
    background: var(--ub-surface-2);
  }
}

/* Harmonic input */
.ub-thd-row input{
  width: 100%;
  min-height: var(--ub-hit);
}

/* Disabled rows */
.ub-thd-row input:disabled{
  opacity: .55;
  cursor: not-allowed;
}

/* ============================== Responsive table stack ============================== */
/* Mobile portrait: stack row into label + input + note */
@media (max-width: 520px){
  .ub-thd-tablehead{
    display: none;
  }
  .ub-thd-row{
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 12px 14px;
  }
  .ub-thd-row .h{
    font-size: 14px;
  }
}

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

/* Make details summary easier to tap */
.ub-collapsible summary{
  min-height: 44px;
}

/* ============================== Button row spacing ============================== */
.ub-actions .ub-btn,
.ub-actions .ub-btn--secondary{
  min-height: var(--ub-hit);
}

/* ============================== Minor visual accents ============================== */
.ub-thd-table{
  box-shadow: 0 0 0 1px var(--thd-soft2) inset;
}

/* Keep rail buttons full width safely (tool-only) */
.ub-btn--block{
  width: 100%;
}