/*
  Shared by pages/login.html and pages/register.html (same split-screen
  shell per reports/03-architecture-report.md §6). No token literals
  here — compose from layout.css utilities and components.css classes.

  Illustration/form split ratio (~57/43) measured directly from the
  user-confirmed reference screenshots (screenshot-login.png,
  screenshot-register.png) — the real illustration asset
  (assets/images/login-left-side.svg, 814x900) matches this ratio
  almost exactly at a 1440px reference width.

  DOM order in login.html/register.html is [form, illustration] — in
  this RTL project the first flex child renders on the physical right,
  so the form (right, per the confirmed screenshots) must come first in
  markup and the illustration (left) second. Do not reorder without
  re-checking the reference screenshots.
*/

.auth-layout {
  display: flex;
  height: 100vh;
  overflow: hidden;
}

.auth-layout__illustration {
  display: none;
}

.auth-layout__form {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-xl);
  height: 100vh;
  overflow-y: auto;
}

@media (min-width: 1025px) {
  .auth-layout__illustration {
    display: block;
    flex: 0 0 57%;
    height: 100vh;
    overflow: hidden;
  }

  .auth-layout__form {
    flex: 0 0 43%;
  }
}

.auth-layout__illustration img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/*
 * Centering fix: with the flex parent's width:100% + max-width combo
 * alone, the panel filled its entire column at common viewport widths
 * (no room left for justify-content:center to distribute), so text
 * inside just hugged the column's near edge instead of looking
 * centered. margin-inline:auto uses flexbox's auto-margin alignment,
 * which reliably centers the item whenever it's narrower than its
 * column (i.e. whenever max-width actually applies) — independent of
 * viewport width, unlike relying on justify-content alone.
 */
.auth-layout__panel {
  width: 100%;
  max-width: 26rem;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

/*
 * Logo/heading/subtitle block is center-aligned per the user-confirmed
 * reference (ok.png, 2026-08-19) — this is intentionally different from
 * the form fields below it (labels/inputs stay right-aligned, standard
 * RTL form convention). Do not apply text-align:center to the whole
 * .auth-layout__panel, only to this header block.
 */
.auth-layout__header {
  text-align: center;
}

.auth-layout__header img {
  margin-inline: auto;
}

.auth-layout__form-fields {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}