/* ============================================================
   AUTH-RAIL.CSS — Marketing rail for sign-in / sign-up pages
   ────────────────────────────────────────────────────────────
   Ported from upgrade/auth.css — adds a two-column layout where
   ≥980px viewports get a teal marketing rail on the left and the
   existing form column on the right. Smaller screens fall back
   to the original single-column login.css layout untouched.

   Loaded AFTER login.css in base_auth.html so these rules win on
   the few overlapping selectors. Existing `.login-wrapper` and
   `.glass-login` markup is preserved — only adds the new
   `.auth-shell` + `.auth-rail` wrappers.
   ============================================================ */

/* ── Material Symbols class definition ───────────────────────
   base.html declares this for the main app, but base_auth.html
   doesn't load base.css. Without this, the rail's icons render
   as the literal text "menu_book", "verified", etc. instead of
   the glyphs. The @font-face itself comes from the Google Fonts
   URL in base_auth.html — we just need to map the class to it.

   CRITICAL: `font-feature-settings: "liga"` enables ligature
   rendering, which is how Material Symbols turns the text
   "menu_book" into the menu_book glyph. Without both the standard
   property AND the -webkit prefix, Chrome/Edge ignore the rule
   and the icons fall back to plain text.
   ────────────────────────────────────────────────────────── */
.material-symbols-outlined {
  font-family: 'Material Symbols Outlined';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  font-feature-settings: 'liga';
  -webkit-font-feature-settings: 'liga';
  -moz-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  vertical-align: middle;
  user-select: none;
}

/* Hard-cap the viewport so no rogue 100vw or wide image can ever
   produce a horizontal scrollbar. Scoped to body.page-signup,
   body.page-login (signup template sets `page-signup` class) so
   we don't accidentally affect other pages of the app. */
body.page-signup,
body.page-login,
body:has(> .login-wrapper.has-rail) {
  overflow-x: hidden;
  max-width: 100vw;
}

/* ── Two-column shell (≥980px only) ───────────────────────── */
.login-wrapper.has-rail {
  display: grid;
  grid-template-columns: 1fr;
  align-items: stretch;
  padding: 0;
  overflow-x: hidden;
  width: 100%;
  max-width: 100vw;
  box-sizing: border-box;
}
/* Inherit border-box for everything inside the new layout —
   guarantees padding never pushes content past its container. */
.login-wrapper.has-rail,
.login-wrapper.has-rail *,
.login-wrapper.has-rail *::before,
.login-wrapper.has-rail *::after {
  box-sizing: border-box;
}

@media (min-width: 980px) {
  .login-wrapper.has-rail {
    /* Left rail gets a slightly larger share so the marketing copy
       has room to breathe. Right form column is capped tight at
       420-480px so wide monitors don't end up with a stretched
       form. */
    grid-template-columns: 1fr minmax(420px, 480px);
    background: var(--clr-bg-card);
  }
  /* On wide screens the form column is no longer a centered card —
     it spans the right column with internal max-width. Padding is
     intentionally tight so the full signup form (8+ fields, hints,
     strength meter, terms, button) fits within ~720-800px viewport
     height without requiring vertical scrolling. */
  .login-wrapper.has-rail .glass-login {
    border: 0;
    box-shadow: none;
    border-radius: 0;
    max-width: none;
    width: 100%;
    padding: 1.75rem 2.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow-y: auto;          /* scroll inside the column if needed */
  }
  .login-wrapper.has-rail .form-section {
    max-width: 360px;
    width: 100%;
  }
  .login-wrapper.has-rail.page-signup .form-section { max-width: 380px; }
}

/* ── Tightened spacing so the full signup form fits in one viewport
   on a typical 1366×768 / 1440×900 laptop. The previous 0.85rem
   gaps and 3rem padding pushed the bottom button below the fold. */
