/**
 * ==========================================================
 * Yusaso
 * Authentication (Login/Logout) pages (moved from modules/auth/assets/css/authentication.css)
 * ==========================================================
 *
 * Sept 22 2026 - CSS modules->themes flattening (batch 7 of the
 * migration - the small-files batch, shipped in the same combined
 * tarball as batch 6/composer.css). Reformatted from its original
 * compact rules into normal multi-line CSS where needed, confirmed
 * byte-for-byte equivalent before reformatting (no functional change
 * from the reformat itself).
 * Zero conflicts found against any existing theme CSS file.
 *
 * DB: platform_assets.path for this asset's row needs updating from
 * modules/auth/assets/css/authentication.css to
 * themes/teal/assets/css/authentication.css
 * (see the delivery notes for the exact copy/paste SQL).
 *
 * The old modules/auth/assets/css/authentication.css is retired by the installer, which moves it (not
 * deletes it) to /home/yusaso/yusaso_archives/CSS/ on her live server.
 * ==========================================================
 */

/** Public authentication pages: Login and Logout. */
.auth_page {
  display:grid;
  place-items:start stretch; /* Oct 5 2026 - Issue #74: was `center`, which shrank the 3-col layout to its content width (the narrow rails) */
  min-height:clamp(24rem,68vh,48rem);
  padding-block:clamp(1.5rem,6vw,5rem);
}
/* Sept 14 2026 - stopped giving auth pages their own layout_class/
 center_class ("auth_layout"/"auth_layout_center") and stopped adding a
 separate "auth_card" class to the feature_wrapper - these pages now use
 the exact same standard three-column grid + feature_wrapper/feature_card
 markup as every other page (see modules/legal/terms/terms.php), no
 special-cased width/wrapper CSS. The one remaining page-level hook is
 .auth_page (already on <main> via main_class on all 11 pages) - used
 below only for the handful of rules that are genuinely auth-specific
 (Turnstile, checkbox layout, secondary action links, 2FA field) and
 have no shared equivalent yet. Forms use page_actions.css's canonical
 .public_form_table_grid unmodified - the old 20rem single-column
 override that fought it is gone. */
.auth_page .feature_wrapper {
  margin-inline:0;
}
.auth_page .feature_wrapper>h2,
.auth_page .feature_wrapper>.content_action_bar>h2 { /* Oct 5 2026 - Issue #74: the h2 sits inside the canon content_action_bar, so the old direct-child selector never matched */
  flex:1 1 auto;
  text-align:center;
}
.auth_page .card_wrapper {
  text-align:center;
}
.auth_page .card_wrapper p {
  margin-block:.35rem;
  padding-bottom:0;
}
.auth_page .public_form_table_grid>.public_form_control.auth_two_factor_app_code {
  width:10ch;
  min-width:10ch;
  max-width:10ch;
  justify-self:center;
}
.auth_page .public_form_table_grid>.public_form_label:is([for="two-factor-app-code"],[for="two-factor-recovery-code"]) {
  text-align:center;
}
.auth_page .checkbox_row label {
  display:inline-flex;
  gap:.55rem;
  align-items:center;
  cursor:pointer;
}
.auth_page .cf-turnstile {
  box-sizing:border-box;
  width:min(100%,300px);
  max-width:100%;
  min-height:4.1rem;
  overflow:visible;
}
.auth_page .cf-turnstile iframe {
  max-width:100%;
}
.auth_page .auth_turnstile_row {
  display:grid;
  place-items:center start; /* Oct 5 2026 - Issue #74: Turnstile flush left in its row (was centered) */
}
.auth_page .auth_secondary_actions {
  display:grid;
  gap:.25rem;
  margin-top:1rem;
  text-align:center;
}
.auth_page .auth_secondary_actions p {
  margin:0;
  padding:0;
}
.auth_page .auth_logout_message {
  text-align:center;
}
.register_loading {
  margin-top:1rem;
}
.register_confirm {
  max-width:25rem;
  margin:1rem 0;
}
.register_confirm input {
  width:auto;
}
.password_visibility_field {
  position:relative;
  display:inline-flex;
  width:min(100%,24rem);
  align-items:center;
}
.password_visibility_field input {
  width:100%;
  padding-right:2.75rem;
}
.password_visibility_toggle {
  position:absolute;
  right:.35rem;
  display:inline-flex;
  width:2rem;
  min-width:2rem;
  height:2rem;
  min-height:2rem;
  padding:0;
  align-items:center;
  justify-content:center;
}