:root {
    --rul-bg: #ffffff;
    --rul-bg-alt: #f8f9fa;
    --rul-bg-dark: #1a1816;
    --rul-text: #1a1816;
    --rul-text-soft: #5c5852;
    --rul-accent: #DE550F;
    --rul-accent-soft: rgba(222, 85, 15, 0.1);
    --rul-line: rgba(26, 24, 22, 0.12);
    --rul-line-soft: rgba(26, 24, 22, 0.06);
}

/* ===== Reset scoped to our login page ===== */
.rul-login-container * { box-sizing: border-box; }
.rul-login-container {
    display: flex;
    min-height: 100vh;
    font-family: 'Inter', sans-serif;
    -webkit-font-smoothing: antialiased;
}

/* ===== Left Brand Panel ===== */
.rul-brand-panel {
    flex: 1;
    position: relative;
    background: var(--rul-accent);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 3rem;
    color: #fff;
    overflow: hidden;
}
.rul-brand-bg {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-image: url('https://images.unsplash.com/photo-1522202176988-66273c2fd55f?ixlib=rb-4.0.3&auto=format&fit=crop&w=1000&q=80');
    background-size: cover;
    background-position: center;
    opacity: 0.15;
    mix-blend-mode: overlay;
}
.rul-brand-content { position: relative; z-index: 2; }
.rul-brand-logo {
    font-family: 'Merriweather', serif;
    font-size: 1.5rem;
    font-weight: 900;
    color: #fff;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 4rem;
}
.rul-brand-logo em { font-style: italic; font-weight: 300; }
.rul-brand-welcome h1 {
    font-family: 'Merriweather', serif;
    font-weight: 900;
    font-size: 3rem;
    line-height: 1.2;
    margin-bottom: 1.5rem;
    max-width: 14ch;
}
.rul-brand-welcome h1 em { font-style: italic; font-weight: 300; }
.rul-brand-welcome p {
    font-size: 1.1rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.9);
    max-width: 40ch;
}
.rul-brand-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem 3rem;
    position: relative;
    z-index: 2;
}
.rul-stat-item .rul-num {
    font-family: 'Merriweather', serif;
    font-size: 2.5rem;
    font-weight: 900;
    line-height: 1;
    margin-bottom: 0.3rem;
}
.rul-stat-item .rul-lbl {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    opacity: 0.8;
}

/* ===== Right Form Panel ===== */
.rul-form-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 3rem;
    background: var(--rul-bg);
    position: relative;
}
.rul-back-link {
    position: absolute;
    top: 3rem;
    left: 3rem;
    color: var(--rul-text-soft);
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: color 300ms;
}
.rul-back-link:hover { color: var(--rul-accent); }
.rul-form-wrapper {
    width: 100%;
    max-width: 420px;
}
.rul-form-head { margin-bottom: 2rem; }
.rul-form-head h2 {
    font-family: 'Merriweather', serif;
    font-weight: 900;
    font-size: 2.2rem;
    margin-bottom: 0.5rem;
    color: var(--rul-text);
}
.rul-form-head p { color: var(--rul-text-soft); font-size: 1rem; }

/* ===== Moodle form overrides ===== */
.rul-form-wrapper .loginform { all: unset; display: block; }

/* Hide Moodle's default h1 and subtitle — we have our own */
.rul-form-wrapper .loginform h1,
.rul-form-wrapper .loginform > p { display: none; }

/* Labels */
.rul-form-wrapper .loginform .form-label,
.rul-form-wrapper .loginform label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--rul-text);
    margin-bottom: 0.5rem;
    font-family: 'Inter', sans-serif;
}

