/* skin-pack-maker — layout only; colours come from tokens.css via tool-theme.css.
 * Shared by cape-pack-builder, which reuses the .sp-* classes. */

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

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

.sp-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.sp-row-tight { gap: 10px; margin-top: 10px; }
.sp-field { display: flex; flex-direction: column; gap: 5px; min-width: 150px; }
.sp-field[hidden] { display: none; }
.sp-grow { flex: 1 1 240px; }
.sp-field textarea { resize: vertical; min-height: 62px; }

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

.sp-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.sp-head h2 { margin: 0; }
.sp-head b { color: var(--fg-muted); font-weight: 700; }
.sp-actions { display: flex; gap: 8px; }

.sp-list { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 7px; }
.sp-list li {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 9px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.sp-face {
  width: 32px; height: 32px; flex: none;
  image-rendering: pixelated;
  border: 1px solid var(--line);
  border-radius: 2px;
  background: var(--surface-3);
}
.sp-name-input { flex: 1 1 140px; min-width: 100px; }
.sp-x { padding: 4px 9px; font-size: 11.5px; }
.sp-empty { margin: 12px 0 0; font-size: 13px; color: var(--fg-dim); }

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

.sp-steps { margin: 0; padding-left: 20px; font-size: 13.5px; color: var(--fg-muted); }
.sp-steps li { margin-bottom: 7px; }

/* cape pack: two thumbnails per row */
.sp-pair { display: flex; align-items: center; gap: 5px; flex: none; }
.sp-cape {
  width: 32px; height: 16px; flex: none;
  image-rendering: pixelated;
  border: 1px solid var(--line);
  border-radius: 2px;
  background: var(--surface-3);
}
.sp-cape-empty { display: grid; place-items: center; font-size: 10px; color: var(--fg-dim); }

@media (max-width: 620px) {
  .sp-field { min-width: 100%; }
  .sp-list li { flex-wrap: wrap; }
  .sp-name-input { flex-basis: 100%; }
}