/* =====================================================================
   Qlothing founder onboarding prototype: components and layouts.
   Uses tokens.css only. No raw colors here except the device bezel.
   Rule of thumb: content first, one primary action per screen,
   glass only on the floating layer, chrome only on the ring.
   ===================================================================== */

:root { --safe-top: env(safe-area-inset-top, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px); --safe-left: env(safe-area-inset-left, 0px); --safe-right: env(safe-area-inset-right, 0px); }
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--browser-bg, var(--bg)); }
/* The page canvas extends behind browser chrome; the browser controls its glass. */
html[data-browser-surface="grey"] { --browser-bg:#191919; color-scheme:dark; }
html[data-browser-surface="black"] { --browser-bg:#08090a; color-scheme:dark; }
html[data-browser-surface="white"] { --browser-bg:#e4e4e4; color-scheme:light; }
html[data-browser-surface] body { background:var(--browser-bg); }
body {
  margin: 0; min-height: 100vh; min-height: 100dvh;
  background: var(--bg); color: var(--label); font: var(--t-body);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
}
img { display: block; max-width: 100%; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; }
h1, h2, h3, p { margin: 0; }
[hidden] { display: none !important; }
.sr-only { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
:focus-visible { outline: 2px solid var(--label); outline-offset: 2px; }
.i { flex: none; display: block; }
body.lock { overflow: hidden; }

/* ---------- Type roles ---------- */
.t-large  { font: var(--t-large); letter-spacing: var(--track-display); }
.t-title1 { font: var(--t-title1); letter-spacing: var(--track-display); }
.t-title2 { font: var(--t-title2); }
.t-head   { font: var(--t-headline); }
.t-sub    { font: var(--t-subhead); }
.t-foot   { font: var(--t-footnote); }
.t-cap    { font: var(--t-caption); }
.muted    { color: var(--label-2); }

/* ---------- Buttons: capsules. One primary per screen. ---------- */
.btn {
  -webkit-appearance: none; appearance: none; border: 0; margin: 0;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 52px; padding: 0 24px; border-radius: var(--r-capsule);
  font: var(--t-headline); text-decoration: none; white-space: nowrap;
  transition: transform var(--d-press) var(--ease), opacity var(--d-press) var(--ease), background-color var(--d-ui) var(--ease);
  touch-action: manipulation; user-select: none; -webkit-user-select: none;
}
.btn:active { transform: scale(.97); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .4; pointer-events: none; }
.btn-primary { background: var(--primary); color: var(--on-primary); }
.btn-secondary { background: var(--fill-2); color: var(--label); }
.btn-text { background: transparent; color: var(--label); min-height: 44px; padding: 0 12px; }
.btn-block { width: 100%; }
.btn-sm { min-height: 36px; padding: 0 14px; font: 600 15px/20px var(--font); }
.btn-glass, .glass {
  background: var(--glass-bg); color: var(--label);
  -webkit-backdrop-filter: blur(24px) saturate(170%); backdrop-filter: blur(24px) saturate(170%);
  box-shadow: var(--glass-shadow), 0 0 0 .5px var(--glass-edge) inset;
}
.icon-btn { width: 44px; height: 44px; min-height: 44px; padding: 0; border-radius: 50%; }
/* Invisible hit-area extension so small visuals still get 44px targets. */
.hit { position: relative; }
.hit::after { content: ""; position: absolute; inset: -8px; }

/* ---------- Onboarding shell ---------- */
.flow { max-width: var(--column); margin: 0 auto; padding: 0 max(var(--margin), var(--safe-right)) 0 max(var(--margin), var(--safe-left)); }
.screen { padding-bottom: 8px; }
.screen-head { padding: 8px 0 4px; }
.screen-head .t-large { margin-bottom: 8px; }
.screen-head p { color: var(--label-2); }

/* Navigation bar: glass back button, progress, preview. */
.nav {
  position: sticky; top: 0; z-index: 20;
  display: grid; grid-template-columns: 44px 1fr 88px; align-items: center;
  padding: calc(var(--safe-top) + 6px) var(--margin) 6px; margin: 0 calc(-1 * var(--margin));
  transition: background-color var(--d-ui) var(--ease), box-shadow var(--d-ui) var(--ease);
}
.nav.scrolled {
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(24px) saturate(170%); backdrop-filter: blur(24px) saturate(170%);
  box-shadow: 0 .5px 0 var(--separator);
}
.nav-back { justify-self: start; }
.nav-right { justify-self: end; }
.progress { display: flex; justify-content: center; gap: 6px; }
.progress i { width: 22px; height: 4px; border-radius: 2px; background: var(--fill-2); transition: background-color var(--d-ui) var(--ease); }
.progress i.on { background: var(--label); }

/* ---------- Grouped lists (inset grouped) ---------- */
.section { margin-top: 28px; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 0 16px 8px; font: var(--t-footnote); color: var(--label-2); }
.section-head .btn-text { min-height: 32px; padding: 0 4px; font: 600 15px/20px var(--font); margin: -8px -4px -8px 0; }
.section-head:has(> .review-edit) { align-items: center; padding-bottom: 12px; }
.section-head .review-edit { min-height: 32px; padding: 0 12px; font: 600 15px/20px var(--font); margin: 0 -4px 0 0; }
.section-foot { padding: 8px 16px 0; font: var(--t-footnote); color: var(--label-2); }
.group { background: var(--surface); border-radius: var(--r-group); overflow: hidden; }
.row {
  position: relative; display: flex; align-items: center; gap: 12px;
  min-height: 56px; padding: 10px 16px; width: 100%;
  background: transparent; border: 0; text-align: left; color: var(--label);
}
button.row, a.row { cursor: pointer; text-decoration: none; transition: background-color var(--d-press) var(--ease); }
button.row:active, a.row:active { background: var(--fill); }
.row + .row::before, .row + .row-wrap::before, .row-wrap + .row::before, .row-wrap + .row-wrap::before {
  content: ""; position: absolute; top: 0; right: 0; left: 16px; height: 1px; background: var(--separator); transform: scaleY(.5); transform-origin: 0 0;
}
.row-wrap { position: relative; }
.row.has-icon + .row::before, .row-wrap.has-icon + .row-wrap::before, .row-wrap.has-icon + .row::before { left: 52px; }
.row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.row-sub { font: var(--t-footnote); color: var(--label-2); }
.row-value { color: var(--label-2); text-align: right; }
.row-icon { width: 24px; display: grid; place-items: center; color: var(--label); flex: none; }
.row:has(input:focus-visible, select:focus-visible, textarea:focus-visible) { box-shadow: inset 0 0 0 1.5px var(--label-3); border-radius: inherit; }

/* Stacked field: small label above the value, inside the row. */
.field-label { font: var(--t-footnote); color: var(--label-2); }
.field-input {
  -webkit-appearance: none; appearance: none; width: 100%; min-width: 0;
  margin: 0; padding: 0; border: 0; outline: 0; background: transparent;
  font: var(--t-body); color: var(--label); caret-color: var(--label);
}
.field-input::placeholder { color: var(--label-3); opacity: 1; }
.field-input[type="date"] { min-height: 24px; color-scheme: inherit; }
.affix { display: flex; align-items: baseline; }
.affix > span { color: var(--label-2); }
.err { display: flex; align-items: flex-start; gap: 6px; font: var(--t-footnote); color: var(--negative); padding-top: 2px; }
.err::before { content: ""; flex: none; width: 6px; height: 6px; margin-top: 6px; border-radius: 50%; background: currentColor; }
.row-wrap > .err, .group-err { padding: 0 16px 12px; margin-top: -4px; }
[aria-invalid="true"] { caret-color: var(--negative); }
.row-remove { color: var(--label-2); background: none; border: 0; }

/* Segmented control with a sliding thumb. --n options, --i selected index. */
.seg {
  position: relative; display: grid; grid-template-columns: repeat(var(--n), 1fr);
  padding: 3px; border-radius: var(--r-capsule); background: var(--fill); min-height: 44px;
}
.seg-thumb {
  position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc((100% - 6px) / var(--n));
  border-radius: var(--r-capsule); background: var(--seg-thumb);
  box-shadow: 0 3px 8px rgba(0,0,0,.14), 0 0 0 .5px rgba(0,0,0,.04);
  transform: translateX(calc(var(--i, 0) * 100%)); transition: transform var(--d-ui) var(--spring), opacity var(--d-ui) var(--ease);
}
.seg:not([data-set]) .seg-thumb { opacity: 0; }
.seg button {
  position: relative; z-index: 1; border: 0; background: none; border-radius: var(--r-capsule);
  font: 600 15px/20px var(--font); color: var(--label-2); padding: 0 6px; min-height: 38px;
}
.seg button[aria-checked="true"] { color: var(--label); }
.seg.invalid { box-shadow: 0 0 0 1.5px var(--negative); }

/* Choice rows: iOS list selection with a trailing checkmark. */
.choice .check { color: var(--label); opacity: 0; transform: scale(.6); transition: opacity var(--d-ui) var(--ease), transform var(--d-ui) var(--spring); }
.choice[aria-checked="true"] .check { opacity: 1; transform: none; }
.group.invalid { box-shadow: 0 0 0 1.5px var(--negative); }

/* Split row for State / ZIP */
.row-split { display: grid; grid-template-columns: 1fr 1fr; }
.row-split > .row + .row::before { top: 12px; bottom: 12px; left: 0; width: 1px; height: auto; transform: scaleX(.5); }

/* Chips */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: inline-flex; align-items: center; gap: 2px; height: 32px; padding: 0 4px 0 12px;
  border-radius: var(--r-capsule); background: var(--fill-2); font: var(--t-subhead); color: var(--label);
}
.chip-x { width: 28px; height: 28px; border: 0; border-radius: 50%; background: none; color: var(--label-2); display: grid; place-items: center; }
.chips-row { padding: 12px 16px; flex-direction: column; align-items: stretch; gap: 10px; }
.tag { display: inline-flex; align-items: center; height: 32px; padding: 0 12px; border-radius: var(--r-capsule); background: var(--fill); box-shadow: 0 0 0 .5px var(--separator) inset; font: var(--t-subhead); color: var(--label); }

/* ---------- Avatar with the chrome ring (the one memorable element) ---------- */
.ava { --size: 114px; --gap: 5px; position: relative; width: var(--size); height: var(--size); flex: none; }
.ava-ring {
  --hole: 94%;
  position: absolute; inset: 0; border-radius: 50%; background: var(--chrome);
  -webkit-mask: radial-gradient(closest-side circle, transparent var(--hole), #000 calc(var(--hole) + 1%), #000 98.5%, transparent 100%);
          mask: radial-gradient(closest-side circle, transparent var(--hole), #000 calc(var(--hole) + 1%), #000 98.5%, transparent 100%);
}
.ava-face {
  position: absolute; inset: var(--gap); border-radius: 50%; overflow: hidden;
  background: var(--surface-2); display: grid; place-items: center;
  font: 600 calc(var(--size) * .3) / 1 var(--font); color: var(--label); letter-spacing: .01em;
}
.ava-face img { width: 100%; height: 100%; object-fit: cover; }
.ava-sm { --size: 48px; --gap: 3px; }
.ava-sm .ava-ring { --hole: 88%; }
.ava-md { --size: 88px; --gap: 4px; }
.ava-md .ava-ring { --hole: 92%; }
.chrome-q {
  display: inline-block; width: 12px; height: 14.3px; background: var(--chrome);
  -webkit-mask: var(--q-uri) center / contain no-repeat; mask: var(--q-uri) center / contain no-repeat;
}

/* Photo picker row */
.photo-row { display: flex; align-items: center; gap: 16px; padding: 16px; }
.photo-row .btn { min-height: 36px; }
.photo-row .row-main { gap: 8px; align-items: flex-start; }

/* Hoodie render: needs light to separate grey fabric from a grey page. */
.hoodie-stage {
  position: relative; display: grid; place-items: center;
  background: radial-gradient(60% 55% at 50% 42%, var(--banner-light), transparent 72%);
}
.hoodie-stage img { width: 100%; height: auto; filter: drop-shadow(0 22px 28px rgba(0,0,0,.38)) drop-shadow(0 2px 3px rgba(0,0,0,.25)); }
.product { display: flex; align-items: center; gap: 16px; padding: 12px 16px 12px 12px; }
.product .hoodie-stage { width: 88px; height: 96px; border-radius: var(--r-inner); background: radial-gradient(70% 60% at 50% 45%, var(--banner-light), transparent 75%), var(--bg-deep); }
.product .hoodie-stage img { width: 76px; }

/* Welcome */
/* Welcome: the hoodie and the copy stay together, centered in whatever height is left above the button.
   The image scales with the viewport height so tall phones don't open a gap. */
.welcome { display: flex; flex-direction: column; min-height: calc(100vh - 24px); min-height: calc(100svh - 24px); padding-top: calc(var(--safe-top) + 12px); }
/* Silver reflections echo the chrome Q; the restrained blue edge belongs to the profile palette. */
.welcome .hoodie-stage { margin: auto; width: min(100%, 430px, 51svh); aspect-ratio: 1; position: relative; isolation: isolate; background: none; flex-shrink: 0; }
.welcome .hoodie-stage::before { content: ""; position: absolute; z-index: -1; inset: -7%; border-radius: 50%; pointer-events: none;
  background: conic-gradient(from 35deg, transparent 0deg, rgba(116,127,146,.48) 65deg, rgba(255,255,255,.92) 110deg, rgba(159,178,220,.24) 155deg, transparent 185deg, rgba(255,255,255,.95) 230deg, rgba(102,115,135,.32) 270deg, rgba(147,170,222,.3) 305deg, transparent 355deg);
  -webkit-mask: radial-gradient(ellipse, transparent 43%, #000 56%, transparent 72%); mask: radial-gradient(ellipse, transparent 43%, #000 56%, transparent 72%);
  filter: blur(7px); animation: hero-glow 7s ease-in-out infinite alternate; }
.welcome .hoodie-stage::after { content: ""; position: absolute; z-index: -1; left: 15%; right: 15%; bottom: -1%; height: 7%; border-radius: 50%; background: rgba(66,76,97,.18); filter: blur(13px); }
.welcome .hoodie-stage img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 15px 18px rgba(34,43,60,.2)); animation: hero-in 900ms cubic-bezier(.2,.8,.2,1) both, hero-float 6s ease-in-out 900ms infinite alternate; }
@keyframes hero-in { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes hero-float { from { transform: translateY(0); } to { transform: translateY(-5px); } }
@keyframes hero-glow { from { opacity: .65; transform: rotate(-8deg) scale(.97); } to { opacity: 1; transform: rotate(10deg) scale(1.04); } }
.welcome-copy { margin-top: 16px; }
.welcome .actions { margin-top: 0; }
.welcome-edition { font: var(--t-footnote); color: var(--label-2); margin-bottom: 8px; display: flex; align-items: center; gap: 8px; }
.welcome .t-large { margin-bottom: 12px; }
.welcome p.lede { color: var(--label-2); }

/* Gift step */
.gift-thumb { width: 44px; height: 44px; border-radius: 50%; background: var(--fill-2); display: grid; place-items: center; flex: none; overflow: hidden; }
.gift-thumb img { width: 40px; height: auto; }
.gift-list .row { min-height: 64px; }
.steps .row { align-items: flex-start; padding-top: 14px; padding-bottom: 14px; }
.steps .row-icon { margin-top: 1px; }
.closing { margin-top: 24px; padding: 0 4px; color: var(--label); }
.fine { font: var(--t-footnote); color: var(--label-2); }

/* Review */
.review-page { display: flex; align-items: center; gap: 12px; }

/* Done */
.done-hero { display: grid; justify-items: center; text-align: center; gap: 16px; padding: 24px 0 8px; }
.done-hero p { color: var(--label-2); max-width: 32ch; }
.done-social-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 16px; }
.card .done-social-links .btn { margin-top: 0; }
.done-club { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--separator); }
.card { background: var(--surface); border-radius: var(--r-group); padding: 20px; }
.card h2 { font: var(--t-headline); margin-bottom: 4px; }
.card p { color: var(--label-2); }
.card .btn { margin-top: 16px; }
.tip { display: flex; gap: 12px; align-items: flex-start; }

/* Sticky primary action: content scrolls under a soft fade, never under a hard bar. */
.actions {
  position: sticky; bottom: 0; z-index: 15;
  margin: 24px calc(-1 * var(--margin)) 0; padding: 20px var(--margin) calc(var(--safe-bottom) + 16px);
  background: linear-gradient(to top, var(--bg) 62%, color-mix(in srgb, var(--bg) 0%, transparent));
  display: grid; gap: 4px;
}
.actions .note { text-align: center; font: var(--t-footnote); color: var(--label-2); padding-top: 8px; }

/* ---------- Public page: follows Humbleteam's "Full page" frame (Grey). Figma wins on any detail. ---------- */
.pp { position: relative; min-height: 100vh; min-height: 100svh; background: var(--bg); padding-bottom: calc(var(--safe-bottom) + 150px); overflow-x: clip; }
.box .pp { min-height: 100%; }
.pp-banner { position: relative; height: calc(196px + var(--safe-top)); background: radial-gradient(90% 90% at 72% 8%, var(--banner-light), transparent 62%), linear-gradient(180deg, #3b3b3c, #262626); }
.pp-banner.has-cover { background: var(--cover) center / cover no-repeat; filter: grayscale(1) contrast(1.04); }
.pp-banner::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.28), transparent 32%, transparent 52%, var(--bg)); }
.pp-top { position: absolute; z-index: 2; top: calc(var(--safe-top) + 10px); left: 16px; right: 16px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pp-logo { width: 44px; height: 44px; margin: -10px; display: grid; place-items: center; color: var(--label); }
.pp-badges { display: flex; gap: 6px; margin-left: auto; }
.badge { display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 10px; border-radius: var(--r-capsule); font: 500 12px/16px var(--font); color: var(--label); white-space: nowrap; }
.badge .i { width: 12px; height: 12px; }
.pp-head { position: relative; z-index: 1; margin-top: -60px; padding: 0 var(--margin); display: flex; flex-direction: column; align-items: center; text-align: center; }
.pp-ava { --size: 64px; --gap: 3px; }
.pp-ava .ava-ring { --hole: 91%; }
.pp-handle { font: var(--t-footnote); color: var(--label-2); margin-top: 12px; }
.pp-name { font: 600 22px/28px var(--font); letter-spacing: -.01em; margin-top: 2px; overflow-wrap: anywhere; }
.pp-bio { font: var(--t-subhead); color: var(--label-2); margin-top: 4px; max-width: 32ch; overflow-wrap: anywhere; }
.pp-socials { display: flex; gap: 10px; margin-top: 20px; padding: 0 var(--margin); overflow-x: auto; scrollbar-width: none; justify-content: safe center; }
.pp-socials::-webkit-scrollbar { display: none; }
.soc { flex: none; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; color: var(--label); text-decoration: none; background: rgba(255,255,255,.04); box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); transition: transform var(--d-press) var(--ease); }
.soc:active, .wcard:active, .scard:active { transform: scale(.97); }
.pp-sec { margin-top: 32px; padding: 0 var(--margin); }
.pp-divider { display: flex; align-items: center; gap: 12px; margin: 0 0 16px; font: 500 11px/14px var(--font); letter-spacing: .08em; text-transform: uppercase; color: var(--label-3); }
.pp-divider::before, .pp-divider::after { content: ""; flex: 1; height: 1px; background: var(--separator); }
.wcard, .scard { display: block; color: var(--label); text-decoration: none; padding: 8px 8px 12px; border-radius: 24px; background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.025)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1), 0 16px 40px rgba(0,0,0,.35); transition: transform var(--d-press) var(--ease); }
.media { position: relative; overflow: hidden; border-radius: 16px; background: radial-gradient(80% 90% at 70% 20%, rgba(255,255,255,.25), transparent 60%), linear-gradient(135deg, var(--accent), var(--accent-2)); display: grid; place-items: center; color: #fff; }
.media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.1); }
.media.has-img::after { content: ""; position: absolute; inset: 0; background: var(--accent); mix-blend-mode: color; }
.wcard .media { aspect-ratio: 16 / 9; }
.wcard-logo { position: absolute; z-index: 1; top: 10px; left: 10px; width: 28px; height: 28px; border-radius: 8px; background: #fff; color: #111; display: grid; place-items: center; font: 700 14px/1 var(--font); }
.card-body { display: flex; align-items: center; gap: 12px; padding: 12px 4px 0 8px; text-align: left; }
.card-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.card-title { font: 600 16px/21px var(--font); }
.card-line { font: var(--t-footnote); color: var(--label-2); }
.card-go { flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--fill-2); }
.itiles { display: flex; justify-content: center; gap: 24px; }
.itile { width: 80px; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; font: 500 13px/16px var(--font); }
.itile-icon { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; color: #fff; background: radial-gradient(90% 80% at 30% 15%, rgba(255,255,255,.3), transparent 55%), linear-gradient(160deg, var(--accent), var(--accent-2)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.14), 0 8px 20px rgba(0,0,0,.35); }
.scard { width: min(100%, 256px); margin: 0 auto; }
.scard .media { aspect-ratio: 4 / 3; }
.scard .card-title { font: 600 14px/18px var(--font); }
.pill-sm { flex: none; min-height: 30px; padding: 0 12px; border-radius: var(--r-capsule); display: inline-flex; align-items: center; font: 600 13px/18px var(--font); background: var(--fill-2); color: var(--label); }
.pp-foot { margin-top: 40px; display: grid; place-items: center; color: var(--label-3); }
.pp-foot a { display: grid; place-items: center; width: 44px; height: 44px; color: inherit; }
.pp-edit { min-height: 32px; padding: 0 12px; font: 600 13px/18px var(--font); }

/* Wearing: the bottom block with the colorway glow. Hides while scrolling down, returns on scroll up. */
.wearing { position: absolute; z-index: 30; left: 0; right: 0; bottom: 0; height: calc(var(--safe-bottom) + 136px); padding: 0 16px calc(var(--safe-bottom) + 16px); display: flex; align-items: flex-end; justify-content: space-between; pointer-events: none;
  background: radial-gradient(120% 100% at 50% 100%, var(--glow), transparent 72%), linear-gradient(180deg, transparent, color-mix(in srgb, var(--bg) 78%, transparent) 42%);
  transition: transform 380ms var(--ease), opacity 380ms var(--ease); }
.wearing > * { pointer-events: auto; }
.wearing.hide { transform: translateY(100%); opacity: 0; }
.wearing.hide > * { pointer-events: none; }
.w-text { display: flex; flex-direction: column; align-items: flex-start; padding-bottom: 12px; }
.w-label, .w-qid { font: 500 10px/13px var(--font); letter-spacing: .08em; text-transform: uppercase; color: var(--label-2); font-variant-numeric: tabular-nums; }
.w-name { font: 700 17px/21px var(--font); letter-spacing: .02em; text-transform: uppercase; }
.w-thumb { position: absolute; left: 50%; bottom: calc(var(--safe-bottom) + 4px); width: 104px; transform: translateX(-50%); filter: drop-shadow(0 12px 18px rgba(0,0,0,.5)); }
.w-thumb img { width: 100%; height: auto; }
.w-cta { min-height: 36px; padding: 0 14px; margin-bottom: 16px; font: 600 13px/18px var(--font); background: rgba(0,0,0,.35); color: var(--label); box-shadow: inset 0 0 0 1px rgba(255,255,255,.3); }

/* ---------- Floating layer: sheets, toasts, pills ---------- */
.layer { position: fixed; inset: 0; z-index: 50; pointer-events: none; }
.box .layer { position: absolute; }
.layer > * { pointer-events: auto; }
.scrim { position: absolute; inset: 0; background: var(--scrim); opacity: 0; transition: opacity var(--d-sheet) var(--ease); }
.scrim.show { opacity: 1; }
.sheet {
  position: absolute; left: 50%; bottom: 8px; width: min(calc(100% - 16px), 414px);
  max-height: calc(100% - var(--safe-top) - 24px); overflow-y: auto; overscroll-behavior: contain;
  border-radius: var(--r-sheet) var(--r-sheet) 47px 47px;
  background: var(--sheet-bg); color: var(--label);
  -webkit-backdrop-filter: blur(30px) saturate(170%); backdrop-filter: blur(30px) saturate(170%);
  box-shadow: 0 -1px 0 var(--glass-edge) inset, 0 24px 60px rgba(0,0,0,.35);
  transform: translate(-50%, calc(100% + 24px)); transition: transform var(--d-sheet) var(--spring);
  outline: none;
}
.sheet.show { transform: translate(-50%, 0); }
.grabber { width: 36px; height: 5px; border-radius: 3px; background: var(--label-3); opacity: .5; margin: 8px auto 0; }
.sheet-close { position: absolute; z-index: 2; top: 12px; right: 12px; width: 32px; height: 32px; min-height: 32px; border-radius: 50%; background: var(--fill-2); color: var(--label-2); border: 0; display: grid; place-items: center; }
.sheet-close::after { content: ""; position: absolute; inset: -6px; }
.sheet-body { padding: 16px 24px calc(max(var(--safe-bottom) - 8px, 0px) + 24px); text-align: center; }
.sheet-body h2 { font: var(--t-title2); margin-top: 8px; }
.sheet-body > p { color: var(--label-2); margin-top: 6px; }
.sheet-body .btn-block { margin-top: 20px; }
.sheet-body .btn-block + .btn-block { margin-top: 4px; }
.sheet-body .fine { margin-top: 16px; }
.sheet-body .group { text-align: left; margin-top: 20px; background: var(--fill); }
.sheet-hero { width: 190px; margin: 4px auto 0; }
.sheet-swap { animation: swap var(--d-ui) var(--ease) both; }
@keyframes swap { from { opacity: 0; transform: translateY(6px); } }

/* Gift orb: a small chrome ring, the same object as the Q and the avatar ring. */
.orb { --o: 88px; position: relative; width: var(--o); height: var(--o); margin: 8px auto 0; display: grid; place-items: center; color: var(--label); }
.orb::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--chrome);
  -webkit-mask: radial-gradient(closest-side circle, transparent 86%, #000 87%, #000 98.5%, transparent 100%);
          mask: radial-gradient(closest-side circle, transparent 86%, #000 87%, #000 98.5%, transparent 100%);
}
.orb.spin::before { animation: spin 900ms var(--ease) both; }
.orb-art { width: calc(var(--o) - 20px); height: calc(var(--o) - 20px); border-radius: 50%; background: var(--fill); display: grid; place-items: center; overflow: hidden; }
.orb-art img { width: 86%; height: auto; margin-top: 8%; filter: drop-shadow(0 6px 8px rgba(0,0,0,.35)); }
.orb-lg { --o: 132px; }
@keyframes spin { from { --spin: 200deg; } to { --spin: 560deg; } }

.toast {
  position: absolute; top: calc(var(--safe-top) + 10px); left: 50%; max-width: calc(100% - 32px);
  padding: 10px 16px; border-radius: var(--r-capsule); font: 600 15px/20px var(--font); text-align: center;
  transform: translate(-50%, -12px); opacity: 0; transition: transform var(--d-ui) var(--spring), opacity var(--d-ui) var(--ease);
  pointer-events: none;
}
.toast.show { transform: translate(-50%, 0); opacity: 1; }
.gift-pill {
  position: absolute; left: 50%; bottom: calc(var(--safe-bottom) + 144px); transform: translateX(-50%);
  min-height: 44px; padding: 0 18px 0 14px; border: 0; border-radius: var(--r-capsule);
  display: inline-flex; align-items: center; gap: 8px; font: 600 15px/20px var(--font); white-space: nowrap;
  animation: rise var(--d-sheet) var(--spring) both;
}
@keyframes rise { from { opacity: 0; transform: translate(-50%, 16px); } }

/* ---------- Load-in (placeholder for Sergey's animation) ----------
   Chrome Q with a glint, the tail drops away, the ring flies to the avatar and thins
   into the avatar ring, then content settles in. Under 1.2s. Tap skips. */
.loadin { position: absolute; inset: 0; z-index: 60; pointer-events: auto; }
.loadin-bg { position: absolute; inset: 0; background: var(--bg); }
.li-q { position: absolute; width: 88px; height: 105px; }
.li-ring {
  --hole: 65%;
  position: absolute; left: 0; top: 0; width: 88px; height: 88px; border-radius: 50%; background: var(--chrome);
  transform-origin: 0 0; will-change: transform;
  -webkit-mask: radial-gradient(closest-side circle, transparent var(--hole), #000 calc(var(--hole) + 1%), #000 98.5%, transparent 100%);
          mask: radial-gradient(closest-side circle, transparent var(--hole), #000 calc(var(--hole) + 1%), #000 98.5%, transparent 100%);
  overflow: hidden;
}
.li-ring::after { content: ""; position: absolute; inset: 0; background: var(--glint); background-size: 300% 100%; background-position: 120% 0; animation: glint 520ms var(--ease) 80ms both; }
.li-stem { position: absolute; left: 36px; top: 86px; width: 16px; height: 19px; border-radius: 3px 3px 8px 8px; background: var(--chrome); transform-origin: 50% 0; }
@keyframes glint { to { background-position: -40% 0; } }
.li-label { position: absolute; left: 50%; bottom: calc(var(--safe-bottom) + 16px); transform: translateX(-50%); font: var(--t-caption); color: var(--label-3); white-space: nowrap; }

/* Content hidden under the load-in, then staggered in. */
.pp.loading .ava-ring, .pp.loading .st, .pp.loading .pp-top { opacity: 0; }
.pp.loading .st { transform: translateY(10px); }
.pp.enter .st { transition: opacity 380ms var(--ease), transform 480ms var(--spring); transition-delay: calc(var(--k, 0) * 45ms); }
.pp.enter .pp-top { transition: opacity 380ms var(--ease) 200ms; }

/* ---------- Gift key ---------- */
.key { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; padding: calc(var(--safe-top) + 6px) var(--margin) calc(var(--safe-bottom) + 20px); }
.box .key { min-height: 100%; }
.key-top { display: grid; grid-template-columns: 88px 1fr 88px; align-items: center; min-height: 44px; }
.key-top h1 { font: var(--t-headline); text-align: center; }
.key-top .btn-text { justify-self: end; margin-right: -12px; }
.key-center { flex: 1; display: grid; align-content: center; justify-items: center; text-align: center; gap: 0; padding: 24px 0; }
.key-center h2 { font: var(--t-title2); margin-top: 24px; }
.key-center p { color: var(--label-2); margin-top: 8px; max-width: 30ch; }
.timer { font: 600 17px/22px var(--font); font-variant-numeric: tabular-nums; margin-top: 16px; color: var(--label); }
.timer span { color: var(--label-2); font-weight: 400; margin-right: 6px; }
.proto-tag { display: inline-block; font: 600 11px/13px var(--font); letter-spacing: .02em; padding: 3px 7px; border-radius: 6px; background: var(--fill-2); color: var(--label-2); margin-right: 6px; }
.key-proto { margin-top: 20px; }

.ring-btn {
  /* The founder's Q: the same ring as the avatar ring, with the Q's tail. Tap the Q to give; they tap the Q to get. */
  --r: 184px; --tail: 36px; position: relative; width: var(--r); height: calc(var(--r) + var(--tail) - 4px); border: 0; padding: 0;
  -webkit-appearance: none; appearance: none; background: none; color: var(--label); display: block;
  transition: transform var(--d-press) var(--ease), filter var(--d-ui) var(--ease);
}
.ring-btn::before {
  content: ""; position: absolute; left: 0; top: 0; width: var(--r); height: var(--r); border-radius: 50%; background: var(--chrome);
  -webkit-mask: radial-gradient(closest-side circle, transparent 85%, #000 86%, #000 98.8%, transparent 100%);
          mask: radial-gradient(closest-side circle, transparent 85%, #000 86%, #000 98.8%, transparent 100%);
}
.ring-btn::after {
  content: ""; position: absolute; left: calc(50% - var(--r) * .09); top: calc(var(--r) - 4px); width: calc(var(--r) * .18); height: var(--tail);
  border-radius: 4px 4px calc(var(--r) * .09) calc(var(--r) * .09); background: var(--chrome);
}
.ring-face {
  position: absolute; left: 20px; top: 20px; width: calc(var(--r) - 40px); height: calc(var(--r) - 40px); border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(80% 80% at 50% 25%, var(--fill-2), transparent 70%), var(--surface);
  box-shadow: inset 0 1px 0 var(--glass-edge), 0 10px 30px rgba(0,0,0,.25);
  font: 600 24px/28px var(--font); letter-spacing: -.01em;
}
/* The hit area includes the Q's tail; focus belongs to the round control. */
.ring-btn:focus { outline: none; }
.ring-btn:focus-visible .ring-face { outline: 2px solid var(--label); outline-offset: 4px; }
.ring-btn:active { transform: scale(.96); }
.ring-btn[disabled] { cursor: default; }
.ring-btn[disabled]:active { transform: none; }
.ring-btn[disabled]::before, .ring-btn[disabled]::after { filter: grayscale(1) brightness(.8); opacity: .45; }
.ring-btn[disabled] .ring-face { color: var(--label-3); }
.ring-btn.armed::before, .ring-btn.armed::after { animation: spin 2.8s linear infinite; }
.ring-btn.armed { animation: breathe 2.4s var(--ease) infinite alternate; }
.ring-btn.given .ring-face { color: var(--label); }
@keyframes breathe { from { filter: drop-shadow(0 0 0 rgba(255,255,255,0)); } to { filter: drop-shadow(0 0 22px rgba(255,255,255,.32)); } }

/* ---------- Desktop: onboarding beside a live device, public views on a stage ---------- */
.aside { display: none; }
.device-wrap { width: calc(390px * var(--scale, 1)); height: calc(844px * var(--scale, 1)); flex: none; }
.device {
  position: relative; width: 390px; height: 844px; border-radius: var(--r-device);
  transform: scale(var(--scale, 1)); transform-origin: 0 0;
  box-shadow: 0 0 0 10px #151515, 0 0 0 11.5px #3a393a, 0 50px 90px rgba(0,0,0,.45);
}
.device-screen { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; background: var(--bg); --safe-top: 54px; --safe-bottom: 34px; --safe-left: 0px; --safe-right: 0px; isolation: isolate; }
.device-scroll { position: absolute; inset: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; }
.device-scroll::-webkit-scrollbar { display: none; }
.island { position: absolute; z-index: 90; top: 11px; left: 50%; width: 122px; height: 35px; border-radius: 18px; background: #000; transform: translateX(-50%); pointer-events: none; }
.homebar { position: absolute; z-index: 90; bottom: 8px; left: 50%; width: 134px; height: 5px; border-radius: 3px; background: var(--label); opacity: .5; transform: translateX(-50%); pointer-events: none; }
.aside-caption { margin-top: 28px; text-align: center; font: var(--t-footnote); color: var(--label-2); }

/* Full-screen preview on phones (Preview button, See what they'll see) */
/* A full-screen preview is a document surface, not a clipped phone simulator.
   Native scrolling lets Safari extend this page under its top/bottom glass.
   Only the close control and floating UI stay fixed to the viewport. */
.overlay { position: relative; z-index: 80; min-height:100vh; min-height:100svh; background: var(--browser-bg, var(--bg)); }
.overlay .device-screen { position:relative; inset:auto; min-height:100vh; min-height:100svh; overflow:visible; isolation:auto; --safe-top: env(safe-area-inset-top, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px); --safe-left: env(safe-area-inset-left, 0px); --safe-right: env(safe-area-inset-right, 0px); border-radius: 0; background: var(--browser-bg, var(--bg)); color-scheme:inherit; }
.overlay .device-scroll { position:relative; inset:auto; overflow:visible; overscroll-behavior:auto; }
.overlay .pp { min-height:100vh; min-height:100svh; }
.overlay .layer { position:fixed; }
.overlay-close { position: fixed; z-index: 85; top: calc(env(safe-area-inset-top, 0px) + 10px); left: calc(var(--safe-left) + 12px); }

.stage { display: block; }
@media (min-width: 1024px) {
  body { background: var(--bg-deep); }
  .shell { display: grid; grid-template-columns: minmax(0, 480px) auto; justify-content: center; gap: 88px; padding: 0 48px; }
  .shell .flow { width: 100%; max-width: 480px; padding: 0; margin: 0; }
  .shell .nav, .shell .actions { margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; }
  .shell .actions { background: linear-gradient(to top, var(--bg-deep) 62%, color-mix(in srgb, var(--bg-deep) 0%, transparent)); }
  .shell .nav.scrolled { background: color-mix(in srgb, var(--bg-deep) 82%, transparent); box-shadow: none; }
  .aside { display: block; position: sticky; top: 0; align-self: start; padding: 32px 0; }
  .nav-preview { display: none; }
  .welcome { min-height: calc(100vh - 48px); padding-top: 48px; }
  .stage { min-height: 100vh; display: grid; place-items: center; padding: 32px; }
  .group, .card { background: var(--surface); }
}

/* ---------- Prototype controls (not part of the product) ---------- */
.demo-tab {
  position: fixed; z-index: 95; left: 0; top: 50%; width: 22px; height: 72px; margin-top: -36px;
  border: 0; border-radius: 0 14px 14px 0; display: grid; place-items: center; padding: 0; color: var(--label-2);
}
.demo-tab::after { content: ""; position: absolute; inset: -6px -14px -6px 0; }
.demo-tab span { display: none; }
@media (min-width: 1024px) {
  .demo-tab { top: auto; bottom: 20px; left: 20px; width: auto; height: 40px; margin: 0; padding: 0 16px; border-radius: var(--r-capsule); gap: 8px; display: inline-flex; align-items: center; font: 600 15px/20px var(--font); color: var(--label); }
  .demo-tab span { display: inline; }
  .demo-tab::after { display: none; }
  .demo .sheet { left: 20px; bottom: 72px; transform: translate(0, calc(100% + 96px)); width: 340px; border-radius: var(--r-sheet); }
  .demo .sheet.show { transform: none; }
  .demo .scrim { background: transparent; }
}
.demo .sheet-body { text-align: left; }
.demo .sheet-body h2 { margin-top: 0; }
.demo .group { margin-top: 12px; }
.demo .row { min-height: 48px; }
.demo select { -webkit-appearance: none; appearance: none; border: 0; background: transparent; color: var(--label-2); text-align: right; text-align-last: right; padding: 0 20px 0 0; font: var(--t-body); max-width: 60%;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 7px) 55%, calc(100% - 2px) 55%; background-size: 5px 5px; background-repeat: no-repeat; }
.demo-views { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.demo-views .btn { min-height: 44px; font: 600 15px/20px var(--font); }
.demo-actions { display: flex; gap: 8px; margin-top: 12px; }
.demo-actions .btn { flex: 1; min-height: 44px; font: 600 15px/20px var(--font); }

/* ---------- Motion preferences ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; transition-delay: 0ms !important; scroll-behavior: auto !important; }
  .ring-btn.armed .ring-face::after { content: ""; position: absolute; inset: -9px; border: 2px solid var(--label-2); border-radius: 50%; pointer-events: none; }
}

/* ---------- Small additions ---------- */
.section .group + .group { margin-top: 12px; }
.add-select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; font-size: 17px; }
.row .chev { color: var(--label-3); flex: none; transition: transform var(--d-ui) var(--ease); }
.row[aria-expanded="true"] .chev { transform: rotate(90deg); }
.row-thumb { width: 44px; height: 30px; border-radius: 8px; object-fit: cover; flex: none; }
.welcome-edition .chrome-q { width: 11px; height: 13px; }
.w-thumb { border: 0; background: none; padding: 0; cursor: pointer; }
.pp-empty { color: var(--label-3); }
[tabindex="-1"]:focus { outline: none; }
/* Floating layer order: Wearing 30, gift pill 35, scrim 40, sheet 41, toast 45, load-in 60 */
.scrim { z-index: 40; } .sheet { z-index: 41; } .toast { z-index: 45; } .gift-pill { z-index: 35; }

/* ---------- Shell: server-rendered pages, status and accessibility helpers ---------- */
.skip-link { position: fixed; z-index: 200; top: -100px; left: 16px; padding: 12px 20px; border-radius: var(--r-capsule); background: var(--label); color: var(--bg); font: var(--t-headline); }
.skip-link:focus { top: calc(var(--safe-top) + 12px); }
.flow.centered { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; gap: 12px; padding-top: calc(var(--safe-top) + 24px); padding-bottom: calc(var(--safe-bottom) + 24px); }
.flow.centered .btn { margin-top: 12px; }
.quiet-brand { color: var(--label-2); margin-bottom: 16px; }
.error-message { font: var(--t-footnote); color: var(--negative); min-height: 18px; margin-top: 8px; }
.error-message:empty { display: none; }
.demo-notice { position: sticky; top: 0; z-index: 25; padding: calc(var(--safe-top) + 8px) 16px 8px; text-align: center; font: var(--t-caption); color: var(--label-2); background: color-mix(in srgb, var(--bg) 90%, transparent); }
.demo-notice a { color: var(--label); }
.noscript-note { padding: 16px var(--margin); font: var(--t-footnote); color: var(--label-2); text-align: center; }
.cover-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pp-banner.has-cover { background: var(--bg-deep); }
.save-status { font: var(--t-caption); color: var(--label-3); text-align: center; min-height: 16px; padding-top: 6px; }
.save-status.warn { color: var(--negative); }
.banner-note { margin: 12px 0 0; padding: 12px 16px; border-radius: var(--r-inner); background: var(--fill); font: var(--t-footnote); color: var(--label-2); display: flex; gap: 12px; align-items: center; justify-content: space-between; }
.banner-note .btn { min-height: 32px; padding: 0 12px; font: 600 13px/18px var(--font); }

/* Gift key inside a sheet on the founder's own page */
.key-sheet { padding: 8px 0 8px; }
.key-sheet .ring-btn { margin-top: 4px; }
.google-btn { display: flex; justify-content: center; margin-bottom: 10px; }
.google-btn:empty { display: none; }

/* Google's standard button look (white pill, G mark) so the fallback matches the real one */
.btn-google { background: #fff; color: #1f1f1f; box-shadow: inset 0 0 0 1px #747775; font: 500 16px/20px var(--font); gap: 12px; }
[data-colorway="fdr"] .btn-google, [data-colorway="blk"] .btn-google { background: #131314; color: #e3e3e3; box-shadow: inset 0 0 0 1px #8e918f; }
.btn-google .i { flex: none; }
.practice-cap {
  position:absolute; z-index:46; top:calc(var(--safe-top) + 128px); left:16px; right:16px;
  padding:var(--s4); border:1px solid var(--glass-edge); border-radius:var(--r-inner);
  color:var(--label); background:var(--surface); box-shadow:var(--glass-shadow);
  text-align:left; pointer-events:none;
}
.practice-cap-point::before { content:''; position:absolute; right:20px; top:-7px; width:12px; height:12px; background:var(--surface); border-left:1px solid var(--glass-edge); border-top:1px solid var(--glass-edge); transform:rotate(45deg); }
.practice-label { display:block; margin-bottom:var(--s2); font:var(--t-practice-label); color:var(--label-2); }
.practice-title { display:block; font:var(--t-practice-title); }
.practice-detail { display:block; margin-top:var(--s2); font:var(--t-practice-detail); color:var(--label); }
.practice-cap-in-sheet { position:relative; inset:auto; margin:var(--s8) var(--s4) 0; box-shadow:none; }
.practice-cap-in-sheet + .sheet-body .key-sheet { padding-top:var(--s2); }
.gift-scene[data-gift-phase="receipt"] .practice-cap { display:none; }
.pp-figma .fndr-gift[data-practice-target] { outline:2px solid var(--label); outline-offset:4px; border-radius:var(--r-inner); filter:drop-shadow(0 0 12px var(--glow)); }
/* Keep guidance readable even when the desktop phone is scaled down. */
.device { --practice-scale:var(--scale, 1); }

/* Detail is a reference-derived render, not a replacement for the calibrated motion garment. */
.hoodie-detail { margin: 8px -4px 20px; border-radius: 24px; overflow: hidden; border: 1px solid var(--glass-edge); }
.hoodie-detail img { width: 100%; height: auto; }

/* Banner choices use the existing compact sheet and retain the artwork's color. */
.banner-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin:24px 0 16px; }
.banner-grid[hidden] { display:none; }
.banner-more { gap:8px; }
.banner-more svg { transform:rotate(90deg); transition:transform var(--d-ui); }
.banner-more[aria-expanded="true"] svg { transform:rotate(-90deg); }
.banner-choice { display:block; padding:0; min-width:0; border:2px solid transparent; border-radius:16px; overflow:hidden; background:var(--fill); color:var(--label); text-align:left; }
.banner-choice > img { display:block; width:100%; height:80px; object-fit:cover; object-position:var(--cover-position,50% 50%); }
.banner-choice-label { display:flex; align-items:center; justify-content:space-between; gap:4px; padding:9px 10px; font:500 12px/16px var(--font); }
.banner-choice-check { display:flex; flex:none; visibility:hidden; }
.banner-choice[aria-pressed="true"] { border-color:currentColor; }
.banner-choice[aria-pressed="true"] .banner-choice-check { visibility:visible; }
.banner-choice:focus-visible { outline:2px solid currentColor; outline-offset:3px; }
.banner-sampler { grid-template-columns:repeat(5,minmax(0,1fr)); gap:6px; margin-top:4px; }
.banner-sampler .banner-choice { position:relative; border-radius:var(--r-inner); }
.banner-sampler .banner-choice > img { height:44px; }
.banner-sampler .banner-choice-label { position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.banner-upload { margin-top:8px; }

/* Website artwork is optional; image lookup never blocks the rest of setup. */
.card-image-editor { border-top:1px solid var(--separator); }
.card-image-note { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:4px 12px; padding:0 var(--s4) 12px; }
.card-image-note:has(.card-image-status:empty):not(:has(button)) { display:none; }
.card-image-status { flex:1 1 180px; font:400 13px/18px var(--font); color:var(--label-2); }
.card-image-retry { min-height:32px; padding:4px 0; font:600 13px/18px var(--font); }

/* Practice handoff: a screen-filling card that makes the change of perspective unmistakable. Lives in the host layer,
   above sheets and captions, so on phones it fills the preview and on desktop it fills the simulated phone. */
.practice-handoff { position: absolute; inset: 0; z-index: 75; display: grid; place-items: center; padding: 24px; text-align: center; color: var(--label, #f5f4f5);
  background: radial-gradient(70% 55% at 50% 60%, rgba(86,64,214,.55), transparent 72%), #191919; animation: handoff-in 240ms cubic-bezier(.2,.8,.2,1) both; }
.practice-handoff.out { animation: handoff-out 360ms ease-in both; pointer-events: none; }
.practice-handoff-inner { display: grid; justify-items: center; gap: 6px; max-width: 30ch; animation: handoff-rise 420ms cubic-bezier(.2,.8,.2,1) both; }
.practice-handoff-mark { width: 64px; height: 76px; margin-bottom: 10px; background: var(--chrome, linear-gradient(135deg,#fff,#8a8a8a)); -webkit-mask: var(--q-uri) center / contain no-repeat; mask: var(--q-uri) center / contain no-repeat; }
.practice-handoff-label { font: 600 12px/16px var(--font); letter-spacing: .12em; text-transform: uppercase; color: #c9c3ff; }
.practice-handoff-title { font: 700 26px/31px var(--font); letter-spacing: -.01em; }
.practice-handoff-body { font: 400 17px/24px var(--font); color: #a9a9ab; }
@keyframes handoff-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes handoff-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes handoff-rise { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }
.practice-handoff.static, .practice-handoff.static .practice-handoff-inner { animation: none; }
@media (prefers-reduced-motion: reduce) { .practice-handoff, .practice-handoff-inner, .practice-handoff.out { animation: none; } }
/* Short screens (320x568 class): keep the countdown in view during practice without scrolling. */
@media (max-height: 640px) {
  .key-sheet .ring-btn { --r: 136px; --tail: 26px; }
  .key-sheet .ring-face { font-size: 20px; }
  .key-sheet h2 { font-size: 19px; line-height: 24px; margin-top: 14px; }
  .key-sheet p { font-size: 15px; line-height: 20px; }
  .practice-cap-in-sheet .practice-detail { font-size: 14px; line-height: 18px; margin-top: 4px; }
  .practice-cap-in-sheet { padding-top: 8px; padding-bottom: 8px; }
}

/* Photo framing stays in the existing bottom-sheet pattern. */
.photo-actions { display:flex; flex-wrap:wrap; gap:var(--s2); }
.photo-crop-canvas { display:block; width:min(100%, 264px, 37dvh); height:auto; aspect-ratio:1; margin:var(--s5) auto var(--s4); border-radius:50%; background:var(--fill); outline:2px solid var(--separator); outline-offset:3px; touch-action:none; cursor:grab; }
.photo-crop-canvas:active { cursor:grabbing; }
.photo-crop-canvas:focus-visible { outline-color:var(--label); }
.photo-crop-controls { display:flex; align-items:center; gap:var(--s3); font:var(--t-footnote); }
.photo-crop-controls input { min-width:0; flex:1; min-height:var(--tap); accent-color:var(--label); }
.photo-crop-controls .btn { min-height:var(--tap); }

/* Setup helpers: required note, search results, suggestion chips, community opt-in */
.required-note { font: var(--t-footnote); color: var(--label-2); margin: -6px 4px 14px; }
.search-results { display: grid; border-top: 1px solid var(--separator); }
.search-results[hidden] { display: none; }
.search-result { display: grid; grid-template-columns: 1fr auto; column-gap: 12px; align-items: center; width: 100%; text-align: left; padding: 11px 16px; background: none; border: 0; border-bottom: 1px solid var(--separator); color: var(--label); font: inherit; cursor: pointer; }
.search-result:last-child { border-bottom: 0; }
.search-result:active { background: var(--fill); }
.search-result:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.search-result-main { font: var(--t-body); grid-column: 1; }
.search-result-sub { font: var(--t-footnote); color: var(--label-2); grid-column: 1; }
.search-result-act { grid-column: 2; grid-row: 1 / span 2; font: var(--t-footnote); font-weight: 600; color: var(--accent); }
.search-empty { padding: 12px 16px; margin: 0; font: var(--t-footnote); color: var(--label-2); }
.chips-suggest { padding: 4px 12px 10px; }
.chip-suggest { background: var(--fill); color: var(--label); border: 0; font: var(--t-subhead); cursor: pointer; }
.chip-suggest:active { filter: brightness(.95); }
.chip-suggest:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.btn-sm { padding: 6px 10px; min-height: 32px; font-size: 14px; }
.opt-in { cursor: pointer; }
.opt-in .row-main { gap: 2px; }
.switch { appearance: none; -webkit-appearance: none; width: 51px; height: 31px; border-radius: 16px; background: var(--fill-2, #e5e5ea); position: relative; flex: none; cursor: pointer; transition: background 200ms; }
.switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.25); transition: transform 200ms; }
.switch:checked { background: #34c759; }
.switch:checked::after { transform: translateX(20px); }
.switch:disabled { opacity: .6; }
.switch:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Community: discovery card on the page and the list page (dark, agency materials) */
.community-card-link { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px; border-radius: 20px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08); color: #fff; text-decoration: none; }
.community-card-text { display: grid; gap: 4px; }
.community-card-title { font: 600 17px/22px var(--font); letter-spacing: -.01em; }
.community-card-action { font: 400 14px/18px var(--font); color: #c9c3ff; }
.community-card-mark { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.08); flex: none; }
.community { padding: calc(var(--safe-top) + 12px) 16px calc(var(--safe-bottom) + 32px); max-width: 600px; margin: 0 auto; color: var(--label); }
.community-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.community-head h1 { font: 700 26px/31px var(--font); letter-spacing: -.02em; margin: 0; }
.community-sub { margin: 2px 0 0; font: var(--t-footnote); color: var(--label-2); }
.cm-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.cm-link { position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: 24px 44px minmax(0,1fr); grid-template-areas: "rank ava main" "rank ava stats"; column-gap: 12px; row-gap: 6px; align-items: center; padding: 16px 14px; border-radius: 18px; background: #252529; border: 1px solid rgba(255,255,255,.16); color: inherit; text-decoration: none; }
.cm-art { position: absolute; inset: 0; pointer-events: none; }
.cm-art img { display: block; width: 100%; height: 100%; object-fit: cover; opacity: .42; }
.cm-art::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg,rgba(9,10,18,.34),rgba(9,10,18,.55) 45%,rgba(9,10,18,.84)); }
.cm-link > :not(.cm-art) { position: relative; z-index: 1; }
.cm-link:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.cm-rank { grid-area: rank; font: 700 15px/20px var(--font); color: #d2d1d8; text-align: center; }
.cm-ava { --size: 44px; --gap: 3px; grid-area: ava; width: 44px; height: 44px; border-radius: 50%; overflow: hidden; background: rgba(255,255,255,.1); }
.cm-ava img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cm-main { grid-area: main; display: grid; gap: 1px; min-width: 0; }
.cm-name { font: 600 16px/20px var(--font); overflow-wrap: anywhere; }
.cm-sub { font: var(--t-footnote); color: #c6c5ce; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cm-stats { grid-area: stats; display: flex; gap: 14px; }
.cm-stat { display: grid; line-height: 1; }
.cm-stat b { font: 600 15px/18px var(--font); }
.cm-stat small { font: 400 11px/14px var(--font); color: #c6c5ce; }
.cm-stat-na b { color: #c6c5ce; }
.cm-foot { margin: 14px 4px 0; font: var(--t-footnote); color: var(--label-2); }
.cm-empty { padding: 40px 16px; text-align: center; border-radius: 18px; background: rgba(255,255,255,.05); }
.cm-empty-title { font: 600 17px/22px var(--font); margin: 0 0 6px; }
@media (min-width: 460px) { .cm-link { grid-template-columns: 24px 44px minmax(0,1fr) auto; grid-template-areas: "rank ava main stats"; } .cm-stats { gap: 14px; } }

/* The discovery entry uses the same accessible contrast in the white profile. */
.pp[data-profile-theme="white"] .community-card-link { color: #191919; background: rgba(255,255,255,.55); border-color: rgba(0,0,0,.12); }
.pp[data-profile-theme="white"] .community-card-action { color: #51418e; }
.pp[data-profile-theme="white"] .community-card-mark { background: rgba(0,0,0,.06); }

/* Resolved social destination under the field */
.social-opens { display: flex; align-items: center; gap: 6px; margin: -2px 16px 8px 52px; font: var(--t-footnote); color: var(--label-2); }
.social-opens[hidden] { display: none; }
.social-opens a { color: var(--accent); display: inline-flex; padding: 4px; margin: -4px; border-radius: 6px; }
.social-opens a:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.chip-custom { background: transparent; box-shadow: inset 0 0 0 1px var(--separator); }
/* More of you: section rows, gallery and editor */
.sec-row .row-chevron { color: var(--label-3, var(--label-2)); display: inline-flex; }
.row-thumb { width: 40px; height: 40px; border-radius: 10px; object-fit: cover; flex: none; }
.sec-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 14px; }
.sec-actions .sec-remove { margin-left: auto; color: #d0342c; }
.sec-need:empty { display: none; }
.gal-grid { display: grid; gap: 14px; margin: 14px 0 16px; }
.gal-grid { grid-template-columns: 1fr; }
.gal-card { display: grid; gap: 10px; padding: 12px; border-radius: 20px; background: var(--fill); }
.gal-frame { position: relative; border-radius: 16px; padding: 10px; background: #191919; overflow: hidden; }
/* A gallery sample reuses the card material, not the full profile viewport or Wearing clearance. */
.gal-frame.pp-figma { min-height: 0; padding: 10px; }
.gal-frame .pp-rail { display: block; }
.gal-frame .wcard { pointer-events: auto; }
.gal-frame .scard-meme .media { height: auto; aspect-ratio: 16 / 10; }
.gal-frame .media { height: 140px; }
.gal-sample { position: absolute; top: 14px; right: 14px; padding: 3px 8px; border-radius: 999px; background: rgba(255,255,255,.14); color: #fff; font: 600 11px/14px var(--font); letter-spacing: .04em; text-transform: uppercase; backdrop-filter: blur(8px); }
.gal-text { display: grid; gap: 2px; }
.gal-card .btn { justify-self: start; }
.toast-undo { display: flex; align-items: center; gap: 14px; padding-right: 8px; pointer-events: auto; }
.toast-undo .btn { color: var(--accent); }

/* Optional section editors keep the same calm, single-column rhythm as setup. */
.sec-editor { min-width: 0; text-align: left; }
.sheet-body .sec-editor h2 { margin: 16px 28px 0 0; }
.sec-editor-intro { color: var(--label-2); margin: 7px 0 18px; font: var(--t-footnote); }
.sheet-body .sec-editor .sec-fields { margin-top: 0; overflow: hidden; }
.sec-fields .row-main { min-width: 0; }
.sec-fields .field-input { width: 100%; min-width: 0; }
.sec-fields input[type="search"] { appearance: none; -webkit-appearance: none; }
.sec-inline-note { padding: 14px 16px; color: var(--label-2); font: var(--t-footnote); }
.sec-preview { margin: 22px 0 18px; }
.sec-preview-heading { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; padding: 0 2px 9px; font: 600 13px/18px var(--font); }
.sec-preview-heading span + span { font-weight: 400; color: var(--label-2); }
.sec-preview-empty { display: grid; place-items: center; padding: 28px 24px; text-align: center; border: 1px dashed var(--separator); border-radius: 20px; color: var(--label-2); font: var(--t-footnote); }
.sec-preview-frame.pp.pp-figma { min-height: 0; padding: 10px; border-radius: 22px; overflow: hidden; }
.sec-preview-frame.pp.pp-figma .pp-rail { display: block; overflow: visible; }
.sec-preview-frame.pp.pp-figma .wcard { width: 100%; }
.sec-preview-frame.pp.pp-figma .scard-meme .media { height: auto; aspect-ratio: 16 / 10; }
.sec-preview .card-title, .sec-preview .card-line { overflow-wrap: anywhere; }
.sec-pet-editor + .sec-pet-editor { border-top: 1px solid var(--separator); margin-top: 10px; padding-top: 14px; }
.sec-pet-heading { display: flex; align-items: center; gap: 12px; padding: 2px 14px 8px; }
.sec-pet-heading .btn { margin-left: auto; color: var(--label-2); }
.sec-pet-number { color: var(--label-2); font: 600 13px/18px var(--font); }
.sec-pet-portrait { display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 20px; background: var(--fill-2); color: var(--label); overflow: hidden; flex: none; }
.sec-pet-portrait svg { width: 56px; height: 56px; }
.sec-pet-portrait img { width: 100%; height: 100%; object-fit: cover; }
.sec-add-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px; }
.sec-add-row > span { color: var(--label-2); font: var(--t-footnote); }
.sec-picked { padding: 14px 14px 0; }
.sec-count { margin: 0 0 10px; color: var(--label-2); font: 600 12px/17px var(--font); }
.sec-chips { display: flex; flex-wrap: wrap; gap: 7px; padding-bottom: 8px; }
.sec-selected-chip { display: inline-flex; align-items: center; justify-content: space-between; gap: 10px; max-width: 100%; min-height: 40px; padding: 8px 12px; border: 1px solid var(--separator); border-radius: 14px; background: var(--fill-2); color: var(--label); text-align: left; font: 500 13px/17px var(--font); cursor: pointer; }
.sec-selected-chip > span { min-width: 0; overflow-wrap: anywhere; }
.sec-selected-chip svg { flex: none; color: var(--label-2); }
.sec-selected-chip small { display: block; color: var(--label-2); font-weight: 400; }
.sec-results { padding: 0 10px 8px; }
.sec-search-label, .sec-search-status { padding: 10px 6px; color: var(--label-2); font: 13px/19px var(--font); }
.sec-search-label { font-weight: 600; padding-top: 2px; }
.sec-result { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; width: 100%; padding: 9px 8px; border: 0; border-radius: 12px; color: var(--label); background: transparent; text-align: left; cursor: pointer; }
.sec-result:hover, .sec-track-select:hover { background: var(--fill-2); }
.sec-result strong { display: block; font: 500 14px/19px var(--font); overflow-wrap: anywhere; }
.sec-result small { display: block; margin-top: 2px; font: 12px/16px var(--font); color: var(--label-2); }
.sec-result-plus { display: grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 50%; color: var(--accent); background: var(--fill-2); font: 400 22px/26px var(--font); }
.sec-details { border-top: 1px solid var(--separator); }
.sec-details > summary { padding: 17px 16px; color: var(--label); cursor: pointer; font: 500 14px/20px var(--font); }
.sec-details[open] > summary { padding-bottom: 8px; }
.sec-details > summary:focus-visible, .sec-result:focus-visible, .sec-track-select:focus-visible, .sec-selected-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.sec-custom-error { padding: 0 16px; }
.sec-custom-error:empty { display: none; }
.sec-track { padding: 3px 0 7px; border-bottom: 1px solid var(--separator); }
.sec-track-select { display: flex; align-items: center; width: 100%; gap: 10px; text-align: left; padding: 6px; border: 0; border-radius: 12px; background: transparent; color: var(--label); cursor: pointer; }
.sec-track-select img { width: 48px; height: 48px; flex: none; object-fit: cover; background: var(--fill-2); border-radius: 8px; }
.sec-track-select > span:not(.sec-result-plus) { flex: 1; min-width: 0; }
.sec-track-select strong { display: block; font: 600 14px/19px var(--font); overflow-wrap: anywhere; }
.sec-track-select small { display: block; margin-top: 2px; font: 12px/16px var(--font); color: var(--label-2); overflow-wrap: anywhere; }
.sec-track-store { display: inline-flex; align-items: center; gap: 3px; margin-left: 64px; padding: 6px 0; color: var(--label-2); font: 12px/16px var(--font); }
.sec-attribution { color: var(--label-2); padding: 10px 6px 4px; font: 11px/16px var(--font); }
/* On repeat editor: the chosen song reads like the public card — cover first, then title/artist/album. */
.sec-music-selected { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 4px 14px; align-items: center; padding: 14px 16px 10px; }
.sec-song-cover { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 12px; background: var(--fill-2); color: var(--label-2); object-fit: cover; grid-row: 1 / 3; }
.sec-song-cover.is-missing { visibility: hidden; }
.sec-song-text { display: grid; gap: 2px; min-width: 0; }
.sec-song-text > span { color: var(--label-2); font: 12px/17px var(--font); }
.sec-song-text strong { font: 600 16px/21px var(--font); overflow-wrap: anywhere; }
.sec-song-text small { color: var(--label-2); font: var(--t-footnote); overflow-wrap: anywhere; }
.sec-song-actions { grid-column: 2; display: flex; flex-wrap: wrap; gap: 2px 6px; margin-left: -8px; }
.sec-track-select img.is-missing { visibility: hidden; }
.sec-track-album { opacity: .85; }
.sec-explicit { display: inline-grid; place-items: center; width: 14px; height: 14px; border-radius: 3px; background: var(--label-2); color: var(--sheet-bg, #fff); font: 700 9px/1 var(--font); vertical-align: 1px; }
.sec-search-busy, .sec-search-offline, .sec-search-error { color: var(--label); }
.sec-search-limited { font-size: 12px; }
.sec-details > summary small { display: block; margin-top: 2px; color: var(--label-2); font: 400 12px/16px var(--font); }
.sec-field-note { padding: 0 16px 10px; color: var(--label-2); font: var(--t-footnote); }
.sec-field-note[hidden] { display: none; }
/* Teams editor: real badges in results and chips; hand-added teams are labelled as such. */
.sec-team-result { gap: 12px; }
.sec-team-badge { width: 40px; height: 40px; flex: none; object-fit: contain; border-radius: 10px; background: var(--fill-2); padding: 3px; }
.sec-team-badge-empty { display: inline-block; }
.sec-team-badge.is-missing { visibility: hidden; }
.sec-chip-badge.is-missing { display: none; }
.sec-chip-badge { width: 24px; height: 24px; flex: none; object-fit: contain; }
.sec-chip-badge[hidden] { display: none; }
/* Pets editor: breed suggestions with their stencil thumbnails sit right under the breed field. */
.sec-breed-results { padding: 0 10px 6px; }
.sec-breed-results[hidden] { display: none; }
.sec-breed-result { gap: 12px; min-height: 48px; }
.sec-breed-result > span:not(.sec-breed-thumb):not(.sec-result-plus), .sec-team-result > span:not(.sec-team-badge):not(.sec-result-plus) { flex: 1; min-width: 0; text-align: left; }
.sec-breed-thumb .i { opacity: .6; }
.sec-breed-result.is-current { background: var(--fill-2); }
.sec-breed-thumb { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 10px; background: #2b2733; color: #ECE8F7; }
.sec-breed-thumb svg { width: 32px; height: 32px; fill: currentColor; }
.pet-stencil { fill: currentColor; }
.sec-breed-own strong { font-weight: 500; color: var(--label-2); }
.sec-pet-number small { display: block; color: var(--label-2); font: 400 12px/16px var(--font); }
.sec-pet-portrait:not(.has-photo) { background: linear-gradient(180deg, #2b2733, #1e1b24); color: #ECE8F7; }
.sec-pet-portrait svg { width: 52px; height: 52px; }
.sec-fields #sec-lie { margin: 0 12px 14px; width: auto; }
.sec-fields #sec-lie button { font-size: 12px; padding: 0 4px; }
.sec-editor > .btn-block { position: sticky; bottom: 0; box-shadow: 0 4px 20px var(--sheet-bg); }
.gal-card { grid-template-columns: 1fr auto; align-items: center; gap: 10px 12px; }
.gal-card .gal-frame { grid-column: 1 / -1; }
.gal-card .gal-text { min-width: 0; text-align: left; }
.gal-card > .btn { grid-column: 2; grid-row: 2; }
.gal-frame.pp.pp-figma { padding: 8px; }
.gal-frame.pp.pp-figma .pp-rail { display: block; }
.gal-frame.pp.pp-figma .media { height: 135px; }
.gal-frame.pp.pp-figma .scard-meme .media { height: auto; aspect-ratio: 16 / 10; }
.gal-frame.pp.pp-figma .wcard { gap: 10px; }
.gal-frame.pp.pp-figma .card-body { padding-top: 0; padding-bottom: 3px; }
.gal-frame.pp.pp-figma .truths-options { gap: 5px; }
.gal-frame.pp.pp-figma .truths-choice { padding-top: 8px; padding-bottom: 8px; }
@media (max-width: 359px) {
  .sheet-body:has(.sec-editor), .sheet-body:has(.gal-grid) { padding-left: 14px; padding-right: 14px; }
  .sec-actions { gap: 6px; }
  .sec-actions .btn { padding-left: 10px; padding-right: 10px; }
  .sec-track-select { gap: 7px; }
  .sec-track-select img { width: 40px; height: 40px; }
  .sec-track-store { margin-left: 53px; }
}

.sec-color-swatch { appearance: none; -webkit-appearance: none; width: 40px; height: 40px; padding: 3px; flex: none; border: 1px solid var(--separator); border-radius: 12px; background: transparent; cursor: pointer; }
.sec-color-swatch::-webkit-color-swatch-wrapper { padding: 0; }
.sec-color-swatch::-webkit-color-swatch { border: 0; border-radius: 8px; }
.sec-color-swatch::-moz-color-swatch { border: 0; border-radius: 8px; }

/* Touch and keyboard ordering without squeezing the social link field. */
.social-order { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:4px 12px; padding:0 16px 8px; }
.social-order .btn { min-height:44px; padding:0 8px; font:var(--t-footnote); }
.social-opens span { min-width:0; overflow-wrap:anywhere; }

.native-photo-picker { position:relative; cursor:pointer; }
.native-photo-input { position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer; border:0; }
.native-photo-picker:focus-within { outline:2px solid var(--accent); outline-offset:-2px; border-radius:12px; }