/* ============================================================
   Auth & system screens — screen-level composition.
   Built entirely on tokens + alfred.css primitives. The only
   screen-specific decisions are auth control height (38px, a
   touch more generous than in-app density) and full-bleed
   centering.
   ============================================================ */
body { background: var(--bg); }

.auth-screen {
    min-height: 100vh;
    display: grid;
    place-items: center;
    /* Symmetric vertical padding. The original 56 / 132 split inherited
       from the showcase reserved the bottom 132px for the floating demo
       switcher we do not render in the app, which pulled the centred
       card toward the top of the viewport for no real reason. 48px on
       both sides keeps a comfortable gap from the viewport edges while
       letting place-items: center do its job. */
    padding: 48px 24px 48px;
    position: relative;
}

/* Faint brand watermark behind every screen */
.auth-bg {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}
.auth-bg svg { position: absolute; color: var(--border); opacity: 0.5; }
.auth-bg .wm-1 { top: -60px; left: -50px; width: 280px; height: 305px; }
.auth-bg .wm-2 { bottom: -90px; right: -60px; width: 360px; height: 392px; }

.auth-card {
    width: 100%;
    max-width: 400px;
    position: relative;
}

.auth-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    /* Gap between the brand mark and the panel below. Bumped from 26 →
       32 because the logo itself grew; the eye reads the negative space
       around a larger mark as tighter, so the gap has to grow with it
       or the panel starts looking crammed up under the logo. */
    margin-bottom: 32px;
}
.auth-brand svg { width: 26px; height: 28px; }
.auth-brand img.brand-logo {
    /* 50px is the requested floor for the brand mark on these screens.
       The two earlier sizes (26 / 32) were sized for a small icon next
       to a separate wordmark; now that the logo image carries both the
       hexagon and the "tagshelf" wordmark the mark needs more height
       just to stay legible at common viewport widths. */
    height: 50px;
    width: auto;
    display: block;
}
.auth-brand .wordmark {
    font-size: var(--text-18);
    font-weight: var(--weight-medium);
    letter-spacing: -0.3px;
    color: var(--brand-navy);
}
[data-theme="dark"] .auth-brand .wordmark { color: var(--text-primary); }

.auth-panel {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    padding: 28px;
}

.auth-head { text-align: center; margin-bottom: 22px; }
.auth-title {
    font-size: var(--text-22);
    font-weight: var(--weight-medium);
    letter-spacing: -0.5px;
    color: var(--text-primary);
    margin: 0 0 6px;
    line-height: 1.2;
}
.auth-sub {
    font-size: var(--text-13);
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.5;
    text-wrap: pretty;
}
.auth-sub .mono {
    font-family: var(--font-mono);
    font-size: var(--text-12);
    color: var(--brand-blue-strong);
    background: var(--brand-blue-soft);
    padding: 1px 7px;
    border-radius: var(--radius-xs);
    white-space: nowrap;
}

.auth-form { display: flex; flex-direction: column; gap: 16px; }
.auth-field { display: flex; flex-direction: column; gap: 6px; }
.auth-field > .field-label { margin-bottom: 0; }

/* Auth controls run a touch taller than in-app 32px density */
.auth-screen .field { height: 38px; }
.auth-submit { width: 100%; height: 38px; font-size: var(--text-13); }
.auth-alt    { width: 100%; height: 38px; }

.auth-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.auth-link {
    font-size: var(--text-12);
    color: var(--brand-blue-strong);
    text-decoration: none;
    font-weight: var(--weight-medium);
    cursor: pointer;
    background: none;
    border: 0;
    padding: 0;
    font-family: inherit;
}

/* Anchors styled as buttons (e.g. "Sign in again" on the signed-out
   screen, "Go to dashboard" on the system error pages) inherit the
   browser default text-decoration: underline, which the design system's
   .btn primitive does not override on its own. Drop it explicitly so
   the button label sits cleanly on the filled background. */
a.btn,
a.btn:hover,
a.btn:focus {
    text-decoration: none;
}

