/* First visit: the four questions use the same company form as Settings. */
.app.on.onboarding { display:block; background:#fff; color:#171717; }
.onboarding > aside,
.onboarding > .sidebar-backdrop,
.onboarding > .mobile-menu-toggle { display:none !important; }
.onboarding > main { width:100%; max-width:none; min-height:calc(100dvh - var(--announce-h,0px)); padding:0; }
.onboarding #page-start.on { position:relative; display:block; min-height:max(440px,calc(100dvh - var(--announce-h,0px))); margin:0; overflow:hidden; }
.onboarding-wizard { position:relative; min-height:max(440px,calc(100dvh - var(--announce-h,0px))); }
.onboarding-logout { position:absolute; top:20px; right:24px; padding:4px; border:0; background:transparent; color:#777; font-size:12px; cursor:pointer; }
.onboarding-logout:hover { color:#111; text-decoration:underline; }
.onboarding-wizard[hidden], .onboarding-welcome[hidden],
.onboarding-actions [hidden], .onboarding .field[hidden] { display:none !important; }
.onboarding #onboarding-title {
  position:absolute; top:27.5%; left:50%; width:max-content; max-width:calc(100% - 36px);
  transform:translateX(-50%); margin:0; color:#090909; text-align:center;
  font-family:Arial,sans-serif; font-size:32px; font-weight:600; line-height:1.25; letter-spacing:-.02em;
}
.onboarding #onboarding-title:focus { outline:none; box-shadow:none; }
.onboarding-progress { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.onboarding #companyForm { width:100%; }
.onboarding .company-fields { position:static; width:100%; margin:0; padding:0; }
/* #passwordStepField: the password question of an account an admin made without one (portal/first-password.js), placed
   and drawn like the company questions. */
.onboarding #companyDetailsCard, .onboarding #passwordStepField {
  position:absolute; top:46.5%; left:50%; transform:translateX(-50%);
  width:min(360px,calc(100vw - 40px)); margin:0; padding:0;
  border:0; border-radius:0; background:transparent; box-shadow:none;
}
.onboarding #companyDetailsCard h3,
.onboarding #companyDetailsCard .hint,
.onboarding .company-fields > .card:not(#companyDetailsCard) { display:none; }
.onboarding #companyDetailsCard .grid2 { display:block; }
.onboarding #companyDetailsCard .field { margin:0; }
.onboarding #companyDetailsCard label, .onboarding #passwordStepField label { margin:0 0 8px; color:#303030; font-size:14px; font-weight:400; line-height:1.25; }
.onboarding #companyDetailsCard input, .onboarding #passwordStepField input {
  display:block; width:100%; height:48px; padding:12px 12px;
  border:1px solid #dfdfdf; border-radius:8px; background:#fff !important;
  box-shadow:0 1px 3px #00000012; color:#171717; font-size:14px; line-height:24px;
  transition:border-color .22s ease,box-shadow .22s ease,transform .22s ease;
}
.onboarding #companyDetailsCard input::placeholder { color:#333; opacity:1; }
.onboarding #companyDetailsCard input:hover, .onboarding #passwordStepField input:hover { border-color:#bcbcbc; }
.onboarding #companyDetailsCard input:focus, .onboarding #passwordStepField input:focus { outline:none; border-color:#8c8c8c; box-shadow:0 0 0 3px #00000012; transform:translateY(-1px); }
/* The Show / Hide button sits inside the field, at its end, and moves with it. */
.onboarding-password-input { position:relative; }
.onboarding #passwordStepField #f-password { padding-inline-end:80px; }
.onboarding-password-reveal {
  position:absolute; top:50%; inset-inline-end:6px; transform:translateY(-50%);
  min-width:60px; height:36px; padding:0 10px; border:0; border-radius:6px;
  background:transparent; color:#555; font-size:13px; cursor:pointer;
  transition:background-color .2s ease,color .2s ease;
}
.onboarding-password-reveal:hover { background:#f2f2f2; color:#111; }
.onboarding-password-input:has(#f-password:focus) .onboarding-password-reveal { transform:translateY(calc(-50% - 1px)); }
/* The map button in the legal address (shared/location-picker.css): as far from the end as from the top of the 48px
   field, in the reveal button's greys (the field is white in both themes), and it moves with the field too. */
.onboarding #companyDetailsCard .k-location { --k-location-inset:10px; }
.onboarding #companyDetailsCard .k-location-button { color:#555; transition:transform .22s ease,background-color .2s ease,color .2s ease; }
.onboarding #companyDetailsCard .k-location-button:hover:not(:disabled),
.onboarding #companyDetailsCard .k-location-button[aria-expanded="true"] { background:#f2f2f2; color:#111; }
.onboarding #companyDetailsCard .k-location:has(input:focus) .k-location-button { transform:translateY(-1px); }
.onboarding-password-hint { margin:8px 0 0; color:#6b6b6b; font-size:12px; line-height:1.4; }
/* The arrow while a company question follows, the words when the password is the only question. */
.onboarding #savePassword[data-last="false"] #savePasswordLabel,
.onboarding #savePassword[data-last="true"] svg { display:none; }
.onboarding .onboarding-actions #savePassword[data-last="true"] { width:auto; min-width:180px; padding:0 20px; margin:0; }
.onboarding-actions { margin-top:16px; }
.onboarding .onboarding-actions {
  position:absolute; top:74.5%; left:50%; transform:translateX(-50%);
  display:flex; align-items:center; justify-content:center; width:min(360px,calc(100vw - 40px)); margin:0;
}
.onboarding .onboarding-actions .btn {
  display:grid; place-items:center; width:88px; height:44px; min-height:44px;
  padding:0; border:0; border-radius:24px; background:#282828; color:#fff;
  font-size:14px; font-weight:600; line-height:1;
  transition:background .2s ease,box-shadow .2s ease,transform .2s cubic-bezier(.2,.8,.2,1);
}
.onboarding .onboarding-actions .btn:hover { background:#111; box-shadow:0 7px 16px #0002; transform:translateY(-2px); }
.onboarding .onboarding-actions .btn:active:not(:disabled) { box-shadow:0 2px 6px #0002; transform:translateY(0) scale(.97); }
.onboarding .onboarding-actions .btn svg { width:20px; height:20px; }
.onboarding .onboarding-actions #saveOnboard { width:auto; min-width:180px; padding:0 20px; margin:0; }
.onboarding .onboarding-back {
  position:absolute; left:0; padding:4px 0; border:0; background:transparent;
  color:#555; font-size:14px; cursor:pointer;
}
.onboarding .onboarding-back:hover { color:#111; text-decoration:underline; }
.onboarding #onbMsg, .onboarding #passwordMsg { position:absolute; top:81%; left:50%; transform:translateX(-50%); width:min(320px,calc(100vw - 40px)); margin:0; font-size:12px; }
.onboarding #retryOnboard { position:absolute; top:74.5%; left:50%; transform:translateX(-50%); width:auto; margin:0; }
.onboarding-welcome {
  position:absolute; inset:0; z-index:2; display:grid; place-items:center; padding:24px;
  overflow:hidden; background:#fff; opacity:1; transition:opacity .36s cubic-bezier(.4,0,.2,1);
}
.onboarding-welcome::before {
  content:""; position:absolute; inset:-20%; pointer-events:none;
  background:linear-gradient(105deg,transparent 44%,#a7c9ff08 48%,#adbbff12 50%,#a7c9ff08 52%,transparent 56%);
  animation:onboarding-ambient-sweep 1.3s .12s cubic-bezier(.2,.7,.2,1) both;
}
.onboarding-welcome.is-leaving { opacity:0; pointer-events:none; }
.onboarding-welcome h1 {
  position:relative; max-width:700px; color:#111; text-align:center; font-size:clamp(24px,4vw,32px);
  font-weight:600; line-height:1.2; letter-spacing:-.04em;
  background:linear-gradient(105deg,#111 0%,#111 46%,#52647f 48.5%,#b6c6dc 50%,#52647f 51.5%,#111 54%,#111 100%);
  background-size:240% 100%; background-position:100% 50%;
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  animation:onboarding-greeting 1s cubic-bezier(.2,.8,.2,1) both,
    onboarding-light-sweep 1.05s .28s cubic-bezier(.25,.7,.25,1) both;
}
@keyframes onboarding-ambient-sweep {
  from { transform:translateX(-85%); }
  to { transform:translateX(85%); }
}
@keyframes onboarding-light-sweep {
  from { background-position:100% 50%; }
  to { background-position:0 50%; }
}
@keyframes onboarding-greeting {
  from { opacity:0; transform:translateY(18px) scale(.985); filter:blur(3px); }
  to { opacity:1; transform:translateY(0) scale(1); filter:blur(0); }
}
.onboarding-wizard.is-entering #onboarding-title {
  animation:onboarding-title-in .56s cubic-bezier(.2,.8,.2,1) both;
}
.onboarding-wizard.is-entering #companyDetailsCard, .onboarding-wizard.is-entering #passwordStepField {
  animation:onboarding-control-in .58s .08s cubic-bezier(.2,.8,.2,1) both;
}
.onboarding-wizard.is-entering .onboarding-actions {
  animation:onboarding-control-in .58s .16s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes onboarding-title-in {
  from { opacity:0; transform:translate(-50%,14px); }
  to { opacity:1; transform:translate(-50%,0); }
}
@keyframes onboarding-control-in {
  from { opacity:0; transform:translate(-50%,16px); }
  to { opacity:1; transform:translate(-50%,0); }
}
.onboarding .msg.on { animation:onboarding-message-in .28s cubic-bezier(.2,.8,.2,1) both; }
@keyframes onboarding-message-in {
  from { opacity:0; transform:translate(-50%,8px); }
  to { opacity:1; transform:translate(-50%,0); }
}
@media(max-width:600px) {
  .onboarding #onboarding-title { font-size:clamp(24px,8.3vw,32px); }
  .onboarding #companyDetailsCard, .onboarding #passwordStepField { top:44%; }
  .onboarding .onboarding-actions, .onboarding #retryOnboard { top:71%; }
  .onboarding #onbMsg, .onboarding #passwordMsg { top:79%; }
}
@media(prefers-reduced-motion:reduce) {
  .onboarding-welcome, .onboarding-welcome::before, .onboarding-welcome h1,
  .onboarding-wizard.is-entering #onboarding-title,
  .onboarding-wizard.is-entering #companyDetailsCard,
  .onboarding-wizard.is-entering #passwordStepField,
  .onboarding-wizard.is-entering .onboarding-actions,
  .onboarding .msg.on { animation:none !important; transition:none !important; }
  .onboarding-welcome h1 { background:none; -webkit-text-fill-color:currentColor; }
}
.preview-reset-onboarding {
  position:fixed; right:16px; bottom:16px; z-index:1001;
  padding:8px 12px; border:1px solid #ccc; border-radius:8px;
  background:#fff; color:#333; box-shadow:0 4px 16px #0002;
  font-size:12px; cursor:pointer;
}
.preview-reset-onboarding[hidden] { display:none; }
.preview-reset-onboarding:hover { background:#f4f4f4; }