.login-wrapper.has-rail .su-form,
.login-wrapper.has-rail .glass-form {
  gap: 0.65rem;
}
.login-wrapper.has-rail .form-section {
  gap: 0.65rem;
}
/* Inputs — rounded "floating" look matching the screenshot.
   Larger corner radius (~12px), soft 1.5px border, subtle inset
   highlight + outer shadow for depth. */
.login-wrapper.has-rail .form-control,
.login-wrapper.has-rail .su-input,
.login-wrapper.has-rail input[type="text"],
.login-wrapper.has-rail input[type="email"],
.login-wrapper.has-rail input[type="password"] {
  padding: 0.75rem 1rem;
  min-height: 46px;
  font-size: var(--text-sm);
  border-radius: 0.75rem;          /* 12px — matches the screenshot's rounded corners */
  border: 1.5px solid #e2e8f0;     /* very light slate-200 */
  background: #fff;
  /* Two-layer shadow: the inner inset gives the subtle "double
     border" highlight; the outer drop creates the soft elevation
     under the input. Together they produce the "floating" look in
     your screenshot. */
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.6),
    0 1px 2px rgba(15, 23, 42, 0.04),
    0 1px 1px rgba(15, 23, 42, 0.03);
  color: var(--clr-text-dark);
}
.login-wrapper.has-rail .form-control::placeholder,
.login-wrapper.has-rail .su-input::placeholder {
  color: #94a3b8;                  /* slate-400 */
  font-weight: 400;
}
/* Hover — slightly darker border, no transform shift. */
.login-wrapper.has-rail .form-control:hover,
.login-wrapper.has-rail .su-input:hover {
  border-color: #cbd5e1;           /* slate-300 */
}
/* Focus — primary teal border + glow ring. */
.login-wrapper.has-rail .form-control:focus,
.login-wrapper.has-rail .su-input:focus {
  border-color: var(--clr-primary);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.6),
    0 0 0 3px rgba(13, 148, 136, 0.12);
  outline: none;
  background: #fff;
}
.login-wrapper.has-rail .form-label,
.login-wrapper.has-rail .su-label,
.login-wrapper.has-rail label[for] {
  margin-bottom: 0.3rem;
}
/* Tighter heading + subtitle — shaves ~16px each. */
@media (min-width: 980px) {
  .login-wrapper.has-rail .form-section h1,
  .login-wrapper.has-rail .form-section h2,
  .login-wrapper.has-rail .form-section .su-title {
    font-size: var(--text-2xl);
    margin-bottom: 0.2rem;
  }
  .login-wrapper.has-rail .form-section > p:first-of-type,
  .login-wrapper.has-rail .form-section .su-subtitle {
    font-size: var(--text-sm);
    line-height: 1.45;
    margin-bottom: 0.5rem;
  }
}
/* Submit button tighter. */
.login-wrapper.has-rail .glass-form .btn-primary,
.login-wrapper.has-rail .su-submit,
.login-wrapper.has-rail button[type="submit"].btn-primary {
  padding: 0.7rem 1.25rem;
  margin-top: 0.25rem;
  min-height: 44px;
}
/* Hints, strength meter, terms — small and tight. */
.login-wrapper.has-rail .su-hint,
.login-wrapper.has-rail .su-strength,
.login-wrapper.has-rail .su-terms {
  margin-top: 0.25rem;
}

/* On very wide monitors (≥1400px) give the rail even more breathing
   room — the form needs the same 480px regardless. */
@media (min-width: 1400px) {
  .login-wrapper.has-rail {
    grid-template-columns: 1.3fr minmax(420px, 460px);
  }
}

/* ── Marketing rail (left column, ≥980px) ─────────────────── */
.auth-rail {
  display: none;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 80% 10%, rgba(45, 212, 191, 0.18), transparent 55%),
    radial-gradient(circle at 10% 90%, rgba(13, 148, 136, 0.22), transparent 60%),
    linear-gradient(160deg, #0F766E 0%, #0D9488 50%, #115E59 100%);
  color: #fff;
  padding: 2rem 2.5rem;
  flex-direction: column;
  justify-content: space-between;
  min-height: 100vh;
}
@media (min-width: 980px) { .auth-rail { display: flex; } }

