/* Avatar builder styles — loaded alongside css/my-data.css on my-data.html,
   where the builder lives inside the page's own .data-card/.data-page chrome
   (see .av-hero-card). Page-level html/body sizing is already set there.

   Selectors below are scoped under #av-tabs/#av-panel/#av-rename-btn (not just
   a class) specifically to out-specificity my-data.css's ".data-page button"
   rule — without that, its generic purple-fill button style wins on plain
   class selectors and turns every tab/option/swatch/rename button into a
   solid purple block. */

.av-hero-card { padding:22px; margin-bottom:22px; }
.sr-only-heading {
  position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

.av-layout { display:grid; grid-template-columns:260px 1fr; gap:22px; align-items:start; }

.av-preview-card { text-align:center; }
.av-preview { width:180px; height:190px; margin:0 auto 10px; background:var(--surface-2); overflow:hidden; }
.av-preview svg { width:100%; height:100%; display:block; }
/* An ID selector so its own radius always wins here regardless of what
   .pill-avatar sets elsewhere — this preview is a fixed 180x190 portrait
   box, not the small square in-game avatar chips .pill-avatar is sized for. */
#av-preview { border-radius:16px; }

.av-name-row { display:flex; align-items:center; justify-content:center; gap:6px; margin-bottom:8px; }
.av-name-row #av-name-display { font-size:16px; font-weight:700; color:var(--btn-text); }
.av-name-row #av-name-display .cosmetic-title { font-size:0.7em; font-weight:600; }

.av-save-msg { min-height:18px; font-size:13px; font-weight:700; color:var(--purple); margin:0 0 12px; }
#av-continue-wrap { margin-top:16px; }
#av-continue-wrap button {
  width:100%; border:0; border-radius:10px; padding:12px 17px; background:var(--purple);
  color:#fff; font:inherit; font-size:14px; font-weight:700; cursor:pointer;
}

.av-tabs { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px; }
#av-tabs .av-tab, #av-subtabs .av-tab {
  border:1.5px solid var(--btn-border); background:var(--bg); color:var(--btn-text);
  border-radius:99px; padding:7px 14px; font-size:13px; font-weight:600; cursor:pointer;
}
#av-tabs .av-tab.active, #av-subtabs .av-tab.active { background:var(--purple); border-color:var(--purple); color:#fff; }

/* Second-level tabs for the active group's members (e.g. Face → Eyes,
   Eyebrows, Nose…) — smaller than the group tabs above them to read as a
   sub-level, with its own divider (or .av-tabs's, when a group has only
   one member and this row is hidden) separating tabs from the picker. */
.av-subtabs { display:flex; flex-wrap:wrap; gap:6px; padding-bottom:16px; margin-bottom:18px; border-bottom:1.5px solid var(--btn-border); }
.av-subtabs[hidden] { display:none; }
#av-subtabs .av-tab { padding:5px 12px; font-size:12px; background:var(--surface-2); }
.av-tabs:has(+ .av-subtabs[hidden]) { padding-bottom:18px; border-bottom:1.5px solid var(--btn-border); }

.av-grid { display:flex; flex-wrap:wrap; gap:12px; }
#av-panel .av-opt {
  width:88px; display:flex; flex-direction:column; align-items:center; gap:4px;
  border:2px solid var(--btn-border); border-radius:12px; padding:6px 4px 8px;
  background:var(--bg); color:var(--btn-text); font:inherit; cursor:pointer;
  transition:border-color .12s, transform .1s;
}
#av-panel .av-opt:hover { transform:translateY(-2px); }
#av-panel .av-opt svg { width:56px; height:59px; display:block; }
#av-panel .av-opt.selected { border-color:var(--purple); background:rgba(128,90,213,.08); }
#av-panel .av-opt.locked { opacity:.55; }
.av-opt-label { font-size:10.5px; font-weight:600; text-align:center; line-height:1.2; }

/* Text-badge tiles (title/name colour/effect/avatar ring) — auto-width pill
   instead of the fixed 88px icon tile, since these hold a text label (a
   title can be a full phrase like "🌍 Globle Legend") rather than small
   avatar-part artwork; the fixed narrow width truncated or overflowed. */
#av-panel .av-opt.av-opt-pill {
  width:auto; flex-direction:row; gap:6px; padding:8px 14px;
}
#av-panel .av-opt.av-opt-pill:hover { transform:none; }
#av-panel .av-opt.av-opt-pill .av-opt-label { font-size:12.5px; white-space:nowrap; }

#av-panel .av-swatch {
  width:40px; height:40px; border-radius:50%; border:3px solid var(--btn-border);
  cursor:pointer; padding:0;
}
#av-panel .av-swatch.selected { border-color:var(--purple); box-shadow:0 0 0 2px var(--purple-light); }

.av-subheading {
  font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  color:var(--text-muted); margin:18px 0 10px; padding-top:16px; border-top:1.5px solid var(--btn-border);
}
.av-grid-swatches { gap:10px; }

/* Shown under a category's picker (e.g. Title, Hair) when the student
   doesn't own any shop-gated extras there yet — points back to the shop. */
.av-unlock-hint { font-size:12px; color:var(--text-muted); margin:10px 0 4px; text-align:left; width:100%; }
.av-unlock-hint a { color:var(--purple); font-weight:600; }

/* Rename icon — matches teacher.js's .rt-rename class-card pencil button. */
#av-rename-btn {
  width:24px; height:24px; border-radius:50%; background:var(--surface);
  border:1px solid var(--btn-border); color:var(--text-muted);
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  flex-shrink:0; padding:0;
}
#av-rename-btn:hover { background:#EEF4FF; border-color:#7F77DD; color:#7F77DD; }

@media(max-width:640px) {
  .av-layout { grid-template-columns:1fr; }
}