/* Inputs */
.rul-form-wrapper .loginform .form-control,
.rul-form-wrapper .loginform input[type="text"],
.rul-form-wrapper .loginform input[type="password"] {
    width: 100%;
    padding: 0.9rem 1rem 0.9rem 2.8rem;
    background: var(--rul-bg-alt);
    border: 1px solid transparent;
    border-radius: 0;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    color: var(--rul-text);
    transition: all 300ms;
    box-shadow: none;
}
.rul-form-wrapper .loginform .form-control:focus,
.rul-form-wrapper .loginform input[type="text"]:focus,
.rul-form-wrapper .loginform input[type="password"]:focus {
    outline: none;
    border-color: var(--rul-accent);
    background: #fff;
    box-shadow: 0 0 0 3px var(--rul-accent-soft);
}

/* Field icon wrappers */
.rul-form-wrapper .login-form-username,
.rul-form-wrapper .login-form-password {
    position: relative;
    margin-bottom: 1.5rem;
}
/* Push input right to make room for icon */
.rul-form-wrapper .login-form-username .form-control,
.rul-form-wrapper .login-form-password .form-control {
    padding-left: 2.8rem;
    padding-right: 2.8rem;
}
/* Icon overlaid on the left inside the input */
.rul-form-wrapper .login-form-username::before,
.rul-form-wrapper .login-form-password::before {
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    left: 1rem;
    top: calc(50% + 12px);
    transform: translateY(-50%);
    color: var(--rul-text-soft);
    font-size: 14px;
    pointer-events: none;
    z-index: 1;
}
.rul-form-wrapper .login-form-username::before { content: '\f0e0'; }
.rul-form-wrapper .login-form-password::before { content: '\f023'; }

/* Style Moodle's native toggle button, hide our custom one */
.rul-form-wrapper .login-form-password [data-action="toggle"],
.rul-form-wrapper .login-form-password .toggle-sensitive-btn {
    position: absolute;
    right: 0.8rem;
    top: calc(50% + 12px);
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--rul-text-soft);
    cursor: pointer;
    font-size: 14px;
    padding: 0;
    z-index: 2;
}
.rul-form-wrapper .login-form-password [data-action="toggle"]:hover,
.rul-form-wrapper .login-form-password .toggle-sensitive-btn:hover {
    color: var(--rul-accent);
}

/* Forgot password link */
.rul-form-wrapper .loginform .text-end {
    text-align: right;
    margin-bottom: 1.5rem;
}
.rul-form-wrapper .loginform .text-end a {
    color: var(--rul-accent);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
}
.rul-form-wrapper .loginform .text-end a:hover { opacity: 0.8; }

/* Submit button */
.rul-form-wrapper .loginform .btn-primary,
.rul-form-wrapper .loginform button[type="submit"] {
    width: 100%;
    background: var(--rul-accent) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 1rem !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    cursor: pointer;
    transition: all 300ms;
    box-shadow: none !important;
}
.rul-form-wrapper .loginform .btn-primary:hover,
.rul-form-wrapper .loginform button[type="submit"]:hover {
    background: var(--rul-bg-dark) !important;
}

/* Sign up link */
.rul-form-wrapper .loginform .text-center {
    text-align: center;
    margin-top: 2rem;
    font-size: 14px;
    color: var(--rul-text-soft);
}
.rul-form-wrapper .loginform .text-center a {
    color: var(--rul-accent);
    font-weight: 700;
    text-decoration: none;
}

/* Identity providers (OAuth) */
.rul-form-wrapper .login-separator {
    display: flex;
    align-items: center;
    text-align: center;
    margin: 1.5rem 0;
    color: var(--rul-text-soft);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}
.rul-form-wrapper .login-separator::before,
.rul-form-wrapper .login-separator::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid var(--rul-line-soft);
}
.rul-form-wrapper .login-separator::before { margin-right: 1rem; }
.rul-form-wrapper .login-separator::after  { margin-left: 1rem; }

.rul-form-wrapper .login-identityproviders { display: flex; flex-direction: column; gap: 0.8rem; }
.rul-form-wrapper .login-identityprovider-btn {
    border: 1px solid var(--rul-line) !important;
    background: #fff !important;
    color: var(--rul-text) !important;
    border-radius: 0 !important;
    padding: 0.8rem !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    transition: all 300ms;
}
.rul-form-wrapper .login-identityprovider-btn:hover {
    border-color: var(--rul-accent) !important;
    background: var(--rul-bg-alt) !important;
}

