/* Runtime, protocol states and full viewport previews share this allocation. */
.auth-page[data-auth-scene] {
  box-sizing: border-box;
  height: var(--auth-viewport-height, 100dvh);
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 14px;
  padding: max(24px, env(safe-area-inset-top)) max(36px, env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom)) max(36px, env(safe-area-inset-left));
}
.auth-page[data-auth-scene] > *, .auth-page[data-auth-scene] .auth-form > * { min-width: 0; }
.auth-page[data-auth-scene] .auth-header { min-height: 0; }
.auth-page[data-auth-scene] .auth-body {
  width: min(100%, var(--auth-content-width, 1200px));
  min-width: 0;
  min-height: 0;
  margin-inline: auto;
  padding-block: clamp(12px, 3vh, 28px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, var(--auth-form-width, 440px));
  gap: clamp(24px, 5vw, var(--auth-panel-gap, 64px));
  align-items: center;
}
.auth-page[data-auth-scene] .auth-intro {
  min-width: 0;
  max-width: 480px;
  padding-top: 0;
  align-self: center;
}
.auth-page[data-auth-intro-position="top"] .auth-intro { align-self: start; }
.auth-page[data-auth-intro-position="bottom"] .auth-intro { align-self: end; }
.auth-page[data-auth-scene] .auth-intro h1, .auth-page[data-auth-scene] .auth-intro p,
.auth-page[data-auth-scene] .auth-intro .eyebrow { overflow-wrap: anywhere; }
.auth-page[data-auth-scene] .auth-intro .eyebrow { white-space: normal; }
.auth-page[data-auth-scene] .auth-form {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-height: 0;
  max-height: 100%;
  align-self: center;
  padding: 28px;
  display: flex;
  flex-direction: column;
  overflow-wrap: anywhere;
  animation: auth-stage-in 150ms ease-out;
}
.auth-page[data-auth-scene] .auth-form > h1,
.auth-page[data-auth-scene] .auth-form > .subtitle,
.auth-page[data-auth-scene] .auth-form > [data-auth-region="context"],
.auth-page[data-auth-scene] .auth-form > .oidc-consent-actions { flex: 0 0 auto; }
.auth-page[data-auth-scene] .auth-form > h1 { margin: 0 0 8px; font-size: 1.65rem; }
.auth-page[data-auth-scene] .auth-form > .subtitle { margin: 0 0 16px; }
.auth-page[data-auth-scene] .auth-content {
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  scrollbar-width: thin;
  scrollbar-gutter: stable;
  padding: 2px 4px;
  margin-inline: -4px;
  scroll-padding-block: 12px;
}
.auth-content:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 4px; }
.auth-page[data-auth-scene] .auth-content > :first-child { margin-top: 0; }
.auth-page[data-auth-scene] .auth-content > :last-child { margin-bottom: 0; }
.auth-page[data-auth-scene] .auth-content .field { margin-bottom: 16px; }
.auth-page[data-auth-scene] .auth-content .field,
.auth-page[data-auth-scene] .auth-content .password-control { flex: 0 0 auto; width: 100%; }
.auth-page[data-auth-scene] .auth-content input:not([type="checkbox"]):not([type="radio"]),
.auth-page[data-auth-scene] .auth-content textarea { min-width: 0; width: 100%; min-height: 46px; font-size: 16px; }
.auth-page[data-auth-scene] .auth-content .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.auth-page[data-auth-scene] .auth-content > #totp-slot:empty { display: none; }
.auth-page[data-auth-scene] .auth-content > .field:has(+ #totp-slot:empty) { margin-bottom: 0; }
.auth-page[data-auth-scene] .auth-primary-form > .form-actions { margin-top: 16px; }
.auth-page[data-auth-scene] .auth-flow { display: flex; flex-direction: column; min-height: 0; min-width: 0; margin: 0; }
.auth-page[data-auth-scene] .auth-flow > .auth-content { flex: 1 1 auto; }
.auth-page[data-auth-scene] .auth-flow > .form-actions { flex: 0 0 auto; padding-top: 12px; margin-top: 12px; border-top: 1px solid var(--line); }
.auth-page[data-auth-scene] .auth-secondary-actions { flex: 0 0 auto; display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.auth-page[data-auth-scene] .auth-flow > .form-actions, .auth-page[data-auth-scene] .auth-flow > .auth-secondary-actions { margin-inline-end: var(--auth-scrollbar-gutter, 0px); }
.auth-page[data-auth-scene] .auth-secondary-actions > .email-resend { margin-top: 0; }
.auth-page[data-auth-scene] .auth-secondary-actions > .card-footer { margin-top: 0; }
.auth-page[data-auth-scene] .auth-secondary-actions > .button, .auth-page[data-auth-scene] .auth-secondary-actions > .actions { margin: 0; }


.auth-page[data-auth-scene] .auth-form .card-footer { margin-top: 16px; padding-top: 14px; }
.auth-page[data-auth-scene] .auth-secondary-actions > .card-footer { margin-top: 4px; padding-top: 12px; }
.auth-page[data-auth-scene] .auth-form .auth-stage-status { margin-block: 10px; min-height: 24px; }
.auth-stage-status:empty { display: none; }
.auth-stage-pending .loading-feedback { font-size: .85rem; color: var(--muted); }
.auth-page[data-auth-scene] .account-choice { width: 100%; min-width: 0; margin-block: 8px 12px; }
.auth-page[data-auth-scene] .account-choice .grow { min-width: 0; overflow-wrap: anywhere; }
.auth-page[data-auth-scene] .auth-form > .oidc-consent-actions { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); gap: 8px; flex-wrap: wrap; }
.auth-page[data-auth-scene] .oidc-consent-actions > .button:last-child { flex: 1 1 0; min-width: 0; white-space: normal; }
.auth-page[data-auth-scene] .oidc-consent-actions > .button { min-height: 44px; margin: 0; }
.auth-page[data-auth-scene] .oidc-consent-actions > .button:first-child { flex: 0 0 auto; }
.auth-mobile-language { display: none; }
.auth-desktop-language, .auth-desktop-install { display: flex; align-items: center; }
.auth-page[data-auth-scene] .auth-footer { align-items: center; min-width: 0; flex-wrap: wrap; gap: 8px 20px; }
.auth-page[data-auth-scene] .auth-footer .brand-footer { min-width: 0; white-space: normal; overflow-wrap: anywhere; }
.auth-page[data-auth-scene] .auth-footer .brand-copyright { white-space: normal; }
.auth-desktop-install > .button.small, .auth-mobile-language > .button.small { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; height: 44px; min-height: 44px; padding-block: 0; font-family: inherit; font-size: .8rem; line-height: 1.25; }
.consent-application { display: flex; align-items: center; gap: 10px; min-width: 0; margin-bottom: 6px; }
.consent-application-copy { min-width: 0; }
.account-choice-change-symbol { display: none; }
.consent-application-copy > strong { font-size: .9rem; overflow-wrap: anywhere; }
.consent-application-copy > p { margin: 3px 0 0; font-size: .78rem; }
.consent-destination { overflow-wrap: anywhere; }
.auth-page .consent-information { margin: 0; }
.consent-information .consent-retention, .consent-information .consent-security-fact { margin: 0 0 12px; font-size: .8rem; line-height: 1.5; }
.consent-information .consent-security-fact { padding: 10px 12px; border-inline-start: 3px solid var(--primary); background: var(--primary-soft); border-radius: 4px; }
.consent-information .consent-increase, .consent-information .consent-expired { margin: 0 0 12px; }
.consent-information .consent-groups { margin: 10px 0 12px; }
.consent-group { border-block-end: 1px solid var(--line); }
.consent-group > summary { display: flex; flex-wrap: wrap; align-items: center; gap: 3px 8px; min-height: 44px; padding-block: 8px; cursor: pointer; font-size: .84rem; }
.consent-group > summary::before { content: '+'; color: var(--primary-text); flex: 0 0 14px; font-size: 1rem; }
.consent-group[open] > summary::before { content: '−'; }
.consent-group > summary::marker { content: ''; }
.consent-group-name { flex: 1 1 125px; font-weight: 550; }
.consent-group-count { font-size: .75rem; }
.consent-new { color: var(--primary-text); font-weight: 600; }
.consent-group-details { padding: 0 0 12px 22px; }
.consent-group-details ul { margin: 6px 0 12px; padding-inline-start: 18px; }
.consent-group-details li { margin-block: 8px; font-size: .8rem; }
.consent-group-details code { display: block; color: var(--muted); overflow-wrap: anywhere; font-size: .75rem; margin-top: 3px; }
.consent-resource > summary { cursor: pointer; min-height: 32px; }
.consent-resource p { overflow-wrap: anywhere; }
.installation-card .installation-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }
.installation-card .installation-actions .button { margin: 0; }
@keyframes auth-stage-in { from { opacity: .7; } to { opacity: 1; } }
@media (max-width: 800px) {
  .auth-page[data-auth-scene] { grid-template-rows: auto minmax(0, 1fr) auto auto; padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); gap: 8px; }
  .auth-page[data-auth-scene] .auth-header { grid-template-columns: minmax(0,1fr); align-items: start; gap: 0; }
  .auth-page[data-auth-scene] .auth-header > .brand-header { min-width: 0; }
  .auth-page[data-auth-scene] .auth-body { grid-template-columns: minmax(0, var(--auth-mobile-form-width,480px)); justify-content: center; padding-block: 8px; }
  .auth-page[data-auth-scene] .auth-intro { display: none; }
  .auth-page[data-auth-scene] .auth-form { padding: 18px; }
  .auth-page[data-auth-scene="consent"] .auth-form > h1, .auth-page[data-auth-scene="continue"] .auth-form > h1 { font-size: 1.25rem; }
  .auth-page[data-auth-scene] .account-choice { padding: 10px; gap: 8px; }
  .auth-page[data-auth-scene] .account-choice .avatar { width: 32px; height: 32px; flex-basis: 32px; font-size: .8rem; }
  .auth-page[data-auth-scene] .account-choice-change { font-size: .75rem; }
  .auth-page[data-auth-scene] .oidc-consent-actions > .button { padding-inline: 14px; }
  .auth-page[data-auth-scene] .auth-form > h1 { font-size: 1.4rem; }
  .auth-page[data-auth-scene^="consent"] .auth-form > h1, .auth-page[data-auth-scene="continue"] .auth-form > h1 { font-size: 1.25rem; }
  .auth-page[data-auth-scene] .consent-application .application-logo { width: 32px; height: 32px; flex: 0 0 32px; font-size: .75rem; }
  .account-choice-change-label { display: none; }
  .account-choice-change-symbol { display: inline; font-size: 1rem; }
  .auth-page[data-auth-scene] .auth-form > .subtitle { font-size: .84rem; margin-bottom: 12px; }
  .auth-page[data-auth-scene] .auth-mobile-language { display: flex; justify-content: center; align-items: center; gap: 8px; flex-wrap: wrap; padding: 0; }
  .auth-page[data-auth-scene] .auth-mobile-language .select-control.compact { min-width: 132px; width: auto; }
  .auth-page[data-auth-scene] .auth-mobile-language .select-trigger { height: 44px; min-height: 44px; padding-block: 0; }
  .auth-page[data-auth-scene] .auth-desktop-language { display: none; }
  .auth-page[data-auth-scene] .auth-toolbar:has(.auth-desktop-language:empty) { display: none; }
  .auth-page[data-auth-scene] .auth-footer { justify-content: center; font-size: .7rem; }
  .auth-page[data-auth-scene] .auth-form > .oidc-consent-actions { margin-top: 10px; padding-top: 10px; }
  .auth-page[data-auth-scene] .auth-flow > .form-actions { margin-top: 8px; padding-top: 8px; }
}
/* Magnification and an overlay keyboard may leave less than a usable form area.
   One outer scroll is intentional here; all facts, fields and actions remain reachable. */
