/* EAI City — the avatar editor (av-). Owner: avatars (js/ui/avatar.js). Portraits come from js/ui/portraits.js.
   Calm, adult styling: hairline borders, ink selection rings, small uppercase labels with the chosen value. */
.av-ed {
  --av-ink: var(--ink, #1f2430); --av-ink2: var(--ink2, #5f6470); --av-line: var(--line, #e3dfd8); --av-line2: var(--line2, #cfc9bf);
  --av-panel: var(--panel, #fff); --av-panel2: var(--panel2, #f5f2ed); --av-tile: #eeeae3;
  display: grid; grid-template-columns: 248px minmax(0, 1fr); gap: 32px; align-items: start;
  font-family: var(--font, 'Manrope', system-ui, sans-serif); color: var(--av-ink);
}
.av-ed.no-preview { grid-template-columns: 1fr; }
.av-ed__stage { position: sticky; top: 0; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.av-ed__preview {
  width: 220px; height: 220px; border-radius: 50%; overflow: hidden; background: var(--av-bg, #e9e4dc);
  box-shadow: 0 0 0 1px rgba(20, 22, 28, 0.08), 0 22px 44px -22px rgba(20, 22, 28, 0.5);
}
.av-ed__preview img { display: block; width: 100%; height: 100%; }
.av-ed__preview.bump img { animation: avIn 0.45s cubic-bezier(0.2, 0.8, 0.2, 1); }
@keyframes avIn { from { transform: scale(0.965); opacity: 0.55; } to { transform: none; opacity: 1; } }
.av-ed__rnd { min-width: 200px; gap: 8px; }
.av-ed__rnd svg { flex: none; }
.av-ed__nickf { width: 100%; display: flex; flex-direction: column; gap: 7px; margin: 0; }
.av-ed__nickl { font: 700 0.78rem/1.2 var(--font, sans-serif); letter-spacing: 0.08em; text-transform: uppercase; color: var(--av-ink2); }
.av-ed__nick { min-height: 48px; width: 100%; }

.av-ed__rows { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.av-row { display: flex; flex-direction: column; gap: 10px; padding-bottom: 16px; border-bottom: 1px solid var(--av-line); }
.av-row:last-child { border-bottom: 0; padding-bottom: 0; }
.av-row[hidden] { display: none; }
.av-row__head { display: flex; align-items: baseline; gap: 10px; min-height: 18px; }
.av-row__label { font: 700 0.78rem/1.2 var(--font, sans-serif); letter-spacing: 0.08em; text-transform: uppercase; color: var(--av-ink2); }
.av-row__val { font: 500 0.88rem/1.2 var(--font, sans-serif); color: var(--av-ink); }
.av-row[data-key="gender"] .av-row__val { display: none; }
.av-row__opts { display: flex; flex-wrap: wrap; gap: 10px; }

.av-opt { position: relative; flex: none; padding: 0; border: 0; background: none; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform 0.12s ease; }
.av-opt:active { transform: scale(0.96); }
.av-opt:focus-visible { outline: 2px solid var(--av-ink); outline-offset: 3px; }

/* colour swatches */
.av-swatches { gap: 6px; }
.av-swatch { width: 40px; height: 40px; padding: 5px; border-radius: 50%; }
.av-swatch i { display: block; width: 100%; height: 100%; border-radius: 50%; background: var(--sw); box-shadow: inset 0 0 0 1px rgba(20, 22, 28, 0.16), inset 0 -3px 6px rgba(20, 22, 28, 0.08); }
.av-swatch::after { content: ""; position: absolute; inset: 1px; border-radius: 50%; box-shadow: inset 0 0 0 1px transparent; transition: box-shadow 0.15s ease; pointer-events: none; }
.av-swatch:hover::after { box-shadow: inset 0 0 0 1px var(--av-line2); }
.av-swatch.on::after { box-shadow: inset 0 0 0 2px var(--av-ink); }

/* portrait thumbnails */
.av-thumb { width: 72px; height: 72px; border-radius: 14px; overflow: hidden; background: var(--av-tile); }
.av-thumb::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px var(--av-line); transition: box-shadow 0.15s ease; pointer-events: none; }
.av-thumb:hover::after { box-shadow: inset 0 0 0 1px var(--av-line2); }
.av-thumb.on { box-shadow: 0 8px 18px -10px rgba(20, 22, 28, 0.55); }
.av-thumb.on::after { box-shadow: inset 0 0 0 2px var(--av-ink); }
.av-pic { position: relative; display: block; width: 100%; height: 100%; }
.av-pic img { display: block; width: 100%; height: 100%; }
/* "none" marker (no glasses / no beard) */
.av-none { position: absolute; top: 5px; right: 5px; width: 18px; height: 18px; border-radius: 50%; background: rgba(255, 255, 255, 0.94); box-shadow: inset 0 0 0 1.5px var(--av-ink2); }
.av-none::before { content: ""; position: absolute; left: 3.5px; right: 3.5px; top: 8.25px; height: 1.5px; border-radius: 1px; background: var(--av-ink2); transform: rotate(-45deg); }

/* gender: a quiet segmented control */
.av-segs { display: inline-flex; align-self: flex-start; gap: 2px; padding: 3px; border-radius: 999px; background: var(--av-panel2); box-shadow: inset 0 0 0 1px var(--av-line); }
.av-seg { min-height: 38px; padding: 6px 20px; border-radius: 999px; font: 600 0.9rem/1 var(--font, sans-serif); color: var(--av-ink2); transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease; }
.av-seg:hover { color: var(--av-ink); }
.av-seg.on { background: var(--av-panel); color: var(--av-ink); box-shadow: 0 1px 3px rgba(20, 22, 28, 0.14), 0 0 0 1px var(--av-line); }

@media (max-width: 960px) {
  .av-ed { grid-template-columns: 208px minmax(0, 1fr); gap: 24px; }
  .av-ed__preview { width: 188px; height: 188px; }
  .av-ed__rnd { min-width: 0; width: 100%; }
}
@media (max-width: 600px) {
  .av-ed { grid-template-columns: 1fr; gap: 14px; }
  .av-ed__stage {
    position: sticky; top: 0; z-index: 2; display: grid; grid-template-columns: 96px minmax(0, 1fr); align-items: center; gap: 8px 14px;
    padding: 10px 0 12px; background: var(--av-panel); box-shadow: 0 10px 12px -12px rgba(20, 22, 28, 0.35);
  }
  .av-ed__preview { grid-row: span 2; width: 96px; height: 96px; }
  .av-ed__rnd { min-width: 0; width: 100%; min-height: 44px; }
  .av-ed__nickf { gap: 4px; }
  .av-ed__nick { min-height: 44px; padding: 8px 12px; font-size: 1rem; }
  .av-row { gap: 8px; padding-bottom: 14px; }
  .av-row__opts { gap: 8px; }
  .av-thumb { width: 62px; height: 62px; border-radius: 12px; }
  .av-swatches { gap: 3px; }
  .av-swatch { width: 38px; height: 38px; padding: 4px; }
}
@media (prefers-reduced-motion: reduce) {
  .av-ed__preview.bump img { animation: none; }
  .av-opt { transition: none; }
}
/* phones, the editor inside a dialog: the sticky preview also covers the dialog's top padding (no options peeking above it) */
@media (max-width: 600px) {
  .modal .av-ed__stage { top: -26px; margin-top: -16px; padding-top: 36px; }
}