/*
 * The panel uses align-items:flex-start so overflow-y:auto works correctly.
 * The form uses margin:auto to stay vertically centered when there is spare
 * space, and scroll naturally (no clipping) when the form is taller than
 * the viewport — the standard flex centering trick.
 */
.bs-login-panel {
    align-items: flex-start;
    overflow-y: auto;
}
.bs-login-form {
    max-width: 520px;
    margin-top: auto;
    margin-bottom: auto;
    padding: 40px 0;
}
.bs-reg-name-grid {
    display: grid;
    grid-template-columns: 1fr 130px 1fr;
    gap: 12px;
}
.bs-reg-two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.bs-reg-section {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--bs-muted);
    margin: 20px 0 10px;
    padding-top: 16px;
    border-top: 1px solid var(--bs-border);
}
.bs-reg-section:first-of-type {
    margin-top: 4px;
    padding-top: 0;
    border-top: none;
}
.bs-reg-success {
    padding: 14px 16px;
    background: var(--bs-accent-soft);
    color: var(--bs-accent-2);
    border-radius: 10px;
    font-size: 14px;
    margin-bottom: 20px;
    font-weight: 500;
}
.bs-field-hint {
    font-size: 11px;
    color: var(--bs-muted);
    margin-top: 4px;
}
@media (max-width: 640px) {
    .bs-reg-name-grid,
    .bs-reg-two-col { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------------
 * Split-screen scrolling.
 *
 * .bs-login-wrap is min-height:100vh, so a tall form makes the whole GRID
 * grow and the page scrolls as one — dragging the hero panel up with it.
 * .bs-login-panel already carries overflow-y:auto, but it can never engage
 * while the row is free to keep growing.
 *
 * Fixing the wrapper to exactly one viewport lets that overflow take effect:
 * the left panel stays put and only the form column scrolls.
 * ------------------------------------------------------------------ */
@media (min-width: 901px) {
    /* html/body carry no height in app.css, so the DOCUMENT can still scroll
       even when the wrapper is pinned to 100vh — that is the small drift on
       the left panel. Locking both to the viewport removes the page-level
       scrollbar entirely, leaving the form column as the only scroller. */
    html, body {
        height: 100%;
        overflow: hidden;
    }

    .bs-login-wrap {
        height: 100vh;
        height: 100dvh;
        min-height: 0;        /* overrides the min-height:100vh in app.css */
        overflow: hidden;     /* the page itself never scrolls */
    }

    /* Hero content centring and the short-window guards live in app.css,
       since the sign-in page needs them too. Only the scroll containment
       below is specific to this page. */
    .bs-login-hero {
        height: 100%;
        overflow: hidden;          /* static — never scrolls */
    }

    .bs-login-panel {
        height: 100%;
        overflow-y: auto;     /* the only scrolling region */
        overscroll-behavior: contain;
    }
}

/* Below the breakpoint the panels stack, so the page must scroll normally
   and the hero has to shrink to a banner rather than eating a whole screen. */
@media (max-width: 900px) {
    .bs-login-wrap  { height: auto; min-height: 100vh; overflow: visible; }
    .bs-login-hero  {
        position: static;
        height: auto;
        min-height: 0;
        padding: 28px 24px;
        overflow: visible;
    }
    .bs-login-panel { height: auto; overflow: visible; }
    .bs-login-hero .bs-login-features { display: none; }
    .bs-login-tagline h1 { font-size: 26px; }
    .bs-login-tagline p  { font-size: 13.5px; }
}

/* On a short desktop window the hero content can exceed the viewport and get
   clipped by overflow:hidden. Trim its spacing instead of letting the feature
   list disappear off the bottom. */

/* ------------------------------------------------------------------
 * Identity picker — current student / graduate / alumnus.
 * Radio cards rather than a <select>: three options with explanations
 * read better than a dropdown, and the choice changes which fields
 * appear below, so it deserves the visual weight.
 * ------------------------------------------------------------------ */
.bs-type-picker {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-bottom: 4px;
}

.bs-type-opt {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 12px 13px;
    border: 1.5px solid var(--bs-border);
    border-radius: 10px;
    cursor: pointer;
    background: var(--bs-surface);
    transition: border-color .15s, background .15s;
}
.bs-type-opt:hover    { border-color: var(--bs-accent); }
.bs-type-opt.selected { border-color: var(--bs-accent); background: var(--bs-accent-soft); }

/* The radio drives state but is visually replaced by the card */
.bs-type-opt input[type=radio] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.bs-type-name {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--bs-ink);
    line-height: 1.25;
}
.bs-type-opt.selected .bs-type-name { color: var(--bs-accent-2); }

.bs-type-desc {
    font-size: 11.5px;
    color: var(--bs-muted, #6b7385);
    line-height: 1.35;
}

/* Keyboard users must still see focus */
.bs-type-opt:focus-within { outline: 2px solid var(--bs-accent); outline-offset: 2px; }

@media (max-width: 640px) {
    .bs-type-picker { grid-template-columns: 1fr; gap: 8px; }
    .bs-type-opt    { flex-direction: row; align-items: baseline; gap: 8px; flex-wrap: wrap; }
    .bs-type-desc   { flex: 1 1 100%; }
}

/* ---- Password field: visibility toggle + strength meter ---- */
.bs-pw-wrap { position: relative; }
.bs-pw-wrap .bs-input { padding-right: 40px; }

.bs-pw-eye {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: 0;
    padding: 6px;
    cursor: pointer;
    color: var(--bs-text-3);
    display: flex;
    border-radius: 6px;
    transition: color .15s;
}
.bs-pw-eye:hover        { color: var(--bs-text-2); }
.bs-pw-eye.is-on        { color: var(--bs-accent-2); }

.bs-pw-meter { margin-top: 7px; }
.bs-pw-track {
    height: 4px;
    background: var(--bs-border-2);
    border-radius: 3px;
    overflow: hidden;
}
.bs-pw-fill {
    height: 100%;
    width: 0;
    border-radius: 3px;
    transition: width .2s ease, background .2s ease;
}
.bs-pw-fill.is-weak   { background: var(--bs-red); }
.bs-pw-fill.is-fair   { background: var(--bs-amber); }
.bs-pw-fill.is-good   { background: #3b82f6; }
.bs-pw-fill.is-strong { background: var(--bs-accent); }

.bs-pw-label {
    font-size: 11.5px;
    font-weight: 600;
    margin-top: 4px;
}
.bs-pw-label.is-weak   { color: var(--bs-red); }
.bs-pw-label.is-fair   { color: var(--bs-amber); }
.bs-pw-label.is-good   { color: #2563eb; }
.bs-pw-label.is-strong { color: var(--bs-accent-2); }