/* 1401px and up — Full Desktop (also covers 1440 Laptop L, 1920, and 4K 2560): the base styles in this file are the Full Desktop CSS. Narrower sizes are overridden in the RESPONSIVE TIERS section at the bottom of this file. */
/**
 * ==========================================================
 * 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>.card_header>h2 { /* the h2 sits inside the card header (Oct 16 2026: content_action_bar renamed card_header on cards) */
  flex:1 1 auto;
  text-align:center;
}
.auth_page .card_wrapper {
  text-align:left; /* Oct 13 2026 - her request: all auth page text aligns left */
}
.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:left;
}
.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:left;
}
.auth_page .auth_secondary_actions p {
  margin:0;
  padding:0;
}
.auth_page .auth_logout_message {
  text-align:left;
}
.register_loading {
  margin-top:1rem;
}
.register_confirm {
  max-width:25rem;
  margin:1rem 0;
}
.register_confirm input {
  width:auto;
}
/* Oct 13 2026 - the password box + eye rules now live once in new_base_aesthetics.css (shared with the Account page). */

/* ==========================================================================
   RESPONSIVE TIERS (Oct 11 2026)
   Mobile-first hardening for every device size in the canon (see the DevTools
   preset list). Everything above this line is the normal CSS; these blocks
   only refine it for narrower or wider screens. Add new size fixes here.
   ========================================================================== */

/* 320–375px — Mobile Small: 320 minimum, Galaxy Z Fold 6 cover (~344), Pixel 9 Pro Fold cover (~360), iPhone SE (375) */
@media (max-width: 375px) {
    /* Cloudflare Turnstile renders a fixed 300px iframe; shrink it to fit the narrow card instead of overflowing. Zoom is a catalog token (css_visual_catalog.css). */
    .auth_page .cf-turnstile { zoom: 0.8; max-width: 100%; }
    .auth_page .password_visibility_field { max-width: 100%; }
    .auth_page .public_form_table_grid > .public_form_control.auth_two_factor_app_code { max-width: 100%; }
}

/* 376–428px — Mobile Large: iPhone 16 (393), Pixel 9 / 9 Pro / 10 and Galaxy A55 (~412), up to 428 */
@media (min-width: 376px) and (max-width: 428px) {
    .auth_page .cf-turnstile { zoom: 0.9; max-width: 100%; }
}