.auth-page[data-auth-short="true"] { height: auto; min-height: var(--auth-viewport-height, 100dvh); }
.auth-page[data-auth-short="true"] .auth-body { min-height: auto; align-items: start; }
.auth-page[data-auth-short="true"] .auth-intro, .auth-page[data-auth-short="true"] .auth-form { align-self: start; }
.auth-page[data-auth-short="true"] .auth-form { max-height: none; }
.auth-page[data-auth-short="true"] .auth-content { overflow: visible; }
.auth-page[data-auth-short="true"] .auth-primary-form > .form-actions { position: static; }
@media (min-width: 801px) and (min-height: 480px) {
  /* Expanding a password/MFA form must not pull the desktop story upward.
     Its position still follows the viewport allocation, not the long form. */
  .auth-page[data-auth-short="true"] .auth-intro { margin-top: var(--auth-intro-fallback-offset, 0px); }
}
@media (max-height: 479px) {
  .auth-page[data-auth-scene] { height: auto; min-height: 100dvh; }
  .auth-page[data-auth-scene] .auth-body { align-items: start; }
  .auth-page[data-auth-scene] .auth-intro, .auth-page[data-auth-scene] .auth-form { align-self: start; }
  .auth-page[data-auth-scene] .auth-form { max-height: none; }
  .auth-page[data-auth-scene] .auth-content { overflow: visible; }
  .auth-page[data-auth-scene] .auth-primary-form > .form-actions { position: static; }
}
@media (prefers-reduced-motion: reduce) { .auth-page[data-auth-scene] .auth-form { animation: none; } }
@media (max-width: 480px) { .auth-page[data-auth-scene] .auth-content .form-grid { grid-template-columns: minmax(0, 1fr); } }
.avatar-crop-canvas { touch-action: none; cursor: grab; max-width: 100%; }
.avatar-crop-canvas:active { cursor: grabbing; }
.visually-hidden-close { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; clip-path: inset(50%); overflow: hidden; white-space: nowrap; }
.visually-hidden-close:focus-visible { position: static; width: auto; height: auto; margin: 8px; padding: 8px 12px; clip-path: none; }