/* Subtle paper-grid texture so the rail doesn't read as a flat
   gradient — fits the teacher/institution tone better than a hero
   image and keeps the file size at zero. */
.auth-rail::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: radial-gradient(ellipse at center, #000 35%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at center, #000 35%, transparent 75%);
  pointer-events: none;
}

.auth-rail__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  width: 100%;
  max-width: 460px;
  min-width: 0;          /* prevents children with long content from
                            pushing the rail wider than its grid column */
}

.auth-rail__brand {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  font-weight: 700;
  font-size: var(--text-xl);
  letter-spacing: -0.01em;
  color: #fff;
}
.auth-rail__brand img { height: 32px; }

.auth-rail__eyebrow {
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #99F6E4;
  margin-bottom: 0.75rem;
}

.auth-rail__headline {
  font-weight: 700;
  /* 32-44px responsive — bigger on wide screens, but capped so it
     doesn't push the trust list below the viewport on a 768px-tall
     laptop. */
  font-size: clamp(2rem, 3.4vw, 2.75rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: #fff;
  margin: 1.5rem 0 1rem;
}
.auth-rail__headline em {
  font-style: italic;
  color: #99F6E4;
  font-weight: 600;
}

.auth-rail__lede {
  font-size: var(--text-base);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.78);
  max-width: 36ch;
  margin-bottom: 2.5rem;
}

/* Trust list — short proof points. */
.auth-rail__trust {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin: 0 0 auto;
  padding: 0;
  list-style: none;
}
.auth-rail__trust-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.5;
}
.auth-rail__trust-item .material-symbols-outlined,
.auth-rail__trust-item i.fas,
.auth-rail__trust-item i.far {
  font-size: 18px;
  color: #5EEAD4;
  flex-shrink: 0;
  margin-top: 3px;
  width: 20px;          /* keeps text aligned even when glyph widths differ */
  text-align: center;
}
.auth-rail__trust-item strong {
  color: #fff;
  font-weight: 600;
}

.auth-rail__foot {
  font-size: var(--text-xs);
  color: rgba(255, 255, 255, 0.55);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-top: 1.5rem;
}

/* ============================================================
   FORM STYLING (ported from upgrade/auth.css)
   ────────────────────────────────────────────────────────────
   The original login.css uses fully-rounded pill inputs with
   thick 2px borders and large padding — fine, but the redesign
   went for tighter rectangular inputs with uppercase labels and
   a softer 1.5px border. All these overrides are scoped to
   `.login-wrapper.has-rail` so they apply only to the new
   layout — any other consumer of `.form-control` is untouched.
   ============================================================ */

/* ── Labels: small, uppercase, slightly tracked ──────────── */
.login-wrapper.has-rail .form-label,
.login-wrapper.has-rail .su-label,
.login-wrapper.has-rail label[for] {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;          /* tighter tracking like the screenshot */
  text-transform: uppercase;
  color: var(--clr-text-dark);    /* darker slate, not muted gray */
  margin-bottom: 0.5rem;
  display: block;
}

/* Label + helper link on the same row (e.g. password label +
   "Forgot password?" link inline above the password input). */
.login-wrapper.has-rail .row-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}
.login-wrapper.has-rail .row-between .form-label { margin-bottom: 0.4rem; }
.login-wrapper.has-rail .row-between .link-float { margin-bottom: 0.4rem; }

