/* ═══════════════════════════════════════════════════════════
   Auth — the canonical Capplon sign-in shell

   ONE look for every product's /Account/* pages (login, forgot,
   reset, register, 2fa, lockout…): a charcoal + teal backdrop with a
   centered, shadow-lifted design-system card. Promoted into the system
   so products stop re-rolling it and drifting apart (squished cards,
   off-palette backdrops). Faithful to the TNonline auth look.

   Composes existing components — it only adds the shell + brand + head:
     <div class="tn-auth-shell">
       <div class="tn-auth-card-wrap">
         <a class="tn-auth-brand" href="/">
           <span class="tn-auth-brand-mark">C</span>
           <span class="tn-auth-brand-text">Capplon</span>
         </a>
         <div class="tn-card">
           <div class="tn-auth-head">
             <h1 class="tn-auth-title">Logga in</h1>
             <p class="tn-auth-sub">Använd ditt Capplon-konto.</p>
           </div>
           <!-- tn-form-group / tn-form-label / tn-input (forms.css),
                tn-check (checks.css), tn-btn--primary tn-btn--block -->
         </div>
         <p class="tn-auth-footer">…</p>
       </div>
     </div>
   ═══════════════════════════════════════════════════════════ */

.tn-auth-shell {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--tn-page-pad-x);
    /* Charcoal base with a teal glow from the top — the Capplon auth backdrop */
    background:
        radial-gradient(900px 480px at 50% -15%, rgba(13, 115, 119, 0.55) 0%, rgba(13, 115, 119, 0) 60%),
        #15171A;
}

.tn-auth-card-wrap {
    width: 100%;
    max-width: 420px;
}

/* ── Brand lockup (teal monogram tile + wordmark) — matches the
   transactional-email header, so email + auth read as one product. ── */
.tn-auth-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: var(--tn-space-lg);
    text-decoration: none;
}

.tn-auth-brand-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--tn-radius);
    background: var(--tn-accent);
    color: #fff;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1;
}

.tn-auth-brand-text {
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--tn-text-on-dark-bright);
}

/* Lift the standard .tn-card off the dark backdrop */
.tn-auth-card-wrap .tn-card {
    box-shadow: var(--tn-shadow-lg);
}

/* ── Card head ── */
.tn-auth-head {
    text-align: center;
    margin-bottom: var(--tn-space-lg);
}

.tn-auth-title {
    margin: 0 0 4px;
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--tn-text-primary);
}

.tn-auth-sub {
    margin: 0;
    font-size: var(--tn-font-size-sm);
    color: var(--tn-text-secondary);
}

/* ── Row: remember-me ↔ forgot-link ── */
.tn-auth-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--tn-space-md);
    margin-bottom: var(--tn-space-md);
}

.tn-auth-link {
    color: var(--tn-accent);
    font-size: var(--tn-font-size-sm);
    text-decoration: none;
    white-space: nowrap;
}

.tn-auth-link:hover {
    color: var(--tn-accent-hover);
    text-decoration: underline;
}

/* ── Footer line under the card (e.g. "No account? Contact your admin") ── */
.tn-auth-footer {
    margin-top: var(--tn-space-lg);
    text-align: center;
    font-size: var(--tn-font-size-xs);
    color: var(--tn-text-on-dark);
}

.tn-auth-footer a {
    color: var(--tn-text-on-dark-bright);
    text-decoration: underline;
}