/* Shared avatar-carousel skin (v2.33, Claude Design Brief 1): used by the
 * anonymous funnel (landing) AND the create/draft page so pre- and post-pay
 * show ONE unified interaction. Centered = preview spotlight (is-centered),
 * checked = selection badge (is-checked / aria-pressed) - separate signals.
 * v2.33: CSS scroll-snap removed - centering moved to the JS glide-on-idle
 * in gorocket-avatar-carousel.js (snap fought the endless-wrap resets). */

/* Controls row ON TOP of the carousel: Select all / counter / upload. */
.gr-avcar-head { display: flex; align-items: center; gap: .7rem; margin: 0 0 .6rem; }
.gr-avcar-selall { padding: .4rem .95rem; border-radius: 999px; cursor: pointer;
  border: 1px solid rgba(255,90,31,.55); background: rgba(255,90,31,.1);
  color: #ffb199; font: inherit; font-size: .82rem; font-weight: 600;
  transition: background .15s, border-color .15s; }
.gr-avcar-selall:hover { background: rgba(255,90,31,.2); border-color: rgba(255,90,31,.85); }
.gr-avcar-count { font-size: .82rem; font-weight: 600; opacity: .85; white-space: nowrap; }
.gr-avcar-upload { display: flex; align-items: center; gap: .5rem; margin-left: auto;
  padding: .45rem .95rem; border-radius: 12px; cursor: pointer;
  border: 1px dashed rgba(255,255,255,.35); background: rgba(255,255,255,.04);
  color: inherit; font: inherit; font-size: .82rem; font-weight: 600;
  transition: border-color .15s, background .15s; }
.gr-avcar-upload:hover { border-color: rgba(255,90,31,.7); background: rgba(255,90,31,.08); }
.gr-avcar-upload__plus { display: grid; place-items: center; width: 20px; height: 20px;
  border-radius: 50%; border: 1px solid rgba(255,90,31,.7); color: #FF5A1F;
  font-size: .85rem; line-height: 1; }

.gr-avcar-wrap { display: block; }
.gr-avcar { min-width: 0; position: relative; }
/* Soft edge fades signal "there is more" in both directions. */
.gr-avcar::before, .gr-avcar::after { content: ""; position: absolute; top: 0; bottom: 0;
  width: 34px; z-index: 2; pointer-events: none; }