/* ── Inputs: tighter, less-rounded, lighter border ────────── */
.login-wrapper.has-rail .form-control,
.login-wrapper.has-rail .su-input,
.login-wrapper.has-rail input[type="text"],
.login-wrapper.has-rail input[type="email"],
.login-wrapper.has-rail input[type="password"] {
  /* box-sizing: border-box is critical here — without it, padding
     and border push the input past 100% width, which makes the
     first-name + last-name pair (and the city + school pair)
     overflow their flex column and visually overlap. */
  box-sizing: border-box;
  width: 100%;
  background: var(--clr-bg-input);
  border: 1.5px solid var(--clr-border);
  border-radius: var(--radius);          /* not pill anymore */
  padding: 0.85rem 1rem;                 /* taller, more comfortable */
  font-size: var(--text-base);           /* bumped from text-sm so it reads cleanly */
  color: var(--clr-text-dark);
  font-family: inherit;
  min-height: 46px;                      /* guarantees a consistent button-y height */
  transition: border-color var(--transition),
              box-shadow var(--transition),
              background var(--transition);
}

/* Field-pair rows (first/last name, city/school) — guarantee the
   flex children can actually shrink below their content width.
   Without `min-width: 0`, flex children default to the input's
   intrinsic content width, which causes overflow on narrower
   form columns. */
.login-wrapper.has-rail .su-form > div[style*="display:flex"] > div,
.login-wrapper.has-rail .su-form > div[style*="display: flex"] > div {
  min-width: 0;
}

/* ── Connected segmented field-pair row ──────────────────────
   The mockup has the first/last name inputs visually FUSED into
   one segmented control — they share a vertical divider line
   instead of having a gap. Same for city + school. Achieved by:
     - flex row with `gap: 0`
     - first input: rounded-left only, square-right
     - last input:  rounded-right only, square-left
     - first input pulls right by -1.5px so its border overlaps
       the last input's left border, eliminating the double-line
   Result: looks like a single rounded "split" input with a hairline
   divider in the middle.
   ────────────────────────────────────────────────────────── */
.login-wrapper.has-rail .su-field-row {
  display: flex !important;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 0;                              /* inputs touch */
  width: 100%;
  margin: 0;
}
.login-wrapper.has-rail .su-field-row > .su-field {
  flex: 1 1 0;
  min-width: 0;
  position: relative;
  display: flex;
  flex-direction: column;
}
.login-wrapper.has-rail .su-field-row > .su-field--city   { flex: 1 1 0; }
.login-wrapper.has-rail .su-field-row > .su-field--school { flex: 2 1 0; }

/* First-child input (left half of the pair) — rounded only on
   the left, square on the right, and shifted -1.5px so its
   right border overlaps the next input's left border. */
.login-wrapper.has-rail .su-field-row > .su-field:first-child .form-control,
.login-wrapper.has-rail .su-field-row > .su-field:first-child .su-input,
.login-wrapper.has-rail .su-field-row > .su-field:first-child input[type="text"] {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  margin-right: -1.5px;
  position: relative;
  z-index: 1;
}

