/* ============================================================
   Utilities Bunker — Number Base Converter (v2.1)
   File: /assets/css/modules/convert/number-base.v2.1.css
   Purpose:
   - Tool-only layout and styling for Number Base Converter
   - Keeps shared UB Toolkit untouched
   - Mobile-first, responsive, accessible, dark-mode friendly
   ============================================================ */

/* Tool-scoped tokens */
:root{
  --nb-radius: 16px;
  --nb-gap: 14px;
  --nb-soft: rgba(0,0,0,.06);
  --nb-accent-soft: rgba(249,58,19,.10);
  --nb-accent-mid: rgba(249,58,19,.18);
}

html.ub-theme-dark:root{
  --nb-soft: rgba(255,255,255,.06);
  --nb-accent-soft: rgba(249,58,19,.12);
  --nb-accent-mid: rgba(249,58,19,.22);
}

/* Main hero */
.ub-base-hero{
  display:grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: var(--nb-gap);
}

@media (max-width: 980px){
  .ub-base-hero{
    grid-template-columns: 1fr;
  }
}

/* Shared local panel */
.ub-base-panel{
  background: var(--ub-surface-2);
  border: 1px solid var(--ub-border);
  border-radius: var(--nb-radius);
  padding: 12px;
}

.ub-base-panel--visual{
  min-width: 0;
}

.ub-base-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap: 10px;
  flex-wrap:wrap;
  margin-bottom: 10px;
}

.ub-base-label{
  font-size: clamp(13px, 1.2vw, 14px);
  font-weight: 950;
  letter-spacing: .01em;
}

.ub-base-sub{
  font-size: 12px;
  color: var(--ub-muted);
  margin-top: 2px;
}

/* KPI row */
.ub-base-kpis{
  display:flex;
  flex-wrap:wrap;
  gap: 8px;
  justify-content:flex-end;
}

.ub-base-kpi{
  min-width: 112px;
  padding: 8px 10px;
  border-radius: 14px;
  border: 1px solid var(--ub-border);
  background: var(--ub-card-bg);
}

.ub-base-kpi .k{
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--ub-muted);
}

.ub-base-kpi .v{
  font-family: var(--ub-mono);
  font-weight: 950;
  font-size: 14px;
  margin-top: 2px;
}

/* Base map */
.ub-base-map{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 10px;
}

@media (max-width: 560px){
  .ub-base-map{
    grid-template-columns: 1fr;
  }
}

.ub-base-tile{
  min-width: 0;
  border: 1px solid var(--ub-border);
  border-radius: 14px;
  background:
    linear-gradient(180deg, var(--ub-card-bg), var(--ub-surface-2));
  padding: 12px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}

.ub-base-tile-top{
  display:flex;
  justify-content:space-between;
  gap: 10px;
  align-items:center;
  flex-wrap:wrap;
}

.ub-base-tile-top strong{
  font-size: 14px;
  font-weight: 950;
  line-height: 1.2;
}

.ub-base-tile-top span{
  display:inline-flex;
  align-items: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;
}

.ub-base-tile-body{
  margin-top: 10px;
  min-height: 48px;
  display:flex;
  align-items:center;
  border-radius: 12px;
  padding: 10px 12px;
  background: var(--nb-soft);
  overflow-wrap:anywhere;
  word-break:break-word;
}

.ub-base-tile-body code{
  font-family: var(--ub-mono);
  font-size: 13px;
  font-weight: 900;
  color: var(--ub-text);
}

/* Quick output grid */
.ub-base-output-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 12px;
}

@media (max-width: 720px){
  .ub-base-output-grid{
    grid-template-columns: 1fr;
  }
}

.ub-base-out{
  min-width: 0;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid var(--ub-border);
  background:
    linear-gradient(180deg, var(--ub-card-bg), var(--ub-surface-2));
}

.ub-base-out .ub-k{
  margin-bottom: 6px;
}

.ub-base-out .ub-v{
  font-size: clamp(15px, 1rem + .15vw, 18px);
  line-height: 1.45;
}

/* Tool-specific textarea polish */
#nbInput{
  min-height: 132px;
  resize: vertical;
  font-family: var(--ub-mono);
  line-height: 1.45;
}

