/* ============================================================
   BOV LMS — Auth Pages WCAG 2.2 AA Design
   Two Palettes:
     Palette 2 (default): Soft Dark Blue + Beige text
     Palette 1 (high-contrast): Pure Black + Pure White
   Rules: state inversion, no red/green, links underlined,
          44px min targets, 4.5:1 text contrast, 3:1 non-text
   ============================================================ */

/* ─── Palette 2: Soft Dark Blue (Default) ─────────────────── */
.auth-body {
  /* Surfaces */
  --ab-bg:            #0D1B2A;
  --ab-bg-card:       #132338;
  --ab-bg-input:      #0b1622;
  --ab-bg-input-hover:#0f1e30;

  /* Text */
  --ab-text:          #F5F0E8;
  --ab-text-muted:    #9EAFC2;
  --ab-text-inverse:  #0D1B2A;

  /* Borders */
  --ab-border:        #2A4060;
  --ab-border-strong: #4A7BA7;
  --ab-border-focus:  #7EC8E3;

  /* Links */
  --ab-link:          #7EC8E3;
  --ab-link-visited:  #C9B8FF;
  --ab-link-hover-bg: #7EC8E3;
  --ab-link-hover-fg: #0D1B2A;

  /* Focus ring */
  --ab-focus:         #7EC8E3;

  /* Primary button — state inversion on hover/focus */
  --ab-btn-bg:        #1E5FA8;
  --ab-btn-fg:        #F5F0E8;
  --ab-btn-border:    #1E5FA8;
  --ab-btn-hover-bg:  #F5F0E8;
  --ab-btn-hover-fg:  #0D1B2A;
  --ab-btn-hover-bdr: #F5F0E8;

  /* Ghost / secondary button */
  --ab-ghost-bg:      transparent;
  --ab-ghost-fg:      #7EC8E3;
  --ab-ghost-border:  #4A7BA7;
  --ab-ghost-hover-bg:  #7EC8E3;
  --ab-ghost-hover-fg:  #0D1B2A;

  /* Alerts — NO red, NO green */
  --ab-error-bg:      #1C1100;
  --ab-error-fg:      #F5A623;
  --ab-error-border:  #F5A623;
  --ab-error-icon:    #F5A623;

  --ab-success-bg:    #00152A;
  --ab-success-fg:    #7EC8E3;
  --ab-success-border:#7EC8E3;
  --ab-success-icon:  #7EC8E3;

  --ab-info-bg:       #001530;
  --ab-info-fg:       #A5C8EE;
  --ab-info-border:   #A5C8EE;

  /* Strength meter — amber/blue/white only */
  --ab-strength-weak:   #F5A623;
  --ab-strength-fair:   #EAC100;
  --ab-strength-good:   #7EC8E3;
  --ab-strength-strong: #A5C8EE;

  /* Checkbox / radio */
  --ab-check-bg:      #1E5FA8;
  --ab-check-mark:    #F5F0E8;
  --ab-check-border:  #4A7BA7;

  /* Field required marker */
  --ab-required:      #F5A623;

  /* Divider */
  --ab-divider:       #2A4060;

  /* Brand */
  --ab-brand-primary: #7EC8E3;
  --ab-brand-lms:     #9EAFC2;
}