/* Last-child input (right half) — rounded only on the right. */
.login-wrapper.has-rail .su-field-row > .su-field:last-child .form-control,
.login-wrapper.has-rail .su-field-row > .su-field:last-child .su-input,
.login-wrapper.has-rail .su-field-row > .su-field:last-child input[type="text"] {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

/* When either side is focused, lift it above the neighbour so the
   teal focus ring sits in front of the unfocused input's border. */
.login-wrapper.has-rail .su-field-row > .su-field .form-control:focus,
.login-wrapper.has-rail .su-field-row > .su-field .su-input:focus {
  z-index: 2;
}

/* On phones the segmented row collapses to stacked individual
   inputs — restore both ends' rounded corners so each looks like
   a normal field on its own row. */
@media (max-width: 600px) {
  .login-wrapper.has-rail .su-field-row {
    flex-direction: column;
    gap: 0.75rem;
  }
  .login-wrapper.has-rail .su-field-row > .su-field--city,
  .login-wrapper.has-rail .su-field-row > .su-field--school { flex: 1 1 auto; }
  .login-wrapper.has-rail .su-field-row > .su-field:first-child .form-control,
  .login-wrapper.has-rail .su-field-row > .su-field:first-child .su-input,
  .login-wrapper.has-rail .su-field-row > .su-field:last-child .form-control,
  .login-wrapper.has-rail .su-field-row > .su-field:last-child .su-input {
    border-radius: 0.75rem;
    margin-right: 0;
  }
}

/* ── su-form must be a flex column for its `gap` rule to apply ──
   Without `display: flex; flex-direction: column;`, the vertical
   gap between fields would silently fail (gap is a flex/grid-only
   property). Browser default for <form> is `display: block`. */
.login-wrapper.has-rail .su-form {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

/* ── Hint text under inputs (username, email) ────────────── */
.login-wrapper.has-rail .su-hint {
  font-size: var(--text-xs);
  color: var(--clr-text-muted);
  margin-top: 0.4rem;
  line-height: 1.4;
}
.login-wrapper.has-rail .su-hint:empty { display: none; }

/* ── Password strength meter ─────────────────────────────── */
.login-wrapper.has-rail .su-strength {
  margin-top: 0.5rem;
}
.login-wrapper.has-rail .su-strength #strength-bar {
  height: 4px;
  border-radius: 2px;
  background: var(--clr-border);
  width: 0;
  transition: width 0.3s ease, background 0.3s ease;
  display: block;
}
.login-wrapper.has-rail .su-strength #strength-text {
  display: block;
  font-size: var(--text-xs);
  color: var(--clr-text-muted);
  margin-top: 0.4rem;
  line-height: 1.4;
}
.login-wrapper.has-rail .su-strength #strength-bar:empty,
.login-wrapper.has-rail .su-strength #strength-text:empty { display: none; }

/* ── Terms paragraph (above submit) ──────────────────────── */
.login-wrapper.has-rail .su-terms {
  font-size: var(--text-xs);
  color: var(--clr-text-muted);
  line-height: 1.5;
  margin: 0.5rem 0 0;
}
.login-wrapper.has-rail .su-terms a {
  color: var(--clr-primary-dark);
  text-decoration: none;
  font-weight: 600;
}
.login-wrapper.has-rail .su-terms a:hover { text-decoration: underline; }

/* ── "I already have an account — sign in" footer link ──── */
.login-wrapper.has-rail .su-existing {
  display: block;
  text-align: center;
  margin: 1rem 0 0;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--clr-primary-dark);
  text-decoration: none;
}
.login-wrapper.has-rail .su-existing:hover { text-decoration: underline; }

/* ── Inline error text under invalid fields ──────────────── */
.login-wrapper.has-rail .su-error {
  font-size: var(--text-xs);
  color: var(--clr-danger);
  margin-top: 0.4rem;
  line-height: 1.4;
}

.login-wrapper.has-rail .form-control:hover,
.login-wrapper.has-rail .su-input:hover {
  border-color: var(--clr-secondary);    /* fall back to slate-500 */
}

.login-wrapper.has-rail .form-control:focus,
.login-wrapper.has-rail .su-input:focus {
  border-color: var(--clr-primary);
  box-shadow: var(--shadow-glow);
  outline: none;
  background: #fff;
}

/* Inputs with leading icon — tightened to match the new size. */
.login-wrapper.has-rail .form-control.has-icon {
  padding-left: 2.5rem;
}
.login-wrapper.has-rail .input-icon-wrapper .input-icon,
.login-wrapper.has-rail .password-wrapper .input-icon {
  left: 0.875rem;
  font-size: 16px;
  color: var(--clr-text-placeholder);
}

/* Show/hide password eye — smaller hit area, hover state. */
.login-wrapper.has-rail .toggle-password,
.login-wrapper.has-rail .su-eye {
  width: 32px;
  height: 32px;
  right: 0.5rem;
  border-radius: var(--radius-sm);
  background: transparent;
  border: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--clr-text-placeholder);
  cursor: pointer;
  transition: background var(--transition-fast),
              color var(--transition-fast);
}
.login-wrapper.has-rail .toggle-password:hover,
.login-wrapper.has-rail .su-eye:hover {
  background: var(--clr-bg-hover);
  color: var(--clr-text-body);
}

