/* Generated by scripts/build-auth-bundle.mjs. */
/* Do not edit this file by hand; update colors_and_type.css or auth-styles.css instead. */

/* =============================================================
   IMLeagues — Colors & Type
   Lifted from imLeagues.Web.Admin.Mui (MUI v6 theme).
   Light theme is the canonical surface; dark tokens included.
   ============================================================= */

/* Fonts are loaded from the page head. */

:root {
    /* ---------- Brand primary: Neon Blue (indigo) ---------- */
    --iml-primary-50:  #ecf0ff;
    --iml-primary-100: #dde3ff;
    --iml-primary-200: #c2cbff;
    --iml-primary-300: #9ca7ff;
    --iml-primary-400: #7578ff;
    --iml-primary-500: #6366F1;   /* main */
    --iml-primary-600: #4e36f5;   /* hover */
    --iml-primary-700: #432ad8;
    --iml-primary-800: #3725ae;
    --iml-primary-900: #302689;
    --iml-primary-950: #1e1650;
    --iml-primary: var(--iml-primary-600);   /* AA — promoted from 500 for white-on-brand text */
    --iml-primary-hover: var(--iml-primary-700);
    --iml-primary-contrast: #ffffff;

    /* ---------- Neutrals: Storm Grey (light mode UI) ---------- */
    --iml-neutral-50:  #f9fafb;
    --iml-neutral-100: #f1f1f4;
    --iml-neutral-200: #dcdfe4;
    --iml-neutral-300: #b3b9c6;
    --iml-neutral-400: #8a94a6;
    --iml-neutral-500: #667085;
    --iml-neutral-600: #565e73;
    --iml-neutral-700: #434a60;
    --iml-neutral-800: #313749;
    --iml-neutral-900: #212636;
    --iml-neutral-950: #121621;

    /* ---------- Nevada (cool slate, used for dark surfaces) ---------- */
    --iml-nevada-50:  #fbfcfe;
    --iml-nevada-100: #f0f4f8;
    --iml-nevada-200: #dde7ee;
    --iml-nevada-300: #cdd7e1;
    --iml-nevada-400: #9fa6ad;
    --iml-nevada-500: #636b74;
    --iml-nevada-600: #555e68;
    --iml-nevada-700: #32383e;
    --iml-nevada-800: #202427;
    --iml-nevada-900: #121517;
    --iml-nevada-950: #090a0b;

    /* ---------- Semantic: Success (Kepple teal-green) ---------- */
    --iml-success-50:  #f0fdfa;
    --iml-success-100: #ccfbef;
    --iml-success-200: #9af5e1;
    --iml-success-300: #5fe9ce;
    --iml-success-400: #2ed3b8;
    --iml-success-500: #15b79f;   /* light-mode main */
    --iml-success-600: #0e9382;
    --iml-success-700: #107569;
    --iml-success-800: #115e56;
    --iml-success-900: #134e48;
    --iml-success: var(--iml-success-500);
    --iml-success-soft-bg: var(--iml-success-100);
    --iml-success-soft-fg: var(--iml-success-800);  /* WCAG AA on -100 */

    /* ---------- Semantic: Warning (California amber) ---------- */
    --iml-warning-50:  #fffaea;
    --iml-warning-100: #fff3c6;
    --iml-warning-200: #ffe587;
    --iml-warning-300: #ffd049;
    --iml-warning-400: #ffbb1f;
    --iml-warning-500: #fb9c0c;   /* light-mode main */
    --iml-warning-600: #de7101;
    --iml-warning-700: #b84d05;
    --iml-warning-800: #953b0b;
    --iml-warning-900: #7b310c;
    --iml-warning: var(--iml-warning-500);
    --iml-warning-soft-bg: var(--iml-warning-100);
    --iml-warning-soft-fg: var(--iml-warning-800);  /* WCAG AA on -100 */

    /* ---------- Semantic: Error (Red Orange) ---------- */
    --iml-error-50:  #fef3f2;
    --iml-error-100: #fee4e2;
    --iml-error-200: #ffcdc9;
    --iml-error-300: #fdaaa4;
    --iml-error-400: #f97970;
    --iml-error-500: #f04438;   /* light-mode main */
    --iml-error-600: #de3024;
    --iml-error-700: #bb241a;
    --iml-error-800: #9a221a;
    --iml-error-900: #80231c;
    --iml-error: var(--iml-error-500);
    --iml-error-soft-bg: var(--iml-error-100);
    --iml-error-soft-fg: var(--iml-error-700);

    /* ---------- Semantic: Info (Shakespeare cyan) ---------- */
    --iml-info-50:  #ecfdff;
    --iml-info-100: #cff7fe;
    --iml-info-200: #a4eefd;
    --iml-info-300: #66e0fa;
    --iml-info-400: #10bee8;
    --iml-info-500: #04aad6;
    --iml-info-600: #0787b3;
    --iml-info-700: #0d6d91;
    --iml-info-800: #145876;
    --iml-info-900: #154964;
    --iml-info: var(--iml-info-500);
    --iml-info-soft-bg: var(--iml-info-100);
    --iml-info-soft-fg: var(--iml-info-800);  /* WCAG AA on -100 */

    /* ---------- Semantic surface tokens (LIGHT) ---------- */
    --iml-bg-default:  #ffffff;
    --iml-bg-paper:    #ffffff;
    --iml-bg-level1:   var(--iml-neutral-50);   /* #f9fafb */
    --iml-bg-level2:   var(--iml-neutral-100);  /* #f1f1f4 */
    --iml-bg-level3:   var(--iml-neutral-200);  /* #dcdfe4 */

    --iml-fg:           var(--iml-neutral-900); /* primary text */
    --iml-fg-secondary: var(--iml-neutral-600); /* AA on white — was -500 */
    --iml-fg-tertiary:  var(--iml-neutral-500); /* AA on white — promoted from -400 */
    --iml-fg-disabled:  var(--iml-neutral-400);
    --iml-fg-inverse:   #ffffff;

    --iml-divider:        var(--iml-neutral-200);
    --iml-border:         var(--iml-neutral-200);
    --iml-border-strong:  var(--iml-neutral-300);

    /* Sidebar (always dark in product) */
    --iml-sidenav-bg: var(--iml-neutral-950);   /* #121621 */
    --iml-sidenav-fg: #ffffff;
    --iml-sidenav-item-fg: var(--iml-neutral-300);
    --iml-sidenav-item-hover-bg: rgba(255, 255, 255, 0.04);
    --iml-sidenav-item-active-bg: var(--iml-primary);
    --iml-sidenav-item-active-fg: #ffffff;
    --iml-sidenav-icon-fg: var(--iml-neutral-400);
    --iml-sidenav-divider: var(--iml-neutral-700);
    --iml-sidenav-group-title: var(--iml-neutral-400);

    /* Shadows (subtle MUI-like elevation, 5% black) */
    --iml-shadow-color: rgba(0, 0, 0, 0.06);
    --iml-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --iml-shadow-card: 0 1px 2px rgba(0, 0, 0, 0.06);
    --iml-shadow-hover: 0 0 55px -18px rgba(0, 0, 0, 0.30), 0 0 13px rgba(9, 0, 51, 0.10);
    --iml-shadow-button-contained: 0 1px 2px 0 rgba(0,0,0,0.05), inset 0 1px 0 0 rgba(255,255,255,0.10);
    --iml-shadow-button-hover: 0 4px 6px -1px rgba(0,0,0,0.10), 0 2px 4px -1px rgba(0,0,0,0.06);
    --iml-shadow-popover: 0 8px 24px rgba(0,0,0,0.10);

    /* Radii */
    --iml-radius-xs: 4px;
    --iml-radius-sm: 6px;
    --iml-radius-md: 8px;     /* buttons, inputs */
    --iml-radius-lg: 12px;    /* cards, chips */
    --iml-radius-xl: 16px;
    --iml-radius-pill: 999px;

    /* Spacing scale (MUI 8px base) */
    --iml-space-0:  0;
    --iml-space-1:  4px;
    --iml-space-2:  8px;
    --iml-space-3:  12px;
    --iml-space-4:  16px;
    --iml-space-5:  20px;
    --iml-space-6:  24px;
    --iml-space-7:  32px;
    --iml-space-8:  40px;
    --iml-space-9:  48px;
    --iml-space-10: 64px;

    /* Layout sizes from layout.jsx */
    --iml-mainnav-height: 56px;
    --iml-sidenav-width:  280px;
    --iml-sidenav-collapsed-width: 88px;
    --iml-content-max:    1440px;

    /* Breakpoints (informational; MUI: xs=0, sm=600, md=900, lg=1200, xl=1440) */
    --iml-bp-sm: 600px;
    --iml-bp-md: 900px;
    --iml-bp-lg: 1200px;
    --iml-bp-xl: 1440px;

    /* ---------- Typography ---------- */
    --iml-font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
    --iml-font-display: "Plus Jakarta Sans", "Inter", -apple-system, sans-serif;
    --iml-font-mono: "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

    /* Font-size scale (rems @ 16px root) */
    --iml-fs-xs:  0.75rem;   /* 12 — caption / overline */
    --iml-fs-sm:  0.875rem;  /* 14 — body2 / button / label */
    --iml-fs-md:  1rem;      /* 16 — body1 */
    --iml-fs-lg:  1.125rem;  /* 18 — h6 */
    --iml-fs-xl:  1.25rem;   /* 20 */
    --iml-fs-2xl: 1.5rem;    /* 24 — h5 */
    --iml-fs-3xl: 2rem;      /* 32 — h4 */
    --iml-fs-4xl: 2.25rem;   /* 36 — h3 */
    --iml-fs-5xl: 3rem;      /* 48 — h2 */
    --iml-fs-6xl: 3.5rem;    /* 56 — h1 */

    /* Icon sizes */
    --iml-icon-sm: 1rem;
    --iml-icon-md: 1.25rem;
    --iml-icon-lg: 1.5rem;

    /* Motion */
    --iml-ease: cubic-bezier(.4, 0, .2, 1);
    --iml-dur-fast: 120ms;
    --iml-dur-base: 200ms;
    --iml-dur-slow: 300ms;
}

