/**
 * DEV commander dress-up playtool layout.
 * Shell tokens only — docs/frontend-design-patterns.md § Game shell.
 */

.playtools-card--commander-dress .cpd-dress {
  display: grid;
  grid-template-columns: calc(var(--gs-u-w) * 22) minmax(0, 1fr);
  gap: var(--pt-gap-sm) var(--pt-gap-md);
  align-items: start;
}

.playtools-card--commander-dress .cpd-dress__stage-wrap {
  position: sticky;
  top: var(--pt-gap-xs);
  box-sizing: border-box;
  width: 100%;
  aspect-ratio: 3 / 4;
  max-height: calc(var(--gs-u-h) * 42);
  background: rgba(8, 5, 14, 0.92);
  border: var(--gs-hairline) solid var(--gs-border-gold-faint);
}

.playtools-card--commander-dress .cpd-dress__stage {
  position: relative;
  width: 100%;
  height: 100%;
}

.playtools-card--commander-dress .cpd-dress__panels {
  min-width: 0;
}

.playtools-card--commander-dress .cpd-dress__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--pt-gap-2xs) var(--pt-gap-sm);
}

.playtools-card--commander-dress .cpd-dress__field {
  display: grid;
  grid-template-columns: calc(var(--gs-u-w) * 5.5) minmax(0, 1fr);
  gap: var(--pt-gap-2xs);
  align-items: center;
  margin: 0;
  font-size: var(--gs-text-xs);
  color: #d7c6a2;
}

.playtools-card--commander-dress .cpd-dress__field--grow {
  flex: 1 1 auto;
  min-width: 0;
  grid-template-columns: calc(var(--gs-u-w) * 5) minmax(0, 1fr);
}

.playtools-card--commander-dress .cpd-dress__inline {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pt-gap-xs) var(--pt-gap-md);
  align-items: center;
  margin-top: var(--pt-gap-xs);
}

.playtools-card--commander-dress .cpd-dress__check {
  display: inline-flex;
  gap: var(--pt-gap-2xs);
  align-items: center;
  margin: 0;
  white-space: nowrap;
  font-size: var(--gs-text-xs);
  color: #d7c6a2;
}

.playtools-card--commander-dress .cpd-dress__anchors {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pt-gap-xs) var(--pt-gap-sm);
  align-items: center;
  margin-top: var(--pt-gap-sm);
}

.playtools-card--commander-dress .cpd-dress__xy {
  display: inline-grid;
  grid-template-columns: calc(var(--gs-u-w) * 3.5) calc(var(--gs-u-w) * 6.5) calc(var(--gs-u-w) * 6.5);
  gap: var(--pt-gap-2xs);
  align-items: center;
  margin: 0;
  font-size: var(--gs-text-xs);
  color: #d7c6a2;
}

/* Compact fields: playtools-form defaults to width 100% — override for this tool only. */
.playtools-card--commander-dress .cpd-dress__field select {
  width: 100%;
  max-width: calc(var(--gs-u-w) * 16);
}

.playtools-card--commander-dress .cpd-dress__xy input[type="number"] {
  box-sizing: border-box;
  width: calc(var(--gs-u-w) * 6.5);
  min-width: calc(var(--gs-u-w) * 6.5);
  padding-inline: calc(var(--gs-u-w) * 0.45);
}

.playtools-card--commander-dress .cpd-dress__field--grow input[type="range"] {
  width: 100%;
  max-width: calc(var(--gs-u-w) * 14);
  margin: 0;
}