/* Chrome / Edge paint a pale-blue background and override the text
   colour on autofilled inputs, which fights the design system's
   surface tokens. The transition trick keeps the override stable
   past the moment Chrome would normally re-apply its colour. */
.auth-screen .field input:-webkit-autofill,
.auth-screen .field input:-webkit-autofill:hover,
.auth-screen .field input:-webkit-autofill:focus,
.auth-screen .field input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 1000px var(--surface) inset;
    -webkit-text-fill-color: var(--text-primary);
    caret-color: var(--text-primary);
    transition: background-color 5000s ease-in-out 0s;
}
.auth-link:hover { text-decoration: underline; }

.pw-toggle {
    background: none;
    border: 0;
    padding: 0;
    margin: 0;
    display: inline-flex;
    align-items: center;
    color: var(--text-tertiary);
    cursor: pointer;
    flex-shrink: 0;
}
.pw-toggle:hover { color: var(--text-secondary); }

.auth-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--text-tertiary);
    font-size: var(--text-11);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    margin: 4px 0;
}
.auth-divider::before,
.auth-divider::after {
    content: "";
    height: 1px;
    background: var(--border);
    flex: 1;
}

.auth-foot {
    text-align: center;
    margin-top: 20px;
    font-size: var(--text-12);
    color: var(--text-tertiary);
}
.auth-legal {
    text-align: center;
    margin-top: 22px;
    font-size: var(--text-11);
    color: var(--text-tertiary);
    line-height: 1.6;
}
.auth-legal a { color: var(--text-secondary); text-decoration: none; }
.auth-legal a:hover { color: var(--text-primary); }

/* Centered status mark (logout / recovery-sent) */
.auth-mark-circle {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 18px;
}
.auth-mark-circle--success { background: var(--success-soft); color: var(--success); }
.auth-mark-circle--neutral { background: var(--surface-2); color: var(--text-secondary); }
.auth-mark-circle--brand   { background: var(--brand-blue-soft); color: var(--brand-blue-strong); }

/* Larger composed art for auth screens (logout) */
.auth-art-lg { display: flex; justify-content: center; }
.auth-art-lg svg { width: 190px; height: auto; }

/* Centered panels (logout / recovery-sent) breathe more than forms */
.auth-center { text-align: center; }
.auth-center .auth-mark-circle { margin-bottom: 22px; }
.auth-center .auth-art-lg { margin-bottom: 12px; }
.auth-center .auth-title { margin-bottom: 12px; }
.auth-center .auth-sub { margin-bottom: 8px; }
.auth-center .auth-form { margin-top: 24px; }

/* Inline validation copy below auth fields */
.auth-field .field-error {
    font-size: var(--text-11);
    color: var(--danger);
    line-height: 1.4;
}

/* ============ System screens (404 / 500) ============ */
.sys-wrap {
    width: 100%;
    max-width: 460px;
    text-align: center;
    position: relative;
}
.sys-art { display: flex; justify-content: center; margin-bottom: 14px; }
.sys-art svg { width: 232px; height: auto; }
.sys-code {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family: var(--font-mono);
    font-size: var(--text-11);
    letter-spacing: 0.4px;
    color: var(--text-tertiary);
    background: var(--surface-2);
    border: 1px solid var(--border);
    padding: 3px 10px;
    border-radius: var(--radius-pill);
    margin-bottom: 16px;
}
.sys-title {
    font-size: var(--text-28);
    font-weight: var(--weight-medium);
    letter-spacing: -0.7px;
    color: var(--text-primary);
    margin: 0 0 10px;
    line-height: 1.15;
}
.sys-sub {
    font-size: var(--text-14);
    color: var(--text-secondary);
    margin: 0 auto 24px;
    max-width: 380px;
    line-height: 1.55;
    text-wrap: pretty;
}
.sys-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}
.sys-incident {
    margin-top: 22px;
    font-size: var(--text-11);
    color: var(--text-tertiary);
}
.sys-incident .mono {
    font-family: var(--font-mono);
    color: var(--text-secondary);
    background: var(--surface-2);
    padding: 1px 6px;
    border-radius: var(--radius-xs);
}