/* ============================================================
 * Utilities Bunker — Color Picker (v2.1)
 * File: /assets/css/modules/colors/color-picker.v2.1.css
 * Purpose:
 * - Tool-only layout + preview panel + outputs grid
 * - Uniform with Ohm’s Law page: card-first, KPI tiles, chips, collapsibles
 * - Mobile-first, 44x44 touch targets, clamp() typography
 * Notes:
 * - DO NOT modify ub-toolkit.v2.1.css
 * ============================================================ */

/* ============================== Local tokens (tool-scoped) ============================== */
:root{
  --cp-radius: 16px;
  --cp-gap: 14px;
}

/* ============================== Hero layout ============================== */
.cp-hero{
  display:grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: var(--cp-gap);
}
@media (max-width: 980px){
  .cp-hero{ grid-template-columns: 1fr; }
}

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

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

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

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

/* Swatch area */
.cp-swatchwrap{
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--ub-border);
  background: var(--ub-card-bg);
  min-height: 210px;
}

/* Checkerboard grid behind swatch */
.cp-swatchgrid{
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(45deg, rgba(0,0,0,.06) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(0,0,0,.06) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, rgba(0,0,0,.06) 75%),
    linear-gradient(-45deg, transparent 75%, rgba(0,0,0,.06) 75%);
  background-size: 26px 26px;
  background-position: 0 0, 0 13px, 13px -13px, -13px 0;
  opacity: .55;
}
html.ub-theme-dark .cp-swatchgrid{
  opacity: .35;
  background-image:
    linear-gradient(45deg, rgba(255,255,255,.08) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(255,255,255,.08) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, rgba(255,255,255,.08) 75%),
    linear-gradient(-45deg, transparent 75%, rgba(255,255,255,.08) 75%);
}

.cp-swatch{
  position:absolute;
  inset:0;
  z-index: 1;
}

/* Picker row */
.cp-pickerrow{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 12px;
}
@media (max-width: 520px){
  .cp-pickerrow{ grid-template-columns: 1fr; }
}

/* Make color input hit target */
#colorInput{
  min-height: var(--ub-hit);
  padding: 6px 8px;
}

/* Alpha row */
.cp-alpharow{
  display:flex;
  align-items:center;
  gap: 10px;
}
.cp-alpharow .ub-range{
  flex: 1 1 auto;
}
.cp-mono{
  font-family: var(--ub-mono);
  font-weight: 950;
  min-width: 64px;
  text-align: right;
}

/* Contrast cards */
.cp-contrast{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 12px;
}
@media (max-width: 520px){
  .cp-contrast{ grid-template-columns: 1fr; }
}

.cp-contrast-card{
  border: 1px solid var(--ub-border);
  background: var(--ub-card-bg);
  border-radius: 14px;
  padding: 10px 12px;
  min-height: var(--ub-hit);
}

.cp-contrast-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
}

.cp-contrast-label{
  font-weight: 950;
  font-size: 12px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ub-muted);
  flex: 1 1 auto;
}

.cp-contrast-val{
  font-family: var(--ub-mono);
  font-weight: 950;
}

.cp-contrast-sub{
  margin-top: 6px;
  font-size: 12px;
  color: var(--ub-muted);
}

.cp-dot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--ub-muted);
  box-shadow: 0 0 0 3px rgba(249,58,19,.12);
}
.cp-dot.ok{ background: var(--ub-success); box-shadow: 0 0 0 3px rgba(34,197,94,.14); }
.cp-dot.warn{ background: var(--ub-warning); box-shadow: 0 0 0 3px rgba(245,158,11,.14); }
.cp-dot.bad{ background: var(--ub-danger); box-shadow: 0 0 0 3px rgba(239,68,68,.14); }

/* Presets row */
.cp-preset-row{
  display:flex;
  flex-wrap:wrap;
  gap: 10px;
  margin-top: 12px;
}
.cp-preset-row .ub-chip{
  min-height: var(--ub-hit);
}

/* ============================== Formats panel ============================== */
.cp-formats{
  background: var(--ub-surface-2);
  border: 1px solid var(--ub-border);
  border-radius: var(--cp-radius);
  padding: 12px;
}

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

/* Outputs grid */
.cp-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.cp-item label{
  display:block;
  font-weight: 950;
  margin-bottom: 6px;
  font-size: var(--ub-fs-2);
}

.cp-row{
  display:flex;
  gap: 10px;
  align-items:center;
}

.cp-row input{
  flex: 1 1 auto;
  min-height: var(--ub-hit);
}

.cp-copy{
  min-height: var(--ub-hit);
  padding: 10px 14px;
  white-space: nowrap;
}

/* Stack input + copy button on very small screens */
@media (max-width: 520px){
  .cp-row{ flex-direction: column; align-items: stretch; }
  .cp-copy{ width: 100%; }
}

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

/* Touch target polish */
.cp-row input,
.cp-copy,
#colorInput{
  border-radius: var(--ub-radius-1);
}

/* Keep rail button full width helper */
.ub-btn--block{ width: 100%; }