/* ---------- DARK theme overrides ---------- */
[data-theme="dark"] {
    --iml-bg-default: var(--iml-nevada-950);
    --iml-bg-paper:   var(--iml-nevada-900);
    --iml-bg-level1:  var(--iml-nevada-800);
    --iml-bg-level2:  var(--iml-nevada-700);
    --iml-bg-level3:  var(--iml-nevada-600);
    --iml-fg:           var(--iml-nevada-100);
    --iml-fg-secondary: var(--iml-nevada-400);
    --iml-fg-disabled:  var(--iml-nevada-600);
    --iml-divider:      var(--iml-nevada-700);
    --iml-border:       var(--iml-nevada-700);
    --iml-shadow-color: rgba(0, 0, 0, 0.50);
    --iml-shadow-card:  0 1px 2px rgba(0,0,0,0.50);

    /* In dark mode primary shifts one step lighter (per color-schemes.js) */
    --iml-primary: var(--iml-primary-400);
    --iml-primary-hover: var(--iml-primary-500);
}

/* =============================================================
   Semantic typographic styles — MUI typography rules expressed
   as utility classes the design system can apply directly.
   Weights match the codebase: headings are 500, body is 400,
   button/subtitle is 500, button content is 600.
   ============================================================= */

.iml-h1 { font: 500 var(--iml-fs-6xl)/1.2 var(--iml-font-sans); letter-spacing: -0.02em; color: var(--iml-fg); }
.iml-h2 { font: 500 var(--iml-fs-5xl)/1.2 var(--iml-font-sans); letter-spacing: -0.02em; color: var(--iml-fg); }
.iml-h3 { font: 500 var(--iml-fs-4xl)/1.2 var(--iml-font-sans); letter-spacing: -0.01em; color: var(--iml-fg); }
.iml-h4 { font: 500 var(--iml-fs-3xl)/1.2 var(--iml-font-sans); color: var(--iml-fg); }
.iml-h5 { font: 500 var(--iml-fs-2xl)/1.2 var(--iml-font-sans); color: var(--iml-fg); }
.iml-h6 { font: 500 var(--iml-fs-lg)/1.2 var(--iml-font-sans); color: var(--iml-fg); }

.iml-subtitle1 { font: 500 var(--iml-fs-md)/1.57 var(--iml-font-sans); color: var(--iml-fg); }
.iml-subtitle2 { font: 500 var(--iml-fs-sm)/1.57 var(--iml-font-sans); color: var(--iml-fg); }

.iml-body1 { font: 400 var(--iml-fs-md)/1.5 var(--iml-font-sans); color: var(--iml-fg); }
.iml-body2 { font: 400 var(--iml-fs-sm)/1.57 var(--iml-font-sans); color: var(--iml-fg); }

.iml-caption { font: 400 var(--iml-fs-xs)/1.66 var(--iml-font-sans); color: var(--iml-fg-secondary); }
.iml-overline {
    font: 500 var(--iml-fs-xs)/2.5 var(--iml-font-sans);
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--iml-fg-secondary);
}
.iml-button { font: 600 var(--iml-fs-sm)/1 var(--iml-font-sans); letter-spacing: 0; }
.iml-mono   { font: 400 var(--iml-fs-sm)/1.5 var(--iml-font-mono); }

/* ========================================================
   IMLeagues — Login & Registration shared styles
   ========================================================
   Uses tokens from ./colors_and_type.css (same folder).
   The original Claude Design bundle put this file in
   project/preview/ and imported the parent's tokens. Adjusted
   here since both files now live next to each other in
   /public/_assets/imleagues-design/. */