/* ── Form-options row (remember me + forgot link) ────────── */
.login-wrapper.has-rail .form-options {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-top: -2px;
}
.login-wrapper.has-rail .checkbox-label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--text-xs);
  color: var(--clr-text-muted);
  cursor: pointer;
  user-select: none;
}
/* Custom checkbox — small, brand-coloured tick when checked. */
.login-wrapper.has-rail .checkbox-label input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border: 1.5px solid var(--clr-secondary);
  border-radius: 3px;
  background: var(--clr-bg-card);
  cursor: pointer;
  position: relative;
  margin: 0;
  transition: background var(--transition-fast),
              border-color var(--transition-fast);
}
.login-wrapper.has-rail .checkbox-label input[type="checkbox"]:checked {
  background: var(--clr-primary);
  border-color: var(--clr-primary);
}
.login-wrapper.has-rail .checkbox-label input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  top: 1px;
  left: 4px;
  width: 4px;
  height: 8px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.login-wrapper.has-rail .checkbox-label input[type="checkbox"]:focus-visible {
  outline: none;
  box-shadow: var(--shadow-glow);
}

.login-wrapper.has-rail .link-float {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--clr-primary-dark);
  text-decoration: none;
}
.login-wrapper.has-rail .link-float:hover { text-decoration: underline; }

/* ── Submit button: square corners + lift on hover ──────── */
.login-wrapper.has-rail .glass-form .btn-primary,
.login-wrapper.has-rail .su-submit,
.login-wrapper.has-rail button[type="submit"].btn-primary {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  margin-top: 0.5rem;
  padding: 0.85rem 1.25rem;
  background: var(--clr-primary);
  color: #fff;
  border: 1.5px solid var(--clr-primary);
  border-radius: var(--radius);          /* matches inputs */
  font-size: var(--text-base);
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: background var(--transition),
              border-color var(--transition),
              transform var(--transition-fast),
              box-shadow var(--transition);
}
.login-wrapper.has-rail .glass-form .btn-primary:hover,
.login-wrapper.has-rail .su-submit:hover,
.login-wrapper.has-rail button[type="submit"].btn-primary:hover {
  background: var(--clr-primary-dark);
  border-color: var(--clr-primary-dark);
  transform: translateY(-1px);
  box-shadow: var(--shadow);
}
.login-wrapper.has-rail .glass-form .btn-primary:active,
.login-wrapper.has-rail .su-submit:active { transform: translateY(0); }

/* Secondary outline button (resend-verify on login). */
.login-wrapper.has-rail .btn-secondary {
  background: transparent;
  color: var(--clr-primary-dark);
  border: 1.5px solid var(--clr-secondary);
  border-radius: var(--radius);
  padding: 0.6rem 0.875rem;
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  transition: background var(--transition),
              border-color var(--transition);
}
.login-wrapper.has-rail .btn-secondary:hover {
  background: var(--clr-bg-hover);
  border-color: var(--clr-primary);
}

/* ── Tighten heading on ≥980 (matches the rail's headline weight) — */
@media (min-width: 980px) {
  .login-wrapper.has-rail .form-section h1,
  .login-wrapper.has-rail .form-section h2,
  .login-wrapper.has-rail .form-section .su-title {
    text-align: left;
    font-size: var(--text-3xl);
    font-weight: 700;
    letter-spacing: -0.02em;
    margin-bottom: 0.4rem;
  }
  .login-wrapper.has-rail .form-section > p:first-of-type,
  .login-wrapper.has-rail .form-section .su-subtitle {
    text-align: left;
    font-size: var(--text-sm);
    line-height: 1.5;
  }
  /* The marketing rail already shows the TestMacher brand on the
     left, so duplicating the small `<a class="auth-logo">` in the
     form column would be redundant. Hide it when the rail is
     visible. On <980px the rail collapses and this logo reappears. */
  .login-wrapper.has-rail .auth-logo {
    display: none;
  }
}