/* ============================================================
   Color Identify & Repaint — tool-specific layout on top of
   ../Shared/theme.css. Shared chrome (gradient header, hamburger
   nav, .nltm-card, .nltm-canvas-frame, .nltm-button, .nltm-input)
   lives in theme.css; this file only holds the page layout unique
   to this tool. Tokens only — no hardcoded colors/fonts.
   ============================================================ */

.cf-main {
   max-width: 1180px;
   margin: 0 auto;
   padding: var(--nltm-sp-6) var(--nltm-sp-5) var(--nltm-sp-8);
   display: flex;
   flex-direction: column;
   gap: var(--nltm-sp-5);
}

.cf-card { padding: var(--nltm-sp-5); }

.cf-heading {
   font-family: var(--nltm-font-display);
   font-style: italic;
   font-weight: 600;
   font-size: var(--nltm-fs-4);
   color: var(--nltm-primary-deep);
   margin: 0 0 var(--nltm-sp-4);
}

/* ---------- Controls ---------- */

.cf-controls {
   display: flex;
   flex-wrap: wrap;
   align-items: flex-end;
   gap: var(--nltm-sp-4) var(--nltm-sp-5);
}

/* One labelled control: label stacked above its input(s). */
.cf-field {
   display: flex;
   flex-direction: column;
   gap: var(--nltm-sp-1);
   font-size: var(--nltm-fs-2);
   color: var(--nltm-muted);
}

/* Row holding an input pair (color swatch + hex, etc.). Plain
   flex — NOT .nltm-check, whose input{width:1.05em} would collapse
   the color swatch. */
.cf-inputs {
   display: flex;
   align-items: center;
   gap: var(--nltm-sp-2);
}

/* Native color swatch sized so it doesn't collapse. */
.cf-color {
   width: 2.4rem;
   height: 2.1rem;
   padding: 2px;
   border: 1px solid var(--nltm-line);
   border-radius: var(--nltm-radius-sm);
   background: var(--nltm-surface);
   cursor: pointer;
}

.cf-num { width: 6rem; }
.cf-hex { width: 7rem; font-family: var(--nltm-font-mono); }

.cf-identify-row {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   gap: var(--nltm-sp-3);
   margin-top: var(--nltm-sp-5);
}

/* ---------- Readouts ---------- */

#statusLine,
#identifyResult {
   font-family: var(--nltm-font-mono);
   font-size: var(--nltm-fs-2);
   color: var(--nltm-ink);
}
#statusLine {
   display: inline-block;
   padding: var(--nltm-sp-2) var(--nltm-sp-3);
   background: var(--nltm-surface-2);
   border: 1px solid var(--nltm-line);
   border-radius: var(--nltm-radius-sm);
   color: var(--nltm-muted);
}
#identifyResult { color: var(--nltm-accent); }

/* ---------- Canvas ----------
   Do NOT add max-width/height rules that change the canvas's
   displayed size vs its pixel resolution: the zoom feature sets
   canvas.style.width/height and the pointer handlers map clicks
   via rect.width/canvas.width. .nltm-canvas-frame already scrolls
   an oversized canvas (overflow:auto). */
.cf-canvas-frame { margin-top: var(--nltm-sp-4); }

#canvas {
   cursor: crosshair;
   image-rendering: pixelated;
   background: var(--nltm-surface);
}

@media (max-width: 640px) {
   .cf-main { padding: var(--nltm-sp-5) var(--nltm-sp-4) var(--nltm-sp-7); }
   #FrameHeader.nltm-tool-header { flex-direction: column; gap: var(--nltm-sp-1); }
}