/*
 * The two signed-out pages (§6 2.7, X5).
 *
 * `login.html` and `ratelimit.html` each carried their own copy of the gradient
 * and the card, with the same values and different class names -
 * `.login-container` on one, `.error-container` on the other. One name now.
 *
 * Scoped to `body` and to names this project invented, so nothing here can
 * reach a signed-in page: `base_auth.html` is the only template that loads it.
 */

/*
 * The palette is the firm's, not a template's.
 *
 * This page shipped with `#667eea -> #764ba2` - the purple every Bootstrap
 * login template is born with - while the application behind it is navy: the
 * `theme-color` in base.html is `#001f4e`, and that is neither a coincidence
 * nor an approximation. Sampling `precapp/img/apple-touch-icon.png`, the firm's
 * own lockup, gives `#001f4e` for 27.416 of its 32.400 pixels: the mark's
 * ground and the declared theme colour are the same value. So the signed-out
 * page now uses the one colour the brand actually has, and the gold is the
 * mark's own accent (`#ef9a37` at its brightest).
 *
 * Custom properties rather than repeated literals: the gradient appears three
 * times below - body, button, and the tint under the logo.
 */
:root {
    --auth-navy: #001f4e;
    --auth-navy-light: #0a3d82;
    --auth-gold: #e59a3c;
    --auth-line: #e1e5e9;
}

body {
    background: linear-gradient(135deg, var(--auth-navy) 0%, var(--auth-navy-light) 100%);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    padding: 1.5rem;
}

/*
 * Opaque white, not `rgba(255, 255, 255, .95)` over `backdrop-filter:
 * blur(10px)`.
 *
 * The blur had nothing to blur. `backdrop-filter` samples what is painted
 * BEHIND the element, and behind this card is a single flat gradient - a blur
 * of a linear gradient is that same linear gradient. It cost a compositing
 * layer on every paint to produce a pixel-identical result, and the 95% white
 * it was paired with only tinted the card with whatever the gradient happened
 * to be underneath.
 */
.auth-card {
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, .25);
    padding: 3rem;
    width: 100%;
    max-width: 450px;
}

/* The card did not shrink. At `padding: 3rem` inside `body { padding: 1.5rem }`
   a 360px phone got a 312px card holding a 216px content box - the two paddings
   together ate 40% of the viewport width. Both step down together, and the
   radius with them, since a 20px corner on a nearly full-width card reads as a
   mistake rather than as a card. */
@media (max-width: 420px) {
    body {
        padding: .75rem;
    }

    .auth-card {
        padding: 1.75rem 1.25rem;
        border-radius: 14px;
    }
}

.auth-header {
    text-align: center;
    margin-bottom: 2rem;
}

.auth-header h1 {
    color: var(--auth-navy);
    font-weight: 700;
    font-size: 1.75rem;
    margin-bottom: .5rem;
}

.auth-header p {
    color: #666;
    margin-bottom: 0;
}

/*
 * The firm's mark, not a generic gavel.
 *
 * This was an 80px circle painted with the template gradient holding
 * `fa-gavel` - an icon that says "law", on the one screen where what needs
 * saying is WHOSE system this is. `apple-touch-icon.png` is the full lockup,
 * and base.html's own comment records why that file exists: at favicon sizes
 * the wordmark under the emblem is a smear, so the legible version was kept
 * for the one slot that renders it large. This is the second such slot.
 *
 * The image is square with its own navy ground baked in, so it needs a radius
 * and nothing else; the shadow is tinted with the brand navy rather than black
 * so it reads as depth under the mark instead of as grime.
 */
.auth-logo {
    display: block;
    width: 96px;
    height: 96px;
    border-radius: 20px;
    margin: 0 auto 1.5rem;
    box-shadow: 0 8px 20px rgba(0, 31, 78, .3);
}

/* The one place in the project that restyles `.form-control`. It is scoped to
   this card rather than declared bare, so it cannot follow the class onto a
   signed-in screen the way the page-scoped copies did (P2). */