/* Error / info alerts */
.rul-form-wrapper .alert-danger {
    background: #fff0ec;
    border: 1px solid var(--rul-accent);
    color: var(--rul-accent);
    border-radius: 0;
    padding: 0.8rem 1rem;
    font-size: 13px;
    margin-bottom: 1.5rem;
}
.rul-form-wrapper .alert-info {
    background: #eef6ff;
    border: 1px solid #3b82f6;
    color: #1d4ed8;
    border-radius: 0;
    padding: 0.8rem 1rem;
    font-size: 13px;
    margin-bottom: 1.5rem;
}


/* Cookies notice */
.rul-form-wrapper .login-cookiesnotice {
    margin-top: 1.5rem;
    font-size: 12px;
    color: var(--rul-text-soft);
    text-align: center;
}
.rul-form-wrapper .login-cookiesnotice .btn-link {
    color: var(--rul-text-soft);
    font-size: 12px;
    padding: 0;
    text-decoration: underline;
}

/* ===== Responsive ===== */
@media (max-width: 968px) {
    .rul-login-container { flex-direction: column; }
    .rul-brand-panel { min-height: 280px; padding: 2rem; }
    .rul-brand-logo { margin-bottom: 1.5rem; }
    .rul-brand-welcome h1 { font-size: 2rem; margin-bottom: 1rem; }
    .rul-brand-welcome p { font-size: 0.95rem; }
    .rul-brand-stats { gap: 2rem; }
    .rul-stat-item .rul-num { font-size: 1.8rem; }
    .rul-form-panel { padding: 2rem; }
    .rul-back-link { top: 1rem; left: 1rem; }
}

/* ===== SIGNUP FORM ===== */

/* Heading injected by Moodle's loginform h1 / signupform heading */
.rul-form-wrapper .loginform h1,
.rul-form-wrapper .rul-signupform .login-heading {
    display: block;
    font-family: 'Merriweather', serif;
    font-weight: 900;
    font-size: 2.2rem;
    margin-bottom: 0.4rem;
    color: var(--rul-text);
}

/* Subtext under heading */
.rul-form-wrapper .loginform > p.text-muted,
.rul-form-wrapper .rul-signupform > p {
    display: block;
    color: var(--rul-text-soft);
    font-size: 1rem;
    margin-bottom: 2rem;
}

/* Signup mform wrapper */
.rul-form-wrapper .rul-signupform { display: block; }

/* mform fieldset / legend */
.rul-form-wrapper .rul-signupform fieldset {
    border: none;
    padding: 0;
    margin: 0;
}
.rul-form-wrapper .rul-signupform .collapsible-actions,
.rul-form-wrapper .rul-signupform legend.ftoggler {
    display: none;
}
/* NOTE: .fcontainer .col-md-3 is deliberately NOT hidden here. Moodle renders
   each field's <label> inside that column, so hiding it left every signup input
   unlabelled - and display:none also drops them from the accessibility tree,
   so screen readers got bare inputs too. See the signup block at the end of
   this file, which stacks the label above the field instead. */

/* Each form row */
.rul-form-wrapper .rul-signupform .fitem {
    margin-bottom: 1.2rem;
    display: flex;
    flex-direction: column;
}

/* Labels */
.rul-form-wrapper .rul-signupform .col-form-label,
.rul-form-wrapper .rul-signupform label {
    font-size: 13px;
    font-weight: 600;
    color: var(--rul-text);
    margin-bottom: 0.4rem;
    font-family: 'Inter', sans-serif;
}

/* Required star */
.rul-form-wrapper .rul-signupform .req-star { color: var(--rul-accent); }