/* ─── Palette 1: High Contrast (Pure Black / White) ───────── */
[data-high-contrast="true"] .auth-body {
  --ab-bg:            #000000;
  --ab-bg-card:       #000000;
  --ab-bg-input:      #000000;
  --ab-bg-input-hover:#111111;

  --ab-text:          #FFFFFF;
  --ab-text-muted:    #CCCCCC;
  --ab-text-inverse:  #000000;

  --ab-border:        #FFFFFF;
  --ab-border-strong: #FFFFFF;
  --ab-border-focus:  #FFFF00;

  --ab-link:          #FFFF00;
  --ab-link-visited:  #E0B0FF;
  --ab-link-hover-bg: #FFFF00;
  --ab-link-hover-fg: #000000;

  --ab-focus:         #FFFF00;

  --ab-btn-bg:        #FFFFFF;
  --ab-btn-fg:        #000000;
  --ab-btn-border:    #FFFFFF;
  --ab-btn-hover-bg:  #000000;
  --ab-btn-hover-fg:  #FFFFFF;
  --ab-btn-hover-bdr: #FFFFFF;

  --ab-ghost-bg:      transparent;
  --ab-ghost-fg:      #FFFF00;
  --ab-ghost-border:  #FFFFFF;
  --ab-ghost-hover-bg:  #FFFF00;
  --ab-ghost-hover-fg:  #000000;

  --ab-error-bg:      #000000;
  --ab-error-fg:      #FFA500;
  --ab-error-border:  #FFA500;
  --ab-error-icon:    #FFA500;

  --ab-success-bg:    #000000;
  --ab-success-fg:    #FFFF00;
  --ab-success-border:#FFFF00;
  --ab-success-icon:  #FFFF00;

  --ab-info-bg:       #000000;
  --ab-info-fg:       #FFFFFF;
  --ab-info-border:   #FFFFFF;

  --ab-strength-weak:   #FFA500;
  --ab-strength-fair:   #FFFF00;
  --ab-strength-good:   #FFFFFF;
  --ab-strength-strong: #E0B0FF;

  --ab-check-bg:      #FFFFFF;
  --ab-check-mark:    #000000;
  --ab-check-border:  #FFFFFF;

  --ab-required:      #FFA500;
  --ab-divider:       #FFFFFF;

  --ab-brand-primary: #FFFF00;
  --ab-brand-lms:     #CCCCCC;
}

/* ─── Base auth-body reset ───────────────────────────────────── */
.auth-body {
  background: var(--ab-bg);
  color:       var(--ab-text);
  min-height:  100vh;
  font-family: var(--font-sans, 'Inter', system-ui, sans-serif);
  font-size:   1rem;
  line-height: 1.6;
}

/* ─── Skip Link ──────────────────────────────────────────────── */
.auth-body .skip-link {
  position:    absolute;
  top:         -999px;
  left:        1rem;
  z-index:     9999;
  padding:     .75rem 1.5rem;
  background:  var(--ab-btn-bg);
  color:       var(--ab-btn-fg);
  font-weight: 700;
  border:      2px solid var(--ab-btn-border);
  border-radius: 0 0 .5rem .5rem;
  text-decoration: underline;
}
.auth-body .skip-link:focus {
  top:     0;
  outline: 3px solid var(--ab-focus);
  outline-offset: 2px;
}

/* ─── Focus (all interactive elements) ──────────────────────── */
.auth-body :focus-visible {
  outline:        3px solid var(--ab-focus);
  outline-offset: 3px;
  border-radius:  .25rem;
}
.auth-body :focus:not(:focus-visible) { outline: none; }

/* ─── Links — always underlined, state-invert on focus/hover ── */
.auth-body a {
  color:           var(--ab-link);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: background .1s, color .1s;
  border-radius: 2px;
  padding: 0 1px;
}
.auth-body a:visited {
  color: var(--ab-link-visited);
}
.auth-body a:hover,
.auth-body a:focus-visible {
  background: var(--ab-link-hover-bg);
  color:      var(--ab-link-hover-fg);
  outline:    none; /* bg-inversion IS the focus indicator here */
  text-decoration: underline;
}

/* ─── Header ─────────────────────────────────────────────────── */
.auth-header {
  background:    var(--ab-bg-card);
  border-bottom: 1px solid var(--ab-border);
}
[data-high-contrast="true"] .auth-header {
  border-bottom-width: 2px;
}

/* Top bar: brand + a11y trigger */
.auth-header-top {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             1rem;
  padding:         .875rem 1.5rem;
  flex-wrap:       wrap;
}

.auth-brand-link {
  font-size:       1.5rem;
  font-weight:     900;
  letter-spacing:  -.03em;
  text-decoration: none;
  line-height:     1;
}
.auth-brand-link:hover,
.auth-brand-link:focus-visible {
  text-decoration: none;
  background:      transparent;
  outline:         3px solid var(--ab-focus);
  outline-offset:  3px;
}
.auth-brand-b   { color: var(--ab-brand-primary); }
.auth-brand-lms { color: var(--ab-brand-lms); font-weight: 500; }

/* ─── Accessibility toolbar — in header (Rec 2) ──────────────── */
.auth-a11y-wrap {
  position: relative;
}