/* Reset + base for artboards */
.lr * { box-sizing: border-box; }
.lr {
  font-family: var(--iml-font-sans);
  color: var(--iml-fg);
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
  background: var(--iml-bg-level1);
  width: 100%; height: 100%;
  overflow: hidden;
  display: flex;
}

/* ----- Buttons ----- */
.lr-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: 600 14px/1 var(--iml-font-sans);
  height: 44px; padding: 0 16px;
  border-radius: 8px;
  border: 1px solid transparent;
  cursor: pointer;
  width: 100%;
  transition: background .12s, border-color .12s, box-shadow .12s;
}
.lr-btn-primary {
  background: var(--iml-primary);
  color: #fff;
  box-shadow: 0 1px 2px rgba(78,54,245,.16);
}
.lr-btn-primary:hover { background: var(--iml-primary-hover); }
.lr-btn-outlined {
  background: #fff;
  color: var(--iml-fg);
  border-color: var(--iml-border-strong);
}
.lr-btn-outlined:hover { background: var(--iml-bg-level1); border-color: var(--iml-neutral-400); }
.lr-btn-ghost {
  background: transparent; color: var(--iml-primary-700); border: 0;
  height: auto; padding: 4px 0; width: auto;
  font-weight: 600;
}
.lr-btn-ghost:hover { text-decoration: underline; }
.lr-btn-sm { height: 36px; font-size: 13px; }

/* ----- Inputs ----- */
.lr-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.lr-label { font: 500 13px/1.2 var(--iml-font-sans); color: var(--iml-fg); }
.lr-label-req::after { content: " *"; color: var(--iml-error-600); }
.lr-input, .lr-select {
  height: 44px;
  padding: 0 12px;
  border: 1px solid var(--iml-border-strong);
  border-radius: 8px;
  font: 400 14px/1 var(--iml-font-sans);
  color: var(--iml-fg);
  background: #fff;
  outline: 0;
  width: 100%;
  transition: border-color .12s, box-shadow .12s;
}
.lr-input:focus, .lr-select:focus {
  border-color: var(--iml-primary);
  box-shadow: 0 0 0 3px rgba(99,102,241,.18);
}
.lr-input-error { border-color: var(--iml-error-500); }
.lr-input-error:focus { box-shadow: 0 0 0 3px rgba(240,68,56,.18); }
.lr-help { font: 400 12px/1.4 var(--iml-font-sans); color: var(--iml-fg-secondary); }
.lr-help-error { color: var(--iml-error-700); display: inline-flex; align-items: center; gap: 4px; }

/* ----- Field-level error pattern -----
   Each .lr-field optionally contains a .lr-field-error-msg slot. JS
   sets the message text and toggles .lr-field--error on the wrapper.
   The modifier reddens the input border, strengthens the focus ring,
   and reveals the message slot. Input also gets aria-invalid="true"
   and aria-describedby="{slotId}" so screen readers announce the
   error along with the field's label. */
.lr-field-error-msg {
    display: none;
    margin-top: 6px;
    padding-left: 2px;
    font: 500 12.5px/1.4 var(--iml-font-sans);
    color: var(--iml-error-700);
    align-items: center;
    gap: 6px;
}
.lr-field-error-msg .ph {
    font-size: 14px;
    flex-shrink: 0;
}
.lr-field--error .lr-field-error-msg { display: flex; }
.lr-field--error .lr-input,
.lr-field--error .lr-select {
    border-color: var(--iml-error-500);
}
.lr-field--error .lr-input:focus,
.lr-field--error .lr-select:focus {
    border-color: var(--iml-error-500);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--iml-error-500) 16%, transparent);
}

/* Error summary — shown above the form when 2+ fields fail. Uses
   .lr-alert visuals but lists each failed field as a jump-link. */
.lr-error-summary-title {
    font-weight: 700;
    margin-bottom: 4px;
}
.lr-error-summary-list {
    list-style: disc;
    padding-left: 18px;
    margin: 4px 0 0;
}
.lr-error-summary-list li { margin-top: 2px; }
.lr-error-summary-list a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
    font-weight: 600;
}

.lr-input-wrap { position: relative; }
.lr-input-wrap .lr-input { padding-left: 40px; }
.lr-input-icon {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  color: var(--iml-fg-tertiary); font-size: 18px;
}
.lr-input-suffix {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  color: var(--iml-fg-tertiary); font-size: 18px;
  background: transparent; border: 0; cursor: pointer; padding: 4px;
  display: inline-flex;
}
.lr-input-suffix:hover { color: var(--iml-fg); }

.lr-checkbox-row { display: flex; align-items: center; gap: 8px; margin: 8px 0; }
.lr-checkbox-row input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--iml-primary); }
.lr-checkbox-row label { font: 400 13px/1.4 var(--iml-font-sans); color: var(--iml-fg); }

/* ----- Auth shell ----- */
.lr-shell { width: 100%; height: 100%; display: flex; }

.lr-form-side {
  flex: 1;
  display: flex; flex-direction: column;
  padding: 48px 56px;
  background: #fff;
  overflow-y: auto;
}
.lr-form-inner { max-width: 400px; width: 100%; margin: auto; }

.lr-logo-row { display: flex; align-items: center; gap: 10px; margin-bottom: 48px; }
.lr-logo-img { height: 28px; }

.lr-h1 {
  font: 600 28px/1.2 var(--iml-font-display);
  letter-spacing: -.01em;
  color: var(--iml-fg);
  margin: 0 0 8px;
}
.lr-sub { font: 400 15px/1.5 var(--iml-font-sans); color: var(--iml-fg-secondary); margin: 0 0 32px; }
.lr-foot { font: 400 13px/1.5 var(--iml-font-sans); color: var(--iml-fg-secondary); margin-top: 24px; text-align: center; }
.lr-foot a, .lr-link { color: var(--iml-primary-700); font-weight: 500; text-decoration: none; cursor: pointer; }
.lr-foot a:hover, .lr-link:hover { text-decoration: underline; }

.lr-divider { display: flex; align-items: center; gap: 12px; margin: 20px 0; color: var(--iml-fg-tertiary); font: 500 12px/1 var(--iml-font-sans); text-transform: uppercase; letter-spacing: .8px; }
.lr-divider::before, .lr-divider::after { content: ""; flex: 1; height: 1px; background: var(--iml-border); }