/* All text/email/password/select inputs */
.rul-form-wrapper .rul-signupform input[type="text"],
.rul-form-wrapper .rul-signupform input[type="email"],
.rul-form-wrapper .rul-signupform input[type="password"],
.rul-form-wrapper .rul-signupform select,
.rul-form-wrapper .rul-signupform textarea {
    width: 100%;
    padding: 0.85rem 1rem;
    background: var(--rul-bg-alt);
    border: 1px solid transparent;
    border-radius: 0;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    color: var(--rul-text);
    transition: all 300ms;
    box-shadow: none;
    appearance: none;
}
.rul-form-wrapper .rul-signupform input:focus,
.rul-form-wrapper .rul-signupform select:focus,
.rul-form-wrapper .rul-signupform textarea:focus {
    outline: none;
    border-color: var(--rul-accent);
    background: #fff;
    box-shadow: 0 0 0 3px var(--rul-accent-soft);
}

/* Inline validation errors */
.rul-form-wrapper .rul-signupform .form-control-feedback,
.rul-form-wrapper .rul-signupform .invalid-feedback {
    font-size: 12px;
    color: var(--rul-accent);
    margin-top: 0.3rem;
}

/* Submit button */
.rul-form-wrapper .rul-signupform [type="submit"],
.rul-form-wrapper .rul-signupform .btn-primary {
    width: 100%;
    background: var(--rul-accent) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 1rem !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    cursor: pointer;
    transition: all 300ms;
    box-shadow: none !important;
    margin-top: 0.5rem;
}
.rul-form-wrapper .rul-signupform [type="submit"]:hover,
.rul-form-wrapper .rul-signupform .btn-primary:hover {
    background: var(--rul-bg-dark) !important;
}

/* Cancel / secondary buttons */
.rul-form-wrapper .rul-signupform .btn-secondary {
    width: 100%;
    background: transparent !important;
    color: var(--rul-text-soft) !important;
    border: 1px solid var(--rul-line) !important;
    border-radius: 0 !important;
    padding: 0.9rem !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    cursor: pointer;
    transition: all 300ms;
    margin-top: 0.5rem;
}
.rul-form-wrapper .rul-signupform .btn-secondary:hover {
    border-color: var(--rul-accent) !important;
    color: var(--rul-accent) !important;
}

/* Action buttons row */
.rul-form-wrapper .rul-signupform .fdescription,
.rul-form-wrapper .rul-signupform .form-text {
    font-size: 12px;
    color: var(--rul-text-soft);
    margin-top: 0.3rem;
}

/* reCAPTCHA wrapper */
.rul-form-wrapper .rul-signupform .recaptcha { margin-bottom: 1rem; }

/* Policy agreement checkbox row */
.rul-form-wrapper .rul-signupform input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--rul-accent);
    margin-right: 0.5rem;
    cursor: pointer;
}

/* Sign in link at bottom */
.rul-form-wrapper .rul-signupform .rul-signin-text {
    text-align: center;
    margin-top: 1.5rem;
    font-size: 14px;
    color: var(--rul-text-soft);
}
.rul-form-wrapper .rul-signupform .rul-signin-text a {
    color: var(--rul-accent);
    font-weight: 700;
    text-decoration: none;
}

/* Scrollable form panel for long signup form */
.rul-form-panel { overflow-y: auto; align-items: flex-start; padding-top: 5rem; padding-bottom: 3rem; }
.rul-form-wrapper { margin: auto; }

/* ===== Per-page headings via CSS ===== */
.rul-form-wrapper .loginform::before {
    content: 'Sign in to your account';
    display: block;
    font-family: 'Merriweather', serif;
    font-weight: 900;
    font-size: 2.2rem;
    color: var(--rul-text);
    margin-bottom: 0.4rem;
    line-height: 1.2;
}
.rul-form-wrapper .loginform::after {
    content: 'Enter your credentials to access your dashboard.';
    display: block;
    color: var(--rul-text-soft);
    font-size: 1rem;
    margin-bottom: 2rem;
    order: -1;
}
.rul-form-wrapper .rul-signupform::before {
    content: 'Create your account';
    display: block;
    font-family: 'Merriweather', serif;
    font-weight: 900;
    font-size: 2.2rem;
    color: var(--rul-text);
    margin-bottom: 0.4rem;
    line-height: 1.2;
}
.rul-form-wrapper .rul-signupform::after {
    content: 'Join thousands of learners advancing their careers.';
    display: block;
    color: var(--rul-text-soft);
    font-size: 1rem;
    margin-bottom: 2rem;
}