.auth-a11y-trigger {
  display:     flex;
  align-items: center;
  gap:         .375rem;
  padding:     .5rem .875rem;
  font-size:   .875rem;
  font-weight: 600;
  font-family: inherit;
  color:       var(--ab-text);
  background:  transparent;
  border:      1.5px solid var(--ab-border);
  border-radius: .5rem;
  cursor:      pointer;
  min-height:  44px;
  white-space: nowrap;
  transition:  background .1s, color .1s, border-color .1s;
}
.auth-a11y-trigger:hover,
.auth-a11y-trigger:focus-visible {
  background:   var(--ab-ghost-hover-bg);
  color:        var(--ab-ghost-hover-fg);
  border-color: var(--ab-ghost-hover-bg);
}
.auth-a11y-trigger[aria-expanded="true"] {
  background:   var(--ab-ghost-hover-bg);
  color:        var(--ab-ghost-hover-fg);
  border-color: var(--ab-ghost-hover-bg);
}

.auth-a11y-panel {
  position:      absolute;
  top:           calc(100% + .5rem);
  right:         0;
  width:         220px;
  background:    var(--ab-bg-card);
  border:        1.5px solid var(--ab-border);
  border-radius: .75rem;
  padding:       1rem;
  display:       none;
  flex-direction:column;
  gap:           .375rem;
  box-shadow:    0 8px 24px rgba(0,0,0,.5);
  z-index:       500;
}
.auth-a11y-panel.open { display: flex; }
[data-high-contrast="true"] .auth-a11y-panel { border-width: 2px; }

.auth-a11y-panel-title {
  font-size:    .8125rem;
  font-weight:  700;
  color:        var(--ab-text);
  margin:       0 0 .5rem;
  padding-bottom:.5rem;
  border-bottom: 1px solid var(--ab-border);
}

/* ─── Primary nav: Sign In + Create Account (Rec 1 + Rec 3) ──── */
.auth-nav {
  border-top: 1px solid var(--ab-border);
}
[data-high-contrast="true"] .auth-nav {
  border-top-width: 2px;
}
.auth-nav-inner {
  max-width: 900px;
  margin:    0 auto;
  padding:   0 1.5rem;
  display:   flex;
  gap:       0;
}

.auth-nav-link {
  display:         flex;
  align-items:     center;
  gap:             .375rem;
  padding:         .75rem 1.25rem;
  font-size:       .9375rem;
  font-weight:     600;
  color:           var(--ab-text-muted);
  text-decoration: underline;
  text-underline-offset: 3px;
  border-bottom:   3px solid transparent;
  transition:      background .1s, color .1s, border-color .1s;
  border-radius:   0;
  min-height:      48px;
}
.auth-nav-link:visited {
  color: var(--ab-text-muted);
}
/* State inversion on hover/focus */
.auth-nav-link:hover,
.auth-nav-link:focus-visible {
  background:      var(--ab-link-hover-bg);
  color:           var(--ab-link-hover-fg);
  text-decoration: underline;
  outline:         none;
}
/* Active (current page) state */
.auth-nav-link--active,
.auth-nav-link[aria-current="page"] {
  color:            var(--ab-text);
  border-bottom-color: var(--ab-link);
  text-decoration:  underline;
}
[data-high-contrast="true"] .auth-nav-link--active,
[data-high-contrast="true"] .auth-nav-link[aria-current="page"] {
  border-bottom-color: var(--ab-focus);
  border-bottom-width: 4px;
}

/* ─── Main content area ──────────────────────────────────────── */
.auth-main {
  display:         flex;
  align-items:     flex-start;
  justify-content: center;
  min-height:      calc(100vh - 140px);
  padding:         2.5rem 1rem;
}

/* ─── Auth Card ──────────────────────────────────────────────── */
.auth-card {
  background:    var(--ab-bg-card);
  border:        1px solid var(--ab-border);
  border-radius: .75rem;
  padding:       2.5rem;
  width:         100%;
  max-width:     480px;
}
[data-high-contrast="true"] .auth-card {
  border-width: 2px;
}

/* Wide card for register (more fields) */
.auth-card--wide {
  max-width: 560px;
}