/* Email-code follow-up controls share one row; verification and notices stay intact. */
.auth-page[data-auth-scene] .auth-secondary-actions:has(> .email-resend) {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px 12px;
}
.auth-page[data-auth-scene] .auth-secondary-actions > .email-resend {
  flex: 1 1 150px;
  min-width: 0;
}
.auth-page[data-auth-scene] .auth-secondary-actions > .email-resend + .actions {
  flex: 0 0 auto;
  align-self: flex-end;
}
.auth-page[data-auth-scene] .email-resend .button { max-width: 100%; min-width: 44px; white-space: normal; }
.auth-page[data-auth-scene] .auth-secondary-actions > .email-resend + .actions .text-action { min-width: 44px; padding-inline: 0; justify-content: flex-end; }

/* The uploaded verification study contributes only these visual cells and the
   normalized success stroke. The real backend owns codes, MFA and cooldowns. */
.verification-code-control { position: relative; min-width: 0; width: 100%; }
.verification-code-cells { display: grid; grid-template-columns: repeat(var(--verification-length, 6), minmax(0, 1fr)); gap: 7px; }
.verification-code-cell { display: grid; place-items: center; min-width: 0; height: 50px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink); font-size: 1.3rem; font-variant-numeric: tabular-nums; transition: background .15s ease; }
.verification-code-cell.has-value { background: var(--primary-soft); }
.verification-code-control:focus-within .verification-code-cell.is-current { border-color: var(--focus); box-shadow: inset 0 -2px 0 var(--focus); }
.verification-code-control[data-invalid="true"] .verification-code-cell { border-color: var(--danger); }
.auth-page[data-auth-scene] .auth-content .verification-code-input { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; padding: 0; opacity: 0; cursor: text; }
@media (max-width: 380px) { .verification-code-cells { gap: 5px; } .verification-code-cell { height: 46px; font-size: 1.1rem; } }
@media (prefers-reduced-motion: reduce) { .verification-code-cell { transition: none; } }
@media (forced-colors: active) {
  .verification-code-cells { visibility: hidden; }
  .auth-page[data-auth-scene] .auth-content .verification-code-input { opacity: 1; padding: 10px 13px; letter-spacing: .3em; }
}