/* SwimSafe account onboarding — mobile-first, token-led composition. */
main.swoom-page:has(.account-flow) {
  max-width: none;
  min-height: 100svh;
  padding: 0;
}

.account-flow {
  --flow-control-height: 3.5rem;
  min-height: 100svh;
  overflow-x: clip;
  background: var(--bg-main, #f4f9ff);
  color: var(--ink-900, #0c2a4d);
  font-family: var(--font-body, sans-serif);
}

.account-flow *,
.account-flow *::before,
.account-flow *::after { box-sizing: border-box; }

.account-flow__visual {
  position: relative;
  min-height: 13.5rem;
  overflow: hidden;
  padding: calc(var(--space-2, 1rem) + env(safe-area-inset-top)) var(--space-screen, 1.375rem) var(--space-3, 1.5rem);
  background: var(--grad-ocean, linear-gradient(150deg, #1fd4c9, #1b8fe0 55%, #1147a8));
  color: var(--card, #fff);
  isolation: isolate;
}

.account-flow__visual::before {
  display: none;
  content: "";
}

.account-flow__visual::after {
  position: absolute;
  right: -8%;
  bottom: -2.4rem;
  left: -8%;
  height: 5rem;
  border-radius: 50% 50% 0 0;
  background: var(--bg-main, #f4f9ff);
  content: "";
  z-index: -1;
}

.account-flow__brand {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  color: inherit;
  font-family: var(--font-display, sans-serif);
  font-size: 1.25rem;
  font-weight: var(--weight-semibold, 600);
  text-decoration: none;
}

.account-flow__brand-icon {
  width: 2.55rem;
  height: 2.55rem;
  overflow: hidden;
  border: .08rem solid rgb(255 255 255 / .38);
  border-radius: var(--radius-sm, .625rem);
  background: rgb(255 255 255 / .16);
  box-shadow: var(--shadow-card, 0 .5rem 1.4rem rgb(12 42 77 / .08));
}

.account-flow__brand-icon img { width: 100%; height: 100%; object-fit: cover; }

.account-flow__visual-copy { position: relative; z-index: 2; display: none; max-width: 17rem; margin-top: 2rem; }
.account-flow__eyebrow { margin: 0 0 .35rem; color: rgb(255 255 255 / .78); font-size: var(--text-xs, .8rem); font-weight: var(--weight-extrabold, 800); letter-spacing: var(--tracking-wider, .1em); text-transform: uppercase; }
.account-flow__visual-copy h1 { margin: 0; color: inherit; font-family: var(--font-display, sans-serif); font-size: 1.8rem; font-weight: var(--weight-semibold, 600); line-height: var(--leading-tight, 1.1); }
.account-flow__visual-copy p:last-child { display: none; margin: .8rem 0 0; color: rgb(255 255 255 / .82); font-weight: var(--weight-semibold, 600); line-height: var(--leading-normal, 1.5); }

.account-flow__mascot {
  position: absolute;
  z-index: 1;
  right: -.5rem;
  bottom: -.5rem;
  width: 10.5rem;
  height: 11.5rem;
  object-fit: contain;
  filter: drop-shadow(0 1.2rem 1.4rem rgb(12 42 77 / .25));
  animation: account-float 4.8s var(--ease-out, ease-out) infinite;
}

.account-flow__mascot--pia { right: -.9rem; width: 11rem; }
.account-flow__bubble { position: absolute; border: .1rem solid rgb(255 255 255 / .26); border-radius: 50%; animation: account-bubble 5s ease-in-out infinite; }
.account-flow__bubble--one { top: 24%; right: 36%; width: 1.1rem; height: 1.1rem; }
.account-flow__bubble--two { top: 45%; right: 43%; width: .6rem; height: .6rem; animation-delay: .7s; }

.account-flow__main { position: relative; z-index: 2; width: 100%; margin-top: -1.1rem; padding: 0 var(--space-gutter, .875rem) calc(var(--space-4, 2rem) + env(safe-area-inset-bottom)); }
.account-panel { width: 100%; max-width: 36rem; margin: 0 auto; padding: 1.15rem .55rem 0; }
.account-panel__mobile-brand { display: none; }

.account-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: .25rem; margin-bottom: var(--space-3, 1.5rem); padding: .3rem; border-radius: var(--radius-md, 1rem); background: var(--ink-50, #eef4fb); }
.account-tabs a,
.account-tabs span { min-height: 2.8rem; display: flex; align-items: center; justify-content: center; border-radius: .75rem; color: var(--ink-200, #9fb2c9); font-size: var(--text-sm, .8125rem); font-weight: var(--weight-extrabold, 800); text-decoration: none; }
.account-tabs span { background: var(--card, #fff); color: var(--ink-900, #0c2a4d); box-shadow: var(--shadow-card, 0 .5rem 1.4rem rgb(12 42 77 / .08)); }

.account-panel__heading { margin-bottom: var(--space-2, 1rem); text-align: center; }
.account-panel__heading p { margin: 0 0 .3rem; color: var(--ocean-600, #1463d6); font-size: var(--text-xs, .75rem); font-weight: var(--weight-extrabold, 800); letter-spacing: var(--tracking-wide, .04em); text-transform: uppercase; }
.account-panel__heading h2 { margin: 0; color: var(--ink-900, #0c2a4d); font-family: var(--font-display, sans-serif); font-size: var(--text-h1, 1.95rem); font-weight: var(--weight-semibold, 600); }

.account-alert { margin: 0 0 var(--space-2, 1rem); padding: .8rem 1rem; border-radius: var(--radius-sm, .625rem); font-size: var(--text-sm, .8125rem); font-weight: var(--weight-bold, 700); }
.account-alert--error { border: .08rem solid rgb(232 100 42 / .25); background: rgb(232 100 42 / .08); color: var(--color-error, #e8642a); }
.account-alert--success { border: .08rem solid rgb(31 179 170 / .25); background: var(--tint-aqua, #e4faf7); color: var(--aqua-600, #0e9e97); }

main.swoom-page .account-flow form.account-form {
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}
.account-form__row { display: grid; gap: .8rem; }
.account-field { min-width: 0; margin-bottom: .8rem; }
.account-field label,
.choice-field legend,
.avatar-field legend,
.age-field label { display: block; margin: 0 0 .4rem; color: var(--ink-300, #6e89a6); font-size: var(--text-xs, .75rem); font-weight: var(--weight-extrabold, 800); letter-spacing: var(--tracking-wide, .04em); text-transform: uppercase; }
.account-field input,
.account-field select { width: 100%; min-height: var(--flow-control-height); border: .09rem solid var(--ink-100, #e8f0f8); border-radius: var(--radius-md, 1rem); outline: 0; background: var(--card, #fff); color: var(--ink-900, #0c2a4d); padding: .8rem .95rem; font: inherit; font-weight: var(--weight-bold, 700); box-shadow: 0 .25rem .75rem rgb(20 99 214 / .05); transition: border-color var(--dur-fast, 160ms), box-shadow var(--dur-fast, 160ms), transform var(--dur-fast, 160ms); }
.account-field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--ink-200, #9fb2c9) 50%), linear-gradient(135deg, var(--ink-200, #9fb2c9) 50%, transparent 50%); background-position: calc(100% - 1.15rem) 50%, calc(100% - .85rem) 50%; background-size: .35rem .35rem; background-repeat: no-repeat; padding-right: 2.5rem; }
.account-field input:focus,
.account-field select:focus { border-color: var(--ocean-400, #2e86f0); box-shadow: 0 0 0 .22rem rgb(46 134 240 / .14), 0 .35rem 1rem rgb(20 99 214 / .08); }
.account-field__control { position: relative; }
.account-field__control > svg { position: absolute; top: 50%; left: .9rem; width: 1.05rem; height: 1.05rem; fill: none; stroke: var(--ink-200, #9fb2c9); stroke-width: 1.8; transform: translateY(-50%); pointer-events: none; }
.account-field__control > input { padding-left: 2.65rem; padding-right: 3rem; }
.account-field__reveal { position: absolute; top: 50%; right: .45rem; width: 2.55rem; height: 2.55rem; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: var(--radius-sm, .625rem); background: transparent; color: var(--ink-300, #6e89a6); transform: translateY(-50%); }
.account-field__reveal svg { width: 1.2rem; height: 1.2rem; fill: none; stroke: currentColor; stroke-width: 1.8; }

.password-strength { display: grid; grid-template-columns: repeat(4, 1fr); gap: .3rem; margin-top: .5rem; }
.password-strength > span { height: .2rem; border-radius: var(--radius-pill, 999px); background: var(--ink-100, #e8f0f8); transition: background var(--dur-base, 260ms); }
.password-strength small { grid-column: 1 / -1; color: var(--ink-300, #6e89a6); font-size: var(--text-xxs, .6875rem); font-weight: var(--weight-semibold, 600); }
.password-strength[data-score="1"] span:nth-child(1) { background: var(--color-error, #e8642a); }
.password-strength[data-score="2"] span:nth-child(-n+2) { background: var(--sun-400, #fbbf1c); }
.password-strength[data-score="3"] span:nth-child(-n+3),
.password-strength[data-score="4"] span { background: var(--aqua-400, #1fd4c9); }

.account-check { display: grid; grid-template-columns: 1.35rem 1fr; gap: .65rem; align-items: start; margin: .35rem 0 1rem; color: var(--ink-600, #3f5b78); cursor: pointer; font-size: var(--text-sm, .8125rem); font-weight: var(--weight-semibold, 600); line-height: var(--leading-snug, 1.3); }
.account-check input { position: absolute; opacity: 0; pointer-events: none; }
.account-check > span[aria-hidden] { width: 1.35rem; height: 1.35rem; display: inline-flex; align-items: center; justify-content: center; border: .09rem solid var(--ocean-200, #cfe3fa); border-radius: .4rem; background: var(--card, #fff); transition: background var(--dur-fast, 160ms), box-shadow var(--dur-fast, 160ms); }
.account-check input:checked + span[aria-hidden] { background: var(--ocean-600, #1463d6); box-shadow: inset 0 0 0 .25rem var(--card, #fff); }
.account-check input:focus-visible + span[aria-hidden] { outline: .2rem solid rgb(46 134 240 / .24); outline-offset: .12rem; }
.account-check a { color: var(--ocean-600, #1463d6); }

.account-button { width: 100%; min-height: 3.6rem; display: inline-flex; align-items: center; justify-content: center; gap: .4rem; border: 0; border-radius: var(--radius-lg, 1.25rem); background: var(--grad-cta, linear-gradient(135deg, #1b8fe0, #1147a8)); color: var(--card, #fff); font-family: var(--font-display, sans-serif); font-size: 1.05rem; font-weight: var(--weight-semibold, 600); box-shadow: var(--shadow-cta-ocean, 0 .9rem 1.6rem rgb(20 99 214 / .34)); transition: transform var(--dur-fast, 160ms), box-shadow var(--dur-fast, 160ms), opacity var(--dur-fast, 160ms); }
.account-button:active { transform: translateY(1px) scale(.985); }
.account-button:not(.account-button--secondary):focus { background: var(--grad-cta, linear-gradient(135deg, #1b8fe0, #1147a8)); color: var(--card, #fff); box-shadow: var(--shadow-cta-ocean, 0 .9rem 1.6rem rgb(20 99 214 / .34)); }
.account-button:focus-visible { outline: .2rem solid var(--aqua-200, #7fe9df); outline-offset: .2rem; }
.account-button.is-loading { opacity: .72; pointer-events: none; }
.account-button--secondary { border: .09rem solid var(--ocean-200, #cfe3fa); background: var(--card, #fff); color: var(--ocean-600, #1463d6); box-shadow: none; }
@media (hover: hover) {
  .account-button:not(.account-button--secondary):not(.is-loading):hover {
    background: var(--grad-cta-hover, linear-gradient(135deg, #1463d6, #0c2a4d));
    color: var(--card, #fff);
    transform: translateY(-.12rem);
    box-shadow: var(--shadow-cta-ocean-hover, 0 1.1rem 2rem rgb(20 99 214 / .46));
  }

  .account-button--secondary:hover {
    background: var(--tint-ocean, #eaf1ff);
    color: var(--ocean-800, #1147a8);
    box-shadow: var(--shadow-card, 0 .5rem 1.4rem rgb(12 42 77 / .08));
  }
}
.account-panel__footnote { margin: 1.2rem 0 0; color: var(--ink-300, #6e89a6); text-align: center; font-size: var(--text-sm, .8125rem); font-weight: var(--weight-semibold, 600); }
.account-panel__footnote a { color: var(--ocean-600, #1463d6); font-weight: var(--weight-extrabold, 800); }

.step-progress { display: grid; grid-template-columns: repeat(6, 1fr); gap: .35rem; margin: .25rem 0 1.25rem; }
.step-progress span { height: .25rem; border-radius: var(--radius-pill, 999px); background: var(--ink-100, #e8f0f8); }
.step-progress .is-done { background: var(--aqua-400, #1fd4c9); }
.step-progress .is-current { background: var(--ocean-600, #1463d6); animation: account-progress var(--dur-enter, 700ms) var(--ease-out, ease-out); }
.step-heading { display: flex; align-items: center; gap: .85rem; margin-bottom: 1rem; }
.step-heading > a { width: 2.6rem; height: 2.6rem; flex: none; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-sm, .625rem); background: var(--card, #fff); color: var(--ink-900, #0c2a4d); box-shadow: var(--shadow-card, 0 .5rem 1.4rem rgb(12 42 77 / .08)); }
.step-heading svg { width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2.4; }
.step-heading h1 { margin: 0; color: var(--ink-900, #0c2a4d); font-family: var(--font-display, sans-serif); font-size: var(--text-h2, 1.375rem); font-weight: var(--weight-semibold, 600); }
.step-heading p { margin: .1rem 0 0; color: var(--ink-200, #9fb2c9); font-size: var(--text-xs, .75rem); font-weight: var(--weight-bold, 700); }
.olym-tip { display: flex; align-items: center; gap: .7rem; margin-bottom: 1rem; padding: .65rem; border-radius: var(--radius-md, 1rem); background: var(--tint-ocean, #eaf1ff); }
.olym-tip img { width: 2.4rem; height: 2.4rem; flex: none; border-radius: .7rem; object-fit: cover; }
.olym-tip p { margin: 0; color: var(--ink-600, #3f5b78); font-size: var(--text-sm, .8125rem); font-weight: var(--weight-bold, 700); line-height: var(--leading-snug, 1.3); }

.choice-field,
.avatar-field { min-width: 0; margin: .15rem 0 1rem; padding: 0; border: 0; }
.choice-chips { display: flex; flex-wrap: wrap; gap: .45rem; }
.choice-chips input,
.avatar-options input { position: absolute; opacity: 0; pointer-events: none; }
.choice-chips span { display: inline-flex; min-height: 2.25rem; align-items: center; padding: .45rem .8rem; border-radius: var(--radius-pill, 999px); background: var(--ink-50, #eef4fb); color: var(--ink-300, #6e89a6); cursor: pointer; font-size: var(--text-sm, .8125rem); font-weight: var(--weight-extrabold, 800); transition: color var(--dur-fast, 160ms), background var(--dur-fast, 160ms), transform var(--dur-fast, 160ms); }
.choice-chips input:checked + span { background: var(--grad-cta, linear-gradient(135deg, #1b8fe0, #1147a8)); color: var(--card, #fff); box-shadow: 0 .3rem .75rem rgb(20 99 214 / .25); transform: translateY(-.06rem); }
.choice-chips input:focus-visible + span,
.avatar-options input:focus-visible + span { outline: .2rem solid rgb(46 134 240 / .24); outline-offset: .15rem; }

.avatar-options { display: flex; justify-content: center; gap: .7rem; }
.avatar-option { width: 3.5rem; height: 3.5rem; display: flex; align-items: center; justify-content: center; overflow: hidden; border: .18rem solid transparent; border-radius: 50%; color: var(--card, #fff); cursor: pointer; opacity: .62; transition: opacity var(--dur-fast, 160ms), border-color var(--dur-fast, 160ms), transform var(--dur-fast, 160ms), box-shadow var(--dur-fast, 160ms); }
.avatar-option img { width: 100%; height: 150%; object-fit: cover; object-position: center 8%; }
.avatar-option svg { width: 1.8rem; height: 1.8rem; fill: none; stroke: currentColor; stroke-linecap: round; stroke-width: 1.8; }
.avatar-option--pia { background: var(--tint-ocean, #eaf1ff); }
.avatar-option--aqua { background: var(--grad-aqua, linear-gradient(135deg, #1fd4c9, #0e9e97)); }
.avatar-option--sun { background: var(--grad-reward, linear-gradient(150deg, #fbbf1c, #f4a509)); }
.avatar-option--violet { background: linear-gradient(135deg, var(--color-new, #7c5ce0), var(--ocean-600, #1463d6)); }
.avatar-options input:checked + span { border-color: var(--ocean-600, #1463d6); box-shadow: 0 .4rem 1rem rgb(20 99 214 / .25); opacity: 1; transform: translateY(-.12rem) scale(1.04); }

.age-field { margin: .4rem 0 1.25rem; padding: 1rem; border-radius: var(--radius-md, 1rem); background: var(--tint-ocean, #eaf1ff); }
.age-field__heading { display: flex; align-items: center; justify-content: space-between; }
.age-field__heading output { min-width: 3rem; padding: .3rem .65rem; border-radius: var(--radius-sm, .625rem); background: var(--ocean-600, #1463d6); color: var(--card, #fff); text-align: center; font-family: var(--font-display, sans-serif); font-weight: var(--weight-semibold, 600); }
.age-field input[type="range"] { width: 100%; height: 1.6rem; margin: .8rem 0 .2rem; accent-color: var(--ocean-600, #1463d6); cursor: pointer; }
.age-field__scale { display: flex; justify-content: space-between; color: var(--ink-300, #6e89a6); font-size: var(--text-xxs, .6875rem); font-weight: var(--weight-bold, 700); }
.account-actions { display: grid; gap: .65rem; }

@keyframes account-float { 0%, 100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-.55rem) rotate(1deg); } }
@keyframes account-bubble { 0%, 100% { transform: translateY(.4rem) scale(.85); opacity: .35; } 50% { transform: translateY(-.6rem) scale(1); opacity: .8; } }
@keyframes account-progress { from { transform: scaleX(0); transform-origin: left; } to { transform: scaleX(1); transform-origin: left; } }

@media (min-width: 30rem) {
  .account-flow__visual { min-height: 15rem; padding-right: 2rem; padding-left: 2rem; }
  .account-flow__visual-copy { display: block; max-width: 22rem; }
  .account-flow__visual-copy p:last-child { display: block; max-width: 20rem; }
  .account-flow__mascot { right: 1.25rem; width: 12.5rem; height: 13.5rem; }
  .account-flow__main { padding-right: var(--space-3, 1.5rem); padding-left: var(--space-3, 1.5rem); }
  .account-panel { padding-top: 1.5rem; }
  .account-form__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .account-actions { grid-template-columns: 1fr 1.15fr; }
}

@media (min-width: 48rem) {
  .account-flow { display: grid; grid-template-columns: minmax(20rem, 52%) minmax(0, 48%); }
  .account-flow__visual { position: sticky; top: 0; min-height: 100svh; padding: clamp(2rem, 5vw, 4.5rem); }
  .account-flow__visual::before {
    position: absolute;
    top: 0;
    right: -4.25rem;
    bottom: 0;
    z-index: 0;
    display: block;
    width: 8rem;
    background: var(--card, #fff);
    border-radius: 56% 0 0 56% / 50% 0 0 50%;
    pointer-events: none;
  }
  .account-flow__visual::after { display: none; }
  .account-flow__brand { font-size: 1.45rem; }
  .account-flow__brand-icon { width: 3rem; height: 3rem; }
  .account-flow__visual-copy { max-width: 28rem; margin-top: clamp(4rem, 11vh, 8rem); }
  .account-flow__visual-copy h1 { font-size: clamp(2.2rem, 4vw, 4rem); }
  .account-flow__visual-copy p:last-child { max-width: 25rem; font-size: 1.02rem; }
  .account-flow__mascot { right: clamp(1rem, 4vw, 4rem); bottom: clamp(1rem, 3vh, 2.5rem); width: clamp(14rem, 26vw, 24rem); height: clamp(17rem, 39vh, 25rem); }
  .account-flow__mascot--portrait { opacity: .86; }
  .account-flow__mascot--pia { right: clamp(-2rem, 1vw, 1rem); width: clamp(15rem, 28vw, 25rem); }
  .account-flow__main { min-height: 100svh; display: flex; align-items: center; margin: 0; padding: var(--space-8, 4rem) clamp(2.5rem, 6vw, 4.5rem); background: var(--card, #fff); }
  .account-panel { max-width: 37rem; padding: 0; }
  .account-panel__heading { text-align: left; }
  .account-tabs { margin-bottom: 2rem; }
  .step-progress { margin-bottom: 1.75rem; }
}

@media (min-width: 64rem) {
  .account-flow { grid-template-columns: minmax(28rem, 52%) minmax(0, 48%); }
  .account-flow--profile .account-panel { max-width: 40rem; }
  .account-flow--login .account-panel,
  .account-flow--create .account-panel { max-width: 34rem; }
  .choice-chips { gap: .55rem; }
  .choice-chips span { padding-right: 1rem; padding-left: 1rem; }
  .avatar-option { width: 4rem; height: 4rem; }
}

@media (prefers-reduced-motion: reduce) {
  .account-flow *, .account-flow *::before, .account-flow *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}