.gr-avcar::before { left: 0; background: linear-gradient(90deg, #051C2C, transparent); }
.gr-avcar::after { right: 0; background: linear-gradient(270deg, #051C2C, transparent); }
.gr-avcar__track { display: flex; gap: .6rem; overflow-x: auto; overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none; padding: 14px 2px; }
.gr-avcar__track::-webkit-scrollbar { display: none; }
.gr-avcar__card { flex: 0 0 108px;
  transition: box-shadow .2s; will-change: transform, opacity; }

.gr-char { position: relative; display: flex; flex-direction: column; align-items: center;
  text-align: center; gap: .3rem; padding: 0 0 .45rem; cursor: pointer; color: inherit;
  border: 1px solid rgba(255,255,255,.18); border-radius: 14px; background: rgba(255,255,255,.04);
  transition: border-color .15s, background .15s, box-shadow .15s, transform .1s; }
.gr-char:hover { transform: translateY(-2px); }
/* CHECKED = in the selection set: orange badge + border (tap to toggle). */
.gr-char[aria-pressed="true"] { border-color: rgba(255,90,31,.85); background: rgba(255,90,31,.1); }
.gr-char__check { position: absolute; top: 6px; right: 6px; z-index: 3;
  display: none; place-items: center; width: 22px; height: 22px; border-radius: 50%;
  background: #FF5A1F; color: #fff; font-size: .8rem; font-weight: 700; line-height: 1;
  box-shadow: 0 2px 8px rgba(0,0,0,.45); }
.gr-char.is-checked .gr-char__check { display: grid; }
/* CENTERED = the previewed card: spotlight glow ring (separate signal). */
.gr-char.is-centered { border-color: rgba(255,90,31,.9);
  box-shadow: 0 0 0 2px rgba(255,90,31,.75), 0 10px 34px rgba(255,90,31,.32); }
.gr-char__img { display: block; width: 100%; aspect-ratio: 4/5; object-fit: cover;
  object-position: center top; border-radius: 13px 13px 8px 8px;
  background: rgba(255,255,255,.08); }
.gr-char__name { font-size: .82rem; font-weight: 600; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; max-width: 100%; padding: 0 .3rem; }
.gr-char__lang { font-size: .68rem; opacity: .6; line-height: 1.2; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; max-width: 100%; padding: 0 .3rem; }

/* Background swatch cards (v2.32 single-select axis): CSS approximations of
 * teaser.tsx personBandBackground - the real render uses the brand colors;
 * office/home/outdoor stay placeholder tints until the hosted art lands. */
.gr-bg-swatch { display: block; width: 100%; aspect-ratio: 4/5;
  border-radius: 13px 13px 8px 8px; }
/* Dimensional backdrops matching teaser.tsx personBandBackground: a soft key
 * light + environment sweep + grounding, so the swatch reads as a real space. */
.gr-bg-swatch--studio { background: radial-gradient(120% 78% at 50% 12%, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0) 55%), linear-gradient(180deg, #3a4657 0%, #232d3a 62%, #0a0f16 100%); }
.gr-bg-swatch--brand { background: radial-gradient(90% 60% at 50% 16%, rgba(255,255,255,0.16) 0%, rgba(255,255,255,0) 55%), linear-gradient(160deg, #FF5A1F 0%, #99381a 60%, #3a1508 140%); }
.gr-bg-swatch--office { background: radial-gradient(85% 65% at 80% 20%, rgba(160,190,225,0.22) 0%, rgba(160,190,225,0) 55%), linear-gradient(180deg, #39485a 0%, #27313f 58%, #191f2a 100%); }
.gr-bg-swatch--home { background: radial-gradient(80% 62% at 28% 22%, rgba(255,196,130,0.24) 0%, rgba(255,196,130,0) 55%), linear-gradient(180deg, #45382e 0%, #2d2118 60%, #1c1410 100%); }
.gr-bg-swatch--outdoor { background: radial-gradient(120% 34% at 50% 50%, rgba(255,244,214,0.18) 0%, rgba(255,244,214,0) 60%), linear-gradient(180deg, #40606f 0%, #33524e 44%, #24402f 54%, #142619 100%); }
.gr-bg-swatch--blur { background: radial-gradient(38% 30% at 32% 30%, #55627a 0%, rgba(0,0,0,0) 70%), radial-gradient(45% 38% at 72% 62%, #2b3446 0%, rgba(0,0,0,0) 72%), linear-gradient(180deg, #1a2230 0%, #0a0f16 100%); }

/* 6.5 look swatches: a miniature of each teaser look's real COMPOSITION, the
 * same idea as the background swatches above (art that stands in for what the
 * renderer produces). Each is a 9:16-ish stage with the look's signature text
 * geometry in brand orange, so the five read as five different layouts at a
 * glance rather than five colours. Deterministic CSS - no image requests. */
.gr-look-swatch { display: block; width: 100%; aspect-ratio: 4/5;
  border-radius: 13px 13px 8px 8px; position: relative; overflow: hidden;
  background: linear-gradient(180deg, #24303f 0%, #131b25 62%, #0a0f16 100%); }
.gr-look-swatch::before, .gr-look-swatch::after { content: ""; position: absolute; }
/* v1 Cinematic: full-bleed hero, text block low-left. */
.gr-look-swatch--teaser_v1::before { inset: 0 0 38% 0;
  background: radial-gradient(90% 70% at 50% 30%, rgba(255,255,255,.14), rgba(255,255,255,0) 60%), linear-gradient(180deg, #3b4a5e, #1b2431); }
.gr-look-swatch--teaser_v1::after { left: 12%; right: 42%; bottom: 20%; height: 8%;
  background: #FF5A1F; border-radius: 2px;
  box-shadow: 0 14px 0 -2px rgba(255,255,255,.55), 0 26px 0 -3px rgba(255,255,255,.3); }
/* v2 Editorial: hero left, tall type column right. */
.gr-look-swatch--teaser_v2::before { inset: 10% 44% 10% 8%;
  background: linear-gradient(160deg, #3d4c60, #1a2330); border-radius: 3px; }
.gr-look-swatch--teaser_v2::after { right: 10%; top: 22%; width: 26%; height: 6%;
  background: #FF5A1F; border-radius: 2px;
  box-shadow: 0 12px 0 0 rgba(255,255,255,.5), 0 22px 0 0 rgba(255,255,255,.28); }
/* v3 Center stage: centered hero, centered lower third. */
.gr-look-swatch--teaser_v3::before { inset: 12% 18% 34% 18%;
  background: radial-gradient(70% 70% at 50% 40%, rgba(255,255,255,.16), rgba(255,255,255,0) 65%), linear-gradient(180deg, #3a4a5d, #1b2431); border-radius: 4px; }
.gr-look-swatch--teaser_v3::after { left: 26%; right: 26%; bottom: 18%; height: 7%;
  background: #FF5A1F; border-radius: 2px;
  box-shadow: 0 13px 0 -1px rgba(255,255,255,.5); }
/* v4 Poster: strong horizon line, poster headline across it. */
.gr-look-swatch--teaser_v4::before { inset: 0 0 46% 0;
  background: linear-gradient(180deg, #47566b 0%, #222c3a 100%);
  border-bottom: 2px solid #FF5A1F; }
.gr-look-swatch--teaser_v4::after { left: 10%; right: 22%; top: 58%; height: 9%;
  background: rgba(255,255,255,.6); border-radius: 2px;
  box-shadow: 0 15px 0 -2px #FF5A1F; }
/* v5 Type first: type dominates, hero is a small inset. */
.gr-look-swatch--teaser_v5::before { left: 10%; right: 30%; top: 16%; height: 10%;
  background: #FF5A1F; border-radius: 2px;
  box-shadow: 0 16px 0 0 rgba(255,255,255,.55), 0 30px 0 0 rgba(255,255,255,.34), 0 44px 0 0 rgba(255,255,255,.2); }
.gr-look-swatch--teaser_v5::after { right: 12%; bottom: 12%; width: 30%; height: 22%;
  background: linear-gradient(160deg, #3d4c60, #1a2330); border-radius: 3px; }

@media (max-width: 640px) {
  .gr-avcar__card { flex-basis: 96px; }
  .gr-avcar-head { flex-wrap: wrap; }
}