/* ─── Card heading area ──────────────────────────────────────── */
.auth-heading {
  font-size:     1.75rem;
  font-weight:   800;
  color:         var(--ab-text);
  line-height:   1.2;
  margin:        0 0 .375rem;
  letter-spacing: -.02em;
}
.auth-subheading {
  font-size:   .9375rem;
  color:       var(--ab-text-muted);
  margin:      0 0 1.75rem;
  line-height: 1.5;
}

/* ─── Alerts — NO red/green ──────────────────────────────────── */
.auth-alert {
  display:     flex;
  align-items: flex-start;
  gap:         .625rem;
  padding:     .875rem 1rem;
  border-radius: .5rem;
  border:      1.5px solid;
  margin-bottom: 1.25rem;
  font-size:   .9375rem;
  line-height: 1.45;
}
.auth-alert-icon {
  font-size:   1.1em;
  flex-shrink: 0;
  line-height: 1.3;
}
.auth-alert-error {
  background:   var(--ab-error-bg);
  color:        var(--ab-error-fg);
  border-color: var(--ab-error-border);
}
.auth-alert-error .auth-alert-icon { color: var(--ab-error-icon); }

.auth-alert-success {
  background:   var(--ab-success-bg);
  color:        var(--ab-success-fg);
  border-color: var(--ab-success-border);
}
.auth-alert-success .auth-alert-icon { color: var(--ab-success-icon); }

.auth-alert-info {
  background:   var(--ab-info-bg);
  color:        var(--ab-info-fg);
  border-color: var(--ab-info-border);
}

/* ─── Form Fields ────────────────────────────────────────────── */
.auth-field {
  margin-bottom: 1.25rem;
}
.auth-field:last-of-type {
  margin-bottom: 0;
}

.auth-label {
  display:     block;
  font-size:   .9375rem;
  font-weight: 600;
  color:       var(--ab-text);
  margin-bottom: .375rem;
}
.auth-label .req {
  color:      var(--ab-required);
  font-weight:700;
  margin-left:.25rem;
}

.auth-hint {
  font-size:   .8125rem;
  color:       var(--ab-text-muted);
  margin-top:  .3rem;
  display:     block;
}

/* Input base */
.auth-input {
  display:          block;
  width:            100%;
  padding:          .6875rem .875rem;
  font-size:        1rem;
  font-family:      inherit;
  color:            var(--ab-text);
  background:       var(--ab-bg-input);
  border:           1.5px solid var(--ab-border);
  border-radius:    .5rem;
  line-height:      1.5;
  transition:       border-color .15s, background .15s;
  -webkit-appearance: none;
  appearance:       none;
}
.auth-input::placeholder { color: var(--ab-text-muted); opacity: 1; }
.auth-input:hover         { border-color: var(--ab-border-strong); background: var(--ab-bg-input-hover); }
.auth-input:focus         { border-color: var(--ab-border-focus); background: var(--ab-bg-input-hover); outline: 3px solid var(--ab-focus); outline-offset: 0; }
.auth-input:focus:not(:focus-visible) { outline: none; }
.auth-input[aria-invalid="true"]      { border-color: var(--ab-error-border); }
.auth-input[aria-invalid="true"]:focus { outline-color: var(--ab-error-border); }

/* Select */
.auth-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='%239EAFC2' d='M7.247 11.14L2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
  background-repeat:   no-repeat;
  background-position: right .875rem center;
  padding-right:       2.5rem;
  cursor:              pointer;
}
[data-high-contrast="true"] .auth-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='%23FFFFFF' d='M7.247 11.14L2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
}
.auth-select option { background: var(--ab-bg-card); color: var(--ab-text); }

/* Password wrapper */
.auth-input-wrap {
  position: relative;
}
.auth-input-wrap .auth-input {
  padding-right: 3rem;
}

/* Show/hide toggle — min 44×44px */
.auth-pw-toggle {
  position:   absolute;
  top:        50%;
  right:      .25rem;
  transform:  translateY(-50%);
  width:      44px;
  height:     44px;
  display:    flex;
  align-items:center;
  justify-content:center;
  background: transparent;
  border:     none;
  cursor:     pointer;
  color:      var(--ab-text-muted);
  border-radius: .375rem;
  transition: background .1s, color .1s;
  font-size:  1.125rem;
}
.auth-pw-toggle:hover,
.auth-pw-toggle:focus-visible {
  background: var(--ab-ghost-hover-bg);
  color:      var(--ab-ghost-hover-fg);
}

