/*
 * Administrator setup page (v1.45.0).
 * Plain and cute: white cards, thin light-blue lines, small pastel details.
 * Fields and buttons come from the shared theme on purpose, so this page
 * looks like the rest of the site. Only layout, the step list and the little
 * cloud live here. Animations are short transforms/opacity changes and all of
 * them stop under reduced motion.
 */

.setup {
  --su-line: #e3edf8;
  --su-line-strong: #d4e3f3;
  --su-accent: #99abcd;
  --su-accent-soft: #dfe9f6;
  --su-pink: #f7e5ed;
  --su-ink: #354052;
  --su-soft: #5f6b7d;
  --su-faint: #778397;
  --su-ok: #78b894;
  --su-warn: #c97676;
  --su-ease: cubic-bezier(.22, .8, .24, 1);
  --su-spring: cubic-bezier(.2, 1.12, .32, 1);
  position: relative;
  display: grid;
  min-height: 100vh;
  min-height: 100dvh;
  padding: 104px clamp(20px, 5vw, 70px) 56px;
  overflow: clip;
  color: var(--su-ink);
}

/* Two very soft colour washes behind everything; they never carry content. */
.setup::before,
.setup::after {
  position: absolute;
  z-index: 0;
  content: "";
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
}
.setup::before { top: -160px; left: -140px; width: 480px; height: 480px; background: rgba(224, 236, 248, .7); }
.setup::after { right: -160px; bottom: -180px; width: 440px; height: 440px; background: rgba(247, 229, 237, .55); }

.setup-brand {
  position: absolute;
  z-index: 2;
  top: 24px;
  left: clamp(20px, 5vw, 70px);
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--su-ink);
  font-weight: 800;
}
.setup-brand > span:last-child small { display: block; color: var(--su-faint); font-size: 11px; font-weight: 600; }
.setup-brand .brand-mark {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--su-line);
  border-radius: 14px;
  background: #fff;
}
.setup-brand .brand-mark img { width: 24px; height: 24px; object-fit: contain; border-radius: 8px; }

.setup-layout {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  align-items: start;
  gap: clamp(36px, 5vw, 80px);
  width: min(1200px, 100%);
  margin: auto;
}

/* one calm stagger on entry */
.setup-brand,
.setup-intro > * {
  animation: setup-rise 700ms var(--su-ease) both;
  animation-delay: calc(var(--i, 0) * 70ms);
}
@keyframes setup-rise {
  from { opacity: 0; transform: translate3d(0, 14px, 0); }
  to { opacity: 1; transform: none; }
}

/* ---------- left ---------- */
/* the left column is centred, and sticks at about the middle of the screen while the form scrolls */
.setup-intro { position: sticky; top: clamp(96px, calc((100dvh - 760px) / 2), 220px); display: grid; align-content: start; justify-items: center; min-width: 0; text-align: center; }
.setup-intro h1 {
  margin: 0 0 14px;
  color: var(--su-ink);
  font-size: clamp(34px, 4.8vw, 56px);
  line-height: 1.15;
  letter-spacing: -.035em;
}
.setup-intro__lead { max-width: 26em; margin: 0 auto 34px; color: var(--su-soft); font-size: 16px; line-height: 1.85; }

