/* GENERATED FROM packages/shared/ui/auth-flow.css -- DO NOT EDIT HERE.
   Edit the package, then run `node scripts/sync-design.mjs`. */

:root {
  --auth-bg: var(--nc-black, #0B0B0F);
  --auth-field: var(--nc-surface-field, #292E35);
  --auth-text: var(--nc-text, #F5F7FA);
  --auth-muted: var(--nc-text-muted, #A7ADB6);
  --auth-blue: var(--nc-brand, var(--nc-action));
  --auth-error: var(--nc-danger, #FF6B6B);
  --auth-font: Helvetica, "Helvetica Neue", Arial, sans-serif;
  --auth-width: min(402px, 100vw);
  --auth-edge: 18px;
  --auth-inner-width: calc(var(--auth-width) - (var(--auth-edge) * 2));
  --auth-gap: 18px;
  --auth-header-height: 60px;
  --auth-field-height: 62px;
  --auth-button-height: 42px;
  --auth-link-height: 44px;
  --login-raised-first-top: calc(var(--auth-header-height) + var(--auth-gap));
  --login-raised-password-top: calc(var(--login-raised-first-top) + var(--auth-field-height) + var(--auth-gap));
  --login-raised-button-top: calc(var(--login-raised-password-top) + var(--auth-field-height) + var(--auth-gap));
  --login-raised-forgot-top: calc(var(--login-raised-button-top) + var(--auth-button-height) + var(--auth-gap));
  --login-raised-status-top: calc(var(--login-raised-forgot-top) + var(--auth-link-height) + var(--auth-gap));
}

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

html,
body {
  margin: 0;
  width: 100%;
  min-height: 100%;
  background: var(--auth-bg);
}

body {
  display: flex;
  justify-content: center;
  color: var(--auth-text);
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

button,
input {
  font: inherit;
}

button {
  border: 0;
  padding: 0;
  color: inherit;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.auth-page {
  position: relative;
  width: var(--auth-width);
  min-height: 100svh;
  min-height: 100dvh;
  font-family: var(--auth-font);
  background: var(--auth-bg);
  overflow-x: hidden;
  overflow-y: auto;
}

.auth-header {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--auth-width);
  height: 60px;
  z-index: 5;
}

/* Mobile Safari can pan the visual viewport when the keyboard focuses an
   input. Follow that offset so the login header stays fully visible instead
   of remaining above the portion of the page the user can currently see. */
.login-page > .auth-header[data-nitro-header] {
  position: fixed !important;
  top: var(--nc-visual-offset-top, 0px) !important;
}

.auth-header .top-bar {
  height: 60px !important;
}

.auth-header .nitro-console {
  top: 16px !important;
}

.auth-header .back-button,
.auth-header .back {
  top: 20px !important;
  left: 36px !important;
}

.login-page .auth-header .notification-icon,
.login-page .auth-header .message-icon {
  display: none !important;
}

.auth-title {
  position: absolute;
  margin: 0;
  color: var(--auth-text);
  font-size: clamp(28px, 7.960199vw, 32px);
  font-weight: 700;
  line-height: 1.3;
  white-space: normal;
  text-align: center;
}

.auth-subtitle {
  position: absolute;
  margin: 0;
  color: var(--auth-muted);
  font-size: clamp(14px, 3.9801vw, 16px);
  font-weight: 400;
  line-height: 20.8px;
  text-align: center;
}

.auth-field {
  position: absolute;
  left: var(--auth-edge);
  width: var(--auth-inner-width);
  max-width: none;
  height: var(--auth-field-height);
}

.auth-field__bg {
  position: absolute;
  inset: 0;
  border-radius: 8px;
  background: var(--auth-field);
  border: 2px solid transparent;
}

.auth-field:focus-within .auth-field__bg {
  border-color: rgba(31, 128, 255, 0.65);
}

.auth-field input {
  position: absolute;
  left: 18px;
  top: 0;
  width: calc(100% - 36px);
  height: var(--auth-field-height);
  padding: 0;
  border: 0;
  outline: 0;
  color: var(--auth-text);
  background: transparent;
  font-size: 14px;
  font-weight: 400;
  caret-color: var(--auth-text);
}

.auth-field input::placeholder {
  color: var(--auth-muted);
  opacity: 1;
}

.auth-field--has-toggle input {
  width: calc(100% - 74px);
}

.auth-password-toggle {
  position: absolute;
  z-index: 2;
  right: 10px;
  top: 0;
  bottom: 0;
  margin-block: auto; /* centred without a transform, so pressing it (base.css scales buttons) cannot move it */
  width: 44px;
  height: 44px;
  padding: 12px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--auth-muted);
}

.auth-password-toggle img {
  width: 24px;
  height: 24px;
  display: block;
  opacity: 0.9;
}

.auth-password-toggle:focus-visible {
  outline: 2px solid var(--auth-text);
  outline-offset: 2px;
}

.auth-password-toggle:active {
  background: rgba(245, 247, 250, 0.08);
  transform: none;
}

.auth-button {
  position: absolute;
  left: var(--auth-edge);
  width: var(--auth-inner-width);
  max-width: none;
  height: var(--auth-button-height);
  border-radius: 24px;
  color: var(--auth-text);
  font-size: 14px;
  font-weight: 400;
  text-align: center;
}

.auth-button--primary {
  background: var(--auth-blue);
  color: var(--nc-on-action, #FFFFFF);
}

.auth-button--outline {
  border: var(--nc-stroke, 1px) solid var(--nc-border);
}

.auth-button--secondary {
  background: var(--auth-blue);
  color: var(--nc-on-action, #FFFFFF);
}

.auth-link {
  position: absolute;
  color: var(--auth-muted);
  font-size: 15px;
  font-weight: 400;
  min-height: var(--auth-link-height);
  line-height: var(--auth-link-height);
  text-align: center;
}

.auth-link strong {
  color: var(--nc-action-text);
  font-weight: 700;
}

.auth-status {
  position: absolute;
  left: var(--auth-edge);
  width: var(--auth-inner-width);
  max-width: none;
  min-height: 18px;
  margin: 0;
  color: var(--auth-muted);
  font-size: 14px;
  line-height: 18px;
  text-align: center;
}

.auth-status.is-error {
  color: var(--auth-error);
}

.auth-status.is-success {
  color: var(--nc-action-text);
}

.display-name-dialog {
  width: min(366px, calc(100vw - 32px));
  padding: 24px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 18px;
  color: var(--auth-text);
  background: #1A1D22;
  box-shadow: none;
}

.display-name-dialog::backdrop {
  background: rgba(11, 11, 15, 0.72);
  backdrop-filter: blur(8px);
}

.display-name-dialog h2,
.display-name-dialog p {
  margin: 0;
}

.display-name-dialog h2 {
  font-size: 24px;
  line-height: 1.2;
}

.display-name-dialog > form > p {
  margin-top: 6px;
  color: var(--auth-muted);
  font-size: 14px;
  line-height: 20px;
}

.display-name-field {
  position: relative;
  display: grid;
  gap: 6px;
  margin-top: 24px;
  color: var(--auth-muted);
  font-size: 14px;
}

.display-name-field input {
  width: 100%;
  height: 52px;
  padding: 0 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  outline: 0;
  color: var(--auth-text);
  background: var(--auth-field);
}

.display-name-field input:focus-visible {
  border-color: var(--auth-blue);
  box-shadow: 0 0 0 3px rgba(31, 128, 255, 0.2);
}

.display-name-field--has-toggle input {
  padding-right: 60px;
}

.display-name-field--has-toggle .auth-password-toggle {
  top: 28px;
  bottom: auto;
}

.display-name-status {
  min-height: 20px;
  color: var(--auth-error) !important;
}

.display-name-submit {
  width: 100%;
  height: 44px;
  margin-top: 12px;
  border-radius: 999px;
  color: var(--auth-text);
  background: var(--auth-blue);
}

.auth-otp {
  position: absolute;
  left: var(--auth-edge);
  top: 159px;
  width: var(--auth-inner-width);
  max-width: none;
  height: 64px;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 6px;
}

.auth-otp input {
  width: 100%;
  min-width: 0;
  height: 62px;
  border: 0 !important;
  border-radius: 8px;
  outline: 0 !important;
  color: var(--auth-text);
  background: var(--auth-field);
  box-shadow: none !important;
  font-size: clamp(26px, 7.960199vw, 32px);
  font-weight: 700;
  text-align: center;
  caret-color: var(--auth-text);
}

.auth-otp input::placeholder {
  color: var(--auth-muted);
  opacity: 1;
}

.auth-avatar-stage {
  position: absolute;
  left: 0;
  top: 78px;
  width: var(--auth-width);
  height: 150px;
  overflow: hidden;
}

.auth-avatar-stage::before {
  content: "";
  position: absolute;
  left: 31.281095%;
  top: 0;
  width: 150px;
  height: 150px;
  border-radius: 999px;
  outline: 1px solid var(--auth-blue);
  outline-offset: -0.5px;
}

.auth-avatar-main {
  position: absolute;
  left: 32.027363%;
  top: 3px;
  width: 144px;
  height: 144px;
  border-radius: 999px;
  object-fit: cover;
}

.auth-avatar-side {
  position: absolute;
  top: 39.5px;
  width: 72px;
  height: 72px;
  border-radius: 999px;
  object-fit: cover;
  opacity: 0.75;
}

.auth-avatar-side--left {
  left: 12.002488%;
}

.auth-avatar-side--right {
  left: 69.962687%;
}

.login-page .login-control-group {
  position: absolute;
  left: var(--auth-edge);
  top: 406px;
  width: var(--auth-inner-width);
  display: grid;
  gap: 18px;
  transition: top 220ms ease;
}

.login-page .login-control-group > :where(.auth-field, .auth-button, .auth-link, .auth-status) {
  position: relative;
  inset: auto;
  width: 100%;
  max-width: none;
}

.login-page .login-control-group > .auth-link {
  min-height: var(--auth-link-height);
  line-height: var(--auth-link-height);
}

.login-page .login-control-group > .auth-status {
  min-height: 18px;
}

.login-page .login-intro {
  display: grid;
  gap: 6px;
}

.login-page .login-intro h1,
.login-page .login-intro p,
.login-page .auth-field-help {
  margin: 0;
}

.login-page .login-intro h1 {
  font-size: 24px !important;
  line-height: 1.2 !important;
  letter-spacing: -0.02em !important;
}

.login-page .login-intro p,
.login-page .auth-field-help,
.login-page .auth-field-label {
  color: var(--auth-muted);
  font-size: 14px;
  line-height: 1.45;
}

.login-page .auth-input-group {
  display: grid;
  gap: 6px;
}

.login-page .auth-input-group > .auth-field {
  position: relative !important;
  inset: auto !important;
  inline-size: 100% !important;
  block-size: var(--auth-field-height) !important;
}

.login-page .auth-field-label { font-weight: 700; }

.login-page .auth-link--recover {
  min-block-size: 44px;
  display: grid;
  place-items: center;
  color: var(--nc-action-text) !important;
  text-decoration: none;
}

.compact-login-page .login-control-group { top: var(--login-raised-first-top); }

.login-page.is-keyboard-mode,
.login-page:has(#login-phone:focus) {
  overflow: hidden;
}

.login-page.is-keyboard-mode .login-control-group,
.login-page:has(#login-phone:focus) .login-control-group { top: var(--login-raised-first-top); }

/* Brand-led sign-in: one compact credentials region, followed by recovery,
   with account creation held in the quiet bottom region. */
html body .login-page[data-login-layout="brand"] {
  --auth-field-surface: var(--nc-surface-raised);
  --auth-field-radius: var(--nc-radius-control);
  --login-control-top: auto;
  min-block-size: 100svh;
  min-block-size: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: max(24px, env(safe-area-inset-top)) max(var(--auth-edge), env(safe-area-inset-right)) max(18px, env(safe-area-inset-bottom)) max(var(--auth-edge), env(safe-area-inset-left));
  overflow-x: hidden;
  overflow-y: auto;
}

/* Authentication uses the same responsive chrome contract in every Nitro
   interface: the compact, centred phone header below 768px and the themed,
   left-aligned page bar supplied by nc-shell.css on tablet and laptop. Keep
   the host full-viewport even though the credentials column is deliberately
   narrow. */
html body .login-page[data-login-layout="brand"] > .auth-header {
  display: block;
  position: fixed;
  inset: 0 0 auto;
  inline-size: 100%;
  block-size: 60px;
  z-index: 100;
}

.login-brand {
  flex: none;
  display: grid;
  place-items: center;
  gap: 10px;
  margin-block-start: clamp(30px, 12dvh, 108px);
  text-align: center;
}

.login-brand__mark {
  display: block;
  inline-size: 84px;
  block-size: 84px;
  border-radius: 21px;
}

.login-brand__edition {
  margin: 0;
  color: var(--auth-muted);
  font-size: 14px;
  line-height: 20px;
}

html body .login-page[data-login-layout="brand"] .login-control-group {
  position: static;
  inset: auto;
  flex: none;
  inline-size: min(100%, 366px);
  max-inline-size: 366px;
  margin: clamp(48px, 9dvh, 82px) auto 0;
  display: grid;
  gap: 12px;
  transform: none;
  transition: none;
}

html body .login-page[data-login-layout="brand"] .login-intro {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

html body .login-page[data-login-layout="brand"] .login-method-form {
  display: grid;
  gap: 12px;
}
html body .login-page[data-login-layout="brand"] .auth-input-group { gap: 0; }

html body .login-page[data-login-layout="brand"] .login-method-form .auth-button {
  position: relative;
  inset: auto;
  inline-size: 100%;
}

html body .login-page[data-login-layout="brand"] .auth-field {
  block-size: 62px;
}

html body .login-page[data-login-layout="brand"] .auth-field__bg {
  border: 1px solid var(--nc-border, #3A404A);
  border-radius: var(--auth-field-radius);
  background: var(--auth-field-surface);
}

html body .login-page[data-login-layout="brand"] .auth-field input {
  block-size: 62px;
  font-size: 16px;
}

html body .login-page[data-login-layout="brand"] .auth-button--login {
  block-size: 48px;
  min-block-size: 48px;
  margin-block-start: 2px;
  border-radius: var(--nc-radius-control);
  font-size: 16px;
  font-weight: 700;
}

html body .login-page[data-login-layout="brand"] .auth-status:empty { display: none; }

html body .login-page[data-login-layout="brand"] .auth-link--recover {
  min-block-size: 44px;
  line-height: 44px;
  color: var(--auth-text);
  font-size: 15px;
}

html body .login-page[data-login-layout="brand"] > .auth-account-switch {
  position: static;
  inset: auto;
  flex: none;
  inline-size: min(100%, 366px);
  min-block-size: 52px;
  margin: auto auto 0;
  padding-inline: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--nc-action, #1F80FF);
  border-radius: 999px;
  color: var(--nc-action-text, #4D9AFF);
  font-size: 16px;
  line-height: 1.2;
  text-decoration: none;
}

html body .login-page[data-login-layout="brand"] > .auth-account-switch strong {
  color: inherit;
  font-weight: 700;
}

.login-product-mark {
  flex: none;
  margin: 14px 0 0;
  color: var(--auth-text);
  font-size: 15px;
  font-weight: 700;
  line-height: 24px;
  text-align: center;
}

html body .login-page[data-login-layout="brand"]:not(:has(> .auth-account-switch)) > .login-product-mark {
  margin-block-start: auto;
}

html body .otp-page[data-login-layout="brand"] > :is(.login-brand, .auth-account-switch, .login-product-mark) {
  display: none;
}

@media (max-height: 720px) {
  .login-brand { margin-block-start: 18px; }
  .login-brand__mark { inline-size: 68px; block-size: 68px; border-radius: 17px; }
  html body .login-page[data-login-layout="brand"] .login-control-group { margin-block-start: 30px; }
  html body .login-page[data-login-layout="brand"] > .auth-account-switch { margin-block-start: 24px; }
}

@media (max-width: 359px) {
  html body .login-page[data-login-layout="brand"] { --auth-edge: 14px; }
  .login-brand__mark { inline-size: 72px; block-size: 72px; border-radius: 18px; }
}

@media (max-height: 560px) {
  html body .login-page[data-login-layout="brand"].is-keyboard-mode .login-brand,
  html body .login-page[data-login-layout="brand"]:has(input:focus) .login-brand,
  html body .login-page[data-login-layout="brand"].is-keyboard-mode > :is(.auth-account-switch, .login-product-mark),
  html body .login-page[data-login-layout="brand"]:has(input:focus) > :is(.auth-account-switch, .login-product-mark) {
    display: none;
  }

  html body .login-page[data-login-layout="brand"].is-keyboard-mode .login-control-group,
  html body .login-page[data-login-layout="brand"]:has(input:focus) .login-control-group {
    margin-block-start: 18px;
  }
}
/* Sign-up flows top to bottom. Every element had a fixed top, so a subtitle
   that wrapped to two lines ran under the input. */
.create-phone-page .create-phone-flow {
  position: relative;
  display: grid;
  gap: 12px;
  width: var(--auth-inner-width);
  margin: 0 auto;
  padding-top: 84px;
}
.create-phone-page .create-phone-flow :is(.auth-title, .auth-subtitle, .auth-field, .auth-button, .auth-status) {
  position: relative;
  inset: auto;
  width: 100%;
}
.create-phone-page .create-phone-flow .auth-subtitle { margin-bottom: 6px; }
.create-phone-page #create-phone-form { display: grid; gap: 6px; }
.create-phone-page #create-phone-form .auth-button { margin-top: 6px; }
.create-phone-page .auth-consents { margin: 6px 0 0; padding: 0; border: 0; display: grid; gap: 2px; }
.create-phone-page .auth-check { display: flex; align-items: flex-start; gap: 12px; min-height: 44px; padding: 6px 0; color: var(--auth-text); font-size: 14px; line-height: 1.4; cursor: pointer; }
.create-phone-page .auth-check input { flex: none; width: 22px; height: 22px; margin: 0; accent-color: #F5F7FA; }
.create-phone-page .auth-check a { color: #4D9AFF; }
.create-phone-page .auth-consents__optional { margin: 12px 0 0; color: var(--auth-muted); font-size: 13px; line-height: 1.4; }
.create-phone-page .auth-status { text-align: start; }
.create-phone-page .auth-status:empty { display: none; }

.otp-page .auth-title {
  left: var(--auth-edge);
  right: var(--auth-edge);
  top: 78px;
}
.otp-page .auth-subtitle {
  left: var(--auth-edge);
  right: var(--auth-edge);
  top: 120px;
  width: auto;
}
.otp-page .auth-button { top: 241px; }
.otp-page .auth-link--resend {
  left: 0;
  top: 295px;
  width: var(--auth-width);
}
.otp-page .auth-status { top: 332px; }

.credentials-page .auth-field--username { top: 246px; }
.credentials-page .auth-field--password { top: 326px; }
.credentials-page .auth-field--confirm { top: 406px; }
.credentials-page { min-height: 640px; }
.credentials-page .auth-button { top: 526px; }
.credentials-page .auth-status { top: 486px; }

.forgot-page .auth-title {
  left: var(--auth-edge);
  right: var(--auth-edge);
  top: 78px;
}
.forgot-page .auth-subtitle {
  left: var(--auth-edge);
  right: var(--auth-edge);
  top: 120px;
  width: auto;
}
.forgot-page .auth-field { top: 159px; }
.forgot-page .auth-button--continue { top: 239px; }
.forgot-page .auth-button--switch { top: 299px; }
.forgot-page .auth-status { top: 359px; }

.reset-page .auth-title {
  left: var(--auth-edge);
  right: var(--auth-edge);
  top: 78px;
}
.reset-page .auth-subtitle {
  left: var(--auth-edge);
  right: var(--auth-edge);
  top: 120px;
  width: auto;
}
.reset-page .auth-field--password { top: 159px; }
.reset-page .auth-field--confirm { top: 239px; }
.reset-page .auth-button { top: 319px; }
.reset-page .auth-status { top: 379px; }

/* Change password: current + new + confirm, with the requirement hint between
   the last field and the button. Same 80px rhythm as the reset page. */
.change-password-page .auth-title {
  left: var(--auth-edge);
  right: var(--auth-edge);
  top: 78px;
}
.change-password-page .auth-subtitle {
  left: var(--auth-edge);
  right: var(--auth-edge);
  top: 116px;
  width: auto;
}
.change-password-page .auth-field:nth-of-type(1) { top: 176px; }
.change-password-page .auth-section-label {
  position: absolute;
  left: var(--auth-edge);
  right: var(--auth-edge);
  top: 254px;
  margin: 0;
  color: var(--auth-text);
  font-size: 14px;
  font-weight: 700;
  line-height: 20px;
  text-align: left;
}
.change-password-page .auth-field:nth-of-type(2) { top: 290px; }
.change-password-page .auth-field:nth-of-type(3) { top: 370px; }
.change-password-page .auth-hint {
  position: absolute;
  left: var(--auth-edge);
  right: var(--auth-edge);
  top: 446px;
  margin: 0;
  color: var(--auth-muted);
  font-size: clamp(12px, 3.3vw, 13px);
  line-height: 17px;
  text-align: left;
}
.change-password-page .auth-button { top: 504px; }
.change-password-page .auth-status { top: 564px; }

@media (max-height: 720px) {
  .login-page .login-control-group { top: 78px; }
}

.auth-button:disabled,
.auth-link:disabled {
  cursor: wait;
  opacity: 0.68;
}

.display-name-field[hidden] { display: none; }
.display-name-field small { color: var(--nc-text-muted, #a7adb6); font-size: 12px; line-height: 1.4; }

/* ── Verify your phone: one column, nothing positioned by hand ───────────────
   The code boxes, button, resend and message used to sit at fixed tops, so a
   long message or a wrapped line ran into the resend bar. They now stack with
   the same gap and side padding on every screen. */
html body .otp-page {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  padding: 90px max(18px, env(safe-area-inset-left)) max(30px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-right));
}
html body .otp-page :is(.auth-title, .auth-subtitle, .auth-otp, .auth-button, .auth-link, .auth-status, form) {
  position: static !important;
  inset: auto !important;
  width: 100% !important;
  max-width: none !important;
  height: auto;
}
html body .otp-page .auth-title { margin: 0; text-align: center; }
html body .otp-page .auth-subtitle { margin: 6px 0 0; padding: 0 6px; text-align: center; line-height: 1.45; }
html body .otp-page form { display: block; margin: 30px 0 0; }
html body .otp-page .auth-otp {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 6px;
  margin: 0 0 18px;
}
html body .otp-page .auth-otp input { height: 58px; border-radius: 12px; font-size: 26px; }
html body .otp-page .auth-button { min-height: 52px; height: 52px; margin: 0; }
html body .otp-page .auth-link--resend {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  margin: 12px 0 0;
  padding: 0 18px;
  border: 1px solid var(--nc-border, #3A404A) !important;
  border-radius: 12px !important;
  background: transparent !important;
  color: var(--auth-text);
  font-size: 15px;
  line-height: 1.2;
}
html body .otp-page .auth-link--resend:disabled { color: var(--auth-muted); opacity: 1; cursor: default; }
html body .otp-page .auth-link--resend:not(:disabled) { border-color: var(--nc-action, #1F80FF) !important; }
html body .otp-page .auth-link--resend strong { margin-inline-start: 6px; }
html body .otp-page .auth-status { min-height: 20px; margin: 18px 0 0; padding: 0 6px; line-height: 1.45; text-align: center; }
html body .otp-page .auth-status:empty { display: none; }

/* ── Sign-up agreements: one required tick, one optional ──────────────────── */
.auth-check small { display: block; margin-top: 6px; color: var(--auth-muted); font-size: 12px; line-height: 1.4; }
.auth-check--optional { padding-top: 12px; }

.credentials-page .auth-consents { margin: 6px 0 0; padding: 0; border: 0; display: grid; gap: 2px; }
.credentials-page .auth-check { display: flex; align-items: flex-start; gap: 12px; min-height: 44px; padding: 6px 0; color: var(--auth-text); font-size: 14px; line-height: 1.4; cursor: pointer; }
.credentials-page .auth-check input { flex: none; width: 22px; height: 22px; margin: 0; accent-color: #F5F7FA; }
.credentials-page .auth-check a { color: #4D9AFF; }

/* Account screens share the profile-flow rule (profile-flow.css): headings
   centre on a phone and left-align from 640 px, so Log in, Create account,
   Recover and Change password match Verify phone and the booking journey.
   The sitewide h1 scale (apple-craft.css) grew these titles to 40 px, which ran
   into the subtitle on the pinned-position screens; they keep their own size. */
html body .auth-page .auth-title {
  font-size: clamp(28px, 7.9602vw, 32px) !important;
  line-height: 36px !important;
}

@media (min-width: 768px) {
  html body .auth-page :is(.auth-title, .auth-subtitle, .auth-status) { text-align: left; }
  html body .otp-page :is(.auth-title, .auth-subtitle, .auth-status) { text-align: left; }
}

/* The masked phone number or email sits on its own line, so every code screen lays out the same. */
.otp-page .auth-subtitle strong { display: block; }

/* ONE code screen for every app (sign-up, sign-in, forgot password, phone and email verification,
   on nitroconsole.com and nitroconsole.business). The values are stated outright, with doubled-class
   selectors rather than forced priority, so the same screen renders the same in both apps. */
html body .otp-page.otp-page .auth-title { font-size: clamp(28px, 7.960199vw, 32px); font-weight: 700; line-height: 1.3; letter-spacing: 0; }
html body .otp-page.otp-page .auth-subtitle { font-size: clamp(14px, 3.9801vw, 16px); font-weight: 400; line-height: 20.8px; }
html body .otp-page.otp-page .auth-otp { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
html body .otp-page.otp-page .auth-otp input.otp-digit {
  height: 58px; min-width: 0; border: 0; border-radius: 12px;
  background: var(--nc-surface-field, #22262C); color: var(--nc-text, #F5F7FA);
  font-size: 26px; font-weight: 700; text-align: center; box-shadow: none;
}
html body .otp-page.otp-page .auth-button--primary {
  min-height: 52px; height: 52px; border-radius: 14px;
  font-size: 16px; font-weight: 700; letter-spacing: 0;
}
html body .otp-page.otp-page .auth-link--resend { min-height: 48px; border-radius: 12px; font-size: 15px; font-weight: 400; }

/* ------------------------------------------------------------------------------------------------
   Desktop sign-in: a brand panel on the left, the form on the right. Phones keep the single column
   above and never see the panel. The panel is real markup (<aside class="auth-brand">) so each app
   says who its sign-in is for; the layout and look are shared by nitroconsole.com, .business and .admin.
   ------------------------------------------------------------------------------------------------ */
.auth-brand { display: none; }

/* Google / email-link sign-in beside the password form on the owner and staff logins. Hidden until Firebase is set up. */
.login-alt { display: grid; gap: 12px; }
.login-alt[hidden] { display: none; }
.login-alt__or { margin: 4px 0 0; color: var(--auth-muted); font-size: 13px; text-align: center; }
html body .login-page[data-login-layout="brand"] .login-alt .auth-button {
  position: relative;
  inset: auto;
  inline-size: 100%;
  block-size: 48px;
  min-block-size: 48px;
  border: var(--nc-stroke, 1px) solid var(--nc-border-strong, #3A404A);
  border-radius: var(--nc-radius-control);
  background: transparent;
  color: var(--auth-text);
  font-size: 16px;
  font-weight: 600;
}
html body .login-page[data-login-layout="brand"] .login-alt .auth-button:focus-visible { outline: var(--nc-focus-ring, 2px solid #1F80FF); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) {
  html body .login-page[data-login-layout="brand"] .login-alt .auth-button:hover { background: rgba(245, 247, 250, 0.06); }
}

/* Tablet (768px to 1099px): the single sign-in column, as on a phone but wider. The split with the brand panel is for laptops only. */
@media (min-width: 768px) and (max-width: 1099.98px) {
  html body[data-brand] > .auth-page.auth-page { inline-size: var(--nc-canvas-form, var(--auth-width)); max-inline-size: none; margin-inline: auto; }
}

@media (min-width: 1100px) {
  /* Only pages whose sign-in form is a direct child of <body>; app shells and wizards keep their own layout.
     The values sit on <body>, not :root, because an app's own stylesheet may redefine them on :root. */
  html body:has(> .auth-page) {
    --auth-width: min(440px, calc(50vw - 48px));
    --auth-inner-width: calc(var(--auth-width) - (var(--auth-edge) * 2));
  }
  /* Pushed to the right half with auto margins, which hold whatever flex direction an app gives <body>. */
  html body:has(> .auth-page.auth-page) > .auth-page {
    inline-size: var(--auth-width);
    max-inline-size: var(--auth-width);
    margin-inline: auto calc((50vw - var(--auth-width)) / 2);
    align-self: center;
  }
  /* Screens laid out from the top (sign-up, code, recovery) sit a little down the page, not hard against its edge. */
  html body:has(> .auth-page.auth-page) > .auth-page:not(.login-page) { top: clamp(0px, calc((100dvh - 640px) / 3), 96px); }

  /* ── No page bar: only the back arrow stays, at the top-left of the form side ───────────────────────────── */
  html body:is(:has(> .auth-page.auth-page), .is-auth) .auth-header { pointer-events: none; }
  html body:is(:has(> .auth-page.auth-page), .is-auth) .auth-header .ncs-header.ncs-header {
    background: transparent;
    border: 0;
    box-shadow: none;
    padding-inline: calc(50vw + 32px) 0;
  }
  html body:is(:has(> .auth-page.auth-page), .is-auth) .auth-header .ncs-header__title { display: none; }
  html body:is(:has(> .auth-page.auth-page), .is-auth) .auth-header .ncs-header__action { pointer-events: auto; }
  /* The back arrow: a quiet ghost circle (the icon's own white disc is replaced by a translucent one with the arrow cut out). */
  html body:is(:has(> .auth-page.auth-page), .is-auth) .auth-header .ncs-header__action--back { position: relative; }
  html body:is(:has(> .auth-page.auth-page), .is-auth) .auth-header .ncs-header__action--back .ncs-glyph { opacity: 0; }
  html body:is(:has(> .auth-page.auth-page), .is-auth) .auth-header .ncs-header__action--back::before {
    content: "";
    position: absolute;
    inset: 6px;
    background: rgba(255, 255, 255, 0.22);
    -webkit-mask: url("/assets/icons/back.svg") center / contain no-repeat;
    mask: url("/assets/icons/back.svg") center / contain no-repeat;
    transition: background-color 160ms ease;
  }
  @media (hover: hover) and (pointer: fine) {
    html body:is(:has(> .auth-page.auth-page), .is-auth) .auth-header .ncs-header__action--back:hover::before { background: rgba(255, 255, 255, 0.4); }
  }

  /* ── The brand panel ─────────────────────────────────────────────────────────────────────────────────────
     Plain and quiet: a flat navy field, the wordmark, the app's name and one line. No glow, no pattern, no ambient motion; the words
     simply fade in once. Only the brand's own colours (navy, white and the product blue). The panel is decoration, hidden from readers. */
  body:has(> .auth-page) > .auth-brand,
  body.is-auth > .auth-brand {
    --auth-navy: #0F172A;
    --auth-accent: var(--nc-action, #1F80FF);
    position: fixed;
    inset: 0 50% 0 0;
    display: grid;
    place-items: center;
    overflow: hidden;
    color: #FFFFFF;
    background: var(--auth-navy);
    border-inline-end: 1px solid rgba(255, 255, 255, 0.08);
    font-family: var(--auth-font);
  }

  .auth-brand__stage { display: grid; justify-items: center; gap: 22px; padding: 0 clamp(32px, 5vw, 96px); text-align: center; }
  .auth-brand__wordmark { display: grid; justify-items: center; gap: 22px; margin: 0; }

  /* Both words are outline artwork used as masks, so no font is needed. */
  .auth-brand__nitro {
    display: block;
    inline-size: clamp(240px, 26vw, 420px);
    aspect-ratio: 9019 / 1446;
    background: #FFFFFF;
    -webkit-mask: url("/assets/artwork/nitro-wordmark.svg") center / 100% 100% no-repeat;
    mask: url("/assets/artwork/nitro-wordmark.svg") center / 100% 100% no-repeat;
  }
  .auth-brand__console { display: flex; align-items: center; gap: 22px; }
  .auth-brand__console-word {
    display: block;
    inline-size: clamp(150px, 14vw, 250px);
    aspect-ratio: 17173 / 1536;
    background: rgba(255, 255, 255, 0.92);
    -webkit-mask: url("/assets/artwork/nitro-console-word.svg") center / 100% 100% no-repeat;
    mask: url("/assets/artwork/nitro-console-word.svg") center / 100% 100% no-repeat;
  }
  .auth-brand__console::before,
  .auth-brand__console::after { content: ""; inline-size: clamp(36px, 4vw, 64px); block-size: 1px; background: var(--auth-accent); }

  /* Which app this is (business and admin only), then the one headline. */
  .auth-brand__label {
    margin: 4px 0 0;
    color: #FFFFFF;
    font-size: clamp(17px, 1.5vw, 22px);
    line-height: 1.2;
    font-weight: 650;
    letter-spacing: 0.04em;
  }
  .auth-brand__h1 {
    margin: 0;
    max-inline-size: 100%;
    color: rgba(255, 255, 255, 0.72);
    font-size: clamp(17px, 1.4vw, 21px);
    line-height: 1.3;
    font-weight: 700;
    letter-spacing: 0;
    white-space: nowrap;
  }

  /* One quiet entrance: the words fade up once, in order. Nothing moves after that. */
  @media (prefers-reduced-motion: no-preference) {
    .auth-brand__nitro { animation: auth-brand-rise 900ms cubic-bezier(0.22, 1, 0.36, 1) both; }
    .auth-brand__console { animation: auth-brand-rise 900ms cubic-bezier(0.22, 1, 0.36, 1) 150ms both; }
    .auth-brand__label { animation: auth-brand-rise 900ms cubic-bezier(0.22, 1, 0.36, 1) 300ms both; }
    .auth-brand__h1 { animation: auth-brand-rise 900ms cubic-bezier(0.22, 1, 0.36, 1) 450ms both; }
  }
  @keyframes auth-brand-rise { from { opacity: 0; transform: translate3d(0, 8px, 0); } }
  @media (forced-colors: active) { .auth-brand__nitro, .auth-brand__console-word { forced-color-adjust: none; background: CanvasText; } }

  /* Code screens: the sub-line and status line start where the heading starts (the phone layout insets them by 6px). */
  html body:has(> .auth-page.auth-page) .otp-page.otp-page :is(.auth-subtitle, .auth-status) { padding-inline: 0; }

  /* ── The form side: the same structure, set with more care ─────────────────────────────────────────────── */
  html body:has(> .auth-page.auth-page) .login-page[data-login-layout="brand"] {
    justify-content: center;
    padding-block: 48px 32px;
  }
  html body:has(> .auth-page.auth-page) .login-page[data-login-layout="brand"] > .login-brand { display: none; }
  html body:has(> .auth-page.auth-page) .login-page[data-login-layout="brand"] .login-control-group { margin-block: auto; inline-size: min(100%, 400px); max-inline-size: 400px; gap: 14px; }
  html body:has(> .auth-page.auth-page) .login-page[data-login-layout="brand"] .login-intro {
    position: static; inline-size: auto; block-size: auto; margin: 0 0 12px; overflow: visible; clip: auto; white-space: normal; text-align: left;
  }
  html body:has(> .auth-page.auth-page) .login-page[data-login-layout="brand"] .login-intro h1 { margin: 0 0 8px; font-size: 30px; line-height: 1.15; font-weight: 700; letter-spacing: -0.015em; }
  html body:has(> .auth-page.auth-page) .login-page[data-login-layout="brand"] .login-intro p { margin: 0; color: var(--auth-muted); font-size: 15px; line-height: 1.5; }
  html body:has(> .auth-page.auth-page) .login-page[data-login-layout="brand"] .auth-button--login {
    block-size: 52px;
    min-block-size: 52px;
    margin-block-start: 6px;
    border-radius: 12px;
    font-weight: 650;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 1px 2px rgba(0, 0, 0, 0.4);
  }
  /* The panel already names the app, so the small product line at the foot of the form is dropped on laptop. */
  html body:has(> .auth-page.auth-page) .login-page[data-login-layout="brand"] > .login-product-mark { display: none; }
  /* Short laptop screens (about 700px high or less): the same screen, with tighter gaps so nothing is pushed off the bottom. */
  @media (max-height: 700px) {
    html body:has(> .auth-page.auth-page) .login-page[data-login-layout="brand"] { padding-block: 40px 16px; }
    html body:has(> .auth-page.auth-page) .login-page[data-login-layout="brand"] .login-control-group { gap: 10px; }
    html body:has(> .auth-page.auth-page) .login-page[data-login-layout="brand"] .login-alt { gap: 8px; }
    html body:has(> .auth-page.auth-page) .login-page[data-login-layout="brand"] .login-alt .auth-button { block-size: 44px; min-block-size: 44px; }
  }
  html body:has(> .auth-page.auth-page) .login-page[data-login-layout="brand"] .login-alt .auth-button { block-size: 50px; min-block-size: 50px; border-radius: 12px; background: rgba(255, 255, 255, 0.03); border-color: rgba(255, 255, 255, 0.12); }
}