/* ============================================================
 * Utilities Bunker — CSS Color Parser / Validator (v2.1)
 * File: /assets/css/modules/colors/css-color-parser.v2.1.css
 * Purpose:
 * - Tool-only layout + preview/swatches + output polish
 * - Mobile-first, 44x44 touch targets, clamp typography
 * - No changes to ub-toolkit.v2.1.css
 * ============================================================ */

/* Tool-scoped tokens */
:root{
  --ccp-radius: 16px;
  --ccp-gap: 14px;
}

/* 2-col hero layout: preview/results + controls */
.ub-color-hero{
  display:grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: var(--ccp-gap);
}
@media (max-width: 980px){
  .ub-color-hero{
    grid-template-columns: 1fr;
  }
}

/* Preview/lab panel */
.ub-color-lab{
  background: var(--ub-surface-2);
  border: 1px solid var(--ub-border);
  border-radius: var(--ccp-radius);
  padding: 12px;
}

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

.ub-color-title{
  font-size: clamp(13px, 1.2vw, 14px);
  font-weight: 950;
  letter-spacing: .01em;
}
.ub-color-sub{
  font-size: 12px;
  color: var(--ub-muted);
  margin-top: 2px;
}

/* Status badge row */
.ub-color-badges{
  display:flex;
  gap: 8px;
  justify-content:flex-end;
  flex-wrap:wrap;
}

/* Swatch area */
.ub-color-swatch-wrap{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  align-items:stretch;
}
@media (max-width: 640px){
  .ub-color-swatch-wrap{
    grid-template-columns: 1fr;
  }
}

.ub-color-swatch{
  min-height: 180px;
  border-radius: 14px;
  border: 1px solid var(--ub-border);
  background:
    /* checkerboard */
    linear-gradient(45deg, rgba(0,0,0,.07) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(0,0,0,.07) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, rgba(0,0,0,.07) 75%),
    linear-gradient(-45deg, transparent 75%, rgba(0,0,0,.07) 75%);
  background-size: 26px 26px;
  background-position: 0 0, 0 13px, 13px -13px, -13px 0px;
  position: relative;
  overflow: hidden;
}

/* Overlay to show actual color background on top of checkerboard */
.ub-color-swatch::after{
  content:"";
  position:absolute;
  inset:0;
  background: inherit; /* JS sets element background -> this inherits it */
  /* If JS sets a background-color, keep checkerboard by using background-blend */
  mix-blend-mode: normal;
}

/* Swatch meta */
.ub-color-swatch-meta{
  border-radius: 14px;
  border: 1px solid var(--ub-border);
  background: var(--ub-card-bg);
  padding: 12px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap: 10px;
}

/* Make outputs readable on small screens */
.ub-out .ub-v{
  font-size: clamp(16px, 1.05rem + 0.35vw, 20px);
}

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

/* Keep summary touch-friendly */
.ub-collapsible summary{
  min-height: 44px;
  display:flex;
  align-items:center;
}

/* Rail button helper (safe even if toolkit already includes it) */
.ub-btn--block{ width:100%; }

/* Slightly tighter on tiny screens */
@media (max-width: 420px){
  .ub-color-swatch{ min-height: 150px; }
}