/* ==========================================================================
   Meeow 0.2.6–0.2.7 — Mio page, signed out: a sign-in stage with the live 3D Mio
   Soft neumorphic tray (same --nm-* recipe as the home hero and shortcuts).
   ========================================================================== */

.pet-gate.pv1 {
  --nm-base: #f6efe7;
  --nm-dark: rgba(170, 138, 104, .3);
  --nm-light: rgba(255, 255, 255, .95);
  --nm-raise: 6px 6px 14px var(--nm-dark), -6px -6px 14px var(--nm-light);
  --nm-raise-sm: 3px 3px 8px var(--nm-dark), -3px -3px 8px var(--nm-light);
  --nm-press: inset 3px 3px 7px var(--nm-dark), inset -3px -3px 7px var(--nm-light);
  --nm-ring: 0 0 0 2px var(--b-mint-ink);
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  grid-template-areas: "copy stage";
  align-items: center;
  gap: clamp(20px, 3.4vw, 44px);
  margin: 10px 0 28px;
  padding: clamp(16px, 2.4vw, 28px);
  color: var(--b-ink);
  background: var(--nm-base);
  border-radius: 34px;
  box-shadow: var(--nm-raise);
}

/* ---------- Stage: live Mio on an illustrated corner; poster when 3D is off ---------- */
.pv1-stage-wrap {
  grid-area: stage;
  padding: 10px;
  background: var(--nm-base);
  border-radius: 30px;
  box-shadow: var(--nm-press);
}
.pv1-stage.mio-slot {
  width: 100%;
  height: clamp(380px, 40vw, 500px);
  overflow: hidden;
  background: #fdd05d;
  border-radius: 22px;
}
.pv1-stage > .pv1-scene { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; transition: opacity .5s ease; }
.pv1-stage > .mio-stage { position: absolute; inset: 0; }
.pv1-stage .mio-stage > .mio-poster { display: none; }
.pv1-stage:has(> .mio-stage.is-live) {
  background: #ffeedb url("/assets/mio-scenes/mio-pet-stage-640.webp") center bottom / cover no-repeat;
  background-image: image-set(url("/assets/mio-scenes/mio-pet-stage-640.webp") 1x, url("/assets/mio-scenes/mio-pet-stage-1024.webp") 2x);
}
.pv1-stage:has(> .mio-stage.is-live) > .pv1-scene { opacity: 0; pointer-events: none; }
.pv1-stage .mio-bubble { max-width: min(280px, 86%); font-size: .92rem; }

/* ---------- Copy ---------- */
.pv1-copy { grid-area: copy; min-width: 0; padding-inline-start: clamp(4px, 1.6vw, 18px); }
.pv1-overline {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px;
  color: var(--b-mint-ink);
  background: var(--nm-base);
  border-radius: 999px;
  box-shadow: var(--nm-raise-sm);
  font: 700 .74rem/1.4 var(--font);
}
.pet-gate.pv1 h1 {
  margin: 14px 0 10px;
  color: var(--b-ink);
  font: 800 clamp(1.7rem, 3vw, 2.55rem)/1.3 var(--font-display, var(--font));
  letter-spacing: -.02em;
}
.pet-gate.pv1 h1 em { font-style: normal; font-weight: 400; color: var(--b-peach-ink); }
.pv1-lead { max-width: 30rem; margin: 0 0 18px; color: var(--b-ink-2); font-size: .95rem; line-height: 1.9; }

