/* components/avatar.css — the learner's face tile and the chooser card
   (wireframes 22a/22b; js/components/avatar.js draws them).

   Extends the playful kit rather than restyling it: a face is a .p-node on
   one of four grounds, the card is the trainer's .zoom-panel wearing the
   kit's ink border and offset edge. Every colour is a --play-* token
   (decision 0008). Loads in the components layer after playful.css. */

/* The four grounds. Ink on the ink ground is the card colour so the name
   label stays readable; the emoji face is unaffected by `color`. */
.av-face,.av-tile,.av-swatch{background:var(--play-card);color:var(--play-ink)}
.is-bg-soft.av-face,.is-bg-soft.av-tile,.is-bg-soft.av-swatch{background:var(--play-accent-soft)}
.is-bg-accent.av-face,.is-bg-accent.av-tile,.is-bg-accent.av-swatch{background:var(--play-accent);color:var(--play-accent-ink)}
.is-bg-ink.av-face,.is-bg-ink.av-tile,.is-bg-ink.av-swatch{background:var(--play-ink);color:var(--play-card)}

/* Face tile: the companion, optionally with its name inside (the 76px
   profile face). Sizes arrive inline from Avatar.face(). */
.av-face{flex-direction:column;gap:0;line-height:1}
.av-face .p-tag{font-size:.55rem;color:inherit;margin-top:2px}
.av-face.is-raised{box-shadow:0 4px 0 var(--play-edge)}

/* The card over the page. .zoom-panel gives the backdrop grid and the
   scroll cap; this trades its soft look for the kit's hand-drawn one. */
.zoom-panel.av-card{
  max-width:560px;text-align:left;padding:16px 18px;
  border:2px solid var(--play-ink);border-radius:12px;
  background:var(--play-card);color:var(--play-ink);
  box-shadow:8px 8px 0 var(--play-edge);font-family:var(--play-display);
}
.av-head{display:flex;align-items:center;gap:10px}
.av-head b{font-size:1.4rem;flex:1;min-width:0}
.av-x{width:26px;height:26px;font-size:.75rem;padding:0;cursor:pointer;font-family:inherit}
.av-tabs{display:flex;align-items:center;gap:6px;margin-top:10px;flex-wrap:wrap}
.av-tabs .p-tag{margin-left:auto}
.p-pill.is-ink{background:var(--play-ink);color:var(--play-card)}

/* Companion grid — six across on the card, four when the card is narrow. */
.av-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin-top:10px}
.av-tile{width:100%;height:auto;aspect-ratio:1;font-size:1.6rem;padding:0;cursor:pointer;font-family:inherit;transition:transform .06s ease}
.av-tile[aria-pressed="true"]{box-shadow:0 0 0 3px var(--play-card),0 0 0 6px var(--play-accent)}
.av-tile:hover{transform:translateY(1px)}
.av-lock{flex-direction:column;gap:0;font-size:1.1rem;cursor:default}
.av-lock .p-tag{font-size:.5rem;letter-spacing:.04em;line-height:1.1;text-align:center}

/* Selected companion: face, name and line, the four ground swatches. */
.av-sel{display:flex;align-items:center;gap:10px;margin-top:12px;border-top:2px solid var(--play-track);padding-top:10px;flex-wrap:wrap}
.av-who{flex:1;min-width:140px;display:flex;flex-direction:column;gap:1px}
.av-who b{font-size:1rem}
.av-who .p-tag{text-transform:none;letter-spacing:0;font-size:.8rem;color:var(--play-ink)}
.av-bgs{display:flex;gap:4px}
.av-swatch{width:24px;height:24px;border-radius:50%;border:2px solid var(--play-ink);padding:0;cursor:pointer}
.av-swatch[aria-pressed="true"]{box-shadow:0 0 0 2px var(--play-card),0 0 0 4px var(--play-accent)}

.av-foot{display:flex;align-items:center;justify-content:flex-end;gap:8px;margin-top:12px;flex-wrap:wrap}
.av-foot .p-btn,.av-foot .p-gbtn{font-size:.9rem}

/* The kit gives .p-btn/.p-gbtn a focus ring; tiles and swatches get the
   same one so a keyboard learner can see where they are in the grid. */
.av-tile:focus-visible,.av-swatch:focus-visible,.av-x:focus-visible{outline:3px solid var(--play-link);outline-offset:2px}

/* .p-tag uppercases at kit level with no Hindi cancel; Devanagari must
   never be uppercased (docs/bugs.md #60 family). */
:root[lang="hi"] .av-card .p-tag,:root[lang="hi"] .av-face .p-tag{text-transform:none;letter-spacing:0}

@media (max-width:480px){
  .av-grid{grid-template-columns:repeat(4,1fr)}
  .zoom-panel.av-card{padding:14px 12px}
}
@media (prefers-reduced-motion:reduce){
  .av-tile{transition:none}
  .av-tile:hover{transform:none}
}