/* 01-ethnicity: styles only this step uses. Scope every rule with .fr-app[data-step="ethnicity"] (see STEP-CONTRACT.md).
   Header and desktop column anchor are the shared shell (no overrides). Only the body gap, dock and preview flex change:
   the preview takes whatever height is left, which is what lets iPhone SE fit. */

/* ---------- looks grid: one 4-column grid, left aligned (all 7 visible, no rail) */
.fr-app[data-step="ethnicity"] .eth-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.fr-app[data-step="ethnicity"] .eth-grid .v6-opt { aspect-ratio: auto; height: clamp(72px, calc(var(--vh, 7.64px) * 11.8), 100px); border-radius: var(--v6-r-md); }
.fr-app[data-step="ethnicity"] .eth-grid .v6-opt img { object-position: 50% 10%; }
.fr-app[data-step="ethnicity"] .eth-grid .v6-opt::after { background: linear-gradient(to bottom, transparent 50%, color-mix(in srgb, var(--v6-bg) 90%, transparent)); }
.fr-app[data-step="ethnicity"] .eth-grid .v6-opt__label { left: 4px; right: 4px; bottom: 6px; text-align: center; font: 600 12px/1.15 var(--v6-body); color: var(--v6-text); }
.fr-app[data-step="ethnicity"] .eth-grid .v6-opt__check { top: 5px; right: 5px; width: 20px; height: 20px; }
.fr-app[data-step="ethnicity"] .eth-grid .v6-opt__check .v6-ic { width: 12px; height: 12px; }
.fr-app[data-step="ethnicity"] .eth-grid .v6-opt[aria-pressed='true'] { transform: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--v6-lilac) 22%, transparent), 0 8px 24px color-mix(in srgb, var(--v6-violet) 50%, transparent); }

/* step 1 has nowhere to go back to: keep the 44 px slot (logo stays centered) but do not show a dead control */
.fr-app[data-step="ethnicity"] .v6-back:disabled { visibility: hidden; }

/* ---------- mobile */
@container v6 (max-width: 899.98px) {
  .fr-app[data-step="ethnicity"] .v6-body { gap: clamp(10px, calc(var(--vh, 7.64px) * 1.6), 14px); padding-bottom: 0; }
  .fr-app[data-step="ethnicity"] .v6-sub { font-size: 15px; line-height: 1.4; }
  .fr-app[data-step="ethnicity"] .v6-side { position: relative; flex: 1 1 0; min-height: 84px; }
  .fr-app[data-step="ethnicity"] .v6-stage { position: absolute; inset: 0; height: auto; }
  /* pinned to the stage box: 128 % tall (face larger on small screens), fades out by the box bottom, taps pass through */
  .fr-app[data-step="ethnicity"] .v6-stage__img { position: absolute; top: 0; left: 50%; height: 128%; width: auto; max-width: 84%; transform: translateX(-50%); object-position: 50% 0; pointer-events: none; -webkit-mask-image: linear-gradient(to bottom, var(--v6-bg) 52%, transparent 78%); mask-image: linear-gradient(to bottom, var(--v6-bg) 52%, transparent 78%); }
  /* the picked card already says which look is on: no tag over her face on a small preview */
  .fr-app[data-step="ethnicity"] .v6-stage__tag { display: none; }
  .fr-app[data-step="ethnicity"] .v6-stage__ring { bottom: -4px; height: 20px; }
  .fr-app[data-step="ethnicity"] .v6-dock { padding: 10px 0 12px; gap: 10px; }
  .fr-app[data-step="ethnicity"] .v6-trust li + li { display: none; }
}

/* ---------- desktop: content column anchored at the top like the other steps */
@container v6 (min-width: 900px) {
  .fr-app[data-step="ethnicity"] .v6-main { align-self: start; }
  .fr-app[data-step="ethnicity"] .eth-grid { gap: 12px; }
  .fr-app[data-step="ethnicity"] .eth-grid .v6-opt { height: auto; aspect-ratio: 4 / 5; }
  .fr-app[data-step="ethnicity"] .eth-grid .v6-opt__label { font-size: 14px; bottom: 10px; }
  .fr-app[data-step="ethnicity"] .v6-stage { height: min(600px, calc(var(--vh, 8px) * 72)); }
  .fr-app[data-step="ethnicity"] .v6-float.is-b { right: -32px; top: 24px; }
}