/* Inline field error — amber, with icon */
.auth-field-error {
  display:     flex;
  align-items: flex-start;
  gap:         .375rem;
  margin-top:  .375rem;
  font-size:   .875rem;
  color:       var(--ab-error-fg);
  line-height: 1.4;
}
.auth-field-error-icon {
  flex-shrink: 0;
  font-size:   1em;
  line-height: 1.4;
}

/* ─── Checkbox / Radio ───────────────────────────────────────── */
.auth-check {
  display:    flex;
  align-items:flex-start;
  gap:        .625rem;
  cursor:     pointer;
}
.auth-check-input {
  flex-shrink: 0;
  width:       20px;
  height:      20px;
  min-width:   20px;
  margin:      .15rem 0 0;
  cursor:      pointer;
  accent-color:var(--ab-check-bg);
  border:      1.5px solid var(--ab-check-border);
  border-radius: .25rem;
}
.auth-check-input:focus-visible {
  outline:        3px solid var(--ab-focus);
  outline-offset: 2px;
}
.auth-check-label {
  font-size:   .9375rem;
  color:       var(--ab-text);
  line-height: 1.5;
}
.auth-check-label small {
  display:    block;
  font-size:  .8125rem;
  color:      var(--ab-text-muted);
  margin-top: .1rem;
}

/* ─── Primary Button — state inversion ───────────────────────── */
.auth-btn {
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             .5rem;
  width:           100%;
  padding:         .8125rem 1.5rem;
  font-size:       1rem;
  font-weight:     700;
  font-family:     inherit;
  line-height:     1.3;
  border-radius:   .5rem;
  cursor:          pointer;
  text-decoration: none;
  transition:      background .1s, color .1s, border-color .1s;
  min-height:      48px;
  border:          2px solid;
}
.auth-btn-primary {
  background:   var(--ab-btn-bg);
  color:        var(--ab-btn-fg);
  border-color: var(--ab-btn-border);
}
.auth-btn-primary:hover,
.auth-btn-primary:focus-visible {
  background:   var(--ab-btn-hover-bg);
  color:        var(--ab-btn-hover-fg);
  border-color: var(--ab-btn-hover-bdr);
  outline:      3px solid var(--ab-focus);
  outline-offset: 2px;
  text-decoration: none;
}
.auth-btn[disabled],
.auth-btn[aria-busy="true"] {
  opacity:  .6;
  cursor:   not-allowed;
}

/* ─── Divider ────────────────────────────────────────────────── */
.auth-divider {
  display:    flex;
  align-items:center;
  gap:        1rem;
  margin:     1.5rem 0;
  color:      var(--ab-text-muted);
  font-size:  .875rem;
}
.auth-divider::before,
.auth-divider::after {
  content:    '';
  flex:       1;
  height:     1px;
  background: var(--ab-divider);
}
[data-high-contrast="true"] .auth-divider::before,
[data-high-contrast="true"] .auth-divider::after {
  height: 2px;
}

/* ─── Footer link row ─────────────────────────────────────────── */
.auth-card-footer {
  text-align:  center;
  font-size:   .9375rem;
  color:       var(--ab-text-muted);
}
.auth-card-footer a {
  font-weight: 600;
}

/* ─── Password strength meter ────────────────────────────────── */
.auth-strength {
  margin-top: .625rem;
}
.auth-strength-bar {
  height:        6px;
  background:    var(--ab-border);
  border-radius: 99px;
  overflow:      hidden;
  margin-bottom: .3rem;
}
.auth-strength-fill {
  height:     100%;
  width:      0;
  border-radius: 99px;
  transition: width .25s, background .25s;
}
.auth-strength-label {
  font-size: .8125rem;
  color:     var(--ab-text-muted);
  min-height: 1.2em;
}

/* ─── Disability info box ────────────────────────────────────── */
.auth-disability-info {
  margin-top:   .625rem;
  padding:      .75rem 1rem;
  background:   var(--ab-info-bg);
  border:       1.5px solid var(--ab-info-border);
  border-radius:.5rem;
  font-size:    .875rem;
  color:        var(--ab-info-fg);
  display:      none;
}
.auth-disability-info.is-open {
  display: block;
}

