/* Dress Studio (lane L-STUDIO, /tools/studio). Builds on page-tools.css (fields, part pickers,
   buttons, requirement rows) and the TagBar atoms of style.css (.dm-stats). Colours only as
   var(--c-*) and sprites only as var(--s-*) (check_look C4); a pencil button takes its game colour
   from --pc, set by studio.js from ColorPicker.colours. */

.dm-studio__sheet { margin: 8px 0 6px; }
.dm-studio__canvas {
  display: block; width: 100%; max-width: 560px; height: auto; margin: 0 auto;
  cursor: crosshair; touch-action: manipulation;
}
.dm-studio__status { min-height: 1.4em; margin: 4px 0; font-family: var(--f-body); font-size: 15px; color: var(--c-title); }
.dm-studio__modes { display: flex; flex-wrap: wrap; gap: 0 18px; }
.dm-studio__fabric[hidden], .dm-studio__pencils[hidden], .dm-studio__brief[hidden] { display: none; }
.dm-studio__fabricrow { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 8px; align-items: center; }
.dm-studio__fabricrow .dm-select { max-width: none; }
.dm-studio__swatch {
  display: inline-block; flex: none; width: 44px; height: 44px; border-radius: 6px;
  background: var(--c-stat-row) center / cover no-repeat;
}
.dm-studio__pencils { display: grid; grid-template-columns: repeat(7, 36px); gap: 6px; margin: 4px 0 8px; }
.dm-studio__pencil {
  width: 36px; height: 36px; padding: 0; cursor: pointer; border-radius: 50%;
  border: 2px solid var(--c-sell-divider); background: var(--pc);
}
.dm-studio__pencil[aria-pressed="true"] { border: 4px solid var(--c-title); }
.dm-studio__bars { margin: 8px 0; }
.dm-studio__bars .dm-stat__value { min-width: 3.4em; }
.dm-studio__used { margin: 6px 0 12px; padding: 0; list-style: none; }
.dm-studio__usedrow {
  display: flex; gap: 10px; align-items: center; min-height: 44px; padding: 4px 0;
  border-bottom: 1px solid var(--c-sell-divider); font-family: var(--f-body); font-size: 17px; color: var(--c-text);
}
.dm-studio__usedrow .dm-studio__swatch { width: 32px; height: 32px; }
.dm-studio__brief { margin: 0 0 18px; }
.dm-studio__brief .dm-chips { margin: 6px 0; }
.dm-studio__plannerlink { margin: 12px 0 0; font-family: var(--f-body); font-size: 18px; }
.dm-studio__plannerlink a:not(.dm-btn) { display: inline-block; min-height: 24px; color: var(--c-link); }

@media (max-width: 719px) {
  .dm-studio__pencils { grid-template-columns: repeat(6, 36px); }
}