/* ----- Brand panel (split layout) ----- */
.lr-brand-side {
  width: 480px;
  background: linear-gradient(135deg, var(--iml-neutral-950) 0%, var(--iml-primary-900, #312e81) 100%);
  color: #fff;
  padding: 48px;
  display: flex; flex-direction: column;
  position: relative;
  overflow: hidden;
}
.lr-brand-bg {
  position: absolute; inset: 0; opacity: .12;
  background-image:
    radial-gradient(circle at 20% 80%, var(--iml-primary-400) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, var(--iml-info-400) 0%, transparent 40%);
}
.lr-brand-content { position: relative; display: flex; flex-direction: column; height: 100%; }
.lr-brand-logo { height: 32px; align-self: flex-start; }
.lr-brand-headline {
  font: 600 36px/1.15 var(--iml-font-display);
  letter-spacing: -.02em;
  margin: auto 0;
}
.lr-brand-headline em { font-style: normal; color: var(--iml-primary-300); }
.lr-brand-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 24px; }
.lr-brand-stat { padding-left: 12px; border-left: 2px solid var(--iml-primary-400); }
.lr-brand-stat-value { font: 600 22px/1 var(--iml-font-display); }
.lr-brand-stat-label { font: 400 12px/1.4 var(--iml-font-sans); color: var(--iml-neutral-300); margin-top: 4px; }

/* ----- School picker ----- */
.lr-network-row { display: flex; gap: 8px; align-items: center; padding: 10px 12px; border: 1px solid var(--iml-border); border-radius: 8px; cursor: pointer; transition: border-color .12s, background .12s; }
.lr-network-row:hover { border-color: var(--iml-primary-300); background: var(--iml-primary-50); }
.lr-network-row.selected { border-color: var(--iml-primary); background: var(--iml-primary-50); }
.lr-network-mark {
  width: 32px; height: 32px; border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  font: 700 12px/1 var(--iml-font-sans);
  flex: 0 0 auto;
  color: #fff;
}
.lr-network-name { font: 500 14px/1.3 var(--iml-font-sans); color: var(--iml-fg); }
.lr-network-meta { font: 400 12px/1.3 var(--iml-font-sans); color: var(--iml-fg-secondary); }
.lr-network-badge { font: 500 11px/1 var(--iml-font-sans); padding: 3px 6px; border-radius: 4px; background: var(--iml-info-100); color: var(--iml-info-800); margin-left: auto; }

/* ----- Network tile (variation 3) ----- */
.lr-network-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.lr-network-tile {
  background: #fff;
  border: 1px solid var(--iml-border);
  border-radius: 10px;
  padding: 14px 10px;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  cursor: pointer;
  transition: border-color .12s, transform .12s;
}
.lr-network-tile:hover { border-color: var(--iml-primary); transform: translateY(-1px); }
.lr-network-tile-mark { width: 40px; height: 40px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font: 700 14px/1 var(--iml-font-sans); color: #fff; }
.lr-network-tile-name { font: 500 12px/1.3 var(--iml-font-sans); color: var(--iml-fg); text-align: center; }

/* ----- Recent network pill (variation 4) ----- */
.lr-recent-pill {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--iml-primary-200);
  background: var(--iml-primary-50);
  border-radius: 12px;
  cursor: pointer;
  transition: border-color .12s, background .12s;
}
.lr-recent-pill:hover { border-color: var(--iml-primary); }
.lr-recent-label { font: 500 11px/1 var(--iml-font-sans); color: var(--iml-primary-700); text-transform: uppercase; letter-spacing: .4px; }
.lr-recent-name { font: 600 15px/1.3 var(--iml-font-sans); color: var(--iml-fg); }

/* ----- Alert banner -----
   Left-border accent (4px in the saturated -500) + soft -100 background +
   -800 text for AA contrast on -100. A 1px ring in -200 sharpens the
   edge against white form backgrounds without the heaviness of a full
   border. Icon top-aligns so multi-line messages stay readable. */
.lr-alert {
  display: flex; gap: 12px;
  align-items: flex-start;
  padding: 14px 16px;
  border: 1px solid transparent;
  border-left-width: 4px;
  border-radius: 10px;
  margin-bottom: 16px;
  font: 500 14px/1.5 var(--iml-font-sans);
}
.lr-alert-info {
  background: var(--iml-info-100); color: var(--iml-info-800);
  border-color: var(--iml-info-200); border-left-color: var(--iml-info-500);
}
.lr-alert-error {
  background: var(--iml-error-100); color: var(--iml-error-800);
  border-color: var(--iml-error-200); border-left-color: var(--iml-error-500);
}
.lr-alert-warning {
  background: var(--iml-warning-100); color: var(--iml-warning-800);
  border-color: var(--iml-warning-200); border-left-color: var(--iml-warning-500);
}
.lr-alert-success {
  background: var(--iml-success-100); color: var(--iml-success-800);
  border-color: var(--iml-success-200); border-left-color: var(--iml-success-500);
}
.lr-alert-icon {
  flex: 0 0 auto;
  font-size: 20px;
  line-height: 1.4;  /* match the text line so the glyph aligns optically */
}
.lr-alert-title { font-weight: 700; margin-bottom: 2px; }

/* ----- SSO redirect state ----- */
.lr-sso-card {
  background: #fff;
  border: 1px solid var(--iml-border);
  border-radius: 12px;
  padding: 28px;
  text-align: center;
  box-shadow: var(--iml-shadow-card);
}
.lr-sso-icon-row {
  display: flex; align-items: center; justify-content: center; gap: 16px;
  margin-bottom: 20px;
}
.lr-sso-mark {
  width: 48px; height: 48px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font: 700 16px/1 var(--iml-font-sans); color: #fff;
}
.lr-sso-arrow {
  display: flex; gap: 4px;
  color: var(--iml-fg-tertiary);
}
.lr-sso-arrow span { width: 6px; height: 6px; border-radius: 999px; background: currentColor; animation: lr-pulse 1.4s infinite; }
.lr-sso-arrow span:nth-child(2) { animation-delay: .2s; }
.lr-sso-arrow span:nth-child(3) { animation-delay: .4s; }
@keyframes lr-pulse { 0%, 80%, 100% { opacity: .3; } 40% { opacity: 1; } }

/* ----- Stepper ----- */
.lr-stepper { display: flex; align-items: center; gap: 4px; margin-bottom: 24px; }
.lr-step-bar { flex: 1; height: 4px; border-radius: 2px; background: var(--iml-border); }
.lr-step-bar.done { background: var(--iml-success-500); }
.lr-step-bar.active { background: var(--iml-primary); }
.lr-step-meta { font: 500 12px/1 var(--iml-font-sans); color: var(--iml-fg-secondary); margin-bottom: 8px; text-transform: uppercase; letter-spacing: .5px; }

/* ----- Role selector (registration variation 4) ----- */
.lr-role-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 24px; }
.lr-role-card {
  border: 1px solid var(--iml-border);
  background: #fff;
  border-radius: 12px;
  padding: 18px 16px;
  cursor: pointer;
  transition: border-color .12s, background .12s;
  display: flex; flex-direction: column; gap: 6px;
  text-align: left;
}
.lr-role-card:hover { border-color: var(--iml-primary-300); }
.lr-role-card.selected { border-color: var(--iml-primary); background: var(--iml-primary-50); }
.lr-role-icon { font-size: 22px; color: var(--iml-primary); margin-bottom: 4px; }
.lr-role-title { font: 600 14px/1.2 var(--iml-font-sans); color: var(--iml-fg); }
.lr-role-sub { font: 400 12px/1.4 var(--iml-font-sans); color: var(--iml-fg-secondary); }

