/* ============================================================
   Utilities Bunker — Base Converter v2.1
   File: /assets/css/modules/convert/base-converter.v2.1.css
   Purpose:
   - Tool-only layout + base cards + work formatting
   - No changes to ub-toolkit.v2.1.css
   - Mobile-first, responsive, 44x44 touch targets
   ============================================================ */

:root{
  --bc-radius: 16px;
  --bc-gap: 14px;
  --bc-soft: rgba(0,0,0,.06);
}

/* Header */
.bc-head{
  display:flex;
  gap:10px;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
}
.bc-title{
  margin:0;
  font-size:var(--ub-fs-5);
}
.bc-subtitle{
  margin:6px 0 0;
}

/* How to use */
.bc-howto{
  margin:0;
  padding-left:18px;
}
.bc-howto li + li{
  margin-top:6px;
}

/* Tool hero layout */
.bc-hero{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:var(--bc-gap);
}
@media (max-width: 980px){
  .bc-hero{
    grid-template-columns:1fr;
  }
}

/* Panels */
.bc-panel{
  background:var(--ub-surface-2);
  border:1px solid var(--ub-border);
  border-radius:var(--bc-radius);
  padding:12px;
}
.bc-panel-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom:10px;
}
.bc-panel-title{
  font-size:clamp(13px, 1.2vw, 14px);
  font-weight:950;
  letter-spacing:.01em;
}
.bc-panel-sub{
  font-size:12px;
  color:var(--ub-muted);
  margin-top:2px;
}

/* KPI tiles */
.bc-kpis{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  justify-content:flex-end;
}
.bc-kpi{
  min-width:112px;
  padding:8px 10px;
  border-radius:14px;
  border:1px solid var(--ub-border);
  background:var(--ub-card-bg);
}
.bc-kpi .k{
  font-size:11px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.04em;
  color:var(--ub-muted);
}
.bc-kpi .v{
  font-family:var(--ub-mono);
  font-weight:950;
  font-size:14px;
  margin-top:2px;
  overflow-wrap:anywhere;
  word-break:break-word;
}

/* Base output cards */
.bc-basegrid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:10px;
}
@media (max-width: 680px){
  .bc-basegrid{
    grid-template-columns:1fr;
  }
}
.bc-basecard{
  min-width:0;
  padding:12px;
  border-radius:14px;
  border:1px solid var(--ub-border);
  background:var(--ub-card-bg);
  box-shadow:0 1px 0 rgba(0,0,0,.02);
}
.bc-basecard-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom:8px;
}
.bc-basecard-title{
  margin:0;
  font-size:13px;
  font-weight:950;
  letter-spacing:.02em;
}
.bc-basebadge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:28px;
  padding:4px 10px;
  border-radius:999px;
  border:1px solid var(--ub-border);
  background:var(--ub-surface-2);
  color:var(--ub-muted);
  font-size:11px;
  font-weight:900;
  letter-spacing:.04em;
  text-transform:uppercase;
}
.bc-basevalue{
  min-height:48px;
  font-family:var(--ub-mono);
  font-size:clamp(14px, .9rem + .25vw, 16px);
  font-weight:950;
  line-height:1.45;
  overflow-wrap:anywhere;
  word-break:break-word;
}

/* Insight flags */
.bc-flags{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:10px;
  margin-top:10px;
}
@media (max-width: 780px){
  .bc-flags{
    grid-template-columns:1fr;
  }
}
.bc-flag{
  display:flex;
  flex-direction:column;
  gap:4px;
  min-width:0;
  min-height:72px;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid var(--ub-border);
  background:var(--ub-card-bg);
}
.bc-flag-k{
  font-size:11px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.04em;
  color:var(--ub-muted);
}
.bc-flag-v{
  font-family:var(--ub-mono);
  font-size:14px;
  font-weight:950;
  line-height:1.45;
  overflow-wrap:anywhere;
  word-break:break-word;
}

/* Presets */
.bc-preset-row{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:10px;
}
.bc-preset-row .ub-chip{
  min-height:44px;
  padding:10px 12px;
}

/* Controls / options */
.bc-options{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.bc-check{
  display:inline-flex;
  gap:8px;
  align-items:center;
}
.bc-actions{
  margin-top:12px;
}

/* Work area */
.bc-work{
  font-family:var(--ub-mono);
  font-size:13px;
  line-height:1.6;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  word-break:break-word;
}
.bc-footnote{
  margin-top:10px;
  color:var(--ub-muted);
  font-size:12px;
}

/* Reference section */
.bc-ref-list{
  margin:0;
  padding-left:18px;
}
.bc-ref-list li + li{
  margin-top:6px;
}
.bc-ref-grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:10px;
  margin-top:12px;
}
@media (max-width: 900px){
  .bc-ref-grid{
    grid-template-columns:repeat(2, minmax(0,1fr));
  }
}
@media (max-width: 520px){
  .bc-ref-grid{
    grid-template-columns:1fr;
  }
}
.bc-ref-card{
  min-width:0;
  padding:12px;
  border-radius:14px;
  border:1px solid var(--ub-border);
  background:var(--ub-surface-2);
}
.bc-ref-k{
  font-size:11px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.04em;
  color:var(--ub-muted);
}
.bc-ref-v{
  margin-top:4px;
  font-family:var(--ub-mono);
  font-size:15px;
  font-weight:950;
}

/* FAQ */
.bc-faq-q{
  margin:12px 0 6px;
  font-size:var(--ub-fs-2);
}
.bc-faq-a{
  margin:0 0 10px;
}
.bc-faq-a:last-child{
  margin-bottom:0;
}

/* Improve long value wrapping inside toolkit output cards */
#liveOut .ub-v,
#liveOut .ub-k{
  overflow-wrap:anywhere;
  word-break:break-word;
}

/* Touch / focus polish */
.bc-basecard:focus-within,
.bc-flag:focus-within,
.bc-ref-card:focus-within{
  box-shadow:0 0 0 4px var(--ub-focus);
}
.bc-preset-row .ub-chip:focus,
.bc-check:focus-within{
  outline:none;
  box-shadow:0 0 0 4px var(--ub-focus);
  border-radius:999px;
}

/* Small screens */
@media (max-width: 520px){
  .bc-kpi{
    min-width:98px;
  }

  .bc-basevalue,
  .bc-flag-v{
    font-size:13px;
  }
}