/* ===========================================================================
   Auth shell — sign in, sign up, password reset, join a team.
   Extracted from index.blade.php so the six auth pages share one design
   instead of six copies of it. Pairs with resources/views/layouts/auth.blade.php.
   =========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
body {
    margin: 0;
    font-family: 'Fira Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: var(--sq-fg);
    background: var(--sq-bg);
    -webkit-font-smoothing: antialiased;
}
.auth { display: grid; grid-template-columns: 1fr; min-height: 100vh; }
/* Brand panel: desktop only — it is decorative, so it is not rendered
   on mobile rather than squashed above the form. */
.auth__brand { display: none; }
.auth__main  { display: grid; place-items: center; padding: 32px 20px; }

@media (min-width: 900px) {
    .auth { grid-template-columns: 1.05fr 1fr; }
    .auth__brand {
        display: flex; flex-direction: column; justify-content: space-between;
        padding: 48px;
        background: linear-gradient(145deg, #4F46E5 0%, #6366F1 55%, #7C3AED 100%);
        color: #fff;
    }
}
.brand__logo { display: flex; align-items: center; gap: 12px; }
.brand__logo img { width: 40px; height: 40px; border-radius: 9px; }
.brand__logo span { font-size: 20px; font-weight: 700; letter-spacing: -.01em; }
.brand__pitch h1 { font-size: 34px; line-height: 1.2; font-weight: 700; margin: 0 0 14px; letter-spacing: -.02em; }
.brand__pitch p  { font-size: 16px; line-height: 1.6; margin: 0; color: rgba(255,255,255,.88); max-width: 42ch; }
.brand__points { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 12px; }
.brand__points li { display: flex; align-items: center; gap: 10px; font-size: 15px; color: rgba(255,255,255,.92); }
.brand__points svg { flex: 0 0 auto; }
.brand__foot { font-size: 13px; color: rgba(255,255,255,.72); }

.card {
    width: 100%; max-width: 400px;
    padding: 32px;
    background: var(--sq-card);
    border: 1px solid var(--sq-border);
    border-radius: 14px;
    box-shadow: var(--sq-shadow);
}
@media (max-width: 480px) { .card { padding: 24px 20px; } }
.card__head { margin-bottom: 24px; }
.card__mark { display: flex; align-items: center; gap: 10px; margin-bottom: 22px; }
.card__mark img { width: 36px; height: 36px; border-radius: 8px; }
.card__mark span { font-size: 18px; font-weight: 700; }
@media (min-width: 900px) { .card__mark { display: none; } }
.card__head h2 { font-size: 25px; font-weight: 700; margin: 0 0 6px; letter-spacing: -.02em; }
.card__head p  { margin: 0; color: var(--sq-muted-fg); font-size: 14px; }

.field { margin-bottom: 18px; }
.field label { display: block; font-size: 14px; font-weight: 500; margin-bottom: 6px; color: var(--sq-fg); }
.field input {
    width: 100%; min-height: 46px; padding: 10px 14px;
    font: inherit; font-size: 15px; color: var(--sq-fg);
    background: var(--sq-card);
    border: 1px solid #CBD5E1; border-radius: 9px;
    transition: border-color 160ms, box-shadow 160ms;
}
/* 4.62:1 on white — the old placeholder was ~2.5:1 */
.field input::placeholder { color: #64748B; }
.field input:hover { border-color: #94A3B8; }
.field input:focus {
    outline: none;
    border-color: var(--sq-primary);
    box-shadow: 0 0 0 3px rgba(99,102,241,.28);
}
.field input[aria-invalid="true"] { border-color: var(--sq-danger); }
.field__err { display: block; margin-top: 6px; font-size: 13px; color: var(--sq-danger); }

.row-between { display: flex; align-items: center; justify-content: flex-end; margin-bottom: 22px; }
.link { color: var(--sq-primary-600); font-size: 14px; font-weight: 500; text-decoration: none; }
.link:hover { text-decoration: underline; }
.link:focus-visible { outline: 2px solid var(--sq-ring); outline-offset: 2px; border-radius: 4px; }

.btn {
    width: 100%; min-height: 48px; padding: 12px 20px;
    font: inherit; font-size: 15px; font-weight: 600; color: #fff;
    background: var(--sq-primary-600); border: 0; border-radius: 9px;
    cursor: pointer; transition: background 160ms, transform 160ms;
}
.btn:hover { background: #4338CA; }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--sq-ring); outline-offset: 2px; }

.foot { margin-top: 26px; text-align: center; font-size: 14px; color: var(--sq-muted-fg); }

.alert {
    display: flex; gap: 10px; padding: 12px 14px; border-radius: 9px;
    font-size: 14px; margin-bottom: 20px; border: 1px solid transparent;
}
.alert--error   { background: #FEF2F2; border-color: #FECACA; color: #991B1B; }
.alert--success { background: var(--sq-accent-050); border-color: #A7F3D0; color: #065F46; }
.alert--info    { background: var(--sq-primary-050); border-color: #C7D2FE; color: #3730A3; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* Password visibility toggle. WCAG 2.2 "Accessible Authentication" wants the
   password to be checkable without retyping it from memory; a real <button>
   rather than an icon div so it is reachable and announced. */
/* The toggle is anchored to .field__control, not .field: anchoring it to the
   whole field made it slide down the moment a hint or error was added below. */
.field__control { position: relative; }
.field--password input { padding-right: 46px; }
.field__toggle {
    position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
    width: 34px; height: 34px;
    display: grid; place-items: center;
    background: none; border: 0; border-radius: 7px;
    color: var(--sq-muted-fg); cursor: pointer;
}
.field__toggle:hover { color: var(--sq-fg); background: var(--sq-muted); }
.field__toggle:focus-visible { outline: 2px solid var(--sq-ring); outline-offset: 2px; }

/* Password rules, stated up front rather than only after a failed submit. */
.field__hint { display: block; margin-top: 6px; font-size: 13px; color: var(--sq-muted-fg); }

.btn--secondary {
    background: var(--sq-card); color: var(--sq-fg);
    border: 1px solid var(--sq-border);
}
.btn--secondary:hover { background: var(--sq-muted); }

.auth__done { text-align: center; }
.auth__done .done__icon {
    width: 56px; height: 56px; margin: 0 auto 16px;
    display: grid; place-items: center; border-radius: 999px;
    background: var(--sq-accent-050); color: var(--sq-accent);
}