/* The wardrobe and avatars --------------------------------------------------- */

/* An avatar is pixel art: hair behind a head over a body over legs, each
   piece put in its place in the figure's box by its own style attribute
   (gear-shapes.js), so all a page says is how wide the figure is — 48
   pixels of picture, drawn at whole multiples so a pixel stays a square. */
.avatar-figure { flex-shrink: 0; }
.avatar-figure img, .avatar-figure canvas, .avatar-head img, .gear { display: block; image-rendering: pixelated; }
.avatar-figure.big { width: 192px; }

/* The head alone, where there is only room for a face: the square at the
   top of the figure, its hair around it, beside your name, a crew row and
   every person's message. Each box is half as big again as the face in it. */
.avatar-head { display: block; position: relative; overflow: hidden; width: 36px; height: 36px; flex-shrink: 0; }
.who .avatar-head { width: 40.5px; height: 40.5px; }
.srow .hname { display: flex; align-items: center; gap: 8px; }
.srow .hname .avatar-head { width: 30px; height: 30px; }
.msg .from { display: flex; align-items: center; gap: 7px; }
.msg .from .avatar-head { width: 33px; height: 33px; }

/* The wardrobe fills the centre pane while it is open. */
.wardrobe .bar .title { flex: 1; }
.wardrobe-joy { color: var(--num); font-weight: 700; white-space: nowrap; }
.wardrobe-body { padding: 16px 20px 28px; display: flex; flex-direction: column; gap: 22px; }
.wardrobe-body h3 { margin: 0 0 10px; font-size: 14px; }
.wardrobe-you { display: flex; gap: 22px; align-items: flex-start; flex-wrap: wrap; }
.wardrobe-you .col { flex: 1 1 16rem; min-width: 0; gap: 12px; }
.wear-row { display: flex; flex-direction: column; gap: 6px; }

/* A piece you own, to put on or take off: lit in the studio's cyan while it
   is the one worn, because pressing it again takes it off. */
.gear-pick {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 10px 4px 4px; border-radius: var(--radius);
}
.gear-pick.on { border-color: var(--accent); color: var(--accent); }
.gear-pick .gear { width: 32px; height: auto; }

/* Everybody's gear, and yours: a tile each. */
.gear-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); gap: 10px; }
.gear-piece {
  display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center;
  padding: 10px 8px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--panel-2);
}
.gear-piece .gear { width: 64px; height: auto; margin-bottom: 4px; }
.gear-piece .gear-name { font-weight: 600; overflow-wrap: anywhere; }

/* Drawing a piece: the name and the button to make it share the bar. */
.wardrobe .gear-name-field { flex: 1 1 10rem; min-width: 6rem; }

/* Beside the drawing, the piece in its place on a figure (wardrobe.js). The
   others are buttons with nothing of a button's own — no padding, no
   border — so they still meet as one figure; under the pointer the one to
   press is ringed. On the drawing's paper when it is light, which reaches
   under a clear border, because a piece's place is measured from inside
   any padding. */
.gear-drawing { display: flex; flex: 1; min-height: 0; }
.gear-drawing > .drawing { min-width: 0; }
.gear-context {
  flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 14px 16px; border-left: 1px solid var(--border-soft);
}
.gear-context .hint { max-width: 7rem; text-align: center; }
.avatar-figure.context {
  box-sizing: content-box; width: 144px; border: 8px solid transparent; border-radius: var(--radius);
}
.avatar-figure.context.paper-light { background: #ececf0; }
.gear-try { display: block; padding: 0; border: 0; border-radius: 0; background: none; cursor: pointer; }
.gear-try img { width: 100%; height: 100%; }
.gear-try:hover:not(:disabled) { background: none; outline: 2px solid var(--accent); outline-offset: 1px; }
@media (max-width: 860px) {
  /* Above the drawing on a phone, small and on its side, so the canvas keeps
     the height it needs. */
  .gear-drawing { flex-direction: column; }
  .gear-context { order: -1; flex-direction: row; padding: 6px 16px; border-left: 0; border-bottom: 1px solid var(--border-soft); }
  .gear-context .hint { max-width: none; text-align: left; }
  .avatar-figure.context { width: 60px; border-width: 4px; }
}

/* Somebody's whole avatar, in their dialog. */
.person-figure { display: flex; justify-content: center; padding: 8px 0 4px; }