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

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

.sv-controls { padding: 14px 16px; }
.sv-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.sv-row + .sv-row { margin-top: 12px; }

.sv-field { display: flex; flex-direction: column; gap: 5px; min-width: 150px; }
.sv-field > span { line-height: 1.2; }
.sv-check { flex-direction: row; align-items: center; gap: 8px; min-width: 0; }
.sv-check span { font-size: 13.5px; color: var(--fg-muted); }

.sv-stage {
  display: grid;
  place-items: center;
  padding: 16px;
  /* The canvas is a fixed 440x520; keep it centred and let it shrink on phones. */
  overflow: hidden;
}
.sv-stage canvas { max-width: 100%; height: auto; cursor: grab; touch-action: none; }
.sv-stage canvas:active { cursor: grabbing; }

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

.sv-note { margin: 0; font-size: 12.5px; color: var(--fg-dim); }

@media (max-width: 620px) {
  .sv-field { min-width: 100%; }
  .sv-check { min-width: 0; }
}