/* Аватар (/me/avatar; avatar studio spec §5.4): the maker — a stage pinned in view
   under the top bar while the tiles scroll, the tabs and their picture tiles —
   then the piece-set gallery with its board. */
@layer page {
  .av { max-width: 1040px; margin: 0 auto; --board-max: 360px; }

  /* ---- The maker ----------------------------------------------------------- */
  .av-studio { display: grid; gap: var(--sp-4); align-items: start; }
  .av-studio__title { margin: 0; font-size: var(--fs-20); font-weight: var(--fw-heavy); }

  .av-stage {
    position: sticky;
    top: 56px;                       /* under the phone's top bar (shell.css) */
    z-index: 20;                     /* under the top bar (30) and the tab bar (40) */
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--sp-2) var(--sp-4);
    align-items: center;
    padding: var(--sp-3);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    background: var(--surface);
    box-shadow: var(--shadow-1);
  }
  .av-stage__av { grid-row: span 2; }
  .av-stage__persona { margin: 0; color: var(--muted); font-weight: var(--fw-bold); }
  .av-stage__acts { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
  .av-save { position: relative; }
  .av-save[data-dirty='true']::after {
    content: "";
    position: absolute;
    top: -5px;
    right: -5px;
    width: 14px;
    height: 14px;
    border: 2px solid var(--surface);
    border-radius: var(--r-pill);
    background: var(--gold);
  }
  .av-moments { display: grid; grid-column: 1 / -1; gap: var(--sp-1); min-width: 0; }
  .av-moments__label { margin: 0; color: var(--muted); font-size: var(--fs-12); font-weight: var(--fw-heavy); letter-spacing: 0.04em; text-transform: uppercase; }
  .av-moments__row { display: flex; gap: var(--sp-2); padding-bottom: var(--sp-1); overflow-x: auto; }
  .av-moment { flex: none; min-height: var(--control-h); }
  .av-moment__fig { margin-right: var(--sp-1); font-family: var(--font-chess); }

  .av-editor { min-width: 0; }
  .av-tabs { display: flex; gap: var(--sp-1); padding: var(--sp-2); overflow-x: auto; border-bottom: 1px solid var(--line); }
  .av-tab {
    flex: none;
    min-width: var(--control-h);
    min-height: var(--control-h);
    padding: 0 var(--sp-3);
    border: 0;
    border-radius: var(--r-md);
    background: transparent;
    color: var(--muted);
    font-weight: var(--fw-heavy);
    cursor: pointer;
  }
  .av-tab[aria-selected='true'] { background: var(--primary-soft); color: var(--primary); }
  .av-panel { display: grid; gap: var(--sp-5); padding: var(--sp-4); }
  .av-group { display: grid; gap: var(--sp-2); }
  .av-group__head { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: baseline; margin: 0; }
  .av-group__title { font-weight: var(--fw-heavy); }
  .av-group__value { color: var(--muted); font-size: var(--fs-13); }

  .av-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(68px, 1fr)); gap: var(--sp-2); }
  .av-tile { aspect-ratio: 1; min-height: var(--control-h); padding: var(--sp-1); border: 2px solid var(--line); border-radius: var(--r-md); background: var(--surface-2); cursor: pointer; }
  .av-tile[aria-pressed='true'] { border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary); }
  .av-tile[data-zoom='face'] .av-tile__art svg { transform: scale(1.6); transform-origin: 50% 54%; }
  .av-tile[data-zoom='top'] .av-tile__art svg { transform: scale(1.2); transform-origin: 50% 18%; }
  .av-tile[data-zoom='body'] .av-tile__art svg { transform: scale(1.35); transform-origin: 50% 96%; }
  .av-tile[data-zoom='pet'] .av-tile__art svg { transform: scale(1.9); transform-origin: 76% 80%; }

  .av-swatches { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
  .av-swatch { width: 44px; height: 44px; border: 2px solid var(--line-strong); border-radius: var(--r-pill); cursor: pointer; }
  .av-swatch[aria-pressed='true'] { outline: 3px solid var(--primary); outline-offset: 2px; }

  .av-personas { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--sp-3); }
  .av-persona { display: grid; justify-items: center; gap: var(--sp-1); padding: var(--sp-3); border: 2px solid var(--line); border-radius: var(--r-lg); background: var(--surface-2); text-align: center; cursor: pointer; }
  .av-persona[aria-pressed='true'] { border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary); }
  .av-persona__name { font-weight: var(--fw-heavy); }
  .av-persona__desc { color: var(--muted); font-size: var(--fs-13); }

  /* ---- The piece sets ----------------------------------------------------- */
  .av-sets { display: grid; gap: var(--sp-5); }
  .av-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: var(--sp-3); }
  /* Each thumbnail is a set's White king, its colours drawn into the art (board studio spec §4.3). */
  .av-thumb { aspect-ratio: 1; min-height: 44px; padding: var(--sp-1); border: 2px solid var(--line); border-radius: var(--r-md); background: var(--surface); cursor: pointer; }
  .av-thumb svg { display: block; width: 100%; height: 100%; }
  .av-thumb[aria-pressed='true'] { border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary); }

  @media (min-width: 700px) {
    .av-stage { top: var(--top-h); }
  }
  @media (min-width: 1100px) {
    .av-studio { grid-template-columns: 300px minmax(0, 1fr); }
    .av-studio__title { grid-column: 1 / -1; }
    .av-stage { top: calc(var(--top-h) + var(--sp-4)); grid-template-columns: 1fr; justify-items: center; padding: var(--sp-5); text-align: center; }
    .av-stage__av { grid-row: auto; }
    .av-stage__acts { justify-content: center; }
    .av-moments__row { flex-wrap: wrap; justify-content: center; overflow: visible; }
    .av-sets { grid-template-columns: minmax(0, 360px) minmax(0, 1fr); align-items: start; }
  }
}