#nbInput,
#customInputBase,
#customOutputBase,
#inputBase,
#outputBase,
#bitWidth,
#groupSize{
  font-variant-numeric: tabular-nums;
}

/* Custom base fields disabled state */
#customInputBase:disabled,
#customOutputBase:disabled{
  opacity: .55;
  cursor: not-allowed;
  background: var(--ub-surface-2);
}

/* Output emphasis */
#primaryValue,
#outBase2,
#outBase8,
#outBase10,
#outBase16,
#outCustom,
#outAscii,
#unsignedValue,
#signedValue,
#bitLengthValue,
#normalizedValue{
  font-family: var(--ub-mono);
  font-variant-numeric: tabular-nums;
}

/* Give long values breathing room */
#primaryValue,
#outBase2,
#outBase8,
#outBase10,
#outBase16,
#outCustom,
#outAscii,
#unsignedValue,
#signedValue,
#normalizedValue{
  white-space: pre-wrap;
  overflow-wrap:anywhere;
  word-break:break-word;
}

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

/* Preset row */
.ub-preset-row{
  display:flex;
  flex-wrap:wrap;
  gap: 10px;
  margin-top: 10px;
}

.ub-preset-row .ub-chip{
  min-height: 44px;
  padding: 10px 12px;
}

/* Chip rows on the form */
.ub-actions .ub-btn{
  min-width: 140px;
}

/* Better spacing for check chips */
.ub-chip input[type="checkbox"]{
  flex: 0 0 auto;
}

/* Details styling */
.ub-collapsible summary{
  cursor:pointer;
  font-weight: 950;
  min-height: 44px;
  display:flex;
  align-items:center;
}

.ub-collapsible summary:focus{
  outline:none;
  box-shadow: 0 0 0 4px var(--ub-focus);
  border-radius: 12px;
}

/* Rail helpers */
.ub-btn--block{
  width: 100%;
}

/* Right-rail reference list polish */
.ub-related-list li > span{
  display:block;
  padding: 10px 12px;
  line-height: 1.35;
  border-radius: 10px;
  margin: 0 8px 6px;
  color: var(--ub-text);
  background: transparent;
}

.ub-related-list li:last-child > span{
  margin-bottom: 0;
}

/* Better visual weight for main output card */
#primaryOut{
  border-color: rgba(249,58,19,.28);
  background:
    linear-gradient(180deg, var(--ub-card-bg), var(--nb-accent-soft));
}

/* Small stat-style feel for primary digit set */
#digitSet{
  font-size: clamp(13px, .95rem + .08vw, 16px);
}

/* Form separators and small polish */
hr{
  opacity: 1;
}

/* Input focus tuning */
#nbInput:focus,
#customInputBase:focus,
#customOutputBase:focus,
#inputBase:focus,
#outputBase:focus,
#bitWidth:focus,
#groupSize:focus{
  border-color: rgba(249,58,19,.55);
  box-shadow: 0 0 0 4px rgba(249,58,19,.12);
  outline: none;
}

/* Message area polish */
#liveMsg{
  overflow-wrap:anywhere;
}

/* Dense mobile adjustments */
@media (max-width: 520px){
  .ub-base-kpi{
    min-width: 98px;
  }

  .ub-base-tile{
    padding: 10px;
  }

  .ub-base-out{
    padding: 10px;
  }

  .ub-actions .ub-btn{
    width: 100%;
    min-width: 0;
  }
}

/* Large-screen refinement */
@media (min-width: 1200px){
  .ub-base-output-grid{
    grid-template-columns: repeat(3, minmax(0,1fr));
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .ub-base-tile,
  .ub-base-out,
  .ub-related-list li > span{
    transition: none !important;
  }
}

/* Hover polish only where hover exists */
@media (hover: hover){
  .ub-base-tile:hover{
    border-color: rgba(249,58,19,.30);
    background:
      linear-gradient(180deg, var(--ub-card-bg), var(--nb-accent-soft));
  }

  .ub-base-out:hover{
    border-color: rgba(249,58,19,.30);
    background:
      linear-gradient(180deg, var(--ub-card-bg), var(--nb-accent-soft));
  }

  .ub-related-list li > span:hover{
    background: var(--ub-surface-3);
  }
}