/* ============================================================
   Tool Styles — Aliased Frequency Calculator v2.1
   File: /assets/css/modules/electronics/alias.v2.1.css
   Purpose:
   - Tool-only layout + visualization + work formatting
   - Mobile-first, 44x44 touch targets, clamp typography
   - No changes to ub-toolkit.v2.1.css
   ============================================================ */

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

/* ==============================
   Header row helper
   ============================== */
.ub-alias-head{
  display:flex;
  gap: 12px;
  justify-content:space-between;
  align-items:flex-start;
  flex-wrap:wrap;
}

.ub-alias-title{
  margin:0;
  font-size: var(--ub-fs-5);
}

.ub-alias-sub{
  margin:6px 0 0;
}

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

/* Tablets (Portrait) / Small Laptops: 769–1024 (stack) */
@media (max-width: 980px){
  .ub-alias-hero{ grid-template-columns: 1fr; }
}

/* ==============================
   Panels
   ============================== */
.ub-alias-panel{
  border-radius: var(--alias-radius);
}

/* Divider */
.ub-alias-hr{
  border:none;
  border-top:1px solid var(--ub-border);
  margin: 14px 0;
}

/* ==============================
   How-to list
   ============================== */
.ub-alias-steps{
  margin:0;
  padding-left: 18px;
}
.ub-alias-steps li{
  margin: 6px 0;
}

/* ==============================
   Toggle chips row
   ============================== */
.ub-alias-toggles{
  display:flex;
  gap: 10px;
  flex-wrap:wrap;
  align-items:center;
}

.ub-alias-chip{
  gap: 8px;
}

/* ==============================
   Actions row
   ============================== */
.ub-alias-actions{
  margin-top: 12px;
  display:flex;
  gap: 10px;
  flex-wrap:wrap;
  align-items:center;
}

/* Ensure buttons are tappable */
.ub-alias-actions .ub-btn{
  min-height: var(--ub-hit);
}

/* ==============================
   Visualization
   ============================== */
.ub-alias-viz{
  margin-top: 14px;
  padding: 12px;
  border-radius: var(--alias-radius);
  border: 1px solid var(--ub-border);
  background: var(--ub-surface-2);
}

.ub-alias-vizbar{
  position: relative;
  height: 14px;
  border-radius: 999px;
  background: var(--ub-surface-3);
  border: 1px solid var(--ub-border);
  overflow: hidden;
}

/* Nyquist marker + Fin/Alias markers */
.ub-alias-marker{
  position:absolute;
  top: -7px;
  width: 2px;
  height: 28px;
  background: rgba(0,0,0,.45);
  transform: translateX(-1px);
}

/* Fin marker */
.ub-alias-marker--fin{
  background: rgba(0, 112, 187, .9);
}

/* Alias marker */
.ub-alias-marker--alias{
  background: rgba(249, 58, 19, .9);
}

/* Dark mode marker contrast */
html.ub-theme-dark .ub-alias-marker{
  background: rgba(255,255,255,.55);
}
html.ub-theme-dark .ub-alias-marker--fin{
  background: rgba(96, 165, 250, .95);
}
html.ub-theme-dark .ub-alias-marker--alias{
  background: rgba(255, 116, 38, .95);
}

.ub-alias-vizlegend{
  display:flex;
  justify-content:space-between;
  margin-top: 8px;
  font-size: 12px;
  color: var(--ub-muted);
  font-weight: 900;
  letter-spacing: .02em;
}

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

/* ==============================
   Reference list
   ============================== */
.ub-alias-ref{
  margin:0;
  padding-left: 18px;
}
.ub-alias-ref li{
  margin: 6px 0;
}

/* ==============================
   FAQ spacing (tool scoped)
   ============================== */
.ub-alias-q{
  margin: 12px 0 6px;
  font-size: clamp(14px, 0.95rem + 0.2vw, 16px);
  font-weight: 950;
}
.ub-alias-a{
  margin: 0 0 10px;
}

/* ==============================
   Small screens polish
   ============================== */
@media (max-width: 480px){
  .ub-alias-actions .ub-btn{
    width: 100%;
    justify-content:center;
  }
}

/* ==============================
   Container query hooks (optional)
   - If toolkit adds .ub-cq containers later, we can adapt here.
   ============================== */
@container (min-width: 540px){
  /* intentionally empty — reserved for future tool-specific CQ tweaks */
}