.auth-card .form-control {
    border-radius: 12px;
    border: 2px solid var(--auth-line);
    padding: .75rem 1rem;
    font-size: 1rem;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.auth-card .form-control:focus {
    border-color: var(--auth-navy-light);
    box-shadow: 0 0 0 .2rem rgba(0, 31, 78, .25);
}

.auth-card .form-floating {
    margin-bottom: 1rem;
}

/*
 * A field with a button welded to its right edge - the password reveal.
 *
 * Three things have to be said explicitly, because `.auth-card .form-control`
 * above sets a flat 12px radius and that is exactly what Bootstrap's own
 * input-group rules spend their time overriding: the input gives up its right
 * corners, the button takes them, and the `.form-floating` inside the group
 * gives up the 1rem margin it carries everywhere else - the margin belongs to
 * the group now, or the button hangs 1rem above the next field.
 */
.auth-card .input-group {
    margin-bottom: 1rem;
}

.auth-card .input-group > .form-floating {
    margin-bottom: 0;
}

.auth-card .input-group > .form-floating > .form-control {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.auth-card .input-group > .btn {
    border: 2px solid var(--auth-line);
    border-left: 0;
    border-radius: 0 12px 12px 0;
    color: #6c757d;
    background: #fff;
    padding-inline: 1rem;
}

.auth-card .input-group > .btn:hover,
.auth-card .input-group > .btn:focus-visible {
    color: var(--auth-navy);
    background: #f8f9fa;
}

/* The caps-lock hint. Announced by `aria-live` in the markup and by colour
   here; `text-warning-emphasis` carries the colour, because #ffc107 on white
   is 1,6:1 and below WCAG AA at any size. This rule owns spacing only - it
   pulls up into the 1rem the input-group above it left behind. */
   No `display` declaration, deliberately: the hint is toggled with the
   `hidden` attribute, and any `display` set here through a class selector
   would outrank the user-agent stylesheet's `[hidden] { display: none }` and
   pin it open forever. It is a <div>, so block is already its default. */
.auth-caps-lock {
    margin: -.5rem 0 1rem;
    font-size: .875rem;
}

.auth-card .alert {
    border-radius: 12px;
    border: none;
    margin-bottom: 1.5rem;
}

.btn-auth {
    background: linear-gradient(135deg, var(--auth-navy) 0%, var(--auth-navy-light) 100%);
    border: none;
    border-radius: 12px;
    padding: .875rem 2rem;
    font-weight: 600;
    font-size: 1.1rem;
    color: #fff;
    width: 100%;
    margin-top: 1rem;
}

.btn-auth:hover,
.btn-auth:focus {
    box-shadow: 0 10px 25px rgba(0, 31, 78, .4);
    color: #fff;
}

/* A submit disabled while its own POST is in flight is the page saying "I
   heard you", so it must read as busy rather than as broken. */
.btn-auth:disabled {
    opacity: .75;
    color: #fff;
}

/*
 * Respected rather than assumed - and it was only half respected before.
 * `.auth-icon`'s pulse was already guarded further down this same file, while
 * this `translateY(-2px)` sat unguarded: one motion honoured the preference
 * and the other, on the button every visitor presses, did not. The transition
 * moves in here with the transform, since with no motion there is nothing left
 * for it to ease.
 */
@media (prefers-reduced-motion: no-preference) {
    .btn-auth {
        transition: transform .2s ease, box-shadow .2s ease;
    }

    .btn-auth:hover,
    .btn-auth:focus {
        transform: translateY(-2px);
    }
}

.auth-footer {
    text-align: center;
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid var(--auth-line);
}

.auth-footer small {
    color: #666;
}

.auth-icon {
    font-size: 4rem;
    color: var(--auth-gold);
    margin-bottom: 1.5rem;
}

/* Respected rather than assumed: a pulsing warning is exactly what a
   vestibular-motion sensitivity reacts to, and this page is shown to someone
   who is already having a bad time. */
@media (prefers-reduced-motion: no-preference) {
    .auth-icon {
        animation: auth-pulse 2s infinite;
    }
}

@keyframes auth-pulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.1); }
}