/* ─── Name row (two columns) ─────────────────────────────────── */
.auth-name-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
@media (max-width: 400px) {
  .auth-name-row { grid-template-columns: 1fr; }
}

/* ─── Two-column layout (login page) ────────────────────────── */
.auth-duo {
  display:               grid;
  grid-template-columns: 1fr 400px;
  gap:                   3.5rem;
  max-width:             1020px;
  width:                 100%;
  align-items:           start;   /* both columns anchor to top */
}

.auth-duo-content {
  padding: .25rem 0 2rem;
}

.auth-duo-form {
  position: sticky;
  top:      2rem;         /* form stays visible while content scrolls on tall viewports */
}

/* ── Page h1 ──────────────────────────────────────────────────── */
.auth-content-heading {
  font-size:     2.125rem;
  font-weight:   900;
  color:         var(--ab-text);
  line-height:   1.2;
  margin:        0 0 .625rem;
  letter-spacing:-.025em;
}
.auth-content-heading::after {
  content:      '';
  display:      block;
  width:        2.75rem;
  height:       3px;
  background:   var(--ab-link);
  border-radius:99px;
  margin-top:   .875rem;
}
[data-high-contrast="true"] .auth-content-heading::after {
  background: var(--ab-focus);
  height:     4px;
}

/* ── Intro paragraph ──────────────────────────────────────────── */
.auth-content-lead {
  font-size:   1rem;
  color:       var(--ab-text-muted);
  line-height: 1.7;
  margin:      1rem 0 0;
}

/* ── Content sections (For Learners / For Instructors / Why BOV) */
.auth-content-section {
  margin-top:    2rem;
  padding-top:   1.75rem;
  border-top:    1px solid var(--ab-border);
}
.auth-content-section--last {
  padding-bottom: 0;
}
[data-high-contrast="true"] .auth-content-section {
  border-top-width: 2px;
}

/* Section h2 */
.auth-content-section-heading {
  display:     flex;
  align-items: center;
  gap:         .625rem;
  font-size:   1rem;
  font-weight: 700;
  color:       var(--ab-text);
  margin:      0 0 .625rem;
  letter-spacing: -.01em;
}

/* Icon badge next to h2 */
.auth-section-icon {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           28px;
  height:          28px;
  min-width:       28px;
  border-radius:   .375rem;
  background:      rgba(126, 200, 227, .12);  /* subtle tint of --ab-link */
  color:           var(--ab-link);
  font-size:       .875rem;
  flex-shrink:     0;
}
[data-high-contrast="true"] .auth-section-icon {
  background: transparent;
  border:     1.5px solid var(--ab-text);
  color:      var(--ab-text);
}

/* Section intro paragraph */
.auth-content-section-intro {
  font-size:   .9375rem;
  color:       var(--ab-text-muted);
  line-height: 1.65;
  margin:      0 0 .75rem;
}

/* Section bullet list */
.auth-content-list {
  list-style: none;
  margin:     0;
  padding:    0;
  display:    flex;
  flex-direction: column;
  gap:        .5rem;
}
.auth-content-list li {
  display:     flex;
  align-items: flex-start;
  gap:         .625rem;
  font-size:   .9375rem;
  color:       var(--ab-text-muted);
  line-height: 1.55;
}
.auth-content-list li::before {
  content:      '';
  display:      block;
  width:        6px;
  height:       6px;
  min-width:    6px;
  border-radius:50%;
  background:   var(--ab-link);
  margin-top:   .45em;   /* optically aligns dot with text cap-height */
  flex-shrink:  0;
}
[data-high-contrast="true"] .auth-content-list li::before {
  background:    var(--ab-focus);
  border-radius: 0;
  width:  8px;
  height: 8px;
}

/* "Become an Instructor" CTA link */
.auth-content-cta-link {
  display:         inline-flex;
  align-items:     center;
  gap:             .375rem;
  margin-top:      .875rem;
  padding:         .5rem 1rem;
  font-size:       .875rem;
  font-weight:     700;
  color:           var(--ab-ghost-fg);
  background:      transparent;
  border:          1.5px solid var(--ab-ghost-border);
  border-radius:   .5rem;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition:      background .1s, color .1s, border-color .1s;
  min-height:      40px;
}
.auth-content-cta-link:visited {
  color: var(--ab-ghost-fg);
}
.auth-content-cta-link:hover,
.auth-content-cta-link:focus-visible {
  background:   var(--ab-ghost-hover-bg);
  color:        var(--ab-ghost-hover-fg);
  border-color: var(--ab-ghost-hover-bg);
  text-decoration: underline;
}