/* ----- Two-column form (registration variation 2/3 step 2) ----- */
.lr-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.lr-row-2 .lr-field { margin-bottom: 14px; }

/* ----- Centered shell variant 1 ----- */
.lr-centered { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; padding: 24px; background: var(--iml-bg-level1); }
.lr-centered-card {
  width: 440px; max-width: 100%;
  background: #fff;
  border-radius: 16px;
  padding: 40px;
  box-shadow: 0 24px 48px -12px rgba(15, 23, 42, .12), 0 1px 2px rgba(15, 23, 42, .04);
  border: 1px solid var(--iml-border);
}

/* ----- Compact (variant 4) ----- */
.lr-compact-bg {
  width: 100%; height: 100%;
  background:
    radial-gradient(circle at 0% 0%, rgba(99,102,241,.10) 0%, transparent 35%),
    radial-gradient(circle at 100% 100%, rgba(4,170,214,.08) 0%, transparent 35%),
    var(--iml-bg-level1);
  display: flex; align-items: center; justify-content: center; padding: 24px;
}

/* SSO providers row */
.lr-sso-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 16px; }
.lr-sso-btn { display: flex; align-items: center; justify-content: center; gap: 8px; height: 40px; border: 1px solid var(--iml-border-strong); border-radius: 8px; background: #fff; cursor: pointer; font: 500 13px/1 var(--iml-font-sans); color: var(--iml-fg); transition: background .12s, border-color .12s; }
.lr-sso-btn:hover { background: var(--iml-bg-level1); border-color: var(--iml-neutral-400); }
.lr-sso-btn img { width: 18px; height: 18px; }

/* Phosphor icons size helpers */
.lr i.ph { line-height: 1; }

/* ========================================================
   v3 redesign — login + registration
   ========================================================
   The rules below upgrade the existing .lr-* primitives and add the
   new components introduced by the v3 auth pages. Everything below
   this banner is the "new design"; everything above is the v1/v2
   baseline kept for the historical mockups.

   When the v3 pages are live in production and the v1/v2 mockups are
   retired, the upper section can be dropped wholesale and the rules
   below become the canonical auth stylesheet.

   Conventions:
   - No "v3" anywhere in class names. The whole stylesheet IS the auth
     design system; version numbers are historical context only.
   - Network-color theming flows from a single CSS variable, --accent,
     set on documentElement at runtime by the page's JS. Defaults to
     --iml-primary when not set, so unscoped pages render in IMLeagues
     indigo without any JS.
   - One stylesheet handles both login and registration; registration-
     specific components (.row-2, .terms-row, .birthday-row, .pw-strength,
     .real-gender-block, .captcha-box) are still defined here but only
     ever rendered by the registration page.
   ========================================================= */

/* The HTML `hidden` attribute must always win — without this,
   rules like `.page-hero-mark { display: flex }` would outrank
   the browser's `[hidden] { display: none }` and stay visible. */
[hidden] { display: none !important; }

/* ----- "Back to imleagues.com" link, top-left of the form side -----
   Universal logo-as-home convention. Doesn't compete with the centered
   page-hero (which carries the school/product identity for the current
   step) — sits in a different visual zone. Visible on every viewport
   since the right-side brand panel collapses on mobile. */
.lr-home-link {
    display: inline-flex; align-items: center; gap: 8px;
    align-self: flex-start;
    color: var(--iml-fg);
    text-decoration: none;
    font: 700 15px/1 var(--iml-font-display);
    letter-spacing: -.005em;
    padding: 8px 12px 8px 8px;
    border-radius: 10px;
    transition: background 120ms ease, transform 80ms ease;
}
.lr-home-link:hover { background: var(--iml-neutral-100); }
.lr-home-link:active { transform: translateY(1px); }
.lr-home-link:focus-visible {
    outline: 2px solid var(--accent, var(--iml-primary));
    outline-offset: 2px;
}
.lr-home-link img { height: 28px; width: auto; display: block; }
.lr-home-link i.ph {
    font-size: 18px;
    color: var(--iml-fg-secondary);
    transition: transform 120ms ease;
}
.lr-home-link:hover i.ph { transform: translateX(-2px); }

/* ----- Layout shell (split form / brand panel) ----- */
.lr-split {
    display: grid;
    grid-template-columns: 1fr;
    min-height: 100vh;
}
@media (min-width: 1024px) {
    .lr-split { grid-template-columns: 1fr 1fr; }
}
.lr-form-side {
    display: flex; flex-direction: column;
    background: #fff;
    padding: 24px;
    overflow-y: auto;
}
@media (min-width: 640px) { .lr-form-side { padding: 32px; } }
.lr-form-wrap {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 0;
}
.lr-form-inner {
    width: 100%;
    max-width: 460px;
    margin: 0;
}

/* ----- Page hero (centered identity block at top of each step) -----
   Two variants of the "mark" art inside it:
     --circle  → network-colored circle with an initial inside
     --logo    → IMLeagues product mark (indigo rounded-square tile) */
.page-hero {
    text-align: center;
    margin: 0 0 28px;
}
.page-hero-mark {
    width: 96px; height: 96px;
    margin: 0 auto 18px;
    display: flex; align-items: center; justify-content: center;
    transition: background 200ms ease, box-shadow 200ms ease;
}
.page-hero-mark--circle {
    border-radius: 50%;
    background: var(--accent, var(--iml-primary));
    color: #fff;
    font: 700 36px/1 var(--iml-font-sans);
    box-shadow:
        0 16px 36px color-mix(in srgb, var(--accent, var(--iml-primary)) 32%, transparent),
        0 2px 4px rgba(0,0,0,.05);
    overflow: hidden;
}
/* Network logo rendered inside the round step-2 / step-2-sso hero
   mark. Inline background color comes from JS so the brand color sits
   behind white-on-color logos. */
.page-hero-mark--circle .page-hero-mark-logo {
    width: 80%; height: 80%;
    object-fit: contain;
    display: block;
}
.page-hero-mark--logo {
    background: var(--iml-primary);
    border-radius: 24px;
    box-shadow:
        0 16px 36px color-mix(in srgb, var(--iml-primary) 28%, transparent),
        0 2px 4px rgba(0,0,0,.05);
}
.page-hero-mark--logo img,
.page-hero-mark--logo svg {
    width: 78%; height: 78%;
    object-fit: contain;
    display: block;
}
.page-hero-name {
    font: 700 26px/1.25 var(--iml-font-display);
    color: var(--iml-fg);
    margin: 0 0 6px;
    letter-spacing: -.01em;
}
.page-hero-tag {
    font: 500 15px/1.4 var(--iml-font-sans);
    color: var(--iml-fg-secondary);
    margin: 0;
}

/* ----- Generic h1 / sub for steps without a hero (e.g. password
        screen when there's no network identity to show) ----- */
.lr-h1 {
    font: 700 30px/1.2 var(--iml-font-display);
    color: var(--iml-fg);
    margin: 0 0 10px;
    letter-spacing: -.01em;
}
.lr-sub {
    font: 400 16px/1.55 var(--iml-font-sans);
    color: var(--iml-fg-secondary);
    margin: 0 0 28px;
}

/* ----- Inputs (upgrades the v1/v2 baseline above) ----- */
.lr-field { margin-bottom: 16px; }
.lr-label {
    display: block;
    margin-bottom: 8px;
    font: 600 14px/1.2 var(--iml-font-sans);
    color: var(--iml-fg);
    letter-spacing: .005em;
}
.lr-input,
.lr-select {
    width: 100%;
    height: 50px;
    padding: 0 14px;
    background: #fff;
    /* Border must hit 3:1 vs white for WCAG 1.4.11 (Non-Text Contrast).
       --iml-neutral-200 (#dcdfe4) = 1.33:1, fails. --iml-neutral-400
       (#8a94a6) = 3.08:1, passes. */
    border: 1.5px solid var(--iml-neutral-400);
    border-radius: 12px;
    font: 500 15px/1 var(--iml-font-sans);
    color: var(--iml-fg);
    box-sizing: border-box;
    transition: border-color 150ms ease, box-shadow 150ms ease, background 150ms ease;
    -webkit-appearance: none; appearance: none;
}
.lr-input-wrap .lr-input { padding-left: 44px; }
/* Placeholder text at full opacity — .55 dropped contrast below 4.5:1
   (#8a94a6 on #fff ≈ 3.2:1). Now ~5.4:1 against #fff. */
.lr-input::placeholder { color: var(--iml-fg-secondary); opacity: 1; }
/* Hover darkens further (the previous #cbd5e1 was *lighter* than the
   base border — net regression on hover). */
.lr-input:hover,
.lr-select:hover { border-color: var(--iml-fg-secondary); }
.lr-input:focus,
.lr-select:focus {
    border-color: var(--accent, var(--iml-primary));
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent, var(--iml-primary)) 16%, transparent);
    /* Transparent outline keeps Windows High Contrast Mode users visible
       (system overrides outline-color; box-shadow is ignored in HCM).
       Subtle in regular modes — the box-shadow is the primary indicator. */
    outline: 2px solid transparent;
    outline-offset: 2px;
}
.lr-select {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'><path d='M1 1.5l5 5 5-5' stroke='%2364748b' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 36px;
}
.lr-input-icon {
    position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
    color: var(--iml-fg-secondary); font-size: 18px; pointer-events: none;
}
.lr-input-suffix {
    position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
    background: none; border: 0;
    /* 44x44 minimum tap target (WCAG AAA 2.5.5, AA best practice).
       Icon stays visually centered via flex. */
    width: 44px; height: 44px; padding: 0; border-radius: 8px;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--iml-fg-secondary); cursor: pointer;
    transition: background 120ms ease, color 120ms ease;
}
.lr-input-suffix:focus-visible {
    outline: 2px solid var(--accent, var(--iml-primary));
    outline-offset: -2px;
}
.lr-input-suffix:hover { background: var(--iml-neutral-100); color: var(--iml-fg); }
.lr-help {
    margin-top: 6px;
    font: 400 12px/1.4 var(--iml-font-sans);
    color: var(--iml-fg-secondary);
}

