/* cape-maker — layout only; colours come from tokens.css via tool-theme.css. */

.cm { display: grid; gap: 12px; }

.cm-controls { padding: 14px 16px; }
.cm-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.cm-row-tight { gap: 10px; margin-top: 10px; }
.cm-field { display: flex; flex-direction: column; gap: 5px; min-width: 130px; }
.cm-field[hidden] { display: none; }
.cm-narrow { min-width: 92px; }
.cm-check { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--fg-muted); }

.cm-seg { display: flex; gap: 6px; }
.cm-seg .btn { padding: 7px 11px; font-size: 13px; }
.cm-seg .btn.is-on {
  background: var(--grass-deep);
  border-color: var(--line-strong);
  color: var(--grass-bright);
}

.cm-main { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 12px; align-items: start; }
.cm-stage { padding: 16px; }
.cm-stage h2 { margin: 0 0 10px; }

/* The editor is 64x32 natively and scaled up whole, so one screen block is one texel. */
.cm-paint-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 2 / 1;
  background:
    repeating-conic-gradient(var(--surface-2) 0 25%, var(--surface-3) 0 50%) 0 0 / 24px 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.cm-paint-wrap canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  image-rendering: pixelated;
  touch-action: none;
}
#cm-paint { cursor: crosshair; }
.cm-overlay { pointer-events: none; }

#cm-3d { width: 100%; max-width: 360px; height: auto; display: block; margin: 0 auto; cursor: grab; touch-action: none; }
#cm-3d:active { cursor: grabbing; }

.cm-status { margin: 10px 0 0; font-size: 13px; color: var(--fg-muted); min-height: 1.2em; }
.cm-bad { color: #fca5a5; }
.cm-hint { margin: 10px 0 0; font-size: 12.5px; color: var(--fg-dim); }
.cm-note { margin: 0; font-size: 12.5px; color: var(--fg-dim); }

@media (max-width: 1000px) {
  .cm-main { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .cm-field { min-width: 100%; }
  .cm-seg { flex-wrap: wrap; }
}