/*
 * 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 {
    /* **Deprecated aliases, kept for one release.** The palette moved to
       `tokens.css` in fase 1 of the layout plan, where the whole application
       can read it instead of only these two pages. These three names shipped
       here first and are mapped rather than deleted, so this change does not
       have to prove it caught every consumer in the same commit - the same
       deprecation shape `app.css` used for its date-mask placeholder selector.

       `--auth-line` is NOT an alias: it is a border grey that never belonged
       to the mark and has no token. It stays a literal. */
    --auth-navy: var(--bs-primary);
    --auth-navy-light: var(--marca-navy-claro);
    --auth-gold: var(--marca-ouro);
    --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;
    /* **No `font-family` here, since fase 1 (D18).** This page used to force
       `'Segoe UI', Tahoma, Geneva, Verdana` - a Windows-first list whose
       fallbacks land on Tahoma or Verdana everywhere else, so the signed-out
       page rendered in a different typeface from the signed-in one on every
       non-Windows client. It now inherits Bootstrap's system stack, which is
       what the rest of the product uses. */
    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;
    /* `--raio-lg` is `1rem` (16px), 4px tighter than the `20px` this shipped
       with (D12's one exception, owner 2026-09-22). A four-value scale whose
       fourth member is used twice is not a scale, and `1rem` is Bootstrap's
       own `--bs-border-radius-xl`. */
    border-radius: var(--raio-lg);
    box-shadow: var(--sombra-lg);
    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: var(--raio);
    }
}

.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: var(--raio-lg);
    margin: 0 auto 1.5rem;
    box-shadow: var(--sombra-lg);
}

/* 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: var(--raio);
    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 var(--raio) var(--raio) 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: var(--raio);
    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: var(--raio);
    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: var(--sombra-lg);
    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); }
}