/* flow.css — the onboarding sheet (js/onboard.js) and the profile view (js/profile.js).
   The contract is DESIGN.md; tokens and the kit (.card--stitched, .btn, .chip, .eyebrow,
   .display-lg) come from styles.css. Layout numbers that belong to one component (a bow's
   size and lift, the huge taste figure) are named at the top of that component.
   Only transform and opacity animate. */

/* ───────────────────────── onboarding sheet ───────────────────────── */
.onb {
  --onb-bow-w: 104px;   /* bow-petal.svg sitting on the sheet's top edge */
  --onb-bow-lift: 38px; /* how far the bow rises above that edge */
  --onb-hem-h: 22px;    /* one lace-x.svg tile, the phone sheet's top hem */
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  grid-template-columns: minmax(0, 1fr); /* the sheet's content can never widen it past the screen */
  place-items: center;
  padding: var(--gutter);
}
.onb__backdrop {
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--boba) 44%, transparent);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity var(--dur-3) var(--ease-out);
}
.onb[data-state="open"] .onb__backdrop { opacity: 1; }
.onb[data-state="closing"] .onb__backdrop { transition-duration: var(--dur-2); }

/* the sheet is stitched paper; it does not scroll itself, so the bow and the hem can sit outside it */
.onb__sheet {
  width: min(520px, 100%);
  max-height: calc(100dvh - 2 * var(--gutter) - var(--onb-bow-lift));
  margin-top: var(--onb-bow-lift);
  display: flex;
  flex-direction: column;
  transform: translateY(24px) scale(0.98);
  opacity: 0;
  transition: transform var(--dur-3) var(--ease-out), opacity var(--dur-3) var(--ease-out);
  outline: 0;
}
.onb[data-state="open"] .onb__sheet { transform: none; opacity: 1; }
.onb[data-state="closing"] .onb__sheet { transition-duration: var(--dur-2); }

.onb__bow {
  position: absolute;
  left: 50%;
  top: calc(var(--onb-bow-lift) * -1);
  z-index: 2;
  width: var(--onb-bow-w);
  height: auto;
  translate: -50% 0;
  pointer-events: none;
  user-select: none;
}
.onb__scroll {
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  padding: 60px 40px 34px;
}

.onb__grip { display: none; }
.onb__close {
  position: absolute;
  right: 18px;
  top: 18px;
  z-index: 3;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: var(--blush);
  color: var(--cocoa);
  cursor: pointer;
  display: grid;
  place-items: center;
}
.onb__close:hover { background: var(--lace); color: var(--boba); }
.onb__close svg { width: 18px; height: 18px; }