/* Hide Moodle's own h1 and subtitle since we use ::before/::after */
.rul-form-wrapper .loginform h1,
.rul-form-wrapper .loginform > p.text-muted,
.rul-form-wrapper .rul-signupform .login-heading { display: none; }

/* ==========================================================================
   FORGOT / RESET PASSWORD  (/login/forgot_password.php)

   Both of this page's states - "request a reset" and "set a new password" -
   are rendered with $mform->display(), so there is no template to override
   the way signup has one. Everything here is therefore scoped to the page's
   body id. The visual language deliberately mirrors the signup block above.
   ========================================================================== */

/* Intro text rendered by $OUTPUT->box(...passwordforgotteninstructions2) */
#page-login-forgot_password .rul-form-wrapper .box.generalbox {
    padding: 0;
    margin: 0 0 2rem;
    border: none;
    background: none;
    color: var(--rul-text-soft);
    font-size: 1rem;
    line-height: 1.6;
}

/* mform chrome */
#page-login-forgot_password .rul-form-wrapper fieldset {
    border: none;
    padding: 0;
    margin: 0 0 1.5rem;
}
#page-login-forgot_password .rul-form-wrapper .mform > fieldset:last-of-type {
    margin-bottom: 0;
}

/* Section headers ("Search by username" / "Search by email"). These are real
   alternatives, so unlike signup we keep them visible - just restyled as small
   brand section labels. The collapse toggle is left functional and muted
   rather than hidden, so a collapsed section can never become unreachable. */
#page-login-forgot_password .rul-form-wrapper fieldset h3 {
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--rul-accent);
    margin: 0 0 1rem;
}
#page-login-forgot_password .rul-form-wrapper .icons-collapse-expand {
    color: var(--rul-text-soft);
    box-shadow: none;
}

/* Stack each row: label above a full-width field. */
#page-login-forgot_password .rul-form-wrapper .fitem {
    flex-direction: column;
    margin-bottom: 1.2rem;
}
#page-login-forgot_password .rul-form-wrapper .fitem > [class*="col-md-"] {
    flex: 0 0 100%;
    width: 100%;
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;
}

#page-login-forgot_password .rul-form-wrapper .col-form-label,
#page-login-forgot_password .rul-form-wrapper label {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: var(--rul-text);
    margin-bottom: 0.4rem;
}

#page-login-forgot_password .rul-form-wrapper input[type="text"],
#page-login-forgot_password .rul-form-wrapper input[type="email"],
#page-login-forgot_password .rul-form-wrapper input[type="password"] {
    width: 100%;
    padding: 0.85rem 1rem;
    background: var(--rul-bg-alt);
    border: 1px solid transparent;
    border-radius: 0;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    color: var(--rul-text);
    transition: all 300ms;
    box-shadow: none;
    appearance: none;
}
#page-login-forgot_password .rul-form-wrapper input:focus {
    outline: none;
    border-color: var(--rul-accent);
    background: #fff;
    box-shadow: 0 0 0 3px var(--rul-accent-soft);
}

#page-login-forgot_password .rul-form-wrapper .form-control-feedback,
#page-login-forgot_password .rul-form-wrapper .invalid-feedback {
    font-size: 12px;
    color: var(--rul-accent);
    margin-top: 0.3rem;
}

/* The <hr /> the form injects between the two search options. */
#page-login-forgot_password .rul-form-wrapper hr {
    border: none;
    border-top: 1px solid var(--rul-line-soft);
    margin: 1.75rem 0;
}

