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

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

.am-controls { padding: 14px 16px; }
.am-controls h2 { margin: 0 0 10px; }

.am-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.am-row-tight { gap: 10px; margin-top: 10px; }
.am-field { display: flex; flex-direction: column; gap: 5px; min-width: 140px; }
/* `display: flex` beats the [hidden] attribute's UA `display: none`, so the sunburst ray
 * slider stayed on screen for every background. */
.am-field[hidden] { display: none; }
.am-field > span { line-height: 1.2; }
.am-grow { flex: 1 1 200px; }
.am-narrow { min-width: 96px; }

.am-check { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--fg-muted); }
.am-check input { margin: 0; }

/* segmented control */
.am-seg { display: flex; gap: 6px; }
.am-seg .btn { padding: 7px 12px; font-size: 13px; }
.am-seg .btn.is-on,
.am-grid .btn.is-on {
  background: var(--grass-deep);
  border-color: var(--line-strong);
  color: var(--grass-bright);
}

.am-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.am-grid-3 { grid-template-columns: repeat(3, 1fr); }
.am-grid-5 { grid-template-columns: repeat(5, 1fr); }
.am-grid .btn { padding: 8px 6px; font-size: 12.5px; }

/* stage + sidebar */
.am-main { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 12px; align-items: start; }
.am-side { display: grid; gap: 12px; }

.am-stage { padding: 16px; display: grid; place-items: center; gap: 10px; }
.am-preview-wrap { position: relative; width: 100%; max-width: 512px; aspect-ratio: 1; }
.am-preview-wrap canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  image-rendering: pixelated;
  border-radius: var(--radius);
}
/* The GL canvas stays invisible and only catches pointer events for the 3D styles. Showing
 * it instead of the composed preview would be simpler, but then the background, border and
 * circle crop would be missing from what you see and present in what you download. */
.am-gl { opacity: 0; pointer-events: none; image-rendering: auto; }
.am-gl.is-live { pointer-events: auto; cursor: grab; }
.am-gl.is-live:active { cursor: grabbing; }

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

/* group portrait */
.am-members { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 7px; }
.am-members li {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 6px 5px 11px;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius);
  font-size: 13px;
}
.am-x { padding: 3px 8px; font-size: 11.5px; }
.am-group-canvas {
  margin-top: 12px; max-width: 100%; height: auto;
  image-rendering: pixelated;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius);
}

@media (max-width: 1000px) {
  .am-main { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .am-field { min-width: 100%; }
  .am-grid, .am-grid-3 { grid-template-columns: repeat(2, 1fr); }
  .am-grid-5 { grid-template-columns: repeat(3, 1fr); }
}