/* ---------- Inline phone form ---------- */
.pv1-form { max-width: 34rem; }
.pv1-label { display: block; margin: 0 2px 8px; color: var(--b-ink); font: 700 .86rem/1.4 var(--font); }
.pv1-row { display: flex; gap: 12px; align-items: stretch; }
.pv1-field {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  display: flex; align-items: center; gap: 10px;
  height: 58px;
  padding-inline: 8px 14px;
  background: var(--nm-base);
  border-radius: 18px;
  box-shadow: var(--nm-press);
  transition: box-shadow .2s ease;
}
.pv1-icon {
  flex: none;
  width: 40px; height: 40px;
  display: grid; place-items: center;
  color: var(--b-mint-ink);
  background: #fcf8f3;
  border-radius: 13px;
  box-shadow: var(--nm-raise-sm);
}
.pv1-icon svg, .pv1-ok svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pv1-field input {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  padding: 0 4px;
  color: var(--b-ink);
  background: transparent;
  border: 0;
  outline: none;
  font: 700 1.14rem/1 var(--font);
  letter-spacing: .06em;
  text-align: left;
}
.pv1-field input::placeholder { color: #8a8f9c; font-weight: 500; letter-spacing: .04em; }
.pv1-field:focus-within { outline: 3px solid var(--b-mint); outline-offset: 2px; box-shadow: var(--nm-press), var(--nm-ring); }
.pv1-ok {
  flex: none;
  width: 30px; height: 30px;
  display: grid; place-items: center;
  color: #fff;
  background: var(--b-mint-ink);
  border-radius: 50%;
  opacity: 0;
  transform: scale(.6);
  transition: opacity .2s ease, transform .3s cubic-bezier(.22, 1.45, .36, 1);
}
.pv1-form[data-state="valid"] .pv1-ok, .pv1-form[data-state="sent"] .pv1-ok { opacity: 1; transform: none; }
.pv1-form[data-state="error"] .pv1-field { box-shadow: var(--nm-press), 0 0 0 2px var(--b-cta); }
.pv1-form[data-state="error"] .pv1-field:focus-within { box-shadow: var(--nm-press), 0 0 0 2px var(--b-cta); }

.pv1-submit {
  flex: none;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 58px;
  padding: 0 22px;
  color: #fff;
  background: var(--b-cta);
  border: 0;
  border-radius: 18px;
  box-shadow: 5px 5px 12px rgba(170, 138, 104, .38), -5px -5px 12px var(--nm-light), inset 1px 1px 1px rgba(255, 255, 255, .28), inset -1px -1px 2px rgba(110, 26, 16, .25);
  font: 700 .98rem/1 var(--font);
  cursor: pointer;
  transition: background .2s ease, transform .15s ease, box-shadow .2s ease;
}
.pv1-submit svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.pv1-submit:hover { background: var(--b-cta-hover); transform: translateY(-1px); }
.pv1-submit:active { transform: none; box-shadow: inset 3px 3px 7px rgba(110, 26, 16, .35); }
.pv1-submit:focus-visible { outline: 3px solid var(--b-mint); outline-offset: 3px; box-shadow: var(--nm-ring); }
.pv1-form[data-state="valid"] .pv1-submit { animation: pv1-ready 1.4s ease-in-out 2; }
@keyframes pv1-ready {
  50% { box-shadow: 5px 5px 12px rgba(170, 138, 104, .38), -5px -5px 12px var(--nm-light), 0 0 0 6px rgba(210, 64, 47, .16); }
}

.pv1-error { margin: 10px 2px 0; color: var(--b-peach-ink); font: 700 .84rem/1.7 var(--font); }
.pv1-status { min-height: 0; margin: 8px 2px 0; color: var(--b-mint-ink); font: 700 .84rem/1.7 var(--font); }
.pv1-status:empty { display: none; }
.pv1-form.is-offline .pv1-status { color: var(--b-sun-ink); }
.pv1-form.is-offline .pv1-status::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-inline-end: 7px; vertical-align: 1px; background: var(--b-sun); border-radius: 50%; }
.pv1-hint { display: flex; gap: 8px; align-items: flex-start; margin: 12px 2px 0; color: var(--b-muted); font-size: .78rem; line-height: 1.8; }
.pv1-hint svg { flex: none; width: 17px; height: 17px; margin-top: 3px; fill: none; stroke: var(--b-mint-ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- What signing in gives (features that exist in the app) ---------- */
.pv1-perks-title { margin: 22px 2px 10px; color: var(--b-ink-2); font: 700 .8rem/1.4 var(--font); }
.pv1-perks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.pv1-perk {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 10px 8px 12px;
  text-align: center;
  background: var(--nm-base);
  border-radius: 20px;
  box-shadow: var(--nm-raise-sm);
}
.pv1-perk img { flex: none; width: 60px; height: 60px; border-radius: 15px; background: var(--tile); }
.pv1-perk--mint { --tile: #acd9be; }
.pv1-perk--sky { --tile: #9cd3fa; }
.pv1-perk--peach { --tile: #fca889; }
.pv1-perk span { display: grid; gap: 2px; min-width: 0; }
.pv1-perk strong { color: var(--b-ink); font: 700 .84rem/1.45 var(--font); }
.pv1-perk small { color: var(--b-muted); font-size: .72rem; line-height: 1.55; }

/* ---------- 0.2.7: in-place steps (phone -> code), digit boxes ---------- */
.pv1-auth { display: grid; max-width: 34rem; }
.pv1-panel { grid-area: 1 / 1; min-width: 0; transition: opacity .3s ease, transform .3s ease; }
.pv1-panel.is-leaving { opacity: 0; transform: translateY(-8px); pointer-events: none; }
.pv1-panel.is-entering { opacity: 0; transform: translateY(8px); }
.pv1-live { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.pv1-panel .pv1-field { display: block; height: auto; padding: 10px; }
.pv1-panel .pv1-submit { width: 100%; margin-top: 12px; }
.pv1-submit[aria-busy] { cursor: progress; background: var(--b-cta-hover); }
.pv1-submit[aria-busy] svg { display: none; }
.pv1-submit[aria-busy]::after {
  content: ""; width: 16px; height: 16px;
  border: 2px solid rgba(255, 255, 255, .45); border-top-color: #fff; border-radius: 50%;
  animation: pv1-spin .8s linear infinite;
}
@keyframes pv1-spin { to { transform: rotate(1turn); } }

/* Boxes share the tray's width (never overflow it), up to --dg-w each; groups read 4-3-4. */
.dg { --dg-w: 40px; --dg-h: 46px; --dg-gap: 4px; display: flex; justify-content: center; gap: 14px; direction: ltr; pointer-events: none; }
.dg-group { display: flex; justify-content: center; gap: var(--dg-gap); min-width: 0; }
.dg-box {
  position: relative;
  flex: 1 1 0; min-width: 0; max-width: var(--dg-w); height: var(--dg-h);
  display: grid; place-items: center;
  color: var(--b-ink);
  background: #fcf8f3;
  border-radius: 11px;
  box-shadow: var(--nm-raise-sm);
  font: 800 1.18rem/1 var(--font);
  transition: background .2s ease, box-shadow .2s ease, color .2s ease;
}
.dg-box[data-ph]:not(.is-filled)::before { content: attr(data-ph); color: #a0978d; font-weight: 600; }
.dg-box.is-active::before { opacity: 0; }
.dg-box.is-filled { animation: dg-pop .24s cubic-bezier(.22, 1.45, .36, 1); }
.dg-box.is-active { background: var(--nm-base); box-shadow: var(--nm-press), 0 0 0 2px var(--b-mint-ink); }
.dg-box.is-active:not(.is-filled)::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 2px; height: 46%; margin: -11% 0 0 -1px;
  background: var(--b-mint-ink); border-radius: 2px;
  animation: dg-caret 1s steps(1) infinite;
}
@keyframes dg-pop { from { transform: scale(.72); } }
@keyframes dg-caret { 50% { opacity: 0; } }
.pv1-form[data-state="valid"] .dg-box.is-filled,
.pv1-form[data-state="sent"] .dg-box.is-filled,
.pv1-form[data-state="success"] .dg-box.is-filled { color: var(--b-mint-ink); background: #e4f4ea; }
.pv1-form[data-state="error"] .dg-box { box-shadow: var(--nm-raise-sm), 0 0 0 1.5px var(--b-cta); }
.pv1-form[data-state="error"] .dg-box.is-active { box-shadow: var(--nm-press), 0 0 0 2px var(--b-cta); }

.pv1-field .dg-input {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  padding: 0; margin: 0;
  color: transparent; -webkit-text-fill-color: transparent; caret-color: transparent;
  background: transparent; border: 0; border-radius: inherit; outline: none;
  font-size: 16px; letter-spacing: 0; text-align: left;
  cursor: text;
}
.dg-input::selection { background: transparent; }
.dg-input:-webkit-autofill { transition: background-color 9999s 9999s; }

.pv1-field--code .dg { --dg-w: 58px; --dg-h: 60px; }
.pv1-field--code .dg-box { width: var(--dg-w); }
.pv1-field--code .dg-group { gap: 12px; }
.pv1-field--code .dg-box { font-size: 1.5rem; border-radius: 15px; }
.pv1-field.is-shake { animation: pv1-shake .42s ease; }
@keyframes pv1-shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }

.pv1-code-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 4px; }
.pv1-code-head .pv1-label { margin-bottom: 0; }
.pv1-sent { margin: 0 2px 10px; color: var(--b-ink-2); font-size: .84rem; line-height: 1.8; }
.pv1-form[data-state="success"] .pv1-sent { color: var(--b-mint-ink); font-weight: 700; }
.pv1-link {
  min-height: 36px; padding: 6px 8px;
  color: var(--b-mint-ink);
  background: none; border: 0; border-radius: 10px;
  font: 700 .82rem/1.4 var(--font);
  text-decoration: underline; text-underline-offset: 4px;
  cursor: pointer;
}
.pv1-link:hover { color: var(--b-ink); }
.pv1-link:disabled { color: var(--b-muted); text-decoration: none; cursor: default; }
.pv1-link[aria-busy="true"] { cursor: progress; opacity: .7; }
.pv1-link:focus-visible { outline: 3px solid var(--b-mint); outline-offset: 2px; box-shadow: var(--nm-ring); }
.pv1-code-foot { display: flex; align-items: center; gap: 6px; margin-top: 6px; }
.pv1-timer { color: var(--b-muted); font: 700 .82rem/1 var(--font); font-variant-numeric: tabular-nums; }
.pv1-auth.is-offline .pv1-status { color: var(--b-sun-ink); }

/* A thank-you kiss: little hearts float up from Mio's face. */
.mio-heart {
  position: absolute; z-index: 3;
  width: 24px; height: 24px; margin: -12px 0 0 -12px;
  pointer-events: none; opacity: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23ef5a4a' stroke='%23fff' stroke-width='1.6' d='M12 21s-7.5-4.6-9.4-9.3C1.2 8.2 3.4 4.5 7 4.5c2.1 0 3.6 1.2 5 3 1.4-1.8 2.9-3 5-3 3.6 0 5.8 3.7 4.4 7.2C19.5 16.4 12 21 12 21z'/%3E%3C/svg%3E") center / contain no-repeat;
  animation: mio-heart 1.9s ease-out forwards;
}
@keyframes mio-heart {
  0% { opacity: 0; transform: translate(0, 40px) scale(.4); }
  18% { opacity: 1; transform: translate(calc(var(--dx, 0px) * .3), 22px) scale(1.1); }
  100% { opacity: 0; transform: translate(var(--dx, 0px), -64px) scale(.85) rotate(10deg); }
}

@media (max-width: 1100px) and (min-width: 761px) {
  .pv1-row { flex-direction: column; }
  .pv1-perk { flex-direction: column; align-items: flex-start; }
}

/* ---------- Mobile: stage on top, field and button above the fold ---------- */
@media (max-width: 760px) {
  .pet-gate.pv1 {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "stage" "copy";
    gap: 14px;
    margin: 4px 0 18px;
    padding: 10px 10px 16px;
    border-radius: 28px;
  }
  .pv1-stage-wrap { padding: 6px; border-radius: 24px; }
  .pv1-stage.mio-slot { height: 220px; border-radius: 19px; }
  .dg { --dg-h: 42px; --dg-gap: 3px; gap: 9px; }
  .dg-box { border-radius: 9px; font-size: 1.08rem; }
  .pv1-panel .pv1-field { padding: 8px 6px; }
  .pv1-field--code .dg { --dg-w: 54px; --dg-h: 48px; }
  .pv1-sent { margin-bottom: 6px; font-size: .8rem; line-height: 1.6; }
  .pv1-code-head .pv1-link { min-height: 32px; padding-block: 4px; }
  .pv1-panel .pv1-submit { margin-top: 10px; }
  .pv1-stage .mio-bubble { font-size: .86rem; padding: 7px 12px 8px; }
  .pv1-copy { padding-inline: 4px; }
  .pv1-overline { font-size: .7rem; padding: 4px 10px; }
  .pet-gate.pv1 h1 { margin: 10px 0 6px; font-size: 1.42rem; line-height: 1.45; }
  .pv1-lead { margin-bottom: 12px; font-size: .84rem; line-height: 1.8; }
  .pv1-row { flex-direction: column; gap: 10px; }
  .pv1-field { height: 54px; }
  .pv1-submit { min-height: 52px; width: 100%; }
  .pv1-hint { font-size: .74rem; margin-top: 10px; }
  .pv1-perks-title { margin-top: 18px; }
  .pv1-perks { gap: 8px; }
  .pv1-perk { flex-direction: column; align-items: center; gap: 6px; padding: 8px 6px 10px; text-align: center; border-radius: 18px; }
  .pv1-perk img { width: 64px; height: 64px; }
  .pv1-perk strong { font-size: .76rem; }
  .pv1-perk small { font-size: .7rem; }
}

@media (prefers-reduced-motion: reduce) {
  .pv1-panel, .dg-box { transition: none; }
  .dg-box.is-filled, .dg-box.is-active:not(.is-filled)::after, .pv1-field.is-shake, .pv1-submit[aria-busy]::after { animation: none; }
  .mio-heart { display: none; }
  .pv1-stage > .pv1-scene, .pv1-field, .pv1-ok, .pv1-submit { transition: none; }
  .pv1-form[data-state="valid"] .pv1-submit { animation: none; }
  .pv1-submit:hover { transform: none; }
}

/* The dialog's code boxes (other entry points) share the stage's look. */
.am-otp input { background: #fcf8f3; border-color: rgba(170, 138, 104, .28); box-shadow: 3px 3px 8px rgba(170, 138, 104, .22), -3px -3px 8px rgba(255, 255, 255, .9); }
.am-otp input:focus { border-color: var(--b-mint-ink); box-shadow: 0 0 0 2px var(--b-mint-ink); outline: 3px solid var(--b-mint); outline-offset: 2px; }