.setup-steps { position: relative; display: grid; gap: 38px; width: fit-content; max-width: 100%; padding: 0; margin: 0 auto 38px; list-style: none; text-align: left; }
/* the rail between the dots fills as steps are completed */
.setup-steps::before,
.setup-steps::after { position: absolute; top: 28px; bottom: 28px; left: 27px; width: 3px; content: ""; border-radius: 2px; }
.setup-steps::before { background: var(--su-line); }
.setup-steps::after { background: var(--su-accent); transform: scaleY(var(--rail, 0)); transform-origin: top; transition: transform 600ms var(--su-ease); }
.setup-steps li {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 20px;
  align-items: center;
  min-width: 0;
  color: var(--su-faint);
  transition: color 300ms var(--su-ease), transform 400ms var(--su-spring);
}
.setup-steps strong { display: block; color: inherit; font-size: 20px; }
.setup-steps small { display: block; margin-top: 3px; color: var(--su-faint); font-size: 14px; line-height: 1.5; }
.setup-steps__dot {
  position: relative;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border: 1.5px solid var(--su-line-strong);
  border-radius: 50%;
  background: #fff;
  color: var(--su-faint);
  font-style: normal;
  transition: border-color 300ms var(--su-ease), background-color 300ms var(--su-ease), color 300ms var(--su-ease);
}
.setup-steps__dot b { font-size: 19px; font-variant-numeric: tabular-nums; transition: opacity 200ms var(--su-ease), transform 320ms var(--su-spring); }
.setup-steps__dot .icon { position: absolute; width: 26px; height: 26px; opacity: 0; transform: scale(.4); transition: opacity 200ms var(--su-ease), transform 360ms var(--su-spring); }
.setup-steps li[aria-current="step"] { color: var(--su-ink); transform: translateX(4px); }
.setup-steps li[aria-current="step"] .setup-steps__dot { border-color: var(--su-accent); background: var(--su-accent-soft); color: #526fa6; }
.setup-steps li[data-done="true"] .setup-steps__dot { border-color: rgba(120, 184, 148, .55); background: #f1f9f4; color: var(--su-ok); }
.setup-steps li[data-done="true"] b { opacity: 0; transform: scale(.4); }
.setup-steps li[data-done="true"] .icon { opacity: 1; transform: scale(1); }
.setup-steps li[data-done="true"] strong { color: var(--su-soft); }

/* a little cloud that reacts to progress */
.setup-mascot {
  display: grid;
  justify-items: center;
  gap: 8px;
  width: min(100%, 220px);
  margin-top: 2px;
  text-align: center;
}
.setup-mascot__cloud { width: min(100%, 190px); height: auto; overflow: visible; animation: setup-bob 5s ease-in-out infinite alternate; }
.setup-mascot__body { fill: #e6f0fa; }
.setup-mascot__cheek { fill: var(--su-pink); opacity: .55; transition: opacity 400ms var(--su-ease); }
.setup-mascot__eyes { fill: var(--su-ink); transform-box: fill-box; transform-origin: center; animation: setup-blink 5.5s infinite; }
.setup-mascot__mouth { fill: none; stroke: var(--su-ink); stroke-width: 1.8; stroke-linecap: round; transition: opacity 300ms var(--su-ease); }
.setup-mascot__mouth--happy { opacity: 0; }
.setup-mascot[data-setup-ready="true"] .setup-mascot__mouth--idle { opacity: 0; }
.setup-mascot[data-setup-ready="true"] .setup-mascot__mouth--happy { opacity: 1; }
.setup-mascot[data-setup-ready="true"] .setup-mascot__cheek { opacity: 1; }
.setup-mascot strong { display: block; max-width: 100%; overflow: hidden; color: var(--su-ink); font-size: 15px; text-overflow: ellipsis; white-space: nowrap; }
.setup-mascot p { display: grid; gap: 3px; min-width: 0; max-width: 100%; margin: 0; }
.setup-mascot small { display: flex; align-items: center; justify-content: center; gap: 7px; color: var(--su-faint); font-size: 12px; }
.setup-mascot em { font-style: normal; }
.setup-mascot__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--su-line-strong); transition: background-color 400ms var(--su-ease); }
.setup-mascot[data-setup-ready="true"] .setup-mascot__dot { background: var(--su-ok); }
@keyframes setup-bob { from { transform: translateY(0); } to { transform: translateY(-5px); } }
@keyframes setup-blink { 0%, 93%, 100% { transform: scaleY(1); } 96% { transform: scaleY(.12); } }

/* ---------- right: form card (fields and buttons use the shared theme) ---------- */
.setup-card {
  position: relative;
  min-width: 0;
  padding: clamp(8px, 1.5vw, 16px) clamp(0px, 1vw, 8px);
  color: var(--su-ink);
}
.setup-card__head { margin: 0 0 22px; }
.setup-card__head h2 { margin: 0 0 6px; color: var(--su-ink); font-size: 22px; letter-spacing: -.02em; }
.setup-card__head p { margin: 0; color: var(--su-faint); font-size: 13px; line-height: 1.7; }

.setup-form { display: grid; gap: 22px; }
.setup-group { display: grid; gap: 14px; min-width: 0; padding: 0; margin: 0; border: 0; }
.setup-group legend { display: flex; align-items: center; gap: 9px; padding: 0; margin-bottom: 14px; color: var(--su-soft); font-size: 13px; font-weight: 800; letter-spacing: .06em; }
.setup-group__num {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border: 1px solid var(--su-line-strong);
  border-radius: 50%;
  background: #fff;
  color: var(--su-accent);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  transition: background-color 240ms var(--su-ease), border-color 240ms var(--su-ease);
}
.setup-group:focus-within .setup-group__num { border-color: var(--su-accent); background: var(--su-accent-soft); }

.setup-bundle { display: grid; gap: 9px; min-width: 0; }
.setup-field { display: grid; gap: 7px; min-width: 0; }
.setup-field__label { color: var(--su-ink); font-size: 13px; font-weight: 700; }
.setup-field__control { position: relative; display: grid; }
.setup-field__control input { width: 100%; padding: 0 16px; font: inherit; font-size: 15px; }
/* flat fields: no inner shadow at all */
.setup :is(.setup-field__control, .human-check__field) input { box-shadow: none !important; }
.setup-field__control input[type="password"],
.setup-field__control input[data-peeked] { padding-right: 70px; }
.setup-field__hint { color: var(--su-faint); font-size: 12px; line-height: 1.6; }
.setup .setup-field.has-error input { border-color: rgba(201, 118, 118, .55) !important; }
.setup .field-error { padding: 0 !important; border: 0 !important; background: none !important; color: var(--su-warn); font-size: 12px; line-height: 1.5; }

.setup-peek {
  position: absolute;
  top: 50%;
  right: 8px;
  min-width: 50px;
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid var(--su-line);
  border-radius: 999px;
  background: #fff;
  color: var(--su-soft);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transform: translateY(-50%);
  transition: border-color 200ms var(--su-ease), color 200ms var(--su-ease), transform 200ms var(--su-spring);
}
.setup-peek:hover { border-color: var(--su-accent); color: var(--su-ink); }
.setup-peek:active { transform: translateY(-50%) scale(.95); }
.setup-peek[aria-pressed="true"] { border-color: var(--su-accent); background: var(--su-accent-soft); color: var(--su-ink); }
.setup-peek:focus-visible { outline: 2px solid var(--sunny-blue, #526fa6); outline-offset: 2px; }

/* password strength: four small pills that fill in */
.setup-meter { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.setup-meter i { height: 6px; border-radius: 6px; background: var(--su-line); transition: background-color 360ms var(--su-ease); }
.setup-meter[data-level="1"] i:nth-child(-n + 1) { background: #ebc1c1; }
.setup-meter[data-level="2"] i:nth-child(-n + 2) { background: #ead9ae; }
.setup-meter[data-level="3"] i:nth-child(-n + 3) { background: var(--su-accent); }
.setup-meter[data-level="4"] i { background: var(--su-ok); }
.setup-status { margin: 0; color: var(--su-faint); font-size: 12px; line-height: 1.6; transition: color 240ms var(--su-ease); }
.setup-status[data-tone="ok"] { color: #5b9a77; }
.setup-status[data-tone="warn"] { color: var(--su-warn); }

/* captcha: the shared markup, stacked so it fits the card at any width */
.setup .human-check { grid-template-columns: minmax(0, 1fr) 44px; gap: 12px; padding: 0; border: 0; background: none; }
.setup .human-check__field { grid-column: 1 / -1; }
.setup .human-check__field .field__label { display: block; margin-bottom: 6px; color: var(--su-ink); font-size: 13px; font-weight: 700; }
.setup .human-check__field input { padding: 0 14px; text-align: center; letter-spacing: .22em; text-transform: uppercase; }

/* ---------- submit: the shared primary button, plus a loading state ---------- */
.setup-submit { position: relative; width: 100%; min-height: 54px; margin-top: 4px; font-size: 16px; }
.setup-submit__label,
.setup-submit__arrow { display: inline-flex; align-items: center; transition: opacity 220ms var(--su-ease), transform 320ms var(--su-spring); }
.setup-submit__arrow .icon { width: 20px; height: 20px; }
.setup-submit:hover .setup-submit__arrow { transform: translateX(4px); }
.setup-submit__dots { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 6px; opacity: 0; transition: opacity 200ms var(--su-ease); }
.setup-submit__dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--su-accent); }
.setup-submit[aria-busy="true"] { pointer-events: none; }
.setup-submit[aria-busy="true"] .setup-submit__label,
.setup-submit[aria-busy="true"] .setup-submit__arrow { opacity: 0; }
.setup-submit[aria-busy="true"] .setup-submit__dots { opacity: 1; }
.setup-submit[aria-busy="true"] .setup-submit__dots i { animation: setup-dot 900ms var(--su-ease) infinite; }
.setup-submit[aria-busy="true"] .setup-submit__dots i:nth-child(2) { animation-delay: 120ms; }
.setup-submit[aria-busy="true"] .setup-submit__dots i:nth-child(3) { animation-delay: 240ms; }
@keyframes setup-dot { 0%, 100% { opacity: .35; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-4px); } }

/* ---------- opening entrance: the right-hand blocks rise in one after another ---------- */
/* Pure CSS (no script needed, no flash). `backwards` fill only holds the start frame during the
   delay, so afterwards the normal styles and the scroll reveal below take over. */
.setup-card__head,
.setup-group > legend,
.setup-group > .setup-field,
.setup-group > .setup-bundle,
.setup-group > .human-check,
.setup-submit-wrap {
  animation: setup-enter 760ms var(--su-ease) backwards;
  animation-delay: calc(160ms + (var(--g, 0) + var(--n, 0)) * 70ms);
}
.setup-group[data-setup-group="account"] { --g: 1; }
.setup-group[data-setup-group="password"] { --g: 4; }
.setup-group[data-setup-group="verify"] { --g: 8; }
.setup-group > :nth-child(1) { --n: 0; }
.setup-group > :nth-child(2) { --n: 1; }
.setup-group > :nth-child(3) { --n: 2; }
.setup-group > :nth-child(4) { --n: 3; }
.setup-submit-wrap { --g: 12; }
@keyframes setup-enter {
  from { opacity: 0; transform: translate3d(0, 22px, 0); filter: blur(3px); }
  to { opacity: 1; transform: none; filter: blur(0); }
}

/* ---------- text boxes slide in and out as they cross the top or bottom edge ---------- */
.setup-reveal { transition: opacity 560ms var(--su-ease), transform 640ms var(--su-ease); will-change: opacity, transform; }
.setup-reveal[data-setup-reveal="out-down"] { opacity: 0; transform: translate3d(0, 28px, 0); }
.setup-reveal[data-setup-reveal="out-up"] { opacity: 0; transform: translate3d(0, -28px, 0); }

/* ---------- narrow layouts ---------- */
@media (max-width: 960px) {
  .setup { padding-top: 108px; }
  .setup-layout { grid-template-columns: minmax(0, 1fr); gap: 28px; max-width: 560px; }
  .setup-mascot { display: none; }
  .setup-intro { position: static; }
  .setup-intro__lead { margin-bottom: 24px; }
  .setup-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; width: 100%; margin-bottom: 0; }
  .setup-steps strong { font-size: 15px; }
  .setup-steps__dot { width: 44px; height: 44px; }
  .setup-steps__dot b { font-size: 16px; }
  .setup-steps__dot .icon { width: 20px; height: 20px; }
  .setup-steps::before,
  .setup-steps::after { top: 21px; right: 16%; bottom: auto; left: 16%; width: auto; height: 2px; }
  .setup-steps::after { transform: scaleX(var(--rail, 0)); transform-origin: left; }
  .setup-steps li { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 8px; text-align: center; }
  .setup-steps li[aria-current="step"] { transform: translateY(-2px); }
  .setup-steps small { display: none; }
}
@media (max-width: 520px) {
  .setup { padding-inline: 16px; }
}

/* ---------- reduced motion ---------- */
html[data-motion="reduce"] .setup-reveal,
html[data-performance="low"] .setup-reveal { opacity: 1 !important; transform: none !important; }
@media (prefers-reduced-motion: reduce) { .setup-reveal { opacity: 1 !important; transform: none !important; } }
html[data-motion="reduce"] .setup *,
html[data-motion="reduce"] .setup *::before,
html[data-motion="reduce"] .setup *::after,
html[data-performance="low"] .setup *,
html[data-performance="low"] .setup *::before,
html[data-performance="low"] .setup *::after { animation: none !important; transition-duration: 1ms !important; }
@media (prefers-reduced-motion: reduce) {
  .setup *,
  .setup *::before,
  .setup *::after { animation: none !important; transition-duration: 1ms !important; }
}