/* Float alerts above duo layout */
.auth-alert-float {
  max-width:     1020px;
  width:         100%;
  margin-bottom: 1.25rem;
}

/* ── Responsive ───────────────────────────────────────────────── */
@media (max-width: 860px) {
  .auth-duo {
    grid-template-columns: 1fr;
    gap:                   2rem;
    max-width:             520px;
  }
  .auth-duo-form {
    position: static;   /* un-stick on mobile */
  }
  .auth-content-heading { font-size: 1.75rem; }
}
@media (max-width: 540px) {
  .auth-content-heading { font-size: 1.5rem; }
  .auth-content-section  { margin-top: 1.5rem; padding-top: 1.375rem; }
}

/* ─── Footer landmark ────────────────────────────────────────── */
.auth-footer {
  background:    var(--ab-bg-card);
  border-top:    1px solid var(--ab-border);
  padding:       1.25rem 1.5rem;
  text-align:    center;
}
.auth-footer p {
  font-size: .8125rem;
  color:     var(--ab-text-muted);
  margin:    0 0 .5rem;
}
.auth-footer-nav {
  display:   flex;
  flex-wrap: wrap;
  justify-content: center;
  gap:       .25rem 1.25rem;
}
.auth-footer-nav a {
  font-size: .8125rem;
}

/* ─── a11y panel button shared styles ────────────────────────── */
.auth-body .a11y-btn {
  display:     flex;
  align-items: center;
  gap:         .5rem;
  padding:     .5rem .625rem;
  font-size:   .875rem;
  font-family: inherit;
  color:       var(--ab-text);
  background:  transparent;
  border:      1.5px solid var(--ab-border);
  border-radius: .375rem;
  cursor:      pointer;
  text-align:  left;
  width:       100%;
  transition:  background .1s, color .1s, border-color .1s;
  min-height:  40px;
}
.auth-body .a11y-btn:hover,
.auth-body .a11y-btn:focus-visible,
.auth-body .a11y-btn.active {
  background:   var(--ab-ghost-hover-bg);
  color:        var(--ab-ghost-hover-fg);
  border-color: var(--ab-ghost-hover-bg);
}
.auth-body .a11y-btn.active { font-weight: 600; }

.auth-body .a11y-fontsize-group {
  display: flex;
  gap:     .25rem;
}
.auth-body .a11y-fontsize-group .a11y-btn {
  flex:            1;
  justify-content: center;
  padding:         .4rem;
}

.auth-body .a11y-btn-reset {
  border-color: var(--ab-error-border);
  color:        var(--ab-error-fg);
}
.auth-body .a11y-btn-reset:hover,
.auth-body .a11y-btn-reset:focus-visible {
  background:   var(--ab-error-fg);
  color:        var(--ab-bg-card);
  border-color: var(--ab-error-fg);
}

/* ─── Utility ────────────────────────────────────────────────── */
.auth-body .visually-hidden {
  position: absolute !important;
  width:    1px !important;
  height:   1px !important;
  padding:  0 !important;
  margin:   -1px !important;
  overflow: hidden !important;
  clip:     rect(0,0,0,0) !important;
  white-space: nowrap !important;
  border:   0 !important;
}

/* Loading state */
.auth-btn[aria-busy="true"] .auth-btn-text::after {
  content: '…';
  animation: ellipsis 1s steps(3, end) infinite;
}
@keyframes ellipsis {
  0%   { content: '.'; }
  33%  { content: '..'; }
  66%  { content: '...'; }
  100% { content: ''; }
}
@media (prefers-reduced-motion: reduce),
       ([data-reduce-motion="true"]) {
  .auth-btn[aria-busy="true"] .auth-btn-text::after { animation: none; content: '…'; }
  .auth-strength-fill { transition: none; }
  .auth-body a        { transition: none; }
}

/* ─── Responsive ─────────────────────────────────────────────── */
@media (max-width: 520px) {
  .auth-card { padding: 1.75rem 1.25rem; }
  .auth-heading { font-size: 1.5rem; }
}