/* ----- Primary button (accent fill, accent-tinted shadow) -----
   Overrides the .lr-btn-primary above with the v3 polish. The base
   .lr-btn rule still provides the inline-flex layout. */
.lr-btn-primary {
    height: 52px;
    padding: 0 20px;
    border: 0;
    border-radius: 12px;
    background: var(--accent, var(--iml-primary));
    color: #fff;
    font: 700 15px/1 var(--iml-font-sans);
    letter-spacing: .01em;
    box-shadow:
        0 8px 20px color-mix(in srgb, var(--accent, var(--iml-primary)) 28%, transparent),
        0 1px 2px rgba(0,0,0,.04);
    transition: filter 150ms ease, transform 80ms ease, box-shadow 200ms ease;
}
.lr-btn-primary:hover {
    background: var(--accent, var(--iml-primary)); /* lock the bg so :hover doesn't fall back to the v1 hover var */
    filter: brightness(1.08);
    box-shadow:
        0 10px 28px color-mix(in srgb, var(--accent, var(--iml-primary)) 38%, transparent),
        0 1px 2px rgba(0,0,0,.04);
}
.lr-btn-primary:active { transform: translateY(1px); filter: brightness(.95); }

/* ----- Right brand panel (gradient with subtle highlight overlay) ----- */
.lr-brand-side {
    display: none;
    width: auto;
    background: radial-gradient(50% 50% at 50% 50%, #122647 0%, #090E23 100%);
    color: #fff;
    align-items: center; justify-content: center;
    padding: 48px;
    position: relative;
    overflow: hidden;
}
@media (min-width: 1024px) {
    .lr-brand-side { display: flex; }
}
.lr-brand-side::before {
    content: '';
    position: absolute; inset: 0;
    background: radial-gradient(circle at 70% 30%, rgba(99,102,241,.15), transparent 50%);
    pointer-events: none;
}
.lr-brand-content {
    position: relative; z-index: 1;
    text-align: center;
    max-width: 480px;
    /* override of the upper .lr-brand-content height:100% so the
       centered content actually centers in the gradient panel. */
    height: auto; display: block;
}
.lr-brand-content .brand-logo {
    max-width: 320px; width: 80%;
    margin: 0 auto 32px;
    display: block;
    opacity: .95;
}
.lr-brand-h2 {
    font: 700 26px/1.3 var(--iml-font-display);
    margin: 0 0 12px;
}
.lr-brand-h2 .accent { color: #15b79e; }
.lr-brand-p {
    font: 400 15px/1.5 var(--iml-font-sans);
    opacity: .75;
    margin: 0;
}

/* ----- Email echo row (step 2 of either page — show the email the
        user typed with a back link to edit) ----- */
.lr-email-echo {
    margin: 0 0 24px;
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    font: 500 16px/1.4 var(--iml-font-sans);
    color: var(--iml-fg);
}
.lr-email-echo .back-link { margin-top: 0; }

/* ----- Back link (link-styled button) ----- */
.back-link {
    display: inline-flex; align-items: center; gap: 5px;
    margin-top: 14px;
    background: none; border: 0; padding: 0;
    color: var(--iml-fg-secondary); font: 500 14px/1 var(--iml-font-sans);
    cursor: pointer;
}
.back-link:hover { color: var(--iml-fg); text-decoration: underline; }
.back-link-row { text-align: center; margin-top: 8px; }

/* ----- Alt link footer ("Don't have an account? Create one") ----- */
.lr-alt-link {
    text-align: center; margin: 24px 0 0;
    font-size: 14px; color: var(--iml-fg-secondary);
}
.lr-alt-link a {
    color: var(--accent, var(--iml-primary)); font-weight: 600; text-decoration: none;
}
.lr-alt-link a:hover { text-decoration: underline; }

/* ----- Step fade (used between step transitions) ----- */
.step { animation: stepFade 200ms ease-out; }
@keyframes stepFade {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ----- Remember/Forgot row (login step 2B) ----- */
.lr-row-between {
    display: flex; align-items: center; justify-content: space-between;
    margin: 8px 0 20px;
    font-size: 14px;
}
.lr-row-between label {
    display: inline-flex; align-items: center; gap: 6px;
    color: var(--iml-fg-secondary); cursor: pointer;
}
.lr-row-between label input { accent-color: var(--accent, var(--iml-primary)); width: 16px; height: 16px; }
.lr-row-between a {
    color: var(--accent, var(--iml-primary)); font-weight: 600; text-decoration: none;
}
.lr-row-between a:hover { text-decoration: underline; }

/* ============== SSO redirect step ==============
   Shown when an email/network matches an SSO provider and we need
   to bounce the user to the IdP. 5-second auto-redirect with a
   visible countdown number + filling progress bar; escape link(s)
   below. */
.sso-context {
    text-align: center;
    font: 500 15px/1.55 var(--iml-font-sans);
    color: var(--iml-fg);
    margin: 0 0 22px;
}
.sso-status { text-align: center; margin: 0 0 22px; }
.sso-status-msg {
    font: 500 16px/1.45 var(--iml-font-sans);
    color: var(--iml-fg);
    margin: 0 0 14px;
}
.sso-countdown-num {
    display: inline-block; min-width: 1.1em; text-align: center;
    color: var(--accent, var(--iml-primary));
    font-weight: 800;
}
.sso-progress {
    width: 220px; height: 6px;
    margin: 0 auto;
    background: var(--iml-neutral-200);
    border-radius: 999px;
    overflow: hidden;
}
.sso-progress-fill {
    height: 100%; width: 0%;
    background: var(--accent, var(--iml-primary));
    border-radius: 999px;
    /* Width transition is set inline by JS so the bar fills in
       exactly SSO_COUNTDOWN_SECONDS. */
}
.sso-or {
    text-align: center; position: relative;
    font: 600 12px/1 var(--iml-font-sans); letter-spacing: .08em;
    color: var(--iml-fg-secondary); text-transform: uppercase;
    margin: 4px 0 16px;
}
.sso-or::before, .sso-or::after {
    content: ''; position: absolute; top: 50%;
    width: calc(50% - 1.6em); height: 1px;
    background: var(--iml-neutral-200);
}
.sso-or::before { left: 0; }
.sso-or::after  { right: 0; }
.sso-alt-links {
    display: flex; align-items: center; justify-content: center;
    gap: 14px; flex-wrap: wrap;
}
.sso-alt-links .back-link { margin-top: 0; }
.sso-alt-sep {
    color: var(--iml-neutral-200); font-size: 18px; line-height: 1;
    user-select: none;
}

/* ----- Network picker list (registration step-pick-network).
        Renders the filtered school list under the search input. */
.lr-network-list {
    list-style: none; padding: 0; margin: 0 0 18px;
    /* Cap to ~5 rows but never more than ~45% of viewport so the list
       doesn't dominate short mobile viewports (iPhone SE = 667px tall). */
    max-height: min(320px, 45vh); overflow-y: auto;
    border: 1.5px solid var(--iml-neutral-200);
    border-radius: 12px;
    background: #fff;
}
.lr-network-list li {
    padding: 12px 14px;
    cursor: pointer;
    border-bottom: 1px solid var(--iml-neutral-100);
    display: flex; align-items: center; gap: 12px;
    transition: background 120ms ease;
}
.lr-network-list li:last-child { border-bottom: 0; }
.lr-network-list li:hover {
    background: var(--iml-neutral-100);
}
.lr-network-list li:focus-visible {
    background: var(--iml-neutral-100);
    outline: 2px solid var(--accent, var(--iml-primary));
    outline-offset: -2px;
}
.lr-network-list .ln-initial {
    width: 32px; height: 32px; border-radius: 50%;
    background: var(--iml-neutral-200);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font: 700 13px/1 var(--iml-font-sans);
    flex-shrink: 0;
    overflow: hidden;
}
.lr-network-list .ln-logo {
    width: 100%; height: 100%;
    object-fit: contain;
    display: block;
}
.lr-network-list .ln-name {
    font: 500 14px/1.3 var(--iml-font-sans);
    color: var(--iml-fg);
    flex: 1; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Need higher specificity than `.lr-network-list li` (which is flex)
   so the empty/loading row renders as flowing text instead of two
   12px-spaced flex items. */
.lr-network-list .lr-network-list-empty,
.lr-network-list .lr-network-list-loading {
    display: block;
    padding: 16px 14px;
    text-align: center;
    font: 500 13px/1.4 var(--iml-font-sans);
    color: var(--iml-fg-secondary);
    cursor: default;
    border-bottom: 0;
    background: transparent;
}
.lr-network-list-empty .ln-browse-all {
    color: var(--iml-primary);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.lr-network-list-empty .ln-browse-all:hover {
    text-decoration-thickness: 2px;
}

/* ----- "Press Enter to continue" hint shown inside the row when only
        one result is present. Hidden by default (only displayed via the
        --single modifier below). */
.lr-network-list .ln-enter-hint {
    display: none;
    font: 500 12px/1.2 var(--iml-font-sans);
    color: var(--iml-fg-secondary);
    flex-shrink: 0;
    margin-left: 12px;
    white-space: nowrap;
}
.lr-network-list .ln-enter-hint kbd {
    font-family: inherit;
    background: var(--iml-neutral-100);
    border: 1px solid var(--iml-neutral-200);
    border-radius: 4px;
    padding: 1px 6px;
    font-size: 11px;
    color: var(--iml-fg);
}

/* ----- Single-result mode: render the lone match as a prominent
        confirmation card instead of a list row. Makes "we found your
        network" obvious — a normal one-row list can read as "no
        results" when the user expected a list. */
.lr-network-list.lr-network-list--single {
    border-color: var(--accent, var(--iml-primary));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent, var(--iml-primary)) 18%, transparent);
    max-height: none;
}
.lr-network-list.lr-network-list--single li {
    padding: 18px 18px;
    background: color-mix(in srgb, var(--accent, var(--iml-primary)) 5%, #fff);
}
.lr-network-list.lr-network-list--single li:hover,
.lr-network-list.lr-network-list--single li:focus-visible {
    background: color-mix(in srgb, var(--accent, var(--iml-primary)) 10%, #fff);
}
.lr-network-list.lr-network-list--single .ln-initial {
    width: 44px; height: 44px;
    font-size: 16px;
}
.lr-network-list.lr-network-list--single .ln-name {
    font: 600 15px/1.3 var(--iml-font-sans);
}
.lr-network-list.lr-network-list--single .ln-enter-hint {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
/* Mobile sizing for the .ln-enter-hint lives in the main mobile
   breakpoint block below — keep visible, just smaller. */

/* ============== Registration-only components ============== */

/* Two-up row for first/last name + status/grad year. Stacks at
   narrow widths. */
.row-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}
@media (max-width: 480px) {
    .row-2 { grid-template-columns: 1fr; gap: 0; }
}

/* Terms / waiver checkbox rows. */
.terms-row {
    display: flex; align-items: flex-start; gap: 10px;
    margin: 4px 0 18px;
    font: 400 14px/1.5 var(--iml-font-sans);
    color: var(--iml-fg-secondary);
}
.terms-row input[type="checkbox"] {
    margin-top: 3px;
    width: 16px; height: 16px;
    accent-color: var(--accent, var(--iml-primary));
    flex-shrink: 0;
    cursor: pointer;
}
.terms-row label { flex: 1; cursor: pointer; }
.terms-row label a {
    color: var(--accent, var(--iml-primary)); font-weight: 600;
    text-decoration: none;
}
.terms-row label a:hover { text-decoration: underline; }

/* Birthday row — Month / Day / Year selects, collapses to year-only
   when the network sets HideMonthDay. */
.birthday-row {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1.2fr;
    gap: 8px;
}
.birthday-row.year-only { grid-template-columns: 1fr; }

/* Password strength meter — three segments fill red → yellow → green
   based on the score JS computes. Never uses --accent because the
   meter must read as strength feedback, not network color. */
.pw-strength {
    display: flex; gap: 4px; margin: 8px 0 4px;
}
.pw-strength-seg {
    flex: 1; height: 4px; border-radius: 999px;
    background: var(--iml-neutral-200);
    transition: background 150ms ease;
}
.pw-strength[data-score="1"] .pw-strength-seg:nth-child(-n+1) { background: #ef4444; }
.pw-strength[data-score="2"] .pw-strength-seg:nth-child(-n+2) { background: #f59e0b; }
.pw-strength[data-score="3"] .pw-strength-seg:nth-child(-n+3) { background: #10b981; }
.pw-strength-label {
    font: 500 12px/1.3 var(--iml-font-sans);
    color: var(--iml-fg-secondary);
    margin: 0;
    min-height: 16px;
}
.pw-strength-label[data-score="1"] { color: #b91c1c; }
.pw-strength-label[data-score="2"] { color: #b45309; }
.pw-strength-label[data-score="3"] { color: #047857; }

/* Real Gender follow-up — shown only when the user picks Non-binary. */
.real-gender-block {
    margin: -8px 0 16px;
    padding: 12px 14px;
    background: var(--iml-neutral-100);
    border-left: 3px solid var(--accent, var(--iml-primary));
    border-radius: 8px;
}
.real-gender-block p {
    margin: 0 0 8px;
    font: 400 13px/1.5 var(--iml-font-sans);
    color: var(--iml-fg-secondary);
}

/* Cloudflare Turnstile disclosure. Required when running the widget
   in invisible mode (no visible UI) — Cloudflare's terms call for a
   text disclaimer pointing at their privacy + terms. Subtle footer
   styling so it doesn't compete with the submit button. */
.lr-captcha-notice {
    margin: 10px 0 0;
    font: 400 11px/1.5 var(--iml-font-sans);
    color: var(--iml-fg-secondary);
    text-align: center;
}
.lr-captcha-notice a {
    color: var(--iml-fg-secondary);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.lr-captcha-notice a:hover { color: var(--iml-fg); }
.lr-captcha-help {
    display: inline-block;
    margin-top: 4px;
}

/* Visible-fallback widget container. Hidden by default; the
   auth-turnstile.js helper unhides it and renders the visible
   Turnstile widget into it when the invisible challenge can't pass. */
.lr-captcha-fallback {
    margin: 6px 0 14px;
    min-height: 0;
}
.lr-captcha-fallback:not([hidden]) {
    /* Cloudflare's visible widget sits ~65px tall in normal size,
       slightly more for flexible. Give it space + a subtle frame so
       it reads as part of the form, not a stray element. */
    padding: 10px;
    border-radius: 10px;
    background: var(--iml-neutral-100, #f3f4f6);
    border: 1px solid var(--iml-neutral-200, #e5e7eb);
}

/* ============== Accessibility ==============
   Focus rings on link-style buttons (the default browser ring is
   easy to lose against transparent backgrounds). */
.back-link:focus-visible {
    outline: 2px solid var(--accent, var(--iml-primary));
    outline-offset: 3px;
    border-radius: 4px;
}

/* Skip-to-content link. Hidden off-screen until focused (keyboard
   users hitting Tab on page load see it first; mouse users never).
   Lets keyboard users bypass the home link + brand chrome and land
   on the form. */
.lr-skip-link {
    position: absolute;
    top: 8px; left: 8px;
    z-index: 100;
    padding: 10px 16px;
    background: var(--iml-primary);
    color: #fff;
    font: 600 14px/1 var(--iml-font-sans);
    text-decoration: none;
    border-radius: 8px;
    transform: translateY(-200%);
    transition: transform 150ms ease;
}
.lr-skip-link:focus-visible {
    transform: translateY(0);
    outline: 2px solid #fff;
    outline-offset: 2px;
}
.page-hero-name { margin-top: 0; } /* h1 default margin override */

@media (prefers-reduced-motion: reduce) {
    .step { animation: none !important; }
    .sso-progress-fill { transition: none !important; }
}

/* ============== Mobile breakpoint ==============
   ≤480px: shrink hero, tighten form padding, stack two-up rows. */
@media (max-width: 480px) {
    .lr-form-side { padding: 20px 18px; }
    .page-hero { margin-bottom: 24px; }
    .page-hero-mark {
        width: 76px; height: 76px;
        margin-bottom: 14px;
    }
    .page-hero-mark--circle { font-size: 28px; }
    .page-hero-name { font-size: 22px; }
    .page-hero-tag  { font-size: 14px; }
    .sso-status-msg { font-size: 15px; }
    .sso-progress   { width: 80%; max-width: 220px; }
    .sso-alt-sep { display: none; }
    .sso-alt-links { flex-direction: column; gap: 10px; }
    /* Long strength messages were wrapping to 3+ lines and pushing the
       Create Account button off the iPhone SE viewport. */
    .pw-strength-label { font-size: 11px; }
    /* Two-up form rows already stack at this breakpoint; tighten the
       inherited 14px gap so vertical rhythm stays compact. */
    .row-2 { gap: 10px; }
    /* Keep the "Press Enter" hint visible on mobile (shrunk) rather
       than hiding it — users who arrived via search can still use it. */
    .lr-network-list .ln-enter-hint { font-size: 11px; }
}