/* The auth pages: login, register, password reset.
 *
 * Plain CSS, linked once from layouts/auth.blade.php so every auth screen
 * shares one treatment. public/assets/css/app.css is a frozen marketing
 * Tailwind build that nothing in this repo regenerates, so a new arbitrary
 * utility written into these views renders as nothing at all, silently.
 *
 * ---- The brand rail -------------------------------------------------------
 *
 * THE WHITE CHIP BEHIND THE LOGO IS GONE. R12: never a white box, rounded
 * plate or panel behind the logo, and it was sitting on the sign-in page. It
 * was there for a real reason though: the full wordmark asset is brand blue
 * (#004FDE) and disappears on this navy. So it is answered rather than
 * deleted. The white MARK goes inside the brand plate the portal rail already
 * wears (layouts/portal.blade.php), with the name set as type beside it.
 *
 * The headline carries the rail and each feature is ONE line: the title in
 * white with its sentence continuing in a dimmer tone. Three bordered cards
 * for three short sentences was three boxes doing a list's job.
 */

.lg { position: relative; z-index: 10; display: flex; height: 100%; width: 100%; flex-direction: column; justify-content: space-between; padding: 34px; color: #fff; }

/* The lockup. No plate behind the logo; the plate IS the mark's own. */
.lg-lock { display: inline-flex; width: fit-content; align-items: center; gap: 11px; text-decoration: none; }
.lg-plate { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; flex: 0 0 44px; border: 1px solid rgba(255, 255, 255, .15); border-radius: 13px; background: linear-gradient(135deg, #3b82f6, #1d4ed8); box-shadow: 0 6px 16px -6px rgba(37, 99, 235, .7); }
.lg-plate img { width: 24px; height: 24px; }
.lg-name { font-size: 20px; font-weight: 800; letter-spacing: -.02em; color: #fff; }

.lg-mid { padding: 22px 0; }
.lg-badge { display: inline-flex; align-items: center; gap: 8px; border: 1px solid rgba(255, 255, 255, .15); border-radius: 999px; background: rgba(255, 255, 255, .05); padding: 5px 13px; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: rgba(186, 230, 253, .9); }

/* Authored rather than Tailwind's animate-ping, so the reduced-motion guard
   covers the whole dot instead of hiding half of it. */
.lg-dot { position: relative; display: flex; width: 6px; height: 6px; }
.lg-dot span:first-child { position: absolute; display: inline-flex; width: 100%; height: 100%; border-radius: 999px; background: #34d399; opacity: .75; animation: lg-ping 1.6s cubic-bezier(0, 0, .2, 1) infinite; }
.lg-dot span:last-child { position: relative; display: inline-flex; width: 6px; height: 6px; border-radius: 999px; background: #34d399; }
@keyframes lg-ping { 75%, 100% { transform: scale(2); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .lg-dot span:first-child { animation: none; } }

.lg-h { margin: 20px 0 0; max-width: 18ch; font-size: 38px; font-weight: 700; line-height: 1.06; letter-spacing: -.035em; }
.lg-l { margin: 14px 0 0; max-width: 34ch; font-size: 14px; line-height: 1.65; color: #cbd5e1; }

.lg-list { margin-top: 26px; display: flex; flex-direction: column; gap: 12px; }
.lg-item { display: flex; align-items: flex-start; gap: 11px; }
.lg-ic { margin-top: 1px; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; flex: 0 0 28px; border: 1px solid rgba(255, 255, 255, .15); border-radius: 9px; background: rgba(var(--brand-rgb), .2); color: var(--brand-200); font-size: 11px; }
.lg-b { min-width: 0; font-size: 13px; line-height: 1.55; color: #94a3b8; }
.lg-t { font-weight: 700; color: #fff; }

.lg-foot { display: flex; align-items: center; gap: 12px; font-size: 13px; color: #94a3b8; }
.lg-foot i { color: #34d399; }
.lg-foot span { display: inline-flex; align-items: center; gap: 6px; }


/* ---------------------------------------------------------------------------
 * The sign-in card. Shared by login, password reset and register.
 *
 * The card used to carry four stacked box-shadows, a ring, a backdrop blur, a
 * gradient hairline and a blurred orb: six effects doing one job. It has a
 * dark header band in the RAIL'S OWN gradient now, so the two halves of the
 * screen read as one object rather than a dark panel beside a white one, and
 * one border, one shadow, one radius under it.
 *
 * R18  the keep-me-signed-in control is a toggle, never a checkbox.
 * R37  every input keeps a visible label; the placeholder is the example.
 * R32  every control clears a 44px target.
 * ------------------------------------------------------------------------ */

/* The pane carries the same DOT field the pricing FAQ wears: 1.2px dots of
   brand blue on 22px centers, no mask. Masked to a radial fade they were
   invisible past the first rows, which is the opposite of asking for a
   pattern. The card sits over it, so the dots read in the margins. */
.lf-pane { position: relative; display: flex; flex: 1; align-items: center; justify-content: center; overflow: hidden; background-color: #f8fafc; background-image: radial-gradient(rgba(37, 99, 235, .22) 1.2px, transparent 1.2px); background-size: 22px 22px; padding: 40px 16px; }
.lf-shell { position: relative; width: 100%; max-width: 26rem; }
.lf-mobilelogo { display: inline-flex; margin-bottom: 24px; }
@media (min-width: 1024px) { .lf-mobilelogo { display: none; } }
.lf-mobilelogo img { height: 42px; width: auto; }

.lf-card { position: relative; overflow: hidden; border: 1px solid #e2e8f0; border-radius: 20px; background: #fff; box-shadow: 0 24px 60px -34px rgba(15, 23, 42, .4); }
.lf-head { position: relative; overflow: hidden; display: flex; align-items: center; gap: 13px; background: linear-gradient(160deg, #0b1220 0%, #101a33 55%, var(--brand-900) 100%); padding: 20px 24px; }
.lf-head::after { content: ""; position: absolute; inset: -60% -20% auto auto; width: 220px; height: 220px; border-radius: 999px; background: rgb(var(--brand-400-rgb) / .3); filter: blur(60px); pointer-events: none; }
.lf-plate { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; flex: 0 0 44px; border: 1px solid rgba(255, 255, 255, .18); border-radius: 13px; background: rgba(255, 255, 255, .12); color: #fff; font-size: 16px; }
.lf-h { position: relative; margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -.02em; line-height: 1.2; color: #fff; }
.lf-sub { position: relative; margin: 2px 0 0; font-size: 12.5px; color: #cbd5e1; }
.lf-body { padding: 24px; }

.lf-field + .lf-field { margin-top: 15px; }
.lf-label { display: block; margin-bottom: 7px; font-size: 12.5px; font-weight: 600; letter-spacing: .01em; color: #0b1220; }
.lf-labelrow { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 7px; }
.lf-labelrow .lf-label { margin-bottom: 0; }
.lf-link { font-size: 12.5px; font-weight: 600; color: var(--brand); text-decoration: none; transition: color .2s; }
.lf-link:hover { color: var(--brand-800); text-decoration: underline; }

.lf-input { position: relative; }
.lf-glyph { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); pointer-events: none; font-size: 13px; color: #94a3b8; transition: color .2s; }
.lf-glyph--bad { color: #f87171; }
.lf-control { width: 100%; min-height: 46px; border: 1px solid #e2e8f0; border-radius: 12px; background: #f8fafc; padding: 0 16px 0 40px; font: inherit; font-size: 14px; color: #0b1220; outline: none; transition: border-color .2s, background .2s, box-shadow .2s; }
.lf-control::placeholder { color: #94a3b8; }
.lf-control:hover { border-color: #cbd5e1; }
.lf-control:focus { border-color: var(--brand); background: #fff; box-shadow: 0 0 0 3px rgba(var(--brand-rgb), .18); }
.lf-input:focus-within .lf-glyph { color: var(--brand); }
.lf-control--reveal { padding-right: 46px; }
.lf-control--bad { border-color: #f87171; background: #fef2f2; }
.lf-control--bad:focus { border-color: #ef4444; box-shadow: 0 0 0 3px rgba(239, 68, 68, .18); }
.lf-reveal { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border: 1px solid transparent; border-radius: 9px; background: transparent; color: #94a3b8; font-size: 13px; cursor: pointer; transition: border-color .2s, background .2s, color .2s; }
.lf-reveal:hover { border-color: #cbd5e1; background: #f1f5f9; color: var(--brand); }
.lf-reveal:focus-visible { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(var(--brand-rgb), .25); }
.lf-error { margin: 7px 0 0; display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 500; color: #dc2626; }

.lf-remember { margin-top: 15px; display: flex; align-items: center; gap: 11px; font-size: 12.5px; font-weight: 500; color: #475569; cursor: pointer; user-select: none; }
.lf-switch-input { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.lf-switch { position: relative; width: 42px; height: 24px; flex: 0 0 42px; border-radius: 999px; background: #cbd5e1; transition: background .2s; }
.lf-switch::after { content: ""; position: absolute; left: 2px; top: 2px; width: 20px; height: 20px; border-radius: 999px; background: #fff; box-shadow: 0 1px 2px rgba(15, 23, 42, .3); transition: transform .2s; }
.lf-switch-input:checked + .lf-switch { background: var(--brand); }
.lf-switch-input:checked + .lf-switch::after { transform: translateX(18px); }
.lf-switch-input:focus-visible + .lf-switch { box-shadow: 0 0 0 3px rgba(var(--brand-rgb), .25); }

/* The widget centred, and anything after it on its own full-width line.
   It was a single flex ROW, so the error landed in the ~60px left over beside
   a 304px widget and wrapped over five lines. */
.lf-captcha { margin-top: 15px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.lf-captcha > p { width: 100%; margin: 0; text-align: left; }
.lf-submit { margin-top: 17px; display: inline-flex; width: 100%; min-height: 48px; align-items: center; justify-content: center; gap: 9px; border: 1px solid var(--brand-800); border-radius: 12px; background: linear-gradient(135deg, var(--brand-600) 0%, var(--brand-700) 100%); font: inherit; font-size: 15px; font-weight: 700; color: #fff; cursor: pointer; transition: background .2s, border-color .2s, box-shadow .2s; }
.lf-submit:hover { background: linear-gradient(135deg, var(--brand-700) 0%, var(--brand-800) 100%); border-color: #0b1220; box-shadow: 0 16px 30px -18px rgba(var(--brand-rgb), .9); }
.lf-submit:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(var(--brand-rgb), .35); }
.lf-submit-go { font-size: 13px; transition: transform .2s; }
.lf-submit:hover .lf-submit-go { transform: translateX(2px); }

.lf-toast { margin-top: 18px; display: flex; align-items: flex-start; gap: 11px; border: 1px solid var(--brand-200); border-radius: 13px; background: var(--brand-50); padding: 13px; font-size: 12.5px; line-height: 1.6; color: #475569; }
.lf-toast i { margin-top: 3px; color: var(--brand); }
.lf-foot { margin: 20px 0 0; text-align: center; font-size: 12.5px; color: #475569; }

/* The success note on the password screens. Green because it confirms, not
   because it warns; the brand-tinted .lf-toast is for neutral information. */
.lf-note { margin-top: 18px; display: flex; align-items: flex-start; gap: 11px; border: 1px solid #a7f3d0; border-radius: 13px; background: #ecfdf5; padding: 13px; font-size: 12.5px; line-height: 1.6; color: #065f46; }
.lf-note i { margin-top: 3px; color: #059669; }