/* Noise Color Analyzer — local overrides only (Noise Analysis & Monitoring).
   BEM prefix: nca. Tokens come from design-system.css; nothing here uses !important. */

.nca-warn-note {
  max-width:820px;
  margin:var(--space-md) auto 0;
  padding:var(--space-sm) var(--space-md);
  border:1px solid var(--color-warning);
  background:rgba(255,179,0,.08);
  border-radius:var(--radius-sm);
  color:var(--color-text);
  font-size:.92rem;
  line-height:1.55;
  text-align:left;
}

.nca-layout {
  display:grid;
  grid-template-columns:300px 1fr;
  gap:var(--space-lg);
  align-items:start;
}

.nca-h3 {
  font-family:var(--font-display, var(--font-mono));
  font-size:1rem;
  color:var(--color-primary);
  margin:0 0 var(--space-sm);
}
.nca-h3--mt { margin-top:var(--space-lg); }

.nca-field { margin-bottom:var(--space-sm); }
.nca-select,
.nca-num {
  width:100%;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(0,255,65,.25);
  color:var(--color-text);
  font-family:var(--font-mono);
  font-size:.9rem;
  padding:9px 10px;
  border-radius:var(--radius-sm);
}
.nca-select:focus,
.nca-num:focus { outline:1px solid var(--color-primary); }

.nca-band {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
}

.nca-btn-row { display:flex; flex-direction:column; gap:8px; margin-top:var(--space-md); }

.nca-status {
  margin-top:var(--space-md);
  font-family:var(--font-mono);
  font-size:.84rem;
  line-height:1.5;
  color:var(--color-text-dim);
  min-height:1.4em;
}
.nca-status.is-live  { color:var(--color-primary); }
.nca-status.is-error { color:var(--color-error); }

.nca-consent {
  margin-top:var(--space-sm);
  font-size:.78rem;
  color:var(--color-text-muted);
  line-height:1.5;
}

/* spectrum canvas */
.nca-canvas {
  display:block;
  width:100%;
  height:auto;
  background:#020308;
  border:1px solid rgba(0,255,65,.18);
  border-radius:var(--radius-sm);
}

/* result readouts */
.nca-result {
  margin-top:var(--space-md);
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:8px;
}
.nca-cell {
  background:rgba(255,255,255,.03);
  border:1px solid rgba(0,255,65,.15);
  border-radius:var(--radius-sm);
  padding:10px;
  text-align:center;
}
.nca-cell__label {
  font-family:var(--font-mono);
  font-size:.64rem;
  letter-spacing:.05em;
  color:var(--color-text-dim);
  text-transform:uppercase;
}
.nca-cell__value {
  font-family:var(--font-mono);
  font-size:1.05rem;
  font-weight:700;
  color:var(--color-primary);
  margin-top:4px;
  word-break:break-word;
}

/* color verdict banner */
.nca-verdict {
  display:flex;
  align-items:center;
  gap:12px;
  margin-top:var(--space-md);
  padding:12px 14px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(0,255,65,.18);
  border-radius:var(--radius-sm);
}
.nca-swatch {
  flex:0 0 auto;
  width:42px;
  height:42px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.2);
  background:transparent;
}
.nca-verdict__text { min-width:0; }
.nca-verdict__label {
  font-family:var(--font-mono);
  font-size:.66rem;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:var(--color-text-dim);
}
.nca-verdict__name {
  font-family:var(--font-mono);
  font-size:1.15rem;
  font-weight:700;
  color:var(--color-primary);
}

.nca-desc {
  margin-top:var(--space-sm);
}
.nca-desc__p {
  font-size:.92rem;
  line-height:1.6;
  color:var(--color-text);
  margin:0;
}

/* color reference grid */
.nca-ref {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  margin-top:var(--space-md);
}
.nca-ref__item {
  display:flex;
  gap:10px;
  align-items:flex-start;
  padding:10px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(0,255,65,.12);
  border-radius:var(--radius-sm);
}
.nca-ref__dot {
  flex:0 0 auto;
  width:16px;
  height:16px;
  border-radius:50%;
  margin-top:2px;
  border:1px solid rgba(255,255,255,.2);
}
.nca-ref__name {
  font-family:var(--font-mono);
  font-weight:700;
  font-size:.9rem;
  color:var(--color-text);
}
.nca-ref__slope {
  font-family:var(--font-mono);
  font-size:.78rem;
  color:var(--color-primary);
}
.nca-ref__desc {
  display:block;
  font-size:.8rem;
  color:var(--color-text-dim);
  margin-top:3px;
  line-height:1.45;
}

/* shared calibration block */
.nca-cal {
  margin-top:var(--space-md);
  padding:12px 14px;
  border:1px dashed rgba(0,255,65,.3);
  border-radius:var(--radius-sm);
  background:rgba(0,255,65,.04);
}
.nca-cal__row {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:flex-end;
}
.nca-cal__field { flex:1 1 160px; }
.nca-cal__out {
  margin-top:8px;
  font-size:.82rem;
  line-height:1.5;
  color:var(--color-text-dim);
}
.nca-cal__out--active { color:var(--color-primary); }

@media (max-width:720px) {
  .nca-layout { grid-template-columns:1fr; }
  .nca-result { grid-template-columns:1fr 1fr; }
  .nca-ref { grid-template-columns:1fr; }
}