#page-login-forgot_password .rul-form-wrapper [type="submit"],
#page-login-forgot_password .rul-form-wrapper .btn-primary {
    width: 100%;
    background: var(--rul-accent) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 1rem !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    cursor: pointer;
    transition: all 300ms;
    box-shadow: none !important;
    margin-top: 0.5rem;
}
#page-login-forgot_password .rul-form-wrapper [type="submit"]:hover,
#page-login-forgot_password .rul-form-wrapper .btn-primary:hover {
    background: var(--rul-bg-dark) !important;
}

#page-login-forgot_password .rul-form-wrapper .btn-secondary {
    width: 100%;
    background: transparent !important;
    color: var(--rul-text-soft) !important;
    border: 1px solid var(--rul-line) !important;
    border-radius: 0 !important;
    padding: 0.9rem !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    margin-top: 0.5rem;
    transition: all 300ms;
}
#page-login-forgot_password .rul-form-wrapper .btn-secondary:hover {
    border-color: var(--rul-accent) !important;
    color: var(--rul-accent) !important;
}

/* Confirmation / error notifications shown after submitting. */
#page-login-forgot_password .rul-form-wrapper .alert {
    border: none;
    border-radius: 0;
    border-left: 3px solid var(--rul-accent);
    background: var(--rul-accent-soft);
    color: var(--rul-text);
    font-size: 14px;
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
}
#page-login-forgot_password .rul-form-wrapper .continuebutton a,
#page-login-forgot_password .rul-form-wrapper .singlebutton .btn {
    display: inline-block;
    width: 100%;
    text-align: center;
    background: var(--rul-accent);
    color: #fff;
    text-decoration: none;
    padding: 1rem;
    font-size: 15px;
    font-weight: 700;
    border-radius: 0;
}

/* ==========================================================================
   RESPONSIVE CORRECTIONS - login / signup / forgot password

   These sit at the end of the file deliberately: .rul-form-panel is
   re-declared at "Per-page headings" below the 968px media query, and by
   source order that re-declaration was overriding the mobile padding.
   ========================================================================== */

/* 100vh spans the area behind mobile browsers' collapsing URL bar, so the panel
   ends up taller than what is actually visible. dvh tracks the real viewport;
   the vh declaration stays first as a fallback for older browsers. */
.rul-login-container {
    min-height: 100vh;
    min-height: 100dvh;
}

@media (max-width: 968px) {
    /* Both panels carry flex:1, so in the stacked column they split the height
       evenly - the orange panel claimed half the screen no matter how little
       was in it. Size it to its content and let the form take the rest. */
    .rul-brand-panel { flex: 0 0 auto; min-height: 0; }
    .rul-form-panel  { flex: 1 0 auto; }

    /* Restores the mobile padding that the later re-declaration overrode
       (it was leaving 5rem / 80px of dead space above the form). */
    .rul-form-panel {
        padding: 2rem 1.5rem 2.5rem;
        /* Scroll the page as one document rather than creating a nested
           scrolling region - matters most on signup, which is a long form. */
        overflow-y: visible;
    }
    .rul-form-wrapper { max-width: 100%; }
}