.onb__step { display: flex; flex-direction: column; gap: 22px; }
.onb__step.is-entering { animation: onb-step-in var(--dur-2) var(--ease-out); }
@keyframes onb-step-in { from { transform: translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }

/* eyebrow, the columnist's line, one or two sentences */
.onb__head { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.onb__title { color: var(--cherry); max-width: 12ch; }
.onb__sub { margin: 0; max-width: 34ch; color: var(--cocoa); text-wrap: pretty; }
.onb__sub b { color: var(--boba); font-weight: 700; }

.onb__form { display: flex; flex-direction: column; gap: 14px; }
.onb .field__input[aria-invalid="true"] { border-color: var(--cherry-deep); background: var(--white); }
.onb .field__input:read-only { background: var(--strawberry-milk); color: var(--cocoa); }
/* the name is locked while the old password is asked for, so its rules stop being news */
.onb__form:has(> [data-legacy]:not([hidden])) .field__hint { display: none; }
.onb__error {
  margin: 0;
  padding: 11px 16px;
  border: 1px solid var(--lace);
  border-radius: var(--r-ctl);
  background: var(--blush);
  color: var(--cherry-deep);
  font: 700 var(--fs-caption)/1.4 var(--font-body);
}

/* the old-site password: a stitched pocket inside the sheet */
.onb__legacy {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px;
  border: var(--stitch-w) dashed var(--petal);
  border-radius: var(--r-ctl);
  background: var(--strawberry-milk);
}
.onb__legacy .field__input { background: var(--white); }
.onb__primary { width: 100%; margin-top: 4px; white-space: normal; text-align: center; line-height: 1.2; } /* a long label wraps inside the pill instead of widening the sheet */
.onb__legacy .onb__primary { margin-top: 0; }
.onb__later { min-height: 44px; padding: 10px 14px; align-self: center; color: var(--taro); }
.onb__later:hover { color: var(--cherry-deep); }
.onb__actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.onb__actions > .onb__wide { grid-column: 1 / -1; }

/* x step: the avatar that swaps in */
.onb__who {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 16px 18px;
  border-radius: var(--r-ctl);
  background: var(--strawberry-milk);
}
.onb__avatar {
  width: 64px;
  height: 64px;
  margin: 6px;
  border-radius: 50%;
  object-fit: cover;
  flex: none;
  background: var(--white);
  box-shadow: 0 0 0 3px var(--white), 0 0 0 6px var(--petal);
  transition: opacity var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out);
}
.onb__avatar.is-swapping { opacity: 0.5; transform: scale(0.94); }
.onb__avatar.is-swapped { box-shadow: 0 0 0 3px var(--white), 0 0 0 6px var(--cherry); animation: onb-pop var(--dur-3) var(--ease-out); }
@keyframes onb-pop { from { transform: scale(0.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.onb__who-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.onb__who-name {
  font: 400 var(--fs-display-md)/1.1 var(--font-display);
  color: var(--boba);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.onb__at { position: relative; }
.onb__at-sign { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); font-weight: 800; color: var(--taro); pointer-events: none; }
.onb__at .field__input { padding-left: 34px; }

/* share step: the card in a paper frame (12px photo + 8px padding = the 20px frame radius) */
.onb__card {
  padding: 8px;
  background: var(--white);
  border: 1px solid var(--lace);
  border-radius: var(--r-frame-sm);
  box-shadow: var(--shadow-paper);
}
.onb__card-well {
  position: relative;
  aspect-ratio: 1200 / 630;
  border-radius: var(--r-ctl);
  overflow: hidden;
  background: var(--blush);
}
.onb__card-skeleton { position: absolute; inset: 0; border-radius: 0; }
.onb__card-img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* desktop only: Hello Kitty peeks over the sheet's top edge (the phone sheet uses ::after for its lace hem) */
@media (min-width: 861px) {
  .onb__sheet::after {
    content: "";
    position: absolute;
    left: 34px;
    top: -114px;
    z-index: 2;
    width: 108px;
    aspect-ratio: 468 / 505;
    background: url("/assets/sanrio/kitty-peek.webp") center bottom / contain no-repeat;
    pointer-events: none;
  }
}

/* the bottom sheet: square top edge with a lace hem, a grip, no bow */
@media (max-width: 860px) {
  .onb { place-items: end center; padding: 0; }
  .onb__sheet {
    width: 100%;
    max-height: calc(100dvh - 48px);
    margin-top: 0;
    border-width: 0;
    border-radius: 0;
    transform: translateY(calc(100% + var(--onb-hem-h)));
    opacity: 1;
  }
  .onb__sheet::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 100%;
    height: var(--onb-hem-h);
    background: url("/assets/art/lace-x.svg") repeat-x 0 0 / 48px var(--onb-hem-h);
    transform: scaleY(-1);
    pointer-events: none;
  }
  .onb__sheet.card--stitched::before { inset: 10px 8px 0; border-bottom: 0; border-radius: var(--r-ctl) var(--r-ctl) 0 0; }
  .onb__bow { display: none; }
  .onb__grip { display: block; flex: none; width: 44px; height: 5px; margin: 20px auto 0; border-radius: var(--r-pill); background: var(--lace); }
  .onb__close { top: 22px; right: 18px; }
  .onb__scroll { padding: 18px 24px calc(24px + env(safe-area-inset-bottom, 0px)); }
  .onb__step { gap: 18px; }
  .onb__head { gap: 10px; }
  .onb__title { max-width: 11ch; }
}

@media (prefers-reduced-motion: reduce) {
  /* opacity stays, travel goes */
  .onb__sheet { transform: none; opacity: 0; }
  .onb__step.is-entering, .onb__avatar.is-swapped { animation: none; }
}

/* ───────────────────────── profile ───────────────────────── */
/* Sized so the whole keepsake, bow to buttons, sits inside a 1440x900 first screen. */
.prof {
  --prof-bow-w: 112px;                            /* bow-petal.svg on the card's top edge */
  --prof-bow-lift: 38px;                          /* how far it rises above that edge */
  --prof-taste-size: clamp(88px, 7.5vw, 108px);   /* the one huge figure on the card */
  position: relative;
  max-width: 700px;
  margin: 0 auto;
  padding-top: var(--prof-bow-lift);
}
.prof__mascot {
  position: absolute;
  left: -150px;
  bottom: 84px;
  z-index: 0;
  width: 184px;
  height: auto;
  rotate: -8deg;
  pointer-events: none;
  user-select: none;
}
.prof__card {
  z-index: 1;
  padding: 52px 44px 36px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.prof__bow {
  position: absolute;
  left: 50%;
  top: calc(var(--prof-bow-lift) * -1);
  z-index: 2;
  width: var(--prof-bow-w);
  height: auto;
  translate: -50% 0;
  pointer-events: none;
  user-select: none;
}

.prof__head { display: flex; flex-direction: column; align-items: center; min-width: 0; max-width: 100%; }
.prof__avatar {
  width: 108px;
  height: 108px;
  margin-bottom: 20px;
  border-radius: 50%;
  object-fit: cover;
  flex: none;
  background: var(--milk);
  box-shadow: 0 0 0 5px var(--white), 0 0 0 10px var(--petal), 0 0 0 11px var(--lace);
}
.prof__name { max-width: 100%; margin-top: 8px; color: var(--cherry); overflow-wrap: anywhere; }
.prof__x { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; font-weight: 700; color: var(--cocoa); }
.prof__x svg { width: 14px; height: 14px; }
.prof__x:hover { color: var(--cherry-deep); }

.prof__taste {
  width: 100%;
  margin-top: 18px;
  padding-top: 18px;
  border-top: var(--stitch-w) dashed var(--lace);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.prof__label { color: var(--taro); }
.prof__taste-num {
  margin-top: 8px;
  font-size: var(--prof-taste-size);
  line-height: 0.9;
  letter-spacing: -0.035em;
  color: var(--boba);
}
.prof__tier { margin-top: 14px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 10px; }
.prof__tier .chip { padding: 4px 12px; }
.prof__next { color: var(--taro); }

.prof__stats { width: 100%; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); margin: 20px 0 0; }
.prof__stat {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 13px 8px 15px;
  background: var(--white);
  border: 1px solid var(--lace);
  border-radius: var(--r-ctl);
  box-shadow: var(--shadow-paper);
}
.prof__stat dt {
  font: 800 var(--fs-micro)/1.3 var(--font-body);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--taro);
  text-wrap: balance;
}
.prof__stat dd { margin: 0; font-size: var(--fs-number); line-height: 1; color: var(--boba); }
.prof__streak { display: flex; align-items: center; gap: 4px; }
.prof__streak svg { width: 22px; height: 22px; color: var(--cherry); }
.prof__note { margin: 22px 0 0; max-width: 36ch; color: var(--cocoa); text-wrap: pretty; }
.prof__actions { margin-top: 22px; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
/* My Melody waves over the keepsake's top-right corner (the bow holds the centre, Momo the left) */
.prof__card::after {
  content: "";
  position: absolute;
  right: -44px;
  top: -64px;
  z-index: 3;
  width: 104px;
  aspect-ratio: 1;
  background: url("/assets/stickers/emoji/sparkling-heart.webp") center / contain no-repeat;
  rotate: 10deg;
  pointer-events: none;
}

/* no one here */
.prof__card--missing { padding-top: 56px; }
.prof__missing-art { width: 132px; height: auto; margin-bottom: 18px; rotate: -6deg; }
.prof__card--missing .prof__name { margin-top: 12px; }
.prof__missing-copy { margin-top: 16px; max-width: 30ch; }

@media (max-width: 1100px) {
  .prof__mascot { display: none; }
}
@media (max-width: 720px) {
  .prof { --prof-bow-w: 92px; --prof-bow-lift: 32px; }
  .prof__card { padding: 50px 20px 26px; }
  .prof__avatar { width: 104px; height: 104px; }
  .prof__taste { margin-top: 24px; padding-top: 24px; }
  .prof__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 26px; }
  .prof__stat { padding: 14px 10px 16px; }
  .prof__stat dt { letter-spacing: 0.08em; }
  .prof__actions { width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .prof__actions > :first-child:not(:only-child):nth-last-child(odd),
  .prof__actions > :only-child { grid-column: 1 / -1; }
  .prof__actions--stack { grid-template-columns: minmax(0, 1fr); }
  .prof__actions .btn { padding: 0 14px; }
  .prof__card--missing { padding-top: 44px; }
  .prof__card::after { right: -6px; top: -46px; width: 84px; }
  .prof__missing-art { width: 112px; }
}