@media (max-width: 640px) {
    /* On phones the brand panel is dropped entirely so the form gets the whole
       screen. The "Back to Home" link in the form panel remains, so there is
       still a route out. Tablets (641-968px) keep it stacked above the form. */
    .rul-brand-panel { display: none; }

    /* With the panel gone the form is the only child, so centre it vertically
       again rather than pinning it to the top. */
    .rul-form-panel {
        padding: 3rem 1.25rem 2.5rem;
        justify-content: center;
    }
    .rul-back-link { top: 0.75rem; left: 0.75rem; font-size: 0.82rem; }

    /* Signup puts two fields per row in places; stack them. */
    .rul-form-wrapper .rul-signupform .fitem > [class*="col-md-"] {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* ==========================================================================
   Hide Moodle's page footer on the login-layout pages
   ==========================================================================
   The footer shows "You are not logged in", the data retention summary, the
   theme switcher and "Powered by Moodle", plus the floating help/popover
   buttons - none of which belong on this layout.

   Hidden rather than removed from login.mustache on purpose: that partial also
   renders {{{ output.standard_end_of_body_html }}}, which carries the RequireJS
   config and every JS init call for the page. Dropping the include would break
   all JavaScript here. Scripts inside a display:none element still execute, so
   hiding is safe.

   login.css only loads on this layout, but the body class is kept for clarity. */
body.pagelayout-login #page-footer {
    display: none;
}


/* ==========================================================================
   SIGNUP FORM - usability pass (applies at every width)
   ========================================================================== */

/* The wrapper is 420px, so fields are always single-column; the label simply
   stacks above its input rather than sitting in a 3/9 split. */
.rul-form-wrapper .rul-signupform .fitem > [class*="col-md-"] {
    flex: 0 0 100%;
    width: 100%;
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;
}
.rul-form-wrapper .rul-signupform .fitem {
    margin-bottom: 1.35rem;
}
.rul-form-wrapper .rul-signupform .col-form-label {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding-bottom: 0;
    margin-bottom: 0.45rem;
}

/* Moodle marks required fields with a pix icon in .form-label-addon. Scale it
   down and tint it to the accent so it reads as a marker, not an error. */
.rul-form-wrapper .rul-signupform .form-label-addon {
    gap: 0.35rem;
}
.rul-form-wrapper .rul-signupform .form-label-addon .text-danger {
    color: var(--rul-accent) !important;
}
.rul-form-wrapper .rul-signupform .form-label-addon img,
.rul-form-wrapper .rul-signupform .form-label-addon .icon {
    width: 10px;
    height: 10px;
}

/* Password policy is a static element rendered just above the password field.
   Present it as quiet helper text instead of a bare block of body copy. */
.rul-form-wrapper .rul-signupform #fitem_id_passwordpolicyinfo {
    margin-bottom: 0.75rem;
}
.rul-form-wrapper .rul-signupform #fitem_id_passwordpolicyinfo .felement,
.rul-form-wrapper .rul-signupform #fitem_id_passwordpolicyinfo ul {
    font-size: 12px;
    line-height: 1.5;
    color: var(--rul-text-soft);
    background: var(--rul-bg-alt);
    border-radius: 4px;
    padding: 0.75rem 0.9rem;
    margin: 0;
}
.rul-form-wrapper .rul-signupform #fitem_id_passwordpolicyinfo ul { padding-left: 1.9rem; }

/* Site policy agreement row: checkbox beside its label, not stacked. */
.rul-form-wrapper .rul-signupform #fitem_id_policyagreed .felement,
.rul-form-wrapper .rul-signupform [id^="fitem_id_policyagreed"] .felement {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}

/* Action buttons stack full-width and in a sensible order. */
.rul-form-wrapper .rul-signupform .form-group.row.fitem:last-of-type .felement,
.rul-form-wrapper .rul-signupform #fgroup_id_buttonar .felement {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    width: 100%;
}
.rul-form-wrapper .rul-signupform #fgroup_id_buttonar .felement > * { width: 100%; }

/* reCAPTCHA renders a fixed 304px widget, which overflows a 320px screen once
   panel padding is taken off. Allow it to scroll rather than push the page. */
.rul-form-wrapper .rul-signupform .recaptcha,
.rul-form-wrapper .rul-signupform [data-fieldtype="recaptcha"] {
    max-width: 100%;
    overflow-x: auto;
}

@media (max-width: 400px) {
    /* Shrink the widget slightly instead of showing a scrollbar on the smallest
       screens. transform keeps it interactive, unlike zoom. */
    .rul-form-wrapper .rul-signupform .recaptcha > div {
        transform: scale(0.88);
        transform-origin: left top;
    }
}